/* ============================================================
   نظام التصميم — شركة مصنع الجسر (Al Jaser Field Ops)
   الفكرة: التطبيق كله يدور حول "الخطوط" (routes) — مندوب يسير على
   خط فيه محلات متسلسلة. عنصر التمييز البصري هو "خط الطريق المنقّط"
   المستوحى من خطوط سير المندوبين نفسها، يظهر كفاصل/خلفية في
   الشاشات الرئيسية بدل الزخرفة العشوائية.
   ============================================================ */
:root{
  /* ---- Primary (SignGaze-style near-black actions) ---- */
  --primary: #111827;
  --primary-hover: #1F2937;

  /* ---- Brand / accent (modern indigo) ---- */
  --brand-blue: #4C6FFF;
  --brand-blue-dark: #3A57E8;
  --brand-blue-light: #ECEFFF;
  --amber: #F5A524;
  --amber-dark: #C97507;
  --amber-light: #FEF3DC;
  --accent-pink: #F2708A;
  --accent-pink-light: #FCE7EC;

  /* ---- Status ---- */
  --success: #17B26A;
  --success-light: #E6F7EE;
  --danger: #EF5A6F;
  --danger-light: #FDECEF;
  --warning: #F5A524;
  --warning-light: #FEF3DC;
  --info: var(--brand-blue);

  /* ---- Neutrals ---- */
  --ink: #101828;
  --ink-soft: #1D2939;
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-muted: #98A2B3;
  --bg: #F3F5F9;
  --surface: #FFFFFF;
  --surface-sunken: #F2F4F7;
  --border: #EDF0F4;
  --border-strong: #DCE0E8;

  /* ---- Typography ---- */
  --font-display: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14.5px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 32px;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Radius / shadow (softer, rounder — SignGaze feel) ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(16,24,40,.05);
  --shadow-md: 0 8px 24px -8px rgba(16,24,40,.10);
  --shadow-lg: 0 24px 60px -20px rgba(16,24,40,.16);

  --transition: 160ms cubic-bezier(.4,0,.2,1);
  --sidebar-w: 264px;
}

@media (prefers-color-scheme: dark){
  /* Reserved for a future dark theme; app currently ships light-only
     but tokens are structured so a dark surface swap is a small diff. */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--ink); }
button, input, select, textarea{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--brand-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Signature element: the dashed route line ----
   Used as a decorative divider echoing a delivery route with stops.
   Usage: <div class="route-divider"></div> or as a background on
   .route-motif-bg elements. */
.route-divider{
  --dot: 6px;
  height: var(--dot);
  background-image: radial-gradient(circle, var(--border-strong) 1.5px, transparent 1.6px);
  background-size: 14px var(--dot);
  background-repeat: repeat-x;
  background-position: center;
  position: relative;
}