/* ============================================================================
   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:        #0F8C64;
  --c-warn:        #CF8B12;
  --c-idle:        #9AA7B5;
  --c-crit:        #CB3A2B;
  --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; }

.checklist-items {
  max-height: 168px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.checklist-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 11px; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.checklist-row:last-child { border-bottom: 0; }
.checklist-row:hover { background: var(--surface-2); }
.checklist-row input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; }
.checklist-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 12px; }

/* قائمة بأعمدة متجاورة: ثلاث عشرة خريطة في عمود واحد تعني تمريرا لرؤية ما اخترت،
   وثلاثة أعمدة تظهرها كلها دفعة. العدد يتبع العرض المتاح لا رقما ثابتا. */
.checklist-grid .checklist-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  max-height: 320px;
}
.checklist-grid .checklist-row { border-bottom: 0; }
.checklist-grid .checklist-empty { grid-column: 1 / -1; }

/* نافذة مضغوطة: نموذج قصير بعمود واحد */
.modal.compact { width: min(520px, 100%); }
.modal.compact .form-grid { grid-template-columns: 1fr; gap: 12px; }
.modal.compact .modal-body { padding: 16px 18px; }
.modal.compact .form-sec { padding-top: 12px; margin-top: 2px; }

/* ═════════════ قطع الشريط العلوي: اللغة والجرس ═════════════ */

.chrome-tools { display: flex; align-items: center; gap: 6px; }

.chip-btn {
  height: 34px; min-width: 34px; padding-inline: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2);
  cursor: pointer; position: relative;
}
.chip-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.chip-btn .flag { font-size: 15px; line-height: 1; }
.chip-btn .code { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.chip-btn svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip-btn.has-unread { color: var(--crit); border-color: var(--crit-soft); background: var(--crit-soft); }

.bell-count {
  position: absolute; top: -6px; inset-inline-end: -6px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  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;
}

.pop-wrap { position: relative; }
.pop-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 900;
  min-width: 230px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
  animation: rise .14s ease-out;
}
.pop-menu.wide { min-width: 330px; }

.pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 13px; border: 0; background: none; cursor: pointer;
  font-size: 13px; color: var(--text); text-align: start;
}
.pop-item:hover { background: var(--surface-2); }
.pop-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pop-item .flag { font-size: 16px; }

.pop-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); }
.pop-head b { font-size: 13.5px; }
.pop-link { margin-inline-start: auto; border: 0; background: none; color: var(--accent); font-size: 12px; cursor: pointer; }
.pop-link:hover { text-decoration: underline; }

.pop-list { max-height: 340px; overflow-y: auto; }
.pop-alert {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border-soft);
  background: none; cursor: pointer; text-align: start;
}
.pop-alert:hover { background: var(--surface-2); }
.pop-alert.read { opacity: .6; }
.pop-alert .sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
.pop-alert .bd { min-width: 0; }
.pop-alert .bd b { display: block; font-size: 12.5px; font-weight: 600; }
.pop-alert .bd span { font-size: 11.5px; color: var(--text-2); }
.pop-empty { padding: 22px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.pop-foot {
  width: 100%; padding: 10px; border: 0; background: var(--surface-2);
  color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pop-foot:hover { background: var(--surface-3); }

/* ─────────────────────────────── الاشتراك والخطط */

.usage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }

.banner-warn {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--warn);
  font-size: 12.5px; font-weight: 500;
  border-inline-start: 3px solid var(--warn);
}

.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }

.plan-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.plan-tile .plan-price { font-weight: 700; color: var(--accent); }
.plan-list { margin: 0; padding-inline-start: 16px; font-size: 12px; color: var(--text-2); }
.plan-list li { margin-block: 2px; }
.plan-tile .btn { margin-block-start: auto; }

/* بطاقات الخطط في صفحة التسجيل: نفس البلاطة داخل بطاقة الدخول، قابلة للاختيار. */
.signup-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

.signup-plan {
  display: flex; flex-direction: column; gap: 3px; padding: 10px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; text-align: start; font: inherit;
}
.signup-plan:hover { border-color: var(--accent); }
.signup-plan.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--surface); }
.signup-plan b { font-size: 12.5px; }
.signup-plan span { font-size: 11.5px; color: var(--text-2); }

/* زر يبدو رابطا: لتبديل «دخول ⇄ حساب جديد» داخل البطاقة نفسها. */
.link-btn {
  display: block; width: 100%; margin-block-start: 14px;
  padding: 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: center;
}
.link-btn:hover { text-decoration: underline; }

.login-card .signup-form { display: flex; flex-direction: column; gap: 13px; margin-block-start: 22px; }
.login-card .signup-form .hint { margin-block-start: -8px; }
.login-card .signup-form .btn-primary { height: 40px; margin-block-start: 6px; font-size: 13.5px; }

/* ─────────────────────────────── مصفوفة الصلاحيات وسجل التدقيق */

.perm-grid th { white-space: nowrap; }
.perm-grid td { vertical-align: middle; }

.perm-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.perm-mark.on   { color: #fff; background: var(--good); border-color: var(--good); }
.perm-mark.part { color: var(--warn); background: var(--warn-soft); border-color: #E4CD97; }
.perm-na { color: var(--border-strong); }

.audit-change {
  display: block; max-width: 34ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px;
}

.audit-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.audit-diff .lbl {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--text-2); margin-block-end: 5px;
}
.audit-diff pre {
  margin: 0; padding: 10px 12px; font-size: 12px; line-height: 1.7;
  font-family: var(--font-mono); direction: ltr; text-align: start;
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); max-height: 240px; overflow-y: auto;
}
.audit-diff > div:first-child pre { border-inline-start: 3px solid var(--crit); }
.audit-diff > div:last-child  pre { border-inline-start: 3px solid var(--good); }

@media (max-width: 620px) { .audit-diff { grid-template-columns: 1fr; } }

/* ─────────────── أدوات الجدول: اختيار الأعمدة وترتيبها وتصديرها */
.table-shell { display: flex; flex-direction: column; }
.table-tools {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2); font-size: 12px;
}
.card-body.tight .table-tools { margin: 0; }
.table-tools .faint { font-size: 11.5px; }

.col-picker { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.col-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-bottom: 1px solid var(--border-soft);
}
.col-row:last-child { border-bottom: 0; }
.col-row:hover { background: var(--surface-2); }
.col-row .check { margin: 0; flex: 1; min-width: 0; }
.col-row .btn { min-width: 30px; }

/* ─────────────── دليل الاستخدام */
.manual-back { align-items: stretch; justify-content: center; padding: 26px; }
.manual {
  width: min(1080px, 100%); max-height: 100%;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.manual-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex: none;
}
.manual-head .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;
}
.manual-head b { display: block; font-size: 14.5px; }
.manual-head .faint { font-size: 11.5px; }

.manual-split { display: flex; min-height: 0; flex: 1; }
.manual-side {
  width: 262px; flex: none; border-inline-end: 1px solid var(--border);
  background: var(--surface-2); display: flex; flex-direction: column; min-height: 0;
}
.manual-search { padding: 10px; border-bottom: 1px solid var(--border-soft); flex: none; }

.manual-index { overflow-y: auto; padding: 6px 0 14px; }
.manual-sec {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-3); padding: 13px 16px 5px;
}
.manual-link {
  display: block; width: 100%; text-align: start; border: 0; background: none;
  padding: 6px 16px; font: inherit; font-size: 12.8px; color: var(--text-2);
  cursor: pointer; border-inline-end: 3px solid transparent;
}
.manual-link:hover { background: var(--surface-3); color: var(--text); }
.manual-link.on {
  color: var(--accent); font-weight: 700;
  background: var(--accent-soft); border-inline-end-color: var(--accent);
}
.manual-none { padding: 18px 16px; font-size: 12px; color: var(--text-3); }

.manual-body { flex: 1; overflow-y: auto; padding: 22px 28px 32px; min-width: 0; }
.manual-crumb { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.manual-body h2 { font-size: 20px; margin-bottom: 12px; }
.manual-body p { margin: 0 0 11px; max-width: 68ch; }
.manual-body ul { margin: 0 0 13px; padding-inline-start: 20px; max-width: 68ch; }
.manual-body li { margin-bottom: 6px; }

/* ─────────────── اسألني */
/* في الجهة المقابلة للقائمة: القائمة في بداية السطر، فالزر العائم في نهايته —
   وإلا جلس فوق بطاقة المستخدم أسفل الشريط الجانبي وغطاها. */
.ask-fab {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow); cursor: pointer; transition: background .14s, transform .14s;
}
.ask-fab:hover { background: var(--accent-hover); transform: translateY(-1px); }
.ask-fab svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ask-panel {
  position: fixed; inset-block-end: 80px; inset-inline-end: 22px; z-index: 60;
  width: min(400px, calc(100vw - 44px)); max-height: min(600px, calc(100vh - 120px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.ask-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft); flex: none;
}
.ask-head .mark {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.ask-head b { display: block; font-size: 13.5px; }
.ask-head .faint { font-size: 11px; }

.ask-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ask-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 12.8px; line-height: 1.75; }
.ask-msg p { margin: 0 0 7px; }
.ask-msg p:last-child { margin-bottom: 0; }
.ask-msg ul { margin: 0 0 7px; padding-inline-start: 18px; }
.ask-msg li { margin-bottom: 4px; }
.ask-msg.bot { background: var(--surface-3); border-start-start-radius: 4px; align-self: flex-start; }
.ask-msg.me { background: var(--accent); color: #fff; border-start-end-radius: 4px; align-self: flex-end; }
.ask-from { font-size: 10.5px; color: var(--text-3); margin-bottom: 6px; }
.ask-note {
  font-size: 11.5px; color: var(--warn); background: var(--warn-soft);
  padding: 8px 11px; border-radius: 9px;
}
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ask-chip {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.ask-chip:hover { border-color: var(--accent); color: var(--accent); }

.ask-form { display: flex; gap: 7px; padding: 11px 12px; border-top: 1px solid var(--border-soft); flex: none; }


@media (max-width: 720px) {
  .ask-fab-label { display: none; }
  .ask-fab { padding: 0; width: 46px; justify-content: center; }
  .manual-side { width: 190px; }
}

/* ─────────────── إعدادات المشغل */
.settings-effect {
  margin: 0; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.8;
  background: var(--warn-soft); color: var(--warn);
  border-inline-start: 3px solid var(--warn);
}
.settings-effect.live {
  background: var(--good-soft); color: var(--good); border-inline-start-color: var(--good);
}

/* ─────────────── شاشة اللغات: الخمس في سطر واحد وتحرر معا */
.lang-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.lang-chip {
  display: flex; align-items: center; gap: 9px; flex: 1 1 170px;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.lang-chip .flag { font-size: 19px; line-height: 1; flex: none; }
.lang-chip .bd { flex: 1; min-width: 0; }
.lang-chip .bd b { display: block; font-size: 12.5px; }
.lang-chip .bd .faint { display: block; font-size: 10.5px; }

/* خانة الترجمة داخل الجدول: مسطحة حتى لا يصير الجدول حقلا في حقل */
.i18n-cell {
  min-width: 140px;
  background: transparent; border-color: transparent;
}
.i18n-cell:hover { border-color: var(--border); background: var(--surface); }
.i18n-cell:focus { border-color: var(--accent); background: var(--surface); }
.i18n-cell.set { background: var(--accent-soft); border-color: var(--accent-line); }
.i18n-cell.dirty { background: var(--warn-soft); border-color: var(--warn); }
.i18n-cell::placeholder { color: var(--text-3); opacity: .85; }

/* ─────────────────────────────────────────────── هوية المشغل: الصور والسمات */

.brand-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.brand-slot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 11px 11px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 7px;
}
.brand-slot-head { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.brand-slot-head b { font-size: 12.5px; font-weight: 600; }

/* المربع الشطرنجي يظهر الشفافية: شعار بخلفية بيضاء يرى أنه ليس شفافا. */
.brand-preview {
  height: 82px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 7px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background-color: var(--surface-2, #f6f7f9);
  background-image:
    linear-gradient(45deg, rgba(24,32,49,.045) 25%, transparent 25% 75%, rgba(24,32,49,.045) 75%),
    linear-gradient(45deg, rgba(24,32,49,.045) 25%, transparent 25% 75%, rgba(24,32,49,.045) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.brand-preview.wide { height: 104px; }
.brand-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-empty { font-size: 11.5px; color: var(--text-3); }

.brand-spec { font-size: 11px; color: var(--text-3); line-height: 1.55; }
.brand-applied { font-size: 11.5px; color: var(--good, #16794f); line-height: 1.55; }
.brand-applied.pending { color: var(--warn, #a86b00); }
.brand-meta { font-size: 11px; min-height: 14px; }
.brand-meta .muted { direction: ltr; unicode-bidi: isolate; }

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
}
.theme-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px;
  display: flex; flex-direction: column; gap: 7px;
  cursor: pointer;
  font: inherit; color: inherit; text-align: start;
}
.theme-tile:hover { border-color: var(--accent-line, var(--border)); }
.theme-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* لقطة مصغرة للسمة: شريط علوي بلون التمييز، وعمود جانبي، ومساحة محتوى. */
.theme-shot {
  height: 54px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border-soft, var(--border));
  background: var(--surface-2, #f6f7f9);
  display: block; position: relative;
}
.theme-shot i { position: absolute; inset-block-start: 0; inset-inline: 0; height: 12px; background: var(--t); display: block; }
.theme-shot em { position: absolute; inset-block: 12px 0; inset-inline-start: 0; width: 26px; background: var(--t); opacity: .22; display: block; }
.theme-shot b {
  position: absolute; inset-block-end: 8px; inset-inline-start: 34px;
  width: 34px; height: 9px; border-radius: 3px; background: var(--t); opacity: .6; display: block;
}
.theme-name { font-size: 11.5px; font-weight: 600; }

.input.colour { width: 48px; padding: 2px; min-height: 26px; cursor: pointer; }

/* الشعار المرفوع يحل محل مربع الحرفين، فيفرغ المربع من لونه ويتسع للصورة. */
.mark.mark-img { background: none !important; width: auto; min-width: 30px; max-width: 150px; }
.mark.mark-img img { max-height: 32px; max-width: 150px; object-fit: contain; display: block; }
.login-card .brand .mark.mark-img img { max-height: 44px; max-width: 190px; }

.brand-foot {
  margin-top: auto;
  padding: 10px 20px 12px;
  border-top: 1px solid var(--border-soft, var(--border));
  font-size: 10.5px; line-height: 1.7; color: var(--text-3);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.brand-foot a { color: var(--text-2); text-decoration: none; }
.brand-foot a:hover { color: var(--accent); text-decoration: underline; }

/* خلفية مرفوعة: تخفى الزخرفة الافتراضية ويوضع حجاب يبقي البطاقة مقروءة. */
.login-page.has-bg { background-size: cover; background-position: center; }
.login-page.has-bg::before { background: rgba(11,16,27,.45); }

/* ─────────────────────────────────────────────── أعمدة أفقية وشريط جزء‑من‑كل */

.hbars { display: flex; flex-direction: column; gap: 7px; }
.hbar { display: flex; align-items: center; gap: 10px; cursor: default; }
.hbar-label {
  flex: 0 0 34%; max-width: 34%; font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbar-track { flex: 1; height: 14px; background: var(--surface-3); border-radius: 4px; overflow: hidden; display: flex; }
/* الطرف المستدير عند نهاية البيانات فقط: القاعدة تبقى مستقيمة كي تقارن الأطوال. */
.hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width .2s; }
.hbar:hover .hbar-fill { opacity: .85; }
.hbar-value { flex: 0 0 auto; min-width: 42px; text-align: start; font-size: 12px; font-weight: 700; }

.stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--surface); }
.stacked-seg { display: block; min-width: 3px; transition: opacity .12s; }
.stacked-seg:first-child { border-start-start-radius: 5px; border-end-start-radius: 5px; }
.stacked-seg:last-child { border-start-end-radius: 5px; border-end-end-radius: 5px; }
.stacked-seg:hover { opacity: .82; }

/* شبكة المخططات: مخططان جنبا إلى جنب على الشاشة العريضة، وواحد تحت الآخر دونها. */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1080px) { .chart-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────── حساسات الجهاز */

.sensor-list { display: flex; flex-direction: column; gap: 2px; }
.sensor-group { display: flex; flex-direction: column; }
.sensor-group-head {
  background: var(--surface-3); color: var(--text-2);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 5px; margin-top: 6px;
}
.sensor-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 11px; border-bottom: 1px solid var(--border-soft);
}
.sensor-row:last-child { border-bottom: 0; }
.sensor-row:hover { background: var(--surface-2); }
.sensor-name { font-size: 12.5px; font-weight: 600; flex: 0 0 34%; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sensor-meta { font-size: 11.5px; color: var(--text-2); flex: 1; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sensor-key { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); }

/* الأدوات تظهر عند المرور كما في المرجع — الصف يبقى هادئا حتى يقصد. */
.sensor-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.sensor-row:hover .sensor-actions,
.sensor-row:focus-within .sensor-actions { opacity: 1; }

.icon-btn {
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: none; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

.sensor-kind-menu {
  /* فوق الدرج (٩٦٠) ودون النوافذ (١٠٠٠): أقل منه يختفي نصفها خلف حافة الدرج. */
  position: fixed; z-index: 980;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 5px; display: flex; flex-direction: column; min-width: 170px;
}
.sensor-kind-menu button {
  border: 0; background: none; text-align: start; cursor: pointer;
  padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--text);
}
.sensor-kind-menu button:hover { background: var(--surface-2); }

/* تبويب المعايرة: الجدول والمخطط جنبا إلى جنب، وتحت الضيق واحد فوق الآخر. */
.calib-pane { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; }
@media (max-width: 720px) { .calib-pane { grid-template-columns: 1fr; } }
.calib-side { display: flex; flex-direction: column; gap: 8px; }
.calib-rows { display: flex; flex-direction: column; gap: 6px; }
.calib-row { display: flex; align-items: center; gap: 6px; }
.calib-row .input { flex: 1; min-width: 0; }
.calib-chart { display: flex; align-items: center; justify-content: center; min-height: 240px; }

/* مصادر حساس التجميع: قائمة اختيار بأسمائها ومفاتيحها الخام. */
.agg-members {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 170px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px;
}
.agg-members .check { justify-content: flex-start; }
.agg-members .faint { margin-inline-start: auto; font-family: var(--font-mono); font-size: 10.5px; direction: ltr; }

/* ─────────────────────────────── إعدادات العتاد

   شبكة من بطاقات صغيرة: كل معامل يحمل اسمه ورقمه وقيمته وحالته. الرقم ظاهر
   لأن من يراجع وثيقة الشركة المصنعة يبحث به لا بالاسم العربي. */

.cfg-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.cfg-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 11px; border: 1px solid var(--border-soft);
  border-radius: 7px; background: var(--surface);
}
.cfg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cfg-head label { font-size: 11.5px; color: var(--text-2); }
.cfg-id { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); }
.cfg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.cfg-foot .hint { font-size: 10.5px; }

/* قائمة اختيار الأجهزة: تمرير داخلي، فمئتا جهاز لا تجعل النافذة أطول من الشاشة. */
.pick-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: 7px; }
.pick-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-block-end: 1px solid var(--border-soft); cursor: pointer;
}
.pick-row:last-child { border-block-end: 0; }
.pick-row:hover { background: var(--surface-2); }
.pick-row .pick-name { flex: 1; font-size: 12.5px; }
.pick-row code { font-size: 11px; }

/* ─────────────────────────────── لوحة المؤشرات — منقولة عن تصميم المالك

   بطاقات بيضاء بحواف ناعمة وظل خفيف، عنوان صغير وقائمة نقاط في طرفه،
   وسطر مرشحات تحته. الألوان ألوان الأصل لا لوحة النظام، ومحصورة هنا. */

.bi { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

.bi-head { display: flex; align-items: center; gap: 12px; }
.bi-head h3 { margin: 0; font-size: 15px; font-weight: 700; }


/* كل مجموعة سطر واحد كما في الأصل. minmax(0,1fr) لا 1fr: بدونه يرفض العمود
   النزول تحت عرض محتواه فيخرج الصف عن الشاشة بدل أن يضيق. */
.bi-row-4 { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bi-row-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bi-row-2 { display: grid; gap: 12px; grid-template-columns: 2fr minmax(0, 1fr); }
.bi-tiles { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ولا يكسر الصف إلا على عرض لم يعد يحتمله: لوح ثم هاتف. */
@media (max-width: 820px) {
  .bi-row-4, .bi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-row-3, .bi-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .bi-row-4, .bi-tiles { grid-template-columns: 1fr; } }

.bi-card, .bi-tile {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(24, 32, 49, .04);
  min-width: 0;
}
.bi-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bi-card-head h4 { margin: 0; font-size: 14.5px; font-weight: 700; }
.bi-tile .bi-card-head h4 { font-size: 12.5px; font-weight: 600; color: var(--text); }

.bi-dots {
  border: 0; background: none; cursor: pointer; line-height: 1;
  color: var(--text-3); font-size: 17px; padding: 0 2px; flex: none;
}
.bi-dots:hover { color: var(--text); }

.bi-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); flex: none; }
.bi-badge i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.bi-card-filters { display: flex; align-items: center; gap: 10px; margin-block-start: 4px; flex-wrap: wrap; }
.bi-card-filters .grow { flex: 1; }
.bi-filter {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 11.5px; color: var(--text-2);
}
.bi-filter i { display: inline-flex; opacity: .7; }
.bi-group { font-size: 11.5px; color: var(--text-3); border-inline-start: 1px solid var(--border); padding-inline-start: 10px; }

.bi-card-body { margin-block-start: 12px; }
.bi-none { margin: 18px 0; font-size: 12.5px; color: var(--text-2); }

/* الحلقة ومفتاحها: الاسم والنسبة بلون الشريحة، بلا مربعات */
.bi-ring { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* min(…, 100%) لا 130px ثابتة: الحد الأدنى نفسه كان يدفع المفتاح خارج البطاقة
   حين تضيق — والحد الأدنى لا يفترض أن يكسر الحاوية التي يعيش فيها. */
.bi-legend { flex: 1; min-width: min(130px, 100%); display: flex; flex-direction: column; gap: 7px; }
.bi-legend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.bi-legend-row b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* أشرطة الصيانة: الاسم فوق الشريط بلونه، والعرض نسبة من أطولها */
.bi-mbars { display: flex; flex-direction: column; gap: 14px; }
.bi-mbar > span { display: block; font-size: 12.5px; font-weight: 600; margin-block-end: 6px; }
.bi-mbar-track { height: 13px; border-radius: 7px; background: transparent; }
.bi-mbar-track i { display: block; height: 100%; border-radius: 7px; min-width: 8px; }

/* أعمدة مهام اليوم: التسمية مدارة بجانب العمود، تقرأ من أسفل إلى أعلى كما في
   الأصل. وبجانبه لا عليه: لونها لونه، فوضعها فوقه يخفيها كلما طال. */
.bi-tasks { display: flex; align-items: flex-end; gap: 10px; height: 180px; }
.bi-task { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 3px; min-width: 0; }
.bi-task-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  flex: none; max-height: 100%; overflow: hidden;
}
.bi-task-bar { flex: 1; min-width: 0; max-width: 34px; border-radius: 3px 3px 0 0; min-height: 4px; }

/* بطاقة المؤشر: رقم أزرق كبير، وتحته مداه، وعلى جانبه خط صغير أو رقم ثان */
.bi-tile-body { display: flex; align-items: flex-start; gap: 10px; margin-block-start: 8px; }
.bi-tile-body > div:first-child { flex: 1; min-width: 0; }
.bi-tile-value { display: block; font-size: 25px; font-weight: 700; color: #1E9BD7; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bi-tile-missing { display: block; font-size: 25px; font-weight: 700; color: var(--text-3); line-height: 1.15; }
.bi-tile-note { display: block; font-size: 11.5px; color: var(--text-2); margin-block-start: 2px; }
.bi-tile-side { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 64px; }
.bi-tile-side b { font-size: 21px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bi-tile-side span { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
/* الرسم المصغر عرض viewBox عنده 200، و width:100% داخل عنصر مرن بعرض تلقائي
   يرتد إلى هذا العرض الأصيل — فيخرج الخط من البطاقة ويمر فوق الرقم. عرض صريح. */
.bi-tile-side .spark { width: 64px; height: 30px; margin: 0; overflow: hidden; }
.bi-tile-trend { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }

/* مخالفات السرعة: سهمان حول الحلقة، ورقمان تحتها */
.bi-speed { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* الحلقة مقاسها ثابت بالبكسل و flex:none، فعند الشاشة المتوسطة تخرج هي والسهمان
   من البطاقة. نسمح لها وحدها بالانكماش — مربعة دائما — ويبقى السهمان كما هما.
   ال important ضروري: donut() يكتب العرض والارتفاع و flex في style المضمن. */
.bi-ring > div:first-child, .bi-speed > div {
  flex: 0 1 auto !important; min-width: 0; max-width: 100%;
  height: auto !important; aspect-ratio: 1;
}
.bi-ring > div:first-child > svg, .bi-speed > div > svg { width: 100%; height: 100%; }

.bi-arrow {
  border: 0; background: none; cursor: pointer; color: var(--text-3); flex: none;
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
.bi-arrow:hover { color: var(--text); }
.bi-arrow svg { transform: rotate(90deg); }
.bi-arrow.next svg { transform: rotate(-90deg); }
.bi-speed-foot { display: flex; gap: 20px; justify-content: center; text-align: center; }
.bi-speed-foot > div { display: flex; flex-direction: column; gap: 2px; }
.bi-speed-foot b { font-size: 17px; font-weight: 700; }
.bi-speed-foot span { font-size: 11.5px; }

/* مفتاح المخططات: وحدة المحور يسارا ثم النقاط الملونة */
.bi-chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bi-unit { font-size: 11.5px; color: var(--text-3); }
.bi-key { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.bi-key i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* صف السائق: اسمه ثم شريط مكدس بأرقامه داخله */
.bi-driver { display: flex; align-items: center; gap: 12px; }
.bi-driver-name { width: 130px; flex: none; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-driver-track { flex: 1; min-width: 0; }
.bi-driver-fill { display: flex; height: 20px; border-radius: 3px; overflow: hidden; }
.bi-driver-fill span { display: flex; align-items: center; justify-content: center; min-width: 0; }
.bi-driver-fill b { font-size: 10.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

/* الرقم داخل شريحة العمود المكدس */
.chart .seg-label { font-size: 10.5px; font-weight: 600; fill: #fff; font-family: var(--font-mono); }

/* ─────────────────────────────── المخطط يملأ بطاقته

   البطاقات في الصف تتساوى ارتفاعا بحكم الشبكة، فأقصرها يترك بياضا تحته.
   العلاج أن يكون جسم البطاقة عمودا ناميا والمخطط هو ما ينمو فيه — لا أن
   يضبط ارتفاع المخطط برقم ثابت يصدق على عرض واحد. */

.bi-card { display: flex; flex-direction: column; }
.bi-card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bi-card-body > .stack { flex: 1; min-height: 0; }

.chart-wrap { flex: 1; min-height: 150px; display: flex; justify-content: center; }
.chart-wrap > .chart { width: 100%; height: 100%; }
.chart-wrap > .chart.chart-fit { width: auto; height: auto; }

.chart .chart-grid { stroke: var(--border-soft); stroke-width: 1; }
.chart .chart-axis { fill: var(--text-3); font-size: 10.5px; font-family: var(--font-mono); unicode-bidi: isolate; }
.chart .seg { transition: opacity .12s; }
.chart .seg:hover { opacity: .85; }

/* الحلقة في منتصف جسمها لا في أعلاه، فلا يبقى بياض تحتها. */
.bi-ring, .bi-speed { flex: 1; }
.bi-ring { align-items: center; }
.bi-speed { align-items: center; }

/* ─────────────────────────────── باني التقارير

   نافذة من ثلاثة أعمدة: الكتالوج، والكائنات، والإعدادات — كما في الشاشة
   المرجعية. والأعمدة تتمرر كل على حدة لا النافذة كلها، وإلا ضاع عنوان
   العمود عند تمرير قائمة طويلة. */

.modal.xwide { width: min(1240px, 100%); }

.rb { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 14px; min-height: 0; }
.rb-col {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--surface-2);
}
.rb-col > h4 {
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  padding: 11px 13px 9px; border-bottom: 1px solid var(--border-soft); flex: none;
}
.rb-col > .rb-tools { padding: 9px 11px; border-bottom: 1px solid var(--border-soft); flex: none; }
.rb-scroll { overflow: auto; padding: 6px; flex: 1; min-height: 0; max-height: 52vh; }

.rb-group {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 9px; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text-2); text-align: start;
  border-radius: var(--radius-sm);
}
.rb-group:hover { background: var(--surface-3); }
.rb-group .chev { margin-inline-start: auto; transition: transform .14s; }
.rb-group.open .chev { transform: rotate(180deg); }

.rb-item {
  display: block; width: 100%; text-align: start; cursor: pointer;
  padding: 8px 11px; margin-inline-start: 8px; border: 0; background: none;
  border-radius: var(--radius-sm);
}
.rb-item:hover { background: var(--surface-3); }
.rb-item.on { background: var(--accent-soft); }
.rb-item b { display: block; font-size: 12.8px; font-weight: 600; }
.rb-item span { display: block; font-size: 11.3px; color: var(--text-3); margin-top: 2px; }

.rb-obj { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: var(--radius-sm); }
.rb-obj:hover { background: var(--surface-3); }
.rb-obj label { font-size: 12.5px; cursor: pointer; flex: 1; min-width: 0; }
.rb-obj .faint { font-size: 11px; }
.rb-obj.nested { margin-inline-start: 18px; }

.rb-set { padding: 12px 13px; display: flex; flex-direction: column; gap: 11px; }
.rb-set label.lbl { font-size: 11.5px; font-weight: 600; color: var(--text-2); display: block; margin-bottom: 4px; }
.rb-days { display: flex; gap: 5px; flex-wrap: wrap; }
.rb-day {
  width: 34px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text-2);
}
.rb-day.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rb-time { display: flex; align-items: center; gap: 8px; }
.rb-time input[type=time] { width: 112px; }
.rb-check { display: flex; align-items: center; gap: 7px; font-size: 12.3px; }
.rb-check input { accent-color: var(--accent); }
.rb-sec {
  font-size: 11.5px; font-weight: 700; color: var(--text-3);
  border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 2px;
}

/* ── نتيجة التقرير ── */

.rp-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.rp-tab {
  flex: none; padding: 7px 13px; border: 1px solid var(--border-soft); background: var(--surface-2);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 12.3px; color: var(--text-2);
}
.rp-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rp-tab .faint { color: inherit; opacity: .7; }
.rp-notice {
  font-size: 12.3px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--warn); border: 1px solid transparent;
}

/* عنوان قسم داخل نتيجة تقرير: «الانقطاعات عن السيرفر»، «التوقف بمحرك دائر». */
.sec-title { font-weight: 700; font-size: 12.5px; color: var(--text-2); margin: 0 0 6px; }

/* ─── حقل اللون: مربعات تختار بالضغط، وخانة كود لمن أراد لونا خارجها.
   بنفس هيئة لوحة ألوان المسارات: خمسة في الصف، والمختار بإطار خارجه. */
.colour-field { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.swatch {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,.12); border-radius: 5px;
}
.swatch.on { outline: 2px solid var(--text); outline-offset: 2px; }

/* ═══════════ خدمة الميدان — المهام ═══════════
   جدول وخريطة جنبا إلى جنب، وشريط أدوات فوقهما — بترتيب النظام المرجعي. */
.fs-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 0 12px;
}
.fs-title { font-size: 16px; font-weight: 700; }
.fs-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.fs-tool {
  width: 32px; height: 32px; flex: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fs-tool:hover { background: var(--surface-2); color: var(--text); }
.fs-tool.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fs-tool svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/*
    صف المرشحات بعرض أعمدة الجدول نفسها ويمر معه أفقيا: كل مرشح تحت
    عموده لا في شريط عائم منفصل.
*/
/* صف المرشحات صف في رأس الجدول، فعروضه عروض الأعمدة بذاتها. */
.fs-filters { background: var(--surface); }
.fs-filters td { position: sticky; top: 34px; z-index: 1; background: var(--surface); }
.fs-fcell { padding: 6px 8px; }
.fs-fcell .input, .fs-fcell select { width: 100%; font-size: 12px; padding: 6px 8px; }
.fs-fclear { display: flex; justify-content: flex-end; }


/* النصفان: الجدول يتمدد والخريطة ثابتة العرض، وتختفي حين تطوى. */
.fs-split { display: flex; gap: 12px; align-items: stretch; min-height: 460px; }
.fs-list {
  flex: 1; min-width: 0; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.fs-map {
  width: 400px; flex: none; min-height: 460px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.fs-split.no-map .fs-list { flex: 1 1 100%; }

@media (max-width: 1180px) {
  .fs-split { flex-direction: column; }
  .fs-map { width: auto; height: 320px; min-height: 0; }
}

.fs-group + .fs-group { border-top: 1px solid var(--border); }
.fs-group-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface-2);
  font-size: 12.5px;
}
.fs-group-h span { color: var(--text-3); }

/* نقطة المهمة على الخريطة الجانبية — صغيرة لأنها قد تكون بالمئات. */
.fs-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.fs-pin.on { outline: 2px solid var(--text); outline-offset: 1px; }

/* قائمة اختيار الأعمدة */
.fs-colmenu {
  position: fixed; z-index: 1200; min-width: 190px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(24,32,49,.22);
  display: flex; flex-direction: column; gap: 7px;
}
.fs-colmenu b { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.fs-colmenu label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.fs-colmenu input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* ═══════════ محرر المهمة — شاشة كاملة فوق الخريطة بلوحتين ═══════════ */
body.te-open { overflow: hidden; }

/*
    داخل منطقة المحتوى لا فوق الصفحة: القائمة الجانبية تبقى ظاهرة كما عندهم.
*/
.te-wrap { position: absolute; inset: 0; z-index: 60; background: #EBEBEB; }
/*
    <c>z-index: 0</c> ليس تزيينا: بدونه لا تنشئ الخريطة stacking context،
    فتخرج طبقات Leaflet الداخلية (400–800) إلى سياق الأب وترسم فوق
    اللوحتين — فتبدو الشاشة خريطة فارغة بلا حقول.
*/
.te-map { position: absolute; inset: 0; z-index: 0; }

.te-back {
  position: absolute; top: 16px; inset-inline-start: 16px; z-index: 3;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  box-shadow: 0 2px 8px rgba(24,32,49,.25);
  display: flex; align-items: center; justify-content: center;
}
.te-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; transform: scaleX(-1); }

/*
    قياساتهم حرفا بحرف: لوحتان عائمتان 400px، 24px من أعلى وأسفل، الأولى
    على بعد 72px من الحافة و24px بينهما — لا لوحتان ملزوقتان بكامل الارتفاع.
*/
.te-panels {
  position: absolute; inset-block: 24px; inset-inline-start: 72px; z-index: 2;
  display: flex; gap: 24px; pointer-events: none;
}
.te-left, .te-right {
  width: 320px; max-width: 42vw; pointer-events: auto;
  background: var(--surface); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  display: flex; flex-direction: column;
  transition: width .3s cubic-bezier(.25,.8,.5,1), opacity .2s, padding .3s cubic-bezier(.25,.8,.5,1);
}
.te-left { overflow: auto; padding: 14px 12px; gap: 8px; position: relative; }

/* الطي: تنزلق لوحة النقاط خارج مكانها فتتسع الخريطة، والسهم ينقلب. */
/*
    الزر في منتصف المسافة بين اللوحتين رأسيا وأفقيا: كان عند أعلى اللوحة
    الثانية فيقف فوق عنوان أول حقل فيها ويحجبه.
*/
/* زر الطي في رأس كل لوحة، وقرص الإظهار يحل محلها حين تطوى. */
.te-left, .te-right { position: relative; }
.te-fold {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 4;
  width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: none; color: var(--text-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.te-fold:hover { background: var(--surface-2); color: var(--accent); }
.te-fold svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.te-reopen {
  display: none; position: absolute; top: 10px; inset-inline-start: 50%;
  transform: translateX(50%); z-index: 4;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  box-shadow: 0 2px 6px rgb(15 23 42 / .2);
  align-items: center; justify-content: center;
}
.te-reopen svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(180deg); }

/* اللوحة المطوية شريط رفيع لا تختفي: منه تعاد. */
.te-left.collapsed, .te-right.collapsed {
  width: 44px; min-width: 44px; padding-inline: 0; overflow: hidden;
}
.te-left.collapsed > *:not(.te-reopen), .te-right.collapsed > *:not(.te-reopen) { display: none; }
.te-left.collapsed .te-reopen, .te-right.collapsed .te-reopen { display: flex; }
  width: 0; min-width: 0; padding-inline: 0; opacity: 0;
  overflow: hidden; pointer-events: none;
}
.te-folded .te-panels { gap: 0; }

/* بطاقة المكلف وقائمتها. */
.te-emp { position: relative; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.te-emp-field {
  flex: 1; min-width: 0; display: flex; align-items: center; cursor: pointer; text-align: start;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 8px 10px;
}
.te-emp-field:hover { border-color: var(--accent); }
.te-emp-field .faint { font: 500 12px var(--font); color: var(--text-3); }

.te-emp-item { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; }
.te-emp-av {
  width: 30px; height: 30px; flex: none; border-radius: 50%; color: #fff;
  font: 700 12px var(--font); display: flex; align-items: center; justify-content: center;
}
.te-emp-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.te-emp-bd b { font: 500 12.5px var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-emp-bd .ltr { font: 400 11px var(--font); color: var(--text-3); }
.te-emp-far { flex: none; font: 500 11.5px var(--font); color: var(--text-3); }

.te-locate {
  width: 32px; height: 32px; flex: none; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.te-locate:hover { border-color: var(--accent); color: var(--accent); }
.te-locate svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.te-emp-list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20;
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  box-shadow: 0 10px 26px rgb(15 23 42 / .14); padding: 4px;
}
.te-emp-opt { padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.te-emp-opt:hover { background: var(--surface-2); }
.te-emp-opt.on { background: var(--accent-soft); }

/* حالة المسار: نقطة بلونها ثم العنوان والقيمة. */
.te-rstatus { display: flex; align-items: center; gap: 10px; padding-block-end: 4px; }
.te-rstatus > i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text-3); }
.te-rstatus > i.s1 { background: #2A4E9B; }
.te-rstatus > i.s2 { background: #0E7C6B; }
.te-rstatus > i.s3 { background: #52A800; }
.te-rstatus > i.s4 { background: #8B5CF6; }
.te-rstatus > i.s5 { background: #CF8B12; }
.te-rstatus > i.s6 { background: #C2334D; }
.te-rstatus > div { display: flex; flex-direction: column; }
.te-rstatus span { font: 600 12px var(--font); color: var(--text); }
.te-rstatus b { font: 500 12.5px var(--font); color: var(--text); }

/*
    البطاقة بيضاء بلا إطار، والمختارة تعرف بشريط 3px على حافتها — كما عندهم.
    تلوين البطاقة كلها يشوش قراءة نصها.
*/
.te-stop {
  position: relative; display: flex; align-items: flex-start; gap: 9px;
  cursor: pointer; padding: 14px 12px 14px 16px; background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.te-stop:hover { background: var(--surface-2); }
.te-stop.dragging { opacity: .45; }
.te-stop.over { box-shadow: inset 0 2px 0 var(--accent); }

.te-sel {
  position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 80px; background: transparent; border-radius: 0;
}
.te-stop.on .te-sel { background: var(--accent); }

/* المقبض فوق البطاقة في الوسط، لا يظهر إلا بالمرور — ومنه وحده يبدأ السحب. */
.te-grip {
  position: absolute; top: 0; inset-inline-start: calc(50% - 12px);
  display: none; width: 24px; height: 16px; border: 0; background: none;
  cursor: move; color: var(--text-3); padding: 0;
}
.te-stop:hover .te-grip { display: flex; align-items: center; justify-content: center; }
.te-grip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/*
    مقاسات بطاقتهم: قرص الرقم 28، والعنوان سطر واحد مقصوص لا فقرة تمد
    البطاقة — بطاقة بطول عنوانها تخرج بقية النقاط خارج الشاشة.
*/
.te-stop .n {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--accent); color: #fff;
  font: 700 12px var(--font);
  display: flex; align-items: center; justify-content: center;
}
.te-stop .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.te-stop b { display: block; font: 500 13px var(--font); color: var(--text); }
.te-stop span {
  display: block; font: 400 12px var(--font); color: var(--text-3); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.te-stop i { display: block; font-style: normal; font: 400 12px var(--font); color: var(--text-3); }
.te-stop .x {
  border: 0; background: none; color: var(--text-3); cursor: pointer; flex: none;
  display: flex; padding: 2px;
}
.te-stop .x:hover { color: var(--c-crit); }

/* «إضافة نقطة جديدة» رابط برمز مطوق كما عندهم، لا مربع منقط. */
.te-add {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: none; cursor: pointer; padding: 9px 2px;
  font: 600 12.5px var(--font); color: var(--accent);
}
.te-add span {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor; align-items: center; justify-content: center;
}
.te-add:hover { color: var(--accent-strong, var(--accent)); text-decoration: underline; }
.te-add span { display: flex; }
.te-add svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* لوحة الحقول */
.te-form { flex: 1; overflow: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.te-f { display: flex; flex-direction: column; gap: 5px; }
/* عناوين الحقول بالأسود: رمادها كان يجعلها تقرأ كتلميح لا كاسم حقل. */
.te-f > span { font: 600 12px var(--font); color: var(--text); }
.te-f.off { opacity: .55; }
.te-f .input.off { background: var(--surface-2); color: var(--text-3); font-size: 12px; }

.te-addr { display: flex; align-items: flex-start; gap: 8px; }
.te-addr i { display: flex; color: var(--accent); padding-top: 7px; }
.te-addr svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.te-addr > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.te-addr .ltr, .te-addr .faint { font-size: 11px; color: var(--text-3); }


/* حقل فترة التنفيذ: زر يبدو حقلا، يعرض المدى ويفتح النافذة. */
.te-when {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 9px 11px; font: 500 12px var(--font); color: var(--text);
  cursor: pointer; text-align: start;
}
.te-when:hover { border-color: var(--accent); }
.te-when i { display: inline-flex; color: var(--text-3); flex: none; }

.te-radius { display: grid; grid-template-columns: 1fr 120px; gap: 6px; }
.te-radius .input { width: 100%; }

.te-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: 600 12px var(--font); color: var(--accent);
}
.te-link:hover { text-decoration: underline; }

.te-tags { position: relative; }
.te-tag-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: 100%;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 8px 11px; min-height: 38px; cursor: pointer; text-align: start;
}
.te-tag-field:hover { border-color: var(--accent); }
.te-tag-field .faint { font: 500 12px var(--font); color: var(--text-3); }
.te-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.te-tag {
  border: 1px solid var(--border); border-radius: 999px; background: none;
  padding: 3px 9px; font: 500 11.5px var(--font); color: var(--text-2);
}
.te-tag.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.te-tag-list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20;
  max-height: 220px; overflow-y: auto; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  box-shadow: 0 10px 26px rgb(15 23 42 / .14); padding: 4px;
}
.te-tag-row {
  display: flex; align-items: center; gap: 7px; border: 0; background: none;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font: 500 12px var(--font); color: var(--text); text-align: start;
}
.te-tag-row:hover { background: var(--surface-2); }
.te-tag-row.on { color: var(--accent); }
.te-tag-row .tick { width: 12px; color: var(--accent); font-size: 11px; flex: none; }

.te-foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--border);
}

/* علامة النقطة على خريطة المحرر: رقمها هو ترتيب تنفيذها. */
.te-pin {
  position: relative; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent); color: #fff; font: 700 13px var(--font);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 7px rgba(24,32,49,.3);
}
.te-pin::after {
  content: ''; position: absolute; top: 29px; inset-inline-start: 50%; margin-inline-start: -5px;
  border: 5px solid transparent; border-top: 7px solid var(--accent);
}
.te-pin.on { outline: 2px solid var(--text); outline-offset: 2px; }

@media (max-width: 1100px) {
  .te-left { inset-inline-start: 0; width: 46%; }
  .te-right { inset-inline-start: 46%; width: 54%; }
}

/* ═══════════ باني النماذج ═══════════ */
.fb-wrap { display: flex; gap: 16px; align-items: flex-start; min-height: 420px; }
.fb-palette {
  width: 170px; flex: none; display: flex; flex-direction: column; gap: 5px;
  padding-inline-end: 14px; border-inline-end: 1px solid var(--border);
}
.fb-palette b { font: 600 11px var(--font); color: var(--text-3); margin-bottom: 3px; }
.fb-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; padding: 7px 9px;
  font: 500 12px var(--font); color: var(--text-2); text-align: start;
}
.fb-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.fb-chip span { display: flex; }
.fb-chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.fb-sheet { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fb-head { display: flex; flex-direction: column; gap: 10px; }
.fb-f { display: flex; flex-direction: column; gap: 4px; }
.fb-f > span { font: 600 11px var(--font); color: var(--text-3); }

.fb-toggle { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.fb-toggle input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.fb-toggle b { display: block; font-size: 12.5px; font-weight: 600; }
.fb-toggle span { display: block; font-size: 11px; color: var(--text-3); line-height: 1.6; }

.fb-list { display: flex; flex-direction: column; gap: 8px; }
.fb-empty {
  padding: 32px; text-align: center; color: var(--text-3); font-size: 12.5px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.fb-row {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px 10px 9px;
}
.fb-row.sec { background: var(--surface-2); }

/* المحددة: المكون التالي يهبط تحتها، فلا بد أن ترى أيها هي. */
.fb-row.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fb-row.on .fb-grip { opacity: 1; color: var(--accent); }
.fb-move { display: flex; flex-direction: column; gap: 2px; flex: none; }
.fb-move .m {
  width: 20px; height: 18px; border: 0; background: none; cursor: pointer;
  color: var(--text-3); display: flex; align-items: center; justify-content: center;
}
.fb-move .m:hover { color: var(--accent); }
.fb-move svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(90deg); }
.fb-move .down svg { transform: rotate(-90deg); }

.fb-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fb-bd .kind { font: 600 10.5px var(--font); color: var(--text-3); }
.fb-req { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); cursor: pointer; }
.fb-req input { width: 14px; height: 14px; accent-color: var(--accent); }
.fb-x { border: 0; background: none; color: var(--text-3); cursor: pointer; flex: none; display: flex; padding: 3px; }
.fb-x:hover { color: var(--c-crit); }

.fb-star { display: flex; color: var(--c-warn); }
.fb-star svg { width: 14px; height: 14px; stroke: currentColor; fill: currentColor; }

/* سحب حقل داخل النموذج: المسحوب يتبع الإصبع، وشبح بمقاسه يقول أين يستقر. */
.fb-row { cursor: default; }
.fb-row.dragging { opacity: .9; box-shadow: 0 10px 24px rgba(16, 24, 40, .16); cursor: grabbing; }
.fb-opt.dragging { opacity: .9; background: var(--surface); }
.fb-ghost {
  border: 1px dashed var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); flex: none;
}
.fb-move .grip { display: flex; color: var(--border-strong); cursor: grab; padding: 1px 0; }
.fb-move .grip:active { cursor: grabbing; }
.fb-move .grip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* مقبض السحب أعلى بطاقة الحقل — خطان في منتصف حافتها كما في المرجع. */
.fb-grip {
  position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(50%);
  display: flex; color: var(--text-3); cursor: grab; padding: 0 10px;
  touch-action: none; opacity: .55;
}
.fb-grip:hover { opacity: 1; color: var(--accent); }
.fb-grip:active { cursor: grabbing; }
.fb-grip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.fb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fb-kind { display: flex; align-items: center; gap: 5px; font: 600 10.5px var(--font); color: var(--text-3); }
.fb-kind svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.fb-acts { display: flex; align-items: center; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.fb-acts .a {
  width: 26px; height: 26px; border: 0; border-radius: 6px; background: none;
  color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fb-acts .a:hover { background: var(--surface-2); color: var(--text); }
.fb-acts .a.on { background: var(--accent-soft); color: var(--accent); }
.fb-acts .a.del:hover { color: var(--c-crit); }
.fb-acts svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* قائمة خيارات الحقل */
.fb-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.fb-opt { display: flex; align-items: center; gap: 6px; }
.fb-opt.dragging { opacity: .45; }
.fb-opt .g { display: flex; color: var(--border-strong); cursor: grab; touch-action: none; }
.fb-opt .g svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.fb-opt .n { width: 16px; flex: none; text-align: center; font-size: 11px; color: var(--text-3); }
.fb-opt .input { flex: 1; padding: 5px 8px; font-size: 12px; }
.fb-opt .x { border: 0; background: none; color: var(--text-3); cursor: pointer; display: flex; padding: 2px; }
.fb-opt .x:hover { color: var(--c-crit); }
.fb-addopt {
  align-self: flex-start; display: flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer; padding: 3px 0;
  font: 600 11.5px var(--font); color: var(--accent);
}
.fb-addopt svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* لوحة إعدادات النوع */
.fb-set {
  display: flex; flex-direction: column; gap: 7px; margin-top: 4px;
  padding: 9px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.fb-set-row { display: flex; align-items: center; gap: 8px; }
.fb-set-row > span { flex: 1; font-size: 11.5px; color: var(--text-2); }
.fb-set .input { padding: 5px 8px; font-size: 12px; }
.fb-set .input.num { width: 76px; flex: none; }

.fb-count { align-self: flex-end; font-size: 10.5px; color: var(--text-3); }

/* ─── معاينة النموذج: شكله كما يملؤه الموظف */
.fp { max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.fp-head b { display: block; font-size: 15px; font-weight: 700; }
.fp-head p { margin: 4px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.7; }
.fp-f { display: flex; flex-direction: column; gap: 5px; }
.fp-f > label { font: 600 12.5px var(--font); color: var(--text); }
.fp-f > label i { color: var(--c-crit); font-style: normal; }
.fp-f > p { margin: 0; font-size: 11px; color: var(--text-3); line-height: 1.6; }
.fp-f .input { width: 100%; }
.fp-sep {
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px;
  font: 700 12.5px var(--font); color: var(--text-2);
}
.fp-opts { display: flex; flex-direction: column; gap: 6px; }
.fp-opts label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.fp-opts b { color: var(--text-3); font-weight: 600; }
.fp-stars { display: flex; gap: 4px; color: var(--c-warn); }
.fp-stars svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.fp-drop, .fp-sign {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 16px; font-size: 12px; color: var(--text-3);
}
.fp-sign { padding: 26px; }
.fp-drop svg, .fp-sign svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.fp-drop i, .fp-sign i { font-style: normal; }
.fp-send { align-self: flex-start; margin-top: 6px; }
.fb-note { margin: 0 0 6px; font-size: 11px; color: var(--text-3); line-height: 1.6; }

/* ═══════════ الخط الزمني للمهام ═══════════ */
.fs-views { display: flex; gap: 2px; }
.fs-view {
  width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fs-view:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.fs-view:last-child { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.fs-view.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fs-view svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.tl { display: flex; flex-direction: column; min-width: 0; }
.tl-head { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.tl-hours {
  flex: 1; display: flex; justify-content: space-between;
  padding: 6px 0; font: 500 10.5px var(--font-mono, var(--font)); color: var(--text-3);
}
.tl-name {
  width: 130px; flex: none; padding: 0 10px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-body { display: flex; flex-direction: column; }
.tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-soft, rgba(0,0,0,.05)); min-height: 38px; }
.tl-track {
  position: relative; flex: 1; margin: 5px 0;
  /* شبكة ساعات باهتة تقرأ خلف الأشرطة. */
  background-image: repeating-linear-gradient(to left, var(--border) 0 1px, transparent 1px 6.25%);
}
.tl-bar {
  position: absolute; top: 2px; bottom: 2px; border-radius: 4px;
  padding: 0 6px; font: 600 10.5px var(--font); color: #fff; cursor: pointer;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: var(--accent);
}
.tl-bar.s0 { background: #9AA7B5; }   /* غير مسندة */
.tl-bar.s1 { background: #2F7FD1; }   /* مسندة */
.tl-bar.s2 { background: #D97706; }   /* وصل */
.tl-bar.s3 { background: #0E7C6B; }   /* مكتملة */
.tl-bar.s4 { background: #8B5CF6; }   /* مكتملة بأخطاء */
.tl-bar.s5 { background: #CF8B12; }   /* متأخرة */
.tl-bar.s6 { background: #C2334D; }   /* فاشلة */
.tl-hint { padding: 10px 12px; font-size: 11px; color: var(--text-3); }

/* إعدادات استيراد المهام */
.imp-modes { display: flex; flex-direction: column; gap: 6px; }
.imp-modes label,
.imp-who label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text); cursor: pointer;
}
.imp-modes input, .imp-who input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; }
.imp-who {
  margin-block-start: 6px; max-height: 148px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 5px;
  background: var(--surface-2);
}
.imp-sub {
  margin-block-start: 6px; padding-inline-start: 18px;
  border-inline-start: 2px solid var(--border);
}
.imp-src { flex-direction: row; gap: 16px; }
.imp-paste { min-height: 150px; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.7; resize: vertical; }

/* ── نافذة «فترة التنفيذ» ── */
.ep-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 0; }
.ep-presets {
  display: flex; flex-direction: column; gap: 2px;
  padding-inline-end: 14px; border-inline-end: 1px solid var(--border);
}
.ep-presets > b { font: 600 12px var(--font); color: var(--text); margin-block-end: 8px; }
.ep-preset {
  border: 0; background: none; padding: 7px 9px; border-radius: 7px; cursor: pointer;
  font: 500 12px var(--font); color: var(--text-2); text-align: start;
}
.ep-preset:hover { background: var(--surface-2); color: var(--accent); }
.ep-gap { height: 12px; }

.ep-main { display: flex; flex-direction: column; padding-inline-start: 16px; }
.ep-range > b { font: 600 12px var(--font); color: var(--text); }
.ep-row {
  display: grid; grid-template-columns: 1fr 100px auto 1fr 100px;
  align-items: center; gap: 8px; margin-block: 10px 14px;
}
.ep-row .input { font-size: 12px; padding: 7px 8px; }
.ep-dash { color: var(--text-3); text-align: center; }

.ep-months {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding-block: 14px; border-block: 1px solid var(--border);
}
.ep-cal-h { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.ep-cal-h b { font: 600 12.5px var(--font); color: var(--text); }
.ep-nav {
  width: 24px; height: 24px; border: 0; background: none; border-radius: 6px;
  font-size: 16px; color: var(--text-3); cursor: pointer;
}
.ep-nav:hover { background: var(--surface-2); color: var(--accent); }

.ep-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ep-wd { text-align: center; font: 600 10.5px var(--font); color: var(--text-3); padding-block: 4px; }
.ep-d {
  aspect-ratio: 1; border: 0; background: none; border-radius: 999px; cursor: pointer;
  font: 500 12px var(--font); color: var(--text);
}
.ep-d:hover { background: var(--surface-2); }
.ep-d.mid { background: var(--accent-soft); border-radius: 0; }
.ep-d.on { background: var(--accent); color: #fff; }

.ep-mins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-block-start: 14px; }
.ep-span { display: grid; grid-template-columns: 1fr 92px; gap: 4px 6px; min-width: 0; }
.ep-span > span { grid-column: 1 / -1; font: 600 11px var(--font); color: var(--text-3); }
.ep-span .input { font-size: 12px; padding: 6px 7px; }

.ep-foot { display: flex; align-items: center; gap: 10px; width: 100%; }
.ep-note { flex: 1; font: 500 11.5px var(--font); color: var(--text-3); }

/* فواصل المجموعات في لوحة الحقول — كما تفصل عندهم المدى عما قبله وبعده. */
.te-rule { border: 0; border-top: 1px solid var(--border); margin: 2px 0; }

.te-ico { display: flex; align-items: flex-start; gap: 8px; }
.te-ico > i { display: flex; color: var(--accent); padding-top: 9px; flex: none; }
.te-ico > i svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.te-ico > .input, .te-ico > select, .te-ico > textarea { flex: 1; min-width: 0; }

.te-count { align-self: flex-end; font: 500 10.5px var(--font); color: var(--text-3); }

/* رأس المسار: اسمه ثم عدد نقاطه ومسافته وزمنه. */
.te-route {
  display: flex; flex-direction: column; gap: 8px;
  padding-block-end: 10px; border-block-end: 1px solid var(--border);
}
.te-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.te-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11.5px var(--font); color: var(--text-2);
}
.te-stat i { display: flex; color: var(--text-3); }
.te-stat svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/*
    كل خريطة Leaflet تحبس طبقاتها داخلها. بدون <c>z-index</c> لا تنشئ الخريطة
    stacking context، فتخرج طبقاتها الداخلية (400–800) إلى سياق الأب وترسم فوق
    ما يعلوها — وهو ما جعل خريطة شاشة المهام تظهر فوق محرر المهمة، وقبلها جعل
    لوحتي المحرر تختفيان تحت خريطته.
*/
/* <c>z-index</c> وحده — تحديد <c>position</c> هنا يدهس تموضع أي خريطة. */
.leaflet-container { z-index: 0; }

/* ── شاشة المهام: صف القائمة كصفهم ── */

.fs-groupby { font: 500 12px var(--font); color: var(--text-3); flex: none; }

/* زر الإضافة المربع، ويفتح بالمرور قرصي TXT و XLS. */
.fs-fab { position: relative; flex: none; }
.fs-fab-main {
  width: 40px; height: 40px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgb(14 124 107 / .35);
}
.fs-fab-main svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.fs-fab-dial {
  position: absolute; top: 0; inset-inline-start: 0; display: flex; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.fs-fab:hover .fs-fab-dial { opacity: 1; pointer-events: auto; }
.fs-fab-dial { inset-inline-start: 48px; }
.fs-fab-mini {
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  font: 700 10.5px var(--font); box-shadow: 0 2px 6px rgb(15 23 42 / .14);
}
.fs-fab-mini:hover { border-color: var(--accent); color: var(--accent); }

/* خلية الموظف: قرص بحرفه ثم اسمه. */
.ti-emp { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ti-av {
  width: 28px; height: 28px; flex: none; border-radius: 50%; color: #fff;
  font: 700 12px var(--font); display: flex; align-items: center; justify-content: center;
}
.ti-emp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* الحالة نقطة ملونة واسم بلونها — لا شارة مملوءة. */
.ti-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 500; }
.ti-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ti-status.s0 { color: var(--text-3); }
.ti-status.s1 { color: #2A4E9B; }
.ti-status.s2 { color: #0E7C6B; }
.ti-status.s3 { color: #52A800; }
.ti-status.s4 { color: #8B5CF6; }
.ti-status.s5 { color: #CF8B12; }
.ti-status.s6 { color: #C2334D; }

.ti-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ti-chev { display: flex; color: var(--text-3); flex: none; }
.ti-chev svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(90deg); }

/*
    أدوات الصف تطفو على طرفه عند المرور، فوق نص الخلية لا في عمود خاص —
    عمود دائم يأكل عرضا من الجدول مقابل زرين لا يستعملان غالبا.
*/
/*
    عمود الأدوات ملتصق بطرف القائمة: الجدول أعرض من الشاشة، فعمود في آخره
    يبقى خارج المنظر ولا ترى أزراره إلا بعد تمرير أفقي طويل.
*/
.fs-list th:last-child, .fs-list td.actions {
  position: sticky; inset-inline-end: 0; z-index: 2;
  background: var(--surface); overflow: visible;
}
.fs-list tbody tr:hover td.actions { background: var(--surface-2); }
.fs-list tbody tr.on td.actions { background: var(--accent-soft); }
.ti-tools {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px; padding: 3px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgb(15 23 42 / .14);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.ti-tools .btn { border: 0; background: none; width: 30px; height: 30px; color: var(--text-2); }
.ti-tools .btn:hover { background: var(--surface); color: var(--text); }
tr:hover .ti-tools, tr:focus-within .ti-tools { opacity: 1; pointer-events: auto; }

/* ── شريط التبويبات: خط سفلي ومؤشر تحت المختار، كشريطهم ── */
.fs-tabs {
  display: flex; align-items: stretch; gap: 0;
  border-block-end: 1px solid var(--border); margin-block-end: 14px;
}
.fs-tab {
  position: relative; border: 0; background: none; cursor: pointer;
  padding: 13px 20px; font: 600 12.5px var(--font); color: var(--text-3);
  letter-spacing: .3px; white-space: nowrap;
}
.fs-tab:hover { color: var(--text); }
.fs-tab.on { color: var(--accent); }
.fs-tab.on::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}

/* ── صف الأدوات: سطر واحد لا يتكسر ── */
.fs-head { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.fs-head > select, .fs-head .select { width: 190px; flex: none; }
.fs-head input[type="date"] { width: 150px; flex: none; }
/* الفئة الصحيحة <c>.search</c> لا <c>.search-box</c> — القاعدة كانت لا تطابق شيئا. */
.fs-head .search { width: 220px; flex: none; margin-inline-start: auto; }
.fs-head .search .input { min-width: 0; }
.fs-tools { margin-inline-start: 0; flex: none; }

/* ── الصف بارتفاع ثابت ونص مقصوص، لا عنوان يتمدد عشرة أسطر ── */
/*
    بلا <c>min-width: 100%</c>: كانت تجعل الجدول يتمدد ليملأ الحاوية فيأخذ
    عمود واحد الفرق كله — 575 بدل 300 — بينما يبقى صف المرشحات على عرضه
    المعلن، فتنفصل كل خانة عن عمودها.
*/
.fs-list table { table-layout: fixed; width: max-content; }
.fs-list tbody tr { height: 48px; }
.fs-list th, .fs-list td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.fs-list td > span, .fs-list td > div { overflow: hidden; text-overflow: ellipsis; }

/* عروض الأعمدة كقالبهم: 250 · 160 · 250 · 300 · 300 · 160 · 300 · 160 · 200 · 400 · 250 · 200 · 124 */
.fs-list th:nth-child(1),  .fs-list td:nth-child(1)  { width: 250px; }
.fs-list th:nth-child(2),  .fs-list td:nth-child(2)  { width: 160px; }
.fs-list th:nth-child(3),  .fs-list td:nth-child(3)  { width: 250px; }
.fs-list th:nth-child(4),  .fs-list td:nth-child(4)  { width: 300px; }
.fs-list th:nth-child(5),  .fs-list td:nth-child(5)  { width: 300px; }
.fs-list th:nth-child(6),  .fs-list td:nth-child(6)  { width: 160px; }
.fs-list th:nth-child(7),  .fs-list td:nth-child(7)  { width: 300px; }
.fs-list th:nth-child(8),  .fs-list td:nth-child(8)  { width: 160px; }
.fs-list th:nth-child(9),  .fs-list td:nth-child(9)  { width: 200px; }
.fs-list th:nth-child(10), .fs-list td:nth-child(10) { width: 400px; }
.fs-list th:nth-child(11), .fs-list td:nth-child(11) { width: 250px; }
.fs-list th:nth-child(12), .fs-list td:nth-child(12) { width: 200px; }
.fs-list th:nth-child(13), .fs-list td:nth-child(13) { width: 124px; }

/* ── بطاقة الخريطة: مربع صغير وتحته سطر «اختر عنصرا» ── */
.fs-split { align-items: flex-start; min-height: 0; }
.fs-map {
  width: 400px; flex: none; min-height: 0; height: 420px;
  background: var(--surface);
}
.fs-mapcard {
  width: 400px; flex: none; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.fs-mapcard .fs-map { width: auto; border: 0; border-radius: 0; height: 420px; }
.fs-mapnote { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ── لوحة «معلومات المهمة» تحت الخريطة ── */
.fs-info { display: flex; flex-direction: column; border-block-start: 1px solid var(--border); }
.ti-head {
  display: flex; align-items: center; justify-content: space-between;
  border: 0; background: none; cursor: pointer; padding: 14px 16px;
  font: 700 13px var(--font); color: var(--text); text-align: start;
}
.ti-head span { display: flex; color: var(--text-3); }
.ti-head svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(-90deg); }
.fs-info.shut .ti-head svg { transform: rotate(90deg); }
.fs-info.shut .ti-body { display: none; }

.ti-body { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 18px; }
.ti-row { display: flex; align-items: flex-start; gap: 12px; }
.ti-row > i { display: flex; color: var(--text-3); flex: none; padding-top: 2px; }
.ti-row > i svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ti-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-row span { font: 500 11px var(--font); color: var(--text-3); }
.ti-row b { font: 500 12.5px var(--font); color: var(--text); overflow-wrap: anywhere; }

/* علامة نقطة المسار على خريطة القائمة: رقمها هو ترتيبها. */
.fs-stop {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg); background: #2A4E9B; color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgb(15 23 42 / .35);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font);
}
/* الرقم يعود مستويا بعد دوران الحاوية. */
.fs-stop > span, .fs-stop { line-height: 1; }

/*
    علامة النقطة على الخريطة كعلامتهم: فقاعة بيضاء بذيل أسفلها، داخلها
    أسطر حمراء، ورقمها في شارة حمراء أعلى طرفها.

    بلا دوران على الحاوية: الدوران كان يقلب الرقم رأسا على عقب.
*/
.map-note {
  position: relative; width: 38px; height: 34px; border-radius: 6px;
  background: #fff; box-shadow: 0 2px 8px rgb(15 23 42 / .32);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.map-note::after {
  content: ''; position: absolute; top: 33px; inset-inline-start: 7px;
  border: 6px solid transparent; border-top: 9px solid #fff;
  filter: drop-shadow(0 2px 1px rgb(15 23 42 / .18));
}
.map-note i { display: block; height: 2px; border-radius: 1px; background: #C2334D; }
.map-note i:nth-child(1) { width: 20px; }
.map-note i:nth-child(2) { width: 14px; }
.map-note i:nth-child(3) { width: 18px; }

.map-note b {
  position: absolute; top: -7px; inset-inline-end: -7px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: #C2334D; color: #fff; font: 700 11px var(--font);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgb(15 23 42 / .3);
}
.map-note.on { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── شاشة المهمة المتكررة ── */
.te-repeat {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: start;
  padding: 4px 2px 10px;
}
.te-repeat:hover b { color: var(--accent); }
.te-repeat > i { display: flex; color: var(--text-3); flex: none; padding-top: 2px; }
.te-repeat > i svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.te-repeat > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.te-repeat span { font: 600 12px var(--font); color: var(--text); }
.te-repeat b { font: 500 12.5px var(--font); color: var(--text); }

.te-when2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.te-span { display: grid; grid-template-columns: 1fr 92px; gap: 6px; }
.te-span .input { font-size: 12px; padding: 6px 7px; width: 100%; }

/* القسم الإضافي مطوي حتى يطلب — ثلاثة حقول نادرة الاستعمال. */
.te-extra { display: flex; flex-direction: column; gap: 10px; }
.te-extra-head {
  display: flex; align-items: center; gap: 8px; border: 0; background: none;
  padding: 4px 0; cursor: pointer; color: var(--accent); font: 600 12.5px var(--font);
}
.te-extra-head i, .te-extra-head span { display: flex; }
.te-extra-head svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.te-extra-head span svg { transform: rotate(-90deg); transition: transform .2s; }
.te-extra-head.on span svg { transform: rotate(90deg); }
.te-extra-body { display: flex; flex-direction: column; gap: 12px; }

.te-optimise {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 0; background: none; cursor: pointer; padding: 11px 2px;
  font: 600 12.5px var(--font); color: var(--accent); letter-spacing: .2px;
}
.te-optimise:hover { text-decoration: underline; }
.te-optimise span { display: flex; }
.te-optimise svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── نافذة التكرار: أسبوعيا أو شهريا ── */
.rpt-wrap { display: flex; flex-direction: column; gap: 16px; }
.rpt-tabs { display: flex; border-block-end: 1px solid var(--border); }
.rpt-tab {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 12px 8px;
  font: 600 12.5px var(--font); color: var(--text-3); position: relative;
}
.rpt-tab.on { color: var(--accent); }
.rpt-tab.on::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--accent);
}
.rpt-note { margin: 0; font: 500 12.5px var(--font); color: var(--text); }
.rpt-body { display: flex; flex-direction: column; gap: 14px; }

.rpt-days { display: flex; justify-content: space-between; gap: 6px; }
.rpt-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; justify-items: center; }
.rpt-chip {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  font: 600 11.5px var(--font); color: var(--text-2);
}
.rpt-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.rpt-presets { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rpt-preset {
  border: 0; border-radius: 6px; background: var(--surface-2); cursor: pointer;
  padding: 7px 12px; font: 500 12px var(--font); color: var(--text-2);
}
.rpt-preset:hover { background: var(--accent-soft); color: var(--accent); }

/* ── حقول بصندوق واحد كحقولهم ── */
.te-combo {
  display: flex; align-items: center; gap: 7px; cursor: text;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 0 11px; height: 38px;
}
.te-combo:focus-within { border-color: var(--accent); }
.te-num {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 500 13px var(--font); color: var(--text); padding: 0;
}
.te-unit { font: 400 12.5px var(--font); color: var(--text-3); flex: none; }
/* بلا أسهم زيادة ونقصان: الحقل رقم يكتب، والقائمة من السهم وحده. */
.te-num::-webkit-outer-spin-button,
.te-num::-webkit-inner-spin-button { appearance: none; margin: 0; }
.te-num { appearance: textfield; -moz-appearance: textfield; }

.te-combo { position: relative; }
.te-combo-menu {
  position: absolute; inset-inline-start: 0; min-width: 100%; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; padding: 4px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  box-shadow: 0 10px 24px rgb(15 23 42 / .16);
}
.te-combo-opt {
  border: 0; background: none; cursor: pointer; text-align: start;
  padding: 7px 9px; border-radius: 6px;
  font: 500 12px var(--font); color: var(--text);
}
.te-combo-opt:hover { background: var(--surface-2); }
.te-combo-opt.on { color: var(--accent); }

/* صف «إضافية»: رمز وعنوان وسهم على الطرف، بخطين فوقه وتحته. */
.te-extra { border-block: 1px solid var(--border); padding-block: 4px; gap: 0; }
.te-extra-head { width: 100%; justify-content: flex-start; padding: 12px 2px; color: var(--text); }
.te-extra-head b { flex: 1; font: 600 13px var(--font); }
.te-extra-head > span { margin-inline-start: auto; color: var(--text-3); }
.te-extra-body { padding-block-end: 14px; }

.te-save {
  border: 0; background: none; cursor: pointer; padding: 8px 10px;
  font: 700 13px var(--font); color: var(--accent); letter-spacing: .4px;
}
.te-save:hover { text-decoration: underline; }

/* ── أدوات الخريطة في بطاقة المهام ── */
.fs-mapcard { position: relative; }
.fs-mtools {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 500;
  display: flex; flex-direction: column; gap: 6px;
}
.fs-mtool {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  box-shadow: 0 2px 6px rgb(15 23 42 / .22);
  display: flex; align-items: center; justify-content: center;
}
.fs-mtool:hover { color: var(--accent); }
.fs-mtool svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.fs-layers-wrap { position: relative; }
.fs-layers {
  position: absolute; top: 0; inset-inline-end: 40px; min-width: 120px;
  display: flex; flex-direction: column; padding: 4px;
  border-radius: 8px; background: var(--surface);
  box-shadow: 0 6px 20px rgb(15 23 42 / .22);
}
.fs-layer {
  border: 0; background: none; cursor: pointer; text-align: start;
  padding: 8px 10px; border-radius: 6px;
  font: 500 12px var(--font); color: var(--text);
}
.fs-layer:hover { background: var(--surface-2); color: var(--accent); }

/* سهم طي الخريطة ينقلب باتجاه ما سيفعله. */
.fs-tool-fold svg { transition: transform .2s; }
.fs-tool-fold.on svg { transform: rotate(180deg); }

/*
    ممرر أفقي واحد للقائمة: الجدول كان داخل <c>.table-wrap</c> يمرر نفسه،
    وصف المرشحات يمر مع البطاقة — فيتزحزح كل منهما وحده وتنفصل الخانة
    عن عمودها.
*/
.fs-list .table-wrap { overflow: visible; }
.fs-list { overflow: auto; }

/* ── الخط الزاحف: شرطات تمشي على طول خط المسار كخطهم ── */
@keyframes fo-ant-path {
  from { stroke-dashoffset: 100%; }
  to   { stroke-dashoffset: 0; }
}
.ant-path { animation: fo-ant-path linear infinite; }

/* ── ترتيب المسار: نقطة البداية ووقتها، ثم معاينة الترتيب قبل تطبيقه ── */
.te-opt { border-block-start: 1px solid var(--border); padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.te-opt .te-f span { color: var(--text-3); }
.te-optacts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.te-optacts .a {
  border: 0; background: none; cursor: pointer; padding: 8px 12px; border-radius: 6px;
  font: 600 12.5px var(--font); color: var(--text-2); letter-spacing: .2px;
}
.te-optacts .a:hover { background: var(--surface-2); }
.te-optacts .a.go { color: var(--accent); display: flex; align-items: center; gap: 6px; }
.te-optacts .a.go:disabled { color: var(--text-3); cursor: default; background: none; }
.te-optacts .a.go svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.te-opt .hint { font-size: 11px; color: var(--text-3); }

/* علم البداية على الخريطة — بلونه عندهم. */
.map-flag {
  width: 30px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px 8px 8px 2px; background: #fff; border: 2px solid #ffa500;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .22);
}
.map-flag svg { width: 17px; height: 17px; stroke: #ffa500; fill: none; stroke-width: 2; }

/* لوحة الحقول تنزوي ما دام ترتيب المسار مفتوحا. */
.te-right.te-away { display: none; }

/* حالة المهمة داخل لوحة الحقول — سطر يقرأ ولا يحرر، كسطرهم. */
.te-tstatus { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.te-tstatus > i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-3); }
.te-tstatus > i.s1 { background: #2A4E9B; }
.te-tstatus > i.s2 { background: #0E7C6B; }
.te-tstatus > i.s3 { background: #52A800; }
.te-tstatus > i.s4 { background: #8B5CF6; }
.te-tstatus > i.s5 { background: #CF8B12; }
.te-tstatus > i.s6 { background: #C2334D; }
.te-tstatus b { font: 500 12.5px var(--font); color: var(--text); }

/* اسم المهمة في الجدول رابط يفتح، وبقية الصف تختار لا غير. */
.ti-open { border: 0; background: none; padding: 0; cursor: pointer; font: 600 12.5px var(--font); color: var(--text); text-align: start; }
.ti-open:hover { color: var(--accent); text-decoration: underline; }

/* ═══════════════════ قواعد التنبيه — لوحتا النظام المرجعي ═══════════════════ */

.ar-wrap {
  display: grid; grid-template-columns: 330px 1fr; gap: 16px;
  align-items: start;
}

.ar-rules, .ar-settings {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; overflow: hidden;
}
.ar-rules { height: calc(100vh - 150px); }
.ar-settings { height: calc(100vh - 150px); }

.ar-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 16px 18px 12px;
}
.ar-head h3 { font-size: 17px; font-weight: 700; margin: 0; }

/* زر الإضافة قرص ملون في رأس اللوحة كما هناك. */
.ar-add {
  width: 38px; height: 38px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(14, 124, 107, .3);
}
.ar-add:hover { filter: brightness(1.06); }
.ar-add svg { stroke: currentColor; fill: none; stroke-width: 2; }

.ar-search {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 18px 10px; border-bottom: 1px solid var(--border-soft);
  color: var(--text-3);
}
.ar-search svg { stroke: currentColor; fill: none; stroke-width: 1.8; display: block; }
.ar-search-i {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 400 13px var(--font); color: var(--text);
}

.ar-list { flex: 1; overflow: auto; }

.ar-group {
  padding: 12px 18px 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2);
  border-bottom: 1px solid var(--border-soft);
}

.ar-row {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  border-inline-end: 3px solid transparent;
}
.ar-row:hover { background: var(--surface-2); }
.ar-row.on { background: var(--accent-soft); border-inline-end-color: var(--accent); }
.ar-row.off .nm { color: var(--text-3); text-decoration: line-through; }
.ar-row .nm { flex: 1; min-width: 0; font-size: 13px; }
.ar-row .acts { display: flex; gap: 2px; opacity: 0; flex: none; }
.ar-row:hover .acts, .ar-row.on .acts { opacity: 1; }

.ar-ic {
  border: 0; background: none; cursor: pointer; padding: 4px;
  color: var(--text-3); display: flex; border-radius: 6px;
}
.ar-ic:hover { color: var(--text); background: var(--surface-3); }
.ar-ic svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
.ar-ic.pause { color: var(--warn); }
.ar-ic.pause.on { color: var(--good); }

.ar-none { padding: 24px 18px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ─── لوحة الضبط: قائمة الأجسام ثم الألسنة */
.ar-split { flex: 1; display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
.ar-objpane {
  border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.ar-objpane .ar-search { padding-top: 0; }
.ar-objs { flex: 1; overflow: auto; }

.ar-obj {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px; font-size: 12.5px; cursor: pointer;
}
.ar-obj:hover { background: var(--surface-2); }
.ar-obj input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; }
.ar-obj .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-obj.root { font-weight: 600; border-bottom: 1px solid var(--border-soft); }
.ar-obj.root .n { color: var(--text-3); font-weight: 400; }

.ar-pane { display: flex; flex-direction: column; min-height: 0; }

.ar-tabs { display: flex; flex: none; border-bottom: 1px solid var(--border); }
.ar-tab {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 13px 8px;
  font: 600 13px var(--font); color: var(--text-3);
  border-bottom: 2px solid transparent;
}
.ar-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ar-tab:hover { color: var(--text); }

.ar-tabbody { flex: 1; overflow: auto; padding: 18px 22px; }

.ar-h { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.ar-tabbody .ar-h:not(:first-child) { margin-top: 24px; }

.ar-field { margin-bottom: 16px; max-width: 460px; }
.ar-field > label { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 5px; }
.ar-field .input, .ar-field .select { width: 100%; }
.ar-hint { font-size: 11.5px; color: var(--text-3); margin: 5px 0 0; line-height: 1.7; }

/* الحقل غير القابل للتعديل يقرأ ولا يوهم بأنه حقل. */
.ar-ro {
  padding: 9px 11px; font-size: 13.5px; color: var(--text-2);
  background: var(--surface-2); border-radius: var(--radius-sm);
}

.ar-checks { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 4px 0 8px; }
.ar-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ar-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.ar-q { color: var(--warn); display: flex; cursor: help; }
.ar-q svg { stroke: currentColor; fill: none; stroke-width: 1.8; }

.ar-zonebind { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }

.ar-recips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ar-recip-h { font-size: 11.5px; color: var(--text-3); margin-bottom: 6px; }
.ar-recip-r { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.ar-recip-r .input { flex: 1; min-width: 0; }

/* ─── شبكة الجدولة */
.ar-schedhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.ar-schedhead .select { width: 220px; }
.ar-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.ar-legend .sw { width: 13px; height: 16px; border-radius: 2px; background: var(--border); display: inline-block; }
.ar-legend .sw.on { background: var(--accent); }

/* الشبكة LTR كمحور الزمن في أي نظام: الساعات تمشي من اليسار إلى اليمين.
   وأسماء الأيام في عمودها تبقى عربية تقرأ. */
.ar-grid {
  direction: ltr;
  display: grid; grid-template-columns: 46px repeat(24, minmax(0, 1fr));
  gap: 2px; user-select: none; max-width: 760px;
}
.ar-corner { }
.ar-hh { font-size: 9.5px; color: var(--text-3); text-align: start; white-space: nowrap; }
.ar-dd {
  font-size: 11px; color: var(--text-2); text-align: end; padding-inline-end: 8px;
  display: flex; align-items: center; justify-content: flex-end; direction: rtl;
}
.ar-cell {
  height: 20px; border-radius: 2px; background: var(--border); cursor: pointer;
}
.ar-cell:hover { outline: 1px solid var(--accent); }
.ar-cell.on { background: var(--accent); }

/* ─── ذيل اللوحة */
.ar-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 18px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2);
}
.ar-save {
  border: 0; background: none; cursor: pointer;
  font: 700 12.5px var(--font); letter-spacing: .4px; color: var(--accent);
  padding: 4px 6px; border-radius: 6px;
}
.ar-save:hover { background: var(--accent-soft); }

/* ─── معالج القاعدة الجديدة */
.ar-wizard { display: grid; grid-template-columns: 260px 1fr; gap: 0; min-height: 420px; }
.ar-wizard > div:first-child { border-inline-end: 1px solid var(--border); }
.ar-wizard .ar-objpane { border: 0; height: 100%; }
.ar-wizard .ar-tabbody { padding: 18px 20px; }

.ar-steps { display: flex; gap: 4px; flex: none; border-bottom: 1px solid var(--border); padding: 0 8px; }
.ar-step {
  display: flex; align-items: center; gap: 7px; flex: 1;
  border: 0; background: none; cursor: pointer; padding: 13px 6px;
  font: 600 12.5px var(--font); color: var(--text-3);
  border-bottom: 2px solid transparent;
}
.ar-step i {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--surface-3); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font); font-style: normal;
}
.ar-step.on { color: var(--accent); border-bottom-color: var(--accent); }
.ar-step.on i, .ar-step.done i { background: var(--accent); color: #fff; }

.modal.ar-modal { width: min(1000px, 94vw); }
.modal.ar-modal .modal-body { padding: 0; }
.modal.ar-modal .ar-foot { border-top: 0; }

@media (max-width: 1180px) {
  .ar-wrap { grid-template-columns: 1fr; }
  .ar-rules { height: auto; max-height: 420px; }
  .ar-settings { height: auto; }
  .ar-split { grid-template-columns: 1fr; }
  .ar-objpane { border-inline-end: 0; border-bottom: 1px solid var(--border); max-height: 260px; }
  .ar-wizard { grid-template-columns: 1fr; }
}

/* مجموعات الأجسام في لوحة الضبط — كلوحة الأجسام على الخريطة. */
.ar-obj.grp { background: var(--surface-2); font-weight: 600; font-size: 12px; }
.ar-obj.grp .n { color: var(--text-3); font-weight: 400; }
.ar-obj.sub { padding-inline-start: 34px; }

.ar-fold {
  border: 0; background: none; cursor: pointer; padding: 2px; flex: none;
  color: var(--text-3); display: flex; border-radius: 4px;
}
.ar-fold svg { stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform .12s; }
/* السهم في RTL يشير إلى البداية، ودورانه تسعين درجة يعني «مفتوحة». */
.ar-fold svg { transform: scaleX(-1); }
.ar-fold.on svg { transform: rotate(90deg); }

/* ─── خلية الموقع في التقرير ولوحة خريطتها
   الخلية زر يبدو رابطا: تفتح النقطة على خريطة تنزلق من جانب الشاشة، كما
   في النظام المرجعي — ولا تخرج القارئ من التقرير إلى تبويب جديد. */
.rp-geo {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: start;
  font: inherit; color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px;
}
.rp-geo:hover { color: var(--accent-hover); }

.rp-map {
  position: fixed; inset-block: 64px 12px; inset-inline-start: 12px;
  width: min(520px, 46vw); z-index: 700;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
.rp-map-canvas { position: absolute; inset: 0; }
.rp-map-x {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 500;
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rp-map-x:hover { color: var(--text); background: var(--surface-2); }
.rp-map-x svg { stroke: currentColor; fill: none; stroke-width: 1.8; }

.rp-pop b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.rp-pop .faint { font-size: 11.5px; }

@media (max-width: 900px) {
  .rp-map { inset-inline: 12px; width: auto; inset-block: auto 12px; height: 46%; }
}

/* ═══════════════════ لوحة المشغل — لسان «الإجمالي» ═══════════════════ */

.ob-tabs { display: flex; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.ob-tab {
  border: 0; background: none; cursor: pointer; padding: 9px 16px;
  font: 600 13px var(--font); color: var(--text-3);
  border-bottom: 2px solid transparent;
}
.ob-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ob-tab:hover { color: var(--text); }

.ob-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.ob-total { display: flex; flex-direction: column; }
.ob-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.ob-by { display: flex; gap: 2px; }
.ob-by-tab {
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  padding: 6px 12px; font: 600 12px var(--font); color: var(--text-2);
}
.ob-by-tab:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.ob-by-tab:last-child { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.ob-by-tab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.ob-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.ob-leg { display: inline-flex; align-items: center; gap: 5px; }
.ob-leg i, .ob-line i { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.ob-line i.ghost { background: none; }

/* بطاقات الحصيلة: شبكة تملأ العرض، وكل بطاقة سطر لكل حالة. */
.ob-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px; padding: 14px;
}
.ob-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 11px 13px;
}
.ob-card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ob-card-h b { font-size: 13.5px; }
.ob-card-h .faint { font-size: 11px; }

.ob-line { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 2px 0; }
.ob-line span { flex: 1; color: var(--text-2); }
.ob-line b { font-variant-numeric: tabular-nums; }

.ob-total-line {
  display: flex; justify-content: space-between; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--border-soft); font-size: 12.5px; font-weight: 700;
}

/* لوحة المخطط: مفتاح الألوان فوقه والمخطط تحته — كلوحة المعلومات. */
.ob-plot { padding: 14px; border-top: 1px solid var(--border); }
.ob-plot .legend { margin-bottom: 10px; }

/* ارتفاع ثابت للمخطط، وعرضه عرض البطاقة — والرسم يتبع المقاس بالبكسل. */
.ob-plot .chart-wrap { height: 240px; }

/* ═══════════ القيادة الاقتصادية ═══════════ */

.eco-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 12px 14px; }
.eco-filter { display: flex; align-items: center; gap: 8px; }
.eco-filter.end { margin-inline-start: auto; }

.eco-days { display: flex; gap: 4px; }
.eco-day {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.eco-day:hover { border-color: var(--accent); }
.eco-day.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ثلاثة أعمدة كما في شاشة المصدر، وتنهار إلى عمود واحد على الشاشات الضيقة. */
.eco-penalty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.eco-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.eco-col > p { margin: 0 0 6px; font-size: 12px; line-height: 1.7; }

.eco-row { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(80px, 1.1fr) auto; align-items: center; gap: 10px; }
.eco-row > span:first-child { font-size: 13px; color: var(--text-2); }
.eco-row > b { min-width: 28px; text-align: end; }

.eco-range { accent-color: var(--accent); width: 100%; min-width: 90px; }

.eco-limit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.eco-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

@media (max-width: 900px) {
  .eco-penalty { grid-template-columns: 1fr; }
}

/* عين إظهار كلمة المرور — داخل الحقل في نهايته المنطقية. */
.pw-field { position: relative; display: flex; min-width: 0; }
.pw-field > .input { flex: 1; padding-inline-end: 38px; }
.pw-eye {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--text-3); cursor: pointer;
}
.pw-eye:hover { background: var(--surface-2); color: var(--text); }

/* رابط «نسيت كلمة المرور» تحت الحقل، محاذٍ لنهايته. */
.login-card .pw-forgot { display: flex; justify-content: flex-end; margin-top: 2px; }
.login-card .pw-forgot button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--accent);
}
.login-card .pw-forgot button:hover { text-decoration: underline; }

/* نموذجا «نسيت كلمة المرور» و«كلمة مرور جديدة» — في مكان نموذج الدخول نفسه. */
.reset-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.reset-form .hint { margin: 0; font-size: 12px; line-height: 1.7; color: var(--text-2); }
.reset-form .btn { height: 40px; }