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

/*
    NAJVAZNIJE PRAVILO OVOG FAJLA
    -----------------------------
    Nijedna komponenta ne sme da sadrzi heks vrednost. Boje postoje samo u
    sekciji 1 (tokeni); sve ispod nje boju uzima iskljucivo kroz var(--...).

    Razlog: tema se menja postavljanjem jednog atributa na <html>. Cim jedna
    dugmad negde ima upisan #4f46e5, ta dugmad ostaje indigo i u tamnoj temi i
    kad korisnik izabere teal - i niko ne zna zasto, jer se boja ne vidi u
    tokenima nego u sredini fajla.

    Provera pre commit-a: van sekcije 1 ne sme da postoji nijedan znak "#"
    ispred sest heks cifara.

    Font Inter se ucitava iz App.razor preko <link>, ne kroz @import - @import
    blokira parsiranje i dolazi jedan mrezni skok kasnije nego link u <head>.

    Redosled sekcija:
      1. tokeni        2. tipografija   3. ljuska        4. navigacija
      5. kontrole      6. tabela        7. stanja
*/

/* ============================================================================
   1. TOKENI
   Jedina sekcija u kojoj se pojavljuje heks vrednost.

   Tri stanja teme, jer ih pretrazivac razlikuje:
     - data-tema="light"  -> uvek svetla
     - data-tema="dark"   -> uvek tamna
     - data-tema="system" ili atributa nema -> odlucuje prefers-color-scheme

   Zato dark blok ima gard :not([data-tema="light"]): bez njega bi korisnik
   koji je izricito trazio svetlu temu na tamnom operativnom sistemu ipak
   dobio tamnu.
   ============================================================================ */

/* --- 1.1 neutralna skala i semanticki sloj: svetla tema ------------------- */
:root {
    /* Neutralna skala. Komponente je NE koriste direktno - koriste semanticka
       imena ispod, da bi promena teme bila promena jednog bloka. */
    --n0: #ffffff;
    --n25: #fcfcfd;
    --n50: #f8f9fb;
    --n100: #f1f3f7;
    --n150: #e8ebf1;
    --n200: #dde1ea;
    --n300: #c3c9d6;
    --n400: #98a1b3;
    --n500: #6b7488;
    --n600: #4d5566;
    --n700: #363d4d;
    --n800: #242a37;
    --n900: #171b24;
    --n950: #0f1219;

    /* Semanticki sloj - ovo komponente smeju da koriste. */
    --bg: var(--n50);      /* pozadina cele strane */
    --surf: var(--n0);     /* povrsina kartice, panela, reda tabele */
    --surf2: var(--n25);   /* povrsina drugog nivoa (parni red, podnozje) */
    --surf3: var(--n100);  /* povrsina treceg nivoa (zaglavlje tabele, hover) */
    --line: var(--n150);   /* najtanja linija - razdvajanje unutar panela */
    --line2: var(--n200);  /* linija okvira panela i kontrole */
    --line3: var(--n300);  /* naglasena linija - fokus okvir, aktivna ivica */
    --t1: var(--n900);     /* osnovni tekst */
    --t2: var(--n600);     /* prigusen tekst, natpisi */
    --t3: var(--n400);     /* najtisi tekst, pomocna objasnjenja */

    /* Opasnost, upozorenje, u redu. Cetiri vrednosti svaka: puna boja, blaga
       pozadina, tekst na toj pozadini, linija oko nje. */
    --dg: #dc2626;
    --dg-bg: #fef2f2;
    --dg-tx: #991b1b;
    --dg-ln: #fecaca;

    --wn: #d97706;
    --wn-bg: #fffbeb;
    --wn-tx: #92400e;
    --wn-ln: #fde3a7;

    --ok: #059669;
    --ok-bg: #ecfdf5;
    --ok-tx: #065f46;
    --ok-ln: #b3e6cf;

    /*
        Zastor ispod preklopa. Zaseban token, a NE "crna sa opacity" na samom
        elementu: u tamnoj temi je pozadina strane vec skoro crna, pa je crn
        zastor preko nje nevidljiv - navigacija i panel filtera su ostajali
        potpuno svetli i preklop nije izgledao kao sloj iznad. Zato svaka tema
        bira svoju jacinu, a element uzima gotovu vrednost bez opacity-ja
        (opacity bi prigusio i ono sto stoji IZNAD zastora).
    */
    --zastor: rgba(15, 18, 25, .48);

    /* Oblik i dubina. Senka postoji samo za ono sto stvarno lebdi iznad
       strane - panel koji se ne pomera nema senku nego liniju. */
    --r: 7px;
    --r2: 10px;
    --sh1: 0 1px 2px rgba(15, 18, 25, .06);
    --sh2: 0 4px 12px rgba(15, 18, 25, .08);
    --sh3: 0 12px 32px rgba(15, 18, 25, .14);

    /* Sirina leve navigacije i visina gornje trake - dele ih ljuska,
       navigacija i preklop, pa stoje kao token a ne kao broj na tri mesta. */
    --bocna-sirina: 212px;
    --traka-visina: 52px;

    --pismo: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --pismo-kod: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* --- 1.2 akcenat: svetla tema -------------------------------------------- */
/* Indigo je podrazumevan, pa se pise i bez atributa i sa njim: bez prve grane
   nova sesija nema akcenat, bez druge se povratak na indigo ne bi video. */
:root,
:root[data-akcenat="indigo"] {
    --ac: #4f46e5;
    --ac-h: #4338ca;
    --ac-bg: #eef0fe;
    --ac-tx: #3730a3;
    --ac-ln: #c7cbf9;
}

:root[data-akcenat="teal"] {
    --ac: #0d9488;
    --ac-h: #0f766e;
    --ac-bg: #effcf9;
    --ac-tx: #115e56;
    --ac-ln: #b6e8e0;
}

:root[data-akcenat="amber"] {
    --ac: #b45309;
    --ac-h: #92400e;
    --ac-bg: #fff8ed;
    --ac-tx: #8a4008;
    --ac-ln: #fbdcb5;
}

:root[data-akcenat="rose"] {
    --ac: #be123c;
    --ac-h: #9f1239;
    --ac-bg: #fff1f4;
    --ac-tx: #9f1239;
    --ac-ln: #fbcdd8;
}

/* --- 1.3 tamna tema po zelji operativnog sistema -------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) {
        --bg: var(--n950);
        --surf: var(--n900);
        --surf2: #1b202a;
        --surf3: var(--n800);
        --line: #252b37;
        --line2: #2f3745;
        --line3: #414a5c;
        --t1: #e9ecf2;
        --t2: #98a1b3;
        --t3: #6b7488;

        --dg: #f87171;
        --dg-bg: #301618;
        --dg-tx: #fca5a5;
        --dg-ln: #4d2124;

        --wn: #fbbf24;
        --wn-bg: #2e2312;
        --wn-tx: #fcd34d;
        --wn-ln: #4a3818;

        --ok: #34d399;
        --ok-bg: #0f2b22;
        --ok-tx: #6ee7b7;
        --ok-ln: #1c4638;

        /* Na tamnoj podlozi senka mora biti crnja i sira - ista senka koja se
           vidi na beloj strani na crnoj nestane. */
        --sh1: 0 1px 2px rgba(0, 0, 0, .40);
        --sh2: 0 4px 12px rgba(0, 0, 0, .48);
        --sh3: 0 12px 32px rgba(0, 0, 0, .60);

        /* Jaci nego u svetloj temi: razlika izmedju --n900 i --n950 je svega
           nekoliko stepeni sivog, pa blag zastor na crnom nema sta da zatamni. */
        --zastor: rgba(0, 0, 0, .68);
    }

    :root:not([data-tema="light"]):is(:not([data-akcenat]), [data-akcenat="indigo"]) {
        --ac: #7c73f0;
        --ac-h: #8f88f4;
        --ac-bg: #1e1f3d;
        --ac-tx: #b6b1f7;
        --ac-ln: #332f5c;
    }

    :root:not([data-tema="light"])[data-akcenat="teal"] {
        --ac: #2dd4bf;
        --ac-h: #5eead4;
        --ac-bg: #0d2b28;
        --ac-tx: #7fe8db;
        --ac-ln: #15453f;
    }

    :root:not([data-tema="light"])[data-akcenat="amber"] {
        --ac: #f0a03c;
        --ac-h: #f6b45e;
        --ac-bg: #2c2011;
        --ac-tx: #f7c98a;
        --ac-ln: #4a341a;
    }

    :root:not([data-tema="light"])[data-akcenat="rose"] {
        --ac: #fb7185;
        --ac-h: #fda4af;
        --ac-bg: #2f1520;
        --ac-tx: #fda4af;
        --ac-ln: #4d2030;
    }
}

/* --- 1.4 tamna tema po izricitom izboru korisnika ------------------------- */
/* Isti sadrzaj kao blok iznad. Ne moze da se sazme u jedan selektor: media
   upit i atribut su dva nezavisna uslova, a ovaj mora da pobedi i kad je
   operativni sistem svetao. */
:root[data-tema="dark"] {
    --bg: var(--n950);
    --surf: var(--n900);
    --surf2: #1b202a;
    --surf3: var(--n800);
    --line: #252b37;
    --line2: #2f3745;
    --line3: #414a5c;
    --t1: #e9ecf2;
    --t2: #98a1b3;
    --t3: #6b7488;

    --dg: #f87171;
    --dg-bg: #301618;
    --dg-tx: #fca5a5;
    --dg-ln: #4d2124;

    --wn: #fbbf24;
    --wn-bg: #2e2312;
    --wn-tx: #fcd34d;
    --wn-ln: #4a3818;

    --ok: #34d399;
    --ok-bg: #0f2b22;
    --ok-tx: #6ee7b7;
    --ok-ln: #1c4638;

    --sh1: 0 1px 2px rgba(0, 0, 0, .40);
    --sh2: 0 4px 12px rgba(0, 0, 0, .48);
    --sh3: 0 12px 32px rgba(0, 0, 0, .60);

    --zastor: rgba(0, 0, 0, .68);
}

:root[data-tema="dark"]:is(:not([data-akcenat]), [data-akcenat="indigo"]) {
    --ac: #7c73f0;
    --ac-h: #8f88f4;
    --ac-bg: #1e1f3d;
    --ac-tx: #b6b1f7;
    --ac-ln: #332f5c;
}

:root[data-tema="dark"][data-akcenat="teal"] {
    --ac: #2dd4bf;
    --ac-h: #5eead4;
    --ac-bg: #0d2b28;
    --ac-tx: #7fe8db;
    --ac-ln: #15453f;
}

:root[data-tema="dark"][data-akcenat="amber"] {
    --ac: #f0a03c;
    --ac-h: #f6b45e;
    --ac-bg: #2c2011;
    --ac-tx: #f7c98a;
    --ac-ln: #4a341a;
}

:root[data-tema="dark"][data-akcenat="rose"] {
    --ac: #fb7185;
    --ac-h: #fda4af;
    --ac-bg: #2f1520;
    --ac-tx: #fda4af;
    --ac-ln: #4d2030;
}

/* --- 1.5 uzorci akcenta -------------------------------------------------- */
/*
    Plocica za izbor akcenta mora da prikaze boju KOJU NUDI, a ne onu koja je
    trenutno izabrana - inace sve cetiri izgledaju isto. Tekuci --ac za to ne
    valja, pa svaka plocica dobija svoj uzorak.

    Klase stoje ovde, u sekciji tokena, upravo zato sto nose heks vrednost.
    Same vrednosti su iste kao u 1.2 i 1.3 - jedan izvor palete, dva mesta
    upotrebe. Tamne varijante idu uz temu, da uzorak ne bi svetleo na crnom.
*/
.uzorak-indigo { --uzorak: #4f46e5; }
.uzorak-teal { --uzorak: #0d9488; }
.uzorak-amber { --uzorak: #b45309; }
.uzorak-rose { --uzorak: #be123c; }

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) .uzorak-indigo { --uzorak: #7c73f0; }
    :root:not([data-tema="light"]) .uzorak-teal { --uzorak: #2dd4bf; }
    :root:not([data-tema="light"]) .uzorak-amber { --uzorak: #f0a03c; }
    :root:not([data-tema="light"]) .uzorak-rose { --uzorak: #fb7185; }
}

:root[data-tema="dark"] .uzorak-indigo { --uzorak: #7c73f0; }
:root[data-tema="dark"] .uzorak-teal { --uzorak: #2dd4bf; }
:root[data-tema="dark"] .uzorak-amber { --uzorak: #f0a03c; }
:root[data-tema="dark"] .uzorak-rose { --uzorak: #fb7185; }

/* --- 1.6 uzorci teme ----------------------------------------------------- */
/*
    Mala slika teme u plocici za izbor mora da pokaze temu KOJU NUDI. Kad bi
    uzimala tekuce tokene, sve tri plocice bile bi iste boje i izbor "svetla"
    bi na tamnoj temi izgledao crno.

    Zato ove tri klase nose neutrale nezavisne od teme - i zato stoje u sekciji
    tokena, gde heks vrednost sme da postoji. Traka akcenta unutar slike ostaje
    na var(--ac): akcenat je nezavisan od teme i tu se bas i vidi kako se dve
    postavke slazu.

    SELEKTOR MORA DA NOSI I .plocica-slika. Bez toga su ove klase imale istu
    specificnost kao .plocica-slika iz sekcije 5, a ta sekcija dolazi kasnije u
    fajlu - pa je njen background: var(--bg) pobedjivao i sve TRI plocice su
    izgledale isto. Na tamnoj temi su sve tri bile crne, na svetloj sve tri bele,
    i izbor teme se na slici nije video uopste.
*/
.plocica-slika.uzorak-svetla { background: #f8f9fb; border-color: #dde1ea; }
.plocica-slika.uzorak-svetla i { background: #dde1ea; }

.plocica-slika.uzorak-tamna { background: #0f1219; border-color: #2f3745; }
.plocica-slika.uzorak-tamna i { background: #2f3745; }

/* "Po sistemu" je oba stanja odjednom - dijagonala kaze da odluka nije nasa. */
.plocica-slika.uzorak-sistem {
    background: linear-gradient(115deg, #f8f9fb 0 50%, #0f1219 50% 100%);
    border-color: #98a1b3;
}

.plocica-slika.uzorak-sistem i { background: #98a1b3; }

/* Pretrazivac ovim bira i svoju paletu: trake za pomeranje, okvir polja i
   ugradjene kontrole. Bez toga u tamnoj temi ostaju bele trake sa strane. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { color-scheme: dark; } }
:root[data-tema="dark"] { color-scheme: dark; }

/* ============================================================================
   2. TIPOGRAFIJA
   ============================================================================ */

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

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--pismo);
    font-size: 13.5px;
    line-height: 1.5;
    /* Inter u ovim velicinama bez ovoga izgleda razmaknuto. */
    letter-spacing: -.006em;
    background: var(--bg);
    color: var(--t1);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 .5rem;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--t1);
}

h1 { font-size: 1.3rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
h4 { font-size: .85rem; }

p { margin: 0 0 .75rem; }

a {
    color: var(--ac);
    text-decoration: none;
}

a:hover { color: var(--ac-h); text-decoration: underline; }

small,
.tiho {
    font-size: .8rem;
    color: var(--t2);
}

.najtise { color: var(--t3); }

code, kbd { font-family: var(--pismo-kod); }

/* Vidljiv fokus je pristupacnost, ne ukras. Uklanja se samo podrazumevani
   okvir pretrazivaca, i to zato sto ga zamenjuje jaci. */
:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
    border-radius: var(--r);
}

/* ============================================================================
   3. LJUSKA
   Tri zone ekrana:
     .ljuska   - mreza koja deli stranu na levu traku i ostatak
     .bocna    - leva navigacija, fiksne sirine, ne pomera se sa sadrzajem
     .glavno   - kolona sa gornjom trakom i platnom
     .traka    - gornja traka: pretraga, obavestenja, tema, primarna radnja
     .platno   - jedino mesto koje se pomera; ovde se iscrtava @Body
   ============================================================================ */

.ljuska {
    display: grid;
    grid-template-columns: var(--bocna-sirina) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--bg);
}

.bocna {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .6rem .5rem;
    background: var(--surf);
    border-right: 1px solid var(--line);
    /* Navigacija ostaje na mestu dok se lista tiketa pomera; sopstveni
       overflow joj treba jer sadrzaj grupa moze da predje visinu ekrana. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

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

.traka {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: var(--traka-visina);
    padding: 0 1rem;
    background: var(--surf);
    border-bottom: 1px solid var(--line);
    /* Lepi se za vrh: primarna radnja i pretraga moraju da budu dohvatljive i
       na hiljaditom redu liste. */
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Guma izmedju leve i desne polovine trake. */
.traka-razmak { flex: 1 1 auto; }

.platno {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.1rem 1.25rem 2rem;
}

/* Panel je povrsina koja NE lebdi - zato linija, ne senka. */
.panel {
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    padding: 1rem;
}

.panel + .panel { margin-top: .9rem; }

.panel-naslov {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .15rem;
    font-size: .95rem;
    font-weight: 600;
}

.panel-opis {
    margin: 0 0 .9rem;
    font-size: .8rem;
    color: var(--t2);
}

/*
    PANEL FIRME - isti panel, drugacije lice.

    Postoji zbog jedne greske koja se ne vidi kad se napravi: na strani
    podesavanja stoje panel koji menja SOPSTVENI nalog i panel koji menja pravilo
    za CELU firmu, a dva prekidaca izgledaju isto bez obzira na to koga menjaju.
    Administrator je jedini koji vidi oba, pa je jedini koji moze da iskljuci
    proveru svima misleci da je iskljucuje sebi.

    Razliku zato nose tri stvari zajedno: naslov odeljka, recenica ispod njega i
    ova traka uz levu ivicu panela. Boja sama ne bi bila dovoljna - nestaje u
    crno-beloj stampi i kod daltonizma, isto obrazlozenje kao kod natpisa
    „interno" na vremenskoj osi.
*/
.panel.firme {
    border-color: var(--wn-ln);
    border-left: 3px solid var(--wn);
}

/* Naslov grupe panela. Ne .panel-naslov: taj stoji UNUTAR panela i imenuje
   jedno podesavanje, a ovaj stoji IZNAD grupe i imenuje koga ta grupa menja. */
.odeljak-naslov {
    margin: 1.4rem 0 .2rem;
    font-size: 1rem;
    font-weight: 600;
}

.odeljak-naslov:first-of-type { margin-top: .2rem; }

.odeljak-opis {
    margin: 0 0 .6rem;
    font-size: .82rem;
    color: var(--t2);
}

/* Preklop lebdi iznad strane (padajuci spisak obavestenja, prekidac teme,
   meni naloga) - jedino ovakvo lice sme da nosi senku. */
.preklop {
    position: absolute;
    z-index: 40;
    min-width: 232px;
    padding: .45rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    box-shadow: var(--sh3);
}

.preklop-desno { right: 0; }

.preklop-naslov {
    padding: .3rem .45rem .4rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t3);
}

/* Nevidljiva podloga koja hvata klik van preklopa i zatvara ga. Bez nje se
   padajuci spisak zatvara samo ponovnim klikom na isto dugme. */
.preklop-podloga {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
}

/* Sidro daje preklopu koordinatni pocetak; bez njega bi se lepio za stranu. */
.sidro { position: relative; }

/* ============================================================================
   4. NAVIGACIJA
   ============================================================================ */

.logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: calc(var(--traka-visina) - .6rem);
    padding: 0 .45rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--t1);
}

.logo:hover { text-decoration: none; color: var(--t1); }

/*
   Znak NIT-a u bocnoj traci.

   Do 04.09.2026. je ovo bio kvadrat iscrtan iz CSS-a, sa slovima „NT" i
   pozadinom u boji akcenta - privremeni znak iz vremena kad logotipa nije bilo.
   Sada je slika iz brend-paketa, pa NEMA ni background ni color: zastitni znak
   se ne preboji akcentom firme koja ga koristi.

   Poluprecnik je u samom SVG-u (rx=28 na 120), pa se ovde ne ponavlja - dva
   mesta bi se razisla pri prvoj izmeni znaka.
*/
.logo-znak {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* Polje pretrage u levoj traci je precica, ne pravo polje: klik vodi na
   pretragu, a natpis podseca na precicu sa tastature. */
.pretraga {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    margin: .2rem 0 .5rem;
    padding: .35rem .5rem;
    background: var(--surf2);
    border: 1px solid var(--line2);
    border-radius: var(--r);
    color: var(--t3);
    font: inherit;
    font-size: .8rem;
    text-align: left;
    cursor: text;
}

/* Lupa u levoj traci mora da dobije velicinu. SVG bez width/height nema
   sopstvenu velicinu, a roditelj je flex, pa se ikonica razvlacila preko cele
   visine dugmeta - na ekranu je izgledala kao ogromna lupa preko pola bocne
   trake. Ista velicina kao lupa u gornjoj traci. */
.pretraga svg {
    flex: none;
    width: 15px;
    height: 15px;
}

.pretraga:hover { border-color: var(--line3); }

.precica {
    margin-left: auto;
    padding: .05rem .3rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: 4px;
    font-size: .68rem;
    color: var(--t3);
    white-space: nowrap;
}

.nav-grupa { margin-top: .45rem; }

.nav-naslov {
    padding: .35rem .5rem .2rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3);
}

.nav-stavka {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .5rem;
    border-radius: var(--r);
    color: var(--t2);
    font-size: .83rem;
    font-weight: 500;
    text-decoration: none;
}

.nav-stavka:hover {
    background: var(--surf3);
    color: var(--t1);
    text-decoration: none;
}

/* NavLink sam dodaje klasu "active" na stavku tekuce rute. */
.nav-stavka.active {
    background: var(--ac-bg);
    color: var(--ac-tx);
}

.nav-ikona {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    opacity: .85;
}

.nav-tekst {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brojac uz stavku - koliko tiketa ceka, koliko rokova istice. */
.nav-brojac {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 0 .3rem;
    background: var(--surf3);
    border-radius: 9px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    color: var(--t2);
}

.nav-stavka.active .nav-brojac {
    background: var(--ac);
    color: var(--n0);
}

.nav-brojac.hitno {
    background: var(--dg-bg);
    color: var(--dg-tx);
}

/* Nalog stoji na dnu leve trake; margin-top:auto ga gura tamo bez obzira na
   to koliko grupa ima iznad. */
.nalog {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding: .45rem;
    border-top: 1px solid var(--line);
}

.nalog-podaci {
    min-width: 0;
    line-height: 1.25;
}

.nalog-ime {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Odjava se gura na desnu ivicu naloga; sam formular nema svoj izgled. */
.nalog .odjava { margin-left: auto; }

.avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ac-bg);
    color: var(--ac-tx);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
}

.avatar.veliki {
    width: 38px;
    height: 38px;
    font-size: .9rem;
}

/* Slika naloga na mestu inicijala. Isti krug, iste mere - da red ne poskoci kad
   jedan covek ima sliku a drugi nema.

   object-fit: cover je ovde OBAVEZAN, ne ukras: slika naloga je proizvoljnog
   odnosa strana, a bez njega bi se rastegla u krug i lice bi bilo izobliceno.
   background ostaje, jer se vidi dok se slika ucitava. */
img.avatar {
    object-fit: cover;
}

/* ============================================================================
   5. KONTROLE
   ============================================================================ */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 30px;
    padding: 0 .7rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r);
    color: var(--t1);
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.dugme:hover { background: var(--surf3); border-color: var(--line3); }

.dugme:disabled { opacity: .5; cursor: not-allowed; }

.dugme.primarno {
    background: var(--ac);
    border-color: var(--ac);
    /* Tekst na punom akcentu je uvek beo, i u tamnoj temi: --ac je u obe teme
       dovoljno zasicen da beli tekst na njemu ima kontrast. */
    color: var(--n0);
}

.dugme.primarno:hover { background: var(--ac-h); border-color: var(--ac-h); }

.dugme.opasno {
    background: var(--dg);
    border-color: var(--dg);
    color: var(--n0);
}

/* Tiho dugme nema okvir dok se ne dodirne - za radnje u traci koje ne smeju
   da se takmice sa primarnom. */
.dugme.tiho {
    background: transparent;
    border-color: transparent;
    color: var(--t2);
}

.dugme.tiho:hover { background: var(--surf3); color: var(--t1); }

.dugme.malo { height: 26px; padding: 0 .5rem; font-size: .78rem; }

/* Kvadratno dugme sa samo ikonom - obavestenja, prekidac teme. */
.dugme-ikona {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r);
    color: var(--t2);
    cursor: pointer;
}

.dugme-ikona:hover { background: var(--surf3); color: var(--t1); }

.dugme-ikona svg { width: 16px; height: 16px; }

/* Tacka na zvoncu kad ima neprocitanih. */
.dugme-ikona .tacka {
    position: absolute;
    margin: -12px 0 0 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dg);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea,
.polje {
    width: 100%;
    height: 30px;
    padding: 0 .55rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r);
    color: var(--t1);
    font: inherit;
    font-size: .83rem;
}

textarea { height: auto; min-height: 72px; padding: .4rem .55rem; }

input::placeholder, textarea::placeholder { color: var(--t3); }

input:hover, select:hover, textarea:hover { border-color: var(--line3); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

label {
    display: inline-block;
    margin-bottom: .2rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--t2);
}

/* Pretraga u gornjoj traci je pravo polje, za razliku od one u levoj. */
.traka-pretraga {
    position: relative;
    max-width: 340px;
    flex: 1 1 260px;
}

.traka-pretraga input { padding-left: 1.9rem; background: var(--surf2); }

.traka-pretraga svg {
    position: absolute;
    left: .55rem;
    top: 7px;
    width: 15px;
    height: 15px;
    color: var(--t3);
    pointer-events: none;
}

.filters {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: .9rem;
}

.filters label { display: block; }

.filters select, .filters input { width: auto; min-width: 140px; }

/* Oznaka je mala pravougaona nalepnica uz podatak: status, prioritet, broj.
   Pet lica, svako sa svojom trojkom pozadina/tekst/linija. */
.oznaka {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .08rem .4rem;
    background: var(--surf3);
    border: 1px solid var(--line2);
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--t2);
    white-space: nowrap;
}

.oznaka.akcenat { background: var(--ac-bg); border-color: var(--ac-ln); color: var(--ac-tx); }
.oznaka.opasnost { background: var(--dg-bg); border-color: var(--dg-ln); color: var(--dg-tx); }
.oznaka.upozorenje { background: var(--wn-bg); border-color: var(--wn-ln); color: var(--wn-tx); }
.oznaka.uredu { background: var(--ok-bg); border-color: var(--ok-ln); color: var(--ok-tx); }

/* Plocica je dugme koje predstavlja izbor sa slikom stanja - tri teme i
   cetiri akcenta na strani sa podesavanjima. */
.plocice {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.plocica {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    min-width: 116px;
    padding: .55rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    color: var(--t2);
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}

.plocica:hover { border-color: var(--line3); }

.plocica.izabrana {
    border-color: var(--ac);
    background: var(--ac-bg);
    color: var(--ac-tx);
    box-shadow: 0 0 0 1px var(--ac);
}

/* Mala slika teme unutar plocice: traka, povrsina, dve linije teksta.
   Boje su ovde upisane preko istih tokena, pa se pregled menja zajedno sa
   ostatkom aplikacije. */
.plocica-slika {
    width: 100%;
    height: 40px;
    padding: 4px;
    border: 1px solid var(--line2);
    border-radius: 5px;
    background: var(--bg);
    overflow: hidden;
}

.plocica-slika i {
    display: block;
    border-radius: 2px;
    background: var(--surf3);
}

.plocica-slika i:nth-child(1) { height: 6px; background: var(--ac); width: 40%; margin-bottom: 4px; }
.plocica-slika i:nth-child(2) { height: 5px; width: 100%; margin-bottom: 3px; }
.plocica-slika i:nth-child(3) { height: 5px; width: 72%; }

/* Krug sa bojom akcenta - jedini pouzdan prikaz izbora boje. */
.tacka-akcenta {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ac);
    border: 1px solid var(--line3);
}

/* Plocica akcenta prikazuje SVOJU boju, ne tekucu: --uzorak dolazi iz klase
   .uzorak-<ime> definisane u sekciji 1.5. */
.tacka-akcenta.uzorak-indigo,
.tacka-akcenta.uzorak-teal,
.tacka-akcenta.uzorak-amber,
.tacka-akcenta.uzorak-rose { background: var(--uzorak); }

/* ----------------------------------------------------------------------------
   SLIKA NALOGA (/podesavanja)

   Slika i inicijali dele ISTI selektor .slika-naloga, pa im se dimenzija i
   oblik zadaju na jednom mestu. Da su dva selektora, prvi promasaj bio bi to
   da ekran „poskoci" pri postavljanju slike - jer bi krug inicijala bio jedne
   velicine, a slika druge.

   object-fit: cover je ono sto secenje radi: slika u drugom odnosu strana se
   popuni i isece, umesto da se razvuce. Bez toga bi svako pravougaono lice
   bilo izobliceno, i to bi izgledalo kao kvar u otpremanju.
   ---------------------------------------------------------------------------- */
.slika-red {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.slika-naloga {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    object-fit: cover;
    background: var(--surf3);
}

/* Inicijali su rezerva, ne zaseban izgled: isti krug, samo popunjen slovima. */
.slika-naloga.inicijali {
    display: grid;
    place-items: center;
    background: var(--ac-bg);
    color: var(--ac-tx);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
}

.slika-radnje {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* <label class="dugme"> nosi skriven <InputFile>, pa mu treba pokazivac ruke -
   inace izgleda kao dugme koje se ne moze kliknuti. */
label.dugme { cursor: pointer; }

/* ----------------------------------------------------------------------------
   LOGO FIRME (/admin/katalog kartica FIRMA i /podesavanja) — B9.

   PRAVOUGAONIK, ne krug kao slika naloga. Logo je znak firme i skoro nikad nije
   kvadratan; upisan u krug, isecao bi se sa strana. Zato i object-fit: contain
   umesto cover: logo se UKLAPA u okvir ceo, dok se lice u krugu popunjava i
   isecanje mu ne smeta.
   ---------------------------------------------------------------------------- */
.logo-red {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}

.logo-firme {
    flex: 0 0 auto;
    width: 168px;
    height: 64px;
    border: 1px solid var(--line2);
    border-radius: var(--r);
    background: var(--surf);
    object-fit: contain;

    /* Odmak iznutra da logo ne dotice obod: znak zalepljen za liniju izgleda kao
       da je odsecen. */
    padding: 4px;
}

/* Prazan okvir je ISPREKIDAN i nosi natpis. Pun obod bez sadrzaja citao bi se
   kao logo koji se nije ucitao; isprekidan kaze „ovde ide slika, nema je". */
.logo-firme.prazan {
    display: grid;
    place-items: center;
    border-style: dashed;
    border-color: var(--line3);
    color: var(--t3);
    font-size: .74rem;
    text-align: center;
    user-select: none;
}

.logo-radnje {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Recenica „izmena ne menja vec poslate dokumente" mora da se vidi, a ne da se
   stopi sa ostalim pomocnim tekstom - to je jedina posledica koju covek ne moze
   da pretpostavi iz obrasca. */
.pomoc.naglaseno {
    color: var(--wn-tx);
    background: var(--wn-bg);
    border-left: 3px solid var(--wn);
    border-radius: 0 var(--r) var(--r) 0;
    padding: .4rem .6rem;
}

/* ============================================================================
   6. TABELA
   Klasa .grid je zatecena i ostaje - .tabela je novo ime za isto lice.
   ============================================================================ */

table.grid,
table.tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    overflow: hidden;
    font-size: .83rem;
}

table.grid th,
table.tabela th {
    padding: .45rem .7rem;
    background: var(--surf3);
    border-bottom: 1px solid var(--line2);
    color: var(--t2);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

table.grid td,
table.tabela td {
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--line);
    color: var(--t1);
    text-align: left;
    vertical-align: middle;
}

table.grid tbody tr:last-child td,
table.tabela tbody tr:last-child td { border-bottom: 0; }

table.grid tbody tr:hover td,
table.tabela tbody tr:hover td { background: var(--surf2); }

/* Siroka tabela se pomera unutar svog okvira; telo strane se NIKAD ne pomera
   vodoravno. */
.tabela-okvir {
    width: 100%;
    overflow-x: auto;
}

/* ============================================================================
   7. STANJA
   ============================================================================ */

/* Boja reda po hitnosti. Blaga pozadina, ne puna - red mora da ostane citljiv.
   MISSING je namerno crven kao i EXPIRED: obaveza koja nikad nije uneta je
   najopasnija kategorija jer se najlakse previdi. */
.row-expired td { background: var(--dg-bg); color: var(--dg-tx); }
.row-critical td { background: var(--wn-bg); color: var(--wn-tx); }
.row-warning td { background: var(--wn-bg); }

table.grid tbody tr.row-expired:hover td,
table.grid tbody tr.row-critical:hover td,
table.grid tbody tr.row-warning:hover td {
    /* Bez ovoga hover pobedi boju hitnosti i red na trenutak izgubi znacenje. */
    filter: brightness(.98);
}

/* Zatecena nalepnica uz obavezu koja blokira rad subjekta. */
.badge-blocking {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    background: var(--dg);
    border-radius: 4px;
    color: var(--n0);
    font-size: .68rem;
    font-weight: 600;
}

.poruka-greske {
    padding: .5rem .7rem;
    background: var(--dg-bg);
    border: 1px solid var(--dg-ln);
    border-radius: var(--r);
    color: var(--dg-tx);
    font-size: .83rem;
}

.poruka-uspeh {
    padding: .5rem .7rem;
    background: var(--ok-bg);
    border: 1px solid var(--ok-ln);
    border-radius: var(--r);
    color: var(--ok-tx);
    font-size: .83rem;
}

.poruka-upozorenje {
    padding: .5rem .7rem;
    background: var(--wn-bg);
    border: 1px solid var(--wn-ln);
    border-radius: var(--r);
    color: var(--wn-tx);
    font-size: .83rem;
}

/* Prazno stanje: lista bez ijednog reda. Ne sme da izgleda kao kvar. */
.prazno {
    padding: 2rem 1rem;
    background: var(--surf);
    border: 1px dashed var(--line2);
    border-radius: var(--r2);
    color: var(--t2);
    font-size: .85rem;
    text-align: center;
}

/* ----------------------------------------------------------------------------
   Uzak ekran. Leva traka prelazi u vodoravnu iznad sadrzaja - na telefonu
   kolona od 212px pojede polovinu sirine.
   ---------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .ljuska { grid-template-columns: minmax(0, 1fr); }

    .bocna {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .nav-grupa { margin-top: 0; }
    .nav-naslov { display: none; }
    .nalog { margin-top: 0; border-top: 0; }
    .pretraga { width: auto; flex: 1 1 160px; }
    .platno { padding: .9rem .8rem 2rem; }
    .traka-pretraga { display: none; }
}

/* Ko je iskljucio kretanje u operativnom sistemu, ne dobija ga ni ovde. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* IZBOR JEZIKA NA PRIJAVI
   -----------------------
   Stoji ispod veze za zaboravljenu lozinku, prigusen: to je izlaz za nekoga ko
   ekran ne razume, a ne radnja koju vecina trazi. Tekuci jezik nije veza nego
   tekst - veza koja vodi tamo gde si vec jeste je obecanje koje nista ne menja. */
.izbor-jezika {
    display: flex;
    gap: .75rem;
    margin-top: .35rem;
    font-size: .8rem;
}

.izbor-jezika a {
    color: var(--n500);
}

.izbor-jezika-tekuci {
    color: var(--n700);
    font-weight: 600;
}

/* ===========================================================================
   BAZA ZNANJA
   Z2 (tražilica + kartice) · C1 (jedna kolona) · U1 (podeljen uređivač) ·
   P1 (red za potvrdu) · P2 (razlika)

   Klase su izvedene iz maketa u docs/makete/baza-znanja.html i namerno se
   naslanjaju na postojeće (.panel, .znacka, .polje, .prazno) — nov modul ne
   uvodi drugi rečnik za iste stvari.
   =========================================================================== */

.znanje-traka,
.uredjivac-traka,
.izmena-traka {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.znanje-kartice {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line2);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.znanje-kartice .kartica {
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--t2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.znanje-kartice .kartica.tekuca {
    color: var(--ac-tx);
    border-bottom-color: var(--ac);
    font-weight: 600;
}

/* Tražilica je glavni predmet strane — to je ceo izbor Z2 nad Z1. */
.znanje-trazilica {
    text-align: center;
    padding: 6px 0 18px;
}

.znanje-poziv {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 9px;
}

.znanje-trazilica .pretraga {
    max-width: 520px;
    width: 100%;
}

.znanje-kategorije {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.znacka-filter {
    font: inherit;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--line2);
    background: var(--surf);
    color: var(--t2);
    cursor: pointer;
}

.znacka-filter.izabrana {
    background: var(--ac-bg);
    color: var(--ac-tx);
    border-color: var(--ac-ln);
    font-weight: 600;
}

.znacka-filter .kol {
    font-family: var(--pismo-kod);
    font-size: 11px;
    color: var(--t3);
    margin-left: 4px;
}

.znanje-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 11px;
}

.clanak-kartica {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--line2);
    border-radius: var(--r);
    background: var(--surf);
    padding: 13px 15px;
    text-decoration: none;
    color: inherit;
}

.clanak-kartica:hover {
    border-color: var(--line3);
}

.clanak-kartica .naslov {
    font-weight: 600;
    line-height: 1.35;
}

.clanak-kartica .saz {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.45;
}

.clanak-kartica .noge {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--t3);
}

/* --- C1: čitanje članka --------------------------------------------------- */

.clanak-strana {
    max-width: 820px;
}

.clanak {
    padding: 20px 22px;
}

.clanak-glava {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.clanak-naslov {
    margin: 0 0 14px;
    font-size: 21px;
    letter-spacing: -.02em;
    font-weight: 600;
}

.clanak-telo h4 {
    margin: 16px 0 6px;
    font-size: 15px;
}

.clanak-telo h4:first-child {
    margin-top: 0;
}

.clanak-telo p {
    margin: 0 0 10px;
    color: var(--t2);
    max-width: 70ch;
}

.ocena {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--line2);
    border-radius: var(--r);
    background: var(--surf2);
    margin-top: 18px;
}

.ocena .pitaj {
    font-weight: 600;
}

.clanak-podnozje {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* --- U1: uređivač --------------------------------------------------------- */

.uredjivac {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.uredjivac-md .md {
    width: 100%;
    border: none;
    border-radius: 0;
    font-family: var(--pismo-kod);
    font-size: 12.5px;
    line-height: 1.6;
    resize: vertical;
}

.uredjivac-pregled {
    border-left: 1px solid var(--line2);
    padding: 12px 14px;
    background: var(--surf);
    overflow: auto;
}

/* --- P2: razlika ---------------------------------------------------------- */

.razlika {
    font-family: var(--pismo-kod);
    font-size: 12.5px;
    line-height: 1.6;
    padding: 11px 13px;
    background: var(--surf);
    white-space: pre-wrap;
}

.razlika > span {
    display: block;
}

.razlika .dod {
    background: var(--ok-bg);
    color: var(--ok-tx);
}

.razlika .izb {
    background: var(--dg-bg);
    color: var(--dg-tx);
    text-decoration: line-through;
}

.napomena-telo {
    padding: 10px 13px;
    color: var(--t2);
}

.obrazlozenje {
    padding: 13px 15px;
    margin-bottom: 12px;
}

.obrazlozenje-radnje {
    display: flex;
    gap: 7px;
    justify-content: flex-end;
}

/* Poziv na pisanje članka, u detaljima rešenog tiketa. */
.clanak-poziv {
    display: flex;
    gap: 11px;
    align-items: center;
    flex-wrap: wrap;
    padding: 13px 16px;
    border: 1px solid var(--ac-ln);
    border-radius: var(--r);
    background: var(--ac-bg);
    margin-top: 12px;
}

.clanak-poziv .tekst {
    flex: 1 1 300px;
}

.clanak-poziv .pitanje {
    font-weight: 600;
    color: var(--ac-tx);
}

.clanak-poziv .objasnjenje {
    font-size: 13px;
    color: var(--ac-tx);
    opacity: .85;
}

/* Na uskom ekranu se sve slaže u jednu kolonu. Uređivač je jedini koji to
   zaista boli — Markdown i pregled jedno ispod drugog znače duplo skrolovanja
   — ali je i dalje bolje nego dve kolone od po 150 piksela. */
@media (max-width: 860px) {
    .uredjivac,
    .clanak-podnozje,
    .znanje-mreza {
        grid-template-columns: 1fr;
    }

    .uredjivac-pregled {
        border-left: none;
        border-top: 1px solid var(--line2);
    }
}

/* Istorija izmena članka. Stoji sklopljena — vidi „Clanak.razor". */
.istorija-clanka {
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.istorija-clanka > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--t2);
    font-weight: 600;
}

.istorija-spisak {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.istorija-red {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}

.istorija-red:last-child {
    border-bottom: none;
}

.istorija-red .telo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.istorija-red .naslov {
    font-weight: 500;
}

@media (max-width: 640px) {
    .istorija-red {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* Izbor članka kojim je tiket rešen. Stoji iznad poziva na pisanje članka,
   samo dok tiket nije rešen. */
.clanak-resenja {
    margin-top: 12px;
    max-width: 460px;
}