/* ============================================================
   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;
  /* #266: text color for a hovered/active-group sidebar item -- dark
     navy reads fine on the light :root sidebar, but --brand-dark stays
     the same dark navy under [data-theme="dark"] too (it's not one of
     the tokens that flips per-theme), so it would go unreadable against
     the dark sidebar there. Overridden to white below. */
  --sidebar-hover-text: var(--brand-dark);

  --bg: #f4f9fd;
  --bg-elevated: #ffffff;
  /* #266: light sidebar per Shaden's request -- was a dark navy panel
     (#0f2c43/#c9d6e4 text), now a clean off-white panel that matches the
     rest of the light theme instead of contrasting against it. Only
     :root (light theme) changes here -- [data-theme="dark"]'s own
     --bg-sidebar/--text-sidebar below are untouched, so switching to
     dark mode still gives a proper dark sidebar. */
  --bg-sidebar: #fbfdff;
  --bg-sidebar-hover: var(--brand-light);
  --bg-hover: #eef2f7;
  --bg-input: #ffffff;

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

  --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"] {
  --sidebar-hover-text: #fff;
  --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%; }
.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-hand-wrap { position: relative; width: 100%; max-width: 220px; display: flex; align-items: center; justify-content: center; }
.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: 81%; max-width: 195px; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.25)); animation: hero-float 6s ease-in-out infinite; }
@keyframes hero-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes hero-glow-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.08); } }

/* #273: hero+login merged section -- the login card is now the most
   prominent element (wider column, solid elevated card against the
   gradient), the brand column shrinks and its hand mark shrinks with
   it (was a full 30%-width side column, now a compact accent under the
   headline). */
.hero-with-login .hero-text { flex: 0 0 44%; max-width: 44%; }
.hero-with-login .hero-hand-wrap { max-width: 120px; margin: 4px 0 22px; }
.hero-login-col { flex: 0 0 52%; max-width: 52%; display: flex; justify-content: center; }
.hero-login-col .login-card { margin: 0; width: 100%; max-width: 400px; }

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

.about-section { padding: 72px 24px; }
.about-section-alt { background: color-mix(in srgb, var(--secondary) 5%, var(--bg)); }

/* #260: "عن سريا" / "عن منصة الموارد البشرية" redesigned as a single
   elevated card (image + text) instead of plain centered text -- brings
   the two hand-drawn brand illustrations in as real visual anchors
   rather than decoration bolted on beside the copy. .about-card-reverse
   mirrors the layout for the second section so the two cards read as a
   pair, not a repeated pattern; both collapse to the same
   image-then-heading-then-text stack on mobile (see the 880px query
   below), regardless of the reverse. */
.about-card {
  max-width: 1080px; margin: 0 auto; background: var(--bg-elevated);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 48px; display: flex; align-items: center; gap: 56px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.about-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.about-card-reverse { flex-direction: row-reverse; }

.about-media { flex: 0 0 300px; display: flex; justify-content: center; }
.about-media-circle {
  position: relative; width: 280px; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--brand-light), transparent 72%);
  display: flex; align-items: center; justify-content: center;
}
.about-media-circle img { max-width: 78%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(var(--brand-rgb),.22)); }
.about-media-card {
  position: relative; width: 280px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.about-media-card::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--secondary), var(--gold)); opacity: .16;
}
.about-media-card img {
  position: relative; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-lg); padding: 10px;
}

.about-content { flex: 1; min-width: 0; }
.about-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-light); padding: 5px 14px; border-radius: 20px; margin-bottom: 16px;
}
.about-section-alt .about-eyebrow { color: var(--secondary); background: var(--secondary-bg); }
.about-content h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.3; margin: 0 0 18px; color: var(--text-primary); }
.about-content p { font-size: 16px; line-height: 2; color: var(--text-secondary); margin: 0; }

.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; }

.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; }
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-hand-img, .hero-hand-glow { animation: none !important; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .nav-group-items, .nav-group-arrow, .nav-link, .nav-group-toggle { transition: none; }
}

@media (max-width: 880px) {
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-text, .hero-login-col { flex: 0 0 auto; max-width: 100%; }
  /* #273: login first on mobile too -- "نموذج تسجيل الدخول هو أول شيء
     يظهر" applies regardless of screen size. */
  .hero-login-col { order: 1; }
  .hero-text { order: 2; }
  .hero-with-login .hero-hand-wrap { max-width: 130px; margin: 4px auto 16px; }
  .hero-desc { margin-inline: auto; }
  .hero { padding: 32px 20px 44px; }
  .about-section, .features-section { padding: 44px 20px; }
  /* Mobile order per spec: image first, then heading, then paragraph --
     forcing column direction here overrides .about-card-reverse too, so
     both cards stack identically regardless of their desktop layout. */
  .about-card { flex-direction: column; text-align: center; padding: 32px 24px; gap: 28px; }
  .about-media, .about-media-circle, .about-media-card { flex: 0 0 auto; width: 100%; max-width: 240px; margin: 0 auto; }
  .about-content p { font-size: 15px; line-height: 1.85; }
}
@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);
  border-inline-end: 1px solid var(--border);
  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 var(--border); }
.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 .18s ease, color .18s ease, box-shadow .18s ease; }
.nav-icon svg { width: 18px; height: 18px; display: block; }
.nav-label { flex: 1; }
.nav-link:hover { background: var(--bg-sidebar-hover); color: var(--sidebar-hover-text); }
/* #264: active item -- colored background, soft shadow, rounded corners,
   smooth transition (spec: "خلفية ملونة، ظل خفيف، حواف دائرية، حركة
   انتقال ناعمة"). border-radius already comes from the shared .nav-link
   rule above. */
.nav-link.active { background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 2px 10px rgba(var(--brand-rgb), 0.35); }

/* ---------- Collapsible sidebar groups (#264) ---------- */
.nav-group-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  color: var(--text-sidebar); font-size: 14px; background: transparent; border: none; font-family: inherit;
  text-align: start; cursor: pointer; transition: background .18s ease, color .18s ease;
}
.nav-group-toggle:hover { background: var(--bg-sidebar-hover); color: var(--sidebar-hover-text); }
.nav-group.nav-group-has-active > .nav-group-toggle { color: var(--sidebar-hover-text); font-weight: 600; }
.nav-group-arrow {
  width: 7px; height: 7px; flex-shrink: 0; opacity: .65; margin-inline-start: auto;
  border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.nav-group.nav-group-open > .nav-group-toggle .nav-group-arrow { transform: rotate(-135deg); }
/* grid-template-rows 0fr->1fr is what animates the expand/collapse
   smoothly without a hardcoded max-height (#264 spec: "حركة سلسة عند
   التوسيع"). The inner wrapper div is required -- a grid row can't clip
   its own overflow directly. */
.nav-group-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.nav-group-items > div { overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.nav-group.nav-group-open .nav-group-items { grid-template-rows: 1fr; }
.nav-group-items .nav-link { padding-inline-start: 34px; font-size: 13px; }
.nav-group-items .nav-link .nav-icon svg { width: 15px; height: 15px; }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--border); }
.role-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--brand-light); color: var(--brand-dark); }

.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; }
/* #271: numeric unread badge -- was a plain empty dot, now shows the
   actual count (still hidden entirely at 0 via the existing [hidden]
   toggle in JS). */
.notif-dot {
  position: absolute; top: -4px; inset-inline-end: -4px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: var(--danger); border: 2px solid var(--bg-elevated);
  color: #fff; font-size: 10px; font-weight: 700; line-height: 12px; text-align: center;
}
.notif-panel { position: absolute; top: 48px; inset-inline-end: 0; width: 320px; max-height: 420px; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 50; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notif-panel-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.notif-mark-all { background: none; border: none; color: var(--brand); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.notif-mark-all:hover { text-decoration: underline; }
.notif-panel-list { overflow-y: auto; }
.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); }
/* #268: hero CTA ("تعرف على المنصة") per Shaden's request -- gold brand
   accent instead of the primary blue used everywhere else. */
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { filter: brightness(0.93); }
.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; }
.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); }

/* ============================================================
   General Settings hub (#264)
   ============================================================ */
.settings-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.settings-link-card {
  display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.settings-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.settings-link-icon {
  width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand);
}
.settings-link-icon svg { width: 18px; height: 18px; }
.settings-link-title { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.settings-link-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* ============================================================
   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); }

/* ============================================================
   User Guide (#262)
   ============================================================ */
.guide-intro p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.8; }
.guide-list { display: flex; flex-direction: column; gap: 10px; }
/* #264: "بشكل حيوي وبألوان وأيقونات" -- each item carries its own
   --accent (set inline per item, rotated brand/secondary/gold in
   userguide.js) instead of one flat brand color everywhere: a colored
   start-border, a tinted icon chip, and a stronger hover lift/glow. */
.guide-item {
  background: var(--bg-elevated); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent, var(--brand));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.guide-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.guide-item-summary {
  list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--text-primary); user-select: none;
}
.guide-item-summary::-webkit-details-marker { display: none; }
.guide-item-summary::after {
  content: ""; inset-inline-start: auto; margin-inline-start: auto; width: 9px; height: 9px;
  border-inline-end: 2px solid var(--accent, var(--text-muted)); border-bottom: 2px solid var(--accent, var(--text-muted));
  transform: rotate(45deg); transition: transform .2s ease;
}
.guide-item[open] .guide-item-summary::after { transform: rotate(-135deg); }
.guide-item-icon {
  width: 38px; height: 38px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, var(--brand)) 16%, transparent); color: var(--accent, var(--brand));
}
.guide-item-icon svg { width: 19px; height: 19px; }
.guide-item-body { padding: 0 18px 18px; padding-inline-start: 66px; color: var(--text-secondary); font-size: 14px; line-height: 1.9; }
.guide-item-body p { margin: 0; }
@media (max-width: 560px) {
  .guide-item-body { padding-inline-start: 18px; }
}

/* ============================================================
   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; }
  /* #266: the sidebar is light now, so it needs its own shadow for depth
     while it slides over the (also light) page content on mobile --
     previously the dark sidebar read as "floating" against the light
     page on its own, this doesn't. */
  .sidebar { position: fixed; inset-inline-start: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  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); }
/* #274: من اعتمد هذه المرحلة + تاريخ ووقت الاعتماد. */
.ap-approver { display: block; font-size: 10px; font-weight: 400; opacity: .85; margin-top: 1px; }

/* ---------- 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; }

/* ---------- Delegations page ---------- */
.delegation-list { display: flex; flex-direction: column; gap: 10px; }
.delegation-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); cursor: pointer; }
.delegation-label { font-size: 13.5px; color: var(--text-primary); font-weight: 600; }
.checkbox-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 4px 0; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-primary); font-weight: 400; cursor: pointer; }
.checkbox-row input { width: auto; }
/* Grouping for the 21-item delegation checkbox list (pages/delegations.js) */
.checkbox-group { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.checkbox-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.checkbox-group-title { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }

/* ============================================================
   #310 — Accessibility, list toolkit, uploads, notifications
   ============================================================ */

/* Visible keyboard-focus ring on every interactive control (only when
   navigating by keyboard, so it never disrupts mouse users). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .lv-sort:focus-visible {
  outline: 3px solid var(--brand, #186eb0);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Skip-to-content link for screen-reader / keyboard users. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* Stronger badge contrast (WCAG AA): darker text/borders on tint fills. */
.badge { font-weight: 700; border: 1px solid transparent; }
.badge-success { background: #d7f5e3; color: #0b6b3a; border-color: #0b6b3a33; }
.badge-warning { background: #fdeecd; color: #7a4d00; border-color: #7a4d0033; }
.badge-danger  { background: #fde0e0; color: #9b1c1c; border-color: #9b1c1c33; }
.badge-info    { background: #dbe9fb; color: #1a4d8f; border-color: #1a4d8f33; }
.badge-default { background: #e6ebf0; color: #384656; border-color: #38465633; }

/* List toolkit: sort headers + pager */
.lv-sort { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }
.lv-sort:hover { color: var(--brand); text-decoration: underline; }
.lv-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lv-info { color: var(--text-muted); font-size: 13px; }
.lv-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-page { font-size: 13px; color: var(--text-secondary); min-width: 90px; text-align: center; }
.lv-size { padding: 4px 8px; }

/* Upload size note */
.upload-note { margin-top: 4px; font-size: 12px; color: var(--text-muted); }

/* Notifications panel: filter toggle */
.notif-panel-actions { display: inline-flex; gap: 8px; align-items: center; }
.notif-filter { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--text-secondary); }
.notif-filter.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Employee self-service dashboard cards */
.selfcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.selfcard { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.selfcard h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-muted); font-weight: 700; }
.selfcard .selfcard-value { font-size: 26px; font-weight: 800; color: var(--brand); }

/* ---- Mobile ergonomics: long forms & tables on small screens ---- */
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .filters-row { flex-direction: column; align-items: stretch; }
  .filters-row > * { width: 100%; }
  .modal-box { width: 96vw; max-width: 96vw; margin: 8px auto; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }
  .lv-pager { justify-content: center; }
  .btn { min-height: 40px; } /* larger tap targets */
  input, select, textarea { font-size: 16px; } /* avoid iOS zoom-on-focus */
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}