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

.ops {
  flex: 1; position: relative; min-height: 0; background: var(--m-bg); color: var(--m-text);

  /* الحيز الذي يحجزه الشريط السفلي: 22px ارتفاعه عن الحافة + علوه مع شريط التمرير الأفقي + فرجة.
     ما يمر فوق منتصف الخريطة ينتهي عنده. */
  --dock-space: 96px;

  /* عرض لوحة الأجسام. وكل ما يركن بجانبها يحسب منه (‎+28‎ = فجوتان)، فلا
     يبقى عرض مكتوب في ثلاثة مواضع ينسى أحدها عند التعديل. */
  --obj-w: 300px;
}

.ops-canvas { position: absolute; inset: 0; }
#map { position: absolute; inset: 0; background: var(--m-bg); }

.leaflet-container { background: var(--m-bg); font-family: var(--font); }
.leaflet-control-attribution {
  background: rgba(255,255,255,.85) !important;
  color: var(--m-text-3) !important;
  font-size: 10px !important;
  border-radius: 6px 0 0 0;
}
.leaflet-control-attribution a { color: var(--m-text-2) !important; }

/* ═══════════════════════ لوحة الأجسام ═══════════════════════ */

.obj-panel {
  position: absolute; inset-inline-start: 14px; top: 14px; bottom: 14px;
  width: var(--obj-w); z-index: 620;
  background: var(--surface);
  border: 1px solid var(--m-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* المطوية شريط بعرض ٣٦ بكسل بلا خلفية ولا إطار — بقياس النظام المرجعي.
   تبقى بارتفاعها لا لتعرض شيئا، بل ليبقى زر الفتح في موضعه الذي ترك فيه. */
.obj-panel.collapsed {
  width: 36px;
  background: none; border: 0; box-shadow: none; overflow: visible;
}
.obj-panel.collapsed > *:not(.obj-reopen) { display: none; }

/* كل ما يركن بجانب لوحة الأجسام يتبعها حين تطوى: ٣٦٤ محسوبة على عرضها
   مفتوحة (١٤ + ٣٣٦ + ١٤)، فلو بقيت كما هي ترك الطي شريط خريطة فارغا
   بعرض اللوحة المختفية — وهو ما يجعل الطي بلا معنى. ٦٤ = ١٤ + ٣٦ + ١٤. */
.ops.objs-collapsed .hist-panel,
.ops.objs-collapsed .obj-detail,
.ops.objs-collapsed .map-alert { inset-inline-start: 64px; }

/* زر الفتح: دائرة بيضاء بظل خفيف — ٣٦ بكسل وظل ‎0 2px 6px‎ كما هناك. */
.obj-reopen {
  display: none;
  width: 36px; height: 36px; margin: 8px 0; flex: none;
  border: 0; border-radius: 50%;
  background: var(--surface); color: var(--m-text-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
  cursor: pointer; align-items: center; justify-content: center;
}
.obj-panel.collapsed .obj-reopen { display: flex; }
.obj-reopen:hover { color: var(--accent); }

/* اللوحة في جهة البداية (اليمين في RTL)، ففتحها يمتد يسارا — والسهم يقوله. */
.obj-reopen svg,
.hist-reopen svg {
  width: 18px; height: 18px; transform: scaleX(-1);
  stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.obj-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px 10px; flex: none; }
.obj-head h2 { font-size: 16px; font-weight: 700; }
.obj-head .tools { margin-inline-start: auto; display: flex; gap: 2px; }
.obj-icon-btn {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none;
  color: var(--m-text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.obj-icon-btn:hover { background: var(--surface-3); color: var(--m-text); }
.obj-icon-btn.on { background: var(--accent-soft); color: var(--accent); }
.obj-icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.obj-search { display: flex; align-items: center; gap: 9px; padding: 0 14px 10px; flex: none; }
.obj-search .f { position: relative; flex: 1; min-width: 0; }
.obj-search > input[type="checkbox"],
.obj-group > input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent); flex: none; cursor: pointer;
}
.obj-search input[type="search"] {
  width: 100%; height: 28px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--m-text);
  padding-inline: 30px 10px; font-size: 12.5px;
}
.obj-search input::placeholder { color: var(--m-text-3); }
.obj-search input[type="search"]:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.obj-search .ico { position: absolute; inset-inline-start: 8px; top: 6px; color: var(--m-text-3); display: flex; }
.obj-search .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }


.obj-list { flex: 1; overflow-y: auto; min-height: 0; border-top: 1px solid var(--border-soft); }

/* رأس المجموعة */
.obj-group {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; position: sticky; top: 0; z-index: 2;
}
.obj-group .sw { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.obj-group b { font-size: 13px; font-weight: 700; }
.obj-group .cnt { color: var(--m-text-2); font-size: 12px; font-family: var(--font-mono); }
.obj-group .chev { margin-inline-start: auto; color: var(--m-text-3); display: flex; transition: transform .15s; }
.obj-group .chev svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.obj-group.closed .chev { transform: rotate(-90deg); }

/* صف الجسم — بترتيب النظام المرجعي: مربع ثم رمز الجهاز في دائرة، وإلى
   جانبهما الاسم وتحته سطر الحالة، ثم صف ثالث من كبسولات القياس. */
.obj-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  border-inline-start: 3px solid transparent;
  cursor: pointer; font-size: 11px;
}
.obj-row:hover { background: var(--surface-2); }
.obj-row.on { background: var(--accent-soft); border-inline-start-color: var(--accent); }

.obj-row .ln { display: flex; align-items: center; gap: 10px; }
.obj-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* دائرة الرمز بقياس النظام المرجعي: ٣٦ بكسل وأرضية بيضاء ورمز بعشرين —
   بفيروزي النظام ‎#16A596‎ (وهو فيروزي أوراق CRM نفسه) لا بأزرق المرجع. */
/* اللون يأتي من JS بلون المجموعة، والإطار يتبعه مخففا — <c>currentColor</c>
   لا يقبل شفافية وحده، فيمزج بالأبيض. والسطر الأول احتياط لمتصفح لا
   يعرف <c>color-mix</c>. */
.obj-row .av {
  width: 23px; height: 23px; flex: none; border-radius: 50%;
  background: #fff; color: #16A596;
  border: 1px solid rgba(22, 165, 150, .35);
  border-color: color-mix(in srgb, currentColor 38%, #fff);
  display: flex; align-items: center; justify-content: center;
}
.obj-row .av svg { width: 13px; height: 13px; }

.obj-row .tx { min-width: 0; flex: 1; }
.obj-row .nm {
  display: block; font-size: 11px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obj-row .st {
  display: flex; align-items: center; gap: 6px;
  /* سطر الحالة أصغر من الاسم بواحد: الاسم هو المقروء أولا. */
  font-size: 10px; color: var(--m-text-2); margin-top: 2px;
}
.obj-row .sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }


/* زر المعلومات: باهت حتى لا ينازع الاسم، ويتضح عند المرور. */
.obj-info {
  margin-inline-start: auto; flex: none;
  width: 24px; height: 24px; border: 0; border-radius: 7px;
  background: none; color: var(--m-text-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.obj-info:hover { background: var(--surface-3); color: var(--accent); }
.obj-info svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* صف القياسات: كبسولات تبدأ تحت دائرة الرمز لا تحت المربع — فتصطف مع
   الاسم فوقها. (١٦ مربع + ١٠ فجوة = ٢٦) */
.obj-row .chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 7px; padding-inline-start: 26px;
}

/* الكبسولة: إطار رفيع ونص رمادي، واللون في الرمز وحده — كما في المرجع. */
.obj-metric {
  display: inline-flex; align-items: center; gap: 4px;
  height: 16px; padding-inline: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--m-text-2); font-size: 10px; font-variant-numeric: tabular-nums;
}
.obj-metric span:not(.gl) svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--m-text-3); }
.obj-metric .gl { align-items: center; flex: none; }
.obj-metric .gl svg { width: 100%; height: 100%; flex: none; }

/* قائمة منسدلة — ملحوقة بالجسد لا باللوحة، فاللوحة تقص ما يخرج عنها. */
.drop {
  position: fixed; z-index: 1200; min-width: 164px; padding: 5px;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(24,32,49,.22);
}
.drop-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: 7px;
  font: 500 12.5px var(--font); color: var(--m-text); text-align: start;
}
.drop-item:hover { background: var(--surface-3); }
.drop-item.on { color: var(--accent); font-weight: 600; }
/* عرض ثابت للعلامة: بدونه تزيح الأسطر غير المختارة عن المختار. */
.drop-item .tick { width: 12px; flex: none; color: var(--accent); }

/* لوحة ألوان المسار: خمسة في الصف، والشبكة هي التي تحدد عرض القائمة
   فيكبر المربع دون أن يقص. */
.drop-swatches {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--m-edge);
}
.drop-sw {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,.12); border-radius: 5px;
}
/* المختار يعلم بإطار خارجه لا بحد داخله: الحد يقضم اللون نفسه، وهو
   الشيء الوحيد الذي يقرأ في المربع. */
.drop-sw.on { outline: 2px solid var(--m-text); outline-offset: 2px; }

/* ─── نافذة المدى الزمني */
.rp { display: flex; gap: 0; align-items: stretch; }
.rp-presets {
  display: flex; flex-direction: column; gap: 2px; flex: none; width: 150px;
  padding-inline-end: 14px; border-inline-end: 1px solid var(--border-soft);
}
.rp-preset {
  border: 0; background: none; cursor: pointer; border-radius: 7px;
  padding: 9px 10px; text-align: start;
  font: 500 12.5px var(--font); color: var(--m-text);
}
.rp-preset:hover { background: var(--surface-3); color: var(--accent); }

.rp-main { flex: 1; min-width: 0; padding-inline-start: 16px; }
.rp-fields { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-date, .rp-time {
  height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--m-text); font-size: 12.5px; padding: 0 8px;
}
.rp-date { flex: 1; min-width: 118px; }
.rp-time { width: 86px; }
.rp-dash { color: var(--m-text-3); }

.rp-months { display: flex; gap: 20px; }
.rp-month { flex: 1; min-width: 0; }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rp-head b { font-size: 12.5px; }
.rp-nav {
  width: 26px; height: 26px; border: 0; border-radius: 7px; background: none;
  color: var(--m-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rp-nav:hover { background: var(--surface-3); }
.rp-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; transform: rotate(90deg); }
/* السهمان متقابلان: واحد للشهر السابق وآخر للتالي في لوحة واحدة. */
.rp-nav.flip svg { transform: rotate(-90deg); }

.rp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rp-dow { text-align: center; font-size: 10.5px; color: var(--m-text-3); padding-bottom: 4px; }
.rp-day {
  aspect-ratio: 1; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: 500 12px var(--font); color: var(--m-text);
  font-variant-numeric: tabular-nums;
}
.rp-day:hover:not(:disabled) { background: var(--surface-3); }
.rp-day:disabled { color: var(--m-text-3); cursor: default; }
/* ما بين الطرفين يظلل بلون باهت، والطرفان ممتلئان — فيقرأ المدى كاملا. */
.rp-day.in { background: var(--accent-soft); border-radius: 0; }
.rp-day.on { background: var(--accent); color: #fff; }

.rp-count { color: var(--m-text-2); font-size: 12px; margin-inline-end: auto; }

/* على الشاشة الضيقة: المدد الجاهزة صفا فوق، وشهر واحد — شهران متجاوران
   في 400 بكسل يصيران عمودين لا يقرأ أي منهما. */
@media (max-width: 760px) {
  .rp { flex-direction: column; }
  .rp-presets {
    width: auto; flex-direction: row; flex-wrap: wrap;
    padding: 0 0 10px; border-inline-end: 0; border-bottom: 1px solid var(--border-soft);
  }
  .rp-main { padding-inline-start: 0; padding-top: 12px; }
  .rp-months > :last-child { display: none; }
}

/* ─── لوحة السجل */
.hist-panel {
  position: absolute; inset-inline-start: calc(var(--obj-w) + 28px); top: 14px; bottom: var(--dock-space);
  width: 330px; z-index: 615;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
/* السجل يطوى كما تطوى الأجسام: شريط بعرض ٣٦ وزر دائري يعيده — فيقرأ
   الجدول ثم يفسح للمسار الذي يصفه. */
.hist-panel.collapsed {
  width: 36px;
  background: none; border: 0; box-shadow: none; overflow: visible;
}
.hist-panel.collapsed > *:not(.hist-reopen) { display: none; }

.hist-reopen {
  display: none;
  width: 36px; height: 36px; margin: 8px 0; flex: none;
  border: 0; border-radius: 50%;
  background: var(--surface); color: var(--m-text-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
  cursor: pointer; align-items: center; justify-content: center;
}
.hist-panel.collapsed .hist-reopen { display: flex; }
.hist-reopen:hover { color: var(--accent); }

.hist-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px 10px; flex: none;
}
/* العنوان يأخذ ما بقي، فيلتصق زر الطي ببدايته وزر الإغلاق بنهايته. */
.hist-head b { font-size: 15px; flex: 1; }

.hist-range {
  display: flex; align-items: center; gap: 7px; margin: 0 14px 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 600;
}
.hist-range svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.hist-sum {
  display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 14px 10px;
  font-size: 11.5px; color: var(--m-text-2); font-variant-numeric: tabular-nums;
}

.hist-tabs { display: flex; padding: 0 14px; border-bottom: 1px solid var(--border-soft); flex: none; }
.hist-tab {
  border: 0; background: none; cursor: pointer; padding: 9px 12px;
  font: 600 12px var(--font); color: var(--m-text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hist-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.hist-tools {
  display: flex; gap: 2px; padding: 8px 12px 4px; flex: none;
  border-bottom: 1px solid var(--border-soft);
}
.hist-tool {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none;
  color: var(--m-text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hist-tool:hover { background: var(--surface-3); color: var(--accent); }
.hist-tool svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* تلميح النقطة: سطر لكل قراءة، الاسم رمادي والقيمة غامقة. */
.leaflet-tooltip.hist-tip {
  background: var(--surface); color: var(--m-text);
  border: 1px solid var(--m-edge); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(24,32,49,.2);
  padding: 7px 9px; font: 11.5px var(--font); direction: rtl;
}
.leaflet-tooltip.hist-tip::before { display: none; }
.hist-tip div { display: flex; justify-content: space-between; gap: 14px; }
.hist-tip span { color: var(--m-text-3); }
.hist-tip b { font-variant-numeric: tabular-nums; }
.hist-tip .co { direction: ltr; text-align: start; color: var(--m-text-2); margin-bottom: 3px; }

/* الطباعة: اللوحة وحدها على الورقة. */
@media print {
  body.printing-history .nav,
  body.printing-history .topbar,
  body.printing-history .ops-canvas,
  body.printing-history .obj-panel,
  body.printing-history .obj-detail,
  body.printing-history .map-dock,
  body.printing-history .map-side,
  body.printing-history .map-tools { display: none !important; }

  body.printing-history .hist-panel {
    position: static; width: auto; border: 0; box-shadow: none; max-height: none;
  }
  body.printing-history .hist-list { overflow: visible; }
  body.printing-history .hist-tools { display: none; }
}

.hist-device {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px 6px; flex: none;
  font-size: 12.5px; font-weight: 600;
}
.hist-device .cnt { color: var(--m-text-3); font-weight: 400; font-family: var(--font-mono); }

.hist-list { flex: 1; overflow-y: auto; min-height: 0; padding: 4px 14px 14px; }

/* القضيب العمودي: عمود ثابت العرض يمر بكل الأسطر، والعلامات تقف عليه. */
.hist-at, .hist-card { display: flex; gap: 10px; }
.hist-at .rail, .hist-card .rail {
  width: 24px; flex: none; display: flex; justify-content: center; position: relative;
}
.hist-at .rail::before, .hist-card .rail::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--border); border-radius: 1px;
}

.hist-at { align-items: center; padding: 3px 0; font-size: 11.5px; color: var(--m-text-2); }
.hist-at b { font-weight: 600; color: var(--m-text); font-variant-numeric: tabular-nums; }
.hist-at .date { color: var(--m-text-3); font-size: 11px; }
.hist-at .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong);
  position: relative; z-index: 1;
}

.hist-card { padding: 6px 0; cursor: pointer; align-items: stretch; }
.hist-card:hover .bd { background: var(--surface-2); }
.hist-card .mark {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font: 700 11px var(--font);
  position: relative; z-index: 1; border: 2px solid var(--surface);
}
.hist-card .mark.stop  { background: #374151; }
.hist-card .mark.event { background: var(--c-warn); }
.hist-card .mark svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.hist-card .bd {
  flex: 1; min-width: 0; border-radius: var(--radius-sm);
  padding: 7px 10px; background: var(--surface-2);
}
.hist-card .top { display: flex; align-items: center; gap: 7px; }
.hist-card .top input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--accent); flex: none; cursor: pointer; }
.hist-card b { font-size: 12.5px; }
.hist-card .sub {
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
  font-size: 11.5px; color: var(--m-text-2);
}
.hist-card .sub svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.hist-card .addr { font-size: 11px; color: var(--m-text-3); margin-top: 2px; }
.hist-card .chev { align-self: center; color: var(--m-text-3); display: flex; flex: none; }
.hist-card .chev svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2;
  /* في RTL يشير السهم إلى اليسار: دخول لا رجوع. */
  transform: rotate(90deg);
}

/* ───── بطاقة المدى المجمع: أول ما يرى عند فتح السجل ───── */

.hist-card.total { padding: 10px 0; }
.hist-card.total .bd { padding: 10px 12px; }

/* الطرفان متقابلان: الانطلاق في جهة والوصول في الأخرى، كما يقرأ المدى. */
.hist-card.total .ends {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
/* الفجوة على الحاوية لا هامش على التاريخ: التاريخ ‎direction: ltr‎، و
   ‎margin-inline-start‎ يحسب باتجاه العنصر نفسه فينقلب إلى الجهة الخطأ
   ويلتصق الوقت بالتاريخ — «14:5608-10-2026». */
.hist-card.total .ends > div { display: flex; align-items: baseline; gap: 6px; }
.hist-card.total .ends b { font-size: 14px; }
.hist-card.total .ends .date {
  font-size: 11px; color: var(--m-text-3); direction: ltr; unicode-bidi: isolate;
}

/* المسافة والمدة بين العنوانين — موضعهما في النظام المرجعي. */
.hist-card.total .sums {
  display: flex; align-items: center; gap: 16px;
  margin: 6px 0; font-size: 13px; font-weight: 600;
}
.hist-card.total .sums > span { display: flex; align-items: center; gap: 5px; }
.hist-card.total .sums svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; color: var(--m-text-3); }
.hist-card.total .addr { font-size: 11.5px; }

/* العودة من التفصيل إلى المجمع بلا إعادة اختيار المدى. */
.hist-back {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; padding: 5px 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 600 12.5px var(--font);
}
.hist-back svg { stroke: currentColor; fill: none; stroke-width: 2; }

.hist-empty { padding: 30px 18px; text-align: center; color: var(--m-text-3); font-size: 12.5px; }

/* علامات الخريطة */
.hist-stop {
  width: 22px; height: 22px; border-radius: 50%;
  background: #374151; color: #fff; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(24,32,49,.4);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font);
}
/* السهم داخل الخط: أبيض بلا ظل، ومدار من مركزه. الدوران يأتي من JS
   محسوبا من اتجاه القطعة، و‎➤‎ يشير يمينا في وضعه الطبيعي فيزاح ٩٠. */
.hist-arrow {
  font-size: 11px; line-height: 14px; width: 14px; height: 14px;
  text-align: center; color: #fff;
}

/* دبوسا البداية والنهاية: مربع أبيض مستدير الأركان بذيل مثلث تحته،
   كما في النظام المرجعي. الذيل من حد مائل لا من صورة. */
/* دبوسا البداية والنهاية بقياس ملف العلامة الذي زودنا به العميل نفسه:
   لوحة ‎38×38‎ نصف قطرها خمسة وذيل تحتها — وهي علامة المكان نفسها، فلا
   يكون على الخريطة الواحدة دبوسان بهيئتين. */
.hist-pin {
  position: relative; width: 38px; height: 38px;
  border-radius: 5px; background: #fff;
  box-shadow: 0 2px 7px rgba(24,32,49,.3);
  display: flex; align-items: center; justify-content: center;
}
.hist-pin::after {
  content: ''; position: absolute; top: 37px; inset-inline-start: 50%;
  margin-inline-start: -6.5px;
  border: 6.5px solid transparent; border-top: 6.6px solid #fff;
}
.hist-pin svg { width: 22px; height: 22px; display: block; }
.hist-pin.start { color: #2E8B57; }
.hist-pin.end { color: #1F2937; }
/* طرفا المسار المحسوب بلون خطه، فيعرفان أنهما له. */
.hist-pin.route { color: var(--accent); }

@media (max-width: 1180px) { .hist-panel { inset-inline-start: auto; inset-inline-end: 14px; } }

.obj-empty { padding: 36px 18px; text-align: center; color: var(--m-text-3); font-size: 12.5px; }

.obj-foot { flex: none; padding: 10px 14px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; }
.obj-foot .sum { font-size: 11.5px; color: var(--m-text-2); }
/* زر في ذيل اللوحة لا قرص عائم: القرص الملون بظله كان يقع فوق الشريط
   السفلي فيقرأ جزءا منه، وهو زر اللوحة لا زر الخريطة. */
/* زر السجل: مربع مملوء بلون النظام كما في النظام المرجعي — هو الفعل
   الأساسي في ذيل اللوحة، والزر الباهت كان يضيع بين النص. */
.obj-round {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(14,124,107,.35);
  margin-inline-start: auto;
}
.obj-round:hover { background: var(--accent-hover); }
.obj-round:disabled { background: var(--border-strong); box-shadow: none; cursor: not-allowed; }
.obj-round svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════ بطاقة التفاصيل ═══════════════════════ */

/* تنتهي البطاقة فوق الشريط السفلي لا عليه: الشريط في منتصف الخريطة والبطاقة
   تمر بالمنتصف، فنزولها إلى 14px كان يغطي العدادات وأزرار الخريطة. */
.obj-detail {
  position: absolute; inset-inline-start: calc(var(--obj-w) + 28px); top: 14px; bottom: var(--dock-space);
  width: 384px; z-index: 610;
  background: var(--surface);
  border: 1px solid var(--m-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.det-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-soft); flex: none; display: flex; align-items: flex-start; gap: 8px; }
.det-head .t { flex: 1; min-width: 0; }
.det-head h3 { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.det-head .sub { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--m-text-2); margin-top: 2px; }
.det-head .sub .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.det-body { flex: 1; overflow-y: auto; }

.det-sec { border-bottom: 1px solid var(--border-soft); }
.det-sec > .h {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; cursor: pointer;
}
.det-sec > .h b { font-size: 13.5px; font-weight: 700; }
.det-sec > .h .chev { margin-inline-start: auto; color: var(--m-text-3); display: flex; transition: transform .15s; }
.det-sec > .h .chev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.det-sec.closed > .h .chev { transform: rotate(-90deg); }
.det-sec.closed > .c { display: none; }
.det-sec > .c { padding: 0 16px 14px; }

/* سطر قياس: أيقونة، تسمية، قيمة، ونجمة تثبته في قائمة الأجسام */
.det-row { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; }
/* أيقونة السطر تحمل الحالة: اللون يقرأ قبل الرقم. الرمادي للسطر الذي لا
   قراءة له — لا يلون غياب الخبر أخضر. */
.det-row .ico { width: 20px; display: flex; justify-content: center; padding-top: 2px; color: var(--accent); flex: none; }
.det-row.good .ico { color: var(--c-good); }
.det-row.warn .ico { color: var(--c-warn); }
.det-row.crit .ico { color: var(--c-crit); }
.det-row.off  .ico,
.det-row.mute .ico { color: var(--m-text-3); }
.det-row .ico span:not(.gl) svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* الرموز المصمتة تحمل ألوانها في وسمها، فلا تمر على قاعدة الخطوط أعلاه. */
.det-row .ico .gl svg { width: 16px; height: 16px; }
.det-row .ico .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; }
.det-row .bd { flex: 1; min-width: 0; }
.det-row .bd .l { font-size: 11.5px; color: var(--m-text-2); line-height: 1.5; }
.det-row .bd .v { font-size: 13px; font-weight: 600; line-height: 1.6; word-break: break-word; }
.det-row .bd .x { font-size: 11.5px; color: var(--m-text-3); }
.det-star {
  border: 0; background: none; cursor: pointer; padding: 2px; line-height: 1;
  color: var(--border-strong); font-size: 15px; flex: none;
}
.det-star:hover { color: var(--c-warn); }
.det-star.on { color: var(--c-warn); }

.det-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.det-tabs .tab { padding: 8px 10px; font-size: 12.5px; }

/* شريط المدى والمصدر: يلتف عند الضيق ولا يعصر — حقل تاريخ مضغوط لا يقرأ. */
.det-range {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; font-size: 11.5px; color: var(--m-text-2);
  border-bottom: 1px solid var(--border-soft);
}
.det-range .det-date, .det-range .det-source {
  font: inherit; font-size: 11.5px; color: var(--m-text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px; min-width: 0;
}
.det-range .det-source { flex: 1; min-width: 96px; }
.det-range .det-reset {
  border: 0; background: none; cursor: pointer; padding: 3px 4px;
  font: inherit; font-size: 11px; color: var(--accent); text-decoration: underline;
}
.det-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.det-table th { text-align: start; font-size: 10.5px; font-weight: 600; color: var(--m-text-3); padding: 6px 10px; border-bottom: 1px solid var(--border-soft); }
.det-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-soft); }
.det-table tr:hover td { background: var(--surface-2); }
.det-empty { padding: 22px; text-align: center; color: var(--m-text-3); font-size: 12px; }

/* ═══════════════════════ أدوات الخريطة ═══════════════════════ */

.map-tools {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 600;
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
/* ─── أداة الأماكن
   تنزل تحت شريط الخريطة في جهته، كما تنزل في النظام المرجعي تحت شريطه. */
.place-panel {
  position: absolute; top: 68px; inset-inline-end: 14px; z-index: 614;
  width: 330px; max-height: calc(100% - 150px);
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.place-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px 8px; flex: none;
}
.place-head b { font-size: 15px; flex: 1; }

.place-tabs { display: flex; gap: 2px; padding: 0 12px; flex: none; }
.place-tab {
  border: 0; background: none; cursor: pointer; padding: 7px 10px;
  font: 600 12.5px var(--font); color: var(--m-text-3);
  border-bottom: 2px solid transparent;
}
.place-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.place-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--m-edge); flex: none;
}
.place-search input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; }
.place-search input[type="search"] {
  flex: 1; border: 0; background: none; outline: none;
  font: 400 13px var(--font); color: var(--m-text);
}
.place-search .ic { color: var(--m-text-3); display: flex; }
.place-search .ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.place-list { overflow: auto; flex: 1; }
.place-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid rgba(0,0,0,.05);
}
.place-row:hover { background: var(--surface-3); }
.place-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex: none; cursor: pointer; }
.place-row .nm { flex: 1; min-width: 0; cursor: pointer; }
.place-row .nm b { display: block; font-size: 13px; font-weight: 600; }
.place-row .nm span {
  display: block; font-size: 11.5px; color: var(--m-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.place-empty { padding: 20px 16px; font-size: 12.5px; color: var(--m-text-2); }
.place-empty b { display: block; margin-bottom: 6px; color: var(--m-text); }
.place-empty p { margin: 0 0 6px; }
.place-empty ul { margin: 0; padding-inline-start: 18px; line-height: 1.9; }

.place-foot {
  padding: 8px 12px; flex: none; font-size: 12px; color: var(--m-text-3);
  border-top: 1px solid var(--m-edge);
}

/* علامة المكان: لوحة بيضاء بذيل مثلث طرفه على الإحداثي نفسه، والرمز
   بداخلها بلونه — بقياس النظام المرجعي، أربعون بكسلا لا اثنان وعشرون: نقطة
   صغيرة فوق دائرة نطاق واسعة تضيع فيها. */
/* القياس من ملف العلامة الذي زودنا به العميل: ‎40×46.658‎ إجمالا، لوحة
   ‎38×38‎ نصف قطر زاويتها خمسة، وذيل تحتها طرفه على الإحداثي نفسه. */
.place-pin {
  --tail: #fff;
  position: relative; width: 38px; height: 38px;
  border-radius: 5px; background: #fff;
  box-shadow: 0 2px 7px rgba(24,32,49,.3);
  display: flex; align-items: center; justify-content: center;
}
/* الذيل بلون المربع: يأتي من JS في <c>--tail</c> لأن <c>color</c> هنا لون
   الرمز لا لون اللوحة، و<c>background</c> لا يقرأ من <c>::after</c>. */
.place-pin::after {
  content: ''; position: absolute; top: 37px; inset-inline-start: 50%;
  margin-inline-start: -6.5px;
  border: 6.5px solid transparent; border-top: 6.6px solid var(--tail);
}
.place-pin.white { border: 1px solid var(--m-edge); }

/* الرسم داخل المربع أكبر: نحو ثلثيه كما في ورقة الرموز، لا نصفه. */
.place-pin svg { display: block; width: 24px; height: 24px; }
.place-pin .num { font: 700 23px/1 var(--font); }

/* نافذة الاستيراد */
.place-import { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.place-import p { margin: 0; color: var(--m-text-2); line-height: 1.8; }
.place-file { font: 400 12.5px var(--font); }
.place-report { display: flex; flex-direction: column; gap: 4px; }
.place-count { font-weight: 600; margin-bottom: 4px; }
.place-prev { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--m-text-2); }
.place-prev.bad { color: var(--crit); }

.map-side {
  position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  z-index: 600; display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.map-btn {
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: none;
  color: var(--m-text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.map-btn:hover { background: var(--surface-3); color: var(--m-text); }
.map-btn.on { background: var(--accent-soft); color: var(--accent); }
/* انتظار المعالم: Overpass يأخذ ثواني، فيقال إن شيئا يجري. */
.map-btn.busy { animation: map-btn-busy 1s ease-in-out infinite; }
@keyframes map-btn-busy { 50% { opacity: .4; } }
.map-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-side .sep { height: 1px; background: var(--border-soft); margin: 2px 4px; }

.map-alert {
  position: absolute; bottom: 74px; inset-inline-start: calc(var(--obj-w) + 28px); z-index: 605;
  max-width: 420px;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-inline-end: 3px solid var(--crit);
  border-radius: var(--radius-sm); padding: 10px 13px;
  display: flex; gap: 11px; align-items: center;
  box-shadow: var(--shadow);
}
.map-alert .bd { flex: 1; min-width: 0; }
.map-alert .bd b { display: block; font-size: 12.5px; font-weight: 700; }
.map-alert .bd span { font-size: 11.5px; color: var(--m-text-2); }
.map-alert button { background: none; border: 0; color: var(--m-text-3); cursor: pointer; font-size: 17px; line-height: 1; }

/* شريط قياس المسافة */
.map-ruler {
  position: absolute; top: 60px; inset-inline-end: 14px; z-index: 605;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12px;
  box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 10px;
}
.map-ruler b { font-variant-numeric: tabular-nums; }

/* ═══════════════════════ الشارات على الخريطة ═══════════════════════ */

/* الشكل يفصل الحالتين قبل اللون: مثلث اتجاه للمتحركة ودائرة/حرف P للواقفة،
   والاسم مكتوب في لصيقة بجانبها. */
.veh-marker { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.veh-marker .pin {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(24,32,49,.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.veh-marker .pin svg { width: 14px; height: 14px; fill: currentColor; }

.veh-marker .tagname {
  background: var(--accent); color: #fff;
  border-radius: 6px; padding: 2px 8px;
  font-size: 11.5px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(24,32,49,.28);
}
.veh-marker.sel .pin { box-shadow: 0 0 0 4px var(--accent-line), 0 1px 4px rgba(24,32,49,.35); }
.veh-marker.sel .tagname { background: var(--accent-press); }


/* ─────────────── شارة التجميع
   اتجاهها LTR قسرا: مواضع الأرقام محسوبة بالزوايا حول الحلقة، وقلبها مع اتجاه
   الصفحة يضع كل رقم في الجهة المقابلة لقوسه. */
.veh-cluster {
  position: relative; width: 58px; height: 58px; direction: ltr;
  filter: drop-shadow(0 2px 6px rgba(24,32,49,.3));
}
.veh-cluster .cl-n {
  fill: #fff; font-size: 11px; font-weight: 700; font-family: var(--font);
  text-anchor: middle; dominant-baseline: central;
}
.veh-cluster .cl-core {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--m-text); pointer-events: none;
}
.veh-cluster .cl-core svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.marker-cluster { background: none; }

/* ─────────────── الشريط السفلي */
/* شريط واحد بقطعتين متلاصقتين، كشريط خريطة نظام النفايات: قطعتان منفصلتان
   بفجوة بينهما تقرآن شريطين، وتنزل إحداهما سطرا عند الضيق فيتبعثر السفل. */
.map-dock {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 606;
  direction: ltr; display: flex; justify-content: center; max-width: calc(100% - 24px);
}
/* القص على الحبة لا على الحاوية: نافذة «معلومات الخريطة» ابنة الحاوية وتقف
   فوقها، فقص الحاوية أفقيا يقصها معها. */
.dock-pill {
  display: flex; align-items: stretch; max-width: 100%;
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  overflow-x: auto; overflow-y: visible;
}
.dock-plain, .dock-main {
  display: flex; align-items: center; gap: 2px; padding: 6px 8px;
  flex: none; flex-wrap: nowrap;
}
.dock-plain { background: var(--surface); border-radius: 10px 0 0 10px; }
.dock-main { background: #0F4036; border-radius: 0 10px 10px 0; }

.dock-btn {
  position: relative; width: 40px; height: 38px; flex: none;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.88); transition: background .14s;
}
.dock-plain .dock-btn { color: var(--m-text-2); }
.dock-plain .dock-btn:hover { background: var(--surface-3); color: var(--m-text); }
.dock-plain .dock-btn.on { background: var(--surface-3); color: var(--m-text); }
.dock-main .dock-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.dock-main .dock-btn.on {
  background: rgba(255,255,255,.18); color: #fff;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.dock-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock-btn .ic { display: flex; }

.dock-badge {
  position: absolute; top: 1px; right: 0;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  box-shadow: 0 0 0 2px #0F4036;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dock-sep { width: 1px; align-self: stretch; margin: 4px 6px; background: rgba(255,255,255,.25); flex: none; }

/* فوق الشريط كله لا فوق نقطة ثابتة: الشريط ينزل سطرين عند الشاشات الضيقة. */
.dock-info {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 606;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px 13px; min-width: 240px; font-size: 12px;
}
.dock-info .li { display: flex; justify-content: space-between; gap: 18px; padding: 3px 0; }
.dock-info .li span { color: var(--m-text-2); }
.dock-info .li b { font-weight: 600; }
/* سقف التخزين: تنبيه لا خطأ — الشاشة والتنبيهات تعمل، والتاريخ وحده أقل تفصيلا. */
.dock-cap {
  margin-block-start: 8px; padding-block-start: 8px; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; line-height: 1.7; color: var(--warn);
}

.leaflet-popup-content-wrapper {
  background: var(--surface); color: var(--m-text);
  border: 1px solid var(--m-edge); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.leaflet-popup-tip { background: var(--surface); border: 1px solid var(--m-edge); }
.leaflet-popup-content { margin: 12px 14px; font-size: 12.5px; line-height: 1.7; min-width: 200px; }
.leaflet-popup-content b.title { font-size: 13.5px; display: block; margin-bottom: 6px; font-weight: 700; }
.leaflet-popup-content .kvline { display: flex; justify-content: space-between; gap: 14px; color: var(--m-text-2); }
.leaflet-popup-content .kvline span:last-child { color: var(--m-text); font-family: var(--font-mono); font-size: 11.5px; }
.leaflet-popup-close-button { color: var(--m-text-3) !important; }

/* ═══════════════════════ الشاشات الضيقة ═══════════════════════ */

@media (max-width: 1180px) {
  .obj-detail { inset-inline-start: auto; inset-inline-end: 14px; width: 340px; }
  .map-alert { inset-inline-start: 14px; }
}
@media (max-width: 860px) {
  .obj-panel { width: calc(100% - 28px); max-width: var(--obj-w); }
  .obj-detail { inset-inline: 14px; width: auto; top: auto; height: 46%; bottom: var(--dock-space); }
  .map-side { display: none; }
}

/* ═══════════════════════ المناطق الجغرافية ═══════════════════════ */

/* تبويبا اللوحة: الأجسام / المناطق */
.obj-tabs { display: flex; gap: 2px; padding: 0 14px; margin-bottom: 10px; flex: none; }
.obj-tabs button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500; color: var(--m-text-2);
  border-radius: 7px;
}
.obj-tabs button:hover { background: var(--surface-3); color: var(--m-text); }
.obj-tabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* شريط الرسم فوق الخريطة */
.draw-bar {
  position: absolute; top: 62px; inset-inline-end: 14px; z-index: 615;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 9px;
  max-width: 290px;
}
.draw-bar .row-tools { display: flex; gap: 6px; }
.draw-tool {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--radius-sm); padding: 6px 10px;
  font-size: 12px; font-weight: 600; color: var(--m-text); cursor: pointer;
}
.draw-tool:hover { background: var(--surface-2); }
.draw-tool.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.draw-tool svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.draw-bar .hint { font-size: 11.5px; color: var(--m-text-2); line-height: 1.6; }
.draw-bar .actions { display: flex; gap: 6px; }

/* صف منطقة في اللوحة */
.zone-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
  border-inline-start: 3px solid transparent; cursor: pointer;
}
.zone-row:hover { background: var(--surface-2); }
.zone-row.on { background: var(--accent-soft); border-inline-start-color: var(--accent); }
.zone-row .swatch { width: 26px; height: 26px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.zone-row .swatch svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.zone-row .bd { flex: 1; min-width: 0; }
.zone-row .nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-row .sub { font-size: 11.5px; color: var(--m-text-2); }
.zone-row .acts { display: flex; gap: 2px; }
.zone-row .acts button {
  width: 26px; height: 26px; border: 0; border-radius: 7px; background: none;
  color: var(--m-text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.zone-row .acts button:hover { background: var(--surface-3); color: var(--m-text); }
.zone-row .acts svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.zone-tooltip { font-size: 12px; font-weight: 600; }

/* نقاط توجيه مسار الخط: «أ» البداية و«ب» النهاية، والوسطية بلون مختلف تسحب أو تحذف */
.wp-pin {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(24,32,49,.4);
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
}
.wp-pin:active { cursor: grabbing; }

/* تعليم موقع مكان جديد: المؤشر صليب ليعرف أن الضغطة التالية اختيار نقطة. */
.leaflet-container.picking { cursor: crosshair; }

@keyframes place-ghost { 50% { transform: scale(1.18); } }

/* نموذج المكان داخل اللوحة: حقول مكدسة والخريطة تبقى مكشوفة لسحب العلامة. */
.place-form {
  overflow: auto; flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px 14px;
}
.place-form label {
  font: 600 11.5px var(--font); color: var(--m-text-2); margin-top: 8px;
}
.place-form input, .place-form textarea {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 7px 9px; font: 400 13px var(--font); color: var(--m-text);
  background: var(--surface); outline: none; width: 100%;
}
.place-form input:focus, .place-form textarea:focus { border-color: var(--accent); }
.place-form textarea { resize: vertical; }

.place-pick-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--m-text-3); padding: 2px 0;
}
.place-pick-hint svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.place-coord { font-size: 12px; color: var(--m-text-2); }

.place-foot.actions { display: flex; gap: 8px; justify-content: flex-end; }

/* علامة التحرير أكبر وبلون مميز: هي المسحوبة، فلا تختلط بأماكن محفوظة. */
.place-pin.big { cursor: grab; animation: place-ghost 1.4s ease-in-out infinite; }
.place-pin.big:active { cursor: grabbing; }

/* زر الرمز في ترويسة النموذج ومكتبة الرموز. */
/* مكتبة الرموز: مربعات حادة الأركان كما في ورقة الرموز، والأبيض منها
   بإطار رفيع وإلا ذاب في خلفية النافذة. */
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.icon-tile {
  aspect-ratio: 1; border: 0; border-radius: 2px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-tile.white { border: 1px solid var(--m-edge); }
.icon-tile.on { outline: 2px solid var(--m-text); outline-offset: 2px; }
.icon-tile svg { display: block; width: 64%; height: 64%; }
.icon-tile .num { font: 700 26px/1 var(--font); }

/* الرمز في سطر القائمة: المربع نفسه مصغرا. */
.icon-tile.sm { width: 26px; height: 26px; flex: none; aspect-ratio: auto; }
.icon-tile.sm .num { font: 700 16px/1 var(--font); }

/* زر الرمز في ترويسة النموذج. */
.place-icon-btn {
  width: 34px; height: 34px; flex: none; cursor: pointer;
  border: 0; border-radius: 3px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.place-icon-btn.white { border: 1px solid var(--m-edge); }
.place-icon-btn .num { font: 700 21px/1 var(--font); }
.place-icon-btn svg { display: block; width: 22px; height: 22px; }

/* صورة مرفوعة بدل رمز المكتبة: تملأ المربع باقتصاص لا بتشويه في النسب. */
.icon-tile .shot, .place-pin .shot, .place-icon-btn .shot {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.place-upload { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--m-edge); }
.place-upload .hint { flex: 1; font-size: 11.5px; color: var(--m-text-3); line-height: 1.7; }

/* ─── شريط المسار بين نقطتين */
.path-bar { max-width: 300px; }
.path-end { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.path-end b { font-size: 11px; color: var(--m-text-3); font-weight: 600; }
.path-end span { color: var(--m-text-2); line-height: 1.6; }
.path-sum {
  display: flex; gap: 14px; padding-top: 8px;
  border-top: 1px solid var(--m-edge);
  font: 600 12.5px var(--font); color: var(--m-text);
}
.path-sum span { display: inline-flex; align-items: center; gap: 5px; }
.path-sum i { display: flex; color: var(--m-text-3); }
.path-sum svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* الشرط تزحف من البداية إلى النهاية فيقرأ اتجاه المسار بلا أسهم.
   مجموع الشرطة والفجوة ستة وعشرون، والإزاحة بقدره فتدور الحركة بلا قفزة. */
.path-ants {
  stroke-dasharray: 10 16;
  animation: path-ants 1.1s linear infinite;
}
@keyframes path-ants { to { stroke-dashoffset: -26; } }

/* احترام من أطفأ الحركة في نظامه: خط متقطع ثابت. */
@media (prefers-reduced-motion: reduce) { .path-ants { animation: none; } }

/* بطاقة طرف المسار على الخريطة: عنوان وإحداثيات تحت العنوان. */
.path-card .leaflet-popup-content { margin: 10px 13px; min-width: 190px; }
.path-card b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.path-card span { display: block; font-size: 11.5px; color: var(--m-text-2); line-height: 1.6; }
.path-card i {
  display: block; margin-top: 3px; font-style: normal;
  font: 11.5px var(--font-mono); color: var(--m-text-3);
  unicode-bidi: isolate;
}

/* علامة جوال الموظف: دائرة بحد أبيض وشخص بداخلها — تفرق عن المركبة
   بنظرة، وتبقى بلون حالتها فلا يضيع معناها. */
.veh-marker.staff .pin { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(24, 32, 49, .4); }
.veh-marker.staff .pin svg { width: 15px; height: 15px; }
.veh-marker.staff.sel .pin { box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--accent-line), 0 1px 5px rgba(24, 32, 49, .4); }

/* ═══════════════════════ لوحة الإشعارات ═══════════════════════
   في مكان لوحة الأجسام وبقياسها — فاللوحتان لا تظهران معا، والمكان واحد.
   وبطاقتها تركن بجانبها كبطاقة التفاصيل، فما يفتح من القائمة يقرأ دون أن
   تغطى القائمة نفسها. */
.ntf-panel {
  position: absolute; inset-inline-start: 14px; top: 14px; bottom: 14px;
  width: min(352px, calc(100% - 28px)); z-index: 622;
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}

.ntf-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px 6px; flex: none; }
.ntf-head h2 { flex: 1; font-size: 19px; font-weight: 700; margin: 0; }

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

.ntf-intro { margin: 0; padding: 0 16px 10px; font-size: 13px; line-height: 1.6; color: var(--m-text-2); }
.ntf-rules { padding: 0 16px; font-size: 13.5px; font-weight: 600; flex: none; }

/* الرابطان بحروف كبيرة بلون التمييز كما هناك — لا زرين بإطار. */
.ntf-link {
  border: 0; background: none; cursor: pointer; padding: 8px 16px;
  font: 700 12px var(--font); letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent); text-align: start; align-self: flex-start;
}
.ntf-link:hover { text-decoration: underline; }

.ntf-bar {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 10px 8px 16px;
  border-top: 1px solid var(--m-edge); border-bottom: 1px solid var(--m-edge);
}
.ntf-bar .ntf-n { flex: 1; font-size: 13px; color: var(--m-text-2); }

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

/* السطر: رمز نوعه، ثم عنوانه واسم جسمه ولحظته، وزر «قرأته» في طرفه. */
.ntf-row {
  width: 100%; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px 11px 14px; border: 0; background: none; cursor: pointer;
  text-align: start; border-bottom: 1px solid var(--border-soft);
  border-inline-start: 3px solid transparent; font: inherit;
}
.ntf-row:hover { background: var(--surface-3); }
.ntf-row.on { background: var(--accent-soft); border-inline-start-color: var(--accent); }
.ntf-row.read { opacity: .62; }

.ntf-kind { flex: none; display: flex; padding-top: 1px; }
.ntf-kind svg { stroke: currentColor; fill: none; stroke-width: 1.8; }

.ntf-row .bd { flex: 1; min-width: 0; }
.ntf-row .bd b { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; }
.ntf-row .bd .ob,
.ntf-row .bd .tm { display: block; font-size: 11.5px; color: var(--m-text-3); }
.ntf-row .bd .ob { margin-top: 2px; }

.ntf-eye {
  flex: none; border: 0; background: none; cursor: pointer; padding: 3px;
  color: var(--m-text-3); display: flex; border-radius: 6px; opacity: 0;
}
.ntf-row:hover .ntf-eye, .ntf-row.on .ntf-eye, .ntf-row.read .ntf-eye { opacity: 1; }
.ntf-eye:hover { color: var(--accent); background: var(--surface); }
.ntf-eye svg { stroke: currentColor; fill: none; stroke-width: 2; }

.ntf-empty { padding: 26px 16px; font-size: 12.5px; color: var(--m-text-3); text-align: center; }

.ntf-foot {
  flex: none; border: 0; border-top: 1px solid var(--m-edge); background: none; cursor: pointer;
  padding: 13px 16px; text-align: start;
  font: 700 12px var(--font); letter-spacing: .4px; text-transform: uppercase; color: var(--accent);
}
.ntf-foot:hover { background: var(--surface-3); }

/* ─── بطاقة الإشعار المضغوط */
.ntf-card {
  position: absolute; inset-inline-start: 380px; top: 14px; z-index: 618;
  width: min(390px, calc(100% - 28px)); max-height: calc(100% - 28px);
  background: var(--surface); border: 1px solid var(--m-edge);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.ntf-card-head {
  display: flex; align-items: flex-start; gap: 8px; flex: none;
  padding: 14px 12px 10px 16px;
}
.ntf-card-head b { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.45; }
.ntf-card-body { padding: 0 16px 14px; overflow: auto; }

.ntf-label { font-size: 11.5px; color: var(--m-text-3); margin-bottom: 4px; }
.ntf-addr { font-size: 13px; line-height: 1.6; }

/* اللحظة والإحداثي على سطر واحد في طرفيه، كما هناك: أحدهما يقرأ والآخر ينسخ. */
.ntf-meta {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--m-text-2);
}
.ntf-coord { font-variant-numeric: tabular-nums; }

.ntf-sub { margin-top: 8px; font-size: 12px; color: var(--m-text-3); }
.ntf-detail {
  margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 12.5px; line-height: 1.6;
}
.ntf-card .ntf-link { padding: 10px 0 0; }

/* الشاشة الضيقة لا تحمل لوحة وبطاقة جنبا إلى جنب: البطاقة تنزل فوق اللوحة. */
@media (max-width: 1100px) {
  .ntf-card { inset-inline-start: 14px; top: auto; bottom: var(--dock-space); width: min(352px, calc(100% - 28px)); max-height: 46%; }
}