:root {
  --pozadina: #f7f6f3;
  --povrsina: #ffffff;
  --tekst: #1f1d1a;
  --blijedo: #6b675f;
  --rub: #e2dfd8;
  --naglasak: #b5651d;
  --greska: #b42318;
  --privremeno: #fff6e0;
  --upozorenje: #9a5b00;
  --info: #3b5b8c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pozadina: #171614;
    --povrsina: #211f1c;
    --tekst: #ece9e3;
    --blijedo: #a39e94;
    --rub: #3a3732;
    --naglasak: #e0954f;
    --greska: #f97066;
    --privremeno: #3a2f18;
    --upozorenje: #f0b45a;
    --info: #8fb0e0;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--pozadina); color: var(--tekst); font: 15px/1.45 system-ui, sans-serif; }
header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 16px; background: var(--povrsina); border-bottom: 1px solid var(--rub); }
header nav { display: flex; gap: 4px; flex: 1; }
header .korisnik { color: var(--blijedo); font-size: 13px; }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }
button { font: inherit; padding: 6px 12px; border: 1px solid var(--rub); background: var(--povrsina); color: var(--tekst); border-radius: 6px; cursor: pointer; }
button.aktivno, button.glavni, button[type=submit] { background: var(--naglasak); border-color: var(--naglasak); color: #fff; }
input, select { font: inherit; padding: 8px; border: 1px solid var(--rub); border-radius: 6px; background: var(--povrsina); color: var(--tekst); width: 100%; }
table { width: 100%; border-collapse: collapse; background: var(--povrsina); font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rub); vertical-align: top; }
th { color: var(--blijedo); font-weight: 600; }
.br { text-align: right; font-variant-numeric: tabular-nums; }
.napomena { color: var(--blijedo); font-size: 13px; }
tr.privremeno { background: var(--privremeno); }
.oznaka { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--naglasak); color: #fff; }
.greska { color: var(--greska); }
.prazno, .ucitavanje { color: var(--blijedo); padding: 16px; }
.prijava { max-width: 360px; margin: 12vh auto; padding: 24px; background: var(--povrsina); border: 1px solid var(--rub); border-radius: 10px; display: grid; gap: 12px; }
.prijava h1 { margin: 0; font-size: 22px; }
.prijava .podnaslov { margin: -8px 0 8px; color: var(--blijedo); }
.prijava label { display: grid; gap: 4px; font-size: 13px; color: var(--blijedo); }


button:disabled { opacity: .5; cursor: default; }
button.mali { padding: 3px 8px; font-size: 13px; }
button.opasno { color: var(--greska); }
button.link { border: 0; background: none; padding: 0; color: var(--naglasak); text-decoration: underline; }
select { width: auto; }
input.broj { width: 6em; text-align: right; font-variant-numeric: tabular-nums; }
.blijedo { color: var(--blijedo); }
.mali-tekst { font-size: 12px; }
.pomoc { color: var(--blijedo); font-size: 13px; margin: 4px 0 8px; }
.upozorenje { color: var(--upozorenje); }
.naslov-red { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.naslov-red h2, .naslov-red h3, .naslov-red h4 { margin: 0; }
.naslov-red .trazi { flex: 1; min-width: 200px; }
.kartica { background: var(--povrsina); border: 1px solid var(--rub); border-radius: 10px; padding: 14px; margin: 12px 0; }
.kartica h3 { margin: 0 0 8px; }
.kartica > label, .siroko { display: grid; gap: 4px; font-size: 13px; color: var(--blijedo); margin: 8px 0; }
.gumbi { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
table.popis tr.klik { cursor: pointer; }
table.popis tr.klik:hover { background: var(--privremeno); }
.red { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 6px 0; }
.red label, .polja-rada label { display: grid; gap: 2px; font-size: 12px; color: var(--blijedo); }
.red > input:not(.broj) { flex: 1; min-width: 140px; width: auto; }
.polja-rada { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.polja-rada input.broj { width: 100%; }
.lokacija { border-top: 1px solid var(--rub); padding: 10px 0; }
.podnaslov { font-weight: 600; font-size: 13px; margin: 8px 0 4px; }
.retci { margin: 10px 0; }
.retci h4 { font-size: 14px; }
.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 10px 0; }
.mreza h4 { margin: 0 0 4px; font-size: 14px; }
.kvacica { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.kvacica input { width: auto; }
.birac { position: relative; }
.padajuce { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--rub); border-radius: 6px; background: var(--povrsina); max-height: 280px; overflow: auto; }
.padajuce li { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--rub); }
.padajuce li:hover { background: var(--privremeno); }
.padajuce li.novi { color: var(--naglasak); }
.odabrano { display: flex; gap: 10px; align-items: center; color: var(--tekst); }
.kartice, .verzije { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.urednik { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.desno { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.sazetak { background: var(--povrsina); border: 1px solid var(--rub); border-radius: 10px; padding: 14px; }
.sazetak h3 { margin: 8px 0; font-size: 16px; }
.iznos-red { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rub); font-variant-numeric: tabular-nums; }
.iznos-red.ukupno { font-size: 17px; border-bottom: 0; }
table.stavke { font-size: 12px; margin: 4px 0 8px; }
table.stavke td { padding: 3px 4px; }
table.stavke tr.nema td { color: var(--greska); }
.upozorenja { list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }
.upozorenja li { padding: 4px 8px; border-left: 3px solid var(--upozorenje); margin: 4px 0; }
.upozorenja li.greska { border-color: var(--greska); color: var(--greska); }
.upozorenja li.info { border-color: var(--info); color: var(--blijedo); }
.ponuda-red { display: grid; grid-template-columns: 1fr 7em 5.5em; gap: 6px; align-items: center; font-size: 14px; margin: 4px 0; }
.ponuda-red input.broj { width: 100%; }
.sazetak > label { display: grid; gap: 4px; font-size: 13px; color: var(--blijedo); margin: 8px 0; }
.spremi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
@media (max-width: 900px) {
  .urednik { grid-template-columns: 1fr; }
  .desno { position: static; }
}
@media (max-width: 640px) {
  table { font-size: 13px; }
  .napomena { display: none; }
  main { padding: 10px; }
}
.desno-polje { margin-left: auto; display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; color: var(--blijedo); }
.polje { display: grid; gap: 4px; margin: 8px 0; } .polje > span { font-size: 13px; color: var(--blijedo); }

.posto { display: inline-flex; align-items: center; gap: 3px; color: var(--blijedo); }
.posto input.broj { width: 4em; }
.iznos-red.ponudeno { color: var(--naglasak); border-bottom: 0; }

/* ── Ispis / PDF ── */
.ispis { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body > #app > header, .urednik, .naslov-red, .verzije, .kartica, button, .upozorenje, main > p, main > .link { display: none !important; }
  main { padding: 0; max-width: none; }
  .ispis { display: block; }
  .ispis-glava { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; background: none; }
  .ispis h2 { margin: 6px 0; font-size: 16pt; }
  .ispis h3 { margin: 14px 0 4px; font-size: 12pt; }
  .ispis table { background: none; font-size: 10pt; }
  .ispis th, .ispis td { border-bottom: 1px solid #ccc; padding: 3px 4px; }
  .ispis tfoot td, .zbroj-ispis tr.ukupno td { font-weight: 700; border-top: 1.5px solid #000; }
  .zbroj-ispis { margin-top: 14px; }
  .ispis section { break-inside: avoid; }
}

/* ── Lokacije kao kartice, montaža / demontaža u bojama ── */
:root { --montaza: #fbefe3; --montaza-rub: #e0a46b; --demontaza: #e8eef6; --demontaza-rub: #7f9cc4; }
@media (prefers-color-scheme: dark) { :root { --montaza: #3a2a1b; --montaza-rub: #b9773a; --demontaza: #1e2a3a; --demontaza-rub: #5f7fa8; } }
.lokacije .lokacija { border: 1px solid var(--rub); border-radius: 10px; padding: 12px; margin: 14px 0; background: var(--pozadina); border-top: 1px solid var(--rub); }
.lok-glava { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lok-glava > input { flex: 1; min-width: 160px; font-weight: 600; }
.lok-broj { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tekst); color: var(--povrsina); font-weight: 700; font-size: 14px; flex: none; }
.lok-sati { display: flex; gap: 8px; margin: 8px 0 0; font-size: 12px; }
.lok-sati span { padding: 2px 8px; border-radius: 10px; }
.znak-m { background: var(--montaza); border: 1px solid var(--montaza-rub); }
.znak-d { background: var(--demontaza); border: 1px solid var(--demontaza-rub); }
.blok-m, .blok-d { border-radius: 8px; padding: 8px 10px 10px; margin-top: 10px; }
.blok-m { background: var(--montaza); border-left: 4px solid var(--montaza-rub); }
.blok-d { background: var(--demontaza); border-left: 4px solid var(--demontaza-rub); }
.blok-m .podnaslov, .blok-d .podnaslov { margin-top: 0; }
.dodaj-lok { width: 100%; padding: 10px; border: 1.5px dashed var(--naglasak); color: var(--naglasak); background: transparent; font-weight: 600; }
.priprema { margin: 10px 0 4px; }
.priprema-redovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.priprema-redovi .blok-m, .priprema-redovi .blok-d { margin-top: 0; }
.izvid { margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--rub); border-radius: 8px; }
.izvid .kvacica { align-self: end; padding-bottom: 8px; }