/* Map containers */
.map-wrap { position: relative; border-radius: 10px; overflow: hidden; }
.map-viewport { width: 100%; height: 360px; }

/* Fullscreen container */
.map-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;              /* above leaflet panes and controls */
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  height: 100dvh;              /* robust on iOS; use dynamic viewport units */
}
/* Make the map fill fullscreen */
.map-fullscreen .map-viewport { flex: 1 1 auto; min-height: 0; height: 100%; }

/* Overlay toolbar always above tiles */
.map-toolbar {
  position: absolute;
  right: 8px;
  top: 8px;
  display: none;
  z-index: 10010;              /* above leaflet panes */
  gap: 8px;
  padding: 8px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  border-radius: 10px;
}

/* Hide labels helper */
.hide-labels .leaflet-tooltip { display: none !important; }

/* Map activate dialog */
.map-activate-dialog {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 10020; /* above tiles and toolbar */
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(0,0,0,.45);
  padding: 16px;
  width: min(680px, 96vw);
  border: 1px solid var(--color-border);
}
.map-activate-dialog .title { font-weight: 800; font-size: 1.125rem; margin-bottom: 10px; }
.map-activate-dialog .muted { color: var(--color-muted); font-size: 0.95rem; }
.map-activate-dialog .close { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--color-border); background: rgba(255,255,255,0.06); color: var(--color-text); }
.map-activate-dialog .btn-activate { width: 100%; margin-top: 12px; color: var(--color-white); border-color: transparent; box-shadow: 0 10px 24px rgba(0,0,0,0.35); font-size: 1.0625rem; padding: 12px 16px; }
.map-activate-dialog .progress-line { margin-top: 10px; }
/* Color theming using same gradient tokens as station cards */
.map-activate-dialog[data-color="default"] .btn-activate { background: var(--grad-default-light); }
.map-activate-dialog[data-color="green"] .btn-activate { background: var(--grad-green-light); }
.map-activate-dialog[data-color="yellow"] .btn-activate { background: var(--grad-yellow-light); }
.map-activate-dialog[data-color="blue"] .btn-activate { background: var(--grad-blue-light); }
.map-activate-dialog[data-color="red"] .btn-activate { background: var(--grad-red-light); }
.map-activate-dialog[data-color="orange"] .btn-activate { background: var(--grad-orange-light); }
.map-activate-dialog[data-color="gray"] .btn-activate { background: var(--grad-gray-light); }
.map-activate-dialog[data-color="purple"] .btn-activate { background: var(--grad-purple-light); }
.map-activate-dialog[data-color="pink"] .btn-activate { background: var(--grad-pink-light); }
.map-activate-dialog[data-color="brown"] .btn-activate { background: var(--grad-brown-light); }
.map-activate-dialog[data-color="white"] .btn-activate { background: var(--grad-white-light); }


/* Inline map status overlay */
.map-status {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10005; /* above tiles, below toolbar (10010) */
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  color: var(--color-white);
  border-radius: 8px;
  font-size: 0.95rem;
  max-width: min(92vw, 520px);
  pointer-events: none; /* don't block map interactions */
}
.map-status:empty { display: none; }
/* Avoid duplicate status in fullscreen; use toolbar status instead */
.map-fullscreen .map-status { display: none; }


/* Smooth fade for map status overlay */
.map-status { opacity: 1; transition: opacity 0.35s ease, transform 0.35s ease; will-change: opacity, transform; }
.map-status.fade-out { opacity: 0; transform: translateY(-4px); }
.map-status.is-loading { opacity: 1; }

/* Enhanced map labels (players, stations, clusters) */
/* Base pill label */
.leaflet-tooltip.map-label {
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.92);
  color: #111;
  font: 600 12px/1.2 system-ui, Segoe UI, Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  white-space: nowrap;
  pointer-events: none; /* don’t steal map clicks */
}
/* Hide labels when user toggles off, or auto-hide triggers (crowding/zoom) */
.leaflet-container.hide-labels .leaflet-tooltip.map-label:not(.cluster-label),
.leaflet-container.auto-hide-labels .leaflet-tooltip.map-label:not(.cluster-label) {
  display: none !important;
}

/* Station labels use station color theme */
.leaflet-tooltip.map-label.station-label { color: #fff; border: none; }
.leaflet-tooltip.map-label.station-label.color-default { background: linear-gradient(135deg,#43A047,#2E7D32); }
.leaflet-tooltip.map-label.station-label.color-green   { background: linear-gradient(135deg,#43A047,#2E7D32); }
.leaflet-tooltip.map-label.station-label.color-yellow  { background: linear-gradient(135deg,#FDD835,#F9A825); color:#222; }
.leaflet-tooltip.map-label.station-label.color-blue    { background: linear-gradient(135deg,#42A5F5,#1E88E5); }
.leaflet-tooltip.map-label.station-label.color-red     { background: linear-gradient(135deg,#EF5350,#E53935); }
.leaflet-tooltip.map-label.station-label.color-orange  { background: linear-gradient(135deg,#FFA726,#FB8C00); }
.leaflet-tooltip.map-label.station-label.color-gray    { background: linear-gradient(135deg,#B0BEC5,#90A4AE); color:#222; }
.leaflet-tooltip.map-label.station-label.color-purple  { background: linear-gradient(135deg,#AB47BC,#8E24AA); }
.leaflet-tooltip.map-label.station-label.color-pink    { background: linear-gradient(135deg,#EC407A,#D81B60); }
.leaflet-tooltip.map-label.station-label.color-brown   { background: linear-gradient(135deg,#8D6E63,#6D4C41); }
.leaflet-tooltip.map-label.station-label.color-white   { background: #fff; color:#222; border:1px solid rgba(0,0,0,0.15); }

/* Player labels */
.leaflet-tooltip.map-label.player-label { }
/* Freshness indicator via left border */
.leaflet-tooltip.map-label.player-label.fresh-0 { border-left: 4px solid #2E7D32; }
.leaflet-tooltip.map-label.player-label.fresh-1 { border-left: 4px solid #FBC02D; }
.leaflet-tooltip.map-label.player-label.stale   { border-left: 4px solid #90A4AE; }
/* Self emphasis */
.leaflet-tooltip.map-label.player-label.is-self { box-shadow: 0 0 0 2px rgba(30,136,229,0.25), 0 2px 6px rgba(0,0,0,0.15); }

/* Cluster tooltip */
.leaflet-tooltip.map-label.cluster-label { max-width: 240px; white-space: normal; }

/* Smooth tooltip transform during zoom animations */
.leaflet-zoom-anim .leaflet-tooltip.map-label { transition: transform 0.12s ease; }