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

/*
    CET U UGLU I TACKICE PRISUSTVA

    ISTO NAJVAZNIJE PRAVILO KAO U nittiket.css: nijedna heks vrednost, ni u
    komentaru. Sve boje dolaze kroz var(--...) iz sekcije 1 tog fajla. Tackica
    prisustva je tu najosetljivija - ona nosi znacenje bojom, pa bi upisana boja
    ostala ista u obe teme i u tamnoj bi je progutala pozadina.

    Ide POSLE tiketi.css i evidencije.css: sekcija 6 premoscava gustinu celije u
    koloni "Dodeljen", a most i ti fajlovi imaju istu specificnost - pobedjuje se
    jedino redosledom.

    Redosled sekcija:
      1. tokeni ugla    2. tackica prisustva   3. dok i traka kolega
      4. kartica razgovora                     5. mehuric i panel
      6. tackice na postojecim ekranima
*/

/* ============================================================================
   1. TOKENI UGLA
   Brojevi, ne boje. Boje su i ovde iskljucivo iz nittiket.css.
   ============================================================================ */

:root {
    /*
        Visina kartice razgovora.

        Broj je vezan za visinu PROZORA, a ne fiksan, i to je resenje sudara sa
        mrezom tiketa. Mreza se meri do dna prozora i dobija tacan broj piksela
        (vidi nittiketMreza), pa svaki piksel koji dok zauzme mreza mora da zna
        unapred. Na prozoru visine 768 tacaka tri otvorena razgovora zauzimaju
        oko 310 tacaka, mrezi ostaje preko 300 i strana NE dobija uspravan
        klizac; fiksnih 340 bi je gurnulo ispod najmanje dozvoljene visine.
    */
    --cet-visina-kartice: clamp(180px, 34vh, 340px);

    /* Sirina jedne otvorene kartice i sklopljene trake. */
    --cet-sirina-kartice: 288px;
    --cet-sirina-sklopljene: 168px;

    /* Visina trake kolega, odnosno mehurica. Ista je i visina sklopljene
       kartice, da dok stoji u jednoj liniji. */
    --cet-visina-trake: 40px;

    /* Odmak dokа od desne i donje ivice prozora. */
    --cet-odmak: 12px;

    /*
        Koliko dok trenutno zauzima pri dnu. Upisuje ga cet.js pri svakoj
        promeni (otvaranje, sklapanje, zatvaranje kartice), a cita ga
        nittiketMreza da bi mreza stala IZNAD doka umesto ispod njega.

        Nula je ispravna pocetna vrednost: dok ne postoji dok, nema sta da se
        oduzme.
    */
    --cet-rezerva: 0px;

    /* Precnik tackice prisustva i debljina njenog oboda. */
    --tacka-precnik: 9px;
    --tacka-obod-debljina: 2px;
}

/* ============================================================================
   2. TACKICA PRISUSTVA
   ============================================================================ */

/*
    Obod je boja POVRSINE ISPOD, ne bela i ne siva.

    Bez oboda se zelena tackica na zelenkastom avataru slije sa njim i prestane
    da bude znak. Zato svaki kontekst koji ima drugaciju podlogu postavlja
    --tacka-obod (vidi sekciju 6); podrazumevana je povrsina kartice.
*/
.tacka-prisustva {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--tacka-precnik);
    height: var(--tacka-precnik);
    border-radius: 50%;
    border: var(--tacka-obod-debljina) solid var(--tacka-obod, var(--surf));
    background: var(--t3);
    box-sizing: content-box;
}

.tacka-prisustva.online { background: var(--ok); }
.tacka-prisustva.busy { background: var(--dg); }
.tacka-prisustva.away { background: var(--wn); }

/*
    OFFLINE je neutralna, i namerno nije samo bleda zelena: "nije na vezi" nije
    slabiji oblik dostupnosti nego njeno odsustvo. Prsten umesto pune tackice
    razlikuje je i bez boje - za daltonizam i za crno-belu stampu.
*/
.tacka-prisustva.offline {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--t3);
}

/* Tackica zakacena za donji desni ugao avatara. */
.sa-tackicom {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.sa-tackicom > .tacka-prisustva {
    position: absolute;
    right: -1px;
    bottom: -1px;
}

/* ============================================================================
   3. DOK I TRAKA KOLEGA
   ============================================================================ */

/*
    Dok lebdi nad stranom, ali NE nad njenim sadrzajem: visinu koju zauzme
    prijavljuje kroz --cet-rezerva, pa mreza tiketa stane iznad njega.

    align-items: flex-end drzi sve u jednoj liniji pri dnu - sklopljena kartica
    je visoka koliko i traka, otvorena je visa i raste navise.
*/
/*
    SLOJ 45 - iznad strane, ispod preklopa detalja.

    Brojevi nisu proizvoljni: gornja traka je 20, padajuci spisak 40, zastor
    preklopa 50, sam preklop 60. Ugao mora da bude iznad sadrzaja strane, ali
    ISPOD preklopa - dok je otvoren detalj tiketa, on je posao, a cet je pratnja.
    Na istom sloju kao preklop, ugao je pobedjivao redosledom u dokumentu i
    lebdeo nad zamracenim modalom u koji fokus ionako ne moze da izadje.
*/
.cet-ugao {
    position: fixed;
    right: var(--cet-odmak);
    bottom: var(--cet-odmak);
    z-index: 45;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    max-width: calc(100vw - var(--bocna-sirina) - 2 * var(--cet-odmak));
    pointer-events: none;
}

/* Deca primaju klik; sam dok ne, da praznina oko njega ne bi gutala klikove
   na mrezu ispod. */
.cet-ugao > * { pointer-events: auto; }

.cet-paluba {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
}

.cet-traka {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: var(--cet-visina-trake);
    padding: 0 .6rem 0 .5rem;
    border: 1px solid var(--line2);
    border-radius: 999px;
    background: var(--surf);
    box-shadow: var(--sh2);
    white-space: nowrap;

    /* CEO SMISAO UGLA JE DA NISTA NE POKRIVA, pa pilula ne sme da preraste ekran.
       ModelUgla.NajviseUTraci vec ogranicava BROJ avatara, ali taj broj je tacan
       samo za jednu sirinu - na telefonu i pet avatara uz natpis „N na vezi"
       prelazi preko mreze ispod. Granica u kodu i granica u CSS-u brane od dve
       razlicite stvari; nijedna sama nije dovoljna. Vidi stavku C8. */
    max-width: min(90vw, 22rem);
}

.cet-avatari {
    display: flex;
    align-items: center;
}

/*
    Avatari se PREKLAPAJU, za cetiri tacke. Bez preklapanja traka sa pet kolega
    bude siroka preko trecine ekrana; sa preklapanjem staje u pilulu i i dalje se
    vidi ko je ko. Levi je "iznad" desnog, pa tackica desnog ostaje vidljiva.

    CETIRI TACKE SU GRANICA, NE IZBOR. Prvi racun je pretpostavljao sest i na
    osnovu toga dozvolio osam avatara u traci; uzivo se videlo da se vec sesti
    gubi. Ko bude povecavao preklapanje, mora u istom potezu da smanji
    ModelUgla.NajviseUTraci - to su dve polovine istog broja.
*/
.cet-kolega {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    margin-left: -4px;
    transition: transform .12s ease;
}

.cet-kolega:first-child { margin-left: 0; }

.cet-kolega:hover,
.cet-kolega:focus-visible { transform: translateY(-2px); }

.cet-kolega .avatar {
    box-shadow: 0 0 0 2px var(--surf);
}

.cet-jos {
    height: 26px;
    min-width: 26px;
    padding: 0 .35rem;
    margin-left: -4px;
    border: 0;
    border-radius: 999px;
    background: var(--surf3);
    color: var(--t2);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--surf);
}

.cet-broj-na-vezi {
    font-size: .78rem;
    font-weight: 500;
    color: var(--t2);
}

/*
    Spisak svih kolega - otvara se iz "+N". Nasledjuje izgled preklopa iz
    nittiket.css, a menja mu samo smer: dok stoji pri dnu prozora, pa se spisak
    otvara NAVISE. Podrazumevan preklop pada nadole i zavrsio bi ispod ivice
    ekrana.
*/
.cet-preklop-gore {
    right: 0;
    bottom: calc(100% + .4rem);
}

.cet-spisak {
    max-height: 300px;
    overflow-y: auto;
}

.cet-stavka {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .3rem .4rem;
    border: 0;
    border-radius: var(--r);
    background: none;
    color: var(--t1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

.cet-stavka .ime {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cet-stavka .stanje {
    margin-left: auto;
    font-size: .72rem;
    color: var(--t3);
    white-space: nowrap;
}

.cet-naslov-grupe {
    padding: .45rem .4rem .2rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t3);
}

/* ============================================================================
   4. KARTICA RAZGOVORA
   ============================================================================ */

.cet-kartica {
    display: flex;
    flex-direction: column;
    width: var(--cet-sirina-kartice);
    height: calc(var(--cet-visina-kartice) + var(--cet-visina-trake));
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    background: var(--surf);
    box-shadow: var(--sh3);
    overflow: hidden;
}

.cet-kartica.sklopljena {
    width: var(--cet-sirina-sklopljene);
    height: var(--cet-visina-trake);
}

.cet-kartica-zaglavlje {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    height: var(--cet-visina-trake);
    padding: 0 .35rem 0 .5rem;
    border-bottom: 1px solid var(--line);
    background: var(--surf2);
}

.cet-kartica.sklopljena .cet-kartica-zaglavlje { border-bottom: 0; }

/* Ime nosi klik koji sklapa i razvlaci karticu - cela traka je meta, ne samo
   strelica od 16 tacaka. */
.cet-kartica-ime {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--t1);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.cet-kartica-ime .ime {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cet-kartica-telo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1 1 auto;
    padding: .5rem;
    overflow-y: auto;
    background: var(--bg);
}

.cet-mehur {
    max-width: 82%;
    align-self: flex-start;
    padding: .3rem .5rem;
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    background: var(--surf);
    font-size: .8rem;
    line-height: 1.35;
}

/*
    SADRZAJ PORUKE JE TUDJI TEKST i iscrtava se kao tekst, nikad kao
    MarkupString. Ova dva pravila su jedini razlog zbog kog to izgleda pristojno:
    bez prvog se gubi prelom koji je covek otkucao, bez drugog niz od hiljadu
    znakova bez razmaka razvlaci karticu preko celog ekrana.

    Pravilo stoji na ZASEBNOM elementu, ne na celom mehuricu. Sa pre-wrap nad
    mehuricem bi se cuvalo i uvlacenje iz Razor fajla, pa bi svaka poruka pocela
    praznim redom i desetak razmaka udesno.
*/
.cet-mehur-tekst {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Moja poruka: desno i u boji akcenta. Strana i boja nose istu informaciju
   dvaput namerno - u uskoj kartici se strana previdi. */
.cet-mehur.moj {
    align-self: flex-end;
    border-color: var(--ac-ln);
    background: var(--ac-bg);
    color: var(--ac-tx);
}

.cet-mehur-glava {
    display: flex;
    gap: .4rem;
    margin-bottom: .1rem;
    font-size: .68rem;
    color: var(--t3);
}

/* Oznaka „izmenjeno" stoji uz vreme, ne uz tekst: to je podatak O poruci, a ne
   deo onoga sto je covek napisao. Isto pravilo vazi i na punoj strani
   (.mehur-izmenjeno u poruke.css) - dva mehura se razlikuju u gradji, ali ova
   oznaka mora da znaci isto na oba mesta, jer je ista tvrdnja o istoj poruci. */
.cet-mehur-izmenjeno {
    font-style: italic;
    opacity: .75;
}

/* POMEN (C12). Ista osa kao na punoj strani: traka sa strane, ne pozadina -
   pozadina mehura vec razlikuje moju poruku od tudje. Natpisa nema, jer u
   kartici sirokoj dvesta piksela ne bi imao gde da stane; traka je dovoljna da
   se poruka nadje u toku. */
.cet-mehur.pomenut .cet-mehur-tekst {
    border-left: 3px solid var(--ac);
    padding-left: .35rem;
}

/* OBRISANA PORUKA (D20). Isti natpis i isti izgled kao na punoj strani
   (.mehur-tekst.obrisana u poruke.css): ista tvrdnja o istoj poruci. */
.cet-mehur-tekst.obrisana {
    color: var(--t3);
    font-style: italic;
}

.cet-unos {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .35rem;
    border-top: 1px solid var(--line);
    background: var(--surf);
}

.cet-unos textarea {
    min-height: 32px;
    height: 32px;
    max-height: 84px;
    padding: .3rem .45rem;
    font-size: .8rem;
    resize: none;
}

.cet-precice {
    padding: 0 .5rem .35rem;
    font-size: .66rem;
    color: var(--t3);
    background: var(--surf);
}

/* ============================================================================
   5. MEHURIC I PANEL
   ============================================================================ */

.cet-mehuric {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ac-h);
    border-radius: 50%;
    background: var(--ac);
    color: var(--n0);
    cursor: pointer;
    box-shadow: var(--sh2);
}

.cet-mehuric svg { width: 20px; height: 20px; }

/*
    Ista kartica, drugo mesto. U panelu nema svoju senku ni okvir - ima ih panel
    oko nje - i uzima punu sirinu. Sve ostalo (mehurici, unos, precice) je
    doslovno isto, pa je i komponenta ista.
*/
.cet-kartica.u-panelu {
    width: 100%;
    height: var(--cet-visina-kartice);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cet-panel {
    display: flex;
    flex-direction: column;
    width: 300px;
    max-height: calc(var(--cet-visina-kartice) + 2 * var(--cet-visina-trake));
    padding: .5rem;
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    background: var(--surf);
    box-shadow: var(--sh3);
    overflow-y: auto;
}

/*
    Znacka sa brojem neprocitanih. Vidi se i kad je kartica sklopljena - to je
    ceo razlog zbog kog sklapanje sme da postoji.

    Boje su blagi par (--dg-bg / --dg-tx), a ne puna crvena sa belim tekstom, iz
    istog razloga iz kog ih koristi i .nav-brojac.hitno: u tamnoj temi je --dg
    svetlocrven, pa beo tekst na njemu nema kontrast. Isti par radi u obe teme.
*/
.cet-znacka {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 .28rem;
    border: 1px solid var(--dg-ln);
    border-radius: 999px;
    background: var(--dg-bg);
    color: var(--dg-tx);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1;
}

.cet-mehuric-sidro .cet-znacka {
    position: absolute;
    top: -3px;
    right: -3px;
    box-shadow: 0 0 0 2px var(--bg);
}

.cet-mehuric-sidro { position: relative; display: inline-flex; }

/*
    SKAKANJE PRI NOVOJ PORUCI.

    Postoji da bi se nova poruka primetila i kad covek gleda u drugi deo ekrana.
    Klasu postavlja komponenta i NE postavlja je kad je covek zauzet a
    podesavanje "ne uznemiravaj" upaljeno - poruka tada stigne i izbroji se, samo
    tiho.

    Postuje se i zelja operativnog sistema za manje kretanja: kome vrti u stomaku
    od pokreta, tome ni ovo nije izuzetak.
*/
@keyframes cet-skok {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
    60% { transform: translateY(-2px); }
}

.cet-skace { animation: cet-skok .45s ease 2; }

@media (prefers-reduced-motion: reduce) {
    .cet-skace { animation: none; }
    .cet-kolega { transition: none; }
}

/* ============================================================================
   6. TACKICE NA POSTOJECIM EKRANIMA
   Podloga se razlikuje, pa svaki kontekst postavlja svoju boju oboda.
   ============================================================================ */

/* Celija "Dodeljen" u mrezi tiketa i "Odgovoran" u mrezi obaveza. Red mreze
   ima povrsinu --surf, a pri prelasku misem --surf2 - obod prati jaci od
   dva, da tackica ne bi "treperila" pri prelasku. */
.celija-osoba { --tacka-obod: var(--surf); }

.e-grid .e-row:hover .celija-osoba,
.e-grid .e-row.e-selectionbackground .celija-osoba { --tacka-obod: var(--surf2); }

/* Panel svojstava u preklopu tiketa. */
.svojstva .par-vrednost .tacka-prisustva { --tacka-obod: var(--surf); }

/* Vrednost para sa tackicom - tackica i tekst u jednoj liniji, bez preloma
   izmedju njih. */
.par-osoba {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Padajuci izbor pri dodeli ne moze da nosi tackicu - <option> ne prima
   elemente. Zato stanje ide kao znak ispred imena, iz iste tabele; objasnjenje
   stoji uz PrisutnostZaKorisnike i u komponenti koja spisak sastavlja. */