/* ══════════════════════════════════════════════════════════════════
   نظام التصميم — الجيل الثاني
   ══════════════════════════════════════════════════════════════════

   الخط: Rubik، **مستضاف محلياً** لا من Google Fonts.

   السبب عملي لا مبدئي: الاستضافة عندك خلف شبكة قد تُبطئ أو تحجب
   نطاقاً خارجياً، وطلبٌ لخطٍّ بعيد يحجب رسم النصّ أو يُسقطه إلى خطّ
   نظامٍ مختلف الشكل. ملفٌّ واحد بحجم ٦٨ كيلوبايت يحمل اللاتينية
   والعربية معاً، بـ`font-display:swap` فلا تبقى الصفحة فارغة لحظة.

   وهو خطّ متغيّر (٣٠٠–٩٠٠): وزنٌ واحد على الشبكة بدل خمسة ملفّات.
   ══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Rubik';
  src:url('/assets/fonts/rubik-var.woff2') format('woff2-variations');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* المحايدات */
  --bg:#F5F6F8; --card:#FFFFFF; --surface-2:#F7F9FA;
  --line:#E4E9ED; --line-2:#EEF2F5; --line-strong:#D2DAE1;
  --ink:#0F1A22; --ink-2:#657785; --ink-3:#93A3AF; --ink-4:#B6C2CB;

  /* العلامة */
  --brand:#0F1A22; --brand-2:#16242e; --brand-3:#1E2C36;
  --accent:#0E7490; --accent-soft:#E2F1F4; --accent-2:#EA580C;

  /* الحالات */
  --ok:#16A34A;      --ok-soft:#E8F6EC;
  --warn:#C2760A;    --warn-soft:#FCF2E0;
  --serious:#EA580C; --serious-soft:#FDECE2;
  --crit:#DC2626;    --crit-soft:#FCE9E9;
  --violet:#7C3AED;  --violet-soft:#F0E9FE;

  /* الشكل — بطاقات لها انحناء أكبر، وضوابط أنعم، وشارات بيضوية */
  --r:18px; --r-sm:10px; --r-chip:999px;
  --sh:0 1px 2px rgba(15,26,34,.03), 0 1px 3px rgba(15,26,34,.04);
  --sh-lift:0 4px 12px -4px rgba(15,26,34,.10), 0 12px 32px -12px rgba(15,26,34,.14);
  --sh-lg:0 12px 32px -8px rgba(15,26,34,.22);

  --series-1:#0E7490; --series-2:#EA580C; --surface-1:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Rubik','Segoe UI','Noto Kufi Arabic','Noto Sans Arabic',Tahoma,
    'Geeza Pro',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

/* ── هيكل ───────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--brand);color:#dbe3ea;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:18px 16px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);min-width:0}
.brand > div:last-child{min-width:0}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#0B5D74);display:grid;place-items:center;color:#fff;flex:none}
/* شعارٌ عريض يبتلع عرض القائمة فيلتفّ الاسم ثلاثة أسطر — يُقصّ */
.brand-logo{height:30px;width:auto;max-width:76px;object-fit:contain;flex:none}
.brand-name{font-weight:600;font-size:13.5px;color:#fff;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.brand-sub{font-size:11px;color:#7f8f9d}
.nav{padding:8px 8px 20px;flex:1}
.nav-group{font-size:10.5px;letter-spacing:.06em;color:#5d6d7b;padding:14px 10px 5px;font-weight:600;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font-size:13.5px;color:#c3cdd6;margin-bottom:2px;transition:.15s}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:rgba(255,255,255,.10);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.nav a .ic{width:16px;flex:none;opacity:.85}
.nav a .badge{margin-inline-start:auto;background:var(--crit);color:#fff;font-size:10px;padding:1px 6px;border-radius:99px;font-weight:600}
.main{display:flex;flex-direction:column;min-width:0}
.top{background:var(--card);border-bottom:1px solid var(--line);padding:0 22px;min-height:64px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:40}
.crumb{font-size:13px;color:var(--ink-3)}
.crumb b{color:var(--ink);font-weight:600}
.search{margin-inline-start:auto;position:relative;display:block}
.search input{width:320px;padding:9px 38px 9px 14px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface-2);font-size:13px;outline:0;transition:.15s}
.search input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(14,116,144,.13)}
/* زرّ التنفيذ داخل الحقل — هدفٌ حقيقي لا زخرفة */
.search .k{position:absolute;inset-inline-end:5px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:99px;display:grid;place-items:center;
  color:var(--ink-3);background:transparent;transition:.15s}
.search .k:hover{background:var(--accent-soft);color:var(--accent)}
.top-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2);position:relative;border:1px solid var(--line);background:var(--surface-2);transition:.15s}
.top-btn:hover{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.who{display:flex;align-items:center;gap:8px;padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.avatar{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.page{padding:22px;flex:1}

/* ── تذييل: نسبةُ النظام وإصداره ─────────────────────────────
   يقع أسفل المحتوى لا مثبَّتاً: شريطٌ ثابت يأكل من ارتفاع الهاتف
   في كل شاشة مقابل سطرٍ يُقرأ مرّة. */
.app-footer{padding:16px 22px;border-top:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-3)}
.app-footer .credit{color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.app-footer .credit b{font-weight:700}
.app-footer .credit:hover{color:var(--brand-3)}
.app-footer .credit::after{content:"";width:5px;height:5px;border-radius:99px;background:currentColor;opacity:.65}
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
h1{font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.page-sub{color:var(--ink-2);font-size:13px;margin-top:4px;max-width:78ch}
.head-actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ── مكوّنات ─────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{padding:16px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-h h3{font-size:13.5px;font-weight:600}
.card-h .act{margin-inline-start:auto;display:flex;gap:6px}
.card-b{padding:20px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g23{grid-template-columns:2fr 1fr}
@media(max-width:1200px){.g4{grid-template-columns:repeat(2,1fr)}.g23,.g3,.g2{grid-template-columns:1fr}}

/* ملاحظةُ ترويسة البطاقة — على الحافّة المقابلة للعنوان دائماً */
.card-note{margin-inline-start:auto;font-size:11.5px;color:var(--ink-3);text-decoration:none}
a.card-note:hover{color:var(--accent)}
/* القراءة البشرية بجانب الرقم: «١٤٤٠ دقيقة = يوم كامل» */
.unit-human{font-size:11.5px;color:var(--ink-3);white-space:nowrap;margin-inline-start:2px}

/* المعلومات الفنّية — مطويّة، وعنوانها هدفُ نقرٍ حقيقي */
.tech{margin-top:20px}
.tech > summary{cursor:pointer;font-size:12.5px;color:var(--ink-3);padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  list-style:none;display:flex;align-items:center;gap:8px;transition:.15s}
.tech > summary::-webkit-details-marker{display:none}
.tech > summary::before{content:"›";font-size:15px;line-height:1;transition:transform .15s;display:inline-block}
.tech[open] > summary::before{transform:rotate(90deg)}
.tech > summary:hover{color:var(--ink-2);border-color:var(--line-strong)}

/* سطرٌ يشرح ما يعنيه الجدول قبل قراءته — لا بعده */
.card-lede{font-size:12.5px;color:var(--ink-3);line-height:1.65;margin-bottom:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 18px;border-radius:var(--r-chip);font-size:13.5px;font-weight:500;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  transition:.15s;white-space:nowrap;min-height:38px}
.btn:hover{background:#fff;border-color:var(--line-strong);box-shadow:var(--sh)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-p:hover{background:var(--brand-3);border-color:var(--brand-3);color:#fff}
.btn-d{background:var(--crit);border-color:var(--crit);color:#fff}
.btn-d:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn-g{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-g:hover{background:#15803d;border-color:#15803d;color:#fff}
.btn-sm{padding:6px 13px;font-size:12.5px;min-height:32px}
.btn-lg{padding:13px 24px;font-size:15px;min-height:48px}
.btn-block{width:100%}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-chip);
  font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1.4}
.chip .d{width:6px;height:6px;border-radius:99px;flex:none}
.c-ok{background:var(--ok-soft);color:#166534;border-color:transparent} .c-ok .d{background:var(--ok)}
.c-blue{background:var(--accent-soft);color:#0B5D74;border-color:transparent} .c-blue .d{background:var(--accent)}
.c-warn{background:var(--warn-soft);color:#92600A;border-color:transparent} .c-warn .d{background:var(--warn)}
.c-serious{background:var(--serious-soft);color:#9A3412;border-color:transparent} .c-serious .d{background:var(--serious)}
.c-crit{background:var(--crit-soft);color:#991B1B;border-color:transparent} .c-crit .d{background:var(--crit)}
.c-gray{background:#EEF1F4;color:#475569;border-color:transparent} .c-gray .d{background:var(--ink-3)}
/* التمليك — لونٌ لا يشبه المتاح ولا العاطل: هي ملكُك ولا تُشغَّل */
.c-violet{background:var(--violet-soft);color:#5B21B6;border-color:transparent} .c-violet .d{background:var(--violet)}

/* ══════════════════════════════════════════════════════════════════
   لوحة المركبة
   ══════════════════════════════════════════════════════════════════

   تحاكي نسب لوحة دبي الحقيقية وترتيبها: عمودٌ أيسر يحمل اسم
   الإمارة فوق رمز اللوحة، ثم الرقم إلى جانبه بخطٍّ أكبر.

   والترتيب من اليسار **دائماً**، ولذلك `direction:ltr` مفروضة حتى
   داخل صفحة عربية: اللوحة شيءٌ يُقرأ كما هو مطبوع على المعدن، لا
   نصٌّ يتبع لغة الواجهة. كانت تُرسم ثلاثَ خاناتٍ متجاورة بحجمٍ
   واحد فبدت جدولاً صغيراً لا لوحة.

   كلُّ مقاسٍ فيها مشتقٌّ من `--plate-h` وحده، فتكبر اللوحة وتصغر
   بمتغيّرٍ واحد وتبقى نسبُها كما هي.
   ══════════════════════════════════════════════════════════════════ */
.plate{
  --plate-h:30px;
  direction:ltr;
  display:inline-flex;align-items:stretch;gap:0;
  height:var(--plate-h);
  background:#F4F5F6;
  border:1.5px solid #23282E;
  border-radius:calc(var(--plate-h) * .17);
  overflow:hidden;
  vertical-align:middle;
  /* الإطار المزدوج: حلقةٌ فاتحة ثم رماديةٌ داخلها، كما في المعدن */
  box-shadow:inset 0 0 0 1.5px #F4F5F6, inset 0 0 0 2.5px #8A9199;
  white-space:nowrap;
  user-select:all;
}
.plate-left{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-inline:calc(var(--plate-h) * .20);
  gap:calc(var(--plate-h) * .04);
  min-width:calc(var(--plate-h) * 1.3);
}
.plate-logo{
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--plate-h) * .32);
  font-weight:700;line-height:1;letter-spacing:-.015em;
}
.plate-logo i{font-style:normal}
.plate-logo .c1{color:#27AAE1}   /* أزرق العلامة */
.plate-logo .c2{color:#EC008C}   /* وردي العلامة */
.plate-code{
  font-size:calc(var(--plate-h) * .40);
  font-weight:700;line-height:1;color:#15181C;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.plate-code:empty{display:none}
.plate-number{
  display:flex;align-items:center;
  padding-inline:calc(var(--plate-h) * .28) calc(var(--plate-h) * .34);
  font-size:calc(var(--plate-h) * .56);
  font-weight:700;line-height:1;color:#15181C;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.plate.lg{--plate-h:46px}
.plate.sm{--plate-h:24px}
/* داخل الجداول تصغر تلقائياً حتى لا تُعلي الصفّ */
.table-wrap .plate{--plate-h:27px}
.table-wrap .plate.sm{--plate-h:23px}

/*
   ═══════════════════════════════════════════════════════════════
   الجداول — والمحدِّد الذي لم يُطابق شيئاً
   ═══════════════════════════════════════════════════════════════

   كان هذا الطقم مكتوباً على `table.t`، ولا قالبَ واحد في المشروع
   يكتب `class="t"`. فخمسة عشر جدولاً — كل بيانات النظام — تُعرَض
   بتنسيق المتصفّح الافتراضي منذ اليوم الأول: عناوينُ أعمدةٍ
   موسّطة فوق خلايا مُصطفّة إلى الحافّة، وصفوفٌ بلا حشو، وبلا خطّ
   فاصل.

   وهذا ما رآه المالك وسمّاه «عدم تناسق». لم يكشفه اختبار — يقرأ
   HTML لا CSS — ولا فاحصٌ نحوي، ولا مسحٌ يقيس رموز الحالة. كشفَه
   أن أحداً نظر.

   والمحدِّد الآن `.table-wrap` لا صنفاً يدوياً: البوّابة المعمارية
   تشترط الحاوية على كل جدول، فما من جدولٍ يفلت من التنسيق إلّا
   وقد سقطت البوّابة قبله.
*/
.table-wrap table{font-size:13px}
.table-wrap th{text-align:start;font-size:11.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:.02em;padding:11px 16px;border-bottom:1px solid var(--line);
  background:var(--surface-2);white-space:nowrap}
.table-wrap td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table-wrap tbody tr{transition:background .1s}
.table-wrap tbody tr:hover{background:var(--surface-2)}
.table-wrap tbody tr:last-child td{border-bottom:0}
/* عمودُ الفعل يبقى على الحافّة البعيدة مهما ضاق الجدول */
.table-wrap th:last-child,.table-wrap td:last-child{text-align:end}
/* صفُّ «لا بيانات» يمتدّ بالأعمدة كلّها، فتوسيطُه هو الصواب */
.table-wrap td.empty{text-align:center}
.t-main{font-weight:600}
.t-sub{font-size:11.5px;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;unicode-bidi:plaintext}
/*
 * `unicode-bidi:plaintext` لا `direction:ltr`: القيمة الثانية كانت
 * ستقلب محاذاة الخلية أيضاً. أما هذه فتحسب اتجاه كل قيمة وحدها من
 * محتواها، فيبقى الجدول عربياً بينما يُقرأ «2026-08-03 21:10» ولوحةُ
 * السيارة ورقم الهيكل بترتيبها الصحيح — لا معكوسةً كما تفعل RTL
 * بالنصوص المحايدة.
 */

.f-count{margin-inline-start:auto;font-size:12px;color:var(--ink-3)}

/* ── بطاقة المؤشّر الكبرى ────────────────────────────────────
   لونٌ مصمَت يُقرأ من مسافة، ورقمٌ كبير، وأيقونةٌ في حلقةٍ شفّافة.
   وكلُّها روابط: رقمٌ لا يُنقَر يُجبر قارئه على البحث عمّا وراءه. */
.kpi-hero{position:relative;overflow:hidden;border-radius:var(--r);padding:18px 20px 16px;
  color:#fff;display:flex;flex-direction:column;gap:2px;min-height:126px;
  box-shadow:var(--sh-lift);transition:.16s}
.kpi-hero:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
/* هالةٌ خفيفة في الزاوية — عمقٌ بلا صورة */
.kpi-hero::before{content:"";position:absolute;inset-block-start:-58px;inset-inline-end:-38px;
  width:150px;height:150px;border-radius:99px;background:rgba(255,255,255,.11)}
.kpi-hero__icon{position:relative;width:38px;height:38px;border-radius:99px;flex:none;
  background:rgba(255,255,255,.18);display:grid;place-items:center;margin-bottom:8px;
  align-self:flex-start}
/*
   بلا `.num` هنا عن قصد.

   `.num` تحمل `unicode-bidi:plaintext`، وهي الصواب داخل جدولٍ
   عربي يعرض لوحةً أو تاريخاً. لكن عدداً مجرَّداً بلا حرفٍ قويّ
   تُحسب فقرتُه يسارية، فتنزلق محاذاته إلى يسار البطاقة بينما
   عنوانه في يمينها. رأيتُ «3» في طرف و«إجمالي المركبات» في الطرف
   الآخر من البطاقة نفسها.
*/
.kpi-hero__n{position:relative;font-size:30px;font-weight:700;line-height:1.05;
  letter-spacing:-.03em;text-align:start;font-variant-numeric:tabular-nums}
.kpi-hero__lbl{position:relative;font-size:12.5px;opacity:.86;text-align:start}
.kpi-hero__sub{position:relative;font-size:11px;opacity:.62;text-align:start;margin-top:1px}
.k-teal {background:linear-gradient(135deg,#0F9488,#12766D)}
.k-green{background:linear-gradient(135deg,#22A55A,#16803F)}
.k-blue {background:linear-gradient(135deg,#2E8FE0,#1B63B8)}
.k-amber{background:linear-gradient(135deg,#F09B2E,#DB6A16)}

/* ── شرائح الترشيح ──────────────────────────────────────────
   شريطٌ يُقرأ بنظرة، وعلى كل شريحة عددُها. ويُمرَّر أفقياً على
   الهاتف بدل أن يلتفّ إلى ثلاثة أسطر. */
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.f-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--line);border-radius:var(--r-chip);background:var(--card);
  font-size:13px;color:var(--ink-2);white-space:nowrap;transition:.15s}
.f-pill:hover{border-color:var(--line-strong);color:var(--ink)}
.f-pill b{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:18px;padding:1px 6px;border-radius:99px;text-align:center;
  background:var(--surface-2);color:var(--ink-3)}
.f-pill.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.f-pill.on b{background:rgba(255,255,255,.16);color:#fff}
.f-count{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── منحنى النشاط ───────────────────────────────────────────
   العلامة رفيعة والشبكة شعرة، والحبر الثقيل مُخصَّص للبيانات
   وحدها. والارتفاع يشمل شريط المحور فلا يظهر تمريرٌ داخلي. */
.spark{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.spark__head{padding:16px 20px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.spark__head b{font-size:13.5px;font-weight:600;display:block}
.spark__sub{font-size:12px;color:var(--ink-3)}
.spark__stats{display:flex;gap:22px;margin-inline-start:auto;flex-wrap:wrap}
.spark__stats dt{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.spark__stats dd{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.spark__plot{padding:14px 16px 0}
.spark__plot svg{width:100%;height:170px;display:block}
.spark__axis{display:flex;justify-content:space-between;padding:6px 8px 14px;
  font-size:10.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.spark__axis span{flex:1;text-align:center;min-width:0}
.spark__axis span.on{color:var(--ink-2);font-weight:600}
.spark__data{border-top:1px solid var(--line-2)}
.spark__data summary{padding:11px 20px;font-size:12.5px;color:var(--ink-2);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:7px}
.spark__data summary::before{content:"";width:0;height:0;flex:none;
  border-inline-start:5px solid currentColor;border-block:4px solid transparent;transition:.15s}
html[dir="rtl"] .spark__data summary::before{transform:scaleX(-1)}
.spark__data[open] summary::before{transform:rotate(90deg)}
html[dir="rtl"] .spark__data[open] summary::before{transform:rotate(90deg) scaleX(-1)}
.spark__data summary::-webkit-details-marker{display:none}
.spark__data summary:hover{color:var(--ink);background:var(--surface-2)}

/* ── خانة أصل الهوية ────────────────────────────────────────
   معاينةٌ إلى جانب الرفع: من يرفع شعاراً يريد أن يرى ما رفعه
   قبل أن يفتح شاشةً أخرى ليتأكّد. والرقعة الشطرنجية تُظهر
   الشفافية — شعارٌ أبيض على أبيض يبدو مفقوداً. */
.brand-slot{display:flex;gap:14px;align-items:flex-start;padding:14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.brand-slot__preview{width:76px;height:76px;flex:none;border-radius:var(--r-sm);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;padding:6px;
  background-color:#fff;
  background-image:linear-gradient(45deg,#eef2f5 25%,transparent 25%,transparent 75%,#eef2f5 75%),
                   linear-gradient(45deg,#eef2f5 25%,transparent 25%,transparent 75%,#eef2f5 75%);
  background-size:12px 12px;background-position:0 0,6px 6px}
.brand-slot__preview img{max-width:100%;max-height:100%;object-fit:contain}
.brand-slot__empty{font-size:10.5px;color:var(--ink-4);text-align:center;line-height:1.4;padding:4px}
.brand-slot__body{flex:1;min-width:0}
.brand-slot__body b{font-size:13px;display:block;margin-bottom:3px}
.brand-slot__form{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.brand-slot__form .inp{flex:1;min-width:150px;padding:7px 10px;font-size:12.5px;min-height:36px}
/* منتقي اللون لا يحتاج عرض حقلٍ نصّي */
.inp[type="color"]{max-width:110px;padding:4px;cursor:pointer}

/* حقلٌ برقم ووحدته — الوحدة جزءُ الحقل لا نصٌّ بجانبه */
.input-unit{display:flex;align-items:center;gap:0}
.input-unit .inp{border-start-end-radius:0;border-end-end-radius:0}
.input-unit .unit{padding:0 12px;min-height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-inline-start:0;background:var(--surface-2);
  border-start-end-radius:var(--r-sm);border-end-end-radius:var(--r-sm);
  font-size:12.5px;color:var(--ink-3);white-space:nowrap}

.kpi{padding:18px 20px}
.kpi .lbl{font-size:12.5px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:7px}
/*
   النقطة تحمل لونَ الحالة وحدها. أصنافُ `c-*` مصمَّمة لخلفية
   الرقاقة الباهتة، فتُقلَب هنا إلى اللون الصريح: على مساحةِ
   ثمانية بكسلات لا يُقرأ الباهت.
*/
.kpi .lbl .d{width:8px;height:8px;border-radius:99px;flex:none;background:var(--ink-4)}
.kpi .lbl .d.c-ok{background:var(--ok)}
.kpi .lbl .d.c-blue{background:var(--accent)}
.kpi .lbl .d.c-warn{background:var(--warn)}
.kpi .lbl .d.c-crit{background:var(--crit)}
.kpi .val{font-size:32px;font-weight:600;letter-spacing:-.03em;margin-top:8px;line-height:1.1}
.kpi .meta{font-size:12px;color:var(--ink-3);margin-top:8px;display:flex;align-items:center;gap:5px;line-height:1.6}
.kpi.click{cursor:pointer;transition:.13s}
.kpi.click:hover{border-color:var(--accent);box-shadow:var(--sh-lift)}
.up{color:var(--ok);font-weight:600}.down{color:var(--crit);font-weight:600}

.bar-row{display:grid;grid-template-columns:126px 1fr 46px;gap:11px;align-items:center;margin-bottom:9px;font-size:12.5px}
.bar-row:last-child{margin-bottom:0}
.bar-track{height:9px;background:#eef2f6;border-radius:99px;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:var(--series-1)}
.bar-row .v{text-align:end;font-weight:600;font-variant-numeric:tabular-nums}

.empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ══════════════════════════════════════════════════════════════════
   مفاتيح التشغيل — خانةُ اختيارٍ حقيقية، وشرحُها بجانبها لا تحتها
   ══════════════════════════════════════════════════════════════════
   الشرح جزءٌ من `<label>` عمداً: النقر عليه يبدّل المفتاح، فمساحةُ
   اللمس على الهاتف صارت السطر كلَّه لا مربّعاً بعرض ١٦ بكسل. */
.switches{display:grid;gap:2px;margin-top:4px}
.switch{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;
  border-radius:var(--r-sm);cursor:pointer;transition:background .12s}
.switch:hover{background:var(--surface-2)}
.switch input{width:17px;height:17px;margin:1px 0 0;flex:none;accent-color:var(--accent);cursor:pointer}
.switch b{display:block;font-size:13px;font-weight:600;color:var(--ink-1);margin-bottom:2px}
.switch .hint{font-size:12px;color:var(--ink-3);line-height:1.6;margin:0}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}

.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field label .req{color:var(--crit)}
.field .hint{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.6}
.inp{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:14px;outline:0;transition:.15s;min-height:42px}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,116,144,.13)}
.inp::placeholder{color:var(--ink-4)}
textarea.inp{min-height:74px;resize:vertical}

.note{padding:14px 16px;border-radius:14px;font-size:13px;display:flex;gap:10px;align-items:flex-start;line-height:1.7}
.note-b{background:var(--accent-soft);color:#0B5D74;border:1px solid transparent}
.note-w{background:var(--warn-soft);color:#92600A;border:1px solid transparent}
.note-c{background:var(--crit-soft);color:#991B1B;border:1px solid transparent}
.note-g{background:var(--ok-soft);color:#166534;border:1px solid transparent}
.note .ic{flex:none;margin-top:1px}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 16px;overflow-x:auto}
.tabs button{padding:11px 13px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tabs button:hover{color:var(--ink)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px}
.kv dt{color:var(--ink-3);font-size:12.5px}
.kv dd{font-weight:500}

/* ── الجوّال ─────────────────────────────────────────────── */
.phones{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding:8px 0}
.phone{width:310px;flex:none}
.screen{width:310px;height:620px;background:#fff;border:9px solid #111a21;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-lg);position:relative}
.step{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}

.yard{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.bay{aspect-ratio:1.25;border-radius:6px;display:grid;place-items:center;font-size:9.5px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink-3);cursor:pointer}
.bay.full{background:var(--accent-soft);border-color:#bcd8f7;color:#1c5cab}
.bay.out{background:#f7f9fb;border-style:dashed;color:var(--ink-4)}
.bay:hover{outline:2px solid var(--accent);outline-offset:1px}

.hidden{display:none!important}
.mt{margin-top:16px}.mb{margin-bottom:14px}
.muted{color:var(--ink-3)}
.sm{font-size:12px}
.center{text-align:center}
.flex{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}

/* ══════════════════════════════════════════════════════════════════
   شريط حالة الطابور — يملؤه status.js
   ══════════════════════════════════════════════════════════════════
   بلوناته من نظام التصميم نفسه لا من ورقة أنماط ثانية: كان الميدان
   يحمّل `app.css` بجانب هذه، وفيها جذرٌ داكن بأسماء رموز مختلفة،
   فخرجت الشاشة بلونين لا يلتقيان. نظام تصميم واحد أو نظامان
   يتباعدان — ولا ثالث. */
.fleet-status{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:13px}
.fleet-status__dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:none}
.fleet-status__label{font-weight:600}
.fleet-status__count{color:var(--ink-3);margin-inline-end:auto}
.fleet-status__action{min-height:32px;padding-inline:12px;font-size:12.5px;
  border:1px solid var(--crit);border-radius:var(--r-sm);color:var(--crit)}
.fleet-status[data-state=online] .fleet-status__dot{background:var(--ok)}
.fleet-status[data-state=offline] .fleet-status__dot{background:var(--ink-3)}
.fleet-status[data-state=syncing] .fleet-status__dot{background:var(--warn);
  animation:fleet-pulse 1.2s ease-in-out infinite}
.fleet-status[data-state=failed]{background:var(--crit-soft);border-color:var(--crit)}
.fleet-status[data-state=failed] .fleet-status__dot{background:var(--crit)}
@keyframes fleet-pulse{50%{opacity:.25}}
/* الحركة زينة هنا: اللون والنصّ يحملان الحالة أصلاً. */
@media (prefers-reduced-motion:reduce){
  .fleet-status[data-state=syncing] .fleet-status__dot{animation:none}
}

/* ── تخطيط الميدان ───────────────────────────────────────────────
   عمودٌ واحد بلا شريط جانبي: شاشة الهاتف لا تتّسع لاثنتين
   وعشرين وجهة، والسائق يستعملها واقفاً بيدٍ واحدة. */
body.field { background: var(--bg) }
.field-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  gap: 10px; padding: 10px 12px; background: var(--brand); color: #fff }
.field-top__mark { width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--accent), #1c5cab);
  display: grid; place-items: center }
.field-top__title { font-size: 15px; font-weight: 600; line-height: 1.2 }
.field-top__sub { font-size: 11.5px; color: #8fa3b2 }
.field-top__btn { min-width: 40px; min-height: 40px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: #c3cdd6; font-size: 13px; font-weight: 600 }
.field-top__btn:hover { background: rgba(255,255,255,.08); color: #fff }
.field-main { padding: 14px 12px 40px; max-width: 720px; margin: 0 auto }

/* زرّ القائمة والحجاب — لا يظهران إلا على الشاشة الضيّقة */
.menu-btn { display: none }
.scrim { display: none; position: fixed; inset: 0; background: rgba(15,26,34,.44); z-index: 55;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease }
body.nav-open .scrim { opacity: 1; visibility: visible }
@media (max-width: 900px) { .scrim { display: block } }

/* ── الطرفية المكتبية على شاشة ضيّقة ─────────────────────────────
   الشريط الجانبي يصير **درجاً منزلقاً** لا شريطاً أفقياً.

   جرّبتُ الشريط الأفقي أولاً فبانت علّتُه على هاتف حقيقي: ستّ عشرة
   وجهةً في مسارٍ واحد يُمرَّر، لا تُرى منها إلا ثلاث، ولا شيء يدلّ
   على أن وراءها بقيّة. والمجموعات — «الأسطول»، «العهدة»، «العمل» —
   تُحذف لأنها لا تتّسع، فتضيع الخريطة الذهنية التي بُنيت عليها
   القائمة أصلاً. الدرجُ يعيدها كلَّها بترتيبها، ويردّ إلى الصفحة
   عرضها كاملاً.

   وهو ما كان عليه النظام السابق — والمالك قال إن تصميمه كان أنظف. */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; align-content: start }

  /*
     الدرج مُخرَجٌ بالإزاحة لا بـ `display:none`: العنصر يبقى في
     الشجرة، فينزلق بدل أن يقفز، وتبقى الروابط قابلة للفهرسة.
     والاتجاه يقرّر جهة الخروج — في العربية من اليمين.
  */
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 264px; max-width: 84vw;
    z-index: 60; height: 100dvh; overflow-y: auto; box-shadow: var(--sh-lg);
    transition: transform .24s ease; will-change: transform }
  html[dir="rtl"] body:not(.nav-open) .side { transform: translateX(100%) }
  html[dir="ltr"] body:not(.nav-open) .side { transform: translateX(-100%) }

  .main { min-width: 0 }
  .menu-btn { display: grid }
  .top { padding: 0 12px; gap: 8px; min-height: 58px }
  .search { display: none }
  /*
     «النظام /» زائدةٌ على هاتف: العرض ثمنُه غالٍ، واسمُ الشاشة
     وحده يكفي لأن يعرف المرء أين هو.
  */
  .crumb { font-size: 14px; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .crumb .crumb-root, .crumb .crumb-sep { display: none }
  .who { padding-inline-start: 8px; gap: 6px; margin-inline-start: auto }
  .app-footer { padding: 14px; flex-direction: column; align-items: flex-start; gap: 6px }
  /* الشرائح تُمرَّر أفقياً بدل أن تلتفّ إلى ثلاثة أسطر */
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch; margin-inline: -14px; padding-inline: 14px }
  .f-pill { flex: none }
  .who .who-meta { display: none }

  .page { padding: 14px }
  .grid.g4, .grid.g3, .grid.g2, .grid.g23 { grid-template-columns: 1fr }
  /*
     بطاقاتُ المؤشّرات وحدها تبقى عمودين: رقمٌ وعنوانٌ لا يحتاجان
     عرض الشاشة، وعمودٌ واحد يدفع ستَّ بطاقاتٍ إلى ثلاث شاشات
     تمرير قبل أن يُرى الرسم البياني.

     وهي `kpis` صراحةً لا `g3`: الشبكة نفسها تحمل حقولَ نماذج في
     شاشاتٍ أخرى، وحقلُ إدخالٍ في نصف شاشةِ هاتف خطأٌ مطبعيّ ينتظر.
  */
  .grid.kpis { grid-template-columns: repeat(2, 1fr); gap: 10px }
  .kpi { padding: 14px 15px }
  .kpi .val { font-size: 26px }
  .page-head { gap: 10px }
  .head-actions { margin-inline-start: 0; width: 100% }
  .head-actions .btn { width: 100%; justify-content: center }

  /*
     ─────────────────────────────────────────────────────────────
     الجدول يصير قائمة بطاقات
     ─────────────────────────────────────────────────────────────

     جدولٌ بثمانية أعمدة لا يُقرأ على عرض 390 بكسل بأي حيلة. جرّبتُ
     التمرير الأفقي فبانت علّته في لقطة الهاتف: عمودٌ مقصوصٌ عند
     الحافّة ولا شيء يقول إن وراءه بقيّة، فيقرأ المشرف نصف الصفّ
     ويظنّه كلَّه.

     فكل صفٍّ هنا بطاقة، وكل خليّة سطرٌ فيه: عنوانُ العمود إلى
     جهة والقيمة إلى الأخرى. العنوان يأتي من `data-label` الذي
     يحمله كل `<td>` — والبوّابة المعمارية تشترطه، فلا خليّة تخرج
     بلا اسمٍ لعمودها.

     `display:block` هنا صحيح لأننا **نتخلّى عن تخطيط الجدول قصداً**
     ولا نبقي ترويسةً تعتمد عليه؛ الترويسة تُخفى بالكامل. الخطأ
     السابق كان إبقاءها ظاهرةً بعد إلغاء التخطيط، فالتصقت عناوينها.
  */
  .card { min-width: 0 }
  .table-wrap { overflow: visible }
  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td { display: block; width: 100% }
  .table-wrap thead { display: none }
  .table-wrap tbody { padding: 10px }
  .table-wrap tr { border: 1px solid var(--line); border-radius: 14px;
    background: #fff; margin-bottom: 10px; overflow: hidden }
  .table-wrap tr:last-child { margin-bottom: 0 }
  .table-wrap tbody tr:hover { background: #fff }
  .table-wrap td { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 14px; border: 0;
    border-bottom: 1px solid var(--line-2); text-align: start; min-width: 0 }
  .table-wrap tr td:last-child { border-bottom: 0 }
  .table-wrap td::before { content: attr(data-label); flex: none;
    color: var(--ink-3); font-size: 11.5px; font-weight: 600 }
  /* خليّةٌ بلا عنوان — زرُّ الفعل — تملأ سطرها وحدها */
  .table-wrap td[data-label='']::before { content: none }
  .table-wrap td[data-label=''] { justify-content: stretch }
  .table-wrap td[data-label=''] .btn { width: 100% }
  /* صفُّ «لا بيانات» ليس بطاقة */
  .table-wrap td.empty { display: block; text-align: center; padding: 30px 16px }
  .table-wrap td.empty::before { content: none }
  .bar-row { grid-template-columns: 1fr; gap: 4px }
  .bar-row .t-main { white-space: normal }
}

/* ── شاشة الميدان ────────────────────────────────────────────────
   عريضة الأهداف عمداً: تُستعمل بيدٍ واحدة، تحت الشمس، وبقفّاز
   أحياناً. أي هدف أصغر من 44px يعني ضغطةً خاطئة تُسجَّل حقيقةً
   تشغيلية — والتراجع عنها أغلى من كبر الزرّ. */
.field-order { background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); margin-bottom: 14px; overflow: hidden }
.field-order__head { padding: 12px 14px; border-bottom: 1px solid var(--line-2);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.field-order__ref { font-weight: 700; font-variant-numeric: tabular-nums; unicode-bidi: plaintext }
.field-order__sub { font-size: 12px; color: var(--ink-3) }
.field-step { padding: 11px 14px; border-bottom: 1px solid var(--line-2);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.field-step:last-child { border-bottom: 0 }
.field-step[data-done='1'] { background: var(--ok-soft) }
.field-step__name { flex: 1; min-width: 120px; font-weight: 600; font-size: 14px }
.field-step .inp { min-height: 44px; width: auto; max-width: 130px }
.field-step .btn { min-height: 44px; padding-inline: 16px }
.field-note { flex-basis: 100%; font-size: 12.5px; margin-top: 6px; padding: 6px 9px;
  border-radius: var(--r-sm) }
.field-note[data-kind='ok'] { background: var(--ok-soft); color: #076b07 }
.field-note[data-kind='queued'] { background: var(--warn-soft); color: #8a5f00 }
.field-note[data-kind='conflict'],
.field-note[data-kind='error'] { background: var(--crit-soft); color: #961f1f }

/* ══════════════════════════════════════════════════════════════════
   شاشة الدخول
   ══════════════════════════════════════════════════════════════════
   لوحان: تعريفٌ موجز ونموذج. وعلى الهاتف يُطوى التعريف فيبقى
   النموذج وحده — السائق يعرف نظامه ولا يقرأ تعريفاً وهو واقف. */
/*
   خلفيةُ الصفحة أغمقُ من لوح التعريف عمداً. كانتا بلونٍ واحد،
   فذاب اللوحُ الداكن في الصفحة وبدت الشاشةُ نصفَ بطاقة: بياضٌ
   يطفو بلا حدّ من جهته الأخرى. الفرقُ بين طبقتين هو ما يجعل
   البطاقة بطاقة.
*/
body.signin{min-height:100vh;background:#080E13;display:grid;place-items:center;padding:20px}
body.signin::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(14,116,144,.22) 0%,transparent 70%)}
.signin__wrap{position:relative;width:100%;max-width:1000px;display:grid;grid-template-columns:1.05fr 1fr;
  background:var(--card);border-radius:24px;overflow:hidden;box-shadow:var(--sh-lg);
  border:1px solid rgba(255,255,255,.07)}
.signin__aside{background:linear-gradient(160deg,var(--brand-2) 0%,var(--brand-3) 100%);
  color:#dbe3ea;padding:40px 36px;display:flex;flex-direction:column;gap:22px}
.signin__brand{display:flex;align-items:center;gap:12px}
.signin__mark{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#0B5D74);color:#fff}
.signin__logo{height:44px;width:auto;max-width:150px;object-fit:contain;flex:none}
.signin__brand b{display:block;color:#fff;font-size:16px;line-height:1.3}
.signin__brand small{display:block;color:#8fa3b2;font-size:12px}
.signin__tagline{font-size:14.5px;line-height:1.75;color:#c3cdd6}
.signin__points{list-style:none;display:grid;gap:12px}
.signin__points li{position:relative;padding-inline-start:20px;font-size:13px;line-height:1.7;color:#a9b6c2}
.signin__points li::before{content:"";position:absolute;inset-inline-start:0;top:10px;width:7px;height:7px;
  border-radius:99px;background:var(--accent-2)}
.signin__panel{padding:40px 36px;display:flex;flex-direction:column;gap:18px}
.signin__locales{display:flex;gap:6px;align-self:flex-end}
.signin__locales a{padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:600;
  color:var(--ink-3);border:1px solid var(--line)}
.signin__locales a:hover{background:var(--bg);color:var(--ink)}
.signin__locales a.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.signin__title{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-bottom:2px}
.signin__alert{margin-bottom:2px}
.signin__form .field{margin-bottom:16px}
.signin__form label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.signin__form .inp{padding:11px 13px;font-size:14.5px}
.signin__remember{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);
  margin-bottom:18px;cursor:pointer}
.signin__remember input{width:17px;height:17px;flex:none}
.signin__foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-4)}
.signin__foot .credit{color:var(--accent);font-weight:500}
.signin__foot .credit b{font-weight:700}
@media (max-width:820px){
  body.signin{padding:0;place-items:stretch}
  .signin__wrap{grid-template-columns:1fr;max-width:none;border-radius:0;min-height:100vh;
    align-content:start;box-shadow:none}
  .signin__aside{padding:24px 22px;gap:14px}
  .signin__points{display:none}
  .signin__panel{padding:26px 22px 40px}
}

/* ══════════════════════════════════════════════════════════════════
   حقل الصور — الالتقاط من الكاميرا مباشرةً
   ══════════════════════════════════════════════════════════════════
   الزرّ لوحُ التقاطٍ كبير لا زرُّ ملفٍّ صغير. والسبب ميداني بحت:
   من يستعمله واقفٌ عند مركبةٍ في الشمس، بيدٍ واحدة، وربما بقفّاز.
   وزرُّ `<input type=file>` الافتراضي هدفٌ بعرض ١٢٠ بكسل وارتفاع
   ٢٤ — يُخطئه الإبهام مرّتين من ثلاث، فيُترك البند فارغاً.

   والمعيار المعروف: هدفُ اللمس لا يقلّ عن ٤٤ بكسلاً في كل اتجاه. */
.shot-field{border:1px dashed var(--line-2);border-radius:14px;padding:14px;background:var(--surface-2)}
.shot-field.is-filled{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.shot-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  font-size:14.5px;font-weight:600;color:var(--ink-2);padding:12px}
.shot-btn:hover{border-color:var(--accent);color:var(--accent)}
.shot-btn svg{width:22px;height:22px;flex:none}
/* الحقل الحقيقي مخفيّ ولا يُزال من الشجرة: `display:none` يُخرجه من
   ترتيب التبويب ومن قارئ الشاشة، فيصير الحقل غير موجودٍ لمن يتنقّل
   بلوحة المفاتيح — والشاشة نفسها تُستعمل من مكتبٍ لا من هاتفٍ فقط. */
.shot-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.shot{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-count{font-size:12px;color:var(--ink-3);margin-top:8px}

/* شبكة الأدلّة في سجلّ الفحص */
.evidence{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.evidence a{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.evidence img{width:100%;height:100%;object-fit:cover;display:block}
.evidence-none{font-size:13px;color:var(--crit)}

/* نماذج الخطوات في شاشة السائق: صفٌّ واحد للحقول القصيرة، وسطرٌ
   كامل لحقل الصور — لأن معاينة أربع صور لا تجلس بجانب زرّ. */
.step-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.step-form--photo{width:100%}
.step-form--photo .btn-p{width:100%;min-height:48px}

/* ══════════════════════════════════════════════════════════════════
   لوحة التوقيع
   ══════════════════════════════════════════════════════════════════
   `touch-action:none` ليس تحسيناً: بدونه تُفسَّر أوّل حركةِ إصبعٍ على
   اللوحة تمريراً للصفحة، فينزلق النموذج تحت يد العميل ولا يُرسَم خط.
   والارتفاع ثابتٌ بالبكسل لا بالنسبة، لأن نسبةً من ارتفاع النافذة
   تتغيّر حين تُفتَح لوحة المفاتيح فتُعاد تهيئة اللوحة وسط التوقيع. */
.sign-pad{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--card)}
.sign-pad.is-signed{border-color:var(--ok)}
.sign-canvas{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair;background:#fff}
.sign-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sign-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line);background:var(--surface-2)}
.sign-hint{font-size:12.5px;color:var(--ink-3)}

/* نصّ الإقرار — يُحفظ حرفياً، فيُعرض كما يُحفظ */
.statement{border-inline-start:3px solid var(--accent);background:var(--surface-2);
  padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.sign-shot{width:100%;max-width:360px;border:1px solid var(--line);border-radius:12px;background:#fff;display:block}