/* ===================================================================
 * Vidyamandira Portal - Dark Theme Override
 * =================================================================== */

/* Core Variable Overrides for Dark Theme */
html[data-theme="dark"] {
    color-scheme: dark;
    /* --- Main Branding Colors (Adjusted for contrast) --- */
    --primary: #f97316;
    --primary-dark: #fb923c;
    /* Lighter saffron for hover on dark */
    --primary-light: rgba(249, 115, 22, 0.15);
    /* Subdued saffron bg */
    --accent-maroon: #fca5a5;
    /* Lighter maroon for text readability */
    --accent-maroon-dark: #ef4444;
    --accent-green: #4ade80;
    /* Brighter green */

    /* --- UI & State Colors (Brighter for dark mode) --- */
    --danger: #ef4444;
    --warning: #fbbf24;
    --info: #38bdf8;
    --success: var(--accent-green);

    /* --- Canvas, Text & Borders --- */
    --app-bg: #0f172a;
    /* Deep slate */
    --app-bg-gradient: linear-gradient(165deg, #0f172a 0%, #020617 100%);
    --card-bg: #1e293b;
    /* Lighter slate for cards */
    --text-primary: #f8fafc;
    /* Near white */
    --text-secondary: #cbd5e1;
    /* Light gray */
    --text-tertiary: #94a3b8;
    /* Muted gray */
    --border-color: #334155;
    /* Slate 700 */
    --divider-color: #1e293b;

    /* --- Conference Room Booking --- */
    --cr-primary: #10b981;
    --cr-primary-light: rgba(16, 185, 129, 0.15);
    --cr-danger: #ef4444;
    --cr-danger-light: rgba(239, 68, 68, 0.15);
    --cr-warning: #fbbf24;
    --cr-warning-light: rgba(245, 158, 11, 0.15);
    --cr-info: #38bdf8;
    --cr-info-light: rgba(56, 189, 248, 0.15);
    --cr-border: var(--border-color);
    --cr-text-primary: var(--text-primary);
    --cr-text-secondary: var(--text-secondary);
    --cr-card-bg: var(--card-bg);

    --muted: var(--text-secondary);
    --card-border: var(--border-color);
    --bg: var(--card-bg);

    /* Shadow adjustments */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
    --shadow-primary: 0 4px 14px 0 rgba(249, 115, 22, 0.4);
}

/* ===================================================================
 * Aggressive General Conversions
 * =================================================================== */
html[data-theme="dark"] body {
    background: var(--app-bg-gradient) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .app-footer,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .control-hub-desktop,
html[data-theme="dark"] .mobile-control-bar,
html[data-theme="dark"] .table-filters-row.bg-light,
html[data-theme="dark"] .advanced-filters-container {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Top Nav needs transparency/blur but dark */
html[data-theme="dark"] .top-nav {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .top-nav.nav-scrolled {
    background: rgba(15, 23, 42, 0.95) !important;
}

/* Headers */
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,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .sidebar-title {
    color: var(--text-primary) !important;
}

/* Links & Text */
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] div,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
    /* If they aren't explicitly colored, they should inherit.
       We avoid !important on everything to allow specific text colors to work,
       but we aggressively target specific known text classes. */
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .menu-item {
    color: var(--text-secondary) !important;
}

/* Menu Items & Interactive Elements */
html[data-theme="dark"] .menu-item:hover,
html[data-theme="dark"] .menu-item.active,
html[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* Base style for nav buttons */
html[data-theme="dark"] .nav-btn-pill,
html[data-theme="dark"] .theme-toggle-btn {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* Theme Toggle - Amber/Yellow */
html[data-theme="dark"] .theme-toggle-btn {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .theme-toggle-btn i {
    color: #fcd34d !important;
}

html[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(245, 158, 11, 0.25) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
}

/* Notification Bell - Cyan/Blue */
html[data-theme="dark"] .notification-bell.nav-btn-pill {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

html[data-theme="dark"] .notification-bell.nav-btn-pill i {
    color: #7dd3fc !important;
}

html[data-theme="dark"] .notification-bell.nav-btn-pill:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .notification-bell.nav-btn-pill:hover i {
    color: #38bdf8 !important;
}

/* User Profile - Indigo/Purple */
html[data-theme="dark"] .user-profile.nav-btn-pill {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

html[data-theme="dark"] .user-profile.nav-btn-pill:hover {
    background: rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3) !important;
}

/* Logout Button - Rose/Red */
html[data-theme="dark"] .nav-logout-btn.nav-btn-pill {
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
    color: #fda4af !important;
}

html[data-theme="dark"] .nav-logout-btn.nav-btn-pill i,
html[data-theme="dark"] .nav-logout-btn.nav-btn-pill span {
    color: #fda4af !important;
}

html[data-theme="dark"] .nav-logout-btn.nav-btn-pill:hover {
    background: rgba(244, 63, 94, 0.25) !important;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.3) !important;
    color: #f43f5e !important;
}

html[data-theme="dark"] .nav-logout-btn.nav-btn-pill:hover i,
html[data-theme="dark"] .nav-logout-btn.nav-btn-pill:hover span {
    color: #f43f5e !important;
}

/* Input Fields & Forms */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Checkboxes and Radios */
html[data-theme="dark"] .form-check-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25) !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd)>* {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover>* {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

/* Number badges in tables / mobile cards */
html[data-theme="dark"] .row-number {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

html[data-theme="dark"] .req-num-badge-mobile {
    color: var(--text-secondary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Datatables Overrides */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/* Modals */
html[data-theme="dark"] .modal-content {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--border-color) !important;
}

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

html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--text-secondary);
    color: var(--text-primary);
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) var(--border-color) var(--card-bg) !important;
    color: var(--primary) !important;
}

/* SweetAlert2 / Toasts */
html[data-theme="dark"] .swal2-popup {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
    color: var(--text-primary) !important;
}

/* ===================================================================
 * Aggressive Fallback
 * Forces dark background on elements with hardcoded light backgrounds 
 * (except buttons, images, svgs, which might get broken)
 * =================================================================== */
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background: white"] {
    background-color: var(--card-bg) !important;
    background: var(--card-bg) !important;
}

html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
html[data-theme="dark"] [style*="color: black"] {
    color: var(--text-primary) !important;
}

/* Theme Toggle Button Specific Style */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--app-bg);
    color: rgb(255, 251, 251);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.theme-toggle-btn:hover {
    background: var(--primary-light);
    color: rgb(255, 251, 251);
}

.theme-toggle-btn i {
    font-size: 1.2rem;
    transition: transform 0.5s ease;
}

html[data-theme="dark"] .theme-toggle-btn i {
    transform: rotate(360deg);
}

/* ===================================================================
 * Dashboard Premium Specific Overrides
 * =================================================================== */

html[data-theme="dark"] .dashboard-premium {
    background: var(--app-bg-gradient) !important;
}

html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .dashboard-hero.morning,
html[data-theme="dark"] .dashboard-hero.afternoon,
html[data-theme="dark"] .dashboard-hero.evening,
html[data-theme="dark"] .dashboard-hero[class*="shade-"] {
    /* More muted and deep gradients for dark mode hero */
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%) !important;
}

html[data-theme="dark"] .action-card-premium {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-desc,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-subtitle {
    color: var(--text-primary) !important;
}

/* Custom vibrant colors for hero elements in dark mode */
html[data-theme="dark"] .hero-title {
    color: #38bdf8 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .hero-subtitle {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .prahara-english {
    color: #f8fafc !important;
}

html[data-theme="dark"] .prahara-name {
    color: #38bdf8 !important;
}

html[data-theme="dark"] .greeting-badge {
    background: rgba(14, 165, 233, 0.15) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}

html[data-theme="dark"] .greeting-badge span {
    color: #38bdf8 !important;
}

html[data-theme="dark"] .greeting-badge i {
    color: #fcd34d !important;
}

html[data-theme="dark"] .hero-blessing .sanskrit {
    color: #f59e0b !important;
}

html[data-theme="dark"] .hero-prahara-info .prahara-icon {
    color: #f43f5e !important;
}

html[data-theme="dark"] .hero-prahara-info .prahara-sanskrit {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .hero-date {
    color: #a78bfa !important;
}

html[data-theme="dark"] .hero-date i {
    color: #a78bfa !important;
}

/* Fix hero gradient blending into dark background */
html[data-theme="dark"] .dashboard-hero::after {
    background: linear-gradient(180deg, transparent, var(--app-bg)) !important;
}

/* Telegram / Alerts in Dashboard */
html[data-theme="dark"] .dashboard-premium .alert {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .dashboard-premium .alert p,
html[data-theme="dark"] .dashboard-premium .alert h4 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .dashboard-premium .btn-light {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Mobile Quick Actions */
html[data-theme="dark"] .mobile-quick-actions,
html[data-theme="dark"] .mobile-quick-btn {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .hero-stats {
    background: transparent !important;
    border-color: var(--border-color) !important;
}

/* Fix for inbox hero stats which shouldn't have a background */
html[data-theme="dark"] .inbox-hero .hero-stats {
    background: transparent !important;
    border: none !important;
}

/* ===================================================================
 * Notifications Widget Overrides
 * =================================================================== */
html[data-theme="dark"] .nw-card .bg-white,
html[data-theme="dark"] .nw-header {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .nw-header span,
html[data-theme="dark"] .nw-header i.text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .notif-color-legend {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: var(--border-color) !important;
}

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

html[data-theme="dark"] .nw-item:hover {
    background-color: var(--primary-light) !important;
}

html[data-theme="dark"] .nw-item--unread {
    background-color: rgba(249, 115, 22, 0.1) !important;
    /* Tint for unread */
}

html[data-theme="dark"] .nw-item--unread:hover {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

html[data-theme="dark"] .nw-msg,
html[data-theme="dark"] .notif-legend-item {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .nw-msg.text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .nw-collapse-wrapper::after {
    background: linear-gradient(to bottom, rgba(30, 41, 59, 0), rgba(30, 41, 59, 1)) !important;
}

html[data-theme="dark"] .nw-card .btn-light {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ===================================================================
 * Superintendent / Hostel Dashboard Overrides
 * =================================================================== */
html[data-theme="dark"] {
    --dash-bg: var(--app-bg) !important;
    --dash-card-bg: var(--card-bg) !important;
    --dash-text-primary: var(--text-primary) !important;
    --dash-text-secondary: var(--text-secondary) !important;
    --dash-text-muted: var(--text-tertiary) !important;
    --dash-border: var(--border-color) !important;
}

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

html[data-theme="dark"] .card-dashing.active {
    background-color: var(--primary-light) !important;
}

html[data-theme="dark"] .table-header-custom {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .table-row-custom {
    border-bottom-color: var(--border-color) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .table-row-custom>td,
html[data-theme="dark"] .table-row-custom>td:first-child,
html[data-theme="dark"] .table-row-custom>div,
html[data-theme="dark"] .table-row-custom .row-number {
    background-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .table-row-custom:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .col-header:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .m-badge {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .m-badge i {
    color: var(--text-muted) !important;
}

/* Premium Badges Dark Mode */
html[data-theme="dark"] .badge-present {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="dark"] .badge-leave {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

html[data-theme="dark"] .badge-departing {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

html[data-theme="dark"] .badge-returning {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

html[data-theme="dark"] .student-initials {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

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

html[data-theme="dark"] .btn-icon:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Close buttons (modals, alerts) */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

html[data-theme="dark"] .leaves-debug-modal,
html[data-theme="dark"] .leaves-debug-header,
html[data-theme="dark"] .leaves-debug-status,
html[data-theme="dark"] .leaves-debug-body,
html[data-theme="dark"] .leave-debug-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .leave-debug-card.active-leave {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

html[data-theme="dark"] .mobile-student-table table,
html[data-theme="dark"] .card.d-lg-none {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .mobile-student-table thead {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .mobile-student-table th,
html[data-theme="dark"] .mobile-student-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .mobile-student-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .name-cell .fname,
html[data-theme="dark"] .name-cell .lname {
    color: var(--text-primary) !important;
}

/* ===================================================================
 * Meal Management (Orange Theme) Dark Mode Overrides
 * =================================================================== */
html[data-theme="dark"] {
    --orange-soft: var(--app-bg);
    --orange-border: var(--border-color);
    --orange-text-deep: var(--text-primary);
    --orange-bg-clean: var(--card-bg);
}

html[data-theme="dark"] .meal-count-card.orange-theme {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-submission-info {
    background-color: rgba(249, 115, 22, 0.1) !important;
    border-color: var(--orange-primary) !important;
}

html[data-theme="dark"] .meal-submission-info .info-text {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme {
    background-color: transparent !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme thead th {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme .meal-item-name {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme tfoot tr,
html[data-theme="dark"] .meal-count-table.orange-theme tfoot td {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: var(--orange-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme .final-count-input {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme .final-count-input:focus {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .history-table {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .history-table th {
    background-color: var(--primary-light) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .history-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .history-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator-row-odd,
html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator-row-even,
html[data-theme="dark"] .rkmvm-grid-wrapper .grid-toolbar {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator-row:hover,
html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator-row:hover>.tabulator-cell {
    background-color: var(--primary-light) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator-cell {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .grid-rownum {
    background-color: rgba(249, 115, 22, 0.1) !important;
}

/* ===================================================================
 * Further Meal Management / Cards & Tables Dark Mode Refinements
 * =================================================================== */
html[data-theme="dark"] .skipping-meals-card .card-header,
html[data-theme="dark"] .meal-count-card .card-header,
html[data-theme="dark"] #arriving-today-card .card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .skipping-meals-card .card-header h5,
html[data-theme="dark"] .meal-count-card .card-title,
html[data-theme="dark"] #arriving-today-card .card-header h5 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .meal-count-card .badge.bg-white {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .skip-meals-table,
html[data-theme="dark"] .arriving-students-table {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .skip-meals-table th,
html[data-theme="dark"] .arriving-students-table th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .skip-meals-table td,
html[data-theme="dark"] .arriving-students-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .skip-meals-table tbody tr:hover,
html[data-theme="dark"] .skip-meals-table tbody tr:hover td,
html[data-theme="dark"] .arriving-students-table tbody tr:hover,
html[data-theme="dark"] .arriving-students-table tbody tr:hover td,
html[data-theme="dark"] .leave-status-table tbody tr:hover,
html[data-theme="dark"] .leave-status-table tbody tr:hover td,
html[data-theme="dark"] .meal-count-table tbody tr:hover,
html[data-theme="dark"] .meal-count-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .skip-meals-table .badge.bg-light {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-skip-section h6.text-primary,
html[data-theme="dark"] .meal-skip-section h6.text-purple {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] #arriving-today-card .arriving-students-table tr {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Fix explicitly light backgrounds in specific containers/badges */
html[data-theme="dark"] .skip-table-container {
    background: transparent !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .skip-meals-table thead {
    background: var(--primary-light) !important;
}

html[data-theme="dark"] .leave-period-badge {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] #arriving-today-card .arriving-today-scroll {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .student-photo,
html[data-theme="dark"] .student-avatar {
    border-color: var(--border-color) !important;
}

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

/* ===================================================================
 * Leave Application Page UI Enhancements
 * =================================================================== */
html[data-theme="dark"] .leave-type-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .leave-type-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .leave-type-card.active {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: var(--primary-color) !important;
}

html[data-theme="dark"] .leave-type-card .card-label {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .summary-list dt {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .summary-list dd {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-divider {
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .form-text,
html[data-theme="dark"] #college-hours-info {
    color: var(--text-secondary) !important;
}

/* ===================================================================
 * Global Dark Mode Scrollbar
 * =================================================================== */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--app-bg) !important;
    border-left: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
    border-radius: 5px;
    border: 2px solid var(--app-bg) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

/* ===================================================================
 * Leave History UI Enhancements
 * =================================================================== */
html[data-theme="dark"] .leave-card-new .card {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .leave-card-new .card-header.bg-white {
    background-color: transparent !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .leave-card-new .text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .req-num-badge {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .leave-card-new .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
}

/* Meals Container dark mode overrides */
html[data-theme="dark"] .meals-container {
    background-color: rgba(14, 165, 233, 0.1) !important;
    border-color: var(--primary-color) !important;
}

html[data-theme="dark"] .meals-container::after {
    border-left-color: var(--primary-color) !important;
}

html[data-theme="dark"] .meal-header {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .meal-item {
    color: var(--text-primary) !important;
}

/* Search bar and filters overrides */
html[data-theme="dark"] .input-group-text.bg-light,
html[data-theme="dark"] .form-control.bg-light {
    background-color: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ===================================================================
 * Meal Request History UI Enhancements
 * =================================================================== */
html[data-theme="dark"] .meal-card-new .card {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .meal-card-new .card-header.bg-white,
html[data-theme="dark"] .meal-card-new .card-footer.bg-white {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-card-new .text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .meal-card-new .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-card-new .list-group-item {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

/* ===================================================================
 * Mobile Sidebar & Navigation Dark Mode Overrides
 * =================================================================== */

/* Hamburger Menu Button */
html[data-theme="dark"] .menu-toggle {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .menu-toggle i {
    color: var(--text-primary) !important;
}

/* Sidebar Container */
html[data-theme="dark"] #sidebar,
html[data-theme="dark"] .sidebar {
    background-color: var(--app-bg) !important;
    border-right-color: var(--border-color) !important;
}

/* Sidebar Text & Branding */
html[data-theme="dark"] .sidebar-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .sidebar-subtitle {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .menu-title {
    color: var(--text-tertiary) !important;
}

/* Menu Items */
html[data-theme="dark"] .menu-item {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .menu-item .menu-icon {
    color: var(--text-tertiary) !important;
}

/* Menu Items Hover/Active */
html[data-theme="dark"] .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .menu-item:hover .menu-icon {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .menu-item.active {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: var(--primary-dark) !important;
    border-left-color: var(--primary-dark) !important;
}

html[data-theme="dark"] .menu-item.active .menu-icon {
    color: var(--primary-dark) !important;
}

html[data-theme="dark"] .menu-notif-badge {
    background-color: var(--danger) !important;
    color: #fff !important;
}

/* ===================================================================
 * Dashboard Student Pills & Notice Board Enhancements
 * =================================================================== */

/* Student Detail Pills */
html[data-theme="dark"] .detail-pill {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .detail-pill span {
    color: var(--text-primary) !important;
}

/* Digital Notice Board Thumbnails */
html[data-theme="dark"] .notice-thumb:not(.pdf) {
    background: linear-gradient(165deg, #1e293b, #0f172a) !important;
    border-bottom: 1px solid var(--border-color);
}

html[data-theme="dark"] .notice-thumb i {
    color: var(--text-tertiary) !important;
    opacity: 0.8;
}

/* ===================================================================
 * Administrative Notices Page Enhancements
 * =================================================================== */

html[data-theme="dark"] {
    --admin-primary: var(--text-primary);
    --admin-secondary: var(--text-secondary);
    --admin-accent: var(--info);
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .notice-date .day {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .notice-card-sidebar {
    background: rgba(255, 255, 255, 0.05) !important;
    border-right-color: var(--border-color) !important;
}

html[data-theme="dark"] .notice-number {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .notice-title a.text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .avatar-xs {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ===================================================================
 * College Calendar Enhancements
 * =================================================================== */

html[data-theme="dark"] .calendar-premium {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .section-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .hero-subtitle {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .legend-pill {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

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

html[data-theme="dark"] .calendar-weekdays {
    background: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .weekday {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .weekday.sun,
html[data-theme="dark"] .weekday.sat {
    color: var(--danger) !important;
}

html[data-theme="dark"] .calendar-days-grid {
    background: var(--border-color) !important;
}

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

html[data-theme="dark"] .day-number {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .day-cell.empty {
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .day-cell:not(.empty):hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .day-cell.today {
    background: rgba(249, 115, 22, 0.1) !important;
}

html[data-theme="dark"] .day-cell.holiday {
    background: rgba(140, 77, 77, 0.1) !important;
}

html[data-theme="dark"] .day-cell.selected {
    background: rgba(249, 115, 22, 0.2) !important;
}

/* Calendar Events Section */
html[data-theme="dark"] .date-badge {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .date-day {
    color: var(--danger) !important;
}

html[data-theme="dark"] .date-weekday {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .date-month {
    color: var(--text-secondary) !important;
}

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

html[data-theme="dark"] .event-card.holiday {
    background: linear-gradient(135deg, rgba(140, 77, 77, 0.1), rgba(140, 77, 77, 0.05)) !important;
}

html[data-theme="dark"] .event-time-badge {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .event-time-badge span {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .event-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .meta-item {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .event-description {
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color) !important;
}

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

html[data-theme="dark"] .empty-state-card h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .empty-state-card p {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .empty-icon {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ===================================================================
 * Notifications Page Enhancements
 * =================================================================== */

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

html[data-theme="dark"] .sort-dropdown-container {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .sort-dropdown-container select.bg-light {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    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='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

html[data-theme="dark"] .sort-dropdown-container select option {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

html[data-theme="dark"] .filter-btn {
    color: var(--text-secondary);
}

html[data-theme="dark"] .filter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

html[data-theme="dark"] .filter-btn.active {
    background: rgba(79, 70, 229, 0.2);
    color: #818cf8;
}

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

html[data-theme="dark"] .notification-card.unread {
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .notification-message,
html[data-theme="dark"] .unread .notification-message {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .notification-time {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .btn-mark-read {
    color: var(--text-tertiary) !important;
}

html[data-theme="dark"] .btn-mark-read:hover {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .notifications-toolbar .btn-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .notifications-toolbar .btn-light.text-primary {
    color: var(--primary-light) !important;
}

html[data-theme="dark"] .notifications-toolbar .btn-light.text-danger {
    color: var(--danger) !important;
}

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

html[data-theme="dark"] .empty-state h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .empty-state p {
    color: var(--text-secondary) !important;
}

/* Notification Icons and Tags */
html[data-theme="dark"] .icon-success {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .tag-icon-success {
    background: rgba(22, 163, 74, 0.1) !important;
    border-color: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .icon-danger {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .tag-icon-danger {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .icon-warning {
    background: rgba(202, 138, 4, 0.2) !important;
    color: #facc15 !important;
}

html[data-theme="dark"] .tag-icon-warning {
    background: rgba(202, 138, 4, 0.1) !important;
    border-color: rgba(202, 138, 4, 0.2) !important;
    color: #facc15 !important;
}

html[data-theme="dark"] .icon-info {
    background: rgba(2, 132, 199, 0.2) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .tag-icon-info {
    background: rgba(2, 132, 199, 0.1) !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .icon-primary-alt {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
}

html[data-theme="dark"] .tag-icon-primary-alt {
    background: rgba(168, 85, 247, 0.1) !important;
    border-color: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
}

html[data-theme="dark"] .icon-secondary {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .tag-icon-secondary {
    background: rgba(100, 116, 139, 0.1) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
}

/* ===================================================================
 * Profile Page Enhancements
 * =================================================================== */

html[data-theme="dark"] .profile-avatar-initial {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .profile-stats-row,
html[data-theme="dark"] .profile-section {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .profile-stat-bar,
html[data-theme="dark"] .info-row {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .profile-stat-bar:hover,
html[data-theme="dark"] .profile-section-header:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .info-row .info-icon {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .info-row .info-icon[style*="background: rgba(0,136,204,0.08)"] {
    background: rgba(2, 132, 199, 0.2) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .info-row .info-icon[style*="background: rgba(245,158,11,0.1)"] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #facc15 !important;
}

html[data-theme="dark"] .stat-icon-wrap.dept {
    background: rgba(140, 77, 77, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .stat-icon-wrap.batch {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .stat-icon-wrap.bhavan {
    background: rgba(4, 106, 56, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .section-icon-wrap.account {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .section-icon-wrap.academic {
    background: rgba(140, 77, 77, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .section-icon-wrap.personal {
    background: rgba(4, 106, 56, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .section-icon-wrap.contact {
    background: rgba(2, 132, 199, 0.2) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .section-icon-wrap.other {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #facc15 !important;
}

html[data-theme="dark"] .section-icon-wrap.professional {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

html[data-theme="dark"] .info-badge.not-linked {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .info-badge.verified,
html[data-theme="dark"] .info-badge.linked {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .profile-empty-state i {
    color: var(--text-tertiary) !important;
}

/* ===================================================================
 * Edit Profile Page Enhancements
 * =================================================================== */

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

html[data-theme="dark"] .edit-section-header:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .edit-locked-row {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .edit-lock-badge,
html[data-theme="dark"] .edit-locked-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .edit-form-group input,
html[data-theme="dark"] .edit-form-group select,
html[data-theme="dark"] .edit-form-group textarea,
html[data-theme="dark"] .edit-radio-option label.radio-card {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .edit-form-group input:focus,
html[data-theme="dark"] .edit-form-group select:focus,
html[data-theme="dark"] .edit-form-group textarea:focus {
    border-color: var(--primary-light) !important;
}

html[data-theme="dark"] .edit-form-group input:disabled,
html[data-theme="dark"] .edit-form-group select:disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .edit-photo-upload-info input[type="file"],
html[data-theme="dark"] .edit-cover-area input[type="file"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .edit-photo-upload-info input[type="file"]:hover,
html[data-theme="dark"] .edit-cover-area input[type="file"]:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .edit-photo-preview {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .edit-btn-cancel {
    background: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .edit-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Edit Section Icons */
html[data-theme="dark"] .edit-section-icon.account {
    background: rgba(140, 77, 77, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .edit-section-icon.contact {
    background: rgba(4, 106, 56, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .edit-section-icon.address {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .edit-section-icon.photo {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
}

html[data-theme="dark"] .edit-section-icon.academic {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
}

html[data-theme="dark"] .edit-section-icon.locked {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .edit-section-icon.locked {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .edit-cover-preview {
    border: 1px solid var(--border-color) !important;
}

/* ===================================================================
 * Exclamation Circle Icon — Dark Mode Context Colors
 * =================================================================== */

/* Default standalone icon — vivid electric violet */
html[data-theme="dark"] .fa-exclamation-circle {
    color: #c084fc !important;
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.55));
}

/* Inside alert-danger — bright coral red */
html[data-theme="dark"] .alert-danger .fa-exclamation-circle,
html[data-theme="dark"] .alert-danger .fa-exclamation-circle.me-2 {
    color: #f87171 !important;
    filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.5));
}

/* Inside alert-warning — vivid neon gold */
html[data-theme="dark"] .alert-warning .fa-exclamation-circle,
html[data-theme="dark"] .alert-warning .fa-exclamation-circle.me-2 {
    color: #fcd34d !important;
    filter: drop-shadow(0 0 6px rgba(252, 211, 77, 0.6));
}

/* Inside alert-info — sky blue */
html[data-theme="dark"] .alert-info .fa-exclamation-circle,
html[data-theme="dark"] .alert-info .fa-exclamation-circle.me-2 {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.4));
}

/* Inside alert headings (.alert-heading) */
html[data-theme="dark"] .alert-heading .fa-exclamation-circle {
    color: inherit !important;
    opacity: 0.9;
}

/* Inside page headers (.page-header-title) — bright orange accent */
html[data-theme="dark"] .page-header-title .fa-exclamation-circle,
html[data-theme="dark"] h1 .fa-exclamation-circle,
html[data-theme="dark"] h2 .fa-exclamation-circle,
html[data-theme="dark"] h3 .fa-exclamation-circle,
html[data-theme="dark"] h5 .fa-exclamation-circle {
    color: #fb923c !important;
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.4));
}

/* Inside disclaimer / inline warning messages */
html[data-theme="dark"] [class*="disclaimer"] .fa-exclamation-circle,
html[data-theme="dark"] .text-warning .fa-exclamation-circle {
    color: #c084fc !important;
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.45));
}

/* ===================================================================
 * Routine Table Enhancements
 * =================================================================== */

html[data-theme="dark"] .routine-table tbody td:first-child {
    background-color: var(--card-bg) !important;
    color: #fb923c !important;
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .routine-table thead th:first-child {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .routine-table .card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .routine-table .card .text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .routine-table .card .text-muted {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .routine-table td.bg-light[style*="repeating-linear-gradient"] {
    background-color: rgba(255, 255, 255, 0.03) !important;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.05) 10px, rgba(255, 255, 255, 0.05) 20px) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .routine-table th.bg-secondary {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===================================================================
 * Gatepass Enhancements
 * =================================================================== */

html[data-theme="dark"] .no-history-box {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* ===================================================================
 * Generic Utilities & Alerts
 * =================================================================== */

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

html[data-theme="dark"] .alert-info {
    background-color: rgba(2, 132, 199, 0.2) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(22, 163, 74, 0.2) !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #facc15 !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    color: #f87171 !important;
}

/* ===================================================================
 * Landing Page Dark Mode Overrides
 * =================================================================== */

html[data-theme="dark"] {
    /* Landing Page Variables */
    --color-cream: #0f172a;
    --color-cream-dark: #1e293b;
    --color-dark: #f8fafc;
    --color-dark-muted: #cbd5e1;
    --color-text: #94a3b8;
    --color-text-muted: #64748b;
    --glass-bg-light: rgba(15, 23, 42, 0.85);

    /* Legal Pages Variables */
    --bg-body: #0f172a;
    --bg-paper: #1e293b;
    --text-main: #cbd5e1;
    --text-heading: #f8fafc;
    --border-color: #334155;
}

/* Landing Page Overrides */
html[data-theme="dark"] .section-alt-bg {
    background-color: var(--color-cream-dark);
}

html[data-theme="dark"] .main-header.scrolled {
    background-color: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .main-header.scrolled .logo-text,
html[data-theme="dark"] .main-header.scrolled .main-nav a {
    color: var(--color-dark);
}

html[data-theme="dark"] .main-header.scrolled .main-nav a:hover {
    color: var(--color-saffron);
}

html[data-theme="dark"] .main-header:not(.scrolled) .login-btn:hover,
html[data-theme="dark"] .main-header:not(.scrolled) .login-btn:focus,
html[data-theme="dark"] .main-header:not(.scrolled) .login-btn:active {
    background: linear-gradient(135deg, var(--color-saffron), var(--color-saffron-dark)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4) !important;
}

html[data-theme="dark"] .main-header.scrolled .login-btn {
    border: 1px solid var(--color-saffron);
}

html[data-theme="dark"] .philosophy-showcase .philosophy-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .phil-explore-btn {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    color: #ffffff !important;
    border: 1px solid rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .phil-explore-btn:hover {
    background: linear-gradient(135deg, #ea580c, #9a3412) !important;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45) !important;
}

html[data-theme="dark"] .filter-btn {
    background: #9a9a9abf !important;
    border: 1px solid rgb(255 255 255) !important;
    color: #140907 !important;
}

html[data-theme="dark"] .filter-btn:hover {
    color: var(--color-saffron) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .filter-btn.active {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .institution-card {
    background: var(--color-cream-dark) !important;
    border: 2px solid rgba(255, 255, 255) !important;
}

html[data-theme="dark"] .institution-card:hover {
    border-color: rgba(249, 115, 22, 0.5) !important;
}

html[data-theme="dark"] .card-link-arrow {
    background: rgb(217 90 18) !important;
    color: #f3f3f3 !important;
}

html[data-theme="dark"] .institution-card:hover .card-link-arrow {
    background: var(--color-saffron) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .main-footer {
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix Hero Typography */
html[data-theme="dark"] .hero-desc {
    color: rgba(251, 251, 251);
}

html[data-theme="dark"] .stat-num {
    color: var(--color-dark);
}

/* Fix Text on Philosophy & Cards */
html[data-theme="dark"] .phil-description,
html[data-theme="dark"] .phil-lead-description,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .card-content p,
html[data-theme="dark"] .brand-pitch,
html[data-theme="dark"] .copyright p {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-content h3,
html[data-theme="dark"] .footer-title,
html[data-theme="dark"] .footer-brand h4,
html[data-theme="dark"] .quote-author-sig .sig-name {
    color: var(--color-dark) !important;
}

html[data-theme="dark"] .phil-quote {
    color: var(--color-saffron) !important;
}

/* ===================================================================
 * Legal Pages (Privacy Policy, Terms) Dark Mode Overrides
 * =================================================================== */

/* Fix the Ambient Waves hiding the dark body */
html[data-theme="dark"] .ambient-waves {
    background: linear-gradient(120deg, var(--bg-body) 0%, #060913 100%) !important;
}

html[data-theme="dark"] .ambient-waves::before,
html[data-theme="dark"] .ambient-waves::after {
    background: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .theme-toggle-btn {
    color: var(--text-heading, #f8fafc) !important;
}

html[data-theme="dark"] .content p {
    color: var(--text-main) !important;
}

html[data-theme="dark"] h1.doc-title,
html[data-theme="dark"] .clause strong,
html[data-theme="dark"] .doc-classification,
html[data-theme="dark"] .article-title,
html[data-theme="dark"] .article-number,
html[data-theme="dark"] .meta-value {
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .paper {
    background-image: linear-gradient(rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 0.9)), var(--texture-url) !important;
    background-color: var(--bg-paper) !important;
}

html[data-theme="dark"] .logo-placeholder {
    background: linear-gradient(135deg, var(--bg-body), #1e293b) !important;
}

html[data-theme="dark"] .btn-back-top {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .matrix-table th {
    background-color: #0f172a !important;
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .matrix-table td:first-child {
    background-color: #1e293b !important;
    color: var(--text-heading) !important;
}

html[data-theme="dark"] .matrix-table tr:hover td {
    background-color: #0f172a !important;
}

html[data-theme="dark"] .matrix-table tr:nth-child(even) {
    background-color: #0f172a !important;
}

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

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

/* ===================================================================
 * Select2 Dark Theme Overrides
 * =================================================================== */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary) !important;
    color: white !important;
}

html[data-theme="dark"] .select2-results__option {
    background-color: transparent;
    color: var(--text-secondary);
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--danger) !important;
}

/* ===================================================================
 * List Group Dark Theme Overrides
 * =================================================================== */
html[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

/* ===================================================================
 * Input Calendar/Time Icons Dark Theme Override
 * =================================================================== */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ===================================================================
 * Tabulator Dark Theme Overrides
 * =================================================================== */
html[data-theme="dark"] .tabulator,
html[data-theme="dark"] .tabulator .tabulator-header,
html[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table,
html[data-theme="dark"] .tabulator-row,
html[data-theme="dark"] .tabulator-row.tabulator-row-even,
html[data-theme="dark"] .tabulator-row.tabulator-row-odd,
html[data-theme="dark"] .tabulator-footer {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .tabulator .tabulator-header .tabulator-col,
html[data-theme="dark"] .tabulator .tabulator-header .tabulator-col-row-handle {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .tabulator-row .tabulator-cell {
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Hover & Selected States */
html[data-theme="dark"] .tabulator-row:hover,
html[data-theme="dark"] .tabulator-row.tabulator-selectable:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .tabulator-row.tabulator-selected {
    background-color: rgba(249, 115, 22, 0.2) !important;
    /* Soft primary color */
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .tabulator-row.tabulator-selected:hover {
    background-color: rgba(249, 115, 22, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Editing cells / inputs inside tabulator */
html[data-theme="dark"] .tabulator-edit-select-list {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .tabulator-edit-select-list .tabulator-edit-select-list-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

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

/* ============================================================
   DARK MODE OVERRIDES FOR LEAVE CARDS
   ============================================================ */
html[data-theme="dark"] .leave-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .leave-card .bg-light {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .leave-card .text-dark,
html[data-theme="dark"] .leave-card strong.text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .leave-card .text-muted,
html[data-theme="dark"] .leave-card .text-secondary {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .leave-card .leave-card-actions {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .leave-card .border-end {
    border-right-color: var(--border-color) !important;
}

/* ============================================================
   DARK MODE OVERRIDES FOR PRESENCE LOOKUP
   ============================================================ */
html[data-theme="dark"] #attendanceLookupCard,
html[data-theme="dark"] #attendanceLookupCard .card-header,
html[data-theme="dark"] #attendanceLookupCard .bg-white {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] #attendanceLookupCard .text-dark,
html[data-theme="dark"] #attendanceLookupCard .fw-bold.text-dark {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] #attendanceLookupCard .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================================
   DARK MODE OVERRIDES FOR TABLE & FILTERS
   ============================================================ */
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light>th,
html[data-theme="dark"] .table-light>td,
html[data-theme="dark"] table thead.table-light {
    background: rgba(0, 0, 0, 0.2) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #f8fafc !important;
    /* text-primary */
    border-color: #334155 !important;
    /* border-color */
}

/* Force the filter row itself to have dark background */
html[data-theme="dark"] table th.table-filters-row.bg-light,
html[data-theme="dark"] table tr.table-light th.bg-light {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

html[data-theme="dark"] table .advanced-filters-container {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 8px;
}

/* Fix transparent/white inputs by using explicit dark hex colors */
html[data-theme="dark"] .column-filter {
    background-color: #0f172a !important;
    /* app-bg */
    color: #f8fafc !important;
    /* text-primary */
    border: 1px solid #334155 !important;
    /* border-color */
}

html[data-theme="dark"] .column-filter::placeholder {
    color: #94a3b8 !important;
    /* text-tertiary */
}

html[data-theme="dark"] .column-filter option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .filter-column {
    background-color: transparent !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .sort-icon {
    color: #94a3b8 !important;
    /* text-tertiary */
}

/* ============================================================
   DARK MODE OVERRIDES FOR RAILWAY TICKET
   ============================================================ */
html[data-theme="dark"] {
    --ticket-bg: var(--card-bg, #1e293b);
    --ticket-border: var(--border-color, #334155);
    --ticket-primary: #38bdf8;
    /* Bright blue for dark mode */
    --ticket-accent: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .railway-ticket::before,
html[data-theme="dark"] .railway-ticket::after {
    background-image: radial-gradient(circle, var(--app-bg, #0f172a) 8px, transparent 8px);
}

html[data-theme="dark"] .ticket-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom-color: var(--ticket-border);
}

html[data-theme="dark"] .ticket-number {
    color: #f8fafc;
}

html[data-theme="dark"] .info-group label,
html[data-theme="dark"] .route-point .label,
html[data-theme="dark"] .changes-table th,
html[data-theme="dark"] .val-old {
    color: #94a3b8;
    /* text-tertiary */
}

html[data-theme="dark"] .val-new {
    color: #34d399 !important;
    /* Brighter green for better visibility */
}

html[data-theme="dark"] .info-group span,
html[data-theme="dark"] .route-point .city,
html[data-theme="dark"] .change-row td:first-child {
    color: var(--text-primary, #f8fafc);
}

html[data-theme="dark"] .passenger-info {
    border-bottom-color: var(--ticket-border);
}

html[data-theme="dark"] .route-arrow i {
    color: #475569;
}

html[data-theme="dark"] .route-arrow::before {
    background: #334155;
}

html[data-theme="dark"] .change-row td {
    color: var(--text-primary, #f8fafc);
}

html[data-theme="dark"] .ticket-footer {
    background: rgba(0, 0, 0, 0.15);
    border-top-color: var(--ticket-border);
    color: #cbd5e1;
    /* text-secondary */
}

html[data-theme="dark"] .remarks-box {
    background: rgba(245, 158, 11, 0.1);
    color: #f8fafc;
}

html[data-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}

/* ============================================================
   DARK MODE OVERRIDES FOR MCR PAGE
   ============================================================ */
html[data-theme="dark"] #mcr-page .mcr-tabs {
    background: var(--app-bg);
}

html[data-theme="dark"] #mcr-page .mcr-tab {
    color: var(--text-secondary);
}

html[data-theme="dark"] #mcr-page .mcr-tab:hover {
    color: var(--text-primary);
}

html[data-theme="dark"] #mcr-page .mcr-tab.active {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: none;
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] #mcr-page .history-controls,
html[data-theme="dark"] #mcr-page .history-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] #mcr-page .history-controls input,
html[data-theme="dark"] #mcr-page .history-controls select,
html[data-theme="dark"] #mcr-page .daily-remarks-input {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

html[data-theme="dark"] #mcr-page .history-card-header {
    border-color: var(--border-color);
}

html[data-theme="dark"] #mcr-page .history-card-footer {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-secondary);
}

html[data-theme="dark"] #mcr-page .status-badge.approved {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

html[data-theme="dark"] #mcr-page .status-badge.rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

html[data-theme="dark"] #mcr-page .changes-summary {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] #mcr-page .remarks-block,
html[data-theme="dark"] #mcr-page .daily-req-reason {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
}

html[data-theme="dark"] #mcr-page .daily-req-item {
    border-color: var(--border-color);
}

html[data-theme="dark"] #mcr-page .daily-req-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] #mcr-page .daily-req-name {
    color: var(--text-primary);
}

html[data-theme="dark"] #mcr-page .daily-req-meta,
html[data-theme="dark"] #mcr-page .changes-summary .old-val {
    color: var(--text-secondary);
}

html[data-theme="dark"] #mcr-page .daily-actioned-status.approved {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

html[data-theme="dark"] #mcr-page .daily-actioned-status.rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

html[data-theme="dark"] #mcr-page .daily-actioned-status.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

html[data-theme="dark"] #mcr-page .meal-request-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] #mcr-page .meal-request-card .card-header,
html[data-theme="dark"] #mcr-page .meal-request-card .card-footer {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--border-color);
}

html[data-theme="dark"] #mcr-page .meal-request-card .request-reason {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--border-color);
    padding: 10px;
}

html[data-theme="dark"] #mcr-page .preference-comparison-table td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme="dark"] #mcr-page .card-empty-state {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ============================================================
   DARK MODE OVERRIDES FOR "APPLY FOR A DOCUMENT" PAGE
   ============================================================ */
html[data-theme="dark"] .student-id-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .id-card-avatar-fallback {
    background: rgba(249, 115, 22, 0.2) !important;
    /* Soft primary color */
    color: var(--primary) !important;
    border-color: var(--card-bg) !important;
}

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

html[data-theme="dark"] .doc-card-label:hover {
    border-color: var(--primary) !important;
    background: rgba(249, 115, 22, 0.05) !important;
}

html[data-theme="dark"] .doc-card-icon {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .doc-card-input:checked+.doc-card-label {
    background-color: rgba(249, 115, 22, 0.15) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .doc-card-input:checked+.doc-card-label .doc-card-icon {
    color: var(--primary) !important;
}

/* ============================================================
   DARK MODE OVERRIDES FOR "MY MESSAGES" PAGE
   ============================================================ */
html[data-theme="dark"] .message-card-action-needed {
    background-color: rgba(239, 68, 68, 0.15) !important;
    /* Subtle dark red background */
    border-color: var(--border-color);
    border-left-color: var(--danger) !important;
}

html[data-theme="dark"] .message-card-link:hover .message-card-action-needed {
    border-color: var(--danger) !important;
    background-color: rgba(239, 68, 68, 0.25) !important;
}

/* ============================================================
   DARK MODE OVERRIDES FOR CAMPUS ACCESS SCHEDULE
   ============================================================ */
html[data-theme="dark"] .time-block-row {
    background-color: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .time-block-row label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .time-block-row.highlight {
    background-color: rgba(249, 115, 22, 0.1) !important;
    border-color: var(--primary) !important;
}

html[data-theme="dark"] .add-block-btn {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .add-block-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background-color: rgba(249, 115, 22, 0.1) !important;
}

html[data-theme="dark"] #defaultTimelineBar,
html[data-theme="dark"] #overrideTimelineBar {
    background-color: rgba(239, 68, 68, 0.15) !important;
    /* Subtle dark red for restricted */
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ============================================================
   DARK MODE OVERRIDES FOR SELECT DROPDOWN ARROWS
   ============================================================ */
html[data-theme="dark"] .form-select {
    /* Replace the default black SVG arrow with a white one */
    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='%23f8fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* ============================================================
   ACTION HUB / ACCORDION DARK MODE OVERRIDES
   ============================================================ */
html[data-theme="dark"] .accordion-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .accordion-button {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

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

/* Invert the default dark chevron for collapsed state */
html[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(2);
}

/* Keep the colored orange SVG for the expanded state */
html[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    filter: brightness(1.2);
}

/* ============================================================
   INBOX / STUDENT MESSAGES DARK MODE
   ============================================================ */

/* Top Right Counters (Stat Pills) */
html[data-theme="dark"] .inbox-hero .stat-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .inbox-hero .stat-pill.urgent {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] .inbox-hero .stat-pill.success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

/* Control Bar & Search */
html[data-theme="dark"] .inbox-control-bar {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inbox-search-input {
    background-color: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Filter Pills */
html[data-theme="dark"] .filter-pill {
    background-color: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .filter-pill:hover {
    background-color: var(--hover-bg) !important;
    border-color: var(--text-tertiary) !important;
}

html[data-theme="dark"] .filter-pill.active {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

html[data-theme="dark"] .filter-pill .pill-badge {
    background: var(--card-bg) !important;
    color: var(--primary) !important;
}

/* Message Rows (The white boxes) */
html[data-theme="dark"] .inbox-message-row {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inbox-message-row:hover {
    border-color: var(--primary) !important;
    background-color: var(--hover-bg) !important;
}

html[data-theme="dark"] .inbox-message-row.is-unread {
    background: rgba(249, 115, 22, 0.15) !important;
    /* Overrides gradient, slightly higher opacity for contrast */
    border-left-color: var(--primary) !important;
}

/* Message Text Details */
html[data-theme="dark"] .inbox-message-row .message-sender {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inbox-message-row .message-subject {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .inbox-message-row .message-preview {
    color: var(--text-tertiary) !important;
}

html[data-theme="dark"] .inbox-message-row .message-time {
    color: var(--text-tertiary) !important;
}

/* Status Badges */
html[data-theme="dark"] .inbox-badge-new {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .inbox-badge-urgent {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .inbox-badge-waiting {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .inbox-badge-resolved {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .inbox-badge-default {
    background-color: rgba(107, 114, 128, 0.2) !important;
    color: #d1d5db !important;
}

/* Conference Room Booking Overrides */
html[data-theme="dark"] .cr-slot-pill:not(.selected):not(.status-booked):not(.status-routine) {
    background-color: var(--app-bg) !important;
}

html[data-theme="dark"] .cr-hero-card .bg-white,
html[data-theme="dark"] .cr-hero-card .bg-light {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .cr-hero-card input {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .dot-available {
    background-color: var(--app-bg) !important;
}

/* CKEditor 5 Dark Mode Overrides */
html[data-theme="dark"] .ck.ck-editor__main>.ck-editor__editable {
    background-color: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

html[data-theme="dark"] .ck.ck-button {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .ck.ck-button:hover,
html[data-theme="dark"] .ck.ck-button.ck-on {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

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

html[data-theme="dark"] .ck.ck-list__item>.ck-button {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .ck.ck-list__item>.ck-button:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}

html[data-theme="dark"] .ck.ck-input-text {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Notification Feed Cards */
html[data-theme="dark"] .notification-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .notification-card.unread {
    background: rgba(249, 115, 22, 0.1) !important;
}

html[data-theme="dark"] .notification-card.highlight-anim::after {
    background: var(--card-bg) !important;
}

html[data-theme="dark"] .notification-message,
html[data-theme="dark"] .unread .notification-message {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .notification-time {
    color: var(--text-secondary) !important;
}

/* Principal Dashboard - Department Presence */
html[data-theme="dark"] .principal-dept-item {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .principal-dept-name {
    color: var(--text-primary) !important;
    font-weight: 500;
}

html[data-theme="dark"] .principal-dept-badge {
    background-color: var(--divider-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .principal-progress.bg-gray-500 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Leave/Application Details Page */
html[data-theme="dark"] .btn-back {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn-back:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .breadcrumb-item {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .reason-header-compact {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .breadcrumb-separator {
    color: var(--divider-color) !important;
}

html[data-theme="dark"] .leave-type-badge {
    background: rgba(255, 179, 0, 0.15) !important;
    border-color: rgba(255, 179, 0, 0.3) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] .duration-badge {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .request-id-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Status Badges */
html[data-theme="dark"] .badge-status-approved {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html[data-theme="dark"] .badge-status-pending {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html[data-theme="dark"] .badge-status-rejected,
html[data-theme="dark"] .badge-status-cancelled {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Override inline styles for Principal badge (starts with background: #ede9fe) */
html[data-theme="dark"] span.badge-status[style*="#ede9fe"] {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

html[data-theme="dark"] .leave-detail-page .card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .leave-detail-page .card-header,
html[data-theme="dark"] .card-actions {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .leave-detail-page .card-header h5,
html[data-theme="dark"] .workflow-title,
html[data-theme="dark"] .date-block-value,
html[data-theme="dark"] .detail-value-compact,
html[data-theme="dark"] .history-id,
html[data-theme="dark"] .meal-name,
html[data-theme="dark"] .meal-section-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .date-block-label,
html[data-theme="dark"] .detail-label-compact,
html[data-theme="dark"] .history-date,
html[data-theme="dark"] .history-reason {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dates-strip,
html[data-theme="dark"] .reason-content-compact,
html[data-theme="dark"] .date-range,
html[data-theme="dark"] .meal-option,
html[data-theme="dark"] .workflow-remarks {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .workflow-icon {
    border-color: var(--card-bg) !important;
}

html[data-theme="dark"] .workflow-step.skipped .workflow-icon,
html[data-theme="dark"] .workflow-step:not(.completed):not(.rejected):not(.pending) .workflow-icon {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .btn-view-snapshot {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .detail-item {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .card-header-gradient {
    background: linear-gradient(135deg, rgba(255, 179, 0, 0.25) 0%, rgba(230, 162, 0, 0.05) 100%) !important;
}

html[data-theme="dark"] .card-header-modern .card-avatar {
    border-color: var(--card-bg) !important;
}

html[data-theme="dark"] .student-name-wrapper h4 {
    color: var(--text-primary) !important;
}

/* Modern Alerts (Superseded, Errors) */
html[data-theme="dark"] .alert-modern {
    background: var(--card-bg) !important;
}

html[data-theme="dark"] .alert-warning-modern {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

html[data-theme="dark"] .alert-danger-modern {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

html[data-theme="dark"] .alert-content h6 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .alert-content p {
    color: var(--text-secondary) !important;
}

/* Sidebar Badge Fixes */
.details-list dd .badge {
    white-space: normal;
    word-break: break-word;
    height: auto;
    line-height: 1.4;
    text-align: left;
}

/* Mobile time scroller fix */
html[data-theme="dark"] {
    color-scheme: dark;
}

/* Auto-adjust calendar and time picker icons for dark theme natively */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"] {
    color-scheme: dark !important;
}

html[data-theme="dark"] input::-webkit-calendar-picker-indicator {
    filter: none !important;
    cursor: pointer;
}

/* Custom Toggle for Unknown Arrival */
html[data-theme="dark"] .unknown-arrival-wrapper {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    margin-top: 15px;
}

html[data-theme="dark"] .unknown-arrival-wrapper .form-check-input {
    margin-left: 0 !important;
    margin-top: 0;
    cursor: pointer;
}

html[data-theme="dark"] .unknown-arrival-wrapper .form-check-label {
    margin-left: 12px;
    font-weight: 500;
    color: #60a5fa;
    cursor: pointer;
}

/* Fix Details Panel Overflow */
html[data-theme="dark"] .details-list .badge,
html[data-theme="dark"] .details-list span,
html[data-theme="dark"] .details-list div {
    white-space: normal;
    word-break: break-word;
}

/* ===================================================================
   Global Custom Toggle Switch (Dark Theme)
   =================================================================== */
html[data-theme="dark"] .form-switch .form-check-input {
    background-color: transparent !important;
    border: 2px solid #f8fafc !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.8' fill='%23f8fafc'/%3e%3c/svg%3e") !important;
    background-size: contain !important;
}

html[data-theme="dark"] .form-switch .form-check-input:focus {
    border-color: #f8fafc !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #f8fafc !important;
    border-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.8' fill='%230f172a'/%3e%3c/svg%3e") !important;
}

/* ===================================================================
   Global Warning Color Override for Dark Theme
   Replace glaring #ffc107 with a muted, eye-adjusting amber (#d97706)
   =================================================================== */
html[data-theme="dark"] .bg-warning {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .text-warning {
    color: #f59e0b !important;
    /* Lighter amber for better text contrast against dark backgrounds */
}

html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge-warning {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .border-warning {
    border-color: #d97706 !important;
}

html[data-theme="dark"] .btn-warning {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-warning:hover {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

/* ===================================================================
   Global Overrides for subtle backgrounds and outline buttons in Dark Theme
   =================================================================== */
html[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: #a3cfbb !important;
}

html[data-theme="dark"] .border-success {
    border-color: #198754 !important;
}

html[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #ea868f !important;
}

html[data-theme="dark"] .bg-info-subtle {
    background-color: rgba(13, 202, 240, 0.2) !important;
    color: #6edff6 !important;
}

html[data-theme="dark"] .btn-outline-dark {
    color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}

html[data-theme="dark"] .btn-outline-dark:hover {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

/* ===================================================================
   Global Overrides for Dark Text Classes in Dark Theme
   Fixes elements with .text-dark or computed colors like rgb(33 37 41) & rgb(29 39 57) 
   so they don't blend into the dark background.
   =================================================================== */
html[data-theme="dark"] .text-dark {
    color: #f8fafc !important;
    /* Converts dark text to crisp white in dark mode */
}

html[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
    /* Makes muted text lighter and visible in dark mode */
}

/* ===================================================================
   Dark Mode Overrides for Notification Items
   =================================================================== */
html[data-theme="dark"] .notif-item-colored:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Base unread state in dark mode instead of bg-light */
html[data-theme="dark"] .list-group-item.bg-light.notif-item-colored {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Dark mode Type Badges and Numbers */
html[data-theme="dark"] .notif-badge-leave,
html[data-theme="dark"] .notif-num-leave {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .notif-badge-meal,
html[data-theme="dark"] .notif-num-meal {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .notif-badge-mess,
html[data-theme="dark"] .notif-num-mess {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .notif-badge-emergency,
html[data-theme="dark"] .notif-num-emergency {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .notif-badge-notice,
html[data-theme="dark"] .notif-num-notice {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] .notif-badge-document,
html[data-theme="dark"] .notif-num-document {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
}

html[data-theme="dark"] .notif-badge-gatepass,
html[data-theme="dark"] .notif-num-gatepass {
    background: rgba(20, 184, 166, 0.2) !important;
    color: #5eead4 !important;
}

html[data-theme="dark"] .notif-badge-forward,
html[data-theme="dark"] .notif-num-forward {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .notif-badge-default,
html[data-theme="dark"] .notif-num-default {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #cbd5e1 !important;
}

/* ===================================================================
   Dark Mode Overrides for Left Panel Module Buttons
   Fixes the harsh "white 90%" color mix
   =================================================================== */

/* Override the white 90% color-mix for the icon wrapper background */
html[data-theme="dark"] body .module-btn .module-btn-icon-wrapper {
    background-color: color-mix(in srgb, var(--hover-color), transparent 25%) !important;
}

/* Override the hover background for the button itself (instead of white 90%) */
html[data-theme="dark"] body .module-btn:hover {
    background-color: color-mix(in srgb, var(--hover-color), transparent 90%) !important;
}

/* Override the hover background for the icon wrapper */
html[data-theme="dark"] body .module-btn:hover .module-btn-icon-wrapper {
    background-color: var(--hover-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--hover-color), transparent 60%) !important;
}

/* Ensure text remains visible/colored correctly on hover */
html[data-theme="dark"] body .module-btn:hover span {
    color: var(--hover-color) !important;
}

/* Ensure chevron uses the hover color */
html[data-theme="dark"] body .module-btn:hover .module-chevron {
    color: var(--hover-color) !important;
}

/* ===================================================================
   HOD Indicator Badge — Dark Mode
   Replaces the blinding neon yellow (#eef133) with a premium
   dark-mode teal/cyan pill with glow
   =================================================================== */
html[data-theme="dark"] .hod-indicator.nav-btn-pill {
    background: linear-gradient(135deg, #134e4a, #0f766e) !important;
    color: #5eead4 !important;
    border-color: rgba(94, 234, 212, 0.3) !important;
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .hod-indicator.nav-btn-pill .hod-label {
    color: #ccfbf1 !important;
}

html[data-theme="dark"] .hod-indicator.nav-btn-pill .hod-dept {
    color: #99f6e4 !important;
}

/* ===================================================================
   Mobile Module Buttons — High-Specificity Dark Overrides
   Beats the !important rules in teachers_dashboard.css using
   higher CSS specificity (html[data-theme] body selector chain)
   =================================================================== */
html[data-theme="dark"] body .supt-layout-wrapper .module-btn {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-primary, #e2e8f0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] body .supt-layout-wrapper .module-btn span {
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] body .supt-layout-wrapper .module-btn-icon-wrapper {
    background: color-mix(in srgb, var(--hover-color, #6366f1), transparent 30%) !important;
}

html[data-theme="dark"] body .supt-layout-wrapper .module-btn-icon-wrapper i {
    color: #fff !important;
}

html[data-theme="dark"] body .supt-layout-wrapper .module-btn:active {
    background: color-mix(in srgb, var(--hover-color, #6366f1), transparent 75%) !important;
}

/* ===================================================================
   Notification Widget — nw-num-* & nw-badge-* Dark Mode Overrides
   Replaces all the light pastel backgrounds (#dbeafe, #dcfce7 etc.)
   with dark semi-transparent tints that look great on dark backgrounds
   =================================================================== */

/* Numbered Circles */
html[data-theme="dark"] .nw-num-leave {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .nw-num-meal {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .nw-num-mess {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .nw-num-emergency {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .nw-num-notice {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] .nw-num-document {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
}

html[data-theme="dark"] .nw-num-gatepass {
    background: rgba(20, 184, 166, 0.2) !important;
    color: #5eead4 !important;
}

html[data-theme="dark"] .nw-num-forward {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .nw-num-default {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
}

/* Type Badges */
html[data-theme="dark"] .nw-badge-leave {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .nw-badge-meal {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .nw-badge-mess {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .nw-badge-emergency {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .nw-badge-notice {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] .nw-badge-document {
    background: rgba(6, 182, 212, 0.18) !important;
    color: #67e8f9 !important;
}

html[data-theme="dark"] .nw-badge-gatepass {
    background: rgba(20, 184, 166, 0.18) !important;
    color: #5eead4 !important;
}

html[data-theme="dark"] .nw-badge-forward {
    background: rgba(249, 115, 22, 0.18) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] .nw-badge-default {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #cbd5e1 !important;
}

/* Unread dot — pulsing blue */
html[data-theme="dark"] .nw-unread-dot {
    background: #60a5fa !important;
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}

/* Mark-all-read btn accessible text */
html[data-theme="dark"] .nw-card .text-dark {
    color: var(--text-primary, #e2e8f0) !important;
}

/* ===================================================================
   HOD / Teacher — Approval Queue Dark Mode Fixes
   (hod/review_leave.php & equivalent pages)
   =================================================================== */

/* Page text */
html[data-theme="dark"] .page-container {
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .page-header h1 {
    color: #f87171 !important;
}

html[data-theme="dark"] .page-header p {
    color: var(--text-secondary, #94a3b8) !important;
}

/* Dashboard stat widgets */
html[data-theme="dark"] .dashboard-widget {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .widget-title {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .widget-value {
    color: var(--text-primary, #f1f5f9) !important;
}

/* Search / control bar */
html[data-theme="dark"] .leave-control-bar {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
}

html[data-theme="dark"] .control-desktop input[type="text"],
html[data-theme="dark"] .control-desktop input[type="search"] {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .control-desktop input::placeholder {
    color: var(--text-secondary, #64748b) !important;
}

html[data-theme="dark"] .controls-right select {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

/* Leave request cards */
html[data-theme="dark"] .review-queue-card {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .review-queue-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .review-queue-card.is-urgent {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444, 0 4px 20px rgba(239, 68, 68, 0.2) !important;
}

/* Card body text */
html[data-theme="dark"] .queue-card-body {
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .queue-card-title {
    color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .queue-card-sub {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .leave-card-info p {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .leave-card-info .text-amber {
    color: #fbbf24 !important;
}

/* Request number badge */
html[data-theme="dark"] .req-num-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

/* Leave type soft badges */
html[data-theme="dark"] .badge-casual-soft {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

html[data-theme="dark"] .badge-medical-soft {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .badge-emergency-soft {
    background: rgba(234, 179, 8, 0.2) !important;
    color: #fde047 !important;
}

html[data-theme="dark"] .badge-secondary-soft {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
}

/* Mobile modal */
html[data-theme="dark"] .mobile-modal {
    background: var(--card-bg, #1e293b) !important;
    color: var(--text-primary, #e2e8f0) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

html[data-theme="dark"] .mobile-modal input,
html[data-theme="dark"] .mobile-modal select {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

/* ===================================================================
   Manage Department Leaves Dark Mode Fixes
   (manage_department_leaves.php)
   =================================================================== */

/* Page Header & Container */
html[data-theme="dark"] .leave-page {
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .leave-header h1 {
    color: #f87171 !important;
}

html[data-theme="dark"] .leave-header .subtitle {
    color: var(--text-secondary, #94a3b8) !important;
}

/* Control Bar & Inputs */
html[data-theme="dark"] .leave-control-bar {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .control-desktop input {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .control-desktop input::placeholder {
    color: var(--text-secondary, #64748b) !important;
}

html[data-theme="dark"] .controls-right select {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

/* Leave Cards */
html[data-theme="dark"] .leave-card {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .leave-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Card Typography & Dividers */
html[data-theme="dark"] .leave-type {
    color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .leave-card-body {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .leave-card-body strong {
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .card-divider {
    background-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

/* Approval Icons inside footer */
html[data-theme="dark"] .approval-icon .status-pending {
    color: #94a3b8 !important;
}

/* Leave Status Badges */
html[data-theme="dark"] .status-approved .leave-status {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .status-pending .leave-status {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .status-rejected .leave-status {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .status-neutral .leave-status {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #cbd5e1 !important;
}

/* Empty State */
html[data-theme="dark"] .empty-state {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .close-modal {
    color: #94a3b8 !important;
}

/* ===================================================================
   Recent Leaves Debug Modal Dark Mode Fixes
   (Used in HOD, Superintendent, and Principal Views)
   =================================================================== */

/* Modal Container & Headers */
html[data-theme="dark"] .leaves-debug-modal {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .leaves-debug-header {
    background: var(--card-bg, #1e293b) !important;
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

html[data-theme="dark"] .leaves-debug-header h5 {
    color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .leaves-debug-close {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .leaves-debug-close:hover {
    color: var(--text-primary, #f8fafc) !important;
}

/* Status Bars */
html[data-theme="dark"] .leaves-debug-status {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

/* Override inline styles for the "NOW: [time]" clock bar */
html[data-theme="dark"] .leaves-debug-status[style*="background: #e0f2fe"] {
    background: rgba(14, 165, 233, 0.15) !important;
    /* soft blue tint */
    border-color: rgba(14, 165, 233, 0.25) !important;
}

html[data-theme="dark"] .leaves-debug-status[style*="background: #e0f2fe"] span,
html[data-theme="dark"] .leaves-debug-status[style*="background: #e0f2fe"] strong {
    color: #bae6fd !important;
    /* light sky blue */
}

html[data-theme="dark"] .leaves-debug-status[style*="background: #e0f2fe"] i {
    color: #38bdf8 !important;
}

/* Modal Body */
html[data-theme="dark"] .leaves-debug-body {
    background: var(--bg-primary, #0f172a) !important;
}

/* Individual Leave Cards */
html[data-theme="dark"] .leave-debug-card {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .leave-debug-card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

html[data-theme="dark"] .leave-debug-id {
    color: var(--text-primary, #f1f5f9) !important;
    font-weight: 600 !important;
}

/* Active Leave Card Highlight */
html[data-theme="dark"] .leave-debug-card.active-leave {
    border-color: rgba(239, 68, 68, 0.5) !important;
    /* Red border */
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3) !important;
}

html[data-theme="dark"] .leave-debug-card.active-leave .leave-debug-card-header {
    background: rgba(239, 68, 68, 0.15) !important;
    /* Soft red bg */
    border-bottom-color: rgba(239, 68, 68, 0.2) !important;
}

/* Card Body Rows */
html[data-theme="dark"] .leave-debug-row {
    border-bottom: 1px dashed var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

html[data-theme="dark"] .leave-debug-label {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .leave-debug-value {
    color: var(--text-primary, #e2e8f0) !important;
}

/* Inactive reason */
html[data-theme="dark"] .leave-debug-inactive-reason {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Empty state inside modal */
html[data-theme="dark"] .leaves-debug-empty {
    color: var(--text-secondary, #94a3b8) !important;
}

/* ===================================================================
   View Students / Department's Students Dark Mode Fixes
   (view_students.php)
   =================================================================== */

/* Stats Cards */
html[data-theme="dark"] body .stat-card {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] body .stat-value {
    color: var(--text-primary, #f8fafc) !important;
}

html[data-theme="dark"] body .stat-label {
    color: var(--text-secondary, #94a3b8) !important;
}

/* Control Hub */
html[data-theme="dark"] body .control-hub {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
}

html[data-theme="dark"] body .control-hub input,
html[data-theme="dark"] body .control-hub select {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] body .control-hub input::placeholder {
    color: var(--text-secondary, #64748b) !important;
}

/* DataTables overides for this page */
html[data-theme="dark"] body .desktop-table-container .table-light,
html[data-theme="dark"] body .desktop-table-container .table-light th {
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #e2e8f0) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

html[data-theme="dark"] body .desktop-table-container table td {
    color: var(--text-secondary, #cbd5e1) !important;
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.05)) !important;
}

html[data-theme="dark"] body .desktop-table-container table td strong {
    color: var(--text-primary, #f1f5f9) !important;
}

/* DataTables UI elements (Length, Filter, Info, Pagination) */
html[data-theme="dark"] body .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] body .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] body .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] body .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] body .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] body .dataTables_wrapper .dataTables_filter input {
    background: var(--bg-primary, #0f172a) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

/* ===================================================================
   View Student Detail Profile Page — Dark Mode Fixes
   (view_student_detail.php + modern_profile.css)
   =================================================================== */
/* Profile Stats Row (left column card) */
html[data-theme="dark"] .profile-stats-row {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255,255,255,0.08)) !important;
}
html[data-theme="dark"] .profile-stat-bar {
    border-bottom-color: var(--border-color, rgba(255,255,255,0.07)) !important;
}
html[data-theme="dark"] .profile-stat-bar:hover {
    background: rgba(255,255,255,0.03) !important;
}
html[data-theme="dark"] .profile-stat-bar .stat-label {
    color: var(--text-secondary, #94a3b8) !important;
}
html[data-theme="dark"] .profile-stat-bar .stat-value {
    color: var(--text-primary, #f1f5f9) !important;
}
/* Avatar Initial */
html[data-theme="dark"] .student-avatar-initials,
html[data-theme="dark"] .student-avatar-initials-sm {
    color: #ffffff !important;
    box-shadow: 0 0 0 2px var(--bg-primary, #0f172a) !important;
}

html[data-theme="dark"] .profile-avatar-initial {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #f87171 !important;
    border-color: var(--bg-primary, #0f172a) !important;
}

/* ===================================================================
   Global Pagination Overrides (Bootstrap & DataTables)
   =================================================================== */

/* Standard Bootstrap Pagination */
html[data-theme="dark"] .pagination .page-item .page-link {
    background-color: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255,255,255,0.1)) !important;
    color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary, #3b82f6) !important;
    border-color: var(--primary, #3b82f6) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255,255,255,0.05)) !important;
    color: var(--text-secondary, #64748b) !important;
}

html[data-theme="dark"] .pagination .page-item .page-link:hover:not(.disabled) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* DataTables Pagination Specifics */
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255,255,255,0.1)) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-radius: 4px;
    margin: 0 2px;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary, #3b82f6) !important;
    border-color: var(--primary, #3b82f6) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background: var(--bg-primary, #0f172a) !important;
    color: var(--text-secondary, #64748b) !important;
    border-color: var(--border-color, rgba(255,255,255,0.05)) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color, rgba(255,255,255,0.2)) !important;
    color: #ffffff !important;
}
/* Section Accordion Cards */
html[data-theme="dark"] .profile-section {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255,255,255,0.08)) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}
html[data-theme="dark"] .profile-section:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] .profile-section-header:hover {
    background: rgba(255,255,255,0.03) !important;
}
html[data-theme="dark"] .profile-section-header .section-title {
    color: var(--text-primary, #f1f5f9) !important;
}
html[data-theme="dark"] .profile-section-header .section-subtitle {
    color: var(--text-secondary, #94a3b8) !important;
}
html[data-theme="dark"] .profile-section-header .section-chevron {
    color: var(--text-secondary, #64748b) !important;
}
/* Info Rows */
html[data-theme="dark"] .info-row {
    border-bottom-color: var(--border-color, rgba(255,255,255,0.07)) !important;
}
html[data-theme="dark"] .info-row .info-icon {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text-secondary, #94a3b8) !important;
}
html[data-theme="dark"] .info-row .info-label {
    color: var(--text-secondary, #94a3b8) !important;
}
html[data-theme="dark"] .info-row .info-value {
    color: var(--text-primary, #e2e8f0) !important;
}
/* Info Tags (roll number pill etc.) */
html[data-theme="dark"] .info-tag {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .info-tag:hover {
    background: rgba(248, 113, 113, 0.25) !important;
}
/* Status Badges */
html[data-theme="dark"] .badge-present,
html[data-theme="dark"] .info-badge.badge-present {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .badge-on-leave,
html[data-theme="dark"] .info-badge.badge-on-leave {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}
/* Attendance Summary Cards */
html[data-theme="dark"] .attendance-summary-card {
    background: var(--bg-primary, #0f172a) !important;
    border-color: var(--border-color, rgba(255,255,255,0.08)) !important;
}
html[data-theme="dark"] .attendance-summary-label {
    color: var(--text-secondary, #94a3b8) !important;
}
html[data-theme="dark"] .attendance-summary-value {
    color: var(--text-primary, #f1f5f9) !important;
}
/* Preserve the blue "Late" inline color */
html[data-theme="dark"] .attendance-summary-value[style*="color: #1d4ed8"] {
    color: #93c5fd !important;
}
/* Attendance Filter Form */
html[data-theme="dark"] .attendance-filter-form .form-label {
    color: var(--text-secondary, #94a3b8) !important;
}
/* Attendance Badges */
html[data-theme="dark"] .attendance-badge-present {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .attendance-badge-late {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .attendance-badge-on-leave {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .attendance-badge-absent {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}
/* Attendance Table header */
html[data-theme="dark"] .attendance-table thead.table-light th {
    background: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #e2e8f0) !important;
    border-color: var(--border-color, rgba(255,255,255,0.1)) !important;
}
html[data-theme="dark"] .attendance-table tbody td {
    color: var(--text-secondary, #cbd5e1) !important;
    border-color: var(--border-color, rgba(255,255,255,0.05)) !important;
}
/* Remark Items */
html[data-theme="dark"] .remark-item {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--border-color, rgba(255,255,255,0.08)) !important;
}
html[data-theme="dark"] .rmk-del-popover {
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
/* Leave History */
html[data-theme="dark"] .leave-history-item {
    border-bottom-color: var(--border-color, rgba(255,255,255,0.06)) !important;
}
html[data-theme="dark"] .leave-info .leave-id {
    color: var(--text-secondary, #94a3b8) !important;
}

/* ===================================================================
   HOD Review Leave Queue Card — Dark Mode
   =================================================================== */

/* Card background & border */
html[data-theme="dark"] .review-queue-card {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .review-queue-card.is-urgent {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444, 0 4px 16px rgba(239, 68, 68, 0.2) !important;
}

/* Card header & body text */
html[data-theme="dark"] .queue-card-header,
html[data-theme="dark"] .queue-card-body,
html[data-theme="dark"] .leave-card-info {
    border-color: var(--border-color, rgba(255, 255, 255, 0.07)) !important;
}

html[data-theme="dark"] .queue-card-title {
    color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .queue-card-sub {
    color: var(--text-secondary, #94a3b8) !important;
}

html[data-theme="dark"] .leave-card-info p,
html[data-theme="dark"] .leave-card-info strong {
    color: var(--text-primary, #e2e8f0) !important;
}

/* Request Number Badge (#1, #2 …) */
html[data-theme="dark"] .req-num-badge {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

/* Checkbox */
html[data-theme="dark"] .request-checkbox.form-check-input {
    background-color: var(--bg-primary, #0f172a) !important;
    border: 2px solid rgba(148, 163, 184, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}

html[data-theme="dark"] .request-checkbox.form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
}

/* Details button (btn-outline-secondary) */
html[data-theme="dark"] .leave-card-actions .btn-outline-secondary {
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    background: transparent !important;
}

html[data-theme="dark"] .leave-card-actions .btn-outline-secondary:hover {
    color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.1) !important;
}

/* Reject button (btn-outline-danger) */
html[data-theme="dark"] .leave-card-actions .btn-outline-danger {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
    background: transparent !important;
}

html[data-theme="dark"] .leave-card-actions .btn-outline-danger:hover {
    color: #ffffff !important;
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* ===================================================================
 * Single Notice Standalone Dark Theme 
 * =================================================================== */
html[data-theme="dark"] body {
    background-color: var(--app-bg);
}

html[data-theme="dark"] .notice-container {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .notice-container .header {
    border-bottom: 1px solid var(--border-color);
}

html[data-theme="dark"] .export-options {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .export-options a {
    color: var(--text-primary);
}

html[data-theme="dark"] .export-options a:hover {
    background-color: var(--app-bg);
}

/* ===================================================================
 * Button Outline Fixes (Dark Theme)
 * =================================================================== */
html[data-theme="dark"] .btn-outline-success {
    border: 1px solid var(--success) !important;
}

html[data-theme="dark"] .btn-outline-danger {
    border: 1px solid var(--danger) !important;
}

/* Table popup column filter buttons */
html[data-theme="dark"] #xl-dlg .btn-outline-secondary {
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ===================================================================
 * View Leave Detail Fixes (Dark Theme)
 * =================================================================== */
html[data-theme="dark"] .workflow-status-badge.approved { background: rgba(16, 185, 129, 0.2); color: #34d399; }
html[data-theme="dark"] .workflow-status-badge.pending { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
html[data-theme="dark"] .workflow-status-badge.rejected { background: rgba(239, 68, 68, 0.2); color: #f87171; }
html[data-theme="dark"] .workflow-status-badge.not_required,
html[data-theme="dark"] .workflow-status-badge.skipped { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
html[data-theme="dark"] .workflow-status-badge[style*="#ede9fe"] { background: rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; border-color: rgba(139, 92, 246, 0.3) !important; }

html[data-theme="dark"] .history-count { background: #334155 !important; color: #f8fafc !important; }

html[data-theme="dark"] .btn-view-snapshot { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.3); color: #fdba74; }
html[data-theme="dark"] .btn-view-snapshot:hover { background: rgba(249, 115, 22, 0.25); border-color: rgba(249, 115, 22, 0.5); color: #fff; }

html[data-theme="dark"] .meal-icon { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); }
html[data-theme="dark"] .meal-option { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .meal-option .meal-name { color: var(--primary); }
html[data-theme="dark"] .meal-indicator .fa-times-circle { color: var(--danger); }
html[data-theme="dark"] .meal-option.active { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); }
html[data-theme="dark"] .meal-option.active .meal-name { color: #34d399; }
html[data-theme="dark"] .meal-option.active .meal-icon { background: rgba(16, 185, 129, 0.2); color: #34d399; }

html[data-theme="dark"] .action-btn { background: var(--card-bg); border-color: var(--border-color); }
html[data-theme="dark"] .action-btn-title { color: var(--text-primary); }
html[data-theme="dark"] .action-btn-desc { color: var(--text-secondary); }
html[data-theme="dark"] .action-btn-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, var(--card-bg) 100%); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; }
html[data-theme="dark"] .action-btn-danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, var(--card-bg) 100%); border-color: rgba(239, 68, 68, 0.4); color: #f87171; }
html[data-theme="dark"] .action-btn[style*="var(--success-light)"] { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--card-bg) 100%) !important; border-color: rgba(16, 185, 129, 0.4) !important; color: #34d399 !important; }
html[data-theme="dark"] .action-btn.disabled:hover { background: linear-gradient(135deg, var(--gray-800) 0%, var(--card-bg) 100%); }

/* Mark All Read Button Styles */
html[data-theme="dark"] .nw-mark-all-btn {
    background-color: rgb(72, 61, 62) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    transition: all 0.3s ease;
}
html[data-theme="dark"] .nw-mark-all-btn:hover:not(:disabled) {
    background-color: rgb(92, 81, 82) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(72, 61, 62, 0.5);
}

/* ===================================================================
   Profile Photo Popup (Dark Theme)
   =================================================================== */
html[data-theme="dark"] #photoPopupCard,
html[data-theme="dark"] #coverPopupCard { background: var(--card-bg); box-shadow: 0 -8px 40px rgba(0,0,0,0.4); }
html[data-theme="dark"] .photo-popup-handle { background: #475569; }
html[data-theme="dark"] .photo-popup-title { color: #f8fafc; }
html[data-theme="dark"] .photo-popup-subtitle { color: #94a3b8; }
html[data-theme="dark"] .photo-popup-btn { background: #334155; color: #f8fafc; }
html[data-theme="dark"] .photo-popup-btn:hover,
html[data-theme="dark"] .photo-popup-btn:focus-visible { background: #475569; }
html[data-theme="dark"] .photo-popup-btn .ppb-desc { color: #94a3b8; }
html[data-theme="dark"] .photo-popup-cancel { background: var(--card-bg); border-color: rgba(255,255,255,0.1); color: #cbd5e1; }
html[data-theme="dark"] .photo-popup-cancel:hover { background: #334155; color: #f8fafc; }

/* ===================================================================
   Manage Student Leaves Status Badges (Dark Theme)
   =================================================================== */
html[data-theme="dark"] .page-container[data-page="superintendent-manage-student-leaves"] .status-badge-approved {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
html[data-theme="dark"] .page-container[data-page="superintendent-manage-student-leaves"] .status-badge-not-required {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}
html[data-theme="dark"] .page-container[data-page="superintendent-manage-student-leaves"] .status-badge-pending {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
html[data-theme="dark"] .page-container[data-page="superintendent-manage-student-leaves"] .status-badge-rejected {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
html[data-theme="dark"] .badge-principal-approved {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

/* ===================================================================
   Hostel Movements (Dark Theme)
   =================================================================== */
html[data-theme="dark"] .stat-chip { background: var(--card-bg) !important; border: 1px solid var(--border-color); color: var(--text-primary) !important; }
html[data-theme="dark"] .stat-chip span { color: var(--text-secondary) !important; }
html[data-theme="dark"] .stat-chip[style*="#fee2e2"] { background: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #f87171 !important; }
html[data-theme="dark"] .stat-chip[style*="#fee2e2"] span { color: #fca5a5 !important; }

html[data-theme="dark"] .student-list,
html[data-theme="dark"] .timeline-panel { background: var(--card-bg); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

html[data-theme="dark"] .student-list-header,
html[data-theme="dark"] .timeline-header { background: rgba(255,255,255,0.03); border-color: var(--border-color); color: var(--text-secondary); }

html[data-theme="dark"] .student-item { border-color: rgba(255,255,255,0.05); }
html[data-theme="dark"] .student-item:hover { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .student-item.active { background: rgba(59, 130, 246, 0.15); border-left: 3px solid #3b82f6; }
html[data-theme="dark"] .student-item .name { color: var(--text-primary); }
html[data-theme="dark"] .student-item .roll { color: var(--text-secondary); }

html[data-theme="dark"] .no-movements-msg,
html[data-theme="dark"] .tl-empty { color: var(--text-secondary); }

html[data-theme="dark"] .tl-content { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .tl-content .tl-time { color: var(--text-secondary); }
html[data-theme="dark"] .tl-content .tl-reason { color: var(--text-primary); }
html[data-theme="dark"] .tl-list::before { background: var(--border-color); }
html[data-theme="dark"] .tl-dot { border-color: var(--card-bg); }
html[data-theme="dark"] .movements-date-bar input[type="date"] { background: var(--card-bg); color: var(--text-primary); border-color: var(--border-color); }

/* In/Out badges adaptation */
html[data-theme="dark"] .avatar.out, html[data-theme="dark"] .dir-badge.out, html[data-theme="dark"] .tl-badge.out { background: rgba(239, 68, 68, 0.15); color: #f87171; }
html[data-theme="dark"] .avatar.in, html[data-theme="dark"] .dir-badge.in, html[data-theme="dark"] .tl-badge.in { background: rgba(16, 185, 129, 0.15); color: #34d399; }
html[data-theme="dark"] .tl-dot.out { background: #ef4444; color: #ef4444; }
html[data-theme="dark"] .tl-dot.in { background: #10b981; color: #10b981; }

/* Conversation Resolved Banner */
html[data-theme="dark"] .conversation-resolved-banner {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}
html[data-theme="dark"] .conversation-resolved-banner h5 {
    color: #6ee7b7 !important;
}

/* ===================================================================
   Remark Deletion Requests Page — Dark Mode
   (Standalone page for managing remark deletion requests)
   =================================================================== */

/* Main Page Container */
html[data-theme="dark"] .remark-deletion-page {
    background: var(--app-bg-gradient) !important;
    color: var(--text-primary) !important;
}

/* Page Header */
html[data-theme="dark"] .remark-deletion-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] .remark-deletion-header h1 {
    color: #f87171 !important;
}

html[data-theme="dark"] .remark-deletion-header p {
    color: var(--text-secondary) !important;
}

/* Control/Filter Bar */
html[data-theme="dark"] .remark-deletion-controls {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .remark-deletion-controls input,
html[data-theme="dark"] .remark-deletion-controls select {
    background: var(--app-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .remark-deletion-controls input::placeholder {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .remark-deletion-controls label {
    color: var(--text-secondary) !important;
}

/* Status Filter Buttons/Pills */
html[data-theme="dark"] .status-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

html[data-theme="dark"] .status-filter-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .status-filter-btn.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

html[data-theme="dark"] .status-filter-btn.active-pending {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

html[data-theme="dark"] .status-filter-btn.active-approved {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
}

html[data-theme="dark"] .status-filter-btn.active-rejected {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

/* Request Cards */
html[data-theme="dark"] .remark-deletion-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease;
}

html[data-theme="dark"] .remark-deletion-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .remark-deletion-card.urgent {
    border-left: 4px solid #ef4444;
    background: linear-gradient(to right, rgba(239, 68, 68, 0.05), var(--card-bg));
}

/* Card Header */
html[data-theme="dark"] .remark-card-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .remark-card-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .remark-card-id {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
    font-family: 'Monaco', 'Courier New', monospace;
}

/* Request Number Badge */
html[data-theme="dark"] .req-num-badge-remark {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Card Body */
html[data-theme="dark"] .remark-card-body {
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .remark-detail-item {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .remark-detail-item:last-child {
    border-bottom: none;
}

html[data-theme="dark"] .remark-detail-label {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
    font-weight: 500;
}

html[data-theme="dark"] .remark-detail-value {
    color: var(--text-primary) !important;
}

/* Remark Text Display */
html[data-theme="dark"] .remark-text-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border-left: 3px solid rgba(59, 130, 246, 0.5) !important;
    color: var(--text-primary) !important;
    padding: 12px;
    border-radius: 4px;
}

html[data-theme="dark"] .remark-text-box em,
html[data-theme="dark"] .remark-text-box i {
    color: var(--text-secondary) !important;
}

/* Status Badge */
html[data-theme="dark"] .status-badge-pending {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

html[data-theme="dark"] .status-badge-approved {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

html[data-theme="dark"] .status-badge-rejected {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

/* Card Footer (Actions) */
html[data-theme="dark"] .remark-card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid var(--border-color) !important;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Action Buttons */
html[data-theme="dark"] .btn-remark-action {
    background: var(--app-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}

html[data-theme="dark"] .btn-remark-action:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

/* View Details Button (Info) */
html[data-theme="dark"] .btn-remark-details {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .btn-remark-details:hover {
    background: rgba(59, 130, 246, 0.25) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    color: #bfdbfe !important;
}

/* Approve Button */
html[data-theme="dark"] .btn-remark-approve {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

html[data-theme="dark"] .btn-remark-approve:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    color: #a7f3d0 !important;
}

/* Reject Button */
html[data-theme="dark"] .btn-remark-reject {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .btn-remark-reject:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #fed7d7 !important;
}

/* Empty State */
html[data-theme="dark"] .remark-deletion-empty {
    background: var(--card-bg) !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--text-secondary) !important;
    text-align: center;
    padding: 48px 24px;
    border-radius: 12px;
}

html[data-theme="dark"] .remark-deletion-empty i {
    color: var(--text-tertiary) !important;
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

html[data-theme="dark"] .remark-deletion-empty h4 {
    color: var(--text-primary) !important;
}

/* Pagination */
html[data-theme="dark"] .remark-pagination .page-item .page-link {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .remark-pagination .page-item.active .page-link {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .remark-pagination .page-item.disabled .page-link {
    background: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-tertiary) !important;
}

/* Modal / Detail Popup */
html[data-theme="dark"] .remark-detail-modal .modal-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] .remark-detail-modal .modal-title {
    color: #f87171 !important;
}

html[data-theme="dark"] .remark-detail-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

html[data-theme="dark"] .remark-detail-modal .modal-body {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .remark-detail-modal .modal-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Student Info Section in Modal */
html[data-theme="dark"] .remark-student-info {
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 3px solid #3b82f6;
    padding: 12px;
    border-radius: 4px;
}

html[data-theme="dark"] .remark-student-info .info-label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .remark-student-info .info-value {
    color: var(--text-primary) !important;
}

/* Timeline / History */
html[data-theme="dark"] .remark-deletion-timeline {
    position: relative;
    padding-left: 24px;
}

html[data-theme="dark"] .remark-deletion-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-color);
}

html[data-theme="dark"] .remark-timeline-item {
    position: relative;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-color);
}

html[data-theme="dark"] .remark-timeline-item:last-child {
    border-bottom: none;
}

html[data-theme="dark"] .remark-timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border: 2px solid var(--app-bg);
    border-radius: 50%;
}

html[data-theme="dark"] .remark-timeline-time {
    color: var(--text-secondary) !important;
    font-size: 0.875rem;
}

html[data-theme="dark"] .remark-timeline-action {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .remark-timeline-note {
    color: var(--text-tertiary) !important;
    font-size: 0.875rem;
    margin-top: 4px;
}

/* ===================================================================
 * Today's Special Meal Page (common/todays_special_meal)
 * =================================================================== */

/* Override light-mode text colours used via CSS custom properties */
html[data-theme="dark"] {
    --spm-amber-text: #fcd34d;   /* amber-300 — readable on dark */
    --spm-rose-text:  #fda4af;   /* rose-300 */
    --spm-sky-text:   #7dd3fc;   /* sky-300 */
    --spm-green-text: #6ee7b7;   /* emerald-300 */
}

/* Active banner (special meal enabled today) */
html[data-theme="dark"] .today-banner.active {
    background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(217,119,6,.1)) !important;
    border-color: rgba(249,115,22,.35) !important;
}

/* Inactive banner */
html[data-theme="dark"] .today-banner.inactive {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .today-banner-body h5,
html[data-theme="dark"] .today-banner-body p {
    color: var(--text-primary) !important;
}

/* Tag pills in the banner */
html[data-theme="dark"] .tag-snacks {
    background: rgba(245,158,11,.18) !important;
    color: #fcd34d !important;
    border-color: rgba(245,158,11,.35) !important;
}
html[data-theme="dark"] .tag-meal {
    background: rgba(249,115,22,.18) !important;
    color: var(--primary) !important;
    border-color: rgba(249,115,22,.35) !important;
}

/* Section title */
html[data-theme="dark"] .spm-section-title {
    color: var(--text-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Event cards */
html[data-theme="dark"] .spm-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .spm-card.is-today {
    border-color: rgba(249,115,22,.45) !important;
}
html[data-theme="dark"] .spm-card:hover {
    background: var(--card-bg) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Icon column */
html[data-theme="dark"] .spm-icon {
    background: var(--card-bg) !important;
    border-right-color: var(--border-color) !important;
}

/* Content text */
html[data-theme="dark"] .spm-content h4 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .spm-content p {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .spm-content p strong {
    color: var(--text-primary) !important;
}

/* Count-label chips */
html[data-theme="dark"] .spm-label-chip {
    background: rgba(249,115,22,.15) !important;
    color: var(--primary) !important;
    border-color: rgba(249,115,22,.3) !important;
}

/* "Today" chip */
html[data-theme="dark"] .spm-today-chip {
    background: rgba(16,185,129,.18) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16,185,129,.35) !important;
}

/* Period badges — ensure text is readable on dark backgrounds */
html[data-theme="dark"] .badge-breakfast {
    background: rgba(245,158,11,.18) !important;
    color: #fcd34d !important;
    border-color: rgba(245,158,11,.3) !important;
}
html[data-theme="dark"] .badge-lunch {
    background: rgba(249,115,22,.18) !important;
    color: var(--primary) !important;
    border-color: rgba(249,115,22,.3) !important;
}
html[data-theme="dark"] .badge-snacks {
    background: rgba(244,63,94,.15) !important;
    color: #fda4af !important;
    border-color: rgba(244,63,94,.3) !important;
}
html[data-theme="dark"] .badge-dinner {
    background: rgba(56,189,248,.15) !important;
    color: #7dd3fc !important;
    border-color: rgba(56,189,248,.3) !important;
}

/* Empty state */
html[data-theme="dark"] .spm-empty {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .spm-empty h5 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .spm-empty p,
html[data-theme="dark"] .spm-empty .empty-icon {
    color: var(--text-tertiary) !important;
}

/* Page header icon */
html[data-theme="dark"] .spm-page-header h3 i {
    color: var(--primary) !important;
}
html[data-theme="dark"] .spm-page-header p {
    color: var(--text-secondary) !important;
}

/* Mobile: icon row border */
@media (max-width: 576px) {
    html[data-theme="dark"] .spm-icon {
        border-bottom-color: var(--border-color) !important;
    }
}

/* Superintendent action button */
html[data-theme="dark"] .btn-spm-action {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(249,115,22,.45) !important;
}
html[data-theme="dark"] .btn-spm-action:hover {
    background: var(--primary-dark, #fb923c) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(249,115,22,.55) !important;
}

/* ===================================================================
 * Superintendent: Review Leave Page (superintendent/review_leave)
 * =================================================================== */

/* ---- Page header titles (hardcoded #1a3a52 / #6b7280) ---- */
html[data-theme="dark"] .page-header-title {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .page-header-subtitle {
    color: var(--text-secondary) !important;
}

/* ---- Stat Cards ---- */
html[data-theme="dark"] .stat-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-theme="dark"] .stat-value {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .stat-label {
    color: var(--text-secondary) !important;
}

/* ---- Control Hub (search/filter bar) ---- */
html[data-theme="dark"] .control-hub-desktop {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .control-hub-desktop .form-control {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ---- Advanced filter row ---- */
html[data-theme="dark"] .advanced-filters-container {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .filter-column select {
    background-color: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .sort-icon {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .sort-icon:hover,
html[data-theme="dark"] .sort-icon.active {
    color: var(--primary) !important;
}
html[data-theme="dark"] .row-number {
    color: var(--text-secondary) !important;
}

/* ---- Leave type row background tints (table rows) ---- */
html[data-theme="dark"] .leave-row-casual {
    background-color: transparent !important;
}
html[data-theme="dark"] .leave-row-medical {
    background-color: rgba(6, 182, 212, 0.07) !important;
}
html[data-theme="dark"] .leave-row-emergency {
    background-color: rgba(239, 68, 68, 0.07) !important;
}
html[data-theme="dark"] .leave-row-mesl {
    background-color: rgba(124, 58, 237, 0.08) !important;
}
html[data-theme="dark"] .leave-row-casual:hover,
html[data-theme="dark"] .leave-row-medical:hover,
html[data-theme="dark"] .leave-row-emergency:hover {
    background-color: rgba(255,255,255,0.05) !important;
    filter: none !important;
}
html[data-theme="dark"] .leave-row-mesl:hover {
    background-color: rgba(124, 58, 237, 0.12) !important;
    filter: none !important;
}

/* ---- MESL / Short Leave styles ---- */
html[data-theme="dark"] .mesl-reason-callout {
    background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(124,58,237,0.08)) !important;
    border-left-color: #a78bfa !important;
    color: #c4b5fd !important;
}

/* ---- History row ---- */
html[data-theme="dark"] .history-label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .history-item:hover {
    background-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .history-dot {
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px rgba(255,255,255,0.15) !important;
}

/* ---- Legend items ---- */
html[data-theme="dark"] .notif-legend-item {
    color: var(--text-secondary) !important;
}

/* ---- Inline hardcoded color: #666 / #64748b small text ---- */
html[data-theme="dark"] .leave-row-casual small[style*="color: #666"],
html[data-theme="dark"] .leave-row-medical small[style*="color: #666"],
html[data-theme="dark"] .leave-row-emergency small[style*="color: #666"],
html[data-theme="dark"] .leave-row-mesl small[style*="color: #666"] {
    color: var(--text-tertiary) !important;
}

/* ---- Mobile leave cards ---- */
html[data-theme="dark"] .leave-card {
    background: var(--card-bg) !important;
    box-shadow: var(--shadow-sm) !important;
}
html[data-theme="dark"] .leave-card-casual {
    background-color: var(--card-bg) !important;
}
html[data-theme="dark"] .leave-card-medical {
    background-color: rgba(6, 182, 212, 0.07) !important;
}
html[data-theme="dark"] .leave-card-emergency {
    background-color: rgba(239, 68, 68, 0.07) !important;
}
html[data-theme="dark"] .leave-card-mesl {
    background-color: rgba(124, 58, 237, 0.08) !important;
}
html[data-theme="dark"] .leave-card-casual:hover,
html[data-theme="dark"] .leave-card-medical:hover,
html[data-theme="dark"] .leave-card-emergency:hover {
    filter: none !important;
    background-color: rgba(255,255,255,0.05) !important;
}
html[data-theme="dark"] .leave-card-mesl:hover {
    background-color: rgba(124, 58, 237, 0.12) !important;
    filter: none !important;
}

/* ---- Mobile card — inline style: background #fff ---- */
html[data-theme="dark"] .leave-card[style*="background: #fff"],
html[data-theme="dark"] .leave-card[style*="background:#fff"] {
    background: var(--card-bg) !important;
}

/* ---- Card actions footer (background: #fcfcfc) ---- */
html[data-theme="dark"] .leave-card-actions {
    background: rgba(255,255,255,0.03) !important;
    border-top-color: var(--border-color) !important;
}

/* ---- Mobile card header: text-dark / fw-bold text-dark ---- */
html[data-theme="dark"] .leave-card-header .fw-bold.text-dark,
html[data-theme="dark"] .leave-card-body .fw-bold.text-dark {
    color: var(--text-primary) !important;
}

/* ---- Mobile date row (bg-light rounded) ---- */
html[data-theme="dark"] .leave-card-body .bg-light {
    background-color: rgba(255,255,255,0.05) !important;
}

/* ---- Mobile control bar ---- */
html[data-theme="dark"] .mobile-control-bar {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .mobile-control-btn {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .mobile-control-btn:active {
    background: rgba(255,255,255,0.08) !important;
}

/* ---- Mobile modals (search/filter/sort/export) ---- */
html[data-theme="dark"] .mobile-modal {
    background: var(--card-bg) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
}
html[data-theme="dark"] .mobile-modal-title {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .mobile-modal-close {
    color: var(--text-tertiary) !important;
}
html[data-theme="dark"] .sort-option label {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .sort-option {
    background: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .sort-option:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Collapsible student card (old mobile card system) ---- */
html[data-theme="dark"] .student-card-collapsible {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .card-collapsed:active {
    background: rgba(255,255,255,0.05) !important;
}
html[data-theme="dark"] .card-expanded {
    background: rgba(255,255,255,0.03) !important;
    border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .card-field {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .card-field label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .card-field span {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .card-actions {
    border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .card-row-number {
    background: rgba(255,255,255,0.08) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .expand-icon {
    color: var(--text-tertiary) !important;
}

/* ---- Avatar initials fallback circles (removed background to allow dynamic colors) ---- */
html[data-theme="dark"] .student-avatar-initials,
html[data-theme="dark"] .student-avatar-initials-sm {
    color: #e0e7ff !important;
}

/* ---- Soft badge colors (light-mode solid → dark-mode transparent tints) ---- */
html[data-theme="dark"] .badge-casual-soft {
    background: rgba(99,102,241,0.18) !important;
    color: #a5b4fc !important;
}
html[data-theme="dark"] .badge-medical-soft {
    background: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .badge-emergency-soft {
    background: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .badge-secondary-soft {
    background: rgba(255,255,255,0.08) !important;
    color: var(--text-secondary) !important;
}

/* ---- New/Modification request chips (inline style: #fff3cd / #d1ecf1) ---- */
html[data-theme="dark"] span[style*="#fff3cd"] {
    background: rgba(245,158,11,0.18) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] span[style*="#d1ecf1"] {
    background: rgba(6,182,212,0.18) !important;
    color: #67e8f9 !important;
}

/* ---- Bootstrap subtle badges (bg-success-subtle, bg-danger-subtle) in dark ---- */
html[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(16,185,129,0.15) !important;
}
html[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(239,68,68,0.15) !important;
}
html[data-theme="dark"] .text-success {
    color: #4ade80 !important;
}
html[data-theme="dark"] .text-danger {
    color: #f87171 !important;
}

/* ---- Bulk action bar ---- */
html[data-theme="dark"] .bulk-action-bar {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
}

/* ===================================================================
 * Bootstrap Subtle Badge Overrides for Dark Mode
 * Fixes unreadable text on elements using bg-secondary-subtle, etc.
 * =================================================================== */
html[data-theme="dark"] .bg-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.15) !important;
}
html[data-theme="dark"] .text-secondary {
    color: #94a3b8 !important; /* Tailwind slate-400 */
}
html[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(34, 197, 94, 0.15) !important;
}
html[data-theme="dark"] .text-success {
    color: #4ade80 !important; /* Tailwind green-400 */
}
html[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.15) !important;
}
html[data-theme="dark"] .text-danger {
    color: #f87171 !important; /* Tailwind red-400 */
}
html[data-theme="dark"] .bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.15) !important;
}
html[data-theme="dark"] .text-warning {
    color: #fbbf24 !important; /* Tailwind amber-400 */
}

/* ===================================================================
 * Specific Inline Style Overrides (e.g., status-badge)
 * =================================================================== */
html[data-theme="dark"] .status-badge[style*="#d1ecf1"] {
    background-color: rgba(14, 165, 233, 0.2) !important; /* Dark cyan bg */
    color: #38bdf8 !important; /* Bright cyan text */
}
html[data-theme="dark"] .status-badge[style*="#fff3cd"] {
    background-color: rgba(245, 158, 11, 0.2) !important; /* Dark amber bg */
    color: #fbbf24 !important; /* Bright amber text */
}

/* ===================================================================
 * Gatepass and Schedule Module Fixes
 * =================================================================== */
html[data-theme="dark"] .apply-gatepass-wrapper .info-banner.warning { background: rgba(255, 193, 7, 0.2); border-color: rgba(255, 193, 7, 0.3); color: #fbbf24; }
html[data-theme="dark"] .apply-gatepass-wrapper .info-banner.success { background: rgba(25, 135, 84, 0.2); border-color: rgba(25, 135, 84, 0.3); color: #34d399; }
html[data-theme="dark"] .apply-gatepass-wrapper .info-banner.danger { background: rgba(220, 53, 69, 0.2); border-color: rgba(220, 53, 69, 0.3); color: #f87171; }
html[data-theme="dark"] .apply-gatepass-wrapper input[readonly] { background-color: #2d3748 !important; color: #a0aec0 !important; }

html[data-theme="dark"] .history-card-front,
html[data-theme="dark"] .history-card-back { background: var(--bs-dark); border-color: #333 !important; }
html[data-theme="dark"] .history-card-header { background: #1a1d20 !important; border-bottom-color: #333 !important; }
html[data-theme="dark"] .history-card-body { background: var(--bs-dark); }
html[data-theme="dark"] .history-card-footer { background: #1a1d20 !important; border-top-color: #333 !important; }
html[data-theme="dark"] .history-meta-item { background: #212529 !important; border-color: #333 !important; }
html[data-theme="dark"] .history-meta-value { color: #e2e8f0 !important; }
html[data-theme="dark"] .history-card-header h6.text-dark { color: #f8f9fa !important; }
html[data-theme="dark"] .history-item-compact { background: #212529 !important; border-color: #333 !important; }
html[data-theme="dark"] .history-item-compact .bg-light.text-dark { background-color: #1a1d20 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .flip-btn { background: #212529 !important; border-color: #444 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .btn-close-custom { background: #333 !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .mt-3.p-2.rounded.text-dark[style*="background-color: #f8fafc"] { background-color: #212529 !important; color: #e2e8f0 !important; }

html[data-theme="dark"] .sched-card { background: var(--bs-dark); border: 1px solid #333; }
html[data-theme="dark"] .sched-card .card-header { background: #1a1d20 !important; color: #e2e8f0 !important; border-bottom-color: #333; }
html[data-theme="dark"] .time-block-row { background: #212529 !important; border-color: #444 !important; }
html[data-theme="dark"] .time-block-row.highlight { background: #1a1d20 !important; border-color: var(--bs-primary) !important; }
html[data-theme="dark"] .override-table th { background: #1a1d20 !important; color: #e2e8f0 !important; border-color: #333; }
html[data-theme="dark"] .free-period-tag { background: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }
html[data-theme="dark"] .restricted-tag { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; }
html[data-theme="dark"] #defaultTimelineBar, html[data-theme="dark"] #overrideTimelineBar { background-color: rgba(239, 68, 68, 0.2) !important; border-color: rgba(239, 68, 68, 0.4) !important; }

html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .empty-state {
    background-color: #1a1d20 !important;
    border: 1px solid #333 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .filter-bar .form-label {
    color: #a0aec0 !important;
}

/* ===================================================================
   GLOBAL DARK THEME FOR EXCEL, PDF, AND RESET/REMOVE FILTER BUTTONS
   =================================================================== */
html[data-theme="dark"] #exportTableExcel,
html[data-theme="dark"] .btn-export-excel,
html[data-theme="dark"] .exportTableExcel {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    background-image: none !important;
}

html[data-theme="dark"] #exportTableExcel:hover,
html[data-theme="dark"] .btn-export-excel:hover,
html[data-theme="dark"] .exportTableExcel:hover {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

html[data-theme="dark"] #exportTablePDF,
html[data-theme="dark"] .btn-export-pdf,
html[data-theme="dark"] .exportTablePDF {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    background-image: none !important;
}

html[data-theme="dark"] #exportTablePDF:hover,
html[data-theme="dark"] .btn-export-pdf:hover,
html[data-theme="dark"] .exportTablePDF:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

html[data-theme="dark"] #resetAllFilters,
html[data-theme="dark"] .resetAllFilters {
    background-color: transparent !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] #resetAllFilters:hover,
html[data-theme="dark"] .resetAllFilters:hover {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] #resetAllFilters.active-filter,
html[data-theme="dark"] .resetAllFilters.active-filter,
html[data-theme="dark"] #resetAllFilters.active,
html[data-theme="dark"] .resetAllFilters.active {
    background-color: rgba(239, 68, 68, 0.25) !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

html[data-theme="dark"] #resetAllFilters.active-filter:hover,
html[data-theme="dark"] .resetAllFilters.active-filter:hover,
html[data-theme="dark"] #resetAllFilters.active:hover,
html[data-theme="dark"] .resetAllFilters.active:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* ===================================================================
 * MESS MODULE PAGES — Full Dark Mode Overrides
 * Covers: manage_menus, manage_exceptions, manage_items, manage_categories,
 *         raw_materials, raw_material_calculator, stock_overview, purchases,
 *         reports, daily_usage, daily_meal_report, view_consolidated_counts,
 *         view_special_meals_list, manage_special_meals
 * =================================================================== */

/* --- Generic hardcoded bg-light / .card.bg-light patterns --- */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] thead.table-light,
html[data-theme="dark"] .table-light th,
html[data-theme="dark"] .card.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .card-header.bg-light,
html[data-theme="dark"] .card-header.fw-bold.bg-light,
html[data-theme="dark"] .card-header.bg-light.d-flex {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* --- Mess manage_menus specific --- */
html[data-theme="dark"] .mapping-row.bg-light,
html[data-theme="dark"] .mapping-row.border.rounded.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-color) !important;
}

/* Quick History info panel at bottom of manage_menus */
html[data-theme="dark"] .mt-4.p-3.bg-light.rounded {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

/* Toggle cards (border-success / bg-success card headers) — keep colour but darken */
html[data-theme="dark"] .card-header.bg-success.text-white {
    /* keep green bg, no override needed */
}

/* card-header that has no bg class (transparent default) */
html[data-theme="dark"] .card .card-header:not([class*="bg-"]):not([class*="background"]) {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Mess manage_menus: h2 with inline color var(--navy-blue) */
html[data-theme="dark"] [style*="--navy-blue"],
html[data-theme="dark"] [style*="color: var(--navy-blue)"] {
    color: var(--text-primary) !important;
}

/* Feedback popup */
html[data-theme="dark"] .feedback-popup {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

html[data-theme="dark"] .feedback-popup.feedback-success {
    border-left-color: var(--accent-green) !important;
}

html[data-theme="dark"] .feedback-popup.feedback-error {
    border-left-color: var(--danger) !important;
}

html[data-theme="dark"] .feedback-popup .feedback-icon {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .feedback-popup .feedback-progress {
    background: var(--primary) !important;
}

/* Bootstrap subtle backgrounds used by mess pages */
html[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(74, 222, 128, 0.15) !important;
}

html[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html[data-theme="dark"] .bg-warning-subtle {
    background-color: rgba(251, 191, 36, 0.15) !important;
}

html[data-theme="dark"] .bg-info-subtle {
    background-color: rgba(56, 189, 248, 0.15) !important;
}

html[data-theme="dark"] .text-success { color: #4ade80 !important; }
html[data-theme="dark"] .text-danger  { color: #f87171 !important; }
html[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
html[data-theme="dark"] .text-info    { color: #38bdf8 !important; }

/* Alert variants used in mess pages */
html[data-theme="dark"] .alert-info {
    background-color: rgba(56, 189, 248, 0.1) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    color: #7dd3fc !important;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(74, 222, 128, 0.1) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fcd34d !important;
}

/* Generic text-dark class overrides in mess module context */
html[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

/* table-striped in mess pages */
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* ===================================================================
 * SUPERINTENDENT — review_leave Mobile Card View Dark Mode
 * =================================================================== */

/* Leave card wrapper (has inline background: #fff) */
html[data-theme="dark"] .leave-card {
    background: var(--card-bg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    border-color: var(--border-color) !important;
}

/* Coloured left-border type indicators */
html[data-theme="dark"] .leave-card.border-medical {
    border-left-color: #f87171 !important;
}
html[data-theme="dark"] .leave-card.border-emergency {
    border-left-color: #fbbf24 !important;
}
html[data-theme="dark"] .leave-card.border-mesl {
    border-left-color: #a78bfa !important;
}
html[data-theme="dark"] .leave-card.border-success {
    border-left-color: #4ade80 !important;
}

/* Dates row strip inside leave card body */
html[data-theme="dark"] .leave-dates-row,
html[data-theme="dark"] .leave-card .leave-card-body .d-flex.bg-light.rounded {
    background-color: rgba(255,255,255,0.06) !important;
    color: var(--text-primary) !important;
}

/* Text-dark inside mobile card (student name, departure date text) */
html[data-theme="dark"] .leave-card .fw-bold.text-dark,
html[data-theme="dark"] .leave-card .text-dark {
    color: var(--text-primary) !important;
}

/* Reason text */
html[data-theme="dark"] .leave-card strong.text-dark {
    color: var(--text-primary) !important;
}

/* Applied-at timestamp (hardcoded colour #64748b) */
html[data-theme="dark"] .leave-card [style*="color: #64748b"] {
    color: var(--text-tertiary) !important;
}

/* Desktop table: timestamp color */
html[data-theme="dark"] .leave-row-casual [style*="color: #64748b"],
html[data-theme="dark"] .leave-row-medical [style*="color: #64748b"],
html[data-theme="dark"] .leave-row-emergency [style*="color: #64748b"],
html[data-theme="dark"] .leave-row-mesl [style*="color: #64748b"] {
    color: var(--text-tertiary) !important;
}

/* Small time labels in table cells (color: #666) */
html[data-theme="dark"] small[style*="color: #666"] {
    color: var(--text-tertiary) !important;
}

html[data-theme="dark"] small[style*="color: #64748b"] {
    color: var(--text-tertiary) !important;
}

/* Reason text in desktop table (color: #666) */
html[data-theme="dark"] small[style*="color: #666; max-width"] {
    color: var(--text-secondary) !important;
}

/* Card action footer (has inline background: #fcfcfc) */
html[data-theme="dark"] .leave-card .leave-card-actions {
    background-color: rgba(255,255,255,0.04) !important;
    border-top-color: var(--border-color) !important;
}

/* Action buttons inside card footer */
html[data-theme="dark"] .leave-card .leave-card-actions .btn-link.text-secondary {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .leave-card .leave-card-actions .btn-link.text-danger {
    color: #f87171 !important;
}

html[data-theme="dark"] .leave-card .leave-card-actions .btn-link.text-success {
    color: #4ade80 !important;
}

html[data-theme="dark"] .leave-card .leave-card-actions .btn-link.text-primary {
    color: #60a5fa !important;
}

html[data-theme="dark"] .leave-card .leave-card-actions .border-end {
    border-color: var(--border-color) !important;
}

/* History timeline items inside mobile card */
html[data-theme="dark"] .leave-card .history-item {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .leave-card .history-item:hover {
    background-color: var(--primary-light) !important;
}

html[data-theme="dark"] .leave-card .history-label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .leave-card .border-top {
    border-top-color: var(--border-color) !important;
}

/* Student avatar initials (small mobile variant) removed to allow dynamic inline styling */

/* Mobile control bar */
html[data-theme="dark"] .mobile-control-btn {
    background-color: var(--card-bg) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .mobile-control-btn:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Desktop leave row type backgrounds (very light tints) */
html[data-theme="dark"] .leave-row-medical {
    background-color: rgba(239, 68, 68, 0.06) !important;
}
html[data-theme="dark"] .leave-row-emergency {
    background-color: rgba(245, 158, 11, 0.06) !important;
}
html[data-theme="dark"] .leave-row-mesl {
    background-color: rgba(124, 58, 237, 0.06) !important;
}
html[data-theme="dark"] .leave-row-casual {
    background-color: transparent !important;
}

/* MESL reason callout in dark mode */
html[data-theme="dark"] .mesl-reason-callout {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.2), rgba(91, 33, 182, 0.15)) !important;
    border-left-color: #a78bfa !important;
    color: #ddd6fe !important;
}

/* Status badges (modification / new request) with hardcoded inline styles */
html[data-theme="dark"] [style*="background: #fff3cd"] {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] [style*="background: #d1ecf1"] {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #7dd3fc !important;
}

/* HOD status badge (bg-secondary-subtle / bg-success-subtle / bg-danger-subtle) */
html[data-theme="dark"] .bg-secondary-subtle {
    background-color: rgba(148, 163, 184, 0.15) !important;
}
html[data-theme="dark"] .text-secondary.bg-secondary-subtle,
html[data-theme="dark"] .badge.bg-secondary-subtle.text-secondary {
    color: #94a3b8 !important;
}

/* ===================================================================
 * Superintendent Leave Card Header — Comprehensive Dark Mode Fixes
 * Targets: review_leave.php and manage_student_leaves.php mobile cards
 * =================================================================== */

/* 1. Hardcoded #f8fafc background on .leave-card-header (portal-style.css) */
html[data-theme="dark"] .leave-card-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: var(--border-color) !important;
}

/* 2. Student name: plain .fw-bold (no .text-dark) inside card header */
html[data-theme="dark"] .leave-card-header .fw-bold {
    color: var(--text-primary) !important;
}

/* 3. Department & "Applied:" text — .text-muted inside card header */
html[data-theme="dark"] .leave-card-header .text-muted {
    color: var(--text-secondary) !important;
}

/* 4. Inline color: #64748b on the "Applied:" timestamp <div> */
html[data-theme="dark"] .leave-card-header [style*="color: #64748b"],
html[data-theme="dark"] .leave-card-header [style*="color:#64748b"] {
    color: var(--text-tertiary) !important;
}

/* 5. .card-row-number / .card-row-num circle badge */
html[data-theme="dark"] .leave-card-header .card-row-number,
html[data-theme="dark"] .card-row-num {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
}

/* 6. Status badges (light-mode solid backgrounds) — superintendent.css */
html[data-theme="dark"] .status-badge-approved {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #4ade80 !important;
}
html[data-theme="dark"] .status-badge-rejected {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .status-badge-pending {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .status-badge-not-required {
    background-color: rgba(148, 163, 184, 0.12) !important;
    color: #94a3b8 !important;
}

/* 7. Attendance lookup card header (bg-white on manage_student_leaves) */
html[data-theme="dark"] #attendanceLookupCard .card-header.bg-white,
html[data-theme="dark"] .card-header.bg-white {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] #attendanceLookupCard .card-header h5.fw-bold.text-dark,
html[data-theme="dark"] .card-header h5.fw-bold.text-dark,
html[data-theme="dark"] .card-header .fw-bold.text-dark {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #attendanceLookupCard .card-header small.text-muted {
    color: var(--text-secondary) !important;
}

/* 8. Collapse icon in card headers */
html[data-theme="dark"] .collapse-icon-lookup {
    color: var(--text-tertiary) !important;
}

/* 9. .info-label hardcoded color (#64748b) in portal-style cards */
html[data-theme="dark"] .info-label {
    color: var(--text-secondary) !important;
}

/* 10. .history-label hardcoded color (#475569) in leave history rows */
html[data-theme="dark"] .history-label {
    color: var(--text-secondary) !important;
}

/* 11. leave-card inline background: #fff (manage_student_leaves uses this) */
html[data-theme="dark"] .leave-card[style*="background: #fff"],
html[data-theme="dark"] .leave-card[style*="background:#fff"] {
    background: var(--card-bg) !important;
}

/* 12. leave-card-actions inline background: #fcfcfc */
html[data-theme="dark"] .leave-card-actions[style*="background: #fcfcfc"],
html[data-theme="dark"] .leave-card-actions[style*="background:#fcfcfc"] {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* 13. Summary stat cards inside attendance lookup (bg-light, bg-success-subtle, bg-danger-subtle) */
html[data-theme="dark"] .summary-stat-card.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 14. MCR tabs hardcoded bg */
html[data-theme="dark"] .mcr-tabs {
    background: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .mcr-tab {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .mcr-tab.active {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* 15. History controls (manage_student_leaves history card) */
html[data-theme="dark"] .history-controls {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .history-controls input,
html[data-theme="dark"] .history-controls select {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 16. History card (leave history grid) */
html[data-theme="dark"] .history-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .history-card-header {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .history-card-footer {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .changes-summary {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .changes-summary .change-item {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .remarks-block {
    background: rgba(245, 158, 11, 0.08) !important;
    border-left-color: #f59e0b !important;
    color: var(--text-primary) !important;
}

/* 17. Manage Conversation Card (view_message_thread) */
html[data-theme="dark"] .manage-conversation-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .manage-conversation-card .card-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .manage-conversation-card .card-body p.form-text,
html[data-theme="dark"] .manage-conversation-card .card-body .text-muted {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .more-options-toggle {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .more-options-toggle:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

/* 18. Meal Change Requests Overrides */
html[data-theme="dark"] .btn-success-soft {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}
html[data-theme="dark"] .btn-success-soft:hover {
    background-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}
html[data-theme="dark"] .btn-danger-soft {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .btn-danger-soft:hover {
    background-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .req-number-badge,
html[data-theme="dark"] .req-number-badge-sm {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .profile-avatar-small {
    background: rgba(140, 77, 77, 0.4) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .change-diff-compact .old-choice {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .change-diff-compact .new-choice {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

/* 19. Bhavan Medical Record Overrides */
html[data-theme="dark"] {
    --med-bg:        var(--app-bg);
    --med-card:      var(--card-bg);
    --med-border:    var(--border-color);
    --med-text:      var(--text-primary);
    --med-muted:     var(--text-secondary);
    --med-light:     rgba(20, 184, 166, 0.15);
    --med-primary:   #0d9488; /* Darker teal to ensure white text is readable */
    --med-shadow:    0 4px 12px -2px rgba(0,0,0,0.4);
    --med-shadow-lg: 0 10px 30px -5px rgba(0,0,0,0.6);
    --med-form-bg:   rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .med-stat-icon.teal  { background: rgba(204,251,241,0.15); color: #2dd4bf; }
html[data-theme="dark"] .med-stat-icon.amber { background: rgba(254,243,199,0.15); color: #fbbf24; }
html[data-theme="dark"] .med-stat-icon.blue  { background: rgba(219,234,254,0.15); color: #60a5fa; }
html[data-theme="dark"] .med-stat-icon.rose  { background: rgba(252,231,243,0.15); color: #fb7185; }

html[data-theme="dark"] .med-card-header {
    background: linear-gradient(135deg, rgba(20,184,166,0.1), rgba(20,184,166,0.2));
    border-bottom: 1px solid rgba(20,184,166,0.3);
}

html[data-theme="dark"] .med-inline-input,
html[data-theme="dark"] .med-inline-select,
html[data-theme="dark"] .med-form-control {
    background: var(--input-bg, rgba(255, 255, 255, 0.05));
    border-color: var(--border-color);
}

html[data-theme="dark"] .med-sheet th { background: var(--card-bg); border-bottom: 2px solid var(--border-color); color: var(--text-secondary); }
html[data-theme="dark"] .med-sheet td { border-bottom: 1px solid var(--border-color); }
html[data-theme="dark"] .med-sheet tr:hover td { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .med-sheet tr.has-record td { background: rgba(20,184,166,0.1); }
html[data-theme="dark"] .med-sheet tr.has-record:hover td { background: rgba(20,184,166,0.2); }

html[data-theme="dark"] .med-rec-badge {
    background: linear-gradient(135deg, rgba(20,184,166,0.2), rgba(20,184,166,0.3));
    color: #5eead4;
    border: 1px solid rgba(94,234,212,0.4);
}

html[data-theme="dark"] .med-date-input,
html[data-theme="dark"] .med-inline-input,
html[data-theme="dark"] .med-inline-select,
html[data-theme="dark"] .med-form-control {
    background: var(--app-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme="dark"] .med-btn-outline { background: transparent; color: #5eead4; border-color: #5eead4; }
html[data-theme="dark"] .med-btn-outline:hover { background: rgba(94,234,212,0.1); }

html[data-theme="dark"] .purchase-total-row td { background: rgba(20,184,166,0.1); border-top-color: rgba(20,184,166,0.4); color: #5eead4; }
html[data-theme="dark"] .purchase-amount { color: #5eead4; }

html[data-theme="dark"] .med-history-ctrl { background: var(--app-bg); border-bottom-color: var(--border-color); }

html[data-theme="dark"] .med-feedback.success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}
html[data-theme="dark"] .med-feedback.error {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Extracted from layout.php */
html[data-theme="dark"] .top-nav .theme-toggle-btn {
    color: #ffffff;
}

/* Extracted from calculate_rebate.php */
html[data-theme="dark"] .month-selector-section,
html[data-theme="dark"] .control-hub-desktop,
html[data-theme="dark"] .mobile-control-bar,
html[data-theme="dark"] .advanced-filters-container,
html[data-theme="dark"] #rebateTable th,
html[data-theme="dark"] .card-expanded,
html[data-theme="dark"] .card-mini-calendar .day-cell {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme="dark"] .mobile-control-btn,
html[data-theme="dark"] .student-card-collapsible,
html[data-theme="dark"] .card-period-item,
html[data-theme="dark"] .card-mini-calendar,
html[data-theme="dark"] .mobile-modal {
    background: var(--app-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Colorful Mobile Control Icons in Dark Mode */
html[data-theme="dark"] #mobileSearchBtn {
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}
html[data-theme="dark"] #mobileSearchBtn i,
html[data-theme="dark"] .mobileSearchBtn i { color: #3b82f6; } /* Blue */

html[data-theme="dark"] #mobileFilterBtn {
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
html[data-theme="dark"] #mobileFilterBtn i,
html[data-theme="dark"] .mobileFilterBtn i { color: #10b981; } /* Emerald */

html[data-theme="dark"] #mobileSortBtn {
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
html[data-theme="dark"] #mobileSortBtn i,
html[data-theme="dark"] .mobileSortBtn i { color: #f59e0b; } /* Amber */

html[data-theme="dark"] #mobileExportBtn {
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
}
html[data-theme="dark"] #mobileExportBtn i,
html[data-theme="dark"] .mobileExportBtn i { color: #8b5cf6; } /* Purple */

/* .is-active state: overrides accent colors with red in dark mode */
html[data-theme="dark"] .mobile-control-btn.is-active {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}
html[data-theme="dark"] .mobile-control-btn.is-active i {
    color: #f87171 !important;
}
html[data-theme="dark"] .mobile-control-btn.is-active::after {
    border-color: var(--app-bg) !important;
}

html[data-theme="dark"] .filter-column select {
    background-color: var(--app-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme="dark"] .rules-card {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme="dark"] .rules-card h6 {
    color: var(--text-primary);
}

html[data-theme="dark"] .rules-list li {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] #rebateTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .card-rebate-badge.weekly {
    background: rgba(40, 167, 69, 0.2);
    color: #86efac;
}

html[data-theme="dark"] .card-rebate-badge.guest-meal {
    background: rgba(13, 110, 253, 0.2);
    color: #93c5fd;
}

html[data-theme="dark"] .card-rebate-result.weekly {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%, rgba(40, 167, 69, 0.3) 100%);
    color: #86efac;
}

html[data-theme="dark"] .card-rebate-result.guest-meal {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.2) 0%, rgba(13, 110, 253, 0.3) 100%);
    color: #93c5fd;
}

html[data-theme="dark"] .card-field {
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .card-field label {
    color: var(--text-secondary);
}

html[data-theme="dark"] .card-field span {
    color: var(--text-primary);
}

html[data-theme="dark"] .card-mini-calendar .day-cell.full-absent {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.3) 100%);
    color: #fca5a5;
}

html[data-theme="dark"] .card-mini-calendar .day-cell.partial {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.3) 100%);
    color: #fcd34d;
}

html[data-theme="dark"] .card-period-item.departure i { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
html[data-theme="dark"] .card-period-item.return i { background: rgba(40, 167, 69, 0.2); color: #86efac; }
html[data-theme="dark"] .card-period-item.days i { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

html[data-theme="dark"] .card-row-number {
    background: var(--border-color);
    color: var(--text-secondary);
}

html[data-theme="dark"] .card-period-item .period-value {
    color: var(--text-primary);
}

html[data-theme="dark"] .row-number {
    color: var(--text-secondary);
}

/* Table text fixes */
html[data-theme="dark"] #rebateTable,
html[data-theme="dark"] #rebateTable td,
html[data-theme="dark"] #rebateTable td span {
    color: var(--text-primary);
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgba(255,255,255,0.02);
    color: var(--text-primary);
}

html[data-theme="dark"] .leave-days-hint {
    color: #86efac;
}

html[data-theme="dark"] .rebate-save-status.status-neutral {
    background: var(--card-bg);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
html[data-theme="dark"] .rebate-save-status.status-progress {
    background: rgba(40, 167, 69, 0.1);
    color: #86efac;
    border-color: rgba(40, 167, 69, 0.3);
}
html[data-theme="dark"] .rebate-save-status.status-success {
    background: rgba(40, 167, 69, 0.2);
    color: #86efac;
    border-color: rgba(40, 167, 69, 0.4);
}
html[data-theme="dark"] .rebate-save-status.status-error {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

/* Extracted from manage_student_remarks.php */
html[data-theme="dark"] .manage-rmk-header,
html[data-theme="dark"] .section-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .present-remark-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}
html[data-theme="dark"] .timeline-text {
    color: var(--text-secondary);
}
html[data-theme="dark"] .manage-rmk-avatar,
html[data-theme="dark"] .manage-rmk-avatar-placeholder {
    border-color: var(--card-bg);
}
html[data-theme="dark"] .remark-timeline::before {
    background: var(--border-color);
}

/* Extracted from search_remarks_student.php */
html[data-theme="dark"] .rmk-count-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Extracted from hostel_dashboard.php */
html[data-theme="dark"] .btn-premium-outline,
html[data-theme="dark"] #resetAllFilters {
    background: transparent;
    color: #94a3b8;
    border-color: #475569;
}
html[data-theme="dark"] .btn-premium-outline:hover,
html[data-theme="dark"] #resetAllFilters:hover {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
}
html[data-theme="dark"] #resetAllFilters.active-filter {
    background: rgba(239, 68, 68, 0.25);
    color: #ffffff;
    border-color: #ef4444;
}
html[data-theme="dark"] #resetAllFilters.active-filter:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}
html[data-theme="dark"] .btn-export-pdf {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}
html[data-theme="dark"] .btn-export-pdf:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}
html[data-theme="dark"] .btn-export-excel {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}
html[data-theme="dark"] .btn-export-excel:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

/* Extracted from apply_for_document.php */
html[data-theme="dark"] .id-card-avatar-fallback {
    background: transparent !important;
    color: var(--dynamic-color, #f97316) !important;
    border: 2px solid var(--dynamic-color, #d90000) !important;
}

/* Extracted from forwarded_from_supers.php */
html[data-theme="dark"] .forwarded-card {
    background-color: var(--card-bg) !important;
}
html[data-theme="dark"] .forwarded-card .bg-white {
    background-color: transparent !important;
}
html[data-theme="dark"] .forwarded-card .bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .forwarded-card .bg-secondary-subtle {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .forwarded-card .text-muted,
html[data-theme="dark"] .forwarded-card .text-secondary {
    color: var(--text-secondary) !important;
}

/* Extracted from feedback.php */
html[data-theme="dark"] .nav-pills .nav-link.bg-white {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .nav-pills .nav-link.active {
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4) !important;
}

/* Sleek Glassmorphism for Search Bar */
html[data-theme="dark"] .compact-search {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px);
}

/* Premium Empty States */
html[data-theme="dark"] .text-center.p-5.bg-white,
html[data-theme="dark"] .text-center.p-4.bg-white.border-dashed {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(5px);
}
html[data-theme="dark"] .text-center.p-5.bg-white i,
html[data-theme="dark"] .text-center.p-4.bg-white.border-dashed i {
    color: rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.05);
}

/* User Requested override for bg-transparent */
html[data-theme="dark"] .bg-transparent {
    background-color: #0f172a !important;
}

/* Header Text Enhancements */
html[data-theme="dark"] h5.text-dark {
    color: #f8fafc !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] h5.text-success {
    color: #6ee7b7 !important;
    text-shadow: 0 0 15px rgba(110, 231, 183, 0.2);
}

/* Base card backgrounds */
html[data-theme="dark"] .community-card .card,
html[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] select.form-select option {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-select.bg-light,
html[data-theme="dark"] .form-control.bg-light {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .form-control {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* File Input Button Override */
html[data-theme="dark"] .form-control::file-selector-button {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-right: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: background-color 0.2s ease;
}
html[data-theme="dark"] .form-control:hover::file-selector-button {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .vote-control {
    background: rgba(255, 255, 255, 0.03) !important;
    border-right-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .card-header.bg-white {
    background-color: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

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

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

html[data-theme="dark"] .alert-info {
    background: linear-gradient(145deg, rgba(13, 202, 240, 0.1) 0%, rgba(13, 202, 240, 0.02) 100%) !important;
    border: 1px solid rgba(13, 202, 240, 0.2) !important;
    color: #9eeaf9 !important;
    box-shadow: 0 4px 20px rgba(13, 202, 240, 0.05) !important;
}

html[data-theme="dark"] .alert-info .text-primary {
    color: #6edff6 !important;
}

html[data-theme="dark"] .alert-info .text-muted {
    color: rgba(255,255,255,0.7) !important;
}

html[data-theme="dark"] .card[style*="linear-gradient"] {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(249, 115, 22, 0.15) 100%) !important;
}

html[data-theme="dark"] #searchSuggestions,
html[data-theme="dark"] #descSuggestions {
    background-color: transparent !important;
}

html[data-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

/* Extracted from datepicker.css */
/* Dark mode: white icon + dark input */
html[data-theme="dark"] input.flatpickr-alt-input,
html[data-theme="dark"] input.flatpickr-alt-input:focus,
html[data-theme="dark"] input.flatpickr-alt-input:active,
html[data-theme="dark"] input.flatpickr-alt-input.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f1f5f9' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
    background-color: var(--bg-primary, #0f172a) !important;
    color: var(--text-primary, #f1f5f9) !important;
    border-color: var(--border-color, rgba(255,255,255,0.15)) !important;
}
html[data-theme="dark"] input.flatpickr-alt-input:focus,
html[data-theme="dark"] input.flatpickr-alt-input:active,
html[data-theme="dark"] input.flatpickr-alt-input.active {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
}

/* Dark calendar popup */
html[data-theme="dark"] .flatpickr-calendar {
    background: #1e293b !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
html[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #1e293b !important;
}
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:before,
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: #1e293b !important;
}
html[data-theme="dark"] .flatpickr-months,
html[data-theme="dark"] .flatpickr-months .flatpickr-month {
    background: #0f172a !important;
    color: #f1f5f9 !important;
    fill: #f1f5f9 !important;
}
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: #94a3b8 !important;
}
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #ffffff !important;
}
html[data-theme="dark"] .flatpickr-current-month select.flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-year-select {
    background: rgba(255,255,255,0.08) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 5px !important;
}
html[data-theme="dark"] .flatpickr-current-month select.flatpickr-monthDropdown-months option,
html[data-theme="dark"] .flatpickr-year-select option {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] span.flatpickr-weekday {
    background: #0f172a !important;
    color: #475569 !important;
}
html[data-theme="dark"] .flatpickr-innerContainer,
html[data-theme="dark"] .flatpickr-rContainer {
    background: #1e293b !important;
}
html[data-theme="dark"] .flatpickr-day {
    color: #e2e8f0 !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .flatpickr-day:hover {
    background: rgba(99,102,241,0.25) !important;
    border-color: rgba(99,102,241,0.5) !important;
    color: #fff !important;
}
html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.selected:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3) !important;
}
html[data-theme="dark"] .flatpickr-day.today {
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .flatpickr-day.today:hover {
    background: #3b82f6 !important;
    color: #fff !important;
}
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: #334155 !important;
    opacity: 0.5 !important;
}

/* Extracted from meal-management-orange.css */
/* ============================================================
   DARK MODE OVERRIDES FOR MEAL MANAGEMENT ORANGE THEME
   ============================================================ */
html[data-theme="dark"] .meal-count-card.orange-theme,
html[data-theme="dark"] .meal-count-table.orange-theme {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-card.orange-theme .card-header {
    background: var(--app-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme thead th {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme .meal-item-name {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme .final-count-input {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .meal-count-table.orange-theme tfoot tr,
html[data-theme="dark"] .meal-count-table.orange-theme tfoot td {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator {
    border-color: var(--border-color) !important;
    background: var(--card-bg) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-header,
html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-header .tabulator-col {
    background: var(--app-bg) !important;
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-header .tabulator-col input,
html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-header .tabulator-col select {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-row-odd,
html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-row-even,
html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-row {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-row:hover,
html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-row:hover > .tabulator-cell {
    background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .tabulator-cell {
    border-right: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .tabulator .grid-rownum {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .rkmvm-grid-wrapper .grid-toolbar {
    background: var(--app-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ============================================================
   DARK MODE: view_consolidated_counts (Meal Counts Page)
   ============================================================ */

/* Card headers with hardcoded light gradient */
html[data-theme="dark"] .daily-totals-card .card-header,
html[data-theme="dark"] .meal-details-card .card-header {
    background: var(--app-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Total item stat cards */
html[data-theme="dark"] .total-item-card {
    background: linear-gradient(145deg, var(--card-bg) 0%, var(--app-bg) 100%) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .total-item-card label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .total-item-card .daily-total-input {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Meal group header sections (Lunch/Dinner/Snacks column spans) */
html[data-theme="dark"] .lunch-header {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #fb923c !important;
}
html[data-theme="dark"] .dinner-header {
    background: rgba(140, 77, 77, 0.2) !important;
    color: #d19090 !important;
}
html[data-theme="dark"] .snacks-header {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #fcd34d !important;
}

/* Table sub-headers (item names) */
html[data-theme="dark"] .lunch-item {
    background: rgba(249, 115, 22, 0.08) !important;
}
html[data-theme="dark"] .dinner-item {
    background: rgba(140, 77, 77, 0.08) !important;
}
html[data-theme="dark"] .snacks-item {
    background: rgba(255, 193, 7, 0.08) !important;
}

/* Table thead th */
html[data-theme="dark"] .meal-counts-container .table thead th {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Table body rows */
html[data-theme="dark"] .meal-counts-container .table tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .meal-counts-container .table tbody tr:hover td {
    background: rgba(255,255,255,0.04) !important;
}

/* Totals row */
html[data-theme="dark"] .totals-row td {
    background: rgba(4, 106, 56, 0.12) !important;
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .totals-row .lunch-cell {
    background: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}
html[data-theme="dark"] .totals-row .dinner-cell {
    background: rgba(140, 77, 77, 0.12) !important;
    color: #d19090 !important;
}
html[data-theme="dark"] .totals-row .snacks-cell {
    background: rgba(255, 193, 7, 0.12) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .totals-row .source-label {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}

/* Count inputs in the table */
html[data-theme="dark"] .count-input {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .count-input.has-value {
    background: rgba(4, 106, 56, 0.15) !important;
    border-color: #6ee7b7 !important;
    color: #6ee7b7 !important;
}

/* Mobile card view */
html[data-theme="dark"] .mobile-source-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .mobile-source-header {
    background: var(--app-bg) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .mobile-meal-section {
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .lunch-label {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #fb923c !important;
}
html[data-theme="dark"] .dinner-label {
    background: rgba(140, 77, 77, 0.15) !important;
    color: #d19090 !important;
}
html[data-theme="dark"] .snacks-label {
    background: rgba(255, 193, 7, 0.12) !important;
    color: #fcd34d !important;
}
html[data-theme="dark"] .count-input-mobile {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .count-input-mobile.has-value {
    background: rgba(4, 106, 56, 0.15) !important;
    border-color: #6ee7b7 !important;
}
html[data-theme="dark"] .mobile-item-cell label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .mobile-total-display {
    background: rgba(4, 106, 56, 0.15) !important;
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .mobile-totals-card {
    background: rgba(4, 106, 56, 0.08) !important;
    border-color: #6ee7b7 !important;
}
html[data-theme="dark"] .mobile-totals-card .mobile-source-header {
    background: rgba(4, 106, 56, 0.15) !important;
    color: #6ee7b7 !important;
}

/* Legend dots */
html[data-theme="dark"] .snacks-dot { background: rgba(255,193,7,0.2) !important; }

/* Date picker form in page header */
html[data-theme="dark"] .date-picker-form input[type="date"] {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .date-picker-form .btn {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Special event cards */
html[data-theme="dark"] .special-event-card {
    background: var(--card-bg) !important;
    border-color: rgba(140, 77, 77, 0.5) !important;
}
html[data-theme="dark"] .special-event-card .table thead th {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .special-event-card .table tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Submit section */
html[data-theme="dark"] .submit-section {
    background: var(--card-bg) !important;
    border-top-color: var(--border-color) !important;
}

/* ============================================================
   DARK MODE: inventory/reports (Monthly Inventory Report)
   ============================================================ */

/* Summary stat cards */
html[data-theme="dark"] .inv-summary-card {
    background: var(--card-bg) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-summary-card .label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-summary-card .value {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-summary-card.purchases .icon { background: rgba(4, 106, 56, 0.2) !important; }
html[data-theme="dark"] .inv-summary-card.consumption .icon { background: rgba(29, 78, 216, 0.2) !important; }
html[data-theme="dark"] .inv-summary-card.net-flow .icon { background: rgba(249, 115, 22, 0.2) !important; }
html[data-theme="dark"] .inv-summary-card.closing .icon { background: rgba(107, 114, 128, 0.2) !important; color: var(--text-secondary) !important; }

/* Section cards */
html[data-theme="dark"] .inv-section-card {
    background: var(--card-bg) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-section-header {
    background: var(--app-bg) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-section-header h3 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-search-inline {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Main table */
html[data-theme="dark"] .inv-table tbody td {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-table tbody tr:hover {
    background: rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] .inv-table .cat-row {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-table .cat-row td {
    border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-table .item-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-table .text-muted {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-table .alert-row {
    background: rgba(251, 191, 36, 0.12) !important;
}

/* Vendor card */
html[data-theme="dark"] .inv-vendor-card {
    background: var(--card-bg) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-vendor-card .header {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-vendor-card .vendor-row {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-vendor-card .vendor-row .name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-vendor-card .empty {
    color: var(--text-secondary) !important;
}

/* Notes card */
html[data-theme="dark"] .inv-notes-card {
    background: var(--card-bg) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-notes-card .notes-text {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-notes-card .notes-text strong {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-signature-row .sig-block .line {
    border-top-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Mobile flow cards */
html[data-theme="dark"] .inv-flow-card {
    background: var(--card-bg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
html[data-theme="dark"] .inv-flow-card.alert {
    background: rgba(251, 191, 36, 0.12) !important;
    border-left-color: #d97706 !important;
}
html[data-theme="dark"] .inv-flow-card .item-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-flow-card .flow-item .label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-flow-card .flow-item .val {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-flow-card .flow-item.opening .qty,
html[data-theme="dark"] .inv-flow-card .flow-item.closing .qty {
    color: var(--text-primary) !important;
}

/* Edit Notes modal */
html[data-theme="dark"] #notesModal > div {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] #notesModal [style*="border-bottom"],
html[data-theme="dark"] #notesModal [style*="border-top"] {
    border-color: var(--border-color) !important;
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #notesModal h4 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #notesModal label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] #notesModal textarea {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] #notesModal [style*="background: #f9fafb"] {
    background: var(--app-bg) !important;
}
html[data-theme="dark"] #notesModal [id="btnCancelModal"] {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] #notesModal [style*="background: #fff7ed"] {
    background: rgba(249, 115, 22, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
    color: #fb923c !important;
}

/* Edit Notes button in notes card */
html[data-theme="dark"] #btnEditNotes {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Alert banner */
html[data-theme="dark"] .inv-alert-success,
html[data-theme="dark"] .inv-alert.success {
    background: rgba(4, 106, 56, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(4, 106, 56, 0.3) !important;
}
html[data-theme="dark"] .inv-alert-danger,
html[data-theme="dark"] .inv-alert.error {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .inv-alert-warning,
html[data-theme="dark"] .inv-alert.warning {
    background: rgba(217, 119, 6, 0.15) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    color: #fcd34d !important;
}

/* ============================================================
   DARK MODE: INVENTORY MODULE GLOBAL STYLES (ALL PAGES)
   ============================================================ */

/* Page Headers & Navigation */
html[data-theme="dark"] .inv-page-header,
html[data-theme="dark"] .inv-hero,
html[data-theme="dark"] .inv-grn-header,
html[data-theme="dark"] .inv-slip-header {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--app-bg) 100%) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-btn-back,
html[data-theme="dark"] .inv-btn-outline,
html[data-theme="dark"] .inv-btn-settings,
html[data-theme="dark"] .inv-month-selector input {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-btn-back:hover,
html[data-theme="dark"] .inv-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Cards & Containers */
html[data-theme="dark"] .inv-card-main,
html[data-theme="dark"] .inv-card-container,
html[data-theme="dark"] .inv-item-card,
html[data-theme="dark"] .inv-form-card,
html[data-theme="dark"] .inv-action-card,
html[data-theme="dark"] .inv-stock-card,
html[data-theme="dark"] .inv-history-card,
html[data-theme="dark"] .inv-details-content,
html[data-theme="dark"] .inv-purchase-card,
html[data-theme="dark"] .inv-usage-card,
html[data-theme="dark"] .inv-card-collapsed,
html[data-theme="dark"] .inv-grn-document,
html[data-theme="dark"] .inv-slip-document {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* Action Cards overrides */
html[data-theme="dark"] .inv-action-card.action-purchase { background: rgba(3, 105, 161, 0.05) !important; border-color: rgba(3, 105, 161, 0.2) !important; }
html[data-theme="dark"] .inv-action-card.action-usage { background: rgba(217, 119, 6, 0.05) !important; border-color: rgba(217, 119, 6, 0.2) !important; }
html[data-theme="dark"] .inv-action-card.action-stock { background: rgba(4, 106, 56, 0.05) !important; border-color: rgba(4, 106, 56, 0.2) !important; }
html[data-theme="dark"] .inv-action-card.action-reports { background: rgba(124, 58, 237, 0.05) !important; border-color: rgba(124, 58, 237, 0.2) !important; }

/* Internal Card Headers / Footers */
html[data-theme="dark"] .inv-card-header,
html[data-theme="dark"] .inv-card-actions {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-card-header h5,
html[data-theme="dark"] .inv-card-header h3 {
    color: var(--text-primary) !important;
}

/* Tables & Grids */
html[data-theme="dark"] .inv-items-table thead,
html[data-theme="dark"] .inv-history-table thead,
html[data-theme="dark"] .inv-items-form-table thead,
html[data-theme="dark"] .inv-table thead,
html[data-theme="dark"] .inv-batch-table thead {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .inv-items-table th,
html[data-theme="dark"] .inv-history-table th,
html[data-theme="dark"] .inv-items-form-table th,
html[data-theme="dark"] .inv-table th,
html[data-theme="dark"] .inv-batch-table th,
html[data-theme="dark"] .inv-items-table td,
html[data-theme="dark"] .inv-history-table td,
html[data-theme="dark"] .inv-items-form-table td,
html[data-theme="dark"] .inv-table td,
html[data-theme="dark"] .inv-batch-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-history-table .date { color: var(--text-primary) !important; }
html[data-theme="dark"] .inv-history-table .cost { color: #fca5a5 !important; }

/* Search and Inputs */
html[data-theme="dark"] .inv-search-box input,
html[data-theme="dark"] .inv-search-input,
html[data-theme="dark"] .inv-form-group input:not([type="checkbox"]),
html[data-theme="dark"] .inv-form-group select,
html[data-theme="dark"] .inv-form-group textarea,
html[data-theme="dark"] .inv-input,
html[data-theme="dark"] .inv-items-form-table input {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-items-form-table input:read-only {
    background: rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .inv-form-card {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .inv-form-row {
    border-bottom-color: var(--border-color) !important;
}

/* Info blocks */
html[data-theme="dark"] .inv-info-block,
html[data-theme="dark"] .inv-list-item {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
}

/* Detail Labels */
html[data-theme="dark"] .inv-detail-row {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-detail-label {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
    border-right-color: var(--border-color) !important;
}

/* Typography & Subtitles */
html[data-theme="dark"] .inv-card-name,
html[data-theme="dark"] .inv-page-title,
html[data-theme="dark"] .inv-section-title,
html[data-theme="dark"] .inv-detail-value,
html[data-theme="dark"] .inv-hero-title,
html[data-theme="dark"] .inv-grn-title,
html[data-theme="dark"] .inv-slip-title,
html[data-theme="dark"] .inv-purchase-supplier {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-card-meta,
html[data-theme="dark"] .inv-page-subtitle,
html[data-theme="dark"] .inv-form-group label,
html[data-theme="dark"] .inv-hero-subtitle,
html[data-theme="dark"] .inv-grn-subtitle,
html[data-theme="dark"] .inv-slip-subtitle,
html[data-theme="dark"] .inv-list-meta,
html[data-theme="dark"] .inv-stat-label,
html[data-theme="dark"] .inv-purchase-meta {
    color: var(--text-secondary) !important;
}

/* Empty States */
html[data-theme="dark"] .inv-empty-state,
html[data-theme="dark"] .inv-no-data {
    color: var(--text-secondary) !important;
}

/* Modal Dialogs */
html[data-theme="dark"] .inv-modal-content,
html[data-theme="dark"] .inv-modal-body,
html[data-theme="dark"] .inv-modal {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .inv-modal-header,
html[data-theme="dark"] .inv-modal-footer {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-modal-header h4,
html[data-theme="dark"] .inv-modal-header h5 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-modal-close {
    color: var(--text-secondary) !important;
}

/* ============================================================
   DARK MODE: DASHBOARD VARIABLES & GLOBAL EXCEPTIONS
   ============================================================ */

/* Global variable overrides for dashboard & view_stock */
html[data-theme="dark"] {
    --inv-cream: var(--app-bg) !important;
    --inv-peach: var(--app-bg) !important;
    --inv-bg: var(--app-bg) !important;
    --inv-text: var(--text-primary) !important;
    --inv-text-muted: var(--text-secondary) !important;
    --inv-border: var(--border-color) !important;
    --inv-card-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    --inv-card-shadow-hover: 0 8px 30px rgba(0,0,0,0.4) !important;
}

/* Override hardcoded gradients in page wrappers and backgrounds */
html[data-theme="dark"] .inv-page-wrapper {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .inv-bg-pattern {
    display: none !important; /* Hide dot pattern in dark mode to prevent visual noise */
}

/* Fix table container backgrounds (e.g., in item_history.php) */
html[data-theme="dark"] .inv-table-container {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

html[data-theme="dark"] .inv-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Details row in stock view */
html[data-theme="dark"] .inv-details-row,
html[data-theme="dark"] .inv-details-row > td {
    background: var(--app-bg) !important;
}

/* Fix white text forcing in item history headers */
html[data-theme="dark"] .inv-page-header h1 span[style*="color: white"] {
    color: var(--text-primary) !important;
}

/* Fix Timeline cards */
html[data-theme="dark"] .inv-timeline-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-timeline-card .date {
    color: var(--text-primary) !important;
}

/* ============================================================
   GLOBAL LAYOUT FIXES (Applies in both modes)
   ============================================================ */

/* Fix search button layout: portal-style makes `i` absolute which breaks inside a button */
.inv-search-box button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.inv-search-box button i {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    color: inherit !important;
    margin: 0 !important;
}

/* ============================================================
   DARK MODE: INVENTORY MODULE OVERRIDES (REPORTS, PURCHASES, USAGE)
   ============================================================ */

/* Tab Navigation */
html[data-theme="dark"] .inv-tabs {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-tab {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-tab:hover {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-tab.active {
    color: var(--text-primary) !important;
    border-bottom-color: var(--text-primary) !important;
}

/* Controls & Lists Search */
html[data-theme="dark"] .inv-controls-desktop,
html[data-theme="dark"] .inv-controls-mobile {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-mobile-ctrl-btn {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-search-box {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-search-input {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Daily Usage & Purchases Entry Forms */
html[data-theme="dark"] .inv-form-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-form-card .card-header {
    background: linear-gradient(135deg, var(--card-bg), var(--app-bg)) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-form-card .card-header h5 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-form-card .card-footer {
    background: var(--app-bg) !important;
    border-top: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-form-group label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-form-group input,
html[data-theme="dark"] .inv-form-group select {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-form-group input:focus,
html[data-theme="dark"] .inv-form-group select:focus {
    border-color: var(--border-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05) !important;
}

/* Items Forms & Stock Badges */
html[data-theme="dark"] .inv-items-form-table thead,
html[data-theme="dark"] .inv-items-table thead {
    background: var(--app-bg) !important;
}
html[data-theme="dark"] .inv-items-form-table th,
html[data-theme="dark"] .inv-items-table th {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-items-form-table input,
html[data-theme="dark"] .inv-items-form-table select,
html[data-theme="dark"] .inv-items-table input,
html[data-theme="dark"] .inv-items-table select {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-items-form-table .stock-badge,
html[data-theme="dark"] .inv-stock-badge {
    background: rgba(29, 78, 216, 0.15) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .inv-items-form-table .unit-addon span,
html[data-theme="dark"] .inv-unit-addon span {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-btn-remove {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
}
html[data-theme="dark"] .inv-btn-add {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-btn-add:hover {
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* History Cards (Mobile & Lists) */
html[data-theme="dark"] .inv-history-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-history-card .card-header {
    background: var(--app-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-history-card .card-header h5 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-history-table th {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-history-table td {
    border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-usage-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-usage-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .inv-usage-card .date {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-usage-card .notes {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-usage-card .items-badge {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}

/* Modals & Overlays */
html[data-theme="dark"] .inv-modal {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-modal-header h3 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-modal-close {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-input {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-input:focus {
    border-color: var(--text-primary) !important;
}

/* Pagination */
html[data-theme="dark"] .inv-pagination {
    border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-pagination a {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-pagination a:hover {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}

/* General Lists & Tables */
html[data-theme="dark"] .inv-table thead {
    background: var(--app-bg) !important;
}
html[data-theme="dark"] .inv-table th {
    color: var(--text-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-table td {
    border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .inv-table .items-badge {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-table .btn-view {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-table .btn-view:hover {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-empty-state {
    color: var(--text-secondary) !important;
}

/* Monthly Reports Summary Cards */
html[data-theme="dark"] .inv-summary-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-summary-card .value {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-summary-card .label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-summary-card.purchases .icon { background: rgba(4, 106, 56, 0.15) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .inv-summary-card.consumption .icon { background: rgba(29, 78, 216, 0.15) !important; color: #93c5fd !important; }
html[data-theme="dark"] .inv-summary-card.net-flow .icon { background: rgba(217, 119, 6, 0.15) !important; color: #fcd34d !important; }
html[data-theme="dark"] .inv-summary-card.closing .icon { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-primary) !important; }

html[data-theme="dark"] .inv-summary-card.purchases .value { color: #6ee7b7 !important; }
html[data-theme="dark"] .inv-summary-card.consumption .value { color: #93c5fd !important; }
html[data-theme="dark"] .inv-summary-card.net-flow .value.positive { color: #fca5a5 !important; }
html[data-theme="dark"] .inv-summary-card.net-flow .value.negative { color: #6ee7b7 !important; }

/* Reports Layout Cards & Notes */
html[data-theme="dark"] .inv-section-card,
html[data-theme="dark"] .inv-vendor-card,
html[data-theme="dark"] .inv-notes-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-section-header,
html[data-theme="dark"] .inv-vendor-card .header {
    background: var(--app-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-section-header h3,
html[data-theme="dark"] .inv-vendor-card .header {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-search-inline {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-vendor-card .vendor-row {
    border-bottom: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-vendor-card .vendor-row .name {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-vendor-card .vendor-row .amount {
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .inv-notes-card .notes-text {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-notes-card .notes-text strong {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-signature-row .sig-block .line {
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Reports Flow Cards (Daily Usage Detail Views) */
html[data-theme="dark"] .inv-flow-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .inv-flow-card.alert {
    background: rgba(217, 119, 6, 0.1) !important;
    border-left: 3px solid #d97706 !important;
}
html[data-theme="dark"] .inv-flow-card .item-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-flow-card .flow-item .label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-flow-card .flow-item .val {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-flow-card .flow-item.opening .qty { color: var(--text-secondary) !important; }
html[data-theme="dark"] .inv-flow-card .flow-item.in .qty { color: #6ee7b7 !important; }
html[data-theme="dark"] .inv-flow-card .flow-item.out .qty { color: #93c5fd !important; }
html[data-theme="dark"] .inv-flow-card .flow-item.closing .qty { color: var(--text-primary) !important; }

/* Reports Inventory Tables */
html[data-theme="dark"] .inv-table .cat-row {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-table .cat-row td {
    border-top: 2px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-table .item-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-table .alert-row {
    background: rgba(217, 119, 6, 0.1) !important;
}
html[data-theme="dark"] .inv-table thead .subheader {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .inv-table thead .col-opening {
    background: var(--app-bg) !important;
}
html[data-theme="dark"] .inv-table thead .col-in {
    background: rgba(4, 106, 56, 0.5) !important;
}
html[data-theme="dark"] .inv-table thead .col-out {
    background: rgba(29, 78, 216, 0.5) !important;
}
html[data-theme="dark"] .inv-table thead .col-closing {
    background: var(--card-bg) !important;
}

/* Document Details Views (GRN & Slips) */
html[data-theme="dark"] .inv-grn-document,
html[data-theme="dark"] .inv-slip-document {
    background: var(--card-bg) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    border: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] .inv-grn-header,
html[data-theme="dark"] .inv-slip-header {
    background: linear-gradient(135deg, var(--card-bg), var(--app-bg)) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-grn-title,
html[data-theme="dark"] .inv-slip-title {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-grn-subtitle,
html[data-theme="dark"] .inv-slip-subtitle {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-grn-number .number,
html[data-theme="dark"] .inv-slip-number .number {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-grn-number .date,
html[data-theme="dark"] .inv-slip-number .date {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-party-block h6,
html[data-theme="dark"] .inv-info-block h6 {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-party-block .name,
html[data-theme="dark"] .inv-info-block .value {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-party-block .detail,
html[data-theme="dark"] .inv-info-block .value.italic {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-btn-back {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-btn-back:hover {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-items-table .item-main,
html[data-theme="dark"] .inv-items-table td {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-items-table .item-batch {
    background: var(--app-bg) !important;
}
html[data-theme="dark"] .inv-items-table .total-row,
html[data-theme="dark"] .inv-items-table .total-row td {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-notes-section {
    background: var(--app-bg) !important;
}
html[data-theme="dark"] .inv-notes-section h6 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-notes-section p {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-signature-box .line {
    border-top-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-mobile-item-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-mobile-item-card .item-header {
    background: var(--app-bg) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .inv-mobile-item-card .item-name,
html[data-theme="dark"] .inv-mobile-item-header .name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-mobile-item-card .item-details {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-mobile-item-card .item-num {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-mobile-batch {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}

/* Search Results Views */
html[data-theme="dark"] .inv-search-header {
    background: linear-gradient(135deg, var(--card-bg), var(--app-bg)) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-search-header h1 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-search-header p {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-search-box {
    background: var(--app-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .inv-search-box input {
    background: transparent !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-result-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-result-card .date {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-result-card .meta {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .inv-result-card .icon {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
}

/* Translucent Bootstrap Table Row Overrides for Dark Mode */
html[data-theme="dark"] .table-warning,
html[data-theme="dark"] .table-warning > td,
html[data-theme="dark"] .table-warning > th {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #fcd34d !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
}
html[data-theme="dark"] .table-info,
html[data-theme="dark"] .table-info > td,
html[data-theme="dark"] .table-info > th {
    background-color: rgba(3, 105, 161, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(3, 105, 161, 0.3) !important;
}
html[data-theme="dark"] .table-danger,
html[data-theme="dark"] .table-danger > td,
html[data-theme="dark"] .table-danger > th {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
html[data-theme="dark"] .table-success,
html[data-theme="dark"] .table-success > td,
html[data-theme="dark"] .table-success > th {
    background-color: rgba(4, 106, 56, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(4, 106, 56, 0.3) !important;
}

/* Premium Card Headers & Buttons with hardcoded styles */
html[data-theme="dark"] .card-header.bg-primary {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.25), rgba(13, 110, 253, 0.15)) !important;
    border-bottom: 1px solid rgba(13, 110, 253, 0.3) !important;
}
html[data-theme="dark"] .card-header.bg-primary,
html[data-theme="dark"] .card-header.bg-primary * {
    color: #93c5fd !important;
}
html[data-theme="dark"] .card-header.bg-success {
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.25), rgba(25, 135, 84, 0.15)) !important;
    border-bottom: 1px solid rgba(25, 135, 84, 0.3) !important;
}
html[data-theme="dark"] .card-header.bg-success,
html[data-theme="dark"] .card-header.bg-success * {
    color: #a7f3d0 !important;
}
html[data-theme="dark"] .btn-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary);
}
html[data-theme="dark"] .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-secondary[style*="background-color"] {
    background-color: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-info[style*="background-color"] {
    background-color: rgba(13, 202, 240, 0.25) !important;
    border-color: rgba(13, 202, 240, 0.3) !important;
    color: #9eeaf9 !important;
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary[style*="background-color"] {
    background-color: rgba(13, 110, 253, 0.25) !important;
    border-color: rgba(13, 110, 253, 0.3) !important;
    color: #93c5fd !important;
}

/* ===================================================================
 * Inventory Dashboard Overrides
 * =================================================================== */
html[data-theme="dark"] .inventory-dashboard {
    --inv-cream: var(--app-bg) !important;
    --inv-peach: var(--app-bg) !important;
    --inv-text: var(--text-primary) !important;
    --inv-text-muted: var(--text-secondary) !important;
    --inv-border: var(--border-color) !important;
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .inv-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

html[data-theme="dark"] .inv-hero::after {
    background: linear-gradient(180deg, transparent, var(--app-bg)) !important;
}

html[data-theme="dark"] .inv-stats-bar {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .inv-stat-item {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-stat-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .inv-section-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-action-card,
html[data-theme="dark"] .inv-activity-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-action-content h3,
html[data-theme="dark"] .inv-card-header h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-action-content p {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .inv-card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-list-item {
    border-bottom-color: var(--border-color) !important;
    background: transparent !important;
}

html[data-theme="dark"] .inv-list-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .inv-list-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-list-meta {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .inv-empty-state {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .inv-card-link {
    color: #38bdf8 !important; /* Lighter secondary color for better contrast */
}

html[data-theme="dark"] .inv-card-link:hover {
    color: #7dd3fc !important;
}

html[data-theme="dark"] .inv-card-badge.badge-purchase {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .inv-card-badge.badge-usage {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .inv-list-icon.purchase {
    background: rgba(22, 163, 74, 0.2) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .inv-list-icon.usage {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}

html[data-theme="dark"] .inv-list-value.text-success {
    color: #4ade80 !important;
}

html[data-theme="dark"] .inv-list-value.text-danger {
    color: #f87171 !important;
}

/* ===================================================================
 * Inventory Stock View Overrides
 * =================================================================== */
html[data-theme="dark"] .inv-page-wrapper {
    --inv-cream: var(--app-bg) !important;
    --inv-bg: var(--card-bg) !important;
    --inv-text: var(--text-primary) !important;
    --inv-text-muted: var(--text-secondary) !important;
    --inv-border: var(--border-color) !important;
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .inv-page-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

html[data-theme="dark"] .inv-controls-desktop,
html[data-theme="dark"] .inv-controls-mobile,
html[data-theme="dark"] .inv-table-container,
html[data-theme="dark"] .inv-stock-card,
html[data-theme="dark"] .inv-batch-table,
html[data-theme="dark"] .inv-modal {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-search-box,
html[data-theme="dark"] .inv-select,
html[data-theme="dark"] .inv-btn-outline,
html[data-theme="dark"] .inv-mobile-ctrl-btn,
html[data-theme="dark"] .inv-btn-icon,
html[data-theme="dark"] .category-badge,
html[data-theme="dark"] .batch-count,
html[data-theme="dark"] .inv-modal-close,
html[data-theme="dark"] .inv-input {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-search-input {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-table thead,
html[data-theme="dark"] .inv-batch-table th {
    background: rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .inv-table th,
html[data-theme="dark"] .inv-table td,
html[data-theme="dark"] .inv-batch-table td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .inv-details-row {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .inv-card-expanded {
    background: var(--app-bg) !important;
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-batch-item {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-modal-header {
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-btn-outline:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

html[data-theme="dark"] .inv-btn-icon:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* ===================================================================
 * Inventory Reports Dark Mode & Vibrant Coloring
 * =================================================================== */
html[data-theme="dark"] .inv-page-container {
    background: transparent !important;
}

html[data-theme="dark"] .inv-summary-card,
html[data-theme="dark"] .inv-section-card,
html[data-theme="dark"] .inv-vendor-card,
html[data-theme="dark"] .inv-notes-card,
html[data-theme="dark"] .inv-flow-card,
html[data-theme="dark"] .inv-modal-content {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-section-header,
html[data-theme="dark"] .inv-vendor-card .header,
html[data-theme="dark"] .inv-modal-header,
html[data-theme="dark"] .inv-modal-footer {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-table thead th.col-opening,
html[data-theme="dark"] .inv-table thead th.col-closing {
    background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .inv-search-inline,
html[data-theme="dark"] .inv-month-selector input[type="month"],
html[data-theme="dark"] .inv-form-group textarea {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-summary-card .value,
html[data-theme="dark"] .inv-summary-card .label,
html[data-theme="dark"] .inv-vendor-card .vendor-row .name,
html[data-theme="dark"] .inv-notes-card .notes-text strong,
html[data-theme="dark"] .inv-table .item-name {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-notes-card .notes-text,
html[data-theme="dark"] .inv-signature-row .sig-block .line {
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-table .cat-row {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .inv-table .cat-row td {
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-table tbody td {
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .inv-flow-card {
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .inv-vendor-card .vendor-row {
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-btn-cancel {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}

/* Vibrant Icons and Accents for Dark Mode */
html[data-theme="dark"] .bg-gradient-primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; box-shadow: 0 4px 15px rgba(59,130,246,0.3) !important; }
html[data-theme="dark"] .bg-gradient-success { background: linear-gradient(135deg, #10b981, #047857) !important; box-shadow: 0 4px 15px rgba(16,185,129,0.3) !important; }
html[data-theme="dark"] .bg-gradient-danger  { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; box-shadow: 0 4px 15px rgba(239,68,68,0.3) !important; }
html[data-theme="dark"] .bg-gradient-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 4px 15px rgba(245,158,11,0.3) !important; }
html[data-theme="dark"] .bg-gradient-info    { background: linear-gradient(135deg, #0ea5e9, #0369a1) !important; box-shadow: 0 4px 15px rgba(14,165,233,0.3) !important; }

/* ===================================================================
 * Purchase Details Dark Mode Fixes
 * =================================================================== */
html[data-theme="dark"] .inv-grn-document,
html[data-theme="dark"] .inv-result-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-notes-section,
html[data-theme="dark"] .inv-items-table thead,
html[data-theme="dark"] .inv-mobile-item-card {
    background: var(--app-bg) !important;
}

html[data-theme="dark"] .inv-items-table th {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .inv-items-table td,
html[data-theme="dark"] .inv-signature-row {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .inv-items-table .item-name,
html[data-theme="dark"] .inv-party-block .name,
html[data-theme="dark"] .inv-result-card .supplier,
html[data-theme="dark"] .inv-mobile-item-card .item-name {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .inv-items-table .total-row {
    background: rgba(249, 115, 22, 0.1) !important; /* Muted saffron light for dark mode */
}
html[data-theme="dark"] .inv-items-table .total-row td {
    color: var(--text-primary) !important;
}

/* Permissions Page Overrides */
html[data-theme="dark"] .permissions-page .page-header {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .permissions-page .perm-stat-card {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .permissions-page .perm-stat-icon.icon-permissions {
    background: rgba(253, 230, 138, 0.1) !important;
}
html[data-theme="dark"] .permissions-page .perm-stat-icon.icon-roles {
    background: rgba(191, 219, 254, 0.1) !important;
}
html[data-theme="dark"] .permissions-page .perm-stat-icon.icon-categories {
    background: rgba(167, 243, 208, 0.1) !important;
}
html[data-theme="dark"] .permissions-page .perm-tab:hover,
html[data-theme="dark"] .permissions-page .perm-tab.active {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .permissions-page .card-header {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .permissions-page .perm-form-group input {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .permissions-page #permissionsTable code {
    background: rgba(99, 102, 241, 0.15) !important;
}
html[data-theme="dark"] .permissions-page .perm-category-badge,
html[data-theme="dark"] .permissions-page .perm-importance-badge {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .permissions-page .matrix-info-bar {
    background: rgba(253, 230, 138, 0.1) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .permissions-page .matrix-info-bar p {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .permissions-page .matrix-table thead th,
html[data-theme="dark"] .permissions-page .matrix-table thead th:first-child,
html[data-theme="dark"] .permissions-page .matrix-table tbody td:first-child {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .permissions-page .matrix-category-row td {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .permissions-page .matrix-footer {
    background: var(--card-bg) !important;
}

/* ==========================================================================
   PAGINATION (DARK THEME)
   ========================================================================== */
html[data-theme="dark"] .page-link {
    background-color: var(--surface-bg-light);
    color: var(--text-secondary);
}

html[data-theme="dark"] .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .page-item.active .page-link {
    background: linear-gradient(135deg, var(--primary-color, #f97316) 0%, var(--primary-hover, #ea580c) 100%) !important;
    color: var(--white, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3) !important;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
}

/* ==========================================================================
   SUPERINTENDENT / GLOBAL TEXTAREA & INPUT OVERRIDES
   ========================================================================== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary, #f97316) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ==========================================================================
   HOSTEL DASHBOARD MOBILE VIEW OVERRIDES
   ========================================================================== */
html[data-theme="dark"] .mobile-student-table table {
    background: var(--card-bg) !important;
}

html[data-theme="dark"] .mobile-student-table thead {
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .mobile-student-table th {
    background: var(--app-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

html[data-theme="dark"] .mobile-student-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .mobile-student-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] #hostel-mobile-table-view .name-cell .fname,
html[data-theme="dark"] #hostel-mobile-table-view .name-cell .lname {
    color: var(--text-primary) !important;
}

/* Stat Cards Mobile Dark Mode Fixes */
html[data-theme="dark"] .stat-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .stat-value {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .stat-label {
    color: var(--text-secondary) !important;
}

/* Mobile Stat Card Icons (Dark Mode Colors) */
html[data-theme="dark"] .stat-card-icon.icon-total {
    background: rgba(79, 70, 229, 0.2) !important;
    color: #818cf8 !important;
}
html[data-theme="dark"] .stat-card-icon.icon-present {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .stat-card-icon.icon-on-leave {
    background: rgba(249, 115, 22, 0.2) !important;
    color: #fb923c !important;
}
html[data-theme="dark"] .stat-card-icon.icon-departing {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}
html[data-theme="dark"] .stat-card-icon.icon-returning {
    background: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
}

html[data-theme="dark"] .stat-card[data-filter=""].active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--text-muted) !important;
}

html[data-theme="dark"] .stat-card[data-filter="Present"].active {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border-color: #22c55e !important;
}

html[data-theme="dark"] .stat-card[data-filter="Absent"].active {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
}

html[data-theme="dark"] .stat-card[data-filter="Departing Today"].active {
    background-color: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
}

html[data-theme="dark"] .stat-card[data-filter="Arriving Today"].active {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

/* ============================================================
   DARK MODE: hostel_dashboard.php — comprehensive overrides
   Covers all hardcoded white/light backgrounds and text colors
   ============================================================ */

/* --- Mobile page-container background (overrides #fff in @media ≤991px) --- */
@media screen and (max-width: 991px) {
    html[data-theme="dark"] .page-container {
        background: var(--app-bg) !important;
        color: var(--text-primary) !important;
    }
}

/* --- Desktop stat cards (card-dashing) background --- */
html[data-theme="dark"] .card-dashing {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .card-dashing.active {
    background: rgba(79, 70, 229, 0.15) !important;
    border-color: var(--dash-primary) !important;
}
html[data-theme="dark"] .card-departing {
    background: linear-gradient(135deg, rgba(249,115,22,0.15) 0%, rgba(251,146,60,0.12) 100%) !important;
}
html[data-theme="dark"] .card-returning {
    background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(52,211,153,0.12) 100%) !important;
}

/* --- Stat number text (inline style="color:#1e293b") --- */
html[data-theme="dark"] .card-dashing h3,
html[data-theme="dark"] .card-dashing .fw-bold {
    color: var(--text-primary) !important;
}

/* --- Table header / row backgrounds in the premium table --- */
html[data-theme="dark"] .table-header-custom {
    background: var(--app-bg) !important;
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .col-header:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--dash-primary) !important;
}
html[data-theme="dark"] .table-row-custom {
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .table-row-custom:hover {
    background: rgba(255,255,255,0.05) !important;
}

/* --- Student avatar initials inner circle --- */
html[data-theme="dark"] .student-initials {
    background: var(--card-bg) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .student-img {
    border-color: var(--border-color) !important;
}

/* --- Button icons (white background) --- */
html[data-theme="dark"] .btn-icon {
    background: rgba(255,255,255,0.07) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .btn-view:hover {
    background: rgba(79,70,229,0.25) !important;
    color: var(--dash-primary) !important;
}
html[data-theme="dark"] .btn-log {
    background: rgba(59,130,246,0.15) !important;
}
html[data-theme="dark"] .btn-emerg {
    background: rgba(239,68,68,0.15) !important;
}

/* --- Button outline hover in control bar --- */
html[data-theme="dark"] .btn-premium-outline:hover {
    background: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .btn-export-pdf {
    background: rgba(239,68,68,0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239,68,68,0.3) !important;
}
html[data-theme="dark"] .btn-export-excel {
    background: rgba(16,185,129,0.12) !important;
    color: #34d399 !important;
    border-color: rgba(16,185,129,0.3) !important;
}

/* --- Nav tabs --- */
html[data-theme="dark"] .nav-tabs .nav-link:not(.active):hover {
    background-color: rgba(255,255,255,0.07) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* --- Status badges (light backgrounds) --- */
html[data-theme="dark"] .badge-present {
    background: rgba(16,185,129,0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16,185,129,0.3) !important;
}
html[data-theme="dark"] .badge-leave {
    background: rgba(220,38,38,0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(220,38,38,0.3) !important;
}
html[data-theme="dark"] .badge-class_leave {
    background: rgba(124,58,237,0.2) !important;
    color: #c4b5fd !important;
    border-color: rgba(124,58,237,0.3) !important;
}
html[data-theme="dark"] .badge-departing {
    background: rgba(217,119,6,0.2) !important;
    color: #fcd34d !important;
    border-color: rgba(217,119,6,0.3) !important;
}
html[data-theme="dark"] .badge-returning {
    background: rgba(37,99,235,0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(37,99,235,0.3) !important;
}

/* --- Leave History / Debug Modal --- */
html[data-theme="dark"] .leaves-debug-modal {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
}
html[data-theme="dark"] .leaves-debug-header {
    background: var(--app-bg) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .leaves-debug-header h5 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .leaves-debug-close {
    background: rgba(255,255,255,0.1) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .leaves-debug-close:hover {
    background: rgba(255,255,255,0.15) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .leaves-debug-status {
    background: var(--app-bg) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .leaves-debug-body {
    background: var(--card-bg) !important;
}
html[data-theme="dark"] .leave-debug-card {
    background: var(--app-bg) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .leave-debug-card.active-leave {
    background: rgba(16,185,129,0.12) !important;
    border-color: rgba(16,185,129,0.4) !important;
}
html[data-theme="dark"] .leave-debug-id {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .leave-debug-label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .leave-debug-value {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .leave-debug-inactive-reason {
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color) !important;
}
html[data-theme="dark"] .leaves-debug-empty {
    color: var(--text-muted) !important;
}

/* --- Search input in control bar --- */
html[data-theme="dark"] .search-input {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .search-input::placeholder {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .search-input:focus {
    border-color: var(--dash-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.2) !important;
}

/* --- stat card active state — desktop --- */
html[data-theme="dark"] .stat-card.active,
html[data-theme="dark"] .card-dashing.active {
    background-color: rgba(79,70,229,0.15) !important;
}