/**
 * VM Forecast — Zaseban CSS za forecast stranice
 * Učitava se SAMO na /vremenska-prognoza-{slug}/ stranicama
 * @version 3.0 — modern redesign (tokeni, halo ikonice 42px, segmented toggles, AQI 5 zona)
 */

/* ==========================================================================
   DIZAJN TOKENI (v3.0)
   Theme-neutralni (spacing/radius/shadow/accent) — rade u light i dark.
   ========================================================================== */
:root {
    --vm-fc-space-1: 4px;
    --vm-fc-space-2: 8px;
    --vm-fc-space-3: 12px;
    --vm-fc-space-4: 16px;
    --vm-fc-space-5: 24px;
    --vm-fc-space-6: 32px;
    --vm-fc-radius-lg: 16px;
    --vm-fc-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --vm-fc-shadow-md: 0 4px 14px rgba(0,0,0,0.08);
    --vm-fc-shadow-lg: 0 10px 28px rgba(0,0,0,0.12);
    --vm-fc-accent: linear-gradient(135deg, #3b82f6, #6366f1);
    --vm-fc-accent-from: #3b82f6;
    --vm-fc-accent-to: #6366f1;
    --vm-fc-halo: radial-gradient(circle, rgba(135,206,250,0.20) 38%, transparent 70%);
    /* Chip podloga za ikone u meteogram traci — dovoljno tonirana da nosi bele "fill" oblake */
    --vm-fc-chip-bg: radial-gradient(circle, rgba(96,150,210,0.22) 40%, rgba(96,150,210,0.10) 100%);
    --vm-fc-chip-border: rgba(100,116,139,0.25);
}
[data-theme="dark"] {
    --vm-fc-shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --vm-fc-shadow-md: 0 4px 14px rgba(0,0,0,0.45);
    --vm-fc-shadow-lg: 0 10px 28px rgba(0,0,0,0.55);
    --vm-fc-halo: radial-gradient(circle, rgba(125,211,252,0.16) 38%, transparent 70%);
    --vm-fc-chip-bg: radial-gradient(circle, rgba(125,211,252,0.16) 40%, rgba(125,211,252,0.07) 100%);
    --vm-fc-chip-border: rgba(148,163,184,0.30);
}

/* ==========================================================================
   SEARCH (Autocomplete)
   ========================================================================== */

/* Chart icon strip + wind arrow strip — responsive overflow fix */
.vm-forecast-chart-icons,
.vm-forecast-wind-arrows {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
/* Icon strip = pozicioni kontekst fiksne visine (CLS); chip-ove JS poravnava
   tacno iznad njihovih tacaka na x-osi (positionChartIcons). */
.vm-forecast-chart-icons__row {
    position: relative;
    height: 100%;
}
.vm-forecast-chart-icons__chip {
    position: absolute;
    top: 50%;
    left: -100px; /* off-screen dok JS ne pozicionira */
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vm-fc-chip-bg);
    border: 1px solid var(--vm-fc-chip-border);
    box-shadow: var(--vm-fc-shadow-sm);
}
.vm-forecast-chart-icons__chip img {
    width: 40px;
    height: 40px;
    display: block;
}
.vm-forecast-wind-arrows__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
    padding: 4px 0;
}
.vm-forecast-wind-arrows__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}
.vm-forecast-wind-arrows__item svg {
    flex-shrink: 1;
}
.vm-forecast-wind-arrows__label {
    font-size: 0.65rem;
    color: var(--vm-text-muted, #64748b);
    margin-top: 1px;
    white-space: nowrap;
}

/* CLS Prevention — layout containment + min-height reservations */
.vm-forecast-dashboard { contain: layout style; }
#vm-forecast-table { min-height: 400px; }
.vm-forecast-aqi { min-height: 320px; }

/* Title + Intro */
.vm-forecast-title { font-size: 2.0rem; font-weight: 800; line-height: 1.25; margin-bottom: 1rem; }
.vm-forecast-intro { font-size: 0.95rem; line-height: 1.65; color: var(--vm-text-secondary, #475569); margin-bottom: 1.5rem; }
.vm-forecast-intro p { margin-bottom: 0.75rem; }
.vm-forecast-intro a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.vm-forecast-intro a:hover { color: #1d4ed8; }

@media (max-width: 768px) {
    .vm-forecast-title { font-size: 1.6rem; }
    .vm-forecast-intro { font-size: 0.88rem; }
}

/* Search wrapper IS the visual input — border/bg on wrapper, input is transparent.
   This avoids Blocksy padding override entirely (input has no padding-left for icon). */
.vm-forecast-search {
    display: flex;
    align-items: center;
    max-width: 620px;
    margin: 0 auto 2rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 2px solid var(--vm-border-color, #cbd5e1);
    border-radius: 50px;
    padding: 0 4px 0 16px;
    height: 49px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative; /* needed for dropdown absolute positioning */
}

.vm-forecast-search:focus-within {
    border-color: #3b82f6;
    background: var(--vm-card-bg, #fff);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.vm-forecast-search__input {
    flex: 1;
    padding: 0 12px 0 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0.95rem;
    height: 100%;
    box-sizing: border-box;
    color: var(--vm-text-primary, #0f172a);
    outline: none !important;
    box-shadow: none !important;
    min-width: 0;
}

.vm-forecast-search__input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.vm-forecast-search__icon {
    width: 20px;
    height: 20px;
    color: var(--vm-text-muted, #64748b);
    flex-shrink: 0;
    margin-right: 10px;
}

.vm-forecast-search__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-top: none;
    border-radius: 0 0 var(--vm-radius, 12px) var(--vm-radius, 12px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 50;
    max-height: 360px;
    overflow-y: auto;
    display: none;
}

.vm-forecast-search__dropdown--visible {
    display: block;
}

.vm-forecast-search__item {
    display: block;
    padding: 0.75rem 1.15rem;
    text-decoration: none;
    color: var(--vm-text-primary, #0f172a);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--vm-border-color, #cbd5e1);
    transition: background 0.1s;
}

.vm-forecast-search__item:last-child {
    border-bottom: none;
}

.vm-forecast-search__item:hover,
.vm-forecast-search__item--active {
    background: rgba(59,130,246,0.06);
    color: #2563eb;
}

.vm-forecast-search__item-region {
    float: right;
    font-size: 0.8rem;
    color: var(--vm-text-muted, #64748b);
}

.vm-forecast-all-link {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    color: var(--vm-text-muted, #64748b);
    text-decoration: none;
    margin-top: 0.25rem;
    transition: color 0.15s;
}
.vm-forecast-all-link:hover { color: #2563eb; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.vm-forecast-section {
    margin-top: 3rem;
}

.vm-forecast-section:first-of-type {
    margin-top: 1.5rem;
}

.vm-forecast-section__title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 1.4rem;
    padding-bottom: 0.65rem;
    position: relative;
    letter-spacing: -0.015em;
}
.vm-forecast-section__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--vm-fc-accent);
}

/* ==========================================================================
   HERO — trenutno vreme (danas), weather-adaptive
   ========================================================================== */
.vm-forecast-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem;
    border-radius: var(--vm-fc-radius-lg, 16px);
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: var(--vm-fc-shadow-md);
    position: relative;
    overflow: hidden;
    min-height: 370px; /* izmerena rendered visina (v3.3) — CLS reserve */
    box-sizing: border-box;
}
/* Prazan hero = vidljiv gradient skeleton (CLS guard). NE display:none — to je
   izazivalo skok sadrzaja gore (async CSS) pa dole (JS paint). */
.vm-forecast-hero:empty { min-height: 370px; }
.vm-forecast-hero::after {
    content: '';
    position: absolute;
    right: -40px; top: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
    pointer-events: none;
}
.vm-forecast-hero__main { display: flex; align-items: center; gap: 1.1rem; position: relative; z-index: 1; }
.vm-forecast-hero__icon { width: 112px; height: 112px; flex-shrink: 0; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25)); }
.vm-forecast-hero__now { line-height: 1.05; }
.vm-forecast-hero__temp { font-size: 3.6rem; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vm-forecast-hero__label { font-size: 1.15rem; font-weight: 600; opacity: 0.96; margin-top: 2px; }
.vm-forecast-hero__place { font-size: 0.85rem; opacity: 0.82; margin-top: 5px; text-transform: capitalize; }
.vm-forecast-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 0.7rem 1.4rem;
    position: relative;
    z-index: 1;
}
.vm-forecast-hero__stat { display: flex; flex-direction: column; gap: 1px; }
.vm-forecast-hero__stat-label { font-size: 0.68rem; font-weight: 700; opacity: 0.82; text-transform: uppercase; letter-spacing: 0.4px; }
.vm-forecast-hero__stat-val { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
/* Hero meta — termin podataka + poslednje ažuriranje (preko cele širine, ispod) */
.vm-forecast-hero__meta {
    flex-basis: 100%;
    margin-top: 0.4rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.25);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.4rem;
    font-size: 0.78rem;
    opacity: 0.92;
    position: relative;
    z-index: 1;
}
.vm-forecast-hero__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.vm-forecast-hero__meta b { font-weight: 700; }
/* Weather-adaptive gradijenti */
.vm-forecast-hero--sunny  { background: linear-gradient(135deg, #f59e0b, #f97316 55%, #fb923c); }
.vm-forecast-hero--cloudy { background: linear-gradient(135deg, #64748b, #475569); }
.vm-forecast-hero--rainy  { background: linear-gradient(135deg, #3b82f6, #1d4ed8 60%, #1e3a8a); }
.vm-forecast-hero--stormy { background: linear-gradient(135deg, #818cf8, #4f46e5 55%, #3730a3); }
.vm-forecast-hero--snowy  { background: linear-gradient(135deg, #38bdf8, #0ea5e9 55%, #0369a1); }
.vm-forecast-hero--foggy  { background: linear-gradient(135deg, #94a3b8, #64748b); }
.vm-forecast-hero--sleet  { background: linear-gradient(135deg, #22d3ee, #0891b2); }

/* v3.3 — Sunrise -> sunset traka (zamenjuje tekstualni 'Sunce' stat) */
.vm-forecast-hero__sun { flex-basis: 100%; display: flex; align-items: center; gap: 0.7rem; position: relative; z-index: 1; }
.vm-forecast-hero__sun-time { font-size: 0.78rem; font-weight: 600; opacity: 0.92; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vm-forecast-hero__sun-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.22); }
.vm-forecast-hero__sun-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: rgba(255,255,255,0.6); }
.vm-forecast-hero__sun-dot { position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: #fbbf24; box-shadow: 0 0 8px 2px rgba(251,191,36,0.6); }

/* v3.3 — Narednih 6 sati strip */
.vm-forecast-hero__hours { flex-basis: 100%; display: flex; gap: 6px; position: relative; z-index: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.vm-forecast-hero__hours::-webkit-scrollbar { display: none; }
.vm-forecast-hero__hour { flex: 1 1 0; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; background: rgba(255,255,255,0.13); border-radius: 10px; }
.vm-forecast-hero__hour img { width: 34px; height: 34px; display: block; }
.vm-forecast-hero__hour-time { font-size: 0.7rem; font-weight: 700; opacity: 0.85; }
.vm-forecast-hero__hour-temp { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* v3.3 — UV pill (solid boje — citljivo na svakom gradijentu) */
.vm-forecast-hero__uv-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: #fff; }
.vm-forecast-hero__uv-pill--lo  { background: #15803d; }
.vm-forecast-hero__uv-pill--mod { background: #eab308; color: #422006; }
.vm-forecast-hero__uv-pill--hi  { background: #c2410c; }
.vm-forecast-hero__uv-pill--vhi { background: #b91c1c; }
.vm-forecast-hero__uv-pill--ext { background: #7e22ce; }

/* ==========================================================================
   DAILY CARDS — Vertikalna lista (Yr.no / AccuWeather stil)
   Svaki dan = horizontalni red u listi: Dan/Datum | Ikona | Opis | T/min/max | Padavine | Chevron
   ========================================================================== */

.vm-forecast-daily-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0 0.75rem;
    min-height: 900px; /* CLS prevencija — 10 redova × ~90px (veće ikone) */
}

.vm-forecast-day-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--vm-border-color, #e2e8f0);
    border-radius: var(--vm-radius, 12px);
    box-shadow: var(--vm-fc-shadow-sm);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.vm-forecast-day-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--vm-fc-shadow-md);
    border-color: var(--vm-fc-accent-from, #3b82f6);
}

.vm-forecast-day-card:hover .vm-forecast-day-card__chevron {
    transform: translateX(2px);
    color: #3b82f6;
}

.vm-forecast-day-card--today {
    border-color: #3b82f6;
    background: rgba(59,130,246,0.06);
    border-left: 3px solid #3b82f6;
    padding-left: calc(1rem - 2px);
}

/* Dan + datum — fiksna sirina */
.vm-forecast-day-card__day {
    flex: 0 0 96px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.vm-forecast-day-card__day-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-forecast-day-card__date {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--vm-text-muted, #64748b);
    margin-top: 1px;
}

/* Ikona sa radial-gradient halo za vidljivost (posebno cloudy.svg na svetloj pozadini) */
.vm-forecast-day-card__icon-wrap {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vm-fc-halo);
    border-radius: 50%;
}
.vm-forecast-day-card__icon {
    width: 60px;
    height: 60px;
    display: block;
}

/* Opis vremena (Pretežno sunčano, Oblačno, ...) — fleksibilna kolona */
.vm-forecast-day-card__label {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vm-text-secondary, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Temperatura Tmax / Tmin */
.vm-forecast-day-card__temps {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 1.05rem;
    white-space: nowrap;
}
.vm-forecast-day-card__tmax { color: #ef4444; font-weight: 700; }
.vm-forecast-day-card__tsep { color: var(--vm-text-muted, #94a3b8); font-weight: 400; }
.vm-forecast-day-card__tmin { color: #3b82f6; font-weight: 600; }

/* Tmin→Tmax mini-bar — pozicija dana u globalnom 10-dnevnom rasponu (desktop only) */
.vm-forecast-day-card__range {
    flex: 0 0 84px;
    height: 8px;
    border-radius: 999px;
    background: var(--vm-bg-tertiary, #e2e8f0);
    position: relative;
    overflow: hidden;
}
.vm-forecast-day-card__range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    min-width: 6px;
}

/* Vetar pill — prosečna brzina / max udar (m/s) */
.vm-forecast-day-card__wind {
    flex: 0 0 auto;
    min-width: 84px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: rgba(71,85,105,0.08);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
/* Padavine pill — vidljiv samo kad ima vrednost */
.vm-forecast-day-card__precip {
    flex: 0 0 auto;
    min-width: 56px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0284c7;
    background: rgba(2,132,199,0.1);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Reset za prazne pill-ove (NULL precip / wind). Koristi !important da
   nadjača dark mode pravila koja imaju veću specifičnost ([data-theme] + class). */
.vm-forecast-day-card__wind:empty,
.vm-forecast-day-card__wind[aria-hidden="true"],
.vm-forecast-day-card__precip:empty,
.vm-forecast-day-card__precip[aria-hidden="true"] {
    background: transparent !important;
    color: transparent !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Chevron (klik = expand) */
.vm-forecast-day-card__chevron {
    flex: 0 0 auto;
    color: var(--vm-text-muted, #94a3b8);
    transition: transform 0.15s, color 0.15s;
}

/* Weather-adaptive boje kartica — leva traka + blagi tint (po tipu vremena) */
.vm-forecast-day-card { position: relative; }
.vm-forecast-day-card[class*="--wx-"]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}
.vm-forecast-day-card--wx-sunny::before  { background: #f59e0b; }
.vm-forecast-day-card--wx-cloudy::before { background: #94a3b8; }
.vm-forecast-day-card--wx-rainy::before  { background: #3b82f6; }
.vm-forecast-day-card--wx-stormy::before { background: #8b5cf6; }
.vm-forecast-day-card--wx-snowy::before  { background: #38bdf8; }
.vm-forecast-day-card--wx-foggy::before  { background: #94a3b8; }
.vm-forecast-day-card--wx-sleet::before  { background: #22d3ee; }
.vm-forecast-day-card--wx-sunny  { background-image: linear-gradient(90deg, rgba(245,158,11,0.08), transparent 45%); }
.vm-forecast-day-card--wx-cloudy { background-image: linear-gradient(90deg, rgba(148,163,184,0.10), transparent 45%); }
.vm-forecast-day-card--wx-rainy  { background-image: linear-gradient(90deg, rgba(59,130,246,0.08), transparent 45%); }
.vm-forecast-day-card--wx-stormy { background-image: linear-gradient(90deg, rgba(139,92,246,0.08), transparent 45%); }
.vm-forecast-day-card--wx-snowy  { background-image: linear-gradient(90deg, rgba(56,189,248,0.10), transparent 45%); }
.vm-forecast-day-card--wx-foggy  { background-image: linear-gradient(90deg, rgba(148,163,184,0.10), transparent 45%); }
.vm-forecast-day-card--wx-sleet  { background-image: linear-gradient(90deg, rgba(34,211,238,0.10), transparent 45%); }
/* Danas zadržava plavu (border-left) — sakrij wx traku da se ne dupliraju */
.vm-forecast-day-card--today::before { display: none; }

/* Vertikalni separatori (desktop only — flex layout).
   Razdvajaju semantičke grupe: vetar | temperature | padavine.
   Linija stoji u sredini gap-a, visine ~56% kartice (top 22%, bottom 22%). */
@media (min-width: 769px) {
    .vm-forecast-day-card__wind,
    .vm-forecast-day-card__temps,
    .vm-forecast-day-card__precip {
        position: relative;
    }
    .vm-forecast-day-card__wind::before,
    .vm-forecast-day-card__temps::before,
    .vm-forecast-day-card__precip::before {
        content: '';
        position: absolute;
        left: -0.45rem;
        top: 22%;
        bottom: 22%;
        width: 1px;
        background: var(--vm-border-color, #cbd5e1);
        opacity: 0.7;
        pointer-events: none;
    }
    /* Sakri separator ako je pill prazan (npr. nema padavina) */
    .vm-forecast-day-card__wind:empty::before,
    .vm-forecast-day-card__wind[aria-hidden="true"]::before,
    .vm-forecast-day-card__precip:empty::before,
    .vm-forecast-day-card__precip[aria-hidden="true"]::before {
        display: none;
    }
}

/* Hint — staticki tekst ispod liste, bez animacije (nema vise scroll-a) */
.vm-forecast-daily-hint-text {
    font-size: 0.78rem;
    color: var(--vm-text-muted, #64748b);
    text-align: center;
    margin: 0.5rem 0 0;
    font-style: italic;
}

/* Legacy scroll hint — sakriven (vise nema horizontalnog scroll-a) */
.vm-forecast-daily-hint { display: none !important; }

/* ==========================================================================
   PERIOD TOGGLE
   ========================================================================== */

.vm-forecast-period-toggle {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 1rem;
    padding: 4px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #e2e8f0);
    border-radius: 999px;
}

.vm-forecast-period-btn {
    padding: 0.45rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--vm-text-secondary, #475569);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.vm-forecast-period-btn:hover { color: var(--vm-text-primary, #0f172a); }
.vm-forecast-period-btn--active { background: var(--vm-card-bg, #fff) !important; color: #2563eb !important; box-shadow: var(--vm-fc-shadow-sm); }

/* ==========================================================================
   CHARTS
   ========================================================================== */

.vm-forecast-chart-card {
    overflow: hidden;
    max-width: 100%;
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-fc-radius-lg, 16px);
    padding: 1.5rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--vm-fc-shadow-sm);
}

.vm-forecast-chart-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.vm-forecast-chart-card h3::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}
.vm-forecast-chart-card--temp h3::before { background: #ef4444; }
.vm-forecast-chart-card--wind h3::before { background: #10b981; }
.vm-forecast-chart-card--pressure h3::before { background: #8b5cf6; }

.vm-forecast-chart-wrap { position: relative; height: 280px; overflow: hidden; max-width: 100%; box-sizing: border-box; }
.vm-forecast-chart-wrap canvas { max-width: 100% !important; }
.vm-forecast-chart-wrap--main { height: 340px; }
.vm-forecast-charts-row { display: flex; flex-direction: column; gap: 1rem; }

/* Icon strip iznad glavnog grafikona — transparentan, fiksna visina (CLS guard).
   Chip pozadina/border dolaze iz --vm-fc-chip-* tokena (definicija na vrhu fajla). */
.vm-forecast-chart-icons { position: relative; height: 56px; margin-bottom: 2px; }

.vm-forecast-no-data { text-align: center; padding: 3rem 1rem; color: var(--vm-text-muted, #64748b); }

/* Wind direction arrows row (above wind chart) */
.vm-forecast-wind-arrows { margin-bottom: 0.25rem; overflow-x: auto; }
.vm-forecast-wind-arrows__row {
    display: flex;
    gap: 0;
    justify-content: space-around;
}
.vm-forecast-wind-arrows__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 1px;
}
.vm-forecast-wind-arrows__label {
    font-size: 0.6rem;
    color: var(--vm-text-muted, #64748b);
    font-weight: 600;
}

/* ==========================================================================
   FULL TABLE
   ========================================================================== */

.vm-forecast-full-table__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vm-text-primary, #0f172a);
    margin: 0 0 1rem;
}

/* View toggle */
.vm-forecast-view-toggle {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 1rem;
    padding: 4px;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #e2e8f0);
    border-radius: 999px;
}

.vm-forecast-view-btn {
    padding: 0.4rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--vm-text-secondary, #475569);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.vm-forecast-view-btn:hover { color: var(--vm-text-primary, #0f172a); }
.vm-forecast-view-btn--active { background: var(--vm-card-bg, #fff) !important; color: #2563eb !important; box-shadow: var(--vm-fc-shadow-sm); }

/* Defanzivno: gazi zaostala (keširana) :first/:last-child kvadratna pravila —
   (0,3,0) specificnost pobedjuje stara (0,2,0) bez obzira na redosled ucitavanja */
.vm-forecast-period-toggle .vm-forecast-period-btn:first-child,
.vm-forecast-period-toggle .vm-forecast-period-btn:last-child {
    border-radius: 999px;
    border: none;
}
.vm-forecast-view-toggle .vm-forecast-view-btn:first-child,
.vm-forecast-view-toggle .vm-forecast-view-btn:last-child {
    border-radius: 999px;
    border: none;
}

/* Day group */
.vm-forecast-day-group { margin-bottom: 1.5rem; }
.vm-forecast-day-group--today { border-left: 3px solid #3b82f6; padding-left: 0.75rem; }
.vm-forecast-day-group--highlight { animation: vm-day-flash 0.6s ease-out 2; }
@keyframes vm-day-flash { 0%,100% { background: transparent; } 50% { background: rgba(59,130,246,0.08); } }

/* Modern day header — gradient + glassmorphism */
.vm-forecast-day-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #eef4ff 0%, #f3f0ff 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(59,130,246,0.12);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
}

.vm-forecast-day-group__title { display: flex; align-items: baseline; gap: 0.4rem; }
.vm-forecast-day-group__day-name { font-size: 1.05rem; font-weight: 800; color: var(--vm-text-primary); }
.vm-forecast-day-group__day-date { font-size: 0.85rem; font-weight: 500; color: var(--vm-text-muted, #64748b); }

.vm-forecast-day-group__stats { display: flex; align-items: center; gap: 0.6rem; }
.vm-forecast-day-group__stat {
    font-size: 0.85rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.vm-forecast-day-group__stat--tmax { color: #dc2626; background: rgba(239,68,68,0.08); }
.vm-forecast-day-group__stat--tmin { color: #2563eb; background: rgba(37,99,235,0.08); }
.vm-forecast-day-group__stat--precip { color: #0284c7; background: rgba(2,132,199,0.08); }

.vm-forecast-day-group__sun {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--vm-text-muted, #64748b);
}
.vm-forecast-day-group__sun-item { white-space: nowrap; }

/* Dark mode day header — glassmorphism */
[data-theme="dark"] .vm-forecast-day-group__header {
    background: rgba(30,41,59,0.75);
    border-color: rgba(148,163,184,0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .vm-forecast-day-group__day-name { color: #f1f5f9; }
[data-theme="dark"] .vm-forecast-day-group__day-date { color: #94a3b8; }
[data-theme="dark"] .vm-forecast-day-group__sun { color: #94a3b8; }
[data-theme="dark"] .vm-forecast-day-group__stat--tmax { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .vm-forecast-day-group__stat--tmin { background: rgba(37,99,235,0.15); }
[data-theme="dark"] .vm-forecast-day-group__stat--precip { background: rgba(2,132,199,0.15); }

/* Table */
.vm-forecast-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vm-forecast-tbl {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.vm-forecast-tbl th {
    background: var(--vm-bg-secondary, #f1f5f9);
    padding: 0.5rem 0.4rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--vm-text-secondary, #475569);
    border-bottom: 2px solid var(--vm-border-color, #cbd5e1);
    white-space: nowrap;
}

.vm-forecast-tbl td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--vm-border-color, #cbd5e1);
    color: var(--vm-text-primary, #0f172a);
    text-align: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums; /* poravnate kolone brojeva */
}

/* Vremenska ikona — 55px sa halo prstenom (content-box: 55 ikona + 4px padding = 63px krug) */
.vm-forecast-tbl td img {
    display: block;
    margin: 0 auto;
    width: 55px;
    height: 55px;
    padding: 4px;
    background: var(--vm-fc-halo);
    border-radius: 50%;
    box-sizing: content-box;
}

/* Kaskada pozadina redova: zebra -> NOC -> hover (ista specificnost (0,2,3),
   redosled odlucuje); cell tints (0,2,4) ispod namerno gaze sve slojeve. */
.vm-forecast-tbl tbody tr:nth-child(even) td { background: rgba(148,163,184,0.08); }
/* v3.3: nocni redovi — ista familija boja kao nocno sencenje na grafikonima */
.vm-forecast-tbl tbody tr.vm-row-night td { background: rgba(100,116,139,0.13); }
.vm-forecast-tbl tbody tr:hover td { background: rgba(59,130,246,0.07); }
[data-theme="dark"] .vm-forecast-tbl tbody tr:nth-child(even) td { background: rgba(148,163,184,0.05); }
[data-theme="dark"] .vm-forecast-tbl tbody tr.vm-row-night td { background: rgba(2,6,23,0.40); }
[data-theme="dark"] .vm-forecast-tbl tbody tr:hover td { background: rgba(96,165,250,0.10); }

/* Temperatura = vizuelni anchor reda (font-size i weight ovde, boja inline) */
.vm-forecast-tbl td.vm-td-temp { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }

/* UV index colored cell */
.vm-forecast-tbl td.vm-td-uv { border-radius: 4px; font-weight: 600; }

/* Verovatnoća padavina — mala pod-linija u Padavine ćeliji */
.vm-td-pop { display: inline-block; font-size: 0.7rem; font-weight: 600; color: #2563eb; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(37,99,235,0.08); }
[data-theme="dark"] .vm-td-pop { color: #7dd3fc; background: rgba(59,130,246,0.18); }

/* Table group header row (Vetar) */
.vm-forecast-tbl__group-row th {
    border-bottom: none;
    padding-bottom: 0;
    font-size: 0.68rem;
    color: var(--vm-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vm-forecast-tbl__group-header {
    font-weight: 700;
    color: var(--vm-text-secondary, #475569) !important;
    border-bottom: 2px solid #3b82f6 !important;
}
/* Wind columns visual grouping */
.vm-forecast-tbl td.vm-td-wind-first { border-left: 1px solid var(--vm-border-color, #cbd5e1); }
.vm-forecast-tbl td.vm-td-wind-last { border-right: 1px solid var(--vm-border-color, #cbd5e1); }
.vm-forecast-tbl th.vm-th-wind-first { border-left: 1px solid var(--vm-border-color, #cbd5e1); }
.vm-forecast-tbl th.vm-th-wind-last { border-right: 1px solid var(--vm-border-color, #cbd5e1); }

/* v3.3 — Beaufort tints (Brzina/Udari) + intenzitet padavina.
   (0,2,4) specificnost namerno gazi zebra/noc/hover slojeve. */
.vm-forecast-tbl tbody tr td.vm-w-mod    { background: rgba(234,179,8,0.14);  color: #854d0e; }
.vm-forecast-tbl tbody tr td.vm-w-strong { background: rgba(249,115,22,0.16); color: #9a3412; }
.vm-forecast-tbl tbody tr td.vm-w-storm  { background: rgba(239,68,68,0.18);  color: #991b1b; font-weight: 700; }
[data-theme="dark"] .vm-forecast-tbl tbody tr td.vm-w-mod    { background: rgba(234,179,8,0.16);  color: #fde047; }
[data-theme="dark"] .vm-forecast-tbl tbody tr td.vm-w-strong { background: rgba(249,115,22,0.20); color: #fdba74; }
[data-theme="dark"] .vm-forecast-tbl tbody tr td.vm-w-storm  { background: rgba(239,68,68,0.25);  color: #fca5a5; font-weight: 700; }
.vm-forecast-tbl tbody tr td.vm-pr-1 { background: rgba(59,130,246,0.08); }
.vm-forecast-tbl tbody tr td.vm-pr-2 { background: rgba(59,130,246,0.15); }
.vm-forecast-tbl tbody tr td.vm-pr-3 { background: rgba(59,130,246,0.24); }
.vm-forecast-tbl tbody tr td.vm-pr-4 { background: rgba(59,130,246,0.32); }
[data-theme="dark"] .vm-forecast-tbl tbody tr td.vm-pr-1 { background: rgba(96,165,250,0.10); }
[data-theme="dark"] .vm-forecast-tbl tbody tr td.vm-pr-2 { background: rgba(96,165,250,0.17); }
[data-theme="dark"] .vm-forecast-tbl tbody tr td.vm-pr-3 { background: rgba(96,165,250,0.26); }
[data-theme="dark"] .vm-forecast-tbl tbody tr td.vm-pr-4 { background: rgba(96,165,250,0.34); }

/* Scroll hint mobile */
.vm-forecast-scroll-hint {
    display: none;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--vm-text-muted, #64748b);
    padding: 0.25rem 0.5rem;
    animation: vm-hint-nudge 1.8s ease-in-out infinite;
}

@keyframes vm-hint-nudge { 0%,100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(8px); opacity: 1; } }

/* Cards view — hidden by default via JS inline style, shown as grid */
.vm-forecast-cards-view {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}
.vm-forecast-cards-view--visible {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.vm-forecast-hour-card {
    background: var(--vm-card-bg, #fff);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius-small, 8px);
    padding: 0.6rem;
    text-align: center;
    box-shadow: var(--vm-fc-shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}
.vm-forecast-hour-card:hover { transform: translateY(-1px); box-shadow: var(--vm-fc-shadow-md); }

.vm-forecast-hour-card__time { font-size: 0.78rem; font-weight: 700; color: var(--vm-text-primary, #0f172a); margin-bottom: 0.25rem; }
.vm-forecast-hour-card__icon { width: 53px; height: 53px; margin: 2px auto 0; display: block; padding: 4px; background: var(--vm-fc-halo); border-radius: 50%; box-sizing: content-box; }
.vm-forecast-hour-card__temp { font-size: 1rem; font-weight: 700; color: #ef4444; margin: 0.25rem 0; }
.vm-forecast-hour-card__wind { font-size: 0.72rem; color: var(--vm-text-secondary, #475569); }
.vm-forecast-hour-card__precip { font-size: 0.72rem; color: #3b82f6; font-weight: 600; }

/* ==========================================================================
   UPDATE / FRESHNESS
   ========================================================================== */

.vm-forecast-updated {
    text-align: center;
    padding: 1rem 1.25rem;
    font-size: 0.88rem;
    color: var(--vm-text-secondary, #475569);
    border: 1px solid var(--vm-border-color, #cbd5e1);
    border-radius: var(--vm-radius-small, 8px);
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.vm-forecast-updated__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.vm-forecast-updated--fresh .vm-forecast-updated__dot { background: #22c55e; }
.vm-forecast-updated--stale .vm-forecast-updated__dot { background: #f59e0b; }
.vm-forecast-updated--old .vm-forecast-updated__dot { background: #ef4444; }
.vm-forecast-updated--fresh { border-color: #22c55e; background: rgba(34,197,94,0.04); }
.vm-forecast-updated--stale { border-color: #f59e0b; background: rgba(245,158,11,0.04); }
.vm-forecast-updated--old { border-color: #ef4444; background: rgba(239,68,68,0.04); }

/* Daily hint text (click instruction) */
.vm-forecast-daily-hint-text {
    font-size: 0.72rem;
    color: var(--vm-text-muted, #64748b);
    text-align: center;
    margin: 0.25rem 0 0;
    font-style: italic;
}

/* ==========================================================================
   AQI (Air Quality)
   ========================================================================== */

.vm-forecast-aqi {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--vm-fc-radius-lg, 16px);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--vm-fc-shadow-sm);
    transition: box-shadow 0.2s;
}
.vm-forecast-aqi:hover { box-shadow: var(--vm-fc-shadow-md); }
.vm-forecast-aqi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--vm-fc-accent);
}
.vm-forecast-aqi--nodata { justify-content: center; align-items: center; }

/* Zona 1 — HERO (score + opis + ikona) */
.vm-forecast-aqi__hero {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.vm-forecast-aqi__score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: var(--vm-fc-radius-lg, 16px);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid rgba(59,130,246,0.15);
    min-width: 104px;
}
.vm-forecast-aqi__score-label { font-size: 0.72rem; font-weight: 600; color: var(--vm-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.vm-forecast-aqi__score-num { font-size: 3rem; font-weight: 900; line-height: 1; margin-top: 0.25rem; }

.vm-forecast-aqi__info { flex: 1; min-width: 200px; }
.vm-forecast-aqi__title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; letter-spacing: -0.01em; }
.vm-forecast-aqi__desc { font-size: 0.88rem; color: var(--vm-text-secondary); line-height: 1.5; }

.vm-forecast-aqi__icon {
    width: 84px;
    height: 84px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Tanki divideri između sekundarnih zona */
.vm-forecast-aqi__trend,
.vm-forecast-aqi__details,
.vm-forecast-aqi__pollen,
.vm-forecast-aqi__tiles {
    padding-top: 1.1rem;
    border-top: 1px solid var(--vm-border-color, rgba(203,213,225,0.6));
}

/* Zona 2 — 24h AQI TREND (inline SVG sparkline) */
.vm-forecast-aqi__trend-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.vm-forecast-aqi__trend-label { font-size: 0.7rem; font-weight: 700; color: var(--vm-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.vm-forecast-aqi__trend-range { font-size: 0.72rem; color: var(--vm-text-muted); }
.vm-forecast-aqi__spark { display: block; width: 100%; height: 60px; }

/* Zona 3 — POLLUTANT GRID */
.vm-forecast-aqi__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
}
.vm-forecast-aqi__pill {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: var(--vm-fc-shadow-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vm-text-primary);
    line-height: 1.2;
}
.vm-forecast-aqi__pill-label { font-size: 0.65rem; font-weight: 700; color: var(--vm-text-muted); text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 4px; }
.vm-forecast-aqi__pill-bar { height: 8px; background: #e2e8f0; border-radius: 4px; margin: 5px 0; overflow: hidden; }
.vm-forecast-aqi__pill-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.vm-forecast-aqi__pill-value { font-size: 0.75rem; color: var(--vm-text-secondary); }

/* Zona 4 — POLEN CHIPS (sezonski; chip se sakriva kad nema podataka) */
.vm-forecast-aqi__pollen { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.vm-forecast-aqi__pollen-label { font-size: 0.7rem; font-weight: 700; color: var(--vm-text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-right: 0.15rem; }
.vm-forecast-aqi__pollen-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #e2e8f0);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vm-text-primary);
}
.vm-forecast-aqi__pollen-chip img { width: 22px; height: 22px; flex-shrink: 0; }
.vm-forecast-aqi__pollen-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.vm-forecast-aqi__pollen-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vm-border-color, #cbd5e1); }
.vm-forecast-aqi__pollen-dot--low { background: #22c55e; }
.vm-forecast-aqi__pollen-dot--mid { background: #f59e0b; }
.vm-forecast-aqi__pollen-dot--high { background: #ef4444; }
/* Tekstualni nivo polena (nisko/umereno/visoko) */
.vm-forecast-aqi__pollen-lvl { font-weight: 700; font-size: 0.74rem; }
.vm-forecast-aqi__pollen-lvl--low { color: #16a34a; }
.vm-forecast-aqi__pollen-lvl--mid { color: #d97706; }
.vm-forecast-aqi__pollen-lvl--high { color: #dc2626; }
[data-theme="dark"] .vm-forecast-aqi__pollen-lvl--low { color: #4ade80; }
[data-theme="dark"] .vm-forecast-aqi__pollen-lvl--mid { color: #fbbf24; }
[data-theme="dark"] .vm-forecast-aqi__pollen-lvl--high { color: #f87171; }

/* Zona 5 — UV + DUST TILES */
.vm-forecast-aqi__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.vm-forecast-aqi__tile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: var(--vm-bg-secondary, #f1f5f9);
    border: 1px solid var(--vm-border-color, #e2e8f0);
    border-radius: 12px;
}
.vm-forecast-aqi__tile img { width: 36px; height: 36px; flex-shrink: 0; }
.vm-forecast-aqi__tile-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vm-forecast-aqi__tile-label { font-size: 0.68rem; font-weight: 700; color: var(--vm-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.vm-forecast-aqi__tile-value { font-size: 1.05rem; font-weight: 800; color: var(--vm-text-primary); }
.vm-forecast-aqi__tile-sub { font-size: 0.74rem; color: var(--vm-text-secondary); }

/* AQI categories */
.vm-forecast-aqi--good { border-color: #22c55e; }
.vm-forecast-aqi--good .vm-forecast-aqi__score { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); }
.vm-forecast-aqi--good .vm-forecast-aqi__score-num { color: #15803d; }
.vm-forecast-aqi--good .vm-forecast-aqi__title { color: #15803d; }
.vm-forecast-aqi--good .vm-forecast-aqi__icon { background-image: url('/meteogrami/ikonice/aqi/aqi-good.svg'); }

.vm-forecast-aqi--acceptable { border-color: #eab308; }
.vm-forecast-aqi--acceptable .vm-forecast-aqi__score { background: rgba(234,179,8,0.1); border-color: rgba(234,179,8,0.3); }
.vm-forecast-aqi--acceptable .vm-forecast-aqi__score-num { color: #a16207; }
.vm-forecast-aqi--acceptable .vm-forecast-aqi__title { color: #a16207; }
.vm-forecast-aqi--acceptable .vm-forecast-aqi__icon { background-image: url('/meteogrami/ikonice/aqi/aqi-acceptable.svg'); }

.vm-forecast-aqi--moderate { border-color: #f97316; }
.vm-forecast-aqi--moderate .vm-forecast-aqi__score { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.3); }
.vm-forecast-aqi--moderate .vm-forecast-aqi__score-num { color: #c2410c; }
.vm-forecast-aqi--moderate .vm-forecast-aqi__title { color: #c2410c; }
.vm-forecast-aqi--moderate .vm-forecast-aqi__icon { background-image: url('/meteogrami/ikonice/aqi/aqi-moderate.svg'); }

.vm-forecast-aqi--poor { border-color: #ef4444; }
.vm-forecast-aqi--poor .vm-forecast-aqi__score { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
.vm-forecast-aqi--poor .vm-forecast-aqi__score-num { color: #b91c1c; }
.vm-forecast-aqi--poor .vm-forecast-aqi__title { color: #b91c1c; }
.vm-forecast-aqi--poor .vm-forecast-aqi__icon { background-image: url('/meteogrami/ikonice/aqi/aqi-poor.svg'); }

.vm-forecast-aqi--bad { border-color: #a855f7; }
.vm-forecast-aqi--bad .vm-forecast-aqi__score { background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.3); }
.vm-forecast-aqi--bad .vm-forecast-aqi__score-num { color: #7e22ce; }
.vm-forecast-aqi--bad .vm-forecast-aqi__title { color: #7e22ce; }
.vm-forecast-aqi--bad .vm-forecast-aqi__icon { background-image: url('/meteogrami/ikonice/aqi/aqi-danger.svg'); }

.vm-forecast-aqi--nodata { text-align: center; padding: 2rem; color: var(--vm-text-muted); font-size: 0.88rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /* Hero — stack na mobilnom */
    .vm-forecast-hero { flex-direction: column; align-items: stretch; padding: 1.25rem; gap: 1.1rem; min-height: auto; margin-bottom: 1.4rem; }
    .vm-forecast-hero:empty { min-height: 530px; } /* izmerena mobile visina (v3.3) */
    .vm-forecast-hero__icon { width: 94px; height: 94px; }
    .vm-forecast-hero__temp { font-size: 3rem; }
    .vm-forecast-hero__label { font-size: 1.05rem; }
    .vm-forecast-hero__stats { grid-template-columns: repeat(2, 1fr); width: 100%; gap: 0.7rem 1rem; }
    .vm-forecast-hero__hour img { width: 30px; height: 30px; }
    .vm-forecast-hero__hour-temp { font-size: 0.75rem; }
    .vm-forecast-hero__sun-time { font-size: 0.72rem; }
    .vm-forecast-daily-cards { min-height: 700px; }
    .vm-forecast-chart-wrap { height: 220px; }
    .vm-forecast-chart-wrap--main { height: 280px; }
    #vm-forecast-table { min-height: 300px; }
    .vm-forecast-chart-icons { height: 44px; }
    .vm-forecast-chart-icons__chip { width: 38px; height: 38px; }
    .vm-forecast-chart-icons__chip img { width: 30px; height: 30px; }
    .vm-forecast-wind-arrows__item svg { width: 22px !important; height: 22px !important; }
    .vm-forecast-wind-arrows__label { font-size: 0.55rem; }
    .vm-forecast-day-group__header { position: sticky; top: 0; z-index: 5; }
    .vm-forecast-tbl { font-size: 0.75rem; }
    .vm-forecast-tbl td img { width: 41px; height: 41px; }
    .vm-forecast-scroll-hint { display: block; }
    .vm-forecast-section__title { font-size: 1.2rem; }
    /* Range bar nema grid-area na mobilnom — sakriva se */
    .vm-forecast-day-card__range { display: none !important; }

    /* Daily cards — 2-red grid layout na mobilnom.
       Red 1: [day | icon | label | temps]
       Red 2: [day↑   | icon↑ | wind  | precip]
       Day i icon kolone span-uju oba reda (vertikalno centrirani). */
    .vm-forecast-day-card {
        display: grid;
        grid-template-columns: 96px 52px 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "day icon label temps"
            "day icon wind precip";
        column-gap: 8px;
        row-gap: 2px;
        align-items: center;
        gap: unset;
        padding: 0.55rem 0.65rem;
    }
    .vm-forecast-day-card--today { padding-left: calc(0.65rem - 2px); }
    .vm-forecast-day-card__day { grid-area: day; flex-basis: auto; align-self: center; }
    .vm-forecast-day-card__icon-wrap { grid-area: icon; flex-basis: auto; width: 52px; height: 52px; align-self: center; }
    .vm-forecast-day-card__icon { width: 41px; height: 41px; }
    .vm-forecast-day-card__label { grid-area: label; font-size: 0.78rem; }
    .vm-forecast-day-card__temps { grid-area: temps; justify-self: end; font-size: 0.88rem; gap: 0.15rem; }
    .vm-forecast-day-card__wind { grid-area: wind; justify-self: start; font-size: 0.68rem; min-width: 0; padding: 1px 7px; }
    .vm-forecast-day-card__precip { grid-area: precip; justify-self: end; font-size: 0.68rem; min-width: 0; padding: 1px 7px; }
    .vm-forecast-day-card__day-name { font-size: 0.88rem; }
    .vm-forecast-day-card__date { font-size: 0.7rem; }
    /* Chevron sakriven — cela kartica je klikabilna, indikator nepotreban na mobilnom */
    .vm-forecast-day-card__chevron { display: none; }
}

@media (max-width: 480px) {
    .vm-forecast-tbl td img { width: 36px; height: 36px; padding: 3px; }
    .vm-forecast-day-group__sun { font-size: 0.85rem; }
    .vm-forecast-day-group__sun span { font-size: 0.82rem; }
    .vm-forecast-cards-view--visible { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .vm-forecast-aqi { padding: 1rem; gap: 1rem; }
    .vm-forecast-aqi__score { padding: 0.75rem 1.25rem; }
    .vm-forecast-aqi__score-num { font-size: 2.2rem; }
    .vm-forecast-aqi__title { font-size: 1.15rem; }
    .vm-forecast-aqi__icon { width: 70px; height: 70px; }
    .vm-forecast-chart-icons { height: 36px; }
    .vm-forecast-chart-icons__chip { width: 30px; height: 30px; }
    .vm-forecast-chart-icons__chip img { width: 24px; height: 24px; }
    .vm-forecast-wind-arrows__item svg { width: 18px !important; height: 18px !important; }
    .vm-forecast-wind-arrows__label { display: none; }
    /* Tri period dugmeta (48 sati / 5 dana / 10 dana) u jednom redu na uskim ekranima */
    .vm-forecast-period-btn { padding: 0.45rem 0.85rem; font-size: 0.8rem; }

    /* Veoma uske ekrane (<=480px): kompaktniji grid, manja day kolona, manji font */
    .vm-forecast-day-card {
        grid-template-columns: 80px 46px 1fr auto;
        column-gap: 6px;
        padding: 0.5rem 0.55rem;
    }
    .vm-forecast-day-card--today { padding-left: calc(0.55rem - 2px); }
    .vm-forecast-day-card__icon-wrap { width: 44px; height: 44px; }
    .vm-forecast-day-card__icon { width: 36px; height: 36px; }
    .vm-forecast-day-card__day-name { font-size: 0.82rem; }
    .vm-forecast-day-card__date { font-size: 0.66rem; }
    .vm-forecast-day-card__label { font-size: 0.72rem; }
    .vm-forecast-day-card__wind { font-size: 0.65rem; padding: 0 6px; }
    .vm-forecast-day-card__temps { font-size: 0.82rem; }
    .vm-forecast-day-card__precip { font-size: 0.65rem; padding: 0 6px; }
}

/* ==========================================================================
   DARK MODE — Enhanced contrast & glassmorphism
   ========================================================================== */

/* Search wrapper */
[data-theme="dark"] .vm-forecast-search {
    background: rgba(30,41,59,0.7);
    border-color: rgba(148,163,184,0.2);
}
[data-theme="dark"] .vm-forecast-search:focus-within {
    background: rgba(30,41,59,0.9);
    border-color: #60a5fa;
}

/* Daily summary cards */
[data-theme="dark"] .vm-forecast-day-card {
    background: rgba(30,41,59,0.7);
    border-color: rgba(148,163,184,0.15);
    color: #e2e8f0;
}
[data-theme="dark"] .vm-forecast-day-card:hover {
    border-color: rgba(96,165,250,0.4);
}
[data-theme="dark"] .vm-forecast-day-card--today {
    border-color: #3b82f6;
    background: rgba(59,130,246,0.12);
    border-left-color: #60a5fa;
}
[data-theme="dark"] .vm-forecast-day-card__day-name { color: #f1f5f9; }
[data-theme="dark"] .vm-forecast-day-card__date { color: #94a3b8; }
[data-theme="dark"] .vm-forecast-day-card__label { color: #cbd5e1; }
[data-theme="dark"] .vm-forecast-day-card__tsep { color: #64748b; }
[data-theme="dark"] .vm-forecast-day-card__tmax { color: #fca5a5; }
[data-theme="dark"] .vm-forecast-day-card__tmin { color: #93c5fd; }
[data-theme="dark"] .vm-forecast-day-card__precip {
    color: #7dd3fc;
    background: rgba(2,132,199,0.18);
}
[data-theme="dark"] .vm-forecast-day-card__wind {
    color: #cbd5e1;
    background: rgba(148,163,184,0.15);
}
[data-theme="dark"] .vm-forecast-day-card__chevron { color: #64748b; }
/* Vertikalni separator u dark mode-u — slabija boja */
[data-theme="dark"] .vm-forecast-day-card__wind::before,
[data-theme="dark"] .vm-forecast-day-card__temps::before,
[data-theme="dark"] .vm-forecast-day-card__precip::before {
    background: rgba(148,163,184,0.25);
}

/* ==========================================================================
   DUGOROČNA (ENSEMBLE) CTA — ispod hero sekcije (v2.1)
   ========================================================================== */
.vm-forecast-trend-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 6px;
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(120deg, #2563eb 0%, #4f46e5 55%, #7c3aed 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(37,99,235,0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Blocksy gazi link boje — beli tekst na svih 5 pseudo-stanja (lekcija sesija 30/45/66) */
a.vm-forecast-trend-cta:link,
a.vm-forecast-trend-cta:visited,
a.vm-forecast-trend-cta:hover,
a.vm-forecast-trend-cta:focus,
a.vm-forecast-trend-cta:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    text-decoration: none !important;
    border-bottom: none !important;
}
/* Sheen — spori svetli odsjaj koji klizi preko dugmeta */
.vm-forecast-trend-cta::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: vm-cta-sheen 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes vm-cta-sheen {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}
.vm-forecast-trend-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37,99,235,0.4);
}
.vm-forecast-trend-cta__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
}
.vm-forecast-trend-cta__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vm-forecast-trend-cta__text strong {
    font-size: 1rem;
    line-height: 1.3;
}
.vm-forecast-trend-cta__text small {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.82);
    -webkit-text-fill-color: rgba(255,255,255,0.82);
}
.vm-forecast-trend-cta__arrow {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
.vm-forecast-trend-cta:hover .vm-forecast-trend-cta__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .vm-forecast-trend-cta::after { animation: none; display: none; }
    .vm-forecast-trend-cta,
    .vm-forecast-trend-cta__arrow { transition: none; }
}

@media (max-width: 600px) {
    .vm-forecast-trend-cta { padding: 12px 14px; gap: 11px; }
    .vm-forecast-trend-cta__icon { width: 40px; height: 40px; }
    .vm-forecast-trend-cta__text strong { font-size: 0.9rem; }
    .vm-forecast-trend-cta__text small { font-size: 0.72rem; }
}

[data-theme="dark"] .vm-forecast-trend-cta {
    background: linear-gradient(120deg, #1d4ed8 0%, #4338ca 55%, #6d28d9 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
[data-theme="dark"] .vm-forecast-trend-cta:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.55); }
[data-theme="dark"] .vm-forecast-day-card:hover .vm-forecast-day-card__chevron { color: #60a5fa; }
/* Sjajnija halo iza ikone u dark mode (oblaci na tamnoj pozadini lakse vidljivi) */
[data-theme="dark"] .vm-forecast-day-card__icon-wrap {
    background: radial-gradient(circle, rgba(125,211,252,0.18) 35%, transparent 70%);
}
[data-theme="dark"] .vm-forecast-day-card__range { background: rgba(148,163,184,0.2); }

/* Day group header — stat pills */
[data-theme="dark"] .vm-forecast-day-group__stat--tmax { color: #fca5a5; background: rgba(239,68,68,0.2); }
[data-theme="dark"] .vm-forecast-day-group__stat--tmin { color: #93c5fd; background: rgba(37,99,235,0.2); }
[data-theme="dark"] .vm-forecast-day-group__stat--precip { color: #7dd3fc; background: rgba(2,132,199,0.2); }

/* Chart cards */
[data-theme="dark"] .vm-forecast-chart-card {
    background: rgba(30,41,59,0.8);
    border-color: rgba(148,163,184,0.12);
}

/* Table headers */
[data-theme="dark"] .vm-forecast-tbl thead {
    background: rgba(30,41,59,0.95);
}
[data-theme="dark"] .vm-forecast-tbl th {
    color: #e2e8f0;
    border-color: rgba(148,163,184,0.15);
}
[data-theme="dark"] .vm-forecast-tbl td {
    border-color: rgba(148,163,184,0.08);
}
[data-theme="dark"] .vm-forecast-tbl tbody tr:hover {
    background: rgba(51,65,85,0.4);
}

/* Wind arrows — brighter in dark mode */
[data-theme="dark"] .vm-forecast-wind-arrows__item svg {
    filter: brightness(1.5);
}
[data-theme="dark"] .vm-forecast-wind-arrows__item span {
    color: #cbd5e1;
}

/* AQI card */
[data-theme="dark"] .vm-forecast-aqi {
    background: rgba(30,41,59,0.75);
    border-color: rgba(148,163,184,0.15);
}
[data-theme="dark"] .vm-forecast-aqi__score {
    background: rgba(51,65,85,0.6);
    border-color: rgba(148,163,184,0.2);
}
[data-theme="dark"] .vm-forecast-aqi__pill {
    background: rgba(51,65,85,0.8);
    border-color: rgba(148,163,184,0.2);
    color: #e2e8f0;
}
[data-theme="dark"] .vm-forecast-aqi__pill-bar {
    background: rgba(71,85,105,0.6);
}
[data-theme="dark"] .vm-forecast-aqi__pill-label {
    color: #94a3b8;
}
[data-theme="dark"] .vm-forecast-aqi__pill-value {
    color: #cbd5e1;
}
/* AQI new zones — dividers, pollen chips, tiles, trend */
[data-theme="dark"] .vm-forecast-aqi__trend,
[data-theme="dark"] .vm-forecast-aqi__details,
[data-theme="dark"] .vm-forecast-aqi__pollen,
[data-theme="dark"] .vm-forecast-aqi__tiles {
    border-top-color: rgba(148,163,184,0.18);
}
[data-theme="dark"] .vm-forecast-aqi__pollen-chip,
[data-theme="dark"] .vm-forecast-aqi__tile {
    background: rgba(51,65,85,0.8);
    border-color: rgba(148,163,184,0.2);
    color: #e2e8f0;
}
[data-theme="dark"] .vm-forecast-aqi__tile-value { color: #f1f5f9; }
[data-theme="dark"] .vm-forecast-aqi__tile-sub,
[data-theme="dark"] .vm-forecast-aqi__trend-range { color: #94a3b8; }
/* Neaktivne tačkice svetlije na tamnoj pozadini; aktivne ZADRŽAVAJU boju
   (dark blanket pravilo je ranije gazilo --low/--mid/--high zbog specifičnosti) */
[data-theme="dark"] .vm-forecast-aqi__pollen-dot { background: rgba(148,163,184,0.35); }
[data-theme="dark"] .vm-forecast-aqi__pollen-dot--low { background: #22c55e; }
[data-theme="dark"] .vm-forecast-aqi__pollen-dot--mid { background: #fbbf24; }
[data-theme="dark"] .vm-forecast-aqi__pollen-dot--high { background: #f87171; }

/* Period toggle buttons */
[data-theme="dark"] .vm-forecast-period-btn {
    color: #cbd5e1;
    border-color: rgba(148,163,184,0.2);
}
[data-theme="dark"] .vm-forecast-view-btn {
    color: #cbd5e1;
    border-color: rgba(148,163,184,0.2);
}

/* Freshness updated text */
[data-theme="dark"] .vm-forecast-updated {
    color: #94a3b8;
}

/* Section titles */
[data-theme="dark"] .vm-forecast-section__title {
    color: #f1f5f9;
}

/* Crosslink boxes */
[data-theme="dark"] .vm-forecast-all-link {
    color: #94a3b8;
}
[data-theme="dark"] .vm-forecast-all-link:hover {
    color: #60a5fa;
}