/* ============================================================
   FAKTO — osnova: tokeni, reset, tipografija, forme
   Vidi PLAN/04-DIZAJN-SISTEM.md. Menjaj vrednosti ovde, ne po fajlovima.
   ============================================================ */

/* ---- fontovi ----------------------------------------------
   Naš CSP je `font-src 'self' data:` — Google/Bunny fontovi bi bili
   BLOKIRANI. Fontovi moraju biti skinuti u public/assets/fonts/.
   Dok ih nema, radi sistemski stek (izgleda dobro i učitava se odmah).

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-400.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-500.woff2') format('woff2');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-600.woff2') format('woff2');
    font-weight: 600; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-700.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}
------------------------------------------------------------ */

/* Geist (Vercel, SIL OFL 1.1), promenljive težine, self-host. Koristi ga
   javni sajt (`body.sajt` postavlja `--font`); panel ostaje na sistemskom
   steku dok se ne odluči drugačije. `swap`: tekst se vidi odmah, font stigne. */
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ============================================================
   Boje: svetla i tamna tema iz jednog izvora

   Svaki token se piše jednom, kao `light-dark(svetla, tamna)`. Koja se
   vrednost uzima odlučuje `color-scheme` — a njega postavlja `data-tema`
   na <html>:

       bez atributa       svetla (podrazumevano)
       data-tema="svetla" svetla, ali izabrana svesno
       data-tema="tamna"  tamna

   Sistemsko podešavanje se NE gleda — tema je isključivo korisnikov izbor.
   Zato je `color-scheme` na `:root` samo `light`, a ne `light dark`: da tu
   piše `light dark`, `light-dark()` bi na tamnom operativnom sistemu vraćao
   tamne vrednosti i bez ijednog klika.

   Atribut upisuje PHP iz kolačića (vidi partials/glava i helper `tema()`),
   pa je tema tu pre prvog piksela — nema treperenja belog na tamnoj temi.
   To je i jedini način koji nam preostaje: CSP je `script-src 'self'`, pa
   inline skript u <head> ne bi ni bio izvršen.

   `color-scheme` uz to prebacuje i ono što ne crtamo mi — skrolbarove,
   sistemske padajuće liste i okvire polja.
   ============================================================ */

:root {
    color-scheme: light;

    /* --- brend (indigo) ---
       Na tamnoj podlozi indigo mora da posvetli da bi se link uopšte
       pročitao; zato brend-600/700 idu naviše, a ne naniže. */
    --brend-50:  light-dark(#EEF1FF, #1B2140);
    --brend-100: light-dark(#E0E5FF, #232B54);
    --brend-200: light-dark(#C4CDFF, #2E3870);
    --brend-300: light-dark(#A0AEFA, #5566C4);
    --brend-500: light-dark(#5B6BF0, #8492FF);
    --brend-600: light-dark(#3D4FE0, #97A4FF);
    --brend-700: light-dark(#3140C4, #B4BDFF);
    --brend-800: light-dark(#27339E, #CBD1FF);

    /* Ovo je jedina „brend" boja koja u tamnoj temi NE sme da posvetli:
       koristi se kao podloga za belo slovo (bočni meni vlasnika, podnožje
       sajta, tamna sekcija). Posvetli li, beli tekst na njoj nestaje. */
    --brend-900: light-dark(#1B1F5C, #141833);

    /* Puna brend površina — dugme, aktivna stranica, aktivan filter.
       Odvojena od `--brend-600` jer nosi belo slovo, pa mora ostati zasićena
       i u tamnoj temi. Kad bi dugme koristilo posvetljeni brend-600, beli
       tekst na njemu pao bi na 2:1. */
    --brend-puna:       light-dark(#3D4FE0, #4A5AE8);
    --brend-puna-hover: light-dark(#3140C4, #5E6DF2);

    /* Slovo na punoj boji (brend, greška, akcenat). Nije `--n-0`: on je
       površina kartice i u tamnoj temi postaje taman, pa bi belo dugme
       dobilo tamno slovo na tamno-plavoj podlozi. */
    --na-boji: #FFFFFF;

    /* --- hrom panela: bočni meni i gornja traka ---

       Okvir aplikacije je do sada bio beo kao i kartice, pa se nije razlikovao
       od sadržaja — sve je bila jedna svetla ravan. Sada je puna brend podloga
       sa belim slovom.

       Boja je tamno teget, ne živi indigo. Indigo je bio previše blještav na
       celoj visini ekrana — traka te jačine vuče pogled sa sadržaja, a panel
       se gleda po ceo dan. Uzima se `--brend-900`, ista podloga koju već nosi
       vlasnički panel; nova boja se ne uvodi.

       Tamna podloga je usput rešila i računicu. Na indigu je belo davalo samo
       6,2:1, pa je svaki svetli sloj gasio kontrast i hover je morao da bude
       CRN. Ovde belo daje 15:1, pa slojevi mogu da budu svetli — kako se i
       očekuje na tamnom meniju: izabrana stavka je svetlija, ne tamnija.

       Slojevi i tekst se pišu kao providnost, ne kao zasebne nijanse: tako se
       isti kod prilagodi podlozi bez druge palete. */
    --hrom:           var(--brend-900);
    --hrom-tekst:     rgba(255, 255, 255, .78);
    --hrom-tekst-jak: #FFFFFF;
    /* UKRAS: ikone, strelice, zaključane stavke — NE tekst koji se čita.
       Ista podela kao kod `--n-400` i iz istog razloga. */
    --hrom-tekst-tih: rgba(255, 255, 255, .55);
    --hrom-sloj:      rgba(255, 255, 255, .08);
    --hrom-sloj-jak:  rgba(255, 255, 255, .16);
    --hrom-ivica:     rgba(255, 255, 255, .12);

    /* Klizač u bočnom meniju. Jači je od običnog sloja (.22 prema .16): sloj
       je podloga iza stavke i sme da bude jedva vidljiv, a klizač je ručica —
       mora da se nađe pogledom. Vidi pravilo uz `.bocni-meni` niže. */
    --hrom-skrol:     rgba(255, 255, 255, .22);
    --hrom-skrol-jak: rgba(255, 255, 255, .38);

    /* --- gornja traka: svetla, odvojena od bočnog menija ---

       Traka je bila ista tamna podloga kao meni, pa su se spajale u jedno
       veliko teget slovo „L" oko sadržaja — program je delovao tesno, a
       sadržaj kao da je u rupi. Po novom dizajnu meni ostaje tegetan (on je
       navigacija, stoji po strani), a traka postaje svetla kao i sadržaj:
       tako se ime strane i pretraga čitaju kao deo strane, a ne kao deo
       okvira.

       Tokeni su zasebni, ne izvedeni iz `--n-*`, jer traka je providna uz
       `backdrop-filter` i treba joj boja SA alfom. */
    --traka:        light-dark(rgba(255, 255, 255, .88), rgba(25, 30, 40, .88));
    --traka-ivica:  light-dark(#E1E6EE, #333C4E);
    --traka-tekst:  light-dark(#161B26, #EAEEF5);
    --traka-tih:    light-dark(#67717F, #9AA5B6);
    --traka-sloj:   light-dark(#F4F6FA, #232A38);
    --traka-sloj-jak: light-dark(#EDF0F5, #2A3242);

    /* --- pastelne pločice ispod ikona ---

       U novom dizajnu svaka kartica (brza akcija, brojka, limit) nosi ikonu u
       mekom obojenom kvadratu. Boja nije ukras: ona je drugi trag po kome se
       kartica prepoznaje pre nego što se tekst pročita — a to je upravo ono
       što treba nekom ko program koristi prvi put.

       Podloga je bleda, ikona je puna boja: tako pločica nikad ne vuče pažnju
       jače od broja pored sebe. U tamnoj temi podloga ne sme da ostane bleda
       (bila bi svetla mrlja), pa se spušta u duboku nijansu iste boje. */
    --plocica-brend-bg:  light-dark(#EEF1FF, #232B54);
    --plocica-brend:     light-dark(#3D4FE0, #A8B2FF);
    --plocica-ljubic-bg: light-dark(#F3EEFF, #2B2350);
    --plocica-ljubic:    light-dark(#7C3AED, #C4A9FF);
    --plocica-zelena-bg: light-dark(#E7F8EF, #0D2A19);
    --plocica-zelena:    light-dark(#15803D, #6EE7A0);
    --plocica-narandz-bg: light-dark(#FFF3E6, #2A2010);
    --plocica-narandz:   light-dark(#C2620A, #FCD34D);
    --plocica-crvena-bg: light-dark(#FEF0EF, #2E1614);
    --plocica-crvena:    light-dark(#D92D20, #FB8A82);
    --plocica-tirkiz-bg: light-dark(#E6FAFC, #0C2A31);
    --plocica-tirkiz:    light-dark(#0E7490, #5FD4DE);

    /* Novčanik je go broj u gornjoj traci, bez podloge (traženo) — boja mora
       da nosi i značenje (duguje se) i čitljivost na podlozi trake.

       Dve vrednosti su STEPEN ISTOG TEKSTA, ne boja i njena puna površina:
       „dospelo" mora da bude JAČE od običnog duga. Zato se u svetloj temi
       spušta (tamnija crvena na belom), a u tamnoj diže (svetlija na tamnom) —
       u oba slučaja dalje od podloge, nikad bliže.

       Ovde NE sme da stoji `--greska-puna`: to je boja PUNE POVRŠINE (dugme
       „Obriši") koja nosi belo slovo, pa u tamnoj temi namerno ostaje tamna.
       Kao boja teksta na tamnoj traci daje 3,1:1 — ispod AA, i tamnija od
       običnog duga, pa bi dospeli dug bio slabije vidljiv od nedospelog.

       Mereno prema podlozi kartice/trake: svetla 6,57 → 10,73; tamna 7,20 →
       10,21. */
    --novcanik-tekst:     light-dark(#B42318, #FB8A82);
    --novcanik-tekst-jak: light-dark(#7A1710, #FFB9B3);

    /* --- akcenat (jantar) --- */
    --akcenat-50:  light-dark(#FFF8EB, #2A2010);
    --akcenat-400: light-dark(#FBBF24, #FCD34D);
    --akcenat-500: light-dark(#F59E0B, #FBBF24);
    --akcenat-700: light-dark(#B45309, #FDE68A);

    /* --- neutralno ---
       Uloga tokena je ista u obe teme: `--n-0` je površina kartice,
       `--n-900` je glavni tekst. U tamnoj temi se okreće samo svetlina,
       ne značenje — zato nijedno pravilo u komponentama ne mora da zna
       koja je tema uključena. */
    --n-0:   light-dark(#FFFFFF, #191E28);
    --n-25:  light-dark(#FBFCFE, #1D2330);
    --n-50:  light-dark(#F5F7FA, #232A38);
    --n-100: light-dark(#EDF0F5, #2A3242);
    --n-200: light-dark(#E1E6EE, #333C4E);
    --n-300: light-dark(#CBD3DF, #414B5F);
    --n-400: light-dark(#9AA5B5, #6E7A8D);   /* UKRAS: ikone, ivice, placeholder — NE za tekst koji se čita */
    --n-500: light-dark(#67717F, #9AA5B6);
    --n-600: light-dark(#4F5867, #B3BCC9);   /* isto kao --n-800: bio u upotrebi, a nije postojao */
    --n-700: light-dark(#3B4453, #C6CEDA);
    --n-800: light-dark(#252C3A, #DDE3EC);   /* koristio se na 15 mesta, a nije postojao — svaki je nasleđivao boju roditelja */
    --n-900: light-dark(#161B26, #EAEEF5);

    /* Tri nivoa teksta. Sva tri prolaze WCAG AA (4.5:1) na kartici i na
       pozadini strane, u OBE teme; razmaknuti su dovoljno da se razlikuju
       na oko (mereno prema kartici):
                    svetla        tamna
         n-900     17.2 : 1     14.4 : 1   glavni tekst, iznosi, naslovi
         n-700      9.8 : 1      9.6 : 1   sporedni tekst, meni, labele
         n-500      4.9 : 1      5.5 : 1   meta: datumi, napomene, jedinice
       `--n-400` je ispod 3:1 u obe teme i NE SME da nosi tekst — ostaje
       za ikone i ivice.

       Pozadina strane je u obe teme tamnija od kartice, iz istog razloga:
       da se vidi gde kartica počinje. U svetloj je to #F4F6FA prema beloj,
       u tamnoj #0F131A prema #191E28 — oba oko 1.1 : 1, taman toliko da
       razdvoji ravni a da ne pravi šum. */
    --pozadina: light-dark(#F4F6FA, #0F131A);

    /* Lepljive trake (gornja traka panela, zaglavlje sajta) stoje preko
       sadržaja koji se skroluje ispod njih, pa su providne uz `backdrop-filter`.
       Zato ne mogu da koriste `--n-0`: treba im ista boja SA alfom.

       Zarezi unutar `rgba()` ne smetaju — `light-dark()` broji samo zareze
       na svom nivou, a ovi su unutar ugnežđene funkcije. */
    --staklo: light-dark(rgba(255, 255, 255, .92), rgba(25, 30, 40, .92));

    /* Podloga javnog sajta. Sadržaj stoji kao zaobljen beli list koji lebdi
       na njoj — zato podloga mora da bude TAMNIJA od lista u obe teme,
       inače se ivica lista ne vidi i ceo okvir nestane. */
    --sajt-podloga: light-dark(#DEE4FA, #0B0F17);

    /* Površine koje su tamne NAMERNO: traka brzih prijava, blok koda.

       One su ranije koristile `--n-900` — token GLAVNOG TEKSTA, koji je u
       svetloj temi slučajno i skoro crn. U tamnoj temi se on obrne u skoro
       belu, pa bi traka postala bela mrlja, a beli tekst na njoj nestao.
       Zato imaju svoj token: uloga im je „tamna podloga", ne „boja teksta". */
    --povrsina-tamna: light-dark(#161B26, #090C12);
    --na-tamnoj:      light-dark(#F5F7FA, #C6CEDA);

    /* --- semantika --- */
    /* Tirkiz nosi drugi limit (8 miliona). Nije semantička boja — postoji
       samo da se dve trake jedna do druge ne sliju u istu plavu mrlju. */
    --tirkiz:     light-dark(#0E7490, #38BEC9);
    --tirkiz-700: light-dark(#155E75, #5FD4DE);
    --tirkiz-bg:  light-dark(#ECFEFF, #0C2A31);

    /* Tamniji krajevi za gradijent popune. Popuna nosi beo tekst, pa i njen
       najsvetliji ton mora da drži 4,5:1 prema beloj. */
    --greska-500: light-dark(#D92D20, #E5484D);

    /* Puna crvena površina — dugme „Obriši". Isto pravilo kao kod brenda:
       nosi belo slovo, pa ne sme da posvetli u tamnoj temi. */
    --greska-puna:       light-dark(#B42318, #C4342B);
    --greska-puna-hover: light-dark(#912018, #A82A22);

    --uspeh:  light-dark(#15803D, #4ADE80);  --uspeh-bg:  light-dark(#ECFDF3, #0D2A19);  --uspeh-ivica:  light-dark(#ABEFC6, #1F5235);
    --upozor: light-dark(#B45309, #FBBF24);  --upozor-bg: light-dark(#FFFAEB, #2C2210);  --upozor-ivica: light-dark(#FEDF89, #5C4415);
    --greska: light-dark(#B42318, #FB8A82);  --greska-bg: light-dark(#FEF3F2, #2E1614);  --greska-ivica: light-dark(#FECDCA, #5E2620);
    --info:   light-dark(#175CD3, #5FA8FF);  --info-bg:   light-dark(#EFF8FF, #10233D);  --info-ivica:   light-dark(#B2DDFF, #1D4373);
    --mirno:  light-dark(#475467, #AAB4C4);  --mirno-bg:  light-dark(#F2F4F7, #242B37);  --mirno-ivica:  light-dark(#E1E6EE, #333C4E);

    /* --- tipografija ---
       Panel je do sada tražio 'Inter' i 'Plus Jakarta Sans'. Nijedan od ta dva
       fonta ne postoji u `public/assets/fonts/` — Inter je ostao samo kao
       zakomentarisan `@font-face` na vrhu ovog fajla, a Jakarta nije imala ni
       to. Oba su tiho padala na sistemski stek, pa je panel izgledao drugačije
       na svakom računaru, a sajt (koji je već na Geistu) drugačije od panela.

       Sada oba koriste Geist, koji je self-hostovan i već se učitava. Jedan
       font za ceo program: isti oblik slova u panelu i na sajtu. */
    --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-naslov: var(--font);
    --font-broj: var(--font);
    /* Kod i sirovi tekst (uređivač, vodiči, Markdown iz asistenta). Ranije je
       `--pismo-mono` stajao u pravilima a nigde nije bio definisan, pa je kod
       padao na Inter; deo pravila je nosio i `--font-mono` sa rezervom. */
    --pismo-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    --t-xs:  12px;  --t-xs-h:  16px;
    --t-sm:  13px;  --t-sm-h:  18px;
    --t-md:  14px;  --t-md-h:  21px;
    --t-lg:  16px;  --t-lg-h:  24px;
    --t-xl:  20px;  --t-xl-h:  28px;
    --t-2xl: 24px;  --t-2xl-h: 32px;
    --t-3xl: 30px;  --t-3xl-h: 38px;
    --t-4xl: 40px;  --t-4xl-h: 48px;
    --t-5xl: 56px;  --t-5xl-h: 62px;

    /* --- razmaci (skala 4px) --- */
    --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px; --r5: 20px;
    --r6: 24px; --r8: 32px; --r10: 40px; --r12: 48px; --r16: 64px;

    /* --- radijusi --- */
    --rad-sm: 8px;
    --rad: 12px;
    --rad-lg: 16px;
    --rad-pun: 999px;

    /* --- senke --- */
    /* Senka na tamnoj podlozi ne sme da bude ista: rgba(16,24,40,.05) je
       tamo praktično boja same podloge, pa se ne vidi ništa. U tamnoj temi
       ide čista crna i jača — senka tu ne pravi sivilo nego dubinu.

       Temu nosi BOJA senke, ne cela senka: `light-dark()` prima tačno dva
       argumenta, a `--senka-2` ima zarez unutar svoje vrednosti, pa bi kao
       celina bila pročitana kao tri argumenta i pravilo bi otpalo. */
    --senka-boja-1:  light-dark(rgba(16, 24, 40, .05), rgba(0, 0, 0, .40));
    --senka-boja-2:  light-dark(rgba(16, 24, 40, .08), rgba(0, 0, 0, .48));
    --senka-boja-2b: light-dark(rgba(16, 24, 40, .04), rgba(0, 0, 0, .32));
    --senka-boja-3:  light-dark(rgba(16, 24, 40, .08), rgba(0, 0, 0, .52));
    --senka-boja-4:  light-dark(rgba(16, 24, 40, .12), rgba(0, 0, 0, .60));

    --senka-1: 0 1px 2px var(--senka-boja-1);
    --senka-2: 0 1px 3px var(--senka-boja-2), 0 1px 2px var(--senka-boja-2b);
    --senka-3: 0 4px 12px var(--senka-boja-3);
    --senka-4: 0 12px 32px var(--senka-boja-4);

    /* --- klizač (scrollbar) ---

       Sistemski klizač je na tegetnom meniju izgledao kao tuđ deo: široka
       svetla traka sa sivim jezičkom, uz boje koje operativni sistem bira
       umesto nas. Zato se crta sam: jezičak je providna neutralna boja koja
       radi i na beloj kartici i na tegetnom meniju, a staza je providna — ne
       vidi se dok nema šta da se pomera.

       Dve nijanse: mirna i pod mišem. Bez druge, klizač ne daje nikakav odziv
       na dodir pokazivačem, pa deluje kao ukras a ne kao ručica. */
    --skrol-palac:     light-dark(rgba(22, 27, 38, .20), rgba(255, 255, 255, .20));
    --skrol-palac-jak: light-dark(rgba(22, 27, 38, .36), rgba(255, 255, 255, .34));

    /* --- raspored --- */
    --sidebar: 264px;
    --sidebar-usko: 72px;
    /* `--topbar` je UKUPNA visina gornje trake — na telefonu ona ima dva reda,
       pa je tamo veća; sve što se lepi ispod nje (sadržaj, zaglavlja tabela,
       panel zvona) računa po njoj. `--topbar-red` je jedan red i ne menja se. */
    --topbar: 60px;
    --topbar-red: 60px;
    --sajt-max: 1200px;

    /* --- kretanje --- */
    --brzo: 120ms ease;
    --srednje: 180ms ease-out;
    --sporo: 240ms cubic-bezier(.2, .8, .2, 1);
}

/* Tamna tema. `svetla` nema svoje pravilo jer je to već stanje `:root` —
   atribut se za nju svejedno ispisuje, da se u HTML-u vidi da je izbor
   napravljen, a ne da je samo izostao. */
:root[data-tema="tamna"] { color-scheme: dark; }


/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* hidden mora da pobedi svaki display iz komponenti (modali, grane menija) */
[hidden] { display: none !important; }

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

/* Bez providnog pravougaonika na dodir.

   Android (Chrome, Samsung) preko svega što se tapne — dugmeta, stavke
   menija, reda tabele — nacrta sivkast pravougaonik dok prst stoji, a uz
   navigaciju bez osvežavanja ume da ostane i posle. Prijavljeno sa telefona
   kao „kockasti hover na svaki tap". Elementi već imaju svoje stanje pritiska
   (`:active`) i fokus za tastaturu (`:focus-visible`), pa ovaj ne treba.

   Uz to su SVA `:hover` pravila u `@media (hover: hover)`: na dodirnom ekranu
   tapnuto ostaje „pod mišem" dok se ne tapne negde drugde, pa je i hover
   pozadina stajala zalepljena na poslednje dodirnutom. */
* { -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-md);
    line-height: var(--t-md-h);
    color: var(--n-900);
    background: var(--pozadina);
    -webkit-font-smoothing: antialiased;
}

/* Panel se čita, ne prelistava: tipografija tu sme da bude krupnija nego na
   sajtu. Sitno pismo u tabeli sa osam kolona je prvo na šta se korisnik požali.

   Skala se pomera samo na donjem kraju (xs/sm/md) — tamo gde je tekst i bio
   najsitniji. Naslovi ostaju isti, pa se ritam strane ne menja i nijedan
   raspored ne puca.

   Ograničeno na panel: javni sajt ima svoju hijerarhiju i nema razloga da ga
   vuče izmena tražena zbog tabela. */
body.aplikacija {
    --t-xs: 13px;  --t-xs-h: 18px;
    --t-sm: 14px;  --t-sm-h: 20px;
    --t-md: 15px;  --t-md-h: 22px;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

a {
    color: var(--brend-600);
    text-decoration: none;
    transition: color var(--brzo);
}
@media (hover: hover) {
    a:hover { color: var(--brend-700); text-decoration: underline; }
}

:focus-visible {
    outline: 2px solid var(--brend-600);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skok na sidro (pitanje u čestim pitanjima, veza iz podnožja, „Pogledaj kako
   radi") je do sada bio trenutan: strana se u jednom kadru nađe negde drugde i
   čovek na trenutak ne zna gde je. Klizanje traje dovoljno da oko isprati
   pokret i poveže gde je bilo sa tim gde je stiglo.

   Uz to `scroll-margin-top`: zaglavlje sajta je lepljivo, pa bi odredište bez
   ove rezerve završilo TAČNO ISPOD njega — kliknuo bi na pitanje, a video
   odgovor bez pitanja.

   Oba pravila gasi blok za „smanji kretanje" odmah ispod. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: calc(var(--lepljivi-vrh, 80px) + var(--r4)); }

/* ---- klizač ----

   Važi svuda gde se nešto pomera: bočni meni, telo modala, padajući spiskovi,
   široke tabele, spisak obaveštenja i sama strana.

   Pišu se OBA zapisa. `scrollbar-width`/`scrollbar-color` su standard i prvi
   izbor; `::-webkit-scrollbar` je rezerva za starije Chromium i Safari koji
   standard još ne čitaju. Ne sudaraju se: pregledač koji razume `scrollbar-color`
   zanemari pseudoelemente, pa nikad ne važe oba.

   Jezičak dobija providnu ivicu i `background-clip: content-box` — tako se
   crta uži nego što je površina koja prima klik. Izgleda kao pilula koja
   lebdi, a i dalje se lako uhvati mišem.

   Spiskovi koji klizač NAMERNO kriju (`.tabovi`, `.klizac-staza`) ostaju
   netaknuti: oni postavljaju `scrollbar-width: none` preko svoje klase, a
   klasa je jača od `*`. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--skrol-palac) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--skrol-palac);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--rad-pun);
}
@media (hover: hover) {
    ::-webkit-scrollbar-thumb:hover {
        background: var(--skrol-palac-jak);
        background-clip: content-box;
    }
}
/* Ugao gde se sustiču vodoravni i uspravni klizač — bez ovoga ostaje svetli
   kvadratić, najvidljiviji baš na tamnom meniju. */
::-webkit-scrollbar-corner { background: transparent; }

/* Bočni meni je tegetan u OBE teme, pa mu jezičak ne sme da prati temu: u
   svetloj bi `--skrol-palac` bio tamna mrlja na tamnoj podlozi. Ovde je uvek
   belo sa providnošću, kao i ostali slojevi hroma. */
.bocni-meni { scrollbar-color: var(--hrom-skrol) transparent; }
.bocni-meni::-webkit-scrollbar-thumb {
    background: var(--hrom-skrol);
    background-clip: content-box;
}
@media (hover: hover) {
    .bocni-meni::-webkit-scrollbar-thumb:hover {
        background: var(--hrom-skrol-jak);
        background-clip: content-box;
    }
}

/* korisnik koji ne želi animacije ih ne dobija */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Tipografija
   ============================================================ */

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--n-900); }

.n-stranica { font-size: var(--t-2xl); line-height: var(--t-2xl-h); font-weight: 700; }
.n-odeljak  { font-size: var(--t-xl);  line-height: var(--t-xl-h); font-weight: 600; }
.n-kartica  { font-size: var(--t-lg);  line-height: var(--t-lg-h); font-weight: 600; }

.tekst-blagi   { color: var(--n-500); }
.tekst-tih     { color: var(--n-500); }   /* n-400 pada na 2.5:1 — ne za tekst */
.tekst-sm      { font-size: var(--t-sm); line-height: var(--t-sm-h); }
.tekst-xs      { font-size: var(--t-xs); line-height: var(--t-xs-h); }
.tekst-lg      { font-size: var(--t-lg); line-height: var(--t-lg-h); }
.tekst-sredina { text-align: center; }
.tekst-desno   { text-align: right; }
.tekst-uspeh   { color: var(--uspeh); }
.tekst-greska  { color: var(--greska); }
.tekst-upozor  { color: var(--upozor); }
.jaci          { font-weight: 600; }

/* iznosi — cifre iste širine da se kolone poklapaju */
.broj, .iznos, td.iznos, .tabela td.broj {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.iznos { text-align: right; white-space: nowrap; }

.samo-citac {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Forme
   ============================================================ */

.polje { margin-bottom: var(--r5); }

.polje-labela {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--n-700);
    margin-bottom: 6px;
}

.polje-labela .obavezno { color: var(--greska); margin-left: 2px; }

.unos, .izbor, .oblast {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--t-md);
    color: var(--n-900);
    background: var(--n-0);
    border: 1px solid var(--n-300);
    border-radius: var(--rad-sm);
    transition: border-color var(--brzo), box-shadow var(--brzo);
}

.unos::placeholder, .oblast::placeholder { color: var(--n-400); }

@media (hover: hover) {
    .unos:hover, .izbor:hover, .oblast:hover { border-color: var(--n-400); }
}

.unos:focus, .izbor:focus, .oblast:focus {
    outline: none;
    border-color: var(--brend-500);
    box-shadow: 0 0 0 3px var(--brend-100);
}

/* Polje koje se čita, a ne popunjava (broj dokumenta). Za razliku od
   `:disabled`, tekst ostaje pune boje — broj je tu da se pročita — ali se
   podloga i pokazivač menjaju da se vidi da unos nije moguć. */
.unos[readonly], .oblast[readonly] {
    background: var(--n-50);
    border-color: var(--n-200);
    cursor: default;
}
.unos[readonly]:focus, .oblast[readonly]:focus {
    border-color: var(--n-300);
    box-shadow: none;
}

.unos:disabled, .izbor:disabled, .oblast:disabled {
    background: var(--n-50);
    color: var(--n-500);
    cursor: not-allowed;
}

.oblast { min-height: 96px; resize: vertical; }

.izbor {
    appearance: none;
    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;
    padding-right: 36px;
}

.polje-pomoc { font-size: var(--t-xs); color: var(--n-500); margin-top: 6px; }

/* Labela + oblačić sa objašnjenjem. `ui/polje` više ne ispisuje pomoć ispod
   polja nego kao „i" pored labele: tekst se vidi kad se traži. Ručno pisani
   `.polje-pomoc` po ekranima ostaje kakav je bio. */
.polje-glava { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.polje-glava .polje-labela { margin-bottom: 0; }
/* Red kvadratića: gornji i donji razmak nosi RED, ne labela. Sa razmakom na
   labeli se ikonica centrirala prema njenoj kutiji, a tekst stoji na vrhu
   kutije — ikonica je bila 6px ispod teksta (izmereno). Ovako je kutija labele
   visoka tačno koliko i red teksta, pa se centri poklapaju. */
.kvadratic-red { display: flex; align-items: center; gap: 2px; padding: 8px 0; }
.kvadratic-red .kvadratic { padding-top: 0; padding-bottom: 0; }

.hint { position: relative; display: inline-flex; }
.hint-okidac {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: var(--n-400);
    cursor: pointer; list-style: none;
    transition: color var(--brzo), background-color var(--brzo);
}
.hint-okidac::-webkit-details-marker { display: none; }
.hint-okidac .ikona { width: 15px; height: 15px; }
.hint[open] .hint-okidac { color: var(--brend-600); background: var(--brend-50); }
@media (hover: hover) {
    .hint-okidac:hover { color: var(--brend-600); background: var(--brend-50); }
}
.hint-okidac:focus-visible { outline: 2px solid var(--brend-500); outline-offset: 1px; }

/* Oblačić IZNAD ikonice, ne ispod: ispod bi pokrio polje u koje čovek upravo
   hoće da kuca (izmereno: prekrivao je početak unosa). Na uskom ekranu sme da
   ide samo koliko ima mesta. Iznad polja i modala, ispod zaglavlja. */
.hint-oblacic {
    position: absolute; z-index: 30; bottom: calc(100% + 6px); left: -8px;
    width: max-content; max-width: min(320px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid var(--n-200); border-radius: var(--rad-sm);
    background: var(--n-0);
    box-shadow: var(--senka-3);
    color: var(--n-700); font-size: var(--t-xs); font-weight: 400; line-height: 18px;
    white-space: normal;
}
.hint-oblacic a { color: var(--brend-600); }
/* Uz desnu ivicu ekrana (naslov kartice u desnoj koloni) oblačić bi virio;
   `moduli/hint.js` ga pri otvaranju pomeri ulevo inline transformom, tačno
   koliko viri. Bez skripte ostaje ovako, levo poravnat. */

/* Na samom vrhu strane (traka akcija, prvi red pod zaglavljem) iznad ikonice
   nema mesta: oblačić bi otišao pod zaglavlje i iz ekrana, pa se video samo
   poslednji red (prijavljeno na „Korisnici": „štikliraš. Pristup mu ukidaš…").
   Tu ide ispod. `moduli/hint.js` isto radi za svaki oblačić kome nema mesta
   iznad; ovo je da važi i bez skripte. */
.akcije-vrh .hint-oblacic, .hint-oblacic.ispod { top: calc(100% + 6px); bottom: auto; }

/* Na telefonu oblačić NE polazi od ikonice nego zauzima ceo red (labela sa
   ikonicom, kvadratić, naslov kartice): ikonica desno od „Promet traje više
   dana" stoji na sredini ekrana, pa je oblačić od nje širok 320px izlazio
   van ekrana. Strana bi se tada raširila i pregledač na telefonu dopustio
   odzumiranje, posle koga je sve stajalo na levoj trećini (prijavljeno na
   novoj fakturi i predračunu). Ovako stane i bez skripte; skripta onda nema
   šta da pomera. Red je oslonac (`position: relative`), oblačić ide od ivice
   do ivice reda. */
@media (max-width: 640px) {
    .polje-glava, .kvadratic-red, .kartica-naslov { position: relative; }
    .polje-glava > .hint, .kvadratic-red > .hint, .kartica-naslov > .hint { position: static; }
    .polje-glava > .hint .hint-oblacic,
    .kvadratic-red > .hint .hint-oblacic,
    .kartica-naslov > .hint .hint-oblacic { left: 0; right: 0; width: auto; max-width: none; }
}
.polje-greska { font-size: var(--t-xs); color: var(--greska); margin-top: 6px; }

.polje.ima-gresku .unos,
.polje.ima-gresku .izbor,
.polje.ima-gresku .oblast,
/* Polje pisano ručno, van `.polje` omota: oznaka tada stoji na samom polju
   (vidi obeležavanje obaveznih u `app.js`). */
.unos.ima-gresku,
.izbor.ima-gresku,
.oblast.ima-gresku { border-color: var(--greska); }

.polje.ima-gresku .unos:focus { box-shadow: 0 0 0 3px var(--greska-ivica); }

/* polje sa prefiksom/sufiksom (RSD, %) */
/* Broj bankovnog računa u tri polja sa crticama između (`ui/racun-polja`):
   [ 205 ] - [ 0000000012345 ] - [ 10 ]. Širina polja prati broj cifara
   (`ch`), pa se vidi koliko ih stane; broj računa sme da se stisne na uskom
   ekranu, ostala dva ne. */
.racun-delovi { display: flex; align-items: center; gap: 6px; }
.racun-crtica { color: var(--n-500); font-weight: 600; flex: none; }
.racun-deo {
    flex: none; text-align: center;
    font-variant-numeric: tabular-nums; letter-spacing: .04em;
    padding-left: 10px; padding-right: 10px;
}
.racun-deo[name="bank_code"]      { width: calc(3ch + 22px); }
.racun-deo[name="account_number"] { width: calc(13ch + 22px); flex: 0 1 auto; min-width: 0; }
.racun-deo[name="control_number"] { width: calc(2ch + 22px); }
.racun-poruka { margin-top: 6px; }

.polje-grupa { display: flex; align-items: stretch; }
.polje-grupa .unos { border-radius: var(--rad-sm) 0 0 var(--rad-sm); }
.polje-dodatak {
    display: flex; align-items: center;
    padding: 0 12px;
    font-size: var(--t-sm);
    color: var(--n-500);
    background: var(--n-50);
    border: 1px solid var(--n-300);
    border-left: 0;
    border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
    white-space: nowrap;
}

.unos-novac { text-align: right; font-variant-numeric: tabular-nums; }

/* Oko za prikaz lozinke.

   Ne koristi `.polje-grupa`: dugme koje spolja produžava polje pomera samo polje
   i lomi mu zaobljenje, a ovde je reč o radnji NAD sadržajem polja — pa stoji
   unutar njega. Polje zato dobija razmak zdesna, taman koliko dugme zauzima. */
.polje-lozinka { position: relative; display: block; }
.polje-lozinka .unos { padding-right: 44px; }

.lozinka-oko {
    position: absolute;
    top: 1px; right: 1px; bottom: 1px;
    width: 40px;
    display: grid; place-items: center;
    color: var(--n-500);
    border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
    transition: color var(--brzo), background var(--brzo);
}
@media (hover: hover) {
    .lozinka-oko:hover { color: var(--n-900); background: var(--n-50); }
}

/* Prikazana je uvek TAČNO jedna ikona — precrtano oko znači „klik krije",
   isto pravilo kao kod prekidača teme: ikona pokazuje radnju koja sledi. */
.lozinka-oko .ikona:nth-child(2),
.polje-lozinka.vidljiva .lozinka-oko .ikona:nth-child(1) { display: none; }
.polje-lozinka.vidljiva .lozinka-oko .ikona:nth-child(2) { display: block; }
.polje-lozinka.vidljiva .lozinka-oko { color: var(--brend-600); }

/* checkbox i radio */
.kvadratic, .krugic {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}
.kvadratic input, .krugic input {
    width: 18px; height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brend-600);
    flex: none;
    cursor: pointer;
}
.kvadratic-tekst { font-size: var(--t-md); }
.kvadratic-opis { font-size: var(--t-xs); color: var(--n-500); }

/* prekidač */
.prekidac { display: inline-flex; align-items: center; cursor: pointer; }
.prekidac input { position: absolute; opacity: 0; width: 0; height: 0; }
.prekidac-telo {
    width: 40px; height: 22px;
    background: var(--n-300);
    border-radius: var(--rad-pun);
    position: relative;
    transition: background var(--brzo);
    flex: none;
}
.prekidac-telo::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--n-0);
    border-radius: 50%;
    box-shadow: var(--senka-1);
    transition: transform var(--srednje);
}
.prekidac input:checked + .prekidac-telo { background: var(--brend-600); }
.prekidac input:checked + .prekidac-telo::after { transform: translateX(18px); }
.prekidac input:focus-visible + .prekidac-telo { outline: 2px solid var(--brend-600); outline-offset: 2px; }
.prekidac input:disabled + .prekidac-telo { opacity: .5; cursor: not-allowed; }

/* Prekidač kao DUGME u formi: klik je POST, pa radi i bez JavaScripta. Stanje
   zato ne drži kvadratić nego `aria-checked` — izgled je isti. */
.red-prekidac { display: inline-flex; align-items: center; gap: 8px; }
.prekidac-dugme {
    display: inline-flex; align-items: center;
    padding: 0; background: none; border: 0; cursor: pointer;
}
.prekidac-dugme[aria-checked="true"] .prekidac-telo { background: var(--brend-600); }
.prekidac-dugme[aria-checked="true"] .prekidac-telo::after { transform: translateX(18px); }
.prekidac-dugme:focus-visible .prekidac-telo { outline: 2px solid var(--brend-600); outline-offset: 2px; }

/* red forme (dve kolone) */
.red-forme { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r4); }
.red-forme.tri { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 640px) {
    .red-forme, .red-forme.tri { grid-template-columns: 1fr; }
}

/* ikone — stil stoji na <symbol> u sprajtu, ovde samo veličina.
   fill/stroke se ipak postavljaju da <svg> omotač ne nametne crnu popunu. */
.ikona {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    overflow: visible;
}
.ikona-sm { width: 16px; height: 16px; }
.ikona-lg { width: 24px; height: 24px; }

/* pomoćne klase */
/* `flex-wrap` je bitan za oba: bez njega dva dugmeta u podnožju forme ili
   kartice guraju sadržaj van ekrana na uskom telefonu umesto da pređu u drugi
   red. `.red-izmedju` ga je imao, `.red` nije — ista greška, jedna klasa dalje. */
.red { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.red-izmedju { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); flex-wrap: wrap; }
.kolona { display: flex; flex-direction: column; gap: var(--r3); }
.razmak { flex: 1; }
.sakrij { display: none !important; }

@media (max-width: 900px) { .sakrij-mob { display: none !important; } }
@media (min-width: 901px) { .samo-mob { display: none !important; } }