/* ============================================================
   MAP.CSS — Leaflet overrides, chokepoints, markers, lanes
   ============================================================ */

/* --- Map container --- */
#map-container {
  flex: 1;
  min-height: 200px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
#map-container-focus {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
#map-panel {
  display: flex;
  flex-direction: column;
}

/* --- Leaflet overrides --- */
.leaflet-container {
  background: var(--black) !important;
}
.leaflet-control-zoom a {
  background: var(--black-panel) !important;
  color: var(--amber) !important;
  border-color: rgba(212, 137, 10, 0.2) !important;
}
.leaflet-control-zoom a:hover {
  background: var(--black-elevated) !important;
}
.leaflet-control-attribution {
  background: rgba(8, 8, 8, 0.8) !important;
  color: rgba(212, 137, 10, 0.2) !important;
  font-size: 7px !important;
}
.leaflet-control-attribution a {
  color: rgba(212, 137, 10, 0.3) !important;
}

/* --- Signal markers --- */
.signal-marker {
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-dim);
  border: none;
  cursor: pointer;
}
.signal-marker.marker-sev-low {
  width: 6px;
  height: 6px;
}
.signal-marker.marker-sev-med {
  width: 8px;
  height: 8px;
}
.signal-marker.marker-sev-high {
  width: 10px;
  height: 10px;
}
.signal-marker.marker-critical {
  background: var(--blood-bright);
  box-shadow: 0 0 8px rgba(168, 43, 43, 0.6);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
.signal-marker.marker-active {
  width: 12px;
  height: 12px;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber-dim);
  animation: marker-ring 1.5s ease-out infinite;
}

/* --- Chokepoint badges --- */
.chokepoint-badge {
  font-family: var(--font-military);
  font-size: 7px;
  color: var(--amber-dim);
  background: var(--black-panel);
  border: 1px solid var(--slate-dim);
  padding: 2px 5px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.chokepoint-badge .cp-count {
  font-family: var(--font-data);
  font-size: 7px;
  margin-left: 3px;
  color: var(--amber-dim);
}
.chokepoint-badge.chokepoint-active {
  border-color: var(--amber);
  color: var(--amber);
}
.chokepoint-badge.chokepoint-active .cp-count {
  color: var(--amber);
}

/* --- Shipping lanes --- */
.lane-path {
  stroke: var(--slate-dim);
  stroke-dasharray: 4, 4;
  opacity: 0.4;
  fill: none;
}
.lane-path.lane-active {
  stroke: var(--amber);
  opacity: 0.6;
}

/* --- Absence indicators --- */
.absence-zone {
  border-radius: 50%;
  background: rgba(122, 31, 31, 0.15);
  border: 1px solid rgba(122, 31, 31, 0.2);
  animation: absence-pulse 3s ease-in-out infinite;
}

/* --- Signal popup --- */
.signal-popup .leaflet-popup-content-wrapper {
  background: var(--black-panel) !important;
  color: var(--amber) !important;
  font-family: var(--font-data) !important;
  font-size: 10px !important;
  border: 1px solid rgba(212, 137, 10, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6) !important;
  padding: 8px 10px !important;
}
.signal-popup .leaflet-popup-tip-container {
  display: none !important;
}
.signal-popup .leaflet-popup-close-button {
  color: var(--amber-dim) !important;
}

/* ── Map filter panel ── */
.map-filter-panel {
  position: absolute;
  top: 50px; /* below focus header */
  right: 12px;
  z-index: 1000;
  background: rgba(13, 13, 20, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 137, 10, 0.2);
  padding: 4px 0;
  min-width: 140px;
}

/* Collapsible filter sections */
.filter-section {
  border-bottom: 1px solid rgba(212, 137, 10, 0.08);
}
.filter-section:last-child {
  border-bottom: none;
}

.filter-section-header {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(212, 137, 10, 0.5);
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  transition: color 0.1s;
}
.filter-section-header:hover {
  color: var(--amber);
}

.filter-chevron {
  font-size: 8px;
  transition: transform 0.15s;
  display: inline-block;
}
.filter-section.collapsed .filter-chevron {
  transform: rotate(-90deg);
}

.filter-section-body {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.15s ease-out;
}
.filter-section.collapsed .filter-section-body {
  max-height: 0;
}

/* Legacy class kept for backwards compat — no longer used in HTML */
.map-filter-title {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(212, 137, 10, 0.35);
  padding: 0 10px 6px;
  border-bottom: 1px solid rgba(212, 137, 10, 0.1);
  margin-bottom: 4px;
}

.map-filter-option {
  font-family: var(--font-military);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(212, 137, 10, 0.4);
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
  height: 22px;
  display: flex;
  align-items: center;
}

.map-filter-option:hover {
  color: var(--amber);
  background: rgba(212, 137, 10, 0.06);
}

.map-filter-option.active {
  color: var(--amber-bright);
  background: rgba(212, 137, 10, 0.1);
}

/* ── Severity heatmap ── */
.leaflet-heatmap-layer {
  opacity: 0.6;
}

/* Chokepoint active state */
.chokepoint-badge.chokepoint-active .chokepoint-label {
  color: var(--amber-bright);
  border-color: rgba(212, 137, 10, 0.5);
}

/* ── Globe.gl (Phase 8) ── */

/* Globe container */
#map-container {
  background: #000005;
}

/* Globe canvas fills container */
#map-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Globe atmosphere glow overlay */
.globe-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Globe.gl tooltip overrides — hide when empty */
.scene-tooltip {
  font-family: var(--font-data) !important;
  font-size: 10px !important;
  background: #0d0d14 !important;
  color: var(--amber) !important;
  border: 1px solid rgba(212, 137, 10, 0.3) !important;
  padding: 4px 6px !important;
  pointer-events: none;
}
.scene-tooltip:empty {
  display: none !important;
}

/* ── Layer toggles ── */

.layer-toggle {
  font-family: var(--font-military);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(212, 137, 10, 0.25);
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
}
.layer-toggle:hover {
  color: var(--amber);
  background: rgba(212, 137, 10, 0.06);
}
.layer-toggle.active {
  color: var(--amber-bright);
}

/* Layer color indicator dots */
.layer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.layer-toggle:not(.active) .layer-dot {
  opacity: 0.2;
}

.layer-dot-mil {
  background: #ff3366;
  box-shadow: 0 0 4px rgba(255, 51, 102, 0.5);
}
.layer-dot-cargo {
  background: #e8d44d;
  box-shadow: 0 0 4px rgba(232, 212, 77, 0.4);
}
.layer-dot-civ {
  background: rgba(232, 212, 77, 0.4);
}
.layer-dot-tanker {
  background: #ff6b35;
  box-shadow: 0 0 4px rgba(255, 107, 53, 0.4);
}
.layer-dot-vessel {
  background: #3d5a7a;
  box-shadow: 0 0 4px rgba(61, 90, 122, 0.4);
}

/* ── Globe style options ── */

.globe-style-option {
  font-family: var(--font-military);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(212, 137, 10, 0.4);
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
  height: 22px;
  display: flex;
  align-items: center;
}
.globe-style-option:hover {
  color: var(--amber);
  background: rgba(212, 137, 10, 0.06);
}
.globe-style-option.active {
  color: var(--amber-bright);
  background: rgba(212, 137, 10, 0.1);
}

.globe-style-sub-toggle {
  font-family: var(--font-military);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(212, 137, 10, 0.35);
  padding: 4px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid rgba(212, 137, 10, 0.08);
  transition: color 0.1s;
}
.globe-style-sub-toggle:hover {
  color: var(--amber);
}
.globe-style-sub-toggle.active {
  color: var(--amber-bright);
}
.border-toggle-indicator {
  font-size: 11px;
  line-height: 1;
}


/* --- Globe HTML markers (SVG aircraft/vessel icons) --- */
.globe-marker {
  cursor: pointer;
  transition: transform 0.3s ease;
  pointer-events: auto;
}

.globe-marker:hover {
  transform: scale(1.5) !important;
  z-index: 1000;
}

.globe-marker-aircraft svg,
.globe-marker-vessel svg {
  display: block;
}