/* ============================================================
   Dark Mode — Soft & Warm Override
   Loaded last to override core.css cold blue-gray values
   with a warm neutral palette (VS Code / Discord style).

   Warm palette:
     Surface 0 (body):      #1a1a1f   rgb(26, 26, 31)
     Surface 1 (paper/cards):#242428   rgb(36, 36, 40)
     Surface 2 (secondary):  #2c2c31   rgb(44, 44, 49)
     Surface 3 (tertiary):   #333338   rgb(51, 51, 56)
     Border:                 #3e3e45   rgb(62, 62, 69)
     Text primary:           #dcdce0   rgb(220, 220, 224)
     Text body:              #ababb2   rgb(171, 171, 178)
     Text secondary:         #97979f   rgb(151, 151, 159)
   ============================================================ */

/* --- Surface elevation tokens --- */
[data-bs-theme="dark"] {
    --bs-surface-0: #1a1a1f;
    --bs-surface-1: #242428;
    --bs-surface-2: #2c2c31;
    --bs-surface-3: #333338;
}

/* --- Bootstrap + template core variable overrides --- */
[data-bs-theme="dark"] {

    /* ── Color scheme ─────────────────────────────────── */
    color-scheme: dark;

    /* ── Body / Page ──────────────────────────────────── */
    --bs-body-bg:           #1a1a1f;
    --bs-body-bg-rgb:       26, 26, 31;
    --bs-body-color:        #ababb2;
    --bs-body-color-rgb:    171, 171, 178;

    /* ── Headings & emphasis ──────────────────────────── */
    --bs-heading-color:     #dcdce0;
    --bs-emphasis-color:    #e5e5ea;
    --bs-emphasis-color-rgb: 229, 229, 234;

    /* ── Base color (template token — used in color-mix) ── */
    --bs-base-color:        #dcdce0;
    --bs-base-color-rgb:    220, 220, 224;

    /* ── Paper background (CRITICAL — cards/dropdowns/accordions/modals) ── */
    --bs-paper-bg:          #242428;
    --bs-paper-bg-rgb:      36, 36, 40;

    /* ── Secondary / Tertiary backgrounds ─────────────── */
    --bs-secondary-bg:      #2c2c31;
    --bs-secondary-bg-rgb:  44, 44, 49;
    --bs-secondary-color:   #97979f;
    --bs-secondary-color-rgb: 151, 151, 159;
    --bs-tertiary-bg:       #333338;
    --bs-tertiary-bg-rgb:   51, 51, 56;
    --bs-tertiary-color:    rgba(171, 171, 178, 0.5);
    --bs-tertiary-color-rgb: 171, 171, 178;

    /* ── Borders ──────────────────────────────────────── */
    --bs-border-color:              #3e3e45;
    --bs-border-color-translucent:  rgba(255, 255, 255, 0.08);

    /* ── Cards ────────────────────────────────────────── */
    --bs-card-bg:           #242428;
    --bs-card-border-color: #3e3e45;

    /* ── Highlight ────────────────────────────────────── */
    --bs-highlight-color:   #ababb2;
    --bs-highlight-bg:      #4a3a1f;

    /* ── Links (keep purple accent) ───────────────────── */
    --bs-link-color:        #7367f0;
    --bs-link-hover-color:  #897dec;
    --bs-link-color-rgb:    115, 103, 240;
    --bs-link-hover-color-rgb: 137, 125, 236;
    --bs-custom-link-color: var(--bs-primary);

    /* ── Code ─────────────────────────────────────────── */
    --bs-code-color: #c0a4ff;

    /* ── Theme colors (keep hues, override dark-specific) ── */
    --bs-primary:       #7367f0;
    --bs-secondary:     #808390;
    --bs-success:       #28c76f;
    --bs-info:          #00bad1;
    --bs-warning:       #ff9f43;
    --bs-danger:        #ff4c51;
    --bs-light:         #3e3e45;
    --bs-dark:          #6b6c80;
    --bs-gray:          #8a8a94;
    --bs-primary-rgb:   115, 103, 240;
    --bs-secondary-rgb: 128, 131, 144;
    --bs-success-rgb:   40, 199, 111;
    --bs-info-rgb:      0, 186, 209;
    --bs-warning-rgb:   255, 159, 67;
    --bs-danger-rgb:    255, 76, 81;
    --bs-light-rgb:     62, 62, 69;
    --bs-dark-rgb:      107, 108, 128;
    --bs-gray-rgb:      138, 138, 148;

    /* ── Contrast tokens ──────────────────────────────── */
    --bs-primary-contrast:   var(--bs-white);
    --bs-secondary-contrast: var(--bs-white);
    --bs-success-contrast:   var(--bs-white);
    --bs-info-contrast:      var(--bs-white);
    --bs-warning-contrast:   var(--bs-white);
    --bs-danger-contrast:    var(--bs-white);
    --bs-light-contrast:     var(--bs-white);
    --bs-dark-contrast:      var(--bs-white);
    --bs-gray-contrast:      var(--bs-white);

    /* ── Text emphasis (warm-shifted) ─────────────────── */
    --bs-primary-text-emphasis:   #aba4f6;
    --bs-secondary-text-emphasis: #b3b5bc;
    --bs-success-text-emphasis:   #7edda9;
    --bs-info-text-emphasis:      #66d6e3;
    --bs-warning-text-emphasis:   #ffc58e;
    --bs-danger-text-emphasis:    #ff9497;
    --bs-light-text-emphasis:     #ababb2;
    --bs-dark-text-emphasis:      #dcdce0;

    /* ── Subtle backgrounds (warm neutral base) ───────── */
    --bs-primary-bg-subtle:   #2a2840;
    --bs-secondary-bg-subtle: #2c2c34;
    --bs-success-bg-subtle:   #1f3030;
    --bs-info-bg-subtle:      #1a2e38;
    --bs-warning-bg-subtle:   #352c24;
    --bs-danger-bg-subtle:    #352228;
    --bs-light-bg-subtle:     #28282e;
    --bs-dark-bg-subtle:      #2e2e36;

    /* ── Subtle borders (warm neutral base) ───────────── */
    --bs-primary-border-subtle:   #3a3560;
    --bs-secondary-border-subtle: #3e3e48;
    --bs-success-border-subtle:   #1f4838;
    --bs-info-border-subtle:      #144858;
    --bs-warning-border-subtle:   #5a4030;
    --bs-danger-border-subtle:    #5a2830;
    --bs-light-border-subtle:     #333338;
    --bs-dark-border-subtle:      #3a3a44;

    /* ── Gray scale (warm neutral) ────────────────────── */
    --bs-gray-25:  #2a2a30;
    --bs-gray-50:  #313137;
    --bs-gray-75:  #38383e;
    --bs-gray-100: #47474f;
    --bs-gray-200: #3e3e45;
    --bs-gray-300: #5a5a63;
    --bs-gray-400: #6e6e78;
    --bs-gray-500: #8a8a94;
    --bs-gray-600: #97979f;
    --bs-gray-700: #ababb2;
    --bs-gray-800: #c4c4ca;
    --bs-gray-900: #dcdce0;

    /* ── Shadows (warm-tinted) ────────────────────────── */
    --bs-box-shadow:        0 0.1875rem 0.75rem 0 rgba(13, 13, 16, 0.22);
    --bs-box-shadow-xs:     0 0.0625rem 0.375rem 0 rgba(13, 13, 16, 0.18);
    --bs-box-shadow-sm:     0 0.125rem 0.5rem 0 rgba(13, 13, 16, 0.20);
    --bs-box-shadow-lg:     0 0.25rem 1.125rem 0 rgba(13, 13, 16, 0.28);
    --bs-box-shadow-xl:     0 0.3125rem 1.875rem 0 rgba(13, 13, 16, 0.30);
    --bs-floating-component-shadow: 0 0.31rem 1.25rem 0 rgba(36, 36, 40, 0.4);

    /* ── Modal backdrop ───────────────────────────────── */
    --bs-backdrop-bg:       #111114;
    --bs-backdrop-opacity:  0.6;

    /* ── Navbar (template tokens) ─────────────────────── */
    --bs-navbar-bg:             var(--bs-paper-bg);
    --bs-navbar-box-shadow:     0 0 10px var(--bs-border-color);
    --bs-navbar-border-width:   1px;
    --bs-navbar-border-color:   var(--bs-paper-bg);
    --bs-navbar-search-shadow:  0 0.25rem 0.5rem -0.25rem rgba(13, 13, 16, 0.42);

    /* ── Nav tokens ───────────────────────────────────── */
    --bs-nav-box-shadow:    var(--bs-box-shadow);
    --bs-nav-border-color:  var(--bs-paper-bg);

    /* ── Menu (template tokens — CRITICAL) ────────────── */
    --bs-menu-bg:               #242428;
    --bs-menu-bg-rgb:           36, 36, 40;
    --bs-menu-color:            #dcdce0;
    --bs-menu-color-rgb:        220, 220, 224;
    --bs-menu-hover-bg:         color-mix(in sRGB, var(--bs-base-color) 6%, var(--bs-menu-bg));
    --bs-menu-hover-color:      #dcdce0;
    --bs-menu-sub-active-bg:    color-mix(in sRGB, var(--bs-base-color) 8%, var(--bs-menu-bg));
    --bs-menu-sub-active-color: #dcdce0;
    --bs-menu-active-color:     var(--bs-primary-contrast);
    --bs-menu-active-bg:        var(--bs-primary);
    --bs-menu-horizontal-active-bg: var(--bs-primary-bg-subtle);
    --bs-menu-box-shadow:       0 0.125rem 0.5rem 0 rgba(13, 13, 16, 0.22);
    --bs-menu-divider-color:    transparent;
    --bs-menu-header-color:     var(--bs-heading-color);

    /* ── Tables ───────────────────────────────────────── */
    --bs-table-bg:              #242428;
    --bs-table-border-color:    #3e3e45;
    --bs-table-striped-bg:      rgba(var(--bs-base-color-rgb), 0.06);
    --bs-table-hover-bg:        #2c2c31;
    --bs-table-active-bg:       #333338;

    /* ── Form controls ────────────────────────────────── */
    --bs-form-control-bg:           #242428;
    --bs-form-control-border:       #3e3e45;
    --bs-form-control-disabled-bg:  #2c2c31;
    --bs-form-valid-color:          #28c76f;
    --bs-form-valid-border-color:   #28c76f;
    --bs-form-invalid-color:        #ff4c51;
    --bs-form-invalid-border-color: #ff4c51;

    /* ── Inputs / selects ─────────────────────────────── */
    --bs-input-bg:           #242428;
    --bs-input-border-color: #3e3e45;
    --bs-input-color:        #ababb2;

    /* ── Tooltips ─────────────────────────────────────── */
    --bs-tooltip-bg:        #333338;
    --bs-tooltip-color:     #dcdce0;

    /* ── Popovers ─────────────────────────────────────── */
    --bs-popover-bg:        #242428;
    --bs-popover-border-color: #3e3e45;

    /* ── List group ───────────────────────────────────── */
    --bs-list-group-bg:             #242428;
    --bs-list-group-border-color:   #3e3e45;
    --bs-list-group-hover-bg:       #2c2c31;
    --bs-list-group-active-bg:      var(--bs-primary);
    --bs-list-group-action-hover-bg:#2c2c31;

    /* ── Accordion ────────────────────────────────────── */
    --bs-accordion-bg:              var(--bs-paper-bg);
    --bs-accordion-border-color:    var(--bs-paper-bg);
    --bs-accordion-active-bg:       var(--bs-paper-bg);

    /* ── Offcanvas ────────────────────────────────────── */
    --bs-offcanvas-bg:          var(--bs-paper-bg);
    --bs-offcanvas-border-color:#3e3e45;

    /* ── Dropdown ─────────────────────────────────────── */
    --bs-dropdown-bg:           var(--bs-paper-bg);
    --bs-dropdown-border-color: #3e3e45;
    --bs-dropdown-link-hover-bg:#333338;
    --bs-dropdown-divider-bg:   #3e3e45;

    /* ── Toast ────────────────────────────────────────── */
    --bs-toast-bg:              rgba(var(--bs-paper-bg-rgb), 0.85);
    --bs-toast-border-color:    #3e3e45;
    --bs-toast-header-bg:       var(--bs-paper-bg);
    --bs-toast-header-border-color: color-mix(in sRGB, var(--bs-border-color) 40%, var(--bs-paper-bg));

    /* ── Modal ────────────────────────────────────────── */
    --bs-modal-bg:              var(--bs-paper-bg);

    /* ── Close button filter (white icon) ─────────────── */
    --bs-btn-close-color:   #dcdce0;

    /* ── Alert backgrounds (dark variants) ────────────── */
    --bs-alert-bg:          #2c2c31;
    --bs-alert-border-color:#3e3e45;

    /* ── Progress ─────────────────────────────────────── */
    --bs-progress-bg: rgba(var(--bs-base-color-rgb), 0.08);

    /* ── Breadcrumb ───────────────────────────────────── */
    --bs-breadcrumb-divider-color: #6e6e78;

    /* ── Pagination ───────────────────────────────────── */
    --bs-pagination-bg:          #242428;
    --bs-pagination-border-color:#3e3e45;
    --bs-pagination-hover-bg:    #2c2c31;
    --bs-pagination-disabled-bg: #1a1a1f;

    /* ── Nav / Tabs ───────────────────────────────────── */
    --bs-nav-tabs-border-color:          #3e3e45;
    --bs-nav-tabs-link-active-bg:        #242428;
    --bs-nav-tabs-link-active-color:     #dcdce0;
    --bs-nav-tabs-link-active-border-color: #3e3e45;

    /* ── Login / auth page fallbacks ──────────────────── */
    --color-bg-light:       #1a1a1f;
    --color-bg-white:       #242428;
    --color-login-bg:       #1a1a1f;
    --color-text-primary:   #e5e5ea;
    --color-text-secondary: #97979f;
}

/* --- Bordered skin overrides for dark warm --- */
[data-bs-theme="dark"][data-skin="bordered"] {
    --bs-body-bg: var(--bs-paper-bg);
    --bs-navbar-bg: var(--bs-paper-bg);
    --bs-navbar-box-shadow: none;
    --bs-navbar-border-color: var(--bs-border-color);
    --bs-menu-box-shadow: 0 0 0 1px var(--bs-border-color);
    --bs-menu-horizontal-menu-box-shadow: 0 0 0 1px #3e3e45;
    --bs-menu-horizontal-menu-sub-box-shadow: 0 0 0 1px #3e3e45;
    --bs-nav-box-shadow: none;
    --bs-nav-border-color: var(--bs-border-color);
}

/* --- Apex Charts dark warm override --- */
.apexcharts-theme-dark {
    --bs-border-color: #3e3e45;
    --bs-body-color: #ababb2;
    --bs-heading-color: #dcdce0;
    --bs-paper-bg: #242428;
    --bs-base-color: #dcdce0;
    --bs-secondary-color: #97979f;
}

/* Force chart containers inside cards to be transparent in dark mode */
/* Force chart backgrounds transparent so card bg shows through */
.week-trend-compact-card .apexcharts-canvas,
.week-trend-compact-card .apexcharts-canvas svg,
.week-trend-compact-card > div:last-child {
    background: transparent !important;
    background-color: transparent !important;
}
.week-trend-compact-card .apexcharts-canvas svg > rect:first-child {
    fill: transparent !important;
}

/* --- Component surface elevation mapping --- */

/* Cards & main containers → surface-1 */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-header {
    background-color: var(--bs-surface-1) !important;
}

/* Sidebar & Navbar → surface-1 */
[data-bs-theme="dark"] .layout-navbar,
[data-bs-theme="dark"] .layout-menu,
[data-bs-theme="dark"] .app-brand {
    background-color: var(--bs-surface-1) !important;
}

/* Dropdowns → surface-2 */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bs-surface-2) !important;
    border-color: var(--bs-border-color) !important;
}

/* Modals → surface-2 */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-surface-2) !important;
    border-color: var(--bs-border-color) !important;
}

/* Modal backdrop */
[data-bs-theme="dark"] .modal-backdrop {
    background-color: #111114 !important;
}

/* Popovers → surface-2 */
[data-bs-theme="dark"] .popover {
    background-color: var(--bs-surface-2) !important;
    border-color: var(--bs-border-color) !important;
}

/* Tooltips → surface-3 */
[data-bs-theme="dark"] .tooltip-inner {
    background-color: var(--bs-surface-3) !important;
    color: var(--bs-heading-color) !important;
}

/* Offcanvas → surface-2 */
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--bs-surface-2) !important;
    border-color: var(--bs-border-color) !important;
}

/* Hover states → surface-3 */
[data-bs-theme="dark"] .list-group-item:hover,
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--bs-surface-3) !important;
}

/* Accordion → surface-1 */
[data-bs-theme="dark"] .accordion-item {
    background-color: var(--bs-surface-1) !important;
    border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .accordion-button {
    background-color: var(--bs-surface-1) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bs-surface-1) !important;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .accordion-button::after {
    filter: brightness(0.8);
}
[data-bs-theme="dark"] .accordion-custom-button {
    --bs-accordion-btn-bg: var(--bs-surface-1);
    --bs-accordion-btn-active-bg: var(--bs-surface-1);
}
/* Accordion header variants — force uniform surface color */
[data-bs-theme="dark"] .accordion[class*="accordion-header-"] .accordion-button:not(.collapsed) {
    background-color: var(--bs-surface-1) !important;
}
[data-bs-theme="dark"] .accordion[class*="accordion-border-"] .accordion-item {
    background-color: var(--bs-surface-1) !important;
}
[data-bs-theme="dark"] .accordion[class*="accordion-solid-"] .accordion-button:not(.collapsed) {
    background-color: var(--bs-surface-2) !important;
}

/* Tabs & nav pills */
[data-bs-theme="dark"] .nav-tabs {
    border-color: var(--bs-border-color) !important;
}

/* Tables */
[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--bs-surface-1);
    --bs-table-border-color: #3e3e45;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bs-surface-2);
}

/* Select2 dropdown */
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--bs-surface-2) !important;
    border-color: var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--bs-surface-3) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bs-surface-1) !important;
    border-color: var(--bs-border-color) !important;
}

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-surface-1);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(115, 103, 240, 0.15);
}

/* Input groups */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-surface-2);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Toasts */
[data-bs-theme="dark"] .toast {
    background-color: var(--bs-surface-2) !important;
    border-color: var(--bs-border-color) !important;
}

/* Badge subtle tones */
[data-bs-theme="dark"] .badge.bg-label-secondary {
    background-color: rgba(138, 138, 148, 0.16) !important;
    color: #97979f !important;
}

/* Perfect Scrollbar */
[data-bs-theme="dark"] .ps__rail-y:hover > .ps__thumb-y,
[data-bs-theme="dark"] .ps__rail-y.ps--clicking > .ps__thumb-y,
[data-bs-theme="dark"] .ps__thumb-y {
    background-color: #4a4a52 !important;
}

/* Notyf overrides */
[data-bs-theme="dark"] .notyf__toast {
    background-color: var(--bs-surface-2) !important;
    box-shadow: 0 4px 16px rgba(13, 13, 16, 0.4) !important;
}

/* Footer */
[data-bs-theme="dark"] .content-footer {
    background-color: var(--bs-surface-0) !important;
}

/* Page / content wrapper */
[data-bs-theme="dark"] .layout-page,
[data-bs-theme="dark"] .content-wrapper {
    background-color: var(--bs-surface-0) !important;
}

/* Menu hover & active */
[data-bs-theme="dark"] .menu-item:not(.active) > .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-bs-theme="dark"] .menu-item.active > .menu-link {
    background-color: rgba(115, 103, 240, 0.1) !important;
}

/* Avatar placeholder */
[data-bs-theme="dark"] .avatar-initial {
    color: var(--bs-heading-color);
}

/* Kanban / sortable boards if any */
[data-bs-theme="dark"] .kanban-board {
    background-color: var(--bs-surface-0) !important;
}
[data-bs-theme="dark"] .kanban-item {
    background-color: var(--bs-surface-1) !important;
    border-color: var(--bs-border-color) !important;
}

/* App overlay warm tint */
[data-bs-theme="dark"] .app-overlay.show {
    background-color: rgba(20, 20, 24, 0.6);
}