/* ============================================================
   FAKTO — raspored aplikacije (sidebar + topbar) i vlasničkog panela
   ============================================================ */

.aplikacija { min-height: 100vh; }

/* ---------------- bočni meni ---------------- */

.bocni {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar);
    background: var(--n-0);
    border-right: 1px solid var(--n-200);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform var(--sporo), width var(--sporo);
}

/* Logo je slika, ne tekst. Visina se zadaje, širina prati odnos strane —
   `width`/`height` u HTML-u su tu samo da red ne poskoči dok se slika učitava. */
.bocni-logo {
    display: flex; align-items: center; gap: 10px;
    height: var(--topbar-red);
    padding: 0 var(--r5);
    border-bottom: 1px solid var(--n-200);
    flex: none;
}
@media (hover: hover) {
    .bocni-logo:hover { text-decoration: none; }
}
.bocni-logo img { height: 26px; width: auto; }

.bocni-meni { flex: 1; overflow-y: auto; padding: var(--r4) var(--r3); scrollbar-width: thin; }

/* Grupe se razdvajaju crtom, ne verzalnim naslovom. Naslov iznad tri
   stavke troši red i pažnju, a ne kaže ništa što ikona i naziv ne kažu. */
.meni-grupa.sa-crtom {
    margin-top: var(--r4);
    padding-top: var(--r4);
    border-top: 1px solid var(--n-100);
}

.meni-stavka {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    margin-bottom: 2px;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--n-700);
    border-radius: var(--rad-sm);
    transition: background var(--brzo), color var(--brzo);
    width: 100%;
    /* grane menija su <button>, a njemu pregledač centrira tekst */
    text-align: left;
}
@media (hover: hover) {
    .meni-stavka:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
}
.meni-stavka .ikona { color: var(--n-500); flex: none; }
@media (hover: hover) {
    .meni-stavka:hover .ikona { color: var(--n-700); }
}

/* Aktivna stavka je blaga, ne puna boje. Pun blok viče sa svake strane i
   nadglasa sadržaj; ovoliko je dovoljno da se vidi gde si. */
.meni-stavka.aktivna {
    background: var(--brend-50);
    color: var(--brend-700);
    font-weight: 600;
}
@media (hover: hover) {
    .meni-stavka.aktivna:hover { background: var(--brend-100); color: var(--brend-800); }
}
.meni-stavka.aktivna .ikona { color: var(--brend-600); }

.meni-stavka.zakljucana { color: var(--n-400); }
.meni-stavka.zakljucana .ikona-katanac { margin-left: auto; width: 14px; height: 14px; }

.meni-tekst { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.meni-bedz {
    font-size: 10px; font-weight: 600; line-height: 16px;
    padding: 0 6px;
    border-radius: var(--rad-pun);
    background: var(--akcenat-50);
    color: var(--akcenat-700);
}
.meni-bedz.brend { background: var(--brend-100); color: var(--brend-700); }

.meni-stavka.aktivna .meni-bedz { background: var(--brend-200); color: var(--brend-800); }
.meni-stavka.aktivna .meni-strelica,
.meni-stavka.aktivna .ikona-katanac { color: var(--brend-500); }

/* ---------------- podstavke ---------------- */

/* Šina se crta JEDNOM, na kontejneru. Ranije je svaka podstavka nosila svoj
   `border-left`, pa je između stavki ostajao razmak bez linije — sa četiri
   stavke ispod „Fakturisanja" linija je izgledala isprekidano, kao greška.

   `margin-left: 21px` je poravnanje sa roditeljem: njegova ikona počinje na
   12px i široka je 20px, pa joj sredina pada na 22px — tu ide i šina (2px,
   od 21 do 23). Tekst podstavke tako počinje na 21 + 13 + 10 = 44px, tačno
   ispod teksta roditelja (12 + 20 + 12 = 44px). */
.meni-deca {
    position: relative;
    overflow: hidden;
    margin: 2px 0 6px 21px;
    padding-left: 13px;
}

.meni-deca::before {
    content: '';
    position: absolute;
    left: 0; top: 3px; bottom: 3px;
    width: 2px;
    border-radius: 1px;
    background: var(--n-200);
}

.meni-dete {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    margin-bottom: 1px;
    font-size: var(--t-sm);
    color: var(--n-500);
    border-radius: var(--rad-sm);
    transition: background var(--brzo), color var(--brzo);
}
@media (hover: hover) {
    .meni-dete:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
}

/* Oznaka na šini: kratka brend crta u visini stavke. Crta se PREKO šine, na
   istom x-u, pa linija ostaje neprekidna i kad je stavka aktivna — boji se
   samo njen deo. Visina raste iz nule, pa prelaz ima šta da animira. */
.meni-dete::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    width: 2px; height: 0;
    border-radius: 1px;
    background: var(--brend-600);
    transform: translateY(-50%);
    transition: height var(--srednje);
}
@media (hover: hover) {
    .meni-dete:hover::before { height: 12px; }
}

.meni-dete.aktivna {
    background: var(--brend-50);
    color: var(--brend-700);
    font-weight: 600;
}
.meni-dete.aktivna::before { height: 20px; }

/* Katanac ide desno, kao i kod glavnih stavki. */
.meni-dete .ikona-katanac { margin-left: auto; width: 14px; height: 14px; color: var(--n-400); }
.meni-dete.aktivna .ikona-katanac { color: var(--brend-500); }

.meni-strelica { transition: transform var(--srednje); color: var(--n-400); width: 16px; height: 16px; }
.meni-stavka[aria-expanded="true"] .meni-strelica { transform: rotate(90deg); }

.bocni-noga { padding: var(--r3); border-top: 1px solid var(--n-200); flex: none; }

/* Dno menija: pravni tekstovi i verzija.

   NIJE zakucano za dno nego stoji na kraju spiska, unutar menija koji se
   skroluje. Prijavljeno sa telefona: zakucan blok je stajao preko poslednje
   stavke („Šabloni dokumenata"), pa se ona nije mogla doskrolovati.

   Tanka crta iznad je jedino što ga odvaja od poslednje stavke — bez nje bi
   veze izgledale kao još jedna stavka menija. */
.bocni-dno {
    margin-top: var(--r4);
    padding-top: var(--r3);
    border-top: 1px solid var(--hrom-ivica);
}

.bocni-pravno {
    display: flex; flex-wrap: wrap; gap: 2px 10px;
    padding: var(--r2) var(--r3) 0;
    font-size: 11px; line-height: 1.5;
}
/* Isti žeton kao verzija: boja za tihi tekst NA HROMU, jer se ni meni ne menja
   sa temom. `--n-400` je ovde zabranjen — u tamnoj temi pada na 4,0:1. */
.bocni-pravno a { color: var(--hrom-tekst-tih); }
@media (hover: hover) {
    .bocni-pravno a:hover { color: var(--hrom-tekst); }
}

.verzija-programa {
    flex: none;
    padding: var(--r2) var(--r3) var(--r3);
    font-size: 11px;
    line-height: 1.4;
    /* `--hrom-tekst-tih` je boja za tihi tekst NA HROMU i ne menja se sa temom,
       kao ni sam meni. `--n-400` je u svetloj temi izgledalo isto (6,0:1), ali u
       tamnoj pada na 4,0:1 — a dizajn-sistem ga i izričito zabranjuje za tekst
       koji se čita. */
    color: var(--hrom-tekst-tih);
    font-variant-numeric: tabular-nums;
}

/* Oznaka prečice na dugmetu „Napravi dokument".

   Prečica koju niko ne zna je prečica koje nema, pa stoji na samom dugmetu.
   Na dodirnim ekranima se sklanja: tamo tastature nema, a oznaka bi bila šum
   na najskupljem mestu — vrhu prvog ekrana. */
.akcija-precica {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: var(--rad-sm);
    background: var(--n-100);
    color: var(--n-500);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.akcija.glavna .akcija-precica { background: rgba(255, 255, 255, .18); color: #FFF; }

@media (pointer: coarse) {
    .akcija-precica { display: none; }
}

/* ---------------- gornja traka ---------------- */

.gornja {
    position: fixed;
    top: 0; right: 0; left: var(--sidebar);
    height: var(--topbar);
    background: var(--staklo);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--n-200);
    display: flex; align-items: center; gap: var(--r3);
    padding: 0 var(--r5);
    z-index: 40;
}
/* Prelom trake postoji samo na telefonu (vidi „zaglavlje na telefonu" niže);
   ovde je isključen, da kao prazna stavka ne pravi višak razmaka u redu. */
.prelom-trake { display: none; }

/* Ekrani više nemaju svoj naslov u sadržaju, pa je ovo jedino mesto koje
   govori gde si — mora da se vidi i na telefonu. Duži naziv se seče, da ne
   bi gurao zvono i avatar van ekrana. */
.gornja-naslov {
    font-size: var(--t-lg); font-weight: 600;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
    .gornja-naslov { font-size: var(--t-lg); font-weight: 700; }
}

.gornja-pretraga {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    min-width: 220px;
    font-size: var(--t-sm);
    color: var(--n-500);
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
}
@media (hover: hover) {
    .gornja-pretraga:hover { background: var(--n-100); text-decoration: none; }
}
.gornja-pretraga kbd {
    margin-left: auto;
    font-size: 11px; font-family: var(--font);
    padding: 1px 5px;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: 4px;
}
/* Između telefona i stola pretrage nema: tu u traci stoji PUNO ime firme, pa za
   polje od 220px nema mesta. Na telefonu imena nema, pa pretraga dobija njegovo
   mesto — kao ikona (vidi „zaglavlje na telefonu" niže). */
@media (max-width: 900px) { .gornja-pretraga { display: none; } }

.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brend-100);
    color: var(--brend-700);
    display: grid; place-items: center;
    font-size: var(--t-sm); font-weight: 600;
    flex: none;
}
.avatar-lg { width: 44px; height: 44px; font-size: var(--t-lg); }

.zvono { position: relative; }
.zvono-tacka {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px;
    background: var(--greska);
    border: 2px solid var(--n-0);
    border-radius: 50%;
    display: none;
}
/* tačku pali klasa na zvonu — tako je JS može upaliti bez novog HTML-a */
.zvono.ima-novo .zvono-tacka { display: block; }

/* prekidač agencije */
/* Omot prekidača firme postoji samo da bi ga AJAX navigacija menjala; u
   rasporedu ga nema — deca stoje u zaglavlju kao i pre. */
.gornja-firma { display: contents; }

.izbor-agencije {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    font-size: var(--t-sm);
    color: var(--n-700);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    max-width: 220px;
}
@media (hover: hover) {
    .izbor-agencije:hover { background: var(--n-50); text-decoration: none; }
}
.izbor-agencije .naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Firma kad je jedna: isti oblik kao prekidač, ali bez ivice i bez pokazivača —
   da se ne obećava klik kojeg nema. */
.tekuca-firma {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    font-size: var(--t-sm);
    color: var(--n-600);
    max-width: 220px;
}
.tekuca-firma .ikona { color: var(--n-400); flex: none; }
.tekuca-firma .naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- zaglavlje na telefonu ----

   Na 375px se u red nije stalo ništa: sam prekidač firme uzima 220px, pa su
   novčanik, prekidač teme, zvono i avatar ispadali van ekrana (izmereno:
   sadržaj trake 570px u prozoru od 375px). Traka je `position: fixed`, pa se do
   njih nije moglo doći ni skrolovanjem — agencijski nalog na telefonu tako nije
   imao ni obaveštenja ni odjavu.

   Skraćuje se ono što sme da bude kraće:

     · razmaci — 20px sa strane i 12px između postaju 12px i 8px;
     · prekidač firme odlazi, a njegovo mesto dobija PRETRAGA (traženo). Ime
       firme se na telefonu nije videlo ni kad je firma jedna (`.tekuca-firma`
       nosi `sakrij-mob`), pa je od prekidača i ostajala samo ikona; firme su i
       dalje u fioci, pod „Moje firme";
     · prekidač teme se seli u meni ispod avatara — ista forma, isti POST.

   Ostaje ono što se radi: meni, gde si, koliko duguješ, obaveštenja i nalog. */
@media (max-width: 640px) {
    /* Traka ima DVA reda (traženo). Gore ono što se dodiruje najčešće — meni,
       gde si, zvono i nalog; dole, u nižem redu, pretraga, dug i tema.

       Do sada je sve stajalo u jednom redu od 375px, pa je naslovu ostajalo
       68px („Kontrol…"), a i tada je nešto moralo da otpadne: na 320px se
       sklanjala pretraga. Sa drugim redom naslov dobija 195px, pretraga se
       vraća sa svojim natpisom, a ništa se ne krije.

       Drugi red je NIŽI (38 umesto 44px): u njemu ne stoji ono za čim se
       poseže u hodu. 38px je ista mera koju „DODIRNI EKRANI" daju manjim
       dugmadima (`.dugme-s`). */
    /* 6 + 44 (prvi red) + 5 + 1 + 5 (prelom) + 38 (drugi red) + 6 = 105 */
    :root { --topbar: 105px; }


    .gornja {
        height: auto;
        flex-wrap: wrap;
        align-content: center;
        padding: 6px var(--r5);
        column-gap: var(--r2);
        row-gap: 0;
    }

    .gornja .razmak { display: none; }
    .gornja > *, .gornja-firma > * { flex: none; }
    .gornja > .gornja-naslov { flex: 1 1 auto; }

    .gornja .gornja-firma > * { display: none; }

    /* --- prvi red --- */
    .gornja > .otvori-meni { order: 1; }
    .gornja > .gornja-naslov { order: 2; }
    .gornja > .zvono-padajuci { order: 3; }
    .gornja > .padajuci:not(.zvono-padajuci) { order: 4; }

    .gornja .dugme-ikona,
    .gornja .avatar {
        width: 44px; height: 44px; padding: 0;
    }

    /* --- prelom --- */
    /* Prazna stavka preko cele širine: sve posle nje pada u drugi red. Bez
       crte — razmak razdvaja redove dovoljno, a linija je sekla traku i tamo
       gde ništa ne stoji jedno pod drugim. */
    .prelom-trake {
        display: block;
        order: 5;
        flex: 0 0 100%;
        height: 0;
        margin: 5px 0;
    }

    /* --- drugi red --- */
    .gornja > .gornja-pretraga { order: 6; flex: 1 1 auto; display: flex; }
    .gornja > .gornja-novcanik { order: 7; }
    .gornja > .prekidac-teme   { order: 8; display: inline-flex; }

    .gornja > .gornja-pretraga,
    .gornja .prekidac-teme .dugme,
    .gornja .novcanik {
        height: 38px; min-height: 38px;
    }


    .gornja > .gornja-pretraga {
        width: auto; min-width: 0; padding: 0 12px;
        justify-content: flex-start;
    }
    .gornja .prekidac-teme .dugme { width: 38px; min-width: 38px; padding: 0; }

    /* U svom redu pretraga ima mesta za natpis; prečica ostaje za tastaturu. */
    .gornja-pretraga span { display: inline; }
    .gornja-pretraga kbd { display: none; }
}

/* Na najužim telefonima (320px) drugi red ne prima i natpis pretrage — prelomio
   bi se u TREĆI red i podvukao sadržaj pod traku. Odlazi ono što se i bez reči
   razume: lupa umesto „Globalna pretraga". */
@media (max-width: 360px) {
    .gornja-pretraga span { display: none; }
}

/* ---------------- sadržaj ---------------- */

.sadrzaj {
    margin-left: var(--sidebar);
    padding-top: var(--topbar);
    min-height: 100vh;
    /* Ništa iz sadržaja ne sme da RAŠIRI stranu: oblačić, birač datuma ili
       meni koji za trenutak (pre skripte) vire udesno na telefonu bi
       pregledaču dali širu stranu i dopustili odzumiranje. `clip`, ne
       `hidden`: ne pravi okvir za skrol, pa lepljiva zaglavlja i dalje rade. */
    overflow-x: clip;
}
/* Sadržaj ide punom širinom, bez centriranog kontejnera. Ranije je bio
   ograničen na 1360px, pa je na širem ekranu ostajala prazna traka sa obe
   strane dok su tabele skrolovale unutar svog okvira.
   Ostaje samo razmak od ivice, i on se smanjuje kako ekran postaje uži. */
.sadrzaj-unutra {
    padding: var(--r6);
    padding-bottom: var(--r16);
}

/* Širi ekran dobija više vazduha sa strane. Pravila za uže ekrane stoje niže,
   uz ostatak mobilnog rasporeda — u CSS-u pobeđuje poslednje, pa red mora da
   ide od šireg ka užem. */
@media (min-width: 1600px) { .sadrzaj-unutra { padding: var(--r8); padding-bottom: var(--r16); } }

/* Vertikalni ritam ekrana.
   Do sada je svaki ekran sam birao razmak inline — negde 16, negde 20, negde
   24 — pa je sve delovalo nabacano. Ovo postavlja jedan razmak za sve.
   `.sadrzaj-unutra` je običan blok, pa se margine sudarnih blokova SPAJAJU:
   ekran koji već ima svoju veću marginu zadržava je, ostali dobijaju ovu. */
.sadrzaj-unutra > * + * { margin-top: var(--r5); }

/* Red akcija na vrhu ekrana — bez naslova.

   Zaglavlje strane (`h1` + opis + dugmad) je sklonjeno sa svih ekrana panela.
   Naslov je već u gornjoj traci, i na telefonu; ovde je bio drugi put, a
   trošio je ceo red pre nego što se vidi bilo šta korisno. Ostaju samo dugmad.

   Na spiskovima je OVO taj red: traka alata (`ui/alati` — period, pretraga,
   izvoz, novo) stoji u njemu, pa svaki ekran počinje isto — red radnji, pa
   kartice sa brojkama, pa spisak, kao na KPO knjizi.

   Mrvice su svedene na jedan link „nazad": lanac od tri nivoa se čita, a jedan
   link se klikne. */
.akcije-vrh {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; flex-wrap: wrap;
    margin-bottom: var(--r4);
}
.nazad-veza { margin-right: auto; }

/* Sve što stoji U TRACI RADNJI ima istu visinu.

   Prijavljeno sa ekrana šablona: „select i dva dugmeta nisu u ravni". Izmereno
   — u istom redu su se sretle TRI visine: dugme `dugme-s` 34px, dugme pune
   veličine 42px i polje izbora 44px. Polje je više jer Tom Select nosi svoj
   `line-height` (22px) naspram 20px koliko ima dugme.

   Povratna veza (`dugme-s`) se namerno izuzima: ona je tiha i sitna, stoji sama
   uz levu ivicu i ne deli red sa ostalima. */
.akcije-vrh .dugme:not(.dugme-s) { min-height: 42px; }

/* Polje izbora se SPUŠTA na 42px, umesto da se dugmad dižu na 44.

   U formi je 44px tačno — toliko ima i `.unos` pored njega, pa red
   polja seda. U traci radnji polje ne stoji uz polja nego uz dugmad, a
   dugme je 42px na celom ekranu. Dizati dugmad ovde značilo bi da su
   drugačija nego na svakom drugom ekranu.

   9px umesto 10px odozgo i odozdo: 9 + 22 (visina reda) + 9 + 2 (okvir). */
.akcije-vrh select.izbor,
.akcije-vrh .ts-wrapper.izbor .ts-control { padding-top: 9px; padding-bottom: 9px; }

/* Isto važi i za traku alata iznad spiskova: tamo polje pretrage (44px)
   stoji uz „Traži", „Izvoz" i „Nova faktura" (42px). Ista razlika, isti
   razlog — polje je merilo za red POLJA, a ovde je u redu sa dugmadima. */
.alati .dugme:not(.dugme-s) { min-height: 42px; }
.alati .unos,
.alati select.izbor,
.alati .ts-wrapper.izbor .ts-control { padding-top: 9px; padding-bottom: 9px; }

/* Traka alata STOJI U REDU RADNJI, ne ispod njega.

   Svaki ekran sa spiskom ima isti vrh: jedan red u kom su period, pretraga i
   dugmad — pa tek ispod njega kartice sa brojkama i sam spisak, kao na KPO
   knjizi. Na uplatama je pretraga stajala u drugom redu, ispod brojki; na
   klijentima i stavkama ispod tabova — pa je svaki ekran počinjao drugačije.

   Traka nosi svoj razmak odozgo i odozdo zbog ekrana na kojima stoji sama
   (vlasnički panel); u redu radnji taj razmak samo razmiče red. Razmak među
   stavkama je isti kao u samom redu, da se ne vidi gde forma prestaje. */
.akcije-vrh .alati { padding: 0; gap: 10px; }

/* Polje pretrage ima čvrstu širinu umesto `flex: 1`: forma u redu radnji je
   široka koliko i njen sadržaj, pa `flex: 1` nema u čemu da raste — polje bi
   ostalo na najmanjih 200px i placeholder „Broj fakture, izvoda, način ili
   napomena…" bi se sekao na pola. Na uskom ekranu se i dalje skuplja, a kad
   dugme „Traži" padne u novi red, polje popuni svoj. */
.akcije-vrh .alati .pretraga { flex: 1 1 auto; width: 320px; min-width: 0; max-width: 360px; }

/* Forma unutar trake se NE prelama.

   `.red` nosi `flex-wrap: wrap`, a polje izbora je `width: 100%` — pa je forma
   dobila širinu sadržaja, polje je popunilo ceo red i dugme je palo ispod
   njega. Odatle i utisak da ništa nije poravnato. */
.akcije-vrh form.red { flex-wrap: nowrap; }
.akcije-vrh form.red select.izbor,
.akcije-vrh form.red .ts-wrapper.izbor { flex: none; width: 220px; }

/* Zaglavlje ostaje samo na javnom sajtu: te strane nemaju gornju traku koja bi
   nosila naslov, a `h1` je i ono po čemu ih pretraživač razume. */
.zaglavlje-stranice {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--r4); flex-wrap: wrap;
    margin-bottom: var(--r6);
}
.zaglavlje-stranice .opis { color: var(--n-500); font-size: var(--t-sm); margin-top: 4px; }
.zaglavlje-akcije { display: flex; gap: 10px; flex-wrap: wrap; }

/* Isto važi za mrvice — u panelu ih nema, na sajtu vode nazad kroz vodiče. */
.mrvice { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--n-500); margin-bottom: 10px; }
.mrvice a { color: var(--n-500); }
@media (hover: hover) {
    .mrvice a:hover { color: var(--n-900); }
}

/* mreže */
.mreza { display: grid; gap: var(--r4); }
.mreza-2 { grid-template-columns: repeat(2, 1fr); }
.mreza-3 { grid-template-columns: repeat(3, 1fr); }
.mreza-4 { grid-template-columns: repeat(4, 1fr); }
.mreza-2-1 { grid-template-columns: 2fr 1fr; }
.mreza-1-2 { grid-template-columns: 1fr 2fr; }

@media (max-width: 1100px) {
    .mreza-4 { grid-template-columns: repeat(2, 1fr); }
    .mreza-2-1, .mreza-1-2, .mreza-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .mreza-2, .mreza-4 { grid-template-columns: 1fr; }
}

/* ---------------- mobilni ---------------- */

.otvori-meni { display: none; }
.zaklon { display: none; }

/* Prag za bočni meni je 1240px, ne 1024px.
   Bočni meni uzima 264px, a razmak od ivice još 48px — kad se pojavi, sadržaj
   se skupi za 312px odjednom. Na 1024px je to značilo pad sa 992px na 711px na
   jedan jedini piksel promene širine, pa je svaka tabela od tu naviše morala da
   skroluje vodoravno sve do ~1163px. Sada se meni pojavi tek na 1240px, gde
   sadržaju posle njega ostaje 928px — dovoljno i za najširu tabelu u aplikaciji
   (registar modula, 905px). Ispod toga meni je fioka i sadržaj ima ceo ekran. */
@media (max-width: 1239px) {
    .bocni { transform: translateX(-100%); box-shadow: var(--senka-4); }
    .bocni.otvoren { transform: translateX(0); }
    .gornja { left: 0; }
    .sadrzaj { margin-left: 0; }
    .sadrzaj-unutra { padding: var(--r4); }
    .otvori-meni { display: inline-flex; }

    /* Zaklon iza otvorene fioke.

       `z-index: 46`, a ne 45: donja traka je takođe na 45 i stoji KASNIJE u
       dokumentu, pa je pri jednakom sloju bila iznad zaklona — dok je meni bio
       otvoren, „Klijenti" i „Troškovi" su se i dalje mogli dodirnuti. Izmereno
       `elementFromPoint`-om: na dnu ekrana odgovarala je stavka donje trake, a
       ne zaklon.

       Zamućenje je uz zatamnjenje, ne umesto njega: gde `backdrop-filter` ne
       radi, strana je i dalje zatamnjena i jasno je da je van domašaja. */
    .zaklon {
        position: fixed; inset: 0; z-index: 46;

        /* Dno ide ispod ivice iz istog razloga kao produžetak donje trake: kad
           se adresna traka pregledača sakrije, prozor poraste a `inset: 0` to
           ne uhvati odmah — ostane nezatamnjena traka na dnu. Zaklon nema
           dece, pa ga produžetak ne pomera ni u čemu. */
        bottom: -200px;

        background: rgba(16, 24, 40, .4);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }
    .zaklon.vidljiv { display: block; }

    /* Rezerva na dnu pripada rasporedu koji ima donju traku.

       `.donja-traka` postoji samo u korisničkom panelu. Vlasnički je nasleđivao
       istu rezervu (--r12 = 48px) i dobijao pojas praznog ispod sadržaja, ispod
       kog nema ničega. */
    [data-raspored="app"] .sadrzaj-unutra { padding-bottom: var(--r12); }
}

@media (max-width: 640px) {
    .sadrzaj-unutra { padding: var(--r3); }
}

/* donja traka na telefonu — pet mesta, sredina je „novo" */
.donja-traka { display: none; }

/* Lepeza živi uz traku, pa je van telefona nema. Bez ovoga bi se, otkad nema
   atributa `hidden`, izlila na dno svake desktop strane kao običan blok. */
.lepeza { display: none; }

@media (max-width: 1024px) {
    /* Traka je 57px, a dugme u sredini se diže još 22px iznad nje — razmak
       mora da računa i njega, inače poslednja kartica završi ispod dugmeta.
       `env(safe-area-inset-bottom)` je za telefone sa crtom umesto dugmeta. */
    .sadrzaj { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

    /* Odeljak „Napravi dokument" sa kontrolne table ovde nema šta da traži —
       isti izbor je u traci, na dugmetu u sredini. Pravilo stoji U OVOM bloku
       namerno: odeljak nestaje tačno onda kad traka postoji, pa se to dvoje ne
       može razići kad se prag jednom promeni.

       Bez izuzetka. Ranije je ovde stajalo i `.odeljak-novo:target`, kao
       rezerva za slučaj bez JavaScripta — ali to znači da se odeljak vrati
       svakome ko dođe na adresu sa `#napravi` (iz istorije, sa obeleživača,
       posle jednog dodira bez skripti). Rezerva je zato preseljena na sam list
       u traci, koji postoji na svakom ekranu. */
    .odeljak-novo { display: none; }

    /* Pet mesta: dva ekrana levo, „novo" u sredini, dva desno.
       `env(safe-area-inset-bottom)` je za telefone sa crtom umesto dugmeta —
       bez toga poslednji red stoji ispod nje i ne može da se dodirne. */
    .donja-traka {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
        display: flex; align-items: stretch;
        background: var(--n-0);
        border-top: 1px solid var(--n-200);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -1px 12px rgba(16, 24, 40, .06);
    }

    /* Traku NIŠTA ne pomera — ni skripta, ni prelaz.

       Ovde je stajao `transform: translateY(var(--dno-pomeraj))`, koji je
       skripta računala iz razlike između vidljivog prozora i mesta na kom je
       traka iscrtana. Zamisao je bila da ikone budu tačno na ivici i kad se
       adresna traka pregledača skloni.

       Prijavljeno sa telefona: „opet se u nekim momentima pomera gore dole".
       I mora: dok se adresna traka kreće, vidljivi prozor se menja na svaki
       kadar, pa je i pomeraj drugačiji na svaki kadar — traka je jurila prozor
       i uvek kasnila jedan kadar. Mereno je i sopstveno pomereno stanje, pa se
       petlja ljuljala i posle toga.

       Sada se ne pomera ništa. Prored koji adresna traka na trenutak ostavi
       pokriva produžena podloga ispod — isti žeton, pa se ne vidi da je tu. */
    .donja-traka, .donja-traka::after { transition: none; }

    /* Podloga se nastavlja ISPOD trake, do ivice ekrana.

       Prijavljeno sa telefona: traka se „povuče" kad se krene na gore, a ispod
       nje se ukaže siva traka. To nije naš raspored — u statičnom prozoru je
       traka izmereno tačno na dnu (razmak 0px). Krivac je adresna traka
       pregledača: ona se krije pri skrolu naniže i prozor tada poraste, a
       `bottom: 0` fiksirane trake taj rast ne uhvati odmah, pa ostane prored u
       visini adresne trake (~50px, izmereno sa slike).

       Ovo ne pomera traku nego samo produžava njenu podlogu, pa prored nema
       gde da se vidi — i onda kad JavaScripta nema. Pomeranje je zasebno i
       dolazi iz skripte.

       `pointer-events: none` je obavezan: produžetak leži preko dela ekrana
       koji nije traka i ne sme da hvata dodire.

       200px je više nego ijedna adresna traka; višak je van ekrana i ne pravi
       skrol — fiksirani element ne ulazi u prelivanje dokumenta. */
    .donja-traka::after {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 100%;
        height: 200px;
        background: var(--n-0);
        pointer-events: none;
    }

    .donja-stavka {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        padding: 8px 2px;
        font-size: 11px; line-height: 1.2;
        color: var(--n-500);
        text-align: center;

        /* 56px je donja granica za dodir prstom; ispod toga se promašuje. */
        min-height: 56px;
    }
    .donja-stavka .ikona { width: 22px; height: 22px; }
    .donja-stavka span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    @media (hover: hover) {
        .donja-stavka:hover { text-decoration: none; }
    }
    .donja-stavka.aktivna { color: var(--brend-600); font-weight: 600; }
    .donja-stavka.aktivna .ikona { color: var(--brend-600); }

    /* Sredina je izdignuta iznad trake — najlakše se pogađa palcem, a i
       govori da to nije još jedan ekran nego radnja.

       `position: relative` je OBAVEZAN, ne ukras. Bez njega krug (`::before`)
       nema pozicioniranog pretka pa se meri prema `.donja-traka`, i onda mu
       položaj zavisi od „static position" apsolutnog deteta grid kontejnera —
       a to Chrome i WebKit računaju različito. Chrome primeni `place-items`,
       Safari ne, pa je na iPhone-u krug bio pomeren u odnosu na plus u njemu.

       Zato ovde ništa ne zavisi od static position: i krug i ikona se
       centriraju izričito, pa se oba podignu za ISTIH 22px. */
    .donja-novo {
        position: relative;
        flex: none;
        width: 64px;
        display: grid; place-items: center;
        color: var(--na-boji);
    }

    /* Podizanje se radi transformacijom, ne negativnom marginom: margina menja
       raspored (pa i mesto od kog se centrira), a transformacija ne — krug i
       ikona su prvo centrirani, pa tek onda pomereni. */
    .donja-novo::before {
        content: "";
        position: absolute;
        left: 50%; top: 50%;
        width: 56px; height: 56px;
        transform: translate(-50%, -50%) translateY(-22px);
        border-radius: 50%;
        background: var(--brend-puna);
        box-shadow: 0 4px 14px rgba(61, 79, 224, .38);
    }
    .donja-novo .ikona {
        position: relative;
        width: 26px; height: 26px;
        transform: translateY(-22px);
    }
    @media (hover: hover) {
        .donja-novo:hover { text-decoration: none; }
    }

    /* Cela transformacija se ponavlja: samo `scale(.94)` bi pregazilo
       centriranje i krug bi na dodir skočio u ugao. */
    .donja-novo:active::before {
        transform: translate(-50%, -50%) translateY(-22px) scale(.94);
    }

    /* ---------------- lepeza „šta praviš" ----------------

       Krugovi izlaze u luku iznad dugmeta „+", umesto liste koja klizi odozdo.
       Razlog nije ukras: lista je zauzimala donju trećinu ekrana i gurala
       sadržaj, a ovako se vidi i šta je ispod, pa je jasnije da je ovo privremen
       izbor a ne nova strana.

       Ugao svakog kruga računa PHP i daje ga kao `--ugao`. Mora tako: lepeza
       radi i bez JavaScripta, preko `:target`, pa raspored ne sme da zavisi od
       skripte. */

    .lepeza {
        display: block;
        position: fixed; inset: 0; z-index: 70;
        visibility: hidden;
        transition: visibility 0s linear var(--sporo);
    }

    /* Dva okidača, isto stanje: klasa je od JavaScripta, `:target` od samog
       pregledača — dugme „novo" je link na `#napravi`, pa lepeza radi i bez
       ijedne skripte. */
    .lepeza.otvoren,
    .lepeza:target { visibility: visible; transition-delay: 0s; }

    /* Kad JavaScript preuzme lepezu, njegova reč je poslednja — i nad
       `:target`. Ovo mora u kaskadu, ne u skriptu: meta fragmenta je pokazivač
       na sam čvor, pa je ni `history.replaceState` ni skidanje `id`-ja ne
       pomeraju (oboje provereno). Ista specifičnost (0,2,0), a stoji posle —
       ne premeštati iznad. */
    .lepeza.zatvoren { visibility: hidden; }

    /* Zaklon prekriva CEO ekran, i samo dugme „+" ispod sebe: dodir bilo gde
       zatvara lepezu. Zato zatvaranje radi i bez JavaScripta — nije dugme nego
       link razapet preko strane. */
    .lepeza-zaklon {
        position: absolute; inset: 0;
        background: rgba(16, 24, 40, .55);
        backdrop-filter: blur(2px);

        /* Zatamnjenje se produžava ispod ivice — isto kao kod donje trake.
           Ovde ne kroz `bottom`, nego senkom: `::before` i `::after` crtaju iks
           i mere se od dna ovog elementa, pa bi ih pomeranje dna odvuklo sa
           dugmeta „+". Senka ne dira raspored. */
        box-shadow: 0 200px 0 rgba(16, 24, 40, .55);
        opacity: 0;
        transition: opacity var(--sporo);
    }
    .lepeza.otvoren .lepeza-zaklon,
    .lepeza:target .lepeza-zaklon { opacity: 1; }

    /* Iks na mestu dugmeta „+". Crta ga zaklon, a ne samo dugme: dugme je link
       na `#napravi` i bez JavaScripta ne bi umelo da zatvori ono što je
       otvorilo. Ovako je iks deo površine koja i zatvara. */
    .lepeza-zaklon::before,
    .lepeza-zaklon::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(50px + env(safe-area-inset-bottom));   /* 28px centar kutije + 22px koliko je krug izdignut */
        width: 22px; height: 2px;
        border-radius: 2px;
        background: var(--n-0);
        opacity: 0;
        transition: opacity var(--sporo), transform var(--sporo);
    }
    .lepeza.otvoren .lepeza-zaklon::before,
    .lepeza:target .lepeza-zaklon::before { opacity: 1; transform: translateX(-50%) rotate(45deg); }
    .lepeza.otvoren .lepeza-zaklon::after,
    .lepeza:target .lepeza-zaklon::after { opacity: 1; transform: translateX(-50%) rotate(-45deg); }

    /* Ishodište luka je centar dugmeta „+": 32px od dna trake plus bezbedna
       zona. Krugovi se odatle razmiču. */
    .lepeza-krugovi {
        position: absolute;
        left: 50%;
        bottom: calc(50px + env(safe-area-inset-bottom));   /* 28px centar kutije + 22px koliko je krug izdignut */
        width: 0; height: 0;
    }

    /* Kutija stavke JE krug, a natpis visi ispod nje kao apsolutan element.

       Da je natpis u toku, kutija bi bila viša kod dužeg naziva („Avansni
       račun" se prelama u dva reda), pa bi se i krug pomerio — krugovi na
       istom luku ne bi stajali na istoj visini. Ovako je položaj svakog kruga
       isti bez obzira na dužinu naziva. */
    .lepeza-stavka {
        --poluprecnik: 122px;

        position: absolute;
        left: 0; bottom: 0;
        width: 58px; height: 58px;
        margin-left: -29px;
        margin-bottom: -29px;

        display: block;
        text-align: center;
        color: var(--n-0);

        /* Zatvoreno: sve na ishodištu, sitno i providno. Otvoreno: pomereno po
           luku. `rotate` pa `translate` pa `rotate` unazad je stari trik za
           radijalni raspored — natpis ostaje uspravan iako je krug zarotiran do
           svog mesta. */
        transform: rotate(var(--ugao)) translate(0) rotate(calc(-1 * var(--ugao))) scale(.4);
        opacity: 0;
        pointer-events: none;

        transition: transform var(--sporo), opacity var(--sporo);
    }

    .lepeza.otvoren .lepeza-stavka,
    .lepeza:target .lepeza-stavka {
        transform: rotate(var(--ugao)) translate(var(--poluprecnik)) rotate(calc(-1 * var(--ugao))) scale(1);
        opacity: 1;
        pointer-events: auto;

        /* Krugovi izlaze redom, ne svi odjednom — oko tako stigne da isprati
           koliko ih je. Kašnjenje je malo: preko 40ms po krugu se oseti kao
           sporost, ne kao pokret. */
        transition-delay: calc(var(--red) * 35ms);
    }

    @media (hover: hover) {
        .lepeza-stavka:hover { text-decoration: none; }
    }

    .lepeza-krug {
        display: grid; place-items: center;
        width: 100%; height: 100%;
        border-radius: 50%;
        background: var(--n-0);
        color: var(--brend-600);
        box-shadow: 0 6px 18px rgba(16, 24, 40, .28);
    }
    .lepeza-krug .ikona { width: 24px; height: 24px; }
    .lepeza-stavka:active .lepeza-krug { transform: scale(.94); }

    .lepeza-naziv {
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        width: 88px;

        font-size: var(--t-xs); font-weight: 600; line-height: 1.25;
        color: var(--n-0);
        text-shadow: 0 1px 3px rgba(16, 24, 40, .6);
    }

    /* Ko je isključio kretanje u sistemu ne dobija ni izlazak ni kašnjenje. */
    @media (prefers-reduced-motion: reduce) {
        .lepeza-stavka,
        .lepeza-zaklon,
        .lepeza-zaklon::before,
        .lepeza-zaklon::after { transition: none; }

        .lepeza.otvoren .lepeza-stavka,
        .lepeza:target .lepeza-stavka { transition-delay: 0s; }
    }

    /* Na vrlo uskom ekranu (320px) luk od 122px izbacio bi krajnje krugove van
       strane, pa se skuplja. */
    @media (max-width: 360px) {
        .lepeza-stavka {
            --poluprecnik: 104px;
            width: 52px; height: 52px;
            margin-left: -26px; margin-bottom: -26px;
        }
        .lepeza-naziv { width: 76px; }
    }
}

/* ---------------- hrom panela: meni i traka u brend boji ----------------

   Bočni meni i gornja traka su puna brend podloga sa belim slovom. Dotad su
   bili beli kao i kartice, pa okvir aplikacije nije imao svoju ravan — oko
   nije imalo za šta da se uhvati na uskoj strani punoj kartica.

   Nijedna boja se ovde ne piše kao nijansa plave nego kao BELA SA PROVIDNOŠĆU
   (`--hrom-*`): sloj se sam prilagodi podlozi, pa isti kod radi i u svetloj i
   u tamnoj temi, i na tegetu vlasničkog panela ispod.

   Odeljak stoji PRE vlasničkog panela namerno: specifičnost je ista (0,2,0),
   pa njegova pravila pobeđuju po redosledu i teget meni ostaje teget. */

.bocni {
    background: var(--hrom);
    border-right-color: transparent;
}
.bocni-logo { border-bottom-color: var(--hrom-ivica); }
.meni-grupa.sa-crtom { border-top-color: var(--hrom-ivica); }

.bocni .meni-naslov { color: var(--hrom-tekst); }

.bocni .meni-stavka { color: var(--hrom-tekst); }
.bocni .meni-stavka .ikona { color: var(--hrom-tekst-tih); }
@media (hover: hover) {
    .bocni .meni-stavka:hover { background: var(--hrom-sloj); color: var(--hrom-tekst-jak); }
}
@media (hover: hover) {
    .bocni .meni-stavka:hover .ikona { color: var(--hrom-tekst-jak); }
}
.bocni .meni-stavka.zakljucana { color: var(--hrom-tekst-tih); }

/* Aktivna stavka je i dalje blaga, ne puna druge boje — na obojenom meniju
   dovoljan je svetliji sloj, a puna bela kutija bi vikala jače od sadržaja. */
.bocni .meni-stavka.aktivna {
    background: var(--hrom-sloj-jak);
    color: var(--hrom-tekst-jak);
}
@media (hover: hover) {
    .bocni .meni-stavka.aktivna:hover {
        background: var(--hrom-sloj-jak);
        color: var(--hrom-tekst-jak);
    }
}
.bocni .meni-stavka.aktivna .ikona { color: var(--hrom-tekst-jak); }

.bocni .meni-bedz.brend,
.bocni .meni-stavka.aktivna .meni-bedz {
    background: var(--hrom-sloj-jak);
    color: var(--hrom-tekst-jak);
}
.bocni .meni-strelica,
.bocni .meni-stavka.aktivna .meni-strelica,
.bocni .meni-stavka.aktivna .ikona-katanac { color: var(--hrom-tekst-tih); }

.bocni .meni-deca::before { background: var(--hrom-ivica); }
.bocni .meni-dete { color: var(--hrom-tekst); }
@media (hover: hover) {
    .bocni .meni-dete:hover { background: var(--hrom-sloj); color: var(--hrom-tekst-jak); }
}
.bocni .meni-dete.aktivna {
    background: var(--hrom-sloj-jak);
    color: var(--hrom-tekst-jak);
}
@media (hover: hover) {
    .bocni .meni-dete.aktivna:hover {
        background: var(--hrom-sloj-jak);
        color: var(--hrom-tekst-jak);
    }
}
/* Oznaka na šini je bila brend crta na beloj podlozi; na brend podlozi je
   jedino bela vidljiva. */
.bocni .meni-dete::before { background: var(--hrom-tekst-jak); }
.bocni .meni-dete .ikona-katanac,
.bocni .meni-dete.aktivna .ikona-katanac { color: var(--hrom-tekst-tih); }

.bocni-noga { border-top-color: var(--hrom-ivica); }

/* Kutija paketa je nekad bila kartica u kartici: providan sloj i boje hroma,
   da ne pravi belu mrlju na dnu tamnog menija. To više ne važi — kutija se
   prikazuje SAMO u stanju „uskoro" ili „isteklo", a ta stanja nose svoju
   svetlu podlogu. Boje hroma su na njoj davale bela slova na svetlom:
   kontrast 1.09 na labeli i nazivu, 1.0 na dugmetu. Zato ih ovde nema. */

/* --- gornja traka --- */

.gornja {
    /* Boja je ista, ali ne ravna: blag sjaj iz gornjeg levog ugla daje traci
       dubinu, pa staklena dugmad na njoj imaju na čemu da stoje. Boja ide kao
       `background-color`, da je vlasnički panel može zameniti bez gubitka
       sjaja. */
    background-color: var(--hrom);
    background-image: radial-gradient(120% 160% at 12% -40%, rgba(255, 255, 255, .10), transparent 62%);
    /* Podloga je puna, pa zamućenje iza nje ne radi ništa osim što drži još
       jedan sloj za kompozitor na svakom skrolu. */
    backdrop-filter: none;
    border-bottom-color: var(--hrom-ivica);
}
/* Na telefonu podlogu nosi SLIKA (dostavljena): tamnoplavi talasi sa dva
   sjaja. Boja ispod nje ostaje ista, pa traka izgleda isto i dok se slika
   učitava, i ako je pregledač ne prikaže.

   `cover` i sredina: traka je šira nego viša, a slika obrnuto, pa se seče po
   visini — sjaj sa strana ostaje na svom mestu.

   Pravilo stoji ovde, a ne uz ostala mobilna: ono iznad (`background-image` sa
   sjajem) je iste težine i niže u fajlu, pa bi ga pregazilo. */
@media (max-width: 640px) {
    .gornja {
        /* Preko slike ide tamni sloj: sjaji na njoj su ispod belog teksta i
           staklenih dugmadi bili presvetli. Krenulo se od 50%, pa zatamnjeno
           još za 30% — slojevi se ne sabiraju nego množe propušteno svetlo,
           1 − (1 − 0,5)(1 − 0,3) = 0,65.

           Sloj je prvi u spisku, jer se podloge crtaju odozdo nagore, pa je
           prvi u spisku gornji. */
        background-image:
            linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)),
            url('../img/zaglavlje-telefon.webp');
        background-size: cover;
        background-position: center;
    }
}

.gornja-naslov { color: var(--hrom-tekst-jak); }

.gornja .dugme-tiho,
.gornja-pretraga,
.gornja .izbor-agencije {
    background: var(--hrom-staklo);
    color: var(--hrom-tekst);
    border-color: var(--hrom-staklo-ivica);
}
@media (hover: hover) {
    .gornja .dugme-tiho:hover,
    .gornja-pretraga:hover,
    .gornja .izbor-agencije:hover {
        background: var(--hrom-staklo-jak);
        color: var(--hrom-tekst-jak);
        border-color: var(--hrom-staklo-ivica);
    }
}

/* Uglovi su mekši nego drugde u aplikaciji: traka nosi malo krupnih stvari,
   pa one smeju da budu zaobljenije od dugmeta u tabeli. */
.gornja .dugme-ikona,
.gornja-pretraga,
.gornja .izbor-agencije { border-radius: var(--rad-lg); }
.gornja-pretraga .ikona,
.gornja .izbor-agencije .ikona,
.gornja .tekuca-firma .ikona { color: var(--hrom-tekst-tih); }
.gornja-pretraga span { color: var(--hrom-tekst-tih); }

/* Firma kad je jedna. Bez ovoga bi nosila `--n-600` iz svetle skale i na
   tamnoj traci se gubila — što se i desilo pri prvom prikazu. */
.gornja .tekuca-firma { color: var(--hrom-tekst); }
.gornja-pretraga kbd {
    background: transparent;
    border-color: var(--hrom-ivica);
    color: var(--hrom-tekst);
}

/* Avatar je jedino puno obojeno mesto u prvom redu — po njemu se nalazi
   sopstveni meni, a staklena kružnica bi se izgubila među staklenim dugmadima. */
.gornja .avatar {
    background: linear-gradient(135deg, var(--brend-500) 0%, var(--brend-700) 100%);
    color: var(--na-boji);
}

/* Tačka na zvonu je imala beli obruč da se odvoji od bele trake; na obojenoj
   traci obruč mora da bude boja trake, inače ostaje bela mrlja oko tačke. */
.gornja .zvono-tacka { border-color: var(--hrom); }

/* Tačka stoji NA uglu dugmeta, pola unutra pola napolje — na sredini ivice se
   stapala sa zvonom, pa se u traci nije videlo da nešto čeka. */
.gornja .zvono-tacka {
    top: -3px; right: -3px;
    width: 12px; height: 12px;
    border-width: 2px;
}

/* Novčanik u traci: samo broj, u boji koja se na tamnoj podlozi čita i kaže da
   se duguje. Kutije nema — vidi `.novcanik`. */
.gornja .novcanik { color: var(--novcanik-tekst); font-weight: 600; }
@media (hover: hover) {
    .gornja .novcanik:hover { color: var(--novcanik-tekst-jak); }
}

/* Dospelo je svetlije, ne uokvireno: na gom broju nema šta da se uokviri, a
   razlika mora da se vidi. */
.gornja .novcanik.dospelo { color: var(--novcanik-tekst-jak); }

/* ---------------- vlasnički panel ---------------- */

.owner .bocni { background: var(--brend-900); border-right-color: rgba(255, 255, 255, .08); }
.owner .bocni-logo { color: var(--na-boji); border-bottom-color: rgba(255, 255, 255, .08); }

/* Naslov grupe je sitan verzal, kao natpis na fioci — grupe su tu da se meni
   od 22 stavke čita u celinama (Korisnici, Naplata, Program…), a ne da se
   naslov takmiči sa stavkama. Bio je običan tekst iste veličine kao stavke. */
.owner .meni-naslov {
    padding: 0 12px 6px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}
.owner .meni-grupa + .meni-grupa { margin-top: var(--r5); }

.owner .meni-stavka { position: relative; color: rgba(255, 255, 255, .75); }
.owner .meni-stavka .ikona { color: rgba(255, 255, 255, .45); }
@media (hover: hover) {
    .owner .meni-stavka:hover { background: rgba(255, 255, 255, .08); color: var(--na-boji); }
}
.owner .meni-stavka.aktivna {
    background: rgba(255, 255, 255, .12);
    color: var(--na-boji);
}
/* Oznaka aktivne stavke: kratka zlatna crta uz levu ivicu. Ranije je stajao
   `border-left-color` bez ijedne ivice, pa se crta nikad nije ni crtala. */
.owner .meni-stavka.aktivna::before {
    content: '';
    position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 2px 2px 0;
    background: var(--akcenat-500);
}
.owner .meni-stavka.aktivna .ikona { color: var(--akcenat-500); }

/* Ko je prijavljen: inicijali, ime i uloga u dnu menija. */
.bocni-ja {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px 12px;
    min-width: 0;
}
.owner .bocni-ja .avatar { background: rgba(255, 255, 255, .14); color: var(--na-boji); }
.bocni-ja-tekst { min-width: 0; }
.bocni-ja-ime {
    font-size: var(--t-sm); font-weight: 600; color: var(--na-boji);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bocni-ja-uloga { font-size: 11px; color: rgba(255, 255, 255, .5); }

/* Traka prati meni: indigo hrom korisničkog panela iznad tegetnog menija
   bio bi dvobojan bez razloga. */
.owner .gornja { background-color: var(--brend-900); }
.owner .gornja .zvono-tacka { border-color: var(--brend-900); }

/* Grupa ispred naslova ekrana: „Naplata / Računi". Naslov na ekranu agencije
   nosi ime agencije, pa se bez grupe ne vidi kojim putem se tu stiglo. */
.gornja-grupa { font-weight: 500; color: rgba(255, 255, 255, .55); }
.gornja-grupa::after { content: '/'; margin: 0 8px; color: rgba(255, 255, 255, .3); }
@media (max-width: 640px) { .gornja-grupa { display: none; } }

/* ---------------- vlasnički panel: kontrolna tabla ---------------- */

/* Pozdrav, datum i dve najčešće radnje na vrhu — tabla ima od čega da počne,
   a „Nov nalog" i „Poruka korisnicima" ne traže se po meniju. */
.tabla-glava {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r4);
    flex-wrap: wrap;
    margin-bottom: var(--r5);
}
.tabla-pozdrav { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.tabla-podnaslov { margin-top: 4px; font-size: var(--t-sm); color: var(--n-500); }
.tabla-akcije { display: flex; gap: 8px; flex-wrap: wrap; }

/* Levak aktivacije: svaki korak je red sa trakom; boja bledi kako korak
   ide dublje, da se rasipanje vidi i bez čitanja brojeva. */
.levak-red { padding: 10px 0; }
.levak-red + .levak-red { border-top: 1px solid var(--n-100); }
.levak-traka {
    height: 8px; margin-top: 6px;
    background: var(--n-100); border-radius: var(--rad-pun);
    overflow: hidden;
}
.levak-popuna { height: 100%; border-radius: var(--rad-pun); background: var(--brend-600); }
.levak-red:nth-child(2) .levak-popuna { background: var(--brend-500); }
.levak-red:nth-child(3) .levak-popuna { background: var(--brend-300); }
.levak-red:nth-child(n+4) .levak-popuna { background: var(--brend-200); }

.tabla-lista-red {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r3);
    padding: 9px 0;
    font-size: var(--t-sm);
}
.tabla-lista-red + .tabla-lista-red { border-top: 1px solid var(--n-100); }

/* Vlasnički panel je ranije bio izuzet iz mobilnih kartica — „alat za posao, ne
   za telefon". Izmereno je da to ne stoji: na 375px se spisak korisnika morao
   vući 499px u stranu, agencije 313px, dnevnik 263px. Vučenje tabele u stranu
   ne pokazuje više kolona nego kartica, samo ih pokazuje teže.

   Zato je izuzetak uklonjen, a opšte pravilo (`2-komponente.css`) i ovde radi
   kako treba: tabela se sklanja SAMO ako iza nje stoje kartice. Spiskovi ih
   sada imaju; matrica, registar modula i ostale široke konfiguracione tabele ih
   nemaju i namerno ostaju tabele — tamo se poredi red sa redom, a to je posao
   za širi ekran. */

.owner-oznaka {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px;
    background: var(--akcenat-500); color: var(--brend-900);
    border-radius: var(--rad-pun);
}

/* traka impersonacije — mora da bode oči */
.traka-impersonacija {
    position: sticky; top: 0; z-index: 70;
    display: flex; align-items: center; gap: var(--r3);
    padding: 8px var(--r5);
    background: var(--greska-puna);
    color: var(--na-boji);
    font-size: var(--t-sm);
    font-weight: 500;
}
.traka-impersonacija .dugme { margin-left: auto; background: rgba(255, 255, 255, .2); color: var(--na-boji); }
@media (hover: hover) {
    .traka-impersonacija .dugme:hover { background: rgba(255, 255, 255, .3); }
}

/* Mini novčanik u zaglavlju: koliko je neplaćeno za pretplatu. Crven i sa
   minusom, jer je jedino što treba pročitati to da se nešto duguje. */
/* Oblik je isti kao kod ostalih stavki u zaglavlju (pretraga, izbor firme):
   isti razmak, ista visina i isti `--rad-sm`, da novčanik ne bude jedina
   zaobljena pilula u redu. Razlikuje se samo bojom — a i ona je blaga, jer je
   ovo pokazivač stanja, ne uzbuna; ističe se broj, ne kutija. */
/* Novčanik je BROJ, ne kutija (traženo: „ukloni pozadinu, neka stoji samo
   broj"). U traci punoj staklenih dugmadi pilula je izgledala kao još jedno
   dugme, a ovo nije radnja nego podatak — koliko se duguje. Zato ostaje samo
   iznos: ni podloge, ni ivice, ni ikone, ni oznake valute. */
.novcanik {
    display: inline-flex; align-items: center;
    font-size: var(--t-sm);
    white-space: nowrap;
}
.novcanik > .ikona { display: none; }
/* Valuta stoji uz iznos, ali sitno i tiše — broj je ono što se čita. */
.novcanik-valuta { margin-left: 3px; font-size: .78em; opacity: .75; }
@media (hover: hover) {
    .novcanik:hover { text-decoration: none; }
}
.novcanik-iznos { font-weight: 600; }


/* Traka nad sadržajem: neplaćen predračun.

   Blaga crvena, kao i ostala upozorenja u aplikaciji (`.traka-blok.opasno`) —
   puna boja preko cele širine je vikala na svakom ekranu (traženo: „neka bude
   manje crvena"). Ono što traži radnju je dugme: ono ostaje puno crveno, pa se
   vidi šta se od čoveka očekuje, a ostatak ekrana ostaje miran. */
.traka-duga {
    display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
    padding: 10px var(--r5);
    margin-bottom: var(--r5);
    background: var(--greska-bg);
    color: var(--greska);
    border: 1px solid var(--greska-ivica);
    font-size: var(--t-sm);
    border-radius: var(--rad);
}
.traka-duga > .ikona { flex: none; }

/* Dva reda: prvi kaže ŠTA je, drugi KOLIKO i DO KADA. Kao jedna rečenica se na
   telefonu lomila gde stigne — ikona je ostajala sama u prvom redu, a iznos,
   jedino zbog čega se traka i čita, završavao u sredini drugog. */
.traka-duga-tekst {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1 1 220px; min-width: 0;
}
.traka-duga-tekst b { font-weight: 600; }
.traka-duga-tekst span { font-size: var(--t-xs); opacity: .85; }

.traka-duga .dugme {
    margin-left: auto;
    background: var(--greska-puna); color: var(--na-boji); border-color: var(--greska-puna);
}
@media (hover: hover) {
    .traka-duga .dugme:hover { background: var(--greska-puna-hover); border-color: var(--greska-puna-hover); color: var(--na-boji); }
}
/* Na telefonu dugme ide u svoj red, preko cele širine: uz tekst ne stane, a
   samo u uglu je izgledalo kao da je ostalo tu gde je palo. */
@media (max-width: 640px) {
    .traka-duga { padding: 12px var(--r4); }
    .traka-duga .dugme { width: 100%; margin-left: 0; }
}

/* ---------------- prazan layout (prijava, onboarding) ---------------- */

.prazan-ekran {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    padding: var(--r10) var(--r5);
    background: var(--pozadina);
}
.prazan-logo {
    display: inline-flex; align-items: center;
    margin-bottom: var(--r8);
}
@media (hover: hover) {
    .prazan-logo:hover { text-decoration: none; }
}
.prazan-logo img { height: 34px; width: auto; }

.prazan-kartica {
    width: min(440px, 100%);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    box-shadow: var(--senka-2);
    padding: var(--r8);
}
.prazan-kartica.siroka { width: min(720px, 100%); }

/* `<main>` je pune širine, a kartica se centrira marginama — ne skupljanjem.

   Prijavljeno sa unosa agencije: kartica je bila široka koliko i najduži red
   teksta u njoj, pa se RAŠIRILA čim je ispod PIB-a stigla poruka o pretrazi.
   `.prazan-ekran` je `flex` sa `align-items: center`, pa se `<main>` kao
   stavka skuplja na sadržaj — a kartica sa `width: min(720px, 100%)` onda
   nema prema čemu da razreši `100%` i ispadne široka koliko i njen sadržaj.
   Sa `<main>` pune širine `100%` je merljivo: kartica dobije svojih 720
   (ili 440) odmah i više ne mrda, ma šta se u njoj pojavilo. Isto važi i za
   kartice u omotu (`auth-paneli`): omot je blok pune širine, kartica u njemu
   ima čvrstu širinu i centrira se marginama. */
.prazan-ekran > main { width: 100%; }
.prazan-kartica { margin-left: auto; margin-right: auto; }
.prazan-naslov { font-size: var(--t-2xl); font-weight: 700; margin-bottom: 6px; }
.prazan-opis { color: var(--n-500); font-size: var(--t-sm); margin-bottom: var(--r6); }
.prazan-noga { text-align: center; margin-top: var(--r5); font-size: var(--t-sm); color: var(--n-500); }

/* „Proveri mejl" posle registracije: sve na jednoj osi, centrirano. Ikonica
   u pločici (kao prazna stanja), adresa u svom redu da se vidi na šta je
   poslato, pa crta i red sa vezama, u kome je i odjava (forma) u liniji sa
   tekstom, ne dugme ispod njega. */
.potvrda-mejla { text-align: center; }
.potvrda-mejla-ikona {
    width: 64px; height: 64px; margin: 0 auto var(--r4);
    display: grid; place-items: center;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: 50%;
}
.potvrda-mejla-ikona .ikona { width: 30px; height: 30px; }
.potvrda-mejla .prazan-naslov { margin-bottom: var(--r3); }
.potvrda-mejla .prazan-opis { margin-bottom: var(--r5); line-height: 1.6; }
.potvrda-mejla-adresa { display: block; margin: 4px 0; font-size: var(--t-md); color: var(--n-900); word-break: break-all; }
.potvrda-mejla-napomena { margin-top: var(--r4); font-size: var(--t-xs); color: var(--n-500); line-height: 1.6; }
.potvrda-mejla-noga {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px;
    margin-top: var(--r5); padding-top: var(--r5); border-top: 1px solid var(--n-200);
    font-size: var(--t-sm); color: var(--n-500);
}
.potvrda-mejla-noga form { display: contents; }
.potvrda-mejla-noga .dugme-veza {
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; color: var(--brend-600); border: 0; cursor: pointer;
}
.potvrda-mejla-noga .dugme-veza .ikona { width: 14px; height: 14px; }
.potvrda-mejla-tacka { color: var(--n-400); }

/* ============================================================
   DODIRNI EKRANI
   Odvojeno od širine ekrana: bitno je čime se kuca, ne koliko je širok.
   `pointer: coarse` znači prst, pa i na tabletu i na velikom telefonu.
   Miš ostaje nedirnut — panel je gust namerno, na desktopu to radi.
   ============================================================ */

@media (pointer: coarse) {
    /* 44px je najmanja meta koju prst pouzdano pogađa; ranije je bilo 34 */
    .dugme { min-height: 44px; }
    .dugme-s { min-height: 38px; }
    .dugme-ikona { min-width: 44px; min-height: 44px; }

    /* polja moraju biti bar 16px, inače iOS zumira ceo ekran pri fokusu
       i korisnik ostane u uvećanom prikazu bez načina da se vrati */
    .unos, .oblast, .izbor { font-size: 16px; min-height: 44px; }
    .oblast { min-height: 88px; }

    /* veze u tabelama i menijima dobijaju vazduh oko sebe */
    .tabela td .dugme-s { min-height: 36px; }
    .padajuci-stavka { min-height: 44px; }
    .kvadratic input, .krugic input { width: 22px; height: 22px; }

    /* trake koje se pomeraju prstom — bez ovoga se zaustavljaju naglo */
    .tabovi, .tabela-omot { -webkit-overflow-scrolling: touch; }
}

/* ---------------- podnožje bočnog menija ---------------- */

.paket-kutija {
    padding: var(--r3);
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
}
/* Traka preko cele širine je sklonjena, pa je ovo jedino mesto gde stanje
   pretplate stoji trajno — mora da se vidi bez čitanja. */
.paket-kutija.uskoro  { background: var(--upozor-bg); border-color: var(--upozor-ivica); }
.paket-kutija.isteklo { background: var(--greska-bg); border-color: var(--greska-ivica); }

.paket-labela {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--n-500);
}
.paket-naziv { font-size: var(--t-md); font-weight: 600; margin-top: 2px; color: var(--n-900); }

.paket-rok {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--t-xs); color: var(--n-500);
    margin: 3px 0 10px;
}
.paket-kutija.uskoro  .paket-rok { color: var(--upozor); font-weight: 600; }
.paket-kutija.isteklo .paket-rok { color: var(--greska); font-weight: 600; }

.paket-rok .ikona { flex: none; }

/* Naslov odeljka na ekranu. Kratak, tih, i nikad sam — uvek stoji nad grupom
   koju objašnjava. Nekome ko ne radi u IT-u to je razlika između „šta je ovo"
   i „aha, ovo su moji limiti". */
.odeljak-naslov {
    font-size: var(--t-sm);
    font-weight: 700;
    /* n-500 je nivo za meta podatke; naslov odeljka nije meta nego oznaka
       grupe ispod sebe, pa mora da se vidi kao naslov, a ne kao napomena. */
    color: var(--n-700);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--r3);
}
/* naslov pripada bloku ispod sebe, pa razmak iznad dolazi od ritma strane */
.sadrzaj-unutra > .odeljak-naslov + * { margin-top: 0; }

/* Stavke grida i flexa se podrazumevano NE skupljaju ispod širine sadržaja
   (`min-width: auto`). Zbog toga široka tabela razvuče kolonu umesto da se
   pomera unutar svog okvira, pa cela strana dobije vodoravno pomeranje.
   Ovo je opšta brana za tu grešku, ne zakrpa za jedan ekran. */
.mreza > *, .kolona > * { min-width: 0; }

/* ---------------- lepljiva bočna kolona ---------------- */

/* Lepi se KOLONA, ne prva kartica u njoj.

   Kad se lepi kartica, sve što stoji ispod nje u istoj koloni nastavlja da
   skroluje — a pošto dolazi kasnije u DOM-u, a lepljiva kartica nema svoj
   sloj, pređe PREKO nje. Na izmeni dokumenta se tako kartica „Uplata"
   penjala preko „Rezimea" i dva okvira su se sekla.

   `align-self: start` je obavezan: stavka mreže se podrazumevano rasteže na
   punu visinu reda, a rastegnut element nema kuda da se pomera — lepljenje
   tada tiho nema efekta. Ovo je najčešći razlog zašto `position: sticky`
   „ne radi" u gridu.

   Ako je kolona viša od ekrana, pregledač sam prestaje da je lepi kad dođe do
   njenog dna — sadržaj tako uvek ostaje dohvatljiv. */
.lepljiva-kolona {
    position: sticky;
    top: var(--lepljivi-vrh, calc(var(--topbar) + var(--r4)));
    align-self: start;
}

/* Ispod 900px kolone se slažu jedna ispod druge, pa lepljenje samo zaklanja
   sadržaj na malom ekranu. */
@media (max-width: 900px) {
    .lepljiva-kolona { position: static; }
}