/* @file    theme.css
   @created 2026-11-10 by Claude
   @desc    Colour tokens for BOF (desktop) and /m (staff mobile). Light values are the colours the pages
            already used; dark values live under :root[data-theme="dark"]. The attribute is set before first
            paint by the inline script in Components/App.razor (window.inseeTheme). Loaded AFTER main.css.
            Fills that carry white text (brand red, success/danger buttons) use --base-color etc.; red used as
            TEXT or an outline on a surface uses --brand-text, which is lighter in dark mode. */

:root {
    color-scheme: light;

    /* brand */
    --base-color: #9E1C20;
    --base-color-soft: #B33A3F;
    --brand-text: #9E1C20;
    --on-brand: #FFFFFF;

    /* surfaces (existing tokens keep their light values) */
    --surface-color: #FFFFFF;
    --surface-panel: #FCF8F6;
    --surface-muted: #F6F1EE;
    --surface-input: #F8F4F1;
    --surface-subtle: #FAFAFA;
    --surface-sunken: #F3F4F6;
    --row-hover: #FEF2F2;

    /* borders */
    --border-soft: #E6DDD7;
    --border-gray: #E5E7EB;
    --border-gray-strong: #D1D5DB;

    /* text */
    --text-color: #3F3532;
    --text-muted: #6E625E;
    --text-soft: #8E827C;
    --text-strong: #111827;
    --text-dim: #374151;
    --text-gray: #6B7280;
    --text-faint: #9CA3AF;

    /* status: *-text on surface, *-bg tinted chip background */
    --success-text: #15803D;
    --success-bg: #DCFCE7;
    --warn-text: #B45309;
    --warn-bg: #FEF3C7;
    --danger-text: #DC2626;
    --danger-bg: #FEE2E2;
    --info-text: #1D4ED8;
    --info-bg: #DBEAFE;
    --link-color: #0071C1;
    --orange-text: #C2410C;
    --orange-bg: #FFEDD5;
    --purple-text: #7C3AED;
    --purple-bg: #EDE9FE;

    --shadow-soft: 0 12px 30px rgba(77, 35, 28, 0.08);

    /* layout chrome */
    --sidebar-bg: linear-gradient(160deg, #c0232a 0%, #831a1e 55%, #5a1014 100%);
    --menu-active-bg: rgba(255, 255, 255, 0.98);
    --overlay: rgba(0, 0, 0, 0.5);

    /* /m */
    --m-bg: #f4f5f7;
    --m-top-bg: #9E1C20;
    --m-border: #e4e7eb;
    --m-border-faint: #f0f2f5;
    --m-count-bg: #e4e7eb;
    --m-chip-bg: #fde8e9;
    --m-alert-border: #f0b4b7;
    --m-alert-bg: #fff5f5;
    --m-old: #b42318;
}

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

    /* Warm light-gray palette (Ray option C, 10/11): the red stays the main colour, grays lean red so they sit next to it. */
    --base-color: #9E1C20;          /* fills with white text: same as light */
    --base-color-soft: #EB8E91;
    --brand-text: #FF9DA1;          /* red as TEXT / outline on a dark surface */
    --on-brand: #FFFFFF;

    --surface-muted: #2A2627;       /* page background */
    --surface-panel: #302C2D;       /* toolbar */
    --surface-color: #353031;       /* cards */
    --surface-input: #3E3839;       /* raised: inputs, popups */
    --surface-subtle: #3A3536;      /* row stripe */
    --surface-sunken: #242021;
    --row-hover: #4A3235;

    --border-soft: #46403F;
    --border-gray: #46403F;
    --border-gray-strong: #5A5352;

    --text-color: #F2ECEC;
    --text-muted: #BDB2B3;
    --text-soft: #AFA4A5;
    --text-strong: #FBF7F7;
    --text-dim: #E0D7D8;
    --text-gray: #BDB2B3;
    --text-faint: #AEA3A4;

    --success-text: #6EE7A0;
    --success-bg: #213A2B;
    --warn-text: #FBBF24;
    --warn-bg: #4A3A1A;
    --danger-text: #FF9A9A;
    --danger-bg: #4F2629;
    --info-text: #8DBBFF;
    --info-bg: #2B3A55;
    --link-color: #8DBBFF;
    --orange-text: #FDA56B;
    --orange-bg: #4D3020;
    --purple-text: #C0A8FF;
    --purple-bg: #3C3158;

    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.45);

    --sidebar-bg: linear-gradient(160deg, #c0232a 0%, #831a1e 55%, #5a1014 100%);   /* same as light */
    --menu-active-bg: rgba(255, 255, 255, 0.98);
    --flyout-hover-bg: rgba(255, 255, 255, 0.08);   /* collapsed-sidebar flyout (main.css .secondary-menu in .burger_menu) */
    --flyout-active-bg: #3E3839;
    --flyout-active-text: #FFFFFF;
    --menu-selected-bg: #3E3839;     /* dark only: selected sidebar item = warm gray + white text (Ray 10/11) */
    --overlay: rgba(0, 0, 0, 0.7);

    --m-bg: #2A2627;
    --m-top-bg: #9E1C20;
    --m-border: #46403F;
    --m-border-faint: #413B3C;
    --m-count-bg: #46403F;
    --m-chip-bg: #4F2629;
    --m-alert-border: #7A3236;
    --m-alert-bg: #3E2628;
    --m-old: #FF9F98;
}

/* Printed pages and PDF-oriented views stay light. */
@media print {
    :root, :root[data-theme="dark"] {
        color-scheme: light;
        --base-color: #9E1C20;
        --base-color-soft: #B33A3F;
        --brand-text: #9E1C20;
        --surface-color: #FFFFFF;
        --surface-panel: #FCF8F6;
        --surface-muted: #FFFFFF;
        --surface-input: #F8F4F1;
        --surface-subtle: #FAFAFA;
        --surface-sunken: #F3F4F6;
        --row-hover: #FEF2F2;
        --border-soft: #E6DDD7;
        --border-gray: #E5E7EB;
        --border-gray-strong: #D1D5DB;
        --text-color: #3F3532;
        --text-muted: #6E625E;
        --text-soft: #8E827C;
        --text-strong: #111827;
        --text-dim: #374151;
        --text-gray: #6B7280;
        --text-faint: #9CA3AF;
        --success-text: #15803D;
        --success-bg: #DCFCE7;
        --warn-text: #B45309;
        --warn-bg: #FEF3C7;
        --danger-text: #DC2626;
        --danger-bg: #FEE2E2;
        --info-text: #1D4ED8;
        --info-bg: #DBEAFE;
        --link-color: #0071C1;
        --orange-text: #C2410C;
        --orange-bg: #FFEDD5;
        --purple-text: #7C3AED;
        --purple-bg: #EDE9FE;
        --sidebar-bg: linear-gradient(160deg, #c0232a 0%, #831a1e 55%, #5a1014 100%);
        --menu-active-bg: rgba(255, 255, 255, 0.98);
        --overlay: rgba(0, 0, 0, 0.5);
        --m-bg: #f4f5f7;
        --m-top-bg: #9E1C20;
        --m-border: #e4e7eb;
        --m-border-faint: #f0f2f5;
        --m-count-bg: #e4e7eb;
        --m-chip-bg: #fde8e9;
        --m-alert-border: #f0b4b7;
        --m-alert-bg: #fff5f5;
        --m-old: #b42318;
    }
}

/* Theme switch rows (profile dropdown in MainLayout, top bar in MobileLayout).
   State comes from <html data-theme-mode>, set by inseeTheme, so no Blazor round trip is needed. */
.theme-switch-label { font-size: 12px; color: var(--text-soft); padding: 8px 0 2px; border-top: 1px solid var(--border-soft); margin-top: 6px; }
.my-profile-dropdown .theme-opt { cursor: pointer; display: flex; align-items: center; gap: 8px; padding-top: 6px; padding-bottom: 2px; text-decoration: none; }
.my-profile-dropdown .theme-opt .theme-check { margin-left: auto; visibility: hidden; font-size: 11px; }
html[data-theme-mode="light"] .theme-opt[data-mode="light"] .theme-check,
html[data-theme-mode="dark"] .theme-opt[data-mode="dark"] .theme-check,
html[data-theme-mode="system"] .theme-opt[data-mode="system"] .theme-check { visibility: visible; }

/* Collapsed-sidebar flyout: dark shadow; item colours come from the tokens above. Beats the generic dark sidebar rules (white !important text). */
:root[data-theme="dark"] .burger_menu .sidebar .secondary-menu { box-shadow: var(--shadow-soft); }
:root[data-theme="dark"] .burger_menu .sidebar .secondary-menu .main-menu-item-active,
:root[data-theme="dark"] .burger_menu .sidebar .secondary-menu .main-menu-item.secondary-menu-item-active { background: var(--flyout-active-bg); }
:root[data-theme="dark"] .burger_menu .sidebar .secondary-menu .main-menu-item span { color: var(--text-color) !important; }
:root[data-theme="dark"] .burger_menu .sidebar .secondary-menu .main-menu-item-active span,
:root[data-theme="dark"] .burger_menu .sidebar .secondary-menu .secondary-menu-item-active span { color: var(--flyout-active-text) !important; }

/* /m approval card is an <a>: the global a:hover/a:focus link colour (bootstrap) beat .m-card{color:inherit} and turned
   the text blue on a dark card. Dark only, so light mode renders exactly as before. */
:root[data-theme="dark"] .m-card:hover,
:root[data-theme="dark"] .m-card:focus,
:root[data-theme="dark"] .m-card:focus-visible,
:root[data-theme="dark"] .m-card:visited { color: inherit; }

/* Third-party widgets that ship light-only colours. */
:root[data-theme="dark"] .swal2-popup { color-scheme: light; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-faint); }

/* Login card (Components/Pages/Login.razor keeps its red full-bleed design; only the white card follows the theme). */
:root[data-theme="dark"] {
    --login-ink: #F2ECEC;
    --login-ink-2: #BDB2B3;
    --login-ink-3: #AEA3A4;
    --login-line: #46403F;
    --login-field: #3E3839;
    --login-card: #353031;
    --login-line-hover: #5A5352;
    --login-err-bg: #4F2629;
    --login-err-line: #7A3236;
    --login-err-text: #FF9A9A;
}

/* Syncfusion Blazor charts paint a #FFFFFF background rect and dark label text from the Tailwind (light) chart theme
   even when tailwind-dark.css is loaded, so recolour them in dark mode only. */
:root[data-theme="dark"] .e-chart svg rect[fill="#FFFFFF"],
:root[data-theme="dark"] .e-accumulationchart svg rect[fill="#FFFFFF"] { fill: var(--surface-color); }
:root[data-theme="dark"] .e-chart svg text,
:root[data-theme="dark"] .e-accumulationchart svg text { fill: var(--text-dim) !important; }
:root[data-theme="dark"] .e-chart svg path[stroke="#dbdbdb"] { stroke: var(--border-gray); }
:root[data-theme="dark"] .e-chart svg path[stroke="#b5b5b5"] { stroke: var(--border-gray-strong); }

/* GENERATED per-colour dark tokens. Light mode never defines them: every use is var(--x, <original literal>),
   so light resolves to the exact original value. Print resets them (initial -> fallback). */
:root[data-theme="dark"] {
    --bd-000: var(--text-strong);
    --bd-9e1c20: var(--brand-text);
    --bd-9fd3ad: var(--success-bg);
    --bd-aaacaf: var(--border-gray-strong);
    --bd-adb5bd: var(--border-gray-strong);
    --bd-b8daff: var(--border-gray-strong);
    --bd-b8e8c8: var(--success-bg);
    --bd-c6c6c6: var(--border-gray-strong);
    --bd-c9c9c9: var(--border-gray-strong);
    --bd-cacaca: var(--border-gray-strong);
    --bd-cbd5e0: var(--border-gray-strong);
    --bd-cbd5e1: var(--border-gray-strong);
    --bd-ccc: var(--border-gray-strong);
    --bd-ced4da: var(--border-gray-strong);
    --bd-d0d9f0: var(--border-gray-strong);
    --bd-d1d1d1: var(--border-gray-strong);
    --bd-d1d5db: var(--border-gray-strong);
    --bd-d8dde3: var(--border-gray-strong);
    --bd-d9d2cb: var(--border-gray);
    --bd-d9dde3: var(--border-gray-strong);
    --bd-dadce0: var(--border-gray-strong);
    --bd-dbdbdb: var(--border-gray-strong);
    --bd-dcdcdc: var(--border-gray-strong);
    --bd-ddd: var(--border-gray);
    --bd-dee2e6: var(--border-gray-strong);
    --bd-e0e0e0: var(--border-gray-strong);
    --bd-e2e2e2: var(--border-gray);
    --bd-e2e8f0: var(--border-gray-strong);
    --bd-e3c6c7: var(--danger-bg);
    --bd-e3e6ec: var(--border-gray);
    --bd-e5e5e5: var(--border-gray);
    --bd-e5e7eb: var(--border-gray);
    --bd-e6e6e6: var(--border-gray);
    --bd-e8e8e8: var(--border-gray);
    --bd-e8edf2: var(--border-gray);
    --bd-e9ecef: var(--border-gray);
    --bd-ebebeb: var(--border-gray);
    --bd-ececec: var(--border-gray);
    --bd-eee: var(--border-gray);
    --bd-f0c0c0: var(--danger-bg);
    --bd-f0c9c9: var(--danger-bg);
    --bd-f0d58c: var(--warn-bg);
    --bd-f0d9da: var(--danger-bg);
    --bd-f0dfb5: var(--warn-bg);
    --bd-f0f0f0: var(--border-gray);
    --bd-f2a9a3: var(--danger-bg);
    --bd-f2f2f2: var(--border-gray);
    --bd-f3f4f6: var(--surface-sunken);
    --bd-f5c2c2: var(--danger-bg);
    --bd-f5c6cb: var(--danger-bg);
    --bd-f8f9fa: var(--border-gray);
    --bd-faebcc: var(--warn-bg);
    --bd-ffe9a8: var(--warn-bg);
    --bg-b3e5fc: var(--info-bg);
    --bg-bbdefb: var(--info-bg);
    --bg-c8e6c9: var(--success-bg);
    --bg-cfe2ff: var(--info-bg);
    --bg-dbeafe: var(--info-bg);
    --bg-dcdcdc: var(--surface-sunken);
    --bg-dcfce7: var(--success-bg);
    --bg-ddd: var(--surface-sunken);
    --bg-dee2e6: var(--surface-sunken);
    --bg-e0f2fe: var(--info-bg);
    --bg-e2e1e1: var(--surface-sunken);
    --bg-e2e8f0: var(--surface-sunken);
    --bg-e3f2fd: var(--info-bg);
    --bg-e5e7eb: var(--surface-sunken);
    --bg-e6f4ea: var(--success-bg);
    --bg-e7f3ff: var(--info-bg);
    --bg-e8e8e8: var(--surface-sunken);
    --bg-e8f4fd: var(--info-bg);
    --bg-e8f5e9: var(--success-bg);
    --bg-e9e9e9: var(--surface-sunken);
    --bg-e9ecef: var(--surface-sunken);
    --bg-e9f7ef: var(--success-bg);
    --bg-eaf7ee: var(--success-bg);
    --bg-ebebeb: var(--surface-sunken);
    --bg-ede7f6: var(--purple-bg);
    --bg-ede9fe: var(--purple-bg);
    --bg-eee: var(--surface-sunken);
    --bg-eef1f5: var(--surface-sunken);
    --bg-eef7ee: var(--success-bg);
    --bg-efefef: var(--surface-sunken);
    --bg-f0f0f0: var(--surface-sunken);
    --bg-f0f4ff: var(--info-bg);
    --bg-f0fdf4: var(--success-bg);
    --bg-f0fff4: var(--success-bg);
    --bg-f1f1f1: var(--surface-sunken);
    --bg-f1f5f9: var(--surface-sunken);
    --bg-f3f3f3: var(--surface-subtle);
    --bg-f3f4f6: var(--surface-sunken);
    --bg-f4f5f7: var(--surface-muted);
    --bg-f5f0e1: var(--warn-bg);
    --bg-f5f5f5: var(--surface-subtle);
    --bg-f5f7fa: var(--surface-subtle);
    --bg-f5f7fb: var(--surface-subtle);
    --bg-f6f1f1: var(--surface-subtle);
    --bg-f7f7f7: var(--surface-subtle);
    --bg-f7f7f9: var(--surface-subtle);
    --bg-f7f9fc: var(--surface-subtle);
    --bg-f8d7da: var(--danger-bg);
    --bg-f8f8f8: var(--surface-subtle);
    --bg-f8f9fa: var(--surface-subtle);
    --bg-f9fafb: var(--surface-subtle);
    --bg-fafafa: var(--surface-subtle);
    --bg-fafbfc: var(--surface-subtle);
    --bg-fce4ec: var(--danger-bg);
    --bg-fcf8e3: var(--warn-bg);
    --bg-fde68a: var(--warn-bg);
    --bg-fdecea: var(--danger-bg);
    --bg-fdecec: var(--danger-bg);
    --bg-fdf0f0: var(--danger-bg);
    --bg-fdf6f6: var(--row-hover);
    --bg-fee2e2: var(--danger-bg);
    --bg-fef2f2: var(--row-hover);
    --bg-fef3c7: var(--warn-bg);
    --bg-fef9c3: var(--surface-input);
    --bg-ffcbcb: var(--danger-bg);
    --bg-ffcdd2: var(--danger-bg);
    --bg-ffe4d6: var(--orange-bg);
    --bg-ffebee: var(--danger-bg);
    --bg-ffedd5: var(--orange-bg);
    --bg-fff-veil: rgba(42, 38, 39, 0.75);
    --bg-fff: var(--surface-color);
    --bg-fff0f0: var(--danger-bg);
    --bg-fff3cd: var(--warn-bg);
    --bg-fff3e0: var(--orange-bg);
    --bg-fff4d6: var(--warn-bg);
    --bg-fff4ee: var(--orange-bg);
    --bg-fff5f0: var(--orange-bg);
    --bg-fff5f5: var(--danger-bg);
    --bg-fff8e1: var(--warn-bg);
    --bg-fff8f8: var(--row-hover);
    --bg-fff9e6: var(--warn-bg);
    --bg-fffaf7: var(--orange-bg);
    --bg-fffafa: var(--row-hover);
    --bg-fffde7: var(--warn-bg);
    --bg-fffde8: var(--warn-bg);
    --bg-fffdf0: var(--warn-bg);
    --bg-fffdf5: var(--warn-bg);
    --bg-fffdf6: var(--warn-bg);
    --bg-fffef5: var(--warn-bg);
    --bg-ffffff: var(--surface-color);
    --bg-white: var(--surface-color);
    --fg-000: var(--text-strong);
    --fg-0066cc: var(--info-text);
    --fg-0071c1: var(--link-color);
    --fg-0284c7: var(--info-text);
    --fg-0369a1: var(--info-text);
    --fg-056622: var(--success-text);
    --fg-059669: var(--success-text);
    --fg-0d6efd: var(--info-text);
    --fg-0f172a: var(--text-strong);
    --fg-0f5ca0: var(--info-text);
    --fg-0f6674: var(--info-text);
    --fg-111827: var(--text-strong);
    --fg-155724: var(--success-text);
    --fg-1565c0: var(--info-text);
    --fg-15803d: var(--success-text);
    --fg-166534: var(--success-text);
    --fg-16a34a: var(--success-text);
    --fg-17a34a: var(--success-text);
    --fg-1976d2: var(--info-text);
    --fg-198754: var(--success-text);
    --fg-1a202c: var(--text-strong);
    --fg-1a6fb5: var(--info-text);
    --fg-1a73e8: var(--info-text);
    --fg-1d4ed8: var(--info-text);
    --fg-1d6aad: var(--info-text);
    --fg-1e6b30: var(--success-text);
    --fg-1e7e34: var(--success-text);
    --fg-1f2933: var(--text-strong);
    --fg-1f2937: var(--text-strong);
    --fg-202124: var(--text-strong);
    --fg-212529: var(--text-strong);
    --fg-222: var(--text-strong);
    --fg-23653a: var(--success-text);
    --fg-23a549: var(--success-text);
    --fg-28a745: var(--success-text);
    --fg-2e7d32: var(--success-text);
    --fg-31708f: var(--info-text);
    --fg-333: var(--text-strong);
    --fg-334155: var(--text-dim);
    --fg-374151: var(--text-dim);
    --fg-424242: var(--text-dim);
    --fg-444: var(--text-dim);
    --fg-475569: var(--text-dim);
    --fg-495057: var(--text-gray);
    --fg-4a3600: var(--warn-text);
    --fg-4f57c8: var(--info-text);
    --fg-51524e: var(--text-dim);
    --fg-52606d: var(--text-gray);
    --fg-555: var(--text-dim);
    --fg-5b6472: var(--text-gray);
    --fg-5e35b1: var(--purple-text);
    --fg-5f6368: var(--text-gray);
    --fg-606060: var(--text-gray);
    --fg-666: var(--text-gray);
    --fg-676767: var(--text-gray);
    --fg-6b21a8: var(--purple-text);
    --fg-6b4e00: var(--warn-text);
    --fg-6b6b6b: var(--text-gray);
    --fg-6b7280: var(--text-gray);
    --fg-6c757d: var(--text-gray);
    --fg-721c24: var(--danger-text);
    --fg-777: var(--text-gray);
    --fg-7a5200: var(--warn-text);
    --fg-7a5a00: var(--warn-text);
    --fg-7b1fa2: var(--purple-text);
    --fg-7b2d8b: var(--purple-text);
    --fg-7b8794: var(--text-gray);
    --fg-7c3aed: var(--purple-text);
    --fg-856404: var(--warn-text);
    --fg-888: var(--text-gray);
    --fg-8a5a08: var(--warn-text);
    --fg-8a6d3b: var(--warn-text);
    --fg-8a8a8a: var(--text-gray);
    --fg-8a919e: var(--text-faint);
    --fg-8a94a6: var(--text-faint);
    --fg-92400e: var(--warn-text);
    --fg-939492: var(--text-faint);
    --fg-94a3b8: var(--text-faint);
    --fg-999: var(--text-faint);
    --fg-9a9a9a: var(--text-faint);
    --fg-9aa1ad: var(--text-faint);
    --fg-9b9b9b: var(--text-faint);
    --fg-9ca3af: var(--text-faint);
    --fg-9e1c13: var(--brand-text);
    --fg-9e1c20: var(--brand-text);
    --fg-9e9e9e: var(--text-faint);
    --fg-a0aec0: var(--text-faint);
    --fg-a12a2a: var(--danger-text);
    --fg-a16207: var(--warn-text);
    --fg-a31515: var(--danger-text);
    --fg-aaa: var(--text-faint);
    --fg-adb5bd: var(--text-faint);
    --fg-b02a37: var(--danger-text);
    --fg-b07d00: var(--warn-text);
    --fg-b0b0b0: var(--text-faint);
    --fg-b26a00: var(--warn-text);
    --fg-b42323: var(--danger-text);
    --fg-b45309: var(--warn-text);
    --fg-b8650a: var(--warn-text);
    --fg-b91c1c: var(--danger-text);
    --fg-bbb: var(--text-faint);
    --fg-bdbdbd: var(--text-faint);
    --fg-c0392b: var(--danger-text);
    --fg-c0c0c0: var(--text-faint);
    --fg-c2410c: var(--orange-text);
    --fg-c62828: var(--danger-text);
    --fg-d32f2f: var(--danger-text);
    --fg-d9534f: var(--danger-text);
    --fg-d97706: var(--warn-text);
    --fg-dc2626: var(--danger-text);
    --fg-dc3545: var(--danger-text);
    --fg-e1b137: var(--warn-text);
    --fg-e65100: var(--orange-text);
    --fg-e67e22: var(--orange-text);
    --fg-ec1f26: var(--brand-text);
    --fg-ed1b24: var(--brand-text);
    --fg-f08c00: var(--orange-text);
    --fg-f54d4d: var(--danger-text);
    --fg-f57f17: var(--warn-text);
    --fg-f9a825: var(--warn-text);
    --fg-fd7e14: var(--orange-text);
    --fg-green: var(--success-text);
    --fg-red: var(--danger-text);
    --sh-f6f6f7: var(--surface-sunken);
}
@media print {
    :root[data-theme="dark"] {
        --bd-000: initial;
        --bd-9e1c20: initial;
        --bd-9fd3ad: initial;
        --bd-aaacaf: initial;
        --bd-adb5bd: initial;
        --bd-b8daff: initial;
        --bd-b8e8c8: initial;
        --bd-c6c6c6: initial;
        --bd-c9c9c9: initial;
        --bd-cacaca: initial;
        --bd-cbd5e0: initial;
        --bd-cbd5e1: initial;
        --bd-ccc: initial;
        --bd-ced4da: initial;
        --bd-d0d9f0: initial;
        --bd-d1d1d1: initial;
        --bd-d1d5db: initial;
        --bd-d8dde3: initial;
        --bd-d9d2cb: initial;
        --bd-d9dde3: initial;
        --bd-dadce0: initial;
        --bd-dbdbdb: initial;
        --bd-dcdcdc: initial;
        --bd-ddd: initial;
        --bd-dee2e6: initial;
        --bd-e0e0e0: initial;
        --bd-e2e2e2: initial;
        --bd-e2e8f0: initial;
        --bd-e3c6c7: initial;
        --bd-e3e6ec: initial;
        --bd-e5e5e5: initial;
        --bd-e5e7eb: initial;
        --bd-e6e6e6: initial;
        --bd-e8e8e8: initial;
        --bd-e8edf2: initial;
        --bd-e9ecef: initial;
        --bd-ebebeb: initial;
        --bd-ececec: initial;
        --bd-eee: initial;
        --bd-f0c0c0: initial;
        --bd-f0c9c9: initial;
        --bd-f0d58c: initial;
        --bd-f0d9da: initial;
        --bd-f0dfb5: initial;
        --bd-f0f0f0: initial;
        --bd-f2a9a3: initial;
        --bd-f2f2f2: initial;
        --bd-f3f4f6: initial;
        --bd-f5c2c2: initial;
        --bd-f5c6cb: initial;
        --bd-f8f9fa: initial;
        --bd-faebcc: initial;
        --bd-ffe9a8: initial;
        --bg-b3e5fc: initial;
        --bg-bbdefb: initial;
        --bg-c8e6c9: initial;
        --bg-cfe2ff: initial;
        --bg-dbeafe: initial;
        --bg-dcdcdc: initial;
        --bg-dcfce7: initial;
        --bg-ddd: initial;
        --bg-dee2e6: initial;
        --bg-e0f2fe: initial;
        --bg-e2e1e1: initial;
        --bg-e2e8f0: initial;
        --bg-e3f2fd: initial;
        --bg-e5e7eb: initial;
        --bg-e6f4ea: initial;
        --bg-e7f3ff: initial;
        --bg-e8e8e8: initial;
        --bg-e8f4fd: initial;
        --bg-e8f5e9: initial;
        --bg-e9e9e9: initial;
        --bg-e9ecef: initial;
        --bg-e9f7ef: initial;
        --bg-eaf7ee: initial;
        --bg-ebebeb: initial;
        --bg-ede7f6: initial;
        --bg-ede9fe: initial;
        --bg-eee: initial;
        --bg-eef1f5: initial;
        --bg-eef7ee: initial;
        --bg-efefef: initial;
        --bg-f0f0f0: initial;
        --bg-f0f4ff: initial;
        --bg-f0fdf4: initial;
        --bg-f0fff4: initial;
        --bg-f1f1f1: initial;
        --bg-f1f5f9: initial;
        --bg-f3f3f3: initial;
        --bg-f3f4f6: initial;
        --bg-f4f5f7: initial;
        --bg-f5f0e1: initial;
        --bg-f5f5f5: initial;
        --bg-f5f7fa: initial;
        --bg-f5f7fb: initial;
        --bg-f6f1f1: initial;
        --bg-f7f7f7: initial;
        --bg-f7f7f9: initial;
        --bg-f7f9fc: initial;
        --bg-f8d7da: initial;
        --bg-f8f8f8: initial;
        --bg-f8f9fa: initial;
        --bg-f9fafb: initial;
        --bg-fafafa: initial;
        --bg-fafbfc: initial;
        --bg-fce4ec: initial;
        --bg-fcf8e3: initial;
        --bg-fde68a: initial;
        --bg-fdecea: initial;
        --bg-fdecec: initial;
        --bg-fdf0f0: initial;
        --bg-fdf6f6: initial;
        --bg-fee2e2: initial;
        --bg-fef2f2: initial;
        --bg-fef3c7: initial;
        --bg-fef9c3: initial;
        --bg-ffcbcb: initial;
        --bg-ffcdd2: initial;
        --bg-ffe4d6: initial;
        --bg-ffebee: initial;
        --bg-ffedd5: initial;
        --bg-fff-veil: initial;
        --bg-fff: initial;
        --bg-fff0f0: initial;
        --bg-fff3cd: initial;
        --bg-fff3e0: initial;
        --bg-fff4d6: initial;
        --bg-fff4ee: initial;
        --bg-fff5f0: initial;
        --bg-fff5f5: initial;
        --bg-fff8e1: initial;
        --bg-fff8f8: initial;
        --bg-fff9e6: initial;
        --bg-fffaf7: initial;
        --bg-fffafa: initial;
        --bg-fffde7: initial;
        --bg-fffde8: initial;
        --bg-fffdf0: initial;
        --bg-fffdf5: initial;
        --bg-fffdf6: initial;
        --bg-fffef5: initial;
        --bg-ffffff: initial;
        --bg-white: initial;
        --fg-000: initial;
        --fg-0066cc: initial;
        --fg-0071c1: initial;
        --fg-0284c7: initial;
        --fg-0369a1: initial;
        --fg-056622: initial;
        --fg-059669: initial;
        --fg-0d6efd: initial;
        --fg-0f172a: initial;
        --fg-0f5ca0: initial;
        --fg-0f6674: initial;
        --fg-111827: initial;
        --fg-155724: initial;
        --fg-1565c0: initial;
        --fg-15803d: initial;
        --fg-166534: initial;
        --fg-16a34a: initial;
        --fg-17a34a: initial;
        --fg-1976d2: initial;
        --fg-198754: initial;
        --fg-1a202c: initial;
        --fg-1a6fb5: initial;
        --fg-1a73e8: initial;
        --fg-1d4ed8: initial;
        --fg-1d6aad: initial;
        --fg-1e6b30: initial;
        --fg-1e7e34: initial;
        --fg-1f2933: initial;
        --fg-1f2937: initial;
        --fg-202124: initial;
        --fg-212529: initial;
        --fg-222: initial;
        --fg-23653a: initial;
        --fg-23a549: initial;
        --fg-28a745: initial;
        --fg-2e7d32: initial;
        --fg-31708f: initial;
        --fg-333: initial;
        --fg-334155: initial;
        --fg-374151: initial;
        --fg-424242: initial;
        --fg-444: initial;
        --fg-475569: initial;
        --fg-495057: initial;
        --fg-4a3600: initial;
        --fg-4f57c8: initial;
        --fg-51524e: initial;
        --fg-52606d: initial;
        --fg-555: initial;
        --fg-5b6472: initial;
        --fg-5e35b1: initial;
        --fg-5f6368: initial;
        --fg-606060: initial;
        --fg-666: initial;
        --fg-676767: initial;
        --fg-6b21a8: initial;
        --fg-6b4e00: initial;
        --fg-6b6b6b: initial;
        --fg-6b7280: initial;
        --fg-6c757d: initial;
        --fg-721c24: initial;
        --fg-777: initial;
        --fg-7a5200: initial;
        --fg-7a5a00: initial;
        --fg-7b1fa2: initial;
        --fg-7b2d8b: initial;
        --fg-7b8794: initial;
        --fg-7c3aed: initial;
        --fg-856404: initial;
        --fg-888: initial;
        --fg-8a5a08: initial;
        --fg-8a6d3b: initial;
        --fg-8a8a8a: initial;
        --fg-8a919e: initial;
        --fg-8a94a6: initial;
        --fg-92400e: initial;
        --fg-939492: initial;
        --fg-94a3b8: initial;
        --fg-999: initial;
        --fg-9a9a9a: initial;
        --fg-9aa1ad: initial;
        --fg-9b9b9b: initial;
        --fg-9ca3af: initial;
        --fg-9e1c13: initial;
        --fg-9e1c20: initial;
        --fg-9e9e9e: initial;
        --fg-a0aec0: initial;
        --fg-a12a2a: initial;
        --fg-a16207: initial;
        --fg-a31515: initial;
        --fg-aaa: initial;
        --fg-adb5bd: initial;
        --fg-b02a37: initial;
        --fg-b07d00: initial;
        --fg-b0b0b0: initial;
        --fg-b26a00: initial;
        --fg-b42323: initial;
        --fg-b45309: initial;
        --fg-b8650a: initial;
        --fg-b91c1c: initial;
        --fg-bbb: initial;
        --fg-bdbdbd: initial;
        --fg-c0392b: initial;
        --fg-c0c0c0: initial;
        --fg-c2410c: initial;
        --fg-c62828: initial;
        --fg-d32f2f: initial;
        --fg-d9534f: initial;
        --fg-d97706: initial;
        --fg-dc2626: initial;
        --fg-dc3545: initial;
        --fg-e1b137: initial;
        --fg-e65100: initial;
        --fg-e67e22: initial;
        --fg-ec1f26: initial;
        --fg-ed1b24: initial;
        --fg-f08c00: initial;
        --fg-f54d4d: initial;
        --fg-f57f17: initial;
        --fg-f9a825: initial;
        --fg-fd7e14: initial;
        --fg-green: initial;
        --fg-red: initial;
        --sh-f6f6f7: initial;
    }
}

/* The error bar uses lightyellow with inherited text; in dark mode it needs its own pair. Dark only, light is untouched. */
:root[data-theme="dark"] #blazor-error-ui { background: var(--warn-bg); color: var(--text-strong); }
:root[data-theme="dark"] .validation-message { color: var(--danger-text); }
:root[data-theme="dark"] .invalid { outline-color: var(--danger-text); }

/* Bootstrap 5.1 utilities/components that hard-code cool grays or white (dark only; light is untouched). */
:root[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
:root[data-theme="dark"] .text-secondary { color: var(--text-gray) !important; }
:root[data-theme="dark"] .bg-white { background-color: var(--surface-color) !important; }
:root[data-theme="dark"] .bg-light { background-color: var(--surface-input) !important; color: var(--text-color); }
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom { border-color: var(--border-gray) !important; }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select { background-color: var(--surface-input); color: var(--text-color); border-color: var(--border-gray-strong); }
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] { background-color: var(--surface-sunken); }
:root[data-theme="dark"] .table { color: var(--text-color); border-color: var(--border-gray); }
:root[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--border-gray); }
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer { background-color: var(--surface-color); color: var(--text-color); border-color: var(--border-gray); }
:root[data-theme="dark"] hr { border-color: var(--border-gray-strong); opacity: 1; }

/* Selected sidebar item in dark mode: warm-gray fill with white text (light keeps the white pill with red text).
   Hover stays the translucent white wash from main.css, so it is distinguishable from the opaque selected fill. */
:root[data-theme="dark"] .sidebar .main-menu-item-active,
:root[data-theme="dark"] .sidebar .main-menu-item.secondary-menu-item-active,
:root[data-theme="dark"] .sidebar .secondary-menu .main-menu-item-active { background: var(--menu-selected-bg); }
:root[data-theme="dark"] .sidebar .main-menu-item-active i,
:root[data-theme="dark"] .sidebar .main-menu-item-active span,
:root[data-theme="dark"] .sidebar .main-menu-item-active > i,
:root[data-theme="dark"] .sidebar .main-menu-item-active > span,
:root[data-theme="dark"] .sidebar .main-menu-item-active .menu-chevron,
:root[data-theme="dark"] .sidebar .secondary-menu-item-active i,
:root[data-theme="dark"] .sidebar .secondary-menu-item-active span,
:root[data-theme="dark"] .sidebar .secondary-menu-item-active > i,
:root[data-theme="dark"] .sidebar .secondary-menu-item-active > span,
:root[data-theme="dark"] .sidebar .secondary-menu .main-menu-item-active i,
:root[data-theme="dark"] .sidebar .secondary-menu .main-menu-item-active span { color: #FFFFFF !important; }

/* Stock Syncfusion primary button: light renders indigo #4F46E5 + white; dark uses the brand red with white text (Ray: red is the main colour).
   The pink accent from sf-dark-warm.css stays for focus rings / selected states / checkboxes, not for filled primary buttons. */
:root[data-theme="dark"] .e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active),
:root[data-theme="dark"] .e-css.e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active) { background-color: #9E1C20; border-color: #9E1C20; color: #FFFFFF; }
:root[data-theme="dark"] .e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active):hover,
:root[data-theme="dark"] .e-css.e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active):hover { background-color: #B3262B; border-color: #B3262B; color: #FFFFFF; }
:root[data-theme="dark"] .e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active):focus,
:root[data-theme="dark"] .e-css.e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active):focus { background-color: #B3262B; border-color: #B3262B; color: #FFFFFF; }
:root[data-theme="dark"] .e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active):active,
:root[data-theme="dark"] .e-css.e-btn.e-primary:not(.e-flat):not(.e-outline):not(:disabled):not(.e-disabled):not(.e-active):active { background-color: #7F1619; border-color: #7F1619; color: #FFFFFF; }

/* Round 2: main.css paints the tab strip white with !important and Bootstrap alerts / outline buttons keep their light palette. Dark only. */
:root[data-theme="dark"] .e-tab-header,
:root[data-theme="dark"] .e-tab-header .e-toolbar-items,
:root[data-theme="dark"] .e-tab-header .e-toolbar-item { background-color: var(--surface-color) !important; }
:root[data-theme="dark"] .alert-danger { background-color: var(--danger-bg); border-color: var(--danger-text); color: var(--danger-text); }
:root[data-theme="dark"] .alert-success { background-color: var(--success-bg); border-color: var(--success-text); color: var(--success-text); }
:root[data-theme="dark"] .alert-warning { background-color: var(--warn-bg); border-color: var(--warn-text); color: var(--warn-text); }
:root[data-theme="dark"] .alert-info { background-color: var(--info-bg); border-color: var(--info-text); color: var(--info-text); }
:root[data-theme="dark"] .alert-light { background-color: var(--surface-input); border-color: var(--border-gray-strong); color: var(--text-color); }
:root[data-theme="dark"] .btn-outline-secondary { color: var(--text-gray); border-color: var(--border-gray-strong); }
:root[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--border-gray-strong); color: var(--text-strong); }
:root[data-theme="dark"] .btn-outline-success { color: var(--success-text); border-color: var(--success-text); }
:root[data-theme="dark"] .btn-outline-success:hover { background-color: var(--success-bg); color: var(--success-text); }
:root[data-theme="dark"] .e-btn.e-info:not(.e-primary) { color: var(--text-color); }
:root[data-theme="dark"] .e-chart svg path[stroke="#f0f0f0"],
:root[data-theme="dark"] .e-chart svg path[stroke="#f2f2f2"] { stroke: var(--border-gray); }