/* ---------------------------------------------------------------------------
   NITTiket
   Copyright (c) 2026 NIT Software Solutions. Sva prava zadrzana.

   KATALOG USLUGA (K2), CEKA MOJU ODLUKU (O2) i ADMINISTRACIJA KATALOGA (A2),
   odobreni 31.08.2026.

   Nijedna heks vrednost ne sme da udje u ovaj fajl. Boje postoje samo u
   nittiket.css, sekcija 1; ovde se uzimaju kroz var(--...).

   Klase .panel, .spisak, .odeljak, .odeljak-naslov, .znacka i .upozorenje-red
   NAMERNO se poklapaju sa onima iz prava.css i poruke.css: isti proizvod, ista
   navika. Tri ekrana dele ovaj fajl jer dele raspored - spisak levo, rad desno.
   --------------------------------------------------------------------------- */

/* ============================================================ zajednicka ljuska */

.katalog,
.odobrenja,
.admin-katalog {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: .75rem;
}

.katalog-traka,
.odobrenja-traka,
.admin-traka {
    flex: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.katalog-traka h1,
.odobrenja-traka h1,
.admin-traka h1 { font-size: 1.05rem; margin: 0; }

/* Uvodna recenica stoji na ekranu, ne u dokumentaciji. Na katalogu objasnjava da
   narudzbina postaje tiket; na odobrenjima da se odlucuje po vrednostima, ne po
   naslovu. Oba su stvari koje covek koji prvi put otvara ekran ne moze da zna. */
.katalog-opis,
.odobrenja-opis {
    flex: none;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ac);
    border-radius: var(--r);
    background: var(--surf2);
    color: var(--t2);
    font-size: .84rem;
}

.katalog .panel,
.odobrenja .panel,
.admin-katalog .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.katalog .spisak,
.odobrenja .spisak,
.admin-katalog .spisak {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .3rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.katalog .sifra,
.odobrenja .sifra,
.admin-katalog .sifra {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .74rem;
    color: var(--t3);
}

/* Obavezno polje nosi zvezdicu, a ne samo crven okvir po neuspehu: zabrana koja
   se sazna tek posle slanja je losija od one koja stoji unapred. */
.zvezda { color: var(--dg); margin-left: 2px; font-weight: 700; }

/* Polje sa natpisom IZNAD kontrole, a ne pored nje. Obrazac narudzbine ima
   promenljiv broj polja i duge natpise („Obrazlozenje zahteva"), pa bi dvokolonski
   .polje-red iz nittiket.css lomio natpise u dva reda razlicite visine. */
.polje-red.uspravan {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
}

.polje-red.uspravan > span:first-child {
    font-size: .78rem;
    font-weight: 600;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.beleska {
    margin: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--ac-ln);
    border-radius: var(--r);
    background: var(--ac-bg);
    color: var(--ac-tx);
    font-size: .82rem;
}

/* ==================================================================== KATALOG */

.katalog-telo {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 320px;
    gap: .75rem;
}

.katalog .kategorija {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.katalog .kategorija:hover { background: var(--surf3); }

.katalog .kategorija.izabrana {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
}

.katalog .kategorija .ime {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.katalog .kategorija .kol {
    margin-left: auto;
    font-size: .74rem;
    color: var(--t3);
}

.usluge-glava {
    flex: none;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line);
}

.usluge-glava .pretraga { width: 100%; max-width: 320px; }

.usluge {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Usluga je <button>: red na koji se klikce mora da bude dostupan tastaturi. */
.katalog .usluga {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
    width: 100%;
    padding: .55rem .7rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.katalog .usluga:hover { background: var(--surf2); }
.katalog .usluga.izabrana { background: var(--ac-bg); }

.katalog .usluga .ikonica {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--r);
    background: var(--surf3);
    color: var(--t2);
    font-size: .82rem;
    font-weight: 700;
}

.katalog .usluga .sredina {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.katalog .usluga .ime {
    font-size: .87rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.katalog .usluga .pregled {
    font-size: .76rem;
    color: var(--t3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cena i rok u istoj liniji su ceo razlog zbog kog je red pobedio karticu:
   poredjenje ide odozgo nadole, bez ijednog otvaranja. */
.katalog .usluga .meta {
    flex: none;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: .76rem;
    color: var(--t3);
    white-space: nowrap;
}

.katalog .usluga .trosak { color: var(--t2); }

.obrazac-panel { overflow: hidden; }

.obrazac-glava {
    flex: none;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--line);
}

.obrazac-glava h2 { font-size: .97rem; margin: 0 0 2px; }
.obrazac-glava .tiho { font-size: .78rem; }

.obrazac-telo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* Opis usluge se iscrtava kao CIST TEKST, pa mora sam da cuva prelome reda -
   Markdown se namerno ne pretvara u HTML (isto rezonovanje kao pravilo 16). */
.opis-usluge {
    margin: 0;
    font-size: .82rem;
    color: var(--t2);
    white-space: pre-wrap;
}

.obrazac-dno {
    flex: none;
    padding: .6rem .8rem;
    border-top: 1px solid var(--line);
    background: var(--surf2);
    display: flex;
    gap: .5rem;
}

.obrazac-dno .primarno { flex: 1; justify-content: center; }

/* ------------------------------------------------------ moje narudzbine */

.moji-panel { flex: 1; min-height: 0; }

.moji-spisak {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.moj-zahtev {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--line);
}

.moj-zahtev:last-child { border-bottom: 0; }

.moj-zahtev .vrh {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.moj-zahtev .ime { font-size: .88rem; font-weight: 500; }
.moj-zahtev .pod { font-size: .78rem; }
.moj-zahtev .kada { font-size: .74rem; white-space: nowrap; }

/* Sitno dugme za radnju UNUTAR reda spiska - povlacenje narudzbine. Puna visina
   dugmeta bi razvukla red i pomerila datum, pa bi svaki red sa zahtevom na cekanju
   bio visi od ostalih. */
.dugme.sitno {
    padding: .18rem .45rem;
    font-size: .74rem;
    line-height: 1.2;
}

/* Red potvrde stoji ISPOD zahteva, ne preko strane: pitanje se odnosi na jedan
   red, pa preklop preko celog ekrana ne bi rekao na koji. */
.moj-zahtev .potvrda-red {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    padding: .45rem .55rem;
    border: 1px solid var(--dg-ln);
    border-radius: var(--r);
    background: var(--dg-bg);
    color: var(--dg-tx);
    font-size: .78rem;
}

.moj-zahtev .potvrda-red > span { flex: 1 1 14rem; }

.znacka.uspeh {
    background: var(--ok-bg);
    color: var(--ok-tx);
    border-color: var(--ok-ln);
}

/* ================================================================= ODOBRENJA */

.odobrenja-telo {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: .75rem;
}

.odobrenja .zahtev {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: .5rem .55rem;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.odobrenja .zahtev:hover { background: var(--surf3); }

.odobrenja .zahtev.izabran {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
    border-left-color: var(--ac);
}

/* Prekoracen rok se vidi VEC U SPISKU, ne tek kad se zahtev otvori: inace bi
   covek morao da otvori svaki da bi saznao koji gori. */
.odobrenja .zahtev.hitan { border-left-color: var(--dg); }

.odobrenja .zahtev .znaci {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.odobrenja .zahtev .ime { font-size: .86rem; font-weight: 500; }

.odobrenja .zahtev .pregled {
    font-size: .76rem;
    color: var(--t2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odobrenja .zahtev .pregled.tise { color: var(--t3); font-size: .72rem; }

.detalj-panel { overflow: hidden; }

.detalj-glava {
    flex: none;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
}

.detalj-glava .naslov-red {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.detalj-glava h2 { font-size: 1rem; margin: 0; }
.detalj-glava .tiho { font-size: .78rem; margin-top: 2px; }

.detalj-telo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.detalj-dno {
    flex: none;
    padding: .6rem .9rem;
    border-top: 1px solid var(--line);
    background: var(--surf2);
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.katalog .odeljak,
.odobrenja .odeljak,
.admin-katalog .odeljak {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.katalog .odeljak-naslov,
.odobrenja .odeljak-naslov,
.admin-katalog .odeljak-naslov {
    padding: .45rem .7rem;
    background: var(--surf2);
    border-bottom: 1px solid var(--line);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .03em;
}

/* Popunjene vrednosti formulara. Prvo na ekranu, iznad koraka: ovo je podatak na
   osnovu kog se odlucuje, a koraci su samo put kojim zahtev ide. */
.vrednosti {
    margin: 0;
    padding: .6rem .7rem;
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
    gap: .3rem .9rem;
    font-size: .82rem;
}

.vrednosti dt { color: var(--t2); }
.vrednosti dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------- stepenice odobravanja */

.koraci {
    margin: 0;
    padding: .7rem;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.koraci .korak {
    display: flex;
    gap: .65rem;
    position: relative;
    padding-bottom: .8rem;
}

.koraci .korak:last-child { padding-bottom: 0; }

/* Linija koja spaja korake pokazuje da je ovo LANAC, ne spisak - da odluka nije
   kraj nego prelazak na sledeci korak. */
.koraci .korak::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: var(--line2);
}

.koraci .korak:last-child::before { display: none; }

.koraci .krug {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
    border: 2px solid var(--line2);
    background: var(--surf);
    color: var(--t3);
    z-index: 1;
}

.koraci .korak.gotov .krug {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--n0);
}

.koraci .korak.tekuci .krug {
    background: var(--ac);
    border-color: var(--ac);
    color: var(--n0);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

.koraci .sadrzaj {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.koraci .ime {
    font-size: .83rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.koraci .detalj { font-size: .76rem; color: var(--t2); }

/* -------------------------------------------------------------------- istorija */

.istorija {
    margin: 0;
    padding: .6rem .7rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .8rem;
}

.istorija li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .2rem .6rem;
    align-items: baseline;
}

.istorija .odluka {
    font-weight: 600;
    font-size: .74rem;
    padding: .05rem .4rem;
    border-radius: 5px;
    border: 1px solid;
}

.istorija .odluka.dobra { color: var(--ok-tx); background: var(--ok-bg); border-color: var(--ok-ln); }
.istorija .odluka.losa { color: var(--dg-tx); background: var(--dg-bg); border-color: var(--dg-ln); }
.istorija .odluka.neutralna { color: var(--t2); background: var(--surf3); border-color: var(--line2); }

.istorija .ko { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.istorija .kada { font-size: .72rem; white-space: nowrap; }

.istorija .komentar {
    grid-column: 2 / -1;
    color: var(--t2);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

/* Znacka koja trazi paznju bez toga da vice: zamenik i „na vama" nisu greske, ali
   jesu jedina dva podatka koja menjaju ono sto ce covek uraditi. */
.znacka.istaknuta {
    background: var(--ac-bg);
    color: var(--ac-tx);
    border-color: var(--ac-ln);
}

.znacka.opasnost {
    background: var(--dg-bg);
    color: var(--dg-tx);
    border-color: var(--dg-ln);
}

/* Odobri i Odbij nose boju posledice, ne samo tezinu. Sivo „Odbij" pored zelenog
   „Odobri" cita se kao sporedna radnja, a nije - to je druga polovina odluke. */
.dugme.potvrdno {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--n0);
}

.dugme.odbijajuce {
    border-color: var(--dg-ln);
    color: var(--dg-tx);
    background: var(--surf);
}

.dugme.odbijajuce:hover:not(:disabled) { background: var(--dg-bg); }

/* ============================================== ADMINISTRACIJA KATALOGA (A2) */

.admin-kartice {
    flex: none;
    display: flex;
    gap: 1px;
    border-bottom: 1px solid var(--line2);
}

.admin-kartice button {
    padding: .45rem .8rem;
    border: 0;
    background: none;
    color: var(--t2);
    font: inherit;
    font-size: .84rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: baseline;
    gap: .35rem;
}

.admin-kartice button.tekuca {
    color: var(--ac);
    border-bottom-color: var(--ac);
    font-weight: 600;
}

.admin-kartice .tiho { font-size: .74rem; }

.admin-telo {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: .75rem;
}

.admin-telo.tri { grid-template-columns: 190px minmax(0, 1fr) 300px; }
.admin-telo.dve { grid-template-columns: 250px minmax(0, 1fr); }

.admin-katalog .stavka {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: .45rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-katalog .stavka:hover { background: var(--surf3); }

.admin-katalog .stavka.izabrana {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
}

/* Ugasena usluga se VIDI, i to je ceo razlog zbog kog je spisak podrazumevano ne
   sakriva: sifarnici se gase preko Aktivan a ne brisu (pravilo 7), pa je ovo
   jedino mesto sa kog se ugasena vraca u rad. Prigusena je, ne sakrivena. */
.admin-katalog .stavka.ugasena,
.admin-katalog tr.ugasena { opacity: .55; }

.admin-katalog .stavka .ime {
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-katalog .stavka .pregled { font-size: .72rem; color: var(--t3); }

/* TRAKA POTROSENOG FONDA - ugovori o podrsci (U1 i U2).

   Ista traka u spisku i u obrascu, jedno pravilo: u spisku je to jedini podatak
   koji se cita ceo dan, a u obrascu stoji uz broj koji se menja. Dva pravila bi se
   razisla cim se jedno podesi.

   Sirina dolazi iz style="" na <i> jer je racunata iz podataka; boja NE - ona ide
   preko klase .blizu, da prag upozorenja ostane odluka u kodu a ne u atributu. */
.traka-fond {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: .25rem;
    border-radius: 2px;
    background: var(--surf3);
    overflow: hidden;
}

.traka-fond > i {
    display: block;
    height: 100%;
    background: var(--ac);
}

.traka-fond.blizu > i { background: var(--dg-tx); }

/* RED USLOVA TOKA - polje, operator, vrednost, brisanje.

   Operator ima FIKSNU sirinu, a polje i vrednost se rastezu: „je popunjeno" i
   „jednako" su razlicite duzine, pa bi padajuca lista koja se rasteze pomerala
   ostale kolone iz reda u red. */
.red-uslova {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
}

/* Kad operator ne trazi vrednost („postoji"), polje vrednosti se ne crta i red ima
   TRI deteta umesto cetiri. Broji se trece kao poslednje - `:nth-child(4)` bi
   pogodio pun red, ne skraceni. */
.red-uslova:has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr) 9.5rem auto;
}

@media (max-width: 900px) {
    .red-uslova,
    .red-uslova:has(> :nth-child(3):last-child) {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.obrazac-usluge { overflow-y: auto; padding: .8rem; }

.obrazac-tok {
    display: flex;
    flex-direction: column;
}

.admin-katalog fieldset.blok {
    border: 1px solid var(--line2);
    border-radius: var(--r);
    padding: .7rem .8rem .8rem;
    margin: 0 0 .8rem;
}

.admin-katalog fieldset.blok legend {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t3);
    font-weight: 700;
    padding: 0 .35rem;
}

.admin-katalog .mrezica {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .6rem;
}

.admin-katalog .mrezica .puna { grid-column: 1 / -1; }

.admin-katalog .prekidac {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    cursor: pointer;
}

.sifra-unos { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.izbor-organizacija {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .6rem;
}

.izbor-organizacija .cip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: .15rem .55rem;
    font-size: .78rem;
    cursor: pointer;
}

.izbor-organizacija .cip.izabran {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
    color: var(--ac-tx);
}

.izbor-organizacija .cip input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------- graditelj seme */

.graditelj {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surf2);
}

.graditelj-glava {
    flex: none;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--line);
}

.graditelj-glava .naslov { font-size: .82rem; font-weight: 650; }
.graditelj-glava .tiho { font-size: .72rem; margin-top: 2px; }

.graditelj-lista { padding: .6rem .65rem; flex: none; }

.graditelj-ponuda,
.graditelj-pregled {
    border-top: 1px solid var(--line);
    padding: .6rem .65rem;
}

.graditelj-pregled {
    background: var(--surf);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.graditelj .naslov {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t3);
    font-weight: 700;
    margin-bottom: .45rem;
}

.polje-seme {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    padding: .3rem .4rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r);
    margin-bottom: .3rem;
    font: inherit;
    text-align: left;
}

.polje-seme.dodaj { cursor: pointer; }
.polje-seme.dodaj:hover { border-color: var(--ac-ln); background: var(--ac-bg); }

/* Ugaseno polje se iz vec sastavljene seme NE izostavlja nego oznacava: precutano
   bi obavezno polje tiho nestalo iz narudzbine, a usluga bi i dalje tvrdila da ga
   trazi. Isprekidan okvir kaze „postoji, ali ga sifarnik vise ne nudi". */
.polje-seme.ugaseno { opacity: .62; border-style: dashed; }

.polje-seme .ime {
    flex: 1;
    min-width: 0;
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.polje-seme .tip {
    flex: none;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .62rem;
    color: var(--t3);
    background: var(--surf3);
    padding: .05rem .3rem;
    border-radius: 4px;
}

.polje-seme .plus { color: var(--ac); font-weight: 700; }

.polje-seme .dugme-ikona {
    flex: none;
    padding: 0 .2rem;
    font-size: .72rem;
    line-height: 1.4;
}

/* Obaveznost ima TRI stanja, ne dva - i sva tri se moraju razlikovati na prvi
   pogled. „Iz sifarnika" je najtise jer je podrazumevano; da izgleda kao izbor,
   ljudi bi ga menjali bez potrebe i time prekidali nasledjivanje (pravilo 26). */
.polje-seme .obaveznost {
    flex: none;
    font: inherit;
    font-size: .62rem;
    padding: .05rem .35rem;
    border-radius: 4px;
    border: 1px solid var(--line2);
    background: var(--surf2);
    color: var(--t3);
    cursor: pointer;
}

.polje-seme .obaveznost.trazi {
    background: var(--dg-bg);
    color: var(--dg-tx);
    border-color: var(--dg-ln);
    font-weight: 600;
}

.polje-seme .obaveznost.ne-trazi {
    background: var(--surf3);
    color: var(--t2);
}

/* ------------------------------------------------------------ sifarnik polja */

.mreza-polja {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.mreza-polja th {
    text-align: left;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t3);
    font-weight: 700;
    padding: .45rem .7rem;
    background: var(--surf2);
    border-bottom: 1px solid var(--line2);
    white-space: nowrap;
}

.mreza-polja td {
    padding: .45rem .7rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.mreza-polja td.broj {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    text-align: right;
}

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

.korak-adm {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r);
    margin-bottom: .35rem;
}

.korak-adm .br {
    width: 21px;
    height: 21px;
    flex: none;
    border-radius: 50%;
    background: var(--ac-bg);
    color: var(--ac-tx);
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 700;
}

.korak-adm .sred { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.korak-adm .ime { font-size: .82rem; font-weight: 550; }
.korak-adm .pod { font-size: .74rem; color: var(--t2); }

/* ------------------------------------------------------- graditelj koraka toka */

/* Korak je KARTICA, ne red tabele: nosi šest polja i do dva upozorenja, pa u red
   ne staje. Uz to se koraci pomeraju, a pomeranje se lakše prati kad je granica
   između njih vidljiva. */
.korak-obrazac {
    border: 1px solid var(--line2);
    border-radius: var(--r);
    padding: .55rem .65rem .65rem;
    margin-bottom: .55rem;
    background: var(--surf2);
}

.korak-vrh {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem;
}

.korak-vrh .br {
    width: 21px;
    height: 21px;
    flex: none;
    border-radius: 50%;
    background: var(--ac-bg);
    color: var(--ac-tx);
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 700;
}

.korak-vrh .ime { flex: 1; min-width: 0; font-weight: 550; }

.korak-polja {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
    align-items: end;
}

.korak-obrazac .upozorenje-red { margin: .55rem 0 0; }

/* Uslov toka se prikazuje kao ZAPIS, ne kao recenica: to je JSON koji motor cita
   doslovno, pa prelomljen ili ulepsan vise ne bi bio ono sto stoji u koloni. */
.zapis-uslova {
    margin: 0 0 .4rem;
    padding: .5rem .6rem;
    background: var(--surf2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .74rem;
    color: var(--t1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- uzak ekran */

@media (max-width: 1100px) {
    .katalog-telo {
        grid-template-columns: 180px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    /* Obrazac ide ISPOD, preko cele sirine - a ne u uzu traku: polja formulara
       na 200px postaju neupotrebljiva, a bas njih covek popunjava. */
    .katalog .obrazac-panel {
        grid-column: 1 / -1;
        max-height: 340px;
    }
}

@media (max-width: 1300px) {
    /* Graditelj seme ide ISPOD obrasca, preko cele sirine - a ne u uzu kolonu:
       ziv pregled na 200px vise nije pregled nego nagovestaj, a bas zbog njega je
       ovaj raspored i izabran. */
    .admin-telo.tri {
        grid-template-columns: 190px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .admin-katalog .graditelj {
        grid-column: 1 / -1;
        max-height: 320px;
        overflow-y: auto;
    }
}

@media (max-width: 900px) {
    .admin-telo.tri,
    .admin-telo.dve {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .admin-katalog .spisak-panel { max-height: 160px; }

    .odobrenja-telo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .odobrenja .spisak-panel { max-height: 220px; }

    .katalog-telo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .katalog .spisak-panel { max-height: 150px; }
}


/* =============================================================================
   OSETLJIV BLOK — matični broj zaposlenog.

   Jedini blok u aplikaciji koji izgleda drugačije od svojih suseda, i to je
   namerno: polje traži svoju dozvolu, ostavlja trag i ne stiže zajedno sa
   ostalim podacima. Da izgleda kao svako drugo polje, čovek bi ga tretirao kao
   svako drugo polje.
   ========================================================================== */
.blok.osetljivo {
    border: 1px dashed var(--wn-ln);
    background: var(--wn-bg);
}

.blok.osetljivo > legend {
    color: var(--wn-tx);
    font-weight: 600;
}

/* Broj se ispisuje monospace i razmaknuto: trinaest cifara se prepisuje rukom,
   a proporcionalno pismo tu greši. */
.maticni-broj {
    font-family: var(--pismo-kod);
    font-size: 15px;
    letter-spacing: .12em;
    color: var(--t1);
}

/* Trag „ko je gledao" stoji ISPOD polja, u istom bloku — ne u zasebnoj kartici.
   Ko otkrije broj mora u istom pogledu da vidi da je to zabeleženo. */
.spisak-tragova {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 12.5px;
}

.spisak-tragova li {
    display: flex;
    gap: 10px;
    align-items: baseline;
}