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

   STRANA PORUKA - raspored P2 (tri kolone), odobren 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 i cet.css.

   Unos i tackica prisutnosti se pozajmljuju iz cet.css - te klase se stvarno
   poklapaju i ovde se ne ponavljaju.

   MEHUR SE NE POZAJMLJUJE, iako je do 31.08.2026. ovde pisalo da se pozajmljuje.
   Izmereno: `.mehur` iz ovog fajla ne nasledjuje nista od `.cet-mehur` iz cet.css
   - to su razlicita imena, a CSS ih ne povezuje. Gradja im je uz to OBRNUTA:

     u uglu   -> obod, pozadinu i padding nosi KONTEJNER (.cet-mehur),
                 a .cet-mehur-tekst nosi samo pre-wrap;
     ovde     -> kontejner (.mehur) je prozirni flex omotac,
                 a ceo mehur je .mehur-tekst.

   To nije previd nego posledica: kartica u uglu prikazuje ime, vreme i tekst;
   ova strana prikazuje i urednik, potvrdu brisanja, prilog i oznaku „izmenjeno".
   Odnos markupa je 8 prema 85 linija. Zajednicka komponenta bi trazila da se
   jedna od dve strane prekroji, uz rizik nad ekranom koji radi - vidi stavku D19.

   Ono sto MORA da znaci isto na oba mesta je oznaka „izmenjeno": ista tvrdnja o
   istoj poruci. Zato .cet-mehur-izmenjeno i .mehur-izmenjeno nose ista pravila,
   svaki u svom fajlu.
   --------------------------------------------------------------------------- */

.poruke {
    display: flex;
    flex-direction: column;
    /* Strana zauzima tacno visinu platna: tok poruka mora da ima svoj klizac,
       a ne da produzava celu stranu. Telo strane se nikad ne pomera. */
    height: 100%;
    min-height: 0;
    gap: .75rem;
}

/* ------------------------------------------------------------------ traka */

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

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

.prekidac-obuhvata {
    display: inline-flex;
    border: 1px solid var(--line2);
    border-radius: var(--r);
    overflow: hidden;
}

.prekidac-obuhvata button {
    height: 26px;
    padding: 0 .6rem;
    border: 0;
    background: var(--surf);
    color: var(--t2);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.prekidac-obuhvata button + button { border-left: 1px solid var(--line2); }
.prekidac-obuhvata button:hover { background: var(--surf3); }

.prekidac-obuhvata button.izabran {
    background: var(--ac-bg);
    color: var(--ac-tx);
    font-weight: 500;
}

.poruke-traka .polje-pretrage {
    width: 220px;
    flex: none;
}

/* -------------------------------------------------------------------- telo */

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

/* Sklopljen panel detalja ne ostavlja praznu kolonu - sredina je preuzima. */
.poruke-telo.bez-detalja { grid-template-columns: 236px minmax(0, 1fr); }

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

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

/* ------------------------------------------------------------------ spisak */

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

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

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

.spisak .razgovor:hover { background: var(--surf3); }

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

.spisak .razgovor.nepr .ime {
    font-weight: 600;
    color: var(--t1);
}

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

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

.spisak .razgovor .ime { font-size: .82rem; color: var(--t1); }
.spisak .razgovor .pregled { font-size: .76rem; color: var(--t2); }

.spisak .razgovor .desno {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: none;
}

.spisak .razgovor .vreme {
    font-size: .7rem;
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}

.spisak .avatar.kanal {
    border-radius: var(--r);
    background: var(--ac-bg);
    color: var(--ac-tx);
}

.znacka.tiha {
    background: var(--surf3);
    color: var(--t3);
    font-weight: 400;
}

/* --------------------------------------------------------------------- tok */

.tok-panel { min-width: 0; }

.tok-panel .razgovor-glava {
    flex: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--line);
}

.tok-panel .razgovor-glava .naslov {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tok-panel .razgovor-glava .ime {
    font-weight: 600;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tok-panel .tok {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tok .starije {
    align-self: center;
    font: inherit;
    font-size: .75rem;
    color: var(--t2);
    background: var(--surf3);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: .2rem .7rem;
    cursor: pointer;
}

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

/* Mehur na punoj strani sme da bude siri nego u uglu: kolona je siroka, a
   prelamanje na svakih trideset znakova cini razgovor necitljivim.

   Selektor `.tok-panel .cet-mehur` je stajao ovde do 31.08.2026. i NIJE POGADJAO
   NISTA: `cet-mehur` postoji samo u KarticaRazgovora.razor, a ta kartica se crta
   iz UgaoCeta i MehuricCeta - nikad unutar .tok-panel. Ostatak je iz vremena kad
   je plan bio da strana ugosti karticu ugla. Uklonjen. */
.tok-panel .mehur {
    max-width: min(64%, 560px);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tok-panel .mehur.moj {
    align-self: flex-end;
    align-items: flex-end;
}

.tok-panel .mehur-glava {
    font-size: .7rem;
    color: var(--t3);
    padding: 0 .2rem;
    font-variant-numeric: tabular-nums;
}

.tok-panel .mehur-tekst {
    background: var(--surf3);
    border: 1px solid var(--line);
    border-radius: var(--r2);
    padding: .4rem .6rem;
    font-size: .83rem;
    color: var(--t1);
    /* Poruka je cist tekst i tako se i iscrtava - prelomi reda koje je covek
       napisao ostaju, HTML se ne tumaci (CLAUDE.md, pravilo 15). */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tok-panel .mehur.moj .mehur-tekst {
    background: var(--ac-bg);
    border-color: var(--ac-ln);
    color: var(--ac-tx);
}

/* POMEN (C12). Istice se SAMO poruka u kojoj je pomenut onaj ko gleda.

   Traka sa strane, ne pozadina: pozadina mehura vec nosi jedno znacenje („moja
   poruka" protiv „tudja"), pa bi je pomen prepisao i dve razlicite stvari bi se
   videle isto. Traka je nova osa i ne sudara se ni sa cim. */
.tok-panel .mehur.pomenut > .mehur-tekst {
    border-left: 3px solid var(--ac);
}

/* Natpis stoji uz vreme, ne u telu poruke - podatak O poruci, kao „izmenjeno". */
.tok-panel .mehur-pomen {
    margin-left: .3rem;
    padding: 0 .3rem;
    border-radius: var(--r);
    background: var(--ac-bg);
    color: var(--ac-tx);
    font-size: .68rem;
    font-weight: 600;
}

/* OBRISANA PORUKA (D20). Natpis stoji na mestu teksta, ali se od teksta razlikuje
   na prvi pogled: bledji, kurzivom, bez pozadine mehura. Da izgleda kao poruka,
   citalac bi pomislio da je neko napisao recenicu „Poruka je obrisana".

   Ista pravila nosi i .cet-mehur-tekst.obrisana u cet.css - isti natpis o istoj
   poruci mora da izgleda isto na oba mesta, kao i oznaka „izmenjeno". */
.tok-panel .mehur-tekst.obrisana {
    background: none;
    border-color: transparent;
    color: var(--t3);
    font-style: italic;
}

/* Oznaka „izmenjeno" stoji uz vreme, ne uz tekst: to je podatak o poruci, a ne
   deo onoga sto je covek napisao. */
.tok-panel .mehur-izmenjeno {
    margin-left: .3rem;
    font-style: italic;
    opacity: .75;
}

/* Radnje nad svojom porukom. Vide se tek na prelazu misem - stalno vidljive,
   dva dugmeta uz svaku poruku pretvorila bi tok razgovora u tabelu radnji.
   Fokus ih takodje otkriva: covek koji radi tastaturom mora da ih nadje. */
.tok-panel .mehur-radnje {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-top: .15rem;
    opacity: 0;
    transition: opacity .12s ease;
}

.tok-panel .mehur:hover .mehur-radnje,
.tok-panel .mehur:focus-within .mehur-radnje { opacity: 1; }

/* Potvrda brisanja mora da se vidi i bez prelaza misem - inace pitanje stoji
   postavljeno, a covek ga ne vidi. */
.tok-panel .mehur.brise .mehur-radnje { opacity: 1; }

.tok-panel .mehur.moj .mehur-radnje { justify-content: flex-end; }

.tok-panel .mehur-izmena textarea {
    width: 100%;
    resize: vertical;
    font: inherit;
    font-size: .83rem;
}

/* Radnja uz sadrzaj, ne dugme ekrana. Podvuceno zato sto se u toku poruka boja
   sama ne cita kao „ovo se moze pritisnuti". */
.tok-panel .dugme-tekst {
    padding: 0;
    border: 0;
    background: none;
    color: var(--t2);
    font: inherit;
    font-size: .75rem;
    text-decoration: underline;
    cursor: pointer;
}

.tok-panel .dugme-tekst:hover { color: var(--t1); }

.tok-panel .dugme-tekst:disabled {
    opacity: .5;
    cursor: default;
}

/* Prilog u mehuru je veza ka preuzimanju. Stoji ispod teksta, ne pored njega:
   ime datoteke je cesto duze od poruke uz koju stoji. */
.mehur-prilog {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-top: 2px;
    padding: .35rem .55rem;
    border: 1px solid var(--line2);
    border-radius: var(--r);
    background: var(--surf);
    color: inherit;
    font-size: .78rem;
    text-decoration: none;
}

.mehur-prilog:hover { border-color: var(--ac); }

.mehur-prilog .naslov {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24ch;
}

/* Dugme za prilog u traci za unos je kvadrat velicine polja - ne sme da pomeri
   liniju u kojoj se kuca. */
.tok-panel .unos .dugme-prilog {
    flex: none;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1rem;
    line-height: 1;
}

/* Potvrda citanja stoji desno, ispod poslednje MOJE poruke - tamo gde covek
   ionako gleda posle slanja. */
.potvrda-citanja {
    align-self: flex-end;
    font-size: .7rem;
    color: var(--t3);
    padding: 0 .2rem;
    font-variant-numeric: tabular-nums;
}

.tok-panel .unos {
    flex: none;
    border-top: 1px solid var(--line);
    padding: .55rem .7rem;
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}

.tok-panel .unos textarea {
    flex: 1;
    min-height: 34px;
    max-height: 120px;
    resize: none;
    padding: .4rem .55rem;
    font: inherit;
    font-size: .83rem;
    border: 1px solid var(--line2);
    border-radius: var(--r);
    background: var(--surf);
    color: var(--t1);
}

/* ------------------------------------------------------------- pogoci pretrage */

.tok .pogodak {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surf2);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tok .pogodak:hover { border-color: var(--ac); }

.pogodak-glava {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
}

.pogodak-glava .ime { font-weight: 600; }

.pogodak-glava .vreme {
    margin-left: auto;
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}

.pogodak-tekst {
    font-size: .8rem;
    color: var(--t2);
    overflow-wrap: anywhere;
}

.pogodak-tekst strong {
    color: var(--t1);
    font-weight: 500;
    margin-right: .3rem;
}

/* ----------------------------------------------------- obrazac novog kanala */

/*
   Preklop, ne posebna ruta: otvaranje kanala je kratak korak u sred rada, a ne
   mesto na koje se dolazi. Podloga (.preklop-podloga) i osnovni izgled preklopa
   dolaze iz nittiket.css - ovde je samo raspored polja.
*/
.obrazac-kanala {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    background: var(--surf);
    border: 1px solid var(--line2);
    border-radius: var(--r2);
    box-shadow: var(--sh3);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    z-index: 60;
}

.polje-red {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .78rem;
    color: var(--t2);
}

.polje-prekidac {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--t1);
    cursor: pointer;
}

.preklop-dugmad {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .2rem;
}

/* ----------------------------------------------------------------- detalji */

.detalji-panel {
    padding: .75rem;
    overflow-y: auto;
    gap: .9rem;
}

.detalj-naslov {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--t3);
    margin-bottom: .3rem;
}

.detalji-panel .ucesnik {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
}

.detalji-panel .ucesnik .ime {
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detalji-panel .ucesnik .stanje {
    margin-left: auto;
    font-size: .72rem;
    color: var(--t3);
    flex: none;
}

/* CLANSTVO U KANALU
   -----------------
   Dugme za uklanjanje se ne vidi dok mis nije nad redom. Stalno vidljiv krstic uz
   svako ime pretvara spisak ljudi u spisak dugmadi za izbacivanje - a to nije ono
   sto panel treba da kaze. Na dodir se prikazuje uvek, jer tamo hovera nema. */
.detalji-panel .ucesnik .dugme-ikona {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    opacity: 0;
    transition: opacity .12s ease;
}

.detalji-panel .ucesnik:hover .dugme-ikona,
.detalji-panel .ucesnik .dugme-ikona:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .detalji-panel .ucesnik .dugme-ikona {
        opacity: 1;
    }
}

/* Red kolege je dugme, ali mora da izgleda kao red u spisku - inace bi spisak
   od dvadeset ljudi bio zid od dvadeset dugmadi. */
.detalji-panel .ucesnik.kao-dugme {
    width: 100%;
    background: none;
    border: 0;
    border-radius: var(--r);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.detalji-panel .ucesnik.kao-dugme:hover:not(:disabled) {
    background: var(--n100);
}

.detalji-panel .ucesnik.kao-dugme:disabled {
    opacity: .5;
    cursor: default;
}

.detalji-panel .polje-pretrage {
    width: 100%;
    margin-bottom: .35rem;
}

.avatar.mali {
    width: 22px;
    height: 22px;
    font-size: .6rem;
}

.poruke .prazno {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
}

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

/*
   Ispod 1100px panel detalja se gasi - isto pravilo i ista granica kao kod
   panela svojstava na /tiketi. Ispod 760px nestaje i spisak: na telefonu se
   razgovor cita, ne bira.
*/
@media (max-width: 1100px) {
    .poruke-telo,
    .poruke-telo.bez-detalja { grid-template-columns: 236px minmax(0, 1fr); }
    .detalji-panel { display: none; }
}

@media (max-width: 760px) {
    .poruke-telo,
    .poruke-telo.bez-detalja { grid-template-columns: minmax(0, 1fr); }
    .spisak-panel { display: none; }
    .poruke-traka .polje-pretrage { width: 100%; }
}

/* PREGLED PRILOGA
   ---------------
   Red je veza, ne dugme: prilog se otvara u novoj kartici, pa i treba da se
   ponasa kao veza - srednji klik, „otvori u novoj kartici", sve to vec radi. */
.detalji-panel .prilog-red {
    display: block;
    padding: .3rem .35rem;
    border-radius: var(--r);
    color: inherit;
    text-decoration: none;
}

.detalji-panel .prilog-red:hover {
    background: var(--n100);
}

.detalji-panel .prilog-red .ime {
    display: block;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detalji-panel .prilog-red .stanje {
    display: block;
    font-size: .7rem;
    color: var(--t3);
}

/* PRILOG U PORUCI
   ---------------
   Jedan skup pravila za sva tri prikaza, i za cet i za ekran prikupljanja - oba
   crtaju istu komponentu (PrilogUPoruci). Razlika je samo u klasi na omotacu.

   Slicica je SAMA datoteka, ne posebno napravljen umanjeni oblik: nema posla koji
   pravi thumbnail, nema drugog zapisa koji moze da zaostane, i nema drugog puta do
   sadrzaja - ista provera prava vazi za sliku u mehuru i za preuzimanje. Zato
   `object-fit: cover` i cvrsta visina: prava velicina slike se ne zna unapred, a
   mehur ne sme da poskoci kad se ucita. */
.prilozi {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .35rem;
}

.prilozi .prilog {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surf);
    color: inherit;
    text-decoration: none;
}

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

.prilozi .opis {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.prilozi .ime {
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prilozi .stanje { font-size: .7rem; color: var(--t3); }

.prilozi .ikona-vrste {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--t2);
}

.prilozi .ikona-vrste svg { width: 100%; height: 100%; }

.prilozi .slicica {
    flex: none;
    border-radius: 6px;
    border: 1px solid var(--line2);
    object-fit: cover;
    background: var(--surf2);
}

.prilozi .slicica.prazna { display: block; }

/* Samo ime: ikona ostaje, slicice nema, redovi se zbijaju. Za onoga ko prima
   dokumente, kome slicica PDF-a ne govori nista a jede pola ekrana. */
.prilozi.kao-ikone .prilog { padding: .2rem .3rem; border-color: transparent; }
.prilozi.kao-ikone .prilog:hover { border-color: var(--line); }
.prilozi.kao-ikone .ikona-vrste { width: 16px; height: 16px; }

.prilozi.kao-male .slicica { width: 72px; height: 54px; }

/* Velika: slicica ide u svoj red iznad imena, jer pored imena ne bi imala sirine. */
.prilozi.kao-velike .prilog {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
}

.prilozi.kao-velike .slicica {
    width: 100%;
    height: 168px;
}

/* ISTICANJE PORUKE SA PRILOGOM
   ----------------------------
   Prekidac na strani Podesavanja. Poruka sa datotekom se trazi cesce nego bilo
   koja druga, a u toku od sto mehurica se ne razlikuje ni po cemu. */
.mehur.nosi-prilog {
    border-left: 3px solid var(--ac);
    padding-left: calc(.55rem - 3px);
}

/* Pregled u podesavanjima. Iste komponente i isti tokeni koje ce covek videti u
   toku - ne slika i ne poseban stil; primer sa svojom paletom bi lagao cim se
   jedan token promeni. Sirina je ogranicena da „velika slicica" u pregledu ne bi
   bila sira nego ijedan mehur u kome ce stvarno stajati. */
.pregled-priloga {
    max-width: 320px;
    padding: .5rem .55rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surf2);
}

.pregled-priloga.sa-prilogom {
    border-left: 3px solid var(--ac);
    padding-left: calc(.55rem - 3px);
}

.pregled-priloga .prilozi { margin-top: 0; }

/* ZAHTEVI ZA DOSTAVU U TRACI
   --------------------------
   Isti oblik kao red priloga, i namerno: oba su „stavka koja vodi negde drugde",
   pa ne smeju da izgledaju kao dve razlicite vrste elementa. */
.detalji-panel .zahtev-red {
    display: block;
    padding: .3rem .35rem;
    border-radius: var(--r);
    color: inherit;
    text-decoration: none;
}

.detalji-panel .zahtev-red:hover { background: var(--n100); }

.detalji-panel .zahtev-red .ime {
    display: block;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detalji-panel .zahtev-red .stanje {
    display: block;
    font-size: .7rem;
    color: var(--t3);
}

/* OBRAZAC DOSTAVE U TRACI (raspored O2)
   -------------------------------------
   Polja su ista kao u preklopu - razlikuje se samo sirina. Zato se ovde ne
   opisuje izgled polja, nego samo razmak i lice izbora ljudi. */
.obrazac-dostave {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.obrazac-dostave .izbor-ljudi {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-height: 152px;
    overflow-y: auto;
}

/* Cekiranje se ne vidi kao kvadratic nego kao stanje cipa: dvadeset kvadratica
   jedan ispod drugog je spisak, a ovo treba da bude izbor. */
.obrazac-dostave .cip-covek {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .45rem .15rem .2rem;
    border: 1px solid var(--line2);
    border-radius: 999px;
    font-size: .76rem;
    cursor: pointer;
}

.obrazac-dostave .cip-covek:hover { background: var(--surf3); }

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

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

.obrazac-dostave .cip-covek .ime {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

.obrazac-dostave .greska { color: var(--dg); font-size: .78rem; margin: 0; }

/* ZADUZENJA U SPISKU (raspored P2)
   -------------------------------
   Stoje IZNAD razgovora i ostaju dok se ne posalje. Zuta ivica ih odvaja od
   razgovora: to nije razgovor nego obaveza, i ne sme da se cita kao poruka. */
.spisak.zaduzenja {
    flex: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: .3rem;
}

/* Oznake su u SVOM redu, iznad naslova. Kad su stajale u drugoj koloni, naslov
   je dobijao pola sirine i skracivao se na „Slike police - rega..." - a naslov
   je jedino po cemu covek prepoznaje sta se od njega trazi. */
.spisak .zaduzenje {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .4rem .5rem;
    border-left: 3px solid var(--wn);
    border-radius: var(--r);
    background: var(--wn-bg);
    color: inherit;
    text-decoration: none;
}

.spisak .zaduzenje + .zaduzenje { margin-top: 2px; }
.spisak .zaduzenje:hover { border-color: var(--wn); filter: brightness(.98); }

.spisak .zaduzenje .oznake {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

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

.spisak .zaduzenje .ime { font-size: .82rem; font-weight: 500; color: var(--t1); }
.spisak .zaduzenje .pregled { font-size: .74rem; color: var(--t2); }
.spisak .zaduzenje .vreme { font-size: .68rem; color: var(--t3); white-space: nowrap; }