/** * HR Pro — shared light/dark theme (CSS variables on body) * Load after fonts; pair with hrpro-theme.js (first in ). */ :root { --font: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; } body.theme-dark, body:not(.theme-light):not(.theme-dark) { color-scheme: dark; --bg: #0b1220; --surface: #0e1a2e; --surface2: #142035; --surface3: #1a2a43; --border: rgba(245, 158, 11, 0.14); --border2: rgba(255, 255, 255, 0.07); --accent: #f59e0b; --accent2: #d97706; --accentL: rgba(245, 158, 11, 0.18); --accentG: rgba(245, 158, 11, 0.1); --accent-soft: rgba(245, 158, 11, 0.2); --text: #e8edf5; --textM: #8899b4; --textD: #4a607e; --text-muted: #8899b4; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --orange: #fb923c; --info: #38bdf8; --shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55); --sidebar-bg: #0f172a; --sidebar-fg: #ffffff; --sidebar-muted: rgba(255, 255, 255, 0.55); --grid-line: rgba(245, 158, 11, 0.035); --overlay-scrim: rgba(0, 0, 0, 0.5); } body.theme-light { color-scheme: light; --bg: #f8fafc; --surface: #ffffff; --surface2: #f1f5f9; --surface3: #e2e8f0; --border: rgba(15, 23, 42, 0.12); --border2: rgba(15, 23, 42, 0.06); --accent: #d97706; --accent2: #b45309; --accentL: rgba(217, 119, 6, 0.15); --accentG: rgba(217, 119, 6, 0.08); --accent-soft: rgba(217, 119, 6, 0.22); --text: #0f172a; --textM: #475569; --textD: #64748b; --text-muted: #64748b; --success: #059669; --danger: #dc2626; --warning: #d97706; --orange: #ea580c; --info: #0284c7; --shadow: 0 4px 20px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12); --sidebar-bg: #ffffff; --sidebar-fg: #0f172a; --sidebar-muted: #64748b; --grid-line: rgba(15, 23, 42, 0.04); --overlay-scrim: rgba(15, 23, 42, 0.35); } body { transition: background-color 0.22s ease, color 0.22s ease; } .card, .stat-card, .login-card, .modal, table, thead, tbody td, .btn, .bottom-nav, .app-header { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* Toggle control */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .theme-toggle:hover { background: var(--accentG); border-color: var(--border); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle svg { flex-shrink: 0; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: block; } /* Dark = night → show moon; Light = day → show sun */ body:not(.theme-light) .theme-toggle .icon-sun { display: none; } body:not(.theme-light) .theme-toggle .icon-moon { display: block; } body.theme-light .theme-toggle .icon-sun { display: block; } body.theme-light .theme-toggle .icon-moon { display: none; } /* Shared surfaces */ body.theme-light .sidebar, body.theme-light .mobile-header, body.theme-light .bottom-nav { background: var(--sidebar-bg); border-color: var(--border2); } body.theme-light .sidebar-logo-text, body.theme-light .mobile-logo, body.theme-light .user-name { color: var(--sidebar-fg); } body.theme-light .nav-item { color: var(--textM); } body.theme-light .nav-item:hover { background: var(--surface2); color: var(--sidebar-fg); } body.theme-light .nav-item.active { color: #ffffff; } body.theme-light .user-role { color: var(--sidebar-muted); } body.theme-light .hamburger { color: var(--sidebar-fg); } body.theme-light .company-name-badge { color: var(--sidebar-muted); } body.theme-light .user-chip { background: var(--surface2); } body:not(.theme-light) .user-chip { background: rgba(255, 255, 255, 0.06); } body.theme-light .sidebar-badge { background: var(--surface2); color: var(--textM); border: 1px solid var(--border2); } body.theme-light tr:nth-child(even) td { background: rgba(15, 23, 42, 0.02); } body.theme-light .modal-backdrop { background: var(--overlay-scrim); } body.theme-light .sidebar-overlay { background: var(--overlay-scrim); }