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

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

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

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

  /* أين تبدأ اللوحة التالية بعد لوحة الأجسام. تصغر حين تُطوى. */
  --after-objs: calc(var(--obj-w) + 28px);
}

.ops.objs-collapsed { --after-objs: 64px; }

/*
    السجلُّ والبطاقة لا يُفتحان معا: فتحُ السجلّ يُغلق البطاقة كما في النظام
    المرجعي. فيكفيهما موضعٌ واحدٌ بجوار لوحة الأجسام، ويبقى للخريطة ما بقي.
*/

/*
    اتجاه شاشة الخريطة يتبع اتجاه اللغة: اللوحات حيث تبدأ القراءة، والأدوات في
    الحافة المقابلة. فالعربيّةُ تضع اللوحات يمينا مع القائمة والأدواتِ يسارا،
    والإنجليزيّةُ تعكسها.

    (جُرِّب الترتيب الفيزيائيّ الثابت كما في لقطات النظام المرجعيّ الإنجليزيّ،
    فكانت اللوحات تهرب إلى أقصى الشمال بعيدا عن القائمة. فالخصائص هنا منطقيّة
    لا فيزيائيّة.)
*/

.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: var(--after-objs); }

/* زر الفتح: دائرة بيضاء بظل خفيف — ٣٦ بكسل وظل ‎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-speed {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  color: var(--good, #1F8A4C); font-variant-numeric: tabular-nums; font-weight: 600;
}
.obj-arrow { width: 11px; height: 11px; display: inline-flex; }
.obj-arrow svg { width: 11px; height: 11px; fill: currentColor; }


/* زر المعلومات: باهت حتى لا ينازع الاسم، ويتضح عند المرور. */
.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: var(--after-objs); 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; }
/* مضاعِف سرعة التشغيل: رقم لا أيقونة، فيُقرأ «2×» بلا فتح قائمة. */
.hist-tool.speed { width: 32px; font: 700 11.5px var(--font); font-variant-numeric: tabular-nums; }

/* زر «كل النقاط»: مضاء حين يكون المسار بلا تبسيط، وهو الأصل. */
.hist-tool.detail.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* تلميح النقطة: سطر لكل قراءة، الاسم رمادي والقيمة غامقة. */
/*
    التلميحاتُ والنوافذُ تُوضع بـ transform من حافة اللوح اليسرى.

    وليفلت يضع العلامات بـ ‎left:0‎ ثم يزيحها، أمّا التلميحُ والنافذةُ فيتركهما
    بلا ‎left‎، فيأخذان موضعَهما الساكن. وصفحتُنا RTL، فموضعُ الساكن عند الحافة
    اليمنى، فتُزاح كلُّ واحدةٍ بعرضها كاملا إلى اليسار وتظهر بعيدةً عن علامتها.
    سطرٌ واحدٌ يُعيدها إلى أصل اللوح، فتصل الإزاحةُ إلى ما قُصد بها.
*/
.leaflet-tooltip,
.leaflet-popup { left: 0; right: auto; }

.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; }

  /* صورة الرحلة: الخريطة وحدها على الورقة، بلا لوحةٍ ولا شريط. كلّ ما يعلو
     الخريطة يُخفى، وتُترك هي بمساحة الصفحة كلّها. */
  body.printing-map .nav,
  body.printing-map .topbar,
  body.printing-map .obj-panel,
  body.printing-map .obj-reopen,
  body.printing-map .obj-detail,
  body.printing-map .hist-panel,
  body.printing-map .hist-reopen,
  body.printing-map .map-dock,
  body.printing-map .map-side,
  body.printing-map .map-bar,
  body.printing-map .map-tools,
  body.printing-map .leaflet-control-container { display: none !important; }

  body.printing-map .ops-canvas,
  body.printing-map #map { position: static !important; width: 100% !important; height: 95vh !important; }
}

.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 { position: relative; 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 .mark.trip { cursor: pointer; }
.hist-card .mark.trip .g-pal { display: none !important; }
.hist-card .mark.trip:hover .g-pal { display: flex !important; }
.hist-card .mark.trip:hover .g-route { display: none !important; }

.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);
}

/* قراءةٌ وحيدةٌ لا رحلة لها: قرصٌ صغير بلون المسار الرفيع نفسه. */
.hist-point {
  width: 12px; height: 12px; border-radius: 50%;
  background: #9AA7B5; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(24,32,49,.35);
}
/* السهم داخل الخط: أبيض بلا ظل، ومدار من مركزه. الدوران يأتي من 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: 72px; } }

.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: var(--after-objs); 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.pinned { cursor: grab; }
.det-row.pinned:active { cursor: grabbing; }
/* أيقونة السطر تحمل الحالة: اللون يقرأ قبل الرقم. الرمادي للسطر الذي لا
   قراءة له — لا يلون غياب الخبر أخضر. */
.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-edit {
  border: 0; background: none; cursor: pointer; padding: 2px; flex: none;
  color: var(--m-text-3); display: flex; align-items: center; opacity: .55;
}
.det-row:hover .det-edit { opacity: 1; }
.det-edit:hover { color: var(--accent); }
.det-edit svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.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: var(--after-objs); 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); }
/* رقم المقطورة التي يشيلها الرأس: لاصق بنفسجي داخل شارة الاسم. */
.veh-marker .tagname .trl { display: inline-block; margin-inline-start: 5px; padding: 0 6px; border-radius: 4px; background: #7C3AED; color: #fff; font-weight: 800; font-size: .92em; }


/* ─────────────── شارة التجميع
   اتجاهها 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: 72px; 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: var(--after-objs); 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%; }
}

/* علامة حدث على المسار: دائرة صغيرة بلون خطورته، لا ايقونة تملأ الخريطة. */
.hist-event {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: var(--c-info, #2A4E9B); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(24,32,49,.35);
}
.hist-event.sev-1 { background: #FF7A00; }
.hist-event.sev-2 { background: #C2334D; }
.hist-event.sev-3 { background: #8C1C2F; }
/* تسجيل حضور: أخضر وعَلَم، فعلٌ لا خطأ. */
.hist-event.checkin { background: #1F8A4C; }
.hist-event.checkin svg { width: 11px; height: 11px; }

/* زرّ صغير في سطر الرحلة: يظهر عند المرور ولا يزاحم النصّ. */
.hist-row-tool {
  position: absolute; inset-inline-end: 26px; top: 8px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0;
  transition: opacity .12s;
}
.hist-card:hover .hist-row-tool { opacity: 1; }
.hist-row-tool:hover { color: var(--accent); }
/* الأداة الثانية في السطر تقف بجوار الأولى لا فوقها. */
.hist-row-tool.second { inset-inline-end: 48px; }
.hist-row-tool.third  { inset-inline-end: 70px; }

/* النقطة المرجعية: دائرة مجوفة بلون التنبيه، تُرى ولا تُخلط بعلامة جسم. */
.map-reference {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid #A93726; background: rgba(169, 55, 38, .18);
  box-shadow: 0 1px 4px rgba(24,32,49,.35);
}

/* ── اعدادات الاشعارات تحت الترس ─────────────────────────────────────────── */
.ntf-ic.on { color: var(--accent); background: var(--accent-soft); }
.ntf-set { flex: none; display: grid; gap: 2px; padding: 8px 12px 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ntf-opt { display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; border-radius: 8px; }
.ntf-opt:hover { background: var(--surface-3); }
.ntf-opt.off { cursor: default; opacity: .55; }
.ntf-opt .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ntf-opt .tx b { font-size: 13px; font-weight: 700; }
.ntf-opt .tx small { font-size: 11.5px; color: var(--m-text-3); line-height: 1.5; }
.ntf-switch { position: relative; flex: none; width: 38px; height: 22px; }
.ntf-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.ntf-switch i { position: absolute; inset: 0; border-radius: 11px; background: var(--border); transition: background .15s; pointer-events: none; }
.ntf-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: inset-inline-start .15s; }
.ntf-switch input:checked + i { background: var(--accent); }
.ntf-switch input:checked + i::after { inset-inline-start: 19px; }
.ntf-switch input:focus-visible + i { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.ntf-set-warn { margin: 4px 4px 0; font-size: 12px; line-height: 1.6; color: var(--crit, #C62828); }
.ntf-set-acts { display: flex; gap: 16px; padding: 4px 4px 0; }
.ntf-set-acts .ntf-link { padding: 4px 0; }

/* تصنيف المناطق (c-zones): النوع في النافذة، والفلتر والشارة في القايمة. */
.zone-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.zone-type button {
  border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 8px 6px; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2);
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
}
.zone-type button span { display: flex; }
.zone-type button.on.c0 { border-color: var(--text-3); background: var(--surface-3); color: var(--text); }
.zone-type button.on.c1 { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.zone-type button.on.c2 { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.zone-type-hint { font-size: 11.5px; color: var(--text-3); margin-block-start: 6px; line-height: 1.6; }
.zone-filter { display: flex; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--border-soft); }
.zone-filter button {
  flex: 1; border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
  padding: 3px 6px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  display: inline-flex; gap: 5px; justify-content: center; align-items: center; cursor: pointer;
}
.zone-filter button b { font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.zone-filter button.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.zone-filter button.on b { color: inherit; opacity: .75; }
.zone-row .nm .zone-class { margin-inline-start: 6px; font-size: 10.5px; padding: 0 7px; }