/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600&family=Rajdhani:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');

:root {
  /* Backgrounds */
  --bg-void: #030509;
  --bg-primary: #0a0e17;
  --bg-panel: #0d1520;
  --bg-card: #111927;
  --bg-hover: #1a2435;

  /* Accent Colors */
  --accent-cyan: #00f5d4;
  --accent-cyan-dim: rgba(0, 245, 212, 0.15);
  --accent-cyan-glow: rgba(0, 245, 212, 0.3);
  --accent-blue: #0ea5e9;
  --accent-orange: #f97316;
  --accent-red: #ef4444;
  --accent-green: #22c55e;
  --accent-yellow: #eab308;
  --accent-purple: #a855f7;

  /* Text */
  --text-primary: #e2e8f0;
  --text-secondary: #64748b;
  --text-dim: #475569;
  --text-accent: #00f5d4;

  /* Borders */
  --border-dim: rgba(0, 245, 212, 0.08);
  --border-subtle: rgba(0, 245, 212, 0.15);
  --border-active: rgba(0, 245, 212, 0.4);

  /* Glow Effects */
  --glow-sm: 0 0 6px rgba(0, 245, 212, 0.2);
  --glow-md: 0 0 12px rgba(0, 245, 212, 0.25);
  --glow-lg: 0 0 24px rgba(0, 245, 212, 0.3);
  --glow-text: 0 0 8px rgba(0, 245, 212, 0.5);

  /* Layout */
  --topbar-height: 48px;
  --sidebar-width: 320px;
  --bottombar-height: 40px;
  --detail-panel-width: 0px;

  /* Legacy compat */
  --safe: #22c55e;
  --watch: #eab308;
  --warning: #f97316;
  --danger: #ef4444;
  --accent: #00f5d4;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
}

/* ============================================================
   BOOT SCREEN — Cinematic loading sequence
   ============================================================ */
.boot-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-void);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.boot-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.boot-logo {
  text-align: center;
  margin-bottom: 40px;
}

.boot-diamond {
  font-size: 48px;
  color: var(--accent-cyan);
  text-shadow: var(--glow-lg);
  animation: bootPulse 2s ease-in-out infinite;
  margin-bottom: 16px;
  display: block;
}

@keyframes bootPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.boot-title {
  font-family: 'Orbitron', monospace;
  font-size: 32px;
  font-weight: 900;
  color: var(--accent-cyan);
  letter-spacing: 8px;
  text-shadow: var(--glow-text);
}

.boot-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 4px;
  margin-top: 8px;
}

.boot-progress {
  width: 300px;
}

.boot-bar {
  height: 2px;
  background: var(--border-dim);
  border-radius: 1px;
  overflow: hidden;
}

.boot-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-cyan);
  box-shadow: var(--glow-sm);
  transition: width 0.3s ease;
}

.boot-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-cyan);
  letter-spacing: 1px;
  margin-top: 8px;
  text-align: center;
}

.boot-log {
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  max-height: 120px;
  overflow: hidden;
  width: 400px;
  text-align: left;
}

.boot-log-line {
  opacity: 0;
  animation: bootLineIn 0.3s ease forwards;
}

@keyframes bootLineIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 0.5; transform: translateY(0); }
}

/* ============================================================
   TOP BAR — Command Center Header
   ============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-active);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1000;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(0, 245, 212, 0.15), inset 0 -1px 0 rgba(0, 245, 212, 0.08);
}

/* Topbar corner bracket — top-left HUD mark */
.topbar::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--accent-cyan);
  border-left: 1.5px solid var(--accent-cyan);
  opacity: 0.5;
  pointer-events: none;
}

/* Topbar corner bracket — top-right HUD mark */
.topbar::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--accent-cyan);
  border-right: 1.5px solid var(--accent-cyan);
  opacity: 0.5;
  pointer-events: none;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-mark {
  font-size: 18px;
  color: var(--accent-cyan);
  text-shadow: var(--glow-text);
}

.logo-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.logo-name {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-cyan);
  letter-spacing: 3px;
  text-shadow: var(--glow-text);
}

.logo-arabic {
  font-family: 'Noto Kufi Arabic', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
  line-height: 1;
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 2px 10px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: #ef4444;
  letter-spacing: 2px;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px #ef4444; }
  50% { opacity: 0.3; box-shadow: 0 0 8px #ef4444; }
}

.topbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.clock {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 2px;
}

.clock-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-align: center;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Status indicator dots */
.status-indicators {
  display: flex;
  gap: 6px;
  align-items: center;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: help;
}

.status-dot.green {
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
}

.status-dot.red {
  background: var(--accent-red);
  box-shadow: 0 0 6px var(--accent-red);
  animation: livePulse 1s ease-in-out infinite;
}

.status-dot.yellow {
  background: var(--accent-yellow);
  box-shadow: 0 0 6px var(--accent-yellow);
}

/* Language toggle */
.lang-toggle {
  display: flex;
  gap: 4px;
}

.lang-btn {
  padding: 3px 10px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 3px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.lang-btn.active {
  background: var(--accent-cyan-dim);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: var(--glow-sm);
}

.lang-btn:hover:not(.active) {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ============================================================
   GLOBE CONTAINER
   ============================================================ */
#cesiumContainer {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: calc(var(--sidebar-width) + var(--detail-panel-width));
  bottom: var(--bottombar-height);
  background: var(--bg-void);
  transition: right 0.3s ease;
}

/* Scan line overlay — enhanced robotic grid */
#cesiumContainer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 245, 212, 0.04) 3px,
      rgba(0, 245, 212, 0.04) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(0, 245, 212, 0.018) 59px,
      rgba(0, 245, 212, 0.018) 60px
    );
  z-index: 1;
  animation: scanDrift 8s linear infinite;
}

@keyframes scanDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 400px, 0 0; }
}

/* Vignette + cyan edge glow — stronger inset frame */
#cesiumContainer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 245, 212, 0.06) 72%, rgba(3, 5, 9, 0.7) 100%),
    linear-gradient(to right, transparent 92%, rgba(0, 245, 212, 0.07) 100%),
    linear-gradient(to bottom, rgba(3, 5, 9, 0.4) 0%, transparent 10%),
    linear-gradient(to top, rgba(3, 5, 9, 0.4) 0%, transparent 8%);
  z-index: 2;
}

/* ============================================================
   SIDEBAR — Command Panel (right side)
   ============================================================ */
#sidebar {
  position: fixed;
  top: var(--topbar-height);
  right: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-primary);
  border-left: 1px solid var(--border-active);
  box-shadow: -2px 0 20px rgba(0, 245, 212, 0.06), inset 1px 0 0 rgba(0, 245, 212, 0.04);
  overflow-y: auto;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
  display: flex;
  flex-direction: column;
  /* Subtle circuit-grid background */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(0, 245, 212, 0.025) 39px,
      rgba(0, 245, 212, 0.025) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(0, 245, 212, 0.018) 39px,
      rgba(0, 245, 212, 0.018) 40px
    );
}

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

/* Sidebar header (used for mobile drag handle) */
#sidebar-header {
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-panel);
  cursor: default;
  flex-shrink: 0;
}

#sidebar-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-dim) transparent;
}

/* Section headers — code-style // prefix */
.section-header, .section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 16px 6px;
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.section-header::before, .section-title::before {
  content: '//';
  color: var(--text-dim);
  font-size: 10px;
}

.sidebar-section {
  border-bottom: 1px solid var(--border-dim);
}

/* ============================================================
   DASHBOARD CARDS — HUD Style
   ============================================================ */
.dashboard-grid, .summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px;
}

.hud-card, .summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* HUD corner accents */
.hud-card::before, .summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid var(--accent-cyan);
  border-left: 1.5px solid var(--accent-cyan);
  opacity: 0.8;
}

.hud-card::after, .summary-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-bottom: 1.5px solid var(--accent-cyan);
  border-right: 1.5px solid var(--accent-cyan);
  opacity: 0.8;
}

.hud-card:hover, .summary-card:hover {
  border-color: var(--border-active);
  box-shadow: var(--glow-sm);
}

.card-value, .summary-value {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.card-label, .summary-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

.card-sublabel, .summary-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.summary-delta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.summary-delta.up   { color: #ef4444; }
.summary-delta.down { color: #22c55e; }
.summary-delta.same { color: var(--text-dim); }
.summary-delta.up-good   { color: #22c55e; }
.summary-delta.down-bad  { color: #ef4444; }

/* Color variants */
.hud-card.danger .card-value,
.summary-card.danger .summary-value,
.summary-value.danger { color: var(--accent-red); }

.hud-card.warning .card-value,
.summary-card.warning .summary-value,
.summary-value.warning { color: var(--accent-orange); }

.hud-card.safe .card-value,
.summary-card.safe .summary-value,
.summary-value.safe { color: var(--accent-green); }

.hud-card.info .card-value,
.summary-card.info .summary-value,
.summary-value.info { color: var(--accent-cyan); }

/* Data update flash animation */
.hud-card.updating, .summary-card.updating {
  animation: dataFlash 0.5s ease;
}

@keyframes dataFlash {
  0% { border-color: var(--accent-cyan); box-shadow: var(--glow-md); }
  100% { border-color: var(--border-dim); box-shadow: none; }
}

/* ============================================================
   LAYER TOGGLES — Custom switches
   ============================================================ */
.layer-group-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 16px 4px;
  margin-top: 2px;
}
.layer-sub-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: rgba(0,245,212,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 16px 2px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.layer-item {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  gap: 10px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.layer-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Hide real checkbox, show custom toggle */
.layer-checkbox {
  display: none;
}

/* Custom toggle switch using a sibling span */
.toggle-switch {
  position: relative;
  width: 32px;
  height: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.layer-checkbox:checked + .toggle-switch {
  background: var(--accent-cyan-dim);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 4px rgba(0, 245, 212, 0.3);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.layer-checkbox:checked + .toggle-switch::after {
  left: 18px;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

.layer-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.layer-label {
  flex: 1;
  color: inherit;
}

/* Layer count badge */
.layer-count, .layer-count-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid rgba(0, 245, 212, 0.2);
  min-width: 20px;
  text-align: center;
}

/* Loading state — pulsing badge while Overpass data is being fetched */
.layer-count.fetching {
  color: rgba(0, 245, 212, 0.45);
  border-color: rgba(0, 245, 212, 0.15);
  animation: layerBadgeFetch 1.1s ease-in-out infinite;
}
@keyframes layerBadgeFetch {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1.00; }
}

/* Opacity control */
.opacity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
}

.opacity-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

#overlay-opacity {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-dim);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

#overlay-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--accent-cyan);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--glow-sm);
}

#opacity-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  min-width: 30px;
  text-align: right;
}

/* ============================================================
   WADI RISK LIST — Command style
   ============================================================ */
.wadi-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 16px;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.wadi-item:hover { background: var(--bg-hover); }

.wadi-item.safe { border-left-color: var(--accent-green); }
.wadi-item.watch { border-left-color: var(--accent-yellow); }
.wadi-item.warning { border-left-color: var(--accent-orange); }
.wadi-item.danger {
  border-left-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.04);
}

.risk-dot, .risk-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.risk-dot.safe, .risk-indicator.safe { background: var(--accent-green); }
.risk-dot.watch, .risk-indicator.watch { background: var(--accent-yellow); }
.risk-dot.warning, .risk-indicator.warning { background: var(--accent-orange); animation: pulse 2s infinite; }
.risk-dot.danger, .risk-indicator.danger { background: var(--accent-red); animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* Wadi score bar */
.wadi-score-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1px;
  margin-top: 5px;
  overflow: hidden;
}

.wadi-score-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.wadi-score-fill.safe    { background: var(--accent-green); }
.wadi-score-fill.watch   { background: var(--accent-yellow); }
.wadi-score-fill.warning { background: var(--accent-orange); box-shadow: 0 0 4px var(--accent-orange); }
.wadi-score-fill.danger  { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); }

.wadi-score-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
  min-width: 24px;
  text-align: right;
}

.wadi-item.danger .wadi-score-num { color: var(--accent-red); }
.wadi-item.warning .wadi-score-num { color: var(--accent-orange); }

.wadi-info { flex: 1; }

.wadi-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.wadi-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ============================================================
   NEWS FEED — Live intelligence feed
   ============================================================ */
.news-item {
  padding: 8px 16px;
  border-left: 2px solid var(--border-dim);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  gap: 10px;
}

.news-item:hover {
  background: var(--bg-hover);
  border-left-color: var(--accent-cyan);
}

.news-item-warning, .news-item.warning { border-left-color: var(--accent-orange); }
.news-item-emergency, .news-item.emergency { border-left-color: var(--accent-red); }

.news-item.new {
  animation: newsFlash 2s ease;
}

@keyframes newsFlash {
  0% { background: var(--accent-cyan-dim); }
  100% { background: transparent; }
}

.news-type-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.news-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 3px;
}

.news-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-time { color: var(--accent-cyan); }

.news-empty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 16px 0;
}

/* ============================================================
   SIDEBAR FOOTER
   ============================================================ */
.sidebar-footer {
  padding: 8px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  border-top: 1px solid var(--border-dim);
  background: var(--bg-panel);
  flex-shrink: 0;
}

.auto-update-note {
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.6;
  margin-top: 2px;
}

/* ============================================================
   BOTTOM BAR — Timeline & Status
   ============================================================ */
.bottombar, #timeline-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: var(--sidebar-width);
  height: var(--bottombar-height);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  gap: 12px;
}

.timeline-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
  white-space: nowrap;
}

#timeline-slider-wrap {
  flex: 1;
  position: relative;
}

#timeline-slider {
  width: 100%;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, var(--accent-cyan-dim) 50%, var(--border-dim) 50%);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

#timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent-cyan);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--glow-sm);
}

#timeline-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-cyan);
  cursor: pointer;
  border: none;
}

#timeline-time-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-cyan);
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
  background: var(--bg-card);
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
}

/* Data status dot in bottom bar */
.data-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent-green);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.data-status .pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-green);
  border-radius: 50%;
  animation: livePulse 2s infinite;
}

/* ============================================================
   DETAIL PANEL — floating HUD panel over globe
   ============================================================ */
#detail-panel {
  position: fixed;
  bottom: calc(var(--bottombar-height) + 16px);
  left: 16px;
  width: 280px;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 4px;
  z-index: 500;
  box-shadow: var(--glow-lg), 0 8px 32px rgba(0,0,0,0.6);
  display: none;
  overflow: hidden;
  animation: popupIn 0.2s ease-out;
}

#detail-panel.visible { display: block; }

#detail-panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--accent-cyan);
  border-left: 2px solid var(--accent-cyan);
}

#detail-panel::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  border-bottom: 2px solid var(--accent-cyan);
  border-right: 2px solid var(--accent-cyan);
}

#detail-panel .close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  z-index: 1;
  transition: all 0.2s;
}

#detail-panel .close-btn:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

#detail-panel h3 {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 1px;
  padding: 10px 36px 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-dim);
}

#detail-body {
  padding: 8px 14px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.detail-row:last-child { border-bottom: none; }

.detail-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
}

/* Forecast chart */
#forecast-chart-wrap {
  margin-top: 8px;
  padding: 0 14px 10px;
}

#forecast-chart-wrap canvas {
  max-height: 90px;
}

/* ============================================================
   CUSTOM WEATHER POPUP — HUD Panel
   ============================================================ */
.custom-popup {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 4px;
  width: 300px;
  z-index: 500;
  box-shadow: var(--glow-lg), 0 8px 32px rgba(0,0,0,0.6);
  animation: popupIn 0.2s ease-out;
  overflow: hidden;
  pointer-events: auto;
}

.custom-popup.hidden { display: none; }

@keyframes popupIn {
  from { opacity: 0; transform: scale(0.95) translateY(5px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* HUD corners on popup */
.custom-popup::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--accent-cyan);
  border-left: 2px solid var(--accent-cyan);
  pointer-events: none;
}

.custom-popup::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  border-bottom: 2px solid var(--accent-cyan);
  border-right: 2px solid var(--accent-cyan);
  pointer-events: none;
}

.popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-dim);
}

.popup-icon { font-size: 24px; flex-shrink: 0; }

.popup-title-block { flex: 1; }

.popup-title {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 1px;
}

.popup-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

.popup-close {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.popup-close:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.popup-body { padding: 0 0 8px; }

.popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 8px 12px 6px;
}

.popup-stat {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  padding: 6px 4px;
}

.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-value small { font-size: 10px; font-weight: 400; }

.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
  text-transform: uppercase;
}

.popup-forecast-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 6px 12px 4px;
}

.popup-forecast {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px 8px;
}

.forecast-hour {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-primary);
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-card);
}

.fh-time { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); font-size: 10px; min-width: 38px; }
.fh-icon { font-size: 13px; }
.fh-temp { font-family: 'JetBrains Mono', monospace; font-weight: 600; min-width: 34px; text-align: center; }
.fh-rain { font-family: 'JetBrains Mono', monospace; color: var(--accent-blue); font-size: 10px; }

/* ============================================================
   RISK BADGE (legacy)
   ============================================================ */
.risk-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.risk-badge.safe { background: rgba(34,197,94,0.15); color: var(--accent-green); border: 1px solid rgba(34,197,94,0.3); }
.risk-badge.watch { background: rgba(234,179,8,0.15); color: var(--accent-yellow); border: 1px solid rgba(234,179,8,0.3); }
.risk-badge.warning { background: rgba(249,115,22,0.15); color: var(--accent-orange); border: 1px solid rgba(249,115,22,0.3); }
.risk-badge.danger { background: rgba(239,68,68,0.15); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.3); }

/* Cesium overrides */
.cesium-widget-credits { display: none !important; }
.cesium-infoBox { display: none !important; }

/* ============================================================
   RTL — Arabic mode
   ============================================================ */
body.rtl { direction: rtl; text-align: right; }

body.rtl #sidebar {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--border-subtle);
}

body.rtl #cesiumContainer {
  left: calc(var(--sidebar-width) + var(--detail-panel-width));
  right: 0;
  transition: left 0.3s ease;
}

body.rtl .bottombar, body.rtl #timeline-bar {
  left: var(--sidebar-width);
  right: 0;
}

/* Detail panel zone: mirror to left side in RTL */
body.rtl #detail-panel-zone {
  right: auto;
  left: var(--sidebar-width);
  flex-direction: row-reverse;
}

/* Detail card border: flip from left to right edge in RTL */
body.rtl .layer-detail-card {
  border-left: none;
  border-right: 1px solid rgba(0, 245, 212, 0.18);
}

/* Floating location popup: anchor to right in RTL */
body.rtl #detail-panel {
  left: auto;
  right: 16px;
}

/* Sidebar-collapsed RTL: pull detail zone and cesium to screen edge */
body.rtl.sidebar-collapsed #detail-panel-zone {
  left: 0;
}
body.rtl.sidebar-collapsed #cesiumContainer {
  left: var(--detail-panel-width);
}

body.rtl .lang-toggle { flex-direction: row-reverse; }

body.rtl .topbar-left { flex-direction: row-reverse; }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 12px 12px 0 0;
    transform: translateY(calc(100% - 48px));
    transition: transform 0.3s ease;
  }

  #sidebar.open { transform: translateY(0); }

  #sidebar-header { cursor: pointer; }

  #sidebar-header::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    background: var(--border-subtle);
    border-radius: 2px;
    margin: 0 auto 8px;
  }

  #cesiumContainer {
    right: 0;
    bottom: 88px;
  }

  .bottombar, #timeline-bar {
    right: 0;
    bottom: 48px;
  }

  .topbar { padding: 0 8px; }
  .logo-arabic { display: none; }
  .clock { font-size: 14px; }
}

/* ============================================================
   NEWS HOVER CARD
   ============================================================ */
.news-hover-card {
  position: fixed;
  z-index: 600;
  width: 280px;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 4px;
  box-shadow: var(--glow-lg), 0 8px 32px rgba(0,0,0,0.7);
  pointer-events: none;
  animation: popupIn 0.15s ease-out;
  overflow: hidden;
}

.news-hover-card.hidden { display: none; }

/* HUD corners */
.news-hover-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--accent-cyan);
  border-left: 2px solid var(--accent-cyan);
}
.news-hover-card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--accent-cyan);
  border-right: 2px solid var(--accent-cyan);
}

.nhc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-dim);
}

.nhc-type-bar {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
}

.nhc-icon { font-size: 18px; flex-shrink: 0; }

.nhc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
}

.nhc-body { padding: 8px 12px; }

.nhc-location {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nhc-summary {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.nhc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid var(--border-dim);
}

.nhc-source {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
}

.nhc-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--accent-cyan);
}

.nhc-type-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
}

.nhc-type-badge.emergency { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }
.nhc-type-badge.warning   { background: rgba(249,115,22,0.2); color: #f97316; border: 1px solid rgba(249,115,22,0.4); }
.nhc-type-badge.info      { background: rgba(14,165,233,0.2); color: #0ea5e9; border: 1px solid rgba(14,165,233,0.4); }
.nhc-type-badge.update    { background: rgba(34,197,94,0.2); color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }

/* ============================================================
   NEWS BURST CARDS
   ============================================================ */
#news-burst-backdrop {
  position: fixed;
  inset: 0;
  z-index: 898;
  background: transparent;
}
#news-burst-backdrop.hidden { display: none; }

#news-burst.hidden { display: none; }

#news-burst {
  position: fixed;
  z-index: 900;
  background: rgba(13, 15, 36, 0.96);
  border: 1px solid rgba(0, 245, 212, 0.15);
  border-radius: 12px;
  padding: 10px 12px 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  overflow-y: auto;
  overflow-x: hidden;
  animation: nbFadeIn 0.18s ease;
}
@keyframes nbFadeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nb-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none;
  border: none;
  color: #9098b8;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.nb-close:hover { color: #e0e0e0; }
.nb-grid {
  display: grid;
  grid-template-columns: repeat(var(--nb-cols, 2), 220px);
  gap: 8px;
  margin-top: 4px;
}
.nb-card {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 9px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.nb-card-title {
  font-size: 12px;
  font-weight: 700;
  color: #e0e0e0;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}
.nb-card-summary {
  font-size: 11px;
  color: #9098b8;
  line-height: 1.4;
  flex: 1;
}
.nb-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #5a6080;
  gap: 4px;
}
.nb-card-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-card-time   { white-space: nowrap; }
.nb-card-link {
  font-size: 10px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 2px;
}
.nb-card-link:hover { text-decoration: underline; }

/* ============================================================
   MAP STYLE SELECTOR
   ============================================================ */
.map-style-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 6px 16px 2px;
  opacity: 0.6;
}

.map-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 2px 16px 6px;
}

.map-style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.map-style-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-subtle);
}

.map-style-btn.active {
  background: var(--accent-cyan-dim);
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-sm);
}

/* HUD corner on active */
.map-style-btn.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--accent-cyan);
  border-left: 1.5px solid var(--accent-cyan);
}

.map-style-icon { font-size: 18px; }

.map-style-btn span:last-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.map-style-btn.active span:last-child {
  color: var(--accent-cyan);
}

/* ============================================================
   PULSE ANIMATIONS (legacy compat)
   ============================================================ */
@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.news-pulse { animation: pulse-ring 1.5s ease-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RAINVIEWER CONTROLS
   ============================================================ */
.rain-animate-btn {
  margin-left: auto;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.rain-animate-btn:hover {
  background: rgba(0, 245, 212, 0.25);
  box-shadow: var(--glow-sm);
}
.rain-animate-btn.active {
  color: var(--accent-orange);
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
  animation: pulse-glow 1s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(249, 115, 22, 0.3); }
  50%       { box-shadow: 0 0 10px rgba(249, 115, 22, 0.6); }
}

.rain-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 6px 44px;
}
.rain-time-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rain-frame-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-cyan);
  min-width: 36px;
}

.rain-frame-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  flex-wrap: wrap;
}

.rain-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 245, 212, 0.25);
  transition: background 0.2s;
}

.rain-dot.active {
  background: var(--accent-cyan);
  box-shadow: 0 0 4px var(--accent-cyan);
}

/* ============================================================
   POPUP INLINE FORECAST CHART
   ============================================================ */
.popup-inline-chart {
  padding: 4px 12px 10px;
}

.popup-inline-chart canvas {
  max-height: 110px;
  width: 100% !important;
}

/* ============================================================
   DASHBOARD CARD HIERARCHY — Alert cards dominant
   ============================================================ */
.summary-card.alert-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

.summary-card.alert-card .summary-value {
  font-size: 28px;
  min-width: 48px;
  flex-shrink: 0;
}

.summary-card.alert-card .summary-label {
  font-size: 11px;
  margin-top: 2px;
}

/* Danger pulse — alert card glows red when active */
.summary-card.alert-card:has(.summary-value.danger) {
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: inset 0 0 32px rgba(239, 68, 68, 0.07), var(--glow-sm);
}

/* ============================================================
   LAYER ICON — SVG-compatible, no emoji
   ============================================================ */
.layer-icon {
  font-size: 13px;
  width: 18px;
  height: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  line-height: 18px;
  transition: color 0.2s;
}

.layer-item:hover .layer-icon {
  color: var(--accent-cyan);
}

.layer-item:has(.layer-checkbox:checked) .layer-icon {
  color: var(--accent-cyan);
}

/* News type symbol */
.news-type-sym {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1.2;
  margin-top: 1px;
}

/* ============================================================
   SIDEBAR COLLAPSE TOGGLE
   ============================================================ */
#sidebar-toggle {
  position: fixed;
  top: 50%;
  right: var(--sidebar-width);
  transform: translateY(-50%);
  width: 18px;
  height: 48px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-right: none;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  color: var(--text-dim);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s, background 0.2s, border-color 0.2s;
}

#sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--accent-cyan);
  border-color: var(--border-active);
}

#sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed #sidebar {
  transform: translateX(100%);
}

body.sidebar-collapsed #cesiumContainer {
  right: 0;
}

body.sidebar-collapsed #timeline-bar {
  right: 0;
}

body.sidebar-collapsed #sidebar-toggle {
  right: 0;
  border-right: 1px solid var(--border-subtle);
  border-radius: 4px 0 0 4px;
}

/* RTL — mirror the collapse button */
body.rtl #sidebar-toggle {
  right: auto;
  left: var(--sidebar-width);
  border-right: 1px solid var(--border-subtle);
  border-left: none;
  border-radius: 0 4px 4px 0;
}

body.rtl.sidebar-collapsed #sidebar-toggle {
  left: 0;
}

@media (max-width: 768px) {
  #sidebar-toggle { display: none; }
}

/* ============================================================
   RTL — Arabic font overrides
   ============================================================ */
body.rtl .section-title,
body.rtl .summary-label,
body.rtl .card-label,
body.rtl .layer-label,
body.rtl .wadi-name,
body.rtl .news-title,
body.rtl .news-meta,
body.rtl .sidebar-footer {
  font-family: 'Noto Kufi Arabic', sans-serif;
  letter-spacing: 0;
  line-height: 1.6;
}

/* Numbers and data values stay LTR even in Arabic mode */
body.rtl .summary-value,
body.rtl .card-value,
body.rtl .layer-count,
body.rtl .clock,
body.rtl .wadi-detail,
body.rtl .stat-value {
  direction: ltr;
  unicode-bidi: embed;
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   PHASE 4 — Prayer Times, Calendar, Cyclone, Coastal, Services
   ============================================================ */

/* --- Topbar center — clock + prayer split layout --- */
.topbar-clock-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  transition: background 0.2s;
}
.topbar-clock-block:hover {
  background: rgba(0, 245, 212, 0.08);
}

.topbar-prayer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.prayer-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
}

.topbar-divider {
  width: 1px;
  height: 28px;
  background: var(--border-dim);
  margin: 0 10px;
  flex-shrink: 0;
}

/* --- Dates block: Gregorian + Hijri stacked in topbar-right --- */
.topbar-dates-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 110px;
}

.gregorian-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hijri-date {
  font-family: 'Noto Kufi Arabic', 'Rajdhani', sans-serif;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* --- Prayer next-prayer bar in topbar --- */
.prayer-next-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--accent-cyan-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-cyan);
  transition: background 0.2s;
  white-space: nowrap;
}
.prayer-next-bar:hover { background: rgba(0,245,212,0.2); }
.prayer-crescent { font-size: 12px; }
.prayer-sep { color: var(--text-dim); font-size: 9px; }


/* --- World clock panel --- */
.world-clock-panel {
  display: none;
  position: fixed;
  top: calc(var(--topbar-height) + 4px);
  left: 0; /* overridden by JS */
  width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), var(--glow-sm);
  z-index: 600;
  overflow: hidden;
}
.world-clock-panel.open { display: block; }

.world-clock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.world-clock-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}
.world-clock-close:hover { color: var(--accent-red); }

.world-clock-cities { padding: 4px 0; }

.world-clock-row {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  gap: 8px;
  transition: background 0.15s;
}
.world-clock-row:hover { background: rgba(255,255,255,0.04); }

.wc-city {
  flex: 1;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
}
.wc-time {
  font-size: 13px;
  font-family: 'Orbitron', monospace;
  font-weight: 500;
  color: var(--accent-cyan);
  letter-spacing: 1px;
  min-width: 42px;
  text-align: right;
}
.wc-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 9px;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.world-clock-row:hover .wc-remove { opacity: 1; }
.wc-remove:hover { color: var(--accent-red); }

.world-clock-add {
  padding: 6px 12px 10px;
  border-top: 1px solid var(--border-dim);
}
.world-clock-select {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
}
.world-clock-select:focus { outline: none; border-color: var(--accent-cyan); }

/* --- Prayer panel dropdown (anchored to center) --- */
.prayer-panel {
  display: none;
  position: fixed;
  top: calc(var(--topbar-height) + 4px);
  left: 0; /* overridden by JS */
  width: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), var(--glow-sm);
  z-index: 500;
  overflow: hidden;
}
.prayer-panel.open { display: block; }

.prayer-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.prayer-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
}
.prayer-panel-close:hover { color: var(--text-primary); }

.prayer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 13px;
  transition: background 0.15s;
}
.prayer-row:last-child { border-bottom: none; }
.prayer-row.next-prayer {
  background: var(--accent-cyan-dim);
  border-left: 2px solid var(--accent-cyan);
}
.prayer-row.passed { opacity: 0.4; }
.prayer-name { color: var(--text-primary); font-weight: 600; }
.prayer-time { font-family: 'JetBrains Mono', monospace; color: var(--accent-cyan); }
.prayer-row.next-prayer .prayer-time { color: var(--accent-cyan); text-shadow: var(--glow-text); }
.prayer-countdown-inline {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
}

/* --- Date / Calendar card --- */
.date-card {
  display: none;
  position: fixed;
  top: calc(var(--topbar-height) + 4px);
  left: 0; /* overridden by JS */
  width: 280px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), var(--glow-sm);
  z-index: 600;
  overflow: hidden;
}
.date-card.open { display: block; }
.date-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-dim);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}
.date-card-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}
.date-card-close:hover { color: var(--accent-red); }
.date-card-body { padding: 10px 12px; }
.dc-cal-month {
  text-align: center;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-weight: 700;
}
.dc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 10px;
}
.dc-cal-day-hdr {
  text-align: center;
  font-size: 8px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 0;
}
.dc-cal-day {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 3px 1px;
  border-radius: 3px;
  cursor: default;
  font-family: 'JetBrains Mono', monospace;
}
.dc-cal-day.today {
  background: var(--accent-cyan);
  color: #000;
  font-weight: 700;
  border-radius: 50%;
}
.dc-cal-day.other-month { color: var(--text-dim); opacity: 0.4; }
.dc-cal-upcoming { border-top: 1px solid var(--border-dim); padding-top: 8px; }
.dc-cal-upcoming-title {
  font-size: 9px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.dc-cal-up-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dc-cal-up-row:last-child { border-bottom: none; }
.dc-cal-up-date {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  min-width: 46px;
}
.dc-cal-up-label {
  font-size: 10px;
  color: var(--text-secondary);
  flex: 1;
}
.dc-cal-up-cd {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  text-align: right;
}
.dc-cal-hijri-note {
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* --- Cyclone alert card --- */
.cyclone-alert-card {
  grid-column: 1 / -1;
  animation: pulseAlert 2s ease-in-out infinite;
}
.cyclone-alert-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.cyclone-alert-icon { font-size: 28px; animation: spin 4s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cyclone-alert-body { flex: 1; }
.cyclone-alert-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cyclone-alert-cat  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.cyclone-alert-wind { font-size: 11px; color: var(--accent-orange); margin-top: 2px; }
.cyclone-alert-count { font-size: 11px; color: var(--text-dim); }

@keyframes pulseAlert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.danger-card  { border-color: var(--accent-red) !important; }
.warning-card { border-color: var(--accent-orange) !important; }
.watch-card   { border-color: var(--accent-yellow) !important; }

/* --- Holiday card --- */
.holiday-card { cursor: default; }
.holiday-icon { font-size: 22px !important; }
#holiday-name { font-size: 11px !important; }
#holiday-countdown { color: var(--accent-cyan); font-family: 'JetBrains Mono', monospace; }

/* --- Coastal popup detail --- */
.coastal-swell-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-dim);
  padding-top: 6px;
}

/* --- Service popup --- */
.service-popup-body { padding: 10px 14px; }
.service-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}
.service-detail a { text-decoration: none; }
.service-detail a:hover { text-decoration: underline; }
.service-maps-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--accent-cyan-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 11px;
  text-decoration: none;
  transition: background 0.2s;
}
.service-maps-btn:hover { background: rgba(0,245,212,0.2); }

/* --- Mosque list --- */
.mosque-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-dim);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 4px;
}
.mosque-item:hover { background: var(--bg-hover); }
.mosque-icon { font-size: 16px; flex-shrink: 0; }
.mosque-info { flex: 1; min-width: 0; }
.mosque-name { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mosque-dist { font-size: 10px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; }

/* ── Satellite control panel ─────────────────────────────── */
.satellite-panel {
  position: fixed;
  bottom: calc(var(--bottombar-height) + 68px);
  left: 16px;
  z-index: 202;
  user-select: none;
}
body.sidebar-collapsed .satellite-panel { left: 16px; }

/* Collapsed state — just the launch button */
.satellite-panel.sat-is-collapsed .sat-expanded { display: none; }
.satellite-panel:not(.sat-is-collapsed) .sat-open-btn { display: none; }

.sat-open-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--accent-cyan);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), var(--glow-sm);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sat-open-btn:hover {
  background: rgba(0,245,212,0.08);
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), var(--glow-md);
}
.sat-open-icon { font-size: 16px; line-height: 1; }

/* Expanded panel */
.sat-expanded {
  width: 460px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-dim) transparent;
}

/* SAR + cloud cap on same row */
.sat-sar-cloud-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.sat-sar-cloud-row .sat-sensor-pill { flex-shrink: 0; }
.sat-cloud-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.sat-cloud-lbl {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sat-cloud-unit {
  font-size: 10px;
  color: var(--text-secondary);
}

/* Upcoming passes section */
.sat-upcoming { margin-top: 8px; }
.sat-upcoming-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
  font-family: 'Rajdhani', sans-serif;
}
.sat-upcoming-note {
  font-size: 8px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 0 2px;
}
.sat-upcoming-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(167,139,250,0.05);
  border: 1px solid rgba(167,139,250,0.12);
  margin-bottom: 3px;
}
.sat-upcoming-row .sat-up-name {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: #c4b5fd;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sat-upcoming-row .sat-up-time {
  font-size: 8px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  white-space: nowrap;
}
.sat-upcoming-row .sat-up-cov {
  font-size: 8px;
  color: rgba(167,139,250,0.75);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.sat-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.sat-panel-icon { font-size: 14px; }
.sat-panel-close {
  background: none; border: none;
  color: var(--text-dim); font-size: 13px;
  cursor: pointer; padding: 0 2px; line-height: 1;
  transition: color 0.12s;
}
.sat-panel-close:hover { color: var(--accent-red); }
.sat-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-cyan);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  flex: 1;
}

/* Section divider labels */
.sat-section-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-dim);
  font-family: 'Rajdhani', sans-serif;
  margin: 10px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-dim);
}

.sat-sensor-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.sat-sensor-pill {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sat-sensor-pill:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sat-sensor-pill.active { background: rgba(0,212,255,0.14); border-color: var(--accent-cyan); color: var(--accent-cyan); }

.sat-panel-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sat-field-label {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.sat-cloud-input {
  width: 52px;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 5px;
  text-align: center;
}
.sat-fetch-btn {
  background: rgba(0,212,255,0.12);
  border: 1px solid var(--accent-cyan);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 12px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.sat-fetch-btn:hover { background: rgba(0,212,255,0.25); }
.sat-fetch-btn.loading { opacity: 0.5; pointer-events: none; }
.sat-fetch-row { display: flex; gap: 5px; margin-top: 0; }
.sat-fetch-half { flex: 1; padding: 6px 4px; font-size: 11px; text-align: center; }

/* result section */
.satellite-result.hidden { display: none; }
.sat-divider { height: 1px; background: var(--border-dim); margin: 8px 0; }
.sat-result-meta { margin-bottom: 7px; }
.sat-badge-source { font-size: 11px; font-weight: 700; color: var(--accent-cyan); }
.sat-badge-date   { font-size: 10px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.sat-badge-res    { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.sat-result-actions { display: flex; gap: 5px; }
.sat-action-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-align: center;
  transition: border-color 0.12s, color 0.12s;
}
.sat-toggle-btn:hover  { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sat-clear-btn:hover   { border-color: var(--accent-red); color: var(--accent-red); }
.sat-dl-btn:hover      { border-color: #a3e635; color: #a3e635; }
.sat-ss-open-btn:hover { border-color: #c084fc; color: #c084fc; }

/* timeline section */
.sat-timeline.hidden { display: none; }
.sat-timeline { margin-top: 10px; padding-top: 0; border-top: 1px solid var(--border-dim); }
.sat-tl-header { display: flex; align-items: center; padding-top: 7px; margin-bottom: 6px; }
.sat-tl-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--text-dim); font-family: 'Rajdhani', sans-serif; flex: 1; }
.sat-tl-refresh {
  background: none; border: 1px solid var(--border-dim); border-radius: 3px;
  color: var(--text-dim); font-size: 11px; cursor: pointer; padding: 1px 5px;
}
.sat-tl-refresh:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* Extreme weather events list */
.sat-events-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 7px;
}
.sat-event-chip {
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.sat-event-chip-year { font-weight: 400; opacity: 0.75; }

.sat-event-chip-cyclone { color: #fb923c; }
.sat-event-chip-cyclone:hover { background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.5); }
.sat-event-chip-cyclone.active { background: rgba(251,146,60,0.16); border-color: #fb923c; }

.sat-event-chip-flood { color: #60a5fa; }
.sat-event-chip-flood:hover { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.5); }
.sat-event-chip-flood.active { background: rgba(96,165,250,0.16); border-color: #60a5fa; }

.sat-event-chip-storm { color: #c084fc; }
.sat-event-chip-storm:hover { background: rgba(192,132,252,0.1); border-color: rgba(192,132,252,0.5); }
.sat-event-chip-storm.active { background: rgba(192,132,252,0.16); border-color: #c084fc; }

/* Event detail card */
.sat-event-detail {
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  margin-bottom: 8px;
}
.sat-event-detail.hidden { display: none; }
.sat-evt-detail-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 4px; }
.sat-evt-detail-name { font-size: 12px; font-weight: 700; color: var(--text-primary); font-family: 'Rajdhani', sans-serif; flex: 1; }
.sat-evt-detail-clear {
  background: none; border: none; color: var(--text-dim); font-size: 11px;
  cursor: pointer; padding: 0; line-height: 1; margin-top: 1px;
  transition: color 0.1s;
}
.sat-evt-detail-clear:hover { color: var(--accent-red); }
.sat-evt-detail-desc { font-size: 9px; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; }
.sat-evt-detail-meta { display: flex; flex-direction: column; gap: 3px; }
.sat-evt-meta-tag { font-size: 9px; font-family: 'JetBrains Mono', monospace; color: var(--text-dim); }
.sat-evt-meta-core   { color: var(--accent-cyan); }
.sat-evt-meta-window { color: rgba(0,212,255,0.55); }

/* Available imagery sub-header */
.sat-tl-subrow {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border-dim);
  margin-bottom: 4px;
}
.sat-tl-sublabel {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.9px; color: var(--text-dim);
  font-family: 'Rajdhani', sans-serif; flex: 1;
}

/* Calendar event range highlighting */
.sat-cal-day.event-core.event-cyclone  { background: rgba(251,146,60,0.2);  outline: 1px solid rgba(251,146,60,0.65); }
.sat-cal-day.event-core.event-flood    { background: rgba(96,165,250,0.2);  outline: 1px solid rgba(96,165,250,0.65); }
.sat-cal-day.event-core.event-storm    { background: rgba(192,132,252,0.2); outline: 1px solid rgba(192,132,252,0.65); }
.sat-cal-day.event-buffer.event-cyclone { background: rgba(251,146,60,0.07);  outline: 1px dashed rgba(251,146,60,0.35); }
.sat-cal-day.event-buffer.event-flood   { background: rgba(96,165,250,0.07);  outline: 1px dashed rgba(96,165,250,0.35); }
.sat-cal-day.event-buffer.event-storm   { background: rgba(192,132,252,0.07); outline: 1px dashed rgba(192,132,252,0.35); }
/* Colored day numbers on core days */
.sat-cal-day.event-core.event-cyclone .sat-cal-day-num { color: #fb923c; font-weight: 700; }
.sat-cal-day.event-core.event-flood   .sat-cal-day-num { color: #60a5fa; font-weight: 700; }
.sat-cal-day.event-core.event-storm   .sat-cal-day-num { color: #c084fc; font-weight: 700; }
/* No-data days in event range — make number visible */
.sat-cal-day.no-data.event-buffer .sat-cal-day-num { color: rgba(148,163,184,0.45); }
.sat-cal-day.no-data.event-core.event-cyclone .sat-cal-day-num { color: rgba(251,146,60,0.6); font-weight: 700; }
.sat-cal-day.no-data.event-core.event-flood   .sat-cal-day-num { color: rgba(96,165,250,0.6);  font-weight: 700; }
.sat-cal-day.no-data.event-core.event-storm   .sat-cal-day-num { color: rgba(192,132,252,0.6); font-weight: 700; }

/* ── Calendar timeline ─────────────────────────────────────��─── */
.sat-tl-status { font-size: 9px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; min-height: 13px; padding: 2px 0; }
.sat-cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 4px; gap: 4px; }
.sat-cal-nav-group { display: flex; gap: 2px; }
.sat-cal-nav-btn {
  background: none; border: 1px solid var(--border-dim); border-radius: 4px;
  color: var(--text-secondary); font-size: 12px; padding: 3px 9px; cursor: pointer;
  line-height: 1.2;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.sat-cal-nav-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.07); }
.sat-cal-latest-btn {
  width: 100%; background: none; border: 1px solid var(--border-dim); border-radius: 4px;
  color: var(--text-dim); font-size: 9px; font-family: 'JetBrains Mono', monospace;
  padding: 3px 0; cursor: pointer; text-align: center; margin-bottom: 5px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.sat-cal-latest-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.06); }

/* Selected date confirmation row */
.sat-selected-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 9px;
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.25);
  border-radius: 5px;
}
.sat-selected-row.hidden { display: none; }
.sat-selected-lbl {
  font-size: 9px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.sat-selected-date-txt {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-cyan);
  font-weight: 600;
  flex: 1;
}
.sat-fetch-date-btn {
  background: var(--accent-cyan);
  border: none;
  border-radius: 4px;
  color: #0a0e1a;
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  padding: 5px 13px;
  cursor: pointer;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.sat-fetch-date-btn:hover { opacity: 0.85; }
.sat-fetch-date-btn.loading { opacity: 0.5; pointer-events: none; }
.sat-cal-label {
  font-size: 10px; color: var(--text-primary); font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: 0.05em;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color 0.12s, color 0.12s;
}
.sat-cal-label:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sat-cal-label.picker-open { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.08); }

/* Year / month quick-picker */
.sat-cal-picker {
  background: var(--bg-deep);
  border: 1px solid var(--accent-cyan);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 6px;
}
.sat-picker-title {
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
  color: var(--accent-cyan); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.sat-picker-back {
  color: var(--text-dim); cursor: pointer; font-size: 8px;
  text-decoration: underline;
}
.sat-picker-back:hover { color: var(--accent-cyan); }
.sat-picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.sat-picker-btn {
  background: none; border: 1px solid var(--border-dim); border-radius: 3px;
  color: var(--text-dim); font-size: 9px; font-family: 'JetBrains Mono', monospace;
  padding: 3px 0; cursor: pointer; text-align: center;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.sat-picker-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.06); }
.sat-picker-btn.active { background: rgba(0,212,255,0.18); border-color: var(--accent-cyan); color: var(--accent-cyan); }

.sat-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sat-cal-day-hdr { font-size: 8px; color: var(--text-dim); text-align: center; padding: 1px 0 4px; font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.sat-cal-day {
  border-radius: 4px;
  padding: 4px 1px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 42px;
  transition: background 0.1s;
}
.sat-cal-day.has-data { cursor: pointer; }
.sat-cal-day.has-data:hover { background: rgba(0,212,255,0.1); }
.sat-cal-day.active-day { background: rgba(0,212,255,0.18) !important; outline: 1px solid var(--accent-cyan); }
.sat-cal-day-num {
  font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text-primary);
  line-height: 1; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
}
.sat-cal-day.empty .sat-cal-day-num { visibility: hidden; }
.sat-cal-day.no-data .sat-cal-day-num { color: rgba(148,163,184,0.25); }
.sat-cal-day.today-day .sat-cal-day-num {
  background: rgba(0,212,255,0.25);
  border: 1px solid var(--accent-cyan);
  border-radius: 50%;
  color: var(--accent-cyan);
  font-weight: 700;
}
.sat-cal-cloud-bar { width: calc(100% - 4px); height: 4px; border-radius: 2px; margin-top: 3px; }
.sat-cal-cloud-low  { background: #22c55e; }
.sat-cal-cloud-mid  { background: #eab308; }
.sat-cal-cloud-high { background: #ef4444; }
.sat-cal-cloud-sar  { background: #60a5fa; }
.sat-cal-cloud-pct  {
  font-size: 8px; font-family: 'JetBrains Mono', monospace; line-height: 1; margin-top: 2px;
  font-weight: 600;
}
.sat-cal-day .sat-cal-cloud-low  + .sat-cal-cloud-pct { color: #4ade80; }
.sat-cal-day .sat-cal-cloud-mid  + .sat-cal-cloud-pct { color: #facc15; }
.sat-cal-day .sat-cal-cloud-high + .sat-cal-cloud-pct { color: #f87171; }
.sat-cal-day .sat-cal-cloud-sar  + .sat-cal-cloud-pct { color: #93c5fd; }
/* ── Satellite detail card body ──────────────────────────── */
.sat-detail-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; overflow-y: auto;
}
.sat-tr-card {
  padding: 7px 8px;
  border: 1px solid rgba(0,245,212,0.08);
  border-radius: 6px;
  background: rgba(0,245,212,0.03);
}
.sat-tr-card:hover { background: rgba(0,245,212,0.06); }
.sat-tr-main {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.sat-tr-led {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sat-tr-info { flex: 1; min-width: 0; }
.sat-tr-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sat-tr-agency {
  font-size: 8px; color: var(--text-dim); margin-top: 1px;
}
.sat-tr-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--accent-cyan); white-space: nowrap; flex-shrink: 0;
}
.sat-tr-passtime {
  font-size: 8px; color: var(--accent-cyan);
  font-family: 'JetBrains Mono', monospace;
  margin: 1px 0 4px; opacity: 0.8;
}
.sat-tr-meta {
  font-size: 8px; color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace; margin-bottom: 4px;
}
.sat-tr-detail { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 3px; }
.sat-tr-badge {
  font-size: 7px; padding: 1px 5px; border-radius: 3px;
  background: rgba(148,163,184,0.1); color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
.sat-tr-badge-s2_true { background: rgba(0,212,255,0.12); color: #00d4ff; }
.sat-tr-badge-s1_sar  { background: rgba(167,139,250,0.12); color: #a78bfa; }
.sat-tr-badge-landsat { background: rgba(251,191,36,0.12); color: #fbbf24; }
.sat-tr-badge-modis   { background: rgba(74,222,128,0.12); color: #4ade80; }
.sat-tr-badge-viirs   { background: rgba(249,115,22,0.12); color: #f97316; }
.sat-tr-badge-avhrr   { background: rgba(251,113,133,0.12); color: #fb7185; }
.sat-tr-badge-iss     { background: rgba(226,232,240,0.12); color: #e2e8f0; }
.sat-tr-purpose {
  font-size: 8px; color: var(--text-dim); line-height: 1.4;
  font-style: italic;
}

/* ── Predicted pass cells in calendar (not clickable) ────── */
.sat-cal-day.predicted-pass {
  cursor: default;
  background: rgba(167, 139, 250, 0.07);
  border: 1px dashed rgba(167, 139, 250, 0.3);
  border-radius: 3px;
}
.sat-cal-day.predicted-pass .sat-cal-day-num { color: #c4b5fd; }
.sat-cal-pass-bar {
  width: calc(100% - 4px); height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  margin-top: 2px; opacity: 0.6;
}
.sat-cal-pass-sat {
  font-size: 7px; font-family: 'JetBrains Mono', monospace;
  color: #c4b5fd; line-height: 1; margin-top: 1px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sat-cal-pass-time {
  font-size: 7px; font-family: 'JetBrains Mono', monospace;
  color: rgba(196,181,253,0.7); line-height: 1;
}
.sat-cal-pass-cloud {
  font-size: 7px; font-family: 'JetBrains Mono', monospace;
  line-height: 1; margin-top: 1px; font-weight: 600;
}
.sat-cal-pass-cloud.sat-cal-cloud-low  { color: #4ade80; }
.sat-cal-pass-cloud.sat-cal-cloud-mid  { color: #facc15; }
.sat-cal-pass-cloud.sat-cal-cloud-high { color: #f87171; }
.sat-cal-pass-cloud.sat-cal-cloud-sar  { color: #93c5fd; }

.sat-tl-loading { font-size: 10px; color: var(--text-dim); padding: 4px 0; }
.sat-tl-load-btn {
  width: 100%;
  background: none;
  border: 1px dashed var(--border-dim);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  padding: 4px 0;
  transition: border-color 0.12s, color 0.12s;
}
.sat-tl-load-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
/* opacity blend slider */
.sat-opacity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.sat-opacity-slider {
  flex: 1;
  height: 3px;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}
.sat-opacity-val {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  min-width: 30px;
  text-align: right;
}
/* ── Slideshow Modal ─────────────────────────────────────── */
.sat-slideshow-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sat-slideshow-modal.hidden { display: none; }
.sat-ss-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, 0.88);
  backdrop-filter: blur(6px);
}
.sat-ss-content {
  position: relative;
  width: min(1280px, 96vw);
  height: 88vh;
  max-height: 96vh;
  min-width: 500px;
  min-height: 440px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,212,255,0.08);
  resize: both;
  display: flex;
  flex-direction: column;
}
.sat-ss-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-dim);
}
.sat-ss-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-cyan);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex: 1;
}
.sat-ss-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.sat-ss-close-btn:hover { color: var(--accent-red); }
.sat-ss-image-area {
  position: relative;
  background: #000;
  flex: 1;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sat-ss-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.15s;
}
.sat-ss-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(5,10,20,0.85));
  padding: 20px 12px 8px;
}
.sat-ss-info-date {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-cyan);
  font-family: 'JetBrains Mono', monospace;
}
.sat-ss-info-meta {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.sat-ss-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,10,20,0.6);
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
}
.sat-ss-loading-overlay.hidden { display: none; }
.sat-ss-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px 4px;
  flex-shrink: 0;
}
.sat-ss-ctrl-btn {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  padding: 5px 16px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.sat-ss-ctrl-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sat-ss-play-btn { border-color: var(--accent-cyan); color: var(--accent-cyan); min-width: 90px; }
.sat-ss-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 8px;
  flex-shrink: 0;
}
.sat-ss-frame-info {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  flex: 1;
}
.sat-ss-speed-ctrl { display: flex; align-items: center; gap: 5px; }
.sat-ss-range-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 8px;
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.sat-ss-select {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 4px;
  flex: 1;
}
.sat-ss-range-btn {
  background: rgba(0,212,255,0.1);
  border: 1px solid var(--accent-cyan);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
/* thumbnail strip */
.sat-ss-thumbs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 14px;
  background: rgba(5,10,20,0.5);
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
  scrollbar-width: thin;
  min-height: 68px;
  align-items: center;
}
.sat-ss-thumb {
  flex-shrink: 0;
  width: 56px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.12s, opacity 0.12s;
  opacity: 0.65;
}
.sat-ss-thumb:hover  { border-color: var(--text-dim); opacity: 1; }
.sat-ss-thumb.active { border-color: var(--accent-cyan); opacity: 1; }
.sat-ss-thumb.nodata { opacity: 0.25; cursor: default; }
.sat-ss-thumb-img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  display: block;
  background: var(--bg-deep);
}
.sat-ss-thumb-lbl {
  font-size: 8px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  padding: 1px 2px 2px;
  background: var(--bg-deep);
  white-space: nowrap;
}
.sat-ss-thumb.nodata .sat-ss-thumb-lbl { color: var(--text-dim); }

.sat-ss-footer {
  display: flex;
  gap: 8px;
  padding: 8px 14px 12px;
  flex-shrink: 0;
}
.sat-ss-footer-btn {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  padding: 6px 0;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.sat-ss-footer-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sat-ss-footer-close:hover { border-color: var(--text-dim); color: var(--text-primary); }
.sat-ss-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; color: var(--text-dim);
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
  text-align: center; pointer-events: none;
}
.sat-ss-placeholder.hidden { display: none; }
.sat-ss-placeholder-icon { font-size: 28px; margin-bottom: 4px; }

/* ── Pinned satellite layers ─────────────────────────────── */
.sat-pinned-layers { margin-top: 6px; }
.sat-pinned-layers:empty { display: none; }
.sat-pin-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sat-pin-info {
  flex: 1;
  font-size: 9px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sat-pin-btn {
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 9px;
  cursor: pointer;
  padding: 2px 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}
.sat-pin-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sat-pin-remove:hover { border-color: var(--accent-red); color: var(--accent-red); }
.sat-pin-open-btn:hover { border-color: #a78bfa; color: #a78bfa; }

/* timeline range selector */
.sat-tl-range-btns { display: flex; gap: 3px; }
.sat-tl-range {
  background: none;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 9px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  padding: 1px 5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.sat-tl-range:hover  { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sat-tl-range.active { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.1); }

/* --- Dust overlay toggle label --- */
#overlay-dust + .toggle-switch { }  /* inherits existing toggle styles */

/* ============================================================
   PHASE 5: FUEL, TOURISM, REPORTS, UPLOAD MODAL
   ============================================================ */

/* Report Conditions button in sidebar */
.report-conditions-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 6px 12px 2px;
  padding: 7px 12px;
  background: rgba(232, 121, 249, 0.1);
  border: 1px solid rgba(232, 121, 249, 0.4);
  border-radius: 4px;
  color: #e879f9;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.report-conditions-btn:hover { background: rgba(232, 121, 249, 0.2); }

/* Fuel popup badges */
.fuel-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.fuel-badge {
  padding: 2px 8px;
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: 10px;
  color: #f97316;
  font-size: 11px;
  font-weight: 600;
}

/* Tourism popup */
.tourism-photo {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}
.tourism-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
  max-height: 80px;
  overflow-y: auto;
}
.custom-poi-badge {
  font-size: 10px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  border-radius: 10px;
  padding: 1px 6px;
  vertical-align: middle;
}

/* Community report popup media */
.report-media {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
  display: block;
}

/* Upload modal */
.upload-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-modal.hidden { display: none; }

.upload-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, 0.75);
  backdrop-filter: blur(4px);
}

.upload-modal-box {
  position: relative;
  z-index: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 0 30px rgba(0, 245, 212, 0.15), 0 16px 48px rgba(0,0,0,0.7);
  overflow: hidden;
}

.upload-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
}
.upload-modal-header .popup-close { margin-left: auto; }

.upload-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

.upload-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.upload-input {
  background: var(--bg-void);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.upload-input:focus { border-color: var(--accent-cyan); }
.upload-textarea { resize: vertical; min-height: 60px; }

.upload-file-input {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0;
  cursor: pointer;
}

.upload-location-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upload-location-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
}
.upload-pick-btn {
  padding: 5px 10px;
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.upload-pick-btn:hover { background: rgba(0, 245, 212, 0.18); }

.upload-status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  text-align: center;
}
.upload-status.hidden { display: none; }
.upload-status-info    { background: rgba(0,245,212,0.1); color: var(--accent-cyan); border: 1px solid var(--border-subtle); }
.upload-status-success { background: rgba(34,197,94,0.1); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.upload-status-error   { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }

.upload-moderation-note {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 5px 10px;
  text-align: center;
}

.upload-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--border-dim);
}
.upload-cancel-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.upload-cancel-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.upload-submit-btn {
  padding: 6px 14px;
  background: rgba(0, 245, 212, 0.12);
  border: 1px solid var(--accent-cyan);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.upload-submit-btn:hover { background: rgba(0, 245, 212, 0.22); }
.upload-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   PHASE 6 — Emergency Panel
   ============================================================ */
.emergency-topbar-btn {
  background: transparent;
  border: 1px solid rgba(239,68,68,0.5);
  border-radius: 4px;
  color: #ef4444;
  font-size: 14px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-right: 6px;
}
.emergency-topbar-btn:hover { background: rgba(239,68,68,0.15); border-color: #ef4444; }

.emergency-panel.hidden { display: none; }
.emergency-panel {
  position: fixed;
  top: 52px;
  right: 12px;
  width: 300px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 8px;
  z-index: 310;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.emergency-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(239,68,68,0.3);
  font-size: 12px;
  font-weight: 700;
  color: #ef4444;
  letter-spacing: 0.05em;
}
.emergency-panel-header button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}
.emergency-category { padding: 8px 0; border-bottom: 1px solid var(--border-dim); }
.emergency-category:last-child { border-bottom: none; }
.emergency-category-title {
  padding: 4px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.emergency-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
}
.emergency-item:hover { background: rgba(239,68,68,0.08); }
.emergency-icon { font-size: 18px; flex-shrink: 0; }
.emergency-info { flex: 1; min-width: 0; }
.emergency-name { font-size: 11px; color: var(--text-secondary); }
.emergency-num {
  font-size: 18px;
  font-weight: 900;
  color: #ef4444;
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.05em;
}

/* ============================================================
   PHASE 6 — Nearby Medical Finder
   ============================================================ */
.nearby-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.nearby-tab {
  flex: 1;
  padding: 5px 4px;
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.nearby-tab.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0,245,212,0.08);
}
.nearby-find-btn {
  width: 100%;
  padding: 7px;
  background: rgba(0,245,212,0.1);
  border: 1px solid var(--accent-cyan);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s;
}
.nearby-find-btn:hover { background: rgba(0,245,212,0.2); }
.nearby-services-list { display: flex; flex-direction: column; gap: 6px; }
.nearby-empty { font-size: 11px; color: var(--text-secondary); text-align: center; padding: 12px 0; }
.nearby-item {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
}
.nearby-item-name { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.nearby-item-dist { color: var(--accent-cyan); font-size: 10px; margin-bottom: 4px; }
.nearby-phone { display: block; color: #22c55e; text-decoration: none; font-size: 11px; }
.nearby-hours { color: var(--text-secondary); font-size: 10px; margin-top: 2px; }
.nearby-directions {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent-cyan);
  text-decoration: none;
  font-size: 10px;
}
.nearby-directions:hover { text-decoration: underline; }

/* ============================================================
   MAP CONTROLS PANEL
   ============================================================ */
/* ============================================================
   MAP CONTROLS WRAPPER — positions the panel + collapse tab
   ============================================================ */
.map-ctrl-wrapper {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottombar-height) + 8px);
  z-index: 200;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
}

.map-controls-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  background: rgba(10, 18, 30, 0.88);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 10px;
  padding: 6px 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: width 0.28s ease, padding 0.28s ease, opacity 0.28s ease, border-width 0.28s ease;
  white-space: nowrap;
}

.map-controls-panel.collapsed {
  width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  opacity: 0;
  border-width: 0;
  pointer-events: none;
}

/* Collapse/expand tab — sticks to the right of the panel */
.map-ctrl-tab {
  width: 16px;
  height: 36px;
  background: rgba(10, 18, 30, 0.88);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: #94a3b8;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  backdrop-filter: blur(8px);
  align-self: center;
  flex-shrink: 0;
}

.map-ctrl-tab:hover {
  background: rgba(0, 210, 255, 0.12);
  color: #00d2ff;
}

.map-ctrl-wrapper.collapsed .map-ctrl-tab {
  border-left: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 6px;
}

.map-ctrl-btn {
  width: 36px;
  height: 36px;
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.map-ctrl-btn:hover {
  background: rgba(0, 210, 255, 0.18);
  color: #00d2ff;
  border-color: rgba(0, 210, 255, 0.5);
}

.map-ctrl-btn.active {
  background: rgba(0, 210, 255, 0.25);
  color: #00d2ff;
  border-color: #00d2ff;
}

.map-ctrl-divider {
  width: 1px;
  height: 24px;
  background: rgba(0, 210, 255, 0.15);
  margin: 0 2px;
  flex-shrink: 0;
}

.measure-ctrl-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.measure-result-box {
  font-size: 10px;
  color: #00d2ff;
  font-family: 'Rajdhani', monospace;
  font-weight: 700;
  text-align: left;
  line-height: 1.2;
  min-height: 0;
  max-width: 64px;
  word-break: break-word;
  padding: 1px 4px 3px;
  margin-top: -3px;  /* pull snug under the button */
}

.measure-result-box:empty {
  display: none;  /* take no space when there's no result */
}

/* ============================================================
   NORTH RESET BUTTON — compact text label
   ============================================================ */
#map-north-btn {
  font-size: 11px;
  font-family: 'Rajdhani', monospace;
  font-weight: 700;
  letter-spacing: 0;
}

/* ============================================================
   COORDINATE TOOLTIP
   ============================================================ */
.coord-tooltip {
  position: fixed;
  z-index: 300;
  background: rgba(10, 18, 30, 0.92);
  border: 1px solid rgba(0, 210, 255, 0.4);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #00d2ff;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transform: translate(14px, -50%);
}
.coord-tooltip.hidden { display: none; }

/* ============================================================
   MAP SCALE BAR
   ============================================================ */
.map-scale-bar {
  position: fixed;
  bottom: 48px;
  left: 80px;
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
}

.scale-bar-line {
  height: 4px;
  background: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.6);
  border-top: 2px solid #00d2ff;
  border-left: 2px solid #00d2ff;
  border-right: 2px solid #00d2ff;
  border-bottom: none;
  min-width: 40px;
  max-width: 160px;
  transition: width 0.25s ease;
}

.scale-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #94a3b8;
  background: rgba(10, 18, 30, 0.7);
  padding: 0 3px;
  border-radius: 2px;
  white-space: nowrap;
}

/* ============================================================
   ECONOMIC TICKER — topbar chips
   ============================================================ */
.topbar-econ {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
}

.econ-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  white-space: nowrap;
}

.econ-chip:hover {
  border-color: var(--border-active);
  background: var(--bg-hover);
  box-shadow: var(--glow-sm);
}

.econ-chip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.econ-chip-value {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.econ-chip-change {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
}

.econ-chip-change.up   { color: var(--accent-green); }
.econ-chip-change.down { color: var(--accent-red); }
.econ-chip-change.flat { color: var(--text-dim); }

.econ-chip-fuel { border-color: rgba(249,115,22,0.25); }
.econ-chip-fuel .econ-chip-label { color: #f97316; }
.econ-chip-msx  { border-color: rgba(168,85,247,0.25); }
.econ-chip-msx  .econ-chip-label { color: #a855f7; }
.econ-chip-cyber { border-color: rgba(239, 68, 68, 0.3); }
.econ-chip-cyber .econ-chip-label { color: #ef4444; }

/* ============================================================
   ECONOMIC CARDS — floating dropdowns
   ============================================================ */
.econ-card {
  position: fixed;
  top: calc(var(--topbar-height) + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), var(--glow-sm);
  z-index: 1100;
  display: none;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
}

.econ-card.open { display: flex; }

.econ-card-wide { width: 320px; }

.econ-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--accent-cyan);
  border-left: 1.5px solid var(--accent-cyan);
  pointer-events: none;
}
.econ-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-bottom: 1.5px solid var(--accent-cyan);
  border-right: 1.5px solid var(--accent-cyan);
  pointer-events: none;
}

.econ-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-dim);
}

.econ-card-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-cyan);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.econ-card-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  transition: color 0.2s;
}
.econ-card-close:hover { color: var(--text-primary); }

.econ-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.econ-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.econ-detail-label {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.econ-detail-val {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
}

.econ-card-note {
  font-size: 8px;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* Fuel card */
.fuel-oman-block {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
}

.fuel-oman-title {
  font-size: 9px;
  color: var(--accent-cyan);
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fuel-oman-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-primary);
  padding: 2px 0;
}

.fuel-oman-row span:first-child { color: var(--text-secondary); }

.fuel-gcc-title {
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fuel-gcc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-dim);
  gap: 4px;
}

.fuel-gcc-flag { font-size: 14px; }
.fuel-gcc-country { font-size: 9px; color: var(--text-secondary); flex: 1; }
.fuel-gcc-price { font-size: 10px; color: var(--text-primary); font-weight: 500; }

.fuel-gcc-dir { font-size: 9px; margin-left: 2px; }
.fuel-gcc-dir.up   { color: var(--accent-red); }
.fuel-gcc-dir.down { color: var(--accent-green); }
.fuel-gcc-dir.flat { color: var(--text-dim); }

/* MSX card */
.msx-index-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  margin-bottom: 8px;
}

.msx-index-label {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.msx-index-value {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  color: var(--accent-cyan);
}

.msx-index-chg {
  font-size: 10px;
  font-weight: 600;
}
.msx-index-chg.up   { color: var(--accent-green); }
.msx-index-chg.down { color: var(--accent-red); }
.msx-index-chg.flat { color: var(--text-dim); }

.msx-stocks-title {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.msx-stock-row {
  display: flex;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-dim);
  gap: 6px;
}

.msx-stock-name  { font-size: 9px; color: var(--text-secondary); flex: 1; }
.msx-stock-price { font-size: 10px; color: var(--text-primary); }
.msx-stock-chg   { font-size: 9px; font-weight: 600; min-width: 40px; text-align: right; }
.msx-stock-chg.up   { color: var(--accent-green); }
.msx-stock-chg.down { color: var(--accent-red); }
.msx-stock-chg.flat { color: var(--text-dim); }

/* ============================================================
   NETWORK STATUS BUTTON & CARD
   ============================================================ */
.net-status-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.net-status-btn:hover,
.net-status-btn.active {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
/* Pulsing glow when online */
.net-status-btn.online {
  border-color: rgba(0, 255, 140, 0.5);
  color: #00ff8c;
  animation: netOnlineGlow 2.5s ease-in-out infinite;
}
@keyframes netOnlineGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(0,255,140,0.2);  border-color: rgba(0,255,140,0.35); }
  50%       { box-shadow: 0 0 10px rgba(0,255,140,0.5); border-color: rgba(0,255,140,0.65); }
}
/* Override glow when card is open */
.net-status-btn.active {
  animation: none;
  box-shadow: 0 0 8px rgba(0,255,255,0.35);
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}
/* Red pulse when offline */
.net-status-btn.offline {
  border-color: rgba(255, 60, 60, 0.5);
  color: #ff6b6b;
  animation: netOfflinePulse 1.2s ease-in-out infinite;
}
@keyframes netOfflinePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,60,60,0.2); }
  50%       { box-shadow: 0 0 10px rgba(255,60,60,0.5); }
}
.net-wifi-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.net-wifi-icon svg { display: block; overflow: visible; }

/* Online: cascading arc pulse inner → outer */
.net-status-btn.online .wifi-arc-inner {
  animation: wifiPulse 2s ease-in-out infinite 0s;
}
.net-status-btn.online .wifi-arc-mid {
  animation: wifiPulse 2s ease-in-out infinite 0.35s;
}
.net-status-btn.online .wifi-arc-outer {
  animation: wifiPulse 2s ease-in-out infinite 0.7s;
}
.net-status-btn.online .wifi-dot {
  animation: wifiDot 2s ease-in-out infinite;
}
@keyframes wifiPulse {
  0%, 100% { opacity: 0.25; }
  40%, 60%  { opacity: 1; }
}
@keyframes wifiDot {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* Offline: all arcs dimmed, slash visible */
.net-status-btn.offline .wifi-arc-outer,
.net-status-btn.offline .wifi-arc-mid,
.net-status-btn.offline .wifi-arc-inner { opacity: 0.2; }
.net-status-btn.offline .wifi-dot       { opacity: 0.2; }
.net-status-btn.offline .wifi-slash     { display: block !important; opacity: 0.85; }

.net-status-label { text-transform: uppercase; }

.net-card {
  display: none;
  position: fixed;
  top: 52px;
  right: 60px;
  width: 280px;
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0,255,255,0.12), 0 4px 16px rgba(0,0,0,0.6);
  z-index: 3000;
  font-family: var(--font-mono);
  overflow: hidden;
}
.net-card.open { display: block; }

.net-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0,255,255,0.06);
  border-bottom: 1px solid var(--border-dim);
}
.net-card-title {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--accent-cyan);
  font-weight: 600;
  text-transform: uppercase;
}
.net-card-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  line-height: 1;
}
.net-card-close:hover { color: var(--accent-red); }

.net-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.net-loading {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 12px 0;
}

.net-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.net-row:last-child { border-bottom: none; }

.net-label {
  font-size: 8.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.net-value {
  font-size: 10px;
  color: var(--text-primary);
  text-align: right;
  max-width: 160px;
  word-break: break-all;
}
.net-value.online  { color: var(--accent-green); font-weight: 600; }
.net-value.offline { color: var(--accent-red);   font-weight: 600; }
.net-value.live    { color: var(--accent-cyan);   font-weight: 600; }
.net-section-sep {
  margin: 4px 0;
  border-top: 1px solid var(--border-dim);
}
.net-section-label {
  font-size: 7.5px;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  margin-top: 2px;
}

/* ============================================================
   LOCATE ME — pulsing dot label
   ============================================================ */
.locate-active #map-locate-btn {
  color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  animation: locatePulse 1.5s ease-in-out infinite;
}
@keyframes locatePulse {
  0%,100% { box-shadow: 0 0 4px rgba(0,255,255,0.3); }
  50%      { box-shadow: 0 0 12px rgba(0,255,255,0.7); }
}

/* ============================================================
   BROADCAST WIDGET — Live TV & Radio player
   ============================================================ */

/* Topbar trigger button */
.broadcast-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  position: relative;
}
.broadcast-btn:hover {
  border-color: rgba(251, 113, 133, 0.55);
  color: #fb7185;
}
.broadcast-btn.active {
  border-color: rgba(251, 113, 133, 0.7);
  color: #fb7185;
  animation: broadcastBtnGlow 2s ease-in-out infinite;
}
@keyframes broadcastBtnGlow {
  0%,100% { box-shadow: 0 0 4px rgba(251,113,133,0.2); border-color: rgba(251,113,133,0.5); }
  50%      { box-shadow: 0 0 10px rgba(251,113,133,0.5); border-color: rgba(251,113,133,0.8); }
}
/* Pulsing live dot on button */
.broadcast-btn-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fb7185;
  flex-shrink: 0;
  animation: bcastDotPulse 1.4s ease-in-out infinite;
}
@keyframes bcastDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Main floating panel */
.broadcast-panel {
  display: none;
  position: fixed;
  top: 52px;
  right: 220px;      /* align near topbar right side */
  width: 292px;
  background: rgba(8, 14, 24, 0.96);
  border: 1px solid rgba(251, 113, 133, 0.25);
  border-radius: 8px;
  box-shadow: 0 0 28px rgba(251,113,133,0.10), 0 6px 24px rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  z-index: 1200;
  overflow: hidden;
  animation: bcastPanelIn 0.18s ease-out;
}
.broadcast-panel.open { display: block; }

@keyframes bcastPanelIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Panel header */
.bcast-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(251,113,133,0.12);
}
.bcast-live-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(251,113,133,0.12);
  border: 1px solid rgba(251,113,133,0.3);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1px;
  color: #fb7185;
  text-transform: uppercase;
}
.bcast-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fb7185;
  animation: bcastDotPulse 1.1s ease-in-out infinite;
}
.bcast-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-secondary);
  text-transform: uppercase;
  flex: 1;
}
.bcast-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}
.bcast-close:hover { color: #fb7185; }

/* Channel tab strip */
.bcast-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bcast-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 4px 5px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.bcast-tab:hover { color: var(--text-secondary); }
.bcast-tab.active {
  color: #fb7185;
  border-bottom-color: #fb7185;
}
.bcast-tab-icon { font-size: 11px; }

/* Content area */
.bcast-content {
  position: relative;
}

/* Video channel: iframe wrapper */
.bcast-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;   /* 16:9 */
  background: #000;
  overflow: hidden;
}
.bcast-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}
/* Video element inside wrapper */
.bcast-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
/* Quality selector bar */
.bcast-quality-bar {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(8,14,24,0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 2px 6px;
}
.bcast-quality-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.bcast-quality-select {
  background: transparent;
  border: none;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  outline: none;
}
.bcast-quality-select option { background: #0d1117; color: var(--text-primary); }
/* Blocked iframe fallback overlay */
.bcast-iframe-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(8,14,24,0.97);
  z-index: 2;
}
.bcast-iframe-fallback.visible { display: flex; }
.bcast-fallback-icon { font-size: 28px; opacity: 0.5; }
.bcast-fallback-text {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.6;
}
.bcast-open-btn {
  background: rgba(251,113,133,0.1);
  border: 1px solid rgba(251,113,133,0.35);
  border-radius: 4px;
  color: #fb7185;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  text-decoration: none;
  display: inline-block;
}
.bcast-open-btn:hover {
  background: rgba(251,113,133,0.2);
  box-shadow: 0 0 10px rgba(251,113,133,0.3);
}

/* Radio channel: audio-only UI */
.bcast-radio-wrap {
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.bcast-radio-name {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-primary);
  letter-spacing: 0.8px;
  text-align: center;
}
.bcast-radio-freq {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

/* Signal waveform visualizer (CSS-only) */
.bcast-visualizer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 32px;
}
.bcast-bar {
  width: 3px;
  border-radius: 2px;
  background: #fb7185;
  transform-origin: bottom;
  opacity: 0.8;
}
/* Idle state — all bars low */
.bcast-visualizer.idle .bcast-bar {
  height: 4px;
  animation: none;
}
/* Playing state — bars animate */
.bcast-visualizer.playing .bcast-bar { animation: bcastBarBounce var(--dur, 0.9s) ease-in-out infinite alternate; }
.bcast-bar:nth-child(1)  { --h: 8px;  --dur: 0.72s; animation-delay: 0s; }
.bcast-bar:nth-child(2)  { --h: 18px; --dur: 0.55s; animation-delay: 0.08s; }
.bcast-bar:nth-child(3)  { --h: 26px; --dur: 0.81s; animation-delay: 0.16s; }
.bcast-bar:nth-child(4)  { --h: 20px; --dur: 0.63s; animation-delay: 0.04s; }
.bcast-bar:nth-child(5)  { --h: 30px; --dur: 0.48s; animation-delay: 0.20s; }
.bcast-bar:nth-child(6)  { --h: 14px; --dur: 0.77s; animation-delay: 0.12s; }
.bcast-bar:nth-child(7)  { --h: 24px; --dur: 0.60s; animation-delay: 0.24s; }
.bcast-bar:nth-child(8)  { --h: 10px; --dur: 0.85s; animation-delay: 0.06s; }
.bcast-bar:nth-child(9)  { --h: 22px; --dur: 0.52s; animation-delay: 0.18s; }
.bcast-bar:nth-child(10) { --h: 16px; --dur: 0.70s; animation-delay: 0.10s; }
.bcast-bar:nth-child(11) { --h: 28px; --dur: 0.44s; animation-delay: 0.22s; }
.bcast-bar:nth-child(12) { --h: 12px; --dur: 0.90s; animation-delay: 0.02s; }
@keyframes bcastBarBounce {
  from { height: 3px; }
  to   { height: var(--h, 14px); }
}

/* Radio controls */
.bcast-radio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bcast-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(251,113,133,0.12);
  border: 1px solid rgba(251,113,133,0.4);
  color: #fb7185;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.bcast-play-btn:hover {
  background: rgba(251,113,133,0.22);
  box-shadow: 0 0 14px rgba(251,113,133,0.4);
}
.bcast-play-btn.playing {
  background: rgba(251,113,133,0.18);
  box-shadow: 0 0 10px rgba(251,113,133,0.35);
  animation: broadcastBtnGlow 2s ease-in-out infinite;
}
.bcast-status-text {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-width: 50px;
}
.bcast-status-text.live { color: #fb7185; }

/* Hidden iframe for radio audio */
.bcast-radio-iframe {
  width: 0;
  height: 0;
  border: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Bottom meta row */
.bcast-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.bcast-meta-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.bcast-meta-source {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: rgba(251,113,133,0.5);
  letter-spacing: 0.3px;
}


/* ============================================================
   POPULATION HOVER PANEL (fixed bottom-left of map)
   ============================================================ */
.pop-hover-panel {
  position: fixed;
  bottom: 48px;
  left: 16px;
  width: 220px;
  background: rgba(8, 15, 26, 0.92);
  border: 1px solid rgba(0, 245, 212, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  pointer-events: none;
  z-index: 500;
  backdrop-filter: blur(6px);
}

.pop-hover-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 2px;
}

.pop-hover-name-ar {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  direction: rtl;
}

.pop-hover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.pop-hover-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pop-hover-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pop-hover-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ============================================================
   CYBER CARD — country list rows
   ============================================================ */
.cyber-country-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0 4px;
}

.cyber-country-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cyber-country-flag {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.cyber-country-name {
  width: 100px;
  font-size: 10px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.cyber-country-bar-wrap {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.cyber-country-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.cyber-country-pct {
  width: 34px;
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}

.cyber-country-count {
  width: 38px;
  text-align: right;
  font-size: 9px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ============================================================
   DETAIL PANEL ZONE — side cards to the left of the sidebar
   ============================================================ */
#detail-panel-zone {
  position: fixed;
  right: var(--sidebar-width);
  top: var(--topbar-height);
  bottom: var(--bottombar-height);
  width: var(--detail-panel-width);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  z-index: 150;
  transition: width 0.3s ease;
  pointer-events: none;
}

.layer-detail-card {
  width: 260px;
  flex-shrink: 0;
  height: 100%;
  background: rgba(7, 12, 22, 0.97);
  border-left: 1px solid rgba(0, 245, 212, 0.18);
  display: none;
  flex-direction: column;
  pointer-events: all;
  font-family: 'JetBrains Mono', monospace;
}
.layer-detail-card.open { display: flex; }

.detail-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(0, 245, 212, 0.12);
  flex-shrink: 0;
  background: rgba(0, 245, 212, 0.04);
}
.detail-card-icon { font-size: 13px; color: var(--accent-cyan); flex-shrink: 0; }
.detail-card-title {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.detail-card-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
}
.detail-card-close:hover { color: var(--text-primary); }

.detail-card-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-card-body::-webkit-scrollbar { width: 3px; }
.detail-card-body::-webkit-scrollbar-thumb { background: rgba(0,245,212,0.2); border-radius: 2px; }

.detail-card-footer {
  padding: 5px 12px 6px;
  font-size: 8px;
  color: var(--text-dim);
  border-top: 1px solid rgba(0, 245, 212, 0.08);
  flex-shrink: 0;
}

.detail-card-loading {
  color: var(--text-dim);
  font-size: 10px;
  text-align: center;
  padding: 20px 0;
}

/* ---- shared sub-components used across multiple cards ---- */
.dc-section-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.dc-summary-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.dc-summary-chip {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid currentColor;
}
.dc-chip-red    { color: var(--accent-red);    border-color: rgba(239,68,68,0.3);   background: rgba(239,68,68,0.08); }
.dc-chip-orange { color: var(--accent-orange); border-color: rgba(249,115,22,0.3);  background: rgba(249,115,22,0.08); }
.dc-chip-yellow { color: #eab308;              border-color: rgba(234,179,8,0.3);   background: rgba(234,179,8,0.08); }
.dc-chip-green  { color: var(--accent-green);  border-color: rgba(52,211,153,0.3);  background: rgba(52,211,153,0.08); }
.dc-chip-cyan   { color: var(--accent-cyan);   border-color: rgba(0,245,212,0.3);   background: rgba(0,245,212,0.08); }
.dc-chip-dim    { color: var(--text-dim);      border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }

.dc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 10px;
}
.dc-row:last-child { border-bottom: none; }
.dc-row-label { color: var(--text-secondary); flex-shrink: 0; min-width: 70px; font-size: 9px; }
.dc-row-value { color: var(--text-primary); font-weight: 600; flex: 1; }
.dc-row-sub   { color: var(--text-dim); font-size: 9px; }

.dc-risk-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.dc-risk-danger  { background: rgba(239,68,68,0.2);  color: var(--accent-red); }
.dc-risk-warning { background: rgba(249,115,22,0.2); color: var(--accent-orange); }
.dc-risk-watch   { background: rgba(234,179,8,0.2);  color: #eab308; }
.dc-risk-safe    { background: rgba(52,211,153,0.15); color: var(--accent-green); }

/* ---- weather card ---- */
.dc-bulletin {
  background: rgba(0,245,212,0.04);
  border: 1px solid rgba(0,245,212,0.12);
  border-radius: 5px;
  padding: 8px 10px;
}
.dc-bulletin-en {
  font-size: 9px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 6px;
}
.dc-bulletin-ar {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.5;
  direction: rtl;
  text-align: right;
  border-top: 1px solid rgba(0,245,212,0.08);
  padding-top: 6px;
}
.dc-bulletin-section {
  background: rgba(0,245,212,0.04);
  border: 1px solid rgba(0,245,212,0.12);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.dc-bulletin-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.dc-bulletin-text {
  font-size: 9px;
  color: var(--text-primary);
  line-height: 1.55;
}
.dc-weather-station-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 9px;
}
.dc-station-name { color: var(--text-primary); font-weight: 600; }
.dc-station-temp { color: var(--accent-cyan); font-weight: 700; font-size: 11px; }
.dc-station-meta { color: var(--text-dim); }

/* ---- road traffic combined card ---- */
.dc-rt-header-sub {
  font-size: 8px;
  color: var(--text-dim);
  padding: 2px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.dc-rt-entry {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.dc-rt-entry:hover { background: rgba(255,255,255,0.06); }
.dc-rt-entry:last-child { border-bottom: none; }

.dc-rt-row1 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}
.dc-rt-road {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.dc-rt-region {
  font-size: 8px;
  color: var(--text-dim);
  white-space: nowrap;
}

.dc-rt-row2 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.dc-rt-jlabel {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dc-rt-speed {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-cyan);
}
.dc-rt-ff     { font-size: 9px; font-weight: 400; color: var(--text-dim); }
.dc-rt-pct    { font-size: 8px; font-weight: 600; }
.dc-rt-len    { font-size: 8px; color: var(--text-dim); margin-left: auto; }

/* Purple theme for jam entries */
.dc-rt-road-purple   { color: #a78bfa !important; }
.dc-rt-jlabel-purple { color: #8b5cf6 !important; }
.dc-rt-speed-purple  { color: #c4b5fd !important; }
.dc-rt-pct-purple    { color: #a78bfa !important; }
.dc-rt-jam           { border-left: 2px solid rgba(139,92,246,0.35); padding-left: 6px; }

.dc-rt-bar-wrap {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}
.dc-rt-bar { height: 100%; border-radius: 2px; }

.dc-rt-inc-row  { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.dc-rt-inc-badge {
  font-size: 8px;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 4px;
  white-space: nowrap;
}
.dc-rt-crit {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: capitalize;
}
.dc-rt-desc {
  font-size: 8px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-rt-closed {
  font-size: 8px;
  font-weight: 700;
  color: #ef4444;
  margin-top: 2px;
}
.dc-jam-clear {
  text-align: center;
  padding: 12px 0;
  font-size: 10px;
  color: #00c853;
}

/* ---- news card ---- */
.dc-search-row {
  display: flex;
  gap: 5px;
  margin-bottom: 6px;
}
.dc-search-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 4px 8px;
  outline: none;
}
.dc-search-input:focus { border-color: rgba(0,245,212,0.4); }
.dc-search-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 4px 5px;
  outline: none;
  cursor: pointer;
}

/* ---- maritime / flights card ---- */
.dc-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

/* ---- population card ---- */
.dc-gov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}
.dc-gov-table th {
  color: var(--text-dim);
  font-weight: 600;
  padding: 3px 4px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dc-gov-table td {
  padding: 4px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dc-gov-table td:last-child { color: var(--text-dim); }

/* ---- coastal card ---- */
.dc-wave-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  flex: 1;
}
.dc-wave-bar { height: 100%; border-radius: 2px; }

/* ============================================================
   FEEDBACK WIDGET + ONBOARDING TOUR
   ============================================================ */
.fb-button {
  position: fixed;
  left: 16px;
  bottom: calc(var(--bottombar-height, 44px) + 16px);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: var(--glow-sm);
  transition: background .15s, transform .15s;
}
.fb-button:hover { background: var(--bg-hover); transform: translateY(-1px); }
.fb-button-icon { font-size: 15px; line-height: 1; }
body.rtl .fb-button { left: auto; right: 16px; }

.fb-modal { position: fixed; inset: 0; z-index: 10000; }
.fb-modal.hidden { display: none; }
.fb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.fb-panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 10px;
  box-shadow: var(--glow-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fb-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.fb-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer;
}
.fb-close:hover { color: var(--text-primary); }
.fb-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-cat {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: 14px; cursor: pointer;
}
.fb-cat input { accent-color: var(--accent-cyan); margin: 0; }
.fb-textarea {
  width: 100%; min-height: 110px; resize: vertical;
  padding: 10px; font-family: inherit; font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle); border-radius: 6px;
  box-sizing: border-box;
}
.fb-textarea:focus { outline: none; border-color: var(--border-active); }
.fb-status { font-size: 12px; min-height: 16px; }
.fb-status.ok  { color: var(--accent-green); }
.fb-status.err { color: var(--accent-red); }
.fb-actions { display: flex; justify-content: flex-end; gap: 10px; }
.fb-cancel, .fb-send {
  padding: 7px 16px; font-family: inherit; font-size: 13px;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--border-subtle);
}
.fb-cancel { background: transparent; color: var(--text-secondary); }
.fb-send   { background: var(--accent-cyan-dim); color: var(--text-primary); border-color: var(--border-active); }
.fb-send:hover { background: var(--accent-cyan); }

/* Tour */
.tour-overlay { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.6); }
.tour-overlay.hidden { display: none; }
.tour-highlight {
  position: absolute; border: 2px solid var(--accent-cyan);
  border-radius: 8px; box-shadow: 0 0 0 4000px rgba(0,0,0,.6), var(--glow-md);
  pointer-events: none; transition: all .25s ease;
}
.tour-card {
  position: absolute;
  width: min(340px, 90vw);
  background: var(--bg-panel);
  border: 1px solid var(--border-active);
  border-radius: 10px;
  box-shadow: var(--glow-lg);
  padding: 16px;
  transition: all .25s ease;
}
.tour-title { font-size: 15px; font-weight: 600; color: var(--accent-cyan); margin-bottom: 6px; }
.tour-body { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; }
.tour-nav-right { display: flex; gap: 8px; }
.tour-skip, .tour-back, .tour-next {
  padding: 6px 14px; font-family: inherit; font-size: 12px;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--border-subtle);
}
.tour-skip { background: transparent; color: var(--text-muted); }
.tour-back { background: transparent; color: var(--text-secondary); }
.tour-next { background: var(--accent-cyan-dim); color: var(--text-primary); border-color: var(--border-active); }
.tour-next:hover { background: var(--accent-cyan); }
.tour-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-subtle); }
.tour-dot.on { background: var(--accent-cyan); }

@media (max-width: 768px) {
  .fb-button span:not(.fb-button-icon) { display: none; }
  .fb-button { padding: 10px; border-radius: 50%; }
}

/* ============================================================
   PHASE 1 TOOLS — place search + point query
   ============================================================ */
.map-search {
  position: fixed;
  top: calc(var(--topbar-height, 56px) + 12px);
  left: 16px;
  z-index: 200;
  width: 300px;
  max-width: 42vw;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(7, 12, 22, 0.95);
  border: 1px solid rgba(0, 245, 212, 0.22);
  border-radius: 8px;
  box-shadow: var(--glow-sm);
  font-family: 'JetBrains Mono', monospace;
}
body.rtl .map-search { left: auto; right: 16px; }
.map-search-icon { color: var(--accent-cyan); font-size: 14px; flex-shrink: 0; }
.map-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
}
.map-search-input::placeholder { color: var(--text-dim); }
.map-search-clear {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 12px; padding: 0 2px; flex-shrink: 0;
}
.map-search-clear:hover { color: var(--text-primary); }
.map-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: rgba(7, 12, 22, 0.98);
  border: 1px solid rgba(0, 245, 212, 0.18);
  border-radius: 8px;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.map-search-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.map-search-item:last-child { border-bottom: none; }
.map-search-item:hover { background: rgba(0, 245, 212, 0.08); color: var(--text-primary); }
.map-search-item-icon { color: var(--accent-cyan); font-size: 12px; flex-shrink: 0; }
.map-search-item-name { flex: 1; line-height: 1.35; }
.map-search-msg { padding: 10px; font-size: 11px; color: var(--text-dim); text-align: center; }

@media (max-width: 768px) {
  .map-search { width: 220px; max-width: 60vw; top: calc(var(--topbar-height, 56px) + 8px); }
}

/* ============================================================
   PHASE 5 — elevation profile, climate card, data export
   ============================================================ */
.elevation-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottombar-height, 44px) + 16px);
  transform: translateX(-50%);
  width: min(560px, 92vw);
  z-index: 300;
  background: rgba(7, 12, 22, 0.97);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  box-shadow: var(--glow-md);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
}
.elevation-panel.hidden { display: none; }
.elevation-panel-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; color: #f59e0b;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.elevation-stats { color: var(--text-secondary); font-weight: 400; font-size: 10px; text-transform: none; }
.elevation-close { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.elevation-close:hover { color: var(--text-primary); }
.elevation-panel canvas { max-height: 150px; }
.elevation-hint { text-align: center; color: var(--text-dim); font-size: 11px; padding: 20px 0; }
body.rtl .elevation-stats, body.rtl .elevation-close { margin-left: 0; }
body.rtl .elevation-close { margin-right: auto; }

.climate-city-select {
  width: 100%; margin-bottom: 8px; padding: 6px 8px;
  background: var(--bg-deep); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 6px;
  font-family: inherit; font-size: 12px;
}
.climate-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
#climate-chart { max-height: 160px; }

.dc-export { float: right; color: var(--text-dim); }
.dc-export a { color: var(--accent-cyan); cursor: pointer; text-decoration: none; }
.dc-export a:hover { text-decoration: underline; }
body.rtl .dc-export { float: left; }

/* ============================================================
   OMAN OPEN DATA — competition branding
   ============================================================ */
.opendata-group-title {
  color: #22c55e !important;
  border-top: 1px solid rgba(34,197,94,0.25);
  padding-top: 8px;
}
.opendata-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  color: #22c55e;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 10px;
  padding: 2px 8px; margin-bottom: 8px;
  letter-spacing: 0.3px;
}