/* MedMax design tokens and the shared component styles built on them.
 *
 * This used to be an inline <style> block in
 * templates/dashboard/includes/theme_tokens.html, which meant 58.5 KB of
 * identical CSS was written into EVERY page of the product and re-sent on
 * every navigation — a browser can cache a file, it cannot cache a document
 * it has to re-download to read the next screen.
 *
 * What stayed behind in the template is the part that is genuinely per-clinic:
 * the selection colour and the two brand custom properties, which come from
 * the site settings row. They are declared BEFORE this file loads, and
 * nothing here redefines them.
 */
        --bg-primary: #f3f7fb;
        --bg-secondary: rgba(255, 255, 255, 0.82);
        --bg-tertiary: #eaf1f8;
        --bg-card: rgba(255, 255, 255, 0.92);
        --bg-card-solid: #ffffff;
        --bg-card-muted: #f8fbff;
        --bg-hover: rgba(15, 23, 42, 0.05);
        --bg-hover-strong: rgba(15, 23, 42, 0.08);
        --bg-input: rgba(255, 255, 255, 0.96);
        --bg-input-disabled: #e2e8f0;
        --bg-overlay: rgba(255, 255, 255, 0.78);
        --sidebar-bg: #f8fbff;
        --sidebar-panel: rgba(255, 255, 255, 0.9);
        --border-color: rgba(148, 163, 184, 0.28);
        --border-strong: rgba(148, 163, 184, 0.42);
        --text-primary: #0f172a;
        --text-secondary: #334155;
        --text-muted: #64748b;
        --text-faint: #94a3b8;
        --text-on-accent: #ffffff;
        --focus-ring: rgba(14, 165, 233, 0.18);
        --shadow-soft: 0 18px 42px -30px rgba(15, 23, 42, 0.26);
        --shadow-card: 0 28px 60px -34px rgba(15, 23, 42, 0.24);
        --status-success-bg: rgba(16, 185, 129, 0.14);
        --status-success-text: #047857;
        --status-warning-bg: rgba(245, 158, 11, 0.16);
        --status-warning-text: #b45309;
        --status-danger-bg: rgba(239, 68, 68, 0.15);
        --status-danger-text: #b91c1c;
        --status-info-bg: rgba(59, 130, 246, 0.14);
        --status-info-text: #1d4ed8;
        --chart-grid: rgba(148, 163, 184, 0.25);
        --chart-axis-text: #64748b;
        --chart-legend-text: #334155;
    }

    html.dark,
    html[data-theme="dark"] {
        --bg-primary: #07111f;
        --bg-secondary: rgba(15, 23, 42, 0.86);
        --bg-tertiary: #132235;
        --bg-card: rgba(15, 23, 42, 0.9);
        --bg-card-solid: #0f172a;
        --bg-card-muted: #162338;
        --bg-hover: rgba(148, 163, 184, 0.12);
        --bg-hover-strong: rgba(148, 163, 184, 0.18);
        --bg-input: rgba(15, 23, 42, 0.92);
        --bg-input-disabled: #1e293b;
        --bg-overlay: rgba(7, 17, 31, 0.82);
        --sidebar-bg: #08121f;
        --sidebar-panel: rgba(10, 19, 33, 0.92);
        --border-color: rgba(71, 85, 105, 0.62);
        --border-strong: rgba(100, 116, 139, 0.78);
        --text-primary: #e5eef8;
        --text-secondary: #c8d6e5;
        --text-muted: #93a8bf;
        --text-faint: #6c8199;
        --text-on-accent: #f8fafc;
        --focus-ring: rgba(14, 165, 233, 0.24);
        --shadow-soft: 0 24px 56px -38px rgba(2, 6, 23, 0.72);
        --shadow-card: 0 30px 80px -44px rgba(2, 6, 23, 0.86);
        --status-success-bg: rgba(16, 185, 129, 0.18);
        --status-success-text: #6ee7b7;
        --status-warning-bg: rgba(245, 158, 11, 0.2);
        --status-warning-text: #fbbf24;
        --status-danger-bg: rgba(239, 68, 68, 0.2);
        --status-danger-text: #fda4af;
        --status-info-bg: rgba(59, 130, 246, 0.18);
        --status-info-text: #93c5fd;
        --chart-grid: rgba(148, 163, 184, 0.18);
        --chart-axis-text: #c8d6e5;
        --chart-legend-text: #e5eef8;
    }

    html {
        color-scheme: light;
    }

    html.dark,
    html[data-theme="dark"] {
        color-scheme: dark;
    }

    body {
        background: var(--bg-primary);
        color: var(--text-primary);
    }

    html.dark body,
    html[data-theme="dark"] body {
        background:
            radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 28%),
            linear-gradient(180deg, #07111f 0%, #0a1526 50%, #08111e 100%) !important;
        color: var(--text-primary) !important;
    }

    html.dark .bg-white,
    html.dark .bg-slate-50,
    html.dark .bg-slate-100,
    html.dark .bg-slate-200,
    html[data-theme="dark"] .bg-white,
    html[data-theme="dark"] .bg-slate-50,
    html[data-theme="dark"] .bg-slate-100,
    html[data-theme="dark"] .bg-slate-200 {
        background-color: var(--bg-card-solid) !important;
    }

    html.dark .bg-slate-900,
    html.dark .bg-slate-950,
    html[data-theme="dark"] .bg-slate-900,
    html[data-theme="dark"] .bg-slate-950 {
        background-color: #020817 !important;
    }

    html.dark .text-slate-900,
    html.dark .text-slate-800,
    html.dark .text-slate-700,
    html[data-theme="dark"] .text-slate-900,
    html[data-theme="dark"] .text-slate-800,
    html[data-theme="dark"] .text-slate-700 {
        color: var(--text-primary) !important;
    }

    html.dark .text-slate-600,
    html.dark .text-slate-500,
    html.dark .text-slate-400,
    html.dark .text-slate-300,
    html[data-theme="dark"] .text-slate-600,
    html[data-theme="dark"] .text-slate-500,
    html[data-theme="dark"] .text-slate-400,
    html[data-theme="dark"] .text-slate-300 {
        color: var(--text-secondary) !important;
    }

    html.dark .border-white,
    html.dark .border-slate-50,
    html.dark .border-slate-100,
    html.dark .border-slate-200,
    html.dark .border-slate-300,
    html.dark .border-slate-400,
    html[data-theme="dark"] .border-white,
    html[data-theme="dark"] .border-slate-50,
    html[data-theme="dark"] .border-slate-100,
    html[data-theme="dark"] .border-slate-200,
    html[data-theme="dark"] .border-slate-300,
    html[data-theme="dark"] .border-slate-400 {
        border-color: var(--border-color) !important;
    }

    html.dark .shadow,
    html.dark .shadow-sm,
    html.dark .shadow-md,
    html.dark .shadow-lg,
    html.dark .shadow-xl,
    html.dark .shadow-2xl,
    html[data-theme="dark"] .shadow,
    html[data-theme="dark"] .shadow-sm,
    html[data-theme="dark"] .shadow-md,
    html[data-theme="dark"] .shadow-lg,
    html[data-theme="dark"] .shadow-xl,
    html[data-theme="dark"] .shadow-2xl {
        box-shadow: var(--shadow-card) !important;
    }

    html.dark .glass-nav,
    html.dark .glass-header,
    html.dark .glass-panel,
    html.dark .glass-card,
    html[data-theme="dark"] .glass-nav,
    html[data-theme="dark"] .glass-header,
    html[data-theme="dark"] .glass-panel,
    html[data-theme="dark"] .glass-card {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-soft) !important;
    }

    html.dark [data-unified-header="true"],
    html[data-theme="dark"] [data-unified-header="true"] {
        background: rgba(8, 18, 31, 0.86) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 18px 42px -34px rgba(2, 6, 23, 0.9) !important;
    }

    html.dark [data-unified-header="true"] .bg-white\/90,
    html.dark [data-unified-header="true"] .bg-white,
    html.dark [data-unified-header="true"] .bg-slate-50,
    html.dark [data-unified-header="true"] .bg-slate-100,
    html[data-theme="dark"] [data-unified-header="true"] .bg-white\/90,
    html[data-theme="dark"] [data-unified-header="true"] .bg-white,
    html[data-theme="dark"] [data-unified-header="true"] .bg-slate-50,
    html[data-theme="dark"] [data-unified-header="true"] .bg-slate-100 {
        background: rgba(15, 23, 42, 0.72) !important;
        border-color: var(--border-color) !important;
    }

    html.dark [data-unified-header="true"] #global-search-results,
    html.dark [data-unified-header="true"] #profile-menu,
    html.dark [data-unified-header="true"] #msg-bell-dropdown,
    html.dark [data-unified-header="true"] #notification-dropdown,
    html[data-theme="dark"] [data-unified-header="true"] #global-search-results,
    html[data-theme="dark"] [data-unified-header="true"] #profile-menu,
    html[data-theme="dark"] [data-unified-header="true"] #msg-bell-dropdown,
    html[data-theme="dark"] [data-unified-header="true"] #notification-dropdown {
        background: var(--bg-card-solid) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
        box-shadow: var(--shadow-card) !important;
    }

    html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
    html.dark select,
    html.dark textarea,
    html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea {
        background: var(--bg-input) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    html.dark input::placeholder,
    html.dark textarea::placeholder,
    html[data-theme="dark"] input::placeholder,
    html[data-theme="dark"] textarea::placeholder {
        color: var(--text-faint) !important;
    }

    html.dark input:focus,
    html.dark select:focus,
    html.dark textarea:focus,
    html[data-theme="dark"] input:focus,
    html[data-theme="dark"] select:focus,
    html[data-theme="dark"] textarea:focus {
        border-color: color-mix(in srgb, var(--color-primary) 52%, white) !important;
        box-shadow: 0 0 0 3px var(--focus-ring) !important;
        outline: none;
    }

    html.dark table,
    html[data-theme="dark"] table {
        color: var(--text-primary);
    }

    html.dark thead th,
    html[data-theme="dark"] thead th {
        background: rgba(15, 23, 42, 0.78) !important;
        color: var(--text-secondary) !important;
        border-color: var(--border-color) !important;
    }

    html.dark tbody tr:hover,
    html[data-theme="dark"] tbody tr:hover {
        background: rgba(148, 163, 184, 0.06);
    }

    html.dark tbody tr,
    html[data-theme="dark"] tbody tr {
        border-color: var(--border-color);
    }

    html.dark tbody td,
    html[data-theme="dark"] tbody td {
        border-color: var(--border-color);
    }

    html.dark .hover\:bg-slate-50:hover,
    html.dark .hover\:bg-slate-100:hover,
    html[data-theme="dark"] .hover\:bg-slate-50:hover,
    html[data-theme="dark"] .hover\:bg-slate-100:hover {
        background-color: var(--bg-hover) !important;
    }

    html.dark .hover\:text-slate-800:hover,
    html.dark .hover\:text-slate-900:hover,
    html[data-theme="dark"] .hover\:text-slate-800:hover,
    html[data-theme="dark"] .hover\:text-slate-900:hover {
        color: var(--text-primary) !important;
    }

    html.dark .bg-green-50,
    html.dark .bg-green-100,
    html.dark .bg-emerald-50,
    html.dark .bg-emerald-100,
    html[data-theme="dark"] .bg-green-50,
    html[data-theme="dark"] .bg-green-100,
    html[data-theme="dark"] .bg-emerald-50,
    html[data-theme="dark"] .bg-emerald-100 {
        background: var(--status-success-bg) !important;
    }

    html.dark .text-green-600,
    html.dark .text-green-700,
    html.dark .text-emerald-600,
    html.dark .text-emerald-700,
    html[data-theme="dark"] .text-green-600,
    html[data-theme="dark"] .text-green-700,
    html[data-theme="dark"] .text-emerald-600,
    html[data-theme="dark"] .text-emerald-700 {
        color: var(--status-success-text) !important;
    }

    /* Rose is grouped with red as the danger family — Tailwind's rose palette
       is a warm red/pink, not a purple. Keeping rose mapped to the danger
       tokens preserves the semantic meaning of high-risk badges, failed-login
       chips, blocked-device markers, and critical-severity events on dark
       surfaces (same intent as `border-rose-200` and `bg-rose-50/N` opacity
       variants further down). */
    html.dark .bg-red-50,
    html.dark .bg-red-100,
    html.dark .bg-rose-50,
    html.dark .bg-rose-100,
    html[data-theme="dark"] .bg-red-50,
    html[data-theme="dark"] .bg-red-100,
    html[data-theme="dark"] .bg-rose-50,
    html[data-theme="dark"] .bg-rose-100 {
        background: var(--status-danger-bg) !important;
    }

    html.dark .text-red-500,
    html.dark .text-red-600,
    html.dark .text-red-700,
    html.dark .text-red-800,
    html.dark .text-red-900,
    html.dark .text-rose-500,
    html.dark .text-rose-600,
    html.dark .text-rose-700,
    html.dark .text-rose-800,
    html.dark .text-rose-900,
    html[data-theme="dark"] .text-red-500,
    html[data-theme="dark"] .text-red-600,
    html[data-theme="dark"] .text-red-700,
    html[data-theme="dark"] .text-red-800,
    html[data-theme="dark"] .text-red-900,
    html[data-theme="dark"] .text-rose-500,
    html[data-theme="dark"] .text-rose-600,
    html[data-theme="dark"] .text-rose-700,
    html[data-theme="dark"] .text-rose-800,
    html[data-theme="dark"] .text-rose-900 {
        color: var(--status-danger-text) !important;
    }

    html.dark .bg-yellow-50,
    html.dark .bg-yellow-100,
    html.dark .bg-amber-50,
    html.dark .bg-amber-100,
    html[data-theme="dark"] .bg-yellow-50,
    html[data-theme="dark"] .bg-yellow-100,
    html[data-theme="dark"] .bg-amber-50,
    html[data-theme="dark"] .bg-amber-100 {
        background: var(--status-warning-bg) !important;
    }

    html.dark .text-yellow-600,
    html.dark .text-yellow-700,
    html.dark .text-yellow-800,
    html.dark .text-yellow-900,
    html.dark .text-amber-600,
    html.dark .text-amber-700,
    html.dark .text-amber-800,
    html.dark .text-amber-900,
    html.dark .text-orange-600,
    html.dark .text-orange-700,
    html.dark .text-orange-800,
    html.dark .text-orange-900,
    html[data-theme="dark"] .text-yellow-600,
    html[data-theme="dark"] .text-yellow-700,
    html[data-theme="dark"] .text-yellow-800,
    html[data-theme="dark"] .text-yellow-900,
    html[data-theme="dark"] .text-amber-600,
    html[data-theme="dark"] .text-amber-700,
    html[data-theme="dark"] .text-amber-800,
    html[data-theme="dark"] .text-amber-900,
    html[data-theme="dark"] .text-orange-600,
    html[data-theme="dark"] .text-orange-700,
    html[data-theme="dark"] .text-orange-800,
    html[data-theme="dark"] .text-orange-900 {
        color: var(--status-warning-text) !important;
    }

    /* === Extended dark-mode coverage (info / accent color families) === */

    html.dark .bg-blue-50,
    html.dark .bg-blue-100,
    html.dark .bg-sky-50,
    html.dark .bg-sky-100,
    html.dark .bg-indigo-50,
    html.dark .bg-indigo-100,
    html.dark .bg-cyan-50,
    html.dark .bg-cyan-100,
    html[data-theme="dark"] .bg-blue-50,
    html[data-theme="dark"] .bg-blue-100,
    html[data-theme="dark"] .bg-sky-50,
    html[data-theme="dark"] .bg-sky-100,
    html[data-theme="dark"] .bg-indigo-50,
    html[data-theme="dark"] .bg-indigo-100,
    html[data-theme="dark"] .bg-cyan-50,
    html[data-theme="dark"] .bg-cyan-100 {
        background-color: var(--status-info-bg) !important;
    }

    html.dark .text-blue-500,
    html.dark .text-blue-600,
    html.dark .text-blue-700,
    html.dark .text-blue-800,
    html.dark .text-blue-900,
    html.dark .text-sky-500,
    html.dark .text-sky-600,
    html.dark .text-sky-700,
    html.dark .text-sky-800,
    html.dark .text-sky-900,
    html.dark .text-indigo-500,
    html.dark .text-indigo-600,
    html.dark .text-indigo-700,
    html.dark .text-indigo-800,
    html.dark .text-indigo-900,
    html.dark .text-cyan-500,
    html.dark .text-cyan-600,
    html.dark .text-cyan-700,
    html.dark .text-cyan-800,
    html.dark .text-cyan-900,
    html[data-theme="dark"] .text-blue-500,
    html[data-theme="dark"] .text-blue-600,
    html[data-theme="dark"] .text-blue-700,
    html[data-theme="dark"] .text-blue-800,
    html[data-theme="dark"] .text-blue-900,
    html[data-theme="dark"] .text-sky-500,
    html[data-theme="dark"] .text-sky-600,
    html[data-theme="dark"] .text-sky-700,
    html[data-theme="dark"] .text-sky-800,
    html[data-theme="dark"] .text-sky-900,
    html[data-theme="dark"] .text-indigo-500,
    html[data-theme="dark"] .text-indigo-600,
    html[data-theme="dark"] .text-indigo-700,
    html[data-theme="dark"] .text-indigo-800,
    html[data-theme="dark"] .text-indigo-900,
    html[data-theme="dark"] .text-cyan-500,
    html[data-theme="dark"] .text-cyan-600,
    html[data-theme="dark"] .text-cyan-700,
    html[data-theme="dark"] .text-cyan-800,
    html[data-theme="dark"] .text-cyan-900 {
        color: var(--status-info-text) !important;
    }

    /* Pink/purple/fuchsia/violet — distinct accent family (NOT rose). Rose is
       handled with red above so danger semantics stay intact across the
       product (high-risk indicators, failed logins, blocked devices, etc.). */
    html.dark .bg-violet-50,
    html.dark .bg-violet-100,
    html.dark .bg-purple-50,
    html.dark .bg-purple-100,
    html.dark .bg-fuchsia-50,
    html.dark .bg-fuchsia-100,
    html.dark .bg-pink-50,
    html.dark .bg-pink-100,
    html[data-theme="dark"] .bg-violet-50,
    html[data-theme="dark"] .bg-violet-100,
    html[data-theme="dark"] .bg-purple-50,
    html[data-theme="dark"] .bg-purple-100,
    html[data-theme="dark"] .bg-fuchsia-50,
    html[data-theme="dark"] .bg-fuchsia-100,
    html[data-theme="dark"] .bg-pink-50,
    html[data-theme="dark"] .bg-pink-100 {
        background-color: rgba(168, 85, 247, 0.14) !important;
    }

    html.dark .text-violet-500,
    html.dark .text-violet-600,
    html.dark .text-violet-700,
    html.dark .text-purple-500,
    html.dark .text-purple-600,
    html.dark .text-purple-700,
    html.dark .text-fuchsia-500,
    html.dark .text-fuchsia-600,
    html.dark .text-fuchsia-700,
    html.dark .text-pink-500,
    html.dark .text-pink-600,
    html.dark .text-pink-700,
    html[data-theme="dark"] .text-violet-500,
    html[data-theme="dark"] .text-violet-600,
    html[data-theme="dark"] .text-violet-700,
    html[data-theme="dark"] .text-purple-500,
    html[data-theme="dark"] .text-purple-600,
    html[data-theme="dark"] .text-purple-700,
    html[data-theme="dark"] .text-fuchsia-500,
    html[data-theme="dark"] .text-fuchsia-600,
    html[data-theme="dark"] .text-fuchsia-700,
    html[data-theme="dark"] .text-pink-500,
    html[data-theme="dark"] .text-pink-600,
    html[data-theme="dark"] .text-pink-700 {
        color: #d8b4fe !important;
    }

    html.dark .bg-teal-50,
    html.dark .bg-teal-100,
    html[data-theme="dark"] .bg-teal-50,
    html[data-theme="dark"] .bg-teal-100 {
        background-color: var(--status-success-bg) !important;
    }

    html.dark .text-teal-500,
    html.dark .text-teal-600,
    html.dark .text-teal-700,
    html[data-theme="dark"] .text-teal-500,
    html[data-theme="dark"] .text-teal-600,
    html[data-theme="dark"] .text-teal-700 {
        color: var(--status-success-text) !important;
    }

    html.dark .bg-orange-50,
    html.dark .bg-orange-100,
    html[data-theme="dark"] .bg-orange-50,
    html[data-theme="dark"] .bg-orange-100 {
        background-color: var(--status-warning-bg) !important;
    }

    html.dark .text-orange-500,
    html.dark .text-orange-600,
    html.dark .text-orange-700,
    html[data-theme="dark"] .text-orange-500,
    html[data-theme="dark"] .text-orange-600,
    html[data-theme="dark"] .text-orange-700 {
        color: var(--status-warning-text) !important;
    }

    /* === Opacity variants — catch bg-white/60, bg-white/70, ... === */

    html.dark [class*="bg-white/"],
    html.dark [class*="bg-white\\/"],
    html[data-theme="dark"] [class*="bg-white/"],
    html[data-theme="dark"] [class*="bg-white\\/"] {
        background-color: var(--bg-card) !important;
    }

    html.dark [class*="bg-slate-50/"],
    html.dark [class*="bg-slate-50\\/"],
    html.dark [class*="bg-slate-100/"],
    html.dark [class*="bg-slate-100\\/"],
    html[data-theme="dark"] [class*="bg-slate-50/"],
    html[data-theme="dark"] [class*="bg-slate-50\\/"],
    html[data-theme="dark"] [class*="bg-slate-100/"],
    html[data-theme="dark"] [class*="bg-slate-100\\/"] {
        background-color: var(--bg-card-muted) !important;
    }

    /* === Gradient stops — neutralize light stops on dark === */

    html.dark [class*="from-white"],
    html.dark [class*="via-white"],
    html.dark [class*="to-white"],
    html.dark [class*="from-slate-50"],
    html.dark [class*="via-slate-50"],
    html.dark [class*="to-slate-50"],
    html.dark [class*="from-slate-100"],
    html.dark [class*="via-slate-100"],
    html.dark [class*="to-slate-100"],
    html[data-theme="dark"] [class*="from-white"],
    html[data-theme="dark"] [class*="via-white"],
    html[data-theme="dark"] [class*="to-white"],
    html[data-theme="dark"] [class*="from-slate-50"],
    html[data-theme="dark"] [class*="via-slate-50"],
    html[data-theme="dark"] [class*="to-slate-50"],
    html[data-theme="dark"] [class*="from-slate-100"],
    html[data-theme="dark"] [class*="via-slate-100"],
    html[data-theme="dark"] [class*="to-slate-100"] {
        --tw-gradient-from: var(--bg-card-solid) var(--tw-gradient-from-position) !important;
        --tw-gradient-via: var(--bg-card-muted) var(--tw-gradient-via-position) !important;
        --tw-gradient-to: var(--bg-card-solid) var(--tw-gradient-to-position) !important;
    }

    html.dark [class*="from-blue-50"],
    html.dark [class*="from-sky-50"],
    html.dark [class*="from-indigo-50"],
    html.dark [class*="from-cyan-50"],
    html.dark [class*="to-blue-50"],
    html.dark [class*="to-sky-50"],
    html.dark [class*="to-indigo-50"],
    html.dark [class*="to-cyan-50"],
    html.dark [class*="via-blue-50"],
    html.dark [class*="via-indigo-50"],
    html[data-theme="dark"] [class*="from-blue-50"],
    html[data-theme="dark"] [class*="from-sky-50"],
    html[data-theme="dark"] [class*="from-indigo-50"],
    html[data-theme="dark"] [class*="from-cyan-50"],
    html[data-theme="dark"] [class*="to-blue-50"],
    html[data-theme="dark"] [class*="to-sky-50"],
    html[data-theme="dark"] [class*="to-indigo-50"],
    html[data-theme="dark"] [class*="to-cyan-50"],
    html[data-theme="dark"] [class*="via-blue-50"],
    html[data-theme="dark"] [class*="via-indigo-50"] {
        --tw-gradient-from: rgba(14, 165, 233, 0.14) var(--tw-gradient-from-position) !important;
        --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
        --tw-gradient-via: rgba(14, 165, 233, 0.10) var(--tw-gradient-via-position) !important;
    }

    html.dark [class*="from-emerald-50"],
    html.dark [class*="from-green-50"],
    html.dark [class*="from-teal-50"],
    html.dark [class*="to-emerald-50"],
    html.dark [class*="to-green-50"],
    html.dark [class*="to-teal-50"],
    html[data-theme="dark"] [class*="from-emerald-50"],
    html[data-theme="dark"] [class*="from-green-50"],
    html[data-theme="dark"] [class*="from-teal-50"],
    html[data-theme="dark"] [class*="to-emerald-50"],
    html[data-theme="dark"] [class*="to-green-50"],
    html[data-theme="dark"] [class*="to-teal-50"] {
        --tw-gradient-from: rgba(16, 185, 129, 0.14) var(--tw-gradient-from-position) !important;
        --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    }

    html.dark [class*="from-rose-50"],
    html.dark [class*="from-pink-50"],
    html.dark [class*="from-red-50"],
    html.dark [class*="to-rose-50"],
    html.dark [class*="to-pink-50"],
    html.dark [class*="to-red-50"],
    html[data-theme="dark"] [class*="from-rose-50"],
    html[data-theme="dark"] [class*="from-pink-50"],
    html[data-theme="dark"] [class*="from-red-50"],
    html[data-theme="dark"] [class*="to-rose-50"],
    html[data-theme="dark"] [class*="to-pink-50"],
    html[data-theme="dark"] [class*="to-red-50"] {
        --tw-gradient-from: rgba(239, 68, 68, 0.14) var(--tw-gradient-from-position) !important;
        --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    }

    html.dark [class*="from-amber-50"],
    html.dark [class*="from-yellow-50"],
    html.dark [class*="from-orange-50"],
    html.dark [class*="to-amber-50"],
    html.dark [class*="to-yellow-50"],
    html.dark [class*="to-orange-50"],
    html[data-theme="dark"] [class*="from-amber-50"],
    html[data-theme="dark"] [class*="from-yellow-50"],
    html[data-theme="dark"] [class*="from-orange-50"],
    html[data-theme="dark"] [class*="to-amber-50"],
    html[data-theme="dark"] [class*="to-yellow-50"],
    html[data-theme="dark"] [class*="to-orange-50"] {
        --tw-gradient-from: rgba(245, 158, 11, 0.14) var(--tw-gradient-from-position) !important;
        --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    }

    html.dark [class*="from-violet-50"],
    html.dark [class*="from-purple-50"],
    html.dark [class*="from-fuchsia-50"],
    html.dark [class*="to-violet-50"],
    html.dark [class*="to-purple-50"],
    html.dark [class*="to-fuchsia-50"],
    html[data-theme="dark"] [class*="from-violet-50"],
    html[data-theme="dark"] [class*="from-purple-50"],
    html[data-theme="dark"] [class*="from-fuchsia-50"],
    html[data-theme="dark"] [class*="to-violet-50"],
    html[data-theme="dark"] [class*="to-purple-50"],
    html[data-theme="dark"] [class*="to-fuchsia-50"] {
        --tw-gradient-from: rgba(168, 85, 247, 0.14) var(--tw-gradient-from-position) !important;
        --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    }

    html.dark [class*="from-primary-50"],
    html.dark [class*="to-primary-50"],
    html.dark [class*="via-primary-50"],
    html[data-theme="dark"] [class*="from-primary-50"],
    html[data-theme="dark"] [class*="to-primary-50"],
    html[data-theme="dark"] [class*="via-primary-50"] {
        --tw-gradient-from: color-mix(in srgb, var(--color-primary) 18%, transparent) var(--tw-gradient-from-position) !important;
        --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    }

    /* === Rings, divides, outlines — neutralize light variants === */

    html.dark .ring-white,
    html.dark .ring-slate-100,
    html.dark .ring-slate-200,
    html.dark .ring-slate-300,
    html.dark .ring-gray-100,
    html.dark .ring-gray-200,
    html.dark .ring-gray-300,
    html[data-theme="dark"] .ring-white,
    html[data-theme="dark"] .ring-slate-100,
    html[data-theme="dark"] .ring-slate-200,
    html[data-theme="dark"] .ring-slate-300,
    html[data-theme="dark"] .ring-gray-100,
    html[data-theme="dark"] .ring-gray-200,
    html[data-theme="dark"] .ring-gray-300 {
        --tw-ring-color: var(--border-color) !important;
    }

    html.dark .ring-offset-white,
    html.dark .ring-offset-slate-50,
    html.dark .ring-offset-slate-100,
    html[data-theme="dark"] .ring-offset-white,
    html[data-theme="dark"] .ring-offset-slate-50,
    html[data-theme="dark"] .ring-offset-slate-100 {
        --tw-ring-offset-color: var(--bg-card-solid) !important;
    }

    html.dark .divide-white > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-slate-300 > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
    html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-white > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-slate-300 > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
    html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        border-color: var(--border-color) !important;
    }

    /* === Border utility gaps (opacity variants + extra light borders) === */

    html.dark [class*="border-slate-100/"],
    html.dark [class*="border-slate-200/"],
    html.dark [class*="border-slate-100\\/"],
    html.dark [class*="border-slate-200\\/"],
    html.dark [class*="border-white/"],
    html.dark [class*="border-white\\/"],
    html.dark .border-gray-100,
    html.dark .border-gray-200,
    html.dark .border-gray-300,
    html[data-theme="dark"] [class*="border-slate-100/"],
    html[data-theme="dark"] [class*="border-slate-200/"],
    html[data-theme="dark"] [class*="border-slate-100\\/"],
    html[data-theme="dark"] [class*="border-slate-200\\/"],
    html[data-theme="dark"] [class*="border-white/"],
    html[data-theme="dark"] [class*="border-white\\/"],
    html[data-theme="dark"] .border-gray-100,
    html[data-theme="dark"] .border-gray-200,
    html[data-theme="dark"] .border-gray-300 {
        border-color: var(--border-color) !important;
    }

    /* === Placeholders, disabled inputs, readonly === */

    html.dark .placeholder-slate-300::placeholder,
    html.dark .placeholder-slate-400::placeholder,
    html.dark .placeholder-gray-300::placeholder,
    html.dark .placeholder-gray-400::placeholder,
    html[data-theme="dark"] .placeholder-slate-300::placeholder,
    html[data-theme="dark"] .placeholder-slate-400::placeholder,
    html[data-theme="dark"] .placeholder-gray-300::placeholder,
    html[data-theme="dark"] .placeholder-gray-400::placeholder {
        color: var(--text-faint) !important;
    }

    html.dark .disabled\:bg-slate-50:disabled,
    html.dark .disabled\:bg-slate-100:disabled,
    html.dark [disabled],
    html.dark .opacity-50[disabled],
    html[data-theme="dark"] .disabled\:bg-slate-50:disabled,
    html[data-theme="dark"] .disabled\:bg-slate-100:disabled,
    html[data-theme="dark"] [disabled] {
        background-color: var(--bg-input-disabled) !important;
    }

    /* === Named panel / card utilities used in templates === */

    html.dark .stat-card,
    html.dark .metric-tile,
    html.dark .info-card,
    html.dark .data-card,
    html.dark .surface-card,
    html[data-theme="dark"] .stat-card,
    html[data-theme="dark"] .metric-tile,
    html[data-theme="dark"] .info-card,
    html[data-theme="dark"] .data-card,
    html[data-theme="dark"] .surface-card {
        background: var(--bg-card-solid) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-soft) !important;
    }

    /* === Charts (Chart.js canvas default ink) — ensure grid lines visible === */

    html.dark canvas,
    html[data-theme="dark"] canvas {
        color: var(--text-secondary);
    }

    /* === Destructive, primary, ghost button hardening in dark === */

    html.dark .btn-primary,
    html[data-theme="dark"] .btn-primary {
        background: var(--color-primary) !important;
        color: var(--text-on-accent) !important;
    }

    html.dark .btn-danger,
    html[data-theme="dark"] .btn-danger {
        background: #b91c1c !important;
        color: #fee2e2 !important;
    }

    html.dark .btn-ghost,
    html[data-theme="dark"] .btn-ghost {
        background: transparent !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    html.dark .btn-ghost:hover,
    html[data-theme="dark"] .btn-ghost:hover {
        background: var(--bg-hover) !important;
    }

    /* === Scrollbar theming — avoid bright scrollbars on dark === */

    html.dark::-webkit-scrollbar-track,
    html.dark *::-webkit-scrollbar-track,
    html[data-theme="dark"]::-webkit-scrollbar-track,
    html[data-theme="dark"] *::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.4);
    }

    html.dark::-webkit-scrollbar-thumb,
    html.dark *::-webkit-scrollbar-thumb,
    html[data-theme="dark"]::-webkit-scrollbar-thumb,
    html[data-theme="dark"] *::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.5);
        border-radius: 999px;
    }

    html.dark::-webkit-scrollbar-thumb:hover,
    html.dark *::-webkit-scrollbar-thumb:hover,
    html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
    html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.7);
    }

    /* === Text color gaps === */

    html.dark .text-black,
    html.dark .text-gray-900,
    html.dark .text-gray-800,
    html.dark .text-gray-700,
    html[data-theme="dark"] .text-black,
    html[data-theme="dark"] .text-gray-900,
    html[data-theme="dark"] .text-gray-800,
    html[data-theme="dark"] .text-gray-700 {
        color: var(--text-primary) !important;
    }

    html.dark .text-gray-600,
    html.dark .text-gray-500,
    html.dark .text-gray-400,
    html[data-theme="dark"] .text-gray-600,
    html[data-theme="dark"] .text-gray-500,
    html[data-theme="dark"] .text-gray-400 {
        color: var(--text-secondary) !important;
    }

    /* === Toast styling (internal classes medicore-toast-*) — keep internal class names, harden dark === */

    html.dark .medicore-toast,
    html[data-theme="dark"] .medicore-toast {
        background: var(--bg-card-solid) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* === SVG & image fill safety === */

    html.dark [fill="white"],
    html.dark [fill="#fff"],
    html.dark [fill="#FFFFFF"],
    html[data-theme="dark"] [fill="white"],
    html[data-theme="dark"] [fill="#fff"],
    html[data-theme="dark"] [fill="#FFFFFF"] {
        fill: var(--bg-card-solid) !important;
    }

    /* === Inline-style escape hatch — neutralize common light hex literals === */

    html.dark [style*="background:#ffffff"],
    html.dark [style*="background: #ffffff"],
    html.dark [style*="background:#fff;"],
    html.dark [style*="background: #fff;"],
    html.dark [style*="background:white"],
    html.dark [style*="background: white"],
    html.dark [style*="background-color:#ffffff"],
    html.dark [style*="background-color: #ffffff"],
    html.dark [style*="background-color:#fff;"],
    html.dark [style*="background-color: #fff;"],
    html.dark [style*="background-color:white"],
    html.dark [style*="background-color: white"],
    html[data-theme="dark"] [style*="background:#ffffff"],
    html[data-theme="dark"] [style*="background: #ffffff"],
    html[data-theme="dark"] [style*="background:#fff;"],
    html[data-theme="dark"] [style*="background: #fff;"],
    html[data-theme="dark"] [style*="background:white"],
    html[data-theme="dark"] [style*="background: white"],
    html[data-theme="dark"] [style*="background-color:#ffffff"],
    html[data-theme="dark"] [style*="background-color: #ffffff"],
    html[data-theme="dark"] [style*="background-color:#fff;"],
    html[data-theme="dark"] [style*="background-color: #fff;"],
    html[data-theme="dark"] [style*="background-color:white"],
    html[data-theme="dark"] [style*="background-color: white"] {
        background-color: var(--bg-card-solid) !important;
        color: var(--text-primary) !important;
    }

    /* Slate-50 / slate-100 inline backgrounds */
    html.dark [style*="background:#f8fafc"],
    html.dark [style*="background: #f8fafc"],
    html.dark [style*="background:#f1f5f9"],
    html.dark [style*="background: #f1f5f9"],
    html.dark [style*="background:#f3f4f6"],
    html.dark [style*="background: #f3f4f6"],
    html.dark [style*="background-color:#f8fafc"],
    html.dark [style*="background-color: #f8fafc"],
    html.dark [style*="background-color:#f1f5f9"],
    html.dark [style*="background-color: #f1f5f9"],
    html[data-theme="dark"] [style*="background:#f8fafc"],
    html[data-theme="dark"] [style*="background: #f8fafc"],
    html[data-theme="dark"] [style*="background:#f1f5f9"],
    html[data-theme="dark"] [style*="background: #f1f5f9"],
    html[data-theme="dark"] [style*="background:#f3f4f6"],
    html[data-theme="dark"] [style*="background: #f3f4f6"] {
        background-color: var(--bg-card-muted) !important;
    }

    /* Status tints (inline) — rose/red-50 */
    html.dark [style*="background:#fff1f2"],
    html.dark [style*="background: #fff1f2"],
    html.dark [style*="background:#fef2f2"],
    html.dark [style*="background: #fef2f2"],
    html[data-theme="dark"] [style*="background:#fff1f2"],
    html[data-theme="dark"] [style*="background: #fff1f2"],
    html[data-theme="dark"] [style*="background:#fef2f2"],
    html[data-theme="dark"] [style*="background: #fef2f2"] {
        background-color: var(--status-danger-bg) !important;
    }

    /* Status tints (inline) — yellow/amber-50 */
    html.dark [style*="background:#fffbeb"],
    html.dark [style*="background: #fffbeb"],
    html.dark [style*="background:#fef3c7"],
    html.dark [style*="background: #fef3c7"],
    html[data-theme="dark"] [style*="background:#fffbeb"],
    html[data-theme="dark"] [style*="background: #fffbeb"],
    html[data-theme="dark"] [style*="background:#fef3c7"],
    html[data-theme="dark"] [style*="background: #fef3c7"] {
        background-color: var(--status-warning-bg) !important;
    }

    /* Status tints (inline) — green/emerald-50 */
    html.dark [style*="background:#ecfdf5"],
    html.dark [style*="background: #ecfdf5"],
    html.dark [style*="background:#f0fdf4"],
    html.dark [style*="background: #f0fdf4"],
    html[data-theme="dark"] [style*="background:#ecfdf5"],
    html[data-theme="dark"] [style*="background: #ecfdf5"],
    html[data-theme="dark"] [style*="background:#f0fdf4"],
    html[data-theme="dark"] [style*="background: #f0fdf4"] {
        background-color: var(--status-success-bg) !important;
    }

    /* Inline light border colors (slate-200, gray-200, status-tinted) → neutral token */
    html.dark [style*="border: 1px solid #e2e8f0"],
    html.dark [style*="border:1px solid #e2e8f0"],
    html.dark [style*="border: 1px solid #e5e7eb"],
    html.dark [style*="border:1px solid #e5e7eb"],
    html.dark [style*="border: 2px solid #fcd34d"],
    html.dark [style*="border:2px solid #fcd34d"],
    html.dark [style*="border: 1px solid #fecdd3"],
    html.dark [style*="border:1px solid #fecdd3"],
    html.dark [style*="border: 1px solid #fde68a"],
    html.dark [style*="border:1px solid #fde68a"],
    html.dark [style*="border: 1px solid #a7f3d0"],
    html.dark [style*="border:1px solid #a7f3d0"],
    html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
    html[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
    html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
    html[data-theme="dark"] [style*="border:1px solid #e5e7eb"] {
        border-color: var(--border-color) !important;
    }

    /* === Dynamic Chart.js defaults — token-driven so dark mode flips automatically.
       Charts read these CSS variables at paint time via the init script in
       theme_tokens.html (below). === */

    html.dark .chartjs-render-monitor,
    html[data-theme="dark"] .chartjs-render-monitor {
        color: var(--chart-legend-text);
    }

    /* === Profile page semantic classes (staff_profile, patient_profile, doctor_profile).
       These are custom classes defined in local <style> blocks of standalone templates.
       The local rules have no !important so the global !important rules below win. === */

    html.dark .meta-value,
    html[data-theme="dark"] .meta-value {
        color: var(--text-primary) !important;
    }

    html.dark .meta-label,
    html[data-theme="dark"] .meta-label {
        color: var(--text-muted) !important;
    }

    html.dark .meta-row,
    html[data-theme="dark"] .meta-row {
        border-color: var(--border-color) !important;
    }

    html.dark .dialog-content,
    html[data-theme="dark"] .dialog-content {
        background: var(--bg-card-solid) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    html.dark dialog,
    html[data-theme="dark"] dialog {
        background: var(--bg-card-solid) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    html.dark .profile-accent-surface,
    html[data-theme="dark"] .profile-accent-surface {
        background: var(--bg-card-muted) !important;
    }

    html.dark .profile-accent-ghost,
    html[data-theme="dark"] .profile-accent-ghost {
        background: transparent !important;
        color: var(--color-primary) !important;
        border-color: var(--border-color) !important;
    }

    html.dark .profile-accent-ghost:hover,
    html[data-theme="dark"] .profile-accent-ghost:hover {
        background: var(--bg-hover) !important;
    }

    html.dark .timeline-item::before,
    html[data-theme="dark"] .timeline-item::before {
        background: var(--border-strong) !important;
    }

    html.dark .timeline-dot,
    html[data-theme="dark"] .timeline-dot {
        border-color: var(--bg-card-solid) !important;
    }

    /* === Staff leave status chips (custom bg/color classes) === */

    html.dark .status-pending,
    html[data-theme="dark"] .status-pending {
        background: var(--status-warning-bg) !important;
        color: var(--status-warning-text) !important;
    }

    html.dark .status-approved,
    html[data-theme="dark"] .status-approved {
        background: var(--status-success-bg) !important;
        color: var(--status-success-text) !important;
    }

    html.dark .status-rejected,
    html[data-theme="dark"] .status-rejected {
        background: var(--status-danger-bg) !important;
        color: var(--status-danger-text) !important;
    }

    /* === Page-level background fix for standalone templates.
       In standalone pages, <main class="... bg-slate-50"> covers the full viewport.
       bg-slate-50 → var(--bg-card-solid) creates a flat page. Override <main> to use
       --bg-primary so cards on top of it get a proper surface-elevation hierarchy. === */

    html.dark main,
    html[data-theme="dark"] main {
        background-color: var(--bg-primary) !important;
    }

    html.dark .patient-profile-main,
    html[data-theme="dark"] .patient-profile-main {
        background: var(--bg-primary) !important;
    }

    /* === bg-primary-50 (custom Tailwind primary color) → info-tinted dark surface === */

    html.dark .bg-primary-50,
    html[data-theme="dark"] .bg-primary-50 {
        background-color: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
    }

    html.dark .hover\:bg-primary-50:hover,
    html[data-theme="dark"] .hover\:bg-primary-50:hover {
        background-color: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
    }

    /* === text-primary-900 / text-primary-800: near-black in light → flip to bright primary in dark === */

    html.dark .text-primary-900,
    html[data-theme="dark"] .text-primary-900 {
        color: color-mix(in srgb, var(--color-primary) 85%, white) !important;
    }

    html.dark .text-primary-800,
    html[data-theme="dark"] .text-primary-800 {
        color: color-mix(in srgb, var(--color-primary) 65%, white) !important;
    }

    /* === Correct table body row backgrounds inside glass panels === */

    html.dark .glass-panel tbody tr,
    html.dark .glass-card tbody tr,
    html[data-theme="dark"] .glass-panel tbody tr,
    html[data-theme="dark"] .glass-card tbody tr {
        background: transparent;
    }

    /* Absence/anomaly row tints: re-apply for dark using known Tailwind opacity-variant classes */
    html.dark .bg-rose-50\/50,
    html[data-theme="dark"] .bg-rose-50\/50 {
        background-color: rgba(244, 63, 94, 0.1) !important;
    }

    html.dark .bg-red-50\/40,
    html[data-theme="dark"] .bg-red-50\/40 {
        background-color: rgba(239, 68, 68, 0.08) !important;
    }

    html.dark .bg-amber-50\/30,
    html[data-theme="dark"] .bg-amber-50\/30 {
        background-color: rgba(245, 158, 11, 0.08) !important;
    }

    /* Dashboard/chart KPI summary card tints with /70 opacity variants */
    html.dark .bg-emerald-50\/70,
    html[data-theme="dark"] .bg-emerald-50\/70 {
        background-color: rgba(16, 185, 129, 0.12) !important;
    }

    html.dark .bg-sky-50\/70,
    html[data-theme="dark"] .bg-sky-50\/70 {
        background-color: rgba(14, 165, 233, 0.12) !important;
    }

    html.dark .bg-rose-50\/70,
    html[data-theme="dark"] .bg-rose-50\/70 {
        background-color: rgba(244, 63, 94, 0.12) !important;
    }

    html.dark .bg-amber-50\/70,
    html[data-theme="dark"] .bg-amber-50\/70 {
        background-color: rgba(245, 158, 11, 0.12) !important;
    }

    html.dark .bg-amber-50\/20,
    html[data-theme="dark"] .bg-amber-50\/20 {
        background-color: rgba(245, 158, 11, 0.07) !important;
    }

    /* Semi-transparent white overlays used in activity feeds, chart empty states, etc. */
    html.dark .bg-white\/50,
    html.dark .bg-white\/60,
    html.dark .bg-white\/70,
    html.dark .bg-white\/80,
    html.dark .bg-white\/85,
    html[data-theme="dark"] .bg-white\/50,
    html[data-theme="dark"] .bg-white\/60,
    html[data-theme="dark"] .bg-white\/70,
    html[data-theme="dark"] .bg-white\/80,
    html[data-theme="dark"] .bg-white\/85 {
        background-color: rgba(15, 23, 42, 0.75) !important;
    }

    /* Inventory expired-item alert cards (bg-rose-50/30) — missing variant */
    html.dark .bg-rose-50\/30,
    html[data-theme="dark"] .bg-rose-50\/30 {
        background-color: rgba(244, 63, 94, 0.08) !important;
    }

    /* Activity feed card: hover:bg-white turns fully white in dark mode */
    html.dark .hover\:bg-white:hover,
    html[data-theme="dark"] .hover\:bg-white:hover {
        background-color: rgba(30, 41, 59, 0.95) !important;
    }

    /* Dot status indicators (w-1.5 h-1.5 bg-slate-300) — too bright in dark mode */
    html.dark .bg-slate-300,
    html[data-theme="dark"] .bg-slate-300 {
        background-color: rgb(71, 85, 105) !important; /* slate-600 */
    }
    html.dark .bg-slate-200,
    html[data-theme="dark"] .bg-slate-200 {
        background-color: rgb(51, 65, 85) !important; /* slate-700 */
    }

    /* border-rose-100 / border-amber-100 on alert cards — too bright */
    html.dark .border-rose-100,
    html[data-theme="dark"] .border-rose-100 {
        border-color: rgba(244, 63, 94, 0.2) !important;
    }
    html.dark .border-amber-100,
    html[data-theme="dark"] .border-amber-100 {
        border-color: rgba(245, 158, 11, 0.2) !important;
    }

    /* === Generic opacity-variant catch-alls for status surface tints
       (bg-{color}-50/N where N is any opacity).
       Anchored with [class^=...] / [class*=" ..."] so we do NOT match
       `hover:bg-{color}-50/N` — those have their own hover-only treatment
       below to preserve hover semantics.
       ===================================================================== */

    html.dark [class^="bg-amber-50/"],
    html.dark [class*=" bg-amber-50/"],
    html.dark [class^="bg-yellow-50/"],
    html.dark [class*=" bg-yellow-50/"],
    html.dark [class^="bg-orange-50/"],
    html.dark [class*=" bg-orange-50/"],
    html[data-theme="dark"] [class^="bg-amber-50/"],
    html[data-theme="dark"] [class*=" bg-amber-50/"],
    html[data-theme="dark"] [class^="bg-yellow-50/"],
    html[data-theme="dark"] [class*=" bg-yellow-50/"],
    html[data-theme="dark"] [class^="bg-orange-50/"],
    html[data-theme="dark"] [class*=" bg-orange-50/"] {
        background-color: rgba(245, 158, 11, 0.13) !important;
    }

    html.dark [class^="bg-emerald-50/"],
    html.dark [class*=" bg-emerald-50/"],
    html.dark [class^="bg-green-50/"],
    html.dark [class*=" bg-green-50/"],
    html.dark [class^="bg-teal-50/"],
    html.dark [class*=" bg-teal-50/"],
    html.dark [class^="bg-lime-50/"],
    html.dark [class*=" bg-lime-50/"],
    html[data-theme="dark"] [class^="bg-emerald-50/"],
    html[data-theme="dark"] [class*=" bg-emerald-50/"],
    html[data-theme="dark"] [class^="bg-green-50/"],
    html[data-theme="dark"] [class*=" bg-green-50/"],
    html[data-theme="dark"] [class^="bg-teal-50/"],
    html[data-theme="dark"] [class*=" bg-teal-50/"],
    html[data-theme="dark"] [class^="bg-lime-50/"],
    html[data-theme="dark"] [class*=" bg-lime-50/"] {
        background-color: rgba(16, 185, 129, 0.13) !important;
    }

    html.dark [class^="bg-rose-50/"],
    html.dark [class*=" bg-rose-50/"],
    html.dark [class^="bg-red-50/"],
    html.dark [class*=" bg-red-50/"],
    html.dark [class^="bg-pink-50/"],
    html.dark [class*=" bg-pink-50/"],
    html[data-theme="dark"] [class^="bg-rose-50/"],
    html[data-theme="dark"] [class*=" bg-rose-50/"],
    html[data-theme="dark"] [class^="bg-red-50/"],
    html[data-theme="dark"] [class*=" bg-red-50/"],
    html[data-theme="dark"] [class^="bg-pink-50/"],
    html[data-theme="dark"] [class*=" bg-pink-50/"] {
        background-color: rgba(239, 68, 68, 0.13) !important;
    }

    html.dark [class^="bg-blue-50/"],
    html.dark [class*=" bg-blue-50/"],
    html.dark [class^="bg-sky-50/"],
    html.dark [class*=" bg-sky-50/"],
    html.dark [class^="bg-indigo-50/"],
    html.dark [class*=" bg-indigo-50/"],
    html.dark [class^="bg-cyan-50/"],
    html.dark [class*=" bg-cyan-50/"],
    html[data-theme="dark"] [class^="bg-blue-50/"],
    html[data-theme="dark"] [class*=" bg-blue-50/"],
    html[data-theme="dark"] [class^="bg-sky-50/"],
    html[data-theme="dark"] [class*=" bg-sky-50/"],
    html[data-theme="dark"] [class^="bg-indigo-50/"],
    html[data-theme="dark"] [class*=" bg-indigo-50/"],
    html[data-theme="dark"] [class^="bg-cyan-50/"],
    html[data-theme="dark"] [class*=" bg-cyan-50/"] {
        background-color: rgba(14, 165, 233, 0.13) !important;
    }

    html.dark [class^="bg-violet-50/"],
    html.dark [class*=" bg-violet-50/"],
    html.dark [class^="bg-purple-50/"],
    html.dark [class*=" bg-purple-50/"],
    html.dark [class^="bg-fuchsia-50/"],
    html.dark [class*=" bg-fuchsia-50/"],
    html[data-theme="dark"] [class^="bg-violet-50/"],
    html[data-theme="dark"] [class*=" bg-violet-50/"],
    html[data-theme="dark"] [class^="bg-purple-50/"],
    html[data-theme="dark"] [class*=" bg-purple-50/"],
    html[data-theme="dark"] [class^="bg-fuchsia-50/"],
    html[data-theme="dark"] [class*=" bg-fuchsia-50/"] {
        background-color: rgba(168, 85, 247, 0.13) !important;
    }

    /* Hover-only opacity variants — apply slightly stronger tint on :hover.
       Substring match is fine here because we explicitly require :hover, so
       there's no risk of bleeding into other states. */

    html.dark [class*="hover:bg-amber-50/"]:hover,
    html.dark [class*="hover:bg-yellow-50/"]:hover,
    html.dark [class*="hover:bg-orange-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-amber-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-yellow-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-orange-50/"]:hover {
        background-color: rgba(245, 158, 11, 0.18) !important;
    }

    html.dark [class*="hover:bg-emerald-50/"]:hover,
    html.dark [class*="hover:bg-green-50/"]:hover,
    html.dark [class*="hover:bg-teal-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-emerald-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-green-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-teal-50/"]:hover {
        background-color: rgba(16, 185, 129, 0.18) !important;
    }

    html.dark [class*="hover:bg-rose-50/"]:hover,
    html.dark [class*="hover:bg-red-50/"]:hover,
    html.dark [class*="hover:bg-pink-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-rose-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-red-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-pink-50/"]:hover {
        background-color: rgba(239, 68, 68, 0.18) !important;
    }

    html.dark [class*="hover:bg-blue-50/"]:hover,
    html.dark [class*="hover:bg-sky-50/"]:hover,
    html.dark [class*="hover:bg-indigo-50/"]:hover,
    html.dark [class*="hover:bg-cyan-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-blue-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-sky-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-indigo-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-cyan-50/"]:hover {
        background-color: rgba(14, 165, 233, 0.18) !important;
    }

    html.dark [class*="hover:bg-violet-50/"]:hover,
    html.dark [class*="hover:bg-purple-50/"]:hover,
    html.dark [class*="hover:bg-fuchsia-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-violet-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-purple-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-fuchsia-50/"]:hover {
        background-color: rgba(168, 85, 247, 0.18) !important;
    }

    html.dark [class*="hover:bg-amber-50/"]:hover,
    html.dark [class*="hover:bg-slate-50/"]:hover,
    html.dark [class*="hover:bg-gray-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-slate-50/"]:hover,
    html[data-theme="dark"] [class*="hover:bg-gray-50/"]:hover {
        background-color: var(--bg-hover) !important;
    }

    /* === border-{color}-200 — pastel borders (common gap on alert/tip cards) === */

    html.dark .border-amber-200,
    html.dark .border-yellow-200,
    html.dark .border-orange-200,
    html[data-theme="dark"] .border-amber-200,
    html[data-theme="dark"] .border-yellow-200,
    html[data-theme="dark"] .border-orange-200 {
        border-color: rgba(245, 158, 11, 0.34) !important;
    }

    html.dark .border-emerald-200,
    html.dark .border-green-200,
    html.dark .border-teal-200,
    html.dark .border-lime-200,
    html[data-theme="dark"] .border-emerald-200,
    html[data-theme="dark"] .border-green-200,
    html[data-theme="dark"] .border-teal-200,
    html[data-theme="dark"] .border-lime-200 {
        border-color: rgba(16, 185, 129, 0.34) !important;
    }

    html.dark .border-rose-200,
    html.dark .border-red-200,
    html.dark .border-pink-200,
    html[data-theme="dark"] .border-rose-200,
    html[data-theme="dark"] .border-red-200,
    html[data-theme="dark"] .border-pink-200 {
        border-color: rgba(239, 68, 68, 0.34) !important;
    }

    html.dark .border-blue-200,
    html.dark .border-sky-200,
    html.dark .border-indigo-200,
    html.dark .border-cyan-200,
    html[data-theme="dark"] .border-blue-200,
    html[data-theme="dark"] .border-sky-200,
    html[data-theme="dark"] .border-indigo-200,
    html[data-theme="dark"] .border-cyan-200 {
        border-color: rgba(14, 165, 233, 0.34) !important;
    }

    html.dark .border-violet-200,
    html.dark .border-purple-200,
    html.dark .border-fuchsia-200,
    html[data-theme="dark"] .border-violet-200,
    html[data-theme="dark"] .border-purple-200,
    html[data-theme="dark"] .border-fuchsia-200 {
        border-color: rgba(168, 85, 247, 0.34) !important;
    }

    html.dark .border-teal-100,
    html.dark .border-emerald-100,
    html.dark .border-green-100,
    html.dark .border-blue-100,
    html.dark .border-sky-100,
    html.dark .border-indigo-100,
    html.dark .border-cyan-100,
    html.dark .border-violet-100,
    html.dark .border-purple-100,
    html.dark .border-fuchsia-100,
    html.dark .border-pink-100,
    html.dark .border-yellow-100,
    html.dark .border-orange-100,
    html[data-theme="dark"] .border-teal-100,
    html[data-theme="dark"] .border-emerald-100,
    html[data-theme="dark"] .border-green-100,
    html[data-theme="dark"] .border-blue-100,
    html[data-theme="dark"] .border-sky-100,
    html[data-theme="dark"] .border-indigo-100,
    html[data-theme="dark"] .border-cyan-100,
    html[data-theme="dark"] .border-violet-100,
    html[data-theme="dark"] .border-purple-100,
    html[data-theme="dark"] .border-fuchsia-100,
    html[data-theme="dark"] .border-pink-100,
    html[data-theme="dark"] .border-yellow-100,
    html[data-theme="dark"] .border-orange-100 {
        border-color: var(--border-color) !important;
    }

    /* ── PRINT: force light theme regardless of dark-mode state ────────────
       Browsers keep the html.dark class active during print. Without this
       block every CSS variable resolves to its dark value, producing
       dark-background printouts. We reset all tokens back to light values
       here. Applying to both :root AND html.dark ensures that even when
       the dark-mode rules have higher specificity, the LATER source-order
       position of this @media print block wins the cascade. */
    @media print {
        :root,
        html.dark,
        html[data-theme="dark"] {
            --bg-primary: #f3f7fb;
            --bg-secondary: rgba(255, 255, 255, 0.82);
            --bg-tertiary: #eaf1f8;
            --bg-card: rgba(255, 255, 255, 0.92);
            --bg-card-solid: #ffffff;
            --bg-card-muted: #f8fbff;
            --bg-hover: rgba(15, 23, 42, 0.05);
            --bg-hover-strong: rgba(15, 23, 42, 0.08);
            --bg-input: rgba(255, 255, 255, 0.96);
            --bg-input-disabled: #e2e8f0;
            --bg-overlay: rgba(255, 255, 255, 0.78);
            --sidebar-bg: #f8fbff;
            --sidebar-panel: rgba(255, 255, 255, 0.9);
            --border-color: rgba(148, 163, 184, 0.28);
            --border-strong: rgba(148, 163, 184, 0.42);
            --text-primary: #0f172a;
            --text-secondary: #334155;
            --text-muted: #64748b;
            --text-faint: #94a3b8;
            --text-on-accent: #ffffff;
            --focus-ring: rgba(14, 165, 233, 0.18);
            --shadow-soft: none;
            --shadow-card: none;
            --status-success-bg: rgba(16, 185, 129, 0.14);
            --status-success-text: #047857;
            --status-warning-bg: rgba(245, 158, 11, 0.16);
            --status-warning-text: #b45309;
            --status-danger-bg: rgba(239, 68, 68, 0.15);
            --status-danger-text: #b91c1c;
            --status-info-bg: rgba(59, 130, 246, 0.14);
            --status-info-text: #1d4ed8;
            --chart-grid: rgba(148, 163, 184, 0.25);
            --chart-axis-text: #64748b;
            --chart-legend-text: #334155;
        }

        /* Override hard-coded dark body gradient (uses literal hex, not variables) */
        html.dark body,
        html[data-theme="dark"] body,
        body {
            background: white !important;
            color: #0f172a !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        /* Override hard-coded bg-slate-900/950 dark values */
        html.dark .bg-slate-900,
        html.dark .bg-slate-950,
        html[data-theme="dark"] .bg-slate-900,
        html[data-theme="dark"] .bg-slate-950 {
            background-color: #f1f5f9 !important;
        }

        /* Shadows are meaningless on paper */
        * {
            box-shadow: none !important;
            text-shadow: none !important;
        }
    }