/* ══════════════════════════════════════════════════════════════════════════════
   SimCzech Map — v28 styles
   2D/3D toggle, distance tool, weather overlay, route drawing
   ══════════════════════════════════════════════════════════════════════════════ */

.sc-map-page { padding: 0; position: relative; }
.sc-map-page--fullscreen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: #0f172a; }
.sc-map-page--fullscreen .sc-map-container,
.sc-map-page--fullscreen .sc-cesium-container { height: calc(100vh - 120px) !important; }

/* Toolbar */
.sc-map-toolbar { display: flex; gap: 0.5rem; padding: 0.75rem; align-items: center; flex-wrap: wrap; background: rgba(26,39,68,0.7); border-radius: 12px 12px 0 0; border: 1px solid rgba(255,255,255,0.08); border-bottom: none; }
.sc-map-search { flex: 1; min-width: 200px; padding: 0.5rem 0.8rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: #0f172a; color: #e2e8f0; font-size: 0.9rem; }
.sc-map-search:focus { border-color: #d4a843; outline: none; box-shadow: 0 0 0 2px rgba(212,168,67,0.3); }
.sc-map-search::placeholder { color: #64748b; }
.sc-map-geo-btn, .sc-map-fullscreen-btn { padding: 0.5rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: #0f172a; color: #e2e8f0; cursor: pointer; font-size: 1.1rem; min-width: 36px; transition: all 0.2s; }
.sc-map-geo-btn:hover, .sc-map-fullscreen-btn:hover { border-color: #d4a843; background: rgba(212,168,67,0.15); }
.sc-map-stats { color: #94a3b8; font-size: 0.85rem; margin-left: auto; }

/* Category filters */
.sc-map-filters { display: flex; gap: 0.4rem; padding: 0.5rem 0.75rem; flex-wrap: wrap; background: rgba(26,39,68,0.5); border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); }
.sc-map-filter-btn { padding: 0.3rem 0.7rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: #0f172a; color: #94a3b8; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; }
.sc-map-filter-btn.active { background: rgba(var(--cat-color-rgb, 59,130,246), 0.2); border-color: var(--cat-color, #3b82f6); color: #e2e8f0; }
.sc-map-filter-btn:not(.active):hover { border-color: rgba(255,255,255,0.3); color: #e2e8f0; }

/* v28: Tools bar */
.sc-map-tools { display: flex; gap: 0.75rem; padding: 0.5rem 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: rgba(26,39,68,0.4); border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); }
.sc-map-mode-toggle { display: flex; gap: 0.25rem; background: #0f172a; border-radius: 8px; padding: 2px; border: 1px solid rgba(255,255,255,0.1); }
.sc-map-mode-btn { padding: 0.35rem 0.8rem; border-radius: 6px; border: none; background: transparent; color: #94a3b8; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; }
.sc-map-mode-btn.active { background: rgba(212,168,67,0.2); color: #d4a843; }
.sc-map-mode-btn:hover:not(.active) { color: #e2e8f0; }
.sc-map-tool-btns { display: flex; gap: 0.4rem; }
.sc-map-tool-btn { padding: 0.35rem 0.7rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: #0f172a; color: #94a3b8; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; }
.sc-map-tool-btn:hover { border-color: rgba(212,168,67,0.3); color: #d4a843; }
.sc-map-tool-btn.active { background: rgba(212,168,67,0.15); border-color: rgba(212,168,67,0.4); color: #d4a843; }

/* Layer controls */
.sc-map-controls { display: flex; gap: 0.3rem; padding: 0 0.75rem 0.5rem; background: rgba(26,39,68,0.4); border-left: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); }
.sc-map-layers { display: flex; gap: 0.3rem; }
.sc-map-layer-btn { padding: 0.25rem 0.6rem; border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); background: #0f172a; color: #94a3b8; cursor: pointer; font-size: 0.75rem; transition: all 0.2s; }
.sc-map-layer-btn.active { background: rgba(212,168,67,0.15); border-color: rgba(212,168,67,0.3); color: #d4a843; }

/* Map containers */
.sc-map-container { height: 600px; border-radius: 0 0 12px 12px; z-index: 1; border: 1px solid rgba(255,255,255,0.08); border-top: none; }
.sc-cesium-container { height: 600px; border-radius: 0 0 12px 12px; z-index: 1; border: 1px solid rgba(255,255,255,0.08); border-top: none; }

/* Distance info bar */
.sc-distance-info { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.5rem 1rem; margin-top: 0.5rem; background: rgba(26,39,68,0.6); border-radius: 8px; border: 1px solid rgba(212,168,67,0.2); }
.sc-distance-info span { color: #d4a843; font-weight: 700; font-size: 1rem; }
.sc-distance-clear-btn { padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.15); color: #f87171; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; }
.sc-distance-clear-btn:hover { background: rgba(239,68,68,0.3); }

/* Markers */
.sc-map-marker { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); font-size: 16px; border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.sc-map-marker > * { transform: rotate(45deg); }
.sc-map-marker-icon { background: none !important; border: none !important; }

/* Clusters */
.sc-map-cluster-icon { background: none !important; border: none !important; }
.sc-map-cluster { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 14px; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.sc-map-cluster--small { background: rgba(59,130,246,0.8); border: 2px solid rgba(59,130,246,0.5); }
.sc-map-cluster--medium { background: rgba(245,158,11,0.8); border: 2px solid rgba(245,158,11,0.5); }
.sc-map-cluster--large { background: rgba(239,68,68,0.8); border: 2px solid rgba(239,68,68,0.5); }

/* Popup */
.sc-map-popup { font-family: inherit; } .sc-dark-popup .leaflet-popup-content-wrapper { background: #0f172a !important; color: #e2e8f0 !important; border-radius: 10px !important; border: 1px solid #d4a843 !important; box-shadow: 0 4px 24px rgba(0,0,0,0.8) !important;
  max-width: none !important; } .sc-dark-popup .leaflet-popup-tip { background: #0f172a !important; }
.sc-map-popup__img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 6px; margin-bottom: 0.5rem; }
.sc-map-popup__title { margin: 0 0 0.25rem; font-size: 1rem; color: #f1f5f9; }
.sc-map-popup__icao { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; background: rgba(212,168,67,0.2); color: #d4a843; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.3rem; }
.sc-map-popup__teaser { margin: 0.3rem 0; font-size: 0.85rem; color: #cbd5e1; }
.sc-map-popup__metar-btn { display: block; width: 100%; padding: 0.4rem; margin-top: 0.5rem; border-radius: 6px; border: 1px solid #3b82f6; background: rgba(59,130,246,0.1); color: #3b82f6; cursor: pointer; font-size: 0.8rem; transition: all 0.2s; }
.sc-map-popup__metar-btn:hover { background: rgba(59,130,246,0.2); }
.sc-map-popup__link { display: block; text-align: center; margin-top: 0.5rem; padding: 0.3rem; color: #d4a843; text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.sc-map-popup__link:hover { text-decoration: underline; }

/* METAR */
.sc-map-metar { padding: 0.5rem; margin-top: 0.5rem; background: #f8fafc; border-radius: 6px; }
.sc-map-metar__cat { font-weight: 700; font-size: 1.1rem; }
.sc-map-metar__raw { display: block; margin: 0.3rem 0; font-size: 0.75rem; word-break: break-all; color: #334155; }
.sc-map-metar__detail { font-size: 0.8rem; color: #475569; }
.sc-map-metar-error { color: #ef4444; font-size: 0.85rem; }

/* Route wp icon */
.sc-route-wp-icon { background: transparent !important; border: none !important; }

/* Responsive */
@media (max-width: 768px) {
  .sc-map-container, .sc-cesium-container { height: 400px; }
  .sc-map-toolbar { flex-direction: column; }
  .sc-map-search { min-width: 100%; }
  .sc-map-tools { flex-direction: column; gap: 0.5rem; }
  .sc-map-tool-btns { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .sc-map-container, .sc-cesium-container { height: 300px; }
  .sc-map-filters { overflow-x: auto; flex-wrap: nowrap; }
}
/* ── v30: Live Flights (OpenSky) ── */
.sc-flight-marker {
  background: transparent !important;
  border: none !important;
}
.sc-flight-icon {
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #facc15;
  text-shadow: 0 0 4px rgba(0,0,0,.8), 0 0 1px #000;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.sc-flight-popup .sc-map-popup__title {
  color: #facc15;
  font-size: 15px;
}
.sc-flight-detail {
  font-size: 12px;
  padding: 2px 0;
  color: #c8ccd0;
}
#sc-flights-tool.active {
  background: #facc15 !important;
  color: #0f172a !important;
}
/* ── v33: Canvas-based Flight Rendering ── */
.sc-flights-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 450;
  pointer-events: none;
}
.sc-flight-popup-container .leaflet-popup-content-wrapper {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  border: 1px solid rgba(212, 168, 67, 0.3);
  max-width: none !important;
}
.sc-flight-popup-container .leaflet-popup-tip {
  background: #0f172a;
}
.sc-flight-popup {
  font-family: inherit;
  min-width: 140px;
}
.sc-flight-popup__callsign {
  font-size: 1.1rem;
  font-weight: 700;
  color: #facc15;
  margin-bottom: 0.3rem;
}
.sc-flight-popup__detail {
  font-size: 0.82rem;
  color: #cbd5e1;
  padding: 1px 0;
}
.sc-flight-popup__icao24 {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 0.3rem;
  font-family: monospace;
}
.sc-flights-count {
  font-size: 0.75rem;
  color: #facc15;
  font-weight: 700;
}
/* ── v33: VATSIM overlay popups ── */
.sc-vatsim-popup {
  font-family: inherit;
  min-width: 150px;
}
.sc-vatsim-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.sc-vatsim-popup__network {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: #22c55e;
  color: #fff;
}
.sc-vatsim-popup__network--ivao {
  background: #f97316;
}
.sc-vatsim-popup__route {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.2rem;
}
.sc-vatsim-popup__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #475569;
}
.sc-vatsim-popup__pilot {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.3rem;
}
/* ── VATSIM control panel ── */
.sc-vatsim-control {
  position: absolute;
  top: 80px;
  right: 10px;
  z-index: 1000;
}
.sc-vatsim-control__toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: #0f172a;
  color: #e2e8f0;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
}
.sc-vatsim-control__toggle:hover {
  border-color: #d4a843;
  background: rgba(212,168,67,0.15);
}
.sc-vatsim-control__panel {
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.75rem;
  margin-top: 0.25rem;
  min-width: 220px;
  color: #e2e8f0;
  font-size: 0.85rem;
}
.sc-vatsim-control__panel h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #d4a843;
}
.sc-vatsim-control__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.sc-vatsim-control__row label {
  color: #e2e8f0;
  font-size: 0.82rem;
}
.sc-vatsim-control__row select {
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.8rem;
}
.sc-vatsim-status--ok { color: #22c55e; font-size: 0.75rem; font-weight: 600; }
.sc-vatsim-status--error { color: #ef4444; font-size: 0.75rem; font-weight: 600; }
.sc-vatsim-status--loading { color: #94a3b8; font-size: 0.75rem; }
.sc-vatsim-control__refresh-btn {
  width: 100%;
  padding: 0.35rem;
  margin-top: 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(59,130,246,0.15);
  color: #93c5fd;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.sc-vatsim-control__refresh-btn:hover {
  background: rgba(59,130,246,0.3);
}
/* ═══════════════════════════════════════════════════════════
   v43: Dark-themed map popups for readability
   ═══════════════════════════════════════════════════════════ */

/* max-width fix: override Canvas @layer base * { max-width:100% } for map and popups */
.leaflet-container,
.leaflet-container *,
.sc-map-container,
.sc-map-page,
.leaflet-pane,
.leaflet-popup-pane,
.leaflet-popup,
.leaflet-popup-content-wrapper,
.leaflet-popup-content,
.sc-map-popup,
.sc-map-popup *,
.sc-dark-popup,
.sc-flight-popup,
.sc-flight-popup * {
  max-width: none !important;
}

/* Leaflet popup wrapper — dark background */
.leaflet-popup-content-wrapper {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(212, 168, 67, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  max-width: none !important;
}
.leaflet-popup-tip {
  background: #0f172a !important;
  border: 1px solid rgba(212, 168, 67, 0.2);
}
.leaflet-popup-close-button {
  color: #94a3b8 !important;
  font-size: 20px !important;
}
.leaflet-popup-close-button:hover {
  color: #f59e0b !important;
}

/* Airport/Marker popup — dark */
.sc-map-popup__title {
  color: #f1f5f9 !important;
  font-weight: 700;
}
.sc-map-popup__icao {
  background: rgba(212, 168, 67, 0.2) !important;
  color: #d4a843 !important;
  font-weight: 700;
}
.sc-map-popup__teaser {
  color: #cbd5e1 !important;
}
.sc-map-popup__metar-btn {
  border-color: #d4a843 !important;
  background: rgba(212, 168, 67, 0.1) !important;
  color: #d4a843 !important;
}
.sc-map-popup__metar-btn:hover {
  background: rgba(212, 168, 67, 0.25) !important;
}

/* METAR data inside popup */
.sc-map-metar {
  background: #1e293b !important;
  border: 1px solid rgba(212, 168, 67, 0.15);
  border-radius: 8px;
}
.sc-map-metar__cat {
  color: #f59e0b !important;
}
.sc-map-metar__raw {
  color: #94a3b8 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: #0f172a;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
}
.sc-map-metar__detail {
  color: #cbd5e1 !important;
}

/* VATSIM/IVAO popup — dark */
.sc-vatsim-popup__route {
  color: #f1f5f9 !important;
}
.sc-vatsim-popup__pilot {
  color: #94a3b8 !important;
}
.sc-vatsim-popup__stats {
  color: #cbd5e1;
}

/* Leaflet controls — dark theme */
.leaflet-control-layers {
  background: #0f172a !important;
  border: 1px solid rgba(212, 168, 67, 0.2) !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
}
.leaflet-control-layers-toggle {
  background-color: #0f172a !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
}
.leaflet-control-layers label {
  color: #e2e8f0 !important;
}
.leaflet-control-layers-separator {
  border-top-color: rgba(255,255,255,0.1) !important;
}

/* Leaflet zoom controls — dark */
.leaflet-control-zoom a {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.leaflet-control-zoom a:hover {
  background-color: rgba(30, 41, 59, 0.95) !important;
  color: #f59e0b !important;
}

/* Leaflet attribution — dark */
.leaflet-control-attribution {
  background: #0f172a !important;
  color: #64748b !important;
}
.leaflet-control-attribution a {
  color: #94a3b8 !important;
}

/* Scale control */
.leaflet-control-scale-line {
  background: #0f172a !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,0.2) !important;
}