/* =====================================================================
   ŠKOLSKI VRT — javni dio
   Font: Barlow. Plan preko cijelog ekrana, krugovi gredica, modali.
   ===================================================================== */

:root {
    /* --- BOJE ŠKOLSKOG WEBA — upišite točne hex vrijednosti s osfkf.hr --- */
    --brand:        #1f6f43;   /* glavna boja izbornika (privremeno: zelena) */
    --brand-dark:   #15512f;
    --brand-accent: #e0a72e;   /* topli naglasak */
    --brand-ink:    #ffffff;   /* tekst na brand pozadini */

    /* --- Sučelje --- */
    --bg:        #f4f1ea;
    --surface:   #ffffff;
    --ink:       #26261f;
    --muted:     #6f6a60;
    --line:      #e4dfd4;
    --radius:    16px;
    --shadow:    0 2px 6px rgba(0,0,0,.08), 0 14px 40px rgba(0,0,0,.14);
    --font:      'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- Plan (SVG ukras) --- */
    --plan-grass:        #cfe3b6;
    --plan-grass-dot:    #bcd79e;
    --plan-path:         #ece0c6;
    --plan-fence:        #9bbf78;
    --plan-building:     #e2cfb2;
    --plan-building-line:#c4ab86;
    --plan-building-text:#7c6748;
    --plan-gate:         #8a6b43;

    /* --- Stanja gredica (za znački i obrube) --- */
    --st-sretna:   #3f9d3f;
    --st-posijana: #6b7e3d;
    --st-zedna:    #e0a72e;
    --st-zarasla:  #707a3a;
    --st-za_berbu: #d23f3f;
    --st-bolesna:  #9c3b8e;
    --st-prazna:   #8a6b43;
    --st-tuzna:    #cf4b2b;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body.is-plan { overflow: hidden; }            /* na planu nema scrolla stranice */
a { color: var(--brand-dark); }

/* =================== GORNJE KONTROLE (prijava/odjava + hamburger) =================== */
.topctrls {
    position: fixed; top: 14px; right: 14px; z-index: 75;
    display: flex; align-items: center; gap: 10px;
}
body.has-aai-bar .topctrls { top: calc(14px + 38px); }

.iconbtn {
    width: 50px; height: 50px; border: 0; border-radius: 14px;
    background: var(--brand); color: var(--brand-ink); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    box-shadow: var(--shadow); text-decoration: none; transition: background .2s ease;
}
.iconbtn:hover { background: var(--brand-dark); }
.iconbtn svg { width: 22px; height: 22px; fill: currentColor; display: block; }

.hamburger span { width: 22px; height: 2.5px; background: var(--brand-ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =================== TRAKA "PRIJAVLJENI STE KAO" =================== */
.aai-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 70;
    background: var(--brand-dark); color: #fff;
    font-size: .9rem; line-height: 1.3; text-align: center;
    padding: 8px 64px; min-height: 38px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.aai-bar strong { font-weight: 700; }

/* =================== VREMENSKA PROGNOZA (gore lijevo, minimalistički) =================== */
.weather {
    position: fixed; top: 14px; left: 14px; z-index: 40;
    display: flex; gap: 14px;
    color: var(--brand-dark);
    background: rgba(255,255,255,.92); border-radius: 14px;
    padding: 8px 10px; box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.has-aai-bar .weather { top: calc(14px + 38px); }
.weather.is-empty { display: none; }
.weather__day { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.weather__name { font-size: .64rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.weather__icon { width: 26px; height: 26px; }
.weather__icon svg { width: 100%; height: 100%; display: block; }
.weather__temp { font-size: .82rem; font-weight: 700; }
.weather__temp small { font-weight: 500; opacity: .55; }

/* =================== DRAWER (s desne strane) =================== */
.drawer {
    position: fixed; top: 0; right: 0; z-index: 70;
    width: min(82vw, 320px); height: 100%;
    background: var(--brand);
    color: var(--brand-ink);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: -10px 0 40px rgba(0,0,0,.22);
    display: flex; flex-direction: column;
    padding: 5rem 0 1.5rem;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
    font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
    padding: 0 1.6rem 1rem; opacity: .85; text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.18); margin-bottom: .6rem;
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
    display: block; padding: .95rem 1.6rem; color: var(--brand-ink);
    text-decoration: none; font-size: 1.12rem; font-weight: 500;
    border-left: 4px solid transparent; transition: background .15s ease, border-color .15s ease;
}
.drawer__list a:hover { background: rgba(255,255,255,.12); border-left-color: var(--brand-accent); }
.drawer-overlay {
    position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.32);
    opacity: 0; transition: opacity .25s ease;
}
.drawer-overlay.is-open { opacity: 1; }

/* =================== PLAN (puni ekran) =================== */
.main--plan { display: block; }
.plan {
    position: fixed; inset: 0; z-index: 1;
    width: 100vw; height: 100dvh; height: 100vh;
    background: var(--plan-grass);
    overflow: hidden; touch-action: none;
}
.plan svg {
    width: 100%; height: 100%; display: block;
    cursor: grab; user-select: none; -webkit-tap-highlight-color: transparent;
}
.plan svg.is-zoomed { cursor: grab; }
.plan svg:active { cursor: grabbing; }

/* kontrole zumiranja */
.plan__zoom {
    position: fixed; right: 14px; left: auto; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
    display: flex; flex-direction: row; gap: 8px;
}
.plan__zoom button {
    width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: var(--surface); color: var(--ink); font-size: 1.4rem; line-height: 1;
    cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
}
.plan__zoom button:hover { background: #fff; color: var(--brand-dark); }

/* =================== OZNAKE (pin-ovi na gredicama) =================== */
.vrt-marker { cursor: pointer; }
.vrt-marker__inner {
    transform-box: fill-box; transform-origin: 50% 100%;        /* skaliraj oko vrha pina */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.vrt-marker__pin {
    fill: #fff; stroke: var(--brand-dark); stroke-width: 2.5;   /* tanki 1px obrub */
}
.vrt-marker__num {
    fill: var(--brand-dark); font-family: var(--font); font-weight: 700; font-size: 54px;
    text-anchor: middle; dominant-baseline: central; pointer-events: none;
}

/* Cijela gredica je klikabilna (ne samo pin) — pomoć za dodir na mobitelu */
.vrt-bed-hit, .vrt-bed-hit * { cursor: pointer; }

/* Naglasak na trenutno odabranom elementu (gredica/drvo) — pulsirajući topli sjaj */
.vrt-bed-hit.is-selected,
.vrt-clickable.is-selected,
.vrt-marker.is-selected .vrt-marker__inner {
    animation: vrtSelectedGlow 1.8s ease-in-out infinite;
}
@keyframes vrtSelectedGlow {
    0%, 100% { filter: drop-shadow(0 0 5px var(--brand-accent)) drop-shadow(0 0 10px var(--brand-accent)); }
    50%      { filter: drop-shadow(0 0 9px var(--brand-accent)) drop-shadow(0 0 20px var(--brand-accent)); }
}
@media (prefers-reduced-motion: reduce) {
    .vrt-bed-hit.is-selected,
    .vrt-clickable.is-selected,
    .vrt-marker.is-selected .vrt-marker__inner {
        animation: none;
        filter: drop-shadow(0 0 8px var(--brand-accent)) drop-shadow(0 0 14px var(--brand-accent));
    }
}
.vrt-marker:hover .vrt-marker__pin,
.vrt-marker:focus .vrt-marker__pin { stroke: var(--brand-accent); }
.vrt-marker:focus { outline: none; }

/* titranje (pulse) — pokreće JS dodavanjem klase, redom po brojevima */
.vrt-marker.is-pulsing .vrt-marker__inner { animation: vrtPulse .9s ease; }
@keyframes vrtPulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.22); }
    55%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .vrt-marker.is-pulsing .vrt-marker__inner { animation: none; }
}

/* =================== DONJA PLOČA (info) =================== */
.infobar {
    position: fixed; left: 50%; transform: translate(-50%, 160%);
    bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 45;
    width: min(94vw, 540px);
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility .3s;
}
.infobar.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; }
.infobar__close {
    position: absolute; top: 8px; right: 10px; border: 0; background: none;
    font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.ib { display: flex; align-items: center; gap: .9rem; padding-right: 1.5rem; }
.ib__emoji { font-size: 2rem; }
.ib__title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.ib__sub { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.btn--more { margin-left: auto; }

/* =================== MODAL (preko plana) =================== */
.modal {
    position: fixed; inset: 0; z-index: 80;
    display: none; align-items: flex-start; justify-content: center;
    background: rgba(20,30,18,.55); backdrop-filter: blur(3px);
    padding: max(3vh, 20px) 14px;
}
.modal.is-open { display: flex; }
.modal__sheet {
    position: relative; background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow); width: min(100%, 760px);
    max-height: 92dvh; max-height: 92vh; overflow: auto;
    animation: modalIn .25s ease;
}
@keyframes modalIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__close {
    position: sticky; float: right; top: 10px; right: 10px; margin: 10px 10px -10px 0;
    width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: var(--bg); color: var(--ink); font-size: 1.4rem; cursor: pointer; z-index: 2;
}
.modal__content { padding: 1.4rem 1.5rem 1.8rem; }

/* =================== SADRŽAJ DETALJA =================== */
.det__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.det__emoji { font-size: 2.2rem; }
.det__title { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.det__latin { font-style: italic; color: var(--muted); }
.det__sub { color: var(--muted); margin: .1rem 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center; }
.det__desc { margin: 0 0 1.2rem; }
.det__section { margin: 1.4rem 0 0; }
.det__section h3 {
    font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem;
    padding-bottom: .3rem; border-bottom: 2px solid var(--line);
}

.statuschip {
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem;
    padding: .25rem .7rem; border-radius: 999px; color: #fff;
}
.statuschip.s-sretna   { background: var(--st-sretna); }
.statuschip.s-posijana { background: var(--st-posijana); }
.statuschip.s-zedna    { background: var(--st-zedna); }
.statuschip.s-zarasla  { background: var(--st-zarasla); }
.statuschip.s-za_berbu { background: var(--st-za_berbu); }
.statuschip.s-bolesna  { background: var(--st-bolesna); }
.statuschip.s-prazna   { background: var(--st-prazna); }
.statuschip.s-tuzna    { background: var(--st-tuzna); }

.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }
.fact { background: var(--bg); border-radius: 12px; padding: .6rem .8rem; }
.fact b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fact span { font-size: 1rem; }

.species { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.species li { background: var(--bg); border-radius: 12px; padding: .7rem .9rem; }
.species__name { font-weight: 700; }
.species__name i { font-weight: 400; color: var(--muted); }
.species__meta { font-size: .88rem; color: var(--muted); }

.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.note { border-left: 3px solid var(--brand-accent); background: var(--bg); border-radius: 0 12px 12px 0; padding: .6rem .85rem; }
.note__head { font-size: .82rem; color: var(--muted); margin-bottom: .15rem; }
.note__head b { color: var(--brand-dark); text-transform: capitalize; }

/* =================== FORME (dodavanje) =================== */
.addform { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem;
    background: var(--bg); border-radius: 12px; padding: .9rem; }
.addform select, .addform textarea, .addform input[type=text], .addform input[type=file] {
    font: inherit; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; width: 100%;
}
.addform textarea { min-height: 70px; resize: vertical; }
.btn {
    font: inherit; font-weight: 700; cursor: pointer; border: 0;
    background: var(--brand); color: var(--brand-ink); padding: .55rem 1.1rem; border-radius: 10px;
    align-self: flex-start;
}
.btn:hover { background: var(--brand-dark); }
.btn:disabled { opacity: .6; cursor: default; }
.formnote { font-size: .85rem; color: var(--muted); }
.formerror { color: var(--st-tuzna); font-size: .88rem; }

/* =================== GALERIJA — kvadratne sličice u rešetki =================== */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px; margin-top: .8rem;
}
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } }
.gallery__item {
    position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
    border-radius: 8px; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.gallery__item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__cap {
    position: absolute; left: 0; right: 0; bottom: 0; font-size: .72rem; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.65)); padding: .8rem .55rem .35rem;
    pointer-events: none; font-weight: 500;
}

/* =================== DROPZONE — upload zone =================== */
.vrt-dropzone {
    border: 2px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,.6);
    min-height: 110px; padding: 1.1rem; margin-top: .8rem;
    transition: border-color .15s, background .15s;
}
.vrt-dropzone:hover { border-color: var(--brand); background: rgba(255,255,255,.85); }
.vrt-dropzone.dz-drag-hover { border-color: var(--brand); background: rgba(31,111,67,.07); }
.vrt-dropzone .dz-message {
    font-weight: 600; color: var(--brand-dark); margin: 0; text-align: center;
}
.vrt-dropzone .dz-message::before { content: '📷  '; }
.vrt-dropzone .dz-preview { background: #fff; border-radius: 8px; }
.vrt-dz-status {
    margin-top: .8rem; padding: .55rem .8rem; border-radius: 8px;
    font-size: .9rem; font-weight: 500;
}
.vrt-dz-status.is-ok  { background: #e7f4e7; color: #1f6f43; border: 1px solid #b9d9b9; }
.vrt-dz-status.is-err { background: #fdecea; color: #b3261e; border: 1px solid #f1c0bc; }

/* =================== STRANICE U MODALU (i fallback) =================== */
.page { max-width: 960px; margin: 0 auto; }
.is-page .page { padding: 5rem 1.1rem 3rem; }
.page__title { font-size: 1.7rem; font-weight: 800; margin: 0 0 .2rem; }
.page__subtitle { font-size: 1.2rem; font-weight: 700; margin: 1.6rem 0 .4rem; }
.page__lead { color: var(--muted); margin: 0 0 1.3rem; }
.page__rich p { margin: 0 0 .8rem; }
.page__upload { margin-top: 1.5rem; }
.empty { color: var(--muted); font-style: italic; }

/* =================== DNEVNIK / TIMELINE =================== */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--line); }
.timeline__item { position: relative; padding: 0 0 1.1rem 1rem; }
.timeline__dot { position: absolute; left: -1.55rem; top: .55rem; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; }
.timeline__card { background: var(--bg); border-radius: 12px; padding: .8rem 1rem; }
.timeline__title { margin: 0 0 .35rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.timeline__title b { font-weight: 700; }
.timeline__badge { display: inline-block; font-size: .72rem; padding: 2px 8px; background: rgba(31,111,67,.12); color: var(--brand-dark); border-radius: 999px; font-weight: 600; }
.timeline__text { margin: 0; white-space: pre-wrap; }
.timeline__meta { margin: .4rem 0 0; font-size: .82rem; color: var(--muted); }

/* =================== OZNAKA RAZREDA + UČITELJA =================== */
.bed-class { display: inline-flex; align-items: baseline; gap: .35rem; }
.bed-class__name { font-weight: 700; }
.bed-class__teacher { color: var(--muted); font-weight: 400; }
/* "Brine se: [razred] [učitelj]" — drži se zajedno kad pada u novi red */
.det__care { display: inline-block; white-space: nowrap; }

/* =================== ČOVJEČULJAK SA TAČKAMA (drone view) =================== */
.vrt-walker { pointer-events: none; }

/* Sjena samog šetača — meka ovalna mrlja, slijedi položaj sunca preko cx/cy */
.vrt-walker-shadow {
    pointer-events: none;
    opacity: 0.16;
    filter: blur(4px);
}

/* =================== SJENE OBJEKATA (po satu) =================== */
#vrt-shadows { pointer-events: none; filter: blur(3.5px); }
.vrt-shadow,
.vrt-shadow * {
    fill: #0a0a0a !important;
    stroke: none !important;
}
/* Diskretne sjene — sunčevo svjetlo, ne tama */
.vrt-shadow--tree      { opacity: 0.15; }
.vrt-shadow--structure { opacity: 0.18; }
.vrt-shadow--bed       { opacity: 0.09; }

/* novosti */
.news-card { background: var(--bg); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .9rem; border-left: 5px solid var(--muted); }
.news-card--bolest     { border-left-color: var(--st-tuzna); }
.news-card--krada      { border-left-color: #444; }
.news-card--nova_vrsta { border-left-color: var(--st-sretna); }
.news-card--dogadaj    { border-left-color: var(--brand-accent); }
.news-card__tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.news-card__title { margin: .25rem 0 .4rem; font-size: 1.2rem; }
.news-card__body { margin: 0; }
.news-card__meta { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); }

/* =================== DESKTOP (max 1400px sadržaj) =================== */
@media (min-width: 900px) {
    .modal__sheet { width: min(820px, 92vw); }
}

/* === v3: interaktivni elementi unutar plana (drveće i objekti) === */
.vrt-clickable { cursor: pointer; transition: filter .15s ease; }
.vrt-clickable:hover,
.vrt-clickable:focus { filter: drop-shadow(0 0 6px var(--brand-accent)); outline: none; }
.vrt-tree:hover,
.vrt-tree:focus { filter: drop-shadow(0 0 8px #3f9d3f); }
.vrt-structure:hover,
.vrt-structure:focus { filter: drop-shadow(0 0 8px var(--brand-accent)); }


/* =================== TRAJNA AI PROCJENA U BED MODAL-u =================== */
.bed-ai-note {
    background: #f6fbef;
    border-left: 3px solid var(--brand);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 1.4rem 0 0;
    font-size: .9rem;
}
.bed-ai-note__head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: .5rem;
}
.bed-ai-note__icon { font-size: 1.05rem; }
.bed-ai-note__label {
    font-weight: 700; color: var(--brand-dark);
    font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
}
.bed-ai-note__date {
    font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--muted); font-size: .85em;
}
.bed-ai-note__body {
    display: flex; gap: 12px; align-items: flex-start;
}
.bed-ai-note__thumb {
    flex: 0 0 130px;
    width: 130px; height: auto;
    margin: 0; border-radius: 6px;
    display: block; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.bed-ai-note__text {
    flex: 1 1 auto; min-width: 0;
    margin: 0; line-height: 1.45; color: #2d3a2d;
}

/* Mobilni: na uskom slika gore, tekst dolje */
@media (max-width: 480px) {
    .bed-ai-note__body { flex-direction: column; }
    .bed-ai-note__thumb { flex: 0 0 auto; width: 110px; }
}

/* =================== RUČNA PROMJENA STATUSA (samo logirani) =================== */
.hidden { display: none !important; }

.status-edit-toggle {
    margin-left: 6px;
    font: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer; background: transparent; border: 0;
    color: var(--brand-dark); text-decoration: underline; text-decoration-style: dotted;
    padding: 2px 4px; border-radius: 4px;
}
.status-edit-toggle:hover { background: rgba(31, 111, 67, .08); }
.status-edit-toggle.is-open { background: rgba(31, 111, 67, .15); }

.status-edit {
    margin: 0 0 1rem;
    padding: 12px;
    background: #fbf9ec;
    border: 1px dashed #d4c573;
    border-radius: 8px;
}
.status-edit__label {
    display: block; font-weight: 700; font-size: .9rem; margin-bottom: 8px;
}
.status-edit__select {
    display: block; width: 100%; margin-top: 4px; padding: 6px 8px;
    font: inherit; border: 1px solid #ccc; border-radius: 6px; background: #fff;
}
.status-edit__actions {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.status-edit__actions .btn { align-self: auto; padding: .4rem .9rem; font-size: .9rem; }
.status-edit__hint {
    margin: 8px 0 0; font-size: .78rem; color: var(--muted);
}

/* =================== AI FLOW OVERLAY (UX TIJEKOM UPLOAD-A I PROCJENE) =================== */
.ai-flow {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.ai-flow[hidden] { display: none !important; }
.ai-flow__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 30, 22, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ai-flow__card {
    position: relative; z-index: 1;
    background: linear-gradient(180deg, #f5fbeb 0%, #e8f4d8 100%);
    border-radius: 20px;
    padding: 32px 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    max-width: 100%; width: 420px;
    text-align: center;
    animation: aiFlowIn .35s cubic-bezier(.16,.95,.45,1.05);
}
@keyframes aiFlowIn {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.ai-flow__stage { animation: aiStageIn .3s ease-out; }
@keyframes aiStageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-flow__icon {
    font-size: 4.2rem; line-height: 1; margin-bottom: 12px;
    filter: drop-shadow(0 4px 8px rgba(31, 111, 67, .25));
}
.ai-flow__icon--spin { animation: aiPulse 1.4s ease-in-out infinite; }
@keyframes aiPulse {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50%      { transform: scale(1.18) rotate(3deg); }
}
.ai-flow__title {
    margin: 0 0 6px;
    font-size: 1.3rem; font-weight: 800;
    color: var(--brand-dark);
    letter-spacing: -.01em;
}
.ai-flow__msg { margin: 0 0 16px; color: #2d3a2d; font-size: .95rem; min-height: 1.4em; }
.ai-flow__progress {
    height: 8px; background: rgba(31, 111, 67, .15); border-radius: 4px; overflow: hidden;
    margin: 8px 0 0;
}
.ai-flow__bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--brand) 0%, #5fb96e 100%);
    border-radius: 4px;
    transition: width .25s ease-out;
}
.ai-flow__dots {
    display: flex; gap: 8px; justify-content: center; margin-top: 14px;
}
.ai-flow__dots span {
    width: 10px; height: 10px;
    background: var(--brand); border-radius: 50%;
    animation: aiDot 1.4s ease-in-out infinite;
}
.ai-flow__dots span:nth-child(2) { animation-delay: .2s; }
.ai-flow__dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aiDot {
    0%, 80%, 100% { transform: scale(.5); opacity: .4; }
    40%           { transform: scale(1);  opacity: 1; }
}
.ai-flow__result {
    background: #fff; border-radius: 12px;
    padding: 14px 14px 16px; margin: 6px 0 16px;
    box-shadow: inset 0 0 0 1px rgba(31, 111, 67, .15);
}
.ai-flow__status {
    margin-bottom: 10px;
    display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.ai-flow__resultEmoji { font-size: 1.6rem; line-height: 1; }
.ai-flow__status .statuschip { font-size: .95rem; padding: .35rem 1rem; }
.ai-flow__reasoning {
    margin: 0; text-align: left;
    line-height: 1.5; color: #2d3a2d; font-size: .94rem;
}
.ai-flow__actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ai-flow__actions .btn { padding: .7rem 1.3rem; font-weight: 700; font-size: .95rem; }
.ai-flow__hint {
    margin: 12px 0 0; font-size: .78rem; color: var(--muted);
}

/* Ghost varijanta dugmeta (sekundarno) */
.btn--ghost {
    background: transparent !important;
    color: var(--brand-dark) !important;
    box-shadow: inset 0 0 0 2px var(--brand);
}
.btn--ghost:hover {
    background: rgba(31, 111, 67, .08) !important;
}

/* zaključaj scroll u body-ju kad je overlay otvoren */
body.no-scroll { overflow: hidden; }

@media (max-width: 480px) {
    .ai-flow__card { padding: 24px 20px 20px; }
    .ai-flow__title { font-size: 1.15rem; }
    .ai-flow__icon { font-size: 3.5rem; }
    .ai-flow__actions { flex-direction: column; }
    .ai-flow__actions .btn { width: 100%; }
}

/* =================== LIGHTGALLERY toolbar custom =================== */
/* Zoom toggle: pokaži samo + dok nije zoomirano, samo − kad jest.
   lightGallery dodaje klasu .lg-zoomed na .lg-outer kad se slika poveća. */
.lg-outer .lg-zoom-in  { display: inline-block; }
.lg-outer .lg-zoom-out { display: none; }
.lg-outer.lg-zoomed .lg-zoom-in  { display: none; }
.lg-outer.lg-zoomed .lg-zoom-out { display: inline-block; }

/* Counter ("1/5") — diskretno postiliziran u gornjem lijevom kutu (već je tu po defaultu) */
.lg-toolbar .lg-counter {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    padding-top: 12px;
    padding-left: 14px;
}

/* Na mobitelima sakrij strelice (svipe radi i bez njih) */
@media (max-width: 768px) {
    .lg-actions .lg-prev,
    .lg-actions .lg-next {
        display: none !important;
    }
}

/* =================== NOVOSTI — galerija po članku + collapsible upload =================== */
.news-card__gallery {
    margin: 12px 0 0;
}
.news-card__upload {
    margin-top: 12px;
}
.news-card__upload summary {
    cursor: pointer; font-weight: 600; font-size: .9rem;
    color: var(--brand-dark);
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-block;
    background: rgba(31, 111, 67, .08);
}
.news-card__upload summary:hover { background: rgba(31, 111, 67, .15); }
.news-card__upload[open] summary { margin-bottom: 8px; }

/* =================== WEATHER WIDGET clickable state =================== */
#weather:not(.is-empty) {
    cursor: pointer;
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}
#weather:not(.is-empty):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
#weather:not(.is-empty):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* =================== WEATHER DETAIL OVERLAY (7-dnevna prognoza) =================== */
.weather-detail {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.weather-detail[hidden] { display: none !important; }
.weather-detail__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 30, 22, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.weather-detail__card {
    position: relative; z-index: 1;
    background: linear-gradient(180deg, #f5fbeb 0%, #e8f4d8 100%);
    border-radius: 20px;
    padding: 24px 22px 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    max-width: 100%; width: 520px;
    max-height: 90vh; overflow-y: auto;
    animation: aiFlowIn .35s cubic-bezier(.16,.95,.45,1.05);
}
.weather-detail__close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    color: var(--ink);
}
.weather-detail__close:hover { background: rgba(0, 0, 0, .15); }
.weather-detail__title {
    margin: 0 0 4px;
    font-size: 1.15rem; font-weight: 800;
    color: var(--brand-dark);
    text-align: center;
}
.weather-detail__sub {
    margin: 0 0 16px;
    text-align: center; font-size: .9rem;
    color: var(--muted);
}
.weather-detail__list {
    display: flex; flex-direction: column; gap: 8px;
}
.weather-detail__loading,
.weather-detail__err {
    text-align: center; padding: 20px;
    color: var(--muted); font-size: .95rem;
}
.weather-detail__err { color: #b94232; }
.weather-detail__row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
        "icon main temp"
        "icon meta meta";
    gap: 4px 10px;
    background: rgba(255, 255, 255, .65);
    border-radius: 12px;
    padding: 10px 12px;
    align-items: center;
    box-shadow: inset 0 0 0 1px rgba(31, 111, 67, .08);
}
.wd-row__icon {
    grid-area: icon;
    color: var(--brand-dark);
    width: 36px; height: 36px;
}
.wd-row__icon svg { width: 100%; height: 100%; display: block; }
.wd-row__main { grid-area: main; min-width: 0; }
.wd-row__day {
    font-weight: 700; color: var(--ink);
    font-size: .95rem;
}
.wd-row__day small {
    font-weight: 500; color: var(--muted); margin-left: 4px;
}
.wd-row__label {
    font-size: .82rem; color: var(--muted);
    margin-top: 1px;
}
.wd-row__temp {
    grid-area: temp;
    text-align: right; font-size: 1rem; white-space: nowrap;
}
.wd-row__temp strong { color: #b94232; font-weight: 800; }
.wd-row__temp span { color: var(--muted); margin-left: 2px; }
.wd-row__meta {
    grid-area: meta;
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: .78rem; color: var(--muted);
    margin-top: 2px;
}
.weather-detail__src {
    margin: 14px 0 0; text-align: center;
    font-size: .75rem; color: var(--muted);
}
.weather-detail__src a { color: inherit; text-decoration: underline; }

@media (max-width: 480px) {
    .weather-detail__card { padding: 22px 16px 14px; }
    .wd-row__meta { font-size: .72rem; gap: 6px; }
    .weather-detail__row { padding: 8px 10px; }
}

/* =================== PHOTO DELETE BUTTON (na vlastitim, < 24h) =================== */
.gallery__item { position: relative; }
.gallery__item-del {
    position: absolute; top: 6px; right: 6px;
    width: 28px; height: 28px;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: #fff; font-size: 1.05rem; line-height: 1; font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.gallery__item-del:hover {
    background: #b94232;
    transform: scale(1.1);
}
.gallery__item-del:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.gallery__item-del:disabled {
    opacity: .5; cursor: wait;
}

/* =================== RESPONSIVE VIDEO EMBED (YouTube i sl.) =================== */
.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;     /* 16:9 omjer */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    margin: 24px 0;
    background: #000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}
.video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* h2 unutar rich-text body-ja stranica — diskretniji od defaulta */
.page__rich h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.25rem 0 .35rem;
    color: var(--brand-dark);
}

/* Full-bleed varijanta video embeda — proboj iz centriranog .page kontejnera u 100vw */
.video-embed--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    margin-top: 32px;
    margin-bottom: 0;
}