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

    Ovaj izvorni kod je vlasnistvo NIT Software Solutions i predstavlja poslovnu
    tajnu. Umnozavanje, distribucija ili koriscenje bilo kog dela bez pisane
    saglasnosti vlasnika nisu dozvoljeni.
   ----------------------------------------------------------------------------- */

/*
    EKRANI TIKETA
    -------------
    Nastavak nittiket.css, ne zamena. Ovde nema nijedne heks vrednosti - vazi
    isto pravilo kao u sekciji 1 osnovnog fajla: boja postoji samo kao token, a
    komponenta je uzima kroz var(--...). Cim se ovde pojavi upisana heks
    vrednost indiga, lista tiketa ostaje indigo i kad korisnik izabere teal, i
    niko ne zna zasto.

    Sama provera pre commit-a je grep: van sekcije 1 u nittiket.css ne sme da
    postoji znak "#" ispred sest heks cifara. Zato ga nema ni u ovom komentaru -
    provera koja se pali na sopstveno objasnjenje prestane da se cita.

    Ucitava se POSLE nittiket.css i posle syncfusion-most.css (vidi App.razor).
    Redosled je bitan samo za pravila koja premoscavaju mrezu (sekcija 4).

    Redosled sekcija:
      1. radna povrsina    2. panel filtera   3. traka grupnih radnji
      4. celije mreze      5. traka roka      6. preklop
      7. vremenska osa     8. polje odgovora  9. panel svojstava
     10. checklista (zona Z2 i traka Z3)
     11. evidencija vremena (zona V1)
*/

/* ============================================================================
   1. RADNA POVRSINA
   Lista tiketa ne stoji u obicnom platnu: filter panel i mreza dele visinu
   ekrana, a pomera se SAMO mreza. Kad bi se pomerala cela strana, filter bi
   nestao cim korisnik dodje do dvadesetog reda - a bas tada mu i treba.
   ============================================================================ */

.tiketi-radna {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
    /* Visina platna umanjena za gornju traku i za sopstveni razmak. */
    min-height: calc(100vh - var(--traka-visina) - 3.1rem);
    align-items: start;
}

.tiketi-lista {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Zaglavlje liste: naslov levo, broj rezultata i pretraga desno. */
.tiketi-zaglavlje {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.tiketi-zaglavlje h1 { margin: 0; }

.tiketi-broj {
    padding: .1rem .45rem;
    background: var(--surf3);
    border-radius: 9px;
    color: var(--t2);
    font-size: .74rem;
    font-weight: 600;
}

/* ============================================================================
   2. PANEL FILTERA
   Dva stanja, i oba su nosiva: razvucen 248px i sklopljen u traku od 40px.
   Sirina je token da bi je delili i panel i sklopljena traka.
   ============================================================================ */

.filter-panel {
    --filter-sirina: 248px;
    --filter-traka: 40px;

    width: var(--filter-sirina);
    flex: 0 0 auto;
    padding: .75rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    position: sticky;
    top: calc(var(--traka-visina) + .6rem);
    /* Filtera ume da bude vise nego sto stane; pomera se panel, ne strana. */
    max-height: calc(100vh - var(--traka-visina) - 2rem);
    overflow-y: auto;
}

.filter-panel.sklopljen {
    width: var(--filter-traka);
    padding: .4rem .2rem;
    overflow: visible;
}

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

.filter-vrh .naslov {
    flex: 1 1 auto;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t3);
}

/*
    Sklopljena traka. Natpis je uspravan jer je sirina 40px - vodoravno bi
    stalo tri slova. Brojac aktivnih filtera stoji IZNAD natpisa i vidi se i
    sklopljen: bez njega korisnik gleda "praznu" listu i ne zna zasto.
*/
.filter-sklopljena {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.filter-uspravno {
    writing-mode: vertical-rl;
    /* Bez ovoga tekst ide odozgo nadole naopako okrenut. */
    transform: rotate(180deg);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3);
    white-space: nowrap;
}

/* Brojac upaljenih filtera. Akcenat, ne siva: ovo je stanje koje korisnik
   mora da primeti, a ne pomocni podatak. */
.filter-brojac {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .3rem;
    background: var(--ac);
    border-radius: 10px;
    color: var(--n0);
    font-size: .7rem;
    font-weight: 600;
}

.filter-grupa { margin-bottom: .7rem; }

.filter-grupa > label {
    display: block;
    margin-bottom: .2rem;
}

.filter-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

.filter-par input { width: 100%; }

/* Prekidac sa kvacicom - "samo moji", "samo nedodeljeni", "samo otvoreni". */
.filter-prekidac {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem;
    font-size: .82rem;
    font-weight: 400;
    color: var(--t1);
    cursor: pointer;
}

.filter-prekidac input { width: auto; height: auto; margin: 0; }

.filter-podnozje {
    display: flex;
    gap: .4rem;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
}

/* Spisak oznaka u filteru - svaka je prekidac, ne stavka padajuce liste:
   oznake se biraju vise odjednom i moraju se videti sve odjednom. */
.filter-oznake {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-height: 120px;
    overflow-y: auto;
}

.oznaka-dugme {
    padding: .08rem .4rem;
    background: var(--surf3);
    border: 1px solid var(--line2);
    border-radius: 5px;
    color: var(--t2);
    font: inherit;
    font-size: .72rem;
    font-weight: 500;
    cursor: pointer;
}

.oznaka-dugme:hover { border-color: var(--line3); color: var(--t1); }

.oznaka-dugme.izabrana {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
    color: var(--ac-tx);
}

/* Sacuvani pogledi. Stoje u panelu filtera jer su to isti filteri, samo
   zapamceni - odvojeno mesto bi ih pretvorilo u drugi pojam. */
.pogled-red {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.pogled-red .naziv {
    flex: 1 1 auto;
    padding: .25rem .4rem;
    background: transparent;
    border: 0;
    border-radius: var(--r);
    color: var(--t1);
    font: inherit;
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pogled-red .naziv:hover { background: var(--surf3); }

/* ============================================================================
   3. TRAKA GRUPNIH RADNJI
   Pojavljuje se tek kad postoji izbor. Stalno prisutna traka sa ugasenim
   dugmadima uci korisnika da je preskace.
   ============================================================================ */

.grupne-radnje {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .45rem .6rem;
    background: var(--ac-bg);
    border: 1px solid var(--ac-ln);
    border-radius: var(--r2);
    color: var(--ac-tx);
    font-size: .82rem;
    font-weight: 500;
}

.grupne-radnje select { width: auto; min-width: 150px; }

.grupne-radnje .razmak { flex: 1 1 auto; }

/* ============================================================================
   4. CELIJE MREZE
   Gusti redovi: 34px je granica na kojoj dva reda teksta jos stanu, a na ekran
   staje trideset tiketa umesto sedamnaest.
   ============================================================================ */

/*
    Omotac oko mreze, a ne CssClass na njoj.

    Syncfusion u ovoj verziji NE prenosi vrednost svog `CssClass` na koreni
    element mreze - on nosi samo svoje klase (`sf-grid e-grid e-control ...`).
    Zbog toga su sva pravila pisana kao `.e-grid.tiketi-mreza` bila mrtva, pa
    celija nije dobijala ni visinu ni `line-height`. Nasledjeni `line-height: 0`
    iz Syncfusion teme je onda blok-elemente u celiji (naslov tiketa i
    organizaciju ispod njega) sabio na visinu nula - kolone TITLE i QUEUE su na
    ekranu bile potpuno prazne iako su podaci bili u DOM-u.

    `display: contents` znaci da omotac ne pravi sopstveni okvir, pa se raspored
    ne menja ni za piksel u odnosu na stanje bez njega.
*/
.tiketi-mreza { display: contents; }

.tiketi-mreza .e-grid .e-row .e-rowcell {
    padding-top: .25rem;
    padding-bottom: .25rem;
    line-height: 1.25;
}

.tiketi-mreza .e-grid .e-rowcell { height: 34px; }

/*
    ============================ PRELIVANJE PO SIRINI ==========================

    ODLUKA: mreza se pomera VODORAVNO SAMA, telo strane nikad.

    Sirina kolona se bira tako da pun spisak stane u radni prozor (na 1600px
    ostaje oko dvadesetak piksela viska), pa u svakodnevnom radu klizaca nema.
    Ali kolone se ne mogu suziti do sirine koja pokriva svaki prozor: SLA traka
    ispod 130px prestane da bude traka, a ime izvrsioca ispod 140px postane
    inicijal. Zato ispod te tacke mreza dobija sopstveni klizac.

    Zasto ne "sklanjanje kolona na uskom ekranu": dve kolone koje bi po sirini
    prve otpale - rok i poslednja aktivnost - su tacno one dve koje agent skenira
    kad ujutru otvori listu. Ekran koji ih sakrije nije uzi ekran nego drugi
    ekran.

    KLIZAC SE IZRICITO PRAVI VIDLJIVIM. Syncfusion vec stavlja overflow-x: auto
    na .e-content, ali Chrome za taj element crta PREKLOPNI klizac - traku koja
    se pojavi tek dok se pomera i ne zauzima prostor. Posledica je bila da je
    kolona DUE (SLA) odsecena, LAST ACTIVITY potpuno van vidnog polja, a nigde
    ni traga da desno ima jos necega. Cim se definise ::-webkit-scrollbar, Chrome
    za taj element prelazi na klasican klizac koji stalno stoji.
*/
.tiketi-mreza .e-grid .e-gridcontent .e-content {
    overflow-x: auto;
    scrollbar-width: thin;
}

.tiketi-mreza .e-grid .e-gridcontent .e-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.tiketi-mreza .e-grid .e-gridcontent .e-content::-webkit-scrollbar-track {
    background: var(--surf2);
}

.tiketi-mreza .e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb {
    background: var(--line3);
    border-radius: 5px;
}

.tiketi-mreza .e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb:hover {
    background: var(--t3);
}

/* Telo strane se NE pomera vodoravno ni pod kojim uslovom - samo mreza unutar
   svog okvira. Radna povrsina je grid sa minmax(0, 1fr), pa kolona sme da se
   suzi ispod sadrzaja; ovo je pojas i tregeri za slucaj da neka buduca celija
   ne postuje ellipsis. */
.tiketi-lista { overflow-x: clip; }

/*
    Zebra SAMO pri prelasku misem.
    Naizmenicne pozadine u gustoj listi prave optiku "traka po traka" i oko
    izgubi red na kome je stalo. Zato se naizmenicni red gasi, a istice se onaj
    ispod pokazivaca - jedini koji korisnika u tom trenutku zanima.
*/
.tiketi-mreza .e-grid .e-altrow .e-rowcell { background: var(--surf); }
.tiketi-mreza .e-grid .e-row:hover .e-rowcell { background: var(--surf3); }

.celija-sifra {
    font-family: var(--pismo-kod);
    font-size: .76rem;
    color: var(--t2);
    white-space: nowrap;
}

.celija-naslov {
    display: block;
    color: var(--t1);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.celija-podnaslov {
    display: block;
    font-size: .72rem;
    color: var(--t3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.celija-osoba {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.celija-osoba .avatar {
    width: 20px;
    height: 20px;
    font-size: .6rem;
}

.celija-osoba .ime {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prazno stanje u celiji nosi recenicu, ne ime - „Nema podsetnika", „Nikad
   uneto". Recenica je duza od imena, pa mora da se skracuje kao i ime; bez ovoga
   je tekst curio preko desne ivice poslednje kolone. */
.celija-osoba.prazna {
    color: var(--t3);
    font-style: italic;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   5. TRAKA ROKA
   NAJVAZNIJI VIZUELNI ELEMENT LISTE.

   Tri boje i sve tri kroz semanticke tokene: --ok dok ima vremena, --wn kad je
   potroseno preko osamdeset odsto (isti prag koji koristi SlaSatovi), --dg kad
   je rok prosao. Prekoracenje se ne oslanja samo na boju: traka je puna, dobija
   sarani sloj i tekst pise koliko je rok probijen. Boja sama ne prolazi kod
   osmine muskaraca i uz to nestaje u crno-beloj stampi izvestaja.
   ============================================================================ */

.sla {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 92px;
}

.sla-traka {
    position: relative;
    height: 5px;
    background: var(--surf3);
    border-radius: 3px;
    overflow: hidden;
}

/* Sirinu postavlja komponenta preko --udeo; boju bira klasa stanja. */
.sla-ispuna {
    display: block;
    height: 100%;
    width: var(--udeo, 0%);
    border-radius: 3px;
    background: var(--ok);
}

/* Tekst se ne prelama i ne sme da se odsece na pola slova: celija mreze ima
   overflow: hidden, pa je predugacak natpis izgledao kao kvar iscrtavanja.
   Tri tacke su posten kraj, a ceo tekst i dalje stoji u oblacicu i u
   aria-label-u cele trake. */
.sla-tekst {
    font-size: .7rem;
    font-weight: 500;
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    U REDU. Pravilo postoji izricito, iako je --ok vec podrazumevana ispuna:
    klasa bez ijednog pravila je mrtva klasa, a mrtva klasa u spisku stanja je
    poziv sledecem citaocu da je obrise - i onda "u redu" tiho postane isto sto
    i "nema roka". Cetiri stanja, cetiri pravila, bez izuzetka.
*/
.sla.uredu .sla-ispuna { background: var(--ok); }
.sla.uredu .sla-tekst { color: var(--ok-tx); }

.sla.upozorenje .sla-ispuna { background: var(--wn); }
.sla.upozorenje .sla-tekst { color: var(--wn-tx); }

.sla.opasnost .sla-ispuna { background: var(--dg); }

.sla.opasnost .sla-tekst {
    color: var(--dg-tx);
    font-weight: 600;
}

/*
    Prekoracen rok. Traka je puna i prugasta - drugi znak pored boje, koji
    prezivljava i daltonizam i crno-belu stampu.
*/
.sla.opasnost .sla-traka {
    background: var(--dg-bg);
    box-shadow: inset 0 0 0 1px var(--dg-ln);
}

.sla.opasnost .sla-ispuna {
    width: 100%;
    background-image: repeating-linear-gradient(
        135deg,
        var(--dg) 0 4px,
        var(--dg-tx) 4px 8px);
}

/*
    PAUZIRAN SAT. Nije isto sto i "nema roka" i ne sme tako da izgleda: rok
    postoji, potrosen je do neke tacke i nastavice da tece cim tiket izadje iz
    cekanja na klijenta. Do sada su oba stanja padala na klasu .nema, pa se
    pauziran tiket nije razlikovao od onog koji sat nikad nije ni imao - a to su
    dve razlicite radnje za agenta.

    Traka zato OSTAJE na potrosenom udelu, ali je zaledjena: kosa prugica u
    neutralnoj boji kaze "stoji", isto kao sto puna prugasta crvena kod
    prekoracenja kaze "probijeno". Boja se ne koristi kao jedini znak - tekst uz
    traku izricito pise da je pauziran.
*/
.sla.pauzirano .sla-traka { box-shadow: inset 0 0 0 1px var(--line2); }

.sla.pauzirano .sla-ispuna {
    background-color: var(--t3);
    background-image: repeating-linear-gradient(
        135deg,
        var(--t3) 0 3px,
        var(--surf3) 3px 6px);
}

.sla.pauzirano .sla-tekst {
    color: var(--t2);
    font-style: italic;
}

/* Tiket bez ugovorenog roka: nema sta da se puni, pa nema ni trake u boji -
   prazna siva traka posteno kaze da merenja nema. */
.sla.nema .sla-ispuna { width: 0; }
.sla.nema .sla-tekst { color: var(--t3); }

/* ============================================================================
   6. PREKLOP
   Detalj klizi PREKO liste zdesna. Lista ostaje ispod, sa svojim pomerajem i
   svojim izborom - povratak ne trazi ponovno ucitavanje ni trazenje reda.
   ============================================================================ */

/*
    Zatamnjenje. Klik po njemu zatvara preklop, isto sto i Esc.

    Boja dolazi kroz --zastor, a NE kao "najtamniji neutral + opacity". Tako je
    bilo do sada i u tamnoj temi se nije videlo nista: --n950 preko strane cija
    je pozadina bas --n950 pomeri boju za tri stepena sivog, pa su navigacija i
    panel filtera ostajali potpuno svetli i preklop nije izgledao kao sloj iznad
    nego kao drugi deo iste strane. Token nosi providnost u sebi i svaka tema mu
    bira jacinu.
*/
.zastor {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--zastor);
    border: 0;
    padding: 0;
    cursor: default;
}

.klizni {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(1040px, 94vw);
    background: var(--surf);
    border-left: 1px solid var(--line2);
    box-shadow: var(--sh3);
}

.klizni.uzak { width: min(680px, 94vw); }

.klizni-zaglavlje {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
}

.klizni-naslov { flex: 1 1 auto; min-width: 0; }

.klizni-naslov .sifra {
    font-family: var(--pismo-kod);
    font-size: .74rem;
    color: var(--t3);
}

/* Izmena naslova na licu mesta: polje izgleda kao tekst dok se ne dodirne. */
.naslov-izmena {
    width: 100%;
    height: auto;
    padding: .1rem .25rem;
    margin-left: -.25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r);
    color: var(--t1);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.018em;
}

.naslov-izmena:hover { border-color: var(--line2); }

.naslov-izmena:focus {
    background: var(--surf);
    border-color: var(--ac);
}

.klizni-znaci {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

/* Telo preklopa: leva kolona (osa + odgovor) i desni panel svojstava. */
.klizni-telo {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
}

.klizni-glavno {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.klizni-podnozje {
    padding: .6rem .9rem;
    border-top: 1px solid var(--line);
    background: var(--surf2);
}

/* ============================================================================
   7. VREMENSKA OSA
   Javna poruka i interna beleska moraju da se razlikuju NA PRVI POGLED.
   Najskuplja greska u ovom proizvodu je interna beleska poslata klijentu, pa
   interni zapis nosi tri znaka odjednom: drugu pozadinu, isprekidanu ivicu i
   natpis. Jedan znak se previdi, tri se ne previde.
   ============================================================================ */

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

.osa-stavka {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: .5rem;
}

.osa-znak {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surf3);
    color: var(--t2);
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
}

.osa-telo {
    min-width: 0;
    padding: .45rem .6rem;
    background: var(--surf2);
    border: 1px solid var(--line);
    border-radius: var(--r2);
}

.osa-zaglavlje {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
    font-size: .74rem;
    color: var(--t3);
}

.osa-zaglavlje .autor { font-weight: 600; color: var(--t2); }

.osa-sadrzaj { font-size: .84rem; color: var(--t1); }

.osa-sadrzaj p:last-child { margin-bottom: 0; }

/* Interna beleska. Tri znaka, ne jedan. */
.osa-stavka.interna .osa-telo {
    background: var(--wn-bg);
    border: 1px dashed var(--wn-ln);
}

.osa-stavka.interna .osa-znak {
    background: var(--wn-bg);
    color: var(--wn-tx);
}

.osa-stavka.interna .osa-sadrzaj { color: var(--wn-tx); }

/* Sistemski zapis - promena statusa, dodela, evidentirano vreme. Tisi je od
   poruka: to je trag, ne razgovor. */
.osa-stavka.sistemska .osa-telo {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
}

.osa-stavka.sistemska .osa-sadrzaj {
    font-size: .78rem;
    color: var(--t2);
}

/* Izmena komentara. Polje zauzima mesto samog teksta, ne stoji ispod njega:
   uporedan prikaz starog i novog navodi na to da su dva zapisa, a rec je o
   jednom koji se prepravlja. Stara vrednost ostaje u revizorskom tragu. */
.osa-izmena textarea {
    width: 100%;
    resize: vertical;
    font: inherit;
}

/* Radnja nad tudjim pogledom - „izmeni" stoji uz komentar i ne sme da izgleda
   kao glavno dugme ose. Zato tekst, a ne dugme sa okvirom. */
.dugme-tekst {
    margin-top: .3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--t2);
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    cursor: pointer;
}

.dugme-tekst:hover { color: var(--t1); }

/* ============================================================================
   8. POLJE ODGOVORA
   Prekidac javno/interno je KRUPAN namerno. Sitan prekidac uz polje za tekst
   je tacno onaj koji se previdi, a cena previda je interna beleska kod klijenta.
   ============================================================================ */

.prekidac-vidljivosti {
    display: inline-flex;
    gap: 0;
    margin-bottom: .45rem;
    padding: 2px;
    background: var(--surf3);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
}

.prekidac-opcija {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    padding: 0 .85rem;
    background: transparent;
    border: 0;
    border-radius: calc(var(--r2) - 2px);
    color: var(--t2);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}

.prekidac-opcija:hover { color: var(--t1); }

.prekidac-opcija.izabrana {
    background: var(--surf);
    color: var(--t1);
    box-shadow: var(--sh1);
}

/* Izabrano "interno" boji ceo prekidac, ne samo dugme: upozorenje mora da se
   vidi i kad oko gleda u polje za tekst, a ne u prekidac. */
.prekidac-opcija.izabrana.interna {
    background: var(--wn);
    color: var(--n0);
}

.odgovor-upozorenje {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
    padding: .3rem .5rem;
    background: var(--wn-bg);
    border: 1px solid var(--wn-ln);
    border-radius: var(--r);
    color: var(--wn-tx);
    font-size: .78rem;
    font-weight: 600;
}

.odgovor-red {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
}

.odgovor-red .razmak { flex: 1 1 auto; }

/* ============================================================================
   9. PANEL SVOJSTAVA
   Desno u preklopu, takodje sklopiv. Sirina je manja od filtera jer nosi
   parove natpis/vrednost, ne kontrole.
   ============================================================================ */

.svojstva {
    width: 246px;
    flex: 0 0 auto;
    padding: .8rem;
    background: var(--surf2);
    border-left: 1px solid var(--line);
    overflow-y: auto;
}

.svojstva.sklopljen {
    width: 36px;
    padding: .4rem .2rem;
    text-align: center;
}

.par + .par { margin-top: .5rem; }

.par-natpis {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t3);
}

.par-vrednost {
    display: block;
    font-size: .82rem;
    color: var(--t1);
    overflow-wrap: anywhere;
}

.par-vrednost.prazna { color: var(--t3); font-style: italic; }

/* Spisak priloga i predloga iz baze znanja - isto lice, dva mesta. */
.stavke-spisak {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.stavka-red {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem .45rem;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: .8rem;
}

.stavka-red .tiho { flex: 0 0 auto; }

.stavka-red .naslov {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prilog je od sada veza ka preuzimanju, ne obican tekst. Boja i podvlacenje
   se skidaju da red ostane isti kao pre, ali kursor i fokus ostaju - inace se
   ne vidi da se na njega moze kliknuti. */
a.stavka-red {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.stavka-red:hover { border-color: var(--ac); }

a.stavka-red:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 1px;
}

/* Dugme za prilaganje je <label> oko sakrivenog <input type="file">: sam input
   se ne da stilizovati, a label nosi i klik i fokus s tastature. */
.dugme-prilog {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    padding: .3rem .6rem;
    border: 1px dashed var(--line);
    border-radius: var(--r);
    font-size: .78rem;
    cursor: pointer;
}

.dugme-prilog:hover { border-color: var(--ac); }

.dugme-prilog input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ============================================================================
   10. CHECKLISTA TIKETA - zona (Z2) i traka (Z3)

   Jedna komponenta, dva rasporeda; ovde su samo dva okvira oko istih redova.
   Sam red je NAMERNO jedan red bez prelamanja: checklista se cita odozgo
   nadole kao spisak, a red koji se prelomi u dva reda ubija taj ritam i cini
   da spisak od dvanaest koraka izgleda kao dvadeset cetiri.

   Suzavanje nosi naslov, ne oznake: naslov je jedino sto sme da bude skraceno,
   jer stoji ceo u atributu title i u aria-label kucice.
   ============================================================================ */

/* --- Z2: zona iznad ose ------------------------------------------------- */

.zadaci-zona {
    flex: 0 0 auto;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--line);
    background: var(--surf2);
}

.zadaci-zaglavlje {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.zadaci-zaglavlje .razmak { flex: 1 1 auto; }

.zadaci-natpis {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--t2);
}

/* Traka napretka. Sopstvena, a ne .sla-traka: ta nosi znacenje hitnosti i
   menja boju po stanju roka, a napredak checkliste nije hitnost - zeleno na
   90% i crveno na 10% reklo bi nesto sto niko nije tvrdio. */
.zadaci-napredak {
    flex: 0 0 auto;
    width: 88px;
    height: 5px;
    border-radius: 3px;
    background: var(--surf3);
    overflow: hidden;
}

.zadaci-napredak i {
    display: block;
    height: 100%;
    background: var(--ac);
    transition: width .18s ease;
}

.zadaci-prazno {
    margin: 0;
    padding: .35rem 0;
    font-size: .8rem;
}

.zadaci-spisak {
    margin: 0;
    padding: 0;
    list-style: none;
}

.zadatak-stavka + .zadatak-stavka { margin-top: .15rem; }

/* --- red checkliste ----------------------------------------------------- */

/* Kolone su fiksne osim naslova: naslov je jedini koji sme da se skrati, pa
   sve ostalo (covek, rok, oznake, dugmad) ima svoje mesto i ne skace kad se
   naslov promeni. */
.zadatak-red {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .22rem .3rem;
    border-radius: var(--r2);
    white-space: nowrap;
}

.zadatak-red:hover { background: var(--surf3); }

.zadatak-kucica {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.zadatak-kucica:disabled { cursor: default; }

.zadatak-naslov {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .84rem;
    color: var(--t1);
}

.zadatak-covek {
    flex: 0 0 auto;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .76rem;
}

.zadatak-rok {
    flex: 0 0 auto;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.zadatak-oznake {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Skinut korak i dalje stoji na spisku - preskocen ili zavrsen, on je deo
   price o tome sta je uradjeno. Precrtan i utisan, ali vidljiv. */
.zadatak-red.gotov .zadatak-naslov {
    color: var(--t3);
    text-decoration: line-through;
}

/* --- obrasci na licu mesta ---------------------------------------------- */

/* Razlog preskakanja i obrazac koraka stoje UNUTAR zone, ne u modalu preko
   ekrana - isti presedan kao potvrda brisanja u mehuru poruke. Modal bi zbog
   jednog koraka zaustavio ceo preklop i oteo fokus sa ose. */
.zadatak-razlog,
.zadatak-obrazac {
    margin: .35rem 0 .2rem 1.6rem;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ac);
    border-radius: var(--r2);
    background: var(--surf);
}

.zadatak-obrazac { margin-left: 0; }

.zadatak-obrazac .zadaci-natpis { margin-bottom: .4rem; }

.zadatak-razlog > label,
.zadatak-obrazac label {
    display: block;
    margin-bottom: .2rem;
    font-size: .74rem;
    color: var(--t2);
}

/* --- Z3: traka u zaglavlju ---------------------------------------------- */

/* Traka bez blokirajuceg koraka nema ni okvir ni pozadinu: obecanje je da ne
   zauzima mesto kad nema sta da kaze. Cim nesto drzi resavanje, dobija ram. */
.zadaci-traka {
    margin-top: .3rem;
}

.zadaci-traka.drzi {
    padding: .3rem .4rem;
    border: 1px solid var(--dg);
    border-radius: var(--r2);
    background: var(--surf2);
}

.zadaci-sazeto {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .1rem .25rem;
    border: 0;
    border-radius: var(--r2);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.zadaci-sazeto:hover { background: var(--surf3); }

.zadaci-sazeto:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 1px;
}

.zadaci-razvijeno {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid var(--line);
}

/* ============================================================================
   11. EVIDENCIJA VREMENA - zona u preklopu tiketa (V1)

   ZASTO OVDE, A NE U vreme.css. Zona zivi unutar .klizni-glavno, odmah do
   .zadaci-zona, i pozajmljuje isti okvir, isti natpis i isti .odgovor-red.
   Izdvojena u sopstveni fajl, lice preklopa bi bilo podeljeno na dva mesta koja
   se moraju menjati zajedno - a jedno od njih bi se jednog dana zaboravilo.
   Strana /vreme (V3) je druga prica: ona ne deli sa preklopom nijedan okvir, pa
   ima svoj fajl.

   Tabela, a ne spisak redova kao kod checkliste: ovde se BROJEVI porede po
   koloni (trajanje uz trajanje, iznos uz iznos), a to spisak ne moze.
   ============================================================================ */

.vreme-zona {
    flex: 0 0 auto;
    padding: .6rem .9rem;
    border-top: 1px solid var(--line);
    background: var(--surf2);
}

.vreme-zaglavlje {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.vreme-zaglavlje .razmak { flex: 1 1 auto; }

/* Isti natpis kao nad checklistom - dve zone jedna ispod druge ne smeju da se
   predstavljaju razlicito. */
.vreme-natpis {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--t2);
}

.vreme-prazno {
    margin: 0;
    padding: .35rem 0;
    font-size: .8rem;
}

.vreme-tabela { font-size: .82rem; }

.vreme-tabela .uz-desno { text-align: right; }

/* Opis je jedino sto sme da bude skraceno: ceo stoji u atributu title, a sve
   ostalo u redu je broj ili oznaka, koje skracivanje cini neupotrebljivim. */
.vreme-opis {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vreme-radnje {
    white-space: nowrap;
    text-align: right;
}

.vreme-radnje .dugme-tekst + .dugme-tekst { margin-left: .45rem; }

.vreme-iznos { font-variant-numeric: tabular-nums; }

/* Obrazac na licu mesta stoji u redu tabele, preko svih kolona - isti presedan
   kao razlog preskakanja u checklisti. Modal bi zbog jednog polja zaustavio ceo
   preklop i oteo fokus sa ose. */
.vreme-obrazac-red td {
    background: var(--surf3);
    padding: .55rem .5rem;
}

.vreme-obrazac .vreme-natpis { display: block; margin-bottom: .4rem; }

.vreme-razlog { display: block; }

.vreme-razlog label {
    display: block;
    margin-bottom: .25rem;
    font-size: .78rem;
    color: var(--t2);
}

.vreme-razlog input { width: 100%; }

/* --- brz unos: tri polja u jednom redu ---------------------------------- */

.vreme-unos {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.vreme-unos-trajanje { flex: 0 0 7rem; }
.vreme-unos-vrsta { flex: 0 0 11rem; }

/* Opis uzima ostatak reda: on je jedino polje kome duzina zaista treba, a i
   jedino koje se pise slobodno. */
.vreme-unos-opis { flex: 1 1 12rem; min-width: 0; }

.vreme-unos .filter-grupa { margin: 0; }

/* --- obrazlozenja odbijanja --------------------------------------------- */

.vreme-odbijanja {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--line2);
}

.vreme-odbijanja-spisak {
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .82rem;
}

.vreme-odbijanja-spisak li {
    display: flex;
    gap: .5rem;
    padding: .2rem 0;
    align-items: baseline;
    flex-wrap: wrap;
}

.vreme-napomena {
    margin: .35rem 0 0;
    font-size: .76rem;
}

/* ----------------------------------------------------------------------------
   Uzak ekran. Filter panel i panel svojstava ne mogu da dele sirinu sa listom
   ispod 1100px - tada se filter sam sklapa u traku, a svojstva se gase.
   ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .klizni-telo { grid-template-columns: minmax(0, 1fr); }
    .svojstva { display: none; }

    /* Na uskom ekranu red i dalje ne sme da se prelomi, pa prvo odlazi ono sto
       se moze naci na drugom mestu: ime coveka stoji i u obrascu ispravke. */
    .zadatak-covek { display: none; }

    /* Isto pravilo za tabelu vremena: opis se skracuje jos vise, jer ceo stoji u
       atributu title, a brojevi i oznake pored njega skracivanje ne trpe. */
    .vreme-opis { max-width: 12rem; }
}

@media (max-width: 860px) {
    .tiketi-radna { grid-template-columns: minmax(0, 1fr); }

    .filter-panel {
        width: auto;
        position: static;
        max-height: none;
    }

    .klizni { width: 100vw; }
}