/* ========================================
   DARK MODE CSS VARIABLES & OVERRIDES
   ======================================== */

/* Light mode defaults (Bootstrap 5 uses CSS variables) */
:root {
    --app-bg: #f8f9fa;
    --app-card-bg: #ffffff;
    --app-card-border: #e9ecef;
    --app-text-primary: #212529;
    --app-text-secondary: #6c757d;
    --app-text-muted: #adb5bd;
    --app-header-bg: #ffffff;
    --app-header-border: #dee2e6;
    --app-input-bg: #ffffff;
    --app-input-border: #ced4da;
    --app-table-header-bg: #f8f9fa;
    --app-shadow: rgba(0, 0, 0, 0.1);
}

/* Dark mode overrides */
[data-bs-theme="dark"],
.dark-mode {
    --app-bg: #1a1d21;
    --app-card-bg: #212529;
    --app-card-border: #343a40;
    --app-text-primary: #f8f9fa;
    --app-text-secondary: #adb5bd;
    --app-text-muted: #6c757d;
    --app-header-bg: #212529;
    --app-header-border: #343a40;
    --app-input-bg: #2b3035;
    --app-input-border: #495057;
    --app-table-header-bg: #2b3035;
    --app-shadow: rgba(0, 0, 0, 0.3);
}

/* ========================================
   MAIN LAYOUT DARK MODE
   ======================================== */

/* Top Header Dark Mode */
[data-bs-theme="dark"] .top-header,
.dark-mode .top-header {
    background: var(--app-header-bg) !important;
    border-bottom-color: var(--app-header-border) !important;
}

/* Main Content Area */
[data-bs-theme="dark"] .main-content,
.dark-mode .main-content {
    background: var(--app-bg) !important;
}

[data-bs-theme="dark"] .content,
.dark-mode .content {
    background: var(--app-bg) !important;
}

/* ========================================
   DASHBOARD DARK MODE
   ======================================== */

[data-bs-theme="dark"] .modern-dashboard,
.dark-mode .modern-dashboard {
    background: var(--app-bg) !important;
}

[data-bs-theme="dark"] .dashboard-card,
.dark-mode .dashboard-card {
    background: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
}

[data-bs-theme="dark"] .dashboard-card .card-header,
.dark-mode .dashboard-card .card-header {
    background: linear-gradient(to right, var(--app-card-bg), var(--app-card-bg)) !important;
    border-bottom-color: var(--app-card-border) !important;
}

[data-bs-theme="dark"] .dashboard-card h3,
[data-bs-theme="dark"] .dashboard-card h4,
[data-bs-theme="dark"] .dashboard-card h5,
[data-bs-theme="dark"] .dashboard-card h6,
.dark-mode .dashboard-card h3,
.dark-mode .dashboard-card h4,
.dark-mode .dashboard-card h5,
.dark-mode .dashboard-card h6 {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .dashboard-card .card-body,
.dark-mode .dashboard-card .card-body {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .balance-amount,
.dark-mode .balance-amount {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .currency-label,
.dark-mode .currency-label {
    color: var(--app-text-secondary) !important;
}

/* ========================================
   CARDS DARK MODE
   ======================================== */

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

[data-bs-theme="dark"] .card-header,
.dark-mode .card-header {
    background: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .card-body,
.dark-mode .card-body {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .card-footer,
.dark-mode .card-footer {
    background: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
}

/* ========================================
   FORM CONTROLS DARK MODE
   ======================================== */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-input-border) !important;
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .input-group-text,
.dark-mode .input-group-text {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-input-border) !important;
    color: var(--app-text-secondary) !important;
}

/* ========================================
   TABLE DARK MODE
   ======================================== */

[data-bs-theme="dark"] .table,
.dark-mode .table {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .table-light,
.dark-mode .table-light {
    background-color: var(--app-table-header-bg) !important;
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .table thead th,
.dark-mode .table thead th {
    background-color: var(--app-table-header-bg) !important;
    border-color: var(--app-card-border) !important;
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th,
.dark-mode .table td,
.dark-mode .table th {
    border-color: var(--app-card-border) !important;
}

/* ========================================
   TEXT UTILITIES DARK MODE
   ======================================== */

[data-bs-theme="dark"] .text-dark,
.dark-mode .text-dark {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .text-muted,
.dark-mode .text-muted {
    color: var(--app-text-muted) !important;
}

/* ========================================
   DROPDOWN DARK MODE
   ======================================== */

[data-bs-theme="dark"] .dropdown-menu,
.dark-mode .dropdown-menu {
    background-color: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
}

[data-bs-theme="dark"] .dropdown-item,
.dark-mode .dropdown-item {
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--app-input-bg) !important;
}

/* ========================================
   MODAL DARK MODE
   ======================================== */

[data-bs-theme="dark"] .modal-content,
.dark-mode .modal-content {
    background-color: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
    color: var(--app-text-primary) !important;
}

[data-bs-theme="dark"] .modal-header,
.dark-mode .modal-header {
    border-color: var(--app-card-border) !important;
}

[data-bs-theme="dark"] .modal-footer,
.dark-mode .modal-footer {
    border-color: var(--app-card-border) !important;
}

/* ========================================
   ALERT/BADGE DARK MODE ADJUSTMENTS
   ======================================== */

[data-bs-theme="dark"] .alert-light,
.dark-mode .alert-light {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-card-border) !important;
    color: var(--app-text-primary) !important;
}

/* ========================================
   LIST GROUP DARK MODE
   ======================================== */

[data-bs-theme="dark"] .list-group-item,
.dark-mode .list-group-item {
    background-color: var(--app-card-bg) !important;
    border-color: var(--app-card-border) !important;
    color: var(--app-text-primary) !important;
}

/* ========================================
   BACKGROUND UTILITIES OVERRIDE
   ======================================== */

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

[data-bs-theme="dark"] .bg-light,
.dark-mode .bg-light {
    background-color: var(--app-input-bg) !important;
}

/* ========================================
   BORDER UTILITIES OVERRIDE
   ======================================== */

[data-bs-theme="dark"] .border,
.dark-mode .border {
    border-color: var(--app-card-border) !important;
}

/* ========================================
   SYNCFUSION GRID DARK MODE FIXES
   ======================================== */

[data-bs-theme="dark"] .e-grid,
.dark-mode .e-grid {
    background-color: var(--app-card-bg) !important;
}

[data-bs-theme="dark"] .e-grid .e-gridheader,
.dark-mode .e-grid .e-gridheader {
    background-color: var(--app-table-header-bg) !important;
}

[data-bs-theme="dark"] .e-grid .e-headercell,
.dark-mode .e-grid .e-headercell {
    background-color: var(--app-table-header-bg) !important;
}

[data-bs-theme="dark"] .e-grid .e-rowcell,
.dark-mode .e-grid .e-rowcell {
    background-color: var(--app-card-bg) !important;
    color: var(--app-text-primary) !important;
}

/* ========================================
   BUTTONS IN SEARCH BOX
   ======================================== */

[data-bs-theme="dark"] .search-box .input-group-text,
.dark-mode .search-box .input-group-text {
    background-color: var(--app-input-bg) !important;
}

[data-bs-theme="dark"] .search-box .form-control,
.dark-mode .search-box .form-control {
    background-color: var(--app-input-bg) !important;
    color: var(--app-text-primary) !important;
}

/* ========================================
   KPI & STAT CARDS
   ======================================== */

[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .kpi-card,
.dark-mode .stat-card,
.dark-mode .kpi-card {
    background: var(--app-card-bg) !important;
    color: var(--app-text-primary) !important;
}