/* ═══════════════════════════════════════════════════════════════════════════
   واصل — طقم التصميم الرسمي (مأخوذ حرفياً من مخرجات Stitch ✓✓)
   المصدر: tailwind.config داخل شاشات Stitch (Material Design 3) ✓
   ⚠️ كل قيمة أدناه **منسوخة من الشاشة** ✗ — لا اجتهاد ✓
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── الألوان: M3 كما في شاشات Stitch ✓ ─────────────────────────────── */
  --primary:#005235;
  --primary-container:#1b6b4a;
  --on-primary:#ffffff;
  --on-primary-container:#9ce9bf;
  --primary-fixed:#a6f3c9;
  --primary-fixed-dim:#8ad6ae;
  --on-primary-fixed:#002113;
  --on-primary-fixed-variant:#005235;
  --surface-tint:#1b6b4a;
  --inverse-primary:#8ad6ae;

  --secondary:#785a00;
  --secondary-container:#ffd577;
  --on-secondary:#ffffff;
  --on-secondary-container:#795a01;
  --secondary-fixed:#ffdf9c;
  --secondary-fixed-dim:#eac166;

  --tertiary:#004784;
  --tertiary-container:#1f5fa4;
  --on-tertiary:#ffffff;
  --on-tertiary-container:#c3d9ff;
  --tertiary-fixed:#d4e3ff;
  --tertiary-fixed-dim:#a5c8ff;

  --error:#ba1a1a;
  --error-container:#ffdad6;
  --on-error:#ffffff;
  --on-error-container:#93000a;

  --background:#edfdf3;
  --on-background:#101e18;
  --surface:#edfdf3;
  --surface-bright:#edfdf3;
  --surface-dim:#cdded4;
  --on-surface:#101e18;
  --on-surface-variant:#3f4943;
  --surface-variant:#d6e6dc;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#e7f8ed;
  --surface-container:#e1f2e8;
  --surface-container-high:#dcece2;
  --surface-container-highest:#d6e6dc;
  --inverse-surface:#25332d;
  --inverse-on-surface:#e4f5eb;

  --outline:#6f7a72;
  --outline-variant:#bfc9c0;

  /* ── نصف القطر: من tailwind.config ✓ ──────────────────────────────── */
  --r-sm:0.25rem;      /* DEFAULT ✓ */
  --r:0.5rem;          /* lg ✓ */
  --r-lg:0.75rem;      /* xl ✓ */
  --r-full:9999px;
  --r-sheet:1.25rem;   /* sheet top 20 ✓ */

  /* ── التباعد: من tailwind.config ✓ ───────────────────────────────── */
  --sp-xs:0.25rem;  /* 4  ✓ */
  --sp-sm:0.5rem;   /* 8  ✓ */
  --sp-md:1rem;     /* 16 ✓ */
  --sp-lg:1.5rem;   /* 24 ✓ */
  --sp-xl:2rem;     /* 32 ✓ */

  /* ── الظلال: قيم Tailwind (وما ظهر في الشاشات: xs/sm غالباً ✓) ────── */
  --sh-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --sh-sm:0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10);
  --sh-md:0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .10);
  --sh-lg:0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .10);

  /* ── الحركة: من نظام التصميم ✓ ──────────────────────────────────── */
  --m-press:120ms ease-out;
  --m-enter:200ms cubic-bezier(.2,.8,.2,1);
  --m-screen:280ms;
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--background); color:var(--on-surface);
  font-family:'IBM Plex Sans Arabic','Noto Kufi Arabic',system-ui,sans-serif;
  font-size:14px; line-height:20px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* الأرقام: Inter جدولية دائماً ✓ (قاعدة لا تُكسر ✓) */
.num,.n{
  font-family:'Inter',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ── المقياس الطباعي: من الشاشات حرفياً ✓ ──────────────────────────── */
.t-headline-xl{font-size:36px;line-height:44px;font-weight:700}
.t-headline-xl-m{font-size:28px;line-height:36px;font-weight:700}
.t-headline-lg{font-size:28px;line-height:36px;font-weight:600}
.t-headline-lg-m{font-size:22px;line-height:30px;font-weight:600}
.t-headline-md{font-size:20px;line-height:28px;font-weight:600}
.t-body-lg{font-size:16px;line-height:24px;font-weight:400}
.t-body-md{font-size:14px;line-height:20px;font-weight:400}
.t-body-sm{font-size:12px;line-height:18px;font-weight:400}
.t-num-lg{font-size:20px;line-height:24px;font-weight:600;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums}
.t-num-md{font-size:16px;line-height:20px;font-weight:600;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums}
.t-num-sm{font-size:13px;line-height:16px;font-weight:500;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums}
.t-caption{font-size:11px;line-height:14px;font-weight:500}

.muted{color:var(--on-surface-variant)}
.dim{color:var(--outline)}
.disabled{color:var(--outline-variant)}

/* ── البطاقة: بلا ظل افتراضياً ✓ (+ xs/sm للرفع الناعم ✓) ─────────── */
.card{
  background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);
  border-radius:var(--r-lg);
  padding:var(--sp-md);
}
.card.raised{box-shadow:var(--sh-xs)}
.card.float{box-shadow:var(--sh-sm)}
.card + .card{margin-top:var(--sp-md)}

/* ── الأزرار: 56dp للإجراء الأساسي ✓ · 72dp للسائق ✓ ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-sm);
  width:100%;min-height:56px;padding:0 var(--sp-md);
  border:none;border-radius:var(--r);
  background:var(--primary-container);color:var(--on-primary);
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  transition:transform var(--m-press),opacity var(--m-press);
}
.btn:active{transform:scale(.98);opacity:.92}
.btn:disabled{background:var(--surface-container-high);color:var(--outline-variant);cursor:not-allowed}
.btn.driver{min-height:72px}                        /* مقبض السائق ✓ */
.btn.outline{background:transparent;color:var(--primary-container);border:1.5px solid var(--primary-container)}
.btn.text{background:transparent;color:var(--primary-container);min-height:44px}
.btn.danger{background:var(--error);color:var(--on-error)}
.btn.danger-outline{background:transparent;color:var(--error);border:1.5px solid var(--error)}
.btn.gold{background:var(--secondary-container);color:var(--on-secondary-container)}
.btn .spin{
  width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-row{display:flex;gap:var(--sp-sm)}
.btn-row > *{flex:1}

/* ── الحقول: 5 حالات ✓ ────────────────────────────────────────────── */
.field{margin-bottom:var(--sp-md)}
.field > label{display:block;font-size:11px;line-height:14px;font-weight:500;color:var(--on-surface-variant);margin-bottom:var(--sp-xs)}
.input,.select{
  width:100%;min-height:48px;padding:12px var(--sp-md);
  border:1px solid var(--outline-variant);border-radius:var(--r);
  background:var(--surface-container-lowest);color:var(--on-surface);
  font:inherit;font-size:14px;line-height:20px;
  transition:border-color var(--m-press),box-shadow var(--m-press);
}
.input:focus,.select:focus{outline:none;border-color:var(--primary-container);box-shadow:0 0 0 2px var(--primary-container)}
.input:disabled{background:var(--surface-container-high);color:var(--outline-variant)}
.field.err .input{border-color:var(--error)}
.field .msg{display:none;margin-top:var(--sp-xs);font-size:11px;color:var(--error)}
.field.err .msg{display:block}

/* ── الحالة (chip): ٧ حالات الطلب ✓ بأيقونة + عربي + خلفية مصبوغة ✓ ── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:var(--r-full);
  font-size:11px;line-height:14px;font-weight:500;white-space:nowrap;
}
.chip .ic{font-size:14px;line-height:1}
.chip.draft      {background:var(--surface-container-high);color:var(--on-surface-variant)}   /* مسودة ✓ */
.chip.published  {background:var(--tertiary-fixed);color:var(--tertiary)}                     /* منشور ✓ */
.chip.bidding    {background:var(--tertiary-fixed);color:var(--tertiary)}                     /* جاري العروض ✓ */
.chip.assigned   {background:var(--tertiary-fixed);color:var(--tertiary)}                     /* مُسند ✓ */
.chip.in_progress{background:var(--primary-fixed);color:var(--on-primary-fixed-variant)}      /* جارية ✓ */
.chip.completed  {background:var(--primary-fixed);color:var(--on-primary-fixed-variant)}      /* مكتملة ✓ */
.chip.cancelled  {background:var(--error-container);color:var(--on-error-container)}          /* ملغاة ✓ */
.chip.warn       {background:var(--secondary-fixed);color:var(--on-secondary-container)}
.chip.pill-soft  {background:var(--surface-container-low);color:var(--on-surface-variant)}

/* ── حلقة العدّاد: warning<15s · danger<5s ✓ (transform فقط ✓) ───── */
.ring{position:relative;width:76px;height:76px;flex:0 0 auto}
.ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--surface-container-high);stroke-width:7}
.ring .bar{
  fill:none;stroke:var(--primary-container);stroke-width:7;stroke-linecap:round;
  transition:stroke-dashoffset 1s linear,stroke var(--m-press);
}
.ring.warn .bar{stroke:var(--secondary)}
.ring.danger .bar{stroke:var(--error)}
.ring .val{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;color:var(--on-surface);
}
.ring.warn .val{color:var(--secondary)}
.ring.danger .val{color:var(--error)}

/* ── كتلة المال: صفوف بنقاط قائدة (dotted leaders) ✓ ─────────────── */
.money{background:var(--surface-container-low);border-radius:var(--r-lg);padding:var(--sp-md)}
.money .row{
  display:flex;align-items:baseline;gap:var(--sp-sm);
  font-size:14px;line-height:24px;padding:5px 0;
}
.money .row .k{color:var(--on-surface-variant);flex:0 0 auto}
.money .row .dots{
  flex:1 1 auto;border-bottom:1px dotted var(--outline-variant);
  transform:translateY(-4px);min-width:14px;
}
.money .row .v{flex:0 0 auto;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-weight:600}
.money .row.total{
  border-top:1px solid var(--outline-variant);margin-top:var(--sp-sm);padding-top:var(--sp-sm);
  font-size:16px;
}
.money .row.total .k{color:var(--on-surface);font-weight:600}
.money .row.total .v{font-size:22px;font-weight:700;color:var(--primary)}
.money .row .v.neg{color:var(--error)}

/* ── الهيكل العظمي: بنفس ارتفاع العنصر ✓ ─────────────────────────── */
.skel{
  background:var(--surface-container-high);border-radius:var(--r-sm);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.skel.line{height:14px}
.skel.line.lg{height:20px}

/* ── الحالات الأربع: فارغ بفعل تالٍ ✓ · خطأ بإعادة محاولة ✓ ──────── */
.state{text-align:center;padding:var(--sp-xl) var(--sp-md)}
.state .art{
  width:88px;height:88px;margin:0 auto var(--sp-md);border-radius:var(--r-full);
  background:var(--surface-container-low);display:grid;place-items:center;font-size:38px;
}
.state .art.err{background:var(--error-container)}
.state h3{margin:0 0 var(--sp-xs);font-size:20px;line-height:28px;font-weight:600}
.state p{margin:0 0 var(--sp-md);font-size:12px;line-height:18px;color:var(--on-surface-variant)}
.state .btn{max-width:260px;margin:0 auto}

/* ── شريط عدم الاتصال: كهرماني رفيع غير حاجب ✓ ──────────────────── */
.offline{
  display:none;align-items:center;gap:var(--sp-sm);
  padding:6px var(--sp-md);background:var(--secondary-fixed);color:var(--on-secondary-container);
  font-size:11px;line-height:14px;font-weight:500;
}
.offline.on{display:flex}
.offline .when{margin-inline-start:auto;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;opacity:.8}

/* ── نقطة الاتصال: متصل(أخضر) · إعادة الاتصال(كهرماني نابض) · غير متصل(رمادي) ✓ */
.dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--primary-fixed-dim);flex:0 0 auto}
.dot.reconnecting{background:var(--secondary-fixed-dim);animation:pulse 1.2s ease-in-out infinite}
.dot.offline{background:var(--outline-variant)}

/* ── شريط SOS: أحمر يتطلب «استلام» صريحاً ✓ ─────────────────────── */
.sos-banner{
  display:none;gap:var(--sp-sm);align-items:flex-start;
  padding:var(--sp-md);background:var(--error-container);color:var(--on-error-container);
  border-bottom:1px solid var(--error);
}
.sos-banner.on{display:flex}
.sos-banner .t{flex:1}
.sos-banner b{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.sos-banner .btn{width:auto;min-height:36px;padding:0 var(--sp-md);font-size:12px;
  background:var(--error);color:var(--on-error);flex:0 0 auto}
.sos-fab{
  position:absolute;inset-inline-start:50%;transform:translateX(50%);
  bottom:84px;width:72px;height:72px;border-radius:var(--r-full);
  background:var(--error);color:var(--on-error);border:4px solid var(--surface-container-lowest);
  display:grid;place-items:center;font-size:13px;font-weight:800;
  box-shadow:var(--sh-md);z-index:20;cursor:pointer;
  animation:sos 1.2s ease-in-out infinite;
}
@keyframes sos{0%,100%{transform:translateX(50%) scale(1)}50%{transform:translateX(50%) scale(1.04)}}

/* ── القوائم: ارتفاع الصف 56dp ✓ ─────────────────────────────────── */
.list{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--r-lg);overflow:hidden}
.list .item{
  display:flex;align-items:center;gap:var(--sp-md);
  min-height:56px;padding:var(--sp-sm) var(--sp-md);
  border-bottom:1px solid var(--outline-variant);
  transition:background var(--m-press);
}
.list .item:last-child{border-bottom:none}
.list .item:active{background:var(--surface-container-low)}
.list .item .ic{
  width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-lg);
  background:var(--surface-container-low);display:grid;place-items:center;font-size:20px;
}
.list .item .t{flex:1;min-width:0}
.list .item .t b{display:block;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .item .t span{display:block;font-size:11px;line-height:14px;color:var(--on-surface-variant)}
.list .item .v{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;flex:0 0 auto}

/* ── التنبيهات (toast) ───────────────────────────────────────────── */
.toast{
  position:absolute;inset-inline:var(--sp-md);bottom:96px;z-index:40;
  background:var(--inverse-surface);color:var(--inverse-on-surface);
  padding:12px var(--sp-md);border-radius:var(--r);
  font-size:12px;line-height:18px;box-shadow:var(--sh-md);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--m-enter),transform var(--m-enter);
}
.toast.on{opacity:1;transform:none}

/* ── الهيكل العام ────────────────────────────────────────────────── */
.app{width:100%;max-width:430px;height:100vh;margin:0 auto;position:relative;display:flex;flex-direction:column;background:var(--background);overflow:hidden}
.app-hd{padding:var(--sp-md);display:flex;align-items:center;gap:var(--sp-md);flex:0 0 auto}
.app-bd{flex:1;overflow-y:auto;padding:0 var(--sp-md) 96px;overscroll-behavior:contain}
.scr{display:none}
.scr.on{display:block;animation:enter var(--m-enter)}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.app-nav{
  position:absolute;inset-inline:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;gap:2px;
  padding:var(--sp-sm) var(--sp-xs) max(var(--sp-sm),env(safe-area-inset-bottom));
  background:var(--surface-container-lowest);border-top:1px solid var(--outline-variant);
}
.app-nav a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px var(--sp-md);border-radius:var(--r-lg);
  text-decoration:none;color:var(--on-surface-variant);
  font-size:11px;line-height:14px;font-weight:500;
  min-width:56px;min-height:48px;justify-content:center;      /* هدف لمس ≥48dp ✓ */
}
.app-nav a .e{font-size:22px;line-height:1}
.app-nav a.on{background:var(--surface-container-low);color:var(--primary-container);font-weight:600}
.app-nav a:active{transform:scale(.96)}

/* ── شريط علوي ملوّن ────────────────────────────────────────────── */
.hero{
  background:linear-gradient(160deg,var(--primary),var(--primary-container));
  color:var(--on-primary);padding:var(--sp-md);border-radius:0 0 var(--r-lg) var(--r-lg);
}
.hero .av{width:44px;height:44px;border-radius:var(--r-lg);background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:22px}
.kpis{display:flex;gap:var(--sp-sm);margin-top:var(--sp-md)}
.kpi{flex:1;background:rgba(255,255,255,.12);border-radius:var(--r-lg);padding:var(--sp-sm);text-align:center}
.kpi .k{font-size:11px;line-height:14px;opacity:.9}
.kpi .v{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;margin-top:2px}

/* ── بطاقة العرض (السائق) ──────────────────────────────────────── */
.offer{border:2px solid var(--primary-container);border-radius:var(--r-sheet);overflow:hidden;box-shadow:var(--sh-md)}
.offer .hd{background:var(--primary-container);color:var(--on-primary);padding:var(--sp-sm) var(--sp-md);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-sm)}
.offer .bd{background:var(--surface-container-lowest);padding:var(--sp-md)}
.offer .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-sm);margin-top:var(--sp-md)}
.offer .g{background:var(--surface-container-low);border-radius:var(--r);padding:var(--sp-sm) 12px}
.offer .g .k{font-size:11px;line-height:14px;color:var(--on-surface-variant)}
.offer .g .v{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:16px;font-weight:600;margin-top:2px}

/* ── الخطوات (flow) ─────────────────────────────────────────────── */
.flow{display:flex;gap:4px;align-items:flex-start;margin-top:var(--sp-sm)}
.flow .st{flex:1;text-align:center}
.flow .st .c{
  width:26px;height:26px;margin:0 auto 4px;border-radius:var(--r-full);
  background:var(--surface-container-low);color:var(--on-surface-variant);
  display:grid;place-items:center;font-size:12px;font-weight:700;
  font-family:'Inter',sans-serif;transition:background var(--m-press),transform var(--m-press);
}
.flow .st.on .c{background:var(--primary-container);color:var(--on-primary);transform:scale(1.08)}
.flow .st.done .c{background:var(--primary-fixed);color:var(--on-primary-fixed-variant)}
.flow .st .l{font-size:9px;line-height:12px;color:var(--on-surface-variant)}
.flow .st.on .l{color:var(--primary-container);font-weight:700}

/* ── شريط التقدّم (transform فقط ✓ لا width ✓) ─────────────────── */
.prog{height:6px;background:var(--surface-container-high);border-radius:var(--r-full);overflow:hidden}
.prog > i{
  display:block;height:100%;width:100%;background:var(--primary-container);
  border-radius:var(--r-full);transform-origin:right center;transform:scaleX(0);
  transition:transform var(--m-screen) cubic-bezier(.2,.8,.2,1);
}

/* ── الخريطة الحرارية ───────────────────────────────────────────── */
.heat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.heat .z{border-radius:var(--r);padding:12px 4px;text-align:center;font-size:11px;line-height:14px;font-weight:600;color:#fff}
.heat .z small{display:block;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:10px;opacity:.92}

/* ── الشفافية والوصول ───────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--primary-container);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}