/* ─────────────────────────────────────────────────────────────────────────────
   The dark palette.

   The workspace is themed twice over. A school picks its own colours — maroon,
   navy, emerald — and that identity does not change with the light: the sidebar,
   the buttons and the letterhead stay the school's. What changes here is the
   paper the school's colours are printed on.

   Everything is done by moving tokens rather than by restating components, which
   is why the stylesheets speak in --surface, --canvas, --ink, --muted and
   --brand-ink. This file is loaded last so it wins on order rather than on
   !important; the exceptions at the foot are the surfaces that must stay white
   in any light — a printed document is paper, and a logo was drawn for paper.

   The light values live in reference-layout.css. Only the differences are here.
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-color-scheme="dark"] {
  /* Warm rather than blue-black: the school colours are warm, and a neutral
     grey ground makes maroon and gold read as dirty. */
  --ink: #f2ecec;
  --muted: #b3a9aa;
  --line: #3d3537;
  --canvas: #151213;
  --surface: #211c1e;
  --surface-sunken: #2b2527;
  --panel: #211c1e;
  --brand-soft: #33262a;
  --accent-soft: #3a3020;
  --success-soft: #16311f;
  --warning-soft: #382a12;
  --danger-soft: #3a1f24;
  /* The school's colour, lifted until it carries as ink on a dark ground. It is
     still the school's colour — a maroon school gets a rose, a navy one a pale
     blue — so the workspace still looks like itself. */
  --brand-ink: color-mix(in srgb, var(--brand) 34%, #ffffff);
  --brand-deep-ink: color-mix(in srgb, var(--brand) 26%, #ffffff);
  /* The status colours are mixed for white paper and go muddy on a dark one.
     Same hues, lifted. */
  --success: #4cc38a;
  --warning: #e5a83e;
  --danger: #f0748a;
  /* A shadow reads as depth on a dark ground only when it is nearly opaque; the
     light-mode value simply disappears. */
  --shadow: 0 14px 35px rgba(0, 0, 0, .45);
  --shadow-soft: 0 5px 18px rgba(0, 0, 0, .38);
}

/* The workspace shell declares its own softened brand tints, and a declaration
   on an ancestor beats any amount of specificity at :root for the subtree under
   it — so the same two are re-stated here for the dark ground. */
:root[data-color-scheme="dark"] .erp-app,
:root[data-color-scheme="dark"] .portal-app {
  --brand-soft: color-mix(in srgb, var(--brand) 30%, #201b1d);
  --accent-soft: color-mix(in srgb, var(--accent) 20%, #221c14);
}

/* Native controls, scrollbars and the browser's own form widgets follow this
   rather than guessing from the page background. */
:root[data-color-scheme="dark"] { color-scheme: dark; }
:root[data-color-scheme="light"] { color-scheme: light; }

/* The ground behind the app. --canvas is written as an inline style by the
   appearance code, which no stylesheet can outrank, so the dark value is chosen
   there; this only stops the page showing white behind everything. */
:root[data-color-scheme="dark"] body,
:root[data-color-scheme="dark"] .erp-app,
:root[data-color-scheme="dark"] .login-v3,
:root[data-color-scheme="dark"] .setup-shell { background: var(--canvas); color: var(--ink); }

/* Frosted white bars: the blur is the point, the white is not. */
:root[data-color-scheme="dark"] .topbar { background: color-mix(in srgb, var(--surface) 88%, transparent); }

/* Written as literals on light paper and out of reach of any token: the
   placeholder grey, and the field the developer console holds shut. */
:root[data-color-scheme="dark"] ::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
:root[data-color-scheme="dark"] .form-grid input[readonly],
:root[data-color-scheme="dark"] .form-grid .developer-controlled-field input[readonly] {
  color: var(--muted); border-color: var(--line); background: var(--surface-sunken);
}
:root[data-color-scheme="dark"] .form-grid .developer-controlled-field,
:root[data-color-scheme="dark"] .form-grid .developer-controlled-field small { color: var(--muted); }

/* A tinted strip keeps its meaning in either palette, but the ink on it was
   chosen for a pale ground. The tints go dark, so the ink comes up to meet
   them. */
:root[data-color-scheme="dark"] .form-note { color: #a8cdf2 !important; background: #1b2735; }
:root[data-color-scheme="dark"] .setup-info { color: #a8cdf2; background: #1b2735; }

/* ── Paper stays paper ────────────────────────────────────────────────────────
   A marksheet, a receipt, an admission form and the frame they are previewed in
   are printed. What is on screen has to be what comes out of the printer, so
   inside these the palette is put back to the light one wholesale. */
:root[data-color-scheme="dark"] .print-document,
:root[data-color-scheme="dark"] .jpraxc-generic-document,
:root[data-color-scheme="dark"] .jpraxc-document-page {
  color-scheme: light;
  --ink: #201a1b;
  --muted: #736a6b;
  --line: #e9e3e1;
  --canvas: #f7f5f3;
  --surface: #ffffff;
  --surface-sunken: #fbfaf9;
  --brand-ink: var(--brand);
  --brand-deep-ink: var(--brand-deep);
  color: #201a1b;
}
:root[data-color-scheme="dark"] .jpraxc-generic-document,
:root[data-color-scheme="dark"] .official-pdf-preview iframe,
:root[data-color-scheme="dark"] .attachment-stage iframe { background: #ffffff; color-scheme: light; }

/* A logo, a signature and a watermark were drawn for white paper, so the swatch
   they are judged on stays white. */
:root[data-color-scheme="dark"] .school-logo-preview,
:root[data-color-scheme="dark"] .watermark-current img,
:root[data-color-scheme="dark"] .whatsapp-link figure img,
:root[data-color-scheme="dark"] .login-panel form > img.school-mark { background: #ffffff; }

/* The progress bar's fill runs along a brand-coloured track. */
:root[data-color-scheme="dark"] .workspace-busy .busy-bar i { background: #ffffff; }

/* ── The header control ──────────────────────────────────────────────────────
   Light, dark, or whatever the phone or laptop is set to — one button that
   names its own state, between the language glyph and ConnectX. */
.scheme-button > svg { width: 19px; height: 19px; }

/* ── Chips that stay pale ─────────────────────────────────────────────────────
   A few grounds are deliberately kept light in dark mode because the figure on
   them is colour-coded and only reads on a pale tint — the attendance day
   counts, the round "i" that heads a note. Their ink is inherited from tokens
   that have gone light, so it is put back by hand. */
:root[data-color-scheme="dark"] .attendance-day-stat.is-present,
:root[data-color-scheme="dark"] .attendance-day-stat.is-absent,
:root[data-color-scheme="dark"] .attendance-day-stat.is-late,
:root[data-color-scheme="dark"] .attendance-day-stat.is-leave { color: #6f6567; }
:root[data-color-scheme="dark"] .attendance-day-stat.is-present b { color: #075c35; }
:root[data-color-scheme="dark"] .attendance-day-stat.is-absent b { color: #9e182b; }
:root[data-color-scheme="dark"] .attendance-day-stat.is-late b { color: #825900; }
:root[data-color-scheme="dark"] .attendance-day-stat.is-leave b { color: #1c3f8f; }
:root[data-color-scheme="dark"] .form-note > span,
:root[data-color-scheme="dark"] .transport-separation > span { color: #24527e !important; }

/* Two inks written as literals for white paper, on grounds that are now dark:
   the "still to mark" warning on a chart tile, and the label over a tick-list
   field. */
:root[data-color-scheme="dark"] .chart-tile header small.urgent,
:root[data-color-scheme="dark"] .attention-list button > b.urgent { color: var(--danger); }
:root[data-color-scheme="dark"] .field-group-label { color: var(--ink); }