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

   EKRAN PRIKUPLJANJA - rasporedi Z1 (spisak) i Z2 (zid), odobreni 29.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(--...). Isto pravilo vazi za
   tiketi.css, evidencije.css, cet.css i poruke.css.

   Klase .panel, .spisak, .grupa-naslov, .prekidac-obuhvata i .znacka NAMERNO se
   poklapaju sa onima iz poruke.css: ovo je isti proizvod i ista navika. Ono sto
   je zajednicko stoji tamo i ovde se ne ponavlja - ovde je samo ono sto ekran
   prikupljanja donosi.
   --------------------------------------------------------------------------- */

.prikupljanje {
    display: flex;
    flex-direction: column;
    /* Isto kao /poruke: ekran zauzima tacno visinu platna, a klizac ima spisak
       odnosno zid. Telo strane se ne pomera. */
    height: 100%;
    min-height: 0;
    gap: .75rem;
}

/* ---------------------------------------------------------------- zaglavlje */

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

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

.prikupljanje-traka .naslovna { min-width: 0; }
.prikupljanje-traka .naslovna .tiho { font-size: .78rem; }

.prikupljanje .uputstvo {
    flex: none;
    margin: 0;
    padding: .5rem .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;
}

/* Napredak je broj LJUDI koji su predali, ne broj predaja. Vidi ga i obveznik -
   to ne odaje ko je sta poslao, a bez njega covek ne zna da li kasni. */
.prikupljanje .napredak {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.prikupljanje .sipka {
    width: 120px;
    height: 6px;
    border-radius: 999px;
    background: var(--surf3);
    overflow: hidden;
}

.prikupljanje .sipka i {
    display: block;
    height: 100%;
    background: var(--ok);
}

.prikupljanje .brojka {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--t2);
}

/* ------------------------------------------------------------------ predaja */

.predaja-obrazac {
    flex: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.predaja-obrazac .polje { flex: 1; min-width: 0; }

/* InputFile se ne stilizuje - sakriva se, a klik prima natpis oko njega. Isto
   resenje kao uz unos u /poruke, i iz istog razloga: izgled polja za datoteku
   se razlikuje od pretrazivaca do pretrazivaca.

   Natpis MORA da nosi ikonu i tekst: bez njih je ovde stajao prazan kvadratic -
   pretrazivacevo polje za datoteku umanjeno na velicinu dugmeta, koje ne kaze
   sta radi. */
.predaja-obrazac label.dugme {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
}

.predaja-obrazac label.dugme svg { width: 16px; height: 16px; flex: none; }

.predaja-obrazac label.dugme input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.prikupljanje .greska { color: var(--dg); }

/* ------------------------------------------------------------ Z1 / raspored */

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

/* Obveznik nema spisak ljudi - njegov ekran je jedna kolona. */
.prikupljanje-telo:has(> .predaje-panel:only-child) { grid-template-columns: minmax(0, 1fr); }

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

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

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

.prikupljanje .obveznik:hover { background: var(--surf3); }

.prikupljanje .obveznik.izabran {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
}

.prikupljanje .obveznik .ime {
    font-size: .82rem;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.predaje-panel {
    overflow-y: auto;
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.prikupljanje .predaja {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .55rem .65rem;
    background: var(--surf);
}

.prikupljanje .predaja-glava {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .4rem;
}

.prikupljanje .predaja-glava .ime { font-size: .84rem; font-weight: 500; }
.prikupljanje .predaja-glava .tiho { font-size: .76rem; }

.prikupljanje .tekst-predaje {
    margin: 0 0 .4rem;
    font-size: .86rem;
    /* Sadrzaj predaje je cist tekst i tako se i iscrtava (pravilo 16). Prelomi
       reda koje je covek uneo moraju da ostanu - inace se spisak od pet stavki
       slije u jedan pasus. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Prilog crta komponenta PrilogUPoruci, a njena pravila stoje u poruke.css - ista
   slika na dva ekrana ne sme da izgleda kao dve razlicite stvari. Ovde je samo
   trag koji predaju sa datotekom izdvaja iz spiska. */
.prikupljanje .predaja.nosi-prilog {
    border-left: 3px solid var(--ac);
    padding-left: calc(.65rem - 3px);
}

/* ------------------------------------------------------------------ Z2 / zid */

/* Traka nabraja SAMO one koji nisu poslali. Zid pokazuje ono sto jeste stiglo,
   a nedostaje upravo ono cega nema - bez ove trake raspored ne bi umeo da
   odgovori na pitanje zbog koga se ekran najcesce otvara. */
.traka-nedostaje {
    flex: none;
    border: 1px solid var(--wn);
    border-radius: var(--r);
    background: var(--wn-bg);
    padding: .5rem .7rem;
    font-size: .82rem;
    color: var(--t1);
}

.prikupljanje .zid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    align-content: start;
    padding: .1rem;
}

.prikupljanje .plocica {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surf);
    color: inherit;
    text-decoration: none;
}

a.plocica:hover { border-color: var(--ac-ln); background: var(--surf2); }

/* Zid POKAZUJE, ne nabraja - zato ovde ide sama slika, bez obzira na postavku
   velicine. Ko hoce spisak imena, gleda raspored „Spisak". */
.prikupljanje .plocica-telo {
    flex: 1;
    min-height: 110px;
    display: grid;
    place-items: center;
    background: var(--surf2);
    color: var(--t2);
    font-size: .76rem;
    text-align: center;
    overflow: hidden;
}

.prikupljanje .plocica-telo img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.prikupljanje .plocica-telo .naziv {
    padding: .5rem;
    overflow-wrap: anywhere;
}

/* Predaja bez datoteke ne nestaje sa zida: covek jeste odgovorio, samo tekstom. */
.prikupljanje .plocica.bez-priloga .plocica-telo {
    background: transparent;
    color: var(--t1);
    font-size: .82rem;
    white-space: pre-wrap;
}

.prikupljanje .plocica-potpis {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: .4rem .5rem;
    border-top: 1px solid var(--line);
}

.prikupljanje .plocica-potpis .ime {
    font-size: .78rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prikupljanje .plocica-potpis .tiho { font-size: .72rem; }

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

/* Ispod 900px spisak ljudi ide iznad predaja, ne pored njih - dve kolone od po
   150px nisu ni spisak ni pregled. */
@media (max-width: 900px) {
    .prikupljanje-telo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .prikupljanje .spisak-panel { max-height: 190px; }
}