/* =====================================================================
   Theme switch + dark theme (loaded after app.css)
   The theme is `html[data-theme]`, set before first paint in
   layouts/base. Dark mode redefines the tokens, the component colours in
   app.css and the Tailwind colour utilities the views use, so templates
   need no dark: variants. Screen only: printing always uses the light
   design, and printable documents lock light (data-theme-lock).
   ===================================================================== */
.theme-icon-dark, html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: inline-flex; }
.theme-icon-light { display: inline-flex; }
.theme-check { visibility: hidden; }
[data-theme-set][aria-checked="true"] .theme-check { visibility: visible; }
[data-theme-set][aria-checked="true"] { color: var(--brand-800); font-weight: 500; }

@media screen {
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f1f5f9; --text: #cbd5e1; --muted: #94a3b8; --faint: #64748b;
    --line: #26344b; --line-soft: #1b2638; --surface: #111a2b; --canvas: #0b1220;
    --raised: #16213a; --field: #0e1627; --field-line: #334155;
    --ring: 0 0 0 3px rgb(125 154 214 / 0.28);
}
html[data-theme="dark"] body { background: var(--canvas); color: var(--text); }
html[data-theme="dark"] :focus-visible { outline-color: #7d9ad6; }
html[data-theme="dark"] [data-theme-set][aria-checked="true"] { color: #c7d3ea; }

/* ── Components (app.css) ─────────────────────────────────────────── */
html[data-theme="dark"] .sidebar-scroll { scrollbar-color: #334155 transparent; }
html[data-theme="dark"] .nav-link.is-active { background: #172442; color: #dbe4f7; }
html[data-theme="dark"] .nav-link.is-active .nav-icon { color: #9db1d8; }
html[data-theme="dark"] a.nav-link.is-active { box-shadow: inset 3px 0 0 #7d9ad6; }
html[data-theme="dark"] .nav-link.is-upcoming .nav-icon { color: #3b4a61; }
html[data-theme="dark"] .nav-count, html[data-theme="dark"] .chip, html[data-theme="dark"] .avatar { background: #1e2f55; color: #c7d3ea; }
html[data-theme="dark"] .chip:hover { background: #26396a; }

html[data-theme="dark"] .btn-primary { background: #3d5c9e; color: #fff; box-shadow: none; }
html[data-theme="dark"] .btn-primary:hover { background: #4a6bb0; }
html[data-theme="dark"] .btn-secondary { background: var(--raised); color: var(--ink); border-color: var(--field-line); box-shadow: none; }
html[data-theme="dark"] .btn-secondary:hover { background: #1c2944; border-color: #475569; }
html[data-theme="dark"] .btn-ghost { color: #9db1d8; }
html[data-theme="dark"] .btn-ghost:hover { background: #172442; }
html[data-theme="dark"] .btn-danger { background: #e11d48; }
html[data-theme="dark"] .btn-danger:hover { background: #be123c; }
html[data-theme="dark"] .btn-danger-soft { background: rgb(136 19 55 / .3); color: #fda4af; border-color: #881337; }
html[data-theme="dark"] .btn-danger-soft:hover { background: rgb(136 19 55 / .45); }

html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-select, html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .input-group, html[data-theme="dark"] .combo-button { background: var(--field); border-color: var(--field-line); color: var(--ink); }
html[data-theme="dark"] .input-group .form-input { background: transparent; }
html[data-theme="dark"] .form-input::placeholder, html[data-theme="dark"] .form-textarea::placeholder { color: #64748b; }
html[data-theme="dark"] .form-input:disabled, html[data-theme="dark"] .form-select:disabled, html[data-theme="dark"] .form-textarea:disabled,
html[data-theme="dark"] .form-input[readonly] { background: #131c2e; color: var(--muted); }
html[data-theme="dark"] .form-input.is-invalid, html[data-theme="dark"] .form-select.is-invalid, html[data-theme="dark"] .form-textarea.is-invalid { border-color: #fb7185; }
html[data-theme="dark"] .form-label .req, html[data-theme="dark"] .form-error { color: #fb7185; }
html[data-theme="dark"] .form-alert { background: rgb(136 19 55 / .25); border-color: #881337; color: #fecdd3; }
html[data-theme="dark"] .input-addon { background: #131c2e; }
html[data-theme="dark"] .switch { background: #334155; }
html[data-theme="dark"] .switch:checked { background: #5f7fc2; }
html[data-theme="dark"] input[type="checkbox"], html[data-theme="dark"] input[type="radio"] { accent-color: #7d9ad6; }
html[data-theme="dark"] .choice-card:hover { border-color: #475569; }
html[data-theme="dark"] .choice-card:has(input:checked) { background: #172442; border-color: #7d9ad6; box-shadow: 0 0 0 1px #7d9ad6; }
html[data-theme="dark"] .dropzone { border-color: var(--field-line); }
html[data-theme="dark"] .dropzone:hover, html[data-theme="dark"] .dropzone.is-dragging { background: #172442; border-color: #6c88bf; }
html[data-theme="dark"] .dropzone.is-invalid { background: rgb(136 19 55 / .2); }
html[data-theme="dark"] .file-item { background: var(--raised); }

html[data-theme="dark"] .card { box-shadow: none; }
html[data-theme="dark"] .card-footer { background: #0f1829; }
html[data-theme="dark"] .stat-card.is-link:hover { border-color: #3d5791; box-shadow: none; }
html[data-theme="dark"] .stat-icon, html[data-theme="dark"] .confirm-icon { background: #172442; color: #9db1d8; }
html[data-theme="dark"] #confirm-dialog[data-tone="danger"] .confirm-icon { background: rgb(136 19 55 / .3); color: #fb7185; }

html[data-theme="dark"] .badge-success { background: rgb(6 78 59 / .35); color: #6ee7b7; border-color: #065f46; }
html[data-theme="dark"] .badge-info    { background: #172442; color: #9db1d8; border-color: #26396a; }
html[data-theme="dark"] .badge-warning { background: rgb(120 53 15 / .35); color: #fcd34d; border-color: #78350f; }
html[data-theme="dark"] .badge-danger  { background: rgb(136 19 55 / .35); color: #fda4af; border-color: #881337; }
html[data-theme="dark"] .badge-neutral { background: #1b2638; color: #cbd5e1; border-color: var(--line); }

html[data-theme="dark"] .data-table tbody tr:hover td { background: #141f33; }
html[data-theme="dark"] .data-table tbody tr.is-selected td, html[data-theme="dark"] .table-stack tbody tr.is-selected { background: #172442; }
html[data-theme="dark"] .sort-link.is-active .sort-icon { color: #9db1d8; }
html[data-theme="dark"] .bulk-bar { background: var(--raised); border-color: #3d5791; }
html[data-theme="dark"] .page-link.is-current { background: #3d5c9e; }
html[data-theme="dark"] .page-link.is-disabled { color: #3b4a61; }

html[data-theme="dark"] .dropdown-panel, html[data-theme="dark"] .combo-pop { background: var(--raised); border-color: var(--line); box-shadow: 0 16px 40px -8px rgb(0 0 0 / .6); }
html[data-theme="dark"] .dropdown-item.is-current, html[data-theme="dark"] .combo-option[aria-selected="true"] { color: #c7d3ea; }
html[data-theme="dark"] .dropdown-item.is-danger { color: #fb7185; }
html[data-theme="dark"] .dropdown-item.is-danger:hover { background: rgb(136 19 55 / .3); color: #fecdd3; }
html[data-theme="dark"] .notif-badge { box-shadow: 0 0 0 2px var(--surface); }

html[data-theme="dark"] .tab[aria-selected="true"], html[data-theme="dark"] .tab[aria-current="page"] { color: #dbe4f7; }
html[data-theme="dark"] .tab[aria-selected="true"]::after, html[data-theme="dark"] .tab[aria-current="page"]::after { background: #7d9ad6; }
html[data-theme="dark"] .tab[aria-selected="true"] .tab-count, html[data-theme="dark"] .tab[aria-current="page"] .tab-count { background: #1e2f55; color: #c7d3ea; }

html[data-theme="dark"] .step-marker { background: var(--surface); border-color: var(--field-line); }
html[data-theme="dark"] .step.is-complete .step-marker { background: #3d5c9e; border-color: #3d5c9e; }
html[data-theme="dark"] .step.is-current .step-marker { border-color: #7d9ad6; color: #c7d3ea; box-shadow: 0 0 0 4px #1e2f55; }
html[data-theme="dark"] .step.is-complete:not(:last-child)::before { background: #5f7fc2; }

html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1b2638 25%, #232f45 50%, #1b2638 75%); background-size: 200% 100%; }
html[data-theme="dark"] .modal::backdrop { background: rgb(2 6 23 / .7); }
html[data-theme="dark"] .modal-card { background: var(--surface); box-shadow: 0 24px 48px -12px rgb(0 0 0 / .7); }
html[data-theme="dark"] .toast { background: #1e293b; box-shadow: 0 12px 32px -8px rgb(0 0 0 / .6); }
html[data-theme="dark"] .swatch { border-color: rgb(255 255 255 / .08); }

/* ── Tailwind colour utilities used by the views ──────────────────── */
/* surfaces */
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .hover\:bg-white:hover, html[data-theme="dark"] .focus\:bg-white:focus { background-color: var(--surface); }
html[data-theme="dark"] .bg-white\/95 { background-color: rgb(17 26 43 / .95); }
html[data-theme="dark"] .bg-white\/80, html[data-theme="dark"] .supports-\[backdrop-filter\]\:bg-white\/80 { background-color: rgb(17 26 43 / .82); }
html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #0f1829; }
html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .hover\:bg-slate-100:hover, html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-slate-100 { background-color: #1b2638; }
html[data-theme="dark"] .bg-slate-200 { background-color: #243049; }
html[data-theme="dark"] .bg-slate-300 { background-color: #334155; }
html[data-theme="dark"] .bg-slate-400 { background-color: #475569; }
html[data-theme="dark"] .bg-slate-900 { background-color: #020617; }
/* text */
html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .hover\:text-slate-900:hover { color: #f1f5f9; }
html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .hover\:text-slate-800:hover, html[data-theme="dark"] .peer:checked ~ .peer-checked\:text-slate-800 { color: #e2e8f0; }
html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .hover\:text-slate-700:hover { color: #cbd5e1; }
html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .hover\:text-slate-600:hover { color: #aab5c5; }
html[data-theme="dark"] .text-slate-500 { color: #94a3b8; }
html[data-theme="dark"] .text-slate-400, html[data-theme="dark"] .placeholder\:text-slate-400::placeholder { color: #71809a; }
html[data-theme="dark"] .text-slate-300 { color: #4b5a70; }
/* lines */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1b2638; }
html[data-theme="dark"] .border-slate-200 { border-color: #26344b; }
html[data-theme="dark"] .ring-slate-200 { --tw-ring-color: #26344b; }
html[data-theme="dark"] .border-slate-300, html[data-theme="dark"] .hover\:border-slate-300:hover { border-color: #334155; }
html[data-theme="dark"] .border-slate-400 { border-color: #475569; }
html[data-theme="dark"] .border-white { border-color: var(--surface); }
html[data-theme="dark"] .decoration-slate-300 { text-decoration-color: #475569; }
/* brand */
html[data-theme="dark"] .text-brand-900 { color: #e6ecfa; }
html[data-theme="dark"] .text-brand-800 { color: #d3def7; }
html[data-theme="dark"] .text-brand-700, html[data-theme="dark"] .hover\:text-brand-700:hover, html[data-theme="dark"] .group:hover .group-hover\:text-brand-700 { color: #a9bde6; }
html[data-theme="dark"] .text-brand-600 { color: #93aadb; }
html[data-theme="dark"] .text-brand-500 { color: #7d9ad6; }
html[data-theme="dark"] .bg-brand-50 { background-color: #172442; }
html[data-theme="dark"] .bg-brand-50\/60 { background-color: rgb(23 36 66 / .6); }
html[data-theme="dark"] .border-brand-100 { border-color: #1e2f55; }
html[data-theme="dark"] .border-brand-200 { border-color: #2a3f6e; }
html[data-theme="dark"] .border-brand-800 { border-color: #3d5791; }
html[data-theme="dark"] .hover\:border-brand-300:hover { border-color: #3d5791; }
html[data-theme="dark"] .focus\:ring-brand-100:focus { --tw-ring-color: #1e2f55; }
html[data-theme="dark"] .focus\:border-brand-400:focus { border-color: #6c88bf; }
html[data-theme="dark"] .text-accent-600 { color: #d9b25f; }
html[data-theme="dark"] .text-accent-700 { color: #e2c27a; }
/* status: amber */
html[data-theme="dark"] .bg-amber-50 { background-color: rgb(120 53 15 / .28); }
html[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgb(120 53 15 / .42); }
html[data-theme="dark"] .border-amber-100, html[data-theme="dark"] .border-amber-200 { border-color: #6b4513; }
html[data-theme="dark"] .text-amber-600 { color: #fbbf24; }
html[data-theme="dark"] .text-amber-700 { color: #fcd34d; }
html[data-theme="dark"] .text-amber-800 { color: #fde68a; }
html[data-theme="dark"] .text-amber-900 { color: #fef3c7; }
/* status: emerald */
html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-emerald-50 { background-color: rgb(6 78 59 / .32); }
html[data-theme="dark"] .border-emerald-200 { border-color: #065f46; }
html[data-theme="dark"] .text-emerald-600 { color: #34d399; }
html[data-theme="dark"] .text-emerald-700 { color: #6ee7b7; }
html[data-theme="dark"] .text-emerald-800, html[data-theme="dark"] .peer:checked ~ .peer-checked\:text-emerald-800 { color: #a7f3d0; }
html[data-theme="dark"] .text-emerald-900 { color: #d1fae5; }
/* status: red / rose */
html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-red-50 { background-color: rgb(127 29 29 / .32); }
html[data-theme="dark"] .bg-red-50\/60 { background-color: rgb(127 29 29 / .22); }
html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200 { border-color: #7f1d1d; }
html[data-theme="dark"] .text-red-600 { color: #f87171; }
html[data-theme="dark"] .text-red-700 { color: #fca5a5; }
html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .peer:checked ~ .peer-checked\:text-red-800 { color: #fecaca; }
html[data-theme="dark"] .bg-rose-50, html[data-theme="dark"] .hover\:bg-rose-50:hover { background-color: rgb(136 19 55 / .3); }
html[data-theme="dark"] .border-rose-200 { border-color: #881337; }
html[data-theme="dark"] .text-rose-500, html[data-theme="dark"] .text-rose-600 { color: #fb7185; }
html[data-theme="dark"] .text-rose-700, html[data-theme="dark"] .text-rose-800 { color: #fda4af; }
/* status: sky (attendance "late") */
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-sky-50 { background-color: rgb(12 74 110 / .4); }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:text-sky-800 { color: #bae6fd; }
/* notifications */
html[data-theme="dark"] .notif-icon { background: #1e2f55; color: #c7d3ea; }
html[data-theme="dark"] .notif-icon.is-success { background: rgb(6 78 59 / .4); color: #6ee7b7; }
html[data-theme="dark"] .notif-icon.is-warning { background: rgb(120 53 15 / .35); color: #fcd34d; }
html[data-theme="dark"] .notif-icon.is-urgent { background: rgb(136 19 55 / .35); color: #fda4af; }
html[data-theme="dark"] .notif-dot { background: #7d9ad6; }
/* reports */
html[data-theme="dark"] .report-bar { background: #7d9ad6; }
/* search */
html[data-theme="dark"] .search-pop { background: var(--raised); border-color: var(--line); box-shadow: 0 16px 40px -8px rgb(0 0 0 / .6); }
html[data-theme="dark"] .hover\:text-brand-800:hover { color: #dbe4f7; }
html[data-theme="dark"] .hover\:border-brand-200:hover { border-color: #3d5c9e; }
/* public website */
html[data-theme="dark"] .site-eyebrow, html[data-theme="dark"] .text-accent-700 { color: #e2c27a; }
html[data-theme="dark"] .site-tag, html[data-theme="dark"] .site-feature-icon, html[data-theme="dark"] .site-date { background: #1e2f55; color: #c7d3ea; }
html[data-theme="dark"] .site-tag.is-success, html[data-theme="dark"] .site-check, html[data-theme="dark"] .site-date.is-success { background: rgb(6 78 59 / .4); color: #6ee7b7; }
html[data-theme="dark"] .site-tag.is-warning, html[data-theme="dark"] .site-date.is-warning { background: rgb(120 53 15 / .35); color: #fcd34d; }
html[data-theme="dark"] .site-date.is-danger { background: rgb(136 19 55 / .35); color: #fda4af; }
html[data-theme="dark"] .site-date.is-accent { background: rgb(134 99 31 / .3); color: #e2c27a; }
html[data-theme="dark"] .site-chip.is-active, html[data-theme="dark"] .site-step-no { background: #3d5c9e; border-color: #3d5c9e; }
html[data-theme="dark"] a.site-card:hover, html[data-theme="dark"] .site-chip:hover { border-color: #3d5c9e; box-shadow: 0 14px 32px -14px rgb(0 0 0 / .6); }
html[data-theme="dark"] .site-hero { background: radial-gradient(900px 480px at 88% -10%, rgb(198 154 62 / .18), transparent 60%), linear-gradient(135deg, #0b1220, #16213a); }
html[data-theme="dark"] .site-cta { background: linear-gradient(135deg, #111a2b, #1e2f55); }

/* public website v3 */
html[data-theme="dark"] .pw-announce { background: #132741; }
html[data-theme="dark"] .pw-preview-note { background: #422006; color: #fde68a; }
html[data-theme="dark"] body.site { --pw-bg: #0b1220; --pw-soft: #0f1a2e; --pw-soft-2: #132741; --pw-card: #111c30; --pw-ink: #eef3fa; --pw-text: #c3cdda; --pw-muted: #8e9ab0; --pw-line: #1f2d45; --pw-sky: #3b9fe0; --pw-sky-2: #52aeea; --pw-sky-ink: #7cc4f5; --pw-shadow: 0 18px 40px -18px rgb(0 0 0 / .7);
    --pw-blob-1: #1b3558; --pw-blob-2: #16304f; --pw-blob-3: #122843; --pw-banner-1: #2d6ea3; --pw-banner-2: #1d5f97; --pw-banner-3: #256fa8; }
html[data-theme="dark"] .pw-photo-brand { background: linear-gradient(160deg, #111c30, #16263f); }
html[data-theme="dark"] .pw-trust-item { color: #8fa0bb; }
html[data-theme="dark"] .tone-sky { background: #132741; color: #7cc4f5; } html[data-theme="dark"] .tone-orange { background: rgb(120 70 10 / .35); color: #f7c27a; }
html[data-theme="dark"] .tone-green { background: rgb(6 78 59 / .4); color: #6ee7b7; } html[data-theme="dark"] .tone-violet { background: rgb(76 29 149 / .35); color: #c4b5fd; }
html[data-theme="dark"] .tone-pink { background: rgb(131 24 67 / .35); color: #f9a8d4; } html[data-theme="dark"] .tone-teal { background: rgb(17 94 89 / .4); color: #5eead4; }
}