/* ═══════════════════════════════════════════════════════════════
   ATRACAI Map Styles — Leaflet dark theme overrides
   ═══════════════════════════════════════════════════════════════ */

/* ═══ LEAFLET CONTAINER ═══ */
.leaflet-container {
  background: #030508 !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

.leaflet-tile-pane {
  filter: brightness(1.1) saturate(0.7);
}

.leaflet-control-zoom a {
  background: rgba(10,18,32,0.9) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.leaflet-control-attribution {
  background: rgba(4,8,16,0.85) !important;
  color: var(--text-dim) !important;
  font-size: 9px !important;
}

.leaflet-control-attribution a { color: var(--text-secondary) !important; }

/* ═══ VESSEL MARKERS ═══ */
.vessel-marker {
  border: none !important;
  background: none !important;
}

.ship-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ship-icon svg { overflow: visible; }

/* ═══ VESSEL TOOLTIPS ═══ */
.vessel-tt {
  background: rgba(10,18,32,0.92) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 6px !important;
  color: var(--text-primary) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  padding: 5px 9px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  white-space: nowrap !important;
}

.vessel-tt::before { border-right-color: var(--border-bright) !important; }
.leaflet-tooltip-top.vessel-tt::before { border-top-color: var(--border-bright) !important; }
.leaflet-tooltip-bottom.vessel-tt::before { border-bottom-color: var(--border-bright) !important; }

/* ═══ VESSEL POPUP ═══ */
.vessel-popup .leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
}

.vessel-popup .leaflet-popup-tip {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-bright) !important;
}

.vessel-popup .leaflet-popup-content {
  margin: 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  min-width: 280px !important;
}

.popup-hdr {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-name {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}

.popup-badge {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.popup-body {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.popup-stat { display: flex; flex-direction: column; gap: 2px; }

.popup-stat-label {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.popup-stat-value {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.popup-ttb-bar { grid-column: 1 / -1; margin-top: 4px; }

.ttb-bar-track {
  width: 100%; height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}

.ttb-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.popup-dest {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

/* ═══ PORT TOOLTIP (world map) ═══ */
.port-tooltip {
  background: rgba(10,18,32,0.92) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  color: var(--text-primary) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  white-space: nowrap !important;
}

.port-tooltip::before { display: none !important; }

/* ═══ MAP OVERLAYS ═══ */
.map-legend {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  z-index: 800;
  background: rgba(10,18,32,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}

.legend-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.legend-items { display: flex; flex-direction: column; gap: 5px; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-secondary);
}

.legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.map-stats {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 800;
  background: rgba(10,18,32,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 200px;
}

.stats-title {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.stats-title::before {
  content: '';
  width: 3px; height: 12px;
  background: var(--accent-cyan);
  border-radius: 2px;
}

.stats-grid { display: flex; flex-direction: column; gap: 6px; }

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

.stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
}

.stat-val {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.map-queue-trend {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 800;
  background: rgba(10,18,32,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  width: 200px;
}

.queue-trend-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.queue-trend-canvas { width: 100%; height: 36px; }

.queue-trend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}

.queue-trend-labels span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: var(--text-dim);
}

/* ═══ RANGE RINGS ═══ */
.range-label {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.range-label-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: rgba(0,229,255,0.35);
  letter-spacing: 2px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.port-label {
  background: rgba(10,18,32,0.92) !important;
  border: 1px solid rgba(0,229,255,0.4) !important;
  color: var(--accent-cyan) !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 12px rgba(0,229,255,0.15) !important;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .map-stats { display: none; }
  .map-queue-trend { display: none; }
}

@media (max-width: 600px) {
  .map-legend { left: 0.5rem; bottom: 0.5rem; padding: 8px 10px; }
}