/* ========================================
   Light Mode Theme Overrides
   Applied when NOT in dark mode
   ======================================== */

html:not(.dark-mode) {
    /* Light backgrounds - soft and friendly */
    --bg-primary: #ffffff;
    --bg-secondary: #f7f9fc;
    --bg-tertiary: #e8f0fe;
    
    /* Light text colors */
    --text-primary: #1a1a1a;
    --text-secondary: #5f6368;
    --text-muted: #9aa0a6;
    
    /* Light borders and shadows - softer */
    --border-color: #e8eaed;
    --shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.1);
    --shadow-md: 0 2px 8px 0 rgba(60, 64, 67, 0.15);
    
    /* Light sidebar colors - clean white */
    --sidebar-bg: #ffffff;
    --sidebar-text: #1a1a1a;
    --sidebar-text-muted: #5f6368;
    --sidebar-border: #e8eaed;
    --sidebar-item-hover: #f1f3f4;
    --sidebar-item-active: #e8f0fe;
    --sidebar-divider: #e8eaed;
}

/* ========================================
   Light Mode Sidebar Override
   ======================================== */

html:not(.dark-mode) .sidebar {
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
    border-right: none !important;
    box-shadow: none !important;
}

html:not(.dark-mode) .sidebar .logo {
    color: var(--sidebar-text) !important;
    /* border-bottom: 1px solid var(--sidebar-border) !important; */
}

html:not(.dark-mode) .sidebar .logo i {
    color: var(--primary-color) !important;
}

html:not(.dark-mode) .sidebar .logo span {
    color: var(--sidebar-text) !important;
}

/* Sidebar footer + collapse button in light mode */
html:not(.dark-mode) .sidebar-footer {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 100%) !important;
    border-top: 1px solid var(--sidebar-divider) !important;
}

html:not(.dark-mode) .sidebar-collapse-btn {
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #e8eaed !important;
}

html:not(.dark-mode) .sidebar-collapse-btn:hover {
    background: #f1f3f4 !important;
}

/* Nav menu items */
html:not(.dark-mode) .sidebar .nav-menu-item {
    color: var(--sidebar-text-muted) !important;
}

html:not(.dark-mode) .sidebar .nav-menu-item:hover {
    background-color: var(--sidebar-item-hover) !important;
    color: var(--sidebar-text) !important;
}

html:not(.dark-mode) .sidebar .nav-menu-item.active {
    background-color: var(--sidebar-item-active) !important;
    color: var(--primary-color) !important;
}

html:not(.dark-mode) .sidebar .nav-menu-item i {
    color: var(--sidebar-text-muted) !important;
}

html:not(.dark-mode) .sidebar .nav-menu-item.active i {
    color: var(--primary-color) !important;
}

/* Section headers and dividers */
html:not(.dark-mode) .sidebar .nav-section-header {
    color: var(--sidebar-text-muted) !important;
}

html:not(.dark-mode) .sidebar .nav-section-divider {
    background-color: var(--sidebar-divider) !important;
}

html:not(.dark-mode) .sidebar .sidebar-header {
    border-bottom: 1px solid var(--sidebar-border) !important;
}

/* Language switcher in sidebar */
html:not(.dark-mode) .sidebar .nav-language-switcher .btn {
    background-color: var(--sidebar-item-hover) !important;
    border-color: var(--sidebar-border) !important;
    color: var(--sidebar-text) !important;
}

html:not(.dark-mode) .sidebar .nav-language-switcher .btn:hover {
    background-color: var(--sidebar-item-active) !important;
    border-color: var(--primary-color) !important;
}

/* ========================================
   Light Mode Top Navbar
   ======================================== */

html:not(.dark-mode) .top-navbar {
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    box-shadow: none !important;
}

html:not(.dark-mode) .topbar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Light mode navbar icons - darker for better visibility */
html:not(.dark-mode) .nav-icon-button {
    color: var(--sidebar-text) !important;
}

html:not(.dark-mode) .nav-icon-button:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--primary-color) !important;
}

html:not(.dark-mode) .nav-icon-button i {
    color: #1a1a1a !important;
}

html:not(.dark-mode) .nav-icon-button:hover i {
    color: var(--primary-color) !important;
}

/* Hamburger menu icon */
html:not(.dark-mode) .sidebar-toggle {
    color: var(--sidebar-text) !important;
}

html:not(.dark-mode) .sidebar-toggle:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--primary-color) !important;
}

html:not(.dark-mode) .user-profile-button {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html:not(.dark-mode) .user-profile-button:hover {
    background: var(--bg-secondary) !important;
}

html:not(.dark-mode) .user-name {
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .dropdown-arrow {
    color: var(--text-secondary) !important;
}

/* ========================================
   Light Mode Main Content Area
   ======================================== */

html:not(.dark-mode) body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .main-content {
    background-color: var(--bg-secondary) !important;
}

html:not(.dark-mode) .page-content {
    background-color: var(--bg-secondary) !important;
}

html:not(.dark-mode) .content {
    background-color: var(--bg-secondary) !important;
}

html:not(.dark-mode) .content-wrapper {
    background: var(--bg-secondary) !important;
}

/* ========================================
   Light Mode Cards
   ======================================== */

html:not(.dark-mode) .card {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Preserve colored left borders on stat cards */
html:not(.dark-mode) .stat-card {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-left-width: 4px !important;
    box-shadow: var(--shadow-sm) !important;
}

html:not(.dark-mode) .stat-card.stat-primary {
    border-left-color: var(--primary-color) !important;
}

html:not(.dark-mode) .stat-card.stat-success {
    border-left-color: var(--success-color) !important;
}

html:not(.dark-mode) .stat-card.stat-warning {
    border-left-color: var(--warning-color) !important;
}

html:not(.dark-mode) .stat-card.stat-info {
    border-left-color: var(--info-color) !important;
}

html:not(.dark-mode) .card-header {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .card-body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

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

html:not(.dark-mode) .card-text {
    color: var(--text-secondary) !important;
}

/* FIX: Empty state cards and special backgrounds */
html:not(.dark-mode) .empty-state,
html:not(.dark-mode) .no-data,
html:not(.dark-mode) .placeholder-content,
html:not(.dark-mode) [style*="background: #000"],
html:not(.dark-mode) [style*="background:#000"],
html:not(.dark-mode) [style*="background-color: #000"],
html:not(.dark-mode) [style*="background-color:#000"],
html:not(.dark-mode) [style*="background: black"],
html:not(.dark-mode) [style*="background-color: black"] {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Override any dark/black backgrounds in light mode */
html:not(.dark-mode) .bg-dark,
html:not(.dark-mode) .bg-black {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .alert-dark {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ========================================
   Light Mode Forms & Inputs
   ======================================== */

html:not(.dark-mode) .form-control {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .form-control:focus {
    background-color: var(--bg-primary) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .form-label {
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .form-select {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   Light Mode Tables
   ======================================== */

html:not(.dark-mode) .table {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .table thead th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

html:not(.dark-mode) .table tbody tr {
    border-bottom: 1px solid var(--border-color) !important;
}

html:not(.dark-mode) .table tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

html:not(.dark-mode) .table td {
    color: var(--text-primary) !important;
}

/* ========================================
   Light Mode Buttons
   ======================================== */

html:not(.dark-mode) .btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

html:not(.dark-mode) .btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

html:not(.dark-mode) .btn-outline-secondary {
    color: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
}

html:not(.dark-mode) .btn-outline-secondary:hover {
    background-color: var(--bg-secondary) !important;
}

/* ========================================
   Light Mode Modals & Dropdowns
   ======================================== */

html:not(.dark-mode) .modal-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html:not(.dark-mode) .modal-header {
    border-bottom: 1px solid var(--border-color) !important;
}

html:not(.dark-mode) .modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

html:not(.dark-mode) .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e8eaed !important;
    box-shadow: 0 8px 24px rgba(60, 64, 67, 0.12), 
                0 2px 6px rgba(60, 64, 67, 0.08) !important;
}

html:not(.dark-mode) .dropdown-item {
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .dropdown-item:hover {
    background: linear-gradient(to right, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.04)) !important;
    color: var(--primary-color) !important;
}

html:not(.dark-mode) .dropdown-item:active {
    background: linear-gradient(to right, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.08)) !important;
}

html:not(.dark-mode) .dropdown-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08)) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark-mode) .dropdown-divider {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

/* ========================================
   Light Mode Alerts & Badges
   ======================================== */

html:not(.dark-mode) .alert {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html:not(.dark-mode) .badge {
    color: #fff !important;
}

/* ========================================
   Light Mode Scrollbars (WebKit)
   ======================================== */

html:not(.dark-mode) .sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark-mode) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html:not(.dark-mode) ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ========================================
   Light Mode Text Colors
   ======================================== */

html:not(.dark-mode) .text-muted {
    color: var(--text-muted) !important;
}

html:not(.dark-mode) h1,
html:not(.dark-mode) h2,
html:not(.dark-mode) h3,
html:not(.dark-mode) h4,
html:not(.dark-mode) h5,
html:not(.dark-mode) h6 {
    color: var(--text-primary) !important;
}

html:not(.dark-mode) p {
    color: var(--text-primary) !important;
}

/* html:not(.dark-mode) a {
    color: var(--primary-color) !important;
} */

html:not(.dark-mode) a:hover {
    color: #0a58ca !important;
}

/* ========================================
   Light Mode Statistics Cards
   ======================================== */

html:not(.dark-mode) .stat-card,
html:not(.dark-mode) .dashboard-card {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 3px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ========================================
   Light Mode Lists & Items
   ======================================== */

html:not(.dark-mode) .list-group-item {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .list-group-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* ========================================
   Light Mode - Login Page
   ======================================== */

html:not(.dark-mode) .login-container {
    background-color: var(--bg-secondary) !important;
}

html:not(.dark-mode) .login-left {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%) !important;
    color: white !important;
}

html:not(.dark-mode) .login-right {
    background: var(--bg-primary) !important;
}

html:not(.dark-mode) .login-card {
    background: var(--bg-primary) !important;
}

html:not(.dark-mode) .login-header h2 {
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .login-header p {
    color: var(--text-secondary) !important;
}

html:not(.dark-mode) .form-label {
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .form-label i {
    color: var(--primary-color) !important;
}

html:not(.dark-mode) .login-card .form-control {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: var(--text-primary) !important;
}

html:not(.dark-mode) .login-card .form-control:focus {
    background-color: white !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

html:not(.dark-mode) .login-card .form-control::placeholder {
    color: #94a3b8 !important;
}

html:not(.dark-mode) .login-footer {
    border-top: 1px solid var(--border-color) !important;
}

html:not(.dark-mode) .alert-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}