/* ============================================================ FIVE STAR JOBS — Dark Mode CSS Applies when or body.dark-mode ============================================================ */ /* ── CSS Variables Override ─────────────────────────────────── */ [data-theme="dark"], body.dark-mode { --card-bg: #1e293b; --body-bg: #0f172a; --text: #e2e8f0; --text-muted: #94a3b8; --border: #334155; --gray-50: #1e293b; --gray-100: #334155; --gray-200: #475569; --gray-300: #64748b; --gray-400: #94a3b8; --gray-500: #cbd5e1; --gray-600: #e2e8f0; --gray-700: #f1f5f9; --gray-800: #f8fafc; --gray-900: #ffffff; color-scheme: dark; } /* ── Body & Background ──────────────────────────────────────── */ [data-theme="dark"] body, body.dark-mode { background-color: #0f172a !important; color: #e2e8f0 !important; } /* ── Prevent white flash on load ────────────────────────────── */ html[data-theme="dark"] { background: #0f172a; } /* ── Navbar ─────────────────────────────────────────────────── */ [data-theme="dark"] .navbar, body.dark-mode .navbar { background: linear-gradient(135deg, #3730a3, #5b21b6) !important; box-shadow: 0 2px 20px rgba(0,0,0,.5) !important; } [data-theme="dark"] .dropdown-menu, body.dark-mode .dropdown-menu { background: #1e293b !important; border: 1px solid #334155 !important; box-shadow: 0 10px 40px rgba(0,0,0,.5) !important; } [data-theme="dark"] .dropdown-item, body.dark-mode .dropdown-item { color: #e2e8f0 !important; } [data-theme="dark"] .dropdown-item:hover, body.dark-mode .dropdown-item:hover { background: #334155 !important; color: #818cf8 !important; } [data-theme="dark"] .dropdown-divider, body.dark-mode .dropdown-divider { border-color: #334155 !important; } /* ── Cards ──────────────────────────────────────────────────── */ [data-theme="dark"] .card, body.dark-mode .card, [data-theme="dark"] .admin-card, body.dark-mode .admin-card { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 4px 6px rgba(0,0,0,.3) !important; } [data-theme="dark"] .card-header-custom, body.dark-mode .card-header-custom { background: #334155 !important; border-color: #475569 !important; color: #e2e8f0 !important; } [data-theme="dark"] .admin-card-header, body.dark-mode .admin-card-header { border-color: #334155 !important; } /* ── Stat Cards ─────────────────────────────────────────────── */ [data-theme="dark"] .stat-card, body.dark-mode .stat-card { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .stat-icon.blue, body.dark-mode .stat-icon.blue { background: #1e3a5f !important; } [data-theme="dark"] .stat-icon.green, body.dark-mode .stat-icon.green { background: #064e3b !important; } [data-theme="dark"] .stat-icon.orange, body.dark-mode .stat-icon.orange { background: #451a03 !important; } [data-theme="dark"] .stat-icon.red, body.dark-mode .stat-icon.red { background: #450a0a !important; } [data-theme="dark"] .stat-icon.purple, body.dark-mode .stat-icon.purple { background: #2e1065 !important; } [data-theme="dark"] .stat-icon.teal, body.dark-mode .stat-icon.teal { background: #042f2e !important; } /* ── Forms ──────────────────────────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, body.dark-mode .form-control, body.dark-mode .form-select { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background: #1e293b !important; border-color: #818cf8 !important; box-shadow: 0 0 0 3px rgba(129,140,248,.2) !important; color: #e2e8f0 !important; } [data-theme="dark"] .form-control::placeholder, body.dark-mode .form-control::placeholder { color: #64748b !important; } [data-theme="dark"] .input-group-text, body.dark-mode .input-group-text { background: #334155 !important; border-color: #334155 !important; color: #94a3b8 !important; } [data-theme="dark"] .form-label, body.dark-mode .form-label { color: #94a3b8 !important; } [data-theme="dark"] .form-check-input, body.dark-mode .form-check-input { background-color: #334155 !important; border-color: #475569 !important; } [data-theme="dark"] .form-check-input:checked, body.dark-mode .form-check-input:checked { background-color: #4f46e5 !important; border-color: #4f46e5 !important; } /* ── Tables ─────────────────────────────────────────────────── */ [data-theme="dark"] .table, body.dark-mode .table { color: #e2e8f0 !important; border-color: #334155 !important; } [data-theme="dark"] .table th, body.dark-mode .table th { color: #94a3b8 !important; border-color: #334155 !important; background: #1e293b !important; } [data-theme="dark"] .table td, body.dark-mode .table td { border-color: #334155 !important; } [data-theme="dark"] .table-hover tbody tr:hover, body.dark-mode .table-hover tbody tr:hover { background: #334155 !important; } [data-theme="dark"] .data-table th, body.dark-mode .data-table th { background: #0f172a !important; color: #94a3b8 !important; border-color: #334155 !important; } [data-theme="dark"] .data-table td, body.dark-mode .data-table td { border-color: #334155 !important; } [data-theme="dark"] .data-table tr:hover td, body.dark-mode .data-table tr:hover td { background: #334155 !important; } /* ── Modals ─────────────────────────────────────────────────── */ [data-theme="dark"] .modal-content, body.dark-mode .modal-content { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .modal-body, body.dark-mode .modal-body { color: #e2e8f0 !important; } [data-theme="dark"] .modal-footer, body.dark-mode .modal-footer { border-color: #334155 !important; } /* ── Sidebar (user) ─────────────────────────────────────────── */ [data-theme="dark"] .sidebar, body.dark-mode .sidebar { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .sidebar .nav-link, body.dark-mode .sidebar .nav-link { color: #e2e8f0 !important; } [data-theme="dark"] .sidebar-balance, body.dark-mode .sidebar-balance { background: linear-gradient(135deg, #3730a3, #5b21b6) !important; } /* ── Mobile Slide Sidebar ───────────────────────────────────── */ [data-theme="dark"] .mobile-sidebar, body.dark-mode .mobile-sidebar { background: #1e293b !important; } [data-theme="dark"] .mobile-sidebar .nav-link, body.dark-mode .mobile-sidebar .nav-link { color: #e2e8f0 !important; } /* ── Bottom Nav ─────────────────────────────────────────────── */ [data-theme="dark"] .bottom-nav, body.dark-mode .bottom-nav { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 -2px 20px rgba(0,0,0,.4) !important; } [data-theme="dark"] .bottom-nav a, body.dark-mode .bottom-nav a { color: #64748b !important; } [data-theme="dark"] .bottom-nav a.active, body.dark-mode .bottom-nav a.active { color: #818cf8 !important; } /* ── Footer ─────────────────────────────────────────────────── */ [data-theme="dark"] footer, body.dark-mode footer { background: #020617 !important; } /* ── Badges & Status ────────────────────────────────────────── */ [data-theme="dark"] .status-pending, body.dark-mode .status-pending { background: #451a03 !important; color: #fbbf24 !important; } [data-theme="dark"] .status-approved, body.dark-mode .status-approved { background: #064e3b !important; color: #34d399 !important; } [data-theme="dark"] .status-rejected, body.dark-mode .status-rejected { background: #450a0a !important; color: #f87171 !important; } [data-theme="dark"] .status-active, body.dark-mode .status-active { background: #1e3a5f !important; color: #60a5fa !important; } [data-theme="dark"] .badge-pending, body.dark-mode .badge-pending { background: #451a03 !important; color: #fbbf24 !important; } [data-theme="dark"] .badge-approved, body.dark-mode .badge-approved { background: #064e3b !important; color: #34d399 !important; } [data-theme="dark"] .badge-rejected, body.dark-mode .badge-rejected { background: #450a0a !important; color: #f87171 !important; } [data-theme="dark"] .badge-active, body.dark-mode .badge-active { background: #1e3a5f !important; color: #60a5fa !important; } [data-theme="dark"] .badge-processing, body.dark-mode .badge-processing { background: #2e1065 !important; color: #a78bfa !important; } /* ── Flash Alerts ───────────────────────────────────────────── */ [data-theme="dark"] .flash-success, body.dark-mode .flash-success { background: #064e3b !important; color: #6ee7b7 !important; } [data-theme="dark"] .flash-error, body.dark-mode .flash-error { background: #450a0a !important; color: #fca5a5 !important; } [data-theme="dark"] .flash-warning, body.dark-mode .flash-warning { background: #451a03 !important; color: #fcd34d !important; } [data-theme="dark"] .flash-info, body.dark-mode .flash-info { background: #1e3a5f !important; color: #93c5fd !important; } /* ── Category Chips ─────────────────────────────────────────── */ [data-theme="dark"] .cat-chip, body.dark-mode .cat-chip { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .cat-chip:hover, [data-theme="dark"] .cat-chip.active, body.dark-mode .cat-chip:hover, body.dark-mode .cat-chip.active { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; border-color: transparent !important; color: #fff !important; } /* ── Job Cards ──────────────────────────────────────────────── */ [data-theme="dark"] .job-card, body.dark-mode .job-card { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .job-card:hover, body.dark-mode .job-card:hover { border-color: #818cf8 !important; box-shadow: 0 10px 30px rgba(0,0,0,.4) !important; } /* ── Stat Box ───────────────────────────────────────────────── */ [data-theme="dark"] .stat-box, body.dark-mode .stat-box { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .stat-box .stat-label, body.dark-mode .stat-box .stat-label { color: #94a3b8 !important; } /* ── Progress ───────────────────────────────────────────────── */ [data-theme="dark"] .progress, body.dark-mode .progress { background: #334155 !important; } /* ── Pagination ─────────────────────────────────────────────── */ [data-theme="dark"] .admin-pagination a, [data-theme="dark"] .admin-pagination span, body.dark-mode .admin-pagination a, body.dark-mode .admin-pagination span { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .admin-pagination a:hover, body.dark-mode .admin-pagination a:hover { background: #4f46e5 !important; border-color: #4f46e5 !important; } /* ── Buttons ────────────────────────────────────────────────── */ [data-theme="dark"] .btn-admin-outline, body.dark-mode .btn-admin-outline { background: transparent !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .btn-admin-outline:hover, body.dark-mode .btn-admin-outline:hover { background: #334155 !important; } [data-theme="dark"] .btn-outline-secondary, body.dark-mode .btn-outline-secondary { border-color: #334155 !important; color: #94a3b8 !important; } [data-theme="dark"] .btn-outline-secondary:hover, body.dark-mode .btn-outline-secondary:hover { background: #334155 !important; color: #e2e8f0 !important; } /* ── Admin Topbar ───────────────────────────────────────────── */ [data-theme="dark"] .admin-topbar, body.dark-mode .admin-topbar { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .topbar-btn, body.dark-mode .topbar-btn { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } [data-theme="dark"] .topbar-btn:hover, body.dark-mode .topbar-btn:hover { background: #334155 !important; color: #818cf8 !important; } [data-theme="dark"] .topbar-user, body.dark-mode .topbar-user { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .topbar-user:hover, body.dark-mode .topbar-user:hover { background: #334155 !important; } [data-theme="dark"] .topbar-title, body.dark-mode .topbar-title { color: #e2e8f0 !important; } /* ── Quick Actions ──────────────────────────────────────────── */ [data-theme="dark"] .quick-action, body.dark-mode .quick-action { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .quick-action:hover, body.dark-mode .quick-action:hover { border-color: #818cf8 !important; color: #818cf8 !important; } /* ── Activity Feed ──────────────────────────────────────────── */ [data-theme="dark"] .activity-item, body.dark-mode .activity-item { border-color: #334155 !important; } /* ── Scrollbar ──────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-track, body.dark-mode ::-webkit-scrollbar-track { background: #1e293b !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb, body.dark-mode ::-webkit-scrollbar-thumb { background: #475569 !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover, body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #64748b !important; } /* ── Chart.js Dark Theme ────────────────────────────────────── */ [data-theme="dark"] canvas, body.dark-mode canvas { filter: brightness(0.9) contrast(1.1); } /* ── Announcement Bar ───────────────────────────────────────── */ [data-theme="dark"] .announcement-bar, body.dark-mode .announcement-bar { background: linear-gradient(135deg, #92400e, #991b1b) !important; } /* ── Page Header ────────────────────────────────────────────── */ [data-theme="dark"] .page-header, body.dark-mode .page-header { background: linear-gradient(135deg, #3730a3, #5b21b6) !important; } /* ── Section Title ──────────────────────────────────────────── */ [data-theme="dark"] .section-title, body.dark-mode .section-title { color: #e2e8f0 !important; } [data-theme="dark"] .section-title::after, body.dark-mode .section-title::after { background: #334155 !important; } /* ── Hero Banner ────────────────────────────────────────────── */ [data-theme="dark"] .hero-banner, body.dark-mode .hero-banner { background: linear-gradient(135deg, #3730a3, #5b21b6) !important; } /* ── Text Colors ────────────────────────────────────────────── */ [data-theme="dark"] .text-dark, body.dark-mode .text-dark { color: #e2e8f0 !important; } [data-theme="dark"] .text-muted, body.dark-mode .text-muted { color: #94a3b8 !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e2e8f0; } /* ── Borders ────────────────────────────────────────────────── */ [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end, body.dark-mode .border, body.dark-mode .border-top, body.dark-mode .border-bottom, body.dark-mode .border-start, body.dark-mode .border-end { border-color: #334155 !important; } [data-theme="dark"] hr, body.dark-mode hr { border-color: #334155 !important; } /* ── Backgrounds ────────────────────────────────────────────── */ [data-theme="dark"] .bg-white, body.dark-mode .bg-white { background: #1e293b !important; } [data-theme="dark"] .bg-light, body.dark-mode .bg-light { background: #334155 !important; } /* ── Smooth Transition ──────────────────────────────────────── */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.2s; transition-timing-function: ease; } /* Exclude transitions that would cause layout issues */ .navbar-collapse, .collapse, .modal, .modal-dialog, .dropdown-menu, .admin-sidebar, .mobile-sidebar { transition: none !important; } /* ── Dark Mode Toggle Button ────────────────────────────────── */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer; font-size: 1rem; transition: background 0.2s, transform 0.2s !important; background: rgba(255,255,255,0.15); color: #fff; } .dark-mode-toggle:hover { background: rgba(255,255,255,0.25); transform: scale(1.1); } [data-theme="dark"] .dark-mode-toggle, body.dark-mode .dark-mode-toggle { background: rgba(255,255,255,0.1); } /* ── Reduced Motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }