/* منسوخ حرفيا من FleetOps css/app.css (الأسطر 1-735): نفس نظام التصميم لتسهيل الدمج لاحقا. لا تعدل هنا، أضف في wm.css */
/* ============================================================================
   FleetOps، نظام التصميم
   الاتجاه «المؤسسي الفاتح»: قائمة جانبية ثابتة، مؤشرات في الأعلى، ثم جداول كثيفة.
   الخط: Cairo للنص والعناوين، وIBM Plex Mono للمعرفات التقنية وأعمدة الأرقام.
   كل الخصائص منطقية (inline-start/end) لأن الواجهة RTL بالكامل.
   ========================================================================== */

:root {
  /* الأرضيات، رمادي بارد منحاز نحو الأزرق: أرضية الأنظمة المؤسسية، لا رمادي محايد */
  --bg:            #F2F4F8;
  --surface:       #FFFFFF;
  --surface-2:     #F8FAFC;
  --surface-3:     #EDF1F6;
  --border:        #DFE4EC;
  --border-soft:   #EAEEF4;
  --border-strong: #C7D0DE;

  --text:          #182031;
  --text-2:        #65718A;
  --text-3:        #96A0B2;

  /* لون التمييز: أخضر مزرق، للأفعال الأساسية والحالة النشطة فقط، لا للحالات.
     هو نفسه لون وحدة تحكم مزود الخدمة بطلب المالك: واجهة واحدة لا هويتان. */
  --accent:        #0E7C6B;
  --accent-hover:  #0B6558;
  --accent-press:  #084C43;
  --accent-soft:   #E2F2EF;
  --accent-line:   #B6DCD5;

  /* الشريط الجانبي الداكن، نفس قيم وحدة المشغل حرفا بحرف. */
  --nav-bg:        #16202E;
  --nav-bg-2:      #1E2B3C;
  --nav-text:      #C6D2E1;
  --nav-text-2:    #8496AC;
  --nav-border:    #26344A;

  /* ألوان دلالية للنص والشارات، مستقلة عن لون التمييز */
  --good:          #1F7A57;
  --good-soft:     #E3F1EB;
  --warn:          #92650C;
  --warn-soft:     #F8EEDA;
  --crit:          #A93726;
  --crit-soft:     #F9E4E0;
  --info:          #0E7C6B;
  --info-soft:     #E2F2EF;

  /* ألوان المخططات، متحقق منها بمدقق اللوحة على أرضية بيضاء:
     نطاق الإضاءة ✓ · فصل عمى الألوان ✓ · أرضية الرؤية الطبيعية ✓
     استثناءان مقصودان: الرمادي محايد بطبيعته (حالة «متوقفة»)، والتباين دون 3:1
     لشريحتي الكهرماني والرمادي معوض بالتسميات والقيم وجدول مكافئ. */
  --c-good:        #22C55E;
  --c-warn:        #FF7A00;
  --c-idle:        #9AA7B5;
  --c-crit:        #C2334D;
  --c-series:      #2A4E9B;   /* السلسلة المفردة: أعمدة المسافة والخطوط الصغيرة */
  --c-grid:        #EAEEF4;

  /* لوحة الخريطة، فاتحة كبقية النظام في الاتجاه المؤسسي */
  --m-bg:          #EDF1F6;
  --m-panel:       #FFFFFF;
  --m-panel-2:     #F8FAFC;
  --m-edge:        #DFE4EC;
  --m-text:        #182031;
  --m-text-2:      #65718A;
  --m-text-3:      #96A0B2;

  --radius:        10px;
  --radius-sm:     8px;
  --radius-lg:     14px;
  --shadow-xs:     0 1px 2px rgba(24,32,49,.05);
  --shadow-sm:     0 1px 3px rgba(24,32,49,.07), 0 1px 1px rgba(24,32,49,.04);
  --shadow:        0 6px 18px rgba(24,32,49,.09);
  --shadow-lg:     0 20px 52px rgba(24,32,49,.22);

  --nav-w:         240px;
  /* شريط الأيقونات: ٧٢ بكسل، نسبة النظام المرجعي (١٠٠ من ٣١٢) على عرضنا. */
  --nav-w-collapsed: 72px;
  --top-h:         58px;

  --font:          "Cairo", "Segoe UI", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, monospace;
}

/* ─────────────────────────────────────────────── الأساس */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; margin: 0; line-height: 1.4; text-wrap: balance; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

[hidden] { display: none !important; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #CBD3E0; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #B2BDCE; background-clip: content-box; border: 3px solid transparent; }

/* المعرفات التقنية (اللوحات، IMEI، البريد، الإحداثيات) تبقى LTR */
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); font-size: .9em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }
.right { margin-inline-start: auto; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px } .gap-8 { gap: 8px } .gap-12 { gap: 12px } .gap-16 { gap: 16px } .gap-20 { gap: 20px }
.mt-8 { margin-top: 8px } .mt-16 { margin-top: 16px } .mt-24 { margin-top: 24px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─────────────────────────────────────────────── الهيكل */

.shell { display: flex; height: 100vh; overflow: hidden; }

.nav {
  width: var(--nav-w);
  flex: none;
  background: var(--nav-bg);
  border-inline-end: 1px solid var(--nav-border);
  display: flex;
  flex-direction: column;
  /* بلا order: ترتيب DOM في RTL يضع القائمة على اليمين، جهة البداية */
}

.nav-brand {
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 11px;
  padding-inline: 20px;
  border-bottom: 1px solid var(--nav-border);
  flex: none;
}
.nav-brand .mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.nav-brand b { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.nav-brand .env { margin-inline-start: auto; font-size: 10.5px; color: var(--nav-text-2); }

.nav-collapse {
  margin-inline-start: auto; flex: none;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: none; color: var(--nav-text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-collapse:hover { background: var(--nav-bg-2); color: #fff; }

/* ───────────── القائمة المطوية: شريط أيقونات كالنظام المرجعي ─────────────
   الأيقونة تبقى والتسمية تخفى، فالقائمة تقرأ بالشكل لا بالنص. وعنوان كل
   صف في title، فمن نسي الأيقونة يقف عليها. */
.nav--collapsed { width: var(--nav-w-collapsed); }
/* المطوية تقلب الترتيب: الزر أولا ثم الشعار تحته، كما في النظام المرجعي.
   و‎column-reverse‎ لا column: ترتيب DOM شعار ثم زر، والمطلوب عكسه. */
.nav--collapsed .nav-brand {
  height: auto; padding: 12px 0; gap: 10px;
  flex-direction: column-reverse; justify-content: center;
}
.nav--collapsed .nav-brand b,
.nav--collapsed .nav-brand .env,
.nav--collapsed .nav-sec,
.nav--collapsed .nav-link span:not(.count):not(.nav-count),
.nav--collapsed .nav-link .count,
.nav--collapsed .nav-user .who { display: none; }

.nav--collapsed .nav-collapse { margin: 0; width: 32px; height: 32px; }
.nav--collapsed .nav-collapse svg { transform: scaleX(-1); }

.nav--collapsed .nav-link { justify-content: center; padding-inline: 0; gap: 0; }
.nav--collapsed .nav-foot { padding: 12px 0; }
.nav--collapsed .nav-user { justify-content: center; gap: 0; }
.nav--collapsed .nav-user .av { width: 30px; height: 30px; font-size: 13px; }
.nav--collapsed #logout { display: none; }

.nav { position: relative; transition: width .16s ease; }

/* بلا شريط تمرير ظاهر: في RTL يقع على حافة القائمة الملاصقة للمحتوى، فيقرأ
   فراغا فاتحا يفصل القائمة عما بعدها، وهو أوضح ما يكون في الشريط المطوي.
   والتمرير باق بالعجلة واللمس، والقائمة صفوف معدودة لا مستند يتاه فيه. */
.nav-scroll { flex: 1; overflow-y: auto; padding: 6px 0 18px; scrollbar-width: none; }
.nav-scroll::-webkit-scrollbar { width: 0; height: 0; }
.nav-sec {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--nav-text-2);
  padding: 16px 20px 6px;
}
/* صفوف كاملة العرض لا كبسولات: الشكل المؤسسي المألوف، والشريط يحدد النشط */
.nav-link {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding-inline: 20px;
  color: var(--nav-text);
  font-size: 13.5px; font-weight: 500;
  border: 0; background: none; width: 100%; text-align: start;
  cursor: pointer; position: relative;
  border-inline-end: 3px solid transparent;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--nav-bg-2); color: #fff; text-decoration: none; }
.nav-link svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.nav-link.on {
  color: #fff; font-weight: 700;
  background: var(--nav-bg-2);
  border-inline-end-color: var(--accent);
}
.nav-link .count { margin-inline-start: auto; font-family: var(--font-mono); font-size: 11px; color: var(--nav-text-2); }

/* شارة غير المقروء على «التنبيهات»، الجرس نزل إلى القائمة وعداده معه. */
.nav-link .nav-count {
  margin-inline-start: auto; flex: none;
  min-width: 18px; height: 18px; padding-inline: 5px;
  border-radius: 9px; background: var(--crit); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* والقائمة مطوية تخفي التسمية لا الرقم: يلتصق بالأيقونة شارة صغيرة. */
.nav--collapsed .nav-link .nav-count {
  position: absolute; top: 2px; inset-inline-end: 10px; margin: 0;
  min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; padding-inline: 3px;
}
.nav-link.on svg { color: var(--accent); opacity: 1; }

.nav-foot { border-top: 1px solid var(--nav-border); padding: 12px 14px; flex: none; }
.nav-user { display: flex; align-items: center; gap: 10px; }
.nav-user .av {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(14, 124, 107, .2); color: #7FD8C9;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex: none;
}
.nav-user .who { min-width: 0; flex: 1; }
.nav-user .who b { color: #fff; display: block; font-size: 12.5px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user .who span { display: block; font-size: 11px; color: var(--nav-text-2); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* <c>relative</c> لأجل محرر المهمة: يتموضع داخل المحتوى لا فوق القائمة. */
.main { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--top-h); flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding-inline: 24px;
}
.topbar h1 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.topbar .sub { color: var(--text-3); font-size: 12px; line-height: 1.3; }
/* مسار التنقل: يقول للمستخدم أين هو داخل النظام لا اسم الشاشة وحده */
.crumb { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.crumb b { color: var(--text); font-weight: 700; font-size: 15px; }
.crumb .sep { color: var(--border-strong); }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.view { flex: 1; overflow: auto; }
.view.pad { padding: 15px 18px 26px; }
.view.flush { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.view-inner { display: flex; flex-direction: column; gap: 12px; }

/* عنوان قسم داخل الصفحة */
.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.page-head h2 { font-size: 18px; font-weight: 700; }
.page-head p { margin: 0; color: var(--text-2); font-size: 12.5px; }

/* ─────────────────────────────────────────────── أزرار */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding-inline: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover { background: var(--surface-2); border-color: #B2BDCE; }
.btn:active { box-shadow: none; transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }
.btn-danger { color: #fff; background: var(--crit); border-color: var(--crit); }
.btn-danger:hover { background: #8E2E1F; border-color: #8E2E1F; }
.btn-ghost { background: none; border-color: transparent; color: var(--text-2); box-shadow: none; font-weight: 500; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-sm { height: 29px; padding-inline: 11px; font-size: 12px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 29px; }

/* ─────────────────────────────────────────────── بطاقات */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
  min-width: 0;
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border-soft);
  flex: none; min-height: 40px;
}
.card-head h3 { font-size: 14px; font-weight: 700; }

/*
    مساحة الأدوات تأخذ ما بقي من الرأس.

    <para>كانت <c>flex: 0 1 auto</c>، فيحسب عرضها على محتواها ثم تضغط ،
    وشريط الأدوات بداخلها يلتف إلى سطرين وثلاثة وفي الرأس فراغ واسع لا
    يستعمل. والعنوان قصير دائما، فالأولى أن يأخذ قدره ويترك الباقي
    للأدوات.</para>
*/
.card-head .right { flex: 1 1 420px; justify-content: flex-end; min-width: 0; }
.card-head h3 { flex: none; }

/* ورأس لا يتسع لعنوانه وشرحه وأدواته معا يكسر سطرا واحدا: تنزل الأدوات
   كاملة إلى سطرها وتأخذ عرضه، بدل أن تتوزع ثلاثا واثنتين في سطرين. */
.card-head { flex-wrap: wrap; }

/* والشريط نفسه يمتد على ما أعطي: ب«auto» يقاس على محتواه فيلتف وهو في
   فراغ واسع. ويبقى <c>wrap</c> له للشاشة الضيقة وحدها. */
.card-head .toolbar { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.card-head .hint { font-size: 11.5px; color: var(--text-3); font-weight: 400; line-height: 1.4; }
.card-body { padding: 12px 13px; }
.card-body.tight { padding: 0; }

/* بطاقات المؤشرات */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px 8px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.stat .l { font-size: 12px; color: var(--text-2); font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat .v {
  font-size: 21px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat .v small { font-size: 13px; color: var(--text-2); font-weight: 500; letter-spacing: 0; }
.stat .d { font-size: 11.5px; color: var(--text-3); font-weight: 500; }

/* شارة اتجاه: السهم يحمل المعنى، لا اللون وحده */
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend.up { color: var(--good); }
.trend.down { color: var(--crit); }
.trend.flat { color: var(--text-3); }

/* ─────────────────────────────────────────────── جداول */

.table-wrap { overflow: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  text-align: start; font-weight: 600; font-size: 11px;
  color: var(--text-3);
  padding: 7px 11px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.grid th.sortable { cursor: pointer; user-select: none; }
table.grid th.sortable:hover { color: var(--text); }
table.grid th .dir { color: var(--accent); }
table.grid td { padding: 5px 11px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover td { background: var(--surface-2); }
table.grid tbody tr.clickable { cursor: pointer; }
table.grid tbody tr.on td { background: var(--accent-soft); }
table.grid td.actions { white-space: nowrap; text-align: end; }
table.grid .empty { text-align: center; color: var(--text-3); padding: 44px 14px; }
table.grid b { font-weight: 600; }

.pager { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-2); }

/* ─────────────────────────────────────────────── شارات وحالات */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-2);
  white-space: nowrap; line-height: 1.6;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 1px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}

.stars { color: var(--c-warn); letter-spacing: 1px; font-size: 13px; }
.stars .off { color: var(--border-strong); }

/* شريط شدة، الحالة مشفرة في الطول لا في اللون وحده */
.meter { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.meter i { display: block; height: 100%; background: var(--c-series); border-radius: 4px; transition: width .3s; }
.meter i.good { background: var(--c-good); }
.meter i.warn { background: var(--c-warn); }
.meter i.crit { background: var(--c-crit); }

/* ─────────────────────────────────────────────── مخططات */

.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--c-grid); stroke-width: 1; }
.chart .axis-text { fill: var(--text-3); font-size: 10px; font-family: var(--font); unicode-bidi: isolate; }
.chart .bar, .chart .ring-seg { transition: opacity .12s; }
.chart .bar:hover, .chart .ring-seg:hover { opacity: .8; }

.spark { display: block; width: 100%; height: 34px; margin-top: 6px; overflow: visible; }

.legend { display: flex; flex-wrap: wrap; gap: 7px 18px; }
.legend .li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.legend .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend .val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }

.chart-tip {
  position: fixed; z-index: 1050; pointer-events: none;
  background: #182031; color: #fff;
  border-radius: 7px; padding: 7px 10px;
  font-size: 11.5px; line-height: 1.6;
  box-shadow: var(--shadow);
  max-width: 230px;
}
.chart-tip b { display: block; font-weight: 600; }
.chart-tip .v { font-variant-numeric: tabular-nums; color: #A8C4F0; }

.hero-num { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-num small { font-size: 15px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }

/* ─────────────────────────────────────────────── نماذج */

.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field > label { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.field > label .req { color: var(--crit); }
.field .hint { font-size: 11px; color: var(--text-3); line-height: 1.45; }

.input, .select, .textarea {
  width: 100%;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12.5px;
  transition: border-color .12s, box-shadow .12s;
}
.input:hover, .select:hover, .textarea:hover { border-color: #B2BDCE; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.textarea { min-height: 46px; resize: vertical; line-height: 1.5; padding-block: 4px; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%2363615A' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 8px center; background-size: 10px;
  padding-inline: 24px 9px;
}
.input.err, .select.err { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-soft); }
.input[readonly] { background: var(--surface-2); color: var(--text-2); }
.input[type="date"], .input[type="datetime-local"] { font-family: var(--font-mono); font-size: 11.5px; }

.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.check input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; flex: none; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.form-sec {
  grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-3); border-top: 1px solid var(--border-soft);
  padding-top: 10px; margin-top: 2px;
}
.form-sec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.form-err { background: var(--crit-soft); color: var(--crit); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; font-weight: 500; }

/* شريط الأدوات فوق الجداول */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/*
    المنسدلة تتسع لأطول خيار فيها.

    <para>وخياراتها أسماء مركبات بلوحاتها، فتبلغ أربعمئة بكسل وأكثر، ثلاث
    منها لا تسع سطرا واحدا، فينكسر شريط الأدوات إلى ثلاثة أسطر ويصير
    رأس البطاقة ثلاثة أضعاف ارتفاعه، والعنوان وحيد في فراغ.</para>

    <para>والسقف لا يخفي شيئا: المنسدلة تقص نصها بنفسها، والقائمة
    تفتح بعرضها الكامل عند الضغط.</para>
*/
.toolbar .select { max-width: 210px; }
.toolbar .search .input { min-width: 150px; }
/*
    قواعد البحث عامة لا محصورة بشريط الأدوات: حصرها جعل الأيقونة تطفو فوق
    الخانة في كل شاشة لا <c>.toolbar</c> فيها.
*/
.search { position: relative; display: flex; align-items: center; }
.search .input { padding-inline-start: 30px; min-width: 190px; width: 100%; }
.search > span {
  position: absolute; inset-inline-start: 9px; display: flex; pointer-events: none;
}
.search svg { width: 14px; height: 14px; stroke: var(--text-3); fill: none; stroke-width: 1.9; }

/* ─────────────────────────────────────────────── نوافذ */

.modal-back {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(24,32,49,.42);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fade .14s ease-out;
}
@keyframes fade { from { opacity: 0 } }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(660px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  animation: rise .17s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) } }
.modal.wide { width: min(900px, 100%); }
.modal.narrow { width: min(440px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); flex: none; }
.modal-head h3 { font-size: 15.5px; font-weight: 700; }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot { display: flex; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--border-soft); flex: none; background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* لوحة جانبية منزلقة */
.drawer-back { position: fixed; inset: 0; z-index: 950; background: rgba(24,32,49,.30); animation: fade .14s ease-out; }
.drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 960;
  width: min(580px, 100%);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: slide .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes slide { from { transform: translateX(-28px); opacity: .3 } }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--border); flex: none; }
.drawer-head h3 { font-size: 15px; font-weight: 700; }
.drawer-body { flex: 1; overflow: auto; padding: 20px 20px 30px; }

/* ─────────────────────────────────────────────── تبويبات */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab {
  border: 0; background: none; cursor: pointer;
  padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }

.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-xs); }
.seg button { border: 0; background: none; cursor: pointer; padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.seg button:hover { background: var(--surface-2); color: var(--text); }
.seg button + button { border-inline-start: 1px solid var(--border); }
.seg button.on { background: var(--accent); color: #fff; font-weight: 600; }

/* ─────────────────────────────────────────────── قوائم التعريف */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13px; align-items: baseline; }
.kv dt { color: var(--text-2); font-size: 12px; font-weight: 500; }
.kv dd { margin: 0; font-weight: 500; }

.timeline { display: flex; flex-direction: column; }
.timeline .ev { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.timeline .ev:first-child { border-top: 0; }
.timeline .ev .tm { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); padding-top: 2px; flex: none; }
.timeline .ev .bd b { display: block; font-size: 12.5px; font-weight: 600; }
.timeline .ev .bd span { font-size: 12px; color: var(--text-2); }

/* قائمة مضغوطة داخل بطاقة (الأحداث، الصيانة المستحقة) */
.feed { display: flex; flex-direction: column; }
.feed .row-item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 16px; border-top: 1px solid var(--border-soft); }
.feed .row-item:first-child { border-top: 0; }
.feed .row-item:hover { background: var(--surface-2); }
.feed .row-item .bd { flex: 1; min-width: 0; }
.feed .row-item .bd b { display: block; font-size: 12.5px; font-weight: 600; }
.feed .row-item .bd span { font-size: 11.5px; color: var(--text-2); }
.feed .row-item .tm { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; padding-top: 3px; }

/* ─────────────────────────────────────────────── تنبيهات عابرة */

/* فوق كل شيء: الرسالة التي لا ترى لم ترسل، وكانت تختفي خلف محرر المهمة. */
.toasts { position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 3000; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--surface); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 11px 15px; font-size: 12.5px; font-weight: 500; max-width: 380px;
  animation: rise .16s ease-out;
}
.toast.good { border-inline-start-color: var(--good); }
.toast.crit { border-inline-start-color: var(--crit); }

/* ─────────────────────────────────────────────── فارغ وتحميل */

.empty-state { text-align: center; padding: 52px 20px; color: var(--text-2); }
.empty-state b { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 4px; font-weight: 700; }
.empty-state span { font-size: 12.5px; }

.skeleton { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 6px; height: 13px; }
@keyframes shimmer { to { background-position: -200% 0 } }
.skeleton-rows { display: flex; flex-direction: column; gap: 13px; padding: 18px; }
.skeleton-rows .skeleton:nth-child(3n) { width: 62%; }
.skeleton-rows .skeleton:nth-child(3n+2) { width: 84%; }

.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ─────────────────────────────────────────────── تسجيل الدخول */

.login-page {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
}
.login-page::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(820px 520px at 78% 12%, rgba(42,78,155,.10), transparent 62%),
    radial-gradient(680px 460px at 10% 92%, rgba(42,78,155,.06), transparent 64%),
    repeating-linear-gradient(115deg, rgba(24,32,49,.022) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(25deg, rgba(24,32,49,.022) 0 1px, transparent 1px 136px);
}
.login-card {
  position: relative;
  width: min(410px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 32px 26px;
  box-shadow: var(--shadow-lg);
}
.login-card .brand { display: flex; align-items: center; gap: 12px; }
.login-card .brand .mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
/* المربع هنا مقاسه ثابت ٤٠px، وشعار مرفوع أعرض منه كان يخرج من إطاره ويركب
   على الاسم. مع الصورة يتمدد الإطار بمقاسها، والنص يلتف تحتها لا بجانبها:
   شعار عريض لا يترك لسطرين عربيين مكانا في بطاقة بعرض ٣٦٠px. */
.login-card .brand .mark.mark-img { width: auto; height: auto; max-width: 100%; border-radius: 0; }
.login-card .brand > div { min-width: 0; }
.login-card .brand.lockup { flex-direction: column; align-items: flex-start; gap: 8px; }
.login-card .brand.lockup .mark.mark-img img { max-height: 40px; max-width: 100%; }

.login-card .brand b { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.login-card .brand span { font-size: 12.5px; color: var(--text-2); display: block; font-weight: 400; }
.login-card form { display: flex; flex-direction: column; gap: 15px; margin-top: 26px; }
.login-card .btn-primary { height: 40px; margin-top: 6px; font-size: 13.5px; }
.login-card .foot { margin-top: 20px; font-size: 11.5px; color: var(--text-3); text-align: center; }

/* ─────────────────────────────────────────────── الطباعة */

@media print {
  /* شريط تبويبات التقرير وأدوات الجدول أزرار على الورق لا معنى لها، والمطبوع
     هو التبويب المعروض وحده. */
  .nav, .topbar-actions, .btn, .pager, .toasts,
  .rp-tabs, .table-tools { display: none !important; }
  .shell, .view { height: auto; overflow: visible; }
  body { background: #fff; font-size: 11pt; }
  .card, .stat { break-inside: avoid; border-color: #ccc; box-shadow: none; }
  table.grid th { background: #f2f4f8 !important; }
}

/* شبكتان تتقلصان إلى عمود واحد على الشاشات الضيقة */
.split-side { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 12px; align-items: stretch; }
.split-main { display: grid; grid-template-columns: 1fr minmax(280px, 380px); gap: 12px; align-items: start; }
@media (max-width: 1000px) {
  .split-side, .split-main { grid-template-columns: 1fr; }
}

/* شاشة تخفي الشريط العلوي وتترك الخريطة تملأ الارتفاع كله */
.main.chrome-off .topbar { display: none; }

/* ترتيب الطبقات، رقم واحد يحكم من يعلو من:
   الخريطة وأدواتها 200–620 (لوحات Leaflet نفسها تصل إلى 700)،
   ثم الحوارات فوقها جميعا: لوحة جانبية 950/960، نافذة 1000، تلميح مخطط 1050، تنبيه عابر 1100.
   بدون هذا الترتيب كانت لوحة الأجسام تغطي نافذة تعديل المنطقة فيبدو النظام معطلا. */

/* قائمة اختيار ببحث، بديل القائمة المتعددة التي تحتاج Ctrl */
.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist-head { display: flex; gap: 6px; }