/*
 * themes.css — CSS variable-based theming system
 *
 * Overrides for Metrica Admin template (app.css) + Bootstrap + AG Grid.
 * Loaded AFTER app.css / bootstrap so selectors override by source order.
 * Uses !important to guarantee override of vendor CSS.
 *
 * Three modes:
 *   [data-theme="light"]  — Default light theme
 *   [data-theme="dark"]   — Dark theme (also used for dark-based custom themes)
 *   Custom themes → JS sets data-theme="dark"/"light" + data-theme-custom="name"
 *
 * AG Grid uses --ag-* variables internally. To avoid circular references,
 * we define --theme-ag-* on :root and map them to --ag-* on .ag-theme-alpine.
 */

/* ========================= LIGHT THEME (default) ========================= */
:root,
:root[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;

    --sidebar-bg: #343a40;
    --sidebar-text: #ffffff;
    --sidebar-active-bg: #495057;

    --topbar-bg: #ffffff;
    --topbar-text: #212529;
    --topbar-border: #dee2e6;

    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --card-shadow: rgba(0, 0, 0, 0.075);

    --border-color: #dee2e6;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #212529;
    --input-placeholder: #7081b9;
    --input-disabled-bg: #f1f5fa;

    --link-color: #0d6efd;
    --link-hover: #0a58ca;

    --btn-primary-bg: #0d6efd;
    --btn-primary-text: #ffffff;

    --table-stripe-bg: rgba(0, 0, 0, 0.02);
    --table-hover-bg: rgba(0, 0, 0, 0.04);
    --table-border-color: #dee2e6;

    --dropdown-bg: #ffffff;
    --dropdown-text: #212529;
    --dropdown-hover-bg: #f8f9fa;
    --dropdown-border: #dee2e6;

    --modal-bg: #ffffff;
    --modal-text: #212529;
    --modal-backdrop: rgba(0, 0, 0, 0.5);

    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;

    --nav-tab-color: #6c757d;
    --nav-tab-active-color: #0d6efd;
    --nav-tab-active-border: #0d6efd;

    --label-color: #6c757d;
    --badge-bg: #e9ecef;

    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --shadow-md: 0 .5rem 1rem rgba(0, 0, 0, .1);

    /* AG Grid — light (prefixed to avoid circular references) */
    --theme-ag-background-color: #ffffff;
    --theme-ag-foreground-color: #181d1f;
    --theme-ag-header-background-color: #f8f8f8;
    --theme-ag-header-foreground-color: #181d1f;
    --theme-ag-border-color: #dde2eb;
    --theme-ag-secondary-border-color: #dde2eb;
    --theme-ag-row-hover-color: rgba(33, 150, 243, 0.1);
    --theme-ag-odd-row-background-color: #fcfcfc;
    --theme-ag-selected-row-background-color: rgba(33, 150, 243, 0.15);
    --theme-ag-alpine-active-color: #2196f3;
    --theme-ag-input-border-color: #dde2eb;
    --theme-ag-control-panel-background-color: #f8f8f8;
    --theme-ag-subheader-background-color: #ffffff;
    --theme-ag-chip-background-color: #e9ecef;
    --theme-ag-modal-overlay-background-color: rgba(255, 255, 255, 0.66);
    --theme-ag-tooltip-background-color: #f8f8f8;
    --theme-ag-disabled-foreground-color: #babfc7;
    --theme-ag-input-disabled-background-color: #f0f0f0;
    --theme-ag-popup-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    --theme-ag-input-focus-border-color: #2196f3;
    --theme-ag-range-selection-background-color: rgba(33, 150, 243, 0.2);
}

/* ============================= DARK THEME (VS Code style) ============== */
:root[data-theme="dark"] {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --bg-tertiary: #333333;
    --text-primary: #d4d4d4;
    --text-secondary: #969696;
    --text-muted: #6a6a6a;

    --sidebar-bg: #252526;
    --sidebar-text: #cccccc;
    --sidebar-active-bg: #37373d;

    --topbar-bg: #323233;
    --topbar-text: #cccccc;
    --topbar-border: #474747;

    --card-bg: #252526;
    --card-border: #3c3c3c;
    --card-shadow: rgba(0, 0, 0, 0.36);

    --border-color: #3c3c3c;
    --input-bg: #3c3c3c;
    --input-border: #555555;
    --input-text: #cccccc;
    --input-placeholder: #6a6a6a;
    --input-disabled-bg: #2d2d2d;

    --link-color: #3794ff;
    --link-hover: #4daafc;

    --btn-primary-bg: #0078d4;
    --btn-primary-text: #ffffff;

    --table-stripe-bg: rgba(255, 255, 255, 0.03);
    --table-hover-bg: rgba(255, 255, 255, 0.06);
    --table-border-color: #3c3c3c;

    --dropdown-bg: #252526;
    --dropdown-text: #cccccc;
    --dropdown-hover-bg: #2a2d2e;
    --dropdown-border: #454545;

    --modal-bg: #252526;
    --modal-text: #cccccc;
    --modal-backdrop: rgba(0, 0, 0, 0.7);

    --scrollbar-track: #1e1e1e;
    --scrollbar-thumb: #424242;

    --nav-tab-color: #969696;
    --nav-tab-active-color: #ffffff;
    --nav-tab-active-border: #0078d4;

    --label-color: #969696;
    --badge-bg: #383838;

    --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .4);
    --shadow-md: 0 .5rem 1rem rgba(0, 0, 0, .5);

    /* AG Grid — dark (VS Code style, prefixed to avoid circular references) */
    --theme-ag-background-color: #1e1e1e;
    --theme-ag-foreground-color: #d4d4d4;
    --theme-ag-header-background-color: #252526;
    --theme-ag-header-foreground-color: #d4d4d4;
    --theme-ag-border-color: #3c3c3c;
    --theme-ag-secondary-border-color: #3c3c3c;
    --theme-ag-row-hover-color: rgba(255, 255, 255, 0.06);
    --theme-ag-odd-row-background-color: #222222;
    --theme-ag-selected-row-background-color: #264f78;
    --theme-ag-alpine-active-color: #0078d4;
    --theme-ag-input-border-color: #555555;
    --theme-ag-control-panel-background-color: #252526;
    --theme-ag-subheader-background-color: #1e1e1e;
    --theme-ag-chip-background-color: #383838;
    --theme-ag-modal-overlay-background-color: rgba(0, 0, 0, 0.66);
    --theme-ag-tooltip-background-color: #252526;
    --theme-ag-disabled-foreground-color: #585858;
    --theme-ag-input-disabled-background-color: #2d2d2d;
    --theme-ag-popup-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
    --theme-ag-input-focus-border-color: #0078d4;
    --theme-ag-range-selection-background-color: rgba(0, 120, 212, 0.25);
}

/* ============================ CUSTOM THEME ============================== */
/*
 * Custom themes do NOT use data-theme="custom".
 * JS detects palette brightness and sets data-theme="dark" or "light",
 * then injects custom CSS variables via inline style on <html>.
 * This way all [data-theme="dark"] selectors work for dark custom themes.
 * Custom theme name is tracked in data-theme-custom="..." attribute.
 */

/* =================== Apply variables to actual elements ================== */

/* ------------- Base body ------------- */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Also override Bootstrap's --bs-body-bg and --bs-body-color */
[data-theme="dark"] {
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-body-rgb: 224, 224, 224;
    --bs-light-rgb: 30, 30, 48;
    --bs-dark-rgb: 224, 224, 224;
    --bs-white-rgb: 30, 30, 48;
}

/* ------------- Topbar (Metrica template) ------------- */
.topbar {
    background-color: var(--topbar-bg) !important;
    border-bottom-color: var(--topbar-border) !important;
}

[data-layout="horizontal"] .topbar {
    background-color: var(--topbar-bg) !important;
    border-bottom-color: var(--topbar-border) !important;
}

[data-layout="horizontal"] .topbar .brand {
    background-color: var(--topbar-bg) !important;
}

.navbar-custom {
    background: var(--topbar-bg) !important;
    border-bottom-color: var(--topbar-border) !important;
}

.navbar-custom .nav-link {
    color: var(--topbar-text) !important;
}

.navbar-custom .nav-link.nav-icon {
    background-color: var(--bg-tertiary) !important;
}

.navbar-custom .nav-link.nav-icon i {
    color: var(--topbar-text) !important;
}

.topbar .nav-link,
.topbar .dropdown-toggle,
.topbar .user-name span,
.topbar .user-name small {
    color: var(--topbar-text) !important;
}

.navbar-custom-menu .navigation-menu .nav-item .nav-link {
    color: var(--topbar-text) !important;
}

.navbar-custom-menu .dropdown .dropdown-toggle:after {
    color: var(--topbar-text) !important;
}

.navbar-custom-menu .dropdown .dropdown-menu .dropdown-item {
    color: var(--dropdown-text) !important;
}

.navbar-custom-menu .dropdown .dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Horizontal search */
[data-layout="horizontal"] .stock-search input {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

[data-layout="horizontal"] .stock-search .search-icon i {
    color: var(--text-secondary) !important;
}

/* ------------- National Data bar (sub-header) ------------- */
.national-data {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ------------- Page wrapper & content ------------- */
.page-wrapper {
    background-color: var(--bg-primary) !important;
}

.page-wrapper .page-content-tab,
.page-content-tab {
    background-color: var(--bg-primary) !important;
}

.widget-content {
    color: var(--text-primary);
}

/* ------------- Page title box ------------- */
.page-title-box h5,
.page-title-box .page-title {
    color: var(--text-primary) !important;
}

.page-title-box .breadcrumb a {
    color: var(--link-color);
}

/* ------------- Sidebar ------------- */
.left-sidenav,
.left-sidebar {
    background-color: var(--sidebar-bg) !important;
}

.left-sidenav .nav-link,
.left-sidebar .menu-body .nav-item .nav-link {
    color: var(--sidebar-text) !important;
}

.left-sidenav .nav-link.active,
.left-sidebar .menu-body .nav-item .nav-link.active,
.left-sidebar .menu-body .nav-item .nav-link.active i {
    background-color: var(--sidebar-active-bg) !important;
}

/* ------------- Cards ------------- */
.card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 0.125rem 0.25rem var(--card-shadow) !important;
    color: var(--text-primary) !important;
}

.card-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--card-border) !important;
    color: var(--text-primary) !important;
}

.card-footer {
    background-color: var(--card-bg) !important;
    border-top-color: var(--card-border) !important;
    color: var(--text-primary) !important;
}

.card-body {
    color: var(--text-primary) !important;
}

.card-title {
    color: var(--text-primary) !important;
}

/* ------------- Dropdowns ------------- */
.dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
    color: var(--dropdown-text) !important;
    box-shadow: var(--shadow-md) !important;
}

.dropdown-item {
    color: var(--dropdown-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-hover-bg) !important;
    color: var(--dropdown-text) !important;
}

.dropdown-divider {
    border-top-color: var(--border-color) !important;
}

/* ------------- Forms (MOST CRITICAL — must override Bootstrap + Metrica) ------------- */
.form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.form-control:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--link-color) !important;
    color: var(--input-text) !important;
}

.form-control::placeholder {
    color: var(--input-placeholder) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--input-disabled-bg) !important;
    color: var(--text-muted) !important;
}

.form-select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.form-select:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--link-color) !important;
}

.form-select:disabled {
    background-color: var(--input-disabled-bg) !important;
}

/* Dark mode: invert the form-select dropdown arrow SVG to be visible */
[data-theme="dark"] .form-select {
    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='%23a0a0b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

textarea.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

.form-label,
label {
    color: var(--label-color) !important;
}

.form-floating > label {
    color: var(--text-muted) !important;
}

.form-check-label {
    color: var(--text-primary) !important;
}

.form-check-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

.form-check-input:checked {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
}

.input-group-text {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.form-text {
    color: var(--text-muted) !important;
}

/* Input type=color */
.form-control-color {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

/* File selectors */
.form-control::file-selector-button {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* ------------- All generic <input>, <select>, <textarea> outside Bootstrap classes ------------- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.btn),
[data-theme="dark"] select:not(.form-select):not(.btn),
[data-theme="dark"] textarea:not(.form-control) {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

/* ------------- Tables ------------- */
.table {
    color: var(--text-primary) !important;
    --bs-table-bg: var(--bg-primary);
    --bs-table-striped-bg: var(--table-stripe-bg);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-border-color: var(--table-border-color);
}

.table > :not(caption) > * > * {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-bottom-color: var(--table-border-color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe-bg) !important;
    color: var(--text-primary) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg) !important;
    color: var(--text-primary) !important;
}

.table thead th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ------------- Projects balance table (Blade) ------------- */
.project-row-odd {
    background-color: var(--bg-secondary) !important;
}

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

.project-group-cell {
    background-color: inherit !important;
}

.channel-row-alt {
    background-color: rgba(128, 128, 128, 0.06) !important;
}

[data-theme="dark"] .channel-row-alt {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.table-bordered,
.table-bordered > :not(caption) > * > * {
    border-color: var(--border-color) !important;
}

/* ------------- Nav Tabs ------------- */
.nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--nav-tab-color) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--border-color) var(--border-color) transparent !important;
    color: var(--nav-tab-active-color) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-item.active .nav-link,
.nav-tabs .nav-item .nav-link.active {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) var(--border-color) var(--card-bg) !important;
    color: var(--nav-tab-active-color) !important;
}

.nav.nav-tabs .nav-item .nav-link {
    color: var(--nav-tab-color) !important;
    cursor: pointer;
}

.nav.nav-tabs .nav-item .nav-link.active,
.nav.nav-tabs .nav-item.active .nav-link {
    color: var(--nav-tab-active-color) !important;
    border-bottom-color: var(--nav-tab-active-border) !important;
}

.nav-pills .nav-link {
    color: var(--text-primary) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* ------------- Modals ------------- */
.modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--modal-text) !important;
    border-color: var(--border-color) !important;
}

/* Must match app.min.css specificity: .modal-content .modal-header */
.modal-content .modal-header,
.modal-header {
    border-bottom-color: var(--border-color) !important;
    background-color: var(--card-bg) !important;
    color: var(--modal-text) !important;
}

.modal-content .modal-header .modal-title,
.modal-title {
    color: var(--text-primary) !important;
}

.modal-content .modal-body,
.modal-body {
    background-color: var(--modal-bg) !important;
    color: var(--modal-text) !important;
}

.modal-content .modal-body p,
.modal-content h4 {
    color: var(--text-secondary) !important;
}

.modal-content .modal-body .form-title {
    color: var(--label-color) !important;
}

.modal-content .modal-footer,
.modal-footer {
    border-top-color: var(--border-color) !important;
    background-color: var(--modal-bg) !important;
}

/* Close button in dark mode */
[data-theme="dark"] .btn-close,
[data-theme="dark"] .modal-header .close,
[data-theme="dark"] .modal-header .close i {
    color: var(--text-secondary) !important;
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* modal-mask overlay used by Vue modals */
[data-theme="dark"] .modal-mask {
    background-color: var(--modal-backdrop) !important;
}

/* ------------- Links ------------- */
a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover);
}

/* ------------- Badges ------------- */
.badge.bg-light {
    background-color: var(--badge-bg) !important;
    color: var(--text-primary) !important;
}

/* ------------- List Group ------------- */
.list-group-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.list-group-item:hover {
    background-color: var(--dropdown-hover-bg) !important;
}

/* ------------- Pagination ------------- */
.page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--link-color) !important;
}

.page-link:hover {
    background-color: var(--dropdown-hover-bg) !important;
}

.page-item.active .page-link {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

.page-item.disabled .page-link {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

/* ------------- Breadcrumb ------------- */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

/* ------------- Accordion ------------- */
.accordion-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.accordion-button {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ------------- Select2 ------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--input-text) !important;
}

.select2-dropdown {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
    color: var(--dropdown-text) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--dropdown-hover-bg) !important;
    color: var(--dropdown-text) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.select2-container--default .select2-results__option {
    color: var(--dropdown-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--input-placeholder) !important;
}

/* ------------- Multiselect (vue-multiselect 3.x) — full dark support ------- */
/* Root element */
[data-theme="dark"] .multiselect,
[data-theme="dark"] .multiselect.multiselect {
    color: var(--input-text) !important;
    background: transparent !important;
}

/* Tags container (the outer box) — doubled selector for max specificity */
[data-theme="dark"] .multiselect .multiselect__tags,
[data-theme="dark"] .multiselect__tags.multiselect__tags {
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

/* Single-value display */
[data-theme="dark"] .multiselect .multiselect__single,
[data-theme="dark"] .multiselect__single.multiselect__single {
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

/* Search input inside multiselect */
[data-theme="dark"] .multiselect .multiselect__input,
[data-theme="dark"] .multiselect__input.multiselect__input {
    background: var(--input-bg) !important;
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: none !important;
}

[data-theme="dark"] .multiselect__input::placeholder {
    color: var(--input-placeholder) !important;
}

[data-theme="dark"] .multiselect__placeholder {
    color: var(--input-placeholder) !important;
}

/* Dropdown arrow */
[data-theme="dark"] .multiselect__select::before {
    border-color: var(--text-secondary) transparent transparent !important;
}

/* Dropdown list wrapper */
[data-theme="dark"] .multiselect__content-wrapper,
[data-theme="dark"] .multiselect__content-wrapper.multiselect__content-wrapper {
    background: var(--dropdown-bg) !important;
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Individual option */
[data-theme="dark"] .multiselect__element .multiselect__option {
    color: var(--dropdown-text) !important;
    background: var(--dropdown-bg) !important;
}

/* Hovered option */
[data-theme="dark"] .multiselect__option--highlight {
    background: var(--dropdown-hover-bg) !important;
    color: var(--dropdown-text) !important;
}

[data-theme="dark"] .multiselect__option--highlight::after {
    background: var(--dropdown-hover-bg) !important;
    color: var(--dropdown-text) !important;
}

/* Selected option in list */
[data-theme="dark"] .multiselect__option--selected {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .multiselect__option--selected::after {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

/* Selected + highlighted (deselect) */
[data-theme="dark"] .multiselect__option--selected.multiselect__option--highlight {
    background: #c0392b !important;
    color: #fff !important;
}

[data-theme="dark"] .multiselect__option--selected.multiselect__option--highlight::after {
    background: #c0392b !important;
    color: #fff !important;
}

/* Tag pills (in multi-select mode) */
[data-theme="dark"] .multiselect__tag {
    background: var(--btn-primary-bg) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .multiselect__tag-icon::after {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .multiselect__tag-icon:hover {
    background: #c0392b !important;
}

/* Spinner */
[data-theme="dark"] .multiselect__spinner {
    background: var(--input-bg) !important;
}

[data-theme="dark"] .multiselect__spinner::before,
[data-theme="dark"] .multiselect__spinner::after {
    border-color: var(--link-color) transparent transparent !important;
}

/* Disabled state */
[data-theme="dark"] .multiselect--disabled {
    background: var(--input-disabled-bg) !important;
    opacity: 0.7;
}

[data-theme="dark"] .multiselect--disabled .multiselect__tags {
    background: var(--input-disabled-bg) !important;
}

/* Group labels */
.multiselect__option--group {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* "No results" / "No options" text */
[data-theme="dark"] .multiselect__option--disabled {
    background: var(--dropdown-bg) !important;
    color: var(--text-muted) !important;
}

/* Active state (open) border highlight */
[data-theme="dark"] .multiselect--active .multiselect__tags {
    border-color: var(--link-color) !important;
}

/* ------------- Datepicker / Calendar popups ------------- */
[data-theme="dark"] .flatpickr-calendar,
[data-theme="dark"] .datepicker,
[data-theme="dark"] .datepicker-dropdown,
[data-theme="dark"] .dp__menu,
[data-theme="dark"] .dp__calendar,
[data-theme="dark"] .vdp-datepicker__calendar {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day,
[data-theme="dark"] .datepicker td,
[data-theme="dark"] .dp__cell_inner,
[data-theme="dark"] .vdp-datepicker__calendar .cell {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .datepicker td:hover,
[data-theme="dark"] .dp__cell_inner:hover,
[data-theme="dark"] .vdp-datepicker__calendar .cell:hover {
    background-color: var(--dropdown-hover-bg) !important;
}

[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-month,
[data-theme="dark"] .datepicker-switch,
[data-theme="dark"] .dp__month_year_wrap {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-weekdays,
[data-theme="dark"] .flatpickr-weekday,
[data-theme="dark"] .datepicker .dow {
    color: var(--text-secondary) !important;
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month,
[data-theme="dark"] .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-next-month svg {
    fill: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* Flatpickr input (inline) */
[data-theme="dark"] .flatpickr-input {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* Flatpickr current day */
[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--link-color) !important;
}

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* Flatpickr time */
[data-theme="dark"] .flatpickr-time,
[data-theme="dark"] .flatpickr-time input {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .numInputWrapper:hover {
    background: var(--dropdown-hover-bg) !important;
}

/* Vue DatePicker (@vuepic/vue-datepicker specific) */
[data-theme="dark"] .dp__theme_light {
    --dp-background-color: var(--card-bg);
    --dp-text-color: var(--text-primary);
    --dp-hover-color: var(--dropdown-hover-bg);
    --dp-hover-text-color: var(--text-primary);
    --dp-primary-color: var(--btn-primary-bg);
    --dp-primary-text-color: var(--btn-primary-text);
    --dp-secondary-color: var(--text-muted);
    --dp-border-color: var(--border-color);
    --dp-menu-border-color: var(--border-color);
    --dp-input-background-color: var(--input-bg);
    --dp-disabled-color: var(--text-muted);
    --dp-icon-color: var(--text-secondary);
    --dp-danger-color: #ef4d56;
}

/* ------------- Scrollbar ------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

/* ------------- Typography overrides ------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

.text-body {
    color: var(--text-primary) !important;
}

/* ------------- Border utility overrides ------------- */
.border {
    border-color: var(--border-color) !important;
}

.border-bottom {
    border-bottom-color: var(--border-color) !important;
}

.border-top {
    border-top-color: var(--border-color) !important;
}

hr {
    border-color: var(--border-color);
    opacity: 0.3;
}

/* ------------- bg-* utility overrides for dark mode ------------- */
/* Override Bootstrap 5 RGB variables so rgba(var(--bs-*-rgb), ...) works in dark */
[data-theme="dark"] {
    --bs-light-rgb: 37, 37, 38;         /* maps to --bg-secondary #252526 */
    --bs-dark-rgb: 204, 204, 204;
    --bs-white-rgb: 37, 37, 38;
    --bs-body-bg-rgb: 30, 30, 30;       /* maps to --bg-primary #1e1e1e */
    --bs-body-color-rgb: 212, 212, 212;  /* maps to --text-primary #d4d4d4 */
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
}

[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

/* Preview content in modals (e.g. client report preview) */
.preview-content.bg-light,
.modal-body .bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Generic .border in themed context */
.border {
    border-color: var(--border-color) !important;
}

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

/* ------------- Footerbar ------------- */
.footerbar {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.footerbar a {
    color: var(--link-color) !important;
}

/* ------------- Index / CRM tables ------------- */
.index-table th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.index-table td {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ------------- Alerts ------------- */
[data-theme="dark"] .alert-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.1) !important;
    color: #6edff6 !important;
    border-color: rgba(13, 202, 240, 0.25) !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #ffda6a !important;
    border-color: rgba(255, 193, 7, 0.25) !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #ea868f !important;
    border-color: rgba(220, 53, 69, 0.25) !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    color: #75b798 !important;
    border-color: rgba(25, 135, 84, 0.25) !important;
}

/* ------------- Toast overrides ------------- */
.Vue-Toastification__toast {
    color: var(--text-primary);
}

/* ------------- Offcanvas ------------- */
.offcanvas {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* ------------- Popover ------------- */
.popover {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.popover-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.popover-body {
    color: var(--text-primary) !important;
}

/* ------------- Tooltip ------------- */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ------------- App search (Metrica top bar search) ------------- */
.app-search form .form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* ==========================================================================
   AG GRID — Map our --theme-ag-* variables to AG Grid's --ag-* variables
   Uses doubled class selector for higher specificity than ag-theme-alpine.css
   which loads later via webpack bundle.
   ========================================================================== */
.ag-theme-alpine.ag-theme-alpine,
.ag-theme-alpine-dark.ag-theme-alpine-dark {
    --ag-background-color: var(--theme-ag-background-color) !important;
    --ag-foreground-color: var(--theme-ag-foreground-color) !important;
    --ag-header-background-color: var(--theme-ag-header-background-color) !important;
    --ag-header-foreground-color: var(--theme-ag-header-foreground-color) !important;
    --ag-border-color: var(--theme-ag-border-color) !important;
    --ag-secondary-border-color: var(--theme-ag-secondary-border-color) !important;
    --ag-row-hover-color: var(--theme-ag-row-hover-color) !important;
    --ag-odd-row-background-color: var(--theme-ag-odd-row-background-color) !important;
    --ag-selected-row-background-color: var(--theme-ag-selected-row-background-color) !important;
    --ag-alpine-active-color: var(--theme-ag-alpine-active-color) !important;
    --ag-input-border-color: var(--theme-ag-input-border-color) !important;
    --ag-control-panel-background-color: var(--theme-ag-control-panel-background-color) !important;
    --ag-subheader-background-color: var(--theme-ag-subheader-background-color) !important;
    --ag-chip-background-color: var(--theme-ag-chip-background-color) !important;
    --ag-modal-overlay-background-color: var(--theme-ag-modal-overlay-background-color) !important;
    --ag-tooltip-background-color: var(--theme-ag-tooltip-background-color) !important;
    --ag-disabled-foreground-color: var(--theme-ag-disabled-foreground-color) !important;
    --ag-input-disabled-background-color: var(--theme-ag-input-disabled-background-color) !important;
    --ag-popup-shadow: var(--theme-ag-popup-shadow) !important;
    --ag-input-focus-border-color: var(--theme-ag-input-focus-border-color) !important;
    --ag-range-selection-background-color: var(--theme-ag-range-selection-background-color) !important;
    --ag-input-focus-box-shadow: 0 0 2px 0.1rem var(--theme-ag-input-focus-border-color) !important;
    --ag-checkbox-unchecked-color: var(--text-secondary) !important;
    --ag-checkbox-checked-color: var(--theme-ag-alpine-active-color) !important;
    --ag-checkbox-background-color: var(--theme-ag-background-color) !important;
    --ag-range-selection-border-color: var(--theme-ag-alpine-active-color) !important;
    --ag-secondary-foreground-color: var(--theme-ag-foreground-color) !important;
    --ag-invalid-color: #e02525 !important;
}

/* Additional AG Grid element overrides for guaranteed dark mode */
[data-theme="dark"] .ag-theme-alpine .ag-root-wrapper {
    background-color: var(--theme-ag-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-header {
    background-color: var(--theme-ag-header-background-color) !important;
    color: var(--theme-ag-header-foreground-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-header-cell {
    color: var(--theme-ag-header-foreground-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-row {
    background-color: var(--theme-ag-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-row-odd {
    background-color: var(--theme-ag-odd-row-background-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-row:hover {
    background-color: var(--theme-ag-row-hover-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-cell {
    color: var(--theme-ag-foreground-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-ltr .ag-cell {
    border-color: var(--theme-ag-border-color) !important;
}

/* AG Grid filter/menu popups */
[data-theme="dark"] .ag-theme-alpine .ag-popup,
[data-theme="dark"] .ag-popup {
    color: var(--theme-ag-foreground-color) !important;
}

[data-theme="dark"] .ag-theme-alpine .ag-menu,
[data-theme="dark"] .ag-menu {
    background-color: var(--theme-ag-control-panel-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid filter panel inputs */
[data-theme="dark"] .ag-theme-alpine .ag-filter-body-wrapper input,
[data-theme="dark"] .ag-theme-alpine .ag-filter-body-wrapper select {
    background-color: var(--theme-ag-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
    border-color: var(--theme-ag-input-border-color) !important;
}

/* AG Grid pagination */
[data-theme="dark"] .ag-theme-alpine .ag-paging-panel {
    background-color: var(--theme-ag-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
    border-top-color: var(--theme-ag-border-color) !important;
}

/* AG Grid side bar */
[data-theme="dark"] .ag-theme-alpine .ag-side-bar {
    background-color: var(--theme-ag-control-panel-background-color) !important;
}

/* AG Grid status bar */
[data-theme="dark"] .ag-theme-alpine .ag-status-bar {
    background-color: var(--theme-ag-background-color) !important;
    border-top-color: var(--theme-ag-border-color) !important;
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid overlay */
[data-theme="dark"] .ag-theme-alpine .ag-overlay-no-rows-wrapper {
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid column header sort icons and filter icons */
[data-theme="dark"] .ag-theme-alpine .ag-icon {
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid loading overlay */
[data-theme="dark"] .ag-theme-alpine .ag-overlay-loading-wrapper {
    background-color: var(--theme-ag-modal-overlay-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid group rows */
[data-theme="dark"] .ag-theme-alpine .ag-group-value {
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid tool panel */
[data-theme="dark"] .ag-theme-alpine .ag-tool-panel-wrapper {
    background-color: var(--theme-ag-control-panel-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid column drop zones */
[data-theme="dark"] .ag-theme-alpine .ag-column-drop {
    background-color: var(--theme-ag-control-panel-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
}

/* AG Grid select/input elements */
[data-theme="dark"] .ag-theme-alpine input[class^="ag-"],
[data-theme="dark"] .ag-theme-alpine select[class^="ag-"] {
    background-color: var(--theme-ag-background-color) !important;
    color: var(--theme-ag-foreground-color) !important;
    border-color: var(--theme-ag-input-border-color) !important;
}