/* =========================================================================
   ASCO portal — PRIJEDLOG MODULA "MONTAŽA"  (v2)
   -------------------------------------------------------------------------
   Klikabilni prototip, ne gotov modul. Napravljen po ugovoru modula iz
   ARHITEKTURA.md, tako da se odavde prepisuje u:

       web/zajednicko/asco.css        ← paleta i tema (zamjena postojeće)
       web/index.html                 ← početna sa izvještajem
       web/montaza/index.html         ← mašine, pozicije, završetak
       web/neusaglasenosti/index.html ← prijava problema
       db/012…017_*.sql               ← šeme `montaza` i `neusaglasenosti`

   Novo u v2:  svijetla tema kao osnovna + prekidač na tamnu,
               početna strana sa izvještajem stanja montaže,
               raspored koji radi od telefona (360 px) do monitora.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TEMA
   Tri stanja, kao i jezik: sistemsko (šta korisnik ima na uređaju),
   izričito svijetlo i izričito tamno. Sve boje su tokeni — nijedna se
   ne piše direktno u komponenti, pa promjena teme ne može ostaviti
   crn tekst na crnoj podlozi.
   ------------------------------------------------------------------------- */

/* Svijetla tema — osnovna. Neutralne boje su blago plavkaste (čelik),
   da bijelo ne bude hladno bolničko. */
:root{
  --bg:#eef1f5;        /* podloga stranice */
  --card:#ffffff;      /* kartice */
  --card2:#f5f7fa;     /* zaglavlja tabela, blago izdvojene zone */
  --polje:#ffffff;     /* pozadina polja za unos */
  --line:#d9dfe7;
  --line2:#c3ccd7;
  --txt:#16202b;
  --dim:#5b6875;
  --acc:#2f7de1;       /* ASCO plava — ostaje ista u obje teme */
  --acc-txt:#1b5fbd;   /* plava čitljiva kao tekst na svijetloj podlozi */
  --acc-tih:#e8f0fb;
  --ok:#157a50;   --ok-tih:#e2f2ea;
  --warn:#8f5804; --warn-tih:#fbeedb;
  --err:#a8302a;  --err-tih:#fae7e5;
  --sjena:0 1px 2px rgba(22,32,43,.07);
  --sjena2:0 4px 14px rgba(22,32,43,.10);
}

/* Tamna tema kad je korisnik tako podesio uređaj — osim ako je u
   aplikaciji izričito izabrao svijetlu. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svijetlo"]){
    --bg:#0f1720; --card:#18232f; --card2:#131d27; --polje:#0d151d;
    --line:#2b3a4a; --line2:#3b4d60;
    --txt:#e8eef5; --dim:#93a4b8;
    --acc:#2f7de1; --acc-txt:#7db4f2; --acc-tih:#14263c;
    --ok:#4cc98a;   --ok-tih:#13291f;
    --warn:#e0b45f; --warn-tih:#2c2312;
    --err:#e0837d;  --err-tih:#2e1817;
    --sjena:0 1px 2px rgba(0,0,0,.35);
    --sjena2:0 6px 18px rgba(0,0,0,.45);
  }
}

/* Izričit izbor u aplikaciji — nadjačava i uređaj. */
:root[data-tema="tamno"]{
  --bg:#0f1720; --card:#18232f; --card2:#131d27; --polje:#0d151d;
  --line:#2b3a4a; --line2:#3b4d60;
  --txt:#e8eef5; --dim:#93a4b8;
  --acc:#2f7de1; --acc-txt:#7db4f2; --acc-tih:#14263c;
  --ok:#4cc98a;   --ok-tih:#13291f;
  --warn:#e0b45f; --warn-tih:#2c2312;
  --err:#e0837d;  --err-tih:#2e1817;
  --sjena:0 1px 2px rgba(0,0,0,.35);
  --sjena2:0 6px 18px rgba(0,0,0,.45);
}

/* -------------------------------------------------------------------------
   2. OSNOVA
   ------------------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
     font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:var(--acc-txt)}
h1{font-size:22px;margin:0 0 2px;font-weight:650;letter-spacing:-.01em}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;
   color:var(--dim);margin:0 0 12px;font-weight:600}
h3{font-size:16px;margin:0;font-weight:600}
.sub{color:var(--dim);font-size:13.5px;margin-bottom:18px}
.br{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* -------------------------------------------------------------------------
   3. ZAGLAVLJE I NAVIGACIJA
   Na telefonu: dva reda, navigacija se pomjera prstom lijevo-desno.
   Na računaru: jedan red, navigacija u sredini.
   ------------------------------------------------------------------------- */
.zaglavlje{position:sticky;top:0;z-index:30;background:var(--card);
  border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;
  gap:10px;padding:9px 14px}
.kontrole{order:2;margin-left:auto;display:flex;align-items:center;gap:8px}
.znak{order:1;display:flex;align-items:center;gap:9px;flex:none;cursor:pointer;
  background:none;border:0;padding:0;color:var(--txt);font:inherit}
.znak i{width:28px;height:28px;border-radius:8px;background:var(--acc);
  display:grid;place-items:center;flex:none}
.znak b{font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.1}
.znak span{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.09em;
  text-transform:uppercase;font-weight:600}
.rast{flex:1}
.ikonica{width:34px;height:34px;flex:none;display:grid;place-items:center;
  background:var(--card2);border:1px solid var(--line);border-radius:9px;
  color:var(--dim);cursor:pointer;font-size:15px;padding:0}
.ikonica:hover{color:var(--txt);border-color:var(--line2)}
.jezik{display:flex;flex:none;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.jezik button{border:0;background:var(--card2);color:var(--dim);cursor:pointer;
  padding:8px 9px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.03em}
.jezik button.aktivan{background:var(--acc);color:#fff}
.ja{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.ja .krug{width:32px;height:32px;border-radius:50%;background:var(--acc-tih);
  color:var(--acc-txt);display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.ja .im{min-width:0;display:none}
.ja .im b{display:block;font-size:13px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ja .im span{display:block;font-size:11px;color:var(--dim)}

.nav{order:3;flex-basis:100%;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  margin:0 -14px -3px;padding:0 14px 3px}
.nav::-webkit-scrollbar{display:none}
.nav button{flex:none;background:none;border:0;color:var(--dim);cursor:pointer;
  padding:8px 12px;border-radius:9px;font:inherit;font-size:14px;font-weight:600;white-space:nowrap}
.nav button:hover{background:var(--card2);color:var(--txt)}
.nav button.aktivan{background:var(--acc-tih);color:var(--acc-txt)}

/* -------------------------------------------------------------------------
   4. RASPORED
   Uska kolona je osnova (telefon u hali). Široki ekrani dobiju više
   kolona tek preko 860 px, i to samo tamo gdje ima šta da se pokaže.
   ------------------------------------------------------------------------- */
.wrap{max-width:620px;margin:0 auto;padding:16px 14px 96px}
.wrap.siroko{max-width:1120px}
.mreza{display:grid;gap:14px}
/* kartica u mreži / dvije kolone se ne širi preko svoje kolone zbog dugačkog teksta ili tabele (tabela se tada skrola) */
.mreza>*,.dvokolone>*{min-width:0}
.red{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
      padding:16px;box-shadow:var(--sjena)}
.card.tijesno{padding:0;overflow:hidden}
.card .glava{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.card .glava h2{margin:0;flex:1}
.card .tijelo{padding:16px}

label{display:block;font-size:13px;color:var(--dim);margin:12px 0 5px;font-weight:500}
/* obavezno polje: crvena zvjezdica uz naziv polja koje ima "required"
   (samo na ekranima poslije prijave — oni imaju zaglavlje; forma prijave je ne treba) */
#zaglavlje ~ .wrap label:has(+ input[required])::after,
#zaglavlje ~ .wrap label:has(+ select[required])::after,
#zaglavlje ~ .wrap label:has(+ textarea[required])::after,
#zaglavlje ~ .wrap label:has(+ .datum-polje input[required])::after{content:" *";color:var(--err);font-weight:700}
.zvj{color:var(--err);font-weight:700}
/* polje sa dugmetom desno (npr. RM broj + "Generiši"); zvjezdica za obavezno polje važi i ovdje */
.polje-dugme{display:flex;gap:8px;align-items:stretch}
.polje-dugme input{flex:1;min-width:0}
.polje-dugme button{flex:none}
#zaglavlje ~ .wrap label:has(+ .polje-dugme input[required])::after{content:" *";color:var(--err);font-weight:700}
/* naslov stranice sa linkom desno: link uvijek stane u isti red, a na uskom ekranu (telefon)
   naslov se prelomi u dva reda umjesto da link izgura van ekrana */
.naslov-red{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap}
.naslov-red h1{flex:1 1 0;min-width:0}
.naslov-red a{flex:none;margin-top:3px}
/* kružić (api.js): dok stranica čeka prve podatke (html.ucitava) sadržaj je sakriven i vidi se kružić u sredini;
   kasnije čekanje (html.radi) — mali kružić dole desno. Pojavi se tek poslije 0,15 s, da ne trepće kad je brzo. */
html.ucitava #zaglavlje, html.ucitava .wrap{visibility:hidden}
html.ucitava body::after, html.radi body::after{content:"";position:fixed;z-index:2000;border-radius:50%;
  border:3px solid var(--line2);border-top-color:var(--acc);box-sizing:border-box;
  animation:vrti .7s linear infinite, pojavi .2s .15s both}
html.ucitava body::after{left:50%;top:40%;width:40px;height:40px;margin:-20px 0 0 -20px}
html.radi body::after{right:16px;bottom:16px;width:26px;height:26px;border-width:2.5px}
@keyframes vrti{to{transform:rotate(360deg)}}
@keyframes pojavi{from{opacity:0}to{opacity:1}}

/* kartica koja se otvara na klik na naslov:
   <details class="card sklopivo"><summary><h2>…</h2><span class="sazetak">…</span><i class="strelica"></i></summary>…</details> */
details.sklopivo>summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;
  margin:-16px;padding:16px;border-radius:inherit;-webkit-tap-highlight-color:transparent}
details.sklopivo>summary::-webkit-details-marker{display:none}
details.sklopivo[open]>summary{margin-bottom:0}
details.sklopivo>summary h2{margin:0;flex:1;min-width:0}
details.sklopivo .sazetak{color:var(--dim);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
details.sklopivo>summary .strelica{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);
  display:grid;place-items:center;transition:transform .2s ease,border-color .15s,background .15s}
details.sklopivo>summary .strelica::before{content:"";width:7px;height:7px;border-right:2px solid var(--dim);
  border-bottom:2px solid var(--dim);transform:translateY(-2px) rotate(45deg)}
details.sklopivo[open]>summary .strelica{transform:rotate(180deg)}
details.sklopivo>summary:hover .strelica{border-color:var(--acc);background:var(--acc-tih)}
details.sklopivo>summary:hover h2{color:var(--acc-txt)}
details.sklopivo>summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
details.sklopivo[open]>summary~*{animation:sklopivoOtvori .18s ease}
@keyframes sklopivoOtvori{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:520px){ details.sklopivo>summary{flex-wrap:wrap} details.sklopivo .sazetak{order:3;flex-basis:100%;margin-top:-6px} }

/* ime mašine ispod RM broja naloga (tabele po nalozima); .masina je već kartica mašine na drugom ekranu */
small.ime-masine{display:block;font-size:12px;color:var(--dim);font-weight:400;margin-top:1px}

/* dugmad u zaglavlju liste: glavna akcija ("＋ Novo …") i sporedna (otvori pregled u ladici) */
.dugme-novo{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:9px 14px;font-size:14.5px;
  font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}
.dugme-novo:hover{filter:brightness(1.08)}
.dugme-sporedno{background:var(--card);color:var(--txt);border:1px solid var(--line2);border-radius:10px;padding:9px 13px;
  font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}
.dugme-sporedno:hover{border-color:var(--acc)}

/* ladica: forma koja se otvori sa desne strane preko stranice (na telefonu preko cijelog ekrana) */
.ladica-pozadina{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;
  transition:opacity .2s}
.ladica-pozadina.otvorena{opacity:1;pointer-events:auto}
.ladica{position:fixed;top:0;right:0;bottom:0;z-index:901;width:min(460px,100vw);background:var(--card);
  border-left:1px solid var(--line2);box-shadow:var(--sjena2);overflow-y:auto;visibility:hidden;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));transform:translateX(100%);
  transition:transform .22s ease,visibility 0s linear .22s}
.ladica.otvorena{transform:none;visibility:visible;transition:transform .22s ease}
.ladica.siroka{width:min(600px,100vw)}
.ladica-glava{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ladica-glava h2{margin:0;flex:1}
.ladica-zatvori{background:none;border:1px solid var(--line2);color:var(--txt);border-radius:9px;width:38px;height:38px;
  font-size:16px;cursor:pointer;flex:none}
.ladica-zatvori:hover{border-color:var(--acc)}
/* pitanje prije brisanja (ASCO.potvrdi): zatamnjena stranica i kutija sa dva dugmeta */
.potvrda{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);display:flex;
  align-items:center;justify-content:center;padding:16px}
.potvrda-kutija{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:18px;
  width:100%;max-width:420px;box-shadow:var(--sjena2)}
.potvrda-kutija p{margin:0 0 16px;font-size:15.5px;line-height:1.45;color:var(--txt)}
.potvrda-kutija .red{justify-content:flex-end}
.potvrda-kutija button{padding:11px 18px;font-size:14.5px}
select,input,textarea{width:100%;padding:12px;font-size:16px;background:var(--polje);
  color:var(--txt);border:1px solid var(--line2);border-radius:10px;font-family:inherit}
select{appearance:none;background-image:none}
textarea{font-size:15px;min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--acc);outline:none;
  box-shadow:0 0 0 3px var(--acc-tih)}
/* datum dd.mm.gggg. — vidi se tekstualno polje, pravo polje (kalendar) je providno ispod ikone */
.datum-polje{position:relative;display:block}
.datum-polje .datum-tekst{padding-right:46px;font-variant-numeric:tabular-nums}
.datum-polje input[type="date"]{position:absolute;right:0;top:0;width:46px;height:100%;
  padding:0;border:0;opacity:0;cursor:pointer}
.datum-polje input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;inset:0;
  width:100%;height:100%;margin:0;padding:0;cursor:pointer}
.datum-polje::after{content:"";position:absolute;right:14px;top:50%;width:18px;height:18px;
  transform:translateY(-50%);pointer-events:none;background:var(--dim);
  -webkit-mask:var(--ikona-kalendar) center/contain no-repeat;mask:var(--ikona-kalendar) center/contain no-repeat;
  --ikona-kalendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.dvoje{display:flex;gap:10px}
.dvoje>div{flex:1}

button.glavno{width:100%;padding:15px;font-size:17px;font-weight:650;
  background:var(--acc);color:#fff;border:0;border-radius:12px;cursor:pointer;font-family:inherit}
button.glavno:hover{filter:brightness(1.06)}
button.glavno:disabled{background:var(--line);color:var(--dim);cursor:not-allowed;filter:none}
button.tiho{background:var(--card);color:var(--txt);border:1px solid var(--line2)}
button.tiho:hover{border-color:var(--acc);filter:none}

.traka-dolje{position:fixed;left:0;right:0;bottom:0;background:var(--card);
  border-top:1px solid var(--line);padding:12px 14px;z-index:25;box-shadow:var(--sjena2)}
.traka-dolje .unutra{max-width:620px;margin:0 auto}

.msg{padding:11px 13px;border-radius:10px;margin-bottom:14px;font-size:14px;display:none}
.msg.ok{background:var(--ok-tih);border:1px solid var(--ok);color:var(--ok);display:block}
.msg.err{background:var(--err-tih);border:1px solid var(--err);color:var(--err);display:block}

/* -------------------------------------------------------------------------
   5. IZVJEŠTAJ NA POČETNOJ
   ------------------------------------------------------------------------- */
/* Brojke koje se čitaju u jednom pogledu */
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi>div{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;box-shadow:var(--sjena)}
.kpi span{display:block;font-size:12px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600}
.kpi b{display:block;font-size:30px;font-variant-numeric:tabular-nums;
  margin:6px 0 1px;font-weight:650;letter-spacing:-.02em;line-height:1}
.kpi small{display:block;font-size:12.5px;color:var(--dim)}
.kpi .pozor{color:var(--err)}

/* Napredak po mašinama — jedna serija, magnituda, broj uz svaku traku */
.napredak{display:flex;flex-direction:column;gap:14px}
.napredak .stavka{display:block;width:100%;text-align:left;background:none;border:0;
  padding:0;font:inherit;color:var(--txt);cursor:pointer}
.napredak .gl{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.napredak .gl b{font-size:15px;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.napredak .gl small{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.napredak .gl .pct{margin-left:auto;font-size:14px;font-weight:650;
  font-variant-numeric:tabular-nums}
.traka{height:8px;background:var(--card2);border:1px solid var(--line);
  border-radius:5px;overflow:hidden}
.traka i{display:block;height:100%;background:var(--acc);border-radius:0 4px 4px 0}
.traka.zavrsena i{background:var(--ok)}

/* Sedmični tok — koliko je pozicija ugrađeno po danima */
.tok{width:100%;height:auto;display:block}
.tok-legenda{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--dim);margin-top:6px;font-variant-numeric:tabular-nums}

/* Liste na početnoj */
.stavke{display:flex;flex-direction:column}
.stavke .r{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.stavke .r:last-child{border-bottom:0}
.stavke .tx{flex:1;min-width:0}
.stavke .tx b{display:block;font-size:14.5px;font-weight:600}
.stavke .tx small{display:block;font-size:12px;color:var(--dim);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stavke .prazno{color:var(--dim);font-size:14px;padding:14px 0}
.tacka{width:8px;height:8px;border-radius:2px;flex:none;background:var(--line2)}
.tacka.ok{background:var(--ok)} .tacka.acc{background:var(--acc)} .tacka.err{background:var(--err)}

/* Pločice modula */
.plocice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plocica{display:block;text-align:left;font:inherit;cursor:pointer;color:var(--txt);
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px;
  box-shadow:var(--sjena)}
.plocica:hover{border-color:var(--acc);box-shadow:var(--sjena2)}
.plocica .ikona{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--acc-tih);color:var(--acc-txt);font-size:17px;margin-bottom:9px}
.plocica b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.plocica span{display:block;font-size:12.5px;color:var(--dim);line-height:1.4}

/* -------------------------------------------------------------------------
   6. MONTAŽA — mašine, pozicije, završetak
   ------------------------------------------------------------------------- */
.masina{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;color:var(--txt);
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px;
  box-shadow:var(--sjena);margin-bottom:12px}
.masina:hover{border-color:var(--acc)}
.masina .gl{display:flex;align-items:flex-start;gap:10px}
.masina .gl .nm{flex:1;min-width:0}
.masina .gl b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.masina .gl small{display:block;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:2px}
.masina .dno{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim);
  margin-top:9px;font-variant-numeric:tabular-nums}

/* Stanje — kvadratić + tekst, nikad samo boja */
.st{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--card2);color:var(--dim);
  cursor:pointer;font-family:inherit}
.st::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.st-stiglo{color:var(--acc-txt);background:var(--acc-tih);border-color:transparent}
.st-ugradjeno{color:var(--ok);background:var(--ok-tih);border-color:transparent}
.st-otvoren{color:var(--err);background:var(--err-tih);border-color:transparent}
.st-urad{color:var(--warn);background:var(--warn-tih);border-color:transparent}
.st-rijesen{color:var(--ok);background:var(--ok-tih);border-color:transparent}

/* Filter po kategoriji */
.izbor{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.izbor button{flex:1 1 130px;padding:10px;font:inherit;font-size:14px;background:var(--card);
  color:var(--txt);border:1px solid var(--line);border-radius:11px;cursor:pointer;line-height:1.25}
.izbor button small{display:block;font-size:11.5px;color:var(--dim);margin-top:2px;
  font-variant-numeric:tabular-nums}
.izbor button.izabrana{border-color:var(--acc);background:var(--acc-tih);color:var(--acc-txt)}
.izbor button.izabrana small{color:var(--acc-txt);opacity:.8}

/* Red pozicije */
.poz{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.poz:last-child{border-bottom:0}
.poz .foto{width:46px;height:36px;flex:none;border:1px solid var(--line);border-radius:8px;
  background:var(--card2);display:grid;place-items:center}
.poz .tx{flex:1;min-width:0}
.poz .tx span{display:block;font-size:15px}
.poz .tx small{display:block;color:var(--dim);font-size:11.5px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tabovi */
.tabovi{display:flex;gap:4px;background:var(--card2);border:1px solid var(--line);
  border-radius:11px;padding:4px;margin-bottom:16px}
.tabovi button{flex:1;background:none;border:0;color:var(--dim);cursor:pointer;
  padding:9px 6px;border-radius:8px;font:inherit;font-size:14px;font-weight:600}
.tabovi button.aktivan{background:var(--card);color:var(--txt);box-shadow:var(--sjena)}

/* Fotografije i snimci */
.mediji{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.medij{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card2)}
.medij .sl{height:84px;display:grid;place-items:center}
.medij .im{padding:7px 9px;font-size:11px;color:var(--dim);border-top:1px solid var(--line);
  background:var(--card);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.dodaj{border:1px dashed var(--line2);border-radius:11px;min-height:116px;background:none;
  color:var(--dim);display:grid;place-items:center;gap:6px;font:inherit;font-size:13px;cursor:pointer}
.dodaj:hover{border-color:var(--acc);color:var(--acc-txt)}

/* Kontrolna lista */
.kontrola label{display:flex;align-items:center;gap:11px;margin:0;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:15px;color:var(--txt);cursor:pointer;font-weight:400}
.kontrola label:last-of-type{border-bottom:0}
.kontrola input{width:20px;height:20px;flex:none;padding:0;accent-color:var(--acc)}

/* Sitne oznake */
.znacke{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.znacka{background:var(--card2);border:1px solid var(--line);border-radius:9px;
  padding:5px 10px;font-size:12.5px;color:var(--dim)}
.znacka b{color:var(--txt);font-weight:600}

/* Tabela — samo na ekranima koji se gledaju na računaru */
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--dim);font-weight:600;padding:10px 12px;background:var(--card2);
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.dsn{text-align:right}


/* -------------------------------------------------------------------------
   7. ŠIROKI EKRANI
   Sve iznad je napisano za telefon. Ovo je jedini blok koji dodaje kolone.
   ------------------------------------------------------------------------- */
@media (min-width:640px){
  .kpi{grid-template-columns:repeat(4,1fr)}
  .plocice{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  h1{font-size:27px}
  /* Zaglavlje se poravnava sa sadržajem, a ne sa ivicom ekrana */
  .zaglavlje{flex-wrap:nowrap;gap:18px;padding:11px max(20px,calc((100% - 1120px)/2))}
  /* na računaru se meni prelama u drugi red umjesto da se zadnje stavke sakriju desno */
  .nav{order:2;flex:1 1 auto;min-width:0;margin:0;padding:0;flex-wrap:wrap;overflow:visible}
  .kontrole{order:3;margin-left:0;flex:none}
  .wrap{padding:24px 20px 40px}
  .traka-dolje{position:static;background:none;border:0;box-shadow:none;padding:0;margin-top:16px}
  .traka-dolje .unutra{max-width:340px;margin:0}
  .dvokolone{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:start}
  .plocice{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1240px){
  .ja .im{display:block}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =========================================================================
   8. MODUL SATI — stepper, račun dana, izvještaji (sve preko tokena)
   ========================================================================= */
.nz{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.nz:last-child{border-bottom:0}
.nz .nm{flex:1;min-width:0}
.nz .nm span{display:block;font-size:15px}
.nz .nm small{color:var(--dim);font-size:11.5px}
/* pauza (pauza, pauza za kafu): nije gubitak — označena, i u izvještajima posebno od prekida */
.nz.pauza .nm span{font-weight:600}
.oznaka-pauza{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);border:1px solid var(--line2);border-radius:6px;padding:1px 5px;margin-left:4px;vertical-align:2px}
details .pz{color:var(--dim);font-weight:400}
.stp{display:flex;align-items:center;gap:6px;flex:none}
.stp button{width:40px;height:40px;font-size:22px;line-height:1;background:var(--card2);
  color:var(--txt);border:1px solid var(--line2);border-radius:10px;cursor:pointer;touch-action:manipulation}
.stp button:active{background:var(--acc);color:#fff}
.stp input.vr{width:74px;height:40px;padding:0;text-align:center;font-size:16px;
  font-variant-numeric:tabular-nums;border-radius:10px}
.stp input.vr.zero{color:var(--dim);opacity:.7}
.sum{display:flex;justify-content:space-between;font-size:14px;padding:10px 0 0;
  border-top:1px solid var(--line);margin-top:8px}
.sum b{font-variant-numeric:tabular-nums}
.racun div{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0}
.racun b{font-variant-numeric:tabular-nums;font-size:17px}
.racun .crta{border-top:1px solid var(--line);margin-top:2px;padding-top:12px}
.racun .veliko b{font-size:24px}
.racun small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px}
.upozorenje{color:var(--warn)} .uredu{color:var(--ok)}
input.vrijeme{font-variant-numeric:tabular-nums;text-align:center}
.izbor button.izabrana small{color:var(--acc-txt)}
.errorlist{color:var(--err);font-size:13px;list-style:none;padding:0;margin:4px 0 0}
.msg.warn{background:var(--warn-tih);border:1px solid var(--warn);color:var(--warn);display:block}
button.opasno{background:var(--err-tih);color:var(--err);border:1px solid var(--err)}
.lista{font-size:14px}
.lista .cel{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line)}
.lista .cel:last-child{border-bottom:0}
.lista .cel a{color:var(--txt);text-decoration:none;flex:1;min-width:0}
.lista .cel a:hover{color:var(--acc-txt)}
.lista .cel b{font-variant-numeric:tabular-nums;white-space:nowrap}
.lista .cel small{display:block;color:var(--dim);font-size:12px}
.lista .prazno{color:var(--dim);padding:8px 0}
.graf{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.graf svg{flex:none}
.legenda{flex:1;min-width:200px;font-size:13.5px}
.legenda div{display:flex;align-items:center;gap:8px;padding:4px 0}
.legenda i{width:11px;height:11px;border-radius:2px;flex:none}
.legenda span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legenda b{font-variant-numeric:tabular-nums;color:var(--dim);font-weight:400}
#stubici{width:100%;height:auto;display:block}
.odst.pos{color:var(--warn)} .odst.neg{color:var(--ok)}
tr.klik{cursor:pointer} tr.klik:hover td{background:var(--card2)}
.kpi b.pozor{color:var(--err)}
@media (max-width:520px){.graf{justify-content:center}}
button.tiho{padding:9px 12px;font-size:13px;border-radius:9px;cursor:pointer;font-family:inherit}
button.glavno.tiho{padding:15px;font-size:17px;border-radius:12px}
.nav a{text-decoration:none;flex:none}
.plocice a.plocica{text-decoration:none}
.ja .im{display:block}
.ja .im b{max-width:120px}
@media (min-width:900px){.traka-dolje .unutra{max-width:620px;margin:0 auto}}

/* App preko cijelog ekrana na telefonu: sadržaj se ne smije podvući pod "šiljak" kamere
   ni pod traku za gestove na dnu (env(...) je 0 na računaru i u običnom browseru). */
@media (max-width:899px){
  .zaglavlje{padding-top:max(9px,env(safe-area-inset-top));
    padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .traka-dolje{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}