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

    IZVESTAVANJE - tri ekrana: /izvestaji (S1), kontrolna tabla na / (T1) i
    /admin/izvestaji (A1). Odobreno 02.09.2026., makete u docs/makete/izvestavanje.html.

    Tokeni dolaze iz nittiket.css, sekcija 1. Ovde nema nijedne boje zapisane
    rukom - da ima, tema bi je preskocila i ekran bi u tamnoj temi ostao svetao.

    STUBCI SE CRTAJU CSS-om, BEZ BIBLIOTEKE. Devet izvestaja daje brojku ili
    imenovane stubce; za to je grafikonska biblioteka cist trosak, a uz nju bi
    doslo i pitanje njene teme, njenih boja i njenog jezika.
   ----------------------------------------------------------------------------- */

/* --- /izvestaji: spisak levo, izvestaj desno (S1) ------------------------- */

.izv-raspored {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: .9rem;
    align-items: start;
}

@media (max-width: 900px) {
    .izv-raspored { grid-template-columns: 1fr; }
}

.izv-spisak {
    list-style: none;
    margin: 0;
    padding: .3rem 0;
    max-height: 32rem;
    overflow: auto;
}

.izv-spisak li { margin: 0; }

.izv-grupa {
    padding: .4rem .8rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t2);
    font-weight: 600;
    background: var(--surf3);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1;
}

.izv-stavka {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .45rem .8rem;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--t1);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

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

.izv-stavka.tekuca {
    background: var(--ac-bg);
    border-left-color: var(--ac);
    color: var(--ac-tx);
    font-weight: 600;
}

/* Izvestaj bez prava - vidi se samo kad firma tako izabere (reports.bez.prava).
   Kursor je „ne moze", ne „ruka": red koji izgleda kao dugme a ne reaguje uci
   coveka da je ekran pokvaren. */
.izv-stavka.zakljucana {
    color: var(--t3);
    cursor: not-allowed;
}

.izv-stavka.zakljucana:hover { background: transparent; }

.izv-stavka .ime {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- rezultat: brojka ili stubci ------------------------------------------ */

.izv-brojka {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.izv-jedinica {
    font-size: 1rem;
    font-weight: 500;
    color: var(--t2);
    margin-left: .25rem;
}

.izv-ton-dobro { color: var(--ok); }
.izv-ton-paznja { color: var(--wn); }
.izv-ton-lose { color: var(--dg); }

.izv-stubac {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1fr auto;
    gap: .6rem;
    align-items: center;
    padding: .3rem 0;
}

.izv-stubac .natpis {
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.izv-stubac .traka {
    height: 9px;
    border-radius: 20px;
    background: var(--surf3);
    overflow: hidden;
}

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

.izv-stubac .traka > i.dobro { background: var(--ok); }
.izv-stubac .traka > i.paznja { background: var(--wn); }
.izv-stubac .traka > i.lose { background: var(--dg); }

.izv-stubac .kol {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    font-weight: 600;
    min-width: 2rem;
    text-align: right;
}

/* --- kontrolna tabla (T1) ------------------------------------------------- */

.tabla-kartice {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    border-bottom: 1px solid var(--line2);
    padding: 0 .25rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.tabla-kartica {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    font-size: .85rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--r) var(--r) 0 0;
    background: transparent;
    color: var(--t2);
    font-family: inherit;
    cursor: pointer;
}

.tabla-kartica.tekuca {
    background: var(--surf);
    border-color: var(--line2);
    color: var(--t1);
    font-weight: 600;
    margin-bottom: -1px;
}

.tabla-kartica .katanac { font-size: .7rem; color: var(--t3); }

.tabla-mreza {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .7rem;
}

.tabla-plocica {
    grid-column: span 3;
    border: 1px solid var(--line2);
    border-radius: var(--r);
    background: var(--surf);
    padding: .8rem .95rem;
    position: relative;
}

.tabla-plocica.sir4 { grid-column: span 4; }
.tabla-plocica.sir6 { grid-column: span 6; }
.tabla-plocica.sir12 { grid-column: span 12; }

@media (max-width: 900px) {
    .tabla-plocica,
    .tabla-plocica.sir4,
    .tabla-plocica.sir6 { grid-column: span 12; }
}

.tabla-plocica > h3 {
    margin: 0 0 .4rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t2);
    font-weight: 600;
    padding-right: 1.6rem;
}

.tabla-plocica .skidalica {
    position: absolute;
    top: .45rem;
    right: .5rem;
}

.tabla-dodaj {
    grid-column: span 3;
    border: 1px dashed var(--line3);
    border-radius: var(--r);
    background: transparent;
    color: var(--t3);
    min-height: 5rem;
    font: inherit;
    cursor: pointer;
}

.tabla-dodaj:hover { background: var(--surf3); color: var(--t2); }

/* --- /admin/izvestaji: „ko ovo vidi" (A1) --------------------------------- */

.izv-uloge {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .6rem .8rem;
}

.izv-uloga {
    font-size: .7rem;
    font-weight: 600;
    padding: .1rem .55rem;
    border-radius: 20px;
    border: 1px solid var(--ok-ln);
    background: var(--ok-bg);
    color: var(--ok-tx);
    font-family: var(--pismo-kod, monospace);
}

/* Uloga koja izvestaj NE vidi ostaje na spisku, siva. Prikaz samo onih koje vide
   ne bi odgovorio na pravo pitanje administratora - „ko ga NE vidi". */
.izv-uloga.ne {
    border-color: var(--line2);
    background: var(--surf3);
    color: var(--t3);
}

/* Znacka u spisku izvestaja. Osnovne .znacka u nittiket.css nema - u katalog.css
   postoje samo njene varijante - pa ovde stoji cela, uz varijantu koja nosi
   nalaz „nijedna uloga ne vidi ovaj izvestaj". */
.izvestaji .znacka,
.admin-izvestaji .znacka {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: .05rem .45rem;
    border-radius: 20px;
    border: 1px solid var(--line2);
    background: var(--surf3);
    color: var(--t2);
    white-space: nowrap;
}

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