/* =====================================================================
 * Web Portal Themes (skin layer)
 * ---------------------------------------------------------------------
 * The portal markup uses hardcoded Tailwind light utilities (bg-white,
 * text-gray-700, ...). Rather than rewrite thousands of class names, each
 * theme sets CSS variables on html[data-theme="..."] and a shared override
 * block remaps the common Tailwind utilities to those variables.
 *
 * "Basic" = the original light look. The switcher removes the data-theme
 * attribute for Basic, so none of these overrides apply.
 * ===================================================================== */

/* ---- Theme palettes ------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --th-bg: #0f172a;
    --th-surface: #1e293b;
    --th-surface-2: #273449;
    --th-surface-3: #334155;
    --th-border: #334155;
    --th-text: #f1f5f9;
    --th-text-muted: #cbd5e1;
    --th-text-subtle: #94a3b8;
    --th-nav-bg: #1e293b;
    --th-nav-border: #334155;
    --th-hover: #334155;
    --th-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

html[data-theme="midnight"] {
    color-scheme: dark;
    --th-bg: #0b1020;
    --th-surface: #131a31;
    --th-surface-2: #1b2440;
    --th-surface-3: #243056;
    --th-border: #283556;
    --th-text: #e6ecff;
    --th-text-muted: #b6c2e6;
    --th-text-subtle: #8090bf;
    --th-nav-bg: #101732;
    --th-nav-border: #283556;
    --th-hover: #1f2a4d;
    --th-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7);
}

html[data-theme="emerald"] {
    color-scheme: dark;
    --th-bg: #07140f;
    --th-surface: #0f241c;
    --th-surface-2: #143025;
    --th-surface-3: #1c4232;
    --th-border: #1e4536;
    --th-text: #e9fbf2;
    --th-text-muted: #b6e6d2;
    --th-text-subtle: #82bfa6;
    --th-nav-bg: #0c1f18;
    --th-nav-border: #1e4536;
    --th-hover: #16382b;
    --th-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

html[data-theme="slate"] {
    color-scheme: light;
    --th-bg: #e9eef5;
    --th-surface: #ffffff;
    --th-surface-2: #f1f5f9;
    --th-surface-3: #e2e8f0;
    --th-border: #cbd5e1;
    --th-text: #0f172a;
    --th-text-muted: #334155;
    --th-text-subtle: #64748b;
    --th-nav-bg: #f8fafc;
    --th-nav-border: #cbd5e1;
    --th-hover: #e2e8f0;
    --th-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.18);
}

/* ---- Shared overrides (apply to ANY active theme) ------------------- */
html[data-theme] body {
    background-color: var(--th-bg) !important;
    color: var(--th-text);
}

/* Surfaces */
html[data-theme] .bg-gray-50,
html[data-theme] .bg-slate-50 { background-color: var(--th-bg) !important; }
html[data-theme] .bg-white { background-color: var(--th-surface) !important; }
html[data-theme] .bg-gray-100,
html[data-theme] .bg-slate-100 { background-color: var(--th-surface-2) !important; }
html[data-theme] .bg-gray-200,
html[data-theme] .bg-slate-200 { background-color: var(--th-surface-3) !important; }

/* Top navigation (custom gradient in the inline <style>) */
html[data-theme] .top-nav {
    background: var(--th-nav-bg) !important;
    box-shadow: 0 1px 0 var(--th-nav-border), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Text colors */
html[data-theme] .text-black,
html[data-theme] .text-gray-900,
html[data-theme] .text-slate-900,
html[data-theme] .text-gray-800,
html[data-theme] .text-slate-800 { color: var(--th-text) !important; }
html[data-theme] .text-gray-700,
html[data-theme] .text-slate-700,
html[data-theme] .text-gray-600,
html[data-theme] .text-slate-600 { color: var(--th-text-muted) !important; }
html[data-theme] .text-gray-500,
html[data-theme] .text-slate-500,
html[data-theme] .text-gray-400,
html[data-theme] .text-slate-400 { color: var(--th-text-subtle) !important; }

/* Borders.
 * The default (uncolored) border catch uses :where() so it has near-zero
 * specificity — colored utilities like .border-blue-500 still win and keep
 * their accent color. The explicit gray overrides intentionally re-skin the
 * neutral borders that would otherwise show as bright lines on dark surfaces. */
html[data-theme] :where(.border, .border-t, .border-b, .border-l, .border-r, .border-x, .border-y) {
    border-color: var(--th-border);
}
html[data-theme] .border-gray-100,
html[data-theme] .border-gray-200,
html[data-theme] .border-gray-300,
html[data-theme] .border-slate-100,
html[data-theme] .border-slate-200,
html[data-theme] .border-slate-300 { border-color: var(--th-border); }
html[data-theme] .divide-gray-100 > * + *,
html[data-theme] .divide-gray-200 > * + * { border-color: var(--th-border) !important; }

/* Hover states that assume a light background */
html[data-theme] .hover\:bg-gray-50:hover,
html[data-theme] .hover\:bg-gray-100:hover,
html[data-theme] .hover\:bg-slate-50:hover,
html[data-theme] .hover\:bg-slate-100:hover { background-color: var(--th-hover) !important; }

/* Form controls */
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea {
    background-color: var(--th-surface-2) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--th-text-subtle) !important; }
html[data-theme] select option { background-color: var(--th-surface); color: var(--th-text); }

/* Shadows look heavier / softer on dark surfaces */
html[data-theme] .shadow,
html[data-theme] .shadow-md,
html[data-theme] .shadow-lg,
html[data-theme] .shadow-xl { box-shadow: var(--th-shadow) !important; }

/* Light gradient accent panels → flatten onto a theme surface */
html[data-theme] .bg-gradient-to-r.from-yellow-50,
html[data-theme] .bg-gradient-to-r.from-blue-50,
html[data-theme] .bg-gradient-to-br.from-blue-50,
html[data-theme] .bg-gradient-to-r.from-green-50,
html[data-theme] .bg-gradient-to-r.from-gray-50 {
    background-image: none !important;
    background-color: var(--th-surface-2) !important;
}

/* nav-active pill (defined in inline <style>) */
html[data-theme] .nav-active {
    background-color: var(--th-surface-3) !important;
    color: var(--th-text) !important;
}

/* Change Theme button — bg-gray-800 blends into dark surfaces, so give it a
 * vivid accent (and a subtle ring) whenever a theme is active. */
html[data-theme] .theme-change-btn {
    background-color: var(--th-accent-btn, #6366f1) !important;
    background-image: linear-gradient(135deg, var(--th-accent-btn, #6366f1), var(--th-accent-btn-2, #8b5cf6)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.55) !important;
}
html[data-theme] .theme-change-btn:hover {
    filter: brightness(1.08);
}
html[data-theme="emerald"] {
    --th-accent-btn: #059669;
    --th-accent-btn-2: #10b981;
}
html[data-theme="emerald"] .theme-change-btn {
    box-shadow: 0 6px 18px -4px rgba(16, 185, 129, 0.55) !important;
}

/* ---- Theme picker cards -------------------------------------------- */
.theme-card {
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.theme-card:hover { transform: translateY(-3px); }
.theme-card.is-active { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35); }
.theme-swatch {
    width: 100%;
    height: 4.5rem;
    border-radius: 0.85rem;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-swatch span { flex: 1 1 0; }