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

   ADMINISTRACIJA PRAVA - raspored U2 (uloge) i U3 (po coveku), odobreni
   30.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, .grupa-naslov i .znacka NAMERNO se poklapaju sa onima
   iz poruke.css: isti proizvod, ista navika. Oba ekrana dele ovaj fajl jer dele
   raspored - spisak levo, rad desno.
   --------------------------------------------------------------------------- */

.prava {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: .75rem;
}

.prava-traka {
    flex: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.prava-traka h1 { font-size: 1.05rem; margin: 0; }

/* Objasnjenje dve ose stoji na ekranu, ne u dokumentaciji: covek koji prvi put
   otvara ovaj ekran ne zna razliku izmedju dozvole i opsega, a bez nje ce
   napraviti ulogu koja sme sve a ne vidi nista. */
.prava-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;
}

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

.prava .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

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

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

.prava .grupa-naslov {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--t3);
    padding: .55rem .5rem .25rem;
}

/* Uloga je <button>: red na koji se klikce mora da bude dostupan tastaturi. */
.prava .uloga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
    width: 100%;
    padding: .45rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Na ekranu po coveku red nosi i avatar, pa ima tri kolone. */
.prava .uloga:has(.avatar) { grid-template-columns: auto minmax(0, 1fr) auto; }

.prava .uloga:hover { background: var(--surf3); }

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

.prava .uloga .telo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.prava .uloga .ime,
.prava .uloga .pregled {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prava .uloga .ime { font-size: .84rem; color: var(--t1); }
.prava .uloga .pregled { font-size: .72rem; color: var(--t3); }

.prava .uloga .desno {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Odstupanje od fabricke uloge se vidi VEC U SPISKU, ne tek kad se otvori:
   inace bi covek morao da klikne kroz sedam uloga da bi saznao koja je dirana. */
.tacka-odstupanja {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wn);
    flex: none;
}

/* ------------------------------------------------------------ desna strana */

.uloga-panel {
    overflow-y: auto;
    padding: .8rem;
}

.uloga-glava {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}

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

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

.upozorenje-red {
    margin: 0 0 .7rem;
    padding: .5rem .7rem;
    border: 1px solid var(--wn);
    border-radius: var(--r);
    background: var(--wn-bg);
    color: var(--t1);
    font-size: .82rem;
}

.uloga-telo {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.prava .odeljak {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.prava .odeljak-naslov {
    padding: .5rem .7rem;
    background: var(--surf2);
    border-bottom: 1px solid var(--line);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
}

/* ----------------------------------------------------------- osa B: opsezi */

/* Opseg stoji IZNAD dozvola i u vecim karticama: uloga sa dozvolama a bez opsega
   ne vidi nijedan red, pa to ne sme da bude ono do cega se skroluje. */
.opsezi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .6rem;
    padding: .7rem;
}

.opseg-kartica {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .55rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.opseg-kartica .modul {
    font-size: .72rem;
    letter-spacing: .05em;
    color: var(--t3);
    font-weight: 700;
    text-transform: uppercase;
}

.opseg-kartica .polje { font-size: .82rem; padding: .3rem .4rem; }

.zastavice {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.zastavica {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid var(--line2);
    border-radius: 5px;
    padding: .1rem .35rem;
    font-size: .7rem;
    color: var(--t3);
    cursor: pointer;
}

.zastavica.on {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok);
}

/* Kucica se skriva, a stanje nosi sam cip: cetiri kvadratica po modulu puta pet
   modula je dvadeset kvadratica, sto je spisak a ne izbor. */
.zastavica input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.zastavica:has(input:disabled) { opacity: .55; cursor: default; }

/* ---------------------------------------------------------- osa A: dozvole */

.grupa-dozvola { border-top: 1px solid var(--line); }
.grupa-dozvola:first-child { border-top: 0; }

.grupa-glava {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .45rem .7rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t3);
    background: var(--surf2);
}

.grupa-glava .tiho { margin-left: auto; text-transform: none; letter-spacing: 0; }

.grupa-telo {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .5rem .7rem;
}

/* Ime je ono sto se cita, sifra stoji ispod kao sitan trag. Dok je stajala samo
   sifra, ekran je od administratora trazio da zna sta `tickets.sla.override`
   radi - a to je tacno ona odluka zbog koje se ovaj ekran otvara. */
.stavka-dozvole {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    max-width: 260px;
    border: 1px solid var(--line2);
    border-radius: 6px;
    padding: .25rem .5rem;
    cursor: pointer;
}

.stavka-dozvole .ime {
    font-size: .8rem;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stavka-dozvole .sifra {
    font-size: .68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

.stavka-dozvole.izabrana .ime { color: var(--ac-tx); font-weight: 500; }

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

.stavka-dozvole:has(input:disabled) { opacity: .6; cursor: default; }

/* ------------------------------------------------------------ U3 / po coveku */

.izbor-uloga {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .7rem;
}

.cip-uloge {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .8rem;
    cursor: pointer;
}

.cip-uloge:hover { background: var(--surf3); }

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

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

/* Lanac uloga -> modul -> sirina. Ovo je ceo razlog postojanja ekrana: dve
   apstraktne ose pretvorene u jednu recenicu koja se cita s leva na desno. */
.lanci {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .7rem;
}

.lanac {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .82rem;
}

.lanac .korak {
    border: 1px solid var(--line2);
    border-radius: 6px;
    padding: .15rem .5rem;
    background: var(--surf2);
}

/* Opseg NONE nije podatak koji nedostaje nego posledica, pa se i vidi kao takva. */
.lanac .korak.prazan {
    border-color: var(--dg);
    background: var(--dg-bg);
    color: var(--dg);
}

.lanac .strelica { color: var(--t3); }

.izvedene-dozvole {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .7rem;
}

.izvedene-dozvole .izvedena {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    max-width: 240px;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: .2rem .45rem;
    background: var(--surf2);
}

.izvedene-dozvole .ime {
    font-size: .78rem;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.izvedene-dozvole .sifra {
    font-size: .66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

    .prava .spisak-panel { max-height: 200px; }
}