/* ============================================================
   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.

   W-861 chunk 1 (2026-10-15): the Monday.com-style look Sunill
   locked in the mock-ups (OneDrive > Inbox > Saarthi >
   saarthi_menu_top_14oct26_v12..v38). "whatever the mocks says is
   final." Brief: docs/briefs/W-861-chunk-1-base-look.md.
   The Srujna maroon of 2026-06 and its whole family is GONE
   from every office screen; its place is taken by the blue-purple
   family below. Main buttons are Monday blue. Every colour is
   named ONCE in the :root block and every rule reads the name.
   Fonts (Figtree, Poppins) are kept inside Saarthi —
   saarthi/css/fonts.css, loaded by base.html before this file.
   ============================================================ */

:root {
    /* Surfaces and words */
    --sa-page:      #F6F7FB;  /* page background                     */
    --sa-box:       #FFFFFF;  /* boxes (cards), pop-ups, left menu   */
    --sa-line:      #E6E9EF;  /* thin lines round boxes and fields   */
    --sa-hover:     #F0F2F7;  /* a row or menu item under the mouse  */
    --sa-ink:       #323338;  /* words                               */
    --sa-ink-2:     #676879;  /* second-level words, table headings  */
    --sa-muted:     #9699A6;  /* faint words                         */
    --sa-head-bg:   #FAFBFD;  /* table heading rows (W-861 D2)       */

    /* Main action: Monday blue */
    --sa-blue:      #0073EA;
    --sa-blue-d:    #0060B9;  /* hover   */
    --sa-blue-dd:   #004E96;  /* pressed */
    --sa-blue-l:    #E6F1FD;

    /* Blue-purple: everything that was maroon */
    --sa-brand:     #6161FF;
    --sa-brand-d:   #4B4BE0;
    --sa-brand-m:   #8F8FFF;
    --sa-brand-l:   #EEEEFF;

    /* Meaning */
    --sa-success:   #00C875;  /* done / approved / paid / available  */
    --sa-success-d: #00A862;
    --sa-success-l: #E5F8EF;
    --sa-danger:    #E2445C;  /* rejected / overutilised             */
    --sa-danger-d:  #C62F45;
    --sa-danger-l:  #FDECEE;
    --sa-warning:   #FDAB3D;  /* waiting / in progress               */
    --sa-warning-d: #E8952A;
    --sa-warning-l: #FFF4E0;
    --sa-neutral:   #C3C6D4;  /* neutral / N-A (dark words on it)    */

    /* W-859: the top menu's six areas (mock-up v38) — main, light, soft */
    --sa-area-home:      #6161FF; --sa-area-home-2:     #8F8FFF; --sa-area-home-soft:     #EEEEFF;
    --sa-area-finance:   #0073EA; --sa-area-finance-2:  #579BFC; --sa-area-finance-soft:  #E6F1FD;
    --sa-area-field:     #00A862; --sa-area-field-2:    #00C875; --sa-area-field-soft:    #E5F8EF;
    --sa-area-programs:  #A25DDC; --sa-area-programs-2: #C38BEB; --sa-area-programs-soft: #F4ECFB;
    --sa-area-hr:        #E8912D; --sa-area-hr-2:       #FDAB3D; --sa-area-hr-soft:       #FFF3E1;
    --sa-area-admin:     #5A6A8A; --sa-area-admin-2:    #8C9AB8; --sa-area-admin-soft:    #EDF0F6;
    --sa-quick:          #FF7575; --sa-quick-2:         #FF9F6E;
    --sa-shadow:         0 4px 8px rgba(0,0,0,.04), 0 16px 40px rgba(29,45,92,.12);

    /* Tabler's own names, pointed at ours */
    --tblr-primary: #0073EA;
    --tblr-primary-rgb: 0, 115, 234;
    --tblr-link-color: #0073EA;
    --tblr-link-color-rgb: 0, 115, 234;
    --tblr-link-hover-color: #0060B9;
    --tblr-focus-ring-color: rgba(0, 115, 234, 0.15);
    --tblr-body-bg: #F6F7FB;
    --tblr-body-color: #323338;
    --tblr-border-color: #E6E9EF;
    --tblr-font-sans-serif: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
    --tblr-body-font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    font-family: var(--tblr-body-font-family);
    color: var(--sa-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title, .modal-title {
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.btn {
    border-radius: 8px;
    font-weight: 600;
}

.btn-primary {
    --tblr-btn-color: #ffffff;
    --tblr-btn-bg: var(--sa-blue);
    --tblr-btn-border-color: var(--sa-blue);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-bg: var(--sa-blue-d);
    --tblr-btn-hover-border-color: var(--sa-blue-d);
    --tblr-btn-active-color: #ffffff;
    --tblr-btn-active-bg: var(--sa-blue-dd);
    --tblr-btn-active-border-color: var(--sa-blue-dd);
}

.btn-outline-primary {
    --tblr-btn-color: var(--sa-blue);
    --tblr-btn-border-color: var(--sa-blue);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-bg: var(--sa-blue);
    --tblr-btn-hover-border-color: var(--sa-blue);
    --tblr-btn-active-bg: var(--sa-blue-d);
    --tblr-btn-active-border-color: var(--sa-blue-d);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--sa-blue);
    box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.15);
}

/* ============================================================
   Surface layering (Stage 37f, chunk 1; W-861 chunk 1)
   ------------------------------------------------------------
   Three layers on top of Tabler:
     1. app shell             -> the coloured top bar (W-859)
     2. page background       -> pale grey #F6F7FB
     3. content cards         -> white, 12px corners, thin line
   ============================================================ */

/* --- 1. The menu: the coloured top bar (W-859) ---------------
   The white left menu is gone (W-859 chunk 1, 2026-10-15). The top
   bar's look is at the end of this file, under W-859. */

/* --- 2. Page background: pale grey -------------------------- */
body,
.page,
.page-wrapper {
    background-color: var(--sa-page);
}

/* --- 3. Content cards: white, thin line, 12px corners ------- */
.card {
    background-color: var(--sa-box);
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    box-shadow: none;
    --tblr-card-border-radius: 12px;
    --tblr-card-inner-border-radius: 11px;
}

/* ============================================================
   Component consistency (Stage 37f, chunk 2; W-861 chunk 1)
   ------------------------------------------------------------
   One place for pill/badge, button, section-header, spreadsheet-
   grid, and stat-tile colour so every screen matches. Meaning is
   kept — approved/available = green, rejected/overutilised = red,
   pending/warning = amber, neutral = grey — in the mock-ups'
   shades, with white words as the mock-ups draw them.
   ============================================================ */

/* 1. Pills / badges. */
.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: var(--sa-ink) !important; }
.badge.bg-secondary { background-color: var(--sa-neutral) !important; color: var(--sa-ink) !important; }
.badge.bg-primary   { background-color: var(--sa-brand)   !important; color: #fff !important; }

/* 2. Solid coloured buttons — same fills as the pills. */
.btn-success {
    --tblr-btn-color: #fff; --tblr-btn-bg: var(--sa-success); --tblr-btn-border-color: var(--sa-success);
    --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: var(--sa-success-d); --tblr-btn-hover-border-color: var(--sa-success-d);
    --tblr-btn-active-color: #fff; --tblr-btn-active-bg: var(--sa-success-d); --tblr-btn-active-border-color: var(--sa-success-d);
}
.btn-danger {
    --tblr-btn-color: #fff; --tblr-btn-bg: var(--sa-danger); --tblr-btn-border-color: var(--sa-danger);
    --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: var(--sa-danger-d); --tblr-btn-hover-border-color: var(--sa-danger-d);
    --tblr-btn-active-color: #fff; --tblr-btn-active-bg: var(--sa-danger-d); --tblr-btn-active-border-color: var(--sa-danger-d);
}
.btn-warning {
    --tblr-btn-color: #fff; --tblr-btn-bg: var(--sa-warning); --tblr-btn-border-color: var(--sa-warning);
    --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: var(--sa-warning-d); --tblr-btn-hover-border-color: var(--sa-warning-d);
    --tblr-btn-active-color: #fff; --tblr-btn-active-bg: var(--sa-warning-d); --tblr-btn-active-border-color: var(--sa-warning-d);
}
/* The plain grey button becomes the mock-ups' white button with a line. */
.btn-secondary {
    --tblr-btn-color: var(--sa-ink); --tblr-btn-bg: var(--sa-box); --tblr-btn-border-color: var(--sa-line);
    --tblr-btn-hover-color: var(--sa-ink); --tblr-btn-hover-bg: var(--sa-hover); --tblr-btn-hover-border-color: var(--sa-neutral);
    --tblr-btn-active-color: var(--sa-ink); --tblr-btn-active-bg: var(--sa-hover); --tblr-btn-active-border-color: var(--sa-neutral);
}

/* 3. Headers (W-861 D2 — the dark-grey strips are gone).
      (a) .card-header — every box's title strip: white, dark bold
          words, a 4px blue bar at the left (the mock-ups' form
          sections). One rule app-wide, no per-template edits.
      (b) table column-header rows — very light grey, grey words. */

/* (a) Box title strips. */
.card-header,
.card-header.sa-section-header,
.card-header.bg-light {
    background-color: var(--sa-box) !important;
    color: var(--sa-ink) !important;
    border-bottom: 1px solid var(--sa-line);
    font-weight: 700;
}
.card-header::before,
.section-band::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--sa-bar, var(--sa-blue));
    margin-right: 10px;
    vertical-align: -3px;
}

/* Header contents: links blue (E3 — a white link would vanish on
   white), muted words stay grey, outline buttons as normal. */
.card-header a:not(.btn) { color: var(--sa-blue); }

/* (b) Table column headers on every list page / in-card table —
       plain <thead>, table-dark and table-light all resolve to the
       one light row (E6). Only header cells are touched — tbody /
       tfoot DATA cells, including the fund grid's green / red cells,
       are left alone. */
.table thead th,
.table thead td {
    background-color: var(--sa-head-bg) !important;
    color: var(--sa-ink-2) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: normal;
    border-bottom-color: var(--sa-line) !important;
}
.table thead th a { color: var(--sa-ink-2); }

/* Meaning-carrying strips (source = red / destination = green,
   Cancel / Void = red) keep their meaning as the bar and the words. */
.card-header.bg-danger,
.card-header.text-danger,
.section-band.text-danger {
    --sa-bar: var(--sa-danger);
    background-color: var(--sa-box) !important;
    color: var(--sa-danger-d) !important;
}
.card-header.bg-success {
    --sa-bar: var(--sa-success);
    background-color: var(--sa-box) !important;
    color: var(--sa-ink) !important;
}

/* 4. Fund-optimisation grid — its sticky header cells use the SAME
      light row as every other table heading; the green = available /
      red = overutilised DATA cells use the pill shades. */
.sa-grid-head         { background-color: var(--sa-head-bg); color: var(--sa-ink-2); }
.sa-grid-rowhead      { background-color: var(--sa-hover); color: var(--sa-ink); }
.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 tints of the same meanings. */
.sa-tile-success { background-color: var(--sa-success-l); }
.sa-tile-info    { background-color: var(--sa-blue-l); }
.sa-tile-neutral { background-color: var(--sa-hover); }
.sa-tile-warning { background-color: var(--sa-warning-l); }
.sa-tile-danger  { background-color: var(--sa-danger-l); }
[class*="sa-tile-"] .text-muted { color: var(--sa-ink-2) !important; }

/* 6. Progress-bar track (W-615, Sunill 2026-09-11) — Tabler's default
      track is so pale it reads as blank paper, so a bar at or near 0%
      looked like a broken empty cell rather than a real "nothing
      achieved yet". A mid grey keeps the track visibly a track.
      Site-wide on purpose: the two dashboard bars and the survey
      wizard's bar are the same control and must not drift apart. */
.progress { background-color: var(--sa-neutral); }

/* ============================================================
   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 is never shrunk.
   ============================================================ */
@media (max-width: 575.98px) {
    .btn,
    .form-control,
    .form-select {
        min-height: 48px;
    }
}

/* ============================================================
   Form boxes (W-861 D3) — the mock-ups' fields: 8px corners,
   a thin line, a blue ring on focus. Site-wide.
   ============================================================ */
.form-control,
.form-select,
.input-group-text {
    border-radius: 8px;
    border-color: var(--sa-line);
    color: var(--sa-ink);
}
.form-control[readonly] {
    background-color: var(--sa-page);
    color: var(--sa-ink-2);
}
.form-check-input:checked {
    background-color: var(--sa-blue);
    border-color: var(--sa-blue);
}

/* ============================================================
   Form section bands (W-515; W-861 D3)
   ------------------------------------------------------------
   The heading strip that separates a long form/detail page into
   sections. Was a solid maroon strip (Sunill, 2026-08-17: the
   muted grey headings were not visible enough). Now the mock-ups'
   section heading: white, dark bold words, a 4px blue bar at the
   left (the ::before rule in "Headers" above), a line beneath.
   ============================================================ */
.section-band a:not(.btn) { color: var(--sa-blue); }

.section-band {
    background: var(--sa-box);
    color: var(--sa-ink);
    padding: 0.8rem 1.1rem;
    font-weight: 700;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--sa-line);
    display: flex;
    align-items: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* W-515 chunk 2 (2026-08-19): the house look above was written for the donor
   screens and scoped to a class named after them. Every screen built from now
   on follows the same standard (RULES.md, "Screen look and form behaviour"),
   so each rule also answers to the honest name `.form-page`. `.donor-page`
   still works — the donor screens are untouched. Any screen wanting the house
   look now says class="form-page" and means it. */

/* W-515 round 3 had field labels in maroon; the mock-ups draw them dark and
   bold (W-861 D3). */
.donor-page .form-label,
.donor-page .field-label,
.form-page .form-label,
.form-page .field-label {
    color: var(--sa-ink);
    font-weight: 600;
}

/* W-515 round 5: tick boxes were invisible against the white card — they keep
   a clear outline, and fill blue when ticked. */
.donor-page .form-check-input,
.form-page .form-check-input {
    border: 2px solid var(--sa-muted);
    width: 1.15rem;
    height: 1.15rem;
}
.donor-page .form-check-input:checked,
.form-page .form-check-input:checked {
    background-color: var(--sa-blue);
    border-color: var(--sa-blue);
}
.donor-page .form-check-label,
.form-page .form-check-label {
    padding-left: 0.15rem;
}

/* W-515 round 7 darkened field outlines on the donor screens; the mock-ups
   draw every box with the same thin line, and that wins (W-861: "whatever
   the mocks says is final"). Hover darkens it so the box is found. */
.donor-page .form-control:hover,
.donor-page .form-select:hover,
.form-page .form-control:hover,
.form-page .form-select:hover {
    border-color: var(--sa-neutral);
}
.donor-page .table > :not(caption) > * > *,
.form-page .table > :not(caption) > * > * {
    border-bottom-color: var(--sa-line);
}

/* A read-only record table: one label column, one value column, the SAME
   width on every table on the page. Set here rather than per row, so a row
   added later cannot land out of line with the ones above it — the untidiness
   Sunill found on the donation page, 2026-08-21. */
.form-page .record-table th {
    width: 38%;
    color: var(--sa-ink-2);
    font-weight: 500;
    vertical-align: top;
}

.form-page .record-table td {
    vertical-align: top;
}

/* The last row of a group carries no rule, so the group's own heading is the
   only divider the eye follows. */
.form-page .record-table tr:last-child > th,
.form-page .record-table tr:last-child > td {
    border-bottom: 0;
}

/* A named divider INSIDE a card, for a block that belongs to the section but
   deserves its own heading (the address inside "Who is the donor"). */
.donor-page .subsection-rule,
.form-page .subsection-rule {
    color: var(--sa-brand);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-top: 2px solid var(--sa-brand-l);
    padding-top: 0.75rem;
    margin: 1.25rem 0 0.75rem;
}

/* ── DATE BOXES — moved out of this file (W-570) ────────────────────────────
   The behaviour lives in templates/_date_box.html, which base.html pulls into
   the head of EVERY page with include, so no browser cache can serve a stale
   copy (Sunill: "no browser cache should ever interfere in this"). Nothing
   about date boxes belongs in this file. */

/* W-597 (2026-09-07): an Add pop-up wears the same strip as a section card —
   now the white heading with the blue bar (W-861). Tabler's .modal-header
   keeps the flex row and the close button's place. These rules settle what
   the two disagree on: the divider line, the heading's own font (an <h5>
   inside the strip), and the close mark. */
.modal-header.section-band {
    border-bottom: 1px solid var(--sa-line);
}
.modal-header.section-band .modal-title {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    line-height: inherit;
}
.modal-header.section-band .btn-close {
    margin-left: auto;
}

/* W-864 (2026-10-15): Saarthi's own pop-up in place of the browser's grey
   confirm box — the mock-up v6 shape: a coloured icon, the question, the
   explanation, "Keep it" and the action button. Built by
   static/saarthi/js/sa_confirm.js. Sits ABOVE a Bootstrap pop-up (the Edit
   block window asks from inside one), never prints, fits a phone. */
.sa-pop-bg {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(41, 47, 76, 0.35);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sa-pop {
    background: var(--sa-box);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(41, 47, 76, 0.22);
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    color: var(--sa-ink);
}
.sa-pop-h {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 12px;
}
.sa-pop-h h3 {
    margin: 0;
    font-size: 17px;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    line-height: 1.35;
}
.sa-pop-i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    font-weight: 700;
    font-size: 18px;
}
.sa-pop-i-red   { background: var(--sa-danger-l);  color: var(--sa-danger); }
.sa-pop-i-green { background: var(--sa-success-l); color: var(--sa-success-d); }
.sa-pop-i-blue  { background: var(--sa-blue-l);    color: var(--sa-blue); }
.sa-pop-x {
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--sa-muted);
    cursor: pointer;
    align-self: flex-start;
}
.sa-pop-b {
    padding: 4px 20px 8px;
}
.sa-pop-b p {
    margin: 0;
    color: var(--sa-ink-2);
    line-height: 1.5;
}
.sa-pop-f {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px 18px;
}
.sa-pop-keep {
    background: var(--sa-box);
    border: 1px solid var(--sa-line);
    color: var(--sa-ink);
}
.sa-pop-keep:hover { background: var(--sa-hover); }
.sa-pop-yes { border: 0; color: #FFFFFF; }
.sa-pop-yes-red   { background: var(--sa-danger); }
.sa-pop-yes-red:hover   { background: var(--sa-danger-d); color: #FFFFFF; }
.sa-pop-yes-green { background: var(--sa-success-d); }
.sa-pop-yes-green:hover { background: var(--sa-success-d); color: #FFFFFF; filter: brightness(0.92); }
.sa-pop-yes-blue  { background: var(--sa-blue); }
.sa-pop-yes-blue:hover  { background: var(--sa-blue-d); color: #FFFFFF; }
@media print {
    .sa-pop-bg { display: none !important; }
}

/* ── W-859 chunk 1 (2026-10-15): the coloured top menu, mock-up v38 ─────────
   Drawn by templates/_top_menu.html from apps/core/top_menu.py; opened and
   closed by static/saarthi/js/top_menu.js. Each area reads its colours
   through --c / --c2 / --soft, set by its .sa-a-<key> class below. */
.sa-a-home     { --c: var(--sa-area-home);     --c2: var(--sa-area-home-2);     --soft: var(--sa-area-home-soft); }
.sa-a-finance  { --c: var(--sa-area-finance);  --c2: var(--sa-area-finance-2);  --soft: var(--sa-area-finance-soft); }
.sa-a-field    { --c: var(--sa-area-field);    --c2: var(--sa-area-field-2);    --soft: var(--sa-area-field-soft); }
.sa-a-programs { --c: var(--sa-area-programs); --c2: var(--sa-area-programs-2); --soft: var(--sa-area-programs-soft); }
.sa-a-hr       { --c: var(--sa-area-hr);       --c2: var(--sa-area-hr-2);       --soft: var(--sa-area-hr-soft); }
.sa-a-admin    { --c: var(--sa-area-admin);    --c2: var(--sa-area-admin-2);    --soft: var(--sa-area-admin-soft); }

svg.sa-i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
           stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.sa-top {
    position: sticky; top: 0; z-index: 1030;
    background: var(--sa-box); border-bottom: 1px solid var(--sa-line);
    height: 64px; display: flex; align-items: center; gap: 6px; padding: 0 20px;
}
.sa-logo { display: flex; align-items: center; gap: 10px; text-decoration: none;
           color: var(--sa-ink); margin-right: 14px; flex: none; }
.sa-logo:hover { text-decoration: none; color: var(--sa-ink); }
.sa-logo img { height: 40px; width: 40px; object-fit: contain; }
.sa-logo b { font-family: Poppins, system-ui, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.01em; }

.sa-nav { display: flex; align-items: center; gap: 2px; height: 100%; }
.sa-area { height: 100%; display: flex; align-items: center; }
.sa-area-btn, .sa-quick-btn {
    position: relative; height: 40px; display: flex; align-items: center; gap: 8px;
    border: 0; background: none; font: inherit; font-weight: 500; font-size: 14.5px;
    color: var(--sa-ink); padding: 0 12px; border-radius: 8px; cursor: pointer;
    white-space: nowrap; text-decoration: none;
}
.sa-area-btn:hover, .sa-area.open .sa-area-btn { background: var(--sa-hover); }
.sa-chip { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
           color: #FFFFFF; background: var(--c); }
.sa-chip svg.sa-i { width: 14px; height: 14px; stroke-width: 2.2; }
svg.sa-car { width: 12px; height: 12px; stroke-width: 2.4; color: var(--sa-muted); transition: transform .15s; }
.sa-area.open svg.sa-car { transform: rotate(180deg); }
/* D3: the area you are on is underlined in its own colour. */
.sa-area.here .sa-area-btn::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -12px;
    height: 3px; border-radius: 3px; background: var(--c);
}
.sa-quick-btn { background: linear-gradient(135deg, var(--sa-quick), var(--sa-quick-2)); color: #FFFFFF;
                margin-left: 6px; padding: 0 14px; box-shadow: 0 2px 6px rgba(255,117,117,.35); }
.sa-quick-btn:hover { color: #FFFFFF; text-decoration: none; filter: brightness(0.96); }

.sa-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sa-ibtn { position: relative; width: 38px; height: 38px; border-radius: 8px; border: 0; background: none;
           color: var(--sa-ink-2); display: grid; place-items: center; cursor: pointer; }
.sa-ibtn:hover { background: var(--sa-hover); color: var(--sa-ink-2); }
.sa-n { position: absolute; top: 3px; right: 2px; background: var(--sa-danger); color: #FFFFFF;
        font-size: 10.5px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 16px;
        border: 2px solid #FFFFFF; }
.sa-burger { display: none; }

.sa-me { position: relative; margin-left: 4px; }
.sa-me summary { list-style: none; }
.sa-me summary::-webkit-details-marker { display: none; }
.sa-av { width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
         background: linear-gradient(135deg, var(--sa-area-programs), var(--sa-area-finance-2));
         color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.sa-me-box { position: absolute; right: 0; top: 44px; min-width: 200px; background: var(--sa-box);
             border: 1px solid var(--sa-line); border-radius: 12px; box-shadow: var(--sa-shadow);
             padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 1040; }
.sa-me-box b { font-weight: 600; }
.sa-me-box a { color: var(--sa-danger); font-weight: 600; text-decoration: none; }

/* W-892 — the search box under the magnifier (brief D1, D6, E10). */
.sa-search { position: relative; }
.sa-search-box { display: none; position: absolute; right: 0; top: 44px; width: 420px; max-width: calc(100vw - 24px);
                 background: var(--sa-box); border: 1px solid var(--sa-line); border-radius: 12px;
                 box-shadow: var(--sa-shadow); padding: 12px; z-index: 1040; }
.sa-search.open .sa-search-box { display: block; }
.sa-search-box form { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px;
                      border: 1px solid var(--sa-line); border-radius: 8px; color: var(--sa-muted); }
.sa-search-box form:focus-within { border-color: var(--sa-blue); }
.sa-search-box input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--sa-ink); background: none; }
.sa-search-results { max-height: 60vh; overflow-y: auto; }
.sa-search-results:not(:empty) { margin-top: 10px; }
.sa-sr-note { margin: 4px 2px; color: var(--sa-ink-2); font-size: 13px; }
.sa-sr-group + .sa-sr-group { border-top: 1px solid var(--sa-line); margin-top: 6px; padding-top: 6px; }
.sa-sr-group h4 { margin: 4px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
                  text-transform: uppercase; color: var(--sa-muted); }
.sa-sr-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 8px; border-radius: 8px;
             color: var(--sa-ink); text-decoration: none; }
.sa-sr-row:hover, .sa-sr-row.on { background: var(--sa-hover); color: var(--sa-ink); text-decoration: none; }
.sa-sr-row b { font-weight: 600; }
.sa-sr-row small { color: var(--sa-ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-sr-tag { margin-left: auto; flex: none; font-size: 11px; color: var(--sa-ink-2); background: var(--sa-hover);
             border-radius: 6px; padding: 1px 6px; }
.sa-sr-fold summary { cursor: pointer; padding: 5px 8px; color: var(--sa-ink-2); font-size: 13px; list-style: none; }
.sa-sr-fold summary::-webkit-details-marker { display: none; }
.sa-sr-fold summary:hover { color: var(--sa-blue); }
.sa-sr-fold .sa-sr-row b { color: var(--sa-ink-2); font-weight: 500; }

/* The drop-down under the bar. Opens on .open (script) or, with the script
   off, on keyboard focus inside the area. */
.sa-mega { position: fixed; left: 0; right: 0; top: 64px; z-index: 1020; display: none; }
.sa-area.open .sa-mega,
.sa-nav:not(.sa-js) .sa-area:focus-within .sa-mega { display: block; }
.sa-mega::before { content: ""; position: fixed; inset: 64px 0 0 0; background: rgba(41,47,76,.18); z-index: -1; }
.sa-mega-card { background: var(--sa-box); border-bottom: 1px solid var(--sa-line); box-shadow: var(--sa-shadow);
                padding: 26px 32px 30px; display: flex; gap: 40px;
                max-height: calc(100vh - 64px); overflow-y: auto; animation: sa-drop .16s ease; }
@keyframes sa-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sa-cols { flex: 1; display: flex; gap: 28px; flex-wrap: wrap; }
.sa-col { min-width: 220px; flex: 0 1 270px; }
.sa-col h4 { margin: 0 0 10px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--sa-muted);
             text-transform: uppercase; letter-spacing: .06em; }
.sa-mi { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
         text-decoration: none; color: var(--sa-ink); margin: 0 -10px 2px; }
.sa-mi:hover { background: var(--sa-hover); color: var(--sa-ink); text-decoration: none; }
.sa-tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
           background: var(--soft); color: var(--c); }
.sa-mi b { display: block; font-weight: 600; font-size: 14.5px; }
.sa-mi small { display: block; color: var(--sa-ink-2); font-size: 13px; }
.sa-badge { margin-left: auto; background: var(--sa-danger); color: #FFFFFF; border-radius: 10px;
            font-size: 11.5px; font-weight: 700; padding: 1px 8px; }
.sa-also { margin-left: auto; font-size: 11.5px; color: var(--sa-muted); white-space: nowrap; }
.sa-promo { width: 280px; flex: none; border-radius: 14px; padding: 20px; color: #FFFFFF;
            background: linear-gradient(140deg, var(--c), var(--c2)); display: flex; flex-direction: column;
            gap: 8px; align-self: flex-start; }
.sa-promo b { font-family: Poppins, system-ui, sans-serif; font-weight: 600; font-size: 17px; }
.sa-promo span { opacity: .92; font-size: 13.5px; line-height: 1.45; }
.sa-promo a { align-self: flex-start; margin-top: 6px; background: #FFFFFF; color: var(--sa-ink);
              font-weight: 600; padding: 9px 14px; border-radius: 8px; text-decoration: none; }

/* Quick access: opens by its #sa-quick address, so it works with the
   script off; the script adds Escape and click-outside. */
.sa-veil { position: fixed; inset: 0; z-index: 1050; background: rgba(246,247,251,.7);
           backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
           display: none; align-items: center; justify-content: center; padding: 24px; }
.sa-veil:target, .sa-veil.show { display: flex; }
.sa-qa { --sq: min(calc((100vh - 130px) / 2), calc((100vw - 120px) / 2), 420px); }
.sa-qa-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sa-qa-top h2 { margin: 0; font-size: 20px; }
.sa-qa-top p { margin: 0; color: var(--sa-ink-2); font-size: 13px; }
.sa-back { background: var(--sa-box); border: 1px solid var(--sa-line); border-radius: 8px; padding: 7px 12px;
           color: var(--sa-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sa-back:hover { background: var(--sa-hover); color: var(--sa-ink); text-decoration: none; }
.sa-qa-grid { display: grid; grid-template-columns: repeat(2, var(--sq)); grid-auto-rows: var(--sq); gap: 18px; }
.sa-blk { background: var(--sa-box); border-radius: 16px; box-shadow: var(--sa-shadow); overflow: hidden;
          display: flex; flex-direction: column; border-top: 5px solid var(--c); }
.sa-blk h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px 10px;
             font-family: inherit; font-size: 15.5px; font-weight: 700; }
.sa-blk h3 .sa-tile { width: 32px; height: 32px; border-radius: 9px; }
.sa-blk h3 small { display: block; font-weight: 400; color: var(--sa-ink-2); font-size: 12.5px; }
.sa-list { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.sa-it { display: flex; gap: 6px; }
.sa-go { flex: 1; height: 34px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px;
         background: var(--sa-page); color: var(--sa-ink); text-decoration: none; font-weight: 500;
         border: 1px solid transparent; }
.sa-go:hover { background: var(--soft); border-color: var(--c); color: var(--sa-ink); text-decoration: none; }
.sa-add { width: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--soft);
          color: var(--c); text-decoration: none; font-size: 19px; font-weight: 600; }
.sa-add:hover { background: var(--c); color: #FFFFFF; text-decoration: none; }

/* D7 — phone and narrow screens: the areas fold behind the menu button. */
@media (max-width: 991.98px) {
    .sa-top { padding: 0 12px; }
    .sa-burger { display: grid; }
    .sa-nav { display: none; }
    .sa-nav.phone { display: flex; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
                    background: var(--sa-box); flex-direction: column; align-items: stretch;
                    padding: 12px; gap: 4px; height: auto; overflow-y: auto; }
    .sa-nav.phone .sa-area { height: auto; flex-direction: column; align-items: stretch; }
    .sa-nav.phone .sa-area-btn, .sa-nav.phone .sa-quick-btn { height: 48px; font-size: 16px; }
    .sa-nav.phone .sa-quick-btn { margin-left: 0; }
    .sa-area.here .sa-area-btn::after { bottom: 2px; }
    .sa-mega { position: static; }
    .sa-mega::before { display: none; }
    .sa-mega-card { flex-direction: column; padding: 8px 4px 16px; box-shadow: none; border: 0; max-height: none; gap: 16px; }
    .sa-promo { width: auto; }
    .sa-logo b { display: none; }
    .sa-veil { align-items: flex-start; overflow-y: auto; padding: 16px; }
    .sa-qa-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .sa-search { position: static; }
    .sa-search-box { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; }
}
@media print { .sa-top, .sa-veil { display: none !important; } }

/* W-908 chunk 1 — the assignment pop-up in four tiles (mock-up
   assignment-popups-mock.html, Sunill 2026-10-29). Each tile opens its own
   pop-up on top; the pop-ups sit inside the same form so every box saves as
   before. */
.alloc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.alloc-tile { text-align: left; border: 1px solid var(--sa-line); background: var(--sa-box); border-radius: 8px;
    padding: 14px; display: grid; gap: 6px; color: var(--sa-ink); }
.alloc-tile:hover { background: var(--sa-hover); }
.alloc-tile:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: 2px; }
.alloc-tile-top { display: flex; align-items: center; gap: 8px; }
.alloc-tile-top b { flex: 1; font-weight: 600; }
.alloc-tile-sum { font-size: 13px; color: var(--sa-muted); }
.alloc-tile.is-ready .alloc-tile-sum { color: var(--sa-ink); }
.alloc-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    background: var(--sa-warning-l); color: var(--sa-warning-d); }
.alloc-tile.is-ready .alloc-chip { background: var(--sa-success-l); color: var(--sa-success-d); }
.alloc-panel { position: fixed; inset: 0; z-index: 1065; background: rgba(50, 51, 56, .35); overflow-y: auto;
    display: grid; place-items: start center; padding: 24px 16px; }
.alloc-panel-card { width: 100%; max-width: 900px; background: var(--sa-box); border-radius: 10px;
    box-shadow: 0 8px 30px rgba(50, 51, 56, .18); }
.alloc-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.alloc-panel-body { padding: 4px 16px 16px; }
.alloc-panel-foot { display: flex; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--sa-line); }
.alloc-panel-head h6 { flex: 1; text-align: left; font-size: 15px; font-weight: 600; }
.alloc-pay-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sa-line); margin-bottom: 10px; }
.alloc-pay-tab { padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--sa-blue);
    border-bottom: 2px solid var(--sa-blue); margin-bottom: -1px; }
.alloc-locked-line { margin: 4px 0 10px; padding: 8px 10px; border-radius: 6px; background: var(--sa-head-bg);
    border: 1px solid var(--sa-line); font-size: 13px; }
.alloc-locked-line::before { content: "\1F512\00a0"; }
/* W-908 chunk 2: the Pay grid — ₹ per woman, a row per session or lesson. */
.alloc-grid-box { border: 1px solid var(--sa-line); border-radius: 8px; overflow-x: auto; }
.alloc-grid { width: 100%; border-collapse: collapse; min-width: 560px; }
.alloc-grid th { background: var(--sa-head-bg); font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--sa-muted); padding: 8px; border-bottom: 1px solid var(--sa-line); text-align: left; }
.alloc-grid th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }
.alloc-grid td { padding: 6px 8px; border-bottom: 1px solid var(--sa-line); vertical-align: middle; }
.alloc-grid td.alloc-grid-l { font-weight: 600; white-space: nowrap; }
.alloc-grid td.alloc-grid-l span { display: block; font-weight: 400; font-size: 12px; color: var(--sa-muted); }
.alloc-grid td input { min-width: 70px; font-variant-numeric: tabular-nums; }
.alloc-grid td.alloc-grid-na { color: var(--sa-muted); font-size: 12px; text-align: center; background: var(--sa-head-bg); }
.alloc-grid .alloc-grid-sum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alloc-grid tr.alloc-grid-tot td { background: var(--sa-head-bg); font-weight: 600; }
.alloc-grid tr:last-child td { border-bottom: 0; }