/* ============================================================
   نظام التصميم — شركة مصنع الجسر (Al Jaser Field Ops)
   الفكرة: التطبيق كله يدور حول "الخطوط" (routes) — مندوب يسير على
   خط فيه محلات متسلسلة. عنصر التمييز البصري هو "خط الطريق المنقّط"
   المستوحى من خطوط سير المندوبين نفسها، يظهر كفاصل/خلفية في
   الشاشات الرئيسية بدل الزخرفة العشوائية.
   ============================================================ */
:root{
  /* ---- Brand ---- */
  --brand-blue: #0B5FA8;
  --brand-blue-dark: #083F73;
  --brand-blue-light: #E8F1FA;
  --amber: #F2941C;
  --amber-dark: #C97507;
  --amber-light: #FEF1DE;

  /* ---- Status ---- */
  --success: #1F9D63;
  --success-light: #E4F6ED;
  --danger: #D6455A;
  --danger-light: #FBE7EA;
  --warning: #E0A106;
  --warning-light: #FBF1D8;
  --info: var(--brand-blue);

  /* ---- Neutrals ---- */
  --ink: #131B2E;
  --ink-soft: #2B3550;
  --text-secondary: #64708A;
  --text-muted: #99A2B5;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-sunken: #EEF1F5;
  --border: #E3E7EE;
  --border-strong: #CBD2DF;

  /* ---- Typography ---- */
  --font-display: 'El Messiri', 'IBM Plex Sans Arabic', 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 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(19,27,46,.06);
  --shadow-md: 0 6px 20px -4px rgba(19,27,46,.12);
  --shadow-lg: 0 20px 48px -12px rgba(19,27,46,.22);

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