/* ============================================================
   FAKTO — komponente
   Svaka ima svoj partial u app/views/ui/. Ništa se ne piše dvaput.
   ============================================================ */

/* ---------------- dugmad ---------------- */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: var(--t-md);
    font-weight: 500;
    line-height: 20px;
    border-radius: var(--rad-sm);
    border: 1px solid transparent;
    white-space: nowrap;
    /* Dugme sa tekstom i dugme sa samom ikonom stoje na različitoj osnovnoj
       liniji, pa su jedno pored drugog u ćeliji tabele bila razmaknuta 2px po
       visini. `middle` ih poravnava po sredini, bez obzira na sadržaj. */
    vertical-align: middle;
    transition: background var(--brzo), border-color var(--brzo), color var(--brzo), box-shadow var(--brzo);
    text-decoration: none;
}
/* Golo `.dugme` bez varijante mora da izgleda kao dugme. Ranije je imalo
   providnu pozadinu i providnu ivicu, pa je svaki šablon koji je zaboravio
   varijantu — ili koristio klasu iz drugog stilskog fajla — davao nevidljivo
   dugme. Sada je najgori mogući ishod „sekundarno", ne „ništa". */
.dugme { background: var(--n-0); color: var(--n-700); border-color: var(--n-300); }
@media (hover: hover) {
    .dugme:hover { text-decoration: none; }
}
.dugme:disabled, .dugme.zauzet { opacity: .6; cursor: not-allowed; pointer-events: none; }

.dugme-primarno { background: var(--brend-puna); color: var(--na-boji); box-shadow: var(--senka-1); }
@media (hover: hover) {
    .dugme-primarno:hover { background: var(--brend-puna-hover); color: var(--na-boji); }
}

.dugme-sekundarno { background: var(--n-0); color: var(--n-700); border-color: var(--n-300); box-shadow: var(--senka-1); }
@media (hover: hover) {
    .dugme-sekundarno:hover { background: var(--n-50); color: var(--n-900); border-color: var(--n-400); }
}

/* Treći nivo dugmeta, ali i dalje DUGME. Ranije je bilo providno i bez
   ivice, pa se čitalo kao siv tekst — „Pošalji mejl" se prosto nije videlo.
   Sada ima svoju površinu i ivicu; tiše je od sekundarnog, ali se vidi. */
.dugme-tiho {
    background: var(--n-50);
    color: var(--n-700);
    border-color: var(--n-200);
}
@media (hover: hover) {
    .dugme-tiho:hover { background: var(--n-100); color: var(--n-900); border-color: var(--n-300); }
}

/* Jedini oblik koji SME da izgleda kao tekst — koristi se unutar rečenice,
   nikad kao samostalna radnja. */
.dugme-tiho.bez-okvira { background: transparent; border-color: transparent; }
@media (hover: hover) {
    .dugme-tiho.bez-okvira:hover { background: var(--n-100); border-color: transparent; }
}

.dugme.opasno, .dugme-tiho.opasno { color: var(--greska); border-color: var(--greska-ivica); background: var(--greska-bg); }
@media (hover: hover) {
    .dugme.opasno:hover, .dugme-tiho.opasno:hover { background: var(--greska-puna); color: var(--na-boji); border-color: var(--greska-puna); }
}

.dugme-opasno { background: var(--greska-puna); color: var(--na-boji); }
@media (hover: hover) {
    .dugme-opasno:hover { background: var(--greska-puna-hover); color: var(--na-boji); }
}

.dugme-veza { background: none; color: var(--brend-600); padding: 0; }
@media (hover: hover) {
    .dugme-veza:hover { color: var(--brend-700); text-decoration: underline; }
}

.dugme-s { padding: 6px 12px; font-size: var(--t-sm); }
.dugme-l { padding: 13px 22px; font-size: var(--t-lg); }
.dugme-puno { width: 100%; }
.dugme-ikona { padding: 8px; }

.dugme .vrti {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vrtenje .6s linear infinite;
}
@keyframes vrtenje { to { transform: rotate(360deg); } }

/* ---------------- kartica ---------------- */

/* Pozadina strane je tamnija od kartice, pa odvajanje radi kontrast
   površina, a ne debela ivica i senka. Ivica ostaje samo da ivica bude oštra
   na ekranima bez tačnog prikaza boje. */
.kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-1);
}

/* Glava kartice je TRAKA, ne prvi red teksta.

   Ranije je bila providna, a naslov 15px/600 — jedva jači od 15px/400 u telu
   kartice, i slabiji od velikih slova u zaglavlju tabele odmah ispod. Oko je
   prvo nailazilo na „DATUM", a naslov kartice se gubio.

   Kartica se čita kao glava — telo — noga. Traka je za ton jača od zebre u
   tabeli ispod (`--n-100` prema `--n-50`): da su iste, glava bi izgledala kao
   još jedan red tabele. Zaobljenje mora da se ponovi ovde — bez njega bi
   obojena traka zasekla zaobljene gornje uglove kartice. */
.kartica-glava {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r3);
    padding: var(--r4) var(--r5);
    background: var(--n-100);
    border-bottom: 1px solid var(--n-200);
    border-radius: var(--rad) var(--rad) 0 0;
}

/* Korak veći i deblji od teksta u telu (16/700 prema 15/400). Sam razmak nije
   bio dovoljan — naslov mora da se razlikuje i po veličini i po debljini, jer
   ga na spisku kartica oko traži letimično, ne čitanjem. */
.kartica-naslov {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--t-lg); line-height: var(--t-lg-h);
    font-weight: 700;
    color: var(--n-900);
}
/* Ikona nosi brend boju, ne sivu: ona je oznaka naslova, a `--n-400` je token
   za ukras i na 2,4:1 se jedva vidi. */
.kartica-naslov .ikona { color: var(--brend-600); flex: none; }
.kartica-telo { padding: var(--r5); }
.kartica-telo.zbijeno { padding: 0; }
.kartica-noga {
    padding: var(--r3) var(--r5);
    border-top: 1px solid var(--n-200);
    background: var(--n-25);
    border-radius: 0 0 var(--rad) var(--rad);
}

/* ---------------- pločica ispod ikone ----------------

   Meki obojeni kvadrat iza ikone. Nosi ga svaka kartica koja predstavlja jednu
   stvar: brzu akciju, brojku, limit.

   Nije ukras. Korisnik ovog programa je najčešće zanatlija koji na ekran
   gleda u prolazu i ne čita redom — pločica mu daje drugi trag, boju i oblik,
   po kome prepoznaje karticu pre nego što pročita njen naslov. Zato je boja
   po značenju stalna: novac koji je ušao je zelen, ono što kasni crveno,
   dokumenti plavi. */
.plocica {
    flex: none;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--rad);
    background: var(--plocica-brend-bg);
    color: var(--plocica-brend);
}
.plocica .ikona { width: 22px; height: 22px; }

.plocica-brend   { background: var(--plocica-brend-bg);   color: var(--plocica-brend); }
.plocica-ljubic  { background: var(--plocica-ljubic-bg);  color: var(--plocica-ljubic); }
.plocica-zelena  { background: var(--plocica-zelena-bg);  color: var(--plocica-zelena); }
.plocica-narandz { background: var(--plocica-narandz-bg); color: var(--plocica-narandz); }
.plocica-crvena  { background: var(--plocica-crvena-bg);  color: var(--plocica-crvena); }
.plocica-tirkiz  { background: var(--plocica-tirkiz-bg);  color: var(--plocica-tirkiz); }

/* ---------------- KPI kartica ---------------- */

/* Pločica stoji levo, tekst desno. Ranije je ikona bila sitna i siva, u istom
   redu sa labelom ispisanom VELIKIM SLOVIMA — oko je prvo nailazilo na red
   sivih verzala, a tek onda na broj zbog koga kartica postoji. */
/* Uspravno je PODRAZUMEVANO: labela, broj, podnaslov jedno ispod drugog.

   Kad kartica ima pločicu sa ikonom, prelazi u red — pločica levo, tekst
   desno (tekst tada nosi `.kpi-telo`). Uslov je `:has()`, a ne zasebna klasa,
   jer raspored zavisi od toga ŠTA je u kartici; klasa bi se pre ili kasnije
   zaboravila i kartica bi se iscrtala naopako.

   Ranije je red bio podrazumevan, što je bila greška: ekran kursne liste piše
   `.kpi` ručno, bez pločice i bez `.kpi-telo`, pa su mu se labela, broj i
   podnaslov poređali u jedan red — „EUR 117,39 RSD za 1 EUR" sa podnaslovom
   prelomljenim u dva reda. */
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--r5); }
.kpi:has(> .plocica) { flex-direction: row; align-items: flex-start; gap: var(--r3); }
.kpi-telo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* Malim slovima, kao u rečenici. Verzali se čitaju sporije i ovde nisu nosili
   nikakvo značenje — samo su nalik „natpisu u formularu", a program treba da
   deluje kao da se obraća čoveku. */
.kpi-labela {
    font-size: var(--t-sm); font-weight: 500;
    color: var(--n-500);
    display: flex; align-items: center; gap: 6px;
}
.kpi-broj {
    font-size: var(--t-2xl); line-height: var(--t-2xl-h);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* veliki brojevi bez ovoga deluju razvučeno */
    letter-spacing: -.02em;
    color: var(--n-900);
}
/* Valuta je mera broja, ne podatak: sitnija je i siva, pa pogled pada na
   iznos. Razmak ide kroz `margin`, jer `kpi-broj` ima tabularne cifre i
   obična razmaknica bi dobila širinu cifre. */
.kpi-jedinica {
    margin-left: 5px;
    font-size: var(--t-sm); font-weight: 500;
    color: var(--n-500);
    letter-spacing: 0;
}
.kpi-podnaslov { font-size: var(--t-xs); color: var(--n-500); }

/* Kartica koja je link.

   Boja se NASLEĐUJE: bez toga bi ceo sadržaj kartice pomodreo, jer je to link,
   pa bi broj i podnaslov izgledali kao da se svaki klika posebno.

   `display: block` je obavezan — `<a>` je podrazumevano `inline`, pa bi u
   `mreza-kpi` ispao iz reda sa ostalim karticama. */
.kartica-veza {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--brzo), box-shadow var(--brzo), transform var(--brzo);
}
@media (hover: hover) {
    .kartica-veza:hover {
        /* `a:hover` u osnovi pomodri tekst i podvuče ga — a to je 0,1,1, jače od
           `.kartica-veza` (0,1,0). Bez ovog ponavljanja cela kartica na hover
           pomodri i podvuče se, kao da je jedna duga veza. */
        color: inherit;
        text-decoration: none;
    
        border-color: var(--brend-300);
        box-shadow: var(--senka-2);
        transform: translateY(-2px);
    }
}
.kartica-veza:active { transform: translateY(0); }

/* Globalni `:focus-visible` postavlja `border-radius: 4px` NA SAM element, pa
   bi kartica pri fokusu izgubila svoje zaobljenje. Vraća se. */
.kartica-veza:focus-visible { border-radius: var(--rad); }

/* Strelica stoji na kraju reda sa labelom i pojača se na hover. Ona je jedini
   znak klikabilnosti koji postoji i na dodiru — `:hover` na telefonu nema. */
.kpi-strelica { margin-left: auto; color: var(--n-300); transition: color var(--brzo); }
@media (hover: hover) {
    .kartica-veza:hover .kpi-strelica { color: var(--brend-600); }
}

@media (prefers-reduced-motion: reduce) {
    .kartica-veza { transition: none; transform: none; }
    @media (hover: hover) {
        .kartica-veza:hover { transition: none; transform: none; }
    }
}

/* Blok u brend boji — kad je broj u njemu sam po sebi razlog zbog kog se ekran
   otvara (kursevi najčešćih valuta, rezultat preračuna).

   Ide TINTA, ne puna boja: hrom je već pun indigo, pa bi četiri zasićene
   kartice odmah ispod trake bile druga plava traka. Ovako se blok vidi kao
   istaknut, a ne kao još jedan deo okvira.

   Boje su iz brend skale, pa se u tamnoj temi okreću same — `--brend-50` tamo
   postaje tamno-plava podloga, a `--brend-700/800` svetla slova na njoj. */
.brend-blok {
    background: var(--brend-50);
    border: 1px solid var(--brend-200);
}
.brend-blok .kpi-broj { color: var(--brend-800); }
.brend-blok .kpi-labela,
.brend-blok .kpi-podnaslov,
.brend-blok .tekst-blagi,
.brend-blok .tekst-tih { color: var(--brend-700); }
.brend-blok .kpi-labela .ikona { color: var(--brend-600); }
.kpi-promena { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 500; }
.kpi-promena.gore { color: var(--uspeh); }
.kpi-promena.dole { color: var(--greska); }

.mreza-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--r4); }

/* ---------------- traka limita ---------------- */

.limit + .limit { margin-top: var(--r5); }

/* ---- sažeta traka limita ----

   Isti podaci kao puna kartica, ali u jednom redu: naziv, iznos, traka,
   preostalo. Stoji na ekranima gde je limit podsetnik a ne posao (spisak
   faktura), pa ne sme da pojede prvi ekran pre nego što se vidi ijedan red
   spiska. Traka raste i skuplja se (`flex: 1`), brojevi ne. */
/* Razmak među punim limitima (`.limit + .limit`) ovde ne važi: sažete trake
   stoje jedna PORED druge u mreži, pa bi margina odozgo spustila drugu i
   razvukla ceo red na 64px umesto 44px. */
.limit-sazeto + .limit-sazeto { margin-top: 0; }

.limit-sazeto {
    display: flex; align-items: center; gap: var(--r3);
    padding: 10px var(--r4);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-1);
    font-size: var(--t-sm);
}
.limit-sazeto .limit-naziv { font-weight: 600; color: var(--n-900); white-space: nowrap; }
.limit-sazeto .limit-brojevi { white-space: nowrap; font-variant-numeric: tabular-nums; }
.limit-sazeto .limit-traka {
    flex: 1; min-width: 60px;
    height: 6px;
    margin: 0;
    border-radius: var(--rad-pun);
    background: var(--n-100);
    overflow: hidden;
}
.limit-sazeto .limit-popuna { height: 100%; border-radius: var(--rad-pun); }
.limit-sazeto .limit-ostatak { white-space: nowrap; color: var(--n-500); font-variant-numeric: tabular-nums; }
.limit-sazeto .limit-ostatak.preko { color: var(--greska); font-weight: 600; }

/* Na uskom ekranu traka silazi u svoj red, da se brojevi ne sudare. */
@media (max-width: 700px) {
    .limit-sazeto { flex-wrap: wrap; gap: 6px var(--r2); }
    .limit-sazeto .limit-traka { order: 3; flex-basis: 100%; }
    .limit-sazeto .limit-ostatak { margin-left: auto; }
}
.limit-glava { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r3); margin-bottom: 8px; }
.limit-naziv { font-size: var(--t-sm); font-weight: 500; color: var(--n-700); }
.limit-brojevi { font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--n-500); }
.limit-brojevi b { color: var(--n-900); }

.limit-traka {
    height: 10px;
    background: var(--n-100);
    border-radius: var(--rad-pun);
    overflow: hidden;
}
.limit-popuna {
    height: 100%;
    background: var(--brend-600);
    border-radius: var(--rad-pun);
    transition: width var(--sporo);
}
.limit.pazi .limit-popuna { background: var(--akcenat-500); }
.limit.opasno .limit-popuna { background: var(--greska); }

.limit-noga { display: flex; justify-content: space-between; gap: var(--r3); margin-top: 6px; font-size: var(--t-xs); color: var(--n-500); }
.limit.pazi .limit-poruka { color: var(--upozor); font-weight: 500; }
.limit.opasno .limit-poruka { color: var(--greska); font-weight: 500; }

/* ---------------- tabela ---------------- */

/* Omot je i „kontejner" — pravila ispod gledaju širinu SAMOG OMOTA, ne
   ekrana. To je bitno jer ista tabela ume da stoji i preko cele širine i u
   uskoj koloni mreže; širina ekrana o tome ne govori ništa. */
.tabela-omot { overflow-x: auto; container-type: inline-size; }

/* Razmak u ćeliji je 12px, ne 16px. Osam kolona × dve strane = 64px razlike
   po tabeli — tačno toliko je nedostajalo da tabela fakture stane u karticu
   bez vodoravnog skrola na užem laptopu. */

/* `tabular-nums` na celoj tabeli: bez toga cifre imaju različite širine,
   pa se iznosi u koloni ne poklapaju i oko ne može da ih uporedi odozgo nadole. */
.tabela { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.tabela th {
    text-align: left;
    padding: 10px var(--r3);
    font-size: var(--t-sm);
    font-weight: 600;
    /* Malim slovima. Verzali se čitaju sporije — oko ne može da se uhvati za
       oblik reči nego mora slovo po slovo — a u tabeli se naziv kolone traži
       letimično, usred rada. Na devet kolona to je devet sitnih natpisa koji
       usporavaju svaki pogled na spisak.

       Razlika prema podatku ispod sada nosi debljina (600 prema 400) i boja,
       a ne veličina slova: naziv kolone je za nijansu KRUPNIJI nego pre
       (13px umesto 12), jer je i on tekst koji se čita. */
    letter-spacing: 0;
    /* n-500 na 4,9:1 je za meta podatke; naziv kolone se čita jednako često
       kao i sam podatak, pa ide na isti nivo kao sporedni tekst. */
    color: var(--n-700);
    /* Bez pozadinske trake: red pod mišem se boji istim tonom, pa bi se
       zaglavlje i taj red stopili. Zaglavlje se ovako čita po debljini i
       jačoj donjoj liniji, a boja ostaje slobodna za hover. */
    background: transparent;
    border-bottom: 1px solid var(--n-200);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
/* `.tabela th` ima svoje `text-align: left`, koje je specifičnije od
   pomoćne klase — bez ovoga se zaglavlje kolone sa iznosom drži levo dok su
   sami iznosi desno, pa se ne vidi šta kojoj koloni pripada. */
/* Ćelija koja ne sme da razvlači svoju kolonu: `max-width: 0` znači da kolona
   ne traži ništa za sebe, pa dobije ono što pretekne posle kolona sa zadatom
   širinom, a predug tekst se u njoj skraćuje trotačkom umesto da gura susede.
   Ceo tekst ide u `title` (vidi spisak uplata). */
.tabela td.celija-skracena { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Isto, ali za ćeliju sa dva reda (naziv pa opis, trošak pa napomena): tu se
   tekst PRELAMA umesto da se seče, jer bi se drugi red inače izgubio. Kolona
   ni ovde ne traži širinu za sebe. */
.tabela td.celija-gipka { max-width: 0; }

.tabela th.tekst-desno   { text-align: right; }
.tabela th.tekst-sredina { text-align: center; }

.tabela th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
@media (hover: hover) {
    .tabela th a:hover { color: var(--n-900); text-decoration: none; }
}
.tabela th.sortirano a { color: var(--brend-600); }

.tabela td {
    padding: 11px var(--r3);
    border-bottom: 1px solid var(--n-100);
    vertical-align: middle;
    /* Pun ton, ne prigušen. Ranije je samo prva kolona nosila punu boju, a
       ostale su bile za nijansu slabije — u tabeli je, međutim, svaka ćelija
       podatak zbog kojeg se strana i otvara. Razliku „gde sam u redu" sada
       nosi zebra, pa boja slova ne mora da je pravi. */
    color: var(--n-900);
}

/* Zebra: svaki drugi red blago osenčen.

   Sa osam kolona oko pri prelasku s leva na desno lako sklizne u susedni red.
   Traka to drži zajedno bolje od linije, jer prati ceo red celom širinom.

   Mora da stoji PRE hovera: specifičnost im je ista, pa odlučuje redosled —
   obrnuto bi zebra gasila red pod mišem. Zato je i hover pomeren za jedan ton
   naviše, da se vidi i preko osenčenog reda. */
.tabela tbody tr:nth-child(even) { background: var(--n-50); }
@media (hover: hover) {
    .tabela tbody tr:hover { background: var(--n-100); }
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .kolona-akcije { width: 1%; white-space: nowrap; text-align: right; }

/* Kolona sa oznakom dokumenta: broj i datum ispod njega.

   Broj fakture je IDENTIFIKATOR — prelomljen na „FA-1-" i „2026" prestaje da
   se čita kao jedna stvar. Na širokom ekranu se to ne vidi, ali u kartici na
   kontrolnoj tabli kolona dobije osamdesetak piksela, pa duži broj pukne u dva
   reda, a datum ispod u „01.09.20" i „26.".

   `width: 1%` tera kolonu da uzme tačno onoliko koliko joj treba; ostatak ide
   nazivu klijenta, koji sme da se prelama jer je tekst, a ne oznaka. */
.tabela .kolona-broj { width: 1%; white-space: nowrap; }

/* Kolona koja ostaje na desnoj ivici i kad tabela mora da se skroluje.

   Editor stavki stoji u užoj koloni mreže i njegove ćelije su polja sa svojim
   najmanjim širinama — dovoljan je duži naziv ili veći iznos pa da dugme za
   brisanje reda ispadne van okvira.

   Pozadina mora da bude ISTA kao pozadina reda ispod nje, inače se vidi šav.
   Prvi pokušaj je uzeo boje iz stila papirnog lista (`#EBEEF2`, `#F8F9FB`) —
   a `.tabela th` je namerno providna i redovi koriste `--n-50`/`--n-100`.
   Zakucana kolona je zato izgledala kao zaseban, sivi blok. */
.kolona-lepljiva {
    position: sticky;
    right: 0;
    z-index: 1;

    /* Fiksna širina, ne `width: 1%`. Stisnuta tabela ume da skupi ćeliju ispod
       širine njenog sadržaja — dugme se tada stanji u tanku traku, a ikona u
       njemu ispadne van i deluje kao da je nema. 50px = dugme 34 + 2×8 razmaka. */
    width: 50px;
    min-width: 50px;
    white-space: nowrap;

    /* kartica je bela; ovo je najniži sloj, red ga po potrebi pregazi */
    background: var(--n-0);
}

/* Iste boje kojima se boje i sami redovi — ništa svoje. */
.tabela tbody tr:nth-child(even) .kolona-lepljiva { background: var(--n-50); }
@media (hover: hover) {
    .tabela tbody tr:hover .kolona-lepljiva { background: var(--n-100); }
}

/* `.tabela th` (0,1,1) je specifičnije od `.kolona-lepljiva` (0,1,0) i vraća
   zaglavlje na providno — kroz njega se onda vidi sadržaj koji klizi ispod.
   Ista zamka kao kod `text-align` u zaglavlju tabele. */
.tabela th.kolona-lepljiva { background: var(--n-0); }

/* Kad omot ima dovoljno prostora, tabela MORA da stane — vodoravni skrol na
   desktopu je uvek greška, ne rešenje. Zato se tu ukida sve što tabelu može
   da razvuče: zaglavlje sme da se prelomi u dva reda, a dugačka neprekidna
   reč (mejl, naziv bez razmaka) sme da se prelomi bilo gde.

   Ovo se ne vidi dok ima mesta — `anywhere` prelama tek kad je kolona stisnuta
   — ali obara najmanju moguću širinu tabele, pa traka nema odakle da se
   pojavi. Mora da stoji POSLE `.tabela th`, jer je specifičnost ista: upit o
   kontejneru je ne diže, pa odlučuje redosled.

   Ispod 560px (telefon) ostaje po starom: kolone zadržavaju širinu i tabela
   skroluje, jer bi sedam kolona u 320px bilo neupotrebljivo stisnuto. */
@container (min-width: 560px) {
    .tabela th { white-space: normal; }
    .tabela td { overflow-wrap: anywhere; }

    /* Brojevi, datumi i dugmad se ne prelamaju ni tada — „207.000,00" u dva
       reda niko ne ume da pročita. */
    .tabela td.iznos,
    .tabela td.broj,
    .tabela td.kolona-akcije { overflow-wrap: normal; white-space: nowrap; }
}

/* Kad je omot tesan, razmak u ćelijama je prvo što sme da ode. Pun razmak
   (12px sa svake strane, osam kolona) drži najmanju širinu tabele faktura na
   665px; sa užim razmakom pada na 593px, pa tabela stane u karticu i traka
   nema odakle da se pojavi.

   Traka se primeti samo u Firefoxu, ali to nije njegova greška — preliv je
   isti i u Chromeu (prag 666px). Firefox crta overlay traku PREKO poslednjeg
   reda, tamnu i upadljivu, a Chrome doda 15px svetle trake ISPOD sadržaja,
   pa se lakše previdi. Zato se pravilo tiče širine, ne pregledača. */
@container (max-width: 720px) {
    .tabela th,
    .tabela td { padding-left: 8px; padding-right: 8px; }

    .tabela .kolona-akcije { padding-left: 2px; padding-right: 6px; }
}

/* ---------------- prekidač teme ---------------- */

/* Forma, ne dugme — mora da radi i bez JavaScripta (vidi partial). Ovde se
   samo skida ono što <form> nosi kao blok element, da u traci stoji kao
   svako drugo dugme pored njega. */
.prekidac-teme { display: inline-flex; margin: 0; }


/* Ikona se menja pri kliku (sunce ↔ mesec). Blagi obrt skreće
   pažnju na to da se nešto promenilo — bez njega, na ekranu koji je i
   inače pretežno taman, zamena sunca mesecom lako promakne. */
.prekidac-teme .ikona { transition: transform var(--srednje); }
@media (hover: hover) {
    .prekidac-teme button:hover .ikona { transform: rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .prekidac-teme .ikona { transition: none; transform: none; }
    @media (hover: hover) {
        .prekidac-teme button:hover .ikona { transition: none; transform: none; }
    }
}

/* Prijava i greške nemaju traku u koju bi prekidač stao, pa stoji u uglu
   ekrana. `fixed`, jer je `.prazan-ekran` centriran po visini — u toku
   dokumenta bi dugme guralo karticu naniže. */
.prazan-tema {
    position: fixed;
    top: var(--r4); right: var(--r4);
    z-index: 10;
}

/* mobilne kartice umesto tabele */
.lista-kartica { display: none; }

@media (max-width: 900px) {
    .lista-kartica { display: flex; flex-direction: column; gap: var(--r3); }

    /* Kartica u kartici — sklanja se spoljna.

       Spisak na telefonu stoji unutar `.kartica` koja na stolu drži tabelu.
       Kad tabela nestane, od te kartice ostane bela kutija sa ivicom i senkom
       oko gomile belih kutija sa ivicom i senkom. Dve ravni koje ne znače
       ništa, a na uskom ekranu kradu po 12px sa svake strane.

       Sklanja se SAMO kad nema svoje zaglavlje: kartica sa naslovom („Moji
       troškovi", „Fakture") taj naslov mora da zadrži, pa ostaje cela. */
    .kartica:not(:has(> .kartica-glava)):has(> .kartica-telo > .lista-kartica) {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .kartica:not(:has(> .kartica-glava)):has(> .kartica-telo > .lista-kartica) > .kartica-telo {
        padding: 0;
    }

    /* Tabela se sklanja SAMO ako iza nje stoje mobilne kartice.
       Ranije se sklanjala uvek, pa je osam ekrana koji nemaju kartice — među
       njima KPO knjiga i stavke fakture — na telefonu ostajalo sa praznom
       karticom. Bolje je da se tabela vidi i skroluje nego da je nema. */
    .tabela-omot:has(+ .lista-kartica) { display: none; }
}

/* kartica koja je i link — nasleđuje boju teksta umesto plave iz <a> */
a.red-kartica { color: inherit; }
@media (hover: hover) {
    a.red-kartica:hover { text-decoration: none; border-color: var(--brend-300); }
}

.red-kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    padding: var(--r4);
    box-shadow: var(--senka-1);
}
.red-kartica-glava { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--r3); margin-bottom: 10px; }

/* Naslov je boje glavnog teksta, i kad je link.

   Na spisku od osamnaest kartica osamnaest plavih naslova viče — plava u ovoj
   aplikaciji znači „ovo je veza", a ovde je SVAKA kartica veza, pa boja ne
   razlikuje ništa nego samo buči. Dark naslov se čita kao naslov; da se
   otvara, kaže strelica na kraju reda i sama kartica pod prstom. */
.red-kartica-naslov { font-weight: 600; color: var(--n-900); }
a.red-kartica-naslov { color: var(--n-900); text-decoration: none; }
@media (hover: hover) {
    a.red-kartica-naslov:hover { color: var(--brend-700); text-decoration: none; }
}
/* Naslov u jednom redu, dug se seče sa „…": na telefonu je naziv klijenta
   uz iznos, pa dug naziv u dva reda gura iznos i razvlači karticu (prijavljeno
   sa slike). Uključuje se klasom po spisku, jer neki naslovi nose i bedž koji
   ne sme da se seče. Flex dete se ne skuplja ispod svoje širine bez `min-width: 0`. */
.red-kartica-naslov.jedan-red { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.red-kartica-glava > .jedan-red + .iznos { flex: none; }
/* Natpis je sitniji i tiši od podatka. Ranije su bili iste veličine, pa je
   „PIB" na kartici izgledalo jednako važno kao i sam broj — a natpis se čita
   jednom, da se zna šta je šta, dok se podatak traži svaki put. */
.red-kartica-podaci { display: grid; grid-template-columns: auto 1fr; gap: 5px var(--r3); font-size: var(--t-sm); }
.red-kartica-podaci dt { color: var(--n-500); font-size: var(--t-xs); align-self: center; }
.red-kartica-podaci dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--n-900);
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Red sa radnjama: bez linije iznad i poravnat udesno.

   Linija je karticu delila na dva sprata zbog jednog malog dugmeta, a dugme
   je stajalo levo, daleko od palca. Sada visi uz desnu ivicu, gde se i
   dodiruje, a razmak odozgo je dovoljan da se ne slepi sa podacima. */
.red-kartica-noga {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    margin-top: var(--r3);
}

/* ---------------- tabovi i filteri ---------------- */

.tabovi {
    display: flex;
    gap: var(--r1);
    border-bottom: 1px solid var(--n-200);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabovi::-webkit-scrollbar { display: none; }

/* ---- dva filtera u jednom redu ----

   Status levo, period desno, sa jednom zajedničkom linijom ispod. Dva reda
   tabova su trošila 128px iznad spiska; ovako je 44px, a oba filtera se i
   dalje vide odjednom.

   Linija ide na omot, a ne na svaki spisak tabova posebno — inače bi se dve
   linije sastavile u deblju tamo gde se spiskovi dodiruju. */
.filter-red {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--r4);
    border-bottom: 1px solid var(--n-200);
}
.filter-red > .tabovi { border-bottom: 0; }

/* Desni spisak (period) je sporedan: tiši je i ne sme da gura levi kad ima
   mnogo godina — on se skuplja i skroluje, status ostaje ceo. */
.filter-red > .tabovi:last-child { flex: 0 1 auto; min-width: 0; }
.filter-red > .tabovi:last-child .tab { font-size: var(--t-xs); }

@media (max-width: 760px) {
    /* Na telefonu jedan ispod drugog: u jednom redu bi se oba skupila na po
       pola ekrana i oba bi tražila bočno pomeranje. */
    .filter-red { flex-direction: column; align-items: stretch; gap: 0; border-bottom: 0; }
    .filter-red > .tabovi { border-bottom: 1px solid var(--n-200); }
}

.tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px var(--r3);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--n-500);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--brzo), border-color var(--brzo);
}
@media (hover: hover) {
    .tab:hover { color: var(--n-900); text-decoration: none; }
}
.tab.aktivan { color: var(--brend-600); border-bottom-color: var(--brend-600); }

.tab-broj {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    font-size: var(--t-xs); font-weight: 600;
    background: var(--n-100); color: var(--n-500);
    border-radius: var(--rad-pun);
}
.tab.aktivan .tab-broj { background: var(--brend-100); color: var(--brend-700); }

/* Izbor dana iznad kursne liste: natpis, polje i dugme u JEDNOM redu.

   Prijavljeno sa slike: natpis se prelamao u tri reda („Lista / na / dan").
   Kriva je bila širina polja — `flatpickr` vidljivom polju prepiše klase
   originala, pa je i ono dobilo `.unos { width: 100% }` i tražilo ceo red;
   natpis se onda stiskao do najšire reči. Inline `width:auto` na originalu tu
   nije pomagao: original je skriven, a širinu uzima VIDLJIVO polje.

   Zato širina stoji ovde, na polju u ovom redu, a natpis se ne prelama. */
.kurs-dan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kurs-dan .polje-labela { flex: none; margin: 0; white-space: nowrap; }
.kurs-dan .unos { flex: none; width: 160px; }
.kurs-dan .dugme { flex: none; }

/* Na uskom ekranu red se prelama, a polje uzima ostatak: 76 + 160 + 102px i
   dva razmaka ne staju u 320px, pa bi se strana vukla u stranu. */
@media (max-width: 480px) {
    .kurs-dan .unos { flex: 1; width: auto; min-width: 140px; }
}

/* traka alata iznad liste */
.alati {
    display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
    padding: var(--r3) 0;
}
/* Polje za pretragu je samostalna komponenta.
   Ranije su ova pravila bila vezana za `.alati .pretraga`, pa je pretraga van
   te trake ostajala bez ičega: ikona bi pala IZNAD polja umesto u njega, a
   tekst bi počinjao odmah uz levu ivicu. */
.pretraga { position: relative; display: block; }
.pretraga .ikona {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--n-400); pointer-events: none;
}
.pretraga .unos { padding-left: 38px; width: 100%; }

/* u traci alata pretraga se rasteže do pola širine */
.alati .pretraga { flex: 1; min-width: 200px; max-width: 360px; }

/* Izbor perioda ili filter u traci alata: labela i padajući spisak u jednom redu. */
.alati-izbor { display: flex; align-items: center; gap: 8px; }
.alati-izbor .polje-labela { margin: 0; white-space: nowrap; }
.alati-izbor .izbor { width: auto; min-width: 180px; }

/* Kvadratić u traci alata (npr. „i moduli koji još ne rade" u matrici):
   bez razmaka polja, u ravni sa dugmadima. */
.alati-kvadratic { margin: 0; padding: 0 8px; white-space: nowrap; }

/* ---------------- bedževi i statusi ---------------- */

.bedz {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    font-size: var(--t-xs);
    font-weight: 500;
    line-height: 18px;
    border-radius: var(--rad-pun);
    background: var(--mirno-bg);
    color: var(--mirno);
    white-space: nowrap;
}
.bedz::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bedz.bez-tacke::before { display: none; }

.bedz-uspeh  { background: var(--uspeh-bg);  color: var(--uspeh); }
.bedz-info   { background: var(--info-bg);   color: var(--info); }
.bedz-upozor { background: var(--upozor-bg); color: var(--upozor); }
.bedz-greska { background: var(--greska-bg); color: var(--greska); }
.bedz-brend  { background: var(--brend-50);  color: var(--brend-700); }
.bedz-novo   { background: var(--akcenat-50); color: var(--akcenat-700); }
.bedz-siv    { background: var(--n-100);     color: var(--n-700); }

/* ---------------- prazno stanje ---------------- */

.prazno {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--r10) var(--r5);
    gap: var(--r2);
}
.prazno-slika {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--brend-50);
    color: var(--brend-600);
    border-radius: var(--rad-lg);
    margin-bottom: var(--r1);
}
.prazno-slika .ikona { width: 26px; height: 26px; }
.prazno-naslov { font-size: var(--t-lg); font-weight: 600; }
.prazno-opis { font-size: var(--t-sm); color: var(--n-500); max-width: 380px; }

/* ---------------- upsell ---------------- */

.upsell {
    max-width: 640px;
    margin: var(--r10) auto;
    text-align: center;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r10) var(--r8);
    box-shadow: var(--senka-3);
}
.upsell-ikona {
    width: 56px; height: 56px; margin: 0 auto var(--r5);
    display: grid; place-items: center;
    background: var(--brend-puna); color: var(--na-boji);
    border-radius: var(--rad-lg);
}
.upsell-naslov { font-size: var(--t-2xl); line-height: var(--t-2xl-h); font-weight: 700; margin-bottom: var(--r3); }
.upsell-opis { color: var(--n-500); font-size: var(--t-lg); line-height: var(--t-lg-h); margin-bottom: var(--r6); }
.upsell-stavke { list-style: none; text-align: left; display: grid; gap: var(--r3); margin-bottom: var(--r6); }
.upsell-stavke li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-md); }
.upsell-stavke .ikona { color: var(--uspeh); margin-top: 2px; }
.upsell-cena {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 8px 16px; margin-bottom: var(--r5);
    background: var(--akcenat-50); color: var(--akcenat-700);
    border-radius: var(--rad-pun); font-weight: 600;
}
.upsell-napomena { font-size: var(--t-xs); color: var(--n-500); margin-top: var(--r4); }

/* zamućeni pravi sadržaj ispod upsell kartice */
.zamucen-omot { position: relative; }
.zamucen-omot > .zamucen { filter: blur(5px); pointer-events: none; user-select: none; }
.zamucen-omot > .upsell {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92%);
    margin: 0;
}

/* ---------------- poruke ---------------- */

.poruke { position: fixed; top: 76px; right: var(--r5); z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }

.poruka {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px var(--r4);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-left: 3px solid var(--mirno);
    border-radius: var(--rad-sm);
    box-shadow: var(--senka-3);
    font-size: var(--t-sm);
    animation: uleti var(--sporo);
}
@keyframes uleti { from { opacity: 0; transform: translateY(-8px); } }

.poruka-success { border-left-color: var(--uspeh); }
.poruka-success .ikona { color: var(--uspeh); }
.poruka-error { border-left-color: var(--greska); }
.poruka-error .ikona { color: var(--greska); }
.poruka-warning { border-left-color: var(--upozor); }
.poruka-warning .ikona { color: var(--upozor); }
.poruka-info { border-left-color: var(--info); }
.poruka-info .ikona { color: var(--info); }
.poruka-zatvori { color: var(--n-500); margin-left: auto; }

@media (max-width: 640px) {
    .poruke { top: auto; bottom: 76px; left: var(--r3); right: var(--r3); max-width: none; }
}

/* ---------------- traka obaveštenja (proba, dospelo) ---------------- */

.traka {
    display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
    padding: 10px var(--r5);
    font-size: var(--t-sm);
    background: var(--akcenat-50);
    color: var(--akcenat-700);
    border-bottom: 1px solid var(--akcenat-400);
}
.traka.opasno { background: var(--greska-bg); color: var(--greska); border-bottom-color: var(--greska-ivica); }
.traka.info { background: var(--info-bg); color: var(--info); border-bottom-color: var(--info-ivica); }
.traka .dugme { margin-left: auto; }

/* Ista traka, ali kao samostalan blok NA stranici, a ne zalepljena uz vrh
   ekrana. Ranije je svaki ekran to rešavao svojim inline stilom, pa je bilo
   i 16px i 20px i 24px razmaka za istu stvar. */
.traka-blok {
    /* `baseline`, ne `center` — vidi objašnjenje uz `.traka-blok > .ikona`. */
    display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap;
    padding: 12px var(--r5);
    font-size: var(--t-sm);
    background: var(--akcenat-50);
    color: var(--akcenat-700);
    border: 1px solid var(--akcenat-400);
    border-radius: var(--rad);
}
.traka-blok.opasno { background: var(--greska-bg); color: var(--greska); border-color: var(--greska-ivica); }
.traka-blok.info { background: var(--info-bg); color: var(--info); border-color: var(--info-ivica); }
.traka-blok.uspeh { background: var(--uspeh-bg); color: var(--uspeh); border-color: var(--uspeh-ivica); }
/* Radnja se gura udesno. Ume da bude gola veza (`.dugme`) ili FORMA sa dugmetom
   u sebi — kad radnja menja stanje, mora POST, pa je u traci forma. */
.traka-blok .dugme,
.traka-blok > form { margin-left: auto; }

/* Poruka NE sme da odgurne samu sebe u novi red.

   Prijavljeno sa ekrana šablona: ikona je stajala sama u prvom redu, a tekst
   ispod nje. Uzrok nije poravnanje nego prelamanje — flex red se lomi po
   ŽELJENOJ širini stavke, a ne po onoj na koju bi se stavka skupila. Duga
   poruka želi celu širinu, pa se ikona ispred nje nađe sama.

   `flex: 1 1 0` znači „ne tražim ništa unapred, uzimam ono što ostane": stavka
   više ne lomi red, nego se prelama unutar sebe. `flex-wrap` ostaje, jer dugme
   na uskom ekranu i dalje treba da može da siđe u svoj red. */
.traka-blok > span,
.traka-blok > div:not(.dugme) { flex: 1 1 0; min-width: 0; }

/* Ikona uz PRVI red poruke, a poruka na sredini trake.

   Dva zahteva koja se lako pobiju:

     1. poruka od jednog reda mora da stoji na SREDINI trake — traka je viša od
        nje čim u njoj ima dugme (34px prema 22px);
     2. ikona mora uz PRVI red poruke, jer poruka ume da bude i četiri reda, a
        ikona nasred takvog bloka pluta daleko od reda na koji se odnosi.

   Poravnanje po vrhu (`flex-start`) daje 2. a kvari 1.: poruka se zalepi za vrh
   i vidi se da je „pobegla gore" — tako je i prijavljeno. Poravnanje po sredini
   (`center`) daje 1. a kvari 2.: ikona odluta na sredinu višeredne poruke.

   `baseline` daje oboje. Stavke se ravnaju po OSNOVNOJ LINIJI prvog reda:
   ikona, prvi red poruke i natpis na dugmetu sede na istoj liniji, a ostali
   redovi poruke slobodno rastu naniže. Zato stoji na CELOJ traci, a ne po
   stavci — grupa poravnata po liniji se inače zalepi za vrh, pa i dugme mora
   da bude u njoj.

   Ikoni se pomera samo PRIKAZ, za 2px: ona nema svoju osnovnu liniju, pa je
   pregledač izvodi iz donje ivice okvira — a to je 2,4px iznad optičke sredine
   reda. `position: relative` pomera crtež, ne i raspored.

   Izmereno u pregledaču — razlika sredine ikone od sredine prvog reda, i
   razlika sredine poruke od sredine trake:

                               ikona    poruka
       jedan red + dugme        0,0     −0,3
       jedan red bez dugmeta    0,0      0,0
       tri reda + dugme         0,0     +3,0
       četiri reda bez dugmeta  0,0      0,0

   Cena: traka sa VIŠE redova i dugmetom je 6px viša, jer ispod zajedničke
   linije mora da stane i donji deo dugmeta. */
.traka-blok > .ikona { align-self: baseline; position: relative; top: 2px; }

/* Na telefonu dugme ide u svoj red.

   Otkad poruka ne lomi red, ona i dugme dele istu širinu — a na 360px poruci
   ostane 105px, pa se lomi na svaka dva sloga. `flex-basis: 100%` je jedini
   način da se stavka spusti u novi red: prelom se odlučuje po ŽELJENOJ širini,
   pa `max-width` tu ne pomaže.

   Forma se navodi ZASEBNO. Kad je radnja forma, u redu stoji ona, a dugme je
   njeno dete — pravilo pisano samo za `.dugme` je tada padalo na element koji
   uopšte nije u flex redu i ništa nije pomeralo.

   Izmereno na vlasničkoj tabli (375px): traka je bila visoka 251px, poruka
   prelomljena u DESET redova pored forme široke 126px. */
@media (max-width: 640px) {
    .traka-blok .dugme,
    .traka-blok > form { flex-basis: 100%; margin-left: 0; }
}

/* ---------------- potvrda destruktivne radnje ----------------

   Zamena za `window.confirm`. `<dialog>` nosi zaključan fokus, Escape i
   pozadinu, pa ostaje samo izgled. Bez JS-a ovoga nema — kao ni ranije
   `confirm`-a — zato provera na serveru nikad ne sme da zavisi od njega. */

.potvrda-dijalog {
    padding: 0;
    border: 0;
    border-radius: var(--rad-lg);
    box-shadow: var(--senka-4);
    width: min(420px, calc(100vw - var(--r8)));
    background: var(--n-0);
    color: var(--n-900);
}

/* ---- ulazak i izlazak potvrde ----

   Potvrda brisanja je nativni `<dialog>`, a ne naš `.modal-pozadina`. To je
   namerno (zaključan fokus, Escape i vraćanje fokusa dobijaju se besplatno),
   ali znači i da se zatvara na TRI načina: dugmetom u `<form method="dialog">`,
   Escapeom i klikom na pozadinu. Presretanje svakog od njih u skripti bilo bi
   troje mesta koja moraju da se slažu — i jedno koje će se zaboraviti.

   Zato izlaz radi CSS. `allow-discrete` dozvoljava da se i `display` i
   `overlay` (izlazak iz gornjeg sloja) menjaju postepeno, pa pregledač sam
   zadrži prozor na ekranu dok prelaz ne istekne — svejedno ko ga je zatvorio.
   `@starting-style` daje polaznu vrednost za ulazak, jer element koji tek
   ulazi u sloj nema prethodno stanje sa kog bi se prelaz računao.

   Ako pregledač to ne podržava, ponaša se kao pre: prozor se pojavi i nestane
   odjednom. Vidljivo stanje je vezano za `[open]`, pa nema opasnosti da ostane
   proziran.

   Mere su iste kao kod `.modal`: izlaz od 180ms, spuštanje odakle je došao. */
.potvrda-dijalog,
.potvrda-dijalog::backdrop {
    transition:
        opacity var(--srednje),
        transform var(--srednje),
        background-color var(--srednje),
        overlay var(--srednje) allow-discrete,
        display var(--srednje) allow-discrete;
}

.potvrda-dijalog { opacity: 0; transform: translateY(12px) scale(.98); }
.potvrda-dijalog[open] { opacity: 1; transform: none; }

.potvrda-dijalog::backdrop { background-color: rgba(16, 24, 40, 0); }
.potvrda-dijalog[open]::backdrop { background-color: rgba(16, 24, 40, .5); }

@starting-style {
    .potvrda-dijalog[open] { opacity: 0; transform: translateY(12px) scale(.98); }
    .potvrda-dijalog[open]::backdrop { background-color: rgba(16, 24, 40, 0); }
}

.potvrda-telo { display: grid; gap: var(--r4); padding: var(--r6); text-align: center; }

.potvrda-znak {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    margin: 0 auto;
    border-radius: var(--rad-pun);
    background: var(--brend-50);
    color: var(--brend-600);
}
.potvrda-znak.opasno { background: var(--greska-bg); color: var(--greska); }
.potvrda-znak .ikona { width: 22px; height: 22px; }

.potvrda-naslov { font-size: var(--t-lg); line-height: var(--t-lg-h); font-weight: 600; }
.potvrda-pitanje { font-size: var(--t-sm); line-height: 20px; color: var(--n-700); margin-top: 4px; }

/* Dva dugmeta jednake širine: nijedno se ne klikće „u prolazu". */
.potvrda-dugmad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.potvrda-dugmad .dugme { width: 100%; }

@media (max-width: 480px) {
    .potvrda-dugmad { grid-template-columns: 1fr; }
    /* na telefonu potvrda ide gore — palac je bliže dnu, a greška je skupa */
    .potvrda-dugmad .dugme:last-child { order: -1; }
}


/* ---------------- modal ---------------- */

/* Pozadina se ne meri u `vh` nego `inset: 0`: fiksiran element se prostire po
   prozoru kakav jeste, pa se sam prilagodi i kad adresna traka klizne. Izričita
   visina bi to pokvarila — merenjem se videlo da modal tada viri ispod ivice. */
.modal-pozadina {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(16, 24, 40, .5);

    /* Zatamnjenje se produžava ispod ivice: kad se adresna traka pregledača
       sakrije, prozor poraste a `inset: 0` to ne uhvati odmah. Senkom, a ne
       kroz `bottom` — modal se centrira po ovoj kutiji, pa bi produženo dno
       gurnulo modal naviše. */
    box-shadow: 0 200px 0 rgba(16, 24, 40, .5);
    display: grid; place-items: center;
    padding: var(--r5);
}
.modal {
    background: var(--n-0);
    border-radius: var(--rad-lg);
    box-shadow: var(--senka-4);
    width: min(560px, 100%);
    /* Modal je stavka rešetke (`.modal-pozadina` je `grid`), a stavka ne sme
       da bude uža od svog sadržaja (`min-width: auto`): forma rešenja, sa
       redovima od tri polja, tražila je 400px, pa je na telefonu od 375px
       modal virio udesno i desni deo je bio odsečen (prijavljeno). Sa nulom
       se modal drži ekrana, a polja unutra se skupljaju, kako i treba. */
    min-width: 0;
    max-width: 100%;
    /* `vh` se na telefonu računa prema NAJVEĆEM mogućem prozoru — onom kad se
       adresna traka sakrije. Dok je traka na ekranu, `90vh` je više nego što
       se vidi, pa modal viri ispod donje ivice: dugmad postoje, ali se do njih
       ne stiže ni skrolom, jer je strana ispod zaključana. `dvh` prati ono što
       je stvarno vidljivo; red sa `vh` ostaje ispred, kao zaliha. */
    max-height: 90vh;
    max-height: 90dvh;
    display: flex; flex-direction: column;
    animation: modal-ulaz var(--sporo);
}
@keyframes modal-ulaz { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---- zatvaranje ----

   Modal je do sada nestajao u jednom kadru: `hidden = true` i prozora nema.
   Ulaz je bio animiran, izlaz nije, pa je zatvaranje delovalo kao da je nešto
   puklo — naročito kod „Otkaži", gde korisnik ne očekuje da se strana promeni
   nego da se prozor skloni.

   Izlaz je BRŽI od ulaza (180ms prema 240ms) i to nije ušteda nego pravilo:
   pri otvaranju se prati nešto novo i pogled mora da stigne, a pri zatvaranju
   se već zna šta sledi — spor izlaz se tada doživljava kao kočenje.

   Kretanje je i obrnuto: ulaz diže prozor naviše (`translateY(12px)` → 0),
   izlaz ga spušta nazad odakle je došao. Isti put u suprotnom smeru je ono
   što zatvaranju daje smisao „vraćam ovo odakle sam uzeo".

   `forwards` zadržava krajnji kadar dok skripta ne skloni element: bez njega
   bi prozor na kraju animacije odskočio nazad u punu vidljivost pa tek onda
   nestao.

   `pointer-events: none` sprečava klik na prozor koji se već zatvara — u tih
   180ms dugme „Sačuvaj" je i dalje na ekranu, a ne sme više da radi. */
.modal-pozadina.zatvara-se {
    animation: modal-pozadina-izlaz var(--srednje) forwards;
    pointer-events: none;
}
.modal-pozadina.zatvara-se .modal {
    animation: modal-izlaz var(--srednje) forwards;
}

/* Bledi SAMO pozadina; kutija se spušta, ali ne bledi i sama.

   Kutija je dete pozadine, pa već nasleđuje njeno bleđenje. Kad je i ona imala
   svoj `opacity: 1 → 0`, dve providnosti su se množile — izmereno: na 60ms
   pozadina je bila na 0,35, a kutija na 0,35 od toga, dakle oko 0,12. Prozor
   bi nestao pre nego što se pokret i vidi, a scena bi se raspala u dva koraka
   umesto u jedan. */
@keyframes modal-pozadina-izlaz { to { opacity: 0; } }
@keyframes modal-izlaz { to { transform: translateY(12px) scale(.98); } }

.modal-glava { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); padding: var(--r5); border-bottom: 1px solid var(--n-200); }
.modal-telo { padding: var(--r5); overflow-y: auto; min-height: 0; }

/* Kad se u modalu snima, telo i podnožje su u formi — pa je FORMA dete modala,
   a telo nije flex stavka. `overflow-y: auto` tada nikad ne proradi: telo
   naraste koliko treba i gurne podnožje ispod ekrana. Na telefonu se to vidi
   kao „modal ne skroluje", a dugme za snimanje se ne može dohvatiti.

   Zato forma preuzima ulogu kolone: ona se rasteže do visine modala, a telo u
   njoj dobija ono što pretekne. `min-height: 0` je tu obavezan — bez njega
   flex stavka ne sme da se smanji ispod svog sadržaja, pa se ništa ne menja. */
.modal > form {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
}
.modal-noga { display: flex; justify-content: flex-end; gap: 10px; padding: var(--r4) var(--r5); border-top: 1px solid var(--n-200); }

@media (max-width: 640px) {
    .modal-pozadina { align-items: flex-end; padding: 0; }
    .modal {
        width: 100%;
        border-radius: var(--rad-lg) var(--rad-lg) 0 0;
        max-height: 92vh;
        max-height: 92dvh;
    }

    /* Traka za pokrete (iPhone) i sistemska traka (Android) stoje preko dna
       ekrana. Bez ovoga poslednji red dugmadi ostaje delimično ispod njih. */
    .modal-noga { padding-bottom: calc(var(--r4) + env(safe-area-inset-bottom, 0px)); }

    /* Dva duga dugmeta („Odustani" i „Sačuvaj i napravi obaveze") ne staju u
       375px u jednom redu: sa `nowrap` je prvo virilo ulevo van ekrana. Kad ne
       stanu, drugo ide u nov red, a oba se rastegnu na celu širinu. */
    .modal-noga { flex-wrap: wrap; }
    .modal-noga .dugme { flex: 1 1 auto; min-width: 0; }
}

/* Modal usidren u strani: bez skripte je blok među sadržajem (nema ga čime
   zatvoriti, pa ne sme da pokrije stranu); `modal.js` skida klasu i pravi
   pravi prozor. Vidi `app/dokumenti/upozorenje-limit`. */
.modal-pozadina.modal-usidren {
    position: static; inset: auto; z-index: auto;
    background: none; box-shadow: none;
    display: block; padding: 0;
    margin-bottom: var(--r5);
}
.modal-usidren .modal { width: 100%; max-height: none; animation: none; border: 1px solid var(--upozor-ivica); }

/* Upozorenje o limitu pre snimanja fakture: veliki prozor, brojevi jedan
   ispod drugog, pitanje i dve radnje. */
.modal.upozorenje-limit { width: min(720px, 100%); }
.upozorenje-limit .modal-glava { background: var(--upozor-bg); border-bottom-color: var(--upozor-ivica); }
.upozorenje-limit .modal-glava .kartica-naslov { color: var(--upozor); font-size: var(--t-lg); }
.upozorenje-limit .modal-glava .ikona { color: var(--upozor); }
.limit-blok + .limit-blok { margin-top: var(--r5); padding-top: var(--r5); border-top: 1px solid var(--n-200); }
.limit-blok-naslov { font-weight: 600; font-size: var(--t-md); }
.limit-blok-naslov span { font-weight: 400; color: var(--n-500); font-size: var(--t-sm); }
.limit-brojke {
    display: grid; grid-template-columns: 1fr auto; gap: 6px var(--r4);
    margin: 10px 0 0; font-size: var(--t-sm);
}
.limit-brojke dt { color: var(--n-600); }
.limit-brojke dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.limit-brojke dd.preko { color: var(--greska); font-weight: 700; }
.limit-blok p { margin: 10px 0 0; font-size: var(--t-sm); color: var(--n-700); }
.limit-pitanje { margin: var(--r5) 0 0; font-size: var(--t-md); font-weight: 600; }

/* PDV u rezimeu fakture: kvadratić i stopa u jednom redu. */
.pdv-izbor {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r3);
    padding: 8px 0; margin-top: 4px;
    border-top: 1px dashed var(--n-200);
}
.pdv-stopa { display: flex; align-items: center; gap: 8px; }
.pdv-stopa .polje-labela { margin: 0; white-space: nowrap; }
.pdv-stopa .unos { width: 72px; text-align: right; }

/* ---------------- koraci ---------------- */

.koraci { display: flex; align-items: center; gap: var(--r2); margin-bottom: var(--r8); }
.korak { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--n-500); }
.korak-broj {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--n-100); color: var(--n-500);
    font-size: var(--t-xs); font-weight: 600;
    flex: none;
}
.korak.aktivan { color: var(--n-900); font-weight: 500; }
.korak.aktivan .korak-broj { background: var(--brend-puna); color: var(--na-boji); }
.korak.gotov .korak-broj { background: var(--uspeh-bg); color: var(--uspeh); }
.korak-crta { flex: 1; height: 1px; background: var(--n-200); min-width: 16px; }

/* ---------------- padajući meni ---------------- */

.padajuci { position: relative; }
.padajuci-sadrzaj {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 200px;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-3);
    padding: var(--r1);
    display: none;
}
.padajuci.otvoren .padajuci-sadrzaj { display: block; animation: uleti var(--srednje); }
.padajuci-stavka {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    font-size: var(--t-sm);
    color: var(--n-700);
    border-radius: 6px;
    text-align: left;
}
@media (hover: hover) {
    .padajuci-stavka:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
}
.padajuci-stavka .ikona { color: var(--n-400); }
.padajuci-stavka.opasno { color: var(--greska); }
@media (hover: hover) {
    .padajuci-stavka.opasno:hover { background: var(--greska-bg); }
}
.padajuci-crta { height: 1px; background: var(--n-200); margin: var(--r1) 0; }

/* `<details>` kao padajući meni: otvara ga pregledač, pa radi i bez skripte.
   Strelica sistema se sklanja, dugme je `summary`. */
details.padajuci > summary { list-style: none; cursor: pointer; }
details.padajuci > summary::-webkit-details-marker { display: none; }
details.padajuci[open] > .padajuci-sadrzaj { display: block; animation: uleti var(--srednje); }

/* Podeljeno dugme: glavna radnja levo, strelica sa ostalima desno, kao jedno. */
.dugme-podeljeno { display: inline-flex; align-items: stretch; }
.dugme-podeljeno > .dugme:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dugme-podeljeno > .padajuci > summary.dugme {
    height: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, .35);
}

/* Naslov grupe u padajućem meniju — kaže ŠTA se bira, kad to iz same liste
   nije očigledno („Radiš za" iznad spiska firmi). */
.padajuci-naslov {
    padding: 6px 10px 4px;
    font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--n-500);
}

/* Firma na kojoj se trenutno radi. Kvačica sama ne bi bila dovoljna — u spisku
   od pet firmi oko traži razliku u težini teksta pre nego ikonu. */
.padajuci-stavka.aktivna { font-weight: 600; color: var(--n-900); }
.padajuci-stavka.aktivna .ikona { color: var(--uspeh); }

/* ---------------- skelet ---------------- */

.skelet {
    background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%);
    background-size: 200% 100%;
    animation: sjaj 1.4s infinite;
    border-radius: 6px;
    height: 14px;
}
@keyframes sjaj { to { background-position: -200% 0; } }

/* ---------------- napomena o odgovornosti ----------------
   Ide ispod svakog poreskog izračuna. Mora biti ovde, a ne u CSS-u sajta —
   aplikacija je koristi na više mesta nego sajt. */

.napomena-odgovornost {
    font-size: var(--t-xs);
    line-height: var(--t-xs-h);
    color: var(--n-500);
    background: var(--n-50);
    border-radius: var(--rad-sm);
    padding: 10px var(--r3);
    margin-top: var(--r4);
}

/* ---------------- straničenje ---------------- */

.stranice { display: flex; align-items: center; justify-content: center; gap: var(--r1); padding: var(--r5) 0; }
.stranice a, .stranice span {
    min-width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    font-size: var(--t-sm);
    border-radius: var(--rad-sm);
    color: var(--n-700);
}
@media (hover: hover) {
    .stranice a:hover { background: var(--n-100); text-decoration: none; }
}
.stranice .aktivna { background: var(--brend-puna); color: var(--na-boji); font-weight: 500; }
.stranice .neaktivna { color: var(--n-300); }

/* ---------------- cenovnik ----------------
   Koristi ga i javni sajt (/cenovnik) i čarobnjak pretplate u panelu,
   pa stoji ovde, a ne u 4-sajt.css koji panel ne učitava. */

.cene { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r5); align-items: start; }

/* Kartice iste visine, umesto da svaka stane tamo gde joj se spisak završi.
   Spisak gura sve ispod sebe na dno kartice, pa dugmad ostaju u istom redu i
   kad spiskovi nisu iste dužine. Nije podrazumevano za `.cene` jer isti red
   stoji i na sajtu i u panelu, gde kartice nisu iste vrste. */
.cene-iste-visine { align-items: stretch; }
.cene-iste-visine .cena-kartica { display: flex; flex-direction: column; }
.cene-iste-visine .cena-lista { margin-bottom: auto; }

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

.cena-kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    padding: var(--r8) var(--r6);
    position: relative;
}
.cena-kartica.istaknut {
    border-color: var(--brend-600);
    border-width: 2px;
    box-shadow: var(--senka-4);
}
.cena-oznaka {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--brend-puna); color: var(--na-boji);
    font-size: var(--t-xs); font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--rad-pun);
    white-space: nowrap;
}
.cena-naziv { font-size: var(--t-xl); font-weight: 700; }
.cena-podnaslov { font-size: var(--t-sm); color: var(--n-500); margin-bottom: var(--r5); min-height: 40px; }
.cena-iznos { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.cena-iznos b { font-size: var(--t-4xl); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.cena-iznos span { color: var(--n-500); font-size: var(--t-md); }
.cena-godisnje { font-size: var(--t-sm); color: var(--uspeh); margin-bottom: var(--r6); }
.cena-lista { list-style: none; display: grid; gap: 10px; margin: var(--r6) 0; }
.cena-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-md); }
.cena-lista .ikona { color: var(--uspeh); margin-top: 3px; flex-shrink: 0; }
.cena-lista li.nema { color: var(--n-500); }
.cena-lista li.nema .ikona { color: var(--n-300); }

/* Ono što je zajedničko za sve pakete u redu — jednom, iznad kartica.
   Kad se paketi razlikuju po jednoj jedinoj stvari (agencijski: broj firmi),
   ista dva reda na sve tri kartice su tri puta isti tekst na ekranu. */
.zajedno-lista {
    list-style: none;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px var(--r6);
    margin: 0 0 var(--r6);
    font-size: var(--t-sm); color: var(--n-600);
}
.zajedno-lista li { display: flex; align-items: center; gap: 8px; }
.zajedno-lista .ikona { color: var(--uspeh); flex: none; }

/* Agencijska kartica: broj firmi je jedina razlika, pa je i jedino istaknuto.
   Kao sivi podnaslov ispod imena nestajao je u redu sa tri iste kartice. */
.agencija-firme {
    display: flex; align-items: center; gap: 10px;
    margin: var(--r4) 0 var(--r6);
    padding: 10px 12px;
    background: var(--brend-50);
    color: var(--brend-700);
    border-radius: var(--rad-sm);
    font-size: var(--t-md);
}
.agencija-firme .ikona { color: var(--brend-600); flex: none; }

/* Kartica nema spisak (nema šta da nabraja), pa dugme na dno gura ovo. */
.agencija-kartica > form { margin-top: auto; }

.prekidac-ciklusa {
    display: inline-flex;
    padding: 4px;
    background: var(--n-100);
    border-radius: var(--rad-pun);
    margin: 0 auto var(--r8);
}
.prekidac-ciklusa a {
    padding: 8px 20px;
    font-size: var(--t-sm); font-weight: 500;
    color: var(--n-500);
    border-radius: var(--rad-pun);
}
@media (hover: hover) {
    .prekidac-ciklusa a:hover { text-decoration: none; color: var(--n-900); }
}
.prekidac-ciklusa a.aktivan { background: var(--n-0); color: var(--n-900); box-shadow: var(--senka-1); }

/* ---------------- matrica delatnost × modul ----------------
   Mnogo redova × mnogo kolona: prva kolona i zaglavlje ostaju na mestu,
   inače se posle par koraka skrola ne zna koje polje je čije.

   Selektori su `.matrica th.…`, ne samo `.matrica-…`, i to NAMERNO: opšte
   pravilo `.tabela th` lepi SVAKO zaglavlje za vrh (`position: sticky;
   top: 0; z-index: 1`) i sa svoja dva člana (0,1,1) je jače od same klase
   (0,1,0). Prijavljeno sa matrice: red-zaglavlja tela (`5911`, `9003`) i
   traka grupe („IT I SOFTVER") dobijali su `top: 0`, pa su se pri skrolu
   lepili preko naziva modula, a ugao je sa z-indeksa 3 pao na 1 i redovi
   su ga prekrivali. Redovima tela i grupi zato ovde stoji `top: auto`. */

.matrica-omot { max-height: 70vh; overflow: auto; }

.matrica { border-collapse: separate; border-spacing: 0; }

.matrica th, .matrica td { background: var(--n-0); }

.matrica th.matrica-ugao {
    position: sticky; left: 0; top: 0; z-index: 3;
    background: var(--n-25) !important;
    width: 260px; min-width: 260px;
    vertical-align: bottom;
}

.matrica th.matrica-kolona {
    position: sticky; top: 0; z-index: 2;
    background: var(--n-25) !important;
    width: 44px; min-width: 44px;
    padding: 8px 4px !important;
    text-align: center !important;
    vertical-align: bottom;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* Čvrsta visina, ne `max-height`: sa `max-height` je kratak naziv bio visok
   koliko i njegov tekst, dug sečen bez traga — pa je zaglavlje bilo nazubljeno
   i nije se videlo da nešto fali. Ovako svi počinju od iste linije uz
   kvadratiće, a preduga imena dobiju tri tačke (najduže, „Šabloni
   dokumenata", ima ~125px; na Windows fontu nešto više). */
.matrica-naslov {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
    font-weight: 600;
}
.matrica-cena {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 400;
    color: var(--brend-600);
}

.matrica th.matrica-red {
    position: sticky; left: 0; top: auto; z-index: 1;
    width: 260px; min-width: 260px; max-width: 260px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    border-right: 1px solid var(--n-200);
    white-space: nowrap;
    overflow: hidden;
}
.matrica-sifra {
    display: inline-block;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
    color: var(--n-500);
}
/* Duga imena delatnosti seku se na tri tačke. Bez ovoga se prelivaju
   preko kvadratića i ne vidi se koje polje pripada kom modulu. */
.matrica-ime {
    display: inline-block;
    max-width: 195px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--n-900);
}

/* Naziv grupe se lepi uz levu ivicu SAM, ne cela ćelija: ćelija je široka
   koliko i tabela (colspan preko svih modula), pa je pri skrolu u stranu
   nema kud da se pomeri i naziv je odlazio van ekrana. */
.matrica-grupa-ime { display: inline-block; position: sticky; left: var(--r4); }
.matrica .matrica-grupa th {
    position: sticky; left: 0; top: auto; z-index: 1;
    background: var(--n-50) !important;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--n-500);
    padding: 6px var(--r4) !important;
    border-bottom: 1px solid var(--n-200);
}

.matrica-polje { padding: 4px !important; text-align: center; }

.matrica-kvadrat { display: inline-flex; cursor: pointer; }
.matrica-kvadrat input { position: absolute; opacity: 0; width: 0; height: 0; }

/* `input + span`, ne `span`: u oznaci sad stoje DVA spana — kvadratić i naziv
   modula. Pravilo pisano na sve spanove hvatalo je i naziv, a specifičnost mu
   je viša od `.matrica-modul`, pa je naziv dobijao 20×20 sa ivicom: na telefonu
   zgnječen tekst, a na širem ekranu drugi, prazan kvadratić. */
.matrica-kvadrat input + span {
    width: 20px; height: 20px;
    border: 1px solid var(--n-300);
    border-radius: var(--rad-sm);
    background: var(--n-0);
    display: block;
    transition: background .12s, border-color .12s;
}
@media (hover: hover) {
    .matrica-kvadrat:hover input + span { border-color: var(--brend-600); }
}
.matrica-kvadrat input:focus-visible + span { outline: 2px solid var(--brend-600); outline-offset: 2px; }
.matrica-kvadrat input:disabled + span { opacity: .4; }
.matrica-kvadrat input:checked + span {
    background: var(--brend-600) no-repeat center;
    border-color: var(--brend-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
    background-size: 13px;
}

/* Modul koji još nije pušten u pogon: matrica sme da se pripremi unapred,
   ali mora da se vidi da ta kolona trenutno nikome ništa ne znači. */
.matrica-kolona.neaktivan .matrica-naslov { color: var(--n-400); }
.matrica-kolona.neaktivan::after {
    content: '';
    position: absolute; left: 4px; right: 4px; bottom: 0;
    height: 3px;
    background: repeating-linear-gradient(
        45deg, var(--n-300), var(--n-300) 3px, transparent 3px, transparent 6px
    );
}
.matrica-polje.neaktivan { background: var(--n-25) !important; }

/* Naziv modula uz sam kvadratić.

   Na širem ekranu ga nosi zaglavlje kolone, pa se sklanja OD OKA — ali ostaje
   čitaču ekrana, jer prazna `<label>` ne imenuje ništa. Ista tehnika kao
   `.samo-citac`, samo pod svojim imenom da se na telefonu može vratiti. */
.matrica-modul {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- matrica na telefonu ----------------

   Mreža 52 × 19 se na 375px morala vući 780px u stranu, i to je bio jedini
   ekran u panelu koji je posle sređivanja ostao takav.

   Rešeno PREKLAPANJEM iste tabele, ne drugim prikazom: red postaje kartica,
   ćelija postaje red „naziv modula … prekidač". Zato što polja moraju ostati
   JEDNA — dupliran skup istih `name="matrica[]"` polja bi se pri slanju bez
   JavaScripta sabrao sa skrivenim, pa bi isključivanje na telefonu ostalo bez
   dejstva (skrivena kopija i dalje nosi staru vrednost, a `display:none` ne
   sprečava slanje).

   Tako i jedno i drugo snimanje radi netaknuto: klik po polju (AJAX) i dugme
   „Snimi sve prikazano" bez skripte. */
@media (max-width: 900px) {
    /* Uspravni nazivi kolona nemaju šta da natkriljuju kad kolona nema. */
    .matrica thead { display: none; }

    /* Bez svog okvira za skrol: kartice se čitaju uz skrol cele strane. */
    .matrica-omot { max-height: none; overflow: visible; }

    .matrica, .matrica tbody, .matrica tr, .matrica th, .matrica td { display: block; }

    .matrica tbody tr {
        border: 1px solid var(--n-200);
        border-radius: var(--rad);
        margin-bottom: var(--r3);
        overflow: hidden;
    }

    /* Naziv delatnosti je naslov kartice — više ne mora da staje u 260px, pa
       se ni ne seče na tri tačke. Selektor iste težine kao gore, inače bi
       `.tabela th` i ovde zadržao `sticky`. */
    .matrica th.matrica-red {
        position: static;
        width: auto; min-width: 0; max-width: none;
        white-space: normal;
        overflow: visible;
        font-weight: 600 !important;
        border-right: 0;
        border-bottom: 1px solid var(--n-200);
        padding: 10px var(--r4) !important;
        background: var(--n-25) !important;
    }
    .matrica-ime { max-width: none; white-space: normal; }

    /* Naziv grupe stoji iznad kartica, kao podnaslov. */
    .matrica tbody tr.matrica-grupa {
        border: 0;
        border-radius: 0;
        margin: var(--r5) 0 var(--r2);
    }
    .matrica .matrica-grupa th {
        position: static;
        background: transparent !important;
        border: 0;
        padding: 0 !important;
    }

    .matrica-polje {
        padding: 0 !important;
        text-align: left;
        border-top: 1px solid var(--n-100);
    }

    /* Cela oznaka je red i cela je dodirna meta — 44px je najmanje što prst
       pouzdano pogađa. `row-reverse`: u kodu prvo ide kvadratić (zbog
       `input:checked + span`), a na ekranu treba da bude desno. */
    .matrica-polje .matrica-kvadrat {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: var(--r3);
        width: 100%;
        min-height: 44px;
        padding: 6px var(--r4);
    }

    .matrica-modul {
        position: static; width: auto; height: auto; margin: 0;
        overflow: visible; clip: auto; white-space: normal;
        font-size: var(--t-sm);
    }

    /* Modul koji još ne radi: kosa crta stoji uz naziv, jer zaglavlja kolone
       sa isprekidanom linijom ovde nema. */
    .matrica-polje.neaktivan .matrica-modul { color: var(--n-400); }
}

/* ---------------- uređivač teksta ----------------
   Maska nad <textarea>. Bez JavaScripta se vidi textarea i sve i dalje radi. */

.uredjivac {
    border: 1px solid var(--n-300);
    border-radius: var(--rad-sm);
    background: var(--n-0);
    overflow: hidden;
}
.uredjivac:focus-within { border-color: var(--brend-600); box-shadow: 0 0 0 3px var(--brend-50); }

.uredjivac-traka {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
    padding: 6px;
    background: var(--n-25);
    border-bottom: 1px solid var(--n-200);
    position: sticky; top: 0; z-index: 2;
}

.uredjivac-dugme {
    min-width: 30px; height: 30px;
    padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--t-sm);
    color: var(--n-700);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rad-sm);
    cursor: pointer;
    line-height: 1;
}
@media (hover: hover) {
    .uredjivac-dugme:hover { background: var(--n-100); border-color: var(--n-200); color: var(--n-900); }
}
.uredjivac-dugme:active { background: var(--n-200); }
.uredjivac-razmak { width: 1px; height: 18px; background: var(--n-200); margin: 0 4px; }

.uredjivac-platno {
    padding: var(--r4) var(--r5);
    min-height: 200px;
    max-height: 60vh;
    overflow-y: auto;
    font-size: var(--t-md);
    line-height: 1.7;
    color: var(--n-900);
    outline: 0;
}
.uredjivac-platno > * + * { margin-top: 12px; }
.uredjivac-platno h2 { font-size: var(--t-xl); font-weight: 700; margin-top: var(--r5); }
.uredjivac-platno h3 { font-size: var(--t-lg); font-weight: 600; margin-top: var(--r4); }
.uredjivac-platno ul, .uredjivac-platno ol { padding-left: var(--r6); }
.uredjivac-platno li { margin: 4px 0; }
.uredjivac-platno a { color: var(--brend-600); text-decoration: underline; }
.uredjivac-platno blockquote {
    border-left: 3px solid var(--n-300);
    padding-left: var(--r4);
    color: var(--n-500);
    font-style: italic;
}
.uredjivac-platno pre {
    background: var(--povrsina-tamna); color: var(--na-tamnoj);
    padding: var(--r3); border-radius: var(--rad-sm);
    font-family: var(--pismo-mono); font-size: var(--t-sm);
    overflow-x: auto; white-space: pre-wrap;
}
.uredjivac-platno hr { border: 0; border-top: 1px solid var(--n-300); margin: var(--r5) 0; }
.uredjivac-platno table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.uredjivac-platno th, .uredjivac-platno td { border: 1px solid var(--n-200); padding: 6px 10px; }

/* prazno platno dobija uputstvo umesto da zjapi */
.uredjivac-platno:empty::before {
    content: 'Piši ovde…';
    color: var(--n-400);
}

/* U režimu sirovog HTML-a platno se sklanja, a textarea vraća — klasu na
   textarea skida sam skript, pa ovde treba samo pravilo za sakriveno stanje. */
.uredjivac-sirovi .uredjivac-platno { display: none; }
.uredjivac-skriven { display: none; }

/* ============================================================
   AI ASISTENT
   ============================================================ */

/* Dve kolone: razgovori levo, tok desno. Na telefonu lista ide iznad,
   sklopljena — tamo je bitan tekući razgovor, ne arhiva. */
.asistent {
    display: grid;
    /* `minmax(0, 1fr)`, ne `1fr`: stavka rešetke se podrazumevano ne skuplja
       ispod svog sadržaja (`min-width: auto`), pa je duga poruka (URL, tabela)
       širila kolonu preko ekrana — na telefonu je desni deo bio odsečen
       (prijavljeno). */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--r5);
    align-items: start;
}
.asistent-strana, .asistent-glavni { min-width: 0; }

/* Dugme za nov razgovor uz spisak postoji SAMO na telefonu; na širokom ekranu
   isto dugme stoji u redu radnji iznad. */
.asistent-nov { display: none; }

.asistent-strana {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    padding: var(--r4);
    position: sticky;
    top: var(--r5);
}
.asistent-strana-naslov {
    font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--n-500);
    margin-bottom: var(--r3);
}

/* Spisak razgovora je `<details>` zbog telefona (vidi pravila za 900px).
   Na širokom ekranu dugme ne postoji, a spisak stoji otvoren. */
.asistent-razgovori > summary { display: none; }
.asistent-razgovori-broj {
    margin-left: auto;
    min-width: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--n-100); color: var(--n-600);
    font-size: var(--t-xs); font-weight: 600; text-align: center;
}
.asistent-lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--r4); }
.asistent-stavka {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px;
    border-radius: var(--rad-sm);
    color: var(--n-700);
    text-decoration: none;
}
@media (hover: hover) {
    .asistent-stavka:hover { background: var(--n-50); }
}
.asistent-stavka.aktivan { background: var(--brend-50); color: var(--brend-700); }
.asistent-stavka-naslov {
    font-size: var(--t-sm); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asistent-stavka-datum { font-size: var(--t-xs); color: var(--n-500); }

.asistent-glavni {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    display: flex; flex-direction: column;
    min-height: 60vh;
}

.asistent-tok {
    flex: 1;
    padding: var(--r5);
    overflow-y: auto;
    max-height: 62vh;
    display: flex; flex-direction: column; gap: var(--r4);
}

/* ---------------- prazan ekran ---------------- */

.asistent-uvod { text-align: center; margin: auto; max-width: 520px; }
.asistent-uvod-ikona {
    width: 48px; height: 48px; margin: 0 auto var(--r3);
    display: grid; place-items: center;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: 50%;
}
.asistent-uvod h2 { font-size: var(--t-xl); font-weight: 600; margin-bottom: 6px; }
.asistent-predlozi {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin: var(--r5) 0;
}
.asistent-predlog {
    padding: 8px 14px;
    font-size: var(--t-sm);
    color: var(--n-700);
    background: var(--n-25);
    border: 1px solid var(--n-200);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
}
@media (hover: hover) {
    .asistent-predlog:hover { border-color: var(--brend-300); color: var(--brend-700); }
}

/* ---------------- poruke ---------------- */

.chat-poruka { display: flex; gap: 10px; align-items: flex-start; }
.chat-poruka.od-mene { justify-content: flex-end; }

.chat-avatar {
    width: 28px; height: 28px; flex: none;
    display: grid; place-items: center;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: 50%;
}

.chat-telo { max-width: 78%; }
.od-mene .chat-telo {
    background: var(--brend-puna); color: var(--na-boji);
    padding: 10px 14px;
    border-radius: var(--rad) var(--rad) 4px var(--rad);
}
.od-asistenta .chat-telo {
    background: var(--n-25);
    border: 1px solid var(--n-200);
    padding: 10px 14px;
    border-radius: var(--rad) var(--rad) var(--rad) 4px;
}
.chat-tekst { font-size: var(--t-md); line-height: 1.65; }

/* Odgovor asistenta stiže kao Markdown i na serveru se prevodi u mali skup
   oznaka (`App\Servisi\Markdown`): pasusi, spiskovi, tabele, naslov, kod.
   Ovde su samo razmaci i veličine, da se to uklopi u oblačić. Poruka
   korisnika je jedan `<div>` bez dece, pa je ova pravila ne dotiču. */
.chat-tekst > * + * { margin-top: 8px; }
.chat-tekst ul, .chat-tekst ol { padding-left: 22px; }
.chat-tekst li + li { margin-top: 3px; }
.chat-tekst li > ul, .chat-tekst li > ol { margin-top: 3px; }
.chat-tekst h4 { font-size: var(--t-md); margin-top: 12px; }
.chat-tekst h4:first-child { margin-top: 0; }
.chat-tekst h4 + * { margin-top: 4px; }
.chat-tekst code {
    font-family: var(--pismo-mono);
    font-size: .92em;
    padding: 1px 5px;
    background: var(--n-100);
    border-radius: 4px;
}
.chat-tekst blockquote {
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--n-300);
    color: var(--n-600);
}
.chat-tekst hr { border: 0; border-top: 1px solid var(--n-200); margin-block: 10px; }
.chat-tekst a { text-decoration: underline; }
/* Duga adresa ili broj bez razmaka ne sme da razvuče oblačić: prelama se gde
   stigne, jer je oblačić na telefonu uži od takve reči. */
.chat-tekst, .chat-telo { overflow-wrap: anywhere; }

/* Tabela se u oblačiću ne sme razliti: omot nosi vodoravni skrol, a ćelije su
   zbijenije nego u spisku dokumenata, jer je oblačić uzak već na tabletu. */
.chat-tekst .tabela-omot { border: 1px solid var(--n-200); border-radius: var(--rad-sm); }
.chat-tekst .tabela th, .chat-tekst .tabela td { padding: 7px 10px; white-space: nowrap; }
/* Zaglavlje `.tabela` je inače lepljivo (`position: sticky`), što u razgovoru
   koji se skroluje znači da red sa nazivima kolona plovi preko poruka iznad
   tabele. U oblačiću je tabela kratka i zaglavlje stoji gde je napisano. */
.chat-tekst .tabela th { position: static; background: var(--n-50); }
.chat-tekst .tabela td:first-child, .chat-tekst .tabela th:first-child { white-space: normal; min-width: 140px; }

/* tri tačke dok se čeka odgovor */
.chat-kuca { display: flex; gap: 4px; padding: 4px 0; }
.chat-kuca span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--n-400);
    animation: chat-kuca 1.2s infinite ease-in-out;
}
.chat-kuca span:nth-child(2) { animation-delay: .15s; }
.chat-kuca span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-kuca { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .chat-kuca span { animation: none; opacity: .6; }
}

/* traka sa predlogom dokumenta */
.chat-predlog, .chat-gotovo {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--n-300);
    font-size: var(--t-sm);
}
.chat-gotovo { color: var(--uspeh); border-top-color: var(--uspeh-bg); }
.chat-gotovo .ikona { color: var(--uspeh); }

/* Predložen klijent ili stavka: prava forma u `<details>` ispod poruke
   (radi bez skripte). Dugme je `summary`; otvorena forma dobija širinu
   celog toka, jer polja u oblačiću od 78% ne stanu u dva stupca. */
.chat-forma { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--n-300); }
.chat-forma > summary { list-style: none; }
.chat-forma > summary::-webkit-details-marker { display: none; }
.chat-forma[open] > summary { display: none; }
.chat-forma-telo { margin-top: 4px; }
.chat-forma-noga { display: flex; justify-content: flex-end; margin-top: 12px; }
.od-asistenta .chat-telo:has(.chat-forma[open]) { max-width: 100%; flex: 1; }

/* ---------------- unos ---------------- */

/* Pitanje i dugme stoje u JEDNOM okviru, kao u svakom modernom čatu: dugme je
   krug u dnu polja, a ne zaseban pravougaonik pored njega.

   Ranije su bila dva odvojena elementa u redu, pa se i razlika u visini i
   razlika u razmacima videla kao da je nabacano (prijavljeno sa slikom —
   izmereno na 390px: polje 66px visoko, dugme 37×44, 10px do dugmeta a 16px
   do ivice). Okvir sada drži oboje, pa razmaci ne mogu da se raziđu. */
.asistent-unos {
    display: flex; align-items: flex-end; gap: 8px;
    margin: 0 var(--r5) var(--r3);
    padding: 5px 5px 5px 16px;
    border: 1px solid var(--n-200);
    border-radius: 27px;
    background: var(--n-0);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Fokus se vidi na okviru, jer polje u njemu nema svoj — ista boja i isti
   prsten kao na svakom drugom polju u aplikaciji. */
.asistent-unos:focus-within { border-color: var(--brend-500); box-shadow: 0 0 0 3px var(--brend-100); }
.asistent-unos:has(.oblast:disabled) { background: var(--n-50); border-color: var(--n-200); }

.asistent-unos .oblast {
    flex: 1; min-width: 0;
    min-height: 44px; max-height: 140px;
    padding: 11px 0; border: 0; border-radius: 0; background: none;
    resize: none;
}
.asistent-unos .oblast:focus { box-shadow: none; }
.asistent-unos .oblast:disabled { background: none; }

.asistent-unos .dugme {
    flex: none;
    width: 44px; height: 44px; padding: 0;
    border-radius: 50%;
    justify-content: center;
}
/* Papirni avion je sam po sebi jasan; reč ostaje čitaču ekrana. */
.asistent-unos .dugme span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.asistent-napomena {
    padding: 0 var(--r5) var(--r4);
    font-size: var(--t-xs); color: var(--n-500);
}

/* ---------------- predlog u modalu ---------------- */

.predlog-par {
    display: flex; justify-content: space-between; gap: var(--r3);
    padding: 6px 0; font-size: var(--t-sm);
    border-bottom: 1px solid var(--n-100);
}
.predlog-par span { color: var(--n-500); }
.predlog-zbir {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: var(--r4) 0 var(--r3);
    padding-top: var(--r3);
    border-top: 2px solid var(--n-900);
    font-size: var(--t-lg);
}
.predlog-zbir b { font-variant-numeric: tabular-nums; }

/* Do 900px nema mesta za dve kolone, pa je spisak razgovora stajao IZNAD
   razgovora i gurao ga ispod ekrana — na telefonu se do polja za pitanje
   stizalo tek skrolom (izmereno na 390px: spisak 284px, polje na 1019px).

   Sada je spisak fioka: dugme zauzima jedan red, a otvoren spisak PREKRIVA
   razgovor (`position: absolute`) umesto da ga gura. Razgovor time počinje
   odmah ispod dugmeta, kao u svakom čatu na telefonu. */
@media (max-width: 900px) {
    .asistent { grid-template-columns: minmax(0, 1fr); }
    .asistent-strana {
        position: relative; z-index: 20;
        /* `top` je ostao od lepljivog stanja na širokom ekranu i ovde je, uz
           `relative`, gurao ceo red 20px naniže — preko razgovora: izmereno na
           375px, red je završavao na 201px, a razgovor počinjao na 197px. */
        top: auto;
        padding: 0; border: 0; background: none;
        /* Fioka i „Nov" u istom redu: zaseban red za jedno dugme je na
           telefonu trošio 60px visine ekrana. */
        display: flex; align-items: flex-start; gap: 8px;
    }

    /* Vazduh iznad reda sa razgovorima: bez njega je red zalepljen za
       zaglavlje, a razgovor za njega. */
    .asistent { margin-top: var(--r6); }
    .asistent-razgovori { flex: 1; min-width: 0; }
    .asistent-nov { display: inline-flex; flex: none; }

    /* Gornji red radnji je tada prazan — isto dugme je uz fioku. Obe klase u
       biraču: `.akcije-vrh` se pali u `3-raspored.css`, koji se učitava posle
       ovog lista, pa bi sam `.asistent-vrh` izgubio. */
    .akcije-vrh.asistent-vrh { display: none; }

    .asistent-razgovori > summary {
        display: flex; align-items: center; gap: 8px;
        padding: 10px 12px;
        border: 1px solid var(--n-200); border-radius: var(--rad);
        background: var(--n-0); color: var(--n-700);
        font-size: var(--t-sm); font-weight: 500;
        cursor: pointer; user-select: none;
        list-style: none;                       /* bez trougla pregledača */
    }
    .asistent-razgovori > summary::-webkit-details-marker { display: none; }
    @media (hover: hover) {
        .asistent-razgovori > summary:hover { border-color: var(--n-300); }
    }

    .asistent-razgovori-strelica { transition: transform .15s ease; }
    .asistent-razgovori[open] .asistent-razgovori-strelica { transform: rotate(180deg); }

    /* Fioka je SVOJA kartica ispod reda, a ne produžetak dugmeta: otkad je
       „Nov" u istom redu, dugme više nije široko koliko i fioka, pa bi
       spojene ivice bile spojene sa nečim čega nema. */
    .asistent-razgovori-telo {
        position: absolute; left: 0; right: 0; top: calc(100% + 6px);
        max-height: 60vh; overflow-y: auto;
        padding: var(--r4);
        background: var(--n-0);
        border: 1px solid var(--n-200);
        border-radius: var(--rad);
        box-shadow: var(--senka-3);
    }
    /* Dugme već piše „Razgovori" — naslov u fioci bi to ponovio. */
    .asistent-razgovori-telo .asistent-strana-naslov { display: none; }
    /* Skroluje fioka, ne spisak u njoj: dva skrola jedan u drugom se na
       telefonu ne razlikuju prstom. */
    .asistent-lista { max-height: none; }

    /* JEDAN SKROL, NE DVA.

       Do sada je tok imao svoju visinu (`max-height: 50vh`) i svoj skrol, dok
       je i strana skrolovala — prstom se ta dva ne razlikuju, a polje za
       pitanje je ispadalo ispod pregiba: izmereno na 375×812 polje je bilo na
       757–813px, a donja traka je fiksirana na 755–812px, pa ga je i
       pokrivala. Na telefon se dolazilo da bi se pitalo, a polja nije bilo.

       Sada tok nema svoju visinu: raste koliko ima poruka, strana skroluje kao
       svaka druga, a polje je LEPLJIVO iznad donje trake — vidi se stalno, bez
       obzira gde si u razgovoru. */
    .asistent-tok { max-height: none; overflow: visible; }
    .asistent-glavni { min-height: 0; }

    .asistent-unos {
        position: sticky;
        /* Traka je 57px, `env()` je za telefone sa crtom umesto dugmeta, 8px
           je razmak do nje. Isti brojevi kao u rezervi `.sadrzaj`. */
        bottom: calc(65px + env(safe-area-inset-bottom));
        z-index: 10;
    }

    /* Poruka ne sme da proviruje pored zaobljenog okvira polja dok prolazi
       iza njega, pa se podloga produžava do ivica kartice.

       SENKOM, ne slojem: sloj (`::before` sa `z-index: -1`) u lepljivom
       elementu pada preko NJEGOVE IVICE i guta je — prijavljeno („fali mi
       border na polju za kucanje"). Senka se crta izvan okvira, pa ivica
       ostaje gde jeste. */
    .asistent-unos {
        box-shadow:
            0 0 0 var(--r4) var(--n-0),
            0 -10px 10px -8px rgba(16, 24, 40, .10);
    }
    .asistent-unos:focus-within {
        box-shadow:
            0 0 0 var(--r4) var(--n-0),
            0 0 0 calc(var(--r4) + 3px) var(--brend-100);
    }


    .chat-telo { max-width: 90%; }
}

/* Telefon: razgovor dobija celu širinu, jer je svaki piksel sadržaj.
   Manji unutrašnji razmaci, uvod bez svoje širine, predlozi preko celog reda
   (duga pitanja su čitljivija kao red nego kao pilula u tri reda). */
@media (max-width: 640px) {
    .asistent { gap: var(--r4); }
    .asistent-tok { padding: var(--r4); gap: var(--r3); }
    .asistent-uvod { max-width: 100%; }
    .asistent-predlozi { flex-direction: column; margin: var(--r4) 0; }
    .asistent-predlog { width: 100%; border-radius: var(--rad); text-align: center; }
    /* Okvir pitanja ide uz ivice kartice kao i sve ostalo na telefonu; dugme
       je i inače krug, pa ovde nema šta da se menja. */
    .asistent-unos { margin-left: var(--r4); margin-right: var(--r4); }
    .asistent-napomena { padding-left: var(--r4); padding-right: var(--r4); }
    .chat-telo { max-width: 100%; }
    .chat-poruka { gap: 8px; }

    /* Prva kolona tabele u oblačiću: 140px je na 375px ekranu pojelo pola
       širine, pa se svaka tabela vukla u stranu i kad bi stala. */
    .chat-tekst .tabela td:first-child, .chat-tekst .tabela th:first-child { min-width: 104px; }
    .chat-tekst .tabela th, .chat-tekst .tabela td { padding: 6px 8px; }
}

/* Uzak telefon (320–360px): sve što se može skupiti, skuplja se — na 320px
   je svaki piksel širine sadržaj. */
@media (max-width: 380px) {
    .asistent-tok { padding: var(--r3); }
    .asistent-unos { padding-left: 12px; margin-left: var(--r3); margin-right: var(--r3); }
    .asistent-napomena { padding-left: var(--r3); padding-right: var(--r3); }
    .chat-avatar { width: 24px; height: 24px; }
    .chat-poruka { gap: 6px; }
    .od-mene .chat-telo, .od-asistenta .chat-telo { padding: 8px 11px; }
    .asistent-uvod-ikona { width: 40px; height: 40px; }
}

/* ============================================================
   IZBOR IZ SPISKA (radio dugme sa objašnjenjem)

   Nastalo za izbor AI modela u vlasničkom panelu, pa se pokazalo da je isti
   oblik potreban svuda gde se bira JEDNO od nekoliko ponuđenih sa kratkim
   objašnjenjem uz svako — na primer osnova KPO knjige. Otud opšte ime: druga
   kopija istog izgleda razišla bi se prvi put kad se jedna dopuni.
   ============================================================ */

/* ---------------- kursna lista na telefonu ----------------

   Izmereno na ekranu od 375px, pre izmena: strana je bila visoka 2965px, a
   kalkulator je počinjao na 2242px — iza spiska od 34 valute. A upravo je
   kalkulator razlog zbog kog se ovaj ekran na telefonu otvara („koliko je 100
   evra po današnjem kursu"); spisak svih valuta je priručnik.

   Zato se ispod 1100px, tamo gde dve kolone ionako postaju jedna, redosled
   okreće: kalkulator gore, spisak ispod. Na stolu ostaje kako je bilo — spisak
   levo, kalkulator uz desnu ivicu. */
@media (max-width: 1100px) {
    .kursna-lista > .kolona-kalkulator { order: -1; }
}

/* Četiri najčešće valute: na telefonu dve u redu, ne četiri jedna ispod druge.
   Kartica nosi tri kratka reda (oznaka, kurs, „RSD za 1"), pa u pola ekrana
   staje bez lomljenja — a blok se sa 310px spušta na oko 150px. */
@media (max-width: 700px) {
    .kursna-lista .mreza-4 { grid-template-columns: 1fr 1fr; }
}

/* Kartica istaknute valute. Oznaka je sitna i razmaknuta, kao natpis iznad
   broja; kurs je ono zbog čega kartica postoji, pa nosi najviše težine; mera
   ispod je tiha. Tri stepena u tri reda — bez njih su sva tri delovala
   jednako važno. */
.kurs-istaknut .kpi { padding: var(--r4); gap: 0; }
.kurs-istaknut .kpi-labela {
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .06em;
    color: var(--brend-700);
}
.kurs-istaknut .kpi-broj {
    font-size: var(--t-2xl); line-height: var(--t-2xl-h);
    margin-top: 2px;
}
.kurs-istaknut .kpi-podnaslov { margin-top: 2px; }

/* Spisak valuta na telefonu ostaje TABELA, ne pretvara se u kartice.

   Prvo je bio napravljen prelaz na kartice, kako radi ostatak aplikacije — i
   izmereno je da je lek gori od bolesti: 34 kartice su stranu produžile sa
   2965 na 3875px. Kartica je dobra za zapis sa više polja (faktura: broj,
   klijent, datum, iznos, status), a ovde se traže dva podatka — oznaka i
   kurs. Za to je red tabele kraći i pregledniji.

   Umesto toga se na telefonu sklanjaju dve kolone (država i pomoćni „za 1"),
   pa tabela stane u širinu ekrana bez pomeranja ustranu.

   „za 1 = …" pod oznakom valute, samo na telefonu — tamo je istoimena kolona
   sklonjena. Ide u svoj red, sitno i tiho, da se ne takmiči sa oznakom. */
.kurs-za-jedan { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--n-500); }

/* ---------------- kalkulator valuta ----------------

   Ekran „Kursna lista". Sve što sledi stajalo je kao inline `style` po
   pogledu — `gap:0`, `flex:1`, `padding:16px`, `border:0` — pa su se pravila
   komponenti i te zakrpe međusobno gazile. Posledica se i videla: dve kutije
   za smer dodirivale su se bez razmaka, kao da su se sudarile.

   Sada je sve ovde, u jednom pravilu, a pogled nosi samo klase. */
.kalkulator { display: grid; gap: var(--r6); }

/* Razmak među grupama drži mreža iznad; podrazumevani razmak polja bi se na
   njega dodao i napravio neujednačen ritam. */
.kalkulator .polje { margin-bottom: 0; }

/* Natpis je malo dalje od polja nego drugde (8 umesto 6px): ovo je uzak
   kalkulator u kartici, gde se tri grupe nižu jedna za drugom, pa im treba
   jasniji početak. */
.kalkulator .polje-labela { margin-bottom: 8px; }

/* Valuta je deo istog polja kao iznos, pa dele jedan okvir — razdvaja ih samo
   linija. Padding ide ovde, a ne inline, da select ima isti prostor sa obe
   strane kao i iznos. */
.kalkulator-valuta { padding: 0; }
.kalkulator-valuta .izbor {
    border: 0;
    border-radius: 0;
    background: transparent;
    width: auto;
    padding-left: var(--r3);
    padding-right: var(--r6);
}

/* Smer: dve kutije jedna pored druge, sa razmakom. Bile su spojene (`gap:0`),
   pa su izgledale kao jedno polje presečeno na pola.

   Selektor je složen (`.izbor-spisak.kalkulator-smer`) namerno: `.izbor-spisak`
   je u ovom fajlu NIŽE i postavlja uspravan raspored, pa bi pri istoj težini
   pobedio po redosledu i kutije bi ostale jedna ispod druge. */
.izbor-spisak.kalkulator-smer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--r3);
    margin-bottom: 0;
}
.kalkulator-smer .izbor-red { margin: 0; }

/* Na uskom ekranu jedna ispod druge: „EUR → RSD" i „RSD → EUR" u pola kartice
   od 320px se prelome, pa kutije postanu različite visine. */
@media (max-width: 420px) {
    .izbor-spisak.kalkulator-smer { grid-template-columns: 1fr; }
}

/* Rezultat je zaključak, pa stoji odvojeno i sa više vazduha od polja iznad. */
.kalkulator-rezultat {
    padding: var(--r4) var(--r5);
    border-radius: var(--rad);
}
.kalkulator-rezultat .kalkulator-iznos {
    font-size: var(--t-2xl); line-height: var(--t-2xl-h);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin: 2px 0 4px;
}

.izbor-spisak { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--r4); }
.izbor-red {
    display: flex; align-items: flex-start; gap: 10px;
    padding: var(--r3);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    cursor: pointer;
}
@media (hover: hover) {
    .izbor-red:hover { border-color: var(--brend-300); }
}
.izbor-red.izabran { border-color: var(--brend-500); background: var(--brend-50); }
.izbor-red input { margin-top: 3px; }
.izbor-red > span { display: flex; flex-direction: column; gap: 2px; }
.model-naziv { font-weight: 600; font-size: var(--t-sm); }
.model-opis { font-size: var(--t-sm); color: var(--n-600); }
.model-cena { font-size: var(--t-xs); color: var(--n-500); font-variant-numeric: tabular-nums; }

/* ============================================================
   OBAVEŠTENJA (zvono)
   ============================================================ */

.lista-obavestenja { display: flex; flex-direction: column; }
.obavestenje-red {
    display: flex; align-items: flex-start; gap: var(--r3);
    padding: var(--r4) var(--r5);
    border-bottom: 1px solid var(--n-100);
    color: inherit; text-decoration: none;
}
.obavestenje-red:last-child { border-bottom: 0; }
@media (hover: hover) {
    .obavestenje-red:hover { background: var(--n-25); }
}
.obavestenje-red.novo { background: var(--brend-50); }
@media (hover: hover) {
    .obavestenje-red.novo:hover { background: var(--brend-100, var(--brend-50)); }
}

.obavestenje-tacka {
    width: 8px; height: 8px; margin-top: 6px; flex: none;
    border-radius: 50%;
    background: transparent;
}
.obavestenje-red.novo .obavestenje-tacka { background: var(--brend-600); }

.obavestenje-telo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.obavestenje-naslov { font-weight: 500; }
.obavestenje-tekst { font-size: var(--t-sm); color: var(--n-600); }
.obavestenje-datum { font-size: var(--t-xs); color: var(--n-500); white-space: nowrap; }

/* ---------------- predlozi iz registra ispod polja „Naziv" ----------------
   Omot je prazan blok odmah ispod polja; spisak visi iz njega, preko onoga
   što je ispod. Stavke su dugmad (rade tastaturom), bedž kaže odakle je. */
.registar-omot { position: relative; }
.registar-predlozi {
    position: absolute; left: 0; right: 0; top: 4px; z-index: 70;
    margin: 0; padding: 4px; list-style: none;
    background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--rad);
    box-shadow: var(--senka-4); max-height: 300px; overflow: auto;
}
.registar-stavka {
    display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--rad-sm);
    background: none; color: var(--n-900); font: inherit; text-align: left; cursor: pointer;
}
.registar-stavka:focus-visible { background: var(--n-50); outline: none; }
@media (hover: hover) {
    .registar-stavka:hover { background: var(--n-50); outline: none; }
}
.registar-stavka b { display: block; font-weight: 600; }
.registar-stavka small { display: block; color: var(--n-500); font-size: var(--t-xs); margin-top: 2px; }
.registar-bedz {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--n-100); color: var(--n-600); font-size: 11px; font-weight: 500; vertical-align: middle;
}
.registar-stavka.nbs-trazi { color: var(--brend-700); font-weight: 500; border-top: 1px solid var(--n-100); border-radius: 0; margin-top: 2px; }
.registar-stavka.prazno { color: var(--n-500); cursor: default; }
@media (hover: hover) {
    .registar-stavka.prazno:hover { background: none; }
}

/* ---------------- period izveštaja ----------------

   Jedan red, jedna GET forma (radi i bez JavaScripta): polja „od–do" sa
   biračem ispod. Tabova sa gotovim periodima i brojača dana više nema, sve
   je u biraču. */

.izvestaj-period {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--r3) var(--r5);
    margin: 0 0 var(--r5);
    font-size: var(--t-sm); color: var(--n-600);
}

.izvestaj-period-deo { display: flex; align-items: center; gap: var(--r2); }
.izvestaj-period-deo input[type="date"] { width: 150px; }

/* Ime gotovog opsega koji se gleda, pored polja. */
.izvestaj-period-tekst { color: var(--n-500); }

/* Opseg „od–do" kao jedan birač: polja sa ikonom, ispod njih kalendar sa dva
   meseca (flatpickr, inline, range) i gotovi opsezi sa strane. Ikona se vidi
   tek kad skripta preuzme polje (nativno polje datuma ima svoju). */
/* Birač se veže za ceo red sa periodom, ne za svoju formu: forma stoji desno
   od brojača dana, pa bi birač od 830px iz nje izlazio van strane. */
.izvestaj-period { position: relative; }
.opseg-polje { position: relative; display: inline-flex; align-items: center; }
.opseg-polje .opseg-ikona { display: none; position: absolute; left: 10px; color: var(--n-400); pointer-events: none; }
.opseg-datuma.ziv .opseg-ikona { display: block; }
.opseg-datuma.ziv .opseg-polje .unos { width: 150px; padding-left: 32px; }
/* Sa skriptom „Prikaži" ne treba: kalendar sam šalje, otkucan datum šalje
   Enter. Dugme ostaje u dokumentu (Enter u polju pritiska baš njega). */
.opseg-datuma.ziv > .dugme { display: none; }

/* Ispod gornje trake (`.gornja`, z-index 40), iznad sadržaja: sa 60 je birač
   pri skrolovanju išao PREKO trake (prijavljeno). Traka je fiksna, pa mora da
   ostane iznad svega što se skroluje ispod nje. */
.opseg-birac {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    display: flex; align-items: stretch;
    max-width: calc(100vw - 32px);
    background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--rad);
    box-shadow: var(--senka-4);
}
.opseg-kalendar { padding: 6px 8px 8px; }
.opseg-kalendar > input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.opseg-kalendar .flatpickr-calendar.inline { border: 0; box-shadow: none; margin: 0; }
.opseg-kalendar .flatpickr-day.inRange { background: var(--brend-100); border-color: var(--brend-100); box-shadow: -5px 0 0 var(--brend-100), 5px 0 0 var(--brend-100); color: var(--n-900); }
.opseg-kalendar .flatpickr-day.startRange,
.opseg-kalendar .flatpickr-day.endRange { background: var(--brend-puna); border-color: var(--brend-puna); color: var(--na-boji); }
@media (hover: hover) {
    .opseg-kalendar .flatpickr-day.startRange:hover,
    .opseg-kalendar .flatpickr-day.endRange:hover { background: var(--brend-puna); border-color: var(--brend-puna); color: var(--na-boji); }
}

/* Deset gotovih opsega u koloni, zbijeni da kolona ne bude mnogo viša od
   kalendara. */
.opseg-preseti {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 190px; padding: 10px; border-left: 1px solid var(--n-200);
}
.opseg-preset {
    display: block; padding: 5px 12px; border-radius: var(--rad-sm);
    background: var(--n-50); color: var(--n-700); font-size: var(--t-sm); text-decoration: none;
    white-space: nowrap;
}
@media (hover: hover) {
    a.opseg-preset:hover { background: var(--n-100); color: var(--n-900); }
}
.opseg-preset.aktivan { background: var(--brend-puna); color: var(--na-boji); }
@media (hover: hover) {
    a.opseg-preset.aktivan:hover { background: var(--brend-puna); color: var(--na-boji); }
}

@media (max-width: 700px) {
    /* Na telefonu polja datuma dele red, a „Prikaži" ide ispod kad ne stane. */
    .izvestaj-period { gap: var(--r3); }
    .izvestaj-period-deo { width: 100%; flex-wrap: wrap; }
    .izvestaj-period-deo input[type="date"] { flex: 1; min-width: 0; width: auto; }
    /* Dva datuma od po 90px su bila odsečena na „08.08.". */
    .opseg-polje { flex: 1 1 120px; min-width: 0; }
    .opseg-datuma.ziv .opseg-polje .unos { width: 100%; }

    /* Birač: jedan mesec, gotovi opsezi ispod kao red dugmadi. */
    .opseg-birac { flex-direction: column; right: 0; max-width: none; }
    .opseg-preseti { flex-direction: row; flex-wrap: wrap; border-left: 0; border-top: 1px solid var(--n-200); min-width: 0; }
}

/* ---------------- period prometa iza kvadratića ----------------

   Većina faktura je za jedan dan, a dva polja za period su svejedno stajala na
   svakoj. Sada ih otvara sam kvadratić — CSS-om, bez ijedne linije JavaScripta,
   pa polja rade i kad skripte nema.

   `:has()` pregledač koji ga ne zna prosto ignoriše, i tada su polja vidljiva
   kao i pre — starije ponašanje, ne pokvareno. */
.period-prometa .kvadratic { align-items: flex-start; }
.period-prometa .kvadratic-red { margin-bottom: var(--r3); }   /* razmak na REDU: na labeli bi pomerio centar prema kom se ikonica ravna */

.period-prometa:has(.kvadratic input:not(:checked)) .period-polja { display: none; }

/* ---------------- panel ispod zvona ----------------

   Isti redovi kao na ekranu obaveštenja — samo uži, sitniji i sa dnom koje
   vodi na ceo spisak. Zato ovde nema svog izgleda reda nego samo mere. */

.zvono-padajuci .padajuci-sadrzaj { width: min(360px, calc(100vw - 24px)); padding: 0; }

/* Na telefonu se panel kači za EKRAN, ne za zvono.

   Poravnat uz zvono, on je širine 360px a zvono stoji 36px od desne ivice —
   izmereno na 390px: leva ivica panela na −6px, dakle van ekrana. Ovako stoji
   između dve ivice, ma gde zvono bilo. */
@media (max-width: 480px) {
    .zvono-padajuci .padajuci-sadrzaj {
        position: fixed;
        left: 8px; right: 8px; width: auto;
        top: calc(var(--topbar) + 4px);
    }
}

.obavestenja-glava {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r2);
    padding: var(--r2) var(--r2) var(--r2) var(--r3);
    border-bottom: 1px solid var(--n-100);
}
.obavestenja-glava .padajuci-naslov { padding: 0; }

/* Panel je BEO, a visi iz TAMNE gornje trake — pa se dugme u njemu mora oteti
   pravilu `.gornja .dugme-tiho`, koje ga boji za tamnu podlogu. Bez ovoga je
   „Sve pročitano" belo na belom: izmereno rgba(255,255,255,.78) na #fff. */
.zvono-padajuci .obavestenja-glava .dugme-tiho {
    background: transparent;
    color: var(--n-600);
    border-color: transparent;
}
@media (hover: hover) {
    .zvono-padajuci .obavestenja-glava .dugme-tiho:hover {
        background: var(--n-100);
        color: var(--n-900);
        border-color: transparent;
    }
}
.zvono-padajuci .obavestenja-glava .dugme-tiho .ikona { color: var(--n-400); }

/* Visina je ograničena, ne broj redova: osam kratkih obaveštenja stane, osam
   dugačkih ne — a panel koji pređe preko dna ekrana se ne može zatvoriti na
   telefonu. */
.obavestenja-lista { max-height: min(60vh, 420px); overflow-y: auto; }

.obavestenja-lista .obavestenje-red { padding: 10px var(--r3); gap: 10px; }
.obavestenja-lista .obavestenje-naslov { font-size: var(--t-sm); }
.obavestenja-lista .obavestenje-tekst {
    font-size: var(--t-xs);
    /* Dugačak tekst se seče na dva reda — panel nije ekran obaveštenja. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.obavestenja-prazno {
    padding: var(--r5) var(--r3);
    font-size: var(--t-sm); color: var(--n-500); text-align: center;
}

.obavestenja-noga {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px;
    font-size: var(--t-sm); font-weight: 600;
    color: var(--brend-600);
    border-top: 1px solid var(--n-100);
}
@media (hover: hover) {
    .obavestenja-noga:hover { background: var(--n-50); text-decoration: none; }
}

/* ---------------- izbor AI servisa ---------------- */

/* Blok sa modelom se skriva atributom `hidden`; klasa je tu da pravilo
   preživi i kad neka komponenta postavi display na elementu. */
.provajder-blok.sakriven-blok { display: none; }
.provajder-blok { margin-top: var(--r4); }

.izbor-red .bedz { margin-left: 6px; font-size: var(--t-xs); }

.tabela-zbijena th, .tabela-zbijena td { padding: 6px 10px; font-size: var(--t-sm); }

.kljuc-red {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--r3);
    padding: var(--r3) 0;
    border-bottom: 1px solid var(--n-100);
}
.kljuc-red:last-child { border-bottom: 0; }
.kljuc-opis { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1; }
.kljuc-forma { display: flex; gap: 8px; align-items: center; }
.kljuc-forma .unos { min-width: 240px; }

@media (max-width: 640px) {
    .kljuc-forma { width: 100%; }
    .kljuc-forma .unos { min-width: 0; flex: 1; }
}

/* ============================================================
   KARTICA LIMITA
   Četiri reda: naziv, iznos, traka, koliko je ostalo. Ranije je ista
   informacija zauzimala dvostruko više visine.
   ============================================================ */

.limit-kartica {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-1);
    padding: var(--r4);
    /* mera za @container niže — pravilo gleda širinu kartice, ne ekrana */
    container-type: inline-size;

    /* Sve boje kartice stoje na jednom mestu:
       --stanje     jaka boja (poruka, hover strelice)
       --limit-prazno  prazan deo trake — svetli ton ISTE boje, nikad siv
       --popuna-*   krajevi gradijenta popune
 */
    --stanje: var(--brend-600);
    --stanje-bg: var(--brend-50);
    --limit-prazno: var(--brend-50);
    /* Ne `--brend-500`: beo tekst na njemu daje 4,37:1, tik ispod AA. */
    --popuna-od: var(--brend-600);
    --popuna-do: var(--brend-700);
    --obrub: rgba(61, 79, 224, .10);
    --odsjaj: rgba(61, 79, 224, .32);
}

/* Drugi limit (8 miliona) ima svoju boju — dve iste plave trake jedna pored
   druge izgledaju kao jedan podatak, a to su dva različita praga. */
.limit-kartica.druga {
    --stanje: var(--tirkiz);
    --stanje-bg: var(--tirkiz-bg);
    --limit-prazno: var(--tirkiz-bg);
    --popuna-od: var(--tirkiz);
    --popuna-do: var(--tirkiz-700);
    --obrub: rgba(14, 116, 144, .12);
    --odsjaj: rgba(14, 116, 144, .30);
}

/* Upozorenje nadjačava zadatu boju.
   Žuta je jedina popuna na kojoj beo tekst ne prolazi (1,9:1), pa tekst preko
   nje ostaje taman — na žutoj daje preko 10:1. */
.limit-kartica.pazi {
    --stanje: var(--upozor);
    --stanje-bg: var(--upozor-bg);
    --limit-prazno: var(--upozor-bg);
    --popuna-od: var(--akcenat-400);
    --popuna-do: var(--akcenat-500);
    --obrub: rgba(180, 83, 9, .14);
    --odsjaj: rgba(245, 158, 11, .35);
}
.limit-kartica.opasno {
    --stanje: var(--greska);
    --stanje-bg: var(--greska-bg);
    --limit-prazno: var(--greska-bg);
    --popuna-od: var(--greska-500);
    --popuna-do: var(--greska);
    --obrub: rgba(180, 35, 24, .14);
    --odsjaj: rgba(217, 45, 32, .32);
}

/* Pločica levo, telo desno, strelica na kraju reda. */
.limit-kartica {
    display: flex; align-items: flex-start; gap: var(--r3);
    flex-wrap: wrap;
}
.limit-telo { flex: 1; min-width: 0; }

.limit-glava {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3);
    margin-bottom: 10px;
    min-width: 0;
}
.limit-naziv {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
    min-width: 0;
    font-size: var(--t-md); font-weight: 600; color: var(--n-900);
}
.limit-opis {
    font-size: var(--t-sm); font-weight: 400; color: var(--n-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Traka i ostatak dele jedan red ispod naslova. */
.limit-red { display: flex; align-items: center; gap: var(--r3); }

/* Samo strelica: „Pogledaj izveštaj" je trošilo red i takmičilo se sa iznosom. */
.limit-veza {
    display: grid; place-items: center;
    width: 24px; height: 24px; flex: none;
    margin-left: auto;
    color: var(--n-300);
    border-radius: var(--rad-sm);
    transition: color var(--brzo), background var(--brzo);
}
@media (hover: hover) {
    .limit-veza:hover { background: var(--stanje-bg); color: var(--stanje); text-decoration: none; }
}

/* Traka je sada samo traka: brojke stoje iznad nje, u svom redu. Tanka je
   (8px) jer ne nosi tekst — ranije je bila visoka 46px da bi primila iznos,
   pa su dve kartice jedna do druge izgledale kao dva velika dugmeta.
   Prazan deo je svetli ton iste boje, ne siv: traka tako nikad ne izgleda kao
   prazan slot, nego kao mera koja tek počinje. */
.limit-kartica .limit-traka {
    position: relative;
    flex: 1; min-width: 0;
    height: 8px;
    border-radius: var(--rad-pun);
    background: var(--limit-prazno);
    box-shadow: inset 0 0 0 1px var(--obrub);
    overflow: hidden;
}
.limit-kartica .limit-popuna {
    position: absolute; inset: 0 auto 0 0;
    height: 100%;
    border-radius: var(--rad-pun);
    background: linear-gradient(90deg, var(--popuna-od), var(--popuna-do));
    box-shadow: 0 1px 6px var(--odsjaj);
    /* `--sporo` već nosi i funkciju ubrzanja — dodati još jednu čini
       deklaraciju nevažećom, pa se tiho odbaci. */
    transition: width var(--sporo);
}

/* Iskorišćeno i granica: „2.499.772 od 6.000.000 RSD". Iznos je krupan jer je
   on odgovor, granica sitnija jer je mera. */
.limit-iznos {
    display: flex; align-items: baseline; gap: 5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.limit-iznos b {
    font-size: var(--t-lg); font-weight: 700; line-height: 1;
    color: var(--n-900); letter-spacing: -.02em;
}
.limit-iznos .od { font-size: var(--t-sm); color: var(--n-500); white-space: nowrap; }

.limit-ostatak {
    font-size: var(--t-sm); color: var(--n-500); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.limit-ostatak.preko { color: var(--greska); font-weight: 600; }

/* Poruka upozorenja ide u svoj red ispod svega — kartica je flex, pa bez pune
   širine ostane da visi pored pločice. */
.limit-kartica-poruka { flex-basis: 100%; }

/* Uska kartica: „od 6.000.000" se sklanja, jer isti broj stoji u nazivu
   („Limit 6 miliona"). Gleda se širina KARTICE, ne ekrana — zato `@container`. */
@container (max-width: 330px) {
    .limit-iznos .od { display: none; }
}

/* Još uže: naslov i iznos idu jedno ispod drugog, da se dva broja nikad ne
   sudare u istom redu. */
@container (max-width: 250px) {
    .limit-glava { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* ============================================================
   TRAKA ZA PREUZIMANJE U ZIP-u
   Stoji iznad spiska, između alata i tabele. Dva načina izbora u jednom redu:
   period od–do, ili označeni redovi u spisku.
   ============================================================ */

/* Sklopiva traka: zatvorena je jedan red, otvorena pokazuje period i dugme. */
.zip-sklopivo { margin-bottom: var(--r3); }
.zip-sklopivo > summary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px var(--r3);
    font-size: var(--t-sm); font-weight: 500;
    color: var(--n-700);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    cursor: pointer;
    list-style: none;
    transition: background var(--brzo), border-color var(--brzo);
}
.zip-sklopivo > summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
    .zip-sklopivo > summary:hover { background: var(--n-50); border-color: var(--n-300); }
}
.zip-sklopivo > summary .ikona { color: var(--n-500); }
.zip-sklopivo[open] > summary { margin-bottom: 10px; border-color: var(--brend-300); }

.zip-traka {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px var(--r4);
    margin-bottom: 0;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-1);
}

.zip-traka-naslov {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--t-sm); font-weight: 600; color: var(--n-700);
}
.zip-traka-naslov .ikona { color: var(--n-500); }

.zip-traka-polje { display: flex; align-items: center; gap: 6px; }
.zip-traka-polje > span { font-size: var(--t-sm); color: var(--n-500); }
.zip-traka-polje .unos { width: auto; min-width: 150px; }

/* Onesposobljena polja perioda: kad su redovi označeni, period ne znači ništa
   i to mora da se vidi, a ne samo da tiho ne radi. */
.zip-traka-polje .unos:disabled { background: var(--n-50); color: var(--n-400); }

.zip-traka-pomoc {
    font-size: var(--t-xs); color: var(--n-500);
    margin-left: auto;
}

/* Kolona sa kvadratićem — samo onoliko koliko treba, da ne uzima od podataka. */
.tabela .kolona-izbor { width: 34px; padding-right: 0; }
.tabela .kolona-izbor input { cursor: pointer; }

/* Na telefonu period ide u svoj red i uzima punu širinu — dva polja tipa
   `date` jedno pored drugog ne staju ispod 400px. */
@media (max-width: 560px) {
    .zip-traka-polje { flex: 1 1 100%; }
    .zip-traka-polje .unos { flex: 1; min-width: 0; }
    .zip-traka-pomoc { margin-left: 0; flex: 1 1 100%; }
}
.limit-kartica-poruka {
    display: flex; align-items: flex-start; gap: 7px;
    margin-top: var(--r3);
    padding: 7px 10px;
    background: var(--stanje-bg);
    color: var(--stanje);
    border-radius: var(--rad-sm);
    font-size: var(--t-xs); font-weight: 500;
}
.limit-kartica-poruka .ikona { flex: none; margin-top: 1px; }

/* ============================================================
   DUGMAD ZA NOV DOKUMENT
   Ceo red, jednake širine. Nisu obična dugmad nego glavna radnja ekrana,
   pa imaju svoju ikonu i više prostora.
   ============================================================ */

.brze-akcije {
    display: grid;
    grid-template-columns: repeat(var(--broj, 4), 1fr);
    gap: 10px;
    margin-bottom: var(--r5);
}

.akcija {
    display: flex; align-items: center; gap: var(--r3);
    padding: var(--r4);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-lg);
    color: var(--n-900);
    font-weight: 600;
    box-shadow: var(--senka-1);
    transition: border-color var(--brzo), box-shadow var(--brzo), transform var(--brzo);
}
@media (hover: hover) {
    .akcija:hover {
        text-decoration: none;
        border-color: var(--brend-300);
        box-shadow: var(--senka-2);
        transform: translateY(-1px);
    }
}

/* Podlogu i boju ikone sada nosi `.plocica` (vidi gore) — ista pločica kao na
   karticama sa brojkama, pa su dokument i njegov broj obeleženi istom bojom.
   Ovde ostaje samo ono što je svojstveno brzoj akciji. */
.akcija-ikona { flex: none; }

.akcija-tekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Strelica je tiha dok se ne pređe mišem — kaže „vodi dalje", ne viče.
   Ranije je ovde stajao plus: on obećava da će se nešto dodati na licu mesta,
   a klik zapravo otvara ceo ekran za novi dokument. */
.akcija-plus { color: var(--n-300); flex: none; }
@media (hover: hover) {
    .akcija:hover .akcija-plus { color: var(--brend-600); }
}

/* faktura je najčešća radnja, pa se vidi da je prva */
.akcija.glavna {
    background: var(--brend-puna);
    border-color: var(--brend-puna);
    color: var(--na-boji);
}
@media (hover: hover) {
    .akcija.glavna:hover { background: var(--brend-puna-hover); border-color: var(--brend-puna-hover); color: var(--na-boji); }
}
.akcija.glavna .akcija-ikona { background: rgba(255, 255, 255, .16); color: var(--na-boji); }
@media (hover: hover) {
    .akcija.glavna:hover .akcija-ikona { background: rgba(255, 255, 255, .22); color: var(--na-boji); }
}
.akcija.glavna .akcija-plus { color: rgba(255, 255, 255, .6); }
@media (hover: hover) {
    .akcija.glavna:hover .akcija-plus { color: var(--na-boji); }
}

@media (max-width: 900px) {
    /* dve u redu; tekst sme da se prelomi jer „Avansni račun" ne staje u pola */
    .brze-akcije { grid-template-columns: 1fr 1fr; }
    .akcija { padding: var(--r3); }
    .akcija-plus { display: none; }
    .akcija-tekst { white-space: normal; font-size: var(--t-sm); }
    /* Pločica se smanjuje da dve kartice stanu u red telefona od 360px. */
    .akcija .plocica { width: 38px; height: 38px; }
    .akcija .plocica .ikona { width: 19px; height: 19px; }
}

/* Jedna u redu tek na najužim telefonima (320px). Do 360px dve staju: prag je
   bio 380px, pa je telefon od 375px — najčešći ekran — dobijao četiri kartice
   jednu ispod druge i gurao brojke ispod pregiba. */
@media (max-width: 340px) {
    .brze-akcije { grid-template-columns: 1fr; }
}

/* pet kartica u jednom redu — uže od podrazumevanih 200px, da stanu */
.mreza-kpi.pet { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--r3); }
.mreza-kpi.pet .kpi { padding: var(--r4); }
.mreza-kpi.pet .kpi-broj { font-size: var(--t-xl); line-height: var(--t-xl-h); }

@media (max-width: 700px) {
    /* pet kartica jedna ispod druge je pola ekrana skrola pre prve tabele;
       dve u redu staju i na najužem telefonu

       Isto važi i za mrežu BEZ `pet`. Podrazumevani `minmax(200px, 1fr)` na
       375px daje jednu kolonu, pa je vlasnička tabla trošila četiri ekrana
       skrola na četiri broja. Pravilo je zato na obe mreže — ranije je stajalo
       samo na `pet`, jer je tada samo korisnička tabla i prijavljena. */
    .mreza-kpi,
    .mreza-kpi.pet { grid-template-columns: 1fr 1fr; gap: var(--r3); }

    /* Zbijenije nego na širem ekranu.

       Izmereno na 390px: odeljak je bio 388px visok — pola ekrana pre prve
       tabele, a nijedan od ovih brojeva nije toliko važan da traži toliko
       mesta. Manji razmak i broj za jedan stepen manji vraćaju ga na oko 280px,
       a broj i dalje ostaje najkrupnija stvar na kartici. */
    .mreza-kpi .kpi,
    .mreza-kpi.pet .kpi { padding: var(--r3); gap: 10px; }
    .mreza-kpi .kpi-broj,
    .mreza-kpi.pet .kpi-broj { font-size: var(--t-lg); line-height: var(--t-lg-h); }

    /* Pločica se smanjuje i ovde: u koloni od 170px ona i sedmocifren iznos
       dele isti red, pa je svaki piksel njene širine piksel manje za broj.
       Bez ovoga je „2.125.994 RSD" izlazio van kartice. */
    .mreza-kpi .plocica { width: 36px; height: 36px; border-radius: var(--rad-sm); }
    .mreza-kpi .plocica .ikona { width: 18px; height: 18px; }

    /* Iznos i valuta smeju da pređu u novi red umesto da guraju karticu. */
    .mreza-kpi .kpi-broj { overflow-wrap: anywhere; }
    .mreza-kpi .kpi-jedinica { margin-left: 4px; font-size: var(--t-xs); }

    /* Neparna poslednja kartica uzima CEO red.

       Sa pet kartica u dve kolone peta ostaje sama u levoj koloni, a pored nje
       zjapi prazna polovina — to je i prijavljeno („nije baš najbolja"). Preko
       celog reda joj uz to i naslov stane u jedan red („PROIZVODI I USLUGE" se
       inače prelama), pa red nije viši od ostalih. */
    .mreza-kpi > :last-child:nth-child(odd),
    .mreza-kpi.pet > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* pretraga u zaglavlju kartice, umesto zasebne trake ispod nje */
.pretraga-glava { display: flex; align-items: center; gap: 10px; }
.pretraga-glava .pretraga { min-width: 200px; }

@media (max-width: 700px) {
    .kartica-glava:has(.pretraga-glava) { flex-wrap: wrap; }
    .pretraga-glava { width: 100%; }
    .pretraga-glava .pretraga { flex: 1; min-width: 0; }
}

/* poruka kad živi filter sakrije sve redove */
.filter-prazno { padding: var(--r5); text-align: center; color: var(--n-500); font-size: var(--t-sm); }

/* Mobilne kartice umesto tabele uvek stoje unutar `.kartica-telo zbijeno`,
   pa im padding pripada ovde, a ne inline u svakom šablonu. */
.kartica-telo.zbijeno > .lista-kartica { padding: var(--r3); }

/* Napomena na dnu ekrana — uslov pod kojim brojevi iznad važe. */
.napomena-dna {
    text-align: center;
    font-size: var(--t-xs);
    color: var(--n-500);
    margin-top: var(--r6);
}

/* ============================================================
   KARTON KLIJENTA
   ============================================================ */

/* ocena platiše — jedna rečenica koja se čita pre svih brojeva */
.ocena-platise {
    display: flex; align-items: center; gap: 8px;
    padding: 10px var(--r3);
    border-radius: var(--rad-sm);
    font-size: var(--t-sm); font-weight: 600;
    background: var(--mirno-bg); color: var(--mirno);
}
.ocena-platise.uspeh  { background: var(--uspeh-bg);  color: var(--uspeh); }
.ocena-platise.info   { background: var(--info-bg);   color: var(--info); }
.ocena-platise.upozor { background: var(--upozor-bg); color: var(--upozor); }
.ocena-platise.greska { background: var(--greska-bg); color: var(--greska); }

/* udeo u prihodu */
.udeo-broj {
    font-size: var(--t-3xl); line-height: 1; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.udeo-broj span { font-size: var(--t-lg); color: var(--n-500); margin-left: 2px; }
.limit-popuna.opasno { background: var(--greska); }

/* napomena uz klijenta — beleška, ne upozorenje */
.klijent-napomena {
    margin-top: var(--r4);
    padding: var(--r3);
    background: var(--n-50);
    border-radius: var(--rad-sm);
    font-size: var(--t-sm);
    color: var(--n-700);
}

/* filter vrste dokumenta u zaglavlju kartice */
.filter-vrste { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-dugme {
    padding: 5px 11px;
    font-size: var(--t-xs); font-weight: 500;
    color: var(--n-700);
    background: var(--n-50);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-pun);
    white-space: nowrap;
}
@media (hover: hover) {
    .filter-dugme:hover { text-decoration: none; border-color: var(--brend-300); color: var(--brend-700); }
}
.filter-dugme.aktivan {
    background: var(--brend-puna); border-color: var(--brend-puna); color: var(--na-boji);
}

/* U glavi kartice red stoji pored naslova. Na telefonu mu tu ostane oko 160px,
   pa se šest dugmadi složi skoro jedno ispod drugog i glava naraste na 270px
   (izmereno na kartonu klijenta). Zato tamo ide u svoj red, punom širinom. */
@media (max-width: 640px) {
    .kartica-glava:has(.filter-vrste) { flex-wrap: wrap; }
    .kartica-glava .filter-vrste { width: 100%; }
}

/* stornirani red je istorija, ne greška — vidi se da postoji, ne viče */
.tabela tr.stornirano td { color: var(--n-500); }
.tabela tr.stornirano td:first-child { color: var(--n-500); }
.tabela tr.stornirano .iznos { text-decoration: line-through; }

/* ---------------- starost duga ---------------- */

.starost { display: flex; flex-direction: column; gap: var(--r4); }
.starost-red { display: flex; flex-direction: column; gap: 5px; }
.starost-glava {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3);
    font-size: var(--t-sm);
}
.starost-glava b { font-variant-numeric: tabular-nums; }
.starost-red .limit-popuna { background: var(--upozor); }
.starost-red.mirno .limit-popuna { background: var(--brend-600); }
.starost-red.opasno .limit-popuna { background: var(--greska); }
.starost-red.opasno .starost-glava b { color: var(--greska); }

/* ---------------- stubići (mesečni promet) ----------------
   Bez biblioteke: stubić je pravougaonik sa visinom u procentima.
   CSP dozvoljava samo naše skripte, a ovo ne traži nijednu. */

.stubici { display: flex; align-items: stretch; gap: 6px; height: 180px; }
.stubic { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stubic-traka { flex: 1; display: flex; align-items: flex-end; }
.stubic-popuna {
    width: 100%;
    background: var(--brend-600);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height var(--sporo);
}
/* mesec bez prometa mora da se vidi kao nula, a ne kao rupa u nizu */
.stubic-popuna.prazan { background: var(--n-100); height: 2px; }
.stubic-oznaka {
    font-size: var(--t-xs); color: var(--n-500); text-align: center;
    overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .stubici { height: 140px; gap: 3px; }
    .stubic-oznaka { font-size: 10px; }
}

/* ============================================================
   PRILOŽENI DOKUMENTI UZ KLIJENTA
   ============================================================ */

.fajl-lista { display: flex; flex-direction: column; }
.fajl-red {
    display: flex; align-items: flex-start; gap: var(--r3);
    padding: var(--r3) var(--r5);
    border-bottom: 1px solid var(--n-100);
}
.fajl-red:last-child { border-bottom: 0; }
@media (hover: hover) {
    .fajl-red:hover { background: var(--n-50); }
}

.fajl-ikona {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: var(--rad-sm);
}

.fajl-telo { flex: 1; min-width: 0; }
.fajl-naziv { font-weight: 600; color: var(--n-900); word-break: break-word; }
@media (hover: hover) {
    .fajl-naziv:hover { color: var(--brend-600); }
}
.fajl-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--r3);
    margin-top: 3px;
    font-size: var(--t-xs); color: var(--n-500);
}
.fajl-napomena { margin-top: 5px; font-size: var(--t-sm); color: var(--n-700); }

.fajl-akcije { display: flex; align-items: center; gap: 4px; flex: none; }

@media (max-width: 640px) {
    .fajl-red { flex-wrap: wrap; }
    .fajl-akcije { width: 100%; justify-content: flex-end; }
}

/* ---------------- šabloni dokumenata ----------------

   Prefiks je `dokument-sablon-`, a ne `sablon-`: `sablon-naziv` i `sablon-opis`
   već postoje i pripadaju izboru IZGLEDA fakture. Ista imena bi ovom ekranu
   tiho dala tuđi stil. */

.dokument-sablon-glava { display: flex; align-items: center; gap: var(--r3); }

.dokument-sablon-ikona {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    background: var(--brend-50); color: var(--brend-600);
    border-radius: var(--rad-sm);
}

.dokument-sablon-naziv { font-weight: 600; line-height: 1.3; }
.dokument-sablon-opis {
    margin: 10px 0 0;
    font-size: var(--t-sm); color: var(--n-500); line-height: 1.5;
}

/* Spisak „šta PDF donosi sam". Postoji da se ne kuca ono što papir već ima —
   bez njega ljudi u telo dopisa ponove adresu i datum. */
.dokument-sablon-spisak { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.dokument-sablon-spisak li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: var(--t-sm); line-height: 1.5;
}
.dokument-sablon-spisak .ikona { color: var(--uspeh); flex: none; margin-top: 2px; }

/* Šablon nosi svoje prelome i uvučene crte za potpis, pa mora `pre`.

   `overflow-x: auto` je obavezan: najduži red ugovora je širi od kartice na
   telefonu, a bez toga bi celu stranu gurnuo u vodoravni skrol. */
.dokument-sablon-tekst {
    margin: 0;
    overflow-x: auto;
    font-family: var(--pismo-mono);
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--n-800);
    white-space: pre;
    tab-size: 4;
}

/* Isti slog kao gore, ali u polju koje se piše: dokument na ekranu treba da
   liči na onaj koji izađe iz štampača. Ivicu, fokus i tamnu temu nosi
   `.oblast`, pa se ovde ne ponavljaju — ostaje samo slog i visina. */
.dokument-sablon-unos {
    font-family: var(--pismo-mono);
    font-size: var(--t-sm);
    line-height: 1.7;
    tab-size: 4;
    resize: vertical;
    min-height: 60vh;
}

/* ---------------- papir: dokument kakav izlazi iz štampača ----------------

   Ovo nije „pregled pored polja za unos" nego samo polje. Čovek kuca po
   papiru, i ono što na njemu vidi jeste ono što će izaći iz PDF-a.

   Zato mere nisu nalik onima iz `SablonPdf` nego BAŠ te: širina A4, margine i
   visine redova u milimetrima, slova u tačkama. CSS zna i jedno i drugo, pa
   nema preračunavanja u piksele koje bi se razišlo prvom izmenom PDF-a.

   Papir je beo i u tamnoj temi. Papir i jeste beo — a ekran koji ga prikazuje
   tamnim ne bi govorio istinu o onome što izlazi iz štampača. */

.papir-omot {
    --zum: 1;
    display: flex; justify-content: center;
    padding: var(--r5);
    background: var(--n-100);
    border-radius: var(--rad);
    overflow-x: auto;
}

/* Uži ekrani: papir se SMANJUJE, ne prelama. Prelamanje bi promenilo mesta
   preloma redova, pa ekran više ne bi pokazivao ono što izlazi iz štampača —
   a to je jedini razlog zbog kog papir i postoji.

   Stepenice nisu pogođene. A4 je 794px na 96dpi, a papiru ostaje širina ekrana
   bez razmaka strane (`.sadrzaj-unutra`: 32px, ispod 640px 24px) i bez razmaka
   omota (40px, ispod 900px 24px). Svaka stepenica je zaokružena NANIŽE, do
   sledeće — tako nigde ne ostaje vodoravni skrol, po cenu malo praznine na
   početku raspona. Do 1:1 se ide sve dok papir staje, a to je oko 850px.

   Pregledač koji `zoom` ne zna (Firefox pre 126) papir prikazuje u punoj
   veličini, a omot ga pusti u vodoravni skrol — sitnije, ali ispravno. */
@media (max-width: 900px) { .papir-omot { padding: var(--r3); } }

@media (max-width: 850px) { .papir-omot { --zum: 0.86; } }
@media (max-width: 740px) { .papir-omot { --zum: 0.73; } }
@media (max-width: 640px) { .papir-omot { --zum: 0.61; } }
@media (max-width: 540px) { .papir-omot { --zum: 0.49; } }
@media (max-width: 440px) { .papir-omot { --zum: 0.39; } }
@media (max-width: 360px) { .papir-omot { --zum: 0.34; } }

.papir {
    zoom: var(--zum);
    width: 210mm; flex: none;
    min-height: 297mm;
    padding: 20mm 22mm 22mm;
    background: #fff;
    color: #161b26;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 8px 24px rgba(16, 24, 40, .12);

    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    font-size: 10pt;
    line-height: 5.2mm;
}

.papir:focus-within { box-shadow: 0 0 0 3px var(--brend-100), 0 8px 24px rgba(16, 24, 40, .12); }
.papir-list:focus { outline: 0; }

/* Prazan blok mora da ostane visok koliko i red, inače u njega ne može da se
   klikne — a prazan red je često baš ono što se popunjava.

   Namerno BEZ `white-space: pre-wrap`, mada dokument ima razmake koji nešto
   znače („[  ] prima bez primedbi"): u uređivom polju sa `pre-wrap` Enter ne
   pravi nov red nego ubacuje prelom UNUTAR bloka, pa se ceo dokument slepi u
   jedan pasus. Razmaci se čuvaju drugačije — pogled ih ispisuje kao tvrde
   razmake. */
.papir-red { min-height: 5.2mm; }

/* `multiCell(0, 7, …, 'C')` pa `hr(1)` pa `ln(4)` — otud 1mm do crte i 5mm
   ispod nje. */
.papir-naslov { font-size: 15pt; font-weight: 700; line-height: 7mm; text-align: center; }
.papir-naslov-kraj {
    padding-bottom: 1mm;
    margin-bottom: 5mm;
    border-bottom: 0.25mm solid #c8ced8;
}

.papir-odeljak { margin-top: 3mm; font-size: 10.5pt; font-weight: 700; }
.papir-prazno  { height: 3mm; min-height: 3mm; line-height: 3mm; }
.papir-uvuceno { padding-left: 6mm; }
.papir-desno   { text-align: right; }

/* Crte se CRTAJU, kao i u PDF-u: niz slova „_" u proporcionalnom pismu je
   nazubljen i nikad iste dužine. U PDF-u linija stoji 3mm ispod vrha reda. */
.papir-crta, .papir-potpis { position: relative; height: 5.2mm; }

.papir-crta::after, .papir-potpis::after, .papir-kol-crta::after {
    content: ''; position: absolute; top: 3mm;
    border-top: 0.25mm solid #78828f;
}

.papir-crta::after   { left: 0; right: 0; }
.papir-potpis::after { right: 0; width: 55mm; }

.papir-kolone { display: flex; }
.papir-kol    { width: 50%; text-align: center; }

.papir-kol-crta { position: relative; }
.papir-kol-crta::after { left: 50%; width: 55mm; margin-left: -27.5mm; }

/* Uređivač je ISKLJUČIVO poboljšanje: bez JavaScripta papir ostaje prikaz, a
   uređuje se polje ispod njega. Zato ovaj razred pali JavaScript, a ne pogled. */
.papir-uredjiv .papir-list { min-height: 40mm; }
.papir-uredjiv .papir { cursor: text; }

/* Traka sa alatima. Pravi je modul, ne pogled — bez JavaScripta ne bi radila
   nijedno dugme, a traka koja ne radi je gora nego nikakva.

   Lepi se uz vrh: ugovor je duži od ekrana, pa dugme mora da bude na dohvat i
   kad se dođe do potpisa. `--topbar` je gornja traka aplikacije, ispod koje se
   sve podvlači. Dugmad su ista ona iz uređivača sadržaja sajta. */
.papir-traka {
    position: sticky; top: var(--topbar); z-index: 3;
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
    margin-bottom: var(--r3);
    padding: 6px;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    box-shadow: var(--senka-1);
}

/* Oblikovanje unutar reda. Papir ima svoje pismo i svoju veličinu, pa se
   nasleđuju — menja se samo debljina, odnosno nagib. */
.papir strong { font-weight: 700; }
.papir em     { font-style: italic; }

/* Polje ispod papira — vidi ga samo onaj bez JavaScripta, pa mu razmak od
   papira ne dolazi iz ritma ekrana (`.sadrzaj-unutra > * + *` hvata formu, ne
   ono što je u njoj). */
.papir-polje { margin-top: var(--r5); }

/* Spisak popunjenog — sklopljen iznad papira.

   `<details>` radi bez JavaScripta, pa spisak ne mora da stane pored papira:
   papir je širine A4 i uzima ceo ekran. */
.papir-legenda {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
}
.papir-legenda > summary {
    display: flex; align-items: center; gap: var(--r2);
    padding: var(--r3) var(--r4);
    font-size: var(--t-sm); font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.papir-legenda > summary::-webkit-details-marker { display: none; }
.papir-legenda > summary::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--n-400); border-bottom: 2px solid var(--n-400);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--brzo);
}
.papir-legenda[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (hover: hover) {
    .papir-legenda > summary:hover { background: var(--n-50); }
}

.papir-legenda-telo { padding: 0 var(--r4) var(--r4); }

/* Spisak popunjenog: PAROVI, ne tabela.

   Bila je tabela od dve kolone po grupi, dve grupe jedna pored druge. U uskom
   stupcu se lomila i oznaka i vrednost, redovi su ispadali različite visine, a
   kraća grupa je ostavljala pola ekrana prazno — spisak je delovao nabacano.

   Sada je svaka stavka istog oblika (oznaka pa vrednost ispod nje), a grupe idu
   jedna ispod druge preko cele širine. Visine u redu izravnava sama mreža. */

.legenda-grupa + .legenda-grupa { margin-top: var(--r5); }

/* Naziv izvora, pa tanka crta do kraja reda — dovoljno da se grupa vidi, a da
   ne viče kao naslov. */
.legenda-naslov {
    display: flex; align-items: center; gap: var(--r3);
    margin-bottom: var(--r3);
    font-size: var(--t-xs); color: var(--n-500);
}
.legenda-naslov::after { content: ''; flex: 1; height: 1px; background: var(--n-200); }

.legenda-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--r4) var(--r5);
}

.legenda-stavka { min-width: 0; }

/* Oznaka je ono što u tekstu i piše, pa i izgleda tako — u pismu jednakih
   širina i u svojoj pločici. */
.legenda-oznaka {
    display: inline-block;
    padding: 1px 6px;
    font-family: var(--pismo-mono);
    font-size: 11px; line-height: 16px;
    color: var(--n-600);
    background: var(--n-100);
    border-radius: 5px;
}

.legenda-vrednost {
    margin-top: 4px;
    font-size: var(--t-sm); line-height: 1.45;
    color: var(--n-900);
    overflow-wrap: break-word;
}
.legenda-vrednost.prazna { color: var(--n-400); font-style: italic; }

/* ---------------- traka zauzetog prostora ----------------

   Tanja je od trake paušalnog limita i namerno: limit je razlog zbog kog se
   ekran otvara, a ovo je sporedan podatak uz spisak dokumenata. Boje su iste,
   da isti prag znači isto na oba mesta. */

.skladiste-traka {
    height: 4px;
    background: var(--n-100);
    overflow: hidden;
}
.skladiste-popuna {
    height: 100%;
    background: var(--brend-600);
    transition: width var(--sporo);
}
.skladiste-traka.pazi   .skladiste-popuna { background: var(--upozor); }
.skladiste-traka.opasno .skladiste-popuna { background: var(--greska); }

@media (prefers-reduced-motion: reduce) {
    .skladiste-popuna { transition: none; }
}

/* ---------------- beleške uz klijenta ---------------- */

.beleske-lista { display: flex; flex-direction: column; }

.beleska {
    padding: var(--r4) var(--r5);
    border-bottom: 1px solid var(--n-100);
}
.beleska:last-child { border-bottom: 0; }

.beleska-glava {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--r3);
    margin-bottom: 6px;
}
.beleska-autor { font-weight: 600; font-size: var(--t-sm); }
.beleska-datum { font-size: var(--t-xs); color: var(--n-500); }

/* `pre-wrap` nije potreban — prelome već pravi `nl2br` u pogledu, a razmaci se
   u belešci ne koriste za poravnanje. */
.beleska-tekst { font-size: var(--t-sm); color: var(--n-800); line-height: 1.55; }

.beleska-akcije {
    display: flex; align-items: center; gap: 4px;
    margin-top: 8px;
}

/* Forma za izmenu stoji uz belešku i otvara je `:target`.

   Isto pravilo kao kod lepeze u donjoj traci: bez JavaScripta mora da radi, a
   `hidden` se ne sme koristiti jer ga reset diže na `!important`, pa ga
   `:target` ne može nadjačati. */
.beleska-izmena { display: none; margin-top: 10px; }
.beleska-izmena:target { display: block; }

@media (max-width: 640px) {
    .beleska-akcije { flex-wrap: wrap; }
}

/* ---------------- izbor fajla ---------------- */

/* Ceo pravougaonik je meta za klik. Podrazumevano dugme pregledača je sitno,
   piše „No file chosen" na engleskom i ne liči na ostatak aplikacije. */
.izbor-fajla {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--r5) var(--r4);
    margin-bottom: var(--r4);
    text-align: center;
    background: var(--n-25);
    border: 2px dashed var(--n-300);
    border-radius: var(--rad);
    cursor: pointer;
    transition: border-color var(--brzo), background var(--brzo);
}
.izbor-fajla.preko { border-color: var(--brend-500); background: var(--brend-50); }
@media (hover: hover) {
    .izbor-fajla:hover { border-color: var(--brend-500); background: var(--brend-50); }
}
.izbor-fajla input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.izbor-fajla:focus-within { border-color: var(--brend-600); box-shadow: 0 0 0 3px var(--brend-50); }

.izbor-fajla-ikona {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    background: var(--n-0); color: var(--n-500);
    border: 1px solid var(--n-200);
    border-radius: 50%;
}
.izbor-fajla.izabran .izbor-fajla-ikona { background: var(--uspeh-bg); color: var(--uspeh); border-color: var(--uspeh-ivica); }
.izbor-fajla-tekst { font-size: var(--t-sm); font-weight: 600; word-break: break-word; }
.izbor-fajla-opis { font-size: var(--t-xs); color: var(--n-500); }

/* Tesna varijanta trake za prevlačenje — stoji u koloni sa strane, gde puna
   visina pojede pola kartice. Isto ponašanje, manje mesta. */
.izbor-fajla-tesno {
    padding: var(--r3);
    gap: 2px;
}
.izbor-fajla-tesno .izbor-fajla-ikona { width: 26px; height: 26px; }
.izbor-fajla-tesno .izbor-fajla-tekst { font-size: var(--t-sm); }

/* Modal rešenja: iznosi pod jednim naslovom, prvi nepuni mesec kao
   sklopiv `<details>` (radi bez skripte; otvoren je kad važenje ne počinje
   prvog u mesecu). Traka za fajl ispod, na razmaku. */
.resenje-iznosi { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--n-200); }
.resenje-iznosi > .polje-glava { margin-bottom: 2px; }
.resenje-prvi { margin: 8px 0 14px; padding: 2px 12px 4px; border: 1px dashed var(--n-300); border-radius: var(--rad-sm); }
.resenje-prvi > summary {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 0; cursor: pointer; list-style: none;
    font-size: var(--t-sm); font-weight: 600; color: var(--n-700);
}
.resenje-prvi > summary::-webkit-details-marker { display: none; }
.resenje-prvi > summary::before { content: ''; width: 6px; height: 6px; border-right: 2px solid var(--n-500); border-bottom: 2px solid var(--n-500); transform: rotate(-45deg); transition: transform var(--brzo); flex: none; }
.resenje-prvi[open] > summary::before { transform: rotate(45deg); }
.resenje-prvi > .polje-pomoc { margin: 0 0 8px; }
/* Iznosi u jednom redu i u modalu od 560px: RSD ne sme da otme širinu polja. */
.resenje-iznosi .red-forme.tri .polje-dodatak { padding: 0 8px; }
/* Mesec kao red-link: otvara modal sa nalozima i IPS QR kodom. */
.mesec-red {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--n-100);
    color: inherit;
    transition: background var(--brzo);
}
@media (hover: hover) {
    .mesec-red:hover { background: var(--n-50); text-decoration: none; }
}
.mesec-red-tekst { flex: 1; min-width: 0; }
.mesec-red-strelica { color: var(--n-400); flex: none; }

/* Modal rešenja: redovi sa po dva-tri polja (broj i poziv na broj, datumi,
   iznos i uplatni račun po vrsti) u 560px su bili stisnuti; malo širi, da sve
   stane (traženo). */
.modal.modal-resenje { width: min(720px, 100%); }

/* Modal meseca: „svi odjednom" gore, pa obaveze jedna ispod druge. QR koda
   u redu više nema — otvara ga dugme, preko celog ekrana (`.qr-ekran`). */
.modal.modal-mesec { width: min(680px, 100%); }
.mesec-zbir { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r3); margin-bottom: var(--r4); }
.mesec-svi {
    display: flex; align-items: center; justify-content: space-between; gap: var(--r3); flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: var(--r4);
    background: var(--brend-50); border: 1px solid var(--brend-100); border-radius: var(--rad-sm);
}
.mesec-dugmad { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mesec-dugmad form { display: inline; }
.obaveza-red { display: flex; gap: var(--r4); padding: 14px 0; border-top: 1px solid var(--n-100); }
.obaveza-tekst { flex: 1; min-width: 0; }
.obaveza-status { margin-top: 6px; }

/* QR kod u prozoru (`app/porezi/qr.php`, `moduli/qr-ekran.js`).

   Običan popup, ne preko celog ekrana (traženo): kartica u sredini, a strana
   iza nje zamućena. 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 (isto kao `.zaklon` menija).

   Iznad modala meseca (80): otvara se iz njega i stoji preko njega. Glava i
   noga su iste kao kod modala, da se zna gde je „zatvori".

   Kartica sa kodom je BELA i u tamnoj temi: banka skenira crno na belom, a
   invertovan kod na tamnoj pozadini neke aplikacije ne čitaju. Zato boja
   stoji upisana, ne kroz `--n-0` koja se u tamnoj temi okrene. */
.qr-ekran {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center;
    padding: var(--r5);
    background: rgba(16, 24, 40, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    outline: none;
}
.qr-ekran-kutija {
    width: min(440px, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    display: flex; flex-direction: column;
    background: var(--n-0);
    border-radius: var(--rad-lg);
    box-shadow: var(--senka-4);
    overflow: hidden;
}
.qr-ekran-glava,
.qr-ekran-noga { display: flex; align-items: center; gap: var(--r3); padding: var(--r4) var(--r5); flex: none; }
.qr-ekran-glava { justify-content: space-between; border-bottom: 1px solid var(--n-200); }
.qr-ekran-noga { justify-content: flex-end; border-top: 1px solid var(--n-200); }
.qr-ekran-naslov { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.qr-ekran-telo {
    min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--r4); padding: var(--r5);
    text-align: center;
}
.qr-ekran-kod {
    /* Kod puni širinu kartice; na niskom ekranu se skrati da stane sa iznosom. */
    width: min(100%, 55vh, 55dvh);
    aspect-ratio: 1;
    padding: var(--r3);
    background: #ffffff;
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
}
.qr-ekran-kod svg { display: block; width: 100%; height: 100%; }
.qr-ekran-iznos { font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.qr-ekran-pomoc { margin: 0; color: var(--n-500); font-size: var(--t-sm); }

@media (max-width: 640px) {
    .obaveza-red { flex-direction: column; }
}
/* Priloženo rešenje: ime fajla levo, dugme za uklanjanje desno. */
.prilog-resenja {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--n-200);
}
.prilog-resenja > form { flex: none; }

.prilog-veza {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; align-items: center; gap: 8px;
}
/* Ime fajla ume da bude dugačko koliko i skener hoće — seče se, a ne gura
   dugme za uklanjanje van kartice. */
.prilog-ime {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Slika koja je već postavljena, iznad polja za novu. Stoji na podlozi
   zato što je logo najčešće providan PNG — na beloj kartici se ne vidi
   gde počinje i gde se završava. */
.pregled-loga {
    display: flex; align-items: center; gap: var(--r4);
    padding: 12px;
    margin-bottom: 8px;
    background: var(--n-50);
    border-radius: var(--rad-sm);
}
.pregled-loga img { max-height: 70px; max-width: 45%; flex: none; }

/* veza unutar poruke — bez nje korisnik zna da nešto ne valja, ali ne i šta da uradi */
.poruka-veza {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--t-sm); font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .poruka-veza:hover { color: inherit; }
}

/* ---------------- potvrda brisanja ---------------- */

/* `<details>` umesto modala: potvrda mora da radi i bez JavaScripta. */
.potvrda > summary {
    cursor: pointer;
    list-style: none;
}
.potvrda > summary::-webkit-details-marker { display: none; }
.potvrda[open] > summary { background: var(--greska-bg); }

.potvrda-telo {
    padding: 10px var(--r4) var(--r3);
    border-top: 1px solid var(--n-100);
    background: var(--greska-bg);
}
.potvrda-telo p {
    margin: 0 0 10px;
    font-size: var(--t-xs); line-height: var(--t-sm-h);
    color: var(--n-700);
}

/* ============================================================
   KORISNICI NALOGA — forma pristupa

   Spisak modula u tri kolone kao meni (Agencija · Poslovanje · Podešavanja),
   grana (Fakturisanje) kao naslov bez kvadratića, podstavke uvučene. Spisak
   firmi (agencija) se sklanja kad je izabrano „sve firme": CSS `:has`, pa
   radi i bez skripti — a bez `:has` (stari pregledač) ostaje vidljiv, što je
   samo višak, ne greška.
   ============================================================ */

.dozvole-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 var(--r5);
    padding: var(--r3) var(--r5) var(--r4);
}
.dozvole-naslov {
    padding: 10px 0 4px;
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--n-500);
    border-bottom: 1px solid var(--n-100);
}
.dozvole-grana { padding: 10px 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--n-700); }
.dozvole-dete { padding-left: 22px; }

/* Red sa prekidačem (traženo: prekidač svuda, ne kvadratić).

   Prekidač je ISTI onaj kojim se moduli pale u „Meniju" i kojim se pali
   obnavljanje pretplate — ovde se samo stavlja u red: natpis levo, prekidač
   desno, tanka crta između redova. Tako se vidi šta je uključeno i kad se
   prelazi pogledom niz kolonu, što kod kvadratića u nizu nije bio slučaj.

   Natpis ide `order: -1` umesto da u HTML-u stoji prvi: prekidač se pali
   pravilom `input:checked + .prekidac-telo`, pa to dvoje mora ostati jedno uz
   drugo u dokumentu. */
.prekidac-red { display: flex; width: 100%; align-items: center; gap: var(--r3); padding: 9px 0; }
.prekidac-red .prekidac-tekst { order: -1; flex: 1; min-width: 0; font-size: var(--t-sm); }
.prekidac-red + .prekidac-red,
.prekidac-red + .dozvole-grana { border-top: 1px solid var(--n-100); }

@media (hover: hover) {
    .prekidac-red:hover .prekidac-telo { background: var(--n-400); }
    .prekidac-red:hover input:checked + .prekidac-telo { background: var(--brend-700); }
}

.dozvole-firme-lista .prekidac-red { padding-left: 2px; }

.dozvole-firme .krugic { padding: 6px 0; }
.dozvole-firme-lista {
    margin-top: 6px;
    padding: 4px 0 0 4px;
    border-top: 1px solid var(--n-100);
    max-height: 280px;
    overflow-y: auto;
}
.dozvole-firme:has(input[name="obim"][value="sve"]:checked) .dozvole-firme-lista { display: none; }

/* Opisi uloga ispod izbora uloge (admini u vlasničkom panelu). */
.dozvole-opisi { display: grid; gap: 4px; margin-top: 8px; }

/* ============================================================
   LIST — dokument kao papir, u HTML-u

   Ovo je prepis `App\Servisi\PdfFakture` u CSS. Sve mere tamo su u
   milimetrima na A4 strani (210×297, margine 15), pa su i ovde u milimetrima:
   `--mm` je jedan milimetar te strane izražen u širini kontejnera, a `--pt`
   jedna tipografska tačka (1pt = 0,352778mm).

   Zato list nije „nešto slično PDF-u" nego ista slika, skalirana na širinu
   ekrana: promeni se `--mm`, sve ostalo prati.
   ============================================================ */

.list-omot {
    container-type: inline-size;
    /* `width: 100%` je OBAVEZAN, ne kozmetika.

       `container-type: inline-size` uvodi zadržavanje veličine (size containment):
       element se meri KAO DA JE PRAZAN, pa mu je unutrašnja (max-content) širina
       nula. Dokle god širinu diktira roditelj, to se ne primeti.

       Ali `margin: 0 auto` u fleks koloni (`.kolona` na strani dokumenta) ukida
       rastezanje po poprečnoj osi — stavka sa `auto` marginama se sažima na
       sopstvenu širinu. A ona je ovde nula, pa se ceo list sklopi u crtu od 0×8 px
       i pregleda nema. Sa `width: 100%` širina je određena spolja, `max-width`
       je i dalje ograničava na A4, a `auto` margine je centriraju kad ima mesta. */
    width: 100%;
    max-width: 210mm;      /* preko A4 nema smisla rasti — to je stvarna strana */
    margin: 0 auto;
}

.list {
    /* 100cqw = širina strane = 210mm  ->  1mm = 100/210 cqw */
    --mm: 0.47619cqw;
    --pt: calc(var(--mm) * 0.352778);

    /* Isti ton kao u PDF-u i iz istog razloga: stari #6B7686 je na papiru bled
       (kontrast 4,60:1 prema beloj), a ovim tonom je ispisan najveći deo lista.
       Sada 7,69:1. Ako se menja ovde, mora i u `PdfFakture::SIVA` — ovaj prikaz
       je napravljen da izgleda identično odštampanom dokumentu. */
    --siva: #475467;    /* PdfFakture::SIVA  */
    --crna: #161B26;    /* PdfFakture::CRNA  */
    --brend: #3D4FE0;   /* PdfFakture::BREND */
    --ivica: #E1E6EE;   /* setDrawColor(225, 230, 238) */

    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: calc(297 * var(--mm));
    padding: calc(15 * var(--mm));

    background: #fff;
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-2);

    /* PDF koristi Helvetiku; Arial ima iste metrike */
    font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    font-size: calc(9 * var(--pt));
    line-height: calc(4.5 * var(--mm));
    color: var(--crna);
    font-variant-numeric: tabular-nums;
}

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

/* U PDF-u se leva kolona (110mm od x=15) i desna (75mm od x=120) preklapaju
   za 5mm — bezopasno, jer je tekst levo kratak. U HTML-u se preklapanje ne
   može odglumiti, pa leva uzima ostatak: 180 - 75 = 105mm. */
.list-vrh { display: flex; align-items: flex-start; justify-content: space-between; }

.list-izdavalac { flex: 1; min-width: 0; }
.list-logo { width: calc(32 * var(--mm)); height: auto; margin-bottom: calc(2 * var(--mm)); }

.list-firma {
    font-size: calc(12 * var(--pt)); font-weight: 700;
    line-height: calc(6 * var(--mm));
    color: var(--crna);
}
.list-sitno { font-size: calc(9 * var(--pt)); line-height: calc(4.5 * var(--mm)); color: var(--siva); }

.list-naslov { width: calc(75 * var(--mm)); flex: none; text-align: right; }
.list-tip {
    font-size: calc(20 * var(--pt)); font-weight: 700;
    line-height: calc(10 * var(--mm));
    color: var(--brend);
}
.list.storniran .list-tip { color: #B42318; }

.list-broj { font-size: calc(12 * var(--pt)); font-weight: 700; line-height: calc(6 * var(--mm)); }
.list-storno {
    font-size: calc(10 * var(--pt)); font-weight: 700;
    line-height: calc(5 * var(--mm));
    color: #B42318;
}

.list-crta {
    height: 0;
    border-top: 0.2mm solid var(--ivica);
    margin: calc(6 * var(--mm)) 0 calc(4 * var(--mm));
}

/* ---------------- kupac i podaci ---------------- */

/* 90mm (kupac) + 15mm razmaka + 75mm (podaci) = 180mm — iste pozicije kao u PDF-u */
.list-strane { display: flex; align-items: flex-start; justify-content: space-between; }

.list-kupac { width: calc(90 * var(--mm)); flex: none; }
.list-meta  { width: calc(75 * var(--mm)); flex: none; }

.list-labela {
    font-size: calc(8 * var(--pt)); font-weight: 700;
    line-height: calc(5 * var(--mm));
    color: var(--siva);
}
.list-meta .list-labela { text-align: right; }

.list-kupac-naziv {
    font-size: calc(11 * var(--pt)); font-weight: 700;
    line-height: calc(6 * var(--mm));
    color: var(--crna);
}

.list-meta-red {
    display: flex; justify-content: flex-end;
    line-height: calc(4.8 * var(--mm));
    font-size: calc(9 * var(--pt));
}
.list-meta-labela   { width: calc(40 * var(--mm)); text-align: right; color: var(--siva); }
.list-meta-vrednost { width: calc(35 * var(--mm)); text-align: right; color: var(--crna); }

/* ---------------- stavke ---------------- */

.list-tabela {
    width: 100%;
    margin-top: calc(6 * var(--mm));
    border-collapse: collapse;
    table-layout: fixed;
    font-size: calc(9 * var(--pt));
}
.list-tabela th,
.list-tabela td {
    border: 0.2mm solid var(--ivica);
    padding: 0 calc(2 * var(--mm));       /* `cell()` uvlači tekst za 2mm */
    height: calc(6 * var(--mm));          /* rowHeight */
    line-height: calc(4.5 * var(--mm));
    vertical-align: middle;
}
.list-tabela th { font-weight: 700; background: #EBEEF2; }   /* headerFill */
.list-tabela tbody tr:nth-child(even) { background: #F8F9FB; }  /* zebra */

/* širine iz `PdfFakture::stavke()`: 8, 74, 12, 20, 25, 16, 25 mm */
.list-tabela .k-rb    { width: calc(8 * var(--mm));  text-align: center; }
.list-tabela .k-opis  { width: calc(74 * var(--mm)); text-align: left; }
.list-tabela .k-jm    { width: calc(12 * var(--mm)); text-align: center; }
.list-tabela .k-kol   { width: calc(20 * var(--mm)); text-align: right; }
.list-tabela .k-cena  { width: calc(25 * var(--mm)); text-align: right; }
.list-tabela .k-pop   { width: calc(16 * var(--mm)); text-align: center; }
.list-tabela .k-iznos { width: calc(25 * var(--mm)); text-align: right; }

.list-tabela td.k-opis { padding-top: calc(1 * var(--mm)); padding-bottom: calc(1 * var(--mm)); }

/* ---------------- suma ---------------- */

.list-suma { margin-top: calc(2 * var(--mm)); }

.list-suma-red {
    display: flex; justify-content: flex-end;
    font-size: calc(9 * var(--pt)); line-height: calc(5.5 * var(--mm));
    color: var(--siva);
}
.list-suma-labela   { width: calc(45 * var(--mm)); text-align: right; }
.list-suma-vrednost { width: calc(35 * var(--mm)); text-align: right; }

.list-suma-crta {
    height: 0;
    border-top: 0.2mm solid var(--ivica);
    margin-left: auto;
    width: calc(80 * var(--mm));
}

.list-suma-red.jako {
    font-size: calc(12 * var(--pt)); font-weight: 700;
    line-height: calc(8 * var(--mm));
    color: var(--crna);
}

.list-slovima {
    text-align: right;
    font-size: calc(8 * var(--pt)); line-height: calc(5 * var(--mm));
    color: var(--siva);
}

/* Kurs po kojem je izračunata protivvrednost — sitno, uz sumu, jer je to
   dokaz računice, a ne stavka dokumenta. */
.list-kurs {
    text-align: right;
    font-size: calc(8 * var(--pt)); line-height: calc(4.5 * var(--mm));
    color: var(--siva);
}

/* ---------------- podnožje ---------------- */

.list-naslov-bloka {
    margin-top: calc(6 * var(--mm));
    font-size: calc(9 * var(--pt)); font-weight: 700;
    line-height: calc(5 * var(--mm));
    color: var(--crna);
}
.list-pasus {
    font-size: calc(9 * var(--pt)); line-height: calc(4.5 * var(--mm));
    color: var(--siva);
    margin-bottom: calc(3 * var(--mm));
}
.list-pasus.crn { color: var(--crna); }

.list-klauzula {
    font-size: calc(8 * var(--pt)); line-height: calc(4 * var(--mm));
    color: var(--siva);
    margin-bottom: calc(4 * var(--mm));
}

.list-potpis { margin-top: calc(6 * var(--mm)); text-align: center; }
.list-potpis-slika { width: calc(40 * var(--mm)); height: auto; margin-left: auto; display: block; margin-right: calc(15 * var(--mm)); }
.list-potpis-crta {
    height: 0;
    border-top: 0.2mm solid #B4BECD;
    width: calc(60 * var(--mm));
    margin-left: auto;
}
.list-potpis-tekst {
    width: calc(60 * var(--mm));
    margin-left: auto;
    text-align: center;
    font-size: calc(8 * var(--pt)); line-height: calc(4 * var(--mm));
    color: var(--siva);
}

.list-noga {
    position: absolute;
    left: calc(15 * var(--mm)); right: calc(15 * var(--mm)); bottom: calc(10 * var(--mm));
    text-align: center;
    font-size: calc(7 * var(--pt)); line-height: calc(4 * var(--mm));
    color: var(--siva);
}

/* Znak sistema — poslednji red podnožja. Umesto rečenice („Dokument je kreiran
   preko Fakto sistema"), koja se na papiru koji ide klijentu čita kao reklama.

   Ista širina kao u PDF-u (11mm, `ZnakFakto::SIRINA`) i ista ispranost — `opacity`, ne svetlija
   slika, da radi i na obojenoj podlozi. */
.list-noga-znak {
    position: absolute;
    left: 50%; bottom: calc(5 * var(--mm));
    transform: translateX(-50%);
    width: calc(11 * var(--mm)); height: auto;
    opacity: .34;
}

/* Na demou umesto potpisa ide upozorenje, i ono nije tiho. */
.list-noga-demo {
    position: absolute;
    left: calc(15 * var(--mm)); right: calc(15 * var(--mm)); bottom: calc(5.5 * var(--mm));
    text-align: center;
    font-size: calc(7 * var(--pt)); line-height: calc(3.5 * var(--mm));
    font-weight: 700;
    color: var(--crna);
}

/* Vodeni žig demo naloga.

   Stoji IZNAD sadržaja (`z-index`), ne ispod: ispod bi ga progutala prva bela
   popuna — zaglavlje tabele, zebra redovi — a i smisao je da dokument bude
   neupotrebljiv kao pravi, ne samo obeležen.

   `pointer-events: none` da ne hvata klikove, `user-select: none` da se ne
   pokupi kad se list kopira.

   `print-color-adjust` jer se ovaj pregled štampa: bez toga pregledač ume da
   izbaci svetle podloge i tekstove, pa bi se sa štampe žig izgubio — a štampa
   je baš put kojim bi neko probao da demo dokument pretvori u pravi. */
.list-zig {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: rotate(-38deg);

    font-size: calc(26 * var(--mm));
    font-weight: 800;
    letter-spacing: calc(1 * var(--mm));
    color: rgba(61, 79, 224, .13);
    white-space: nowrap;

    z-index: 5;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* Na telefonu je list od 210mm sitan za čitanje, ali je i dalje ceo vidljiv —
   to je i poenta pregleda. Ko hoće da čita, otvara PDF. */
@media print {
    .list-omot { max-width: none; }
    .list { border: 0; border-radius: 0; box-shadow: none; }
}

/* ---------------- udeo u zbiru ----------------
   Koliko je od ukupnog otišlo na jednu kategoriju. Traka je ista ona iz
   limita — isti oblik za isto pitanje („koliki deo od celine"). */

.udeo + .udeo { margin-top: var(--r3); }
.udeo-red {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3);
    font-size: var(--t-sm);
    margin-bottom: 5px;
}
.udeo-red b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.udeo .limit-traka { height: 6px; }
.udeo .limit-popuna { background: var(--brend-500); }

/* ---------------- navigacija bez osvežavanja ----------------
   Kad strana ne treperi, korisnik nema po čemu da zna da se nešto dešava.
   Tanka traka na vrhu je jedini znak — i mora biti iznad svega, jer se
   pojavljuje i dok je otvoren modal. */

.ucitava::after {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: 3px;
    background: linear-gradient(90deg, var(--brend-500), var(--brend-600));
    transform-origin: left;
    animation: ucitavanje 1.2s ease-in-out infinite;
}
@keyframes ucitavanje {
    0%   { transform: scaleX(0); opacity: 1; }
    60%  { transform: scaleX(.85); }
    100% { transform: scaleX(1); opacity: .35; }
}

/* Klik koji je već poslat ne sme da deluje kao da se ništa nije desilo. */
.ucitava a, .ucitava button { cursor: progress; }

/* ============================================================
   Biblioteke prepravljene u naš dizajn

   Tom Select i flatpickr dolaze sa svojim izgledom, koji sa ovim skupom
   tokena nema veze — pola sivih tonova, drugi radijusi, druga senka. Ovde se
   svode na iste vrednosti koje koriste `.unos` i `.izbor`, pa polje sa
   pretragom izgleda kao svako drugo polje, i u svetloj i u tamnoj temi.

   Njihov CSS je uvezen PRE ovog fajla (vidi `partials/glava`), pa je dovoljna
   ista specifičnost — bez ijednog `!important`.
   ============================================================ */

/* ---------------- pretraživi select (Tom Select) ---------------- */

/* Biblioteka nameće belu pozadinu pravilom specifičnosti 0,3,1:

       .ts-control, .ts-wrapper.single.input-active .ts-control { background: #fff }

   Naše `.ts-wrapper .ts-control` je 0,2,0 i gubi, pa je u TAMNOJ temi polje
   ostajalo belo — sa skoro belim tekstom preko sebe, kontrast 1,16. Zato ovde
   ista specifičnost i oba stanja (mirno i dok se kuca).

   Desni razmak za strelicu se ne postavlja `padding-right`-om: biblioteka ga
   gazi sa `!important`. Za to ima svoju promenljivu, `--ts-pr-caret`. */
.ts-wrapper {
    width: 100%;
    --ts-pr-caret: 36px;
}

/* Tom Select prepisuje klase originalnog `<select>` na SVOJ OMOT, pa omot
   dobije i klasu `izbor` — a s njom ivicu, radijus, razmak i strelicu iz
   `1-osnova.css`. Isto to nosi i `.ts-control` unutar njega, pa se na ekranu
   vidi select u selectu, sa dve strelice i duplom visinom.

   Omot je samo kontejner i mora biti go; polje je `.ts-control`. */
.ts-wrapper.izbor {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.ts-wrapper .ts-control,
.ts-wrapper.single.input-active .ts-control {
    min-height: 0;
    padding: 10px 12px;
    font-size: var(--t-md);
    /* Bez ovoga Tom Select nametne svoj `line-height: 18px` i polje ispadne 3px
       niže od `.unos` i `.izbor` pored njega — dovoljno da se u istom redu
       forme vidi da nešto ne seda. */
    line-height: var(--t-md-h);
    color: var(--n-900);
    background: var(--n-0);
    border: 1px solid var(--n-300);
    border-radius: var(--rad-sm);
    box-shadow: none;
    cursor: text;
    transition: border-color var(--brzo), box-shadow var(--brzo);
}
@media (hover: hover) {
    .ts-wrapper .ts-control:hover { border-color: var(--n-400); }
}

.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-control:focus-within {
    border-color: var(--brend-500);
    box-shadow: 0 0 0 3px var(--brend-100);
}

.ts-wrapper.disabled .ts-control { background: var(--n-50); color: var(--n-500); opacity: 1; }

/* Ista strelica kao na `.izbor` — da se dva polja jedno pored drugog ne
   razlikuju po tome koje je pretraživo. */
.ts-wrapper:not(.form-select):not(.form-control) .ts-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.ts-wrapper.single .ts-control::after { display: none; }   /* njihova strelica otpada */

.ts-control input,
/* Izabrana vrednost ostaje u JEDNOM redu, sa tri tačke.

   Biblioteka drži `.ts-control` kao `flex-wrap: wrap`, pa duga vrednost
   („6201 — Računarsko programiranje") prelomi polje u dva reda i ono naraste
   na 85px — dvostruko od polja pored njega. Običan `<select>` isti taj tekst
   preseče, pa se i ovaj mora tako ponašati. */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }

.ts-control .item {
    line-height: var(--t-md-h);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ts-control input { color: var(--n-900); font-size: var(--t-md); }
.ts-control input::placeholder { color: var(--n-400); }

.ts-dropdown {
    margin-top: 4px;
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    box-shadow: var(--senka-3);
    color: var(--n-700);
    font-size: var(--t-sm);
}
/* Lista naziva stavke stoji u `body` (vidi `moduli/faktura`), jer bi je omot
   tabele sekao. Tom Select joj da širinu polja, a to polje je u uskoj koloni
   tabele (izmereno 184px na 1280px), pa su nazivi bili sečeni na „Bezbe…" —
   po tome se ne bira. Lista sme da bude šira od polja; ide udesno, a na uskom
   ekranu koliko stane.

   Od 640px naniže stavke nisu tabela nego kartice (vidi niže): polje naziva
   tada ide preko cele kartice i uska kolona ne postoji, pa ni razlog za ovo
   proširenje. Lista je uz to bežala udesno — kartica polje uvlači, pa je od
   njegove leve ivice (42px) do desne ivice liste bilo 362px na ekranu od
   360px: desna ivica se sekla, a lista je delovala kao da je pomerena.
   Ispod tog praga lista je široka koliko i polje, poravnata sa njim. */
@media (min-width: 641px) {
    body > .ts-dropdown { min-width: min(320px, calc(100vw - 32px)); }
}
/* Lista iz `body` mora preko modala (z-index 80): u modalu za uplatu je
   inače stajala ispod podnožja modala, sečena telom koje skroluje. */
body > .ts-dropdown { z-index: 90; }

/* Izabran naziv u tabeli stavki ne sme da širi kolonu. Tabela deli širinu po
   sadržaju ćelija, a izabrana stavka je jedan red bez preloma, pa je dug naziv
   razvlačio kolonu Opis do svoje dužine (izmereno: 361px umesto 200px), stiskao
   ostale kolone i pravio horizontalni skrol u kartici. Sa ograničenjem omot
   tabeli ne prijavljuje svoju širinu, kolona ostaje na `min-width` zaglavlja,
   a naziv se seče sa „…" kao u svakom polju; ceo se vidi u listi. */
[data-uloga="stavke"] .ts-wrapper { contain: inline-size; }

/* Izbor jedinice mere u istoj tabeli: opšti `.izbor` drži 36px desno za
   strelicu i 12px levo, pa je u koloni od 74px izabrana jedinica imala 5px i
   nije se videla. Ovde je razmak uz strelicu manji, a kolona je široka 108px
   (`min-width` u zaglavlju; izbor dobija 84px): „mesec", najduža
   jedinica, traži 42px.

   SAMO `<select>`: Tom Select svom omotu prepiše klasu `izbor` sa polja za
   naziv, pa je opšte `.izbor` ovde hvatalo i taj omot i davalo mu razmak od
   10px levo i 28px desno — polje za naziv je stajalo uvučeno u ćeliji, uže
   od svog opisa ispod (izmereno 269px u ćeliji od 307px). */
[data-uloga="stavke"] select.izbor { padding-left: 10px; padding-right: 28px; background-position: right 8px center; }

/* ---------------- stavke na telefonu: kartice, ne tabela ----------------

   Sedam kolona u 390px ne staje: tabela je skrolovala u stranu, a polja za
   iznos, JM i dugme za brisanje bila su van ekrana dok se ne povuče. Ispod
   640px svaki red postaje kartica sa svojom mrežom: gore redni broj i dugme
   za uklanjanje, pa naziv preko cele širine, pa količina, JM i cena u jednom
   redu, pa popust i iznos. Oznake kolona nose same ćelije (`data-labela`),
   jer zaglavlja više nema.

   Bez JavaScripta radi isto: mreža je CSS, redni broj je brojač, a nov red
   dodat skriptom je kopija postojećeg i nosi iste oznake. */
@media (max-width: 640px) {
    [data-uloga="stavke"] { display: block; }
    [data-uloga="stavke"] thead { display: none; }
    [data-uloga="stavke"] tbody {
        display: flex; flex-direction: column; gap: var(--r3);
        padding: var(--r3) var(--r4) 0;
        counter-reset: stavka;
    }

    [data-uloga="stavke"] tbody tr,
    [data-uloga="stavke"] tbody tr:nth-child(even) {
        display: grid;
        /* Kolone nisu jednake: količina je kratka („1", „12"), a cena nosi
           „1.234.567,89" (izmereno: traži 104px, u trećini od 97px bila je
           odsečena). Zato cena dobija najviše, količina najmanje. */
        grid-template-columns: minmax(0, .85fr) minmax(0, .9fr) minmax(0, 1.25fr);
        grid-template-areas:
            "broj   broj    ukloni"
            "naziv  naziv   naziv"
            "kol    jm      cena"
            "popust iznos   iznos";
        gap: 10px 8px;
        padding: 12px;
        background: var(--n-0);
        border: 1px solid var(--n-200);
        border-radius: var(--rad);
        counter-increment: stavka;
    }
    @media (hover: hover) {
        [data-uloga="stavke"] tbody tr:hover {
            display: grid;
            /* Kolone nisu jednake: količina je kratka („1", „12"), a cena nosi
               „1.234.567,89" (izmereno: traži 104px, u trećini od 97px bila je
               odsečena). Zato cena dobija najviše, količina najmanje. */
            grid-template-columns: minmax(0, .85fr) minmax(0, .9fr) minmax(0, 1.25fr);
            grid-template-areas:
                "broj   broj    ukloni"
                "naziv  naziv   naziv"
                "kol    jm      cena"
                "popust iznos   iznos";
            gap: 10px 8px;
            padding: 12px;
            background: var(--n-0);
            border: 1px solid var(--n-200);
            border-radius: var(--rad);
            counter-increment: stavka;
        }
    }

    [data-uloga="stavke"] tbody tr::before {
        content: "Stavka " counter(stavka);
        grid-area: broj;
        align-self: center;
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--n-500);
    }

    [data-uloga="stavke"] tbody td { display: block; padding: 0; border: 0; background: transparent; }

    [data-uloga="stavke"] td:nth-child(1) { grid-area: naziv; }
    [data-uloga="stavke"] td:nth-child(2) { grid-area: jm; }
    [data-uloga="stavke"] td:nth-child(3) { grid-area: kol; }
    [data-uloga="stavke"] td:nth-child(4) { grid-area: cena; }
    [data-uloga="stavke"] td:nth-child(5) { grid-area: popust; }
    [data-uloga="stavke"] td:nth-child(6) { grid-area: iznos; }

    /* Oznaka iznad polja, da se zna šta je koji broj kad zaglavlja nema. */
    [data-uloga="stavke"] td[data-labela]::before {
        content: attr(data-labela);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--n-500);
        white-space: nowrap;
    }

    /* Iznos reda: oznaka levo, broj desno, u ravni sa poljem za popust. */
    [data-uloga="stavke"] td[data-uloga="iznos"] {
        display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
        align-self: end;
        padding-bottom: 10px;
        font-size: var(--t-lg);
        font-variant-numeric: tabular-nums;
    }
    [data-uloga="stavke"] td[data-uloga="iznos"]::before { margin-bottom: 0; }

    /* Dugme za uklanjanje je u tabeli lepljiva kolona (50px, uz desnu ivicu,
       sa pozadinom reda); u kartici je običan gornji desni ugao. */
    [data-uloga="stavke"] td.kolona-lepljiva {
        grid-area: ukloni;
        position: static;
        width: auto; min-width: 0;
        justify-self: end;
    }

    /* Polja u uskim kolonama: tesniji unutrašnji razmak, da „1.234.567,89"
       ne bude odsečeno u koloni od ~100px. */
    [data-uloga="stavke"] .unos-novac { padding-left: 8px; padding-right: 8px; }
    [data-uloga="stavke"] .ts-wrapper { contain: none; }

    /* Dugme za nov red preko cele širine, kao i kartice iznad njega. */
    [data-uloga="dodaj-red"] { width: 100%; }
}
.ts-dropdown .option { padding: 9px 12px; border-radius: 6px; margin: 2px 4px; }
.ts-dropdown .active { background: var(--n-50); color: var(--n-900); }
@media (hover: hover) {
    .ts-dropdown .option:hover { background: var(--n-50); color: var(--n-900); }
}
.ts-dropdown .selected,
.ts-dropdown .active.selected { background: var(--brend-50); color: var(--brend-700); }
.ts-dropdown .no-results,
.ts-dropdown .spinner { padding: 12px; color: var(--n-500); }

/* Red u listi nosi naziv i sporedni podatak (broj fakture, PIB, iznos) — po
   njemu se bira jednako često kao po nazivu. */
.ts-red { display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3); }
.ts-naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-dodatak { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--t-xs); color: var(--n-500); font-variant-numeric: tabular-nums; }
.ts-dropdown .active .ts-dodatak { color: var(--n-700); }
/* Na telefonu je lista široka koliko i polje (vidi `body > .ts-dropdown`), pa
   naziv i drugi red u istom redu jedno drugom otimaju mesto: od naziva ostane
   „Marketing na…". Zato se tu slažu jedan ispod drugog i naziv dobija punu
   širinu — isto kao što se na telefonu i tabele slažu u kartice. */
@media (max-width: 640px) {
    .ts-red { flex-direction: column; align-items: flex-start; gap: 2px; }
    .ts-dodatak { max-width: 100%; }
}

/* ---------------- birač datuma (flatpickr) ---------------- */

.flatpickr-calendar {
    background: var(--n-0);
    border: 1px solid var(--n-200);
    border-radius: var(--rad);
    box-shadow: var(--senka-4);
    font-family: var(--font);
    font-size: var(--t-sm);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months { padding-top: 6px; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year { color: var(--n-900); fill: var(--n-900); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--n-500); }
@media (hover: hover) {
    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--brend-600); }
}

.flatpickr-weekday { color: var(--n-500); font-size: var(--t-xs); font-weight: 600; }
.flatpickr-day { color: var(--n-700); border-radius: var(--rad-sm); border: 0; }
@media (hover: hover) {
    .flatpickr-day:hover { background: var(--n-50); color: var(--n-900); }
}
.flatpickr-day.today { border: 1px solid var(--brend-300); color: var(--brend-700); }
.flatpickr-day.selected { background: var(--brend-puna); border-color: var(--brend-puna); color: var(--na-boji); }
@media (hover: hover) {
    .flatpickr-day.selected:hover { background: var(--brend-puna); border-color: var(--brend-puna); color: var(--na-boji); }
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--n-400); }

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--n-900); }
.flatpickr-time input:focus { background: var(--n-50); }
@media (hover: hover) {
    .flatpickr-time input:hover { background: var(--n-50); }
}

/* Numerička polja u zaglavlju (godina) i vremenu nasleđuju belu podlogu —
   u tamnoj temi bi ostala bela mrlja u tamnom kalendaru. */
.flatpickr-calendar,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
.flatpickr-time { background: var(--n-0); }
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--n-0); color: var(--n-900); }
@media (hover: hover) {
    .numInputWrapper:hover { background: var(--n-50); }
}

/* ---------------- kalendar sastanaka ---------------- */

/* Sedam kolona fiksno, ne `auto-fit`: nedelja ima sedam dana i kad su neki
   prazni, a `auto-fit` bi prazan red skupio i pomerio dane pod pogrešan
   naziv. `minmax(0, 1fr)` da dugačak naslov ne razvuče kolonu. */
.kal-mreza {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--n-200);
    border: 1px solid var(--n-200);
    border-radius: var(--rad-sm);
    overflow: hidden;
}

.kal-zaglavlje {
    padding: 8px;
    background: var(--n-50);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--n-500);
    text-align: center;
}

.kal-dan {
    display: flex; flex-direction: column; gap: 3px;
    min-height: 96px;
    padding: 6px;
    background: var(--n-0);
}
.kal-dan.van-meseca { background: var(--n-25); }
/* `--n-400` je po tokenima UKRAS i ne sme da nosi tekst: broj dana na njemu
   daje 2,4:1 u svetloj temi. `--n-500` je najtiši ton koji još prolazi
   (4,8:1), a dan iz susednog meseca i dalje ostaje vidno prigušen. */
.kal-dan.van-meseca .kal-broj { color: var(--n-500); }

/* Današnji dan nosi tačku, ne punu podlogu: podloga se tuče sa bojama samih
   sastanaka i onda se ne vidi ni jedno ni drugo. */
.kal-dan.danas .kal-broj {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    background: var(--brend-puna);
    color: var(--na-boji);
    border-radius: 50%;
}

.kal-broj { font-size: var(--t-xs); font-weight: 600; color: var(--n-700); }

.kal-stavka {
    display: flex; align-items: baseline; gap: 4px;
    padding: 3px 6px;
    font-size: var(--t-xs);
    line-height: 1.35;
    border-radius: 5px;
    border-left: 3px solid var(--info);
    background: var(--info-bg);
    color: var(--n-900);
    overflow: hidden;
}
@media (hover: hover) {
    .kal-stavka:hover { text-decoration: none; filter: brightness(.97); }
}
.kal-stavka.odrzan  { border-left-color: var(--uspeh);  background: var(--uspeh-bg); }
.kal-stavka.otkazan { border-left-color: var(--greska); background: var(--greska-bg); }
.kal-stavka.otkazan .kal-naslov { text-decoration: line-through; color: var(--n-500); }

.kal-vreme { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.kal-naslov { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kal-jos { font-size: var(--t-xs); color: var(--n-500); padding: 0 6px; }
@media (hover: hover) {
    .kal-jos:hover { color: var(--brend-600); }
}

.kal-tacka { width: 10px; height: 10px; border-radius: 3px; background: var(--info); }
.kal-tacka.odrzan  { background: var(--uspeh); }
.kal-tacka.otkazan { background: var(--greska); }

/* Na telefonu mreža od sedam kolona daje ćelije od 40px — u njima se ne vidi
   ništa osim broja. Tada se kalendar pretvara u spisak dana koji nešto imaju. */
@media (max-width: 720px) {
    .kal-dan { min-height: 64px; }
    .kal-stavka .kal-naslov { display: none; }
    .kal-stavka { justify-content: center; }
}

/* ---------------- komandna paleta ---------------- */

/* Paleta je viša od običnog modala i ne raste sa sadržajem: spisak rezultata
   se menja pri svakom slovu, pa bi kutija koja se skuplja i širi „poskakivala"
   pod kursorom. Fiksna visina, skrol unutra. */
.modal.paleta { max-width: 620px; }

.paleta .modal-glava { gap: 10px; padding: var(--r4) var(--r5); }
.paleta .modal-glava .ikona { color: var(--n-400); flex: none; }

.paleta-polje {
    border: 0; padding: 0; background: none;
    font-size: var(--t-lg);
}
.paleta-polje:focus { box-shadow: none; border: 0; }

.paleta-stanje { flex: none; }
.paleta-telo { padding: 6px; min-height: 220px; max-height: 52vh; }

.paleta-grupa {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 10px 6px;
    font-size: var(--t-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--n-500);
}
.paleta-grupa .ikona { width: 14px; height: 14px; }

.paleta-red {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3);
    padding: 9px 10px;
    border-radius: var(--rad-sm);
    color: var(--n-700);
}
@media (hover: hover) {
    .paleta-red:hover { text-decoration: none; }
}
.paleta-red.izabran { background: var(--brend-50); color: var(--brend-700); }

.paleta-naslov { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-opis {
    flex: none; max-width: 55%;
    font-size: var(--t-xs); color: var(--n-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paleta-red.izabran .paleta-opis { color: var(--brend-600); }

/* ---------------- izbor šablona dokumenta ---------------- */

/* Izgled se bira okom, ne iz padajuće liste: naziv „Blok" nikome ništa ne
   znači dok ga ne vidi. Zato mreža sa pregledom, a `<input type=radio>` je i
   dalje ispod — forma radi i bez JavaScripta. */
.sabloni-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--r4);
}

.sablon {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--n-0);
    border: 2px solid var(--n-200);
    border-radius: var(--rad);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--brzo), box-shadow var(--brzo), transform var(--brzo);
}
@media (hover: hover) {
    .sablon:hover { border-color: var(--brend-300); transform: translateY(-2px); box-shadow: var(--senka-3); }
}
.sablon:focus-within { border-color: var(--brend-600); box-shadow: 0 0 0 3px var(--brend-50); }

.sablon input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }

.sablon.izabran { border-color: var(--brend-600); box-shadow: var(--senka-2); }

/* Kvačica na izabranom: bez nje se izbor vidi samo po ivici, a ivica se na
   uskom ekranu lako pobrka sa hover stanjem. */
.sablon.izabran::after {
    content: '';
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--brend-puna) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
}

.sablon.zakljucan { opacity: .55; cursor: not-allowed; }
@media (hover: hover) {
    .sablon.zakljucan:hover { transform: none; border-color: var(--n-200); box-shadow: none; }
}

/* Pregled stoji na sivoj podlozi da se bela „strana" vidi kao list papira —
   na beloj kartici bi se stopila sa njom. */
.sablon-pregled {
    display: block;
    padding: var(--r4) var(--r4) 0;
    background: var(--n-50);
}
.sablon-pregled > svg {
    display: block; width: 100%; height: auto;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -1px 6px rgba(16, 24, 40, .10);
}

/* Pravi list u pregledu.

   `.list-omot` je CSS kontejner (`container-type: inline-size`), pa se ceo
   papir — sve mere su u `--mm` izvedenim iz `cqw` — sam skalira na širinu
   kartice. Nema `transform: scale()` ni posebnih mera za pregled: isti kod
   crta i pun list na strani dokumenta i ovaj umanjeni.

   Vidi se samo gornji deo: šablon se prepoznaje po zaglavlju i prvih par
   redova tabele, a cela A4 strana u kartici bila bi nečitljiva mrlja. */
.sablon-papir {
    display: block;
    /* Odnos prave strane (210×297), da papir tačno popuni karticu — inače pri
       dnu ostane prazan pojas tamo gde dokument ima malo stavki. */
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -1px 6px rgba(16, 24, 40, .10);
    /* pregled je slika, ne dokument — klik bira šablon, ne tekst u papiru */
    pointer-events: none;
    user-select: none;
}

/* U kartici papir nema svoju ivicu ni senku — okvir je sama kartica šablona.
   Minimalna visina A4 se NE dira: bez nje bi se papir skupio na visinu sadržaja
   i faktura sa jednom stavkom bi u kartici bila upola niža od one sa deset. */
.sablon-papir .list {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sablon-telo { padding: var(--r3) var(--r4) var(--r4); }
.sablon-naziv {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; color: var(--n-900);
}
.sablon-naziv .ikona { color: var(--n-400); }
.sablon-opis { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--n-500); line-height: 1.5; }

/* Ista kartica na vlasničkom ekranu nosi prekidač umesto izbora, pa se ne
   klikće cela: bez ovoga bi kursor i podizanje na prelaz obećavali klik koji
   ništa ne radi. */
.sablon-vlasnik { cursor: default; }
@media (hover: hover) {
    .sablon-vlasnik:hover { transform: none; box-shadow: none; border-color: var(--n-200); }
    .sablon-vlasnik.izabran:hover { border-color: var(--brend-600); box-shadow: var(--senka-2); }
}
.sablon-upotreba {
    margin-top: 8px;
    font-size: var(--t-xs); color: var(--n-500);
}
.sablon-uvek {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--n-100);
    font-size: var(--t-xs); color: var(--n-500);
}
.sablon-uvek .ikona { color: var(--n-400); flex: none; }

/* ---------------- logo po temi ---------------- */

/* Novi logo ima tamni naziv na providnoj podlozi i na tamnoj temi bi nestao.
   Obe varijante se ispisuju (vidi `partials/logo`), a ovde se bira prava.

   `display` a ne `opacity`: providna slika i dalje zauzima mesto, pa bi dve
   jedna preko druge udvostručile visinu zaglavlja.

   Podrazumevano se vidi tamna verzija logoa — ona je za SVETLU temu. Bez
   izabrane teme aplikacija je svetla (vidi `color-scheme` u 1-osnova.css), pa
   je to i ispravno polazno stanje. */
.logo-tema-tamna { display: none; }

:root[data-tema="tamna"] .logo-tema-svetla { display: none; }
:root[data-tema="tamna"] .logo-tema-tamna { display: block; }

/* ---------------- list dokumenta: šabloni ---------------- */

/* Deset šablona iz `SabloniDokumenta` — isti oni koje crta i `PdfFakture`.
   Boja akcenta stiže kao inline `--brend` sa samog lista; ovde su raspored
   zaglavlja, blokovi strana, stil tabele i izgled ukupnog iznosa.

   Sve mere su u `--mm`, kao i ostatak lista, pa ostaju tačne bez obzira na
   to koliko je pregled skaliran. */

/* --- zaglavlje: traka --- */

/* Obojena traka preko vrha strane. `padding-top` se povećava za visinu trake
   da naziv firme ne završi ispod nje — isto što PDF radi pomeranjem Y-a. */
.list.zaglavlje-traka { padding-top: calc(23 * var(--mm)); }
.list.zaglavlje-traka::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(8 * var(--mm));
    background: var(--brend);
    border-radius: var(--rad) var(--rad) 0 0;
}

/* --- zaglavlje: centar --- */

/* Kao memorandum: logo i firma centrirani, naziv dokumenta ispod crte. */
.list.zaglavlje-centar .list-vrh { display: block; text-align: center; }
.list.zaglavlje-centar .list-logo { margin: 0 auto calc(3 * var(--mm)); }
.list.zaglavlje-centar .list-naslov { text-align: center; margin-top: calc(4 * var(--mm)); }
.list.zaglavlje-centar .list-crta { border-top-color: var(--brend); }
.list.zaglavlje-centar .list-tip,
.list.zaglavlje-centar .list-broj { display: inline; }
.list.zaglavlje-centar .list-broj::before { content: '  '; }

/* --- zaglavlje: blok --- */

/* Naziv dokumenta u punom pravougaoniku, belim slovima. Broj se u gomili
   papira najbrže nalazi upravo tako. */
.list.zaglavlje-blok .list-naslov {
    background: var(--brend);
    padding: calc(3 * var(--mm)) calc(4 * var(--mm));
    border-radius: calc(1.5 * var(--mm));
}
.list.zaglavlje-blok .list-tip,
.list.zaglavlje-blok .list-broj { color: #fff; }
.list.zaglavlje-blok.storniran .list-naslov { background: #B42318; }

/* --- zaglavlje: naslov --- */

/* Obrnuto od „Klasika": naziv dokumenta levo i krupno, izdavalac desno. Prvo
   se vidi ŠTA je papir, pa čiji je. `row-reverse` a ne izmenjen HTML — isti
   podaci istim redom, samo druga strana. */
.list.zaglavlje-naslov .list-vrh { flex-direction: row-reverse; }
.list.zaglavlje-naslov .list-naslov { width: auto; flex: 1; min-width: 0; text-align: left; }
.list.zaglavlje-naslov .list-izdavalac { flex: none; width: calc(80 * var(--mm)); text-align: right; }
.list.zaglavlje-naslov .list-logo { margin-left: auto; display: block; }
.list.zaglavlje-naslov .list-tip {
    font-size: calc(26 * var(--pt));
    line-height: calc(12 * var(--mm));
    color: var(--brend);
}
.list.zaglavlje-naslov.storniran .list-tip { color: #B42318; }

/* --- zaglavlje: panel --- */

/* Puna obojena kapa preko vrha, u njoj beo naziv dokumenta levo i broj desno.
   Kapa ide od ivice do ivice papira, pa je `.list-naslov` izvađen iz toka i
   razvučen; sadržaj počinje ispod nje. Traka ispod kape je ista boja
   razblažena belinom — bez nje strana izgleda presečena na pola. */
.list.zaglavlje-panel { padding-top: calc(42 * var(--mm)); }
.list.zaglavlje-panel .list-naslov {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(4 * var(--mm));
    height: calc(32 * var(--mm));
    padding: calc(8 * var(--mm)) calc(15 * var(--mm)) 0;
    box-sizing: border-box;
    text-align: left;
    background: var(--brend);
    border-radius: var(--rad) var(--rad) 0 0;
    border-bottom: calc(2 * var(--mm)) solid rgb(255 255 255 / .45);
}
.list.zaglavlje-panel .list-tip {
    font-size: calc(26 * var(--pt));
    line-height: calc(14 * var(--mm));
    color: #fff;
}
.list.zaglavlje-panel .list-broj { color: #fff; font-size: calc(13 * var(--pt)); }
.list.zaglavlje-panel .list-storno { color: #fff; }
.list.zaglavlje-panel.storniran .list-naslov { background: #B42318; }
.list.zaglavlje-panel.storniran .list-tip { color: #fff; }

/* --- strane: kapice --- */

/* Natpis bloka na punoj boji, belim slovima — „Kupac" i „Podaci o dokumentu"
   se razdvajaju okom pre nego što se pročita ijedno slovo. */
.list.strane-kapice .list-strane .list-labela {
    background: var(--brend);
    color: #fff;
    padding: calc(.75 * var(--mm)) calc(2 * var(--mm));
    margin-bottom: calc(1.5 * var(--mm));
}

/* --- tabela --- */

.list.tabela-zebra .list-tabela tbody tr:nth-child(even) { background: #F8F9FB; }
.list.tabela-linije .list-tabela tbody tr { border-bottom: .2mm solid var(--ivica); }

/* „Mirno" gasi i zebru i sivo zaglavlje: na crno-beloj štampi pruge samo
   prljaju stranu. */
.list.tabela-minimal .list-tabela thead th { background: #F8F9FB; }
.list.tabela-minimal .list-tabela tbody tr { background: none; }

/* „Puna" boji glavu tabele akcentom; natpisi tada idu belo, jer se crno na
   tamnoj podlozi ne čita. */
.list.tabela-puna .list-tabela thead th { background: var(--brend); color: #fff; }

/* --- suma: kutija --- */

/* Ukupan iznos u obojenom polju. Natpis ostaje levo od polja i crn: na
   svetlijim akcentima se beo tekst preko cele širine teže čita nego sam broj. */
.list.suma-kutija .list-suma-crta { display: none; }
.list.suma-kutija .list-suma-red.jako { align-items: stretch; }
.list.suma-kutija .list-suma-red.jako .list-suma-labela {
    padding-right: calc(3 * var(--mm));
    line-height: calc(10 * var(--mm));
}
.list.suma-kutija .list-suma-red.jako .list-suma-vrednost {
    width: calc(50 * var(--mm));
    background: var(--brend);
    color: #fff;
    padding: 0 calc(2 * var(--mm));
    box-sizing: border-box;
    line-height: calc(10 * var(--mm));
}

/* ---------------- list dokumenta: IPS QR ---------------- */

/* Podaci za uplatu levo, QR uz desnu ivicu — isti raspored kao u PDF-u. */
.list-uplata {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(6 * var(--mm));
}

.list-qr { flex: none; text-align: center; }

/* 30mm, koliko i u PDF-u (`$strana = 30.0`). */
.list-qr svg {
    display: block;
    width: calc(30 * var(--mm));
    height: calc(30 * var(--mm));
}

.list-qr-tekst {
    margin-top: calc(1 * var(--mm));
    font-size: calc(7 * var(--pt));
    color: var(--siva);
}

/* Isti mirniji raspored kao u PDF-u; ekranski prikaz se i dalje prelama po širini. */
.list-logo { max-height: calc(14 * var(--mm)); object-fit: contain; object-position: left center; }
.list-crta { position: relative; }
.list-crta::before { content: ""; position: absolute; top: -.3mm; left: 0; width: calc(24 * var(--mm)); border-top: .6mm solid var(--brend); }
.list-kupac { box-sizing: border-box; width: calc(98 * var(--mm)); padding: calc(4 * var(--mm)); background: #F8F9FC; }
.list-meta { padding-top: calc(1.5 * var(--mm)); }
.list-meta-labela { width: calc(34 * var(--mm)); text-align: left; }
.list-meta-vrednost { width: calc(41 * var(--mm)); overflow-wrap: anywhere; }
.list-tabela :is(th,td) { border: 0; border-bottom: .2mm solid var(--ivica); padding-block: calc(2 * var(--mm)); line-height: calc(4.8 * var(--mm)); height: auto; vertical-align: top; overflow-wrap: anywhere; }
.list-tabela th { height: calc(9 * var(--mm)); box-sizing: border-box; vertical-align: middle; background: #F3F5F9; }
.list-tabela .k-rb { width: calc(7 * var(--mm)); }
.list-tabela .k-opis { width: calc(66 * var(--mm)); }
.list-tabela .k-jm { width: calc(15 * var(--mm)); }
.list-tabela .k-kol { width: calc(18 * var(--mm)); }
.list-tabela .k-cena { width: calc(27 * var(--mm)); }
.list-tabela .k-pop { width: calc(15 * var(--mm)); }
.list-tabela .k-iznos { width: calc(32 * var(--mm)); }
.list-tabela td.k-opis { padding-block: calc(2 * var(--mm)); }
.list-suma { width: calc(105 * var(--mm)); max-width: 100%; margin-left: auto; }
.list-suma-red { justify-content: space-between; gap: calc(3 * var(--mm)); }
.list-suma-labela { width: auto; text-align: left; }
.list-suma-vrednost { width: auto; overflow-wrap: anywhere; }
.list-suma-crta { display: none; }
.list-suma-red.jako { min-height: calc(13 * var(--mm)); align-items: center; box-sizing: border-box; padding: calc(2 * var(--mm)) calc(3 * var(--mm)); margin-block: calc(2 * var(--mm)); background: #F3F5FF; }
.list-suma-red.jako .list-suma-labela { font-size: calc(9 * var(--pt)); }
.list-suma-red.jako .list-suma-vrednost { font-size: calc(15 * var(--pt)); line-height: 1.4; }
.list.suma-kutija .list-suma-red.jako { align-items: center; background: var(--brend); color: #fff; }
.list.suma-kutija .list-suma-red.jako :is(.list-suma-labela,.list-suma-vrednost) { width: auto; line-height: 1.4; padding: 0; background: none; color: #fff; }
.list-kurs, .list-slovima { max-width: calc(105 * var(--mm)); margin-left: auto; overflow-wrap: anywhere; }
.list.zaglavlje-panel .list-naslov { top: calc(10 * var(--mm)); left: calc(15 * var(--mm)); right: calc(15 * var(--mm)); height: auto; min-height: calc(26 * var(--mm)); padding: calc(2 * var(--mm)); border-radius: 0; border: 0; }
.list.zaglavlje-panel .list-tip { font-size: calc(22 * var(--pt)); }
.list.zaglavlje-traka::before { left: calc(15 * var(--mm)); right: calc(15 * var(--mm)); top: calc(10 * var(--mm)); height: calc(2 * var(--mm)); border-radius: 0; }
@container (max-width: 620px) {
    .dokument-pregled .list .list-kupac { padding: 14px; }
    .dokument-pregled .list .list-suma { width: 100%; }
    .dokument-pregled .list :is(.list-kurs,.list-slovima) { max-width: none; }
    .dokument-pregled .list .list-suma-red.jako { padding: 12px; }
    .dokument-pregled .list .list-suma-red.jako .list-suma-labela { font-size: 12px; }
    .dokument-pregled .list .list-suma-red.jako .list-suma-vrednost { font-size: 22px; }
}
@media print {
    .list { border: 0; border-radius: 0; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .list-tabela thead { display: table-header-group; }
    .list-tabela tr, .list-kupac, .list-meta, .list-suma, .list-uplata, .list-potpis { break-inside: avoid; }
    .list-tabela, .list-tabela tbody { break-inside: auto; }
}