/* ═══════════════════════════════════════════════════════════════════════════
   theme-v2.css — l'tabaqa dyal l'design dyal support2 v2.
   Kay-t-7ammel MN BA3D app.css. Ma-kay-tmess ay HTML wla JS dyal v1 —
   kolchi override b l'tokens o b selectors moujoudين.

   L'mabda2: v1 3andou assas mzyan (OKLCH, 169 token, light/dark). L'khedma
   hna machi repaint — hiya craft: hierarchy, density, discipline dyal l'accent,
   focus wadi7, o 0 blayes khawya.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Rythme dyal l'space — sellem wa7ed, bla ar9am 3echwa2iya */
  --v2-s1: 4px;  --v2-s2: 8px;   --v2-s3: 12px;  --v2-s4: 16px;
  --v2-s5: 24px; --v2-s6: 32px;  --v2-s7: 48px;  --v2-s8: 64px;
  /* Elevation — 3 daragat bark, machi shadow 3echwa2i f kol blasa */
  --v2-e1: 0 1px 2px oklch(0 0 0 / .06), 0 1px 1px oklch(0 0 0 / .04);
  --v2-e2: 0 4px 12px oklch(0 0 0 / .08), 0 1px 3px oklch(0 0 0 / .06);
  --v2-e3: 0 16px 48px oklch(0 0 0 / .12), 0 4px 12px oklch(0 0 0 / .08);
  --v2-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
  --v2-t: 180ms cubic-bezier(.2, 0, 0, 1);
}
[data-theme="dark"] {
  --v2-e1: 0 1px 2px oklch(0 0 0 / .30);
  --v2-e2: 0 4px 14px oklch(0 0 0 / .40), 0 1px 3px oklch(0 0 0 / .30);
  --v2-e3: 0 20px 60px oklch(0 0 0 / .55), 0 4px 14px oklch(0 0 0 / .40);
}

/* ─────────────────────────────────────────────────────────────────────────
   ① LOGIN — l'card f l'wast (kif kif kima v1). L'khedma hna craft bark:
   accent wa7ed, contrast dyal l'inputs, focus bayen.

   ⛔ JARRABT split layout b ::after o TKHARB9AT: app.css 3andou
   `.login-screen::before { position:absolute; inset:0 }` (glow) o l'grid
   dyali kan kay-t7arb m3ah → l'text tlassa9 fو9 l'form. T-7eyyed.
   L'3ibra: ma-t-baddel-ch l'layout dyal v1 — baddel ghir l'craft.
   ───────────────────────────────────────────────────────────────────────── */
.login-card {
  width: min(380px, calc(100vw - var(--v2-s6)));
  padding: var(--v2-s6);
  gap: var(--v2-s3);
  border-radius: 14px;
  box-shadow: var(--v2-e3);
}

.login-logo { border-radius: 12px; }

.login-title { font-size: 25px; letter-spacing: -0.015em; }
.login-subtitle {
  margin-bottom: var(--v2-s3);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}

/* L'inputs kanو rmadi-3la-rmadi — daba border bayna + focus ring wade7 */
.login-card .input {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--v2-s3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  transition: border-color var(--v2-t), box-shadow var(--v2-t);
}
.login-card .input::placeholder { color: var(--text-muted); }
.login-card .input:focus,
.login-card .input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--v2-ring);
}

/* L'button kan gradient KHDER o l'logo AZRAQ = jouj accents kay-t7arbo.
   Daba accent wa7ed. L'khder m7fود l WhatsApp bark (color = ma3na machi zina). */
.login-card .btn-primary {
  margin-top: var(--v2-s2);
  min-height: 46px;
  background: var(--accent);
  background-image: none;
  border: 0;
  border-radius: 10px;
  color: var(--accent-fg);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--v2-e1);
  transition: background var(--v2-t), transform var(--v2-t), box-shadow var(--v2-t);
}
.login-card .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--v2-e2); }
.login-card .btn-primary:active { transform: translateY(1px); }

.login-card .error-text {
  margin: 0;
  padding: var(--v2-s2) var(--v2-s3);
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────────
   ② AR9AM — kol ra9m f jadwal/counter khasso ykoun tabular bach l'3amoud
   ma-y-r9es-ch melli t-bdel l'value. (Rule: number-tabular)
   ───────────────────────────────────────────────────────────────────────── */
.badge, .view-tab-badge, .chat-time, .msg-time, .kpi-value, .stat-value,
td, th, time, .count, .counter, [class*="-count"], [class*="-badge"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   ③ FOCUS — l'keyboard nav khasso ykoun bayen f kol blasa (WCAG)
   ───────────────────────────────────────────────────────────────────────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────
   ④ 7ARAKA — melli l'user y-teleb reduced-motion, kolchi kay-sket
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}