/* ════════════════════════════════════════════════════════════════════
   ICMS DARK THEME  ·  loaded LAST in _head.html
   ════════════════════════════════════════════════════════════════════
   Scope: html[data-theme="dark"] body.ics-logged-in.icms-themed-app …
     • Only the logged-in app (curriculum + exam wizards) goes dark.
     • The marketing landing (body.ics-pre-login) and the admin dashboard
       (body.icms-admin-page) are never matched, so they stay light.
     • The printable document preview (.doc-portrait/.doc-landscape/
       .doc-outline) is explicitly kept WHITE at the bottom of this file —
       documents are printed on paper, so they must not go dark.

   Strategy:
     1. Re-point the design tokens (icms-modern.css + responsive.css) to a
        dark palette. Most wizard surfaces use var(--…) so they adapt even
        through their !important rules (the variable resolves at use).
     2. Add explicit overrides for surfaces that hardcode colours (mostly
        icms-app.css form fields/combobox and the older v4/modals layers).
   The gold accent (--gold-*) is intentionally left unchanged — it reads
   well on dark.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Token backbone ─────────────────────────────────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app {
	color-scheme: dark; /* native selects, date pickers, scrollbars */

	/* Surfaces (icms-modern.css) — always backgrounds, safe to darken */
	--surface: #0b1120;
	--surface-card: #141d31;
	--surface-raised: #1b2542;
	--surface-tint: #10192b;

	/* Light fills / borders from the ink scale → dark equivalents.
	   The dark end (--ink-600…900) is left alone so intentionally-dark
	   chips like .step.active and the navy header stay dark. */
	--ink-50: #0f1828;
	--ink-100: #243049;
	--ink-200: #2f3d5a;
	--ink-300: #9aa6c2;
	--ink-400: #aab4cc;
	--ink-500: #b7c0d6;

	/* responsive.css tokens: --ink (text) and surface/border below */
	--ink: #e6ebf5;
	--ink-muted: #c7cfe1;
	--ink-faint: #aeb8d0;
	--ink-subtle: #95a0bb;
	--surface-2: #141d31;
	--border: #2a3650;
	--focus-ring: #6ea8fe;
	--focus-alpha: rgba(110, 168, 254, 0.35);

	background: var(--surface) !important;
	color: var(--ink) !important;
}

/* ── 2. Base text / scrollbars ─────────────────────────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app h1,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app h2,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app h3,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app h4 {
	color: #f1f5f9 !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app p,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app li,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app span,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app label,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app td,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app th {
	color: var(--ink);
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app ::-webkit-scrollbar-thumb {
	background: #2f3d5a;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app ::-webkit-scrollbar-track {
	background: #0b1120;
}

/* ── 3. Generic app containers (catch hardcoded white panels in the
       older v4 / ui-enhance / tweaks layers) ──────────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .panel,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .card,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .icms-card,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .icms-panel,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .box,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .section,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel {
	background: var(--surface-card) !important;
	border-color: var(--ink-100) !important;
	color: var(--ink) !important;
}

/* ── 4. Panel head ─────────────────────────────────────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel-head {
	border-bottom-color: var(--ink-100) !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel-head h2 {
	color: #f1f5f9 !important;
}

/* ── 5. Form fields ────────────────────────────────────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field label {
	color: #cbd5e1 !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app input,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app select,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app textarea,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field input[type="text"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field input[type="number"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field input[type="email"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field input[type="date"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field select,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field textarea {
	background-color: #0f1828 !important;
	color: #e6ebf5 !important;
	border-color: #33415c !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field input:hover,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field select:hover {
	border-color: #4b5b78 !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field input:focus,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field select:focus,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field textarea:focus {
	border-color: #d4a35a !important;
	box-shadow: 0 0 0 4px rgba(212, 163, 90, 0.22) !important;
	background-color: #121b2e !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field input::placeholder,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field textarea::placeholder {
	color: #7c89a6 !important;
}
/* Light chevron for the custom <select> arrow */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-app-panel .field select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

/* ── 6. Searchable institution combobox ────────────────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combobox-caret { color: #7c89a6; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combobox.is-open .icms-combobox-caret { color: #e3bd83; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combobox-list {
	background: #141d31 !important;
	border-color: #2a3650 !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt { color: #dbe3f0; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt:hover,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt.is-active { background: #1e2a44; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt__name b { color: #ffffff; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt__tag { background: #243049; color: #aab4cc; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt__tag--poly { background: rgba(212, 163, 90, 0.2); color: #e3bd83; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt--other { color: #e3bd83; border-top-color: #243049; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-opt--other i { color: #e3bd83; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-combo-empty { color: #7c89a6; }

/* ── 7. Modals (modals.css + inline-styled profile modal) ──────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .modal,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .modal-content,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .modal-card,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .modal-box,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-modal,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-modal-card,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #profileModalBox {
	background: #141d31 !important;
	color: var(--ink) !important;
	border-color: #2a3650 !important;
}
/* The profile modal is heavily inline-styled. Re-light its dark inline
   text colours via attribute match — leaves reds/golds/accents alone. */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #profileModalBox [style*="#0f172a"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #profileModalBox [style*="#1e293b"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #profileModalBox [style*="#0a1228"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #profileModalBox [style*="#334155"],
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #profileModalBox [style*="#475569"] {
	color: #e6ebf5 !important;
}

/* ── 8. Toasts ─────────────────────────────────────────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .toast,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-toast {
	background: #1b2542 !important;
	color: var(--ink) !important;
	border-color: #2a3650 !important;
}

/* ── 9. Secondary / ghost buttons that were white ──────────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .btn-secondary,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .btn-ghost,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app #ics-main .btn-outline {
	background: #1b2542 !important;
	color: #e6ebf5 !important;
	border-color: #33415c !important;
}

/* ── 10. Theme picker (profile modal · Appearance tab) ─────────────── */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-opt {
	background: #0f1828 !important;
	border-color: #33415c !important;
	color: #e6ebf5 !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-opt:hover {
	border-color: #4b5b78 !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-opt i { color: #aab4cc !important; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-opt__d { color: #94a3b8 !important; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-opt.is-active {
	border-color: #d4a35a !important;
	background: rgba(212, 163, 90, 0.14) !important;
	box-shadow: 0 0 0 3px rgba(212, 163, 90, 0.25) !important;
}
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-opt.is-active i { color: #e3bd83 !important; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-h { color: #f1f5f9 !important; }
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .icms-theme-sub { color: #aab4cc !important; }

/* ════════════════════════════════════════════════════════════════════
   KEEP LIGHT — printable document preview must stay white (it mirrors
   the paper output). These rules win because they come last and repeat
   the dark scope at equal specificity.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline {
	background: #ffffff !important;
	color: #1e293b !important;
}
/* Re-assert the paper's own ink for any element my generic text rules
   above might have lightened (headings/spans/labels inside the doc). */
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait h1,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait h2,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait h3,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait h4,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait p,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait span,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait td,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-portrait th,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape h1,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape h2,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape h3,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape h4,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape p,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape span,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape td,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-landscape th,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline h1,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline h2,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline h3,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline h4,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline p,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline span,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline td,
html[data-theme="dark"] body.ics-logged-in.icms-themed-app .doc-outline th {
	color: #1e293b !important;
}