/* ============================================================
   JAGUAR ERP - DARK MODE
   Loaded AFTER jaguar-unified-design-system.css.
   Activates ONLY when <html data-theme="dark"> is set.
   The light theme is completely untouched.
   Palette: slate base (no pure black), soft gold accents,
   lightened status colors for AA contrast on dark surfaces.
   ============================================================ */

/* ---- Theme toggle (shared: header + login) ---- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    color: #fff;
    border-radius: 50%;
    opacity: 0.9;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    opacity: 1;
    transform: translateY(-1px);
}
.theme-icon-dark { display: inline-block; }
.theme-icon-light { display: none; }

/* ===== 0. DARK TOKENS ===== */
html[data-theme="dark"] {
    color-scheme: dark;

    --j-bg: #0F172A;             /* page background      */
    --j-bg-elevated: #111827;    /* table headers, sticky */
    --j-surface: #1E293B;        /* cards / panels        */
    --j-surface-2: #26334D;      /* inputs, hover         */
    --j-border: #334155;         /* borders / dividers    */
    --j-border-strong: #475569;  /* stronger borders      */
    --j-text: #E2E8F0;           /* primary text          */
    --j-text-secondary: #CBD5E1; /* table/body secondary   */
    --j-text-muted: #94A3B8;     /* captions (still AA)    */
    --j-gold: #D4AF37;
    --j-gold-light: #E6C96F;
}

/* Remap single-purpose legacy tokens so the whole unified
   design system adapts without touching component rules. */
html[data-theme="dark"] {
    --bg-light: #0F172A;
    --gray-50: #1E293B;
    --gray-100: #1E293B;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #94A3B8;
    --gray-500: #A5B4CB;
    --gray-600: #CBD5E1;
    --gray-700: #E2E8F0;
    --gray-800: #F1F5F9;
    --gray-900: #F8FAFC;

    --gold-focus-ring: rgba(212, 175, 55, 0.30);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
    --shadow-gold: 0 4px 15px rgba(197, 160, 40, 0.25);
}

html[data-theme="dark"] .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: inline-block; }

/* ===== 1. BASE ===== */
html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-light {
    background-color: var(--j-bg) !important;
    color: var(--j-text);
}

html[data-theme="dark"] a { color: var(--j-gold-light); }
html[data-theme="dark"] a:hover { color: #FEF3C7; }
html[data-theme="dark"] hr { border-color: var(--j-border); }

html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--j-surface); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--j-border-strong); }

/* Brand text/headings that were dark in light mode */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .jaguar-page-title,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .stat-value-modern,
html[data-theme="dark"] .chart-title,
html[data-theme="dark"] .chart-center-value,
html[data-theme="dark"] .card-header {
    color: var(--j-text);
}

/* ===== 2. SURFACES (cards, tables, panels) ===== */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-card-modern,
html[data-theme="dark"] .filter-section,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--j-surface);
    border-color: var(--j-border);
}

html[data-theme="dark"] .card-header {
    background-color: var(--j-surface);
    border-bottom-color: var(--j-border);
}

html[data-theme="dark"] .stat-card-modern {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .main-footer {
    border-top-color: var(--j-border);
    color: var(--j-text-muted);
}

/* ===== 3. TABLES ===== */
html[data-theme="dark"] .table th {
    background: var(--j-bg-elevated);
    color: var(--brand-gold-light);
    border-bottom-color: var(--brand-gold);
}
html[data-theme="dark"] .table td {
    color: var(--j-text-secondary);
    border-bottom-color: var(--j-border);
}
html[data-theme="dark"] .table tbody tr:nth-of-type(even),
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}
html[data-theme="dark"] .table-responsive > .table td:first-child {
    background-color: rgba(212, 175, 55, 0.10);
    color: var(--j-gold-light);
    border-inline-end-color: var(--j-border);
}

/* ===== 4. BUTTONS / PAGINATION ===== */
html[data-theme="dark"] .page-link {
    color: var(--j-text-secondary);
}
html[data-theme="dark"] .page-link:hover {
    color: var(--j-text);
    background-color: var(--j-surface-2);
    border-color: var(--brand-gold);
}
html[data-theme="dark"] .page-item .page-link { background-color: var(--j-surface); }

/* ===== 5. FORMS ===== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--j-surface-2);
    border-color: var(--j-border-strong);
    color: var(--j-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--j-surface-2);
}
html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--j-surface);
    border-color: var(--j-border-strong);
    color: var(--j-text-secondary);
}

/* ===== 6. BADGES (custom + bootstrap) ===== */
html[data-theme="dark"] .badge-success { background: #064E3B; color: #6EE7B7; }
html[data-theme="dark"] .badge-warning { background: #422006; color: #FCD34D; }
html[data-theme="dark"] .badge-error   { background: #450A0A; color: #FCA5A5; }
html[data-theme="dark"] .badge-info    { background: #1E3A5F; color: #93C5FD; }

html[data-theme="dark"] .badge.bg-success { background-color: #065F46 !important; color: #A7F3D0 !important; }
html[data-theme="dark"] .badge.bg-danger  { background-color: #7F1D1D !important; color: #FECACA !important; }
html[data-theme="dark"] .badge.bg-info    { background-color: #1E3A5F !important; color: #BFDBFE !important; }
html[data-theme="dark"] .badge.bg-secondary { background-color: #475569 !important; color: #E2E8F0 !important; }
html[data-theme="dark"] .badge.bg-dark    { background-color: #111827 !important; color: #E2E8F0 !important; }
html[data-theme="dark"] .badge.bg-warning { background-color: #B45309 !important; color: #FDE68A !important; }

/* ===== 7. TOAST / CONFIRMATION / MODALS ===== */
html[data-theme="dark"] .toast-notification {
    background: var(--j-surface);
    color: var(--j-text);
}
html[data-theme="dark"] .toast-title { color: var(--j-text); }
html[data-theme="dark"] .toast-message { color: var(--j-text-secondary); }
html[data-theme="dark"] .toast-close { color: var(--j-text-muted); }
html[data-theme="dark"] .toast-close:hover { color: var(--j-text); }

html[data-theme="dark"] .confirmation-modal-content { background: var(--j-surface); }
html[data-theme="dark"] .confirmation-title,
html[data-theme="dark"] .confirmation-message strong { color: var(--j-text); }
html[data-theme="dark"] .confirmation-message { color: var(--j-text-secondary); }

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--j-border); }
html[data-theme="dark"] .modal-body h5,
html[data-theme="dark"] .modal-title { color: var(--j-text); }

/* ===== 8. PROFILE DROPDOWN ===== */
html[data-theme="dark"] .user-menu { background-color: var(--j-surface); }
html[data-theme="dark"] .user-menu-meta strong { color: var(--j-text); }
html[data-theme="dark"] .user-menu-meta small { color: var(--j-text-muted); }
html[data-theme="dark"] .user-menu-label { color: var(--j-gold); }
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .user-menu .dropdown-divider { border-color: var(--j-border); }
/* Unified CSS flips item text to dark-slate on hover -> dark on dark.
   Re-pin it gold so hover stays readable. */
html[data-theme="dark"] .user-menu .dropdown-item:hover,
html[data-theme="dark"] .user-menu a.dropdown-item:hover {
    color: var(--j-gold-light) !important;
}
/* Bootstrap active / clicked items */
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
    background-color: rgba(212, 175, 55, 0.25) !important;
    color: var(--j-gold-light) !important;
}

/* ===== 9. SELECT2 / AUTOCOMPLETE ===== */
/* The app runs select2 with theme "bootstrap-5" (see select2_init.js),
   so we cover BOTH the bootstrap-5 container and the default one. */

/* Selection box (the closed control) */
html[data-theme="dark"] .select2-container .select2-selection,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--j-surface-2) !important;
    border-color: var(--j-border-strong) !important;
    color: var(--j-text) !important;
}
html[data-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
html[data-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple,
html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--j-gold) !important;
    box-shadow: var(--gold-focus-ring) !important;
}

/* Selected value / placeholder text inside the box */
html[data-theme="dark"] .select2-container .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--j-text) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--j-text-muted) !important;
}

/* Multi-select chips */
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(212, 175, 55, 0.18) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    color: var(--j-gold-light) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection--single {
    background-color: var(--j-bg-elevated) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--j-gold-light) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #F87171 !important;
}

/* Search input inside the open dropdown */
html[data-theme="dark"] .select2-search__field,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--j-surface-2) !important;
    border-color: var(--j-border-strong) !important;
    color: var(--j-text) !important;
}
html[data-theme="dark"] .select2-search__field::placeholder,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field::placeholder,
html[data-theme="dark"] .select2-search__field::-webkit-input-placeholder {
    color: var(--j-text-muted) !important;
}

/* Floating results dropdown */
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--j-surface) !important;
    border-color: var(--j-border) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Normal options */
html[data-theme="dark"] .select2-container .select2-results__option,
html[data-theme="dark"] .select2-container--default .select2-results__option,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--j-text) !important;
}
/* Hovered / selected option (must stay readable on gold tint) */
html[data-theme="dark"] .select2-container .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: rgba(212, 175, 55, 0.22) !important;
    color: #FDE9A8 !important;
    border-radius: 0.5rem;
}
/* Group labels / info rows */
html[data-theme="dark"] .select2-container .select2-results__message,
html[data-theme="dark"] .select2-container .select2-results__option--load-more,
html[data-theme="dark"] .select2-container .select2-results__group,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__group {
    color: var(--j-text-muted) !important;
    background-color: transparent !important;
}
/* Selection arrow - the bootstrap-5 theme draws it via a mask,
   force a light chevron so it stays visible on the dark box */
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__arrow::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* Hidden helper dropdown select2 appends to <body> may keep the default
   rule; neutralize content list style leftovers */
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-dropdown--below,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-dropdown--above,
html[data-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-dropdown--below,
html[data-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-dropdown--above {
    background-color: var(--j-surface) !important;
    border-color: var(--j-border) !important;
}

/* ===== 10. AUTH / LOGIN ===== */
html[data-theme="dark"] .auth-card { background-color: var(--j-surface); }
html[data-theme="dark"] .auth-title { color: var(--j-text); }
html[data-theme="dark"] .auth-field label { color: var(--j-text-secondary); }
html[data-theme="dark"] .auth-input {
    background-color: var(--j-bg-elevated);
    border-color: var(--j-border-strong);
    color: var(--j-text);
}
html[data-theme="dark"] .auth-input:focus { background-color: var(--j-surface-2); }
html[data-theme="dark"] .auth-error {
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
html[data-theme="dark"] .auth-footer { color: var(--j-text-muted); }

/* ===== 11. STAT ICONS ===== */
html[data-theme="dark"] .stat-icon.primary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--j-text);
}

/* ===== 12. BOOTSTRAP UTILITY SAFETY NETS ===== */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white-override {
    background-color: var(--j-surface) !important;
}
html[data-theme="dark"] .bg-dark {
    background-color: #111827 !important;
}
html[data-theme="dark"] .text-light {
    color: #F8FAFC !important;
}
html[data-theme="dark"] .text-gold {
    color: var(--j-gold-light) !important;
}
html[data-theme="dark"] .text-primary {
    color: var(--j-gold-light) !important;
}
html[data-theme="dark"] .bg-primary {
    background-color: var(--brand-gold) !important;
}
html[data-theme="dark"] .bg-light {
    background-color: var(--j-surface) !important;
}
html[data-theme="dark"] .bg-body {
    background-color: var(--j-bg) !important;
}
html[data-theme="dark"] .text-bg-light {
    background-color: var(--j-surface-2) !important;
    color: var(--j-text) !important;
    border-color: var(--j-border) !important;
}

/* ===== 12b. BOOTSTRAP 5.2 TEXT UTILITIES =====
   The bundled django-bootstrap5 ships Bootstrap 5.2.3, which has NO
   dark color-mode, so .text-dark / .text-muted / .text-secondary and
   friends stay dark-on-dark. Re-target them for dark backgrounds. */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body { color: var(--j-text) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .text-secondary { color: var(--j-text-muted) !important; }
html[data-theme="dark"] .text-success { color: #6EE7B7 !important; }
html[data-theme="dark"] .text-danger { color: #FCA5A5 !important; }
html[data-theme="dark"] .text-warning { color: #FCD34D !important; }
html[data-theme="dark"] .text-info { color: #7DD3FC !important; }

/* Where the underlying background stays LIGHT/bright in dark mode,
   keep the dark text so it stays readable on that bg. */
html[data-theme="dark"] .btn-warning.text-dark,
html[data-theme="dark"] .btn-soft-warning.text-dark,
html[data-theme="dark"] .bg-warning.text-dark:not(.badge),
html[data-theme="dark"] .bg-gold.text-dark,
html[data-theme="dark"] .bg-gold-light.text-dark { color: #78350F !important; }
html[data-theme="dark"] .bg-info.text-dark:not(.badge) { color: #1E3A5F !important; }

/* ===== 12c. BS 5.2 COMPONENTS WITH HARDCODED LIGHT COLORS ===== */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--j-surface) !important;
    color: var(--j-text) !important;
    border-color: var(--j-border) !important;
}
html[data-theme="dark"] .dropdown-item { color: var(--j-text) !important; }
html[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(212, 175, 55, 0.08) !important;
    color: var(--j-gold-light) !important;
}
html[data-theme="dark"] .dropdown-header { color: var(--j-text-muted) !important; }

html[data-theme="dark"] .modal-content {
    background-color: var(--j-surface) !important;
    color: var(--j-text) !important;
    border-color: var(--j-border) !important;
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--j-surface) !important;
    color: var(--j-text) !important;
    border-color: var(--j-border) !important;
}
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--j-surface-2) !important;
    color: var(--j-text) !important;
}
html[data-theme="dark"] .list-group-item.active {
    background-color: rgba(212, 175, 55, 0.22) !important;
    color: var(--j-gold-light) !important;
    border-color: var(--j-border) !important;
}

html[data-theme="dark"] .accordion-item {
    background-color: var(--j-surface) !important;
    color: var(--j-text);
    border-color: var(--j-border) !important;
}
html[data-theme="dark"] .accordion-button {
    background-color: var(--j-surface-2) !important;
    color: var(--j-text) !important;
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(212, 175, 55, 0.10) !important;
    color: var(--j-gold-light) !important;
    box-shadow: none;
}
html[data-theme="dark"] .accordion-button::after { filter: invert(1); }
html[data-theme="dark"] .accordion-button:focus {
    box-shadow: var(--gold-focus-ring) !important;
}
html[data-theme="dark"] .progress { background-color: var(--j-surface-2); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ===== 13. PAGE-SPECIFIC OVERRIDES ===== */

/* Dashboard (core/dashboard.html) */
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .period-card .card-header {
    background: var(--j-surface) !important;
    border-color: var(--j-border);
    box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .chart-title,
html[data-theme="dark"] .chart-center-value { color: var(--j-text) !important; }
html[data-theme="dark"] .chart-center-label { color: var(--j-text-muted) !important; }
html[data-theme="dark"] .range-btn {
    border-color: var(--j-border-strong);
    background: var(--j-surface-2);
    color: var(--j-text-muted);
}
html[data-theme="dark"] .range-btn.active {
    background: var(--brand-gold) !important;
    color: #0F172A !important;
    border-color: var(--brand-gold) !important;
}
html[data-theme="dark"] .feed-row,
html[data-theme="dark"] .mini-item,
html[data-theme="dark"] .device-row {
    border-color: var(--j-border) !important;
}
html[data-theme="dark"] .widget-list::-webkit-scrollbar-thumb { background: var(--j-border-strong); }

/* Rotation calendar (shifts/rotation_calendar.html) */
html[data-theme="dark"] .sticky-col { background: var(--j-bg-elevated) !important; }
html[data-theme="dark"] thead .sticky-col { background: #111827 !important; }

/* Cancelled days (sarky/cancelled_days.html) */
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .table-card {
    background: var(--j-surface) !important;
    border-color: var(--j-border) !important;
}
html[data-theme="dark"] .emp-chip {
    background: var(--j-surface-2);
    border-color: var(--j-border-strong);
    color: var(--j-text);
}
html[data-theme="dark"] .table-card tbody td { border-color: var(--j-border) !important; }
html[data-theme="dark"] .add-card .form-control,
html[data-theme="dark"] .add-card .form-select {
    border-color: var(--j-border-strong);
    background: var(--j-bg-elevated);
    color: var(--j-text);
}

/* Prepare periods (payroll/prepare_periods.html) */
html[data-theme="dark"] .period-card .card-header {
    background: var(--j-surface) !important;
    border-bottom-color: var(--j-border) !important;
    color: var(--j-text) !important;
}
html[data-theme="dark"] .summary-item { background: var(--j-surface-2); }
html[data-theme="dark"] .summary-item:hover { background: var(--j-bg-elevated); }
html[data-theme="dark"] .summary-item .label { color: var(--j-text-muted); }
/* Values are hardcoded light-theme colors; brighten them for dark bg */
html[data-theme="dark"] .summary-item .value { color: var(--j-text) !important; }
html[data-theme="dark"] .summary-item.earnings .value { color: #34D399 !important; }
html[data-theme="dark"] .summary-item.deductions .value { color: #F87171 !important; }
html[data-theme="dark"] .summary-item.neutral .value { color: #60A5FA !important; }
html[data-theme="dark"] .summary-item.warning .value { color: #FBBF24 !important; }
html[data-theme="dark"] .action-bar { background: var(--j-surface) !important; border-color: var(--j-border) !important; }
html[data-theme="dark"] .btn-detail { border-color: var(--j-border-strong); color: var(--j-text-muted); }
html[data-theme="dark"] .btn-detail:hover { background: var(--j-surface-2); border-color: var(--j-border); color: var(--j-text); }
html[data-theme="dark"] .detail-table th { background: var(--j-bg-elevated); color: var(--j-text-muted); }
html[data-theme="dark"] .detail-table td { color: var(--j-text) !important; }
html[data-theme="dark"] .detail-table td strong { color: var(--j-text); }

/* Period list badges (sarky/period_list.html) */
html[data-theme="dark"] .status-badge.badge-active { background: #064E3B; color: #6EE7B7; border-color: #065F46; }
html[data-theme="dark"] .status-badge.badge-closed { background: #7F1D1D; color: #FCA5A5; border-color: #991B1B; }
html[data-theme="dark"] .status-badge.badge-empty { background: var(--j-surface-2); color: var(--j-text-muted); border-color: var(--j-border); }
html[data-theme="dark"] .period-card-small { background: var(--j-surface); border-color: var(--j-border); }
html[data-theme="dark"] .modal-body h5 { color: var(--j-text) !important; }

/* Prepare periods badges (payroll/prepare_periods.html) */
html[data-theme="dark"] .status-badge.badge-ready  { background: #064E3B; color: #6EE7B7; border-color: #065F46; }
html[data-theme="dark"] .status-badge.badge-done   { background: #1E3A5F; color: #93C5FD; border-color: #1E40AF; }
html[data-theme="dark"] .status-badge.badge-empty2 { background: var(--j-surface-2); color: var(--j-text-muted); border-color: var(--j-border); }
html[data-theme="dark"] .status-badge.badge-closed2 { background: #7F1D1D; color: #FCA5A5; border-color: #991B1B; }

/* Document grid (reports/document_grid.html) */
html[data-theme="dark"] .sticky-cell { background: var(--j-bg-elevated) !important; }
html[data-theme="dark"] .employee-cell {
    background: var(--j-surface) !important;
    border-inline-end-color: var(--j-border) !important;
}

/* My Profile (employees/employee_profile.html)
   The page's own style block uses var(--white) backgrounds and
   var(--brand-slate-dark) headings -> force dark with readable text. */
html[data-theme="dark"] .profile-banner,
html[data-theme="dark"] .profile-card {
    background: var(--j-surface) !important;
    border-color: var(--j-border) !important;
}
html[data-theme="dark"] .profile-banner { border-top-color: var(--brand-gold) !important; }
html[data-theme="dark"] .profile-name,
html[data-theme="dark"] .profile-card-header {
    color: var(--j-text) !important;
    border-bottom-color: var(--j-border) !important;
}
html[data-theme="dark"] .profile-card-body { color: var(--j-text); }
html[data-theme="dark"] .info-grid dd { color: var(--j-text-secondary) !important; }

/* ===== 14. PRINT - always light ===== */
@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] body.bg-light {
        background: #fff !important;
        color: #000 !important;
    }
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .stat-card,
    html[data-theme="dark"] .stat-card-modern,
    html[data-theme="dark"] .filter-section,
    html[data-theme="dark"] .table-responsive,
    html[data-theme="dark"] .card-header,
    html[data-theme="dark"] .main-footer,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .confirmation-modal-content,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .toast-notification,
    html[data-theme="dark"] .auth-card {
        background: #fff !important;
        color: #000 !important;
        border-color: #dee2e6 !important;
        box-shadow: none !important;
    }
    html[data-theme="dark"] .table th {
        background: #212529 !important;
        color: #fff !important;
        border-bottom-color: #000 !important;
    }
    html[data-theme="dark"] .table td {
        color: #000 !important;
        border-color: #dee2e6 !important;
    }
    html[data-theme="dark"] .page-title,
    html[data-theme="dark"] .jaguar-page-title,
    html[data-theme="dark"] .stat-value,
    html[data-theme="dark"] .chart-title,
    html[data-theme="dark"] .chart-center-value {
        color: #000 !important;
    }
    html[data-theme="dark"] .bg-white { background: #fff !important; }
    html[data-theme="dark"] .table-responsive > .table td:first-child {
        background: #f8f9fa !important;
        color: #0F172A !important;
    }
    html[data-theme="dark"] a { color: #000 !important; }
}