/* ============================================================
   Sarya HR — Stylesheet
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { fill: currentColor; }

/* ---------- Theme variables ---------- */
:root {
  /* #249/#251: tightened to the exact official Sarya hex values supplied
     by Shaden (Primary/Primary Dark/Background) -- previous values were
     close approximations, these are the canonical brand tokens now. */
  --brand: #2e7cb8;
  --brand-dark: #14507f;
  --brand-light: #e8f1fa;
  --brand-rgb: 46, 124, 184;

  --bg: #f4f9fd;
  --bg-elevated: #ffffff;
  --bg-sidebar: #0f2c43;
  --bg-sidebar-hover: rgba(255,255,255,0.06);
  --bg-hover: #eef2f7;
  --bg-input: #ffffff;

  --text-primary: #1b2733;
  --text-secondary: #5b6b7c;
  --text-muted: #93a1b0;
  --text-sidebar: #c9d6e4;

  --border: #e2e7ed;
  --border-strong: #cdd6e0;

  --success: #1ea672;
  --success-bg: #e4f7ee;
  --warning: #d98c12;
  --warning-bg: #fdf2dd;
  --danger: #d64545;
  --danger-bg: #fbe7e7;
  --info: #2f7ed8;
  --info-bg: #e7f1fb;
  --default: #6b7785;
  --default-bg: #eceff2;
  /* #189: extra semantic accents for KPI cards/charts that don't map onto
     success/warning/danger/info — kept as proper theme variables (not
     inline hex) so they adapt under [data-theme="dark"] like every other
     color token. */
  --accent-purple: #7c3aed;
  --accent-purple-bg: #f1e9fd;
  --accent-amber: #b45309;
  --accent-amber-bg: #fbeede;
  /* #251: official Sarya secondary/accent brand tokens (teal + gold),
     added alongside the existing semantic colors above -- used where a
     design explicitly calls for the brand's secondary palette rather
     than a status color (success/warning/etc). */
  --secondary: #16a085;
  --secondary-bg: #e3f6f1;
  --gold: #f2a52e;
  --gold-bg: #fdf0dc;

  --shadow-xs: 0 1px 3px rgba(15, 35, 55, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 35, 55, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 35, 55, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 35, 55, 0.14);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font-ar: "Cairo", "Tahoma", sans-serif;
  --font-en: "Inter", "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --bg: #101620;
  --bg-elevated: #182230;
  --bg-sidebar: #0a1420;
  --bg-sidebar-hover: rgba(255,255,255,0.05);
  --bg-hover: #1f2b3a;
  --bg-input: #1b2532;

  --text-primary: #e8edf3;
  --text-secondary: #a3b1c2;
  --text-muted: #6b7889;
  --text-sidebar: #9fb0c4;

  --border: #263244;
  --border-strong: #324158;

  --success: #34c98c;
  --success-bg: #133a2c;
  --warning: #e6a23c;
  --warning-bg: #3a2c10;
  --danger: #e2685f;
  --danger-bg: #3a1c1c;
  --info: #5b9fe8;
  --info-bg: #16293d;
  --default: #8a96a5;
  --default-bg: #232d3a;
  --accent-purple: #a78bfa;
  --accent-purple-bg: #2a2140;
  --accent-amber: #e3a008;
  --accent-amber-bg: #3a2c10;
  --secondary: #1fcf9e;
  --secondary-bg: #123128;
  --gold: #f0b94d;
  --gold-bg: #3a2c10;

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
}

html[lang="ar"] body { font-family: var(--font-ar); }
html[lang="en"] body { font-family: var(--font-en); }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 8px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ============================================================
   Login page
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, #2aa0d8);
  padding: 24px;
  position: relative;
}
.login-topbar { position: absolute; top: 20px; inset-inline-end: 24px; display: flex; gap: 8px; }
.login-card { background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px 36px; width: 100%; max-width: 400px; text-align: center; }
.login-logo { width: 128px; height: 128px; margin: 0 auto 18px; object-fit: contain; }
.login-card h1 { font-size: 22px; color: var(--text-primary); margin-bottom: 4px; }
.login-subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 24px; }
.login-form { display: flex; flex-direction: column; gap: 12px; text-align: start; }
.login-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary); }
.login-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15); }
.login-error { color: var(--danger); background: var(--danger-bg); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; }
.password-field { position: relative; display: flex; }
.password-field input { width: 100%; padding-inline-end: 40px; }
.password-toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; }
.password-toggle:hover { color: var(--text-primary); }
.password-toggle svg { width: 18px; height: 18px; }
.forgot-pw-link { align-self: center; font-size: 12.5px; color: var(--text-secondary); text-decoration: none; margin-top: -2px; }
.forgot-pw-link:hover { color: var(--brand); text-decoration: underline; }
.temp-pw-display { font-family: monospace; font-size: 20px; font-weight: 700; letter-spacing: 1px; background: var(--bg-input); border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 14px; text-align: center; margin: 12px 0; direction: ltr; }
.btn-block { width: 100%; }
.demo-section { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--border); }
.demo-label { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.demo-chip { border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); padding: 6px 12px; border-radius: 20px; font-size: 12px; transition: all .15s; }
.demo-chip:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.login-footer { margin-top: 24px; color: rgba(255,255,255,0.85); font-size: 12px; }

/* ============================================================
   #250: Landing page (index.html, pre-login)
   Deliberately separate from .login-page above -- that class still
   belongs to renderForcedPasswordScreen() (components.js)'s full-screen
   takeover and must keep its own gradient/centered-card layout untouched.
   The landing page reuses the .login-card markup verbatim further down,
   just inside a different section wrapper (.landing-login-section).
   ============================================================ */
.landing-page {
  background: var(--bg); color: var(--text-primary); overflow-x: hidden;
  /* #250: explicit brand typeface for the landing page per the brief --
     "IBM Plex Sans Arabic" first, existing app fonts as fallback. */
  font-family: "IBM Plex Sans Arabic", var(--font-ar), var(--font-en);
}

.landing-header { position: sticky; top: 0; z-index: 80; background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.landing-header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.landing-brand { display: flex; align-items: center; gap: 10px; }
.landing-brand-logo { height: 38px; width: auto; object-fit: contain; }
.landing-header-actions { display: flex; align-items: center; gap: 10px; }

.hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, #2aa0d8); color: #fff; padding: 64px 24px; overflow: hidden; position: relative; }
.hero-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
.hero-text { flex: 0 0 70%; max-width: 70%; }
.hero-text h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.28; margin-bottom: 14px; color: #fff; }
.hero-desc { font-size: 16px; line-height: 1.75; opacity: 0.92; margin-bottom: 26px; max-width: 560px; }
.hero-visual { flex: 0 0 30%; max-width: 30%; display: flex; justify-content: center; }
.hero-hand-wrap { position: relative; width: 100%; max-width: 300px; display: flex; align-items: center; justify-content: center; padding-bottom: 18px; }
.hero-hand-wrap::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 54%; height: 12px; background: radial-gradient(ellipse at center, rgba(0,18,48,0.22) 0%, transparent 72%); border-radius: 50%; animation: hero-shadow-pulse 6s ease-in-out infinite; will-change: opacity, transform; pointer-events: none; }
.hero-hand-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%); animation: hero-glow-pulse 4s ease-in-out infinite; }
.hero-hand-img { position: relative; width: 100%; max-width: 300px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.22)); animation: hero-float 6s ease-in-out infinite; will-change: transform; }
@keyframes hero-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes hero-shadow-pulse { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.62; } 50% { transform: translateX(-50%) scaleX(0.68); opacity: 0.22; } }
@keyframes hero-glow-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.08); } }

.btn-lg { padding: 13px 28px; font-size: 15px; }

.about-section { padding: 64px 32px; }
.about-section-alt { background: var(--bg-elevated); }
/* Legacy centered layout (kept for fallback) */
.about-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.about-inner h2 { font-size: 23px; font-weight: 800; margin-bottom: 16px; color: var(--text-primary); }
.about-inner p { font-size: 15px; line-height: 1.9; color: var(--text-secondary); margin-bottom: 0; }
/* Two-column split layout */
.about-split { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; gap: 56px; }
.about-split-text { flex: 1; min-width: 0; text-align: right; }
.about-split-text h2 { font-size: 23px; font-weight: 800; margin-bottom: 16px; color: var(--text-primary); }
.about-split-text p { font-size: 15px; line-height: 1.9; color: var(--text-secondary); margin-bottom: 0; }
.about-split-img { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.about-logo-img { width: 220px; height: auto; max-height: 200px; object-fit: contain; display: block; }
.about-hand-img { width: 170px; height: 170px; object-fit: contain; display: block; filter: drop-shadow(0 6px 18px rgba(24,110,176,0.13)); }

.features-section { padding: 60px 24px; }
.features-inner { max-width: 1200px; margin: 0 auto; }
.features-title { text-align: center; font-size: 23px; font-weight: 800; margin-bottom: 32px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.feature-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-xs); transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* #250: per-card --accent (brand/secondary/gold, rotated in login.js)
   so all three official accent colors are visibly present on the page,
   not just the primary blue -- same inline-custom-property pattern as
   .kpi-icon above. */
.feature-icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent, var(--brand)) 14%, transparent); color: var(--accent, var(--brand)); margin-bottom: 14px; }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.feature-card p { font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 0; }

.landing-login-section { padding: 60px 24px 70px; background: var(--brand-light); }
[data-theme="dark"] .landing-login-section { background: var(--bg-input); }
.landing-login-section .login-card { margin: 0 auto; }
.remember-me-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin-top: -2px; }
.remember-me-row input { width: auto; accent-color: var(--brand); }

.landing-footer { background: var(--brand-dark); color: rgba(255,255,255,0.85); padding: 28px 24px; text-align: center; }
.landing-footer-logo { height: 30px; width: auto; object-fit: contain; margin: 0 auto 10px; filter: brightness(0) invert(1); opacity: 0.9; }
.landing-footer-text { font-size: 12.5px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.landing-footer-dot { opacity: 0.5; }

/* Choreographed fade/slide-in as sections enter the viewport (JS toggles
   .in-view via IntersectionObserver in login.js). */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; animation: reveal-fallback 0s 1.2s forwards; }
.reveal.in-view { opacity: 1; transform: none; animation: none; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-hand-img, .hero-hand-glow, .hero-hand-wrap::after { animation: none !important; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 880px) {
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-text, .hero-visual { flex: 0 0 auto; max-width: 100%; }
  .hero-text { order: 2; }
  .hero-visual { order: 1; max-width: 180px; margin: 0 auto 12px; }
  .hero-desc { margin-inline: auto; }
  .hero { padding: 48px 20px; }
  .about-section, .features-section, .landing-login-section { padding: 44px 20px; }
  .about-split { flex-direction: column; gap: 28px; }
  .about-split.about-split-alt { flex-direction: column-reverse; }
  .about-split-text { text-align: center; }
  .about-logo-img { width: 160px; }
  .about-hand-img { width: 120px; height: 120px; }
}
@media (max-width: 560px) {
  .landing-header-inner { padding: 10px 16px; }
  .landing-header-actions { gap: 6px; }
  .hero-text h1 { font-size: 24px; }
}

/* ============================================================
   Shell layout
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex-shrink: 0;
  background: var(--bg-sidebar); color: var(--text-sidebar);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: transform .2s ease, width .2s ease, min-width .2s ease; z-index: 60;
}
.sidebar-brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-logo { width: 110px; height: auto; object-fit: contain; }
.sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-sidebar); font-size: 14px; transition: background .15s, color .15s; }
.nav-icon svg { width: 18px; height: 18px; display: block; }
.nav-label { flex: 1; }
.nav-link:hover { background: var(--bg-sidebar-hover); color: #fff; }
.nav-link.active { background: var(--brand); color: #fff; font-weight: 600; }
.sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.role-pill { display: inline-block; font-size: 11px; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,0.08); color: var(--text-sidebar); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.sidebar-toggle { display: flex; }
.sidebar-backdrop { display: none; }
.topbar-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 8px 14px; flex: 1; max-width: 360px; }
.search-icon svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; display: block; }
.topbar-search input { border: none; background: transparent; outline: none; width: 100%; color: var(--text-primary); }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; position: relative; transition: background .15s; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--bg-hover); }

.notif-wrap { position: relative; }
.notif-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-elevated); }
.notif-panel { position: absolute; top: 48px; inset-inline-end: 0; width: 320px; max-height: 400px; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 50; }
.notif-panel[hidden] { display: none; }
.notif-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; transition: background .15s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { background: var(--brand-light); }
.notif-title { font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.notif-body { color: var(--text-secondary); font-size: 12px; }
.notif-date { color: var(--text-muted); font-size: 11px; margin-top: 4px; }

.user-menu { display: flex; align-items: center; gap: 8px; padding-inline-start: 8px; border-inline-start: 1px solid var(--border); margin-inline-start: 4px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-role { font-size: 11px; color: var(--text-muted); }

.page-content { padding: 24px; flex: 1; }

/* ---------- Page header ---------- */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-header h1 { font-size: 20px; color: var(--text-primary); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   Buttons
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: 13px; font-weight: 600; transition: all .15s; white-space: nowrap; }
.btn svg { width: 14px; height: 14px; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--bg); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(0.94); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Cards / KPI / Charts
   ============================================================ */
.card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.card h3 { font-size: 15px; margin-bottom: 14px; color: var(--text-primary); }

/* #251: redesigned as compact "quick stat" chips rather than the
   previous oversized cards -- smaller footprint, icon de-emphasized,
   the number is the most prominent element, single-line title with
   ellipsis (+ native title= tooltip set in kpiCard(), components.js).
   grid uses auto-fit so the row count is fully automatic: one row on
   desktop when it fits, wraps on its own as cards are added/removed
   later -- no column count is hardcoded here. */
/* المهمة #258: تصغير إضافي بعد تصميم #251 -- هدف "Enterprise Dashboard"
   أخف وأكثر احترافية: minmax أصغر (120px بدل 150px) يسمح بعرض كل
   البطاقات في صف واحد على معظم الشاشات، بالإضافة لتقليل الحشو
   (padding)، حجم الأيقونة وخلفيتها، ونصف القطر (radius-md بدل radius-lg)
   ليصبح الشكل أخف، مع إبقاء كل الوظائف (روابط/تلميحات/تفويض) كما هي. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kpi-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 10px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-xs); transition: transform .15s ease, box-shadow .15s ease; min-width: 0; }
.kpi-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.kpi-icon { width: 26px; height: 26px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--accent, var(--brand)) 16%, transparent); color: var(--accent, var(--brand)); }
.kpi-icon svg { width: 13px; height: 13px; }
.kpi-info { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kpi-value { font-size: 16px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.kpi-title { font-size: 10px; font-weight: 500; color: var(--text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.chart-card canvas { max-height: 260px; }
.chart-card.chart-wide { grid-column: 1 / -1; }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; background: var(--bg); }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr.row-danger { background: var(--danger-bg); }
.data-table tbody tr.row-warning { background: var(--warning-bg); }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; }

.perm-matrix .perm-module-row td { background: var(--bg); font-weight: 700; color: var(--brand-dark); padding: 8px 14px; }
.perm-action-label { color: var(--text-secondary); }
.perm-cell { text-align: center; }
.perm-cell input { width: 16px; height: 16px; accent-color: var(--brand); }

.legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-dot.row-danger { background: var(--danger); }
.legend-dot.row-warning { background: var(--warning); }
.legend-dot.badge-success { background: var(--success); }
.legend-dot.badge-warning { background: var(--warning); }
.legend-dot.badge-danger { background: var(--danger); }
.legend-dot.badge-default { background: var(--default); }
.file-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; font-size: 12px; white-space: nowrap; }
a.file-chip { text-decoration: none; color: inherit; cursor: pointer; }
a.file-chip:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- Filters ---------- */
.filters-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filters-row input, .filters-row select { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); min-width: 140px; }
.inline-input { width: 90px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); }

/* ============================================================
   Forms / Modals
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field-wide { grid-column: 1 / -1; }
/* #270: grouped form sections — fieldset reset + branded header */
.form-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; }
.form-section:last-child { margin-bottom: 0; }
.form-section legend { font-size: 13px; font-weight: 700; color: var(--brand); padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.form-field label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.form-field input, .form-field select, .form-field textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); width: 100%; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12); }
.form-field input:disabled, .form-field select:disabled { opacity: .6; }

/* ---------- Searchable country combobox (nationality field) ---------- */
.combobox { position: relative; }
.combobox-input { cursor: text; }
.combobox-list {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: 0;
  max-height: 240px; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 110; padding: 4px;
}
.combobox-item { padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.combobox-item:hover, .combobox-item.active { background: var(--brand-light); color: var(--brand-dark); }
.combobox-empty { padding: 9px 12px; font-size: 13px; color: var(--text-muted); }
.notice-hint { margin-top: -4px; }
.hint-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(10, 16, 24, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-box { background: var(--bg-elevated); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.modal-box.modal-wide { max-width: 820px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 16px; }
.modal-close { font-size: 16px; color: var(--text-muted); line-height: 1; }
.modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }

/* ============================================================
   Tabs
   ============================================================ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tab-btn { background: none; border: none; padding: 10px 18px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-btn:hover { color: var(--brand); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ============================================================
   Badges
   ============================================================ */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-default { background: var(--default-bg); color: var(--default); }
/* تعديل نظام الإجازات (تحديث) — جزء 3: وسم "إجازة استثنائية ممنوحة من
   الرئيس التنفيذي"، بنفس اللون البنفسجي المستخدم لشريحتها في التقويم
   (cal-chip-exceptional) للحفاظ على اتساق بصري بين الشاشتين. */
.badge-exceptional { background: var(--accent-purple-bg); color: var(--accent-purple); }

/* ============================================================
   Toast
   ============================================================ */
.toast-host { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--bg-elevated); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: var(--radius-md); padding: 12px 18px; box-shadow: var(--shadow-lg); font-size: 13px; color: var(--text-primary); min-width: 220px; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-inline-start-color: var(--success); }
.toast-error { border-inline-start-color: var(--danger); }
.toast-warning { border-inline-start-color: var(--warning); }
.toast-info { border-inline-start-color: var(--info); }

/* ============================================================
   Leave balance cards / workflow cards
   ============================================================ */
.balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.balance-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.balance-type { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.balance-numbers { display: flex; justify-content: space-between; gap: 6px; }
.balance-numbers > div { display: flex; flex-direction: column; align-items: center; flex: 1; }
.balance-numbers .num { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.balance-numbers .num.accent { color: var(--brand); }
.balance-numbers .lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.workflow-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; }
.workflow-name { font-weight: 700; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.workflow-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-step { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 12px; color: var(--text-secondary); }
.wf-arrow { color: var(--text-muted); }

/* ============================================================
   Calendar
   ============================================================ */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-header h3 { font-size: 15px; margin-bottom: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-grid-head { margin-bottom: 4px; }
.cal-weekday { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-muted); padding-bottom: 4px; }
.cal-cell { min-height: 84px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-daynum { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.cal-leave-chip { font-size: 10.5px; padding: 2px 6px; border-radius: 4px; background: var(--brand-light); color: var(--brand-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--text-muted); }
/* #186: on the new Calendar/Holidays grid every chip carries data-holiday-id
   and opens a details modal on click -- scoped so the plain (non-clickable)
   leave chips on the Leave Management calendar are unaffected. */
.cal-leave-chip[data-holiday-id] { cursor: pointer; }
.cal-cell.cal-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
/* #234: per-leave-type chip colors on the Calendar screen, distinct from
   the (unchanged) blue official-holiday chip and from each other. */
.cal-leave-chip[data-leave-id] { cursor: pointer; }
.cal-chip-annual { background: var(--success-bg); color: var(--success); }
.cal-chip-sick { background: var(--danger-bg); color: var(--danger); }
.cal-chip-emergency { background: var(--warning-bg); color: var(--warning); }
.cal-chip-unpaid { background: var(--border); color: var(--text-secondary); }
/* تعديل نظام الإجازات (تحديث) — جزء 2/3 (المهمتان #242 و#245): لونان
   مستقلان إضافيان -- الإجازة الرسمية (كهرماني) والإجازة الاستثنائية/
   الهدية (بنفسجي) -- متمايزان تماماً عن السنوية (أخضر) والمرضية (أحمر)
   والطارئة (برتقالي) وبدون راتب (رمادي) أعلاه، ومتمايزان عن بعضهما. */
.cal-chip-holiday { background: var(--accent-amber-bg); color: var(--accent-amber); }
.cal-chip-exceptional { background: var(--accent-purple-bg); color: var(--accent-purple); }

/* ============================================================
   Timeline (employment stages)
   ============================================================ */
.timeline { position: relative; padding-inline-start: 24px; display: flex; flex-direction: column; gap: 0; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 22px; display: flex; gap: 14px; }
.timeline-dot { position: absolute; inset-inline-start: -24px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--bg-elevated); box-shadow: 0 0 0 2px var(--brand); }
.timeline-body { flex: 1; }
.timeline-date { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.timeline-title { font-weight: 700; font-size: 13.5px; color: var(--text-primary); margin-bottom: 4px; }
.timeline-note { font-size: 12.5px; color: var(--text-secondary); }

/* ============================================================
   Clearance checklist
   ============================================================ */
.clearance-card { }
.clearance-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 13.5px; flex-wrap: wrap; }
.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 13px; }
.checklist-item.done { background: var(--success-bg); border-color: transparent; }
.checklist-item.done span:first-child { text-decoration: line-through; color: var(--text-muted); }

/* ============================================================
   Employee profile
   ============================================================ */
.profile-header { display: flex; align-items: center; gap: 16px; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex-shrink: 0; }
.profile-meta { display: flex; flex-direction: column; gap: 2px; }
.profile-name { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.profile-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.profile-badges { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.info-item { display: flex; flex-direction: column; }
.info-key { font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
.info-val { font-size: 13.5px; color: var(--text-primary); font-weight: 600; }

/* ============================================================
   Role preview grid
   ============================================================ */
.role-preview-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 881px) {
  .shell.sidebar-collapsed .sidebar { width: 0; min-width: 0; overflow: hidden; border: none; }
}
@media (max-width: 1100px) {
  .charts-grid { grid-template-columns: 1fr; }
  .chart-card.chart-wide { grid-column: auto; }
}
@media (max-width: 880px) {
  .sidebar-toggle { display: flex; }
  .sidebar { position: fixed; inset-inline-start: 0; transform: translateX(-100%); }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  /* #185: html[dir="rtl"] .sidebar above has specificity (0,2,1), which
     beats a plain .sidebar.open (0,2,0) -- so in RTL (the app's default
     language) the "open" rule never actually won, and the slide-over
     stayed translated off-screen even though the JS toggle was correctly
     adding the "open" class the whole time. Matching the RTL rule's
     specificity for the open state (and keeping it later in source order)
     is what actually makes it win in both directions. */
  .sidebar.open,
  html[dir="rtl"] .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(8, 14, 22, 0.5);
    z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .topbar-search { display: none; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .user-meta { display: none; }
}
@media (max-width: 560px) {
  /* #251: locked to a clean 2-per-row on typical phones -- auto-fit's
     own math would otherwise squeeze 3 narrow cards across this width. */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .page-content { padding: 16px; }
  .login-card { padding: 28px 20px; }
}
@media (max-width: 400px) {
  /* very narrow phones: 1 card per row reads better than a cramped 2. */
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   إضافات النسخة المُعاد تصميمها — تنبيه الرصيد السالب،
   شريط تتبع الموافقات، صفحة التفويضات، بياناتي
   ============================================================ */
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.warning-text { color: var(--danger); font-size: 12px; margin-top: 6px; font-weight: 600; }

.balance-card.balance-negative,
.balance-preview.balance-negative {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.balance-track { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }
.balance-preview { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--bg); font-size: 13px; }
.balance-preview .lbl { color: var(--text-secondary); }
/* تعديل نظام الإجازات (تحديث) — جزء 2 (المهمة #243): تفصيل صريح
   بثلاثة أسطر (المدة الكلية / أيام رسمية / المخصوم) أعلى معاينة
   الرصيد قبل/بعد، بنفس أسلوب lbl/num المستخدم فيها. */
.leave-breakdown { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--border); }
.leave-breakdown > div { display: flex; justify-content: space-between; gap: 10px; }
.leave-breakdown .lbl { color: var(--text-secondary); }
.leave-breakdown .num { font-weight: 700; color: var(--text-primary); }
.leave-breakdown .num.accent { color: var(--brand); }

/* ---------- Approval progress stepper ---------- */
.approval-progress { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ap-step { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary); }
.ap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.ap-step.ap-pending { color: var(--text-muted); }
.ap-step.ap-active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); font-weight: 700; }
.ap-step.ap-active .ap-dot { background: var(--brand); }
.ap-step.ap-done { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.ap-step.ap-done .ap-dot { background: var(--success); }
.ap-step.ap-rejected { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.ap-step.ap-rejected .ap-dot { background: var(--danger); }
.ap-step.ap-skipped { border-color: var(--border); color: var(--text-muted); background: var(--bg); text-decoration: line-through; opacity: .75; }
.ap-step.ap-skipped .ap-dot { background: var(--text-muted); }

/* ---------- Stat grid (بياناتي) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 6px; }
.stat-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; text-align: center; }
.stat-box.stat-negative { border-color: var(--danger); background: var(--danger-bg); }
.stat-value { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.stat-box.stat-negative .stat-value { color: var(--danger); }
.stat-label { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }

/* ---------- Profile card (بياناتي / لوحة التحكم) ---------- */
.card-title { font-size: 15px; margin-bottom: 14px; color: var(--text-primary); }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title-row .card-title { margin-bottom: 0; }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.push-ios-hint { color: var(--warning); }
.profile-card .profile-header { margin-bottom: 14px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.info-label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; display: block; }
.info-value { font-size: 13.5px; color: var(--text-primary); font-weight: 600; display: block; }
/* تعديل نظام الإجازات (تحديث) — جزء 3: عنصر يمتد على كامل عرض الشبكة
   (لوسم "إجازة استثنائية ممنوحة من الرئيس التنفيذي" في نافذة تفاصيل
   إجازة التقويم، openLeaveDetailsPopup في calendar.js). */
.info-item-wide { grid-column: 1 / -1; }

/* ----------