/* WMS — telefon prvo (375 px), pa racunar. Boje kao u dokumentima (docs/). */
:root {
  --papir: #f5f7fa; --kartica: #ffffff; --tinta: #131722; --tinta-meka: #535b6c; --tinta-bleda: #8a92a3;
  --linija: #d5dae3; --linija-meka: #e7ebf1;
  --plava: #012a6b; --plava-bleda: #eef2f9; --na-plavoj: #ffffff; --cijan: #0190d4;
  --zelena: #1f8a4c; --zelena-bleda: #edf6f0; --crvena: #b23b23; --crvena-bleda: #f8efeb;
  --zuta: #9a6b12; --zuta-bleda: #fbf3e3;
  --f: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papir: #13161c; --kartica: #191d25; --tinta: #e6e9ef; --tinta-meka: #98a1b2; --tinta-bleda: #6f7889;
    --linija: #323844; --linija-meka: #242a34;
    --plava: #8dc2ea; --plava-bleda: #1a2431; --na-plavoj: #13161c; --cijan: #4fb8ee;
    --zelena: #5fbe86; --zelena-bleda: #16231b; --crvena: #e0957a; --crvena-bleda: #2a1f1a;
    --zuta: #d9b06c; --zuta-bleda: #282016;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papir); color: var(--tinta); font-family: var(--f); font-size: 16px; line-height: 1.4; }
a { color: var(--plava); }
h1 { font-size: 22px; margin: 0; line-height: 1.2; }
h2 { font-size: 17px; margin: 22px 0 10px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--kartica); border: 1.5px solid var(--linija); border-radius: 8px; padding: 10px 12px; min-height: 46px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cijan); outline-offset: 1px; border-color: var(--cijan); }
label { display: block; font-size: 14px; color: var(--tinta-meka); margin: 0 0 12px; }
label input, label select, label textarea { margin-top: 4px; color: var(--tinta); }
button { cursor: pointer; border: 1.5px solid var(--linija); background: var(--kartica); border-radius: 8px; padding: 8px 14px; min-height: 44px; }
button:disabled { opacity: .45; cursor: default; }
button.link { border: 0; background: none; color: var(--plava); padding: 0 4px; min-height: 0; text-decoration: underline; }
button.link.ostavi { display: block; margin: 24px auto 8px; padding: 12px; color: var(--siva, #5b6475); }
.sivo { color: var(--tinta-meka); font-size: 14px; }
.ucitava { color: var(--tinta-bleda); padding: 24px 16px; }
.greska-blok { background: var(--crvena-bleda); border-left: 3px solid var(--crvena); padding: 12px 14px; margin: 16px; border-radius: 6px; }
.upozorenje { background: var(--zuta-bleda); border-left: 3px solid var(--zuta); padding: 10px 12px; border-radius: 6px; margin: 10px 0; }

.veliko { display: block; width: 100%; min-height: 58px; font-size: 19px; font-weight: 650; border-radius: 12px; margin: 12px 0; text-align: center; text-decoration: none; line-height: 54px; padding: 0 12px; }
button.veliko { line-height: 1.2; }
.glavno { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); }
.sporedno { background: var(--kartica); color: var(--plava); border: 1.5px solid var(--linija); }
.opasno { color: var(--crvena); border-color: var(--crvena); }

/* Traka i navigacija */
.traka { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--plava); color: var(--na-plavoj); flex-wrap: wrap; }
.traka a { color: var(--na-plavoj); }
.traka .firma { font-weight: 700; text-decoration: none; font-size: 17px; }
.traka .firma small { font-weight: 400; opacity: .75; }
.traka .ko { margin-left: auto; font-size: 14px; opacity: .9; }
.traka button.link { color: var(--na-plavoj); }
nav.gore { display: flex; gap: 4px; flex-wrap: wrap; }
nav.gore a { text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 15px; opacity: .85; }
nav.gore a.akt { background: rgba(255,255,255,.16); opacity: 1; font-weight: 600; }
.tel-traka { position: sticky; top: 0; z-index: 5; }
nav.dno { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--kartica); border-top: 1px solid var(--linija); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
nav.dno a { text-align: center; padding: 14px 4px; text-decoration: none; color: var(--tinta-meka); font-weight: 600; }
nav.dno a.akt { color: var(--plava); box-shadow: inset 0 3px 0 var(--plava); }

main.tel { max-width: 520px; margin: 0 auto; padding: 14px 16px 96px; }
main.sto { max-width: 1280px; margin: 0 auto; padding: 18px 20px 60px; }

#poruka { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 10px; font-weight: 600; z-index: 50; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
#poruka.ok { background: var(--zelena); color: #fff; }
#poruka.greska { background: var(--crvena); color: #fff; }

/* Prijava */
.prijava { max-width: 360px; margin: 12vh auto 0; }
.prijava h1 { font-size: 28px; margin-bottom: 22px; color: var(--plava); }

/* Danas */
.naslov-tel { margin: 4px 0 14px; }
.naslov-tel .kupac { font-weight: 500; color: var(--tinta-meka); }
/* Priprema glasom (js/ekrani/priprema-glas.js): sta aplikacija govori i sta je cula. */
.glas-dugme { margin-top: 8px; }
.glas-traka { margin-top: 10px; border: 1.5px solid var(--cijan); border-radius: var(--r); background: var(--plava-bleda); padding: 8px 10px; }
.glas-red { display: flex; gap: 8px; align-items: center; }
.glas-stanje { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--tinta); }
.glas-cuo { font-size: 13px; color: var(--tinta-meka); margin-top: 4px; min-height: 0; overflow-wrap: anywhere; }
.glas-cuo:empty { display: none; }
.glas-kucaj { margin-top: 8px; }
.glas-mikrofon { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--crvena); }
.glas-mikrofon[hidden] { display: none; }
.glas-mikrofon .razlog { flex: 1; min-width: 0; }
.plocice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plocica { display: flex; flex-direction: column; border: 1px solid var(--linija); border-radius: var(--r); background: var(--kartica); padding: 12px 14px; text-decoration: none; color: inherit; min-height: 100px; }
.plocica .k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-meka); font-weight: 600; }
.plocica .v { font-size: 34px; font-weight: 750; line-height: 1.1; margin-top: 2px; }
.plocica .s { font-size: 13px; color: var(--tinta-bleda); }
.plocica.akcent { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); margin-bottom: 10px; }
.plocica.akcent .k, .plocica.akcent .s { color: var(--na-plavoj); opacity: .85; }

/* Priprema */
ol.stavke { list-style: none; padding: 0; margin: 0 0 12px; border: 1px solid var(--linija); border-radius: var(--r); background: var(--kartica); overflow: hidden; }
ol.stavke li { display: grid; grid-template-columns: minmax(46px, 72px) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--linija-meka); }
ol.stavke li:first-child { border-top: 0; }
ol.stavke li.gotova { color: var(--tinta-bleda); }
ol.stavke li.gotova .kol { color: var(--zelena); }
ol.stavke li.manjak .kol { color: var(--crvena); }
ol.stavke li.aktivna { background: var(--plava-bleda); font-weight: 650; }
ol.stavke small { display: block; font-weight: 400; color: var(--crvena); font-size: 12.5px; }
.polica-oznaka { font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.15; }
.kol { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aktivna-kartica { border: 2px solid var(--plava); border-radius: 14px; background: var(--kartica); padding: 14px; }
.mesto { display: flex; align-items: center; gap: 14px; }
.polica-velika { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 44px; font-weight: 800; line-height: 1; padding: 6px 12px; border-radius: 10px; border: 2px dashed var(--linija); }
.polica-velika.potvrdjena { border: 2px solid var(--zelena); background: var(--zelena-bleda); color: var(--zelena); }
.mesto-opis { font-size: 14px; color: var(--tinta-meka); }
.artikal { font-size: 21px; font-weight: 700; margin: 12px 0 2px; }
.uzmi { font-size: 18px; margin-bottom: 10px; }
.uzmi b { font-size: 30px; }
.uzmi small { color: var(--tinta-meka); font-size: 14px; }
.koracnik { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: center; margin: 10px 0 0; }
.koracnik button { min-height: 56px; font-size: 26px; font-weight: 700; }
.kol-izbor { text-align: center; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; }
.druge, .razlozi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--tinta-meka); margin-top: 8px; }
.cip { min-height: 40px; padding: 6px 12px; border-radius: 999px; font-size: 15px; }
/* Priprema: koja partija se uzima (FEFO). Kratak rok narandzast, prosao rok crven. */
ol.stavke small.rok-red { color: var(--tinta-meka); }
ol.stavke small.rok-red.kratak { color: var(--zuta); font-weight: 650; }
.partije { list-style: none; margin: 4px 0 8px; padding: 0; }
.partija { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; border: 1px solid var(--linija-meka); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 15px; }
.partija .tx { min-width: 0; overflow-wrap: anywhere; }
.partija .kol { font-size: 15px; }
.partija.kratak { border-color: var(--zuta); background: var(--zuta-bleda); }
.partija.sledeca { color: var(--tinta-meka); }
.stop { background: var(--crvena-bleda); border-left: 3px solid var(--crvena); padding: 10px 12px; border-radius: 6px; margin: 10px 0; font-size: 14px; }
/* Rok i serija na prijemu: krupno, jer se cita sa kartona i kuca jednom rukom. */
.rok-unos { margin: 10px 0 4px; }
.rok-unos input { font-size: 24px; font-weight: 700; letter-spacing: .04em; }
.cipovi { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.greska-unos { background: var(--crvena-bleda); border-left: 3px solid var(--crvena); padding: 10px 12px; border-radius: 6px; margin: 8px 0; }
#partija-poruka p { margin: 6px 0; }
.kvacica-red { display: flex; gap: 10px; align-items: center; color: var(--tinta); font-size: 15px; }
.kvacica-red input { width: auto; min-height: 0; }
.manjak-dugme { display: block; margin: 6px auto 0; }
.gotovo { text-align: center; padding-top: 30px; }
.gotovo .znak { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: var(--zelena); color: #fff; font-size: 48px; line-height: 84px; }

/* Skeniranje */
.sken-polje { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; gap: 6px; margin: 8px 0; }
.sken-polje input { font-size: 17px; min-width: 0; }
.sken-polje button { min-width: 46px; padding-left: 6px; padding-right: 6px; font-size: 20px; }
.sken-polje button.u-redu { font-size: 15px; }
/* Kamera je traka na vrhu, ne preko celog ekrana: ostaje otvorena izmedju
   skenova, a ispod se vidi sledeca stavka i dugmad. */
.kamera-sloj { position: fixed; left: 0; right: 0; top: 0; height: 42vh; overflow: hidden; background: #000; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 12px; }
.kamera-sloj video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera-sloj .nisan { position: absolute; left: 10%; right: 10%; top: 32.5%; height: 35%; border: 3px solid #4fb8ee; border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.kamera-sloj .kamera-poruka { position: relative; margin: 0; color: #fff; text-align: center; font-weight: 600; text-shadow: 0 1px 3px #000; }
.kamera-sloj .zatvori { position: relative; align-self: center; min-height: 40px; padding: 6px 16px; }
body.kamera-otvorena main.tel { padding-top: calc(42vh + 12px); }
.sken-polje input:focus { outline: 3px solid var(--plava); outline-offset: 1px; }
.lista > li .neupisano-znak { display: none; color: var(--crvena); font-size: 12.5px; font-weight: 600; }
.lista > li.neupisano .neupisano-znak { display: block; }
.lista > li.neupisano .broj-unos { border-color: var(--crvena); background: var(--crvena-bleda); }

/* Liste na telefonu */
.lista { list-style: none; padding: 0; margin: 0 0 14px; border: 1px solid var(--linija); border-radius: var(--r); background: var(--kartica); }
.lista > li { padding: 12px 14px; border-top: 1px solid var(--linija-meka); display: flex; gap: 10px; align-items: center; }
.lista > li:first-child { border-top: 0; }
.lista > li > a { flex: 1; text-decoration: none; color: inherit; }
.lista .desno { margin-left: auto; text-align: right; font-weight: 650; white-space: nowrap; }
.lista > li > .tekst { flex: 1; min-width: 0; }
.lista > li.siv > .tekst { opacity: .7; }
/* Prijem: naruceno po narudzbi; red je dugme koje bira artikal. */
.lista.naruceno > li { padding: 0; }
.naruceno-red, .lista.naruceno > li > .tekst { flex: 1; }
.lista.naruceno > li:not(:has(button)) { padding: 12px 14px; }
.naruceno-red { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 10px 14px; margin: 0; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.naruceno-red:hover { background: var(--linija-meka); }
.naruceno-red .tekst { flex: 1; min-width: 0; }
.mreza-polica { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-bottom: 16px; }
.mreza-polica button { min-width: 0; min-height: 58px; padding: 6px 4px; font-size: 19px; font-weight: 750; overflow-wrap: anywhere; line-height: 1.15; }
.segment { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.segment button { flex: 1; }
.segment button.izabrano { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); }
.mreza-polica button.izabrano { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); }
.mreza-polica button small { font-size: 12px; font-weight: 500; white-space: nowrap; }
input.kol-izbor { width: 100%; min-height: 56px; padding: 0; }
.zbir { font-size: 20px; font-weight: 700; margin: 8px 0; }
.rezultati { list-style: none; padding: 0; margin: 4px 0 10px; border: 1px solid var(--linija); border-radius: 8px; background: var(--kartica); }
.rezultati li { padding: 10px 12px; border-top: 1px solid var(--linija-meka); cursor: pointer; }
.rezultati li:first-child { border-top: 0; }
.rezultati li:hover { background: var(--plava-bleda); }
.broj-unos { width: 96px; text-align: right; font-weight: 700; font-size: 18px; }
.razlika-plus { color: var(--zelena); font-weight: 700; }
.razlika-minus { color: var(--crvena); font-weight: 700; }

/* Tabla */
/* Novi raspored (docs/mokap-sef-tabla-novi-raspored.html, O-56 do O-59): kanban levo, uska kolona desno koja
   se ne pomera pri skrolu; ispod 1100 px kolona ide ispod kanbana, na telefonu kartice Nalozi · Odluke · Ulaz · Ljudi. */
.samo-citac { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brojke { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 0 0 10px; font-size: 15px; }
.brojka .k { color: var(--tinta-meka); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.brojka b { font-size: 19px; font-variant-numeric: tabular-nums; }
.brojka .s { color: var(--tinta-meka); font-size: 14px; }
.brojka .kratko { display: none; }
.brojke .osvezeno { margin-left: auto; color: var(--tinta-meka); font-size: 13px; }
.ljudi-red { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13.5px; }
.ljudi-red > .k { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-meka); margin-right: 4px; }
.cip-covek { border: 1px solid var(--linija); background: var(--kartica); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.cip-covek.slobodan { border-color: var(--zelena); background: var(--zelena-bleda); }
.cip-covek.stoji-cip { border-color: var(--zuta); background: var(--zuta-bleda); }
.cip-covek.nije_tu { color: var(--tinta-bleda); border-style: dashed; }
.cip-covek .stoji { color: var(--zuta); font-weight: 700; }
.cip-covek button.link { padding: 0 2px; font-size: inherit; }
.tabla-raspored { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.tabla-strana { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.tabla-strana .odluke { margin: 0; }
.tabla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) 92px; gap: 10px; align-items: start; }
.tabla:has(.kolona-poslato.otvoren) { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); }
.kolona { background: var(--linija-meka); border-radius: var(--r); padding: 10px; min-height: 140px; }
.kolona h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.kolona-naslov, .kolona-dugme { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kolona-dugme { width: 100%; min-height: 0; padding: 0; border: 0; background: none; border-radius: 0; font-weight: inherit; letter-spacing: inherit;
  text-transform: inherit; text-align: left; }
.kolona-broj { font-variant-numeric: tabular-nums; }
/* Uska traka „Poslato danas": naziv i broj jedno ispod drugog; klik je otvara u punu kolonu. */
.kolona-poslato:not(.otvoren) { padding: 10px 6px; }
.kolona-poslato:not(.otvoren) .kolona-dugme { flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 11.5px; }
.kolona-poslato:not(.otvoren) .kolona-broj { font-size: 24px; letter-spacing: 0; }
.kolona-poslato .kolona-dugme::after { content: "▸"; color: var(--tinta-meka); }
.kolona-poslato.otvoren .kolona-dugme::after { content: "◂"; }
.karta { display: block; background: var(--kartica); border: 1px solid var(--linija); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; text-decoration: none; color: inherit; }
.karta:hover { border-color: var(--plava); }
.karta-link { color: inherit; text-decoration: none; display: block; }
.karta-link::after { content: ""; }
.karta b { font-variant-numeric: tabular-nums; }
.karta .opis { font-size: 13px; color: var(--tinta-meka); margin-top: 2px; }
.karta.sa-manjkom { border-left: 4px solid var(--crvena); }
.karta.fali { border-left: 4px solid var(--zuta); }
.karta.kompletan { border-left: 4px solid var(--zelena); }
.karta.zaglavljen { border-left: 4px solid var(--zuta); }
.karta .stoji { color: var(--zuta); font-weight: 700; }
.karta .napredak { height: 4px; border-radius: 2px; background: var(--linija-meka); margin-top: 6px; overflow: hidden; }
.karta .napredak i { display: block; height: 100%; background: var(--zelena); }
.karta.zaglavljen .napredak i { background: var(--zuta); }
.karta.nema { border-left: 4px solid var(--crvena); }
/* Kartica naloga u dva reda (O-59): broj · kupac · rok, pa obim ili sta fali i radnja desno. */
.karta-r1 { display: flex; align-items: baseline; gap: 6px; }
.karta-r1 .karta-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karta-r1 .pill { flex: none; }
.karta-r2 { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font-size: 13px; color: var(--tinta-meka); }
.karta-r2 .obim { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.karta-r2 .obim b { color: var(--tinta); }
.karta-r2 .radnja { flex: none; display: flex; gap: 8px; align-items: baseline; }
.sivo-sitno { color: var(--tinta-meka); font-size: 13px; }
button.link.sitno { font-size: 13px; padding: 0 2px; }
/* „dodeli ▾": pravi <select>, ali izgleda kao tekst; spisak se otvara istim klikom. */
.dodeli-tekst { position: relative; display: inline-flex; align-items: center; }
.dodeli-tekst select { appearance: none; -webkit-appearance: none; width: auto; min-height: 0; margin: 0; padding: 0 14px 0 2px; border: 0; background: none;
  color: var(--plava); font-size: 13px; text-decoration: underline; cursor: pointer; }
.dodeli-tekst.dodeljen select { text-decoration: none; font-weight: 650; color: var(--tinta); }
.dodeli-tekst::after { content: "▾"; position: absolute; right: 0; color: var(--plava); font-size: 12px; pointer-events: none; }
.dodeli-tekst select option { color: var(--tinta); background: var(--kartica); }
.ceka-jos > button.jos { border-top: 0; padding-top: 2px; }
.karta .dugme-malo { min-height: 34px; padding: 4px 10px; font-size: 13px; margin-top: 8px; }
/* Tabla „Rok ističe": prošao rok crven, ističe za 3 dana i manje narandžasto. */
.rok-istice { border-left: 3px solid var(--zuta); }
.rok-stavka { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linija-meka); font-size: 14px; }
.rok-stavka.prosao { color: var(--crvena); }
.rok-stavka.prosao .sivo { color: var(--crvena); }
.rok-stavka.blizu .sivo { color: var(--zuta); font-weight: 650; }
.rok-stavka .dugme-malo { min-height: 34px; padding: 4px 10px; font-size: 13px; }
.karta form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.karta form input { min-height: 38px; padding: 6px 8px; font-size: 14px; flex: 1 1 90px; min-width: 0; }
.karta form button { min-height: 38px; white-space: nowrap; }
/* Tabla „Za kurira": zbir spakovanih i grupna predaja (2b). */
.kurir-okvir { margin-bottom: 8px; padding: 10px 12px; font-size: 14px; }
.kurir-okvir .kurir-dugme { display: block; width: 100%; margin-top: 8px; min-height: 40px; }
.kurir-predaja label { margin: 8px 0 0; font-size: 13px; }
.kurir-red { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--linija-meka); padding-top: 6px; }
.kurir-predaja input { min-height: 38px; padding: 6px 8px; font-size: 14px; }
.okvir { background: var(--kartica); border: 1px solid var(--linija); border-radius: var(--r); padding: 12px 14px; }
.okvir h3 { margin: 0 0 8px; font-size: 14px; }
.pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linija); color: var(--tinta-meka); font-weight: 600; white-space: nowrap; }
.pill.z { color: var(--zelena); border-color: var(--zelena); background: var(--zelena-bleda); }
.pill.c { color: var(--crvena); border-color: var(--crvena); background: var(--crvena-bleda); }
.pill.p { color: var(--plava); border-color: var(--plava); background: var(--plava-bleda); }
.pill.y { color: var(--zuta); border-color: var(--zuta); background: var(--zuta-bleda); }
/* Tabla: „Treba tvoju odluku" (docs/analiza-pogled-sefa.html, 1a) */
.napredak { display: block; height: 5px; background: var(--linija-meka); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.napredak i { display: block; height: 100%; background: var(--plava); }
.odluka { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linija-meka); }
.odluka:first-of-type { border-top: 0; }
.odluka .tacka { width: 10px; height: 10px; border-radius: 50%; background: var(--plava); }
.odluka.c .tacka { background: var(--crvena); }
.odluka.y .tacka { background: var(--zuta); }
.odluka .tekst { font-size: 14px; }
.odluka .tekst small { display: block; color: var(--tinta-meka); font-size: 13px; }
.odluka .radnje { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.odluka .dugme-malo { min-height: 34px; padding: 4px 10px; font-size: 13px; display: inline-flex; align-items: center; text-decoration: none;
  border: 1.5px solid var(--plava); border-radius: 8px; color: var(--plava); background: var(--kartica); }
.odluka .dugme-malo.glavno { background: var(--plava); color: var(--na-plavoj); }
/* U uskoj koloni desno radnje idu ispod teksta, da tekst ne bude stisnut. */
.tabla-strana .odluka { grid-template-columns: 12px minmax(0, 1fr); }
.tabla-strana .odluka .radnje { grid-column: 2; justify-content: flex-start; }
.tabla-strana button.grupa-dugme { grid-template-columns: 12px minmax(0, 1fr) auto; }
@media screen and (max-width: 640px) {
  .odluka { grid-template-columns: 12px minmax(0, 1fr); }
  .odluka .radnje { grid-column: 2; justify-content: flex-start; }
  .odluka .dugme-malo { min-height: 44px; flex: 1; justify-content: center; }
}

/* Tabla: „Ulaz danas" (tabla-ulaz.js) — mali spisak ispod odluka; sto trazi radnju nosi „↑ u odlukama". */
.ulaz-red { font-size: 14px; padding: 6px 0; border-top: 1px solid var(--linija-meka); }
.ulaz-spisak h3 + .ulaz-red { border-top: 0; }
.ulaz-glava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ulaz-opis { font-size: 13px; color: var(--tinta-meka); margin-top: 1px; overflow-wrap: anywhere; }
.u-odlukama { font-size: 12.5px; color: var(--tinta-meka); margin-left: auto; }
.ulaz-red.sutra { font-size: 13.5px; }
.ulaz-red .crveno { color: var(--crvena); font-weight: 650; }

/* Sklapanje na Tabli (mokap-tabla-sazetak, O-36 do O-40): neposredno dete .sklop-telo se vidi samo kad je kutija otvorena. */
.sklop:not(.otvoren) > .sklop-telo { display: none; }
.sklop.otvoren > button .kad-zatvoreno, .sklop:not(.otvoren) > button .kad-otvoreno { display: none; }
.strelica::after { content: "▸"; color: var(--tinta-meka); font-size: 15px; }
.sklop.otvoren > button .strelica::after { content: "▾"; }
.zbir-boja { font-weight: 400; margin-left: 6px; font-size: 13px; }
.zbir-boja .pill { font-size: 12px; padding: 1px 7px; }
button.jos { display: block; width: 100%; text-align: left; padding: 8px 0 2px; border-top: 1px solid var(--linija-meka); border-radius: 0; font-size: 14px; }
button.jos .sivo { font-size: 13px; }
button.grupa-dugme { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--linija-meka); border-radius: 0; font: inherit; color: inherit; cursor: pointer; min-height: 0; }
.odluka-grupa:first-child > button.grupa-dugme { border-top: 0; }
button.grupa-dugme .tekst small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odluka-grupa > .sklop-telo { padding-left: 22px; }
td.crveno, .lista .crveno { color: var(--crvena); font-weight: 650; }
/* Artikli: broj „Naručeno" nosi oblacic sa narudzbama; Narudzbe: kartica na koju se doslo sa artikla. */
.naruceno-broj { border-bottom: 1px dotted currentColor; cursor: help; }
.naruceno-broj.crveno { color: var(--crvena); font-weight: 650; }
.ima-oblacic { cursor: help; }
.ima-oblacic[aria-expanded="true"] { outline: 2px solid var(--plava); outline-offset: 2px; border-radius: 2px; }
/* Nas oblacic (ui.js oblacic(), mokap-oblacic-naruceno B): uz broj na racunaru, list odozdo na telefonu. */
.oblacic { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
  background: var(--kartica); color: var(--tinta); border: 1px solid var(--linija); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(10, 20, 40, .18); font-size: 13px; line-height: 1.35; text-align: left; font-weight: 400; }
.oblacic:not(.list) { overflow: visible; }
.oblacic:not(.list)::after { content: ""; position: absolute; top: -7px; left: calc(var(--strelica, 30px) - 6px); width: 12px; height: 12px;
  background: var(--kartica); border-left: 1px solid var(--linija); border-top: 1px solid var(--linija); transform: rotate(45deg); }
.oblacic.gore::after { top: auto; bottom: -7px; transform: rotate(225deg); }
.oblacic .gl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 12px 7px; border-bottom: 1px solid var(--linija-meka); }
.oblacic .gl b { font-size: 14px; }
.oblacic .gl .sivo, .oblacic .sivo { font-size: 13px; }
.oblacic .deo { padding: 8px 12px 9px; border-top: 1px solid var(--linija-meka); }
.oblacic .gl + .deo { border-top: 0; }
.oblacic .r1 { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.oblacic .r1 b { font-size: 13.5px; }
.oblacic .r1 .kom { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.oblacic dl { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 2px 8px; margin: 0; }
.oblacic dt { color: var(--tinta-meka); }
.oblacic dd { margin: 0; }
.oblacic dd.cr, .oblacic .cr { color: var(--crvena); font-weight: 600; }
.oblacic .lnk { color: var(--plava); font-size: 13px; display: inline-block; margin-top: 5px; }
.oblacic .ob-dno { padding: 7px 12px; border-top: 1px solid var(--linija-meka); background: var(--papir); border-radius: 0 0 8px 8px; font-size: 13px; color: var(--tinta-meka); }
.oblacic .ob-dno a { font-weight: 650; }
.oblacic .ob-traka { height: 5px; background: var(--linija-meka); border-radius: 3px; overflow: hidden; margin: 4px 0 2px; }
.oblacic .ob-traka i { display: block; height: 100%; background: var(--zelena); }
.oblacic .ob-veliko { font-size: 16px; font-weight: 700; }
.oblacic-sloj { position: fixed; inset: 0; z-index: 59; background: rgba(10, 15, 30, .35); }
.oblacic.list { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: 75vh; border-radius: 14px; padding-bottom: 6px; font-size: 14px; }
.oblacic.list .rucka { width: 38px; height: 4px; border-radius: 2px; background: var(--linija); margin: 8px auto 2px; }
.oblacic.list dl { grid-template-columns: 90px minmax(0, 1fr); }
.oblacic.list .lnk { font-size: 15px; padding: 6px 0; }
.oblacic.list .ob-dno { border-radius: 0; }
.oblacic.usko:not(.list) { width: min(230px, calc(100vw - 16px)); }
.oblacic dl.brojevi { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; }
.oblacic dl.brojevi dd { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .oblacic { box-shadow: 0 6px 22px rgba(0, 0, 0, .5); } }
button.pill { min-height: 0; padding: 1px 8px; border-width: 1px; border-radius: 999px; font-size: 12px; }
.okvir.istaknuta { box-shadow: 0 0 0 3px var(--plava); }
button.sklop-red { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-height: 0; border-radius: 0; }
button.sklop-red .strelica { float: right; margin-left: 6px; }
/* Zaglavlje „Čeka": „8 kompl. · 3 fali · 1 nema" u jednom redu ispod naziva (O-59). */
.kolona-brojke { display: block; margin-top: 3px; letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 400; color: var(--tinta-meka); }
.kolona-brojke b { font-variant-numeric: tabular-nums; }
.kolona-brojke .z b { color: var(--zelena); } .kolona-brojke .y b { color: var(--zuta); } .kolona-brojke .c b { color: var(--crvena); }
.ulaz-ime { color: inherit; text-decoration: none; }
.ulaz-ime:hover { text-decoration: underline; }
/* Ljudi na telefonu (kartica „Ljudi"): ceo spisak. */
.covek { padding: 6px 0; border-top: 1px solid var(--linija-meka); font-size: 14px; }
.covek.siv { color: var(--tinta-meka); }
.covek .sivo { font-size: 13px; }

/* Tabele na racunaru */
table { width: 100%; border-collapse: collapse; background: var(--kartica); border: 1px solid var(--linija); border-radius: var(--r); font-size: 14.5px; }
th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-meka); border-bottom: 1.5px solid var(--linija); padding: 8px 10px; font-weight: 650; }
/* Zaglavlje koje sortira (Artikli): izgleda kao th, klik obrce smer. */
th button.sort { all: unset; cursor: pointer; white-space: nowrap; }
th button.sort:hover, th button.sort.aktivan { color: var(--plava); }
th button.sort:focus-visible { outline: 2px solid var(--plava); outline-offset: 2px; }
td { border-top: 1px solid var(--linija-meka); padding: 8px 10px; vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.klik { cursor: pointer; }
tr.klik:hover td { background: var(--plava-bleda); }
.skrol { overflow-x: auto; }
.red-alata { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.red-alata label { margin: 0; min-width: 160px; }
.red-alata .rastegni { flex: 1; min-width: 200px; }
.forma-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.dugmad { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.dugmad .glavno { padding: 10px 18px; }
textarea { min-height: 140px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* Zaglavlje za racunar (O-55, O-60): nekoliko linkova, padajuci meniji Nabavka ▾ / Više ▾, „+ Novo ▾" i inicijali. */
.traka nav.gore { flex: 1; align-items: center; }
.traka .padaj { position: relative; }
.padaj-dugme { background: none; border: 0; color: var(--na-plavoj); min-height: 0; padding: 6px 10px; border-radius: 6px; font-size: 15px; opacity: .85; }
.padaj-dugme::after { content: " ▾"; font-size: 12px; }
.padaj-dugme.akt, .padaj.otvoren > .padaj-dugme { background: rgba(255,255,255,.16); opacity: 1; }
.padaj-dugme.akt { font-weight: 600; }
.padaj-meni { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 210px; padding: 6px 0;
  background: var(--kartica); color: var(--tinta); border: 1px solid var(--linija); border-radius: 8px; box-shadow: 0 8px 24px rgba(10, 20, 40, .18); }
.padaj.otvoren > .padaj-meni { display: block; }
.padaj-meni.desno, .novo .padaj-meni { left: auto; right: 0; }
.traka .padaj-meni a { display: block; color: var(--tinta); text-decoration: none; padding: 8px 14px; font-size: 15px; opacity: 1; border-radius: 0; white-space: nowrap; }
.traka .padaj-meni a:hover { background: var(--plava-bleda); }
.traka .padaj-meni a.akt { font-weight: 650; color: var(--plava); background: var(--plava-bleda); }
.padaj-naslov { display: block; padding: 8px 14px 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-bleda); }
.padaj-meni hr { border: 0; border-top: 1px solid var(--linija-meka); margin: 6px 0; }
.novo > .padaj-dugme { border: 1.5px solid rgba(255,255,255,.55); font-weight: 650; opacity: 1; padding: 5px 12px; }
.novo-kratko { display: none; }
.padaj-dugme.inicijali { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.18); font-weight: 700; font-size: 14px; opacity: 1; }
.padaj-dugme.inicijali::after { content: none; }
.padaj-ko { display: block; padding: 6px 14px 8px; font-size: 13px; color: var(--tinta-meka); border-bottom: 1px solid var(--linija-meka); white-space: nowrap; }
.padaj-ko b { display: block; font-size: 15px; color: var(--tinta); }
.traka .padaj-meni button.link { color: var(--plava); padding: 8px 14px; font-size: 15px; }
.ko-tel { display: none; }

@media screen and (max-width: 1100px) {
  .tabla-raspored { grid-template-columns: minmax(0, 1fr); }
  .tabla-strana { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media screen and (max-width: 900px) {
  .tabla, .tabla:has(.kolona-poslato.otvoren) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
  main.sto { padding: 14px 12px 40px; }
}

/* Telefon (O-57): sef u hodu. Meni za racunar je iza „☰" (spiskovi otvoreni jedan ispod drugog), „+" je „+ Novo ▾",
   donja traka nosi Tablu. Tabla dobija kartice Nalozi · Odluke · Ulaz · Ljudi; vidi se jedna. Isti /api/tabla, samo CSS. */
.meni-dugme { display: none; }
.tabla-kartice, .kolona-izbor { display: none; }
@media screen and (min-width: 641px) {
  nav.dno.samo-tel, .padaj-naslov.samo-tel { display: none; }
  .tabla-ekran [data-panel="ljudi"] { display: none; }
}
@media screen and (max-width: 640px) {
  .sa-menijem { gap: 4px 8px; }
  .sa-menijem .firma { margin-right: auto; }
  .sa-menijem .meni-dugme { display: inline-block; min-height: 40px; min-width: 40px; padding: 0 8px; font-size: 22px; text-decoration: none; }
  .sa-menijem:not(.meni-otvoren) nav.gore { display: none; }
  .sa-menijem nav.gore { width: 100%; order: 3; flex-direction: column; align-items: stretch; gap: 0; }
  .sa-menijem nav.gore a { padding: 10px 12px; }
  .sa-menijem nav.gore .padaj-dugme { display: none; }
  .sa-menijem nav.gore .padaj-meni { display: block; position: static; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; }
  .traka.sa-menijem nav.gore .padaj-meni a { color: var(--na-plavoj); font-size: 15px; padding: 10px 12px; opacity: .85; }
  .traka.sa-menijem nav.gore .padaj-meni a.akt { background: rgba(255,255,255,.16); color: var(--na-plavoj); opacity: 1; }
  .sa-menijem nav.gore .padaj-naslov { color: var(--na-plavoj); opacity: .6; padding: 10px 12px 2px; }
  .sa-menijem nav.gore .padaj-meni hr { border-top-color: rgba(255,255,255,.2); }
  .sa-menijem .ja { display: none; }
  .sa-menijem .ko-tel { display: block; padding: 12px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.2); font-size: 14px; }
  .novo > .padaj-dugme { min-width: 40px; min-height: 40px; padding: 0 10px; font-size: 20px; line-height: 1; }
  .novo > .padaj-dugme::after { content: none; }
  .novo-ceo { display: none; }
  .novo-kratko { display: inline; }
  .traka .novo .padaj-meni a { padding: 12px 16px; }
  main.sa-dnom { padding-bottom: 96px; }

  /* Red brojki: kratko, u jednom redu. */
  .brojke { gap: 2px 10px; font-size: 14px; margin-bottom: 8px; }
  .brojke .osvezeno { font-size: 12px; }
  .brojka b { font-size: 16px; }
  .brojka .ceo, .brojka .s, .brojke .osvezeno .ceo { display: none; }
  .brojka .kratko { display: inline; }
  .brojka .k { font-size: 11.5px; }

  /* Kartice Table; zalepljene na vrh dok se skroluje. */
  .tabla-kartice { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0 -12px 10px; padding: 6px 12px;
    position: sticky; top: 0; z-index: 4; background: var(--papir); border-bottom: 1px solid var(--linija-meka); }
  .tabla-kartice button { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 52px; padding: 4px 2px; font-size: 13px; color: var(--tinta-meka); }
  .tabla-kartice button b { font-size: 18px; color: var(--tinta); font-variant-numeric: tabular-nums; }
  .tabla-kartice button[aria-selected="true"] { border-color: var(--plava); background: var(--plava-bleda); color: var(--plava); font-weight: 650; }
  .crvena-tacka { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--crvena); }

  .tabla-ekran [data-panel] { display: none; }
  .tabla-ekran[data-kartica="nalozi"] [data-panel="nalozi"], .tabla-ekran[data-kartica="odluke"] [data-panel="odluke"],
  .tabla-ekran[data-kartica="ulaz"] [data-panel="ulaz"], .tabla-ekran[data-kartica="ljudi"] [data-panel="ljudi"] { display: block; }
  .tabla-raspored, .tabla-strana { display: block; }
  .ljudi-red { display: none; }

  /* U „Nalozi" kolone su cipovi; vidi se jedna (izbor se pamti). */
  .kolona-izbor { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; }
  .kolona-izbor button { flex: 1 1 auto; min-height: 40px; padding: 4px 8px; border-radius: 999px; font-size: 13px; white-space: nowrap; color: var(--tinta-meka); }
  .kolona-izbor button[aria-selected="true"] { background: var(--plava); border-color: var(--plava); color: var(--na-plavoj); }
  .kolona-izbor button[aria-selected="true"] b { color: inherit; }
  .tabla { display: block; }
  .tabla .kolona { display: none; background: none; padding: 0; min-height: 0; }
  .tabla[data-tel="ceka"] .kolona-ceka, .tabla[data-tel="u_pripremi"] .kolona-u_pripremi,
  .tabla[data-tel="spakovano"] .kolona-spakovano, .tabla[data-tel="poslato"] .kolona-poslato { display: block; }
  .tabla .kolona-naslov, .tabla .kolona-poslato h2 { display: none; }
  .tabla .kolona h2 { margin: 0 0 6px; }
  .tabla-ekran .tabla .kolona-poslato > .sklop-telo { display: block; }

  /* Dugmad za prst: 44 px. */
  .tabla-ekran button.dugme-malo, .tabla-ekran a.dugme-malo, .tabla-ekran .karta form input, .tabla-ekran .karta form button,
  .tabla-ekran .kurir-okvir input, .tabla-ekran .kurir-okvir .kurir-dugme { min-height: 44px; }
  .tabla-ekran .dodeli-tekst select { min-height: 40px; margin: -10px 0; font-size: 14px; padding-left: 8px; }
  .tabla-ekran button.link.sitno { padding: 12px 6px; font-size: 14px; margin: -10px 0; }
  .tabla-ekran .karta-r2 { align-items: center; }
  .tabla-ekran .ljudi-sada button.link { padding: 13px 4px; }
}

/* Otpremnica: list papira i na ekranu (beo i u tamnoj temi), A4 u stampi. */
.otpremnica-alati { align-items: center; justify-content: space-between; }
.otpremnica { --t: #131722; --s: #535b6c; --l: #c9ced8; background: #fff; color: var(--t); max-width: 210mm; margin: 0 auto;
  padding: 18px 16px; border: 1px solid var(--linija); border-radius: 6px; font-size: 14px; }
.otpremnica .sivo { color: var(--s); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.otp-glava { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--t); padding-bottom: 10px; }
.otp-firma { font-size: 18px; font-weight: 700; }
.otp-broj { text-align: right; }
.otp-broj h1 { font-size: 22px; letter-spacing: .02em; }
.otp-kupac { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.otp-kupac b { font-size: 16px; }
.otpremnica table { background: #fff; border: 1px solid var(--l); border-radius: 0; font-size: 13.5px; }
.otpremnica th { color: var(--s); border-bottom: 1.5px solid var(--t); padding: 6px 8px; }
.otpremnica td { border-top: 1px solid var(--l); padding: 6px 8px; }
.otpremnica tfoot td { border-top: 1.5px solid var(--t); }
.otp-napomena { margin: 10px 0 0; }
.otp-partije { white-space: nowrap; font-size: .92em; }
.otp-partije .kom, .otp-partije-ispod .kom { color: var(--s); }
.otp-partije-ispod { display: none; font-size: .92em; color: var(--s); }
.otp-potpisi { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.potpis span { display: block; color: var(--s); font-size: 11px; }
.potpis .crta { border-bottom: 1px solid var(--t); height: 30px; display: flex; align-items: flex-end; padding: 0 4px 2px; }
@media screen and (max-width: 520px) {
  .otp-kupac, .otp-potpisi { grid-template-columns: 1fr; }
  .otp-broj { text-align: left; }
  .otpremnica { padding: 14px 10px; font-size: 13px; }
  .otpremnica th, .otpremnica td { padding: 5px 4px; }
  .otpremnica .otp-partije { display: none; }
  .otp-partije-ispod { display: block; }
}
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  body { background: #fff; }
  .traka, nav.dno, .ne-stampa, #poruka { display: none !important; }
  main.tel, main.sto { max-width: none; padding: 0; margin: 0; }
  .otpremnica { border: 0; padding: 0; max-width: none; font-size: 11pt; }
  .otpremnica tr { break-inside: avoid; }
  .otpremnica thead { display: table-header-group; }
  .otp-potpisi { break-inside: avoid; }
}

/* Nalepnice polica: A4, 3 × 8 po 70 × 37,125 mm. Uvek crno na belom, i u tamnom rezimu. */
.list-a4 { width: 210mm; height: 297mm; display: grid; grid-template-columns: repeat(3, 70mm); grid-template-rows: repeat(8, 37.125mm);
  page: nalepnice; background: #fff; color: #000; margin: 0 auto 18px; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); overflow: hidden; }
.nalepnica { box-sizing: border-box; padding: 3mm 4mm 2mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  outline: .2mm dashed #ccc; outline-offset: -.1mm; overflow: hidden; }
.nal-gore { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.nal-oznaka { font-size: 26pt; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.nal-kb { border: .5mm solid #000; border-radius: 1.5mm; padding: .5mm 2mm; font-size: 18pt; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.nal-kb small { display: block; font-size: 6pt; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.barkod { height: 12mm; display: block; }
.nal-kod { font: 600 8pt ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.nal-bez { font-size: 8pt; color: #b00; text-align: center; margin: 0; }
@media screen and (max-width: 800px) {
  .list-a4 { zoom: .45; }
}
@page nalepnice { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .traka, nav.dno, .nal-alati, #poruka { display: none !important; }
  main.sto { padding: 0; max-width: none; }
  .list-a4 { margin: 0; box-shadow: none; break-after: page; }
  .list-a4:last-child { break-after: auto; }
  .nalepnica { outline: none; }
}

/* Nova verzija posle deploy-a: traka na vrhu, ne prekida rad. */
.nova-verzija { position: sticky; top: 0; z-index: 50; background: var(--cijan); color: var(--na-plavoj); padding: 8px 16px; font-weight: 600; text-align: center; }
.nova-verzija button.link { color: inherit; font-weight: 700; }

/* Demo instanca (WMS_DEMO=1): traka iznad svega i izbor uloge na prijavi. */
.demo-traka { background: var(--zuta-bleda); color: var(--tinta); border-bottom: 1px solid var(--zuta); padding: 6px 16px; font-size: 13.5px; text-align: center; }
.demo-uloge { display: grid; gap: 8px; margin-bottom: 18px; }
.demo-uloge p { margin: 0; }
.demo-uloge button { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; text-align: left; }
.demo-uloge button small { font-weight: 400; color: var(--tinta-meka); }

/* Slika artikla: sličica uz stavku pripreme, veća na aktivnoj kartici i na izmeni artikla. */
ol.stavke .naziv { display: flex; align-items: center; gap: 8px; min-width: 0; }
.slicica { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--linija-meka); }
.artikal-sa-slikom { display: flex; align-items: center; gap: 12px; }
.artikal-sa-slikom .slicica { width: 76px; height: 76px; }
.slika-artikla { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.slika-artikla img { width: 160px; height: 160px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--linija); }
.slika-artikla .prazna { width: 160px; height: 160px; display: grid; place-items: center; border-radius: 10px; border: 2px dashed var(--linija); color: var(--tinta-bleda); font-size: 14px; }
.slika-artikla .dugmad { flex: 1; min-width: 180px; flex-direction: column; align-items: stretch; margin-top: 0; }

/* Sta naruciti: tabela na racunaru, kartica po artiklu do 520 px (docs/predlog-narucivanje.html, PR E). */
.kako { margin: -4px 0 12px; }
.kako summary { cursor: pointer; color: var(--plava); font-size: 14px; }
.predlog-tab td { vertical-align: middle; }
.pt-sifre { font-size: 12px; }
/* „Ima" = police − neuzeto u otvorenim nalozima: rastavljeno ispod broja. */
.predlog-tab .pt-nal { font-size: 11.5px; font-weight: 400; white-space: nowrap; }
/* Grupa samo sa „uskoro": tabela, zbir i forma su skriveni do „+ dodaj" (.red-alata je flex, pa hidden sam ne bi vazio). */
.narudzba-grupa [hidden] { display: none !important; }
.korak { display: inline-flex; gap: 4px; align-items: center; }
.korak button { min-width: 38px; min-height: 38px; padding: 0; font-size: 18px; }
.korak input { width: 76px; min-height: 38px; padding: 6px; text-align: center; font-weight: 700; }
.pt-pak { font-size: 12px; margin-top: 2px; white-space: nowrap; }
.pt-zasto { white-space: nowrap; }
.dana-c { color: var(--crvena); } .dana-y { color: var(--zuta); } .dana-z { color: var(--zelena); }
.pt-otvori td { background: var(--plava-bleda); font-size: 14px; }
.pt-zbir { background: var(--plava-bleda); border-radius: 8px; padding: 8px 12px; margin: 10px 0 12px; font-size: 14px; }
/* PR F: „Uskoro i ovo" uz grupu i izbor dobavljaca za artikal bez dobavljaca. */
.pt-uskoro { background: var(--zuta-bleda); border-left: 3px solid var(--zuta); border-radius: 6px; padding: 8px 12px; margin: 10px 0 0; font-size: 14px; }
.pt-usk-red { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; padding: 6px 0 0; }
.pt-usk-red button { min-height: 38px; }
.pt-dob { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 4px; }
.pt-dob select { min-height: 38px; max-width: 220px; }
@media screen and (max-width: 520px) {
  .predlog-tab, .predlog-tab tbody, .predlog-tab tr, .predlog-tab td { display: block; border: 0; }
  .predlog-tab { background: none; }
  .predlog-tab thead, .predlog-tab tr[hidden] { display: none; }
  .predlog-tab tbody { background: var(--kartica); border: 1px solid var(--linija); border-radius: var(--r); margin: 8px 0; padding: 8px 10px; }
  .predlog-tab td { padding: 2px 0; }
  .predlog-tab .pt-br, .predlog-tab .pt-dovoljno { display: inline-block; margin-right: 10px; font-size: 13.5px; text-align: left; }
  .predlog-tab .pt-br.pt-sakrij { display: none; }
  .predlog-tab [data-l]::before { content: attr(data-l) " "; color: var(--tinta-meka); }
  .predlog-tab .pt-kol { margin-top: 6px; }
  .predlog-tab .korak { display: flex; }
  .predlog-tab .korak input { flex: 1; width: auto; min-width: 0; min-height: 46px; font-size: 18px; }
  .predlog-tab .korak button { min-width: 46px; min-height: 46px; }
  .predlog-tab .pt-otvori td { border-radius: 8px; padding: 8px; margin-top: 6px; }
  .predlog-tab .pt-dob select { flex: 1; max-width: none; min-height: 46px; }
  .pt-usk-red button { min-height: 46px; }
}

/* Narudzbenica (Sta naruciti): na ekranu skrivena, u stampi samo ona. */
#stampa-narudzbe { display: none; }
.narudzbenica table { width: 100%; border-collapse: collapse; }
.narudzbenica th, .narudzbenica td { border-bottom: 1px solid #999; padding: 4px 6px; text-align: left; }
@media print {
  body.stampa-narudzbe main#ekran > *:not(#stampa-narudzbe) { display: none !important; }
  body.stampa-narudzbe #stampa-narudzbe { display: block; color: #000; font-size: 11pt; }
  .narudzbenica tr { break-inside: avoid; }
  .narudzbenica thead { display: table-header-group; }
}

/* Narudzbe posle belezenja (PR G): pregled mejla pre slanja, izmena u kartici. */
.mejl-pregled { margin: 10px 0; border-color: var(--plava); }
.mejl-zaglavlje { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 8px; font-size: 14px; }
.mejl-zaglavlje dt { color: var(--tinta-meka); }
.mejl-zaglavlje dd { margin: 0; overflow-wrap: anywhere; }
.mejl-tekst { white-space: pre-wrap; overflow-wrap: anywhere; font: 13.5px/1.45 ui-monospace, Consolas, monospace; background: var(--plava-bleda);
  border-radius: 8px; padding: 10px 12px; margin: 0; max-height: 420px; overflow: auto; }
.izmena { border-top: 1px dashed var(--linija); margin-top: 10px; padding-top: 10px; }
.izmena .rezultati li .sivo { font-size: 13px; }
/* Pretraga artikla sa dugmetom za kameru; traka kamere na vrhu ne sme da pokrije ekran nabavke (main.sto). */
.trazi-red { display: flex; gap: 6px; margin-top: 4px; }
.trazi-red input { margin-top: 0; flex: 1; min-width: 0; }
.trazi-red button { min-width: 46px; padding: 0 6px; font-size: 20px; }
body.kamera-otvorena main.sto { padding-top: calc(42vh + 12px); }
body.kamera-otvorena [data-trazi] { scroll-margin-top: calc(42vh + 16px); }
@media screen and (max-width: 520px) {
  .izmena .red-alata label { min-width: 0; flex: 1 1 100%; }
  .mejl-pregled .dugmad button { flex: 1; min-height: 46px; }
}

/* Izmena artikla: cetiri kartice jedne forme, „Sačuvaj" zalepljen za dno (docs/mokap-artikal-unos.html). */
.artikal-izmena { max-width: 980px; }
.artikal-cipovi { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 6px 0 10px; font-size: 14px; }
.kartice-artikla { display: flex; gap: 2px; box-shadow: inset 0 -1.5px 0 var(--linija); margin: 0 0 14px; overflow-x: auto; overflow-y: hidden; }
.kartice-artikla button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 8px 12px; min-height: 44px;
  color: var(--tinta-meka); font-weight: 600; white-space: nowrap; }
.kartice-artikla button[aria-selected="true"] { color: var(--plava); border-bottom-color: var(--plava); }
.kartice-artikla button i { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--zuta); margin-left: 5px; vertical-align: middle; }
.kartice-artikla button.izmenjena i { display: inline-block; }
.kartice-artikla button.greska i { display: inline-block; background: var(--crvena); }
.artikal-izmena section h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-meka); margin: 14px 0 8px; }
.artikal-izmena .slika-artikla { margin: 14px 0; }
.artikal-izmena .slika-artikla img, .artikal-izmena .slika-artikla .prazna { width: 96px; height: 96px; }
details.glas { border: 1px dashed var(--linija); border-radius: var(--r); padding: 10px 12px; margin: 12px 0; }
details.glas summary { cursor: pointer; font-weight: 600; }
details.glas[open] summary { margin-bottom: 10px; }
.nivoi { display: grid; gap: 12px; }
fieldset.nivo { border: 1.5px solid var(--linija); border-radius: var(--r); background: var(--kartica); padding: 6px 12px 4px; margin: 0; min-width: 0; }
fieldset.nivo legend { font-weight: 700; padding: 0 4px; }
.nivo-barkod { margin: 0 0 8px; }
.mere-red { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.mere-red.dva { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.mere-red .sivo { margin: 0 0 14px; }
.nivo-dodaj button { width: 100%; border-style: dashed; color: var(--plava); min-height: 52px; }
.izvor-mera { max-width: 320px; margin-top: 12px; }
input.pogresno { border-color: var(--crvena); background: var(--crvena-bleda); }
.traka-cuvaj { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  background: var(--papir); border-top: 1px solid var(--linija); padding: 10px 0; margin-top: 16px; }
.traka-cuvaj .sivo { flex: 1; color: var(--zuta); }
.traka-cuvaj .glavno { padding: 10px 22px; }
.traka-cuvaj[hidden] { display: none; }
/* Racunar: tri nivoa pakovanja jedan pored drugog. */
@media screen and (min-width: 900px) {
  .nivoi { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
/* Tabla, red „Lager" (1f): sest plocica zdravlja stanja; boja levo kaze zdravo / pazi / crveno.
   Sve pod .lager-red: .plocice/.plocica su i na Danas i u traci dana — golo pravilo ih je stiskalo na 6 kolona. */
.lager-red { margin-top: 16px; }
.lager-red h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.lager-red h2 .sivo { text-transform: none; letter-spacing: 0; font-weight: 400; }
.lager-red .plocice { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.lager-red .plocica { min-height: 0; background: var(--kartica); border: 1px solid var(--linija); border-left: 4px solid var(--linija); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.lager-red .plocica.z { border-left-color: var(--zelena); } .lager-red .plocica.y { border-left-color: var(--zuta); } .lager-red .plocica.c { border-left-color: var(--crvena); }
.plocica-link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
a.plocica-link:hover .plocica-broj { text-decoration: underline; }
.plocica-naslov { font-size: 12.5px; color: var(--tinta-meka); font-weight: 600; }
.plocica-broj { font-size: 22px; line-height: 1.2; }
.plocica.c .plocica-broj { color: var(--crvena); } .plocica.z .plocica-broj { color: var(--zelena); }
.plocica-opis { font-size: 13px; color: var(--tinta-meka); overflow-wrap: anywhere; }
.plocica-dugmad { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plocica-dugmad .dugme-malo { min-height: 34px; padding: 4px 10px; font-size: 13px; }
@media screen and (max-width: 1100px) { .lager-red .plocice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 640px) { .lager-red .plocice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media screen and (max-width: 640px) {
  button.grupa-dugme { grid-template-columns: 12px minmax(0, 1fr) auto; min-height: 44px; }
  button.jos, button.sklop-red { min-height: 44px; }
  .odluka-grupa > .sklop-telo { padding-left: 10px; }
}

/* Artikal kod vise dobavljaca (docs/mokap-vise-dobavljaca.html): spisak na kartici „Nabavka".
   Na racunaru red tabele, do 640 px kartica: ime i ×, pa sifra i rok, pa glavni i poslednji prijem. */
.dob-spisak { display: grid; gap: 8px; margin-bottom: 10px; }
.dob-red { display: grid; grid-template-columns: 150px minmax(0, 1.6fr) minmax(0, 1fr) 160px 92px 44px; gap: 0 10px; align-items: end;
  background: var(--kartica); border: 1.5px solid var(--linija); border-radius: var(--r); padding: 8px 10px; }
.dob-red.glavni { border-left: 4px solid var(--plava); }
.dob-red label { margin: 0; }
.dob-glavni { align-self: center; position: relative; }
.dob-glavni input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.dob-glavni span { display: inline-flex; align-items: center; min-height: 44px; }
.dob-glavni .da { color: var(--plava); font-weight: 700; }
.dob-glavni .ne { border: 1.5px solid var(--linija); border-radius: 8px; padding: 0 10px; cursor: pointer; color: var(--tinta); font-size: 13px; }
.dob-glavni input:checked ~ .ne, .dob-glavni input:not(:checked) ~ .da { display: none; }
.dob-glavni input:focus-visible ~ span { outline: 2px solid var(--cijan); outline-offset: 1px; }
.dob-prijem { font-size: 12px; align-self: center; }
/* label je display:block, pa [hidden] sam ne sakriva rok artikla kad artikal ima dobavljace (O-48). */
#rok-artikla[hidden] { display: none; }
.dob-ukloni { font-size: 20px; line-height: 1; padding: 0; width: 44px; }
@media screen and (max-width: 640px) {
  .dob-red { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; }
  .dob-red .dob-ime { grid-column: 1 / 3; grid-row: 1; }
  .dob-red .dob-ukloni { grid-column: 3; grid-row: 1; }
  .dob-red .dob-sifra { grid-column: 1; grid-row: 2; }
  .dob-red .dob-dani { grid-column: 2 / 4; grid-row: 2; }
  .dob-red .dob-glavni { grid-column: 1; grid-row: 3; }
  .dob-red .dob-prijem { grid-column: 2 / 4; grid-row: 3; white-space: normal; }
}
/* „Šta naručiti": artikal prebacen kod drugog dobavljaca samo za ovu narudzbu (O-50). */
.pt-prebacen > tr:first-child td { background: var(--zuta-bleda); }
.pt-dob select[data-prebaci] { max-width: 330px; }

/* Priprema: traka poslednjeg skena, „u nalogu X od Y", unosi (docs/mokap-priprema-karton.html) */
.sken-traka { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; margin: 4px 0 12px; }
.sken-traka .plus { grid-row: span 2; font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sken-traka .sta { font-weight: 750; font-size: 15px; overflow-wrap: anywhere; }
.sken-traka .gde { grid-column: 2; font-size: 13.5px; overflow-wrap: anywhere; }
.sken-traka .ponisti { grid-row: 1 / span 2; grid-column: 3; background: transparent; color: inherit; border: 2px solid currentColor; font-weight: 650; padding: 6px 10px; }
.sken-traka.ok { background: var(--zelena); color: var(--kartica); }
.sken-traka.gr { background: var(--crvena); color: var(--kartica); }
.sken-traka.kraj { background: var(--zelena-bleda); color: var(--zelena); border: 2px solid var(--zelena); }
.sken-traka.siva { background: var(--kartica); color: var(--tinta-meka); border: 1px solid var(--linija); }
.u-nalogu { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 4px; font-size: 16px; }
.u-nalogu b { font-size: 24px; font-variant-numeric: tabular-nums; }
.u-nalogu .uzmi-jos b { font-size: 32px; }
.unos-napredak { display: flex; height: 14px; border: 1.5px solid var(--linija); border-radius: 5px; overflow: hidden; background: var(--papir); margin: 4px 0 8px; }
.unos-napredak span { background: var(--zelena); border-right: 2px solid var(--kartica); }
.unos-napredak span.nov { background: var(--cijan); }
.unos-cipovi { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.unos-cipovi span { font-size: 13px; border: 1px solid var(--linija); border-radius: 12px; padding: 2px 9px; background: var(--papir); }
.unos-cipovi span.nov { border-color: var(--cijan); color: var(--cijan); font-weight: 700; background: transparent; }
/* Broj kartona (docs/mokap-priprema-broj-kartona.html): traka „3/5", kutije, brojac u kameri. */
.sken-traka .plus.karton { font-size: 46px; letter-spacing: -1px; }
.sken-traka .plus.karton small { font-size: 22px; font-weight: 700; opacity: .8; letter-spacing: 0; }
.kartoni-broj { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 6px; font-size: 17px; }
.kartoni-broj b { font-size: 32px; font-variant-numeric: tabular-nums; }
.kartoni-kutije { display: grid; gap: 7px; margin: 0 0 8px; }
.kartoni-kutije i { font-style: normal; aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; align-content: center;
  font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; border: 2.5px dashed var(--linija); color: var(--tinta-bleda); background: var(--kartica); }
.kartoni-kutije i.da { border: 2.5px solid var(--zelena); background: var(--zelena); color: var(--kartica); }
.kartoni-kutije i.nov { border-color: var(--cijan); background: var(--cijan); box-shadow: 0 0 0 3px var(--plava-bleda); }
.kartoni-kutije i.kom { font-size: 14px; line-height: 1.05; border-color: var(--zuta); color: var(--zuta); }
.kartoni-kutije i.kom small { font-size: 11px; font-weight: 600; }
.kartoni-kutije i.kom.da { background: var(--zuta); color: var(--kartica); }
.kartoni-komadi { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--tinta-meka); margin: 0 0 8px; }
.kamera-sloj .kamera-brojac { position: absolute; left: 10px; top: 10px; z-index: 1; background: rgba(0,0,0,.72); border: 2px solid #5fe08f;
  border-radius: 12px; padding: 4px 12px 6px; color: #fff; text-align: center; line-height: 1; }
.kamera-sloj .kamera-brojac[hidden] { display: none; }
.kamera-sloj .kamera-brojac b { display: block; font-size: 52px; font-weight: 800; color: #5fe08f; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.kamera-sloj .kamera-brojac span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; margin-top: 2px; }
.kamera-sloj .kamera-brojac.nov { animation: brojac-blic .6s ease-out; }
@keyframes brojac-blic { 0% { background: #1f8a4c; transform: scale(1.12); } 100% { background: rgba(0,0,0,.72); transform: scale(1); } }
.otvori { background: var(--zuta-bleda); border-left: 3px solid var(--zuta); padding: 8px 10px; border-radius: 6px; margin: 0 0 10px; font-size: 14px; }
ol.stavke .kol.delimicno { color: var(--plava); }
ul.pregled { list-style: none; padding: 0; margin: 8px 0 12px; }
ul.pregled li { display: block; padding: 8px 2px; border-bottom: 1px solid var(--linija-meka); }
ul.pregled .r1 { display: flex; justify-content: space-between; gap: 10px; font-weight: 650; }
ul.pregled .r2 { display: block; color: var(--tinta-meka); font-size: 13.5px; }
ul.pregled li.manjak .kol { color: var(--crvena); }

/* Nalog: stavke levo, istorija desno; na uskom ekranu istorija ispod (docs/analiza-otprema-istorija-naloga.html, odeljak 5). */
.nalog-dva { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.istorija { background: var(--kartica); border: 1px solid var(--linija); border-radius: var(--r); padding: 12px 14px; }
.istorija h2 { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-meka); }
.istorija h2 .sivo { letter-spacing: 0; text-transform: none; font-weight: 400; }
ol.vremenska { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }
ol.vremenska::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--linija); }
ol.vremenska li { position: relative; padding: 0 0 11px; font-size: 14px; line-height: 1.35; }
ol.vremenska li::before { content: ""; position: absolute; left: -19px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--kartica); border: 2px solid var(--plava); }
ol.vremenska li.z::before { background: var(--zelena); border-color: var(--zelena); }
ol.vremenska li.y::before { border-color: var(--zuta); }
ol.vremenska li.c::before { background: var(--crvena); border-color: var(--crvena); }
ol.vremenska li.siv::before { border-color: var(--tinta-bleda); }
ol.vremenska .vr { font-variant-numeric: tabular-nums; font-weight: 700; margin-right: 6px; white-space: nowrap; }
ol.vremenska .ko { color: var(--tinta-meka); }
ol.vremenska .trajanje { font-size: 12px; color: var(--tinta-bleda); margin-left: 4px; white-space: nowrap; }
ol.vremenska small { display: block; color: var(--tinta-meka); font-size: 12.5px; }

/* Nalozi: spisak unazad (odeljak 6). Na telefonu red postaje kartica. */
.nalozi-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 10px 0 12px; }
.nalozi-filter label { margin: 0; min-width: 140px; }
.nalozi-filter .rastegni { flex: 1 1 260px; }
.nalozi-brzo { display: flex; gap: 4px; flex-wrap: wrap; }
.nalozi-brzo button { padding: 6px 10px; }
.nalozi-csv { margin-left: auto; }
/* Chrome ne postuje display: contents na sadrzaju <details>: na racunaru je details obican red filtera. */
.nalozi-vise { display: block; flex: 100 1 520px; }
.nalozi-vise > summary { display: none; }
.nalozi-vise-telo { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.nalozi-tabela td.nl-stanje { white-space: nowrap; }
@media screen and (max-width: 900px) {
  .nalog-dva { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 640px) {
  .nalozi-filter label { flex: 1 1 40%; min-width: 0; }
  .nalozi-filter .rastegni { flex-basis: 100%; }
  .nalozi-brzo { flex-basis: 100%; }
  .nalozi-vise { display: block; flex-basis: 100%; }
  .nalozi-vise > summary { display: list-item; cursor: pointer; color: var(--plava); padding: 10px 0; min-height: 44px; }
  .nalozi-vise-telo { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
  .nalozi-tabela td.prazno { display: none; }
  .nalozi-tabela tr.klik:hover td { background: none; }
  .nalozi-brzo button { flex: 1; min-height: 44px; }
  .nalozi-tabela, .nalozi-tabela tbody { display: block; border: 0; background: none; }
  .nalozi-tabela thead { display: none; }
  .nalozi-tabela tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; background: var(--kartica); border: 1px solid var(--linija); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; }
  .nalozi-tabela td { border: 0; padding: 0; font-size: 14px; }
  .nalozi-tabela td.nl-kupac { grid-column: 2; }
  .nalozi-tabela td.nl-stanje { grid-column: 1 / -1; grid-row: 2; }
  .nalozi-tabela td[data-k] { grid-column: 1 / -1; color: var(--tinta-meka); font-size: 13px; }
  .nalozi-tabela td[data-k]::before { content: attr(data-k) ": "; color: var(--tinta-bleda); }
}

/* Otprema PR 2: predaja, potpis, vrsta kutije, zapisnik (docs/analiza-otprema-istorija-naloga.html, mokapi 8 i 10). */
.predaja-nacini { display: flex; gap: 6px; margin: 0 0 14px; }
.predaja-nacini a { flex: 1; text-align: center; padding: 10px 6px; border: 1.5px solid var(--linija); border-radius: 8px; text-decoration: none; color: var(--tinta-meka); background: var(--kartica); min-height: 44px; }
.predaja-nacini a.izabran { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); font-weight: 600; }
.predaja { max-width: 560px; }
.predaja-glava { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.predaja-brojac { margin: 4px 0 8px; }
.predaja-nalog { display: flex; gap: 10px; align-items: flex-start; color: var(--tinta); font-size: 15px; padding: 8px 0; margin: 0; border-top: 1px solid var(--linija-meka); }
.predaja-nalog input { width: 22px; min-height: 22px; margin-top: 2px; flex: none; }
.predaja-kutija { font-size: 14px; padding: 4px 0 4px 32px; color: var(--tinta-meka); }
.predaja-kutija.ima { color: var(--zelena); }
.predaja-kutija .link { min-height: 32px; padding: 0 8px; }
.predaja-sken { margin: 10px 0; }
.predaja-dolazak { display: flex; gap: 8px; margin: 0 0 12px; }
.predaja-dolazak label { flex: 1; display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px; border: 1.5px solid var(--linija); border-radius: 8px; color: var(--tinta); min-height: 44px; }
.predaja-dolazak input { width: 20px; min-height: 20px; }
.predaja-izbor { display: flex; flex-direction: column; gap: 8px; }
.predaja-izbor a { text-decoration: none; color: var(--tinta); display: block; }
.potpis-polje { margin: 4px 0 14px; position: relative; }
.potpis-glava { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--tinta-meka); margin-bottom: 4px; }
.potpis-polje canvas { display: block; width: 100%; aspect-ratio: 3 / 1; background: #fff; border: 1.5px dashed var(--linija); border-radius: 8px; touch-action: none; cursor: crosshair; }
.potpis-crta { position: absolute; left: 16px; right: 16px; bottom: 14px; border-top: 1px solid #c8cdd6; font-size: 12px; color: #8a92a3; padding-top: 2px; pointer-events: none; }
.potpis-polje.potpisano .potpis-crta { visibility: hidden; }
.tipovi-kutija { margin: 8px 0 12px; }
.tipovi-red { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.tipovi-red > .sivo { min-width: 44px; font-size: 14px; }
.tip-kutije { flex: 1; min-height: 44px; border: 1.5px solid var(--linija); border-radius: 8px; background: var(--kartica); color: var(--tinta); font-size: 15px; }
.tip-kutije[aria-pressed="true"] { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); font-weight: 600; }
.nalog-kutije { margin: 8px 0; }
.nalog-kutije p { margin: 4px 0; }
.otprema-forma { align-items: flex-end; flex-wrap: wrap; }
.prevoznik-forma { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.prevoznik-forma h3, .prevoznik-forma .dugmad, .prevoznik-forma .kvacica { grid-column: 1 / -1; }
.kvacica { display: flex; gap: 8px; align-items: center; color: var(--tinta); }
.kvacica input { width: 20px; min-height: 20px; }
.zapisnik-potpis { display: block; max-width: 240px; height: auto; margin-top: 4px; }
@media print { .zapisnik-potpis { max-width: 200px; } }
/* Tabla: kolona Spakovano po nacinu otpreme (mokap 7). */
.grupa-zbir { margin: 0 0 8px; font-size: 13px; }
.spakovano-grupa { margin: 0 0 12px; }
.grupa-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; padding: 6px 0; border-top: 2px solid var(--linija); }
.grupa-glava > b { flex: 1 1 auto; }
.grupa-predaj.glavno { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 10px; border-radius: 8px; background: var(--plava); color: var(--na-plavoj); text-decoration: none; font-size: 13px; font-weight: 600; }
.grupa-nije .grupa-glava { border-top-color: var(--zuta); }
.nalepnice.ok { color: var(--zelena); }
.nalepnice.fali { color: var(--crvena); font-weight: 600; }
.nacin-izbor { margin: 6px 0 0; font-size: 13px; }
.nacin-izbor select { min-height: 36px; padding: 4px 8px; font-size: 14px; }
@media (max-width: 640px) {
  .grupa-predaj.glavno, .nacin-izbor select { min-height: 44px; }
}

/* S4: kvacice po kartici, druga isporuka, zapamcene osobe, kupci i pravila, uvoz spiska kurira (1.3.11). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kvacica-predaj { flex: none; width: 22px; height: 22px; margin: 0; align-self: center; }
.grupa-karta.neoznacena { opacity: .55; }
.grupa-karta.neoznacena .karta-link { text-decoration: line-through; }
.predaja-osobe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.predaja-osoba { min-height: 48px; text-align: left; line-height: 1.25; }
.predaja-osoba small { display: block; color: var(--siva, #5b6475); font-weight: 400; }
.predaja-osoba[aria-pressed="true"] { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); }
.predaja-osoba[aria-pressed="true"] small { color: inherit; }
.nalog-podela summary { cursor: pointer; font-weight: 600; }
.nalog-podela table input { width: 80px; }
.nalog-isporuke { list-style: none; padding: 0; margin: 6px 0; }
.nalog-isporuke li { padding: 6px 0; border-bottom: 1px solid var(--linija, #e3e6ec); }
.pravila .pravilo-radnje { white-space: nowrap; }
tr.izabran td { background: var(--plava-bleda, #eaf1ff); }
.uvoz-zbir .pill { margin: 0 4px 4px 0; }
.uvoz-redovi select { max-width: 220px; min-height: 36px; }
@media (max-width: 640px) {
  .kvacica-predaj { width: 28px; height: 28px; }
  .uvoz-redovi select { min-height: 44px; }
}
.red-alata [hidden], .predaja-polja[hidden], .predaja-reg[hidden] { display: none !important; }

/* Otprema faza 2a: dan sa turama, linije, vozila (docs/analiza-otprema-istorija-naloga.html, mokap 9). */
.otprema-kartice { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1.5px solid var(--linija); overflow-x: auto; overflow-y: hidden; }
.otprema-kartice a { padding: 8px 12px; text-decoration: none; color: var(--tinta-meka); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
.otprema-kartice a.akt { color: var(--plava); border-bottom-color: var(--plava); font-weight: 650; }
.otprema-glava h1 { margin-bottom: 2px; }
.otprema-dan-alati a.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1.5px solid var(--linija); border-radius: 8px; background: var(--kartica); text-decoration: none; color: var(--plava); font-weight: 600; }
.otprema-dan-alati input[type=date] { width: auto; }
.otprema-mreza { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.otprema-ture, .otprema-strana { display: grid; gap: 12px; min-width: 0; }
.tura-glava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tura-glava h3 { margin: 0; font-size: 16px; font-weight: 500; }
.tura-radnje { margin-left: auto; white-space: nowrap; }
.tura-opis { margin: 4px 0 6px; font-size: 14px; }
.pop { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; margin: 4px 0; }
.pop-deo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pop-traka { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--linija-meka); overflow: hidden; }
.pop-traka i { display: block; height: 100%; background: var(--zelena); }
.pop-traka.y i { background: var(--zuta); }
.pop-traka.c i { background: var(--crvena); }
ol.stanice { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--linija-meka); }
.stanica { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid var(--linija-meka); font-size: 14px; }
.stanica-br { width: 22px; flex: none; color: var(--tinta-meka); font-variant-numeric: tabular-nums; }
.stanica-ko { flex: 1 1 200px; min-width: 0; }
.stanica-ko a { color: inherit; text-decoration: none; }
.stanica-radnje { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stanica-radnje select, .u-turu select { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.u-turu { display: block; margin: 6px 0 0; }
.karta.slobodan .opis { white-space: normal; }
ul.vozila-danas { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; }
ul.vozila-danas li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--linija-meka); }
.tura-forma, .sifarnik-forma { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; margin: 8px 0; }
.tura-forma label, .sifarnik-forma label { margin: 0; flex: 1 1 150px; min-width: 0; }
.sifarnik-forma label.kratko { flex: 0 1 110px; }
.sifarnik-forma label.rastegni { flex: 2 1 240px; }
.tura-forma-dugmad { display: inline-flex; gap: 8px; align-items: center; }
fieldset.dani { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; flex: 1 1 100%; }
fieldset.dani legend { font-size: 14px; padding: 0; margin-bottom: 4px; width: 100%; }
fieldset.dani label.dan { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
fieldset.dani input { width: 20px; height: 20px; min-height: 0; }
table.kutije input { width: 80px; min-height: 36px; padding: 4px 8px; }
@media screen and (max-width: 900px) {
  .otprema-mreza { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 640px) {
  .tura-radnje { margin-left: 0; }
  .pop { gap: 4px 12px; }
  .stanica-radnje { width: 100%; justify-content: flex-end; }
  .stanica-radnje button.link { min-height: 36px; min-width: 36px; }
}

/* Telefon vozaca (faza 2b, docs/analiza-otprema-istorija-naloga.html, odeljci 8 i 13). Proveriti na 375 px. */
#vozac-traka { position: sticky; top: 0; z-index: 6; }
.vz-traka { display: block; padding: 9px 16px; font-weight: 650; font-size: 15px; text-align: center; text-decoration: none; }
.vz-traka.y { background: var(--zuta-bleda); color: var(--zuta); border-bottom: 1px solid var(--zuta); }
.vz-traka.c { background: var(--crvena-bleda); color: var(--crvena); border-bottom: 1px solid var(--crvena); }
.vz-glava { margin: 0 0 12px; }
.vz-glava h1 { margin: 0 0 2px; font-size: 22px; }
.vz-h { font-size: 17px; margin: 0 0 8px; }
.vz-utovar { margin-top: 12px; }
.vz-ut-stanica { padding: 8px 0; border-top: 1px solid var(--linija-meka); }
.vz-ut-stanica:first-of-type { border-top: 0; }
.vz-kut { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; margin: 4px 0; border-radius: 8px;
  border: 1px dashed var(--linija); color: var(--tinta-meka); font-size: 15px; }
.vz-kut.da { border-style: solid; border-color: var(--zelena); background: var(--zelena-bleda); color: var(--tinta); }
.vz-kut.ne { border-color: var(--zuta); background: var(--zuta-bleda); color: var(--zuta); }
.vz-stanice { display: grid; gap: 8px; }
.vz-st { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r); background: var(--kartica);
  border: 1px solid var(--linija); border-left: 5px solid var(--linija); text-decoration: none; color: var(--tinta); }
.vz-st.isporuceno { border-left-color: var(--zelena); }
.vz-st.delimicno { border-left-color: var(--zuta); }
.vz-st.vraceno { border-left-color: var(--crvena); }
.vz-st.isporuceno, .vz-st.delimicno, .vz-st.vraceno { opacity: .8; }
.vz-st-br { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--plava-bleda); color: var(--plava); }
.vz-st-telo { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; color: var(--tinta-meka); }
.vz-st-telo b { color: var(--tinta); font-size: 16px; }
.vz-nazad { display: inline-block; margin: 0 0 8px; padding: 6px 0; font-weight: 650; text-decoration: none; }
.vz-nav { display: block; text-align: center; text-decoration: none; margin: 8px 0 12px; }
.vz-red { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linija-meka); width: 100%; }
.vz-red:first-child { border-top: 0; }
.vz-red > span { min-width: 0; overflow-wrap: anywhere; }
.vz-red.c { color: var(--crvena); }
.vz-red-dugmad { display: flex; gap: 6px; flex: 0 0 auto; }
button.vz-red { background: var(--kartica); border: 1px solid var(--linija); border-radius: 8px; padding: 10px 12px; margin: 6px 0; text-align: left; color: var(--tinta); font: inherit; }
button.vz-red.izabrano { border-color: var(--plava); box-shadow: inset 0 0 0 1px var(--plava); background: var(--plava-bleda); }
.vz-ishod button { min-height: 52px; font-size: 16px; }
.vz-vr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linija-meka); }
.vz-vr:first-of-type { border-top: 0; }
.vz-vr > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.vz-vr.gotovo { color: var(--zelena); }
.vz-kor { display: inline-grid; grid-template-columns: 48px 44px 48px; align-items: center; text-align: center; flex: 0 0 auto; }
.vz-kor button { min-height: 48px; font-size: 22px; font-weight: 700; padding: 0; }
.vz-kor b { font-size: 19px; }
.vz-natpis { margin: 14px 0 6px; font-weight: 650; color: var(--tinta-meka); font-size: 14px; }
.vz-primio { display: flex; gap: 8px; }
.vz-primio input { flex: 1; min-width: 0; }
.cip.izabrano { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); }

/* Sef: Vozaci i povrat (#/otprema/vozaci). */
.vz-sef-tura, .vz-povrat { margin: 0 0 12px; }
.vz-sef-glava { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.vz-sef-stanice { display: grid; gap: 4px; }
.vz-sef-st { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--linija-meka); font-size: 15px; }
.vz-povrat-red { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linija-meka); }
.vz-povrat-odluka { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.vz-povrat-odluka select { min-width: 0; max-width: 100%; }
.vz-gps { display: flex; gap: 8px; align-items: center; margin: 16px 0; }
.vz-potpis-pregled { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.vz-potpis-pregled[hidden] { display: none; }
.vz-potpis-pregled > * { background: #fff; border-radius: var(--r); padding: 12px; max-width: 100%; }
.vz-potpis-pregled img { display: block; max-width: 100%; height: auto; }
.vz-nalepnica { justify-content: space-around; }
.vz-nal-kupac { font-size: 12px; font-weight: 700; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.vz-ekran .dugme-malo { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 12px; font-size: 14px;
  text-decoration: none; border: 1.5px solid var(--linija); border-radius: 8px; color: var(--plava); background: var(--kartica); font-weight: 600; }
.vz-ekran .dugme-malo.glavno { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); }
.vz-ekran .dugme-malo.opasno { color: var(--crvena); border-color: var(--crvena); }
.vz-ekran input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; }
.vz-povrat-red { color: var(--tinta); font-size: 15px; margin: 0; }
.vz-povrat-red > span { flex: 1; min-width: 0; }
.vz-povrat-odluka select { width: auto; min-width: 120px; }
.vz-gps { color: var(--tinta); }
.vz-plan { margin: 10px 0 4px; }
.vz-plan summary { font-weight: 650; cursor: pointer; padding: 6px 0; }
.vz-korak { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--linija-meka); font-size: 15px; }
.vz-korak > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.vz-korak-br { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--papir); border: 1px solid var(--linija); }
.vz-korak.sada { background: var(--plava-bleda); margin: 0 -8px; padding: 7px 8px; border-radius: 8px; }
.vz-korak.sada .vz-korak-br { background: var(--plava); color: var(--na-plavoj); border-color: var(--plava); }
.vz-korak.gotovo { color: var(--tinta-bleda); }
.vz-korak.gotovo .vz-korak-br { background: var(--zelena-bleda); color: var(--zelena); border-color: var(--zelena); }
/* Plan utovara (faza 2c, docs/analiza-otprema-istorija-naloga.html, odeljak 17): pravila, crtež po 6 zona, redosled, štampa. */
.utv-glava { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 16px; }
.utv-glava h1 { flex: 1 1 320px; }
.utv-za { min-width: 200px; margin: 0 0 12px; }
.utv-prednost { list-style: none; margin: 0 0 8px; padding: 0; }
.utv-pravilo { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--linija-meka); background: var(--kartica); }
.utv-pravilo.iskljuceno .utv-naziv b { color: var(--tinta-meka); font-weight: 500; }
.utv-pravilo.vuce { opacity: .5; outline: 2px dashed var(--cijan); }
.utv-rucka { cursor: grab; color: var(--tinta-bleda); font-size: 18px; user-select: none; }
.utv-br { width: 22px; text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-meka); }
.utv-naziv { flex: 1; min-width: 0; }
.utv-naziv .sivo-sitno { display: block; }
.utv-strelice { white-space: nowrap; }
.utv-strelice button.link { font-size: 18px; padding: 4px 8px; text-decoration: none; }
.utv-ukljuceno { margin: 0; }
.utv-ukljuceno input, .utv-kv input { width: 22px; height: 22px; min-height: 0; margin: 0; }
.utv-kv { display: flex; align-items: center; gap: 8px; color: var(--tinta); font-size: 15px; }
.utv-polja { display: flex; flex-wrap: wrap; gap: 0 16px; }
.utv-polja > label { flex: 1 1 200px; }
.utv-pct { display: flex; align-items: center; gap: 6px; }
.utv-pct input { width: 90px; }
.utv-dugmad { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.utv-cipovi .pill { margin: 0 4px 6px 0; font-size: 13px; }
.utv-cipovi .pill button.link { min-height: 0; padding: 0 2px; text-decoration: none; font-weight: 700; color: inherit; }
.utv-dodaj { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: flex-end; margin-bottom: 12px; }
.utv-dodaj label { flex: 1 1 220px; margin-bottom: 0; }
.tura-utovar { margin: 2px 0 6px; font-size: 14px; }

.utv-plan-glava h1 { margin-bottom: 2px; }
.utv-plan-telo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .utv-plan-telo { grid-template-columns: minmax(0, 1fr); } }
.utv-crtez { margin: 0 0 10px; }
.utv-prostor { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; border: 2px solid var(--tinta-meka); border-radius: 10px 4px 4px 10px; overflow: hidden; margin-top: 4px; }
.utv-kabina, .utv-vrata { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-meka); background: var(--linija-meka); display: flex; align-items: center; justify-content: center; }
.utv-vrata { transform: none; border-left: 3px dashed var(--tinta-meka); }
.utv-prostor.bocna .utv-vrata { border-left: 0; }
.utv-zone { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
.utv-red-ime { font-size: 11px; letter-spacing: .08em; color: var(--tinta-bleda); text-align: center; padding: 3px 0 0; }
.utv-zona { min-height: 92px; padding: 4px; border: 1px dashed var(--linija); display: flex; flex-direction: column; gap: 3px; }
.utv-zona.prazna { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--linija-meka) 6px 7px); }
.utv-zona-ime { font-size: 11px; color: var(--tinta-bleda); }
.utv-osovina { position: absolute; top: 0; bottom: 0; left: 66.67%; border-left: 2px dashed var(--crvena); pointer-events: none; }
.utv-osovina span { position: absolute; bottom: 2px; left: 4px; font-size: 10px; color: var(--crvena); white-space: nowrap; }
.utv-deo { display: block; font-size: 12px; line-height: 1.25; padding: 3px 5px; border-radius: 5px; border: 1.5px solid; overflow-wrap: anywhere; }
.utv-deo i { font-style: normal; color: var(--tinta-meka); white-space: nowrap; }
.utv-deo.lom { border-style: dashed; }
.utv-st { display: inline-block; min-width: 1.4em; text-align: center; font-weight: 700; border-radius: 4px; border: 1.5px solid; padding: 0 2px; }
/* Boje stanica (ponavljaju se posle šeste). */
.st-0 { --st: #1f8a4c; --st-b: #edf6f0; } .st-1 { --st: #0170b0; --st-b: #e9f3fa; } .st-2 { --st: #9a6b12; --st-b: #fbf3e3; }
.st-3 { --st: #8a3fb0; --st-b: #f4ecf8; } .st-4 { --st: #b23b23; --st-b: #f8efeb; } .st-5 { --st: #3b6b6b; --st-b: #ebf2f2; }
@media (prefers-color-scheme: dark) {
  .st-0 { --st: #5fbe86; --st-b: #16231b; } .st-1 { --st: #6cbcf0; --st-b: #14222e; } .st-2 { --st: #d9b06c; --st-b: #282016; }
  .st-3 { --st: #c79be0; --st-b: #241a2b; } .st-4 { --st: #e0957a; --st-b: #2a1f1a; } .st-5 { --st: #8cc4c4; --st-b: #172323; }
}
.utv-deo, .utv-st { color: var(--st); border-color: var(--st); background: var(--st-b); }
.utv-deo b { color: var(--st); }
.utv-koraci tr > td:first-child { box-shadow: inset 4px 0 0 var(--st); }
.utv-zbir { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-variant-numeric: tabular-nums; }
.utv-zbir-deo .sivo-sitno { display: block; }
.utv-koraci { width: 100%; border-collapse: collapse; font-size: 14px; }
.utv-koraci th, .utv-koraci td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--linija-meka); vertical-align: top; }
.utv-koraci .br { text-align: right; font-variant-numeric: tabular-nums; }
.utv-upozorenja { list-style: none; padding: 0; margin: 8px 0; font-size: 14px; }
.utv-upoz { padding: 6px 8px; border-left: 3px solid var(--linija); margin-bottom: 4px; background: var(--papir); border-radius: 4px; }
.utv-upoz.y { border-left-color: var(--zuta); background: var(--zuta-bleda); }
.utv-upoz.c { border-left-color: var(--crvena); background: var(--crvena-bleda); }
.utv-znak { font-weight: 700; }
.utv-stanice { padding-left: 0; list-style: none; margin: 0; }
.utv-stanice li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--linija-meka); }
.utv-stanice li.van > a { text-decoration: line-through; }
@media (max-width: 520px) {
  .utv-zona { min-height: 70px; padding: 3px; }
  .utv-deo { font-size: 11px; padding: 2px 3px; }
  .utv-deo i { display: block; }
  .utv-pravilo { padding: 8px 2px; gap: 4px; }
  .utv-rucka { display: none; }
}
@media print {
  .otprema-kartice, .utv-dugmad { display: none !important; }
  .utv-plan-telo { grid-template-columns: 1.2fr 1fr; }
  .utv-plan .okvir { border: 0; box-shadow: none; padding: 0; break-inside: avoid; }
  .utv-deo, .utv-st, .utv-zona.prazna { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* eOtpremnica (faza 3, PR 3): QR i broj na zapisniku, nalepnica kutije, glava grupe kurira na Tabli. */
.samo-stampa { display: none; }
.zapisnik-eotp { margin-top: 4px; font-size: 12px; }
.zapisnik-qr { display: block; width: 22mm; height: 22mm; margin-top: 2px; image-rendering: pixelated; }
.zapisnik-eotp-zbir { margin-top: 12px; }
.zapisnik-eotp-zbir p { margin: 4px 0; }
.eotp-glava { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nalepnica.nal-eotp { flex-direction: row; align-items: center; justify-content: flex-start; gap: 3mm; }
.nal-qr { width: 29mm; height: 29mm; flex: none; image-rendering: pixelated; }
.nal-eotp-tekst { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nal-eotp-tekst b { font-size: 15pt; font-weight: 800; letter-spacing: .02em; }
.nal-eotp-tekst span { font-size: 12pt; font-weight: 700; }
.nal-eotp-tekst small { font-size: 7pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 33mm; }
@media print {
  .samo-stampa { display: inline; }
}

/* Prijem: sken kartona kamerom (docs/mokap-prijem-sken-karton.html). Krupan broj kartona i komada;
   sa otvorenom kamerom zaglavlje se sklanja i traka staje odmah ispod kamere. */
.sken-traka.zu { background: var(--zuta-bleda); color: var(--zuta); border: 2px solid var(--zuta); }
.prijem-kartica .broj-redovi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.prijem-kartica .broj-redovi div { border: 1.5px solid var(--linija); border-radius: 10px; text-align: center; padding: 6px 4px; }
.prijem-kartica .broj-redovi div:only-child { grid-column: 1 / -1; }
.prijem-kartica .broj-redovi b { display: block; font-size: 38px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.prijem-kartica .broj-redovi span { font-size: 13px; color: var(--tinta-meka); }
.prijem-kartica .broj-redovi .glavni { border-color: var(--plava); background: var(--plava-bleda); }
.prijem-kartica .broj-redovi .glavni b { color: var(--plava); }
.prijem-kartica .broj-prijem p { margin: 0 0 6px; font-size: 13.5px; }
.prijem-kartica .broj-prijem p.preko { color: var(--zuta); font-weight: 650; }
body.kamera-otvorena .kam-skrij { display: none; }
body.kamera-otvorena .sken-traka { top: calc(42vh + 4px); scroll-margin-top: calc(42vh + 8px); }