/**
 * HR Pro — shared light/dark theme (CSS variables on body)
 * Load after fonts; pair with hrpro-theme.js (first in <body>).
 */
: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);
}
