/*
 * Dark theme, active when static/js/theme.js sets <html data-theme="dark"> (the user's choice, or the system's).
 * 1. Redefines the design tokens (static/css/tokens.css), so every token-based class (text-ink, bg-canvas,
 *    border-line, card, table-head, btn-secondary...) follows.
 * 2. Overrides the fixed Tailwind colours the templates use (slate greys, white, the status tints): templates keep
 *    writing plain light classes. Using a new fixed colour in a template? Add its dark counterpart here.
 * Screen only: printed documents (invoices, payslips) stay light.
 */

/* Theme toggle icon (layout/base.html): show the one for the current choice */
.theme-icon { display: none; }
:root[data-theme-choice="system"] .theme-icon-system,
:root:not([data-theme-choice]) .theme-icon-system,
:root[data-theme-choice="light"] .theme-icon-light,
:root[data-theme-choice="dark"] .theme-icon-dark { display: inline-block; }

@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;

        --color-brand-deep: 196 181 253;   /* #C4B5FD: small accent text on dark */
        --color-ink: 226 232 240;          /* #E2E8F0 */
        --color-ink-2: 203 213 225;        /* #CBD5E1 */
        --color-muted: 148 163 184;        /* #94A3B8 */
        --color-canvas: 11 16 32;          /* #0B1020 page background */
        --color-slate: 100 116 139;        /* #64748B neutral chart series */
        --color-dot-dark: 160 170 255;

        /* Surfaces used below */
        --dark-surface: 19 26 46;          /* #131A2E cards, inputs, topbar */
        --dark-raised: 26 35 60;           /* #1A233C hover rows, subtle fills */
        --dark-raised-2: 36 47 76;         /* #242F4C stronger fills */
    }

    /* --- Components (src/main/frontend/tailwind.css) built from fixed colours ------------------------------ */
    :root[data-theme="dark"] .card { background-color: rgb(var(--dark-surface)); }
    :root[data-theme="dark"] .btn-secondary { background-color: rgb(var(--dark-surface)); color: rgb(203 213 225); }
    :root[data-theme="dark"] .btn-secondary:hover { background-color: rgb(var(--dark-raised)); }
    :root[data-theme="dark"] .input { background-color: rgb(var(--dark-surface)); border-color: rgb(255 255 255 / 0.14); }
    :root[data-theme="dark"] .label { color: rgb(203 213 225); }
    :root[data-theme="dark"] .page-subtitle { color: rgb(148 163 184); }

    /* --- Surfaces ----------------------------------------------------------------------------------------- */
    :root[data-theme="dark"] .bg-white,
    :root[data-theme="dark"] .focus\:bg-white:focus { background-color: rgb(var(--dark-surface)); }
    :root[data-theme="dark"] .bg-white\/80 { background-color: rgb(var(--dark-surface) / 0.8); }
    :root[data-theme="dark"] .bg-slate-50,
    :root[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: rgb(var(--dark-raised)); }
    :root[data-theme="dark"] .bg-slate-100,
    :root[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: rgb(var(--dark-raised-2)); }
    :root[data-theme="dark"] .bg-slate-100\/80 { background-color: rgb(var(--dark-raised-2) / 0.8); }
    :root[data-theme="dark"] .bg-slate-200,
    :root[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: rgb(51 65 85); }
    :root[data-theme="dark"] .bg-slate-800 { background-color: rgb(51 65 85); }
    :root[data-theme="dark"] .hover\:bg-slate-900:hover { background-color: rgb(71 85 105); }

    /* --- Text --------------------------------------------------------------------------------------------- */
    :root[data-theme="dark"] .text-slate-900,
    :root[data-theme="dark"] .hover\:text-slate-900:hover { color: rgb(241 245 249); }
    :root[data-theme="dark"] .text-slate-800 { color: rgb(226 232 240); }
    :root[data-theme="dark"] .text-slate-700,
    :root[data-theme="dark"] .hover\:text-slate-700:hover { color: rgb(203 213 225); }
    :root[data-theme="dark"] .text-slate-600 { color: rgb(180 192 208); }
    :root[data-theme="dark"] .text-slate-500,
    :root[data-theme="dark"] .hover\:text-slate-500:hover { color: rgb(148 163 184); }
    :root[data-theme="dark"] .text-slate-400 { color: rgb(124 138 160); }
    :root[data-theme="dark"] .text-slate-300 { color: rgb(100 116 139); }
    :root[data-theme="dark"] .text-slate-200 { color: rgb(71 85 105); }
    :root[data-theme="dark"] .placeholder\:text-slate-400::placeholder,
    :root[data-theme="dark"] input::placeholder,
    :root[data-theme="dark"] textarea::placeholder { color: rgb(100 116 139); }

    /* Navy surfaces (sidebar, login and sign-up panels) are dark in both themes: keep their light text */
    :root[data-theme="dark"] [class*="navy"].text-slate-200,
    :root[data-theme="dark"] [class*="navy"] .text-slate-200 { color: rgb(226 232 240); }
    :root[data-theme="dark"] [class*="navy"].text-slate-300,
    :root[data-theme="dark"] [class*="navy"] .text-slate-300 { color: rgb(203 213 225); }
    :root[data-theme="dark"] [class*="navy"].text-slate-400,
    :root[data-theme="dark"] [class*="navy"] .text-slate-400 { color: rgb(148 163 184); }
    :root[data-theme="dark"] [class*="navy"] .text-slate-500 { color: rgb(100 116 139); }

    /* --- Lines -------------------------------------------------------------------------------------------- */
    :root[data-theme="dark"] .border-slate-50,
    :root[data-theme="dark"] .border-slate-100,
    :root[data-theme="dark"] .border-slate-200 { border-color: rgb(255 255 255 / 0.08); }
    :root[data-theme="dark"] .border-slate-300 { border-color: rgb(255 255 255 / 0.14); }
    :root[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
    :root[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(255 255 255 / 0.06); }

    /* --- Status tints (alerts, badges, buttons): translucent fills, light text ---------------------------- */
    :root[data-theme="dark"] .bg-emerald-50,
    :root[data-theme="dark"] .hover\:bg-emerald-100:hover,
    :root[data-theme="dark"] .bg-emerald-100,
    :root[data-theme="dark"] .tone-success { background-color: rgb(16 185 129 / 0.15); }
    :root[data-theme="dark"] .bg-amber-50,
    :root[data-theme="dark"] .bg-amber-100,
    :root[data-theme="dark"] .tone-warning { background-color: rgb(245 158 11 / 0.15); }
    :root[data-theme="dark"] .bg-red-50,
    :root[data-theme="dark"] .hover\:bg-red-50:hover,
    :root[data-theme="dark"] .bg-red-100,
    :root[data-theme="dark"] .hover\:bg-red-100:hover,
    :root[data-theme="dark"] .tone-danger { background-color: rgb(239 68 68 / 0.15); }
    :root[data-theme="dark"] .bg-sky-100,
    :root[data-theme="dark"] .tone-info { background-color: rgb(14 165 233 / 0.15); }
    :root[data-theme="dark"] .tone-slate,
    :root[data-theme="dark"] .tone-default { background-color: rgb(var(--dark-raised-2)); color: rgb(203 213 225); }

    :root[data-theme="dark"] .text-emerald-500,
    :root[data-theme="dark"] .text-emerald-600,
    :root[data-theme="dark"] .text-emerald-700,
    :root[data-theme="dark"] .hover\:text-emerald-700:hover,
    :root[data-theme="dark"] .tone-success { color: rgb(110 231 183); }
    :root[data-theme="dark"] .text-amber-500,
    :root[data-theme="dark"] .text-amber-600,
    :root[data-theme="dark"] .text-amber-700,
    :root[data-theme="dark"] .text-amber-800,
    :root[data-theme="dark"] .hover\:text-amber-600:hover,
    :root[data-theme="dark"] .hover\:text-amber-700:hover,
    :root[data-theme="dark"] .tone-warning { color: rgb(252 211 77); }
    :root[data-theme="dark"] .text-red-500,
    :root[data-theme="dark"] .text-red-600,
    :root[data-theme="dark"] .text-red-700,
    :root[data-theme="dark"] .hover\:text-red-500:hover,
    :root[data-theme="dark"] .tone-danger { color: rgb(252 165 165); }
    :root[data-theme="dark"] .text-sky-700,
    :root[data-theme="dark"] .tone-info { color: rgb(125 211 252); }

    :root[data-theme="dark"] .border-emerald-200 { border-color: rgb(16 185 129 / 0.35); }
    :root[data-theme="dark"] .border-amber-200 { border-color: rgb(245 158 11 / 0.35); }
    :root[data-theme="dark"] .border-red-200 { border-color: rgb(239 68 68 / 0.35); }

    /* --- Form controls without classes (native selects, date pickers) ------------------------------------- */
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    :root[data-theme="dark"] textarea { background-color: rgb(var(--dark-surface)); color: rgb(var(--color-ink)); }
    :root[data-theme="dark"] option { background-color: rgb(var(--dark-surface)); }

    /* Charts: ApexCharts' own tooltip and menu surfaces */
    :root[data-theme="dark"] .apexcharts-tooltip,
    :root[data-theme="dark"] .apexcharts-menu { background: rgb(var(--dark-surface)) !important; color: rgb(var(--color-ink)) !important;
        border-color: rgb(255 255 255 / 0.08) !important; }
    :root[data-theme="dark"] .apexcharts-tooltip-title { background: rgb(var(--dark-raised)) !important;
        border-color: rgb(255 255 255 / 0.08) !important; }
}