/* dark.css — owned by WP7. Class-based dark mode for the PRE-EXISTING files
 * (tokens/app/ui/pages/states); the token flip + the component pins that a
 * variable flip alone can't express (spec-theme §1). Load order: after every
 * pre-existing sheet, before bottom-nav.css/mobile.css (build-plan §0).
 *
 * Scope boundaries:
 *  - Shell chrome (sidebar/topbar/footer) is deep navy in BOTH themes and does
 *    NOT flip; layout.css already re-asserts it under body.dark-mode — this file
 *    never touches it (spec-theme §1.6).
 *  - The new wave-A sheets (topbar/dashboard/portfolio/engage) ship their OWN
 *    inline body.dark-mode blocks — not pinned here.
 *  - states.css owns the skeleton/card-veil dark variants — not duplicated here.
 *
 * THE TRAP (spec-theme §1.5): the token block below flips --primary to a LIGHT
 * value (used for titles/links/icons on dark). Every component that paints a
 * solid `background: var(--primary)` — primary buttons, secondary hover, the
 * toast base (var(--text)) — is pinned explicitly below or it renders
 * white-on-white. Hazard chips, field errors and token-driven surfaces flip for
 * free because their tint/text/edge triads live in the token block. */

/* ═══════════════════════ Anti-flash canvas ═══════════════════════ */
/* theme-boot.js adds .dark-mode-pending to <html> before the stylesheets load;
   this solid dark navy paints on the first (render-blocking) paint so the page
   never flashes white while theme-body.js promotes the class (spec-theme §1.2b).
   Neutral dark navy verbatim from eudr-x style.css:23-26. */
html.dark-mode-pending {
  background: #0d121c;
}

/* Animate the flip when the user toggles (spec-theme §1.5 body transition).
   The initial theme is set pre-paint by theme-body.js, so this only animates
   subsequent toggles; prefers-reduced-motion is globally neutralized in
   tokens.css so it degrades for free. */
body {
  transition: background-color var(--transition), color var(--transition);
}

/* ═══════════════════════ Token flip (spec-theme §1.10.2, VERBATIM) ═══════════
   Only the content-canvas tokens flip. The legacy aliases (--card-bg,
   --primary-color, --border-color, --text-color, --muted-color,
   --secondary-color) are defined in :root as var() references, so they resolve
   to these dark values automatically on any body.dark-mode descendant.
   --sidebar-*, --topbar-bg and --header-* are deliberately absent so the shell
   chrome keeps its permanent navy. */
body.dark-mode {
  /* canvas & surfaces.
     The navy hero art now lives here rather than on every shell page: in light
     mode it made the canvas darker than the sidebar's own chrome, which is
     what made "light mode" read as a dark app with white cards pasted on. */
  --canvas: #0e1c2b;
  --canvas-art: url("/static/images/background.svg");
  --canvas-text: #e2ebf2;
  --canvas-text-muted: rgba(209, 223, 232, 0.72);
  --canvas-text-subtle: rgba(209, 223, 232, 0.6);
  --bg: #081120;
  --surface: #0d1b2e;
  --surface-2: #122438;
  --surface-3: #16283d;
  --border: #1d3247;
  --border-strong: #2c4763;

  /* text */
  --text: #e8ecf0;
  --text-muted: #9fadbd;
  --text-subtle: #7a8a97;
  --text-invert: #0e1823;

  /* brand */
  --primary: #d1dfe8;          /* flips light, like eudr-x --primary-color */
  --primary-hover: #ffffff;
  --primary-soft: rgba(82, 104, 120, 0.22);
  --accent: #7d97a8;           /* lightened navy-slate accent */
  --focus: #6fa3b8;

  /* status (0.14 tint / -300 text / 0.4 edge, per §1.7 chip rule) */
  --confirmed-tint: rgba(178, 49, 39, 0.14);   --confirmed: #f1948a;  --confirmed-edge: rgba(178, 49, 39, 0.4);
  --potential-tint: rgba(179, 118, 15, 0.14);  --potential: #e8c076;  --potential-edge: rgba(179, 118, 15, 0.4);
  --indeterminate-tint: rgba(93, 115, 135, 0.16); --indeterminate: #aebfd0; --indeterminate-edge: rgba(93, 115, 135, 0.4);
  --clear-tint: rgba(47, 107, 52, 0.16);       --clear: #8fce96;      --clear-edge: rgba(47, 107, 52, 0.4);
  --neutral-tint: rgba(95, 110, 125, 0.16);    --neutral-status: #a5b3c0;

  /* elevation — black-based like eudr-x dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.25), 0 10px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════ Component pins ═══════════════════════ */

/* Primary action — THE trap. --primary is now a light title colour, so pin the
   button back to an explicit navy fill or it goes white-on-white
   (spec-theme §1.5, navy analog of eudr-x's #1f4426). Covers .ct-questionnaire-submit
   which shares the primary grammar (ui.css:99-109). */
body.dark-mode .ct-btn-primary,
body.dark-mode .ct-questionnaire-submit {
  background-color: #1f3c54;
  color: #fff;
}
body.dark-mode .ct-btn-primary:hover:not(:disabled),
body.dark-mode .ct-questionnaire-submit:hover:not(:disabled) {
  background-color: #2c4763;
}

/* Secondary action — --accent also flips light (#7d97a8), so white text on it
   would be low-contrast; pin a muted navy fill that deepens to the primary navy
   on hover (mirrors the light-mode behaviour, ui.css:112-118). */
body.dark-mode .ct-btn-secondary {
  background-color: #284864;
  color: #fff;
}
body.dark-mode .ct-btn-secondary:hover:not(:disabled) {
  background-color: #1f3c54;
}

/* Danger-outline hover: the light-mode #fef2f2 wash is white on dark — swap for
   the translucent-red hover from the §1.7 danger-outline pattern. The resting
   state (border --border-strong / text --text-muted) flips for free. */
body.dark-mode .ct-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* Toast — the base uses background: var(--text), which flips near-white, and
   the kind variants (--confirmed/--clear/--accent) flip to light -300 tones.
   Pin them to their saturated light-mode literals so toasts stay solid fills
   with legible #fff text (spec-theme §7). */
body.dark-mode .ct-toast {
  background: #16283d;
}
body.dark-mode .ct-toast-error {
  background: #b23127;
}
body.dark-mode .ct-toast-success {
  background: #2f6b34;
}
body.dark-mode .ct-toast-info {
  background: #526878;
}

/* Inputs / selects / textareas — pin to the deep surface + hairline border
   (spec-theme §1.7 inputs exemplar). Bg matches the flipped --surface; the pin
   swaps the heavy --border-strong field edge for the quieter hairline the dark
   theme wants. Focus ring stays token-driven (--focus, ui.css:172-181). */
body.dark-mode .ct-question input,
body.dark-mode .ct-question select,
body.dark-mode .ct-form input,
body.dark-mode .ct-form select,
body.dark-mode .ct-filters select,
body.dark-mode .ct-extraction-actions-row input,
body.dark-mode .ct-drawer-actions input,
body.dark-mode .ct-workqueue-complete input,
body.dark-mode .ct-components-field input,
body.dark-mode .ct-tenant-switcher-form input,
body.dark-mode .ct-tenant-switcher-form select,
body.dark-mode textarea {
  background: #0d1b2e;
  border-color: #1d3247;
  color: var(--text);
  /* Paint UA-drawn glyphs (native <select> chevron, number spinners, search
     clear) in the dark scheme so they don't stay dark-gray on the dark
     surface — near-invisible otherwise. */
  color-scheme: dark;
}

/* Card — upgrade the flat surface to the eudr-x glass recipe: translucent navy
   over the shell's background image + blur + subtle border + black shadow
   (spec-theme §1.7 glass-card exemplar, navy-mapped). */
body.dark-mode .ct-card {
  background: rgba(10, 22, 38, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(82, 104, 120, 0.22);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Table — the sheet, borders and header flip via tokens; pin the sticky header
   explicitly so it never shows a seam over scrolling rows, and add a gentle
   dark-only zebra + hover so the flat dark surface stays scannable. The hover
   rule follows the zebra rule at equal specificity, so hover wins on ties
   (spec-theme §1.7 table-header exemplar). */
body.dark-mode .ct-table thead th {
  background: #122438;
  color: var(--text-muted);
}
body.dark-mode .ct-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}
body.dark-mode .ct-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

/* Field-error text, hazard status chips (.status-*, .ct-review-state-*),
   .ct-error-panel and every --surface panel are intentionally NOT pinned here:
   their tint/text/edge and surface tokens are in the flip block above, so they
   already render the correct dark values (verified against ui.css/states.css). */

/* ═══════════════════════ Toggle icon swap (CSS-only, §1.3) ═══════════════════
   Moon shown in light mode (click → go dark), sun shown in dark mode
   (click → go light). base.html ships both SVGs; the JS never touches them. */
#themeToggle .icon-sun {
  display: none;
}
body.dark-mode #themeToggle .icon-sun {
  display: block;
}
body.dark-mode #themeToggle .icon-moon {
  display: none;
}