/* Sklad - mobilna aplikacija. Izgled po uzoru na Olympsport B2B (kartice, zaglavlje, numpad),
   skeniranje po uzoru na Frutela mobilne ekrane. Radi od 360 px, bez horizontalnog skrolovanja. */
:root{
  --glava:#12283f; --glava-2:#1b3a5c; --glava-txt:#cfe0f1;
  --prim:#1f5fa8; --prim-tamna:#174a85; --prim-blijeda:#e6eefb;
  --akcent:#f0a23b;
  --pozadina:#f3f5f8; --karta:#fff; --linija:#e2e6ec; --linija-meka:#eef1f5; --ivica-polja:#c9d2dd;
  --tekst:#172230; --tekst-2:#3d4a5a; --sivo:#5a6675; --priguseno:#8a95a3;
  --ok:#1d6b35; --ok-bg:#e2f2e6; --ok-ivica:#b9dcc4;
  --upoz:#8a4b00; --upoz-bg:#fdecd6; --upoz-ivica:#f3d9a4;
  --crv:#9b1c1c; --crv-bg:#fbe3e3; --crv-ivica:#e3a5a5;
  --info:#1f4f8f; --info-bg:#e6eefb;
  --radijus:14px; --radijus-mali:10px;
  --sjena:0 1px 2px rgb(18 40 63 / .06), 0 1px 1px rgb(18 40 63 / .04);
  --sjena-jaka:0 4px 16px rgb(18 40 63 / .14);
  --fokus:0 0 0 3px rgb(31 95 168 / .25);
  --dno:env(safe-area-inset-bottom, 0px);
  accent-color:var(--prim);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--pozadina);color:var(--tekst);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.35;overflow-x:hidden;min-height:100dvh}
[hidden]{display:none!important}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(button){cursor:pointer;border:0;background:none;padding:0}
:where(input,select,textarea){width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--ivica-polja);border-radius:var(--radijus-mali);background:#fff}
:where(input,select,textarea,button):focus-visible{outline:none;box-shadow:var(--fokus)}
h1,h2,h3{margin:0}

/* ---------- zaglavlje ---------- */
.glava{position:sticky;top:0;z-index:30;background:var(--glava);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;display:flex;align-items:center;gap:10px;min-height:56px}
.glava-nazad{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgb(255 255 255 / .08);flex:0 0 auto}
.glava-tekst{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.glava-nad{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--glava-txt)}
.glava-naslov{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glava-desno{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.glava-dugme{min-height:40px;padding:0 10px;border-radius:20px;color:#fff;background:rgb(255 255 255 / .08);display:inline-flex;align-items:center;gap:6px;font-size:14px}
.veza{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--glava-txt);white-space:nowrap}
.veza::before{content:"";width:9px;height:9px;border-radius:50%;background:#3fbf6a}
.veza.ceka::before{background:var(--akcent)}
.veza.van::before{background:#e05252}

/* ---------- stranica ---------- */
.stranica{max-width:640px;margin:0 auto;padding:12px 12px calc(84px + var(--dno));display:flex;flex-direction:column;gap:12px}
.stranica.sa-akcijom{padding-bottom:calc(150px + var(--dno))}
.naslov-sekcije{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sivo);margin:6px 2px -4px}
.prazno{background:var(--karta);border:1px dashed var(--ivica-polja);border-radius:var(--radijus);padding:18px;color:var(--sivo);text-align:center;margin:0}
.hint{margin:0;color:var(--sivo);font-size:13px}

/* ---------- plocice (pocetna) ---------- */
.plocice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plocica{background:var(--karta);border:1px solid var(--linija);border-radius:var(--radijus);box-shadow:var(--sjena);padding:14px;display:flex;flex-direction:column;gap:6px;text-align:left;min-height:104px;position:relative}
a.plocica,a.red{color:inherit;text-decoration:none}
.plocica:active{background:var(--linija-meka)}
.plocica b{padding-right:30px}
.plocica.siroka b{padding-right:0}
.plocica .ik{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--prim-blijeda);color:var(--prim)}
.plocica.izd .ik{background:var(--upoz-bg);color:var(--upoz)}
.plocica.pri .ik{background:var(--ok-bg);color:var(--ok)}
.plocica b{font-size:15px;line-height:1.2}
.plocica small{color:var(--sivo);font-size:13px}
.plocica .broj{position:absolute;top:12px;right:12px;min-width:28px;height:28px;padding:0 8px;border-radius:14px;background:var(--glava);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}
.plocica.siroka{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:64px}

/* ---------- segmentirana kontrola ---------- */
.segment{display:flex;gap:4px;background:var(--linija-meka);border-radius:12px;padding:4px;overflow-x:auto;scrollbar-width:none}
.segment::-webkit-scrollbar{display:none}
.segment button{flex:1 0 auto;min-height:40px;padding:0 12px;border-radius:9px;color:var(--tekst-2);font-size:14px;font-weight:600;white-space:nowrap}
.segment button.on{background:#fff;color:var(--prim-tamna);box-shadow:var(--sjena)}

/* ---------- red liste (kartica sa strelicom) ---------- */
.redovi{display:flex;flex-direction:column;gap:8px}
.red{background:var(--karta);border:1px solid var(--linija);border-radius:var(--radijus);box-shadow:var(--sjena);padding:12px 36px 12px 14px;display:flex;flex-direction:column;gap:4px;text-align:left;position:relative;width:100%}
.red::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--priguseno)}
.red:active{background:var(--linija-meka)}
.red-gore{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.red-gore b{font-size:16px;overflow-wrap:anywhere}
.red-gore span{color:var(--sivo);font-size:13px;white-space:nowrap}
.red-meta{color:var(--tekst-2);font-size:14px;overflow-wrap:anywhere}
.red-cipovi{display:flex;gap:6px;flex-wrap:wrap}
.cip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--linija-meka);color:var(--tekst-2)}
.cip.ok{background:var(--ok-bg);color:var(--ok)}
.cip.upoz{background:var(--upoz-bg);color:var(--upoz)}
.cip.crv{background:var(--crv-bg);color:var(--crv)}
.cip.info{background:var(--info-bg);color:var(--info)}

/* ---------- pretraga ---------- */
.pretraga{position:relative}
.pretraga input{padding-left:40px}
.pretraga svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--priguseno)}

/* ---------- skeniranje ---------- */
.sken{position:sticky;top:56px;z-index:20;background:var(--karta);border:1px solid var(--linija);border-radius:var(--radijus);padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sjena-jaka)}
.sken-red{display:flex;gap:8px;min-width:0}
.sken-red input{flex:1 1 auto;min-width:0;min-height:52px;border:2px solid var(--prim);font-size:17px}
.kvadrat{width:52px;height:52px;flex:0 0 auto;border-radius:var(--radijus-mali);display:grid;place-items:center;background:var(--prim);color:#fff}
.kvadrat.svijetli{background:#fff;color:var(--prim);border:1px solid var(--prim)}
.kamera{display:flex;flex-direction:column;gap:8px}
.kamera-okvir{position:relative;border-radius:var(--radijus-mali);overflow:hidden;background:#000}
.kamera video{display:block;width:100%;height:210px;object-fit:cover}
.kamera-okvir::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;background:rgb(240 80 80 / .85);box-shadow:0 0 8px rgb(240 80 80 / .8)}
.poruka{border-radius:var(--radijus-mali);padding:9px 12px;font-size:15px;overflow-wrap:anywhere}
.poruka.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-ivica)}
.poruka.upoz{background:var(--upoz-bg);color:var(--upoz);border:1px solid var(--upoz-ivica)}
.poruka.crv{background:var(--crv-bg);color:var(--crv);border:2px solid var(--crv-ivica);font-weight:600}
.poruka.info{background:var(--info-bg);color:var(--info)}

/* napredak */
.napredak{background:var(--karta);border:1px solid var(--linija);border-radius:var(--radijus);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.napredak-tekst{display:flex;justify-content:space-between;font-size:14px;color:var(--tekst-2)}
.napredak-tekst b{color:var(--tekst)}
.bar{height:8px;border-radius:4px;background:var(--linija-meka);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .2s}

/* stavke */
.stavke{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.st{background:var(--karta);border:1px solid var(--linija);border-radius:var(--radijus);padding:10px 10px 10px 12px;display:flex;align-items:center;gap:8px;min-width:0}
.st.gotova{background:#f4fbf6;border-color:var(--ok-ivica)}
.st.dio{border:2px solid #d38a1c}
.st.visak{border:2px solid var(--crv-ivica);background:#fff8f8}
.st.van{border:2px dashed var(--info)}
.st.zadnja{box-shadow:0 0 0 3px rgb(240 162 59 / .55)}
.st-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;text-align:left}
.st-tekst b{font-size:15px;overflow-wrap:anywhere;line-height:1.25}
.st-tekst small{color:var(--sivo);font-size:12.5px;overflow-wrap:anywhere}
.st-kol{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.brojac{min-width:62px;min-height:44px;padding:0 4px;border-radius:var(--radijus-mali);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:var(--tekst-2);background:var(--linija-meka);line-height:1.05}
.brojac small{font-size:11.5px;font-weight:600;color:var(--sivo)}
.st.gotova .brojac{color:var(--ok);background:var(--ok-bg)}
.st.dio .brojac{color:var(--upoz);background:var(--upoz-bg)}
.st.visak .brojac{color:var(--crv);background:var(--crv-bg)}
.mali{width:40px;height:44px;border-radius:var(--radijus-mali);border:1px solid var(--ivica-polja);background:#fff;font-size:22px;line-height:1;display:grid;place-items:center;color:var(--tekst)}
.mali:disabled{opacity:.35}

/* donja traka akcija na ekranu liste */
.akcija-dno{position:fixed;left:0;right:0;bottom:calc(64px + var(--dno));z-index:25;padding:10px 12px;background:linear-gradient(to top, var(--pozadina) 70%, rgb(243 245 248 / 0));display:flex;justify-content:center}
.akcija-dno .unutra{max-width:640px;width:100%;display:flex;gap:8px}

/* ---------- dugmad ---------- */
.dugme{min-height:52px;padding:0 16px;border-radius:var(--radijus-mali);background:var(--prim);color:#fff;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center}
.dugme:active{background:var(--prim-tamna)}
.dugme:disabled{background:#c6cfda;color:#fff}
.dugme.sporedno{background:#fff;color:var(--prim-tamna);border:1px solid var(--ivica-polja)}
.dugme.zeleno{background:var(--ok)}
.dugme.opasno{background:#fff;color:var(--crv);border:1px solid var(--crv-ivica)}
.dugme.usko{width:auto;flex:0 0 auto}

/* ---------- donja navigacija ---------- */
.traka{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--linija);display:flex;justify-content:center;padding-bottom:var(--dno)}
.traka .unutra{display:flex;max-width:640px;width:100%}
.traka a{flex:1 1 0;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--sivo);text-decoration:none;font-size:12px;font-weight:600}
.traka a.on{color:var(--prim)}

/* ---------- prijava ---------- */
.prijava{max-width:420px;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;gap:16px}
.logo{display:flex;align-items:center;gap:12px}
.logo .znak{width:48px;height:48px;border-radius:12px;background:var(--glava);display:grid;place-items:center}
.logo b{font-size:22px;display:block}
.logo span{color:var(--sivo);font-size:14px}
.radnici{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radnik{min-height:84px;background:var(--karta);border:1px solid var(--linija);border-radius:var(--radijus);box-shadow:var(--sjena);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;font-weight:600;text-align:center}
.radnik .inicijali{width:40px;height:40px;border-radius:50%;background:var(--prim-blijeda);color:var(--prim-tamna);display:grid;place-items:center;font-weight:700}
.pin-tacke{display:flex;justify-content:center;gap:14px;margin:6px 0}
.pin-tacke i{width:16px;height:16px;border-radius:50%;border:2px solid var(--prim)}
.pin-tacke i.puna{background:var(--prim)}

/* ---------- numpad ---------- */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.numpad button{min-height:56px;border-radius:var(--radijus-mali);background:#fff;border:1px solid var(--linija);font-size:22px;font-weight:600}
.numpad button:active{background:var(--linija-meka)}
.numpad button.siv{background:var(--linija-meka);font-size:16px}
.kol-ekran{display:flex;align-items:center;gap:8px}
.kol-ekran .vrijednost{flex:1 1 auto;min-height:60px;border-radius:var(--radijus-mali);border:2px solid var(--prim);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;background:#fff}
.kol-ekran .mali{width:60px;height:60px;font-size:28px}

/* ---------- donji list (sheet) ---------- */
.list-pozadina{position:fixed;inset:0;z-index:50;background:rgb(18 40 63 / .45);display:flex;align-items:flex-end;justify-content:center}
.list{background:#fff;width:100%;max-width:640px;max-height:92dvh;overflow:auto;border-radius:18px 18px 0 0;padding:10px 14px calc(16px + var(--dno));display:flex;flex-direction:column;gap:12px;animation:gore .16s ease-out}
.list::before{content:"";align-self:center;width:40px;height:4px;border-radius:2px;background:var(--linija)}
.list h3{font-size:18px}
.list .opis{color:var(--tekst-2);font-size:14px;margin:0}
.list ul.sazetak{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.list ul.sazetak li.crv{color:var(--crv);font-weight:600}
.list ul.sazetak li.upoz{color:var(--upoz)}
.list .dugmad{display:flex;flex-direction:column;gap:8px}
@keyframes gore{from{transform:translateY(24px)}to{transform:none}}

/* ---------- tost ---------- */
.tost{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(78px + var(--dno));z-index:60;max-width:calc(100% - 24px);background:var(--glava);color:#fff;padding:10px 16px;border-radius:12px;box-shadow:var(--sjena-jaka);font-size:15px}
.tost.crv{background:var(--crv)}

/* ---------- provjera ---------- */
.artikal{background:var(--karta);border:1px solid var(--linija);border-radius:var(--radijus);padding:14px;display:flex;flex-direction:column;gap:8px}
.artikal h2{font-size:19px;overflow-wrap:anywhere}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela td{padding:7px 4px;border-top:1px solid var(--linija-meka)}
.tabela td:last-child{text-align:right;font-weight:700;white-space:nowrap}

@media (max-width:380px){
  .stranica{padding-left:10px;padding-right:10px}
  .brojac{min-width:54px;font-size:16px}
  .mali{width:36px}
}

/* 2026-11-08: stanje na stavci, radni nalozi, knjizenje */
.plocica.rn .ik{background:var(--info-bg);color:var(--info)}
.st-tekst small.stanje{color:var(--ok)}
.st-tekst small.stanje.fali{color:var(--upoz);font-weight:700}
.red-gore span.kasni{color:var(--crv);font-weight:700}
a.poruka.veza-red{display:block;text-decoration:none;font-weight:600}
.poruka .dugme{margin-top:10px}
.poruka svg{vertical-align:-5px}
.akcija-dno .unutra{display:flex;flex-direction:column;gap:8px}
.stranica.sa-akcijom:has(.akcija-dno .dugme + .dugme){padding-bottom:calc(210px + var(--dno))}
.segment.kolona{flex-direction:column}
.segment.kolona button{white-space:normal;text-align:left;padding:8px 12px}
.list label.hint{display:block;margin:12px 0 6px}
.cekiraj{display:flex;width:100%;box-sizing:border-box;gap:10px;align-items:flex-start;margin:12px 0;font-size:14px;line-height:1.4;color:var(--tekst-2)}
.cekiraj input{width:22px;min-height:22px;height:22px;flex:none;margin:1px 0 0;padding:0}
#zakljucak .dugme{margin-top:12px}
.dugme.zeleno:disabled,.dugme.opasno:disabled{background:#c6cfda;color:#fff;box-shadow:none}
.plocica.kup .ik{background:#ece6f8;color:#5b3fa6}
.red.ugasen{opacity:.55}
.segment button:disabled{opacity:.4;cursor:not-allowed}

/* 2026-11-09: provjera artikla - osnovno skladiste radnika, vezivanje barkoda */
div.prazno p{margin:0 0 12px}
div.prazno .hint{margin:12px 0 0}
.barkodovi{display:flex;flex-direction:column;gap:6px}
.moje-stanje{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;background:var(--ok-bg);border:1px solid var(--ok-ivica);border-radius:var(--radijus-mali);padding:10px 12px;color:var(--ok)}
.moje-stanje span{font-weight:700;font-size:14px}
.moje-stanje span small{display:block;font-weight:600;font-size:13px;color:var(--tekst-2);overflow-wrap:anywhere}
.moje-stanje b{font-size:24px;white-space:nowrap}
.moje-stanje .rez{grid-column:1 / -1;font-size:13px;color:var(--upoz);font-weight:600}
.moje-stanje.nema{background:var(--linija-meka);border-color:var(--linija);color:var(--sivo)}
#stanja{display:flex;flex-direction:column;gap:6px}
.tabela tfoot td{font-weight:700;color:var(--tekst-2);border-top:2px solid var(--linija)}
.list .opis.kod-veliki{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dugme-cip{border:0;cursor:pointer;min-height:28px;padding:2px 11px}
.dugme-cip:active{background:var(--linija)}