/* 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; }
.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-template-columns: repeat(3, 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); }
.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: 46px 1fr 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; }
.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 { 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; }
.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: 1fr auto auto; gap: 8px; margin: 8px 0; }
.sken-polje input { font-size: 17px; }
.sken-polje button { min-width: 52px; font-size: 20px; }
.sken-polje button.u-redu { font-size: 15px; }
.kamera-sloj { position: fixed; inset: 0; background: #000; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.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; color: #fff; text-align: center; font-weight: 600; }
.kamera-sloj .zatvori { position: relative; }

/* 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; }
.mreza-polica { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.mreza-polica button { min-height: 58px; font-size: 20px; font-weight: 750; }
.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); }
.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 */
.tabla-zaglavlje { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.tabla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 280px; gap: 12px; align-items: start; }
.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; display: flex; justify-content: space-between; }
.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 form { display: flex; gap: 6px; margin-top: 8px; }
.karta form input { min-height: 38px; padding: 6px 8px; font-size: 14px; }
.karta form button { min-height: 38px; white-space: nowrap; }
.strana { display: flex; flex-direction: column; gap: 12px; }
.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); }

/* 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; }
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; }

@media screen and (max-width: 1100px) {
  .tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strana { grid-column: 1 / -1; }
}
@media screen and (max-width: 640px) {
  .tabla { grid-template-columns: 1fr; }
  main.sto { padding: 14px 12px 40px; }
  .traka:not(.tel-traka) .ko { margin-left: 0; }
}