/** * 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); --primary: #f59e0b; --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); --primary: #d97706; --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); } /* ─── Permission Sheet & Onboarding ───────────────────────────────── */ @keyframes hpermSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes hpermFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes hpermFadeOut { from { opacity: 1; } to { opacity: 0; } } /* Backdrop + Sheet container */ #hrproPermSheet { display: none; position: fixed; inset: 0; z-index: 99999; } #hrproPermSheet.hperm-visible { display: block; } .hperm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); animation: hpermFadeIn 0.25s ease; } .hperm-sheet { position: absolute; bottom: 0; left: 0; right: 0; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto; animation: hpermSlideUp 0.3s ease; border-top: 1px solid var(--border); } .hperm-icon-wrap { text-align: center; font-size: 2.5rem; margin-bottom: .75rem; } .hperm-title { font-size: 1.1rem; font-weight: 700; color: var(--text); text-align: center; margin-bottom: .5rem; } .hperm-desc { font-size: .9rem; color: var(--textM); text-align: center; line-height: 1.6; margin-bottom: .75rem; } .hperm-steps { background: var(--surface2); border-radius: var(--r-md); padding: .75rem 1rem; font-size: .82rem; color: var(--textM); line-height: 1.7; margin-bottom: 1rem; border: 1px solid var(--border2); } .hperm-steps b { color: var(--text); } .hperm-actions { display: flex; gap: .75rem; flex-direction: column; } .hrpro-btn-accent { display: block; width: 100%; padding: .75rem; background: var(--accent); color: #000; border: none; border-radius: var(--r-md); font-size: .95rem; font-weight: 700; cursor: pointer; font-family: var(--font); } .hrpro-btn-accent:hover { background: var(--accent2); } .hrpro-btn-ghost { display: block; width: 100%; padding: .65rem; background: transparent; color: var(--textM); border: 1px solid var(--border2); border-radius: var(--r-md); font-size: .88rem; cursor: pointer; font-family: var(--font); } .hrpro-btn-ghost:hover { background: var(--surface2); } /* Onboarding fullscreen overlay */ .hperm-onboard-wrap { position: fixed; inset: 0; z-index: 99998; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: hpermFadeIn 0.3s ease; } .hperm-onboard-wrap.hperm-onboard-hide { animation: hpermFadeOut 0.35s ease forwards; } .hperm-onboard-box { background: var(--surface); border-radius: var(--r-xl); padding: 2rem 1.5rem; width: 100%; max-width: 400px; border: 1px solid var(--border); text-align: center; } .hperm-onboard-logo { font-size: 3rem; margin-bottom: 1rem; } .hperm-onboard-title { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; } .hperm-onboard-sub { font-size: .88rem; color: var(--textM); margin-bottom: 1.5rem; line-height: 1.6; } .hperm-onboard-items { text-align: right; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; } .hperm-onboard-item { display: flex; align-items: center; gap: .75rem; background: var(--surface2); border-radius: var(--r-md); padding: .75rem 1rem; border: 1px solid var(--border2); } .hperm-onboard-item-icon { font-size: 1.4rem; flex-shrink: 0; } .hperm-onboard-item > div { flex: 1; font-size: .85rem; color: var(--text); line-height: 1.5; } .hperm-onboard-item > div small { color: var(--textM); } .hperm-onboard-status { font-size: 1.2rem; flex-shrink: 0; } .hperm-onboard-actions { display: flex; flex-direction: column; gap: .6rem; } .hperm-onboard-start { margin-bottom: .1rem; }