/* ================================================================
 * GLOBAL DARK MODE THEME OVERRIDES — loaded after dashboard.css
 * Applies when <html class="dark-mode"> or data-theme="dark"
 * ================================================================ */

/* ── CSS Variable Overrides ── */
html.dark-mode,
html[data-theme="dark"],
body.dark-mode {
    --text-primary:       #e2e8f0 !important;
    --text-secondary:     #94a3b8 !important;
    --text-tertiary:      #64748b !important;
    --text-disabled:      #475569 !important;
    --bg-primary:         #1e293b !important;
    --bg-secondary:       #0f172a !important;
    --bg-tertiary:        #1e293b !important;
    --bg-hover:           rgba(255,255,255,0.06) !important;
    --bg-color:           #0f172a !important;
    --border-light:       rgba(255,255,255,0.08) !important;
    --border-medium:      rgba(255,255,255,0.15) !important;
    --border-dark:        rgba(255,255,255,0.25) !important;
    --sidebar-bg:         #0f172a !important;
    --sidebar-text:       #cbd5e1 !important;
    --sidebar-border:     rgba(255,255,255,0.08) !important;
    --sidebar-active:     rgba(99,102,241,0.25) !important;
    --sidebar-hover-bg:   rgba(255,255,255,0.06) !important;
    --sidebar-hover-text: #ffffff !important;
    --card-bg:            #1e293b !important;
    --white:              #1e293b !important;
}

/* Body */
html.dark-mode body,
html[data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Dashboard layout */
html.dark-mode .dashboard-container,
html.dark-mode .dashboard-content,
html[data-theme="dark"] .dashboard-container,
html[data-theme="dark"] .dashboard-content {
    background-color: #0f172a !important;
}
html.dark-mode .dashboard-header,
html[data-theme="dark"] .dashboard-header {
    background-color: #1e293b !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
}

/* Search */
html.dark-mode .search-box,
html[data-theme="dark"] .search-box {
    background-color: #0f172a !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
html.dark-mode .search-box input,
html[data-theme="dark"] .search-box input {
    color: #e2e8f0 !important;
    background: transparent !important;
}

/* Cards */
html.dark-mode .card,
html.dark-mode .dashboard-card,
html.dark-mode .glass-card,
html.dark-mode .glass-panel,
html.dark-mode .info-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .info-card {
    background-color: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
}
html.dark-mode .card-header,
html.dark-mode .card-footer,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: #1a2744 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .card-body,
html[data-theme="dark"] .card-body {
    background-color: #1e293b !important;
}

/* Typography */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: #e2e8f0 !important;
}
html.dark-mode p,
html[data-theme="dark"] p {
    color: #cbd5e1 !important;
}
html.dark-mode label,
html[data-theme="dark"] label {
    color: #cbd5e1 !important;
}
html.dark-mode .page-title,
html.dark-mode .card-title,
html.dark-mode .section-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .section-title {
    color: #e2e8f0 !important;
}

/* Tables */
html.dark-mode .table,
html[data-theme="dark"] .table {
    color: #e2e8f0 !important;
}
html.dark-mode .table thead,
html[data-theme="dark"] .table thead {
    background-color: #1a2744 !important;
}
html.dark-mode .table thead th,
html[data-theme="dark"] .table thead th {
    color: #94a3b8 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
html.dark-mode .table tbody tr:hover,
html[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255,255,255,0.04) !important;
}
html.dark-mode .table tbody td,
html[data-theme="dark"] .table tbody td {
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Forms */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode input[type="date"],
html.dark-mode input[type="month"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="search"],
html.dark-mode select,
html.dark-mode textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode input::placeholder,
html[data-theme="dark"] input::placeholder {
    color: #64748b !important;
}
html.dark-mode select option,
html[data-theme="dark"] select option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Status badges */
html.dark-mode .status-active,
html[data-theme="dark"] .status-active {
    background-color: rgba(16,185,129,0.15) !important;
    color: #34d399 !important;
}
html.dark-mode .status-pending,
html[data-theme="dark"] .status-pending {
    background-color: rgba(245,158,11,0.15) !important;
    color: #fbbf24 !important;
}
html.dark-mode .status-inactive,
html[data-theme="dark"] .status-inactive {
    background-color: rgba(239,68,68,0.15) !important;
    color: #f87171 !important;
}

/* Stat info (hardcoded #333/#666 override) */
html.dark-mode .stat-info h3,
html[data-theme="dark"] .stat-info h3 {
    color: #e2e8f0 !important;
}
html.dark-mode .stat-info p,
html[data-theme="dark"] .stat-info p {
    color: #94a3b8 !important;
}

/* Light bg utilities — inverted */
html.dark-mode .bg-primary-light,
html[data-theme="dark"] .bg-primary-light { background-color: rgba(26,115,232,0.15) !important; }
html.dark-mode .bg-success-light,
html[data-theme="dark"] .bg-success-light { background-color: rgba(30,142,62,0.15) !important; }
html.dark-mode .bg-info-light,
html[data-theme="dark"] .bg-info-light { background-color: rgba(18,181,203,0.15) !important; }
html.dark-mode .bg-warning-light,
html[data-theme="dark"] .bg-warning-light { background-color: rgba(249,171,0,0.15) !important; }

/* Avatars */
html.dark-mode .avatar-blue, html[data-theme="dark"] .avatar-blue {
    background-color: rgba(26,115,232,0.2) !important; color: #60a5fa !important;
}
html.dark-mode .avatar-red, html[data-theme="dark"] .avatar-red {
    background-color: rgba(217,48,37,0.2) !important; color: #f87171 !important;
}

/* Activity / staff lists */
html.dark-mode .activity-item, html[data-theme="dark"] .activity-item {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode .activity-content p, html[data-theme="dark"] .activity-content p {
    color: #e2e8f0 !important;
}
html.dark-mode .activity-time, html[data-theme="dark"] .activity-time {
    color: #64748b !important;
}
html.dark-mode .staff-item, html[data-theme="dark"] .staff-item {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode .staff-item:hover, html[data-theme="dark"] .staff-item:hover {
    background-color: rgba(255,255,255,0.04) !important;
}
html.dark-mode .staff-details h4, html[data-theme="dark"] .staff-details h4 { color: #e2e8f0 !important; }
html.dark-mode .staff-details p, html[data-theme="dark"] .staff-details p { color: #94a3b8 !important; }
html.dark-mode .stat-pill, html[data-theme="dark"] .stat-pill {
    background-color: #334155 !important; color: #94a3b8 !important;
}

/* Mobile bottom nav */
html.dark-mode .mobile-bottom-nav, html[data-theme="dark"] .mobile-bottom-nav {
    background-color: #1e293b !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
html.dark-mode .mobile-bottom-nav .nav-item,
html.dark-mode .mobile-bottom-nav .mobile-nav-item,
html[data-theme="dark"] .mobile-bottom-nav .nav-item,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-item { color: #64748b !important; }
html.dark-mode .mobile-bottom-nav .nav-item.active,
html.dark-mode .mobile-bottom-nav .mobile-nav-item.active,
html[data-theme="dark"] .mobile-bottom-nav .nav-item.active,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-item.active { color: #818cf8 !important; }

/* Footer */
html.dark-mode footer, html[data-theme="dark"] footer {
    background: #0f172a !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Modals */
html.dark-mode .modal-content, html[data-theme="dark"] .modal-content {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: rgba(255,255,255,0.08) !important;
}

/* SweetAlert2 */
html.dark-mode .swal2-popup, html[data-theme="dark"] .swal2-popup {
    background: #1e293b !important; color: #e2e8f0 !important;
}
html.dark-mode .swal2-title, html[data-theme="dark"] .swal2-title { color: #e2e8f0 !important; }
html.dark-mode .swal2-html-container, html[data-theme="dark"] .swal2-html-container { color: #94a3b8 !important; }

/* Dropdown menus */
html.dark-mode .dropdown-menu, html[data-theme="dark"] .dropdown-menu {
    background-color: #1e293b !important; border-color: rgba(255,255,255,0.1) !important;
}
html.dark-mode .dropdown-item, html[data-theme="dark"] .dropdown-item { color: #e2e8f0 !important; }
html.dark-mode .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:hover {
    background-color: #334155 !important; color: #ffffff !important;
}
html.dark-mode .dropdown-divider, html[data-theme="dark"] .dropdown-divider {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Pagination */
html.dark-mode .pagination .page-link, html[data-theme="dark"] .pagination .page-link {
    background-color: #1e293b !important; color: #94a3b8 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
html.dark-mode .pagination .page-link:hover, html[data-theme="dark"] .pagination .page-link:hover {
    background-color: #334155 !important; color: #e2e8f0 !important;
}
html.dark-mode .pagination .page-item.active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important; color: #ffffff !important;
}

/* Select2 */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #0f172a !important;
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode .select2-container--default .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection__rendered { color: #e2e8f0 !important; }
html.dark-mode .select2-dropdown, html[data-theme="dark"] .select2-dropdown {
    background-color: #1e293b !important; border-color: rgba(255,255,255,0.1) !important;
}
html.dark-mode .select2-results__option, html[data-theme="dark"] .select2-results__option {
    color: #e2e8f0 !important; background-color: #1e293b !important;
}
html.dark-mode .select2-results__option--highlighted,
html[data-theme="dark"] .select2-results__option--highlighted {
    background-color: #334155 !important; color: #ffffff !important;
}
html.dark-mode .select2-search__field, html[data-theme="dark"] .select2-search__field {
    background-color: #0f172a !important; color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* Scrollbar */
html.dark-mode ::-webkit-scrollbar-track, html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark-mode ::-webkit-scrollbar-thumb, html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #334155; border-radius: 4px;
}
html.dark-mode ::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #475569;
}

/* ================================================================
 * LIGHT MODE FIXES — accounts_dashboard inline dark-style cards
 * These CSS classes must be added to the PHP HTML elements
 * ================================================================ */
html:not(.dark-mode):not([data-theme="dark"]) .accounts-metric-card {
    background: #f8f9fa !important; border-color: #e2e8f0 !important; color: #202124 !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .accounts-metric-card .metric-label { color: #5f6368 !important; }
html:not(.dark-mode):not([data-theme="dark"]) .accounts-metric-card .metric-sub { color: #5f6368 !important; }

html:not(.dark-mode):not([data-theme="dark"]) .accounts-fy-banner {
    background: #f1f5f9 !important; border-color: #e2e8f0 !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .accounts-fy-banner .fy-label { color: #d97706 !important; }
html:not(.dark-mode):not([data-theme="dark"]) .accounts-fy-banner .fy-body { color: #202124 !important; }

html:not(.dark-mode):not([data-theme="dark"]) .accounts-channel-card,
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-card {
    background: #ffffff !important; border-color: #e2e8f0 !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .accounts-channel-card .card-head,
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-card .card-head {
    background: #f8f9fa !important; border-bottom-color: #e2e8f0 !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .accounts-channel-card h3,
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-card h3 { color: #202124 !important; }

html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-table { color: #202124 !important; }
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-table thead tr {
    background: #f8f9fa !important; color: #5f6368 !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-table td,
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-table th {
    color: #202124 !important; border-color: #e2e8f0 !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-table tbody tr { background: #ffffff !important; }
html:not(.dark-mode):not([data-theme="dark"]) .accounts-trend-table tbody tr:hover { background: #f8f9fa !important; }
html:not(.dark-mode):not([data-theme="dark"]) .channel-bar-bg { background: #e2e8f0 !important; }
html:not(.dark-mode):not([data-theme="dark"]) .channel-name { color: #202124 !important; }