:root{--tekst:#1b1f24;--tiho:#6b7480;--linija:#e3e7ec;--pozadina:#f6f8fa;
      --bijela:#fff;--akcenat:#1f6feb;--zeleno:#1a7f37;--crveno:#c62828;--zuto:#b26a00}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     background:var(--pozadina);color:var(--tekst);-webkit-text-size-adjust:100%}
main{max-width:1200px;margin:0 auto;padding:1.2rem 1rem 4rem}
h1{font-size:1.5rem;margin:.2rem 0 1.2rem}
h2{font-size:1.1rem;margin:2rem 0 .8rem;color:var(--tiho);text-transform:uppercase;letter-spacing:.04em}
.traka{display:flex;align-items:center;gap:1rem;background:var(--bijela);
       border-bottom:1px solid var(--linija);padding:.7rem 1rem;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.logo{font-weight:800;letter-spacing:.08em;text-decoration:none;color:var(--tekst)}
.traka nav{display:flex;gap:.3rem;flex:1}
.traka nav a{text-decoration:none;color:var(--tiho);padding:.5rem .8rem;border-radius:8px;font-weight:600}
.traka nav a:hover{background:var(--pozadina);color:var(--tekst)}
.desno{display:flex;align-items:center;gap:.8rem}
.ko{font-size:.85rem;color:var(--tiho)}
.ko b{color:var(--akcenat)}
.odjava{font-size:.85rem;color:var(--tiho);text-decoration:none}
.kartice{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem}
.kartica{display:flex;flex-direction:column;gap:.15rem;background:var(--bijela);
         border:1px solid var(--linija);border-radius:14px;padding:1.1rem;text-decoration:none;color:inherit}
.kartica:hover{border-color:var(--akcenat)}
.kartica.tiha{opacity:.75}
.kartica-naslov{font-weight:700}
.kartica-broj{font-size:2rem;font-weight:800;line-height:1.1}
.kartica-pod,.kartica-opis{font-size:.8rem;color:var(--tiho)}
.tabela{width:100%;border-collapse:collapse;background:var(--bijela);
        border:1px solid var(--linija);border-radius:12px;overflow:hidden;font-size:.9rem}
.tabela th{text-align:left;background:#fafbfc;padding:.6rem .7rem;color:var(--tiho);font-size:.78rem;
           text-transform:uppercase;letter-spacing:.03em}
.tabela td{padding:.6rem .7rem;border-top:1px solid var(--linija)}
.tabela .d{text-align:right}
.tiho{color:var(--tiho);font-size:.82rem}
.plus{color:var(--zeleno);font-weight:700}
.minus{color:var(--crveno);font-weight:700}
.oznaka{background:var(--pozadina);border:1px solid var(--linija);border-radius:6px;
        padding:.1rem .4rem;font-size:.75rem;font-weight:600}
.prazno{color:var(--tiho);background:var(--bijela);border:1px dashed var(--linija);
        border-radius:12px;padding:1.4rem}
.prijava-okvir{max-width:360px;margin:12vh auto;background:var(--bijela);
               border:1px solid var(--linija);border-radius:16px;padding:2rem}
.prijava-okvir h1{text-align:center;letter-spacing:.1rem;margin-bottom:0}
.prijava-okvir .pod{text-align:center;color:var(--tiho);margin:.2rem 0 1.6rem;font-size:.85rem}
label{display:block;margin-bottom:1rem;font-size:.85rem;font-weight:600;color:var(--tiho)}
input,select,textarea{width:100%;margin-top:.35rem;padding:.7rem;font-size:1rem;
      border:1px solid var(--linija);border-radius:10px;background:#fff;color:var(--tekst)}
input:focus,select:focus{outline:2px solid var(--akcenat);outline-offset:-1px}
button{width:100%;padding:.8rem;font-size:1rem;font-weight:700;color:#fff;background:var(--akcenat);
       border:0;border-radius:10px;cursor:pointer}
button:active{transform:translateY(1px)}
.greska{background:#fdecec;color:var(--crveno);border:1px solid #f5c2c2;
        border-radius:10px;padding:.7rem;margin-bottom:1rem;font-size:.88rem}
@media(max-width:640px){.traka nav a{padding:.5rem .55rem;font-size:.9rem}.ko{display:none}}

/* ---------- artikli ---------- */
.red-naslov{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dugme-mali{background:var(--akcenat);color:#fff;text-decoration:none;padding:.55rem .9rem;
            border-radius:10px;font-weight:700;font-size:.9rem;white-space:nowrap}
.filteri{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;background:var(--bijela);
         border:1px solid var(--linija);border-radius:12px;padding:.8rem;margin-bottom:1.2rem}
.filteri input,.filteri select{width:auto;flex:1;min-width:150px;margin:0}
.filteri button{width:auto;padding:.65rem 1.2rem}
.cek{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--tekst);
     font-size:.88rem;margin:0;white-space:nowrap}
.cek input{width:auto;margin:0}
.mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:1rem}
.proizvod{background:var(--bijela);border:1px solid var(--linija);border-radius:14px;
          overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.proizvod:hover{border-color:var(--akcenat);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.proizvod-slika{position:relative;aspect-ratio:3/4;background:#eef1f4;display:flex;
                align-items:center;justify-content:center;overflow:hidden}
.proizvod-slika img{width:100%;height:100%;object-fit:cover}
.bez-slike{color:var(--tiho);font-size:.8rem}
.badz{position:absolute;top:.5rem;right:.5rem;padding:.15rem .5rem;border-radius:999px;
      font-size:.8rem;font-weight:800;color:#fff}
.badz.zel{background:var(--zeleno)}.badz.zut{background:var(--zuto)}.badz.crv{background:var(--crveno)}
.proizvod-tekst{padding:.6rem .7rem .8rem;display:flex;flex-direction:column;gap:.15rem}
.proizvod-sifra{font-size:.72rem;color:var(--tiho);text-transform:uppercase;letter-spacing:.03em}
.proizvod-naziv{font-weight:700;font-size:.92rem;line-height:1.25}
.proizvod-cijena{font-size:.85rem;color:var(--tiho)}

/* ---------- detalj ---------- */
.nazad{display:inline-block;margin-bottom:.8rem;color:var(--tiho);text-decoration:none;font-weight:600}
.artikal-vrh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
.glavna-okvir{position:relative;background:var(--bijela);border:1px solid var(--linija);
              border-radius:14px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/4}
.glavna-okvir img{width:100%;height:100%;object-fit:contain;display:block}
.glavna-okvir.prazna{display:flex;align-items:center;justify-content:center;color:var(--tiho);cursor:default}
.lupa{position:absolute;left:50%;bottom:.8rem;transform:translateX(-50%);background:rgba(20,22,26,.82);
      color:#fff;font-size:.78rem;padding:.35rem .7rem;border-radius:999px;opacity:0;transition:opacity .15s}
.glavna-okvir:hover .lupa{opacity:1}
.mini-red{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding-bottom:.3rem}
.mini{width:74px;height:96px;object-fit:cover;border-radius:9px;border:2px solid transparent;
      cursor:pointer;flex:0 0 auto;background:#eef1f4}
.mini.aktivna{border-color:var(--akcenat)}
.artikal-info h1{margin:.2rem 0 .6rem}
.sifra{font-size:.78rem;color:var(--tiho);text-transform:uppercase;letter-spacing:.04em}
.opis{color:var(--tiho);margin:.2rem 0 .9rem}
.cijene{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.6rem}
.cijena{font-size:1.5rem;font-weight:800}
.serija-info{background:#eef5ff;border:1px solid #cfe0ff;border-radius:10px;padding:.5rem .7rem;
             font-size:.86rem;margin:.4rem 0 1rem}
.mag-sazetak{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem}
.mag-plocica{display:flex;flex-direction:column;gap:.1rem;background:var(--bijela);border:1px solid var(--linija);
             border-radius:12px;padding:.7rem;text-decoration:none;color:inherit}
.mag-plocica.aktivna{border-color:var(--akcenat);background:#f4f8ff}
.mag-ime{font-size:.78rem;color:var(--tiho)}
.mag-broj{font-size:1.4rem;font-weight:800}

.skrol{overflow-x:auto}
.matrica td,.matrica th{white-space:nowrap}
.matrica .celija{min-width:64px}
.boja-ime{font-weight:700}
.matrica .broj{font-size:1.05rem;font-weight:800}
.matrica .broj.nula{color:var(--tiho);font-weight:600}
.ukupno-mali{display:block;font-size:.68rem;color:var(--tiho)}
.nema{color:#c8cdd4}

.unos{background:var(--bijela);border:1px solid var(--linija);border-radius:14px;padding:1rem}
.unos-red{display:flex;gap:.8rem;flex-wrap:wrap}
.unos-red label{flex:1;min-width:150px}
.velicine-unos{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.6rem;margin:.9rem 0}
.vel-polje{margin:0;display:flex;flex-direction:column;gap:.2rem}
.vel-polje span{font-size:.78rem;color:var(--tiho);font-weight:700;text-align:center}
.vel-polje input{margin:0;text-align:center;font-size:1.05rem;font-weight:700;padding:.55rem .3rem}
.poruka{background:#e8f6ec;color:var(--zeleno);border:1px solid #bfe3c9;border-radius:10px;
        padding:.7rem;margin-bottom:1rem;font-size:.9rem}
.pomoc{font-size:.82rem;color:var(--tiho)}
.link{width:auto;background:none;border:0;color:var(--akcenat);font-weight:600;padding:0;
      cursor:pointer;font-size:.85rem;text-decoration:underline}
.link.crveno{color:var(--crveno)}
.sitno{margin:1.4rem 0;background:var(--bijela);border:1px solid var(--linija);border-radius:12px;padding:.8rem 1rem}
.sitno summary{cursor:pointer;font-weight:700;color:var(--tiho)}
.mala-forma{margin-top:.8rem}
.mala-forma button{width:auto;padding:.55rem 1rem}
.slike-lista{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}
.slika-red{display:flex;align-items:center;gap:.8rem}
.slika-red img{width:50px;height:64px;object-fit:cover;border-radius:8px}
.slika-red form{margin:0}
.forma-siroka{background:var(--bijela);border:1px solid var(--linija);border-radius:14px;padding:1.2rem;max-width:800px}
.dvije{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tri{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
fieldset{border:1px solid var(--linija);border-radius:12px;padding:1rem;margin:0 0 1rem}
legend{font-weight:700;font-size:.85rem;color:var(--tiho);padding:0 .4rem}
.cekovi{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:.9rem}
textarea{font-family:inherit}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(12,14,18,.94);
          display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:6px}
.lb-zatvori{position:absolute;top:.6rem;right:.9rem;width:auto;background:none;border:0;
            color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;padding:.2rem .6rem}
.lb-strelica{position:absolute;top:50%;transform:translateY(-50%);width:auto;background:rgba(255,255,255,.12);
             border:0;color:#fff;font-size:2.4rem;line-height:1;padding:.5rem 1rem;border-radius:12px;cursor:pointer}
.lb-strelica.lijevo{left:.6rem}.lb-strelica.desno{right:.6rem}
.lb-original{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:#fff;
             font-size:.82rem;opacity:.75;text-decoration:underline}
@media(max-width:900px){
  .artikal-vrh{grid-template-columns:1fr;gap:1.2rem}
  .dvije,.tri{grid-template-columns:1fr}
  .lb-strelica{font-size:1.8rem;padding:.4rem .7rem}
  .lupa{opacity:1}
}

.stornirano td{opacity:.45;text-decoration:line-through}
.stornirano .oznaka{text-decoration:none}
.oznaka-storno{background:#fdecec;border-color:#f5c2c2;color:var(--crveno)}
.uskoforma{margin:0;display:inline}
.ispravka-info{background:var(--bijela);border:1px solid var(--linija);border-radius:10px;padding:.6rem .8rem}

/* zadaci */
.dan-nav{display:flex;align-items:center;gap:.5rem}
.dan-tekst{font-weight:700;font-size:.92rem}
.dugme-mali.siv{background:var(--bijela);color:var(--tekst);border:1px solid var(--linija)}
.zadatak{background:var(--bijela);border:1px solid var(--linija);border-left:4px solid var(--linija);
         border-radius:12px;padding:.9rem 1rem;margin-bottom:.7rem}
.zadatak.p-hitno{border-left-color:var(--crveno)}
.zadatak.p-normalan{border-left-color:var(--akcenat)}
.zadatak.gotov{background:#f7fbf8;border-left-color:var(--zeleno);opacity:.9}
.z-glava{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.z-naslov{font-weight:700;font-size:1rem}
.badz-hitno{background:var(--crveno);color:#fff;font-size:.68rem;font-weight:800;
            padding:.1rem .4rem;border-radius:5px;margin-left:.4rem;vertical-align:middle}
.z-meta{font-size:.8rem;color:var(--tiho);margin-top:.15rem}
.z-opis{margin:.5rem 0 0;font-size:.9rem;color:var(--tiho)}
.kvacica{color:var(--zeleno);font-size:1.6rem;font-weight:800;line-height:1}
.z-forma{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.z-forma input[type=text],.z-forma input:not([type]){flex:1;min-width:160px;margin:0}
.z-forma input[type=file]{margin:0;width:auto;flex:1;min-width:150px;font-size:.82rem;padding:.45rem}
.z-forma button{width:auto;padding:.6rem 1.1rem;white-space:nowrap}
.z-gotov{margin-top:.7rem;font-size:.85rem;color:var(--tiho);display:flex;
         align-items:center;gap:.7rem;flex-wrap:wrap}
.z-komentar{background:var(--pozadina);border-radius:8px;padding:.4rem .6rem;color:var(--tekst)}
.z-foto{width:56px;height:56px;object-fit:cover;border-radius:8px}
.oznaka-tranzit{background:#fff6e5;border-color:#f0d9a8;color:var(--zuto)}
.akcije{display:flex;gap:.8rem;margin-top:1.2rem;flex-wrap:wrap}
.akcije form{margin:0}
.akcije button{width:auto;padding:.75rem 1.4rem}
.crveno-dugme{background:var(--bijela);color:var(--crveno);border:1px solid var(--crveno)}

.nacini{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.nacin-izbor{display:flex;flex-direction:column;gap:.25rem;margin:0;border:2px solid var(--linija);
             border-radius:12px;padding:.8rem;cursor:pointer;background:var(--bijela)}
.nacin-izbor:has(input:checked){border-color:var(--akcenat);background:#f4f8ff}
.nacin-izbor input{width:auto;margin:0 0 .2rem}
.n-ime{font-weight:800;color:var(--tekst);font-size:1rem}
.n-opis{font-size:.78rem;color:var(--tiho);font-weight:400;line-height:1.35}
.serija-info.komad{background:#f2f7f3;border-color:#cde3d4}
.serija-info.vel{background:#faf6ee;border-color:#ebdcc2}
.komad-unos{margin:.9rem 0}
.veliko-polje{margin:0;max-width:260px}
.veliko-polje span{display:block;font-size:.8rem;color:var(--tiho);font-weight:700;margin-bottom:.25rem}
.veliko-polje input{margin:0;font-size:1.6rem;font-weight:800;text-align:center;padding:.6rem}

.inv-polje{width:76px;margin:0;text-align:center;font-weight:700;padding:.4rem .3rem}
.kartica-broj.plus{color:var(--zeleno)}
.kartica-broj.minus{color:var(--crveno)}
.akcije .dugme-mali{display:inline-flex;align-items:center;padding:.7rem 1.1rem}

.radnik{background:var(--bijela);border:1px solid var(--linija);border-radius:14px;
        padding:1rem 1.2rem;margin-bottom:.8rem}
.radnik.iskljucen{opacity:.6;background:#fafafa}
.r-glava{margin-bottom:.8rem}
.r-ime{font-weight:800;font-size:1.05rem;margin-right:.5rem}
.radnik-forma button[type=submit]{width:auto;padding:.55rem 1.2rem}
.r-akcije{display:flex;gap:1.2rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--linija)}
.r-akcije form{margin:0}
.lozinka-box{background:#fff8e6;border:2px solid #f0d48a;border-radius:14px;padding:1.2rem;margin-bottom:1.2rem}
.lz-naslov{font-size:.9rem;color:var(--tiho);font-weight:700}
.lz-kod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.7rem;font-weight:800;
        letter-spacing:.06em;margin:.4rem 0;user-select:all;word-break:break-all}
.lz-pod{font-size:.82rem;color:var(--tiho)}

/* qr i naljepnice */
.qr-prikaz{display:flex;gap:1rem;align-items:center;margin-top:.8rem}
.qr-prikaz img{width:110px;height:110px}
.nalj-mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.nalj{display:flex;gap:.7rem;align-items:center;background:#fff;border:1px solid var(--linija);
      border-radius:10px;padding:.6rem;break-inside:avoid}
.nalj-qr{width:76px;height:76px;flex:0 0 auto}
.nalj-tekst{min-width:0}
.nalj-sifra{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:.9rem}
.nalj-naziv{font-size:.8rem;font-weight:600;line-height:1.2;overflow:hidden;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nalj-kat{font-size:.7rem;color:var(--tiho)}

/* skener */
.skener-okvir{position:relative;max-width:520px;margin:0 auto;background:#000;
              border-radius:16px;overflow:hidden;aspect-ratio:3/4}
.skener-okvir video{width:100%;height:100%;object-fit:cover;display:block}
.skener-meta{position:absolute;inset:18%;border:3px solid rgba(255,255,255,.85);border-radius:14px;
             box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
#status{text-align:center}

@media print{
  .traka,.ne-stampa,main h2,.pomoc{display:none !important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .nalj-mreza{grid-template-columns:repeat(3,1fr);gap:2mm}
  .nalj{border:1px dashed #999;padding:2mm}
  @page{margin:8mm}
}