/* ClientFoyer dark mode (Oct 22, 2026; palette completed Oct 23 after
 * Eric's first hands-on pass: "doesn't really look right").
 *
 * Strategy: the app is built from light Tailwind utilities. This sheet
 * remaps them when <html> carries .dark, set pre-paint by the inline
 * theme-init script (persisted preference on app pages; the visitor's
 * system preference on portal / public views — Eric's ruling, Oct 21).
 * Remaps are scoped under .dark (specificity 0,2,0), beating the
 * single-class utilities (0,1,0) regardless of stylesheet order.
 *
 * v2 (Oct 23) completes the coverage from a full utility inventory of
 * the templates (264 distinct color utilities): tint surfaces and their
 * opacity variants, tint text/borders, gradient washes, white-alpha
 * sticky headers, divide/ring colors, file-input buttons, and a
 * specificity fix for form controls (utility-styled inputs keep their
 * colors). Saturated brand/status fills (bg-indigo-600, bg-emerald-500,
 * text-white, low-alpha white overlays on colored surfaces) are
 * intentionally NOT remapped — they read correctly on dark as-is.
 */

html.dark {
    color-scheme: dark;
    scrollbar-color: #334155 #020617;
}

html.dark body {
    background-color: #020617;
}

html.dark ::selection {
    background-color: #3730a3;
    color: #eef2ff;
}

/* ---- Surfaces ---- */
.dark .bg-white { background-color: #0f172a; }
.dark .bg-white\/95 { background-color: rgb(2 6 23 / 0.95); }
.dark .bg-white\/80 { background-color: rgb(2 6 23 / 0.8); }
.dark .bg-slate-50 { background-color: #020617; }
.dark .bg-slate-50\/50 { background-color: rgb(2 6 23 / 0.5); }
.dark .bg-slate-50\/60 { background-color: rgb(2 6 23 / 0.6); }
.dark .bg-slate-50\/70 { background-color: rgb(2 6 23 / 0.7); }
.dark .bg-slate-50\/80 { background-color: rgb(2 6 23 / 0.8); }
.dark .bg-slate-100 { background-color: #1e293b; }
.dark .bg-slate-200 { background-color: #334155; }
.dark .bg-slate-300 { background-color: #475569; }

/* ---- Tinted surfaces (badges, panels, pills) ---- */
.dark .bg-indigo-50 { background-color: #1e1b4b; }
.dark .bg-indigo-50\/50 { background-color: rgb(30 27 75 / 0.55); }
.dark .bg-indigo-50\/60 { background-color: rgb(30 27 75 / 0.65); }
.dark .bg-indigo-50\/70 { background-color: rgb(30 27 75 / 0.75); }
.dark .bg-indigo-100 { background-color: #312e81; }
.dark .bg-indigo-200 { background-color: #3730a3; }
.dark .bg-violet-50 { background-color: #2e1065; }
.dark .bg-violet-100 { background-color: #4c1d95; }
.dark .bg-purple-50 { background-color: #3b0764; }
.dark .bg-purple-50\/60 { background-color: rgb(59 7 100 / 0.65); }
.dark .bg-purple-100 { background-color: #581c87; }
.dark .bg-emerald-50 { background-color: #052e22; }
.dark .bg-emerald-50\/50 { background-color: rgb(5 46 34 / 0.55); }
.dark .bg-emerald-50\/80 { background-color: rgb(5 46 34 / 0.85); }
.dark .bg-emerald-100 { background-color: #064e3b; }
.dark .bg-emerald-100\/50 { background-color: rgb(6 78 59 / 0.55); }
.dark .bg-green-50 { background-color: #052e22; }
.dark .bg-green-100 { background-color: #14532d; }
.dark .bg-red-50 { background-color: #3b0d0d; }
.dark .bg-red-100 { background-color: #7f1d1d; }
.dark .bg-rose-50 { background-color: #3b0d14; }
.dark .bg-rose-100 { background-color: #881337; }
.dark .bg-amber-50 { background-color: #3a2a05; }
.dark .bg-amber-100 { background-color: #78350f; }
.dark .bg-yellow-50 { background-color: #3a2a05; }
.dark .bg-yellow-100 { background-color: #713f12; }
.dark .bg-sky-50 { background-color: #082f3a; }
.dark .bg-sky-100 { background-color: #0c4a6e; }
.dark .bg-blue-50 { background-color: #0a2447; }
.dark .bg-blue-100 { background-color: #1e3a8a; }
.dark .bg-cyan-50 { background-color: #083344; }
.dark .bg-teal-50 { background-color: #042f2e; }

/* ---- Gradient washes (light from/to stops become deep tones) ---- */
.dark .from-indigo-50 { --tw-gradient-from: #131038 var(--tw-gradient-via-position, var(--tw-gradient-to-position)); --tw-gradient-to: rgb(19 16 56 / 0) var(--tw-gradient-to-position); }
.dark .from-emerald-50 { --tw-gradient-from: #041f18 var(--tw-gradient-via-position, var(--tw-gradient-to-position)); --tw-gradient-to: rgb(4 31 24 / 0) var(--tw-gradient-to-position); }
.dark .from-slate-50 { --tw-gradient-from: #020617 var(--tw-gradient-via-position, var(--tw-gradient-to-position)); --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position); }
.dark .from-white { --tw-gradient-from: #0f172a var(--tw-gradient-via-position, var(--tw-gradient-to-position)); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); }
.dark .to-violet-50 { --tw-gradient-to: #2e1065 var(--tw-gradient-to-position); }
.dark .to-teal-50 { --tw-gradient-to: #042f2e var(--tw-gradient-to-position); }
.dark .to-indigo-50 { --tw-gradient-to: #1e1b4b var(--tw-gradient-to-position); }
.dark .to-slate-50 { --tw-gradient-to: #020617 var(--tw-gradient-to-position); }
.dark .to-white { --tw-gradient-to: #0f172a var(--tw-gradient-to-position); }

/* ---- Text ---- */
.dark .text-slate-900 { color: #f1f5f9; }
.dark .text-slate-800 { color: #e2e8f0; }
.dark .text-slate-700 { color: #cbd5e1; }
.dark .text-slate-600 { color: #9fb0c3; }
.dark .text-slate-500 { color: #94a3b8; }
.dark .text-slate-400 { color: #7d8ca3; }
.dark .text-black { color: #f1f5f9; }
.dark .text-indigo-600 { color: #818cf8; }
.dark .text-indigo-700 { color: #a5b4fc; }
.dark .text-indigo-800 { color: #a5b4fc; }
.dark .text-indigo-900 { color: #c7d2fe; }
.dark .text-violet-700 { color: #c4b5fd; }
.dark .text-purple-700 { color: #d8b4fe; }
.dark .text-emerald-600 { color: #34d399; }
.dark .text-emerald-700 { color: #34d399; }
.dark .text-emerald-800 { color: #6ee7b7; }
.dark .text-emerald-900 { color: #6ee7b7; }
.dark .text-green-600 { color: #4ade80; }
.dark .text-green-700 { color: #4ade80; }
.dark .text-green-800 { color: #86efac; }
.dark .text-red-600 { color: #f87171; }
.dark .text-red-700 { color: #f87171; }
.dark .text-red-800 { color: #fca5a5; }
.dark .text-rose-600 { color: #fb7185; }
.dark .text-rose-700 { color: #fb7185; }
.dark .text-rose-800 { color: #fda4af; }
.dark .text-amber-600 { color: #fbbf24; }
.dark .text-amber-700 { color: #fbbf24; }
.dark .text-amber-800 { color: #fcd34d; }
.dark .text-amber-900 { color: #fcd34d; }
.dark .text-yellow-600 { color: #facc15; }
.dark .text-yellow-700 { color: #facc15; }
.dark .text-yellow-800 { color: #fde047; }
.dark .text-sky-600 { color: #38bdf8; }
.dark .text-sky-700 { color: #38bdf8; }
.dark .text-sky-800 { color: #7dd3fc; }
.dark .text-blue-600 { color: #60a5fa; }
.dark .text-blue-700 { color: #60a5fa; }
.dark .text-blue-800 { color: #93c5fd; }

/* ---- Borders, dividers, rings ---- */
.dark .border-slate-100 { border-color: #1a2740; }
.dark .border-slate-200 { border-color: #1e293b; }
.dark .border-slate-200\/60 { border-color: rgb(30 41 59 / 0.6); }
.dark .border-slate-200\/70 { border-color: rgb(30 41 59 / 0.7); }
.dark .border-slate-200\/80 { border-color: rgb(30 41 59 / 0.8); }
.dark .border-slate-200\/90 { border-color: rgb(30 41 59 / 0.9); }
.dark .border-indigo-100\/80 { border-color: rgb(49 46 129 / 0.8); }
.dark .border-indigo-200\/60 { border-color: rgb(55 48 163 / 0.6); }
.dark .border-amber-200\/80 { border-color: rgb(146 64 14 / 0.8); }
.dark .border-slate-300 { border-color: #334155; }
.dark .border-slate-400 { border-color: #475569; }
.dark .border-indigo-100 { border-color: #312e81; }
.dark .border-indigo-200 { border-color: #3730a3; }
.dark .border-indigo-300 { border-color: #4338ca; }
.dark .border-violet-200 { border-color: #5b21b6; }
.dark .border-purple-200 { border-color: #6b21a8; }
.dark .border-emerald-100 { border-color: #065f46; }
.dark .border-emerald-200 { border-color: #065f46; }
.dark .border-emerald-300 { border-color: #047857; }
.dark .border-green-200 { border-color: #166534; }
.dark .border-red-100 { border-color: #7f1d1d; }
.dark .border-red-200 { border-color: #7f1d1d; }
.dark .border-red-300 { border-color: #991b1b; }
.dark .border-rose-200 { border-color: #9f1239; }
.dark .border-amber-100 { border-color: #92400e; }
.dark .border-amber-200 { border-color: #92400e; }
.dark .border-amber-300 { border-color: #b45309; }
.dark .border-yellow-200 { border-color: #a16207; }
.dark .border-sky-200 { border-color: #0369a1; }
.dark .border-blue-200 { border-color: #1d4ed8; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1a2740; }
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; }
.dark .divide-slate-300 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; }
.dark .ring-slate-100 { --tw-ring-color: #1e293b; }
.dark .ring-slate-200 { --tw-ring-color: #334155; }
.dark .ring-slate-300 { --tw-ring-color: #475569; }
.dark .ring-indigo-100 { --tw-ring-color: #312e81; }
.dark .ring-indigo-200 { --tw-ring-color: #3730a3; }
.dark .ring-emerald-100 { --tw-ring-color: #065f46; }
.dark .ring-red-100 { --tw-ring-color: #7f1d1d; }
.dark .ring-amber-100 { --tw-ring-color: #92400e; }

/* ---- Hover states ---- */
.dark .hover\:bg-slate-50:hover { background-color: #1e293b; }
.dark .hover\:bg-slate-100:hover { background-color: #273549; }
.dark .hover\:bg-slate-200:hover { background-color: #3b4c63; }
.dark .hover\:bg-white:hover { background-color: #1e293b; }
.dark .hover\:bg-indigo-50:hover { background-color: #2b2764; }
.dark .hover\:bg-indigo-100:hover { background-color: #3730a3; }
.dark .hover\:bg-emerald-50:hover { background-color: #064e3b; }
.dark .hover\:bg-emerald-100:hover { background-color: #065f46; }
.dark .hover\:bg-red-50:hover { background-color: #7f1d1d; }
.dark .hover\:bg-amber-50:hover { background-color: #78350f; }
.dark .hover\:text-slate-900:hover { color: #f1f5f9; }
.dark .hover\:text-slate-700:hover { color: #cbd5e1; }
.dark .hover\:text-indigo-600:hover { color: #818cf8; }
.dark .hover\:text-indigo-700:hover { color: #a5b4fc; }
.dark .hover\:text-red-700:hover { color: #f87171; }
.dark .hover\:border-slate-300:hover { border-color: #475569; }
.dark .hover\:border-slate-400:hover { border-color: #64748b; }
.dark .hover\:file\:bg-indigo-100:hover::file-selector-button { background-color: #3730a3; }

/* ---- Form controls ----
 * :where() keeps this at element-level specificity, so a utility-styled
 * control (e.g. an indigo submit input, a file button) keeps its colors;
 * only bare controls pick up the dark surface. */
.dark :where(input, select, textarea) {
    background-color: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b;
}
.dark :where(input[type="checkbox"], input[type="radio"]) {
    background-color: #1e293b;
}
.dark .file\:bg-indigo-50::file-selector-button { background-color: #1e1b4b; }
.dark .file\:text-indigo-700::file-selector-button { color: #a5b4fc; }

/* Code blocks (API/settings pages) */
.dark pre,
.dark code {
    background-color: #0b1220;
    color: #e2e8f0;
}
/* Inline code inside already-dark chips keeps its own utility colors. */
.dark :where(p, span, td, li) > code:only-child {
    background-color: #0b1220;
}

/* ---- Theme toggle ----
 * In-nav variant (cf-theme-toggle-nav): sits in the header's right
 * cluster on dashboard/admin/landing surfaces. Standalone variant:
 * fixed at the TOP-right of the viewport on pages without a nav. */
.cf-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    color: #334155;
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.18);
    cursor: pointer;
}
.cf-theme-toggle:hover { background-color: #f1f5f9; }
.cf-theme-toggle-nav {
    position: static;
    width: 2.25rem;
    height: 2.25rem;
    box-shadow: none;
    border-color: #cbd5e1;
    background-color: transparent;
    color: #64748b;
    flex-shrink: 0;
}
.cf-theme-toggle-nav:hover { background-color: #f1f5f9; color: #334155; }
html.dark .cf-theme-toggle {
    border-color: #334155;
    background-color: #1e293b;
    color: #fbbf24;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
html.dark .cf-theme-toggle-nav {
    background-color: transparent;
    box-shadow: none;
    color: #fbbf24;
}
html.dark .cf-theme-toggle-nav:hover { background-color: #1e293b; }
.cf-theme-toggle .cf-icon-sun { display: none; }
html.dark .cf-theme-toggle .cf-icon-sun { display: block; }
html.dark .cf-theme-toggle .cf-icon-moon { display: none; }