/* ══ Command Palette ══ */
#wm-palette-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:99999;align-items:flex-start;justify-content:center;padding-top:14vh;direction:rtl}
#wm-palette-overlay.open{display:flex}
#wm-palette-box{background:#0d1a2a;border:1px solid #1e3a5a;border-radius:12px;width:600px;max-width:96vw;box-shadow:0 24px 64px rgba(0,0,0,.85);overflow:hidden;animation:wm-pal-in .15s ease}
@keyframes wm-pal-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
#wm-palette-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #1e3a5a}
#wm-palette-ico{font-size:18px;flex-shrink:0}
#wm-palette-inp{flex:1;background:transparent;border:none;outline:none;color:#c8dff0;font-size:16px;font-family:inherit;direction:rtl}
#wm-palette-inp::placeholder{color:#3a5a76}
#wm-palette-esc-hint{font-size:11px;color:#3a5a76;background:#0a1628;border:1px solid #1e3a5a;border-radius:4px;padding:2px 8px;cursor:pointer;flex-shrink:0}
#wm-palette-list{max-height:380px;overflow-y:auto;overscroll-behavior:contain}
.wm-pal-grp{padding:10px 18px 4px;font-size:10px;color:#3a5a76;letter-spacing:.6px;font-weight:600}
.wm-pal-sep{height:1px;background:#0f1f30;margin:4px 0}
.wm-pal-row{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;transition:background .1s}
.wm-pal-row:hover,.wm-pal-row.on{background:#162740}
.wm-pal-ri{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.wm-pal-rl{flex:1;font-size:13px;color:#c8dff0}
.wm-pal-rc{font-size:10px;color:#3a5a76;display:none}
.wm-pal-empty{text-align:center;padding:28px;color:#3a5a76;font-size:13px}
#wm-palette-foot{display:flex;gap:18px;padding:9px 18px;border-top:1px solid #0f1f30}
.wm-ph{font-size:11px;color:#3a5a76}
.wm-ph kbd{background:#0a1628;border:1px solid #1e3a5a;border-radius:3px;padding:1px 5px;font-size:10px;color:#94a3b8;font-family:inherit}
#wm-palette-search-btn{position:relative}
#wm-palette-search-btn .wm-pal-kbhint{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:9px;color:#3a5a76;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
#wm-palette-search-btn:hover .wm-pal-kbhint{opacity:1}

/* ── Page Loading Screen ── */
body.wm-loading * { visibility: hidden !important; }
body.wm-loading #wm-wrap { visibility: visible !important; }

#wm-page-loader {
    position: fixed;
    inset: 0;
    background: #060c14;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}
#wm-page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}
.wm-loader-logo {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.wm-loader-bar {
    width: 200px;
    height: 3px;
    background: #1e3a5a;
    border-radius: 2px;
    overflow: hidden;
}
.wm-loader-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    animation: wm-load 1.5s ease-in-out infinite;
}
@keyframes wm-load {
    0%   { width: 0%; margin-left: 0; }
    50%  { width: 70%; margin-left: 15%; }
    100% { width: 0%; margin-left: 100%; }
}
.wm-loader-text {
    margin-top: 12px;
    font-size: 11px;
    color: #3a5a76;
    letter-spacing: 1px;
}
/* =============================================
   عربي رادار — Frontend CSS
   Dark Intelligence Dashboard Aesthetic
   ============================================= */


:root {
  --wm-bg:         #060c14;
  --wm-bg2:        #0d1a2a;
  --wm-bg3:        #111e2e;
  --wm-border:     #1e3a5a;
  --wm-accent:     #00d4ff;
  --wm-accent2:    #0070b4;
  --wm-text:       #c8dff0;
  --wm-text-dim:   #5a7a96;
  --wm-red:        #ef4444;
  --wm-orange:     #f97316;
  --wm-yellow:     #eab308;
  --wm-blue:       #3b82f6;
  --wm-green:      #22c55e;
  /* أسماء دلالية للخطورة — استخدمها في أي CSS جديد بدل الألوان الحرفية */
  --wm-sev-critical: var(--wm-red);
  --wm-sev-high:     var(--wm-orange);
  --wm-sev-medium:   var(--wm-yellow);
  --wm-sev-low:      var(--wm-green);
  --wm-font-mono:  'Share Tech Mono', monospace;
  --wm-font-ar:    'IBM Plex Sans Arabic', 'Noto Kufi Arabic', Tahoma, sans-serif;
  --wm-font-ar-hd: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', sans-serif;
  --wm-font-hd:    'Rajdhani', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

#wm-root {
  font-family: var(--wm-font-ar);
  background: var(--wm-bg);
  color: var(--wm-text);
  direction: rtl;
  position: relative;
}

/* Header القديم — مخفي في التصميم الجديد */
.wm-header { display: none; }
.wm-layout { display: none; }
.wm-map-wrap { display: none; }
.wm-tabs:not(#wm-tabs-bar) { display: none; }
#wm-tension-bar { display: none; }

/* ── Header ── (kept for compatibility) */
.wm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(135deg, #060c14 0%, #0d1a2a 100%);
  border-bottom: 1px solid var(--wm-border);
  position: relative;
  overflow: hidden;
}
.wm-header::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.05), transparent);
  animation: wm-scan 4s linear infinite;
}
@keyframes wm-scan { to { left: 200%; } }

.wm-logo {
  font-family: var(--wm-font-hd);
  font-size: 20px;
  font-weight: 700;
  color: var(--wm-accent);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.wm-logo span { color: #fff; }

.wm-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wm-font-mono);
  font-size: 13px;
  color: var(--wm-text-dim);
}
.wm-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wm-green);
  box-shadow: 0 0 8px var(--wm-green);
  animation: wm-pulse 2s ease infinite;
}
@keyframes wm-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
#wm-refresh {
  background: none;
  border: 1px solid var(--wm-border);
  color: var(--wm-accent);
  width: 30px; height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all .2s;
}
#wm-refresh:hover { background: var(--wm-accent); color: #000; }
#wm-refresh.spinning { animation: wm-spin 1s linear infinite; }
@keyframes wm-spin { to { transform: rotate(360deg); } }

/* ── Tabs ── */
.wm-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  background: var(--wm-bg2);
  border-bottom: 1px solid var(--wm-border);
  overflow-x: auto;
  scrollbar-width: thin;
}
.wm-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--wm-text-dim);
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--wm-font-ar);
  white-space: nowrap;
  transition: all .2s;
}
.wm-tab:hover { color: var(--wm-text); border-color: var(--wm-border); }
.wm-tab.active {
  background: var(--wm-accent2);
  border-color: var(--wm-accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════
   v4.0 — FULLSCREEN MAP + FLOATING SIDEBAR
   مستوحى من world-monitor.com
══════════════════════════════════════════════════ */

#wm-root {
  font-family: var(--wm-font-ar);
  color: var(--wm-text);
  direction: rtl;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: visible;
  background: var(--wm-bg);
}

/* ── الخريطة fixed تملأ كل الشاشة ── */
#wm-map-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
#wm-map {
  width: 100%;
  height: 100%;
  background: var(--wm-bg);
}

/* Dark map tiles */
.leaflet-tile { filter: brightness(0.65) saturate(0.4) hue-rotate(195deg); }
.leaflet-container { background: #060c14 !important; }

/* ── Topbar — شريط علوي ── */
#wm-topbar {
  position: absolute;
  top: 0;
  left: 420px; /* يبدأ بعد الـ sidebar */
  right: 60px; /* مسافة عن الـ dock */
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(6,12,20,0.85);
  border-bottom: 1px solid rgba(30,58,90,0.5);
  backdrop-filter: blur(10px);
  transition: left .3s;
}
#wm-sidebar.wm-sidebar-closed ~ * #wm-topbar,
body.wm-sb-closed #wm-topbar { left: 0; }

.wm-topbar-logo {
  font-family: var(--wm-font-hd);
  font-size: 16px;
  font-weight: 700;
  color: var(--wm-accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.wm-topbar-logo span { color: #fff; }

/* ── شارة مؤشر التوتر العالمي — بجانب الشعار ── */
.wm-global-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--wm-text-dim);
  transition: color .2s;
  white-space: nowrap;
}
.wm-global-badge:hover { color: var(--wm-accent); }
.wm-gb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #64748b;
}
.wm-global-badge.lvl-critical { color:#fca5a5; }
.wm-global-badge.lvl-critical .wm-gb-dot { background:var(--wm-red); animation: wm-legend-pulse 1.8s infinite; }
.wm-global-badge.lvl-high { color:#fdba74; }
.wm-global-badge.lvl-high .wm-gb-dot { background:var(--wm-orange); }
.wm-global-badge.lvl-elevated { color:#fde68a; }
.wm-global-badge.lvl-elevated .wm-gb-dot { background:var(--wm-yellow); }
.wm-global-badge.lvl-normal { color:#86efac; }
.wm-global-badge.lvl-normal .wm-gb-dot { background:var(--wm-green); }
.wm-global-badge.lvl-low { color:#7dd3fc; }
.wm-global-badge.lvl-low .wm-gb-dot { background:#38bdf8; }
@media (max-width: 640px) {
  .wm-global-badge { display: none !important; }
}

/* ── تنقّل جغرافي سريع — شريحة زجاجية مقسَّمة فوق الخريطة، يسار زر الليل/النهار
   العائم في الزاوية العلوية اليمنى (أعاد المستخدم طلبها 2026-10-10 بعد أن كانت
   تحوّلت لقائمة منسدلة في الشريط العلوي). top/right يُحسبان ديناميكياً في
   app.js (_positionTfPill) — نفس آلية #wm-tf-pill-wrap لتفادي التصادم مع
   التوبار/شريط الأزمة المتغيّرَي الارتفاع. القيم هنا احتياط قبل تشغيل JS فقط. ── */
.wm-region-nav {
  position: absolute;
  top: 63px;
  right: 110px;
  z-index: 1000;
}
.wm-tf-pill .wm-tf-btn.wm-region-pill {
  border: none;
  border-radius: 16px;
  background: transparent;
  padding: 4px 12px;
  margin: 0;
  font-weight: 600;
}
.wm-tf-pill .wm-tf-btn.wm-region-pill:hover { background: rgba(255,255,255,0.08); color: var(--wm-text); }
.wm-tf-pill .wm-tf-btn.wm-region-pill.active { background: var(--wm-accent); color: #06210f; font-weight: 700; }
@media (max-width: 640px) {
  .wm-region-nav { display: none; }
}

.wm-topbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Tabs في التوبار — مضغوطة */
#wm-tabs-bar {
  display: flex;
  gap: 2px;
  background: rgba(13,26,42,0.6);
  border: 1px solid rgba(30,58,90,0.5);
  border-radius: 5px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
#wm-tabs-bar::-webkit-scrollbar { display: none; }
#wm-tabs-bar .wm-tab {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.wm-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-right: 8px;
}
.wm-topbar-count {
  font-family: var(--wm-font-mono);
  font-size: 12px;
  color: var(--wm-accent);
  white-space: nowrap;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 4px;
  padding: 3px 8px;
}
.wm-tb-btn {
  background: rgba(13,26,42,0.7);
  border: 1px solid var(--wm-border);
  color: var(--wm-text-dim);
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  transition: all .2s;
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.wm-tb-btn:hover { background: rgba(0,212,255,0.12); border-color: var(--wm-accent); color: var(--wm-accent); }
.wm-tb-active { border-color: var(--wm-accent) !important; color: var(--wm-accent) !important; background: rgba(0,212,255,0.1) !important; }

/* ── Layer Dock — عمود أيقونات يمين الشاشة ── */
/* ── أزرار تكبير/تصغير/الرئيسية — أعلى يمين الخريطة، بعيداً عن #wm-layer-dock (52px) ── */
.leaflet-top.leaflet-right { margin-right: 60px !important; } /* margin-top يُضبَط ديناميكياً بـ JS تحت #wm-region-nav */
.wm-home-control a {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
}

#wm-layer-dock {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(6,12,20,0.92);
  border-left: 1px solid var(--wm-border);
  padding: 54px 0 40px; /* أعلى: تحت topbar | أسفل: فوق breaking bar */
  backdrop-filter: blur(10px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,0.4) transparent;
  pointer-events: all;
}
/* شريط تمرير رفيع مرئي بدل الإخفاء الكامل — بدونه أي زر يقع أسفل ارتفاع الشاشة
   (87 زراً حالياً ومتزايد) يبدو "مفقوداً" رغم أنه مرسوم فعلاً، فقط يحتاج تمريراً */
#wm-layer-dock::-webkit-scrollbar { width: 4px; }
#wm-layer-dock::-webkit-scrollbar-track { background: transparent; }
#wm-layer-dock::-webkit-scrollbar-thumb {
  background: rgba(0,212,255,0.4);
  border-radius: 4px;
}
#wm-layer-dock::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.7); }
/* ظل تدرّجي أعلى وأسفل العمود يظهر فقط عند وجود محتوى إضافي قابل للتمرير في ذلك الاتجاه */
#wm-layer-dock.wm-ld-scroll-top::before,
#wm-layer-dock.wm-ld-scroll-bottom::after {
  content: '';
  position: sticky;
  right: 0;
  left: 0;
  height: 18px;
  pointer-events: none;
  z-index: 1;
}
#wm-layer-dock.wm-ld-scroll-top::before {
  top: 0;
  background: linear-gradient(rgba(6,12,20,0.95), transparent);
}
#wm-layer-dock.wm-ld-scroll-bottom::after {
  bottom: 0;
  background: linear-gradient(transparent, rgba(6,12,20,0.95));
}
.wm-ld-btn {
  position: relative;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--wm-text-dim);
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wm-ld-badge {
  position: absolute;
  top: -4px;
  left: -4px; /* RTL: الدوك على أقصى يمين الشاشة، فالبادج يميل يساراً بعيداً عن الحافة */
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--wm-red);
  color: #fff;
  font-family: var(--wm-font-ar);
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(6,12,20,0.95);
  pointer-events: none;
}
.wm-ld-btn:hover {
  background: rgba(0,212,255,0.1);
  color: var(--wm-text);
  border-color: rgba(30,58,90,0.8);
}
.wm-ld-btn.active {
  background: rgba(0,212,255,0.14);
  border-color: var(--wm-accent);
  color: var(--wm-accent);
}
.wm-ld-sep {
  width: 28px; height: 1px;
  background: var(--wm-border);
  margin: 3px 0;
  flex-shrink: 0;
}

/* ── HUD — DEFCON + عدادات أسفل يمين ── */
#wm-map-hud {
  position: absolute;
  bottom: 40px; /* 32px ارتفاع الشريط + 8px هامش */
  right: 60px;
  z-index: 460; /* فوق الشريط العاجل */
  display: flex;
  align-items: flex-end;
}
/* زر مساعد الاستخبارات العائم — عنصر داخل #wm-map-hud نفسه (لا شقيق منفصل)
   بـ position:absolute + bottom:100% ليرتكز تماماً فوق الصندوق أياً كان
   ارتفاعه الفعلي (الأصلي كان bottom:92px يدوياً بافتراض ارتفاع خاطئ لصندوق
   DEFCON الرباعي الصفوف — فتراكب فعلياً معه واختفى خلفه لأن #wm-map-hud
   نفسه يُرسَم بعده في نفس مستوى z-index). position:absolute يُخرجه من تخطيط
   flex الأفقي لـ#wm-map-hud فلا يؤثر على صفّي DEFCON/الساعة العالمية */
#wm-intelqa-pill {
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  right: 0;
  z-index: 461;
}
.wm-hud-counts {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(6,12,20,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px 8px;
  backdrop-filter: blur(10px);
  flex-wrap: nowrap;
}
/* فاصل بين DEFCON والعدادات */
.wm-hud-sep {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
  flex-shrink: 0;
}
/* عدادات التهديد */
#wm-map-hud .wm-threat {
  padding: 4px 7px;
  min-width: 40px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
#wm-map-hud .wm-threat span { font-size: 14px; }
#wm-map-hud .wm-threat small { font-size: 9px; }

/* عدادات HUD الثانوية (زلازل/حرائق/سفر/توتر/سيبراني/اقتصاد/كوارث/طائرات) —
   مطوية افتراضياً خلف زر "+" كي لا تزدحم الزاوية بتسعة عناصر دفعة واحدة */
.wm-hud-counts .wm-hud-extra { display: none; }
.wm-hud-counts.wm-hud-expanded .wm-hud-extra { display: flex; }
.wm-hud-more-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--wm-text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  align-self: center;
}
.wm-hud-more-btn:hover { color: var(--wm-text); border-color: var(--wm-accent); }

/* ── Legend — أسفل يسار (مع مراعاة الـ sidebar) ── */
/* خط الليل/النهار — Leaflet control (topleft)، لا CSS position ثابت هنا؛
   Leaflet نفسه يتولّى التموضع داخل ركن الخريطة الحقيقي فيتفادى أي تصادم مع
   الشريط الجانبي أو أشرطة الأدوات العلوية (كان بتموضع مطلق يدوي سابقاً وتصادم
   مرتين مع عناصر أخرى — راجع CLAUDE.md) */
.wm-dn-pill {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,20,0.88);
  border: 1px solid var(--wm-border);
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
  margin: 8px 0 0 8px;
}
.wm-dn-pill:hover { border-color: var(--wm-accent); }
.wm-dn-pill.active {
  background: rgba(0,212,255,0.14);
  border-color: var(--wm-accent);
}

.wm-legend {
  position: absolute;
  bottom: 40px; /* فوق شريط الأخبار العاجلة */
  left: 428px; /* بعد الـ sidebar (420px) + 8px هامش — كانت 328px فتتراكب مع الـ sidebar (420px) */
  background: rgba(6,12,20,0.88);
  border: 1px solid var(--wm-border);
  border-radius: 8px;
  padding: 8px 12px;
  z-index: 510; /* فوق #wm-sidebar (z-index:500) لتفادي التغطية أثناء الانتقال */
  font-size: 11px;
  backdrop-filter: blur(8px);
  transition: left .3s;
}
.wm-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0;
}
.wm-legend-item span {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.wm-legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.wm-legend-toggle {
  color: var(--wm-text-dim);
  transition: transform .2s;
  flex-shrink: 0;
}
.wm-legend.wm-legend-collapsed .wm-legend-toggle { transform: rotate(-90deg); }
.wm-legend.wm-legend-collapsed .wm-legend-body { display: none; }
.wm-legend-body { margin-top: 6px; }
.wm-legend-pulse-dot {
  position: relative;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: wm-legend-pulse 1.8s infinite;
}
@keyframes wm-legend-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.wm-legend-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--wm-border);
  font-size: 9.5px;
  color: var(--wm-text-dim);
  line-height: 1.5;
  max-width: 190px;
}

/* ── SIDEBAR العائم — يسار ── */
#wm-sidebar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 420px;
  height: 100%;
  z-index: 500;
  background: rgba(6,12,22,0.98);
  border-right: 1px solid rgba(30,58,90,0.7);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  transform: translateX(0);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  box-shadow: 6px 0 32px rgba(0,0,0,0.5);
}
#wm-sidebar.wm-sidebar-closed { transform: translateX(-100%); }

/* ══ رأس الـ Sidebar ══ */
.wm-sb-top {
  order: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(30,58,90,0.6);
  background: rgba(5,10,18,0.8);
  gap: 8px;
}
.wm-sb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden; /* يسمح لـ .wm-sb-brand-title بالانكماش والقصّ بدل التفاف السطر */
}
.wm-sb-brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wm-green);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--wm-green);
  animation: wm-conn-pulse-ok 2s ease-in-out infinite;
}
.wm-sb-brand-title {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.5px;
  font-family: var(--wm-font-hd);
  /* عناوين تبويبات مختلفة الطول (مثال: "أخبار" مقابل "📡 OSINT") — قصّ بدل
     التفاف سطرين يكسر ارتفاع الشريط، بلا حاجة لتصميم خاص بكل قسم على حدة */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wm-sb-brand-count {
  font-size: 11px;
  color: #475569;
  background: rgba(30,58,90,0.5);
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}
.wm-sb-top-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wm-sb-close-btn {
  width: 26px; height: 26px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: var(--wm-red);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wm-sb-close-btn:hover { background: var(--wm-red); color: #fff; }

/* ══ منطقة المحتوى ══ */
.wm-sb-content {
  order: 2;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.wm-sb-panel {
  position: absolute;
  inset: 0;
  display: none !important;
  flex-direction: column;
  overflow: hidden;
}
.wm-sb-panel.active { display: flex !important; }

/* قائمة الأخبار داخل الـ panel */
.wm-sb-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1e3a5a transparent;
}
.wm-sb-list::-webkit-scrollbar { width: 4px; }
.wm-sb-list::-webkit-scrollbar-track { background: transparent; }
.wm-sb-list::-webkit-scrollbar-thumb { background: #1e3a5a; border-radius: 2px; }

/* فلاتر الأخبار */
.wm-sb-filters {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(30,58,90,0.5);
}

/* ══ شريط التبويبات السفلي ══ */
.wm-sb-tabs {
  display: flex;
  flex-shrink: 0;
  background: rgba(5,10,18,0.95);
  border-top: 1px solid rgba(30,58,90,0.6);
  height: 54px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.wm-sb-tabs::-webkit-scrollbar { display: none; }
.wm-sbt {
  flex: 0 0 auto;
  min-width: 58px;
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 6px;
  transition: all .2s;
  position: relative;
  font-family: var(--wm-font-ar);
  border-top: 2px solid transparent;
}
.wm-sbt:hover { color: #94a3b8; background: rgba(255,255,255,0.03); }
.wm-sbt.active {
  color: var(--wm-accent);
  border-top-color: var(--wm-accent);
  background: rgba(37,99,235,0.08);
}
.wm-sbt-icon  { font-size: 17px; line-height: 1; }
.wm-sbt-label { font-size: 10px; white-space: nowrap; }
.wm-sbt-badge {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(6px);
  background: var(--wm-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
  display: none;
}
.wm-sbt-badge:not(:empty) { display: block; }

/* إخفاء العناصر القديمة */
.wm-sb-nav     { display: none; }
.wm-sb-body    { display: none; }
.wm-sb-toprow  { display: none; }
.wm-panel-tabs { display: none; }
.wm-sb-header  { display: contents; }


/* ── Layer dock labels ── */
.wm-ld-label {
  font-size: 9px;
  color: var(--wm-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 0;
  text-align: center;
  width: 100%;
}

/* ── HUD counts — نص واضح ── */
#wm-map-hud .wm-threat {
  min-width: 42px;
  padding: 4px 6px;
}
#wm-map-hud .wm-threat span {
  font-size: 15px;
  font-weight: 700;
}
#wm-map-hud .wm-threat small {
  font-size: 9px;
  display: block;
  margin-top: 1px;
}
#wm-search {
  background: var(--wm-bg);
  border: 1px solid var(--wm-border);
  color: var(--wm-text);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--wm-font-ar);
  width: 150px;
  direction: rtl;
}
#wm-search:focus { outline: none; border-color: var(--wm-accent); }

.wm-filter-row {
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--wm-border);
}
.wm-filter-row select {
  flex: 1;
  background: var(--wm-bg);
  border: 1px solid var(--wm-border);
  color: var(--wm-text);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--wm-font-ar);
}

#wm-news-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--wm-border) transparent;
  min-height: 0;
}

/* ══ News Item Card — تصميم v3 ══ */
.wm-news-item {
  padding: 10px 14px 10px 10px;
  border-bottom: 1px solid rgba(15,30,50,0.7);
  cursor: pointer;
  transition: background .18s;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border-right: 3px solid transparent;
}
.wm-news-item:hover { background: rgba(37,99,235,0.07); }
.wm-news-item.highlighted { background: rgba(0,212,255,0.06); }

/* ── Intel Card (wm-item) ── */
.wm-item {
  padding: 10px 14px 10px 10px;
  border-bottom: 1px solid rgba(30,41,59,0.8);
  border-right: 3px solid #475569;
  cursor: pointer;
  transition: background .15s;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.wm-item:hover { background: rgba(255,255,255,0.03); }
.wm-item:last-child { border-bottom: none; }

/* العنوان — أكبر وأوضح */
.wm-item-title {
  font-size: 13.5px;
  line-height: 1.6;
  color: #e2e8f0;
  margin-bottom: 7px;
  word-break: break-word;
  white-space: normal;
  font-weight: 600;
}

/* الشريط السفلي: مصدر + وقت + شارات */
.wm-item-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wm-item-src-meta {
  font-size: 10.5px;
  color: #64748b;
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wm-item-time {
  font-size: 10px;
  color: #475569;
  font-family: var(--wm-font-mono);
  margin-right: auto;
}
.wm-score-badge {
  flex-shrink: 0;
  font-family: var(--wm-font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* شارة الخطورة القديمة — للتوافق */
.wm-item-score {
  flex-shrink: 0;
  font-family: var(--wm-font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  color: #fff;
}
.wm-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.wm-item-src {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #38bdf8;
  font-weight: 600;
}
.wm-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.wm-item-desc {
  font-size: 11px;
  color: var(--wm-text-dim);
  line-height: 1.5;
  margin-top: 5px;
}

/* Loading */
.wm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
  color: var(--wm-text-dim);
}
.wm-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--wm-border);
  border-top-color: var(--wm-accent);
  border-radius: 50%;
  animation: wm-spin 0.8s linear infinite;
}

/* Modal */
.wm-modal {
  position: absolute;
  inset: 0;
  background: rgba(6,12,20,0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.wm-modal.hidden { display: none; }
.wm-modal-box {
  background: var(--wm-bg2);
  border: 1px solid var(--wm-accent);
  border-radius: 8px;
  padding: 24px;
  max-width: 520px;
  width: 90%;
  position: relative;
  box-shadow: 0 0 40px rgba(0,212,255,0.15);
}
.wm-modal-close {
  position: absolute;
  top: 12px;
  left: 12px;
  background: none;
  border: 1px solid var(--wm-border);
  color: var(--wm-text);
  width: 28px; height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.wm-modal-close:hover { background: var(--wm-red); border-color: var(--wm-red); }

#wm-modal-content h3 { font-size: 16px; margin-bottom: 12px; line-height: 1.6; }
#wm-modal-content .wm-modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#wm-modal-content p { font-size: 13px; color: var(--wm-text-dim); line-height: 1.7; margin-bottom: 14px; }
#wm-modal-content a.wm-read-more {
  display: inline-block;
  padding: 8px 20px;
  background: var(--wm-accent2);
  border: 1px solid var(--wm-accent);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  transition: background .2s;
}
#wm-modal-content a.wm-read-more:hover { background: var(--wm-accent); color: #000; }

/* Leaflet popup override */
.leaflet-popup-content-wrapper {
  background: var(--wm-bg2) !important;
  border: 1px solid var(--wm-border) !important;
  color: var(--wm-text) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip { background: var(--wm-bg2) !important; }
.leaflet-popup-content { font-family: var(--wm-font-ar); font-size: 13px; direction: rtl; }

/* ── Admin CSS lives in admin.css but we reuse vars ── */
/* ═══════════════════════════════════════════════
   v1.7 — Breaking News + Tension + USGS/GDELT
   ═══════════════════════════════════════════════ */

/* ── Breaking News Bar ───────────────────────── */
#wm-breaking-bar {
  position: absolute;
  bottom: 0;
  left: 420px; /* عرض #wm-sidebar المفتوح افتراضياً — يُحدَّث ديناميكياً (0/420px) عند toggleSidebar() في app.js لتفادي التراكب معه، بنفس نمط #wm-crisis-banner */
  right: 52px; /* لا يغطي الـ layer-dock (عرضه 52px) */
  z-index: 450;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(127,29,29,0.95), rgba(153,27,27,0.95));
  border-top: 1px solid var(--wm-red);
  padding: 0 12px;
  height: 32px;
  overflow: hidden;
  gap: 10px;
  backdrop-filter: blur(4px);
  animation: wm-pulse-bg 2s ease-in-out infinite;
}
@keyframes wm-pulse-bg {
  0%,100% { background: linear-gradient(90deg,#7f1d1d,#991b1b); }
  50%      { background: linear-gradient(90deg,#991b1b,#b91c1c); }
}
.wm-breaking-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: var(--wm-red);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.wm-breaking-ticker { flex: 1; overflow: hidden; position: relative; }
/* يتوقف اللف عند مرور الفأرة — كان يمرّ دون أن يمنح وقتاً لقراءة الخبر */
.wm-breaking-ticker:hover .wm-breaking-track { animation-play-state: paused; }
.wm-breaking-track {
  display: flex;
  gap: 40px;
  animation: ticker-scroll 30s linear infinite;
  white-space: nowrap;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.wm-breaking-item {
  font-size: 12px;
  color: #fecaca;
  cursor: pointer;
  flex-shrink: 0;
}
.wm-breaking-item:hover { color: #fff; text-decoration: underline; }
.wm-breaking-meta { color: #fca5a5aa; font-size: 10.5px; margin-right: 6px; }
.wm-breaking-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
#wm-breaking-close {
  background: none; border: none; color: #fca5a5;
  cursor: pointer; font-size: 14px; flex-shrink: 0;
  padding: 0 8px;
  margin-left: 4px;
}
#wm-breaking-close:hover { color: #fff; }

/* ── Source Layer Toggles ────────────────────── */
.wm-header-center { display: flex; align-items: center; }
.wm-source-toggles { display: flex; gap: 6px; }
.wm-src-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--wm-border);
  color: #64748b;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--wm-font-ar);
}
.wm-src-btn.active {
  background: rgba(0,180,255,0.15);
  border-color: var(--wm-accent);
  color: var(--wm-accent);
}
.wm-src-btn:hover { border-color: var(--wm-accent); color: var(--wm-accent); }

/* ── Bell Button ─────────────────────────────── */
#wm-breaking-bell {
  position: relative;
  background: none;
  border: 1px solid var(--wm-border);
  color: var(--wm-text);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .2s;
}
#wm-breaking-bell:hover { border-color: var(--wm-red); }
#wm-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--wm-red);
  color: #fff;
  font-size: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center; justify-content: center;
  font-weight: bold;
}

/* ── Tension Meters Bar ──────────────────────── */
#wm-tension-bar {
  background: var(--wm-bg2);
  border-bottom: 1px solid var(--wm-border);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
#wm-tension-bar::-webkit-scrollbar { display: none; }
.wm-tension-title {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wm-tension-items { display: flex; gap: 12px; align-items: center; }
.wm-tension-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wm-tension-label {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
}
.wm-tension-bar-wrap {
  width: 60px;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.wm-tension-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1s ease;
}
.wm-tension-score {
  font-size: 11px;
  font-weight: 700;
  min-width: 28px;
}
.wm-tension-score small {
  font-size: 10px;
  margin-right: 1px;
  opacity: .8;
}

/* ── Breaking News Side Panel ────────────────── */
#wm-breaking-panel {
  position: absolute;
  top: 0; left: 0;
  width: 320px;
  height: 100%;
  background: var(--wm-bg);
  border-left: 1px solid var(--wm-red);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  transition: transform .3s ease;
}
#wm-breaking-panel.hidden {
  display: none;
}
.wm-breaking-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #7f1d1d;
  border-bottom: 1px solid var(--wm-red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
#wm-breaking-panel-close {
  background: none; border: none; color: #fca5a5;
  cursor: pointer; font-size: 16px;
}
#wm-breaking-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.wm-breaking-entry {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wm-border);
  cursor: pointer;
  transition: background .15s;
  align-items: flex-start;
}
.wm-breaking-entry:hover { background: var(--wm-bg2); }
.wm-be-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.wm-be-body { flex: 1; direction: rtl; }
.wm-be-score {
  font-size: 10px;
  color: var(--wm-red);
  font-weight: 700;
  margin-bottom: 3px;
}
.wm-be-title {
  font-size: 12px;
  color: var(--wm-text);
  text-decoration: none;
  line-height: 1.5;
  display: block;
}
.wm-be-title:hover { color: var(--wm-accent); }
.wm-be-meta { font-size: 10px; color: #64748b; margin-top: 4px; }

/* ── News Item Enhancements ──────────────────── */
.wm-item-summary {
  font-size: 11px;
  color: #64748b;
  margin: 3px 0 6px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wm-trend-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.wm-trend-badge.up   { background: rgba(239,68,68,.15);  color: var(--wm-red); }
.wm-trend-badge.down { background: rgba(34,197,94,.15);  color: var(--wm-green); }
.wm-geo-badge {
  font-size: 10px;
  opacity: .6;
}
/* مؤشر تأكيد المصادر */
.wm-src-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: default;
}
.wm-src-dots > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(100,116,139,.18);
  display: block;
  transition: background .2s;
}
/* مصدر واحد — رمادي */
.wm-sd-1 > span:nth-child(1) { background: #64748b; }
/* مصدران — برتقالي */
.wm-sd-2 > span:nth-child(1),
.wm-sd-2 > span:nth-child(2) { background: #f59e0b; }
/* 3+ مصادر — أخضر */
.wm-sd-3 > span { background: var(--wm-green); }

/* ── Earthquake counter box ──────────────────── */
.wm-threat.white span { color: #e2e8f0; }
.wm-threat.white      { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,.15); }

/* ── Source filter select ────────────────────── */
#wm-source-filter {
  flex: 1;
  background: var(--wm-bg2);
  border: 1px solid var(--wm-border);
  color: var(--wm-text);
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--wm-font-ar);
}

/* ── Spin animation ──────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsive ──────────────────────────────── */
/* ── Country Filter Bar ──────────────────────── */
#wm-country-bar {
  background: var(--wm-bg2);
  border-bottom: 1px solid var(--wm-border);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}
#wm-country-bar::-webkit-scrollbar { display: none; }
.wm-country-label {
  font-size: 14px;
  flex-shrink: 0;
  opacity: .6;
  margin-left: 4px;
}
.wm-country-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wm-border);
  color: #94a3b8;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
  font-family: var(--wm-font-ar);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wm-country-btn:hover {
  border-color: var(--wm-accent);
  color: var(--wm-accent);
  background: rgba(0,180,255,0.08);
}
.wm-country-btn.active {
  background: rgba(0,180,255,0.2);
  border-color: var(--wm-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(0,180,255,0.3);
}
.wm-country-clear {
  background: rgba(239,68,68,0.1) !important;
  border-color: var(--wm-red) !important;
  color: var(--wm-red) !important;
  font-weight: 600;
}
.wm-country-clear:hover {
  background: rgba(239,68,68,0.2) !important;
}
/* ══════════════════════════════════════════════════
   بطاقة الوضع العالمي
══════════════════════════════════════════════════ */
#wm-status-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-bottom: 1px solid #334155;
  padding: 10px 14px;
  display: block;
}
/* البطاقة بعد اكتمال البيانات */
#wm-status-card.wm-sc-visible #wm-status-loading { display: none; }
.wm-sc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.wm-sc-icon { font-size: 22px; flex-shrink: 0; }
.wm-sc-title { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.wm-sc-level { font-size: 16px; font-weight: 700; line-height: 1.2; }
.wm-sc-stats {
  margin-right: auto;
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #94a3b8;
}
.wm-sc-stats span { cursor: default; }
.wm-sc-events { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.wm-sc-event {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #cbd5e1;
  background: rgba(255,255,255,0.03);
  padding: 4px 8px;
  border-radius: 5px;
}
.wm-sc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wm-sc-badge {
  margin-right: auto;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.wm-sc-regions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.wm-sc-region {
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
}
.wm-sc-region small { color: var(--wm-orange); font-weight: 700; margin-right: 2px; }
.wm-sc-footer { font-size: 10px; color: #475569; text-align: left; }
#wm-status-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  padding: 4px 0;
}
.wm-status-spinner {
  width: 14px; height: 14px;
  border: 2px solid #334155;
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: wm-spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   Magnitude Badge
══════════════════════════════════════════════════ */
.wm-mag-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--wm-red), #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════
   Marker Clustering
══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   v4.2 — Cluster Redesign — حلقات + توهج
══════════════════════════════════════════════════ */

/* Leaflet icon container */
.wm-cluster-icon {
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
}

/* الدائرة الأساسية مع حلقة نابضة عبر ::before */
.wm-cluster {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: visible;

  background: radial-gradient(circle at 35% 35%, rgba(255,90,90,0.95), rgba(180,20,20,0.92));
  border: 2px solid rgba(255,130,130,0.45);
  box-shadow: 0 0 14px rgba(239,68,68,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
.wm-cluster::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.5);
  animation: wm-cluster-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes wm-cluster-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}
.wm-cluster:hover {
  transform: scale(1.12);
  box-shadow: 0 0 22px rgba(239,68,68,0.75);
}

/* كثافة متوسطة — برتقالي (متوسط الخطورة 3-6) */
.wm-cluster-warm {
  background: radial-gradient(circle at 35% 35%, rgba(251,146,60,0.95), rgba(194,65,12,0.92));
  border-color: rgba(253,186,116,0.45);
  box-shadow: 0 0 14px rgba(249,115,22,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
.wm-cluster-warm::before { border-color: rgba(249,115,22,0.5); }
.wm-cluster-warm:hover { box-shadow: 0 0 22px rgba(249,115,22,0.75); }

/* كثافة منخفضة — أخضر (متوسط الخطورة < 3) */
.wm-cluster-cool {
  background: radial-gradient(circle at 35% 35%, rgba(74,222,128,0.95), rgba(21,128,61,0.92));
  border-color: rgba(134,239,172,0.45);
  box-shadow: 0 0 14px rgba(34,197,94,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
.wm-cluster-cool::before { border-color: rgba(34,197,94,0.5); }
.wm-cluster-cool:hover { box-shadow: 0 0 22px rgba(34,197,94,0.75); }

/* زلازل — أصفر */
.wm-cluster-eq {
  background: radial-gradient(circle at 35% 35%, rgba(255,215,60,0.95), rgba(180,120,0,0.92));
  border: 2px solid rgba(250,200,60,0.5);
  box-shadow: 0 0 14px rgba(234,179,8,0.55), 0 2px 6px rgba(0,0,0,0.4);
  color: #1a0e00;
}
.wm-cluster-eq::before { border-color: rgba(234,179,8,0.5); }
.wm-cluster-eq:hover { box-shadow: 0 0 22px rgba(234,179,8,0.75); }

/* GDELT — أزرق */
.wm-cluster-gdelt {
  background: radial-gradient(circle at 35% 35%, rgba(100,165,255,0.95), rgba(30,70,190,0.92));
  border: 2px solid rgba(100,160,255,0.5);
  box-shadow: 0 0 14px rgba(59,130,246,0.55), 0 2px 6px rgba(0,0,0,0.4);
  color: #fff;
}
.wm-cluster-gdelt::before { border-color: rgba(59,130,246,0.5); }
.wm-cluster-gdelt:hover { box-shadow: 0 0 22px rgba(59,130,246,0.75); }

/* أحجام */
.wm-cluster-sm { font-size: 11px; }
.wm-cluster-md { font-size: 13px; }
.wm-cluster-lg { font-size: 14px; font-weight: 900; }
.wm-cluster-xl { font-size: 13px; font-weight: 900; letter-spacing: -0.5px; }


/* ══════════════════════════════════════════════════
   تحسينات قائمة الأخبار
══════════════════════════════════════════════════ */
.wm-item[data-type="earthquake"] {
  background: linear-gradient(to left, rgba(234,179,8,0.04) 0%, transparent 100%);
}
.wm-item[data-type="gdelt"] {
  background: linear-gradient(to left, rgba(59,130,246,0.04) 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════
   صفحة الحدث — Event Page Modal
══════════════════════════════════════════════════ */
.wm-event-page { display:flex; flex-direction:column; gap:14px; }

/* Header */
.wm-ep-header {
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.wm-ep-type { font-size:11px; color:#64748b; margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; }
.wm-ep-title { font-size:16px; font-weight:700; color:#f1f5f9; margin:0 0 8px; line-height:1.5; }
.wm-ep-summary { font-size:13px; color:#94a3b8; margin-bottom:8px; line-height:1.6; border-right:2px solid #334155; padding-right:10px; }
.wm-ep-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:#64748b; }

/* مؤشر الخطر */
.wm-ep-risk { background:rgba(255,255,255,0.02); border-radius:8px; padding:12px 14px; }
.wm-ep-risk-label { display:flex; justify-content:space-between; margin-bottom:8px; font-size:12px; color:#94a3b8; }
.wm-ep-risk-score { font-size:18px; font-weight:900; }
.wm-risk-bars { display:flex; gap:3px; height:8px; margin-bottom:6px; }
.wm-risk-bar {
  flex:1; border-radius:2px;
  background: rgba(255,255,255,0.08);
  transition: all .3s;
}
.wm-risk-bar.active { opacity:1; }
.wm-ep-risk-desc { font-size:11px; color:#64748b; }

/* Trend */
.wm-ep-trend { display:flex; align-items:center; gap:10px; }
.wm-trend-badge.large { font-size:13px; padding:4px 12px; }

/* Section */
.wm-ep-section-title { font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }

/* سجل تطور القصة */
.wm-ep-log-wrap  { font-size:12px; color:#64748b; }
.wm-log-empty    { color:#475569; font-size:12px; }
.wm-log-entry    { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.wm-log-time     { color:#475569; font-family:var(--wm-font-mono); font-size:10px; flex-shrink:0; }
.wm-log-field    { color:#94a3b8; font-size:11px; flex-shrink:0; }
.wm-log-val      { font-weight:700; font-size:11px; margin-right:auto; }
.wm-log-val.up   { color:var(--wm-red); }
.wm-log-val.dn   { color:var(--wm-green); }

/* Related */
.wm-ep-related { display:flex; flex-direction:column; gap:4px; }
.wm-ep-rel-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:6px;
  background:rgba(255,255,255,0.03);
  cursor:pointer; transition:background .15s;
  border:1px solid transparent;
}
.wm-ep-rel-item:hover { background:rgba(255,255,255,0.07); border-color:#334155; }
.wm-ep-rel-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.wm-ep-rel-title { flex:1; font-size:12px; color:#cbd5e1; line-height:1.4; }
.wm-ep-rel-score { font-size:11px; font-weight:700; flex-shrink:0; }

/* Actions */
.wm-ep-actions { display:flex; gap:8px; flex-wrap:wrap; padding-top:4px; }
.wm-ep-btn-primary {
  flex:1; padding:10px 16px; border-radius:8px;
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  color:#fff; font-size:13px; font-weight:600;
  text-decoration:none; text-align:center;
  transition:opacity .2s;
}
.wm-ep-btn-primary:hover { opacity:.85; color:#fff; }
.wm-ep-btn-secondary {
  padding:10px 16px; border-radius:8px;
  background:rgba(255,255,255,0.06); border:1px solid #334155;
  color:#94a3b8; font-size:13px; cursor:pointer;
  transition:all .15s;
}
.wm-ep-btn-secondary:hover { background:rgba(255,255,255,0.1); color:#f1f5f9; }

/* Toast */
#wm-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#1e293b; color:#f1f5f9; padding:10px 20px;
  border-radius:8px; font-size:13px; opacity:0;
  transition:all .3s; pointer-events:none; z-index:99999;
  border:1px solid #334155;
}
#wm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Modal بحجم أكبر لصفحة الحدث */
.wm-modal-box {
  max-height: 85vh;
  overflow-y: auto;
}

/* ══════════════════════════════════════════════════
   إصلاحات الموبايل الشاملة v1.9.1
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Header */
  .wm-logo span { display: none; }
  .wm-logo::after { content: '🌍 WM'; font-weight: 700; font-size: 13px; }
  #wm-news-count { display: none; }

  /* Source toggles */
  .wm-source-toggles { gap: 4px; }
  .wm-src-btn { padding: 3px 7px; font-size: 10px; }
  .wm-src-btn span { display: none; }

  /* Tabs */
  .wm-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .wm-tabs::-webkit-scrollbar { display: none; }
  .wm-tab { white-space: nowrap; padding: 6px 10px; font-size: 11px; flex-shrink: 0; }

  /* Tension bar */
  #wm-tension-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #wm-tension-bar::-webkit-scrollbar { display: none; }
  .wm-tension-item { flex-shrink: 0; min-width: 100px; }
  .wm-tension-title { display: none; }

  /* Status card */
  .wm-sc-stats { gap: 6px; font-size: 11px; }
  .wm-sc-title { display: none; }

  /* Map — ارتفاع أفضل على الموبايل */
  .wm-map-wrap { height: 45vh !important; min-height: 260px !important; }

  /* Panel */
  .wm-panel { height: 40vh !important; min-height: 220px !important; }
  .wm-filter-row { flex-wrap: wrap; gap: 4px; }
  .wm-filter-row select { font-size: 11px; padding: 3px 6px; flex: 1; min-width: 80px; }

  /* News items */
  .wm-item { padding: 8px 10px; }
  .wm-item-title { font-size: 12px; }

  /* Modal */
  .wm-modal-box { width: 95vw !important; max-height: 90vh !important; margin: 5vh auto; }
  .wm-ep-title { font-size: 14px; }
  .wm-ep-actions { flex-direction: column; }
  .wm-ep-btn-primary, .wm-ep-btn-secondary { text-align: center; }

  /* Breaking bar */
  #wm-breaking-bar { height: 30px; left: 0 !important; } /* على الموبايل #wm-sidebar لوحة سفلية بعرض كامل لا عمود يساري — لا حاجة لإزاحة */
  .wm-breaking-label { font-size: 10px; padding: 2px 6px; }

  /* ── مدمج من بلوكات 600px السابقة ── */
  #wm-brief-panel { right: 10px; bottom: 200px; width: 220px; }
  .wm-bm-container { max-width: 100%; margin: 0; border-radius: 10px; }
  #wm-ais-legend { left: 10px; bottom: 200px; }
}