/* ==========================================================================
   Eesti Ilmateenistuse Radar - Stiilileht (Dark Mode & Premium Leaflet UI)
   ========================================================================== */

:root {
  --bg-color: #0f172a;
  --accent-color: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.4);
  --success-color: #22c55e;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --glass-bg: rgba(15, 23, 42, 0.90);
  --glass-border: rgba(255, 255, 255, 0.14);
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background-color: #0f172a !important;
  background: #0f172a !important;
  font-family: var(--font-main);
  color: var(--text-primary);
  user-select: none;
}

/* Täisekraani konteiner */
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #0b1120;
}

/* Leaflet Kaardi seadistus täisekraanil */
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: #0b1120;
}

/* Radaripiltide ja äikesekihi läbipaistvuse tagamine (ilma halli taustata ega piirjoonteta) */
.leaflet-image-layer,
.radar-overlay-img,
.lightning-overlay-img {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Laadimise ja veateate overlay */
.overlay-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 36px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  z-index: 1000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.overlay-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(56, 189, 248, 0.2);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

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

/* Ülemine staatuse riba (Vasakul ülal) */
.top-bar {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10001 !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

.top-bar > * {
  pointer-events: auto !important;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
  flex-shrink: 0 !important;
}

.live-dot {
  width: 10px;
  height: 10px;
  background-color: var(--success-color);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--success-color);
  animation: pulse-green 2s infinite ease-in-out;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: var(--text-primary);
}

.status-tag,
.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 30px;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #4ade80 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease;
}

.status-tag.status-synced,
.status-pill.status-synced {
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 16px rgba(34, 197, 94, 0.3) !important;
}

.status-tag.status-offline,
.status-pill.status-offline {
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 16px rgba(239, 68, 68, 0.3) !important;
}

.status-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: statusPulse 2s infinite ease-in-out;
  display: inline-block;
}

.status-offline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  display: inline-block;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* ==========================================================================
   Ülemised Juhtnupud & Paneelid (Paremal ülal: Keel, Legend, Kihid)
   ========================================================================== */

.top-controls-panel {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 9999 !important;
  pointer-events: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap !important;
  max-width: calc(100vw - 220px);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0 !important;
}

.top-controls-panel > * {
  pointer-events: auto !important;
}

.top-controls-panel::-webkit-scrollbar {
  display: none;
}

.ctrl-btn,
.area-analysis-btn,
.radio-valvur-btn,
#btn-radio-valvur,
#btn-weather-daily,
#btn-area-analysis,
#btn-analytics,
#multiselect-toggle-btn,
#btn-diagnostics,
#btn-contact,
#btn-info,
#lang-toggle-btn,
#legend-toggle-btn,
#layers-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.90) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 30px;
  color: #38bdf8 !important;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Range stiil ilmahoiatuse bännerile (marquee / oranž hoiatus): max-width: 350px, ei tohi teisi nuppe ära lükata */
#btn-weather-warning-alert,
.weather-warning-alert-btn {
  max-width: 350px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px;
  border-radius: 30px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

#btn-weather-warning-alert .warning-alert-text,
.weather-warning-alert-btn .warning-alert-text {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 0.3px;
}


.ctrl-btn:hover,
.area-analysis-btn:hover,
#btn-area-analysis:hover,
#btn-analytics:hover,
#btn-diagnostics:hover,
#lang-toggle-btn:hover,
#legend-toggle-btn:hover,
#layers-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.98) !important;
  border-color: rgba(56, 189, 248, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px);
}

.lang-btn {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: #38bdf8;
  padding: 8px 12px;
}

.multiselect-btn.active,
#multiselect-toggle-btn.active,
#btn-multi-select.active {
  background: #0284c7 !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.65), inset 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

.multiselect-btn.active .ctrl-icon,
#multiselect-toggle-btn.active .ctrl-icon,
#btn-multi-select.active .ctrl-icon {
  filter: drop-shadow(0 0 6px #ffffff);
}

.ctrl-icon {
  font-size: 0.95rem;
}

/* Selge sulgemisnupp (X) Leaflet infokastidele */
.leaflet-popup-close-button {
  color: #94a3b8 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 6px 8px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.leaflet-popup-close-button:hover {
  color: #f87171 !important;
  transform: scale(1.15);
}

/* Üldine Ripp-paneel (Layers & Legend) - Vabastatud "overflow" lõksust */
.dropdown-panel,
.layers-menu,
.layer-menu,
#layers-menu,
.legend-panel,
#legend-panel {
  position: fixed !important;
  top: 60px !important;
  right: 15px !important;
  z-index: 10005 !important;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.4) transparent;
}

.dropdown-panel.open,
.layers-menu.open,
#layers-menu.open,
.legend-panel.open,
#legend-panel.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: block !important;
}

.layers-menu {
  width: 290px;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.4) rgba(15, 23, 42, 0.4);
}

.layers-menu::-webkit-scrollbar {
  width: 5px;
}

.layers-menu::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}

.layers-menu::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.35);
  border-radius: 4px;
}

.layers-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.6);
}

.legend-panel {
  width: 290px;
  max-height: 82vh;
}

.dropdown-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-header-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.panel-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.panel-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.layers-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.layer-quick-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.layer-quick-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.layers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Akordioni stiilis Kihtide Grupid (Collapsible Accordion) ─── */
.layer-group {
  background: rgba(30, 41, 59, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  margin-bottom: 5px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.layer-group:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.layer-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  color: #cbd5e1;
  transition: color 0.2s ease, background 0.2s ease;
  border-radius: 6px;
}

.layer-group-header:hover {
  color: #38bdf8;
  background: rgba(255, 255, 255, 0.05);
}

.group-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.group-chevron {
  font-size: 10px;
  transition: transform 0.25s ease, color 0.2s ease;
  color: #64748b;
}

/* Vaikimisi kinni: peidame alamkihid ja pöörame noole */
.layer-group.collapsed .layer-group-items {
  display: none !important;
}

.layer-group.collapsed .group-chevron {
  transform: rotate(-90deg);
}

/* Lahti olek */
.layer-group.open .layer-group-items {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 8px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.layer-group.open .layer-group-header {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.06);
}

.layer-group.open .group-chevron {
  transform: rotate(0deg);
  color: #38bdf8;
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.layer-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.layer-item input[type="checkbox"] {
  display: none;
}

.layer-custom-checkbox {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  background: rgba(30, 41, 59, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.layer-item input[type="checkbox"]:checked + .layer-custom-checkbox {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.layer-item input[type="checkbox"]:checked + .layer-custom-checkbox::after {
  content: '✓';
  color: #030712;
  font-size: 10px;
  font-weight: 900;
}

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

.layer-label {
  font-family: var(--font-main);
  font-size: 11.5px;
  color: #e2e8f0;
  line-height: 1.25;
}

/* ─── Mälupesad (Presets) ─── */
.layers-presets-block {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.presets-header {
  font-family: var(--font-display, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.presets-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 8px;
  height: 28px;
  box-sizing: border-box;
}

.preset-name {
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
}

.preset-actions {
  display: flex;
  gap: 5px;
}

.preset-btn {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 4px;
  padding: 0 8px;
  height: 20px;
  line-height: 18px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.preset-btn.btn-preset-save:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.6);
  color: #38bdf8;
}

.preset-btn.btn-preset-load:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.6);
  color: #4ade80;
}

/* ─── REMP Sagedusfiltri viimistletud tume disain ─── */
.remp-filter-panel {
  margin: 4px 0 10px 24px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 11px;
}

.remp-filter-header {
  font-weight: 600;
  color: #38bdf8;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.remp-filter-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.remp-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.remp-input:focus {
  border-color: #38bdf8;
}

.remp-divider {
  color: #64748b;
  font-weight: bold;
  flex-shrink: 0;
}

.remp-filter-btn {
  height: 28px;
  box-sizing: border-box;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.remp-filter-btn:hover {
  background: #334155;
  border-color: rgba(56, 189, 248, 0.6);
  color: #38bdf8;
}

.remp-presets-row {
  display: flex;
  gap: 4px;
  width: 100%;
  justify-content: space-between;
}

.remp-presets-row .remp-preset-btn {
  flex: 1;
  height: 22px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 3px;
  padding: 0 2px;
  font-size: 9.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
}

.remp-presets-row .remp-preset-btn:hover {
  background: #334155;
  border-color: rgba(56, 189, 248, 0.4);
  color: #e2e8f0;
}

.layers-menu-section-header {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  padding-top: 10px;
  padding-bottom: 6px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.base-layers-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.layer-item input[type="radio"] {
  display: none;
}

.layer-custom-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  background: rgba(30, 41, 59, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.layer-item input[type="radio"]:checked + .layer-custom-radio {
  border-color: var(--accent-color);
  background: rgba(30, 41, 59, 0.9);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.layer-item input[type="radio"]:checked + .layer-custom-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 6px var(--accent-color);
}

/* Legend Paneeli elemendid */
.legend-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-group {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legend-group-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 2px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-symbol-icon {
  font-size: 12px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 4px;
}

.legend-symbol-icon.civ-plane {
  color: #ffffff;
}

.legend-symbol-icon.mil-plane {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  border-radius: 50%;
  font-size: 10px;
}

.legend-symbol-icon.drone-plane {
  background: rgba(0, 240, 255, 0.2);
  border: 1px solid #00f0ff;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
  border-radius: 50%;
  font-size: 10px;
}

.legend-symbol-icon.sonde-balloon {
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid #eab308;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.6);
  border-radius: 50%;
  font-size: 10px;
}

.legend-symbol-icon.ship-shadow {
  background: rgba(255, 0, 85, 0.25);
  border: 1px solid #ff0055;
  box-shadow: 0 0 6px #ff0055;
  border-radius: 4px;
}

.legend-symbol-icon.tartu-bus-badge {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
  border-radius: 50%;
  font-size: 10px;
}

.legend-symbol-icon.intercity-bus {
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
  border-radius: 4px;
  font-size: 10px;
}

.legend-symbol-icon.train-badge {
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
}

.legend-symbol-icon.train-on-time {
  background: rgba(34, 197, 94, 0.25);
  border: 1px solid #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  color: #4ade80;
}

.legend-symbol-icon.train-delayed-minor {
  background: rgba(234, 179, 8, 0.25);
  border: 1px solid #eab308;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.6);
  color: #facc15;
}

.legend-symbol-icon.train-delayed-major {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  color: #f87171;
}

.legend-symbol-icon.notam-icon {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  border-radius: 4px;
}

.legend-symbol-icon.nav-ee-icon {
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
  border-radius: 4px;
}

.legend-symbol-icon.nav-ru-icon {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  border-radius: 4px;
}

.legend-symbol-icon.line-330 {
  background: rgba(249, 115, 22, 0.25);
  border: 1px solid #f97316;
  border-radius: 3px;
}

.legend-symbol-icon.line-110 {
  background: rgba(56, 189, 248, 0.25);
  border: 1px solid #38bdf8;
  border-radius: 3px;
}

.legend-symbol-icon.cable-icon {
  background: rgba(59, 130, 246, 0.25);
  border: 1px dashed #3b82f6;
  border-radius: 3px;
}

.legend-desc {
  font-family: var(--font-main);
  font-size: 10.5px;
  color: #cbd5e1;
  line-height: 1.2;
}

.legend-desc strong {
  color: #f1f5f9;
  font-weight: 600;
  margin-right: 3px;
}

/* ==========================================================================
   VSR Toast Teavitused (Ujuvad teated)
   ========================================================================== */

.vsr-toast {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #f8fafc;
  padding: 8px 16px;
  border-radius: 30px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(56, 189, 248, 0.3);
  backdrop-filter: blur(12px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vsr-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* HUD Alumine Riba & Olekuriba - Horisontaalne kerimine ja stiilne kerimisriba */
#hud-dashboard, 
.hud-dashboard, 
.bottom-bar-container, 
#bottom-bar, 
#hud-metrics-bar, 
.bottom-bar,
.bottom-info-bar,
.stats-container {
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: calc(100vw - 340px) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(11, 17, 32, 0.94) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  z-index: 10000 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  scrollbar-width: thin !important;
  scrollbar-color: #38bdf8 transparent !important;
  scroll-behavior: smooth !important;
  box-sizing: border-box !important;
}

#hud-dashboard::-webkit-scrollbar,
.hud-dashboard::-webkit-scrollbar,
.bottom-bar-container::-webkit-scrollbar {
  height: 4px !important;
}

#hud-dashboard::-webkit-scrollbar-thumb,
.hud-dashboard::-webkit-scrollbar-thumb,
.bottom-bar-container::-webkit-scrollbar-thumb {
  background: #334155 !important;
  border-radius: 4px !important;
}

#hud-dashboard::-webkit-scrollbar-thumb:hover,
.hud-dashboard::-webkit-scrollbar-thumb:hover,
.bottom-bar-container::-webkit-scrollbar-thumb:hover {
  background: #38bdf8 !important;
}

.hud-stat-pill, .hud-card {
  flex-shrink: 0 !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
}

.hud-sub-badge {
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.hud-card:hover {
  background: rgba(30, 41, 59, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.hud-card-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.hud-icon {
  font-size: 13px;
  line-height: 1;
}

.outages-icon {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.ships-icon {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
}

.planes-icon {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
}

.sondes-icon {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.35);
}

.accidents-icon {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
}

.gnss-icon {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
}

.radiation-icon {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
}

.energy-icon {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.35);
}

.energy-price-badge {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fde68a;
}

.hud-card-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hud-card-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.hud-card-value-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hud-main-val {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  line-height: 1;
}

.hud-unit {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  margin-right: 2px;
}

.hud-sub-badge {
  font-family: var(--font-main);
  font-size: 9.5px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
}

.hud-sub-badge.sonde-hub-badge {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.4);
  color: #fef08a;
}

/* ==========================================================================
   Taktikalise Ajaloo ja Trendide Modaalaken (Trend Graphs Modal)
   ========================================================================== */

.trend-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.trend-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.trend-modal-container {
  width: 90%;
  max-width: 740px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 32px rgba(56, 189, 248, 0.2);
  padding: 20px 24px;
  transform: translateY(16px) scale(0.97);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trend-modal-overlay.open .trend-modal-container {
  transform: translateY(0) scale(1);
}

.trend-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

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

.trend-modal-icon {
  font-size: 24px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trend-modal-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trend-modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.trend-modal-subtitle {
  font-family: var(--font-main);
  font-size: 11.5px;
  color: #94a3b8;
}

.trend-modal-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.trend-modal-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.trend-tabs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.trend-tab-btn {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 20px;
  color: #cbd5e1;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.trend-tab-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #ffffff;
}

.trend-tab-btn.active {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.trend-chart-box {
  position: relative;
  width: 100%;
  height: 220px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.trend-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.trend-chart-tooltip {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #38bdf8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 11px;
  color: #f8fafc;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.trend-info-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.trend-stat-item {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trend-stat-label {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.4px;
}

.trend-stat-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

/* ==========================================================================
   Liikumistrajektooride (Breadcrumbs / Trajectory) Stiilid
   ========================================================================== */

.trajectory-trail {
  stroke-dasharray: 6, 6;
  animation: trajectoryFlow 2s linear infinite;
}

@keyframes trajectoryFlow {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

.hud-sub-badge.shadow-badge {
  color: #ffe4e6;
  background: rgba(76, 5, 25, 0.85);
  border-color: rgba(255, 0, 85, 0.5);
  font-weight: 700;
}

.hud-sub-badge.ru-badge {
  color: #fed7aa;
  background: rgba(67, 20, 7, 0.85);
  border-color: rgba(234, 88, 12, 0.5);
}

.hud-sub-badge.mil-badge {
  color: #fca5a5;
  background: rgba(45, 10, 10, 0.85);
  border-color: rgba(239, 68, 68, 0.5);
}

.hud-sub-badge.drone-badge {
  color: #e0f2fe;
  background: rgba(3, 40, 60, 0.85);
  border-color: rgba(0, 240, 255, 0.5);
}

.hud-sub-badge.live-road-badge {
  color: #fef3c7;
  background: rgba(69, 26, 3, 0.85);
  border-color: rgba(245, 158, 11, 0.4);
}

.hud-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* ==========================================================================
   Mobiili- ja Kitsaste Ekraanide Kohandused (Header & Bottom Bar)
   ========================================================================== */

@media (max-width: 900px) {
  /* Alumine inforiba mobiilis ja tahvlil: ALATI allservas, horisontaalselt keritav */
  #hud-dashboard,
  .hud-dashboard,
  .bottom-bar-container,
  #bottom-bar,
  #hud-metrics-bar,
  .bottom-bar,
  .bottom-info-bar,
  .stats-container {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    gap: 6px !important;
    background: rgba(11, 17, 32, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
  }

  .hud-stat-pill, 
  .hud-card {
    padding: 2px 6px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
    height: 36px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .hud-card-icon-box {
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
  }

  .hud-icon {
    font-size: 11px !important;
  }

  .hud-card-label {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .hud-main-val {
    font-size: 11.5px !important;
  }

  .hud-unit {
    font-size: 8.5px !important;
    margin-right: 1px !important;
  }

  .hud-sub-badge {
    height: 16px !important;
    font-size: 8.5px !important;
    padding: 0 4px !important;
  }

  .hud-divider {
    height: 18px !important;
    margin: 0 1px !important;
  }

  /* ACARS widget mobiilis istugu ilusti alumise riba kohal */
  #acars-panel, 
  .acars-box, 
  .acars-widget {
    bottom: 48px !important;
    right: 8px !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 10002 !important;
  }
}

@media (max-width: 768px) {
  /* Ülamenüü juhtpaneel mobiilis */
  .top-controls-panel {
    top: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 80px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  .top-controls-panel::-webkit-scrollbar {
    display: none !important;
  }

  /* Peida vähemolulised nupud mobiilis ruumi säästmiseks */
  #btn-contact,
  #btn-info,
  #btn-diagnostics,
  #multiselect-toggle-btn,
  .contact-btn,
  .info-btn,
  .nerd-info-btn,
  .multiselect-btn {
    display: none !important;
  }

  /* Kompaktne stiil mobiilinupukestele (Raadio, Legend, Kihid jne) */
  .ctrl-btn {
    padding: 5px 9px !important;
    font-size: 0.72rem !important;
    gap: 4px !important;
    border-radius: 20px !important;
  }

  .top-bar {
    top: 8px !important;
    left: 8px !important;
    gap: 4px !important;
  }

  .brand-badge {
    padding: 5px 9px !important;
    border-radius: 20px !important;
  }

  .brand-title {
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
  }

  .status-tag,
  #status-tag {
    display: none !important;
  }

  /* Dropdown paneelid (Kihid, Legend) peavad olema kõrgemal kui alumine riba */
  .dropdown-panel,
  .layer-menu,
  .layers-menu,
  #layers-menu,
  .legend-panel,
  #legend-panel {
    position: fixed !important;
    top: 48px !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 98px) !important;
    z-index: 10005 !important;
  }
}

/* ==========================================================================
   Universaalsed Ühistranspordi Markerid (Tallinn, Harju, Tartu, Kaugliinid)
   ========================================================================== */

.transit-custom-marker {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.transit-dot {
  min-width: 12px;
  height: 12px;
  border-radius: 6px;
  border: 1.5px solid #ffffff;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: bold;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1;
}

.transit-dot.bus { background-color: #3b82f6; }
.transit-dot.harju { background-color: #f59e0b; }
.transit-dot.tram { background-color: #10b981; }
.transit-dot.trolley { background-color: #8b5cf6; }
.transit-dot.tartu { background-color: #ef4444; }
.transit-dot.intercity { background-color: #f59e0b; }

/* ─── Ühistranspordi Liinisildid (L.circleMarker Tooltip) ─── */
.transit-label,
.leaflet-tooltip.transit-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9) !important;
  pointer-events: none !important;
}

.leaflet-tooltip.transit-label::before {
  display: none !important;
}

/* ─── Universaalsed Leaflet Pane'ide ja Markerite Interaktiivsuse Reeglid ─── */
/* 1. Kõik paneelide konteinerid lasevad klikid 100% läbi */
.leaflet-pane {
  pointer-events: none !important;
}
.leaflet-tile-pane, 
.leaflet-weatherRadarPane-pane,
.leaflet-trafficFlowPane-pane {
  pointer-events: none !important;
}

/* 2. Markerid, vektorjooned ja polügoonid on ALATI klikitavad */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-interactive,
path.leaflet-interactive,
svg.leaflet-zoom-animated path,
.leaflet-marker-pane > *,
.leaflet-overlay-pane svg path,
.leaflet-pane > .leaflet-marker-icon,
.leaflet-pane > svg path,
.bus-marker,
.transport-marker,
.transit-marker,
.vsr-transit-icon,
.transit-pill,
.gnss-div-icon,
.radiation-div-icon,
.gnss-marker-wrap,
.rad-marker-wrap,
.obstacle-marker-icon,
.obstacle-pin,
.vsr-obstacle-icon,
.nav-warning-icon-wrap,
.notam-icon-wrap,
.nav-badge,
.notam-badge,
.camera-marker,
.camera-pin,
.camera-div-icon,
.firms-fire-icon,
.firms-fire-pulse,
.energy-marker-icon,
.cable-marker-icon {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none;
}

/* 3. Sisemised mitteklikitavad dekoratsioonid lasevad klõpsu põhimarkerile */
.transit-pill span,
.transit-num,
.gnss-pulse-ring,
.rad-pulse-ring,
.firms-pulse-ring,
.camera-pulse-ring {
  pointer-events: none !important;
}

/* 4. Infoaknad on alati kõige peal */
.leaflet-popup-pane {
  z-index: 10000 !important;
  pointer-events: auto !important;
}
.leaflet-popup,
.leaflet-popup-content-wrapper,
.leaflet-popup-content {
  pointer-events: auto !important;
}

/* 5. NOTAM & Lennuhoiatuste Hüpikaknad ja Polügoonid */
.leaflet-polygonsPane-pane {
  pointer-events: none !important;
}
.leaflet-polygonsPane-pane svg {
  pointer-events: none !important;
}
.leaflet-polygonsPane-pane svg path,
.leaflet-polygonsPane-pane path.leaflet-interactive {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.notam-popup-card {
  position: relative !important;
}

.notam-popup-header {
  padding-right: 34px !important;
}

.notam-altitude-pill {
  margin-right: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.leaflet-popup-content-wrapper .leaflet-popup-close-button,
.leaflet-container a.leaflet-popup-close-button {
  top: 8px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  font-size: 16px !important;
  z-index: 10005 !important;
}

/* ==========================================================================
   Riiklikud teavitused & Küberoht (Kriis.ee & RIA / CERT-EE)
   ========================================================================== */

/* HUD Sub-badges */
.hud-sub-badge.kriis-badge {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.hud-sub-badge.weather-badge {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fde68a;
}

.hud-sub-badge.ria-badge {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
}

.hud-card-icon-box.alerts-icon {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.hud-card.has-critical-alerts {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35) !important;
  animation: hudAlertPulse 2s infinite ease-in-out;
}

@keyframes hudAlertPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.85); border-color: rgba(239, 68, 68, 0.95); }
}

/* Erakorraline ülariba (Breaking Banner) */
.breaking-alert-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #ef4444;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  padding: 8px 14px;
  max-width: 90vw;
  width: 720px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: bannerSlideDown 0.4s ease-out;
}

.breaking-alert-banner.hidden {
  display: none !important;
}

@keyframes bannerSlideDown {
  from { transform: translate(-50%, -20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.breaking-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  font-family: var(--font-main);
}

.breaking-banner-icon {
  font-size: 18px;
  animation: alertIconBlink 1.2s infinite;
}

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

.breaking-banner-badge {
  font-size: 9.5px;
  font-weight: 800;
  background: #ef4444;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.breaking-banner-text {
  font-size: 12px;
  font-weight: 600;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breaking-banner-link {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.breaking-banner-link:hover {
  color: #7dd3fc;
  text-decoration: underline;
}

.breaking-banner-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.breaking-banner-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Modaalakna Alert-kaardid */
.alerts-modal-container {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.alerts-count-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.alerts-list-container {
  overflow-y: auto;
  max-height: 55vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.4) rgba(15, 23, 42, 0.6);
}

.alerts-list-container::-webkit-scrollbar {
  width: 5px;
}
.alerts-list-container::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
.alerts-list-container::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 3px;
}

.alert-item-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.alert-item-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateX(2px);
}

.alert-item-card.kriis {
  border-left: 3px solid #ef4444;
}

.alert-item-card.weather {
  border-left: 3px solid #f59e0b;
}

.alert-item-card.ria {
  border-left: 3px solid #38bdf8;
}

.alert-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.alert-source-badge {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.alert-source-badge.badge-kriis {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.alert-source-badge.badge-weather {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fde68a;
}

.alert-source-badge.badge-ria {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38bdf8;
  color: #7dd3fc;
}

.alert-item-time {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #94a3b8;
}

.alert-item-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
  margin: 0;
}

.alert-item-summary {
  font-family: var(--font-main);
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.4;
  margin: 0;
}

.alert-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.alert-item-link {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #38bdf8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.alert-item-link:hover {
  text-decoration: underline;
  color: #7dd3fc;
}

/* ==========================================================================
   Geokodeeritud Kriisi- ja Ohumarkerid Kaardil (alertsPane)
   ========================================================================== */
.vsr-alert-div-icon {
  background: none !important;
  border: none !important;
}

.vsr-alert-marker {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vsr-alert-marker:hover {
  transform: scale(1.3);
  z-index: 1000;
}

.vsr-alert-marker.kriis {
  background: radial-gradient(circle, #ef4444 0%, #991b1b 100%);
  border: 1.5px solid #fecaca;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.95);
}

.vsr-alert-marker.weather {
  background: radial-gradient(circle, #f59e0b 0%, #b45309 100%);
  border: 1.5px solid #fef3c7;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.9);
}

.vsr-alert-pulse {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, 0.85);
  animation: vsrAlertPulseAnim 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  pointer-events: none;
}

.vsr-alert-marker.weather .vsr-alert-pulse {
  border-color: rgba(245, 158, 11, 0.85);
}

@keyframes vsrAlertPulseAnim {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

.vsr-alert-symbol {
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.alert-item-loc-btn {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.alert-item-loc-btn:hover {
  background: rgba(56, 189, 248, 0.3);
  color: #ffffff;
  border-color: #38bdf8;
}

.alerts-section-header {
  font-family: var(--font-display, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 14px 0 8px 0;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.alerts-section-header.active-header {
  color: #38bdf8;
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
}

.alerts-section-header.history-header {
  color: #94a3b8;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  margin-top: 20px;
}

.alert-item.history-item {
  opacity: 0.75;
  background: rgba(255, 255, 255, 0.02) !important;
  border-left-width: 2.5px !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.alert-item.history-item:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.04) !important;
}

.alerts-empty-active {
  padding: 12px 14px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px dashed rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  margin-bottom: 12px;
  text-align: center;
}

/* ==========================================================================
   Multi-View Dokk-paneel (Flightradar24 stiilis kleepuvate kaartide dokk)
   ========================================================================== */

.multiview-dock {
  position: fixed;
  top: 75px;
  left: 20px; /* Parema serva asemel vasakusse serva */
  right: auto;
  width: 330px;
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px; /* Väldib sisu peitu jäämist kerimisriba taha */
  box-sizing: border-box;
  z-index: 1000;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.4) rgba(15, 23, 42, 0.4);
}

.multiview-dock::-webkit-scrollbar {
  width: 4px;
}
.multiview-dock::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}
.multiview-dock::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 4px;
}

.multiview-card {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  color: #f8fafc;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(56, 189, 248, 0.15);
  position: relative;
  animation: slideInLeft 0.25s ease-out;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.multiview-card:hover {
  border-color: rgba(56, 189, 248, 0.65);
}

.multiview-card.dock-card-highlight {
  border-color: #38bdf8;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.7);
  transform: scale(1.02);
}

.multiview-card .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 10002 !important;
  pointer-events: auto !important;
}

.multiview-card .close-btn:hover {
  background: rgba(239, 68, 68, 0.8) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.1);
}

.multiview-card .dock-card-body {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 26.10.2026: kihtide infoaknad on algselt tehtud Leafleti popupi jaoks (fikseeritud/min-laius + oma polsterdus,
   box-sizing: content-box). Dokis on sisu laius ~266 px -> lai sisu lõigati paremalt ära (nt Leedu kaamerad).
   Siin mahutatakse iga infoakna ümbris kaardi laiusesse; pildid ja tabelid ei lähe üle serva. */
.multiview-card .dock-card-body > *:first-child {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.multiview-card .dock-card-body img,
.multiview-card .dock-card-body video,
.multiview-card .dock-card-body iframe,
.multiview-card .dock-card-body canvas {
  max-width: 100%;
}
.multiview-card .dock-card-body table {
  max-width: 100%;
}

/* Eemalda popupide ümbriste topeltmarginaalid dokis */
.multiview-card .plane-popup,
.multiview-card .ship-popup,
.multiview-card .elron-popup,
.multiview-card .transit-popup,
.multiview-card .outage-popup,
.multiview-card .tarktee-popup,
.multiview-card .sonde-popup {
  padding: 0;
  margin: 0;
}

/* Valitud sihtmärkide helendav valikuring kaardil */
.pulsing-halo {
  animation: haloPulse 2s infinite ease-in-out;
  pointer-events: none;
}

@keyframes haloPulse {
  0% {
    stroke-opacity: 0.85;
    fill-opacity: 0.18;
  }
  50% {
    stroke-opacity: 1;
    fill-opacity: 0.38;
  }
  100% {
    stroke-opacity: 0.85;
    fill-opacity: 0.18;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* ==========================================================================
   Stats for Nerds (Süsteemi Diagnostika & Reaalaja Logi Paneel)
   ========================================================================== */
#vsr-nerd-info {
  position: fixed;
  top: 75px;
  left: 20px;
  width: 440px;
  max-height: 520px;
  background: rgba(10, 15, 29, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  z-index: 99999 !important; /* Peab olema üle kõigi kihtide */
  display: none; /* Vaikimisi peidus */
  flex-direction: column;
  overflow: hidden;
}

#vsr-nerd-info.visible {
  display: flex !important;
}

/* ==========================================================================
   Lennusõnumite (ACARS/VDL2) Paneeli Positsioneerimine ja Kujundus
   ========================================================================== */
#acars-panel, .acars-box, .acars-widget {
  position: fixed !important;
  bottom: 68px !important; /* Istub sujuvalt ja loomulikult alumise HUD-riba kohal */
  right: 20px !important;
  max-height: 280px !important;
  width: 320px !important;
  z-index: 1000 !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.acars-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(30, 41, 59, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.acars-title-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.acars-sdr-icon {
  flex-shrink: 0 !important;
}

.acars-title-text-group {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

.acars-main-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #f8fafc !important;
}

.acars-sub-title {
  font-family: monospace !important;
  font-size: 10px !important;
  color: #38bdf8 !important;
  letter-spacing: 0.5px !important;
}

.acars-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.acars-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.acars-toggle-btn {
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  cursor: pointer !important;
  padding: 2px !important;
  transition: transform 0.2s ease !important;
}

.acars-widget.collapsed {
  max-height: 42px !important;
}

.acars-widget.collapsed .acars-body {
  display: none !important;
}

.acars-widget.collapsed .acars-toggle-btn {
  transform: rotate(-90deg) !important;
}

.nerd-info-header {
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  user-select: none;
}

.nerd-info-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nerd-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nerd-btn-small {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nerd-btn-small:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.nerd-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.nerd-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.nerd-info-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nerd-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.nerd-metric-box {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nerd-metric-label {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.nerd-metric-val-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.nerd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
  align-self: center;
}

.nerd-metric-num {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #f8fafc;
}

.nerd-unit {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.nerd-sub-counts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #38bdf8;
  padding-top: 2px;
  white-space: nowrap;
}

.nerd-benchmark-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px dashed rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
}

.nerd-bench-action-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(14, 165, 233, 0.12));
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nerd-bench-action-btn:hover {
  background: rgba(56, 189, 248, 0.35);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.nerd-bench-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nerd-bench-results {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #f8fafc;
}

.nerd-terminal-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nerd-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.nerd-term-status {
  font-size: 10px;
  color: #22c55e;
  font-weight: 700;
}

.nerd-terminal-console {
  background: #060911;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  height: 160px;
  overflow-y: auto;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #4ade80;
  user-select: text;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.nerd-log-line {
  white-space: pre-wrap;
  word-break: break-all;
  margin-bottom: 3px;
  font-size: 10.5px;
}

.nerd-log-line.warn {
  color: #facc15;
}

.nerd-log-line.error {
  color: #f87171;
}

.nerd-log-line.info {
  color: #4ade80;
}

.nerd-log-time {
  color: #64748b;
  margin-right: 4px;
}

/* ==========================================================================
   ESTPOS GNSS Graafikute ja Infokaardi Stiilid
   ========================================================================== */
.gnss-leaflet-popup,
.gnss-leaflet-popup,
.gnss-popup {
  min-width: 450px !important;
  max-width: 500px !important;
}

.gnss-leaflet-popup .leaflet-popup-content-wrapper {
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 0 !important;
  color: #f8fafc !important;
  min-width: 450px !important;
  max-width: 500px !important;
}

.gnss-leaflet-popup .leaflet-popup-content {
  min-width: 450px !important;
  max-width: 500px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.gnss-popup-content {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 450px !important;
  max-width: 500px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Dokk-paneel ja kaart laienevad automaatselt, kui valitud on GNSS jaam */
.multiview-dock:has(.gnss-popup-content),
.multiview-dock:has(.gnss-popup) {
  width: 500px !important;
}

.multiview-card:has(.gnss-popup-content),
.multiview-card:has(.gnss-popup) {
  min-width: 470px !important;
  max-width: 500px !important;
  width: 100% !important;
  overflow: hidden !important;
}

.gnss-graphs-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  overflow: hidden !important;
}

.gnss-graph-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: 100% !important;
  overflow: hidden !important;
}

.gnss-graph-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.gnss-graph-wrapper {
  width: 100% !important;
  height: 155px !important; /* Fikseeritud kõrgus ilma inetute kerimisribadeta */
  overflow: hidden !important;
  border-radius: 6px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  background: #0b1120 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.gnss-iframe-graph,
.gnss-graph-img,
.gnss-graph-wrapper iframe,
.gnss-graph-wrapper canvas,
.gnss-graph-wrapper svg {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.gnss-graph-wrapper iframe::-webkit-scrollbar,
.gnss-graph-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ─── Kaardi De-clutter (Peida tekstisildid kaugele välja suumides) ─── */
.map-zoom-low .energy-name-badge,
.map-zoom-low .gnss-code-badge,
.map-zoom-low .rad-val-badge {
  display: none !important;
}

.map-zoom-low .energy-icon-box,
.map-zoom-low .gnss-icon-box,
.map-zoom-low .rad-icon-box {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
}

.map-zoom-low .energy-pulse-ring,
.map-zoom-low .gnss-pulse-ring,
.map-zoom-low .rad-pulse-ring {
  width: 22px !important;
  height: 22px !important;
}

/* ─── Energy Node Marker Styles ─── */
.energy-node-icon {
  background: transparent !important;
  border: none !important;
}
.energy-marker-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}
.energy-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(11, 17, 32, 0.95);
  border: 1.5px solid #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.energy-marker-wrap:hover .energy-badge {
  transform: scale(1.2);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.9);
}
.energy-label {
  margin-top: 2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  background: rgba(10, 15, 29, 0.92);
  color: #38bdf8;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
.map-zoom-low .energy-label {
  display: none !important;
}

/* ─── Kaamera Tooltip ja Pisipildi Hover Stiilid ─── */
.vsr-camera-tooltip {
  background: rgba(11, 17, 32, 0.96) !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75) !important;
  color: #f8fafc !important;
  padding: 6px !important;
}
.vsr-camera-tooltip::before {
  border-top-color: rgba(6, 182, 212, 0.4) !important;
}

/* ─── VSR Tumedad Leaflet Popup Stiilid (Kõrge kontrastsus) ─── */
.leaflet-popup-content-wrapper {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 0 !important;
  overflow: hidden !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: auto;
}
.leaflet-popup-content {
  margin: 0 !important;
  line-height: 1.4 !important;
  color: #f8fafc !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: auto;
}
.leaflet-popup-tip {
  background: #1e293b !important;
  box-shadow: none !important;
}
.leaflet-popup-pane {
  z-index: 10000 !important;
}
.leaflet-popup {
  z-index: 10000 !important;
  pointer-events: auto !important;
}
.leaflet-popup-content-wrapper {
  pointer-events: auto !important;
}
.leaflet-container a.leaflet-popup-close-button,
.leaflet-popup-close-button,
.plane-popup-wrapper .leaflet-popup-close-button {
  color: #94a3b8 !important;
  padding: 0 !important;
  top: 6px !important;
  right: 6px !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  z-index: 10002 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-popup-close-button:hover,
.plane-popup-wrapper .leaflet-popup-close-button:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.8) !important;
  border-color: #ef4444 !important;
  transform: scale(1.1) !important;
}

/* ─── Navigatsioonihoiatuste, NOTAMite ja Lennutakistuste Ikoonide Klikitavus ja Stiilid ─── */
.nav-warning-icon-wrap,
.notam-icon-wrap,
.obstacle-marker-icon,
.obstacle-pin,
.vsr-obstacle-icon,
.remp-marker-icon,
.remp-pin {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.obstacle-pin,
.remp-pin {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.obstacle-pin:hover,
.remp-pin:hover {
  transform: scale(1.18);
  z-index: 1000 !important;
}

.nav-badge {
  pointer-events: auto !important;
  cursor: pointer !important;
  background: #f59e0b;
  border: 2px solid #ffffff;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.9);
  border-radius: 20px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #030712;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(245, 158, 11, 1);
}

.notam-badge {
  pointer-events: auto !important;
  cursor: pointer !important;
  background: #dc2626;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.9);
  border-radius: 14px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notam-badge.fir-badge {
  background: #b91c1c;
}

.notam-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(239, 68, 68, 1);
}

.nav-badge.ru-nav-badge {
  background: #be123c !important;
  color: #ffffff !important;
  border: 1.5px solid #fecdd3 !important;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.9) !important;
}

.nav-badge.ru-nav-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(225, 29, 72, 1) !important;
}

/* ─── Marker Cluster Dark Styling ─── */
.marker-cluster-small {
  background-color: rgba(56, 189, 248, 0.35) !important;
}
.marker-cluster-small div {
  background-color: rgba(15, 23, 42, 0.95) !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}
.marker-cluster-medium {
  background-color: rgba(245, 158, 11, 0.35) !important;
}
.marker-cluster-medium div {
  background-color: rgba(15, 23, 42, 0.95) !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  border: 1px solid #fbbf24 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}
.marker-cluster-large {
  background-color: rgba(239, 68, 68, 0.35) !important;
}
.marker-cluster-large div {
  background-color: rgba(15, 23, 42, 0.95) !important;
  color: #f87171 !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  border: 1px solid #f87171 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5) !important;
}

/* ==========================================================================
   Diagnostika (Stats for Nerds) & Serveri Logikasti Stiilid
   ========================================================================== */
/* Vaikimisi peidetud */
#vsr-nerd-info, .diagnostics-modal {
  display: none;
  position: fixed;
  top: 65px;
  left: 20px;
  width: 420px;
  max-height: 88vh;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  z-index: 99999 !important;
  flex-direction: column;
  overflow: hidden;
}

/* Ainult klassiga .active muutub nähtavaks */
#vsr-nerd-info.active, .diagnostics-modal.active {
  display: flex !important;
}

.diagnostics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #0f172a;
  border-bottom: 1px solid #334155;
  color: #38bdf8;
  font-weight: bold;
  font-family: var(--font-display, sans-serif);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}
.diagnostics-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.btn-diag-clear {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.btn-diag-clear:hover {
  background: rgba(255, 255, 255, 0.16);
}

.modal-close-x {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 6px;
  pointer-events: auto !important;
  line-height: 1;
}
.modal-close-x:hover {
  color: #ef4444;
}

.diagnostics-body {
  padding: 10px 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  background: rgba(15, 23, 42, 0.75);
}

.diag-section {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.diag-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.diag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 11px;
  color: #cbd5e1;
}
.diag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diag-targets-row {
  font-size: 12px;
  display: flex;
  gap: 10px;
  color: #fbbf24;
  font-family: monospace;
}
.diag-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.btn-diag-action {
  flex: 1;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid #0284c7;
  background: #0369a1;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-diag-action:hover {
  background: #0284c7;
}
.btn-diag-action.audit {
  border-color: #059669;
  background: #047857;
}
.btn-diag-action.audit:hover {
  background: #059669;
}
.diag-log-header {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.diag-log-console, .diag-log-container, #server-log-box, #diag-logs {
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  overflow-y: auto !important;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.35;
  color: #4ade80;
}

/* Auditi kokkuvõtte plokk kompaktsemaks */
.audit-summary-card {
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
}

/* Diagnostikaakna sulgemisnupu klikitavus */
.diagnostics-modal .modal-close,
.diagnostics-modal .diag-close-btn,
.diagnostics-modal .close-btn,
#diag-close-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 100 !important;
  position: relative !important;
  transition: color 0.15s ease, transform 0.15s ease;
}

.diagnostics-modal .modal-close:hover,
.diagnostics-modal .diag-close-btn:hover,
.diagnostics-modal .close-btn:hover,
#diag-close-btn:hover {
  color: #f87171 !important;
  transform: scale(1.15);
}

/* ==========================================================================
   Eesti Idapiiri Piiripunktid & Ooteajad (Border Checkpoints)
   ========================================================================== */
.border-div-icon {
  background: transparent !important;
  border: none !important;
}

.border-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid #334155;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-family: var(--font-display, sans-serif);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.border-badge:hover {
  transform: scale(1.08);
  z-index: 9999;
}

.border-badge-header {
  font-weight: 700;
  font-size: 11px;
  color: #f8fafc;
}

.border-badge-time {
  font-size: 10px;
  font-weight: 600;
  color: #38bdf8;
  margin-top: 1px;
}

.border-badge.status-green {
  border-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.border-badge.status-yellow {
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.border-badge.status-red {
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.border-popup {
  font-family: var(--font-main);
  color: #e2e8f0;
}

.border-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.border-popup-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #f8fafc;
}

.border-popup-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.border-popup-badge.status-green {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid #10b981;
}

.border-popup-badge.status-yellow {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid #f59e0b;
}

.border-popup-badge.status-red {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid #ef4444;
}

.border-popup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.border-popup-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.border-popup-table td {
  padding: 4px 2px;
  vertical-align: top;
}

.border-popup-table td:first-child {
  color: #94a3b8;
  width: 38%;
}

.border-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0284c7;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11.5px;
  transition: background 0.15s ease;
}

.border-action-btn:hover {
  background: #0369a1;
}

/* ==========================================================================
   Teksti märkimise ja kopeerimise reeglid (User Select)
   ========================================================================== */
/* Tühista Leafleti keelav reegel infokaartide ja akende sees */
.leaflet-popup-content, 
.leaflet-popup-content-wrapper,
.custom-info-window,
.modal-content,
.ship-popup,
.ship-popup *,
.ship-popup-table,
.ship-popup-table *,
.plane-popup,
.plane-popup *,
.elron-popup,
.elron-popup *,
.transit-popup,
.transit-popup *,
.outage-popup,
.outage-popup *,
.tarktee-popup,
.tarktee-popup *,
.sonde-popup,
.sonde-popup *,
.alert-popup-card,
.alert-popup-card *,
.leaflet-popup,
.leaflet-popup-pane,
.leaflet-container .leaflet-popup,
.leaflet-container .leaflet-popup-content,
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .nav-warning-card,
.leaflet-container .dock-card,
.leaflet-container .acars-box,
.leaflet-container .acars-widget,
.leaflet-container .diagnostics-modal,
.leaflet-popup-content *,
.leaflet-popup-content-wrapper *,
.custom-info-window *,
.modal-content *,
.nav-warning-card,
.nav-warning-card *,
.dock-card,
.dock-card *,
.diagnostics-modal,
.diag-log-console,
.acars-message,
.acars-body,
pre,
code {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  cursor: auto;
}

/* Teksti selekteerimiseks tabelites ja andmeridadel kursor */
.leaflet-popup-content p,
.leaflet-popup-content span,
.leaflet-popup-content td,
.leaflet-popup-content th,
.leaflet-popup-content strong,
.leaflet-popup-content b,
.leaflet-popup-content div,
.ship-popup-table td,
.ship-popup-table th,
.ship-popup-header,
.plane-popup-header,
.custom-info-window p,
.custom-info-window span,
.custom-info-window td,
.modal-content p,
.modal-content span,
.modal-content td {
  cursor: text;
}

/* Nupud ja lohistatavad päised jäägu erandiks */
.dock-card-header,
.nav-warning-header,
.panel-header,
.layer-group-header,
.hud-card,
button,
.btn,
.modal-close-x,
.leaflet-popup-close-button {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  cursor: pointer !important;
}

/* ─── 37. Ruumilise Ala Analüüsi ja Situatsiooniraporti Stiilid (Analytics & Geofence) ─── */
.ctrl-btn.area-analysis-btn {
  background: rgba(2, 132, 199, 0.25);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.ctrl-btn.area-analysis-btn:hover,
.ctrl-btn.area-analysis-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.8) !important;
}

/* Ujuv tööriistariba kaardi kohal */
.analytics-toolbar {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 1050;
  width: 320px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 15px rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  padding: 14px;
  color: #f8fafc;
  font-family: 'Inter', system-ui, sans-serif;
  animation: fadeInSlide 0.2s ease-out;
}

.analytics-toolbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.analytics-toolbar-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.3px;
}

.toolbar-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s ease;
}

.toolbar-close-btn:hover {
  color: #ef4444;
}

.analytics-mode-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.btn-analytics-mode {
  flex: 1;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-analytics-mode:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #ffffff;
}

.btn-analytics-mode.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
}

.analytics-control-group {
  margin-bottom: 12px;
}

.analytics-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 8px;
}

.analytics-slider-row input[type="range"] {
  flex: 1;
  accent-color: #38bdf8;
  cursor: pointer;
}

.analytics-val {
  font-weight: 800;
  color: #38bdf8;
  min-width: 48px;
  text-align: right;
}

.analytics-presets {
  display: flex;
  gap: 4px;
}

.btn-preset {
  flex: 1;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 4px 2px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-preset:hover {
  color: #ffffff;
  background: rgba(51, 65, 85, 0.8);
}

.btn-preset.active {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.6);
  font-weight: 800;
}

.analytics-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-run-analysis {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 8px;
  padding: 10px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-run-analysis:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.7);
  transform: translateY(-1px);
}

/* ─── Situatsiooniraporti Modaalaken (Report Modal) ─── */
.area-report-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  width: 92vw;
  max-width: 1040px;
  height: 82vh;
  max-height: 800px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.15);
  border-radius: 14px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  color: #f8fafc;
  font-family: 'Inter', system-ui, sans-serif;
  animation: popIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.report-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
}

.report-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 12px;
  cursor: move;
  user-select: none;
}

.report-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #f8fafc;
}

.report-modal-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 3px;
}

.report-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.report-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
}

.btn-report-export {
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-report-export:hover {
  background: #059669;
  box-shadow: 0 2px 14px rgba(16, 185, 129, 0.6);
}

.report-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.summary-pill {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.summary-pill.has-items {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(56, 189, 248, 0.3);
  color: #f1f5f9;
}

.pill-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}

.pill-alert {
  background: rgba(225, 29, 72, 0.25);
  color: #fda4af;
  border: 1px solid rgba(225, 29, 72, 0.5);
}

.pill-mil {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.report-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}

.report-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.report-tab {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.report-tab:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #ffffff;
}

.report-tab.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
}

.report-search-wrap input {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 12px;
  width: 200px;
  outline: none;
}

.report-search-wrap input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.report-table-container {
  flex: 1;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #090e1a;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  text-align: left;
}

.report-table th {
  background: #1e293b;
  color: #94a3b8;
  font-weight: 700;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 2;
}

.report-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

.report-table tr:hover {
  background: rgba(56, 189, 248, 0.07);
}

.report-cat-tag {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
}

.badge-sanctioned {
  background: rgba(225, 29, 72, 0.3);
  color: #fecdd3;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  margin-left: 4px;
}

.badge-shadow {
  background: rgba(245, 158, 11, 0.3);
  color: #fef08a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  margin-left: 4px;
}

.badge-mil {
  background: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  margin-left: 4px;
}

.badge-drone {
  background: rgba(6, 182, 212, 0.3);
  color: #a5f3fc;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  margin-left: 4px;
}

.btn-table-zoom {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-table-zoom:hover {
  background: #0284c7;
  color: #ffffff;
}

@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ─── Idapiiri Piiritulpade Siltide Stiilid (Permanent Tooltip) ─── */
.border-marker-label {
  background: rgba(15, 23, 42, 0.90) !important;
  border: 1px solid #ef4444 !important;
  color: #f8fafc !important;
  font-family: 'Outfit', -apple-system, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  white-space: nowrap !important;
  pointer-events: auto !important; /* 19.10: silt „🇪🇪 N“ on vajutatav (avab piiritulba kaardi) */
  cursor: pointer !important;
}

.border-marker-label::before {
  border-top-color: #ef4444 !important;
}

/* ─── ☀️ Päevainfo & Ilmateenistuse Prognoosi Modaalaken ja Nupp ─── */
.weather-daily-btn {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
}

.weather-daily-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

.weather-quick-text {
  display: flex;
  align-items: center;
  gap: 5px;
}

.weather-daily-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather-daily-modal.hidden {
  display: none !important;
}

.weather-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 8, 16, 0.75);
  backdrop-filter: blur(6px);
}

.weather-modal-dialog {
  position: relative;
  z-index: 2;
  background: #0b1120;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  width: 92%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  color: #f8fafc;
  overflow: hidden;
  animation: popIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.weather-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  background: rgba(15, 23, 42, 0.9);
}

.weather-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weather-modal-main-title {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #f8fafc;
  letter-spacing: -0.2px;
}

.weather-modal-subtitle {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}

.weather-modal-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}

.weather-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.weather-modal-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weather-section {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 8px;
  padding: 12px;
}

.weather-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* Sun timeline grid */
.sun-timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.sun-time-card {
  background: #070d18;
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sun-time-card.sun-highlight {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
}

.sun-time-icon {
  font-size: 16px;
}

.sun-time-label {
  font-size: 9.5px;
  color: #94a3b8;
  white-space: nowrap;
}

.sun-time-val {
  font-family: 'Outfit', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  margin-top: 2px;
}

.sun-highlight .sun-time-val {
  color: #fbbf24;
}

/* Moon info */
.moon-info-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #070d18;
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 6px;
  padding: 10px 14px;
}

.moon-large-icon {
  font-size: 32px;
  line-height: 1;
}

.moon-details {
  flex: 1;
}

.moon-phase-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.moon-sub-details {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.moon-meter-wrapper {
  width: 90px;
  height: 8px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #334155;
}

.moon-meter-bar {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #fbbf24);
  border-radius: 4px;
}

/* Forecast cards */
.forecast-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.forecast-day-card {
  background: #070d18;
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 8px;
  padding: 10px;
}

.forecast-day-card.forecast-today {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(14, 27, 49, 0.5);
}

.forecast-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.forecast-day-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #38bdf8;
}

.forecast-day-date {
  font-size: 11px;
  color: #64748b;
  font-family: monospace;
}

.forecast-periods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.forecast-period-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.1);
  border-radius: 6px;
  padding: 8px;
}

.period-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.day-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.night-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.period-main {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.period-emoji {
  font-size: 18px;
}

.period-temp {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.period-phenom {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 4px;
}

.period-text {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.35;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 4px;
  margin-top: 4px;
}

/* ─── 🚨 Keskkonnaagentuuri Ametlikud Ilmahoiatused (Päis ja Modaal) ─── */
.weather-warning-alert-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  padding: 4px 11px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  user-select: none !important;
}

.weather-warning-alert-btn.hidden {
  display: none !important;
}

.weather-warning-alert-btn.level-red-pulse {
  background: rgba(239, 68, 68, 0.25) !important;
  border: 1.5px solid #ef4444 !important;
  color: #fef2f2 !important;
  animation: weatherRedPulse 1.6s infinite alternate ease-in-out !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6) !important;
}

.weather-warning-alert-btn.level-orange-pulse {
  background: rgba(249, 115, 22, 0.25) !important;
  border: 1.5px solid #f97316 !important;
  color: #fff7ed !important;
  animation: weatherOrangePulse 1.8s infinite alternate ease-in-out !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.5) !important;
}

@keyframes weatherRedPulse {
  0% { transform: scale(1); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
  100% { transform: scale(1.04); box-shadow: 0 0 18px rgba(239, 68, 68, 0.95); border-color: #ff4d4d; }
}

@keyframes weatherOrangePulse {
  0% { transform: scale(1); box-shadow: 0 0 6px rgba(249, 115, 22, 0.4); }
  100% { transform: scale(1.03); box-shadow: 0 0 16px rgba(249, 115, 22, 0.9); border-color: #fb923c; }
}

.warning-pulse-icon {
  font-size: 13.5px;
  animation: warningIconBounce 1.2s infinite ease-in-out;
}

@keyframes warningIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.warning-alert-text {
  letter-spacing: 0.3px;
}

/* Modaalakna hoiatuste sektsioon */
.weather-warnings-section {
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(239, 68, 68, 0.1);
}

.weather-warnings-section.section-level-orange {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(249, 115, 22, 0.1);
}

.weather-warnings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.weather-warnings-title {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fecaca;
  letter-spacing: 0.3px;
}

.section-level-orange .weather-warnings-title {
  color: #fed7aa;
}

.weather-warning-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.weather-warning-card.card-level-3 {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.weather-warning-card.card-level-2 {
  border-left-color: #f97316;
  background: rgba(249, 115, 22, 0.1);
}

.weather-warning-card.card-level-1 {
  border-left-color: #eab308;
  background: rgba(234, 179, 8, 0.08);
}

.warning-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.warning-county-name {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.warning-level-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pill-level-3 {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.pill-level-2 {
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}

.pill-level-1 {
  background: #eab308;
  color: #0f172a;
}

.warning-card-meta {
  font-size: 11px;
  color: #cbd5e1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.warning-hazard-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: #f8fafc;
}

.warning-card-desc {
  font-size: 11.5px;
  color: #f1f5f9;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 9px;
  border-radius: 4px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
}

/* ─── GNSS ESTPOS Popups ja graafikute paigutus ilma kerimisribadeta ─── */
.gnss-leaflet-popup,
.gnss-popup {
  min-width: 450px !important;
  max-width: 500px !important;
}

.gnss-leaflet-popup .leaflet-popup-content-wrapper {
  min-width: 450px !important;
  max-width: 500px !important;
}

.gnss-popup-content {
  min-width: 450px !important;
  max-width: 500px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.gnss-graph-wrapper {
  width: 100% !important;
  height: 150px !important;
  overflow: hidden !important;
}

.gnss-iframe-graph,
.gnss-graph-wrapper iframe {
  width: 100% !important;
  height: 150px !important;
  border: none !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.gnss-iframe-graph::-webkit-scrollbar,
.gnss-graph-wrapper::-webkit-scrollbar,
.gnss-graph-wrapper iframe::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   📻 "Vabariigi Valvuri" Raadio Esiliidese Stiilid (Nupp & Tekstikonteiner)
   ========================================================================== */

.radio-valvur-btn,
#btn-radio-valvur {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 30px !important;
  color: #34d399 !important;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 8px rgba(16, 185, 129, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.radio-valvur-btn:hover {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: #34d399 !important;
  color: #6ee7b7 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 16px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1px);
}

.radio-valvur-btn.playing {
  background: rgba(6, 78, 59, 0.88) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.75), inset 0 0 12px rgba(16, 185, 129, 0.35) !important;
  animation: radioGlowPulse 1.8s infinite ease-in-out;
}

.radio-valvur-btn.loading {
  opacity: 0.75;
  cursor: wait;
}

@keyframes radioGlowPulse {
  0%, 100% {
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.6), inset 0 0 8px rgba(16, 185, 129, 0.25);
    border-color: rgba(52, 211, 153, 0.8);
  }
  50% {
    box-shadow: 0 0 26px rgba(16, 185, 129, 0.95), inset 0 0 14px rgba(16, 185, 129, 0.45);
    border-color: #34d399;
  }
}

.radio-wave-badge {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
  margin-left: 4px;
}

.radio-wave-badge.hidden {
  display: none !important;
}

.radio-wave-bar {
  width: 2.5px;
  background: #34d399;
  border-radius: 1px;
  animation: radioSoundBar 0.9s infinite ease-in-out alternate;
}

.radio-wave-bar:nth-child(1) { height: 5px; animation-delay: 0.1s; }
.radio-wave-bar:nth-child(2) { height: 12px; animation-delay: 0.3s; }
.radio-wave-bar:nth-child(3) { height: 7px; animation-delay: 0.2s; }

@keyframes radioSoundBar {
  0% { height: 3px; }
  100% { height: 13px; }
}

/* Diskreetne raadioteksti konteiner kaardil all vasakul */
.radio-caption-box {
  position: fixed;
  bottom: 68px;
  left: 56px; /* 23.10.2026: varem 20px — kattis kaardi mõõtmis- ja suuminupud (x 10–44 px) */
  z-index: 998;
  max-width: 440px;
  width: calc(100vw - 76px);
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-left: 4px solid #10b981;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 24px rgba(16, 185, 129, 0.25);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: var(--font-body, 'Inter', sans-serif);
  pointer-events: auto;
}

.radio-caption-box.dragging {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: none !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 32px rgba(16, 185, 129, 0.45) !important;
}

.radio-caption-box.hidden {
  display: none !important;
}

.radio-caption-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 5px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.radio-caption-header:active,
.radio-caption-box.dragging .radio-caption-header {
  cursor: grabbing !important;
}

.radio-caption-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.radio-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: statusPulse 1.6s infinite ease-in-out;
}

.radio-caption-title-text {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.radio-caption-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-time-badge {
  font-size: 10px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}

.radio-caption-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.15s ease;
  z-index: 100;
  pointer-events: auto !important;
}

.radio-caption-close:hover {
  color: #ffffff;
  background: rgba(239, 68, 68, 0.8);
  border-color: #ef4444;
}

.radio-caption-body {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.radio-speaker-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-sound-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}

.radio-sound-wave span {
  width: 2px;
  background: #34d399;
  border-radius: 1px;
  animation: radioSoundBar 0.8s infinite ease-in-out alternate;
}

.radio-sound-wave span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.radio-sound-wave span:nth-child(2) { height: 14px; animation-delay: 0.25s; }
.radio-sound-wave span:nth-child(3) { height: 9px; animation-delay: 0.15s; }
.radio-sound-wave span:nth-child(4) { height: 12px; animation-delay: 0.35s; }

.radio-caption-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: #f1f5f9;
  letter-spacing: 0.2px;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .radio-caption-box {
    bottom: 74px;
    left: 52px; /* 23.10.2026: kaardi nupud jäävad vabaks */
    right: 10px;
    max-width: calc(100vw - 62px);
    width: auto;
  }
}

/* ── Raadio helitugevuse liugur ─────────────────────────────── */
.radio-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(52, 211, 153, 0.18);
}
.radio-volume-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.radio-volume-value {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
  min-width: 34px;
  text-align: right;
}
.radio-volume-slider {
  --vol: 70%;
  flex: 1;
  height: 4px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  background: linear-gradient(to right, #10b981 0%, #10b981 var(--vol), rgba(148, 163, 184, 0.3) var(--vol), rgba(148, 163, 184, 0.3) 100%);
  cursor: pointer;
  outline: none;
}
.radio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid #0f172a;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.radio-volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid #0f172a;
}
.radio-volume-slider:focus-visible { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.5); }

/* --- Polygon Exercise Warnings Markerid --- */
.polygon-marker-container {
  background: transparent !important;
  border: none !important;
}
.polygon-marker-active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.35);
  border: 2px solid #ef4444;
  font-size: 22px;
  animation: polygon-alert-pulse 1.8s infinite ease-in-out;
  cursor: pointer;
}
@keyframes polygon-alert-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.85); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ─── 🧠 Analüütiku paneel (public/analyst.js) ─── */
.analyst-modal { width: 460px; }
.analyst-body { padding: 10px 12px; overflow-y: auto; font-size: 12.5px; color: #e2e8f0; line-height: 1.45; }
.analyst-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.analyst-level { color: #0b1120; font-weight: 800; font-size: 11px; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; }
.analyst-meta { color: #94a3b8; font-size: 11px; }
.analyst-summary { background: rgba(56, 189, 248, 0.08); border-left: 3px solid #38bdf8; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; }
.analyst-section-title { color: #38bdf8; font-weight: 700; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; margin: 10px 0 5px; }
.analyst-finding { border: 1px solid #334155; border-left-width: 3px; border-radius: 6px; padding: 7px 9px; margin-bottom: 7px; background: rgba(15, 23, 42, 0.6); }
.analyst-finding.sev-alert { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.analyst-finding.sev-warn { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.07); }
.analyst-finding.sev-watch { border-left-color: #38bdf8; }
.analyst-finding.sev-info { border-left-color: #64748b; }
.analyst-finding-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
.analyst-sev { color: #0b1120; font-weight: 800; font-size: 10px; letter-spacing: .4px; padding: 2px 7px; border-radius: 4px; }
.analyst-conf { color: #94a3b8; font-size: 10.5px; }
.analyst-finding-title { font-weight: 700; color: #f1f5f9; margin-bottom: 2px; }
.analyst-finding-detail { color: #cbd5e1; }
.analyst-refs { margin-top: 5px; color: #94a3b8; font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.analyst-ref { background: rgba(255,255,255,0.06); border: 1px solid #475569; color: #cbd5e1; font-family: monospace; font-size: 10.5px; padding: 1px 6px; border-radius: 4px; cursor: pointer; }
.analyst-ref:hover, .analyst-ref.on { background: rgba(56, 189, 248, 0.2); border-color: #38bdf8; color: #e0f2fe; }
.analyst-fact { font-size: 11px; color: #cbd5e1; padding: 3px 0 3px 8px; border-left: 2px solid #334155; margin: 3px 0; }
.analyst-fact b { color: #38bdf8; font-family: monospace; }
.analyst-fact-sec, .analyst-new { color: #0b1120; background: #94a3b8; border-radius: 3px; padding: 0 5px; font-size: 9.5px; font-weight: 700; margin-right: 3px; }
.analyst-new { background: #f59e0b; }
.analyst-list { margin: 0 0 4px 18px; padding: 0; }
.analyst-list li { margin: 2px 0; }
.analyst-list.gaps li { color: #fbbf24; }
.analyst-changes { color: #cbd5e1; font-style: italic; }
.analyst-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.analyst-tool-btn { background: rgba(255,255,255,0.06); border: 1px solid #475569; color: #cbd5e1; font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; }
.analyst-tool-btn:hover { border-color: #38bdf8; color: #e0f2fe; }
.analyst-sheet, .analyst-history { margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid #334155; border-radius: 6px; padding: 6px 8px; background: rgba(2, 6, 23, 0.5); }
.analyst-sheet-sec { color: #38bdf8; font-size: 10px; font-weight: 700; letter-spacing: .5px; margin: 6px 0 2px; text-transform: uppercase; }
.analyst-hist { font-size: 11px; color: #cbd5e1; padding: 4px 0; border-bottom: 1px solid #1e293b; }
.analyst-hist-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.analyst-hist-f { color: #94a3b8; }
.analyst-foot { margin-top: 10px; color: #64748b; font-size: 10.5px; border-top: 1px solid #1e293b; padding-top: 6px; }
.analyst-disclaimer { color: #64748b; font-style: italic; }
.analyst-empty { color: #94a3b8; padding: 8px 0; }
.analyst-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(0,0,0,0.35); }
.analyst-dot.hidden { display: none; }
.analyst-dot.pulse { animation: analystPulse 1.4s ease-in-out infinite; }
@keyframes analystPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
@media (max-width: 768px) {
  .analyst-modal { width: calc(100vw - 16px); left: 8px !important; right: 8px; top: 60px !important; max-height: 82vh; }
  .analyst-btn .ctrl-btn-text { display: none; }
}

/* Uue kihi märk kihimenüüs (08.10.2026 Mereveetase); peidetakse, kui data-new-until on möödas (sea_level.js) */
.layer-new-badge { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #22c55e; color: #052e16; font: 700 9px/1.4 var(--k-font, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0; animation: vsrNewBadgePulse 2s infinite; }
@keyframes vsrNewBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } }

/* Raadioakna link kergele raadiolehele (08.10.2026) */
.radio-lite-link { display: block; margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); color: #7dd3fc; font-size: 11px; font-weight: 600; text-decoration: none; text-align: center; }
.radio-lite-link:hover { background: rgba(56, 189, 248, 0.16); color: #e0f2fe; }

/* Esmakülastuse tervitus (mobiil) ja "Mis uut" teade — welcome.js (08.10.2026) */
#vsr-welcome { position: fixed; inset: 0; z-index: 30000; background: rgba(2, 6, 23, 0.86); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vsr-welcome-card { width: 100%; max-width: 420px; background: #0f172a; border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 16px; padding: 24px 20px 16px; text-align: center; color: #e2e8f0; font-family: var(--k-font, system-ui, sans-serif); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
.vsr-welcome-card { position: relative; }
.vsr-welcome-lang { position: absolute; top: 10px; right: 10px; background: rgba(56, 189, 248, .1); border: 1px solid rgba(56, 189, 248, .35); color: #7dd3fc; border-radius: 999px; padding: 4px 10px; font: 600 12px/1.2 var(--k-font, system-ui, sans-serif); cursor: pointer; }
.vsr-welcome-lang:hover, .vsr-welcome-lang:focus-visible { background: rgba(56, 189, 248, .22); color: #e0f2fe; outline: none; }
.vsr-welcome-logo { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.vsr-welcome-card h2 { margin: 0 0 8px; font-size: 19px; color: #f8fafc; }
.vsr-welcome-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: #94a3b8; }
.vsr-welcome-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.vsr-welcome-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px; border-radius: 12px; border: 1px solid rgba(56, 189, 248, 0.35); background: rgba(30, 41, 59, 0.7); color: #e2e8f0; text-decoration: none; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.vsr-welcome-btn:active { background: rgba(56, 189, 248, 0.18); }
.vsr-welcome-btn b { font-size: 17px; } .vsr-welcome-btn small { font-size: 11px; color: #94a3b8; }
.vsr-welcome-ico { font-size: 30px; line-height: 1; margin-bottom: 4px; }
.vsr-welcome-an { font-size: 12px !important; color: #7dd3fc !important; margin-bottom: 10px !important; }
.vsr-welcome-skip { background: none; border: none; color: #64748b; font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit; padding: 6px; }
/* welcome.js 2.0 (24.10.2026): kolm kiirvalikut + kaart/raadio, ka arvutis */
.vsr-welcome-card:has(.vsr-welcome-picks) { max-width: 520px; }
.vsr-welcome-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.vsr-welcome-picks .vsr-welcome-btn { cursor: pointer; font-family: inherit; color: inherit; }
.vsr-welcome-picks .vsr-welcome-btn b { font-size: 15px; } .vsr-welcome-picks .vsr-welcome-btn:hover { border-color: #38bdf8; }
.vsr-welcome-alt { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; }
.vsr-welcome-alt button, .vsr-welcome-alt a { background: none; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; color: #e2e8f0; font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.2; padding: 9px 14px; cursor: pointer; text-decoration: none; }
.vsr-welcome-alt small { color: #94a3b8; font-weight: 400; }
@media (max-width: 480px) {
  .vsr-welcome-picks { grid-template-columns: 1fr; }
  .vsr-welcome-picks .vsr-welcome-btn { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 11px 12px; text-align: left; }
  .vsr-welcome-picks .vsr-welcome-ico { font-size: 24px; margin: 0; }
  .vsr-welcome-picks .vsr-welcome-btn small { margin-left: auto; text-align: right; }
}
#vsr-a2hs { position: fixed; left: 50%; bottom: calc(var(--k-bottom, 56px) + 12px); transform: translateX(-50%); z-index: 12000; width: min(92vw, 520px); display: flex; align-items: center; gap: 10px; background: #0f172a; color: #e2e8f0; border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 12px; padding: 10px 12px; font: 13px/1.4 var(--k-font, system-ui, sans-serif); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.vsr-a2hs-ico { font-size: 20px; } .vsr-a2hs-txt { flex: 1; min-width: 0; }
.vsr-a2hs-add { background: #7dd3fc; color: #0f172a; border: none; border-radius: 6px; padding: 6px 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.vsr-a2hs-close { background: none; border: none; color: #94a3b8; font-size: 15px; cursor: pointer; padding: 0 2px; }
#vsr-whatsnew { position: fixed; left: 50%; bottom: calc(var(--k-bottom, 56px) + 12px); transform: translateX(-50%); z-index: 12000; width: max-content; max-width: min(92vw, 720px); display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.96); border: 1px solid rgba(34, 197, 94, 0.4); color: #e2e8f0; font: 13px/1.4 var(--k-font, system-ui, sans-serif); box-shadow: 0 8px 30px rgba(0, 0, 0, .6); transition: opacity .6s; }
#vsr-whatsnew.vsr-whatsnew-fade { opacity: 0; }
.vsr-whatsnew-tag { background: #22c55e; color: #052e16; font-weight: 800; font-size: 10px; letter-spacing: .08em; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.vsr-whatsnew-txt { flex: 1; min-width: 0; }
#vsr-whatsnew a { color: #0f172a; background: #7dd3fc; border-radius: 6px; padding: 5px 9px; font-weight: 700; text-decoration: none; white-space: nowrap; }
#vsr-whatsnew button { background: none; border: none; color: #94a3b8; font-size: 15px; cursor: pointer; padding: 0 2px; }
@media (max-width: 600px) { #vsr-whatsnew { width: 92vw; flex-wrap: wrap; } #vsr-whatsnew .vsr-whatsnew-txt { flex-basis: calc(100% - 50px); } #vsr-whatsnew a { margin-left: auto; } }

/* ── Kliendi sisselogimine (auth.js 1.0, 09.10.2026) ── */
#vsr-auth { position: fixed; inset: 0; z-index: 30001; background: rgba(2, 6, 23, 0.82); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.vsr-auth-card { width: 100%; max-width: 380px; background: #0f172a; border: 1px solid rgba(250, 204, 21, 0.35); border-radius: 16px; padding: 22px 20px 16px; text-align: center; color: #e2e8f0; font-family: var(--k-font, system-ui, sans-serif); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); margin: 0; }
.vsr-auth-logo { font-size: 36px; line-height: 1; margin-bottom: 8px; }
.vsr-auth-card h2 { margin: 0 0 6px; font-size: 18px; color: #f8fafc; }
.vsr-auth-card p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: #94a3b8; }
.vsr-auth-input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.35); background: #1e293b; color: #f8fafc; font-size: 16px; outline: none; }
.vsr-auth-input:focus { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18); }
.vsr-auth-err { min-height: 18px; margin: 8px 0 4px; font-size: 13px; color: #fca5a5; }
.vsr-auth-btns { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.vsr-auth-btn { flex: 1; padding: 11px 10px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(30, 41, 59, 0.8); color: #e2e8f0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vsr-auth-btn.vsr-auth-submit { background: #facc15; color: #1c1917; border-color: #facc15; }
.vsr-auth-btn:disabled { opacity: .6; cursor: wait; }
.layer-group[data-group="client"] { border: 1px solid rgba(250, 204, 21, 0.35); border-radius: 8px; background: rgba(250, 204, 21, 0.05); }
.layer-group[data-group="client"] .group-title { color: #fde68a; }
.vsr-client-name { font-weight: 400; color: #94a3b8; font-size: 11px; }
.vsr-client-empty { padding: 8px 10px; font-size: 12px; color: #94a3b8; font-style: italic; }
.vsr-client-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px 4px; font-size: 11px; color: #64748b; }
.vsr-client-logout { background: none; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 6px; color: #cbd5e1; font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer; }
.vsr-client-logout:hover { border-color: #fca5a5; color: #fca5a5; }
/* 17.10.2026: kliendikihid riikide alamkaustades (public/auth.js v1.4) */
.vsr-client-sub { display: flex; flex-direction: column; border-left: 2px solid rgba(250, 204, 21, 0.25); margin: 2px 0 4px 4px; }
.vsr-client-sub-header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; user-select: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: #fde68a; border-radius: 4px; }
.vsr-client-sub-header:hover { background: rgba(250, 204, 21, 0.08); }
.vsr-client-sub-header > span:first-child { flex: 1; }
.vsr-client-sub-meta { font-weight: 400; font-size: 10.5px; color: #94a3b8; letter-spacing: 0; }
.vsr-client-sub-chev { font-size: 10px; color: #94a3b8; transition: transform 0.2s ease; }
.vsr-client-sub.collapsed .vsr-client-sub-chev { transform: rotate(-90deg); }
.vsr-client-sub.collapsed .vsr-client-sub-items { display: none; }
.vsr-client-sub-items { display: flex; flex-direction: column; gap: 2px; }
.vsr-measure-ctl a.vsr-measure-btn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ── 14.10.2026: kihtide andmete värskus (freshness.js) ── */
.layer-fresh { position: relative; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; flex-shrink: 0; cursor: help; background: #64748b; }
.layer-fresh[hidden] { display: none; }
.layer-fresh[data-state="ok"] { background: #22c55e; opacity: .75; }
.layer-fresh[data-state="delayed"], .layer-fresh[data-state="partial"] { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.layer-fresh[data-state="down"] { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
.layer-fresh.show-tip::after { content: attr(data-tip); position: absolute; right: -6px; top: 14px; z-index: 50; width: max-content; max-width: 230px; padding: 6px 8px; border-radius: 6px; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; font: 500 11px/1.35 system-ui, sans-serif; white-space: normal; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
/* ── 14.10.2026: signaal kadunud (laev/lennuk, viimane teadaolev asukoht) ── */
.signal-lost-wrap { position: relative; filter: grayscale(.7); }
.signal-lost-ring { position: absolute; left: 50%; top: 10px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.5px dashed #94a3b8; border-radius: 50%; pointer-events: none; }
.signal-lost-badge { position: absolute; left: calc(50% + 13px); top: 3px; white-space: nowrap; padding: 0 4px; border-radius: 3px; background: rgba(15, 23, 42, .85); color: #cbd5e1; border: 1px solid #475569; font: 600 9px/1.4 system-ui, sans-serif; pointer-events: none; }
.signal-lost-banner { margin: 0 0 8px; padding: 7px 9px; border-radius: 6px; background: rgba(148, 163, 184, .14); border-left: 3px solid #94a3b8; color: #e2e8f0; font: 500 12px/1.4 system-ui, sans-serif; }

/* ── 15.10.2026: infoakende veerised — need infoaknad ei kanna ise sisepolstrit (tekst oli vastu serva) ── */
.border-leaflet-popup .leaflet-popup-content,
.airport-leaflet-popup .leaflet-popup-content,
.custom-info-window .leaflet-popup-content,
.vsr-uas-popup .leaflet-popup-content { padding: 12px 32px 10px 14px !important; }

/* 18.10.2026: riigivalik kihimenüüs (public/countries.js) */
.vsr-country-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px 6px; border-bottom: 1px solid rgba(148, 163, 184, 0.15); }
.vsr-country-bar-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin-right: 2px; }
.vsr-country-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: transparent; color: #94a3b8; font: 600 12px/1.3 inherit; cursor: pointer; transition: all .15s ease; }
.vsr-country-btn:hover { border-color: #38bdf8; color: #e2e8f0; }
.vsr-country-btn.active { background: rgba(56, 189, 248, 0.16); border-color: #38bdf8; color: #f1f5f9; }
.vsr-country-section { margin: 2px 0 4px; }
.vsr-country-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; user-select: none; font-size: 12.5px; font-weight: 700; color: #e2e8f0; background: rgba(56, 189, 248, 0.06); border-top: 1px solid rgba(148, 163, 184, 0.15); }
.vsr-country-head:hover { background: rgba(56, 189, 248, 0.12); }
.vsr-country-title { flex: 1; }
.vsr-country-count { font-weight: 400; font-size: 10.5px; color: #94a3b8; }
.vsr-country-chev { font-size: 10px; color: #94a3b8; transition: transform .2s ease; }
.vsr-country-section.collapsed .vsr-country-chev { transform: rotate(-90deg); }
.vsr-country-section.collapsed .vsr-country-body { display: none; }
.vsr-country-body { padding-left: 6px; border-left: 2px solid rgba(56, 189, 248, 0.2); margin-left: 6px; }
.vsr-country-empty { padding: 10px 14px; font-size: 12px; color: #94a3b8; font-style: italic; }

/* ── Raadio fookus: elektrikatkestuse asukoht kaardil (radio_focus.js, 26.10.2026) ── */
.vsr-rfocus { position: relative; }
.vsr-rfocus-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #facc15; box-shadow: 0 0 12px rgba(250, 204, 21, .8); animation: vsrRfocusPulse 1.2s ease-out infinite; }
.vsr-rfocus-dot { position: absolute; inset: 9px; border-radius: 50%; background: #0f172a; border: 1px solid #facc15; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }
@keyframes vsrRfocusPulse { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vsr-rfocus-ring { animation: none; opacity: .9; } }
.vsr-rfocus-box { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); background: rgba(15, 23, 42, .96); border: 1px solid rgba(250, 204, 21, .55); border-radius: 10px; padding: 8px 10px; color: #f8fafc; font: 500 13px/1.35 var(--k-font, system-ui, sans-serif); box-shadow: 0 8px 30px rgba(0, 0, 0, .55); }
.vsr-rfocus-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsr-rfocus-go { flex: none; background: #facc15; color: #0f172a; border: none; border-radius: 6px; padding: 5px 9px; font: 700 12px/1.2 inherit; cursor: pointer; }
.vsr-rfocus-x { flex: none; background: none; border: none; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
@media (max-width: 600px) { .vsr-rfocus-box { bottom: 72px; font-size: 12px; } .vsr-rfocus-txt { white-space: normal; } }