/* ============================================================
   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; }

/* Izgled klizača stoji uz ostale klizače u 1-osnova.css — ovde je samo ono
   što je raspored. Ranije je tu bilo `scrollbar-width: thin`, i to samo,
   bez boje: Chrome to dugo nije čitao, pa je na tegetnom meniju stajala
   sistemska siva traka. */
.bocni-meni { flex: 1; overflow-y: auto; padding: var(--r4) var(--r3); }

/* 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;
}
/* Ime ekrana u traci. Ekran koji nosi svoje zaglavlje (`.strana-glava-app`)
   ga ovde gasi — vidi `:has()` pravilo niže. 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 je JEDAN red (56px). Bila je dva reda i 105px — skoro osmina
       ekrana telefona potrošena pre nego što se vidi ijedan podatak, i to na
       tamnoj podlozi koja je taj blok činila još težim.

       Drugi red je mogao da nestane zato što je ime strane otišlo iz trake u
       sam sadržaj (`.strana-glava-app`): tamo je krupno i čitko, pa u traci
       ostaje samo ono što se DODIRUJE — meni, pretraga, tema, zvono i nalog.
       Pretraga je u svom redu nosila i natpis „Globalna pretraga"; sada je
       lupa, kao i svako drugo dugme u traci.

       6 + 44 + 6 = 56 */
    :root { --topbar: 56px; }


    .gornja {
        /* Jedan red, pa se ni ne lomi: `flex-wrap: wrap` je ostatak dvorednog
           zaglavlja. Da je ostao, a nešto bi se jednom ipak prelomilo, traka
           bi narasla preko `--topbar: 56px` po kome `.sadrzaj` računa razmak
           odozgo — i sadržaj bi se podvukao pod nju. */
        flex-wrap: nowrap;
        align-items: center;
        /* Uži razmak od ivice nego na stolu: u jednom redu stoji pet dugmadi
           od 44px, pa svaki piksel sa strane ide imenu ekrana, koje se inače
           seče već na „Poreski kalendar".

           Razmak MEĐU dugmadima ostaje 8px i ne sme niže: ispod toga se na
           dodir promaši susedno dugme, a ovde su jedno do drugog pretraga,
           tema, zvono i nalog — promašaj znači da se otvori tuđi ekran.
           Skraćuje se samo rastojanje od ivice ekrana, gde nema šta da se
           promaši. */
        padding: 6px var(--r3);
        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; }

    /* Redosled u redu: levo ono čime se upravlja ekranom, desno nalog.
       Zvono i avatar idu poslednji jer palac desne ruke tu najlakše stiže. */
    .gornja > .otvori-meni { order: 1; }
    .gornja > .gornja-naslov { order: 2; }
    .gornja > .zvono-padajuci { order: 6; }
    .gornja > .padajuci:not(.zvono-padajuci) { order: 7; }

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

    /* Pretraga je lupa, ne polje: natpis i prečica traže red za sebe, a
       prečica („Ctrl K") na telefonu ionako ne postoji. */
    .gornja > .gornja-pretraga {
        order: 3;
        flex: none;
        display: inline-flex;
        width: 44px; min-width: 0; height: 44px; padding: 0;
        align-items: center; justify-content: center;
    }
    .gornja-pretraga span,
    .gornja-pretraga kbd { display: none; }

    .gornja > .gornja-novcanik { order: 4; min-width: 0; }
    .gornja > .prekidac-teme   { order: 5; display: inline-flex; }
    .gornja .prekidac-teme .dugme { width: 44px; min-width: 44px; padding: 0; }

    /* Dug ume da bude dug broj; on sme da se skupi, dugmad ne. */
    .gornja .novcanik { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------------- 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); }

/* ---- zaglavlje ekrana ----

   Krupno ime strane u samom sadržaju, umesto sitne oznake u gornjoj traci.
   Traka je uska i deli se sa pretragom, zvonom i avatarom, pa je ime strane
   tamo bilo najsitniji tekst na ekranu — na ekranu na kome je ono jedini
   odgovor na pitanje „gde sam".

   Kad ekran ima ovo zaglavlje, oznaka u traci se sama gasi (vidi `:has()`
   pravilo uz `.gornja`), pa se isti tekst ne pojavljuje dvaput. */
.strana-glava-app {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--r4);
    flex-wrap: wrap;
}
.strana-glava-app h1 {
    font-size: var(--t-3xl); line-height: var(--t-3xl-h);
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0;
}
/* Jedan red, i to onaj koji kaže čemu ekran služi. Duže objašnjenje ovde ne
   ide: ko program otvara svaki dan, ono mu samo zauzima prvi ekran. */
.strana-glava-app p {
    margin: 4px 0 0;
    font-size: var(--t-md);
    color: var(--n-500);
    max-width: 62ch;
}
.strana-glava-akcije { display: flex; align-items: center; gap: var(--r2); flex: none; }

@media (max-width: 640px) {
    .strana-glava-app h1 { font-size: var(--t-2xl); line-height: var(--t-2xl-h); }
    /* Na telefonu prvi ekran mora da nosi podatke, ne opis. */
    .strana-glava-app p { display: none; }
}

/* 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; }

/* ---- red radnji na TELEFONU ----

   Izmereno na 375px, na spisku klijenata: traka je uzimala 148px i tri reda —
   po jedan na stavku, jer je svaka tražila svoju najmanju širinu (pretraga
   200px, „Izvoz u Excel" 130px, „Dodaj klijenta" 150px) i nijedne dve nisu
   stale zajedno. To je bio ceo gornji deo ekrana pre nego što se vidi i jedan
   klijent.

   Zato red na telefonu postaje KOLONA sa jasnim redosledom: pretraga preko
   cele širine (jedno polje, prepoznatljivo), period i filteri pod njom, a
   dugmad u zadnjem redu uz desnu ivicu — tamo gde ih palac traži. 148 → 94px.

   Dugme „Traži" više ne stoji u tom redu ni na prvom učitavanju: sklanja ga
   `ziva-pretraga.js` (vidi `skeniraj`), jer pretraga radi sama. */
@media (max-width: 700px) {
    .akcije-vrh { gap: 8px; }

    /* Forma uzima ceo red, pa njene stavke mogu da se slože u kolonu umesto
       da se otimaju o ostatak reda sa dugmadima. */
    .akcije-vrh .alati,
    .akcije-vrh form.red { flex: 1 1 100%; gap: 8px; flex-wrap: wrap; }
    .akcije-vrh .alati .pretraga { flex: 1 1 100%; width: auto; max-width: none; }

    /* Period i filter: labela levo, polje popuni ostatak reda. Bez ovoga
       `min-width: 180px` i čvrstih 220px izbacuju svako polje u svoj red. */
    .akcije-vrh .alati-izbor { flex: 1 1 100%; }
    .akcije-vrh .alati-izbor .izbor,
    .akcije-vrh .alati-izbor .ts-wrapper.izbor,
    .akcije-vrh form.red select.izbor,
    .akcije-vrh form.red .ts-wrapper.izbor { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* 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" OSTAJE i na telefonu, u dva reda po dve
       kartice (vidi `.brze-akcije` u 2-komponente.css).

       Ranije ga ovde nije bilo: isti izbor nudi i dugme u sredini donje trake,
       pa je odeljak smatran ponavljanjem. Ali to dugme je krug sa plusom —
       treba znati da se na njega pritisne i da će se otvoriti lepeza. Čoveku
       koji program otvara prvi put, a ne radi za računarom, četiri imenovane
       kartice na samom ekranu kažu šta može da uradi bez ijednog pogađanja.
       Dugme u traci ostaje kao prečica sa svakog drugog ekrana. */

    /* 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 puna brend boja, ne providni sloj.

   Sloj od 16% bele na tegetu daje razliku koja se na kancelarijskom ekranu
   pod uglom jedva vidi — a ta jedna stavka je odgovor na pitanje „gde sam".
   Puna boja se vidi i iz druge sobe, a pošto je to ista plava kojom su
   obojena i glavna dugmad, meni i sadržaj govore istim jezikom. */
.bocni .meni-stavka.aktivna {
    background: var(--brend-puna);
    color: var(--na-boji);
    font-weight: 600;
}
@media (hover: hover) {
    .bocni .meni-stavka.aktivna:hover {
        background: var(--brend-puna-hover);
        color: var(--na-boji);
    }
}
.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 ---

   Traka je nekad bila ista teget podloga kao meni. Zajedno su pravile veliko
   slovo „L" oko sadržaja: dve tamne ravni koje stežu stranu sa gore i sa
   leve strane. Na telefonu je bilo najgore — tamni blok je uzimao 105px
   visine pre nego što bi se video i jedan podatak.

   Sada je traka svetla, kao i sadržaj ispod nje. Meni ostaje teget: on je
   navigacija i sme da stoji po strani, dok traka pripada strani na kojoj se
   radi. Providna je uz `backdrop-filter`, pa sadržaj koji prolazi ispod nje
   ostaje nagovešten i strana deluje kao jedan list, a ne kao dva sprata. */

.gornja {
    background-color: var(--traka);
    background-image: none;
    backdrop-filter: blur(10px);
    border-bottom-color: var(--traka-ivica);
}

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

/* Ekran koji sam nosi svoje zaglavlje (`.strana-glava-app`) ne treba i malu
   oznaku u traci — isti tekst dvaput, jednom sitno a jednom krupno, samo
   pravi šum. Traka i sadržaj su susedi u <body>, pa `:has()` sa opštim
   susedom vidi zaglavlje bez ijedne linije PHP-a i bez nove klase na telu. */
.gornja:has(~ .sadrzaj .strana-glava-app) .gornja-naslov { display: none; }

.gornja .dugme-tiho,
.gornja-pretraga,
.gornja .izbor-agencije {
    background: var(--traka-sloj);
    color: var(--traka-tih);
    border-color: transparent;
}
@media (hover: hover) {
    .gornja .dugme-tiho:hover,
    .gornja-pretraga:hover,
    .gornja .izbor-agencije:hover {
        background: var(--traka-sloj-jak);
        color: var(--traka-tekst);
        border-color: transparent;
    }
}

/* 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(--traka-tih); }
.gornja-pretraga span { color: var(--traka-tih); }

.gornja .tekuca-firma { color: var(--traka-tekst); }
.gornja-pretraga kbd {
    background: var(--n-0);
    border-color: var(--traka-ivica);
    color: var(--traka-tih);
}

/* 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);
}

/* Obruč oko tačke je boja trake ispod nje, da tačka ne dobije tuđi prsten. */
.gornja .zvono-tacka { border-color: var(--n-0); }

/* 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 kaže da se duguje. Kutije nema —
   vidi `.novcanik`. Boja ima svoj par tokena jer je to stepen teksta, a ne
   površina: vrednosti i obrazloženje stoje uz `--novcanik-tekst` u
   1-osnova.css. */
.gornja .novcanik { color: var(--novcanik-tekst); font-weight: 600; }
@media (hover: hover) {
    .gornja .novcanik:hover { color: var(--novcanik-tekst-jak); }
}

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

/* ---------------- 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. */
/* Vlasnički panel deli istu svetlu traku sa korisničkim — razlikuje ih bočni
   meni i znak „PANEL" uz logo, a ne boja trake. Ranije je ovde traka bila
   tegetna; otkad je korisnička svetla, ista boja bi vlasnički panel vratila u
   stari izgled i dva panela bi delovala kao dva različita programa. */

/* 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: var(--traka-tih); }
.gornja-grupa::after { content: '/'; margin: 0 8px; color: var(--n-300); }
@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);
}
/* Isti stepen kao `h1` u zaglavlju korisničkog ekrana: oba su ime strane na
   kojoj se stoji, pa nema razloga da budu različite veličine. */
.tabla-pozdrav { font-size: var(--t-3xl); line-height: var(--t-3xl-h); font-weight: 700; letter-spacing: -.03em; }
.tabla-podnaslov { margin-top: 4px; font-size: var(--t-sm); color: var(--n-500); }
.tabla-akcije { display: flex; gap: 8px; flex-wrap: wrap; }

/* Na telefonu pozdrav silazi stepen niže, kao i `h1` u korisničkom panelu —
   „Dobro jutro, Aleksandre" u 30px se na 375px prelama u tri reda. */
@media (max-width: 640px) {
    .tabla-pozdrav { font-size: var(--t-2xl); line-height: var(--t-2xl-h); }
}

/* 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, 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".

   Bio je ispisan sitnim verzalima (13px, razmaknuta slova). Takav natpis se
   čita kao oznaka na formularu, a ne kao naslov: oko ga preskoči i prvo
   naleti na kartice ispod. Sada je pravi naslov — krupniji od teksta oko
   sebe, malim slovima, u boji glavnog teksta. */
.odeljak-naslov {
    display: flex; align-items: baseline; gap: var(--r2);
    font-size: var(--t-xl); line-height: var(--t-xl-h);
    font-weight: 700;
    color: var(--n-900);
    letter-spacing: -.02em;
    margin-bottom: var(--r3);
}
/* Dopuna uz naslov („za 2026. godinu"): ide normalnom težinom i tiše, da
   naslov ostane naslov. */
.odeljak-naslov .dopuna {
    font-size: var(--t-md);
    font-weight: 400;
    color: var(--n-500);
    letter-spacing: 0;
}
/* Veza na kraju reda („Svi dokumenti →"). `margin-left: auto` je gura na
   desnu ivicu, pa naslov i prečica dele jedan red bez dodatnog omotača. */
.odeljak-naslov .odeljak-veza {
    margin-left: auto;
    font-size: var(--t-sm);
    font-weight: 500;
    white-space: nowrap;
}
/* 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; }
}