/* --- Dark Theme (Modern) --- */
:root.theme-dark {
    --title: #e9ecef;
    --body: #121212;
    --htitle: #f8f9fa;
    --hbody: #1e1e1e;
    --table-row: #1e1e1e;
    --table-row-hover: #343a40;
    --primal: #ebf4ff;
    --primal_dark: #94a3b8;
    --primal-rgb: 203, 213, 225;
    --btn-primary-shadow: rgba(203, 213, 225, 0.4);
    --nav-item-color: var(--table-row);
    color-scheme: dark;


    /* Bootstrap Overrides */
    --bs-primary: var(--primal);
    --bs-primary-rgb: var(--primal-rgb);
    --bs-btn-bg: var(--primal);
    --bs-btn-border-color: var(--primal);
    --bs-btn-hover-bg: var(--primal_dark);
    --bs-btn-hover-border-color: var(--primal_dark);
    --bs-link-color: var(--primal);
    --bs-link-hover-color: var(--primal_dark);
    /* Dark Mode Specific Bootstrap Vars */
    --bs-body-bg: var(--body);
    --bs-body-color: var(--title);

    /* Login Theme Variables */
    --bg-gradient: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
    --right-bg: var(--title);
    --primary-color: var(--primal);
    /* Setup Builder Theme Tokens */
    --ms-setup-shell-bg: linear-gradient(180deg, rgba(30, 30, 30, 0.96), rgba(18, 18, 18, 0.96));
    --ms-setup-shell-border: rgba(255, 255, 255, 0.08);
    --ms-setup-card-bg: rgba(30, 30, 30, 0.9);
    --ms-setup-card-border: rgba(255, 255, 255, 0.08);
    --ms-setup-pane-bg: rgba(255, 255, 255, 0.03);
    --ms-setup-pane-border: rgba(255, 255, 255, 0.08);
    --ms-setup-item-bg: rgba(255, 255, 255, 0.03);
    --ms-setup-item-border: rgba(255, 255, 255, 0.08);
    --ms-setup-item-hover-bg: rgba(255, 255, 255, 0.05);
    --ms-setup-item-shadow: none;
    --ms-setup-item-active-bg: rgba(var(--primal-rgb), 0.1);
    --ms-setup-item-active-ring: rgba(var(--primal-rgb), 0.22);
    --ms-setup-tree-bg: linear-gradient(180deg, rgba(18, 18, 18, 0.92), rgba(30, 30, 30, 0.92));
    --ms-setup-tree-accent: rgba(var(--primal-rgb), 0.28);
    --ms-setup-connector: rgba(148, 163, 184, 0.28);
    --ms-setup-badge-bg: rgba(255, 255, 255, 0.08);
    --ms-setup-badge-color: #e9ecef;
    --ms-setup-text: var(--title);
    --ms-setup-muted: #cbd5e1;
    /* Microsys Table Tokens */
    --ms-table-surface:
        radial-gradient(circle at top, rgba(var(--primal-rgb), 0.08), transparent 68%),
        linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(18, 18, 18, 0.98));
    --ms-table-border: rgba(255, 255, 255, 0.08);
    --ms-table-border-strong: rgba(255, 255, 255, 0.14);
    --ms-table-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.62);
    --ms-table-header-surface: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(34, 34, 34, 0.97));
    --ms-table-header-text: #f4f7fb;
    --ms-table-row-odd: rgba(26, 26, 26, 0.96);
    --ms-table-row-even: rgba(34, 34, 34, 0.96);
    --ms-table-row-hover: rgba(52, 58, 64, 0.96);
    --ms-table-cell-border: rgba(255, 255, 255, 0.08);
    --ms-table-sort-muted: rgba(226, 232, 240, 0.72);
    --ms-table-empty-muted: rgba(203, 213, 225, 0.84);
    --ms-table-empty-surface: linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(20, 20, 20, 0.98));
    --ms-table-empty-icon-bg: rgba(255, 255, 255, 0.04);
    --ms-table-empty-icon-color: #dbe5f0;
    --ms-table-empty-icon-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --ms-table-footer-surface: linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(16, 16, 16, 0.98));
    --ms-table-footer-text: rgba(226, 232, 240, 0.82);
    --ms-density-card-border: rgba(255, 255, 255, 0.1);
    --ms-density-card-surface:
        radial-gradient(circle at top, rgba(var(--primal-rgb), 0.06), transparent 68%),
        linear-gradient(180deg, rgba(30, 30, 30, 0.98), rgba(20, 20, 20, 0.98));
    --ms-density-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 30px -26px rgba(0, 0, 0, 0.62);
    --ms-density-card-hover-border: rgba(var(--primal-rgb), 0.22);
    --ms-density-card-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 34px -28px rgba(0, 0, 0, 0.72);
    --ms-density-card-active-border: rgba(var(--primal-rgb), 0.3);
    --ms-density-card-active-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 0 0.18rem rgba(var(--primal-rgb), 0.12);
    --ms-density-card-icon-bg: rgba(255, 255, 255, 0.05);
    --ms-density-card-icon-color: #e9eff7;
    --ms-density-card-title: #eef3f9;
    --ms-density-card-copy: rgba(203, 213, 225, 0.84);
    --ms-table-chip-bg: rgba(255, 255, 255, 0.04);
    --ms-table-chip-border: rgba(255, 255, 255, 0.1);
    --ms-table-chip-text: #e9ecef;
    --ms-table-chip-hover-bg: rgba(255, 255, 255, 0.09);
    --ms-table-chip-active-bg: rgba(var(--primal-rgb), 0.18);
    --ms-table-chip-active-border: rgba(var(--primal-rgb), 0.34);
    --ms-table-page-bg: rgba(255, 255, 255, 0.04);
    --ms-table-page-border: rgba(255, 255, 255, 0.1);
    --ms-table-page-text: #eef2f7;
    --ms-table-page-hover-bg: rgba(255, 255, 255, 0.08);
    --ms-table-page-hover-border: rgba(var(--primal-rgb), 0.3);
    --ms-table-page-active-bg: rgba(var(--primal-rgb), 0.92);
    --ms-table-page-active-border: rgba(var(--primal-rgb), 0.92);
    --ms-table-page-active-text: #101216;
    --ms-table-page-disabled-bg: rgba(255, 255, 255, 0.02);
    --ms-table-page-disabled-border: rgba(255, 255, 255, 0.08);
    --ms-table-page-disabled-text: rgba(226, 232, 240, 0.45);
    --ms-table-sticky-shadow: 10px 0 24px -20px rgba(0, 0, 0, 0.75);
    --ms-table-row-deleted-bg: rgba(255, 255, 255, 0.03);
    --ms-table-row-deleted-text: #7c8797;
    --ms-table-row-danger-bg: rgba(88, 31, 44, 0.82);
    --ms-table-row-danger-hover-bg: rgba(108, 40, 54, 0.9);
}

/* Force options to inherit dark theme colors */
:root.theme-dark select option {
    background-color: var(--hbody);
    color: #e9ecef;
}

/* --- Comprehensive Dark Theme Overrides --- */

/* 1. Global, Cards & Modals - Background & Text */
:root.theme-dark .card:not([class*="text-bg-"]):not([class*="bg-"]),
:root.theme-dark .card-body:not([class*="text-bg-"]):not([class*="bg-"]),
:root.theme-dark .dashboard-card:not([class*="text-bg-"]):not([class*="bg-"]), 
:root.theme-dark .option-section:not([class*="text-bg-"]):not([class*="bg-"]),
:root.theme-dark .list-group-item:not([class*="text-bg-"]):not([class*="bg-"]):not(.active),
:root.theme-dark .modal-content,
:root.theme-dark .chart-container-sys {
    background-color: var(--hbody) !important;
    color: #e9ecef !important;
}

/* 1b. Selective Border Coloring - ONLY override if NO utility border is present */
:root.theme-dark .card:not([class*="border-"]),
:root.theme-dark .card-body:not([class*="border-"]),
:root.theme-dark .dashboard-card:not([class*="border-"]),
/* :root.theme-dark .option-section:not([class*="border-"]), */
:root.theme-dark .list-group-item:not([class*="border-"]),
:root.theme-dark .modal-content:not([class*="border-"]),
:root.theme-dark .chart-container-sys:not([class*="border-"]) {
    border-color: #343a40 !important;
}

/* Specific Activity Chart Fix: Needs to be transparent to blend */
:root.theme-dark .chart-container-sys {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Ensure transparency utilities are respected [FIX-2026-02-19] */
:root.theme-dark .list-group-item.bg-transparent {
    background-color: transparent !important;
}

:root.theme-dark #sidebar {
    background: var(--hbody) !important;
    border-left: 1px solid #343a40 !important;
}

:root.theme-dark .text-muted,
:root.theme-dark .text-secondary {
    color: #dee2e6 !important; /* High contrast light slate */
}

:root.theme-dark .bg-light {
    background-color: #121212 !important;
    border-color: #343a40 !important;
}

/* Fix "Gray Fog" - Map white utilities to dark theme colors */
:root.theme-dark .bg-white {
    background-color: var(--hbody) !important;
    color: var(--title) !important;
}

:root.theme-dark .border-white {
    border-color: #343a40 !important;
}

/* 2. Titlebar */
:root.theme-dark .titlebar {
    background: linear-gradient(90deg, #121212 10%, #1e1e1e 90%) !important;
    border-bottom: 1px solid #343a40 !important;
}

:root.theme-dark .titlebar p,
:root.theme-dark .titlebar .btn-light,
:root.theme-dark .titlebar .btn-light .bi {
    color: #e9ecef !important;
}

:root.theme-dark .titlebar .btn-light .bi {
    margin-inline-end: 0.5rem !important; /* Logical property for LTR/RTL spacing */
}

:root.theme-dark .titlebar .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

:root.theme-dark .titlebar .btn-light:hover .bi {
    color: #fff !important;
}

:root.theme-dark .titlebar[data-titlebar-logo-treatment="plate"] .titlebar__logo {
    background:
        linear-gradient(135deg, rgba(203, 213, 225, 0.12), transparent 58%),
        rgba(248, 249, 250, 0.92) !important;
    border-color: rgba(203, 213, 225, 0.35) !important;
}

:root.theme-dark .titlebar[data-titlebar-logo-treatment="halo"] .titlebar__logo,
:root.theme-dark .titlebar[data-titlebar-logo-treatment="contrast"] .titlebar__logo {
    filter:
        brightness(1.14)
        contrast(1.16)
        drop-shadow(0 0 0.45rem rgba(203, 213, 225, 0.45)) !important;
}

/* 3. Forms & Inputs */
:root.theme-dark .microsys-form,
:root.theme-dark .archive-document-form,
:root.theme-dark .microsys-filter {
    --archive-form-surface: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(24, 24, 24, 0.96));
    --archive-form-border: rgba(255, 255, 255, 0.1);
    --archive-form-border-strong: rgba(var(--primal-rgb), 0.36);
    --archive-form-focus-ring: rgba(var(--primal-rgb), 0.16);
    --archive-form-muted: #cbd5e1;
}

:root.theme-dark .form-control,
:root.theme-dark .form-select,
:root.theme-dark .input-group-text {
    background-color: #121212 !important;
    border-color: #343a40 !important;
    color: #e9ecef !important;
}

:root.theme-dark .form-control:focus,
:root.theme-dark .form-select:focus {
    background-color: #121212 !important; /* Kept same as resting state */
    border-color: #343a40 !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

:root.theme-dark .microsys-form .form-control,
:root.theme-dark .microsys-form .form-select,
:root.theme-dark .microsys-form textarea,
:root.theme-dark .archive-document-form .form-control,
:root.theme-dark .archive-document-form .form-select,
:root.theme-dark .archive-document-form textarea,
:root.theme-dark .microsys-filter .form-control,
:root.theme-dark .microsys-filter .form-select,
:root.theme-dark .microsys-filter textarea {
    background: var(--archive-form-surface) !important;
    border-color: var(--archive-form-border) !important;
    color: var(--title) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

:root.theme-dark .microsys-form .form-control:hover,
:root.theme-dark .microsys-form .form-select:hover,
:root.theme-dark .microsys-form textarea:hover,
:root.theme-dark .archive-document-form .form-control:hover,
:root.theme-dark .archive-document-form .form-select:hover,
:root.theme-dark .archive-document-form textarea:hover,
:root.theme-dark .microsys-filter .form-control:hover,
:root.theme-dark .microsys-filter .form-select:hover,
:root.theme-dark .microsys-filter textarea:hover {
    border-color: rgba(var(--primal-rgb), 0.24) !important;
}

:root.theme-dark .microsys-form .form-control:focus,
:root.theme-dark .microsys-form .form-select:focus,
:root.theme-dark .microsys-form textarea:focus,
:root.theme-dark .archive-document-form .form-control:focus,
:root.theme-dark .archive-document-form .form-select:focus,
:root.theme-dark .archive-document-form textarea:focus,
:root.theme-dark .microsys-filter .form-control:focus,
:root.theme-dark .microsys-filter .form-select:focus,
:root.theme-dark .microsys-filter textarea:focus {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(24, 24, 24, 0.96)) !important;
    border-color: var(--archive-form-border-strong) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 0.22rem var(--archive-form-focus-ring) !important;
}

:root.theme-dark .microsys-filter .btn.microsys-filter-toggle[aria-expanded="true"] {
    color: #f4f8ff !important;
    border-color: rgba(var(--primal-rgb), 0.3) !important;
    background: linear-gradient(180deg, rgba(35, 40, 50, 0.98), rgba(24, 28, 36, 0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

:root.theme-dark .microsys-filter .btn.microsys-filter-toggle[aria-expanded="true"] i {
    color: inherit !important;
}

:root.theme-dark label,
:root.theme-dark .form-label,
:root.theme-dark .col-form-label {
    color: #e9ecef !important;
}

/* 3d. Placeholder Polish - SEPARATED BLOCKS ARE CRITICAL */
.theme-dark input::placeholder, 
.theme-dark textarea::placeholder,
.theme-dark .form-control::placeholder { 
    color: #f8f9fa !important; 
    opacity: 1 !important; 
}

/* Webkit (Chrome/Safari/Edge) */
.theme-dark input::-webkit-input-placeholder,
.theme-dark textarea::-webkit-input-placeholder,
.theme-dark .form-control::-webkit-input-placeholder {
    color: #f8f9fa !important;
    opacity: 1 !important;
}

/* Firefox */
.theme-dark input::-moz-placeholder,
.theme-dark textarea::-moz-placeholder,
.theme-dark .form-control::-moz-placeholder {
    color: #f8f9fa !important;
    opacity: 1 !important;
}

/* IE/Edge Legacy */
.theme-dark input:-ms-input-placeholder,
.theme-dark textarea:-ms-input-placeholder {
    color: #f8f9fa !important;
    opacity: 1 !important;
}

:root.theme-dark .archive-form-action,
:root.theme-dark .microsys-form-action,
:root.theme-dark .microsys-filter .microsys-filter-chip,
:root.theme-dark .microsys-filter .microsys-filter-action {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(24, 24, 24, 0.96)) !important;
    color: var(--title) !important;
    box-shadow: none !important;
}

:root.theme-dark .microsys-filter .btn.microsys-filter-submit {
    color: #dbeafe !important;
    border-color: rgba(var(--primal-rgb), 0.24) !important;
    background: linear-gradient(180deg, rgba(34, 45, 68, 0.98), rgba(22, 28, 42, 0.96)) !important;
}

:root.theme-dark .microsys-filter .btn.microsys-filter-toggle {
    color: #e5e7eb !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: linear-gradient(180deg, rgba(38, 40, 46, 0.98), rgba(24, 26, 31, 0.96)) !important;
}

:root.theme-dark .archive-form-action:hover,
:root.theme-dark .archive-form-action:focus-visible,
:root.theme-dark .microsys-form-action:hover,
:root.theme-dark .microsys-form-action:focus-visible,
:root.theme-dark .microsys-filter .microsys-filter-chip:hover,
:root.theme-dark .microsys-filter .microsys-filter-chip:focus-visible,
:root.theme-dark .microsys-filter .microsys-filter-action:hover,
:root.theme-dark .microsys-filter .microsys-filter-action:focus-visible {
    border-color: rgba(var(--primal-rgb), 0.24) !important;
    box-shadow: none !important;
}

:root.theme-dark .archive-form-action-icon,
:root.theme-dark .microsys-form-action-icon,
:root.theme-dark .microsys-filter .microsys-filter-action i {
    color: var(--title) !important;
}

:root.theme-dark .archive-form-action-primary .archive-form-action-icon,
:root.theme-dark .microsys-form-action-primary .microsys-form-action-icon,
:root.theme-dark .microsys-filter .microsys-filter-action.btn-primary {
    color: #d1fae5 !important;
    border-color: rgba(25, 135, 84, 0.24) !important;
    background: linear-gradient(180deg, rgba(23, 54, 41, 0.98), rgba(18, 34, 28, 0.96)) !important;
}

:root.theme-dark .microsys-form-action-primary {
    border-color: rgba(25, 135, 84, 0.24) !important;
    background: linear-gradient(180deg, rgba(23, 54, 41, 0.98), rgba(18, 34, 28, 0.96)) !important;
}

:root.theme-dark .microsys-filter .microsys-filter-action.btn-outline-success,
:root.theme-dark .microsys-filter a.microsys-filter-action.btn-outline-success {
    color: #d1fae5 !important;
    border-color: rgba(25, 135, 84, 0.22) !important;
    background: linear-gradient(180deg, rgba(22, 49, 38, 0.98), rgba(17, 31, 25, 0.96)) !important;
}

:root.theme-dark .microsys-filter .microsys-filter-action.btn-outline-primary,
:root.theme-dark .microsys-filter a.microsys-filter-action.btn-outline-primary {
    color: #dbeafe !important;
    border-color: rgba(var(--primal-rgb), 0.24) !important;
    background: linear-gradient(180deg, rgba(33, 44, 67, 0.98), rgba(21, 27, 41, 0.96)) !important;
}

:root.theme-dark .archive-form-action-neutral .archive-form-action-icon,
:root.theme-dark .microsys-form-action-neutral .microsys-form-action-icon {
    color: #fecaca !important;
    background: rgba(220, 53, 69, 0.18) !important;
}

:root.theme-dark .microsys-form-action-neutral {
    border-color: rgba(220, 53, 69, 0.18) !important;
    background:
        radial-gradient(circle at top, rgba(220, 53, 69, 0.1), transparent 56%),
        linear-gradient(180deg, rgba(58, 28, 32, 0.98), rgba(35, 21, 24, 0.96)) !important;
}

:root.theme-dark .microsys-filter .microsys-filter-clear {
    color: #fbd38d !important;
    border-color: rgba(255, 193, 7, 0.22) !important;
    background:
        radial-gradient(circle at top, rgba(255, 193, 7, 0.12), transparent 56%),
        linear-gradient(180deg, rgba(61, 47, 19, 0.98), rgba(39, 30, 14, 0.96)) !important;
}

:root.theme-dark .archive-file-card {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(24, 24, 24, 0.96)) !important;
    box-shadow: none !important;
}

:root.theme-dark .archive-file-field.is-dragover .archive-file-card,
:root.theme-dark .archive-file-card:hover,
:root.theme-dark .archive-file-card:focus-visible {
    border-color: rgba(var(--primal-rgb), 0.26) !important;
    box-shadow: none !important;
}

:root.theme-dark .archive-file-tag {
    background: rgba(var(--primal-rgb), 0.14) !important;
    color: var(--title) !important;
}

:root.theme-dark .archive-file-tool {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--title) !important;
    box-shadow: none !important;
}

:root.theme-dark .archive-file-tool-upload {
    background: rgba(var(--primal-rgb), 0.16) !important;
    color: var(--title) !important;
}

:root.theme-dark .archive-file-tool-scan {
    background: rgba(255, 193, 7, 0.18) !important;
    color: #fbd38d !important;
}

:root.theme-dark .archive-file-tool-clear {
    background: rgba(220, 53, 69, 0.16) !important;
    color: #fecaca !important;
}

:root.theme-dark .archive-file-icon {
    background: rgba(var(--primal-rgb), 0.14) !important;
    color: var(--title) !important;
}

:root.theme-dark .archive-file-name {
    color: var(--title) !important;
}

:root.theme-dark .archive-file-meta {
    color: #cbd5e1 !important;
}
/* Toggle cards (lang-option / ms-choice-selector--toggle) */
:root.theme-dark .lang-option,
.theme-dark .lang-option {
    background-color: rgba(38, 38, 38, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}
:root.theme-dark .lang-option:hover,
.theme-dark .lang-option:hover {
    background-color: rgba(50, 50, 50, 0.96) !important;
    border-color: rgba(var(--primal-rgb), 0.22) !important;
    color: var(--title) !important;
}
:root.theme-dark .lang-option.lang-active,
:root.theme-dark .lang-active,
.theme-dark .lang-option.lang-active,
.theme-dark .lang-active {
    background-color: rgba(var(--primal-rgb), 0.1) !important;
    border-color: var(--primal) !important;
    color: var(--title) !important;
    box-shadow: 0 0 0 3px rgba(var(--primal-rgb), 0.14) !important;
}
/* ms-settings-toggle-field card (bg-light override) */
:root.theme-dark .ms-settings-toggle-field {
    background-color: rgba(38, 38, 38, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--title) !important;
}
/* 4. Tables */
:root.theme-dark .table {
    color: #e9ecef !important;
    --bs-table-color: #e9ecef !important;
    --bs-table-striped-color: #e9ecef !important;
    --bs-table-active-color: #e9ecef !important;
}

:root.theme-dark .table thead th {
    background: var(--ms-table-header-surface) !important;
    color: #fff !important;
    border-color: #343a40 !important;
}

:root.theme-dark .table>tbody>tr>td, 
:root.theme-dark .table>tbody>tr>th {
    border-color: #343a40 !important;
}

:root.theme-dark .table>tbody>tr:nth-child(odd)>td, 
:root.theme-dark .table>tbody>tr:nth-child(odd)>th {
    --bs-table-bg-type: #121212 !important; 
    background-color: #121212 !important;
    color: var(--htitle) !important;
}

:root.theme-dark .table>tbody>tr:nth-child(even)>td, 
:root.theme-dark .table>tbody>tr:nth-child(even)>th {
    --bs-table-bg-type: var(--hbody) !important;
    background-color: var(--hbody) !important;
    color: var(--htitle) !important;
}

/* 5. Dropdowns */
:root.theme-dark .dropdown-menu {
    background-color: var(--hbody) !important;
    border-color: #343a40 !important;
}

:root.theme-dark .dropdown-item {
    color: var(--htitle) !important;
}

:root.theme-dark .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* 5b. Explicit Button Polish */
:root.theme-dark .btn-primary, 
:root.theme-dark .btn-primary *,
:root.theme-dark .btn-primary:hover,
:root.theme-dark .btn-primary:active,
.theme-dark .btn-primary,
.theme-dark .btn-primary * {
    color: var(--body) !important; /* Force Theme Dark color for text and icons */
}

/* 6. Sidebar Active State & Scrollbar */
.theme-dark .sidebar .list-group-item:not(.active),
.theme-dark .sidebar .accordion-button.collapsed,
.theme-dark .sidebar .accordion-button {
    color: #f8f9fa !important; /* Force all sidebar labels to be bright */
}

/* Sidebar folder indicator */
:root.theme-dark .accordion-button::after,
.theme-dark .accordion-button::after {
    filter: none !important;
}

:root.theme-dark .sidebar .list-group-item.active,
:root.theme-dark .sidebar .accordion-button:not(.collapsed),
.theme-dark .sidebar .list-group-item.active,
.theme-dark .sidebar .accordion-button:not(.collapsed) {
    color: #c9d2df !important;
    /* font-weight: 700 !important; */
}

:root.theme-dark .sidebar.collapsed .accordion-button.has-active-child,
.theme-dark .sidebar.collapsed .accordion-button.has-active-child,
:root.theme-dark .sidebar .list-group-item.active,
.theme-dark .sidebar .list-group-item.active {
    color: #60a5fa !important; /* Bright blue for active/expanded */
    /* font-weight: 700 !important; */
}

:root.theme-dark ::-webkit-scrollbar-track {
    background: #121212; 
}

:root.theme-dark ::-webkit-scrollbar-thumb {
    background: #343a40; 
    border: 3px solid #121212;
}

/* 7. Plotly/Charts (SVG Hacks) */
:root.theme-dark .js-plotly-plot .main-svg {
    background: transparent !important;
}

:root.theme-dark .js-plotly-plot text {
    fill: #ced4da !important; /* Slate-300 for text */
}

:root.theme-dark .js-plotly-plot .xgrid,
:root.theme-dark .js-plotly-plot .ygrid,
:root.theme-dark .js-plotly-plot .zerolinelayer path {
    stroke: #343a40 !important; /* Darker grid lines */
}

:root.theme-dark .js-plotly-plot .bg {
    fill: rgba(0,0,0,0) !important; /* Transparent background for chart area */
}

/* 8. Text Elements & Headers */
:root.theme-dark h1, 
:root.theme-dark h2, 
:root.theme-dark h3, 
:root.theme-dark h4, 
:root.theme-dark h5, 
:root.theme-dark h6,
:root.theme-dark .header-title,
:root.theme-dark .stat-value,
:root.theme-dark .form-text,
:root.theme-dark .accordion-button,
:root.theme-dark label,
:root.theme-dark .form-label,
:root.theme-dark .titlebar p,
:root.theme-dark .card-title-sys,
.theme-dark h1, 
.theme-dark h2, 
.theme-dark h3, 
.theme-dark h4, 
.theme-dark h5, 
.theme-dark h6,
.theme-dark .header-title,
.theme-dark .stat-value,
.theme-dark .form-text,
.theme-dark .accordion-button,
.theme-dark label,
.theme-dark .form-label,
.theme-dark .titlebar p,
.theme-dark .card-title-sys {
    color: #ffffff !important;
}

:root.theme-dark .card-text-sys {
    color: #ced4da !important;
}

/* 9. Sidebar & Button Specifics Clean-up */
:root.theme-dark .sidebar .list-group-item,
:root.theme-dark .sidebar .accordion-button,
:root.theme-dark .sidebar .btn {
    /* border: none !important; */
    border-color: transparent !important;
}

:root.theme-dark .sidebar .group-url-btn:hover {
    color: #f8f9fa !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

:root.theme-dark .titlebar .login-title-btn {
    border-color: transparent !important;
    background-color: transparent !important;
}

:root.theme-dark .titlebar .ms-titlebar-home,
:root.theme-dark .titlebar .ms-login-round {
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

:root.theme-dark .titlebar .ms-titlebar-home:hover,
:root.theme-dark .titlebar .ms-login-round:hover,
:root.theme-dark .titlebar .ms-titlebar-home:focus,
:root.theme-dark .titlebar .ms-login-round:focus,
:root.theme-dark .titlebar .ms-titlebar-home:focus-visible,
:root.theme-dark .titlebar .ms-login-round:focus-visible {
    color: #ffffff !important;
    background: rgba(var(--primal-rgb), 0.18) !important;
    border-color: rgba(var(--primal-rgb), 0.32) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

/* Ensure Soft Buttons (Secondary, Success, Info, Warning, Danger) Retain their identity in Dark Mode */
/* Force Black Text & Icons for these soft colored buttons */
:root.theme-dark .btn,
.theme-dark .btn {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

:root.theme-dark .btn-secondary,
:root.theme-dark .btn-success,
:root.theme-dark .btn-info,
:root.theme-dark .btn-warning,
:root.theme-dark .btn-danger,
:root.theme-dark .btn-light {
    color: var(--hbody) !important; /* Force dark slate text */
}

/* Hard Dark Buttons: Needs brightness in dark mode */
:root.theme-dark .btn-dark {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #f8f9fa !important;
}
:root.theme-dark .btn-dark:hover {
    background-color: #495057 !important;
}

:root.theme-dark .btn-outline-dark {
    border-color: #6c757d !important;
    color: #f8f9fa !important;
}
:root.theme-dark .btn-outline-dark:hover {
    background-color: #6c757d !important;
    color: #fff !important;
}

:root.theme-dark .btn-secondary .bi,
:root.theme-dark .btn-success .bi,
:root.theme-dark .btn-info .bi,
:root.theme-dark .btn-warning .bi,
:root.theme-dark .btn-danger .bi,
:root.theme-dark .btn-light .bi {
    color: var(--hbody) !important; /* Force dark slate icons */
}

/* Hover States for Dark Mode Soft Buttons */
:root.theme-dark .btn-secondary:hover { background-color: #adb5bd !important; }
:root.theme-dark .btn-success:hover   { background-color: #6ee7b7 !important; }
:root.theme-dark .btn-info:hover      { background-color: #7dd3fc !important; }
:root.theme-dark .btn-warning:hover   { background-color: #fcd34d !important; }
:root.theme-dark .btn-danger:hover    { background-color: #fca5a5 !important; }

/* Ensure icons inside these specific buttons inherit the specific dark text color defined above */
:root.theme-dark .btn-secondary .bi,
:root.theme-dark .btn-success .bi,
:root.theme-dark .btn-info .bi,
:root.theme-dark .btn-warning .bi,
:root.theme-dark .btn-danger .bi {
    color: inherit !important;
}

:root.theme-dark .theme-preview {
    border: none !important;
    box-shadow: none !important;
    outline: 2px solid #343a40; 
    outline-offset: 2px;
}

/* 10. Users App Glass Components & Cards */
:root.theme-dark .glass-profile,
:root.theme-dark .glass-card,
:root.theme-dark .glass-detail {
    background: rgba(30, 30, 30, 0.95) !important; /* Dark neutral background */
    border: 1px solid #343a40 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

:root.theme-dark .info-label,
:root.theme-dark .info-label-sm,
:root.theme-dark .form-label-custom {
    color: #adb5bd !important; /* Muted text */
}

:root.theme-dark .info-value,
:root.theme-dark .info-value-lg,
:root.theme-dark .section-header,
:root.theme-dark .page-title {
    color: #f8f9fa !important; /* Bright text */
}

:root.theme-dark .form-control-glass {
    background: rgba(18, 18, 18, 0.5) !important;
    border-color: #343a40 !important;
    color: #e9ecef !important;
}

:root.theme-dark .form-control-glass:focus {
    background: rgba(18, 18, 18, 0.8) !important;
    border-color: var(--primal) !important;
}

/* 11. Nav Tabs Visibility */
:root.theme-dark .nav-link {
    color: #ced4da !important; /* Inactive tabs: light gray */
}

:root.theme-dark .nav-link:hover {
    color: #f8f9fa !important;
}

/* Keep generic active nav links visible without flattening dedicated tab components. */
:root.theme-dark .nav-link.active {
    color: #60a5fa !important;
    background-color: #181818 !important;
    border-color: #343a40 !important;
}

/* Modern tab sets need a real active surface in dark mode, not only brighter text. */
:root.theme-dark .modern-tabs .nav-link {
    border-color: rgba(var(--primal-rgb), 0.28) !important;
    background: rgba(255, 255, 255, 0.02);
}

:root.theme-dark .modern-tabs .nav-link:hover {
    background: rgba(var(--primal-rgb), 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(var(--primal-rgb), 0.45) !important;
}

:root.theme-dark .modern-tabs .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(var(--primal-rgb), 0.92), rgba(var(--primal-rgb), 0.72)) !important;
    border-color: rgba(var(--primal-rgb), 0.95) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(var(--primal-rgb), 0.22) !important;
}

/* Ensure outline buttons have a visible thin outline */
:root.theme-dark .btn[class*="btn-outline-"] {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

:root.theme-dark #decreeTabs .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(var(--primal-rgb), 0.18) !important;
    border-color: rgba(var(--primal-rgb), 0.45) rgba(var(--primal-rgb), 0.45) transparent !important;
    box-shadow: inset 0 -2px 0 rgba(var(--primal-rgb), 0.85);
}

/* 12. Reports & Gen Report Overrides */
:root.theme-dark .glass-container,
:root.theme-dark .report-stat-card {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid #343a40 !important;
    box-shadow: none !important;
}

:root.theme-dark .filter-label, 
:root.theme-dark .stat-title {
    color: #adb5bd !important;
}

:root.theme-dark .glass-input {
    background-color: rgba(18, 18, 18, 0.5) !important;
    border-color: #343a40 !important;
    color: #e9ecef !important;
}

/* 13. Utilities & Icons Fix */
:root.theme-dark .text-dark {
    color: #ffffff !important;
}

:root.theme-dark .text-light {
    color: var(--hbody) !important;
}

:root.theme-dark .bi-three-dots,
:root.theme-dark .bi-three-dots-vertical,
:root.theme-dark .bi:not(.btn-primary .bi):not(.btn-light .bi):not(.btn-secondary .bi):not(.btn-success .bi):not(.btn-info .bi):not(.btn-warning .bi):not(.btn-danger .bi) {
    color: #e9ecef !important;
}

/* 14. Sidebar Toggle */
:root.theme-dark .titlebar .sidebar-toggle {
    color: #e9ecef !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:root.theme-dark .titlebar .sidebar-toggle:hover,
:root.theme-dark .titlebar .sidebar-toggle:focus,
:root.theme-dark .titlebar .sidebar-toggle:focus-visible {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 15. Login Screen Overrides ({% static 'users/css/login.css' %}) */
:root.theme-dark .page .left {
    background: rgba(30, 30, 30, 0.95) !important; /* Dark neutral form container */
    border: 1px solid #343a40 !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

:root.theme-dark .page .right {
    background: #121212 !important; /* Darker logo container */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    color: #e9ecef !important;
}

:root.theme-dark .page label {
    color: #ced4da !important;
}

:root.theme-dark .page input {
    background: rgba(18, 18, 18, 0.5) !important;
    border-color: #343a40 !important;
    color: #e9ecef !important;
}

:root.theme-dark .page input:focus {
    background: rgba(18, 18, 18, 0.8) !important;
    border-color: var(--primal) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* 16. Pagination Dark Theme */
:root.theme-dark .pagination .page-link {
    background-color: var(--hbody) !important;
    border-color: #343a40 !important;
    color: #ced4da !important;
}

:root.theme-dark .pagination .page-link:hover {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #f8f9fa !important;
}

:root.theme-dark .pagination .page-item.active .page-link {
    background-color: var(--primal) !important;
    border-color: var(--primal) !important;
    color: #fff !important;
}

:root.theme-dark .pagination .page-item.disabled .page-link {
    background-color: #121212 !important;
    border-color: var(--hbody) !important;
    color: #495057 !important;
}

/* 17. File Input Dark Mode Fix */
:root.theme-dark input[type="file"].form-control {
    background-color: var(--hbody) !important;
    color: #e9ecef !important;
    border-color: #343a40 !important;
}
:root.theme-dark input[type="file"]::file-selector-button {
    background-color: #343a40 !important;
    color: #e9ecef !important;
    border: none !important;
    border-right: 1px solid #495057 !important;
}

/* 19. Sidebar Tooltip Dark Mode Fix */
:root.theme-dark .tooltip-inner {
    background-color: #343a40 !important; /* Slate-700 (Dark but visible against Slate-900 body) */
    color: #f8f9fa !important; /* Slate-50 - Bright white/gray text */
    border: 1px solid #495057 !important; /* Subtle border for definition */
}

:root.theme-dark .tooltip-custom .tooltip-inner {
    background-color: #343a40 !important; /* Slate-700 (Dark but visible against Slate-900 body) */
    color: #f8f9fa !important; /* Slate-50 - Bright white/gray text */
    border: 1px solid #495057 !important; /* Subtle border for definition */
}

/* 18. Permissions Card Header Fix (Users App) */
:root.theme-dark .permissions-card-header {
    background-color: #121212 !important; /* Dark background */
    color: #e9ecef !important; /* Light text */
    border-bottom: 1px solid #343a40 !important;
}

/* 18b. Form Toggle/Checkbox Dark Mode Fix */
:root.theme-dark .form-check-input {
    background-color: #343a40 !important; /* Visible track/box when unchecked */
    border-color: #495057 !important;
}
:root.theme-dark .form-check-input:checked {
    background-color: var(--primal_dark) !important;
    border-color: var(--primal_dark) !important;
}

:root.theme-dark .permissions-card-header h5.app-title {
    color: #e9ecef !important;
}

:root.theme-dark .permissions-card-body {
    background-color: var(--hbody) !important;
    color: #e9ecef !important;
}

:root.theme-dark .model-group {
    background-color: #121212 !important;
    border: 1px solid #343a40 !important;
}

:root.theme-dark .model-header {
    background-color: var(--hbody) !important;
    border-bottom: 1px solid #343a40 !important;
    color: #e9ecef !important;
}

:root.theme-dark .model-title {
    color: #e9ecef !important;
}

:root.theme-dark .model-permissions {
    background-color: #121212 !important;
}

:root.theme-dark .permission-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

:root.theme-dark .permissions-card-footer {
    background-color: #121212 !important;
    border-top: 1px solid #343a40 !important;
}

/* 20. Bootstrap Alerts Dark Mode */
:root.theme-dark .alert-success {
    background-color: rgba(22, 101, 52, 0.25) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}
:root.theme-dark .alert-success .alert-link {
    color: #4ade80 !important;
}

:root.theme-dark .alert-warning {
    background-color: rgba(217, 119, 6, 0.2) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fcd34d !important;
}
:root.theme-dark .alert-warning .alert-link {
    color: #fbbf24 !important;
}

:root.theme-dark .alert-danger {
    background-color: rgba(127, 29, 29, 0.25) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: #fca5a5 !important;
}
:root.theme-dark .alert-danger .alert-link {
    color: #f87171 !important;
}

:root.theme-dark .alert-info {
    background-color: rgba(30, 64, 175, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    color: #93c5fd !important;
}
:root.theme-dark .alert-info .alert-link {
    color: #60a5fa !important;
}

/* 21. Table Danger Rows Dark Mode */
:root.theme-dark .table > tbody > tr.table-danger > td,
:root.theme-dark .table > tbody > tr.table-danger > th {
    --bs-table-bg-type: rgba(127, 29, 29, 0.25) !important;
    background-color: rgba(127, 29, 29, 0.25) !important;
    color: #fca5a5 !important;
}

:root.theme-dark .table-hover > tbody > tr.table-danger:hover > * {
    --bs-table-accent-bg: rgba(127, 29, 29, 0.35) !important;
    background-color: rgba(127, 29, 29, 0.35) !important;
    color: #fca5a5 !important;
}


/* 22. Profile View Dark Mode Overrides */
:root.theme-dark .glass-profile,
:root.theme-dark .glass-card {
    background: rgba(30, 30, 30, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}

:root.theme-dark .profile-img-container {
    border: 4px solid rgba(255, 255, 255, 0.15) !important;
}

:root.theme-dark .stats-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root.theme-dark .stats-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

:root.theme-dark .stats-value {
    color: #e9ecef !important;
}

:root.theme-dark .stats-label {
    color: #adb5bd !important;
}

:root.theme-dark .info-value {
    color: #f8f9fa !important;
}

:root.theme-dark .timeline-content {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root.theme-dark .timeline-title {
    color: #f8f9fa !important;
}

:root.theme-dark .timeline-dot {
    border-color: #2c2c2c !important; /* match dark bg */
    box-shadow: 0 0 0 2px #495057 !important;
}

:root.theme-dark .completeness-container {
    background: rgba(255, 255, 255, 0.05) !important;
}

:root.theme-dark .completeness-label {
    color: #e9ecef !important;
}

:root.theme-dark .activity-timeline {
    border-color: #495057 !important;
}
/* RTL */
html[dir="rtl"] :root.theme-dark .activity-timeline {
    border-color: #495057 !important;
}


:root.theme-dark .info-label {
    color: #adb5bd !important;
}

/* 23. Close Buttons Visibility */
:root.theme-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* 24. Language Picker Dark Mode Fix */
:root.theme-dark .lang-option {
    background-color: #121212 !important;
    border-color: #343a40 !important;
    color: #e9ecef !important;
}

:root.theme-dark .lang-option:hover {
    background-color: var(--hbody) !important;
    border-color: var(--primal) !important;
}

:root.theme-dark .lang-option.lang-active,
:root.theme-dark .lang-option.active,
:root.theme-dark .lang-active {
    background-color: rgba(var(--primal-rgb), 0.15) !important;
    border-color: var(--primal) !important;
    color: var(--primal) !important;
}

:root.theme-dark .lang-toggle-container {
    background-color: var(--hbody) !important;
    border-color: #343a40 !important;
}

/* 25. Micro Context Menu Dark Mode Fix */
:root.theme-dark .context-menu {
    background-color: var(--hbody) !important;
    border-color: #343a40 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

:root.theme-dark .context-menu-item {
    color: #e9ecef !important;
}

:root.theme-dark .context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

:root.theme-dark .context-menu-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

:root.theme-dark .context-menu-divider {
    border-top-color: #343a40 !important;
}

/* --- Chromium/Metallic Class Overrides (Exclusive to Dark Mode) --- */
:root.theme-dark .border-primary {
    border-color: var(--table-row-hover) !important;
    border-width: 1.5px !important;
}

:root.theme-dark .text-bg-primary {
    background-color: rgba(var(--primal-rgb), 0.15) !important;
    color: var(--primal) !important;
    border: 1px solid rgba(var(--primal-rgb), 0.35) !important;
}

:root.theme-dark .btn-outline-primary {
    background:
        linear-gradient(180deg, rgba(var(--primal-rgb), 0.18), rgba(var(--primal-rgb), 0.08)),
        color-mix(in srgb, var(--hbody) 88%, transparent) !important;
    border-color: rgba(var(--primal-rgb), 0.42) !important;
    color: color-mix(in srgb, var(--primal) 82%, var(--title)) !important;
    font-weight: 700 !important;
}

:root.theme-dark .btn-outline-primary:hover {
    background:
        linear-gradient(180deg, rgba(var(--primal-rgb), 0.26), rgba(var(--primal-rgb), 0.14)),
        color-mix(in srgb, var(--hbody) 78%, var(--primal)) !important;
    border-color: rgba(var(--primal-rgb), 0.56) !important;
    color: color-mix(in srgb, var(--primal) 88%, var(--title)) !important;
    box-shadow: 0 0 10px rgba(var(--primal-rgb), 0.3) !important;
}

/* Update active sidebar and nav items to match the metallic silver */
:root.theme-dark .sidebar,
.theme-dark .sidebar {
    --sidebar-divider-color: rgba(148, 163, 184, 0.08);
    --sidebar-hover-bg: rgba(96, 165, 250, 0.08);
    --sidebar-folder-bg: rgba(255, 255, 255, 0.02);
    --sidebar-folder-active-bg: rgba(96, 165, 250, 0.12);
    --sidebar-folder-active-edge: rgba(96, 165, 250, 0.95);
    --sidebar-root-active-bg: rgba(96, 165, 250, 0.1);
    --sidebar-active-color: #7cc0ff;
    --sidebar-active-underline: linear-gradient(90deg, transparent 0%, rgba(96, 165, 250, 0.14) 12%, rgba(96, 165, 250, 1) 50%, rgba(96, 165, 250, 0.14) 88%, transparent 100%);
    --sidebar-folder-indicator-bg: rgba(15, 23, 42, 0.92);
    --sidebar-folder-indicator-border: rgba(96, 165, 250, 0.28);
    --sidebar-guide-color: rgba(96, 165, 250, 0.14);
}

:root.theme-dark .sidebar .sidebar-root-item.active,
:root.theme-dark .sidebar .sidebar-group-item.active,
.theme-dark .sidebar .sidebar-root-item.active,
.theme-dark .sidebar .sidebar-group-item.active {
    color: #7cc0ff !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

:root.theme-dark .sidebar .accordion-button:not(.collapsed),
.theme-dark .sidebar .accordion-button:not(.collapsed) {
    color: #cfd8e3 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
        rgba(255, 255, 255, 0.008) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

:root.theme-dark .sidebar.collapsed .accordion-button.has-active-child,
.theme-dark .sidebar.collapsed .accordion-button.has-active-child {
    color: #7cc0ff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
        rgba(255, 255, 255, 0.01) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        inset 0 -1px 0 rgba(96, 165, 250, 0.05),
        inset 0 0 0 1px rgba(96, 165, 250, 0.06),
        0 0 18px rgba(96, 165, 250, 0.035) !important;
}

/* Dark Mode Overrides for the Popup */
:root.theme-dark .theme-popup {
    background: #1a1a2a;
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
}
:root.theme-dark .sidebar-toolbar {
    border-top-color: rgba(255, 255, 255, 0.04);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        linear-gradient(to top, rgba(var(--primal-rgb), 0.14), rgba(8, 12, 21, 0.96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 -10px 20px rgba(0, 0, 0, 0.32) !important;
}

:root.theme-dark .sidebar-toolbar::before {
    border-color: rgba(255, 255, 255, 0.04);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)),
        repeating-linear-gradient(
            90deg,
            rgba(var(--primal-rgb), 0.035) 0 1px,
            transparent 1px 24px
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

:root.theme-dark .sidebar-toolbar-link,
:root.theme-dark .reorder-toggle {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.22);
}

:root.theme-dark .sidebar-toolbar-link:hover,
:root.theme-dark .reorder-toggle:hover {
    color: #f4f8ff;
    background:
        radial-gradient(circle at top, rgba(var(--primal-rgb), 0.18), transparent 70%),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--primal-rgb), 0.26);
}

:root.theme-dark .sidebar-density-indicator {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.22);
}

:root.theme-dark .sidebar-density-indicator:hover {
    color: #f4f8ff;
    background:
        radial-gradient(circle at top, rgba(var(--primal-rgb), 0.18), transparent 70%),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--primal-rgb), 0.26);
}

:root.theme-dark .sidebar-density-popup {
    background: #1a1a2a;
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

:root.theme-dark .sidebar-density-popup .small {
    color: rgba(255, 255, 255, 0.7);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

:root.theme-dark .sidebar-density-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

:root.theme-dark .sidebar-density-chip.is-active,
:root.theme-dark .sidebar-density-chip:hover {
    color: var(--primal, #3b82f6);
    border-color: rgba(var(--primal-rgb), 0.32);
    background: rgba(var(--primal-rgb), 0.12);
}

:root.theme-dark .current-theme-indicator {
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 6px 14px rgba(0, 0, 0, 0.22);
}
:root.theme-dark .theme-option-circle.active {
    box-shadow: 0 0 0 2px #1e293b, 0 0 0 4px #3b82f6 !important;
}


/* Dark Mode Overrides */
:root.theme-dark .reorder-toggle:hover,
:root.theme-dark .reorder-toggle.active {
    color: var(--primal, #3b82f6);
}

:root.theme-dark .reorder-toggle.active {
    background:
        radial-gradient(circle at top, rgba(var(--primal-rgb), 0.2), transparent 70%),
        rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--primal-rgb), 0.28);
}

:root.theme-dark .drop-indicator {
    background: var(--primal, #3b82f6);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}


/* Dark Theme Specifics for Background */
:root.theme-dark .js-plotly-plot .plotly .hoverlayer .hovertext path {
    fill: #1e293b !important; /* Dark Slate Background */
    stroke: #334155 !important; /* Border Color */
}


/* Dark Theme Text Overlay */
:root.theme-dark .hoverlayer .hovertext text {
    fill: #e2e8f0 !important;
}

.bg-primary {
    background-color: var(--table-row-hover) !important;
}

.theme-dark .module-dark .module-icon-wrapper { background: rgba(255, 255, 255, 0.1); color: #fff; }

.theme-dark .chart-container-sys {
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.05);
}

.theme-dark .module-card {
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.theme-dark .module-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
}

.theme-dark .module-name {
    color: #e0e0e0;
}

.theme-dark .module-desc {
    color: #a0a0a0;
}


/* 27. User Hub - Dark Mode Overrides (Trigger & Dropdown) */
:root.theme-dark .ms-user-trigger {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root.theme-dark .ms-user-trigger:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

:root.theme-dark .ms-user-dropdown-card {
    background: rgba(20, 20, 20, 0.95) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border-color: #343a40 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
}

:root.theme-dark .ms-dropdown-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

:root.theme-dark .ms-dropdown-toolbar {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}

:root.theme-dark .ms-tool-btn {
    background: #2a2a2a !important;
    border-color: #3e3e3e !important;
    color: var(--primal) !important;
    box-shadow: none !important;
}

:root.theme-dark .ms-tool-btn:hover {
    background: var(--table-row-hover) !important;
    color: #121212 !important;
    transform: translateY(-2px) !important;
}

:root.theme-dark .ms-trigger-avatar {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 26. Dashboard Components - Hero Section Gradient Fix */
:root.theme-dark .hero-section {
    background: linear-gradient(135deg, rgba(var(--primal-rgb), 0.15) 0%, #121212 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* 28. vanillajs-datepicker */
:root.theme-dark .datepicker-picker {
    background: #1b1f24 !important;
    color: #e9ecef !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

:root.theme-dark .datepicker-title,
:root.theme-dark .datepicker-footer {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e9ecef !important;
    box-shadow: none !important;
}

:root.theme-dark .datepicker-controls .btn {
    background: #232933 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e9ecef !important;
    box-shadow: none !important;
}

:root.theme-dark .datepicker-controls .btn:hover,
:root.theme-dark .datepicker-controls .btn:focus,
:root.theme-dark .datepicker-controls .btn:active {
    background: #2d3541 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

:root.theme-dark .datepicker .dow,
:root.theme-dark .datepicker .week {
    color: #cbd5e1 !important;
}

:root.theme-dark .datepicker-cell {
    color: #e9ecef !important;
}

:root.theme-dark .datepicker-cell:not(.disabled):hover {
    background: rgba(var(--primal-rgb), 0.14) !important;
}

:root.theme-dark .datepicker-cell.focused:not(.selected) {
    background: rgba(var(--primal-rgb), 0.18) !important;
}

:root.theme-dark .datepicker-cell.selected,
:root.theme-dark .datepicker-cell.selected:hover {
    background: var(--primal_dark) !important;
    color: #0f172a !important;
}

:root.theme-dark .datepicker-cell.today:not(.selected) {
    background: rgba(32, 201, 151, 0.24) !important;
    color: #d1fae5 !important;
}

:root.theme-dark .datepicker-cell.today.focused:not(.selected) {
    background: rgba(32, 201, 151, 0.32) !important;
}

:root.theme-dark .datepicker-cell.range,
:root.theme-dark .datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
    background: rgba(255, 255, 255, 0.06) !important;
}

:root.theme-dark .datepicker-cell.disabled,
:root.theme-dark .datepicker-cell.next:not(.disabled),
:root.theme-dark .datepicker-cell.prev:not(.disabled) {
    color: rgba(233, 236, 239, 0.5) !important;
}

/* 24. Tutorial - Driver.js Popover & Controls Bar */
:root.theme-dark .driver-popover {
    background: rgba(30, 30, 30, 0.98) !important;
    border: 1px solid #343a40 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    color: #e9ecef !important;
}

:root.theme-dark .driver-popover-title {
    color: #60a5fa !important;
}

:root.theme-dark .driver-popover-description {
    color: #ced4da !important;
}

:root.theme-dark .driver-popover-progress-text,
:root.theme-dark .driver-popover-close-btn {
    color: #adb5bd !important;
}

:root.theme-dark .driver-popover-close-btn:hover {
    color: #ef4444 !important;
}

:root.theme-dark .driver-popover-next-btn {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

:root.theme-dark .driver-popover-next-btn:hover {
    background: #2563eb !important;
}

:root.theme-dark .driver-popover-prev-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e9ecef !important;
    border-color: #343a40 !important;
}

:root.theme-dark .driver-popover-prev-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

:root.theme-dark .driver-popover-arrow {
    color: rgba(30, 30, 30, 0.98) !important;
}

:root.theme-dark #tutorial-controls {
    --tut-bar-bg: rgba(30, 30, 30, 0.96);
    --tut-bar-border: #343a40;
    --tut-bar-shadow: rgba(0, 0, 0, 0.3);
    --tut-progress-color: #ced4da;
    --tut-next-bg: #3b82f6;
    --tut-next-bg-hover: #2563eb;
    --tut-next-color: #fff;
    --tut-next-shadow: rgba(59, 130, 246, 0.25);
    --tut-prev-bg: rgba(255, 255, 255, 0.06);
    --tut-prev-bg-hover: rgba(255, 255, 255, 0.12);
    --tut-prev-color: #e9ecef;
    --tut-prev-border: #343a40;
    --tut-skip-color: #f87171;
    --tut-skip-border: rgba(248, 113, 113, 0.25);
    --tut-skip-bg-hover: rgba(248, 113, 113, 0.1);
}