/* ============================================================
   Saarthi platform theme — Srujna Charitable Trust
   ------------------------------------------------------------
   Overrides Tabler 1.4.0 CSS custom properties at :root.
   Loaded AFTER tabler.min.css in base.html so the cascade wins.
   No Tabler fork. No SCSS rebuild.

   Brand palette sampled from www.srujna.org (2026-06-02):
     Primary brand maroon ... #7A1F4F  (Donate Now button, logo)
     Soft pink surface ...... #F6E9EC  (hero/section background)
     Neutral dark grey ...... #54595F  (Elementor secondary)
     Body text grey ......... #7A7A7A  (Elementor text)
   Corporate-restrained: single maroon accent, monochrome
   neutrals. The Elementor starter-kit defaults (#6EC1E4 blue,
   #61CE70 green) are unused on the live site and deliberately
   excluded.
   ============================================================ */

:root {
    --tblr-primary: #7A1F4F;
    --tblr-primary-rgb: 122, 31, 79;
    --tblr-link-color: #7A1F4F;
    --tblr-link-color-rgb: 122, 31, 79;
    --tblr-link-hover-color: #5E1740;
    --tblr-focus-ring-color: rgba(122, 31, 79, 0.25);
}

.btn-primary {
    --tblr-btn-color: #ffffff;
    --tblr-btn-bg: #7A1F4F;
    --tblr-btn-border-color: #7A1F4F;
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-bg: #5E1740;
    --tblr-btn-hover-border-color: #5E1740;
    --tblr-btn-active-color: #ffffff;
    --tblr-btn-active-bg: #4C1233;
    --tblr-btn-active-border-color: #4C1233;
}

.btn-outline-primary {
    --tblr-btn-color: #7A1F4F;
    --tblr-btn-border-color: #7A1F4F;
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-bg: #7A1F4F;
    --tblr-btn-hover-border-color: #7A1F4F;
    --tblr-btn-active-bg: #5E1740;
    --tblr-btn-active-border-color: #5E1740;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #7A1F4F;
    box-shadow: 0 0 0 0.25rem rgba(122, 31, 79, 0.25);
}

/* ============================================================
   Surface layering (Stage 37f, chunk 1)
   ------------------------------------------------------------
   The authenticated app read as flat white-on-white with no
   separation. This block adds three layers on top of Tabler:
     1. app shell (sidebar)  -> brand maroon
     2. page background      -> cream #F6E9EC
     3. content cards        -> white, lifted with border + shadow
   Colour/surface only — no layout, spacing, or semantic-state
   (success/danger/warning) changes. All text/background pairs
   meet WCAG 2.1 AA (BUILD_MAP §7.2); see PR for ratios.
   ============================================================ */

/* --- 1. Sidebar shell: brand maroon -------------------------
   The old rule here assumed a WHITE sidebar (maroon text on
   white); it is replaced because the sidebar is now maroon. */
.navbar-vertical {
    background-color: #7A1F4F;
    border-right: 0;
    /* Tabler/Bootstrap navbar vars — near-white on maroon (AA). */
    --tblr-navbar-color: #F6E9EC;
    --tblr-navbar-hover-color: #FFFFFF;
    --tblr-navbar-active-color: #FFFFFF;
    --tblr-navbar-brand-color: #FFFFFF;
    --tblr-navbar-brand-hover-color: #FFFFFF;
}

/* Nav links + brand: soft-cream default text on maroon. */
.navbar-vertical .nav-link {
    color: #F6E9EC;
}
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand a {
    color: #FFFFFF;
}

/* Hover / active / focus: a darker maroon panel, white text.
   (Replaces the maroon-text-on-white rule that assumed a white
   sidebar.) */
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus,
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link.dropdown-toggle.show {
    color: #FFFFFF;
    background-color: #5E1740;
    border-radius: 6px;
}

/* Keyboard focus must stay visible on the dark sidebar: a maroon
   ring would be invisible here, so use a high-contrast white ring
   (the maroon focus ring below still serves buttons/inputs). */
.navbar-vertical .nav-link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* Dropdown popups (Finance, etc.) stay white with dark items so
   they remain legible when they open over the maroon sidebar. */
.navbar-vertical .dropdown-menu {
    background-color: #FFFFFF;
}

/* Collapsed-mobile hamburger: white so it shows on maroon. */
.navbar-vertical .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}
.navbar-vertical .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- 2. Page background: cream ------------------------------
   #F6E9EC chosen over the lighter #FBF5F0: it gives ~1.18:1
   luminance separation from white cards (vs ~1.08:1), so cards
   visibly lift off the page, while dark body text still clears
   AA on it at ~13:1. It is also the documented brand surface. */
body,
.page,
.page-wrapper {
    background-color: #F6E9EC;
}

/* --- 3. Content cards: white, lifted off the cream ---------- */
.card {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   Component consistency (Stage 37f, chunk 2)
   ------------------------------------------------------------
   One place for pill/badge, button, section-header, spreadsheet-
   grid, and stat-tile colour so every screen matches. Semantic
   meaning is preserved — approved/available = green,
   rejected/overutilised = red, pending/warning = amber,
   neutral/info = grey, brand = maroon — but every SOLID pill,
   badge, button, and coloured cell now carries WHITE text on a
   fill deep enough to clear WCAG 2.1 AA (>=4.5:1); see PR for
   ratios. Colour only — no layout, spacing, or logic changes.
   ============================================================ */

/* Shared semantic fills (white text sits on all of these at AA). */
:root {
    --sa-success:   #1E7E34;  /* approved / available / active   */
    --sa-danger:    #B02A37;  /* rejected / overutilised         */
    --sa-warning:   #946200;  /* pending / in-progress (deep amber) */
    --sa-neutral:   #54595F;  /* neutral / secondary / info / N-A */
    --sa-header:    #54595F;  /* section / table / grid header grey */
}

/* 1. Pills / badges — every coloured badge gets white text on an
      AA-deep fill, uniformly on every screen. Fixes the black-text
      pills; the .badge.bg-* specificity also overrides any stray
      .text-dark carried in the markup, so no template churn. */
.badge.bg-success   { background-color: var(--sa-success)  !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--sa-danger)   !important; color: #fff !important; }
.badge.bg-warning   { background-color: var(--sa-warning)  !important; color: #fff !important; }
.badge.bg-info      { background-color: var(--sa-neutral)  !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--sa-neutral)  !important; color: #fff !important; }
.badge.bg-primary   { background-color: #7A1F4F           !important; color: #fff !important; }

/* 2. Solid coloured buttons — same fills as the pills so a green
      button matches a green pill (white text, AA). btn-primary and
      btn-outline-primary keep their chunk-1 maroon definitions. */
.btn-success {
    --tblr-btn-color: #fff; --tblr-btn-bg: #1E7E34; --tblr-btn-border-color: #1E7E34;
    --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: #1A6B2C; --tblr-btn-hover-border-color: #1A6B2C;
    --tblr-btn-active-color: #fff; --tblr-btn-active-bg: #155724; --tblr-btn-active-border-color: #155724;
}
.btn-danger {
    --tblr-btn-color: #fff; --tblr-btn-bg: #B02A37; --tblr-btn-border-color: #B02A37;
    --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: #97232F; --tblr-btn-hover-border-color: #97232F;
    --tblr-btn-active-color: #fff; --tblr-btn-active-bg: #7F1D28; --tblr-btn-active-border-color: #7F1D28;
}
.btn-warning {
    --tblr-btn-color: #fff; --tblr-btn-bg: #946200; --tblr-btn-border-color: #946200;
    --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: #7C5200; --tblr-btn-hover-border-color: #7C5200;
    --tblr-btn-active-color: #fff; --tblr-btn-active-bg: #5F3F00; --tblr-btn-active-border-color: #5F3F00;
}
.btn-secondary {
    --tblr-btn-color: #fff; --tblr-btn-bg: #54595F; --tblr-btn-border-color: #54595F;
    --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: #464A4F; --tblr-btn-hover-border-color: #464A4F;
    --tblr-btn-active-color: #fff; --tblr-btn-active-bg: #383B40; --tblr-btn-active-border-color: #383B40;
}

/* 3. Headers — ONE dark-grey treatment applied APP-WIDE via CSS so
      every screen's headers are visually identical, with no
      per-template edits. Two header surfaces are targeted:
        (a) .card-header  — every card's title/section bar
        (b) table column-header rows — thead th on every list page
      Both -> background #54595F (brand neutral) + white text,
      7.07:1 (WCAG AA). Fixes the earlier miss where only two hand-
      swept screens were dark and every list-page header stayed
      light. .sa-section-header (chunk 2) is kept and now matches. */

/* (a) Card headers — non-!important so semantic bg-* headers below
       still win; plain and .sa-section-header headers pick this up. */
.card-header {
    background-color: var(--sa-header);
    color: #fff;
}
.card-header.sa-section-header { background-color: var(--sa-header); color: #fff; }
/* A header carrying .bg-light (an out-of-scope light utility) is
   forced dark too, so no screen is left washed-out. */
.card-header.bg-light { background-color: var(--sa-header) !important; color: #fff !important; }

/* Header contents kept legible on the grey: plain links white,
   muted text lightened, ghost (outline) action buttons turned into
   white outlines that invert on hover, badges keep their own fill. */
.card-header a:not(.btn) { color: #fff; }
.card-header .text-muted { color: #E3E4E6 !important; }
.card-header .btn-outline-secondary,
.card-header .btn-outline-primary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.card-header .btn-outline-secondary:hover,
.card-header .btn-outline-primary:hover {
    color: var(--sa-header);
    background-color: #fff;
    border-color: #fff;
}

/* (b) Table column headers on every list page / in-card table —
       higher specificity than Tabler's cell-bg rule, plus
       !important, so both plain <thead> (currently light) and
       <thead class="table-dark/table-light"> resolve to the one
       grey. Only header cells (thead th/td) are touched — tbody /
       tfoot DATA cells, including the fund grid's green=available /
       red=overutilised cells, are deliberately left alone. */
.table thead th,
.table thead td {
    background-color: var(--sa-header) !important;
    color: #fff !important;
    border-bottom-color: #454A50 !important;
}
.table thead th a { color: #fff; }

/* Semantic form headers keep their meaning (source = red /
   destination = green) but use the AA-deep shades + white text,
   matching the pills. A danger-text header (e.g. Cancel / Void)
   becomes a proper red header rather than red-on-grey. */
.card-header.bg-danger,
.card-header.text-danger  { background-color: var(--sa-danger)  !important; color: #fff !important; }
.card-header.bg-success { background-color: var(--sa-success) !important; color: #fff !important; }

/* 4. Fund-optimisation grid — its sticky header/chrome cells use the
      SAME grey as every other header; the green = available /
      red = overutilised DATA cells use the semantic pill shades.
      Only colour lives here — sticky/z-index/sizing stays inline. */
.sa-grid-head         { background-color: var(--sa-header); color: #fff; }
.sa-grid-rowhead      { background-color: #F1F3F5; color: #182433; }
.sa-cell-available    { background-color: var(--sa-success); color: #fff; }
.sa-cell-overutilised { background-color: var(--sa-danger);  color: #fff; }

/* 5. Dashboard stat tiles — soft tinted tiles keep their light
      look (they are tiles, not pills) but the colour is
      centralised here and the muted label is darkened to clear AA
      on the tint. */
.sa-tile-success { background-color: #D1E7DD; }
.sa-tile-info    { background-color: #E8F4FD; }
.sa-tile-neutral { background-color: #E2E3E5; }
.sa-tile-warning { background-color: #FFF3CD; }
.sa-tile-danger  { background-color: #F8D7DA; }
[class*="sa-tile-"] .text-muted { color: #495057 !important; }

/* ============================================================
   Mobile field-ops touch targets (Stage 37e)
   ------------------------------------------------------------
   TRAINER_MOBILE_UX_DESIGN §4: every tappable control on a
   phone gets at least a ~48px touch target for one-handed
   field capture. Applied at phone width only (<576px) so the
   desktop layout is untouched, and as a FLOOR (min-height) so
   a control that is already large — the survey-wizard answer
   buttons, the large form buttons — is never shrunk. min-height
   (not display:flex) so buttons whose label stacks over an icon,
   e.g. the dashboard quick-action cards, keep their layout.
   Global rule, not per-screen: a bigger tap target on every
   screen at phone width helps and never regresses desktop.
   ============================================================ */
@media (max-width: 575.98px) {
    .btn,
    .form-control,
    .form-select {
        min-height: 48px;
    }
}