/* Portal stambene zajednice Ohridska 5 — Zemun
   Paleta „Svetla radna tabla": bela podloga, topla siva, dunavsko plavo,
   zeleno kao akcenat. Bez eksternih fontova i skripti. */

:root {
    --plava: #2863ab;
    --plava-tamna: #004b97;
    --plava-svetla: #e9f3ff;
    --plava-ivica: #cbd9ec;
    --plava-tekst: #062d59;
    --zelena: #197037;
    --zelena-tamna: #12592b;
    --zelena-svetla: #e1f5e4;
    --crvena: #b63b39;
    --crvena-svetla: #f8d4d1;
    /* Neutralne su tople (žućkasta osnova), ne hladno plavo-sive — po tome se
       „svetla radna tabla" najviše razlikuje od ranije palete. */
    --naslov: #1c1f24;
    --tekst: #303338;
    --tekst-bled: #6e7278;
    --linija: #e2e1de;
    --linija-jaca: #d8d7d4;
    --linija-blaga: #f1f0ee;
    --pozadina: #f7f7f5;
    --pozadina-blaga: #fafaf9;
    --belo: #ffffff;
    /* Širina sadržaja: javni/stanarski deo 1160px, administracija skoro puna
       širina ekrana — spiskovi sa mnogo kolona inače gube prostor na margine. */
    --sirina: 1160px;
}

body.admin-area { --sirina: 1920px; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tekst);
    background: var(--pozadina);
}

img { max-width: 100%; }

a { color: var(--plava); }
a:hover { color: var(--plava-tamna); }

h1, h2, h3 { line-height: 1.25; color: var(--naslov); letter-spacing: -.01em; }
h1 { font-size: 1.7rem; margin: 0 0 .8rem; }
h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
h3 { font-size: 1.1rem; margin: 0 0 .4rem; }

/* ---------- Zaglavlje ---------- */

.site-header {
    background: var(--belo);
    border-bottom: 1px solid var(--linija);
}

.site-header .inner {
    max-width: var(--sirina);
    margin: 0 auto;
    padding: .7rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--naslov);
}

.brand img { height: 52px; width: auto; }

.brand .title { font-size: 1.25rem; font-weight: 700; }
.brand .subtitle { display: block; font-size: .85rem; font-weight: 400; color: var(--tekst-bled); }

/* ---------- Meni korisnika (zaglavlje, desno) ---------- */

.user-menu {
    position: relative;
    margin-left: auto;
}

/* Blok, ne flex: Safari na iPhone-u ne otvara <details> kad je <summary>
   flex kontejner — dodir prosto ne uradi ništa. Raspored je u omotaču. */
.user-menu > summary {
    display: block;
    padding: .3rem .5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--tekst);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    list-style: none; /* bez podrazumevane strelice pregledača */
}

.user-summary-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--pozadina-blaga); border-color: var(--linija); }
.user-menu[open] > summary { background: var(--pozadina-blaga); border-color: var(--linija); }
.user-menu > summary:focus-visible { outline: 3px solid var(--plava-svetla); }

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--plava-svetla);
    color: var(--plava-tamna);
}


.user-caret { font-size: .7rem; color: var(--tekst-bled); }
.user-menu[open] .user-caret { transform: rotate(180deg); }

.user-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + .35rem);
    right: 0;
    min-width: 12rem;
    padding: .3rem;
    border: 1px solid var(--linija);
    border-radius: 10px;
    background: var(--belo);
    box-shadow: 0 12px 30px rgba(28, 31, 36, .16);
}

.user-panel form { margin: 0; }

.user-panel-item {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    color: var(--tekst);
    cursor: pointer;
}

.user-panel-item:hover { background: var(--plava-svetla); color: var(--plava-tamna); }
.user-panel-logout:hover { background: var(--crvena-svetla); color: var(--crvena); }

/* Odjava nije ista vrsta radnje kao ostale stavke — stoji ispod crte. */
.user-panel-sep {
    height: 1px;
    margin: .3rem .2rem;
    background: var(--linija);
}

/* U administraciji nijedan tab glavne trake nije aktivan, pa se obeleži
   okidač menija — inače nema nagoveštaja gde se korisnik nalazi. */
.user-menu.in-admin > summary {
    background: var(--plava-svetla);
    border-color: var(--plava-ivica);
    color: var(--plava-tamna);
}

@media (max-width: 760px) {
    /* Na telefonu ostaje uz logo u prvom redu, samo bez imena — ikonica je
       dovoljna, a pretraga ispod dobija ceo red. */
    .user-menu > summary { font-size: .9rem; padding: .3rem; }
    .user-menu .user-name { display: none; }
    .user-menu { flex: none; }

    .site-header .inner { padding: .55rem 1rem; gap: .6rem; }

    /* Naslov sme da se skupi da bi meni korisnika stao pored njega. */
    .brand { flex: 1 1 auto; min-width: 0; gap: .55rem; }
    .brand img { height: 40px; }
    .brand .title { font-size: 1.02rem; line-height: 1.25; }
    .brand .subtitle { font-size: .78rem; }
}

/* ---------- Navigacija ---------- */

.main-nav {
    background: var(--belo);
    border-bottom: 1px solid var(--linija);
}

.main-nav .inner {
    max-width: var(--sirina);
    margin: 0 auto;
    padding: 0 1.1rem;
    display: flex;
    flex-wrap: wrap;
}

/* Hamburger (samo na malim ekranima; bez JavaScript-a) */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

.nav-links {
    display: flex;
    flex-wrap: wrap;
}

.main-nav a {
    color: var(--tekst);
    text-decoration: none;
    padding: .65rem .9rem;
    display: inline-block;
    font-weight: 600;
    /* Podvlaka aktivnog taba je unutrašnja senka, ne border — tako aktivna i
       neaktivna stavka imaju istu visinu i traka se ne pomera pri prelasku. */
    box-shadow: inset 0 -2.5px 0 transparent;
}

.main-nav a:hover { background: var(--pozadina-blaga); color: var(--plava-tamna); }
.main-nav a.active {
    color: var(--plava-tamna);
    font-weight: 700;
    box-shadow: inset 0 -2.5px 0 var(--plava);
}

.main-nav form { margin: 0; }
.main-nav button {
    background: none;
    border: 0;
    color: var(--tekst-bled);
    font: inherit;
    font-weight: 600;
    padding: .65rem .9rem;
    cursor: pointer;
}
.main-nav button:hover { background: var(--pozadina-blaga); color: var(--crvena); }

/* Zelena traka: na desktopu je zamenjuje bočni meni, vidljiva samo na malim ekranima */
.sub-nav {
    background: var(--pozadina-blaga);
    border-bottom: 1px solid var(--linija);
    display: none;
}

@media (max-width: 900px) {
    .sub-nav { display: block; }
}
.sub-nav .inner {
    max-width: var(--sirina);
    margin: 0 auto;
    padding: 0 1.1rem;
    display: flex;
    /* Na uskim ekranima traka se ne lomi u više redova nego se skroluje prstom */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sub-nav a {
    color: var(--tekst);
    text-decoration: none;
    padding: .5rem .8rem;
    margin: .3rem .1rem;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}
.sub-nav a:hover { background: var(--plava-svetla); color: var(--plava-tamna); }
.sub-nav a.active { background: var(--plava); color: var(--belo); }

/* ---------- Mobilni meni ---------- */

@media (max-width: 760px) {
    .nav-toggle-label {
        display: block;
        color: var(--tekst);
        font-weight: 700;
        font-size: 1.05rem;
        padding: .75rem .9rem;
        cursor: pointer;
        user-select: none;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav-toggle:checked ~ .nav-links { display: flex; }

    .main-nav .nav-links a,
    .main-nav .nav-links button {
        display: block;
        width: 100%;
        text-align: left;
        padding: .9rem 1rem;
        font-size: 1.05rem;
        border-top: 1px solid var(--linija);
        box-shadow: none;
    }

    .main-nav .nav-links a.active { box-shadow: inset 3px 0 0 var(--plava); }

    .main-nav .nav-links form { width: 100%; }
}

/* ---------- Sadržaj ---------- */

.page {
    max-width: var(--sirina);
    margin: 0 auto;
    padding: 1.2rem 1rem 3rem;
}

/* ---------- Bočni meni administracije ---------- */

.with-sidebar {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
}

.admin-sidebar {
    flex: 0 0 238px;
    position: sticky;
    top: 1rem;
    background: var(--pozadina-blaga);
    border: 1px solid var(--linija);
    border-radius: 11px;
    padding: .6rem;
}

.admin-sidebar .sidebar-group { margin-top: .6rem; }

.admin-sidebar .sidebar-group summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tekst-bled);
    cursor: pointer;
    user-select: none;
    list-style: none; /* bez podrazumevane strelice pregledača */
}

.admin-sidebar .sidebar-group summary::-webkit-details-marker { display: none; }
.admin-sidebar .sidebar-group summary:hover { background: var(--linija-blaga); color: var(--naslov); }

.admin-sidebar .sidebar-chevron {
    font-size: .7rem;
    transition: transform .15s;
}

.admin-sidebar .sidebar-group[open] > summary .sidebar-chevron { transform: rotate(90deg); }

.admin-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .6rem;
    border-radius: 7px;
    text-decoration: none;
    color: var(--tekst);
    font-weight: 600;
    font-size: .95rem;
}

.admin-sidebar .sidebar-link:hover { background: var(--plava-svetla); color: var(--plava-tamna); }
.admin-sidebar .sidebar-link.active { background: var(--plava); color: var(--belo); }
.admin-sidebar .sidebar-top { font-size: 1rem; }

/* Broj nezavršenih stavki (kvarovi, poruke). Broji samo ono što traži radnju —
   rešeni i odbijeni kvarovi, pročitane poruke se ne broje. Kad je nula,
   značka se uopšte ne ispisuje. */
.sidebar-badge {
    margin-left: auto;
    min-width: 1.35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--crvena);
    color: var(--belo);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

.admin-sidebar .sidebar-link.active .sidebar-badge { background: var(--belo); color: var(--plava-tamna); }

.admin-main {
    flex: 1;
    min-width: 0; /* dozvoljava horizontalni skrol tabela unutar flex-a */
}

@media (max-width: 900px) {
    .admin-sidebar { display: none; }
    .with-sidebar { display: block; }
}

.card {
    background: var(--belo);
    border: 1px solid var(--linija);
    border-radius: 11px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.2rem;
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.card-green { border-top: 4px solid var(--zelena); }
.card-blue { border-top: 4px solid var(--plava); }
.card-red { border-top: 4px solid var(--crvena); }

/* Kartica sa formom: centrirana i ograničene širine — red unosa preko cele
   širine administracije (1920px) oko ne može da prati. Ranije je svaka
   strana nosila svoju širinu u style atributu, od 480 do 760px, bez razloga
   za razliku; ovde su tri: prijava je uska, uređivanje teksta široko. */
.card-form { max-width: 640px; margin-inline: auto; }
.card-form-narrow { max-width: 480px; margin-inline: auto; }
.card-form-wide { max-width: 760px; margin-inline: auto; }

/* Kartica sa podešavanjima: ograničena kao forma, ali poravnata levo uz
   naslov strane — centrirana bi „pobegla" od naslova na širokom ekranu. */
.card-settings { max-width: 760px; }

/* Red podešavanja: naziv, opis i izbor stanja, odvojen crtom od sledećeg. */
.setting-row {
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--linija);
}

.setting-row:last-of-type { border-bottom: 0; }
.setting-name { font-weight: 700; }

/* Nekoliko ponuđenih izbora u jednom redu (stanje modula, kućice na pregledu
   izvoda), sa razmakom većim od običnog — da se „Uključen za sve" i „Samo
   administrator" ne slepe u jednu rečenicu. */
.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: .4rem;
}

/* Mreža kućica za biranje iz dugačkog spiska (svi stanovi u zgradi). Kolone
   se same broje po širini, pa 93 stana stane bez skrolovanja, a na telefonu
   se svede na dve-tri kolone. Ograničena visina sa sopstvenim skrolom — bez
   toga bi spisak stanova odgurao dugme „Dodeli" ispod ekrana. */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .35rem .8rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--linija);
    border-radius: 6px;
}

/* Razmak iznad naslova odeljka usred duge forme. */
.gap-top-lg { margin-top: 1.5rem; }

/* Ćelija sa slobodnim tekstom: ograničena širina i lomljenje dugih nizova
   (JSON, putanje) da jedna izmena ne razvuče celu tabelu. */
td.cell-text { max-width: 420px; overflow-wrap: anywhere; }

/* Kartica u kartici (stavka tarife u spisku stavki) — uža od samostalne. */
.card .card { margin-bottom: .8rem; }

/* Naziv stavke levo, njena radnja desno, u istom redu unutar kartice.
   Poravnanje po osnovnoj liniji, da naziv i dugme stoje na istom pismu. */
.item-head {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: space-between;
    align-items: baseline;
}

/* Red sa dugmadima i kućicama iznad tabele (izvoz, preraspodela). */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: .6rem;
}

/* Tekst uz kućicu za štikliranje nije naziv polja, pa nije ni podebljan. */
.check-inline { font-weight: normal; }

/* Polje za iznos ne treba celu širinu — dinari staju u nekoliko cifara. */
.input-amount { max-width: 130px; }

/* Polje za jedan kratak broj (redosled, sprat). */
.input-small { max-width: 8rem; }

/* Ceduljica sa pristupnim podacima za stanara — uska, da se odseče i preda. */
.card-slip { max-width: 480px; }

/* Lozinka na ceduljici: jednakoširoko pismo, da se 0 i O razlikuju. */
.password { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.15rem; }

/* Polje koje u redu forme uzima ostatak prostora (npr. slobodan tekst). */
.field-grow { flex: 1 1 200px; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    /* Kartice unutar mreže gube svoju donju marginu (pravilo ispod), pa je
       mreža daje sama — bez toga se ono što sledi zalepi uz nju. */
    margin-bottom: 1.2rem;
}

/* Razmak drži mreža; kartica koja je direktno u njoj ne dodaje svoj. */
.grid-2 > .card { margin-bottom: 0; }

/* Mreža unutar kartice raspoređuje polja jedne forme; tu razmak ispod ne
   treba, sam okvir kartice ga već daje. */
.card .grid-2 { margin-bottom: 0; }

@media (max-width: 760px) {
    .grid-2 { grid-template-columns: 1fr; }
}

.muted { color: var(--tekst-bled); }

/* Stanje na računu uz naslov strane Finansije — jedini broj koji vezuje
   portal za bankovni izvod, pa sme da bude krupniji od ostatka teksta. */
.balance-line { font-size: 1.15rem; margin-bottom: .3rem; }
.small { font-size: .9rem; }

/* ---------- Dugmad ---------- */

.btn {
    display: inline-block;
    vertical-align: middle;
    background: var(--plava);
    color: var(--belo);
    /* Providna ivica iste debljine kao kod .btn-outline — bez nje bi puna
       dugmad bila niža od outline dugmadi za dvostruku debljinu ivice,
       što se najviše videlo na .btn-small. */
    border: 2px solid transparent;
    border-radius: 6px;
    padding: .5rem 1.1rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--plava-tamna); color: var(--belo); }

.btn-green { background: var(--zelena); }
.btn-green:hover { background: var(--zelena-tamna); }

.btn-danger { background: var(--crvena); }
.btn-danger:hover { background: #8f2a22; }

.btn-outline {
    background: var(--belo);
    color: var(--plava);
    border-color: var(--plava);
}
.btn-outline:hover { background: var(--plava-svetla); color: var(--plava-tamna); }

.btn-small { padding: .3rem .7rem; font-size: .9rem; }

/* ---------- Forme ---------- */

label { display: block; font-weight: 600; margin-bottom: .25rem; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="file"],
input[type="search"], select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    line-height: 1.4;
    /* Chrome padajućoj listi nameće sopstveni prored i ignoriše line-height,
       pa se visina polja i liste ne poklapa kad stoje jedno pored drugog.
       Zajednička min-visina ih izjednačava bez obzira na to kako browser
       računa sadržaj. Na textarea nema uticaja — ona je uvek viša. */
    min-height: 2.6em;
    border: 1px solid #9db2c4;
    border-radius: 6px;
    background: var(--belo);
    color: var(--tekst);
}

/* Za duži tekst ostaje prozračniji prored. */
textarea { line-height: 1.6; }

/* Polje za lozinku sa dugmetom za prikaz. Dugme stoji preko polja, pa polje
   dobija desni razmak da tekst ne prolazi ispod ikonice. */
.password-field { position: relative; }
.password-field input { padding-right: 2.8rem; }

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 6px 6px 0;
    background: none;
    color: var(--tekst-bled);
    cursor: pointer;
}

/* Koje se oko vidi govori aria-pressed, isto stanje koje čita i čitač ekrana.
   Atribut „hidden" ovde ne radi: pravilo pregledača za njega važi samo za HTML
   elemente, a putanje unutar <svg> su u drugom prostoru imena. */
.password-toggle [data-eye-off] { display: none; }
.password-toggle[aria-pressed="true"] [data-eye-open] { display: none; }
.password-toggle[aria-pressed="true"] [data-eye-off] { display: inline; }

.password-toggle:hover { color: var(--plava-tamna); }
.password-toggle:focus-visible { outline: 3px solid var(--plava-svetla); }

/* Bez ovoga Safari i stariji WebKit crtaju polje za pretragu po svom
   („searchfield"): zaobljeni okvir i sopstvene margine, pa odudara od
   ostalih polja. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--plava-svetla);
    border-color: var(--plava);
}

.field { margin-bottom: 1rem; }

.field .error { color: var(--crvena); font-size: .9rem; margin-top: .2rem; }

/* Polje uz koje ide kratak podatak (redosled, šifra) — ne treba mu ceo red. */
.field-narrow { max-width: 12rem; }

/* Dva-tri kratka polja jedno uz drugo u formi koja ide punom širinom; bez
   ovoga bi datum bio razvučen preko celog ekrana. Razmak ispod drži .field. */
.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.2rem;
}

/* Polje srednje širine u traci sa radnjama (padajuća lista statusa). */
.field-wide { max-width: 220px; }

/* Oznaka koja stoji u redu sa poljem, a ne iznad njega — nema svoj razmak. */
.label-inline { display: inline; margin: 0; }

/* Textarea u koju se piše tekst dokumenta, a ne kod: isto pismo kao ostatak
   strane, jer se tako i štampa. */
textarea.prose { font-family: inherit; line-height: 1.6; }

/* Kolona sa oznakom/šifrom drži stalnu širinu, da se šifre poravnaju. */
td.col-token { width: 12rem; }

/* Mali razmak iznad elementa koji dolazi odmah posle forme ili tabele. */
.gap-top { margin-top: .6rem; }

/* Isto, ali manje — dugme ispod rečenice koju potvrđuje. */
.gap-top-sm { margin-top: .5rem; }

/* Uzak red teksta između dva bloka (podaci naloga na pregledu izvoda). */
.gap-y-sm { margin: .3rem 0; }

/* Razmak ispod polja u nizu (padajuća lista pa napomena pa dugme). */
.gap-bottom-sm { margin-bottom: .3rem; }
.gap-bottom { margin-bottom: .6rem; }

/* Tekst koji je korisnik uneo u textarea — prelomi redova su njegovi i
   moraju da ostanu, a HTML ih inače guta. */
.pre-line { white-space: pre-line; }

/* Naslov koji je prvi u svom okviru — okvir već drži razmak iznad. */
.no-gap-top { margin-top: 0; }
.no-gap { margin: 0; }

.checkbox-line { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.checkbox-line input { width: 1.2rem; height: 1.2rem; }

fieldset {
    border: 1px solid var(--linija);
    border-radius: 8px;
    margin: 0 0 1rem;
    padding: .8rem 1rem;
}
legend { font-weight: 700; color: var(--plava-tamna); padding: 0 .4rem; }

/* ---------- Zaglavlje strane sa radnjama ---------- */

/* Naslov levo, radnje nad celim spiskom desno („+ Nova transakcija", „Uvoz
   izvoda"). Radnje ne smeju u traku sa filterima — tamo se čitaju kao još
   jedno dugme koje sužava spisak. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.page-head h1 { margin: 0; }

.page-head-actions, .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Red forme ---------- */

/* Nekoliko polja i dugme u jednom redu (otpremanje datoteke, brzi unos).
   Za spiskove sa filterima ide .filters — ovo je za forme sa dva-tri polja,
   gde mreža od dvanaest kolona nema šta da poravna. */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: end;
}

.form-row .field { margin-bottom: 0; }

/* ---------- Traka sa filterima ---------- */

/* Mreža od 12 kolona umesto slobodnog prelamanja: polja različitih širina
   se u flex traci prelamaju kako stigne, pa se raspored menja sa svakim
   dodatim filterom i oznake se razilaze po visini. */
.filters {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .8rem 1rem;
    align-items: end;
}

/* Razmak drži mreža, ne polje. */
.filters .field { margin-bottom: 0; }

.filters > * { grid-column: span 3; }
.filters .filter-4 { grid-column: span 4; }
.filters .filter-5 { grid-column: span 5; }
.filters .filter-6 { grid-column: span 6; }
.filters .filter-full { grid-column: span 12; }

@media (max-width: 900px) {
    .filters > * { grid-column: span 6; }
    .filters .filter-5, .filters .filter-6, .filters .filter-full { grid-column: span 12; }
}

@media (max-width: 560px) {
    .filters > *, .filters .filter-4 { grid-column: span 12; }
}

/* Od–do kao jedan raspon, da se ne razdvoje u dva reda. */
.filter-range { display: flex; align-items: center; gap: .4rem; }
.filter-range input { min-width: 0; }
.filter-range span { color: var(--tekst-bled); }

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .filter-actions { justify-content: flex-start; }
}

/* Čipovi kategorija stoje u <fieldset> sa <legend>, da budu jedno polje sa
   oznakom a ne trinaest nepovezanih kućica; okvir se skida da izgleda kao
   ostala polja u traci. */
.filters fieldset { border: 0; margin: 0; padding: 0; }

.filters legend { padding: 0; margin-bottom: .35rem; font-size: 1rem; font-weight: 600; color: inherit; }

.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Kad tabela stoji u istoj kartici sa filterima, treba joj razmak od trake —
   inače prvi red tabele izgleda kao još jedno polje forme. */
.filters + .table-wrap { margin-top: 1rem; }

.filter-chip-sign { font-weight: 700; }

/* Kategorije kao čipovi umesto padajuće liste sa više izbora: lista je bila
   visoka pet redova i gurala susedna polja, a izabrano se videlo tek kad se
   prelista. Sam checkbox je sakriven ali ostaje u toku — tastatura i čitači
   ekrana rade normalno, a stanje se vidi po boji čipa. */
.filter-chip { display: inline-block; margin: 0; font-weight: 400; cursor: pointer; }

.filter-chip input { position: absolute; width: 0; height: 0; opacity: 0; }

.filter-chip-box {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid #9db2c4;
    border-radius: 999px;
    background: var(--belo);
    font-size: .9rem;
    line-height: 1.35;
}

.filter-chip:hover .filter-chip-box { border-color: var(--plava); background: var(--plava-svetla); }

.filter-chip input:checked + .filter-chip-box {
    background: var(--plava);
    border-color: var(--plava);
    color: var(--belo);
    font-weight: 600;
}

.filter-chip input:focus-visible + .filter-chip-box { outline: 3px solid var(--plava-svetla); }

/* Predznak smera (+/−) na izabranom čipu mora da pobeli, inače se zelena i
   crvena gube na plavoj podlozi. */
.filter-chip input:checked + .filter-chip-box .amount-in,
.filter-chip input:checked + .filter-chip-box .amount-out { color: var(--belo); }

/* Šta je trenutno uključeno, sa „×" za skidanje pojedinačnog filtera. */
.filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; }

.filter-active a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border: 1px solid var(--plava);
    border-radius: 999px;
    background: var(--plava-svetla);
    color: var(--plava-tamna);
    font-size: .9rem;
    text-decoration: none;
}

.filter-active a:hover { background: var(--plava); color: var(--belo); }

.filter-active a span { font-weight: 700; }

/* ---------- Poruke ---------- */

.alert {
    border-radius: 8px;
    padding: .8rem 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid;
}
/* Poslednji pasus ne vuče prazan prostor do ivice trake (kartica to već ima). */
.alert > :last-child { margin-bottom: 0; }

/* Nabrajanje unutar trake (npr. koji izvodi fale) — bliže tekstu iznad
   nego samostalan spisak i uvučeno taman da se vide tačke. */
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.alert-success { background: var(--zelena-svetla); border-color: var(--zelena); color: var(--zelena-tamna); }
.alert-error { background: var(--crvena-svetla); border-color: var(--crvena); color: var(--crvena); }
.alert-info { background: var(--plava-svetla); border-color: var(--plava); color: var(--plava-tamna); }

/* ---------- Tabele ---------- */

.table-wrap { overflow-x: auto; }

/* ---------- Isključenja: tabela na širokom ekranu, harmonika na uskom ---------- */

/* Spisak ulica je dugačak, pa je u tabeli na telefonu pravio visoke redove
   pored praznih kolona. Na uskom ekranu se zato prikazuje kao sklopive
   stavke, sa ulicama sakrivenim dok se ne dodirnu. */
.outage-list { display: none; }

.outage-item {
    border: 1px solid var(--linija);
    border-radius: 8px;
    margin-bottom: .4rem;
    background: var(--belo);
}

/* Blok, ne flex: Safari na iPhone-u ne otvara <details> čiji je <summary>
   flex kontejner. Raspored je u omotaču .outage-summary. */
.outage-item > summary {
    display: block;
    padding: .55rem .7rem;
    cursor: pointer;
    list-style: none;
}

.outage-item > summary::-webkit-details-marker { display: none; }

.outage-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.outage-when { display: flex; align-items: center; gap: .4rem; }

.outage-item > summary::after {
    content: '▾';
    float: right;
    margin-top: -1.4rem;
    color: var(--tekst-bled);
    font-size: .75rem;
}

.outage-item[open] > summary::after { content: '▴'; }

.outage-body {
    padding: 0 .7rem .6rem;
    border-top: 1px solid var(--linija-blaga);
    margin-top: .1rem;
    padding-top: .5rem;
}

@media (max-width: 760px) {
    .outages-table { display: none; }
    .outage-list { display: block; }
}

/* Tabela sklopljena u <details> — razmak od reda sa naslovom sklopke. */
details > .table-wrap { margin-top: .6rem; }

table.list {
    width: 100%;
    border-collapse: collapse;
    background: var(--belo);
}

table.list th, table.list td {
    text-align: left;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--linija);
    vertical-align: top;
}

table.list th {
    background: var(--pozadina);
    color: var(--tekst-bled);
    border-bottom: 1px solid var(--linija-jaca);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Zaglavlje kolone koje sme da se prelomi — za tabele sa mnogo kolona,
   gde bi naziv u jednom redu razvukao tabelu preko ekrana. */
table.list th.wrap { white-space: normal; }

table.list tr:nth-child(even) td { background: var(--pozadina-blaga); }
table.list tbody tr:hover td { background: var(--plava-svetla); }

td.num, th.num { text-align: right; white-space: nowrap; }

/* Ćelija sa dugmadima reda. Dugmad se ne prelamaju jedno pod drugo, a
   <form> oko „Obriši" ne sme da bude blok — inače bi svako brisanje palo
   u svoj red i razvuklo tabelu. */
td.row-actions, td.nowrap { white-space: nowrap; }
td.row-actions form, form.inline-form { display: inline; }

.amount-in { color: var(--zelena-tamna); font-weight: 600; }
.amount-out { color: var(--crvena); font-weight: 600; }

/* ---------- Red sa slikom ---------- */

/* Sličica levo, opis u sredini, dugmad desno — spisak slika u karuselu.
   Prelama se na uskom ekranu, pa dugmad padnu ispod slike umesto da je
   stisnu. Poslednji red nema crtu, da se ne udvaja sa ivicom kartice. */
.media-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .7rem 0;
    border-bottom: 1px solid var(--linija);
}

.media-row:last-child { border-bottom: 0; }
.media-row img { border-radius: 6px; flex-shrink: 0; }
.media-row-body { flex: 1; min-width: 160px; }

/* ---------- Listanje strana ---------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-top: 1rem;
}

/* Dugme koje ne vodi nikuda (nema prethodne/sledeće strane) — vidi se da
   postoji, ali da je van domašaja. */
.pagination .btn.disabled { opacity: .45; }

/* Izbor jezika u podnožju stoji u rečenici, i uže je od punog polja. */
.locale-form { display: inline-block; margin-left: 1rem; }
.locale-form select { width: auto; padding: .2rem .4rem; }

/* ---------- Oznake ---------- */

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: .1rem .7rem;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}
/* Značka ume da bude i link (storniran račun vodi na svoj dokument); boju
   nasleđuje od vrste značke, a ne od pravila za linkove. */
a.badge { color: inherit; text-decoration: none; }
a.badge:hover { text-decoration: underline; }
.badge-green { background: var(--zelena-svetla); color: var(--zelena-tamna); }
.badge-blue { background: var(--plava-svetla); color: var(--plava-tamna); }
.badge-red { background: var(--crvena-svetla); color: var(--crvena); }
.badge-gray { background: #edf1f5; color: var(--tekst-bled); }

/* ---------- Objave ---------- */

.announcement {
    border-left: 5px solid var(--zelena);
    background: var(--belo);
    border-radius: 0 8px 8px 0;
    border-top: 1px solid var(--linija);
    border-right: 1px solid var(--linija);
    border-bottom: 1px solid var(--linija);
    padding: .9rem 1.1rem;
    margin-bottom: .9rem;
}
.announcement.announcement-admin { border-left-color: var(--plava); }

/* Poruka stanara: crvena traka dok nije pročitana, siva kad jeste — da se
   nepročitane vide iz reda, bez čitanja značke na kraju. */
.announcement.unread { border-left-color: var(--crvena); }
.announcement.read { border-left-color: var(--linija); }

/* Ugovor koji više ne važi — siva traka umesto zelene. */
.announcement.inactive { border-left-color: var(--linija); }
.announcement h3 { margin-top: 0; }
.announcement .meta { color: var(--tekst-bled); font-size: .88rem; }

/* ---------- Rezultati anketa ---------- */

.poll-bar {
    background: var(--plava-svetla);
    border-radius: 6px;
    overflow: hidden;
    height: 1.5rem;
    margin: .2rem 0 .7rem;
}
.poll-bar > span {
    display: block;
    height: 100%;
    background: var(--plava);
    min-width: 2px;
}

/* ---------- Karusel na početnoj ---------- */

.carousel {
    position: relative;
    margin-bottom: 1.2rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--linija);
    background: var(--belo);
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Sakrij scrollbar, prevlačenje/strelice su navigacija */
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
    position: relative;
}

.carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.carousel-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .5rem 1rem;
    background: rgba(20, 71, 126, .75);
    color: var(--belo);
    font-size: .95rem;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .85);
    color: var(--plava-tamna);
    border: 1px solid var(--linija);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.carousel-btn:hover { background: var(--belo); }
.carousel-prev { left: .6rem; }
.carousel-next { right: .6rem; }

/* ---------- Podnožje ---------- */

.site-footer {
    border-top: 1px solid var(--linija);
    background: var(--belo);
    margin-top: 2rem;
}
.site-footer .inner {
    max-width: var(--sirina);
    margin: 0 auto;
    padding: 1rem 1.6rem;
    color: var(--tekst-bled);
    font-size: .9rem;
}

/* Podatak koji stanar samo čita, unutar kartice sa formom (npr. podrum). */
.info-block {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-left: 4px solid var(--plava);
    border-radius: 0 6px 6px 0;
    background: var(--plava-svetla);
}

.info-block h2 { margin: 0 0 .3rem; font-size: 1.05rem; }

.info-block > :last-child { margin-bottom: 0; }

/* ---------- Podrum: odeljci i čipovi sa brojevima stanova ---------- */

.basement-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Broj stana = oznaka podruma. Fiksna minimalna širina da kolona brojeva
   ostane čitljiva i kada su jednocifreni i trocifreni pomešani. */
.chip {
    display: inline-block;
    min-width: 2.6rem;
    padding: .35rem .5rem;
    border: 1px solid var(--linija);
    border-radius: 6px;
    background: var(--plava-svetla);
    color: var(--plava-tamna);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.chip-muted { background: var(--crvena-svetla); color: var(--crvena); border-color: var(--crvena); }

.chip-note { display: block; font-size: .75rem; font-weight: 400; color: var(--tekst-bled); }

/* Klik na čip otvara unos m²/napomene — bez JavaScript-a, preko <details>. */
.chip-edit { display: inline-block; position: relative; }

.chip-edit > summary { cursor: pointer; list-style: none; }

.chip-edit > summary::-webkit-details-marker { display: none; }

.chip-edit > summary:hover { background: var(--plava); color: var(--belo); }

.chip-edit[open] > summary { background: var(--plava); color: var(--belo); }

.chip-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + .3rem);
    left: 0;
    width: 15rem;
    padding: .8rem;
    border: 1px solid var(--linija);
    border-radius: 8px;
    background: var(--belo);
    box-shadow: 0 6px 18px rgba(28, 39, 51, .18);
}

.chip-panel .field { margin-bottom: .6rem; }

@media (max-width: 640px) {
    /* Na uskom ekranu panel ne staje pored čipa — pušta se u tok strane. */
    .chip-edit { display: block; width: 100%; }
    .chip-panel { position: static; width: auto; box-shadow: none; }
}

/* ---------- Pretraga u zaglavlju ---------- */

/* Dvoslojna pretraga: stavke menija se traže u pregledaču (spisak je već na
   strani), sadržaj se dovlači sa servera običnim LIKE upitom. Bez search
   engine-a — na ovoj količini podataka nema šta da ubrza. */
.header-search {
    position: relative;
    flex: 1 1 16rem;
    max-width: 24rem;
}

.header-search input[type="search"] {
    width: 100%;
    padding: .45rem .7rem .45rem 2rem;
    min-height: 2.3em;
    font-size: .95rem;
    border: 1px solid var(--linija-jaca);
    border-radius: 8px;
    background: var(--pozadina-blaga);
}

.header-search input[type="search"]:focus { background: var(--belo); }

/* Lupa je pozadinska slika, da ne bude još jedan element u toku fokusa. */
.header-search .search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tekst-bled);
    font-size: 1rem;
    pointer-events: none;
}

.header-search .search-hint {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: .05rem .35rem;
    border: 1px solid var(--linija-jaca);
    border-radius: 4px;
    background: var(--belo);
    color: var(--tekst-bled);
    font-size: .75rem;
    font-family: inherit;
    pointer-events: none;
}

.header-search input:focus ~ .search-hint { display: none; }

.search-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: 26rem;
    overflow-y: auto;
    padding: .3rem;
    border: 1px solid var(--linija);
    border-radius: 10px;
    background: var(--belo);
    box-shadow: 0 12px 30px rgba(28, 31, 36, .16);
}

.search-panel[hidden] { display: none; }

.search-group {
    padding: .5rem .6rem .25rem;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tekst-bled);
}

/* Svaki pogodak je jedan red: dugi opisi transakcija bi inače razvukli spisak
   na pola ekrana i sakrili ostale izvore. */
.search-item {
    display: block;
    padding: .4rem .6rem;
    border-radius: 7px;
    text-decoration: none;
    color: var(--tekst);
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item .meta {
    display: block;
    font-size: .82rem;
    color: var(--tekst-bled);
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item:hover, .search-item.is-active { background: var(--plava-svetla); color: var(--plava-tamna); }

.search-empty { padding: .7rem .6rem; color: var(--tekst-bled); font-size: .92rem; }

@media (max-width: 760px) {
    /* Na telefonu polje uzima ceo red ispod loga. */
    .header-search { flex: 1 1 100%; max-width: none; order: 3; }
    .search-panel { max-height: 18rem; }
}

/* ---------- Kartice sa brojevima (KPI) ---------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: .9rem;
    margin-bottom: 1.2rem;
}

.kpi {
    background: var(--belo);
    border: 1px solid var(--linija);
    border-radius: 11px;
    padding: .85rem 1rem;
}

.kpi-label {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--tekst-bled);
}

.kpi-value {
    margin-top: .25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--naslov);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.kpi-value .unit { font-size: .8rem; font-weight: 600; color: var(--tekst-bled); }
.kpi-note { margin-top: .2rem; font-size: .82rem; color: var(--tekst-bled); }
.kpi-note.ok { color: var(--zelena-tamna); font-weight: 600; }
.kpi-note.warn { color: var(--crvena); font-weight: 600; }

@media (max-width: 560px) {
    /* U dve kolone na telefonu iznos i „RSD" se inače lome u dva reda. */
    .kpi { padding: .7rem .8rem; }
    .kpi-value { font-size: 1.25rem; }
}

/* ---------- Širi razmak u administraciji ---------- */

/* Na punoj širini sadržaj ne sme da dodiruje ivicu ekrana. */
@media (min-width: 901px) {
    body.admin-area .page { padding: 1.2rem 1.6rem 3rem; }
}
/* ---------- Štampa (ankete na A4, cedulje sa pristupnim podacima) ---------- */

/* Prazan prostor za potpis na dnu odštampanog izveštaja. */
.signature { margin-top: 3rem; }

.print-only { display: none; }

@media print {
    body { background: var(--belo); font-size: 12pt; }
    .site-header, .main-nav, .sub-nav, .site-footer, .no-print { display: none !important; }
    .print-only { display: block; }
    .page { max-width: none; padding: 0; }
    .card { border: 0; padding: 0; }
    a { color: var(--tekst); text-decoration: none; }
}

/* Ceduljice sa pristupnim podacima, grupna štampa. Dve kolone puta pet redova
   staje na A4; visina reda je fiksna da se isečeni papirići poklope. Postojeća
   pravila za štampu ostaju nedirnuta — ovo je zaseban blok. */
.slips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.slip-cut {
    border: 1px dashed var(--linija);
    padding: 6mm 6mm 4mm;
    box-sizing: border-box;
    break-inside: avoid;
    page-break-inside: avoid;
}
.slip-head {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .2rem;
}
.slip-for {
    font-size: .95rem;
    margin-bottom: .5rem;
}
.slip-data {
    border-collapse: collapse;
    margin-bottom: .5rem;
}
.slip-data td {
    padding: .1rem .6rem .1rem 0;
    vertical-align: top;
    font-size: .9rem;
}
.slip-note {
    font-size: .72rem;
    color: var(--tekst-bled);
    line-height: 1.25;
}

@media print {
    .slips { gap: 0; }
    .slip-cut {
        /* Pet redova po 52 mm staje na A4 i sa podrazumevanim marginama
           pregledača; 55 mm je već na ivici i peti red ume da preskoči. */
        height: 52mm;
        padding: 5mm;
        border-color: #999;
    }
    .slip-head { font-size: 9pt; }
    .slip-for { font-size: 10pt; }
    .slip-data td { font-size: 10pt; }
    .slip-cut .password { font-size: 12pt; }
    .slip-note { font-size: 7pt; }
}