/* الخريطة الحرارية للطلب — تنسيق الصفحة وحدها.
 *
 * كل ما هو عامّ (.panel/.kpi/.tag/.btn/.data-tbl) يأتي من app.css ولا يُعاد
 * هنا. الجديد فقط: تخطيط الصفحة (شريط مدن + مسرح خريطة)، ودرجات الحرارة.
 *
 * الدرجات أربع لا متدرّج مستمرّ: العين لا تقرأ فروقاً دقيقة في اللون على
 * خريطة، والأربع هي ما تستعمله أوبر وبولت فعلاً. */

:root{
  /* كهرماني ← أحمر، لا بنفسجي الهوية: «ساخن» مفهوم عالمياً، والبنفسجي على
   * خريطة يُقرأ تمييزاً لا شدّة. الهوية تبقى في الأزرار والحوافّ. */
  --hm-l1:#f0c98a;
  --hm-l2:#eb9b5a;
  --hm-l3:#e5604f;
  --hm-l4:#d61f4e;
  --hm-rail:#fff;
}
:root[data-theme="dark"]{
  --hm-l1:#c8a271;
  --hm-l2:#d9884d;
  --hm-l3:#dc5a4d;
  --hm-l4:#e02454;
  --hm-rail:var(--surface);
}

/* ───────────────────────── التخطيط ───────────────────────── */

.hm-layout{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:14px;
  align-items:start;
}
/* تحت ١٠٥٠ بكسل يصير الشريط فوق الخريطة أفقياً بدل أن يخنقها.
 * minmax(0,1fr) أعلاه ليس تجميلاً: بدونه يرفض عمود الشبكة أن ينكمش تحت
 * عرض محتواه فتفيض الخريطة خارج الصفحة أفقياً. */
@media (max-width:1050px){
  .hm-layout{grid-template-columns:1fr}
  .hm-cities{max-height:none}
  .hm-city-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
}

/* ───────────────────────── شريط المدن ───────────────────────── */

.hm-cities{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;max-height:72vh;overflow:hidden;
}
.hm-cities-head{
  padding:11px 13px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.hm-cities-head h3{margin:0;font:600 14px/1.4 var(--fdisplay);color:var(--text)}
.hm-cities-head .hint{margin:0;font-size:11.5px;color:var(--muted);flex:1 1 100%}
.hm-search{
  width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface-2);color:var(--text);font:400 12.5px var(--fbody);
}
.hm-search:focus{outline:2px solid var(--primary-light);outline-offset:1px}

.hm-city-list{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}

.hm-city{
  width:100%;text-align:inherit;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:11px;padding:9px 11px;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .16s,background .16s,transform .16s;
}
.hm-city:hover{border-color:var(--primary-light);transform:translateX(-2px)}
.hm-city.active{
  border-color:var(--primary);background:var(--surface);
  box-shadow:inset 3px 0 0 var(--primary);
}
.hm-city-top{display:flex;align-items:center;gap:7px}
.hm-city-name{font:600 13px var(--fdisplay);color:var(--text);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-city-n{font:700 13px var(--fbody);color:var(--text);font-variant-numeric:tabular-nums}
.hm-city-n small{font-weight:400;font-size:10.5px;color:var(--muted);margin-inline-start:3px}

.hm-city-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.hm-city-meta b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}
.hm-city-meta .bad{color:var(--crit)}

/* شريط الضغط: طلبات الساعة الأخيرة ÷ الكابتنات المتاحات. مقصوص عند ٣ لأن
 * فوقها لا فرق عملياً — كلّها «لا يوجد من يستقبل». */
.hm-press{height:4px;border-radius:99px;background:var(--border-soft);overflow:hidden}
.hm-press i{display:block;height:100%;border-radius:99px;background:var(--hm-l2);transition:width .3s}
.hm-press.hot i{background:var(--hm-l4)}

/* ───────────────────────── مسرح الخريطة ───────────────────────── */

.hm-stage{
  position:relative;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.hm-map{width:100%;height:min(72vh,660px);background:var(--surface-2)}

.hm-float{
  position:absolute;z-index:3;
  background:var(--hm-rail);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);
}
.hm-float-top{inset-inline-start:12px;top:12px;padding:9px 12px;max-width:min(320px,58%)}
.hm-title{font:700 14px var(--fdisplay);color:var(--text);margin:0 0 2px}
.hm-sub{font-size:11.5px;color:var(--muted);margin:0;line-height:1.55}

/* أزرار حجم السداسية */
.hm-sizes{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.hm-size{
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
  border-radius:8px;padding:4px 9px;font:600 11px var(--fbody);cursor:pointer;
  transition:.15s;
}
.hm-size:hover{border-color:var(--primary-light);color:var(--text)}
.hm-size.active{background:var(--primary);border-color:var(--primary);color:#fff}
.hm-save-hex{
  margin-top:7px;width:100%;border:1px dashed var(--border);background:transparent;
  color:var(--muted);border-radius:8px;padding:5px;font:600 11px var(--fbody);cursor:pointer;
}
.hm-save-hex:hover{border-color:var(--primary);color:var(--primary)}
.hm-save-hex[disabled]{opacity:.45;cursor:default}

/* الأسطورة — بأرقام مطلقة لا بألوان وحدها: «أحمر» بلا رقم لا يقول كم. */
.hm-legend{inset-inline-end:12px;bottom:12px;padding:9px 11px}
.hm-legend-row{display:flex;align-items:center;gap:5px}
.hm-legend-row i{width:17px;height:15px;display:block;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hm-legend-lbl{font-size:10.5px;color:var(--muted);display:flex;
  justify-content:space-between;margin-top:4px;gap:12px}
.hm-legend-lbl b{color:var(--text);font-variant-numeric:tabular-nums}

/* تلميح يتبع المؤشّر */
.hm-tip{
  position:absolute;z-index:6;pointer-events:none;opacity:0;
  transform:translate(-50%,-115%);transition:opacity .12s;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:7px 10px;min-width:118px;
}
.hm-tip.show{opacity:1}
.hm-tip b{display:block;font:700 13px var(--fbody);color:var(--text);
  font-variant-numeric:tabular-nums}
.hm-tip span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.hm-tip span.bad{color:var(--crit)}

/* طبقة رسائل فوق الخريطة (فراغ/خطأ/تحميل) */
.hm-veil{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;
  justify-content:center;padding:24px;text-align:center;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(2px);
}
.hm-veil-box{max-width:360px}
.hm-veil-box h4{margin:0 0 5px;font:700 15px var(--fdisplay);color:var(--text)}
.hm-veil-box p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7}
.hm-veil-box .btn{margin-top:11px}

/* شريط ملاحظات تحت الخريطة — الصدق الصريح: كم رُسم وكم حُجب ولماذا. */
.hm-notes{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  padding:9px 13px;border-top:1px solid var(--border);
  background:var(--surface-2);font-size:11.5px;color:var(--muted);
}
.hm-notes b{color:var(--text);font-variant-numeric:tabular-nums}
.hm-notes .warn-note{color:var(--warn)}

/* جدول أعلى المناطق */
.hm-top-row{cursor:pointer}
.hm-rank{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:19px;font:700 11px var(--fbody);color:#fff;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

@media (prefers-reduced-motion:reduce){
  .hm-city,.hm-press i,.hm-tip{transition:none}
  .hm-city:hover{transform:none}
}