/* ============================================================
   BARAEM GRADEFLOW — DARK MODE

   Not an inversion. The light theme is a bright academic paper: near-white
   surfaces, slate ink, Baraem green, a restrained gold. Dark mode here is a
   dimmer room at the same desk — the same green, the same gold, the same
   hierarchy, on charcoal instead of paper.

   What that means in practice:
     · the green and gold keep their identity (they are the brand), but the
       darker steps are used so they still read against a dark surface
     · ink inverts; surfaces step DOWN in lightness, not UP in saturation
     · semantic colours get their own dark steps: a red that was legible on
       white becomes unusable if copied unchanged onto charcoal
     · elevation is expressed with a lighter surface, because a shadow on a
       near-black background is invisible

   Every value is a token. A colour hard-coded anywhere else in the product
   would NOT follow the theme, which is why the dark block below redefines the
   whole semantic set rather than patching individual rules.
   ============================================================ */

/* ============================================================
   1. THE PALETTE
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  /* ---------- Brand: Baraem green, shifted for a dark ground ---------- */
  /* The deep steps stay deep greens: they are used as BACKGROUNDS (primary
     buttons, the brand gradient), and a pale button would be wrong in either
     theme.

     Only the two wash steps move. A wash sits behind TEXT, and on a dark ground
     a wash has to be darker than the surface with lighter ink on it. Copying the
     light values produced a pale-green chip with dark text sitting on charcoal —
     which is unreadable and looked broken. */
  --bg-green-900: #05170f;
  --bg-green-800: #07231a;
  --bg-green-700: #0b3325;
  --bg-green-600: #103f30;
  --bg-green-500: #17553f;
  --bg-green-400: #2a8262;
  --bg-green-300: #57b28c;
  --bg-green-200: #8bc7ae;
  --bg-green-100: #122c23;   /* a wash: darker than the surface */
  --bg-green-50:  #17372b;

  /* ---------- Gold: accent only, and slightly brighter so it survives ---------- */
  --gold-700: #a87c1c;
  --gold-600: #c99a30;
  --gold-500: #dcb558;
  --gold-400: #e8cd7e;
  --gold-200: #3d2f0e;
  --gold-100: #33280c;   /* a wash, like --bg-green-100 */

  /* ---------- Slate: the neutrals now step down, not up ---------- */
  --sl-900: #e8edf2;
  --sl-800: #d3dae1;
  --sl-700: #b4bfc9;
  --sl-600: #94a0ab;
  --sl-500: #7d8a96;
  --sl-400: #6b7885;
  --sl-300: #4d5a66;
  --sl-200: #35414c;
  --sl-150: #2b353e;
  --sl-100: #232c34;
  --sl-50:  #1c242b;
  --sl-25:  #182026;
  --white: #ffffff;

  /* ---------- Semantic: each one gets a dark-ground step ---------- */
  --ok-700:  #6fc79a;  --ok-600:  #4aab78;  --ok-100:  #10281c;
  --warn-700:#e0b45e;  --warn-600:#c99a30;  --warn-100:#2b2210;
  --bad-700: #e88b83;  --bad-600: #c9564c;  --bad-100: #2e1614;
  --info-700:#7cbde0;  --info-600:#4f9dc4;  --info-100:#10222c;

  /* ---------- Surfaces ---------- */
  --bg:          #12181d;
  --bg-deep:     #0c1116;
  --surface:     #1a2229;
  --surface-2:   #202931;
  --surface-3:   #26303a;
  --surface-sunk:#141b21;
  --border:      #2b353e;
  --border-soft: #232c34;
  --border-strong:#3f4b56;

  /* ---------- Ink ---------- */
  --text:      #e9eef3;
  --text-soft: #b6c1cb;
  --text-faint:#93a0ab;
  --text-mute: #7c8894;
  --text-on-brand: #ffffff;

  /* ---------- Interactive ---------- */
  --accent:      var(--bg-green-400);
  --accent-hover:var(--bg-green-300);
  --accent-soft: rgba(42,130,98,.16);
  --accent-ink:  var(--bg-green-100);
  --focus:       var(--bg-green-300);

  /* ---------- Elevation: a shadow is invisible on charcoal, so elevation is
                carried by a lighter surface and a hairline top highlight ---------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 1px 3px rgba(0,0,0,.46), 0 1px 2px rgba(0,0,0,.28);
  --sh-3: 0 4px 12px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.32);
  --sh-4: 0 12px 32px rgba(0,0,0,.58), 0 2px 8px rgba(0,0,0,.36);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.045);

  /* ---------- Charts: the ink and grid used by every SVG in the product ---------- */
  --chart-ink:      #cfd8e0;
  --chart-grid:     #2b353e;
  --chart-axis:     #4d5a66;
  --chart-band:     rgba(255,255,255,.030);
  --chart-series-1: #4da583;
  --chart-series-2: #dcb558;
  --chart-series-3: #7cbde0;
  --chart-series-4: #c98fb0;
  --chart-series-5: #b0a5e0;

  /* ---------- Grade bands: same meaning, steps chosen for a dark ground ----------
     A band colour that reads on white is usually too dark to read on charcoal,
     so each one moves up its own ramp rather than being copied. */
  --chart-b-ap: #4fb489;  --chart-b-a: #6cc06c;  --chart-b-b: #d9ae33;
  --chart-b-c:  #e8935a;  --chart-b-d: #d9705f;  --chart-b-e: #8f99a6;
  --chart-mute: #8d99a5;

  /* ---------- Selection ---------- */
  --selection-bg: rgba(42,130,98,.34);
  --selection-ink: #ffffff;
}

/* the light values, named once so a component can reference either explicitly */
:root {
  --chart-ink:      var(--sl-900);
  --chart-grid:     var(--sl-150);
  --chart-axis:     var(--sl-300);
  --chart-band:     rgba(16,22,27,.030);
  --chart-series-1: var(--bg-green-600);
  --chart-series-2: var(--gold-600);
  --chart-series-3: var(--info-600);
  --chart-series-4: #a4568b;
  --chart-series-5: #5b4fa8;
  --selection-bg: rgba(19,83,62,.14);
  --selection-ink: inherit;
}

/* ============================================================
   2. GLOBAL BEHAVIOUR
   ============================================================ */
[data-theme="dark"] body,
[data-theme="dark"] .shell,
[data-theme="dark"] .main { background: var(--bg); color: var(--text); }

[data-theme="dark"] ::selection { background: var(--selection-bg); color: var(--selection-ink); }

/* Native form controls and scrollbars follow the theme without a library. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] button { color-scheme: dark; }

[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-sunk); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--sl-300); border-radius: var(--r-pill);
  border: 3px solid var(--surface-sunk);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--sl-400); }

/* ============================================================
   3. THE PLACES THAT HARD-CODED A COLOUR
   Only the ones that would otherwise stay light. Everything else already
   reads from a token.
   ============================================================ */

/* ---- inputs and selects: the native control is the one stubborn element ---- */
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .an-inp,
[data-theme="dark"] .an-sel,
[data-theme="dark"] .pg-sel,
[data-theme="dark"] .sc-fld select,
[data-theme="dark"] .sc-fld input {
  background: var(--surface-sunk);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .an-inp::placeholder,
[data-theme="dark"] input::placeholder { color: var(--text-mute); }
[data-theme="dark"] select option { background: var(--surface); color: var(--text); }

/* ---- tables ---- */
[data-theme="dark"] table.tbl thead th,
[data-theme="dark"] .sc thead th {
  background: var(--surface-3);
  color: var(--text-soft);
  border-bottom-color: var(--border);
}
[data-theme="dark"] table.tbl tbody tr { border-bottom-color: var(--border-soft); }
[data-theme="dark"] table.tbl tbody tr:hover,
[data-theme="dark"] .sc tbody tr:hover { background: var(--surface-2); }
[data-theme="dark"] table.tbl tbody tr:nth-child(even),
[data-theme="dark"] .sc tbody tr:nth-child(even) { background: var(--surface); }

/* ---- the pinned first column must not glow white behind the rest ---- */
[data-theme="dark"] .sc th.pin,
[data-theme="dark"] .sc td.pin { background: var(--surface); }
[data-theme="dark"] .sc tbody tr:hover td.pin { background: var(--surface-2); }

/* ---- meters and grade bands: the tints become transparent washes ---- */
[data-theme="dark"] .meter i { opacity: .92; }
[data-theme="dark"] .im-b-ok  { background: var(--ok-100);   color: var(--ok-700); }
[data-theme="dark"] .im-b-warn { background: var(--warn-100); color: var(--warn-700); }
[data-theme="dark"] .im-b-err { background: var(--bad-100);  color: var(--bad-700); }

/* ---- the loader: the crest keeps the brand, the halo loses its white glow ---- */
[data-theme="dark"] .loader-halo { box-shadow: 0 0 0 1px rgba(87,178,140,.22), 0 0 40px rgba(42,130,98,.20); }

/* ---- the search overlay and the saved-analyses dialogs ---- */
[data-theme="dark"] .gs-scrim { background: rgba(0,0,0,.62); }
[data-theme="dark"] .gs-panel,
[data-theme="dark"] .sa-dialog {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 24px 64px rgba(0,0,0,.66);
}
[data-theme="dark"] .sa-modal { background: rgba(0,0,0,.62); }

/* ---- the identity cards, which print but also live on screen ---- */
[data-theme="dark"] .idcard,
[data-theme="dark"] .idcard-front { background: var(--surface-2); border-color: var(--border); }

/* ============================================================
   4. PRINT — ALWAYS LIGHT
   A school prints on white paper. Dark mode must never reach the printer, so
   the print stylesheet re-declares the light surface explicitly rather than
   trusting whatever the screen theme was.
   ============================================================ */
@media print {
  html, body, .shell, .main, .page, .card, .panel, table, thead, tbody, tr, td, th {
    background: #ffffff !important;
    color: #10161b !important;
    box-shadow: none !important;
  }
  .sc, .table-wrap, .tbl-wrap { overflow: visible !important; }
  [data-theme="dark"] .no-print,
  [data-theme="dark"] .topbar,
  [data-theme="dark"] .sidebar,
  [data-theme="dark"] .pg { display: none !important; }
  /* the pager must never truncate a printed roster */
  [data-theme="dark"] .table-wrap { max-height: none !important; }
  a[href]::after { content: ""; }
}
/* ------------------------------------------------------------ the toggle */
.theme-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.theme-btn:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.30); }
.theme-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-btn svg { width: 15px; height: 15px; }
@media (max-width: 420px) { .theme-btn { display: none; } }
@media print { .theme-btn { display: none !important; } }

/* ---- the analytics filter bar reads --an-bg, which is only set in light ---- */
[data-theme="dark"] .an-bar,
[data-theme="dark"] .im-bar { --an-bg: var(--surface); }

/* ---- gradebook: the landscape analysis card is its own light surface ---- */
[data-theme="dark"] .ana-card,
[data-theme="dark"] .ana-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .ana-legend span { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .ps-band.b { background: var(--warn-100); color: var(--warn-700); }
[data-theme="dark"] .ps-band.c { background: var(--bad-100); color: var(--bad-700); }
[data-theme="dark"] .ps-band.a, [data-theme="dark"] .ps-band.ap { background: var(--ok-100); color: var(--ok-700); }
[data-theme="dark"] .ps-band.e { background: var(--surface-3); color: var(--text-mute); }

/* ---- identity cards: a card that is also a printed artefact ---- */
[data-theme="dark"] .idc-head { background: var(--surface-3); border-color: var(--border); }
[data-theme="dark"] .idc-crest { background: var(--surface-2); }

/* ---- the topbar brand chip stays brand-coloured, so only its border changes -- */
[data-theme="dark"] .lang-toggle button[aria-pressed="true"] { color: var(--bg-green-900); }

/* ---- import segments and buttons that hard-code white ink ---- */
[data-theme="dark"] .im-seg-b.on { color: var(--text-on-brand); }

/* ---- the toast: it must stay readable against a dark page ---- */
[data-theme="dark"] .toast {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ---- report preview: the A4 page itself is a print artefact and stays white
       on screen too, because it is a preview OF a printed page ---- */
[data-theme="dark"] .rp-page { background: #ffffff; color: #10161b; }

/* ---- badges: the wash is dark here, so the ink is the light step ---- */
/* Each pair is a DARK wash with the LIGHT ink of the same hue. The previous
   rules named the -700 steps, which dark.css also redefines as dark inks — so a
   badge became dark text on a dark wash and read at 1.7:1. A badge whose colour
   cannot be read is worse than no badge at all, so the ink steps are chosen
   for contrast, not for symmetry with the light theme. */
[data-theme="dark"] .badge.green { background: var(--ok-100);   color: var(--ok-700); }
[data-theme="dark"] .badge.amber { background: var(--warn-100); color: var(--warn-700); }
[data-theme="dark"] .badge.red   { background: var(--bad-100);  color: var(--bad-700); }
[data-theme="dark"] .badge.blue  { background: var(--bg-green-100); color: var(--bg-green-300); }
[data-theme="dark"] .badge.teal  { background: var(--info-100); color: #7fd3c8; }
[data-theme="dark"] .badge.gold  { background: var(--gold-100);  color: var(--gold-400); }

/* metric tooltips in dark mode: use the raised surface, not the page ground */
[data-theme="dark"] .an-kpi[data-tip]:hover::after,[data-theme="dark"] .an-kpi[data-tip]:focus-visible::after{
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);
}
[data-theme="dark"] .an-kpi-info{background:var(--surface-2);color:var(--muted-fg);border-color:var(--border-strong);}

/* ---- statistics icon wells ---------------------------------------
   The well is lighter than the card and the glyph moves to brand-300, so the
   mark reads immediately on charcoal without lifting the whole interface. */
[data-theme="dark"] .stat .ic {
  background: var(--surface-3);
  color: var(--brand-300);
  border-color: var(--border-strong);
}
/* the brand accent rail keeps its semantic colour in both themes */
[data-theme="dark"] .state-ic {
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1px solid var(--border);
}

/* ---- quiet controls were effectively invisible in dark mode ----------
   `.btn-quiet` paired a transparent ground with --text-soft, and the Sort and
   Add controls rendered at 1.07:1 — indistinguishable from the card behind
   them. A control that looks like text is not a control. */
[data-theme="dark"] .btn-quiet {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] .btn-quiet:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--text-mute);
}
[data-theme="dark"] .btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

/* ---- table text ---------------------------------------------------- */
[data-theme="dark"] .tbl td .faint,
[data-theme="dark"] .tbl td .tiny,
[data-theme="dark"] .tbl .text-faint { color: var(--text-faint); }
[data-theme="dark"] .att-row .n.faint { opacity: .72; }

/* ---- gender / group chips in the rosters ---------------------------
   These carry meaning, so they must not depend on a 1.7:1 tint. */
[data-theme="dark"] .chip,
[data-theme="dark"] .tag,
[data-theme="dark"] .pill { border-color: var(--border-strong); }

/* ---- soft buttons -------------------------------------------------
   `.btn-soft` paired --brand-50 with --brand-700 ink. Both brand steps are
   DEEP greens in this palette (they are button grounds), so in dark mode the
   button rendered as dark-on-dark at 1.07:1 and read as a hole in the card.
   Dark mode needs the raised neutral ground with full ink. */
[data-theme="dark"] .btn-soft {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] .btn-soft:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--text);
}
/* ---- danger button in light mode --------------------------------
   White on the light-theme --bad-600 washed out to 2.4:1 because the red ramp
   is a LIGHT-theme red. Danger keeps white ink but takes a darker red ground. */
.btn-danger {
  background: var(--red-600);
  color: #fff;
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) { background: var(--red-700); }

/* Danger in dark mode: the dark-theme --bad-600 is a LIGHT red, so white ink
   on it fell to 2.4:1. Dark mode takes the darker ground with white ink. */
[data-theme="dark"] .btn-danger {
  background: var(--red-700);
  color: #fff;
}
[data-theme="dark"] .btn-danger:hover:not(:disabled) { background: var(--red-600); }