/* ================================================================
   RADDAR — vizualna tema
   Ugodna, tamna paleta s toplo-hladnim naglascima po kategoriji podatka
   (temp/vjetar/tlak/vlaga/oborina), jedan font (Space Grotesk) posvuda
   za dosljednost, i grafovi (ApexCharts) stilizirani da vizualno budu
   dio iste cjeline, ne izgledaju kao "uljepljena" biblioteka.
   ================================================================ */

:root {
    /* --- Boje --- */
    --ink: #1B212C;
    --panel: #242C39;
    --panel-raised: #2D3644;
    --panel-soft: rgba(36, 44, 57, 0.65);
    --line: #3A4455;
    --line-soft: rgba(58, 68, 85, 0.6);
    --paper: #E8EBF0;
    --fog: #9BA5B5;
    --fog-dim: #717C8C;

    --signal: #4FB6C4;         /* primarni akcent - temperatura/tlak/live podaci */
    --signal-dim: rgba(79, 182, 196, 0.16);
    --amber: #E8A855;          /* sunce / dan */
    --amber-dim: rgba(232, 168, 85, 0.16);
    --violet: #9F93D6;         /* oborina / mjesec */
    --violet-dim: rgba(159, 147, 214, 0.16);
    --coral: #E28B7D;          /* max temp / mraz / upozorenje */
    --coral-dim: rgba(226, 139, 125, 0.16);
    --mint: #7FBE8C;           /* vjetar / povoljno */
    --mint-dim: rgba(127, 190, 140, 0.16);

    /* --- Font: JEDAN font posvuda radi dosljednosti (naslovi, tekst, grafovi, karta) --- */
    --font: 'Space Grotesk', sans-serif;

    /* --- Ostalo --- */
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-panel: 0px 8px 22px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0px 4px 12px rgba(0, 0, 0, 0.22);

    --top-panel-height: clamp(520px, calc(100vh - 190px), 740px);

    /* --- Nebo/obzor: koristi se SAMO na hero kartici trenutnog vremena i na obzor-traci,
       namjerno neovisno o dark/light temi - gradijent sam po sebi nosi "vrijeme dana". --- */
    --sky-1: #1B2036;
    --sky-2: #3B2E4A;
    --sky-3: #7A4A4E;
    --sky-4: #D98B52;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ Svijetla tema ============
   Iste uloge boja (--ink/--panel/--paper/...), samo obrnut smjer kontrasta. Sve što je definirano
   preko CSS varijabli (skoro cijela stranica) automatski prati promjenu - jedino grafovi (ApexCharts,
   crtaju u SVG s tvrdo upisanim hex vrijednostima) trebaju svoj JS PALETTE prekidač, vidi indexx.js. */
html[data-theme="light"] {
    --ink: #F1F4F8;
    --panel: #FFFFFF;
    --panel-raised: #F8FAFC;
    --panel-soft: rgba(241, 244, 248, 0.75);
    --line: #E1E7EF;
    --line-soft: rgba(225, 231, 239, 0.8);
    --paper: #212936;
    --fog: #64748B;
    --fog-dim: #94A3B8;

    /* Iste uloge, malo tamniji/zasićeniji tonovi za dovoljan kontrast na bijeloj podlozi -
       usklađeno s PALETTE_LIGHT u indexx.js da grafovi i ostatak sučelja izgledaju kao cjelina. */
    --signal: #2B96A6;
    --signal-dim: rgba(43, 150, 166, 0.12);
    --amber: #C6842E;
    --amber-dim: rgba(198, 132, 46, 0.14);
    --violet: #7C6FC4;
    --violet-dim: rgba(124, 111, 196, 0.14);
    --coral: #C96A57;
    --coral-dim: rgba(201, 106, 87, 0.14);
    --mint: #4F9E63;
    --mint-dim: rgba(79, 158, 99, 0.14);
}

/* ============ Gumb za dijeljenje poveznice ============ */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    margin-right: 10px;
    border: 1px solid var(--line);
    background: var(--panel-raised);
    color: var(--fog);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.share-btn i { font-size: 11px; }

.share-btn:hover {
    border-color: var(--signal);
    color: var(--paper);
}

.share-btn.share-ok {
    border-color: var(--mint);
    color: var(--mint);
}

.share-btn.share-fail {
    border-color: var(--coral);
    color: var(--coral);
}

@media (max-width: 575px) {
    /* Na uskom ekranu ostaje samo ikona - naziv bi gurao prekidač teme izvan navbara */
    .share-btn-label { display: none; }
    .share-btn { padding: 6px 9px; }
}

/* ============ Slider za promjenu teme (svijetla/tamna) ============
   Track s ikonama sunce/mjesec na krajevima, kuglica koja klizi ovisno o aktivnoj temi. */
.theme-toggle-switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-raised);
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle-switch:hover {
    border-color: var(--signal);
}

.theme-switch-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--fog-dim);
    transition: color 0.2s ease;
    pointer-events: none;
}

.theme-switch-icon-sun { left: 6px; }
.theme-switch-icon-moon { right: 6px; }

/* Zadano (tamna tema): kuglica desno, mjesec istaknut */
.theme-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transform: translateX(22px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
    pointer-events: none;
}

.theme-switch-icon-moon { color: var(--signal); }

/* Svijetla tema: kuglica lijevo, sunce istaknuto */
html[data-theme="light"] .theme-switch-thumb {
    transform: translateX(0);
    background: var(--amber);
}

html[data-theme="light"] .theme-switch-icon-moon { color: var(--fog-dim); }
html[data-theme="light"] .theme-switch-icon-sun { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

* { box-sizing: border-box; }

html, body {
    font-family: var(--font);
}

body {
    background-color: var(--ink);
    color: var(--paper);
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--fog-dim); }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* ============ Navigacija ============ */
.navbar,
.navbar.navbar-light.bg-light {
    background-color: var(--panel) !important;
    border-bottom: 1px solid var(--line);
    font-family: var(--font);
}

.navbar-brand {
    font-family: var(--font);
    font-weight: 700;
    color: var(--paper) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.navbar-brand::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 11px;
    background-color: var(--signal);
    clip-path: polygon(0% 100%, 22% 55%, 38% 78%, 58% 30%, 78% 62%, 100% 40%, 100% 100%);
}

.navbar-toggler {
    border-color: var(--line) !important;
}

.navbar-toggler-icon {
    filter: invert(1) brightness(1.5);
}

html[data-theme="light"] .navbar-toggler-icon {
    filter: none;
}

.topSection {
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 0;
}

.topSection .row {
    margin-bottom: 0;
}

#currentDate {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    color: var(--paper);
    margin-bottom: 8px;
}

.weeklyCharts {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 24px;
}

.weeklyCharts .row {
    margin-bottom: 5px;
}

.highcharts-figure {
    margin: 0;
}

footer {
    background: var(--panel);
    color: var(--fog);
    font-family: var(--font);
    text-align: center;
    padding: 14px;
    margin-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
}

.custom-airplane-icon {
    font-size: 22px;
    color: var(--signal);
}

.location-box {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    padding: 9px 14px;
    background-color: var(--panel-raised);
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.custom-map-marker {
    font-size: 20px;
    font-weight: bold;
    color: var(--coral);
}

/* ============ Pretraga mjesta na karti ============
   Renderira se kao Leaflet control (topleft, isti kut kao +/- zoom) - vidi addLocationSearchControl()
   u indexx.js. Leafletov control sustav sam rješava pozicioniranje/stacking, pa nema rizika da
   position:absolute wrapper slomi visinu karte (kao što se dogodilo s ranijom .map-frame verzijom).
   Redoslijed (tražilica IZNAD +/- zooma) je čisti CSS (flex + order) - Leaflet po defaultu slaže
   kontrole u kutu redoslijedom dodavanja (zoom je dodan prvi, pa bi inače bio gore), a mi ga ovdje
   samo vizualno prebacujemo ispod tražilice bez diranja same Leaflet/JS logike dodavanja kontrola. */
.leaflet-top.leaflet-left {
    display: flex;
    flex-direction: column;
    /* OBAVEZNO: bez ovoga flex kontejner (align-items ima zadanu vrijednost 'stretch') razvlači SVE
       kontrole na širinu najšire - a to je tražilica (220px). Zoom gumbi su široki samo 30px, pa se
       njihova pozadina/sjena/zaobljenje iscrtavaju preko cijelih 220px i oko +/- se vidi velika
       prazna bijela kutija. Izmjereno: zoomRect 220px vs stvarni gumb 30px; s flex-start oboje 30px. */
    align-items: flex-start;
}

.leaflet-top.leaflet-left .location-search {
    order: -1;
}

.location-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(36, 44, 57, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.15s ease;
    width: 220px;
    max-width: calc(100vw - 90px);
    margin-bottom: 6px;
}

html[data-theme="light"] .location-search {
    background: rgba(255, 255, 255, 0.94);
}

.location-search:focus-within {
    border-color: var(--signal);
}

.location-search-icon {
    color: var(--fog-dim);
    font-size: 13px;
    flex: 0 0 auto;
}

.location-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--paper);
}

.location-search-input::placeholder {
    color: var(--fog-dim);
}

.location-search-input.search-error {
    animation: search-shake 0.3s ease;
}

.location-search-input.search-error::placeholder {
    color: var(--coral);
}

@keyframes search-shake {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.location-search-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--signal);
    color: #0c1f22;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.location-search-btn:hover {
    background: #63c4d1;
}

.location-search-btn.searching {
    animation: search-spin 0.8s linear infinite;
}

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

/* Panel NE kliže i NE reže sadržaj: raste koliko treba, a karta lijevo se rasteže na istu visinu
   (Bootstrapov redak je flex sa stretch, pa oba stupca dobiju visinu višeg).
   Prije je imao fiksnu visinu i overflow-y:auto, pa je desna strana dobila vlastiti klizač čim bi
   sadržaj narastao - a to je i bila pritužba: statistika kliže i viša je od karte. */
.DailyWeather {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    min-height: var(--top-panel-height);
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
}

/* Karta prati visinu desnog panela: stupac se rasteže (stretch), a #weatherMap kao flex-element
   pojede sve što ostane iznad trake sunca/mjeseca i klimatskog retka. Tako su donji rubovi oba
   stupca uvijek poravnati, bez obzira koliko sadržaja ima desno. */
.weatherMapContainer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: var(--top-panel-height);
}

.weatherMapContainer .location-box {
    flex: 0 0 auto;
}

#weatherMap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
    background: var(--panel);
}

/* ============ Leaflet zoom (+/-) kontrola ============
   Leafletov zadani izgled (leaflet.css) donosi tvrdi bijeli obrub oko +/- gumba koji na tamnoj
   (i uopće na Raddarovoj) temi izgleda kao strano "zalijepljeno" polje. Ovdje ga potpuno uklanjamo
   i prebojimo gumbe da prate temu, uz tanku razdjelnicu između + i - umjesto punog obruba/sjene. */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

.leaflet-control-zoom a,
.leaflet-control-zoom a:link,
.leaflet-control-zoom a:visited {
    background: var(--panel-raised) !important;
    color: var(--paper) !important;
    /* Samo bočni i gornji rubovi - donji se namjerno ostavlja pravilu ispod (crta između + i -).
       Ranije je ovdje stajalo 'border: none', što je zbog veće specifičnosti (0,2,0 naspram 0,1,0)
       gasilo i tu razdjelnicu, pa su + i - izgledali kao jedna neprekinuta ploha. */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
    background: var(--line) !important;
    color: var(--paper) !important;
}

/* ============ PODLOGA KARTE: tamna tema ============
   Carto je u kolovozu 2026. počeo tražiti API ključ i žigosati pločice ("API KEY REQUIRED"),
   pa je podloga prebačena na standardni OpenStreetMap - jedini raster izvor zajamčeno besplatan
   i bez ključa. OSM nema tamnu varijantu, pa se tamna karta radi filtrom nad SAMIM PLOČICAMA.

   Filter ide na .rd-basemap-tiles (klasa sloja podloge), a NE na cijelu kartu - inače bi
   invertirao i radar, i polje vjetra, i markere aerodroma, pa bi plava oborina postala narančasta.

   invert + hue-rotate je standardni recept: invert obrne svjetlinu (bijelo->crno), a hue-rotate
   180° vrati bojama približno izvorni ton (bez njega bi zelene šume postale ljubičaste).
   Blago prigušenje zasićenja i kontrasta drži podlogu mirnom ispod meteo slojeva. */
.rd-basemap-tiles {
    filter: none;
}

html[data-theme="dark"] .rd-basemap-tiles {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.55);
}

/* Na svijetloj temi OSM je prilično šaren za podlogu ispod radara - blago ga smirimo
   da meteo slojevi ostanu ono što se prvo vidi. */
html[data-theme="light"] .rd-basemap-tiles {
    filter: saturate(0.72) brightness(1.03);
}

/* Dok je polje vjetra uključeno, podloga se dodatno smiri. Čestice su tanke linije i gube se
   na šarenoj karti - a spuštanjem zasićenja SAMO podloge one postaju jedino zasićeno na ekranu,
   pa se čitaju bez povećavanja njihove neprozirnosti (što bi zagušilo kartu ispod).
   Klasu na <html> postavlja windField.js pri paljenju/gašenju sloja. */
html.rd-wind-on .rd-basemap-tiles {
    filter: saturate(0.28) brightness(1.06) contrast(0.92);
}

html.rd-wind-on[data-theme="dark"] .rd-basemap-tiles {
    filter: invert(1) hue-rotate(180deg) brightness(0.78) contrast(0.82) saturate(0.2);
}

/* Tanka razdjelnica između + i - (specifičnost 0,2,0 da nadjača pravilo iznad) */
.leaflet-control-zoom a.leaflet-control-zoom-in {
    border-bottom: 1px solid var(--line) !important;
}

.leaflet-control-custom {
    background: var(--panel-raised);
    color: var(--paper);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    margin-bottom: 6px;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.leaflet-control-custom:hover {
    background-color: #333e4f;
    border-color: var(--signal);
}

.radar-toggle-active {
    background: var(--signal) !important;
    color: #0c1f22 !important;
    border-color: var(--signal) !important;
}

.radar-toggle-active:hover {
    background: #63c4d1 !important;
}

.satellite-toggle-active {
    background: var(--signal) !important;
    color: #0c1f22 !important;
    border-color: var(--signal) !important;
}

.satellite-toggle-active:hover {
    background: #63c4d1 !important;
}

.radar-timeline {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(36, 44, 57, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    font-family: var(--font);
    margin: 0 0 6px 6px;
    width: 270px;
    max-width: calc(100vw - 40px);
    cursor: default;
}

/* Na svijetloj temi --paper/--fog postaju TAMNE boje (tekst za svijetle podloge) - ako bi pozadina
   ostala tvrdo tamna (kao gore), taj tamni tekst na tamnoj pozadini postane praktički nevidljiv
   (upravo ono što se vidjelo na screenshotu - "ne vidi se sat od radara"). Ista promjena kao kod
   .location-search niže - pozadina prati temu umjesto da ostane fiksno tamna. */
html[data-theme="light"] .radar-timeline {
    background: rgba(255, 255, 255, 0.94);
}

.radar-play-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--signal);
    color: #0c1f22;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.radar-play-btn:hover {
    background: #63c4d1;
}

.radar-timeline-body {
    flex: 1 1 auto;
    min-width: 0;
}

.radar-timeline-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.radar-time-icon {
    color: var(--signal);
    font-size: 12px;
}

.radar-timeline-caption {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fog);
    flex: 1 1 auto;
}

.radar-timeline-time {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
}

.radar-timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    outline: none;
    margin: 0;
    cursor: pointer;
}

.radar-timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--panel);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-top: -1px;
}

.radar-timeline-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--panel);
    cursor: pointer;
}

.radar-timeline-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--line);
}

/* ============ Vjetar - vremenska crta (isti obrazac kao radar, boja vjetra --mint) ============ */
.wind-toggle-active {
    background: var(--mint) !important;
    color: #0f2415 !important;
    border-color: var(--mint) !important;
}

.wind-toggle-active:hover {
    background: #9ad4a3 !important;
}

.wind-toggle-loading {
    opacity: 0.6;
    cursor: wait !important;
}

.wind-toggle-wrap {
    position: relative;
}

/* Gumb-zamjena kad windField.js uopće nije učitan - mora se razlikovati od pravog gumba,
   inače izgleda kao da vjetar postoji pa ne radi. */
.wind-missing-btn {
    background: var(--coral) !important;
    color: #2a0f0a !important;
    border-color: var(--coral) !important;
    cursor: help !important;
}

/* Poruka o grešci dohvata (vidi showWindError u windField.js) - lebdi ispod gumba, ne gura
   ostale kontrole na karti kad se pojavi/nestane. */
.wind-error-label {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 220px;
    max-width: calc(100vw - 60px);
    background: var(--coral);
    color: #2a0f0a;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    z-index: 1000;
}

.wind-timeline {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(36, 44, 57, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    font-family: var(--font);
    margin: 0 0 6px 6px;
    width: 270px;
    max-width: calc(100vw - 40px);
    cursor: default;
}

html[data-theme="light"] .wind-timeline {
    background: rgba(255, 255, 255, 0.94);
}

.wind-play-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--mint);
    color: #0f2415;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.wind-play-btn:hover {
    background: #9ad4a3;
}

.wind-timeline-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wind-timeline-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.wind-time-icon {
    color: var(--mint);
    font-size: 12px;
}

.wind-timeline-caption {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fog);
    flex: 1 1 auto;
}

.wind-timeline-time {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
}

.wind-timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    outline: none;
    margin: 0;
    cursor: pointer;
}

.wind-timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--mint);
    border: 2px solid var(--panel);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-top: -1px;
}

.wind-timeline-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--mint);
    border: 2px solid var(--panel);
    cursor: pointer;
}

.wind-timeline-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--line);
}

/* Ljestvica boja: bez nje boja čestice ne znači ništa - vidi se da je "šareno", ali ne i koliko
   puše. Stoji ispod klizača u istoj kartici, pa ne troši dodatni prostor na karti. */
.wind-legend {
    margin-top: 7px;
}

.wind-legend-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.wind-legend-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 600;
    color: var(--fog-dim);
}

/* ============ Ručni uvoz staza (rad bez poslužitelja) ============
   Vidi hikingTrails.js: iz file:// se staze ne mogu dohvatiti s mreže, ali datoteka koju korisnik
   sam odabere može se pročitati. Ova kartica vodi kroz ta dva koraka. */
.hike-import.is-needed {
    border-color: var(--amber);
}

.hike-import-note {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--fog);
    margin: 0 0 8px 0;
}

.hike-import-steps {
    margin: 0 0 8px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hike-import-steps li {
    font-size: 11.5px;
    color: var(--fog);
}

.hike-import-link,
.hike-import-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--panel-raised);
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 11px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hike-import-link:hover,
.hike-import-file:hover {
    border-color: var(--signal);
    background: var(--panel);
}

/* Pravi <input type=file> je ružan i različit u svakom pregledniku - skrivamo ga, a klik hvata
   <label> koji ga omata. Ostaje potpuno pristupačan (label je vezan uz input). */
.hike-import-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hike-import-hint {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--fog-dim);
}

.hike-import-clear {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font);
    font-size: 10.5px;
    color: var(--fog-dim);
    text-decoration: underline;
    cursor: pointer;
}

.hike-import-clear:hover { color: var(--coral); }

/* ============ Sastavljanje rute za prognozu (klik-lanac / od-do / GPX) ============ */
.hike-random-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin: 8px 0 0 0;
    background: var(--panel-raised);
    color: var(--paper);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.hike-random-btn:hover { border-color: var(--signal); background: var(--panel); }

.hike-chain-box, .hike-route-box, .hike-gpx-box { margin-top: 8px; }

.hike-chain-list {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hike-chain-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    font-size: 12px;
}

.hike-chain-item .hike-chain-index {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--signal);
    color: #0c1f22;
    font-size: 10.5px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.hike-chain-item .hike-chain-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
.hike-chain-item .hike-chain-gap { color: var(--amber); font-size: 10.5px; }

.hike-chain-item-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--fog-dim);
    cursor: pointer;
    width: 18px; height: 18px;
    border-radius: 50%;
}
.hike-chain-item-remove:hover { background: var(--line); color: var(--coral); }

/* Ugrađeni "hover" prikaz brzine/smjera iz leaflet-velocity biblioteke - preboji u temu stranice
   umjesto zadane bijele podloge, da se uklopi s ostatkom karte. */
.leaflet-control-velocity {
    background: var(--panel-soft) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--paper) !important;
    font-family: var(--font) !important;
    font-size: 11px !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 4px 8px !important;
    margin: 0 6px 6px 0 !important;
}

/* Ovaj readout radi na "mousemove" (nema touch verziju), pa na mobitelu samo stoji prazan
   ("Nema podataka o vjetru") i zauzima prostor uz vremensku crtu - skloni ga na uskom ekranu. */
@media (max-width: 480px) {
    .leaflet-control-velocity {
        display: none;
    }
}

.leaflet-top.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.leaflet-control.legend {
    background: rgba(36, 44, 57, 0.92);
    color: var(--paper);
    border: 1px solid var(--line);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
}

.leaflet-popup-content-wrapper {
    background: var(--panel-raised);
    color: var(--paper);
    font-family: var(--font);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
}

.leaflet-popup-tip {
    background: var(--panel-raised);
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--fog);
}

/* KVAR KOJI OVO RJEŠAVA: naslov "Prognoza za narednih 6 dana" i dnevne kartice crtali su se
   jedno preko drugoga. Uzrok: ovaj blok je bio rastezljiv flex-element s min-height:0, pa se pri
   nedostatku mjesta SKUPLJAO ispod visine vlastitog sadržaja - a sadržaj se nije rezao nego se
   prelio preko sljedećeg bloka. Panel je pritom javljao scrollHeight bez viška, pa se ni klizač
   nije pojavio: prelijevanje je bilo nevidljivo mjerenju, vidljivo oku.
   S "flex: 0 0 auto" blok drži vlastitu visinu, pa se višak pošteno pretvori u klizanje panela. */
#meteo-top {
    position: relative;
    flex: 0 0 auto;
    min-height: 0;
}

#meteo-bottom {
    text-align: center;
    z-index: 2;
    position: relative;
    flex: 0 0 auto;
}

#meteo-default {
    color: var(--fog);
    font-size: 14px;
    padding: 10px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

#meteo-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 0;
    gap: 8px;
}

/* ============ HERO: trenutno vrijeme + mjesečeva mijena ============ */
.weather-hero {
    position: relative;
    display: flex;
    /* Kartica sad ima dva stupca (trenutno + "Uskoro") pa ISPOD njih dvije trake pune širine
       (oborina, METAR). Bez flex-wrap svi bi se natiskali u jedan red i preklopili se. */
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    border-radius: var(--radius-lg);
    padding: 12px 18px;
    color: var(--paper);
    background: linear-gradient(155deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 82%, var(--sky-4) 120%);
    transition: background 1.2s var(--ease);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 46px -22px rgba(0, 0, 0, 0.55);
    overflow: hidden;

    /* Nebo nosi vlastiti kontrast neovisno o dark/light temi stranice - sva djeca koja čitaju
       var(--paper)/--fog/--fog-dim/--line (naslovi, "Uskoro", METAR, oborina...) automatski
       postaju čitljiva na gradijentu, bez ijedne dodatne klase. */
    --paper: #FFFFFF;
    --fog: rgba(255, 255, 255, 0.8);
    --fog-dim: rgba(255, 255, 255, 0.58);
    --line: rgba(255, 255, 255, 0.22);
    --line-soft: rgba(255, 255, 255, 0.14);
    --panel-soft: rgba(15, 18, 26, 0.38);
}

/* Četiri stanja neba - JS (updateHeroSky u indexx.js) postavlja data-sky prema stvarnom
   izlasku/zalasku sunca i is_day iz API-ja. Bez atributa (prije prvog dohvata) ostaje suton
   iznad kao neutralan izgled koji se ne "prazni". */
.weather-hero[data-sky="night"] {
    background: linear-gradient(155deg, #05070C 0%, #0E1424 46%, #1A2340 80%, #262E52 120%);
}
.weather-hero[data-sky="dawn"] {
    background: linear-gradient(155deg, #1A1E30 0%, #3A3350 46%, #9A5B62 80%, #E8A75B 120%);
}
.weather-hero[data-sky="day"] {
    background: linear-gradient(155deg, #123049 0%, #1C4C68 46%, #2E7C94 80%, #6BB9CB 120%);
}
.weather-hero[data-sky="dusk"] {
    background: linear-gradient(155deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 82%, var(--sky-4) 120%);
}

/* Kiša/snijeg/grmljavina (is-wet, postavlja JS iz weather_code) - hladan, prigušen preklop
   preko neba + vrlo suptilne kose crte koje sporo "kližu", umjesto da mijenjamo sam gradijent
   (inače bi noć+kiša i dan+kiša izgledali identično). */
.weather-hero.is-wet::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(12, 16, 26, 0.4), rgba(12, 16, 26, 0.12)),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 16px);
    background-size: auto, 220% 220%;
    animation: rd-rain-drift 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .weather-hero.is-wet::before { animation: none; }
}
@keyframes rd-rain-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, -140px 140px; }
}

.hero-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 33%;
    min-width: 0;
}

.hero-icon {
    flex: 0 0 auto;
}

.hero-main-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.hero-caption {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fog);
}

.hero-temp {
    font-family: var(--font);
    font-size: 30px;
    font-weight: 700;
    color: var(--paper);
    line-height: 1.1;
}

.hero-feels {
    font-size: 12px;
    color: var(--fog);
}

.hero-wind {
    font-size: 12px;
    color: var(--fog);
    margin-top: 4px;
}

.hero-wind-desc {
    color: var(--fog-dim);
}

.hero-divider {
    position: relative;
    width: 1px;
    background: var(--line);
    margin: 2px 16px;
    flex: 0 0 auto;
}

.hero-moon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1 1 33%;
    min-width: 0;
}

.hero-moon .moon-emoji {
    font-size: 24px;
    margin-bottom: 2px;
}

.hero-moon .moon-phase-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--paper);
}

.hero-moon .moon-illum,
.hero-moon .moon-next {
    font-size: 10.5px;
    color: var(--fog);
    display: block;
}

.hero-daylight {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 33%;
    min-width: 0;
}

.hero-day-arc {
    width: 90px;
    display: block;
}

.hero-day-arc path {
    stroke: var(--line);
}

.hero-day-arc #sunDot {
    fill: var(--amber);
}

.hero-daylight-times {
    font-size: 10.5px;
    color: var(--fog);
    white-space: nowrap;
}

.hero-daylight-times i {
    color: var(--amber);
}

.hero-daylight-duration {
    font-size: 13px;
    font-weight: 700;
    color: var(--paper);
    margin-top: 1px;
}

/* ============ Nowcast oborine (kad počinje / kad staje) ============
   Stoji POD KARTOM, uz radar. Vodoravni raspored (tekst lijevo, stupci desno) drži traku niskom
   da karta izgubi što manje visine - lijevi stupac ima fiksnu visinu (--top-panel-height). */
.precip-nowcast {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 14px 6px 14px;
    box-shadow: var(--shadow-soft);
}

/* Kad se oborina očekuje, okvir se suptilno naglasi - primijeti se bez čitanja teksta */
.precip-nowcast.is-wet {
    border-color: var(--signal);
}

/* Radarsko (TREC) upozorenje - model se JOŠ ne slaže, pa je namjerno DRUGA boja od
   is-wet (--coral, ista uloga "upozorenje" kao mraz/max temp u ostatku palete), ne
   ista teal boja koja bi značila "izvori se slažu". */
.precip-nowcast.is-radar-alert {
    border-color: var(--coral);
}

.precip-nowcast-radar-note {
    font-size: 11.5px;
    color: var(--coral);
    margin-top: 4px;
    line-height: 1.3;
}

/* Neutralne poruke ("radar radi, ali ne vidi ništa", "učitavanje", "nije dostupan") NE smiju
   izgledati kao upozorenje - crvena je rezervirana za "stiže oborina". Inače bi mirno stanje
   svaki put izgledalo kao da nešto nije u redu. */
.precip-nowcast-radar-note[data-kind="clear"],
.precip-nowcast-radar-note[data-kind="no-signal"],
.precip-nowcast-radar-note[data-kind="loading"],
.precip-nowcast-radar-note[data-kind="out-of-range"],
.precip-nowcast-radar-note[data-kind="radar-clear"],
.precip-nowcast-radar-note[data-kind="error"] {
    color: var(--fog-dim);
}

.precip-nowcast-head {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--paper);
    line-height: 1.3;
}

.precip-nowcast-head i {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--fog-dim);
}

.precip-nowcast.is-wet .precip-nowcast-head i {
    color: var(--signal);
}

.precip-nowcast-bars {
    flex: 0 0 200px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
    /* Prostor za oznake sati koje su position:absolute ispod stupaca */
    margin-bottom: 11px;
}

.nowcast-bar {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Tanka podloga pokazuje da blok postoji i kad je suh - inače traka izgleda "prazno/pokvareno" */
    background: linear-gradient(to top, var(--line-soft) 0 2px, transparent 2px);
    border-radius: 2px;
}

.nowcast-bar-fill {
    width: 100%;
    background: var(--fog-dim);
    border-radius: 2px 2px 0 0;
    transition: height 0.25s ease;
}

.nowcast-bar.wet .nowcast-bar-fill {
    background: var(--signal);
}

/* Blok bez podatka se vizualno razlikuje od bloka bez oborine - prazan stupac ne smije
   izgledati kao potvrda da je suho. */
.nowcast-bar.unknown {
    background: repeating-linear-gradient(45deg, var(--line-soft) 0 3px, transparent 3px 6px);
    border-radius: 2px;
    opacity: 0.6;
}

.nowcast-bar-tick {
    position: absolute;
    bottom: -11px;
    font-size: 8px;
    color: var(--fog-dim);
    white-space: nowrap;
}

/* Radarska (TREC) oznaka PREKO modelskog stupca - tanka crta, NE puni stupac poput
   .nowcast-bar-fill, da se dva izvora nikad ne pročitaju kao jedna brojka. Boja --coral
   ista je kao .is-radar-alert - jedna vizualna "radarska" boja u cijelom panelu. */
/* Radar se crta kao PROZIRAN STUPAC od dna, poravnat s modelskim - ranije je bio lebdeća
   crtica koja je, kad model za taj prozor nema ništa, visjela u praznini i djelovala otkinuto.
   Stupac se čita kao količina; prozirnost i obrub kažu da je iz drugog izvora (radar, ne model). */
.nowcast-bar-radar-col {
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 0;
    border-radius: 2px 2px 0 0;
    z-index: 1;
    pointer-events: none;
}

.nowcast-bar-radar-col.wet {
    background: color-mix(in srgb, var(--coral) 35%, transparent);
    border: 1px solid var(--coral);
    border-bottom: none;
}

/* Suho: samo tanka, prigušena crta pri dnu - kaže "radar ovdje ima podatak i ne vidi oborinu".
   Neutralna boja, jer je narančasta u cijeloj stranici boja upozorenja. */
.nowcast-bar-radar-col.dry {
    background: var(--fog-dim);
    opacity: 0.5;
    left: 35%;
    right: 35%;
}

/* Na uskom ekranu tekst i stupci idu jedno ispod drugog - u jednom retku bi tekst bio prestisnut */
@media (max-width: 575px) {
    .precip-nowcast {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .precip-nowcast-bars {
        flex: 0 0 auto;
        height: 30px;
    }
}

/* ============ Statističke kartice ============ */
.stat-section-caption {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fog-dim);
    margin: 2px 2px 0 2px;
}

.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stat-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    text-align: center;
    min-height: 92px;
    color: var(--paper);
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.stat-card:hover {
    border-color: var(--line-soft);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.45);
}

.stat-icon-badge {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    font-size: 11.5px;
    color: #10151d;
}

.stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--paper);
    line-height: 1.15;
}

.stat-label {
    font-size: 9px;
    color: var(--fog);
    margin-top: 1px;
    line-height: 1.15;
}

.stat-tag {
    margin-top: 3px;
    font-size: 8.5px;
    font-weight: 600;
    color: var(--fog-dim);
}

.stat-card-temp     .stat-icon-badge { background: var(--coral); }
.stat-card-precip   .stat-icon-badge { background: var(--signal); }
.stat-card-wind     .stat-icon-badge { background: var(--mint); }
.stat-card-pressure .stat-icon-badge { background: var(--violet); }
.stat-card-humidity .stat-icon-badge { background: #6bc4cf; }

.stat-card-direction .compass {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    margin-bottom: 4px;
}

.compass-n {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 700;
    color: var(--fog-dim);
}

.compass-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 13px;
    background: var(--mint);
    box-shadow: 0 0 5px var(--mint);
    border-radius: 2px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
    transition: transform 0.6s var(--ease);
}

/* ============ METAR ============ */
#metar-container {
    text-align: left;
    font-size: 12.5px;
    padding: 8px 10px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    color: var(--paper);
}

#metar-container b {
    flex: 0 0 auto;
    color: var(--fog);
}

.metar-code {
    font-family: var(--font);
    font-size: 11.5px;
    color: var(--signal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============ Traka prognoze ============ */
.forecast-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 2px 2px 6px 2px;
}

.weather-forecast-item {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--paper);
    box-shadow: var(--shadow-soft);
    transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out;
    cursor: pointer;
}

.weather-forecast-item:hover {
    transform: translateY(-3px);
    border-color: var(--signal);
}

.forecast-icon-pair {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 0 0;
}

.weather-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: 0 0 auto;
}

.forecast-icon-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forecast-icon-slot-label {
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fog-dim);
    margin-top: 2px;
}

.weather-forecast-item p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--paper);
}

.forecast-day-label {
    line-height: 1.2;
}

.forecast-day-weekday {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--fog-dim);
}

.forecast-day-date {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--paper);
}

.forecast-temp-range {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
}

.forecast-temp-range .temp-max {
    color: var(--coral);
}

.forecast-temp-range .temp-min {
    color: var(--signal);
}

.forecast-temp-range i {
    font-size: 9px;
    margin-right: 2px;
}

.weather-forecast-item small {
    font-size: 12px;
    color: var(--fog);
}

.forecast-skeleton {
    display: flex;
    gap: 8px;
}

.skeleton-chip {
    width: 78px;
    height: 96px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--panel) 25%, var(--panel-raised) 37%, var(--panel) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    flex: 0 0 auto;
    border: 1px solid var(--line);
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ============ Sklopka raspona grafova (6d / 14d) ============ */
.chart-range-toggle-row {
    /* display:flex je ovdje eksplicitno, a ne oslonjen na Bootstrapovu .d-flex klasu iz HTML-a -
       raspored sklopki ne smije ovisiti o tome je li Bootstrap CDN dostupan. */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* ============ Sklopka prikaza: Pregled / Grafovi (samo uski ekrani) ============ */
.view-toggle {
    display: inline-flex;
    margin-right: auto;   /* gura sklopku raspona (6/14 dana) na desnu stranu */
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    box-shadow: var(--shadow-soft);
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fog);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle-btn i { font-size: 11px; }

.view-toggle-btn:hover {
    background: var(--panel-raised);
    color: var(--paper);
}

.view-toggle-btn.active {
    background: var(--signal);
    color: #0c1f22;
}

/* ============ Dnevni pregled (zadano na mobitelu) ============ */
.daily-overview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.overview-empty {
    color: var(--fog);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.overview-day {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.overview-day.expanded {
    border-color: var(--signal);
}

.overview-day-head {
    width: 100%;
    display: grid;
    /* dan | ikona | temperature | statistike | strelica */
    grid-template-columns: minmax(72px, 1fr) auto auto minmax(0, 1.4fr) 16px;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 11px 13px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    color: var(--paper);
}

.overview-day-head:hover {
    background: var(--panel-raised);
}

.overview-day-when {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.overview-day-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--paper);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-day-date {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--fog-dim);
}

.overview-day-icon {
    display: flex;
    align-items: center;
}

.overview-day-temps {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.overview-temp-max {
    font-size: 17px;
    font-weight: 700;
    color: var(--coral);
}

.overview-temp-min {
    font-size: 13px;
    font-weight: 600;
    color: var(--signal);
}

.overview-day-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 11px;
    color: var(--fog);
}

.overview-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.overview-stat i {
    width: 13px;
    text-align: center;
    color: var(--fog-dim);
    font-size: 10.5px;
}

.overview-stat small {
    color: var(--fog-dim);
    font-size: 9.5px;
}

.overview-stat-rain i { color: var(--signal); }
.overview-stat-dry i { color: var(--amber); }

.overview-day-chevron {
    font-size: 11px;
    color: var(--fog-dim);
    transition: transform 0.2s ease;
    justify-self: end;
}

.overview-day.expanded .overview-day-chevron {
    transform: rotate(180deg);
    color: var(--signal);
}

/* --- Satni detalj unutar dana --- */
.overview-day-hours {
    border-top: 1px solid var(--line);
    background: var(--panel-raised);
}

.overview-hours-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 12px;
    scrollbar-width: thin;
}

.overview-hour {
    flex: 0 0 auto;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 5px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.overview-hour-time {
    font-size: 10px;
    font-weight: 700;
    color: var(--fog-dim);
}

.overview-hour-temp {
    font-size: 14px;
    font-weight: 700;
    color: var(--paper);
    margin-top: 1px;
}

.overview-hour-meta {
    font-size: 9.5px;
    color: var(--fog);
    min-height: 12px;
}

/* --- Prognostički klimatski pokazatelji (Vrijeme uživo) ---
   Namjerno malo i tiho - ovo je dopuna kartici dana, ne novi glavni sadržaj. Boje slijede
   već postojeći jezik stranice (kiša=signal, suho=amber, vjetar=mint, vidi .overview-stat-*
   iznad), a ne izmišljaju novu paletu. */
/* --- Prognostički klimatski pokazatelji (Vrijeme uživo) ---
   Namjerno malo i tiho - ovo je dopuna kartici dana, ne novi glavni sadržaj. Boje slijede
   već postojeći jezik stranice (kiša=signal, suho=amber, vjetar=mint, vidi .overview-stat-*
   iznad), a ne izmišljaju novu paletu.
   PUNA ŠIRINA KARTICE, kao zaseban redak ISPOD zaglavlja (ne unutar .overview-day-when) -
   taj je stupac na telefonu samo ~64px (vidi @media max-width:480px niže), pa bi značke ondje
   ili prelile stupac ili se nevidljivo stisnule. Ikona + KRATAK TEKST (ne title tooltip) - na
   dodir (mobitel) title uopće ne iskoči, pa bi gola ikona bila neupotrebljiva na telefonu. */
.overview-day-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 13px 10px;
    border-top: 1px solid var(--line-soft);
}

.live-index-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 999px;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    color: var(--paper);
    white-space: nowrap;
}

.live-index-badge-icon {
    font-size: 12px;
    line-height: 1;
}

.live-index-badge-tr,
.live-index-badge-su30    { background: var(--coral-dim); border-color: var(--coral); }
.live-index-badge-comfort { background: var(--mint-dim);  border-color: var(--mint); }
.live-index-badge-muggy   { background: var(--amber-dim); border-color: var(--amber); }
.live-index-badge-frost   { background: var(--signal-dim); border-color: var(--signal); }
.live-index-badge-storm   { background: var(--violet-dim); border-color: var(--violet); }
.live-index-badge-bura    { background: var(--mint-dim);  border-color: var(--mint); }

/* Uski telefon: manji razmak/padding, tekst malo sitniji - i dalje čitljivo, ali ne dominira
   kad je i onako 4-5 čipova u redu preko ~320-360px širine. */
@media (max-width: 480px) {
    .overview-day-badges {
        gap: 5px;
        padding: 7px 11px 9px;
    }

    .live-index-badge {
        padding: 3px 7px;
        font-size: 10.5px;
    }
}

/* Traka nizova (toplinski val / suho / kišno razdoblje) - iznad kartica, vidljiva u OBA
   prikaza (pregled i grafovi), jer je desktop preklop zasjenjene trake preko meteograma
   zaseban sljedeći korak. Prazna i sklonjena (hidden atribut iz JS-a) kad nema nijednog niza. */
.live-index-spells {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.live-spell-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    color: var(--paper);
}

.live-spell-chip small {
    font-weight: 500;
    color: var(--fog-dim);
}

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

.live-spell-heatwave { background: var(--coral-dim); border-color: var(--coral); }
.live-spell-dryspell { background: var(--amber-dim); border-color: var(--amber); }
.live-spell-wetspell { background: var(--signal-dim); border-color: var(--signal); }

.charts-view {
    width: 100%;
}

/* ============ Master meteogram - tri sinkronizirana ApexCharts panela ============ */
.meteogram-card {
    padding: 16px 14px 10px 14px;
    width: 100%;
    margin: 0 auto;
    transition: width 0.25s ease;
}

.meteogram-card.meteogram-narrow {
    width: 60%;
    min-width: 360px;
}

.meteogram-panels {
    display: flex;
    flex-direction: column;
}

.meteogram-panel {
    width: 100%;
}

.meteogram-panel + .meteogram-panel {
    border-top: 1px solid var(--line);
    margin-top: 2px;
    padding-top: 2px;
}

/* Panel 1 (temperatura) + prozirni overlay (tlak zraka) preklopljeni na istom mjestu - vidi
   updateMasterMeteogram() u indexx.js za objašnjenje zašto je tlak zaseban graf, ne treća serija. */
.meteogram-panel-stack {
    position: relative;
}

.meteogram-panel-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none; /* klik/hover prolazi kroz do temperaturnog grafa ispod - tlak nema svoj tooltip */
}

.details-toggle-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 4px 0 18px 0;
}

.details-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--signal);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.details-toggle-btn:hover {
    background: var(--panel-raised);
    border-color: var(--signal);
}

.details-toggle-btn i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.details-toggle-btn.expanded i {
    transform: rotate(180deg);
}

.detail-charts-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.chart-range-toggle {
    display: inline-flex;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    box-shadow: var(--shadow-soft);
}

.chart-range-btn {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--fog);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chart-range-btn:hover {
    background: var(--panel-raised);
    color: var(--paper);
}

.chart-range-btn.active {
    background: var(--signal);
    color: #0c1f22;
}

/* ============ Grafovi - kartica oko svakog ============ */
.chart-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: var(--shadow-panel);
    margin-bottom: 20px;
}

.chart-target {
    min-height: 320px;
}

.chart-note {
    text-align: center;
    font-size: 11px;
    color: var(--fog-dim);
    margin: 6px 0 2px 0;
}

.model-source-note {
    width: 100%;
    color: var(--fog);
    margin: 0 0 6px 0;
}

/* ============ ApexCharts - vizualno uklopljeno u ostatak stranice ============ */
/* Tooltip i legenda su prava DOM stabla (ne canvas/SVG-only), pa ih je jednostavno
   prebojiti CSS-om da izgledaju kao dio iste stranice, ne kao "zalijepljena" biblioteka. */
.apexcharts-tooltip {
    background: var(--panel-raised) !important;
    border: 1px solid var(--line) !important;
    color: var(--paper) !important;
    font-family: var(--font) !important;
    box-shadow: var(--shadow-panel) !important;
}

.apexcharts-tooltip-title {
    background: var(--panel) !important;
    border-bottom: 1px solid var(--line) !important;
    font-family: var(--font) !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--panel-raised) !important;
    border-color: var(--line) !important;
    color: var(--paper) !important;
    font-family: var(--font) !important;
}

.apexcharts-xaxistooltip::before,
.apexcharts-xaxistooltip::after,
.apexcharts-yaxistooltip::before,
.apexcharts-yaxistooltip::after {
    display: none;
}

.apexcharts-legend-text {
    font-family: var(--font) !important;
    color: var(--fog) !important;
}

/* Legenda u JEDNOM retku umjesto zadanog prelamanja na 2+ reda - nowrap prisiljava sve stavke u
   istu liniju, overflow-x:auto je fallback (vodoravni scroll) za rijetki slučaj da baš ne stanu
   (npr. jako uzak mobilni ekran). Testirano headless Chromium-om sa svim slučajevima na stranici
   (Temperatura - 5 stavki, Naoblaka i oborina - 4, PM10/PM2.5/SO2 - 3) - sve stanu u jedan red. */
.apexcharts-legend {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: center !important;
    scrollbar-width: thin;
}

.apexcharts-legend::-webkit-scrollbar {
    height: 3px;
}

.apexcharts-legend::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
}

.apexcharts-legend-series {
    flex-shrink: 0;
    white-space: nowrap !important;
}

.apexcharts-legend-text {
    white-space: nowrap !important;
}

/* Prozirni slojevi preklopljeni preko panela (tlak zraka, pojas ansambla) imaju legendu SAMO zato
   da zauzmu istu visinu kao panel ispod - inače im je plot-area 19 px viša pa im se linija/pojas
   ne poklope s onim što opisuju (izmjereno: 135 px s legendom, 154 px bez nje).
   Njihov tekst se NE smije vidjeti - inače se ispisuje preko legende panela ispod ("Rasap ansambla"
   preko "Temperatura ... Osjećaj temp.").
   Zašto CSS, a ne boja iz JS-a: pravilo .apexcharts-legend-text { color: var(--fog) !important }
   iznad pregazi prozirnu boju koju ApexCharts postavi inline. visibility:hidden skriva sadržaj,
   ali ZADRŽAVA zauzeti prostor - a upravo taj prostor je jedini razlog zašto legenda tu i postoji. */
.meteogram-panel-overlay .apexcharts-legend-text,
.meteogram-panel-overlay .apexcharts-legend-marker,
.meteogram-panel-overlay .apexcharts-legend-series {
    visibility: hidden !important;
}

/* Stvarni uzrok vertikalnog slaganja stavki (svaka u svom retku): ApexCharts ubacuje ugniježđeni
   .apexcharts-legend-group div IZMEĐU .apexcharts-legend i pojedinačnih .apexcharts-legend-series
   stavki, kojem sam postavlja flex-direction:column/column-reverse kad interno odluči da legenda
   treba biti "vertikalna" (apexcharts-legend-group-vertical klasa - vidi se kod grafova s više
   serija poput Temperature). Ciljanje samo vanjskog .apexcharts-legend nije bilo dovoljno jer TAJ
   unutarnji div stvarno određuje smjer slaganja - potvrđeno headless Chromium testom (getComputedStyle
   je pokazao flex-direction:column-reverse na .apexcharts-legend-group prije ovog pravila). */
.apexcharts-legend-group {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.apexcharts-menu-icon,
.apexcharts-zoom-icon,
.apexcharts-reset-icon,
.apexcharts-pan-icon,
.apexcharts-selection-icon,
.apexcharts-zoomin-icon,
.apexcharts-zoomout-icon {
    display: none !important;
}

/* ============ Pop-up za vremensku prognozu ============ */
.weather-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--panel-raised);
    border: 1px solid var(--line);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    z-index: 1000;
    width: 320px;
    max-width: 90vw;
    text-align: center;
    color: var(--paper);
    font-family: var(--font);
}

.weather-popup-content h3 {
    margin-top: 0;
    font-size: 18px;
    color: var(--paper);
}

.weather-popup-content img {
    width: 80px;
    height: 80px;
    margin: 10px 0;
}

.weather-popup-content p {
    font-size: 14px;
    color: var(--fog);
    text-align: left;
}

.weather-popup-content button {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--signal);
    color: #0c1f22;
    font-family: var(--font);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.weather-popup-content button:hover {
    background: #63c4d1;
}

/* ============ Zbijeni desni panel na NISKIM ekranima ============
   Visina panela je clamp(520px, 100vh - 190px, 740px), pa na laptopu s 800px visine ostane ~610px,
   a sadržaj (traka prognoze + hero + 6 statističkih kartica + METAR) traži ~665px - i cijeli panel
   je morao klizati. Umjesto klizanja, na niskim ekranima sadržaj se stisne.
   Mjereno renderiranjem: 1280x800 prije 664px u 608px okvira, poslije stane. */
@media (max-height: 900px) {
    .DailyWeather {
        gap: 7px;
        padding: 10px;
    }

    .weather-hero { padding: 10px 13px; }
    .hero-temp { font-size: 26px; }
    .hero-day-arc { width: 78px; }

    .stat-card {
        min-height: 74px;
        padding: 7px 6px;
    }

    .stat-icon-badge {
        width: 21px;
        height: 21px;
        margin-bottom: 3px;
        font-size: 10px;
    }

    .stat-card-direction .compass {
        width: 26px;
        height: 26px;
        margin-bottom: 2px;
    }

    .weather-forecast-item { padding: 6px 5px; }
    .forecast-scroll { gap: 5px; }
    #metar-container { padding: 6px 9px; }
    .stat-section-caption { margin-top: 0; }
}

/* Još niži ekrani (1366x768 je i dalje vrlo čest laptop) - dodatno stiskanje.
   Ikone u traci prognoze JS crta s inline veličinom (weatherIconBadgeHTML), pa se ovdje moraju
   nadjačati s !important - to je jedini način da CSS utječe na inline stil. */
@media (max-height: 800px) {
    .weather-hero { padding: 8px 12px; }
    .hero-temp { font-size: 24px; }
    .hero-day-arc { width: 70px; }

    .stat-card { min-height: 66px; }
    .stat-label { font-size: 8.5px; }
    .stat-tag { font-size: 8px; margin-top: 2px; }

    .forecast-icon-pair { margin-top: 2px; }
    .forecast-icon-pair .weather-icon-badge {
        width: 34px !important;
        height: 34px !important;
    }
}

@media (max-width: 991px) {
    /* Bivše 'height: 400px' nije ništa radilo: min-height (--top-panel-height = 100vh - 190px)
       ga je uvijek pregazio, pa je karta na telefonu od 844 px bila visoka ~570 px i hvatala
       svaki potez prstom - stranica se jedva dala pomaknuti do podataka. Visinu sad nosi sama
       karta (vidi blok "KOMPAKTNA KARTA" na dnu datoteke), a stupac je visok koliko mu sadržaj. */
    .weatherMapContainer {
        min-height: 0;
        height: auto;
    }

    .DailyWeather {
        height: auto;
        overflow-y: visible;
    }
}

@media (max-width: 480px) {
    /* flex-direction:column + flex-wrap:wrap (naslijeđeno od .weather-hero) je opasna kombinacija:
       kad zbroj visina djece premaši visinu kartice, wrap NE ide u novi red nego u novi STUPAC
       udesno - kartica se tako širi puno šire od ekrana i cijela stranica se može vući lijevo/desno.
       Ovdje želimo čisto jednostupčano slaganje, pa wrap eksplicitno gasimo. */
    .weather-hero {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .hero-divider {
        width: auto;
        height: 1px;
        margin: 0;
    }

    .stat-card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .meteogram-card.meteogram-narrow {
        width: 100%;
        min-width: 0;
    }

    .location-search {
        width: 170px;
        padding: 6px 8px;
    }

    /* Na uskom telefonu pet stupaca u zaglavlju dana ne stane - statistike idu u drugi red,
       ispod dana/ikone/temperatura, preko cijele širine kartice. */
    .overview-day-head {
        grid-template-columns: minmax(64px, 1fr) auto auto 14px;
        row-gap: 7px;
    }

    .overview-day-stats {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 6px;
        border-top: 1px solid var(--line-soft);
    }

    .view-toggle-btn {
        padding: 6px 11px;
        font-size: 12px;
    }
}

/* ================================================================
   TABOVI — Meteo info / Weather aware planning
   ================================================================ */
.raddar-tabs-row {
    margin-top: 10px;
    padding-bottom: 0;
}

.raddar-tabs {
    display: flex;
    gap: 3px;
    border-bottom: none;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.raddar-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--fog);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.raddar-tab-btn i {
    font-size: 13px;
    color: var(--fog-dim);
    transition: color 0.2s var(--ease);
}

.raddar-tab-btn:hover {
    color: var(--paper);
}

.raddar-tab-btn.active {
    color: var(--paper);
    background: var(--panel-raised);
    box-shadow: inset 0 0 0 1px var(--line-soft), 0 4px 12px -6px rgba(0, 0, 0, 0.4);
}

.raddar-tab-btn.active i {
    color: var(--signal);
}

#raddarTabContent {
    margin-top: 4px;
}

/* ================================================================
   WEATHER AWARE PLANNING
   ================================================================ */
.planningSection {
    margin-top: 14px;
    padding-bottom: 24px;
}

.planningControls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: var(--top-panel-height);
    overflow-y: auto;
    padding-right: 4px;
}

.planning-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    box-shadow: var(--shadow-soft);
}

/* --- Birač aktivnosti (hiking / biking / car) --- */
.mode-toggle {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mode-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: var(--panel-raised);
    color: var(--fog);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mode-btn i {
    font-size: 13px;
}

.mode-btn:hover {
    border-color: var(--signal);
    color: var(--paper);
}

.mode-btn.active {
    background: var(--signal);
    border-color: var(--signal);
    color: #0c1f22;
}

/* --- Odabir početne/krajnje točke --- */
.point-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.point-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
}

.point-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--panel);
}

.point-dot-start { background: var(--mint); }
.point-dot-end { background: var(--coral); }

.point-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 13px;
    color: var(--paper);
}

.point-input::placeholder {
    color: var(--fog-dim);
}

.point-input:read-only {
    cursor: default;
}

.point-clear-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--fog-dim);
    font-size: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.point-clear-btn:hover {
    background: var(--line);
    color: var(--coral);
}

.point-search-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--fog-dim);
    font-size: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.point-search-btn:hover { background: var(--line); color: var(--signal); }
.point-search-btn.loading { opacity: 0.5; pointer-events: none; }

.point-picker-hint {
    margin: 2px 0 0 0;
    font-size: 11.5px;
    color: var(--fog-dim);
}

.point-picker-hint.picking-end {
    color: var(--coral);
}

/* --- Datum/vrijeme polaska --- */
.planning-datetime {
    width: 100%;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--paper);
    outline: none;
}

.planning-datetime:focus {
    border-color: var(--signal);
}

/* Safari/webkit datetime-local ikonica - malo posvijetli na tamnoj temi da bude vidljiva */
.planning-datetime::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

html[data-theme="light"] .planning-datetime::-webkit-calendar-picker-indicator {
    filter: none;
}

/* --- Tempo kretanja (brzina hodanja / vožnje) --- */
.pace-options {
    display: flex;
    gap: 6px;
}

.pace-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    background: var(--panel-raised);
    color: var(--fog);
    font-family: var(--font);
    padding: 8px 6px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pace-btn:hover {
    border-color: var(--signal);
    color: var(--paper);
}

.pace-btn.active {
    background: var(--signal-dim);
    border-color: var(--signal);
    color: var(--signal);
}

.pace-btn-label {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pace-btn-speed {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--fog-dim);
    white-space: nowrap;
}

.pace-btn.active .pace-btn-speed {
    color: var(--signal);
}

.pace-hint {
    margin: 7px 0 0 0;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--fog-dim);
    text-align: center;
}

/* --- Meteo preferencije --- */
.weather-pref-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.pref-chip {
    border: 1px solid var(--line);
    background: var(--panel-raised);
    color: var(--fog);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pref-chip:hover {
    border-color: var(--signal);
    color: var(--paper);
}

.pref-chip.active {
    background: var(--signal-dim);
    border-color: var(--signal);
    color: var(--signal);
}

.pref-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    color: var(--fog);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 2px;
    cursor: pointer;
}

.pref-advanced-toggle:hover {
    color: var(--signal);
}

.pref-advanced-chevron {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.pref-advanced-toggle.expanded .pref-advanced-chevron {
    transform: rotate(180deg);
}

.weather-pref-advanced {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}

.pref-slider-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fog);
}

.pref-slider-label span {
    color: var(--paper);
    font-weight: 700;
}

.pref-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    outline: none;
    margin: 2px 0;
    cursor: pointer;
}

.pref-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--panel);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.pref-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--panel);
    cursor: pointer;
}

/* --- ORS API ključ --- */
.ors-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
}

.ors-key-row .point-input {
    font-size: 12.5px;
}

.ors-key-hint {
    margin: 8px 0 0 0;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--fog-dim);
}

.ors-key-hint a {
    color: var(--signal);
    text-decoration: none;
}

.ors-key-hint a:hover {
    text-decoration: underline;
}

#orsKeyCard.key-saved {
    border-color: var(--mint);
}

/* --- Gumb za traženje ruta --- */
.planning-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    border: none;
    background: var(--signal);
    color: #0c1f22;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background 0.15s ease, opacity 0.15s ease;
}

.planning-search-btn:hover:not(:disabled) {
    background: #63c4d1;
}

.planning-search-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.planning-search-btn.loading i {
    animation: search-spin 0.8s linear infinite;
}

/* Sken termina - sporedna radnja uz "Traži rute", pa je obrisni (outline) gumb */
.planning-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--signal);
    background: transparent;
    color: var(--signal);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.planning-scan-btn:hover:not(:disabled) {
    background: var(--signal-dim);
}

.planning-scan-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--line);
    color: var(--fog-dim);
}

.planning-scan-btn.loading i {
    animation: search-spin 0.8s linear infinite;
}

/* ============ Toplinska karta termina polaska ============ */
.departure-scan {
    padding: 12px 14px;
}

.scan-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.scan-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fog-dim);
}

.scan-title i { margin-right: 5px; }

.scan-best {
    font-size: 12px;
    font-weight: 700;
    color: var(--signal);
}

.scan-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Na uskom ekranu 24 stupca ne stanu - kliže vodoravno umjesto da se stisnu u nečitljivo */
    overflow-x: auto;
    padding-bottom: 4px;
}

.scan-row {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: max-content;
}

.scan-daylabel {
    flex: 0 0 62px;
    font-size: 10px;
    color: var(--fog);
    white-space: nowrap;
}

.scan-daylabel b {
    color: var(--paper);
    font-size: 10.5px;
}

.scan-hourlabel {
    flex: 0 0 18px;
    font-size: 8.5px;
    color: var(--fog-dim);
    text-align: center;
}

.scan-cell {
    flex: 0 0 18px;
    height: 17px;
    border-radius: 3px;
    background: var(--line-soft);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.scan-cell:hover {
    transform: scale(1.25);
    box-shadow: 0 0 0 1px var(--paper);
    z-index: 1;
}

/* Ljestvica: od slabog (koraljno) preko srednjeg (jantar) do odličnog (mint).
   Iste boje koje sustav već koristi za "loše/srednje/dobro" drugdje. */
.scan-cell.s1 { background: var(--coral); }
.scan-cell.s2 { background: color-mix(in srgb, var(--coral) 55%, var(--amber)); }
.scan-cell.s3 { background: var(--amber); }
.scan-cell.s4 { background: color-mix(in srgb, var(--mint) 55%, var(--amber)); }
.scan-cell.s5 { background: var(--mint); }

.scan-cell.past {
    background: transparent;
    cursor: default;
}

.scan-cell.na {
    background: repeating-linear-gradient(45deg, var(--line-soft) 0 3px, transparent 3px 6px);
    cursor: default;
}

/* Kosa crta preko ćelije = tura bi završila po mraku. Ocjena se time NE mijenja -
   noćni završetak nije nužno loš (alpski start), pa je to napomena, a ne kazna.
   Namjerno je diskretna: kod tura od nekoliko sati zahvati velik dio popodnevnih termina, pa bi
   jaka šrafura nadglasala boju - a boja je glavni signal. */
.scan-cell.dark-finish {
    position: relative;
    background-image: linear-gradient(135deg, transparent 47%, rgba(0, 0, 0, 0.22) 47%, rgba(0, 0, 0, 0.22) 53%, transparent 53%);
}

/* Cijela tura po mraku - gušća šrafura od one za "samo završava po mraku",
   jer je to bitno drukčija situacija (nema nijednog dnevnog dijela ture). */
.scan-cell.fully-dark {
    background-image: repeating-linear-gradient(135deg,
        transparent 0 3px, rgba(0, 0, 0, 0.3) 3px 5px);
}

.scan-cell.best {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--signal);
}

.scan-cell.picked {
    box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--paper);
}

.scan-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 9px;
    font-size: 10px;
    color: var(--fog-dim);
}

.scan-legend-scale {
    display: inline-flex;
    gap: 2px;
}

.scan-legend .scan-cell {
    flex: 0 0 14px;
    height: 13px;
    cursor: default;
}

.scan-legend .scan-cell:hover { transform: none; box-shadow: none; }

.scan-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.planning-status {
    min-height: 16px;
    font-size: 12px;
    color: var(--fog);
    text-align: center;
    padding: 2px 4px;
}

.planning-status.is-error {
    color: var(--coral);
}

.planning-status.is-ok {
    color: var(--mint);
}

/* --- Karta za planiranje + rezultati --- */
.planningMapCol {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.planningMap {
    height: 380px;
    width: 100%;
    cursor: crosshair;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
    background: var(--panel);
}

.route-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.route-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.route-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-soft);
}

.route-card.selected {
    border-color: var(--signal);
    box-shadow: 0 0 0 1px var(--signal), var(--shadow-panel);
}

.route-card-swatch {
    flex: 0 0 auto;
    width: 6px;
    align-self: stretch;
    border-radius: 999px;
}

.route-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.route-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.route-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--paper);
}

.route-card-badge {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0c1f22;
    background: var(--mint);
    padding: 2px 8px;
    border-radius: 999px;
}

.route-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: var(--fog);
}

.route-card-stats i {
    color: var(--fog-dim);
    margin-right: 3px;
}

/* Oznaka da je trajanje preračunato na odabrani tempo, a ne ORS-ova zadana procjena */
.route-card-pace {
    color: var(--signal);
    font-weight: 600;
}

.route-card-pace i {
    color: var(--signal) !important;
}

/* Rastavljanje ukupnog "match" rezultata na doprinose (vrijeme / kvaliteta rute) */
.route-card-breakdown {
    font-size: 9.5px;
    color: var(--fog-dim);
    letter-spacing: 0.02em;
}

.route-card-score {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--line);
    font-weight: 700;
}

.route-card-score-value {
    font-size: 15px;
    color: var(--paper);
    line-height: 1;
}

.route-card-score-label {
    font-size: 7px;
    color: var(--fog-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 1px;
}

.route-card-score.score-good { border-color: var(--mint); }
.route-card-score.score-mid { border-color: var(--amber); }
.route-card-score.score-bad { border-color: var(--coral); }

/* --- Leaflet popup na ruti (klik na liniju) --- */
.route-popup-btn {
    background: var(--signal);
    color: #0c1f22;
    border: none;
    font-family: var(--font);
    font-weight: 600;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* --- Vrijeme duž rute (traka nakon odabira rute) --- */
.route-weather-detail {
    margin-top: 4px;
}

.route-weather-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px 2px;
}

.route-weather-item {
    position: relative;
    flex: 0 0 auto;
    min-width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 8px;
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--paper);
    cursor: default;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Kartica se istakne kad se pređe mišem preko ODGOVARAJUĆEG markera na karti (i obrnuto - vidi
   .route-sample-marker-active niže) - dvosmjerna veza "gdje je ova meteo-točka na ruti". */
.route-weather-item.marker-highlight {
    border-color: var(--signal);
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}

.route-weather-item-index {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #0c1f22;
    box-shadow: 0 0 0 2px var(--panel-raised);
}

.route-weather-item-time {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fog-dim);
}

.route-weather-item-dist {
    font-size: 9px;
    color: var(--fog-dim);
    margin-bottom: 3px;
}

.route-weather-item-temp {
    font-size: 15px;
    font-weight: 700;
    color: var(--paper);
    margin-top: 2px;
}

.route-weather-item-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
    font-size: 9.5px;
    color: var(--fog);
}

.route-weather-item.weather-flag .route-weather-item-temp {
    color: var(--coral);
}

/* --- Leaflet marker za start/end točke --- */
.plan-point-marker {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* --- Numerirani markeri na karti - TOČNO mjesto svake meteo-točke iz trake "vrijeme duž rute" --- */
.route-sample-marker-wrap {
    background: transparent !important;
    border: none !important;
}

.route-sample-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #0c1f22;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--panel), var(--shadow-soft);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Isticanje markera kad se pređe mišem preko odgovarajuće kartice u traci ispod (obrnuti smjer
   od .marker-highlight iznad) - i klikom na sam marker (highlightStripItem u weatherPlanning.js). */
.route-sample-marker-wrap.route-sample-marker-active .route-sample-marker {
    transform: scale(1.35);
    box-shadow: 0 0 0 3px var(--signal), var(--shadow-panel);
}

@media (max-width: 991px) {
    /* KARTA IDE PRVA NA MOBITELU.
       Izmjereno na emuliranom telefonu (390x844): s redoslijedom kao na širokom ekranu karta se
       nacrta tek 1131 px ispod vrha stranice - dakle skroz izvan zaslona, iza cijelog stupca
       postavki (aktivnost, ruta, polazak, brzina, željeno vrijeme). Karta je pritom RADILA
       (Leaflet spremnik, popločenje, ispravna veličina 366x320), ali je korisnik nikad nije vidio.
       Uz to na vrhu piše "Klikni na kartu za početnu točku" - a karte na zaslonu nema, pa se ne
       može zadati ni početna točka i cijeli tab naizgled "stoji".
       Bootstrapov redak je flex spremnik, pa je dovoljno preokrenuti redoslijed: karta gore,
       postavke ispod nje - što je i prirodan slijed rada (prvo klikneš točke, pa podesiš detalje). */
    .planningMapCol {
        order: -1;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .planningControls {
        order: 1;
    }

    .planningControls {
        max-height: none;
        overflow-y: visible;
    }

    .planningMap {
        height: 320px;
    }
}

@media (max-width: 480px) {
    .mode-toggle {
        flex-direction: column;
    }

    .route-card {
        flex-wrap: wrap;
    }

    .route-card-score {
        margin-left: auto;
    }
}
/* --- Sunce / trajanje dana / mjesec: jedan tanki redak ispod karte ---
   Prije su to bile dvije trećine "hero" kartice u desnom panelu. Na mobitelu su trošile ~120 px
   iznad prognoze za podatak koji se gleda rijetko. Ovdje je isti sadržaj u jednom retku (~25 px),
   ispod karte i uz traku oborine - dakle uz ostale "kontekstualne" podatke, a ne ispred prognoze. */
.sky-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--fog);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.sky-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sky-duration {
    font-weight: 600;
    color: var(--paper);
}

.sky-dash { opacity: 0.6; }
.sky-dim { opacity: 0.75; }

/* Klimatski kontekst uz trenutnu temperaturu */
.hero-climate {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--fog);
}

.hero-climate.is-above { color: var(--coral); }
.hero-climate.is-below { color: var(--signal); }

@media (max-width: 767px) {
    .sky-strip {
        font-size: 11.5px;
        gap: 4px 12px;
    }
}

/* --- "Uskoro": desna polovica kartice Trenutno --- */
#meteo-top { order: 0; }      /* trenutno vrijeme + dnevne vrijednosti idu PRVI */
#meteo-bottom { order: 1; }   /* traka prognoze po danima ide ispod njih */

.hero-upcoming {
    flex: 1 1 46%;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.upcoming-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fog);
    margin-bottom: 2px;
}

.upcoming-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12.5px;
    color: var(--paper);
}

.upcoming-icon { flex: 0 0 auto; }
.upcoming-text { flex: 1 1 auto; }

.upcoming-when {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--fog);
    white-space: nowrap;
}

.upcoming-calm {
    font-size: 12.5px;
    color: var(--fog);
}

@media (max-width: 767px) {
    .hero-upcoming { flex-basis: 100%; }
}

/* Podrijetlo klimatske normale - sitnije i prigušeno, u istom retku */
.hero-climate-src {
    font-size: 10.5px;
    /* Prije je bila FIKSNA siva (var(--fog)) bez obzira boji li se glavni tekst crveno/tirkizno
       (is-above/is-below) - ispalo je kao dva nespojena komada teksta. Sad nasljeđuje boju
       roditelja pa je cijeli redak jedna cjelina; opacity je i dalje niži da ostane vidljivo
       sporedna, samo bez sudara boja. */
    color: inherit;
    opacity: 0.75;
    white-space: normal;
}

/* --- Preseljeni dijelovi (traka oborine i METAR u karticu "Trenutno", klima ispod karte) --- */

/* Traka oborine zauzima punu širinu ispod obje polovice kartice */
.weather-hero .hero-main {
    flex: 1 1 46%;
    min-width: 190px;
}

.weather-hero .hero-nowcast {
    flex: 1 1 100%;
    min-width: 0;
    margin-top: 6px;
    /* Traka ima vlastiti okvir kad stoji ispod karte; unutar kartice bi to bio okvir u okviru. */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 0 0 0;
    border-top: 1px solid var(--line);
}

.weather-hero .hero-metar {
    flex: 1 1 100%;
    min-width: 0;
    margin-top: 4px;
}

/* Klimatski redak ispod karte - centriran, u istom tonu kao traka sunca/mjeseca */
.climate-note {
    margin-top: 6px;
    padding: 6px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--fog);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);   /* klima = topla boja, isti jezik kao naslovi desno */
    border-radius: var(--radius-lg);
}

.climate-note:empty { display: none; }
.climate-note.is-above { color: var(--coral); }
.climate-note.is-below { color: var(--signal); }

/* ================= VIZUALNI JEZIK SEKCIJA =================
   Tri cjeline desnog stupca dobivaju vlastitu boju naglaska: trenutno stanje, dnevne vrijednosti,
   prognoza. Naglasak je tanka crta uz naslov i lijevi rub kartice - dovoljno da se cjeline razlikuju
   na prvi pogled, premalo da se natječe s podacima.
   Boje su iste one iz palete grafova, pa stranica ostaje jedan sustav. */

.stat-section-caption {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 2px 5px 2px;     /* zraka iznad naslova - prije su naslovi "sjedili" na karticama */
    text-align: left;
}

.stat-section-caption::before {
    content: '';
    flex: 0 0 auto;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--fog-dim);
}

/* Naslov unutar #meteo-bottom nasljeđuje text-align:center od roditelja - vraćamo ga ulijevo,
   da stoji jednako kao "Dnevne vrijednosti za danas". */
#meteo-bottom { text-align: center; }
#meteo-bottom .stat-section-caption { text-align: left; }

/* Trenutno stanje */
.weather-hero { border-left: 3px solid var(--signal); }

/* Dnevne vrijednosti: svaka kartica dobiva crtu u boji VLASTITE ikone, ne jednu zajedničku.
   Jedinstvena zelena crta preko svih kartica tukla se s njihovim raznobojnim ikonama; ovako
   crta i ikona govore isto. */
.stat-section-caption.caption-daily::before { background: var(--mint); }
.stat-card-grid .stat-card { border-top: 2px solid var(--fog-dim); }
.stat-card-temp      { border-top-color: var(--coral); }
.stat-card-precip    { border-top-color: var(--signal); }
.stat-card-wind      { border-top-color: var(--mint); }
.stat-card-pressure  { border-top-color: var(--violet); }
.stat-card-humidity  { border-top-color: #6bc4cf; }
.stat-card-direction { border-top-color: var(--fog); }

/* Prognoza */
.stat-section-caption.caption-forecast::before { background: var(--amber); }
.forecast-scroll .weather-forecast-item { border-top: 2px solid var(--amber); }

/* ================= KAMO ZA VIKEND ================= */
.weekend-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}

.wk-range {
    margin: 10px 2px 0 2px;
    font-size: 12.5px;
    color: var(--fog);
}

.wk-prefs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* IZMJERENO: bez gornje margine red gumba je dodirivao prebacivač iznad (razmak 0 px) i
       cjeline su se vizualno slijevale u jednu. */
    margin: 10px 0 12px 0;
}

.pref-chip {
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--fog);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pref-chip.active {
    background: var(--signal);
    border-color: var(--signal);
    color: #06202b;
    font-weight: 600;
}

.weekend-results { margin-top: 4px; }

.wk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Kartica odredišta: rang, ime i razlog, ocjena. Boja lijevog ruba nosi ocjenu - ista ljestvica
   kao u toplinskoj karti termina polaska, da se dva alata čitaju na isti način. */
.wk-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--fog-dim);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wk-card:hover {
    transform: translateX(2px);
    box-shadow: var(--shadow-soft);
}

.wk-card.wk-s1 { border-left-color: var(--mint); }
.wk-card.wk-s2 { border-left-color: #8cc98f; }
.wk-card.wk-s3 { border-left-color: var(--amber); }
.wk-card.wk-s4 { border-left-color: #d99a6c; }
.wk-card.wk-s5 { border-left-color: var(--coral); }

.wk-rank {
    flex: 0 0 auto;
    width: 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fog-dim);
    text-align: center;
}

.wk-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wk-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--paper);
}

.wk-type {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fog-dim);
}

.wk-reasons {
    font-size: 12.5px;
    color: var(--fog);
}

.wk-score {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 700;
    color: var(--paper);
}

.wk-note {
    margin: 10px 2px 0 2px;
    font-size: 11.5px;
    color: var(--fog-dim);
}

.wk-empty {
    padding: 16px;
    text-align: center;
    color: var(--fog);
    font-size: 13px;
}

.wk-dist {
    font-size: 11.5px;
    color: var(--fog-dim);
}

/* ================= PLANINARENJE ================= */
.hike-select {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--paper);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.hike-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.hike-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--fog-dim);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.hike-item:hover { box-shadow: var(--shadow-soft); }

.hike-item.is-selected {
    border-left-color: var(--amber);
    background: var(--panel-raised);
}

.hike-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--paper);
}

.hike-meta {
    font-size: 11.5px;
    color: var(--fog);
}
/* ==========================================================================
   BIOKLIMATSKA OCJENA DANA  (vidi computeBiometeoDay u indexx.js)

   Tri razine, tri boje. Zelena NIJE "dobra vijest" nego "nema opterećenja" -
   zato je prigušena, a ne naglašena: dan bez upozorenja ne treba privlačiti
   pogled jednako kao dan s njim.
   ========================================================================== */

.bio-badge small {
    opacity: .75;
    font-weight: 500;
    margin-left: 5px;
}

.live-index-badge.bio-povoljno {
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    color: var(--fog);
}

.live-index-badge.bio-granicno {
    background: color-mix(in srgb, var(--coral) 16%, transparent);
    color: var(--paper);
}

.live-index-badge.bio-nepovoljno {
    background: color-mix(in srgb, var(--coral) 30%, transparent);
    color: var(--paper);
    font-weight: 700;
}

.bio-detalj {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 10px);
    border-left: 3px solid var(--fog-dim);
    background: color-mix(in srgb, var(--paper) 4%, transparent);
}

.bio-detalj.bio-povoljno { border-left-color: var(--signal); }
.bio-detalj.bio-granicno { border-left-color: var(--coral); }
.bio-detalj.bio-nepovoljno {
    border-left-color: var(--coral);
    background: color-mix(in srgb, var(--coral) 10%, transparent);
}

.bio-detalj-glavno {
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--paper);
}

.bio-detalj-ikona { margin-right: 5px; }

/* Ograda je manja od ocjene, ali NE toliko da se ne čita - ona mijenja koliko
   se iz brojke iznad smije zaključiti. */
.bio-detalj-ograda {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--fog-dim);
}

/* ================= OBORINA U KLIMATSKOM KONTEKSTU =================
   "7,5 mm" bez usporedbe nije podatak nego brojka. Tri mjesta govore istu stvar u tri veličine:
   sitna oznaka na kartici dana, rečenica u otvorenom danu, i redak u traci ispod karte.
   ================================================================== */

/* Udio u mjesečnom prosjeku, uz oborinu na kartici dana. Ista veličina kao broj sati kiše
   (.overview-stat small), ali odvojena tankom crtom da se dvije male brojke ne slijepe u jednu. */
.overview-rain-vs {
    padding-left: 5px;
    border-left: 1px solid var(--line);
    color: var(--fog-dim);
}

/* Na najužim ekranima redak s oborinom i vjetrom već je pun - postotak je najmanje važan
   od troje, pa on ide prvi. */
@media (max-width: 359px) {
    .overview-rain-vs { display: none; }
}

/* Objašnjenje u otvorenom danu - isti okvir kao bioklimatski detalj, druga boja ruba
   (kiša = signal, isti jezik kao .overview-stat-rain). */
.oborina-kontekst {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md, 10px);
    border-left: 3px solid var(--signal);
    background: color-mix(in srgb, var(--paper) 4%, transparent);
}

.oborina-kontekst-glavno {
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--paper);
}

.oborina-kontekst-usporedba {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--paper);
    opacity: 0.9;
}

.oborina-kontekst-izvor {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--fog-dim);
}

/* Oborinski redak u traci ispod karte. Blok, a ne nastavak rečenice o temperaturi: to su dvije
   različite veličine i spojene u jedan redak čitaju se kao jedna tvrdnja.
   Boju NE mijenja (nema is-above/is-below): traka se već boji prema temperaturi, pa bi drugi
   obojeni redak unutar nje značio da se dvije stvari natječu za isto značenje. */
.climate-note-precip {
    display: block;
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--fog);
}

/* ============================================================================
   DODATI NA KRAJ styles.css  (ne zamjenjivati datoteku - tvoja je novija od moje)

   Radar prigovara modelu: naslov panela oborine prestaje biti tvrdnja i postaje
   neslaganje dvaju izvora. Izgled je namjerno PRIGUŠEN, ne alarmantan - ništa se
   ne najavljuje, samo se odustaje od sigurnosti.
   ============================================================================ */

/* Neslaganje nije "radar vidi kišu" - zato ne nasljeđuje naglasak od .is-radar-led.
   Lijevi rub ide u neutralnu boju: dvije tvrdnje jedna protiv druge nisu upozorenje. */
.precip-nowcast.is-radar-veto {
    border-left-color: var(--fog-dim);
}

/* Ograda ("radar prati samo pomak postojeće oborine...") mora se pročitati, ali ne smije
   se natjecati s naslovom - ona objašnjava zašto radar MOŽDA griješi. */
.precip-nowcast.is-radar-veto .precip-nowcast-radar-note {
    color: var(--fog-dim);
    font-style: normal;
    opacity: 0.9;
}

/* Modelski stupci koje radar ne potvrđuje. Vrijednost se NE mijenja - samo se vidi da nije
   potvrđena, inače bi traka crtala punu kišu ispod naslova koji kaže da je radar ne vidi.
   Isprekidan obrub, a ne samo blijeda boja: razlika u prozirnosti na stupcu visokom 26 px
   jedva se razaznaje, a na crno-bijelom ispisu nestaje posve. */
.nowcast-bar.unconfirmed .nowcast-bar-fill {
    opacity: 0.42;
    border: 1px dashed var(--fog);
    border-bottom: 0;
    box-sizing: border-box;
}
/* ================================================================
   TABOVI — preinaka (rujan 2026.)
   Prije: pilula s pozadinom i punim zaobljenjem (border-radius 999px) oko
   svih tabova. Kad se tabovi prelome u dva reda, "pilula" postane
   napuhani oblak, a na mobitelu je trake bilo pola ekrana.
   Sada: jedan red bez okvira, tanka crta ispod, aktivni tab ima crtu
   u boji ispod sebe. Ako ne stane, traka se vodoravno pomice (s
   blijedim rubom kao znakom da ima jos), a na mobitelu idu kratki nazivi.
   ================================================================ */
.tab-kratko { display: none; }

.raddar-tabs {
    flex-wrap: nowrap;
    gap: 2px;
    width: auto;
    max-width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.raddar-tabs::-webkit-scrollbar { display: none; }
.raddar-tabs .nav-item { flex: none; scroll-snap-align: center; }

.raddar-tab-btn {
    position: relative;
    padding: 11px 14px 12px;
    border-radius: 10px 10px 0 0;
    font-weight: 500;
}
.raddar-tab-btn:hover { background: color-mix(in srgb, var(--paper) 4%, transparent); }
.raddar-tab-btn.active {
    background: none;
    box-shadow: none;
    font-weight: 600;
}
.raddar-tab-btn::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--signal);
    transform: scaleX(0);
    transition: transform .25s var(--ease);
}
.raddar-tab-btn.active::after { transform: scaleX(1); }

/* blijedi rub = ima jos tabova u tom smjeru (klase postavlja skripta u index.html) */
.raddar-tabs.ima-desno { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.raddar-tabs.ima-lijevo { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.raddar-tabs.ima-lijevo.ima-desno {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

@media (max-width: 768px) {
    .tab-dugo { display: none; }
    .tab-kratko { display: inline; }
    .raddar-tabs-row {
        position: sticky;
        top: 0;
        z-index: 1020;
        margin-top: 2px;
        background: var(--ink);
    }
    .raddar-tabs-row > .container-fluid { padding-inline: 6px; }
    .raddar-tab-btn { gap: 6px; padding: 10px 11px 11px; font-size: 13px; }
    .raddar-tab-btn i { font-size: 12px; }
    .raddar-tab-btn::after { left: 9px; right: 9px; }
}

/* Zaglavlje na mobitelu: izbornik (hamburger) otvara PRAZAN popis - trazilica
   u njemu je zakomentirana - pa samo trosi red. Bez njega naslov, Podijeli i
   prekidac teme stanu u jedan red. Kad se u izbornik vrati sadrzaj, ovo
   pravilo treba maknuti. */
@media (max-width: 991.98px) {
    .navbar .navbar-toggler { display: none; }
    .navbar > .container-fluid { flex-wrap: nowrap; gap: 8px; }
    .navbar-brand { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 420px) {
    .navbar-brand { font-size: 17px; }
}

/* ================================================================
   KOMPAKTNA KARTA NA MOBITELU + "PROŠIRI" (listopad 2026.)
   Isti pristup kao karte u tabovima Solar (220-250 px) i Zrak (240 px): karta je okvir za
   snalaženje, a ne cijeli ekran. Ovdje je malo viša jer nosi više kontrola (tražilica, tri
   sloja, vremenska crta radara). Kad korisnik želi gledati radar, gumb ⤢ je otvara preko
   cijelog ekrana; ✕, tipka Esc ili "natrag" na Androidu je vraćaju.
   Visina u svh (vidljivi dio ekrana bez trake preglednika), s vh kao rezervom.
   ================================================================ */
@media (max-width: 991px) {
    #weatherMap {
        flex: 0 0 auto;
        height: clamp(300px, 50vh, 440px);
        height: clamp(300px, 50svh, 440px);
    }
    .DailyWeather { scroll-margin-top: 58px; }   /* ispod ljepljivog retka tabova */
}

@media (max-width: 767px) {
    #weatherMap {
        height: clamp(250px, 40vh, 320px);
        height: clamp(250px, 40svh, 320px);
    }

    .weatherMapContainer .location-box {
        font-size: 13px;
        padding: 7px 12px;
        margin-top: 4px;
        margin-bottom: 8px;
    }

    /* Slojevi: niži gumbi, manji razmak - tri gumba stanu u ~100 px umjesto ~170 px */
    #weatherMap .leaflet-top.leaflet-right .leaflet-control,
    #weatherMap .leaflet-top.leaflet-right .wind-toggle-wrap { margin-top: 6px; margin-right: 8px; }
    #weatherMap .wind-toggle-wrap .leaflet-control { margin: 0; }
    #weatherMap .leaflet-control-custom {
        padding: 5px 9px;
        font-size: 12px;
        margin-bottom: 0;
    }
    #weatherMap .leaflet-top.leaflet-left .leaflet-control { margin-top: 8px; margin-left: 8px; }

    /* +/- je na dodirnom ekranu suvišan (zumira se s dva prsta), a jede mjesto ispod tražilice.
       Na mjesto mu dolazi gumb za proširenje. Uređaji s mišem (uski prozor na laptopu) ga zadrže. */
    @media (pointer: coarse) {
        #weatherMap .leaflet-control-zoom { display: none; }
    }

    /* Vremenska crta radara/vjetra: niža, da ne pojede donju trećinu male karte */
    #weatherMap .radar-timeline,
    #weatherMap .wind-timeline {
        padding: 6px 10px;
        gap: 8px;
        width: 232px;
        margin: 0 0 6px 6px;
    }
    #weatherMap .radar-play-btn,
    #weatherMap .wind-play-btn { width: 26px; height: 26px; }
    #weatherMap .radar-timeline-top,
    #weatherMap .wind-timeline-top { margin-bottom: 2px; }
}

/* Gumb za proširenje - samo kad je karta kompaktna */
.map-expand-btn {
    display: none;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--panel-raised);
    color: var(--paper);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}
.map-expand-btn:hover { border-color: var(--signal); }
@media (max-width: 991px) {
    .map-expand-btn { display: inline-flex; }
}

/* Prošireno: karta preko cijelog ekrana. z-index ide na STUPAC jer on (position:relative;
   z-index:1) stvara vlastiti kontekst slaganja - inače bi ljepljivi red tabova (1020) ostao iznad. */
.weatherMapContainer.map-expanded { z-index: 1100; }
.weatherMapContainer.map-expanded #weatherMap {
    position: fixed !important;   /* Leaflet kontejneru stavlja inline position:relative */
    inset: 0;
    z-index: 2;                   /* iznad trake sunca/mjeseca (njeni dijelovi s opacity su zaseban sloj) */
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    margin: 0;
}
.weatherMapContainer.map-expanded .map-expand-btn {
    background: var(--signal);
    color: #0c1f22;
    border-color: var(--signal);
}
/* u proširenom prikazu tražilica i gumbi dobiju malo zraka od ruba/izreza ekrana */
.weatherMapContainer.map-expanded .leaflet-top { top: env(safe-area-inset-top, 0px); }
html.rd-map-expanded, html.rd-map-expanded body { overflow: hidden; }

/* Rezervirano mjesto dok je karta "izvađena" iz toka - da se stranica ispod ne pomakne */
.weatherMapContainer.map-expanded::before {
    content: '';
    display: block;
    order: 1;
    height: var(--rd-map-h, 300px);
}
.weatherMapContainer .location-box { order: 0; }
#weatherMap { order: 1; }
.weatherMapContainer .sky-strip, .weatherMapContainer .climate-note { order: 2; }