/* ======================================== HRIS — Centralized Dark Mode System All dark mode rules in one place. Activated by adding class "dark" to ======================================== */ /* ===== CSS Custom Properties — Dark Overrides ===== */ html.dark { --dm-bg: #0f1117; --dm-surface: #1a1d27; --dm-surface2: #232634; --dm-border: rgba(255,255,255,0.08); --dm-border-hover: rgba(255,255,255,0.15); --dm-text: #e4e5ea; --dm-text-secondary: #9ca0ad; --dm-text-muted: #6b6f80; /* Override root variables for dark mode */ --white: #1a1d27; --black: #f8f9fb; --gray-50: #1a1d27; --gray-100: #232634; --gray-200: #2e3244; --gray-300: #3d4258; --gray-400: #5c6280; --gray-500: #8b90a5; --gray-600: #a3a8bc; --gray-700: #c0c4d4; --gray-800: #e0e3ec; --gray-900: #f0f2f7; --card-border: rgba(255,255,255,0.08); --divider: rgba(255,255,255,0.06); --card-border-hover: rgba(255,255,255,0.15); --shadow-xs: 0 1px 2px rgba(0,0,0,0.2); --shadow-sm: 0 1px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --shadow: 0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 6px 16px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2); --shadow-lg: 0 12px 24px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.2); --shadow-xl: 0 20px 40px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3); } /* ===== Body & Base ===== */ html.dark body { background: var(--dm-bg) !important; color: var(--dm-text) !important; } html.dark ::selection { background: rgba(var(--theme-accent-rgb, 94,234,212), 0.3); color: var(--theme-accent); } /* Custom Scrollbar */ html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; } html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2) !important; } /* ===== Main Content ===== */ html.dark .main-content { background: var(--dm-bg); } html.dark .page-content { background: var(--dm-bg); } /* ===== Top Bar (legacy .top-bar) ===== */ html.dark .top-bar { background: rgba(26,29,39,0.92) !important; border-bottom-color: var(--dm-border) !important; } html.dark .top-bar .page-title { color: var(--dm-text) !important; } html.dark .top-bar .page-subtitle { color: var(--dm-text-secondary) !important; } html.dark .top-bar .user-name { color: var(--dm-text) !important; } html.dark .top-bar .user-role { color: var(--dm-text-secondary) !important; } /* ===== Cards ===== */ html.dark .card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } html.dark .card:hover { border-color: var(--dm-border-hover) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } html.dark .card-header { background: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; } html.dark .card-header h3 { color: var(--dm-text) !important; } html.dark .card-footer { background: var(--dm-surface2) !important; border-top-color: var(--dm-border) !important; } /* ===== Stat Cards ===== */ html.dark .stat-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.dark .stat-info h4 { color: var(--dm-text) !important; } html.dark .stat-info p { color: var(--dm-text-secondary) !important; } /* ===== Tables ===== */ html.dark table th { background: var(--dm-surface2) !important; color: var(--dm-text-secondary) !important; border-bottom-color: var(--dm-border) !important; } html.dark table td { color: var(--dm-text-secondary) !important; border-bottom-color: var(--dm-border) !important; } html.dark table tbody tr:hover td { background: rgba(var(--theme-primary-rgb, 13,148,136),0.06) !important; color: var(--dm-text) !important; } /* ===== Badges ===== */ html.dark .badge-success { background: rgba(16,185,129,0.15); color: #34d399; } html.dark .badge-warning { background: rgba(245,158,11,0.15); color: #fbbf24; } html.dark .badge-danger { background: rgba(239,68,68,0.15); color: #f87171; } html.dark .badge-info { background: rgba(59,130,246,0.15); color: #60a5fa; } html.dark .badge-gray { background: rgba(255,255,255,0.06); color: var(--dm-text-secondary); } html.dark .badge-primary { background: rgba(var(--theme-primary-rgb, 13,148,136),0.15); color: var(--theme-accent); } /* ===== Form Elements ===== */ html.dark .form-group label { color: var(--dm-text-secondary) !important; } html.dark .form-input, html.dark .form-select { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .form-input:hover, html.dark .form-select:hover { border-color: var(--dm-border-hover) !important; } html.dark .form-input:focus, html.dark .form-select:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 13,148,136),0.2) !important; } html.dark .form-input::placeholder { color: var(--dm-text-muted) !important; } html.dark .form-input.error { border-color: #f87171 !important; box-shadow: 0 0 0 4px rgba(239,68,68,0.15) !important; } /* Enhanced form inputs */ html.dark .form-group .form-input, html.dark .form-group select.form-input { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* Toggle switch */ html.dark .form-group .toggle-switch { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; } html.dark .form-group .toggle-label { color: var(--dm-text-secondary) !important; } html.dark .form-group .toggle-slider { background: var(--dm-border-hover) !important; } /* Field hint */ html.dark .form-group .field-hint { background: rgba(var(--theme-primary-rgb, 13,148,136),0.06) !important; border-color: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; color: var(--dm-text-muted) !important; } /* Form section card */ html.dark .form-section-card { background: var(--dm-surface) !important; border-color: rgba(var(--theme-primary-rgb, 13,148,136),0.15) !important; } /* Section divider */ html.dark .section-divider-labeled::before, html.dark .section-divider-labeled::after { background: linear-gradient(90deg, transparent, var(--dm-border), transparent) !important; } html.dark .section-divider-labeled span { color: var(--dm-text-muted) !important; } /* ===== Table Search ===== */ html.dark .table-search input { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .table-search input:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb, 13,148,136),0.2) !important; } /* ===== Buttons ===== */ html.dark .btn-outline { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .btn-outline:hover:not(:disabled) { border-color: var(--primary-light) !important; color: var(--theme-accent) !important; background: rgba(var(--theme-primary-rgb, 13,148,136),0.08) !important; } html.dark .btn-ghost { color: var(--dm-text-secondary) !important; } html.dark .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.06) !important; color: var(--dm-text) !important; } /* ===== Modal ===== */ html.dark .modal-overlay.show { background: rgba(0,0,0,0.7) !important; } html.dark .modal { background: var(--dm-surface) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important; } html.dark .modal-header { background: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; } html.dark .modal-header h3 { color: var(--dm-text) !important; } html.dark .modal-close { background: var(--dm-surface2) !important; color: var(--dm-text-secondary) !important; } html.dark .modal-close:hover { background: var(--dm-border-hover) !important; color: var(--dm-text) !important; } html.dark .modal-body { color: var(--dm-text); } html.dark .modal-footer { background: var(--dm-surface2) !important; border-top-color: var(--dm-border) !important; } /* ===== Toast Notifications ===== */ html.dark .toast { background: var(--dm-surface) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.5) !important; } html.dark .toast-message { color: var(--dm-text) !important; } html.dark .toast-close { color: var(--dm-text-muted) !important; } html.dark .toast-close:hover { color: var(--dm-text) !important; } /* ===== Skeleton Loading ===== */ html.dark .skeleton { background: linear-gradient(90deg, var(--dm-surface2) 25%, var(--dm-border) 50%, var(--dm-surface2) 75%) !important; } /* ===== Login Page ===== */ html.dark .login-card { background: rgba(26,29,39,0.95) !important; border-color: rgba(255,255,255,0.1) !important; } html.dark .login-card .logo h1 { color: var(--theme-accent) !important; } html.dark .login-card .logo p { color: var(--dm-text-secondary) !important; } html.dark .login-error { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; border-left-color: #ef4444 !important; } html.dark .login-demo { border-top-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html.dark .login-demo code { background: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; color: var(--theme-accent) !important; border-color: rgba(var(--theme-primary-rgb, 13,148,136),0.15) !important; } /* ===== ESS Layout ===== */ html.dark .ess-layout { background: var(--dm-bg) !important; } html.dark .ess-content { background: var(--dm-bg); } /* ===== Sidebar (dark override) ===== */ html.dark .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg) 30%, #0a0f14) 0%, color-mix(in srgb, var(--sidebar-bg) 15%, #080c10) 100%) !important; box-shadow: 2px 0 12px rgba(0,0,0,0.4) !important; } /* ===== Components (from components.css) ===== */ html.dark .stat-card-enhanced { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.dark .stat-card-enhanced:hover { box-shadow: 0 8px 25px -5px rgba(0,0,0,0.4) !important; } html.dark .empty-state-enhanced .empty-icon-wrap { background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 13,148,136),0.12), rgba(var(--theme-primary-rgb, 13,148,136),0.06)) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; } html.dark .empty-state-enhanced h4 { color: var(--dm-text) !important; } html.dark .empty-state-enhanced p { color: var(--dm-text-muted) !important; } html.dark .filter-tab { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html.dark .filter-tab:hover { background: rgba(255,255,255,0.06) !important; } html.dark .filter-tab.active { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; } /* ===== Dark Mode Toggle Button ===== */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); cursor: pointer; transition: all 0.25s ease; padding: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dark-mode-toggle:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); color: #ffffff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .dark-mode-toggle:active { transform: translateY(0); } /* When in dark mode, adjust the toggle (if placed outside the teal bar) */ html.dark .dark-mode-toggle:not(.topbar-icon-btn) { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--dm-text-secondary); } html.dark .dark-mode-toggle:not(.topbar-icon-btn):hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: var(--dm-text); } /* Icon animations */ .dark-mode-toggle .icon-sun, .dark-mode-toggle .icon-moon { transition: transform 0.3s ease, opacity 0.3s ease; } .dark-mode-toggle:hover .icon-sun, .dark-mode-toggle:hover .icon-moon { transform: rotate(15deg); } /* ===== Generic Text Colors ===== */ html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--dm-text) !important; } html.dark p { color: var(--dm-text-secondary); } html.dark a { color: var(--theme-accent); } html.dark a:hover { color: var(--theme-accent); } html.dark small, html.dark .text-muted { color: var(--dm-text-muted) !important; } html.dark .text-gray-500, html.dark .text-gray-400, html.dark .text-gray-600 { color: var(--dm-text-muted) !important; } html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { color: var(--dm-text) !important; } /* ===== Generic Background Colors ===== */ html.dark .bg-white { background: var(--dm-surface) !important; } html.dark .bg-gray-50 { background: var(--dm-bg) !important; } html.dark .bg-gray-100 { background: var(--dm-surface2) !important; } /* ===== Border Colors ===== */ html.dark .border { border-color: var(--dm-border) !important; } html.dark .border-gray-200 { border-color: var(--dm-border) !important; } html.dark .border-gray-300 { border-color: var(--dm-border-hover) !important; } /* ===== Dashboard-specific dark rules ===== */ html.dark .reminder-chip { opacity: 0.9; } html.dark .chip-label { color: var(--dm-text-secondary) !important; } html.dark .kpi-sub-modern { color: var(--dm-text-muted) !important; } html.dark .dash-table tbody td { border-bottom-color: rgba(255,255,255,0.04) !important; color: var(--dm-text-secondary) !important; } html.dark .emp-name { color: var(--dm-text) !important; } html.dark .act-title { color: var(--dm-text) !important; } html.dark .act-desc { color: var(--dm-text-muted) !important; } html.dark .act-time { color: var(--dm-text-muted) !important; } html.dark .activity-item { border-bottom-color: rgba(255,255,255,0.04) !important; } html.dark .announcement-item { background: rgba(255,255,255,0.03) !important; } html.dark .announcement-item:hover { background: rgba(255,255,255,0.06) !important; } html.dark .ann-title { color: var(--dm-text) !important; } html.dark .ann-body { color: var(--dm-text-secondary) !important; } html.dark .ann-time { color: var(--dm-text-muted) !important; } html.dark .org-stat-value { color: var(--dm-text) !important; } html.dark .org-stat-label { color: var(--dm-text-muted) !important; } html.dark .modal-box { background: var(--dm-surface) !important; color: var(--dm-text) !important; } html.dark .modal-title-text { color: var(--dm-text) !important; } html.dark .reminder-detail-table td { color: var(--dm-text-secondary) !important; } html.dark .reminder-detail-table th { color: var(--dm-text-muted) !important; } html.dark .toast { background: var(--dm-surface) !important; color: var(--dm-text) !important; } html.dark .view-all-link { color: var(--theme-accent) !important; } html.dark .view-all-link:hover { color: var(--theme-accent) !important; } /* ===== Chip dark variants ===== */ html.dark .chip-teal { background: rgba(var(--theme-primary-rgb, 13,148,136),0.1); } html.dark .chip-amber { background: rgba(217,119,6,0.1); } html.dark .chip-rose { background: rgba(244,63,94,0.1); } html.dark .chip-violet { background: rgba(139,92,246,0.1); } html.dark .chip-sky { background: rgba(6,182,212,0.1); } html.dark .chip-emerald { background: rgba(16,185,129,0.1); } html.dark .chip-orange { background: rgba(249,115,22,0.1); } html.dark .chip-pink { background: rgba(236,72,153,0.1); } html.dark .chip-purple { background: rgba(139,92,246,0.1); } html.dark .chip-red { background: rgba(239,68,68,0.1); } html.dark .chip-indigo { background: rgba(99,102,241,0.1); } html.dark .chip-yellow { background: rgba(234,179,8,0.1); } html.dark .chip-blue { background: rgba(59,130,246,0.1); } /* Org stat dark backgrounds */ html.dark .org-stat-item:nth-child(1) { background: rgba(var(--theme-primary-rgb, 13,148,136),0.08); } html.dark .org-stat-item:nth-child(2) { background: rgba(6,182,212,0.08); } html.dark .org-stat-item:nth-child(3) { background: rgba(16,185,129,0.08); } html.dark .org-stat-item:nth-child(4) { background: rgba(217,119,6,0.08); } /* ===== Analytics-modern.css overrides (to avoid duplication) ===== */ html.dark .panel-modern.glass { background: rgba(26,29,39,0.8) !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } html.dark .panel-modern.glass:hover { border-color: rgba(255,255,255,0.1) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } html.dark .panel-head h3 { color: var(--dm-text) !important; } html.dark .panel-body { color: var(--dm-text-secondary); } html.dark .section-header-modern h2 { color: var(--dm-text) !important; } html.dark .sh-sub { color: var(--dm-text-muted) !important; } html.dark .section-divider-modern { background: var(--dm-border) !important; } html.dark .chart-loading { color: var(--dm-text-muted) !important; } html.dark .chart-empty p { color: var(--dm-text-muted) !important; } html.dark .chart-empty svg { color: var(--dm-text-muted) !important; } /* Gauge dark */ html.dark .gauge-label { color: var(--dm-text-secondary) !important; } html.dark .gauge-value { color: var(--dm-text) !important; } /* Bottom mobile bar dark */ html.dark .bottom-mobile-bar { background: var(--dm-surface) !important; border-top-color: var(--dm-border) !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.4) !important; } /* ===== Page header gradient (from components.css) — keeps its gradient ===== */ /* Page header gradient uses teal gradient which looks good in dark mode too */ /* ===== Stat Card V2 ===== */ html.dark .stat-card-v2 { background: rgba(26,29,39,0.8) !important; border-color: var(--dm-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } html.dark .stat-card-v2:hover { box-shadow: 0 8px 25px -5px rgba(0,0,0,0.4) !important; border-color: var(--dm-border-hover) !important; } html.dark .stat-card-v2::before { background: linear-gradient(135deg, transparent 40%, rgba(var(--theme-primary-rgb, 13,148,136),0.2) 50%, transparent 60%) !important; } html.dark .stat-card-v2 .stat-label { color: var(--dm-text-secondary) !important; } html.dark .stat-card-v2 .stat-label svg { color: var(--dm-text-muted) !important; } html.dark .stat-card-v2 .stat-value { color: var(--dm-text) !important; } html.dark .stat-card-v2 .stat-trend { color: var(--dm-text-secondary); } html.dark .stat-card-v2 .stat-trend.up { color: #34d399; background: rgba(16,185,129,0.15); } html.dark .stat-card-v2 .stat-trend.down { color: #f87171; background: rgba(239,68,68,0.15); } /* ===== Data Card ===== */ html.dark .data-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } html.dark .data-card:hover, html.dark .data-card.hover-lift:hover { box-shadow: 0 8px 25px -5px rgba(0,0,0,0.4) !important; border-color: var(--dm-border-hover) !important; } html.dark .data-card-body h4 { color: var(--dm-text) !important; } html.dark .data-card-body h4 a { color: var(--dm-text) !important; } html.dark .data-card-body p { color: var(--dm-text-secondary) !important; } html.dark .data-card-body a { color: var(--theme-accent) !important; } html.dark .data-card-icon { background: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; color: var(--theme-accent) !important; } html.dark .data-card-icon.turquoise { background: rgba(var(--theme-primary-rgb, 13,148,136),0.15); color: var(--theme-accent); } html.dark .data-card-icon.green { background: rgba(16,185,129,0.15); color: #34d399; } html.dark .data-card-icon.orange { background: rgba(245,158,11,0.15); color: #fbbf24; } html.dark .data-card-icon.red { background: rgba(239,68,68,0.15); color: #f87171; } html.dark .data-card-icon.blue { background: rgba(59,130,246,0.15); color: #60a5fa; } html.dark .data-card-icon.purple { background: rgba(139,92,246,0.15); color: #a78bfa; } html.dark .data-card-actions { border-top-color: var(--dm-border) !important; background: var(--dm-surface2) !important; } html.dark .data-cards-grid { background: transparent !important; } /* ===== Modal V2 ===== */ html.dark .modal-v2 { background: var(--dm-surface) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important; border: 1px solid var(--dm-border) !important; } html.dark .modal-v2-header { /* Keep teal gradient header — it looks good in dark mode */ } html.dark .modal-v2-header .modal-close { background: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.8) !important; } html.dark .modal-v2-header .modal-close:hover { background: rgba(255,255,255,0.25) !important; color: #ffffff !important; } html.dark .modal-v2-body { background: var(--dm-surface); color: var(--dm-text); } html.dark .modal-v2-body h4 { color: var(--dm-text) !important; } html.dark .modal-v2-body p { color: var(--dm-text-secondary); } html.dark .modal-v2-body .section-divider { background: var(--dm-border) !important; } html.dark .modal-v2-footer { background: var(--dm-surface2) !important; border-top-color: var(--dm-border) !important; } html.dark .modal-tab { color: var(--dm-text-secondary) !important; } html.dark .modal-tab:hover { color: var(--theme-accent) !important; } html.dark .modal-tab.active { color: var(--theme-accent) !important; } html.dark .modal-tab.active::after { background: var(--primary-light) !important; } /* ===== Table V2 ===== */ html.dark .table-v2 { border-color: var(--dm-border) !important; } html.dark .table-v2 thead th { background: var(--dm-surface2) !important; color: var(--dm-text-secondary) !important; border-bottom-color: var(--dm-border) !important; } html.dark .table-v2 td { color: var(--dm-text-secondary) !important; border-bottom-color: rgba(255,255,255,0.04) !important; } html.dark .table-v2 tbody tr:hover td { background: rgba(var(--theme-primary-rgb, 13,148,136),0.06) !important; color: var(--dm-text) !important; } html.dark .table-v2 .row-actions { background: transparent !important; } html.dark .table-v2 a { color: var(--dm-text) !important; } html.dark .table-v2 a:hover { color: var(--theme-accent) !important; } /* ===== Empty State (original) ===== */ html.dark .empty-state { color: var(--dm-text-muted) !important; } html.dark .empty-state svg { color: var(--dm-text-muted) !important; opacity: 0.4; } html.dark .empty-state h4 { color: var(--dm-text-secondary) !important; } html.dark .empty-state p { color: var(--dm-text-muted) !important; } /* ===== Spinner ===== */ html.dark .spinner { border-color: var(--dm-border) !important; border-top-color: var(--theme-accent) !important; } html.dark .spinner-lg { border-color: var(--dm-border) !important; border-top-color: var(--theme-accent) !important; } /* ===== Glass Card ===== */ html.dark .glass-card { background: rgba(26,29,39,0.7) !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; } html.dark .glass-card:hover { background: rgba(26,29,39,0.85) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } /* ===== Hover Shine ===== */ html.dark .hover-shine::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent) !important; } /* ===== Custom Select ===== */ html.dark .custom-select select { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .custom-select select:hover { border-color: var(--dm-border-hover) !important; } html.dark .custom-select select:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb, 13,148,136),0.2) !important; } html.dark .custom-select::after { border-top-color: var(--dm-text-muted) !important; } /* ===== Toggle Status ===== */ html.dark .toggle-status-text.active { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; } html.dark .toggle-status-text.inactive { background: rgba(255,255,255,0.06) !important; color: var(--dm-text-muted) !important; } html.dark .form-group .toggle-switch.active-glow { background: rgba(16,185,129,0.08) !important; border-color: rgba(52,211,153,0.3) !important; box-shadow: 0 0 0 2px rgba(52,211,153,0.08) !important; } /* ===== Stat Icon Dark Variants ===== */ html.dark .stat-icon.turquoise { background: rgba(var(--theme-primary-rgb, 13,148,136),0.15); color: var(--theme-accent); } html.dark .stat-icon.green { background: rgba(16,185,129,0.15); color: #34d399; } html.dark .stat-icon.orange { background: rgba(245,158,11,0.15); color: #fbbf24; } html.dark .stat-icon.red { background: rgba(239,68,68,0.15); color: #f87171; } html.dark .stat-icon.blue { background: rgba(59,130,246,0.15); color: #60a5fa; } html.dark .stat-icon.purple { background: rgba(139,92,246,0.15); color: #a78bfa; } /* ===== Stat Trend Dark ===== */ html.dark .stat-trend.up { color: #34d399; background: rgba(16,185,129,0.15); } html.dark .stat-trend.down { color: #f87171; background: rgba(239,68,68,0.15); } /* ===== Gradient Border ===== */ html.dark .gradient-border { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } /* ===== Filter Tabs Container ===== */ html.dark .filter-tabs { background: var(--dm-surface2) !important; border-radius: var(--radius) !important; padding: 3px !important; } /* ===== ESS Topnav ===== */ html.dark .ess-topnav { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 40%, #0a0f14) 0%, var(--primary-dark) 100%) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } /* ===== ESS Welcome ===== */ html.dark .ess-welcome { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 40%, #0a0f14), var(--primary-dark)) !important; } /* ===== Mini Sidebar Dark (inline styles from sidebar.html) ===== */ html.dark .mini-sidebar-item { color: rgba(255,255,255,0.55) !important; } html.dark .mini-sidebar-item:hover { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.9) !important; } html.dark .mini-sidebar-item.active { background: rgba(255,255,255,0.12) !important; color: var(--theme-accent) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06) !important; } html.dark .mini-sidebar-item.active:hover { background: rgba(255,255,255,0.15) !important; color: var(--theme-accent) !important; } html.dark .mini-sidebar-item::after { background: var(--dm-surface2) !important; color: var(--dm-text) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } html.dark .shortcut-empty-hint { color: rgba(255,255,255,0.2) !important; } html.dark .mini-sidebar-logo-img { background: rgba(255,255,255,0.9) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } html.dark .mini-sidebar-logout { color: rgba(255,255,255,0.4) !important; } html.dark .mini-sidebar-logout:hover { background: rgba(239,68,68,0.12) !important; color: #f87171 !important; } html.dark .mini-sidebar-avatar-wrapper { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.15) !important; } html.dark .mini-sidebar-avatar-wrapper:hover { border-color: var(--theme-accent) !important; box-shadow: 0 0 0 3px rgba(45,212,191,0.2) !important; background: rgba(255,255,255,0.15) !important; } /* ===== Mobile Bottom Bar Dark (sidebar inline) ===== */ html.dark .mobile-bottom-bar { background: var(--dm-surface) !important; border-top-color: var(--dm-border) !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.4) !important; } html.dark .mobile-tab-item { color: var(--dm-text-muted) !important; } html.dark .mobile-tab-item.active { color: var(--theme-accent) !important; } /* ===== Mobile More Menu Dark ===== */ html.dark .mobile-more-overlay { background: rgba(0,0,0,0.6) !important; } html.dark .mobile-more-menu { background: var(--dm-surface) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important; } html.dark .mobile-more-header { border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .mobile-more-close { background: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; color: var(--theme-accent) !important; } html.dark .mobile-more-close:hover { background: rgba(var(--theme-primary-rgb, 13,148,136),0.2) !important; color: var(--theme-accent) !important; } html.dark .mobile-more-item { color: var(--dm-text-secondary) !important; } html.dark .mobile-more-item:hover { background: rgba(var(--theme-primary-rgb, 13,148,136),0.08) !important; color: var(--theme-accent) !important; } html.dark .mobile-more-item.active { color: var(--theme-accent) !important; background: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; } html.dark .mobile-more-item svg { opacity: 0.5; } html.dark .mobile-more-item:hover svg, html.dark .mobile-more-item.active svg { opacity: 1; } html.dark .mobile-more-logout { color: #f87171 !important; } html.dark .mobile-more-logout:hover { background: rgba(239,68,68,0.08) !important; color: #f87171 !important; } html.dark .mobile-more-divider { background: var(--dm-border) !important; } /* ===== Login Split Layout Dark ===== */ html.dark .login-split .login-right { background: var(--dm-bg) !important; } html.dark .login-split .login-right::before { background-image: radial-gradient(rgba(var(--theme-primary-rgb, 13,148,136),0.05) 1px, transparent 1px) !important; } html.dark .login-form-card { background: rgba(26,29,39,0.95) !important; border: 1px solid var(--dm-border) !important; } html.dark .login-form-header h2 { color: var(--dm-text) !important; } html.dark .login-form-header p { color: var(--dm-text-secondary) !important; } html.dark .login-tabs { background: var(--dm-surface2) !important; } html.dark .login-tab { color: var(--dm-text-muted) !important; } html.dark .login-tab:hover { color: var(--dm-text) !important; } html.dark .login-tab.active { background: var(--dm-surface) !important; color: var(--theme-accent) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; } html.dark .login-error-modern { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.2) !important; color: #f87171 !important; } html.dark .face-video-container { border-color: var(--dm-border) !important; } html.dark .face-status.scanning { background: rgba(30,64,175,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.2); } html.dark .face-status.detected { background: rgba(22,101,52,0.12); color: #86efac; border-color: rgba(34,197,94,0.2); } html.dark .face-status.not-detected { background: rgba(146,64,14,0.12); color: #fcd34d; border-color: rgba(245,158,11,0.2); } html.dark .face-status.error { background: rgba(153,27,27,0.12); color: #fca5a5; border-color: rgba(239,68,68,0.2); } /* ===== Register Page Dark ===== */ html.dark .register-container { background: var(--dm-bg) !important; } html.dark .register-card { background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; } /* ===== Error / Access Denied Pages Dark ===== */ html.dark .error-container { background: var(--dm-bg) !important; } html.dark .error-card { background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; } /* ===== Chat Bubble Dark ===== */ html.dark .chat-bubble-container { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; } html.dark .chat-popup { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } html.dark .chat-popup-header { background: var(--dm-surface2) !important; border-bottom-color: var(--dm-border) !important; } html.dark .chat-popup-body { background: var(--dm-bg) !important; } html.dark .chat-popup-footer { background: var(--dm-surface2) !important; border-top-color: var(--dm-border) !important; } html.dark .chat-message { background: var(--dm-surface2) !important; color: var(--dm-text) !important; } html.dark .chat-message.user { background: rgba(var(--theme-primary-rgb, 13,148,136),0.2) !important; color: var(--theme-accent) !important; } html.dark .chat-input { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .topbar-accent-line { background: linear-gradient(90deg, var(--primary-dark), var(--primary-light), var(--primary)) !important; } /* ===== Topbar Dark (complete) ===== */ html.dark .topbar-header { background: rgba(26,29,39,0.95) !important; border-bottom-color: var(--dm-border) !important; backdrop-filter: blur(12px) !important; } html.dark .topbar-inner { background: transparent !important; } html.dark .topbar-logo-text { color: var(--dm-text) !important; } html.dark .topbar-nav-item { color: var(--dm-text-secondary) !important; } html.dark .topbar-nav-item:hover { color: var(--dm-text) !important; background: rgba(255,255,255,0.06) !important; } html.dark .topbar-flyout { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important; } html.dark .topbar-flyout-submenu { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; } html.dark .topbar-flyout-cat { color: var(--dm-text-secondary) !important; } html.dark .topbar-flyout-cat:hover { background: rgba(255,255,255,0.04) !important; color: var(--dm-text) !important; } html.dark .topbar-mega-col-header { color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } html.dark .topbar-mega-link { color: var(--dm-text-secondary) !important; } html.dark .topbar-mega-link:hover { background: rgba(var(--theme-primary-rgb, 13,148,136),0.08) !important; color: var(--theme-accent) !important; } html.dark .topbar-badge { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; } html.dark .topbar-user-area { color: var(--dm-text) !important; } html.dark .topbar-user-name { color: var(--dm-text) !important; } html.dark .topbar-user-role { color: var(--dm-text-secondary) !important; } html.dark .topbar-dropdown-menu { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } html.dark .topbar-dropdown-item { color: var(--dm-text-secondary) !important; } html.dark .topbar-dropdown-item:hover { background: rgba(255,255,255,0.06) !important; color: var(--dm-text) !important; } html.dark .topbar-icon-btn { color: var(--dm-text-secondary) !important; } html.dark .topbar-icon-btn:hover { color: var(--dm-text) !important; background: rgba(255,255,255,0.06) !important; } /* ===== Shortcut Pin Button Dark ===== */ html.dark .shortcut-pin-btn { color: var(--dm-text-muted) !important; } html.dark .shortcut-pin-btn:hover { background: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; color: var(--theme-accent) !important; } html.dark .shortcut-pin-btn.is-pinned { color: var(--theme-accent) !important; background: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; } html.dark .page-shortcut-pin-btn { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } html.dark .page-shortcut-pin-btn:hover { border-color: var(--primary-light) !important; color: var(--theme-accent) !important; background: rgba(var(--theme-primary-rgb, 13,148,136),0.08) !important; } html.dark .page-shortcut-pin-btn.is-pinned { border-color: var(--primary-light) !important; color: var(--theme-accent) !important; background: rgba(var(--theme-primary-rgb, 13,148,136),0.1) !important; } /* ===== View Toggle Dark ===== */ html.dark .view-toggle-btn.active { background: var(--dm-surface) !important; color: var(--dm-text) !important; box-shadow: var(--shadow-xs) !important; } html.dark .view-toggle-btn:not(.active) { background: transparent !important; color: var(--dm-text-muted) !important; } /* ===== Hardcoded Badge Colors — Dark Mode Overrides ===== */ html.dark .badge[style*="background:#ede9fe"], html.dark .badge[style*="background: #ede9fe"] { background: rgba(139,92,246,0.15) !important; color: #a78bfa !important; } html.dark .badge[style*="background:#d1fae5"], html.dark .badge[style*="background: #d1fae5"] { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; } html.dark .badge[style*="background:#dcfce7"], html.dark .badge[style*="background: #dcfce7"] { background: rgba(22,163,74,0.15) !important; color: #4ade80 !important; } html.dark .badge[style*="background:#fee2e2"], html.dark .badge[style*="background: #fee2e2"] { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; } html.dark .badge[style*="background:#fef3c7"], html.dark .badge[style*="background: #fef3c7"] { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; } html.dark .badge[style*="background:#e0f2fe"], html.dark .badge[style*="background: #e0f2fe"] { background: rgba(14,165,233,0.15) !important; color: #38bdf8 !important; } html.dark .badge[style*="background:#ccfbf1"], html.dark .badge[style*="background: #ccfbf1"] { background: rgba(var(--theme-primary-rgb, 13,148,136),0.15) !important; color: var(--theme-accent) !important; } html.dark .badge[style*="background:#dbeafe"], html.dark .badge[style*="background: #dbeafe"] { background: rgba(59,130,246,0.15) !important; color: #60a5fa !important; } html.dark .badge[style*="background:#fce7f3"], html.dark .badge[style*="background: #fce7f3"] { background: rgba(236,72,153,0.15) !important; color: #f472b6 !important; } /* ===== Hardcoded Action Button Colors — Dark Mode ===== */ html.dark .btn[style*="background:#dcfce7"], html.dark button[style*="background:#dcfce7"] { background: rgba(22,163,74,0.15) !important; color: #4ade80 !important; border-color: rgba(22,163,74,0.3) !important; } html.dark .btn[style*="background:#fee2e2"], html.dark button[style*="background:#fee2e2"] { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.3) !important; } html.dark .btn[style*="background:#dbeafe"], html.dark button[style*="background:#dbeafe"] { background: rgba(59,130,246,0.15) !important; color: #60a5fa !important; border-color: rgba(59,130,246,0.3) !important; } /* ===== Topbar Logout Modal Dark ===== */ html.dark .topbar-logout-modal, html.dark #logoutModal { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ===== Topbar Payroll Encryption Dark ===== */ html.dark .payroll-encryption-input { background: var(--dm-surface2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ===== ESS Widgets & Info Cards ===== */ html.dark .ess-widget { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } html.dark .ess-widget:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important; border-color: rgba(var(--theme-primary-rgb, 13,148,136),0.2) !important; } html.dark .ess-widget-icon.turquoise { background: rgba(var(--theme-primary-rgb, 13,148,136),0.15); color: var(--theme-accent); } html.dark .ess-widget-icon.orange { background: rgba(245,158,11,0.15); color: #fbbf24; } html.dark .ess-widget-icon.green { background: rgba(16,185,129,0.15); color: #34d399; } html.dark .ess-widget-icon.blue { background: rgba(59,130,246,0.15); color: #60a5fa; } html.dark .ess-widget-info h4 { color: var(--dm-text) !important; } html.dark .ess-widget-info p { color: var(--dm-text-secondary) !important; } html.dark .ess-quick-action { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } html.dark .ess-quick-action:hover { border-color: rgba(var(--theme-primary-rgb, 13,148,136),0.3) !important; box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 13,148,136),0.15) !important; } html.dark .ess-quick-action .action-icon { background: rgba(var(--theme-primary-rgb, 13,148,136),0.15) !important; color: var(--theme-accent) !important; } html.dark .ess-quick-action span { color: var(--dm-text-secondary) !important; } html.dark .ess-quick-action:hover span { color: var(--dm-text) !important; } html.dark .ess-info-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } html.dark .ess-info-card-header { background: var(--dm-surface2) !important; border-bottom-color: var(--dm-border) !important; } html.dark .ess-info-card-header h3 { color: var(--dm-text) !important; } html.dark .ess-info-card-body { color: var(--dm-text-secondary); } html.dark .ess-event-item { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.dark .ess-event-item:hover { border-color: rgba(var(--theme-primary-rgb, 13,148,136),0.2) !important; background: rgba(var(--theme-primary-rgb, 13,148,136),0.06) !important; } html.dark .ess-event-item .event-text { color: var(--dm-text-secondary) !important; } html.dark .ess-event-item .event-date { color: var(--dm-text-muted) !important; } html.dark .ess-welcome-banner { box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; } html.dark .ess-welcome-stats .val { color: var(--dm-text) !important; } html.dark .ess-welcome-stats .lbl { color: rgba(255,255,255,0.6) !important; } /* ESS Modal */ html.dark .ess-modal { background: var(--dm-surface) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; } html.dark .ess-modal-title { color: var(--dm-text) !important; } html.dark .ess-modal-desc { color: var(--dm-text-secondary) !important; } /* ESS Info Items (profile, etc) */ html.dark .info-item .label { color: var(--dm-text-muted) !important; } html.dark .info-item .value { color: var(--dm-text) !important; } /* ===== General Inline Style Overrides via Attribute Selectors ===== */ /* These catch common inline patterns that don't use CSS classes */ html.dark [style*="background:white"], html.dark [style*="background: white"], html.dark [style*="background:#ffffff"], html.dark [style*="background: #ffffff"], html.dark [style*="background:#fff"], html.dark [style*="background: #fff"] { background: var(--dm-surface) !important; } html.dark [style*="border:1px solid #d1d5db"], html.dark [style*="border: 1px solid #d1d5db"], html.dark [style*="border:1px solid #e5e7eb"], html.dark [style*="border: 1px solid #e5e7eb"] { border-color: var(--dm-border) !important; } html.dark [style*="color:#374151"], html.dark [style*="color: #374151"] { color: var(--dm-text) !important; } html.dark [style*="color:#1a2332"], html.dark [style*="color: #1a2332"] { color: var(--dm-text) !important; } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { html.dark * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ===== Mobile Bottom Bar & More Menu Dark Mode ===== */ /* (See also earlier section at ~line 759 for full mobile dark mode styles) */ /* ===== Pagination Bar Dark Mode ===== */ html.dark .pagination-bar { background: var(--dm-surface); border-top-color: var(--dm-border); } html.dark .pagination-info { color: var(--dm-text-muted); } html.dark .pagination-btn { background: var(--dm-surface2); border-color: var(--dm-border); color: var(--dm-text-secondary); } html.dark .pagination-btn:hover:not(:disabled) { background: rgba(var(--theme-primary-rgb, 13,148,136), 0.15); border-color: var(--primary); color: var(--primary); } html.dark .pagination-btn.active { background: var(--primary); color: white; border-color: var(--primary); } html.dark .pagination-btn:disabled { opacity: 0.3; }