/**
 * MeteoinfoCentrala — mobilna lupina (mobile-first)
 * Fiksna spodnja navigacija + safe-area za iOS/Android.
 */
:root {
  --centrala-tab-h: 3.5rem;
  --centrala-tab-safe: env(safe-area-inset-bottom, 0px);
  --centrala-tab-total: calc(var(--centrala-tab-h) + var(--centrala-tab-safe));
  --centrala-radar-gap: 12px;
  --centrala-bottom-stack: calc(var(--centrala-tab-total) + var(--centrala-radar-gap));
  --centrala-top-safe: env(safe-area-inset-top, 0px);
}

html.centrala-shell-enabled {
  scroll-padding-bottom: var(--centrala-tab-total);
}

body.centrala-shell-enabled {
  padding-bottom: 0 !important;
}

/* Zemljevid nad tab barom — legenda ostane v spodnjem kotu karte */
body.centrala-shell-enabled.app-body #map {
  bottom: var(--centrala-bottom-stack) !important;
  height: calc(100vh - var(--nav-top-offset, 70px) - var(--centrala-bottom-stack)) !important;
}

/* Radarska: fiksni elementi (viewport) nad tab barom */
@media (max-width: 640px) {
  body.centrala-shell-enabled.app-body:not(.mob-settings-open) #top-controls-row {
    bottom: var(--centrala-bottom-stack) !important;
  }

  body.centrala-shell-enabled.app-body .fs-btn {
    bottom: calc(var(--fs-btn-bottom, 134px) + var(--centrala-bottom-stack)) !important;
  }

  body.centrala-shell-enabled.app-body #map .leaflet-control-user-location-wrap {
    bottom: calc(136px + 32px + 8px + var(--centrala-bottom-stack)) !important;
  }

  body.centrala-shell-enabled.app-body:not(:has(#map.fullscreen)) .leaflet-top.leaflet-right {
    bottom: calc(20px + var(--centrala-bottom-stack)) !important;
  }

  body.centrala-shell-enabled.app-body.mob-settings-open #top-controls-row,
  body.centrala-shell-enabled.app-body .info-tooltip.info-tooltip-fullscreen {
    bottom: var(--centrala-bottom-stack) !important;
  }
}

/* Legenda: fixed nad timeline + tab barom (znotraj #map jo timeline prekriva) */
body.centrala-shell-enabled.app-body:not(:has(#map.fullscreen)) .leaflet-control-legend {
  position: fixed !important;
  z-index: 10051 !important;
}

@media (max-width: 640px) {
  body.centrala-shell-enabled.app-body:not(:has(#map.fullscreen)):not(.mob-settings-open)
    .leaflet-control-legend {
    bottom: var(
      --centrala-radar-legend-bottom,
      calc(var(--fs-btn-bottom, 134px) + var(--centrala-bottom-stack) + 6px)
    ) !important;
    right: 14px !important;
  }
}

@media (min-width: 641px) {
  body.centrala-shell-enabled.app-body:not(:has(#map.fullscreen)) .leaflet-control-legend {
    bottom: calc(15px + var(--centrala-bottom-stack)) !important;
    right: 20px !important;
  }
}

/* Radarska: prostor za spodnji trak */

/* Strelko */
body.centrala-shell-enabled #app {
  padding-bottom: 0.5rem;
}

.centrala-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  box-sizing: border-box;
  height: var(--centrala-tab-total);
  min-height: var(--centrala-tab-total);
  padding-bottom: var(--centrala-tab-safe);
  background: rgba(26, 26, 26, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
}

.centrala-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 0;
  min-width: 4rem;
  padding: 0.2rem 0.5rem 0;
  text-decoration: none;
  color: #999;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}

.centrala-tabbar a:active {
  opacity: 0.85;
}

.centrala-tabbar a.is-active {
  color: #fbb006;
}

.centrala-tabbar a.is-active .centrala-tabbar-icon {
  transform: scale(1.08);
}

.centrala-tabbar-icon {
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.15s;
}

@media (min-width: 768px) {
  .centrala-tabbar {
    max-width: 420px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 16px 16px 0 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  .centrala-tabbar a {
    font-size: 0.72rem;
  }
}