:root {
  --bg: #f4f2ee; --povrs: #ffffff; --povrs2: #faf9f6; --linija: #e4e0d8; --tekst: #1d2b36;
  --tiho: #6b7280; --akcenat: #1d2b36; --zlato: #a8833a; --km: #2563a6; --lm: #b3541e;
  --dobro: #2f7d4f; --lose: #b42318; --upoz-bg: #fff4d6; --upoz-tekst: #7a5400; --senka: 0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11171c; --povrs: #182027; --povrs2: #1c252d; --linija: #2a3540; --tekst: #e6e9ec;
    --tiho: #94a0ab; --akcenat: #d6b46a; --zlato: #d6b46a; --km: #6aa8e8; --lm: #f0965f;
    --dobro: #5cc48a; --lose: #f2867c; --upoz-bg: #3a2f12; --upoz-tekst: #f3d68b; --senka: none;
  }
}
:root[data-theme="dark"] {
  --bg: #11171c; --povrs: #182027; --povrs2: #1c252d; --linija: #2a3540; --tekst: #e6e9ec;
  --tiho: #94a0ab; --akcenat: #d6b46a; --zlato: #d6b46a; --km: #6aa8e8; --lm: #f0965f;
  --dobro: #5cc48a; --lose: #f2867c; --upoz-bg: #3a2f12; --upoz-tekst: #f3d68b; --senka: none;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--tekst); font: 14px/1.45 Inter, system-ui, sans-serif; }
button, input, select { font: inherit; color: inherit; }
.tiho { color: var(--tiho); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

/* prijava */
.prijava { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.kartica-prijava { width: 100%; max-width: 360px; background: var(--povrs); border: 1px solid var(--linija);
  border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--senka); }
.kartica-prijava h1 { margin: 4px 0 0; font-size: 20px; }
.kartica-prijava p { margin: 0 0 8px; }
.kartica-prijava label { font-weight: 500; font-size: 13px; }
.kartica-prijava input { padding: 10px 12px; border: 1px solid var(--linija); border-radius: 8px; background: var(--povrs2); }
#kod { font-size: 22px; letter-spacing: 6px; text-align: center; }
.poruka { min-height: 1.4em; font-size: 13px; color: var(--tiho); }
.poruka.greska { color: var(--lose); }
.znak { width: 40px; height: 40px; border-radius: 9px; background: #1d2b36; color: #d6b46a; display: grid;
  place-items: center; font-weight: 700; font-size: 20px; }
.znak.mali { width: 26px; height: 26px; font-size: 14px; border-radius: 6px; }

.dugme { border: 1px solid var(--linija); background: var(--povrs); border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.dugme:hover { border-color: var(--tiho); }
.dugme.glavno { background: var(--akcenat); border-color: var(--akcenat); color: var(--bg); font-weight: 600; }
.dugme.malo { padding: 5px 10px; font-size: 13px; }
.dugme.tekst { border-color: transparent; background: transparent; color: var(--tiho); }
.dugme:disabled { opacity: .55; cursor: default; }

/* zaglavlje */
.zaglavlje { position: sticky; top: 0; z-index: 5; background: var(--povrs); border-bottom: 1px solid var(--linija);
  display: flex; align-items: center; gap: 18px; padding: 0 16px; min-height: 54px; flex-wrap: wrap; }
.brend { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tabovi { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.tabovi button { border: 0; background: none; padding: 16px 12px 14px; cursor: pointer; color: var(--tiho);
  border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tabovi button[aria-selected="true"] { color: var(--tekst); border-bottom-color: var(--zlato); }
.desno { display: flex; align-items: center; gap: 8px; }
.svezina { font-size: 12px; color: var(--tiho); white-space: nowrap; }
.traka-upozorenje { background: var(--upoz-bg); color: var(--upoz-tekst); padding: 8px 16px; font-size: 13px; }

.sadrzaj { padding: 20px 24px 48px; }
@media (max-width: 640px) { .sadrzaj { padding: 16px 16px 40px; } }
.ucitavam { color: var(--tiho); }
h2 { font-size: 17px; margin: 0 0 4px; }
.podnaslov { color: var(--tiho); margin: 0 0 16px; font-size: 13px; }
.sekcija { margin-top: 28px; }

/* kpi */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi div { background: var(--povrs); border: 1px solid var(--linija); border-radius: 10px; padding: 14px 16px; box-shadow: var(--senka); }
.kpi b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi span { color: var(--tiho); font-size: 12.5px; }
.kpi small { color: var(--tiho); font-size: 12px; }

/* alatke */
.alatke { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.alatke input[type=search], .alatke select { padding: 7px 10px; border: 1px solid var(--linija); border-radius: 8px;
  background: var(--povrs); min-width: 0; }
.alatke input[type=search] { width: 260px; max-width: 100%; }
.alatke label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tiho); }
.alatke .razmak { flex: 1; }

/* tabele */
.tabela-omot { background: var(--povrs); border: 1px solid var(--linija); border-radius: 10px; overflow: auto; box-shadow: var(--senka); }
/* tabela skroluje u svom okviru visine ekrana, pa zaglavlje kolona (i zbir dole) ostaju vidljivi */
.sadrzaj > .tabela-omot, .sekcija > .tabela-omot, .dok .tabela-omot { max-height: calc(100vh - 190px); }
@media (max-width: 1100px) { .sadrzaj > .tabela-omot, .sekcija > .tabela-omot, .dok .tabela-omot { max-height: calc(100vh - 230px); } }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--linija); text-align: left; vertical-align: middle; }
th { font-size: 12px; font-weight: 600; color: var(--tiho); background: var(--povrs2); position: sticky; top: 0; z-index: 1;
  white-space: nowrap; cursor: pointer; user-select: none; }
th.bez { cursor: default; }
th[data-smer="1"]::after { content: " ↑"; } th[data-smer="-1"]::after { content: " ↓"; }
tbody tr:hover { background: var(--povrs2); }
tbody tr.klik { cursor: pointer; }
tfoot td { font-weight: 600; background: var(--povrs2); position: sticky; bottom: 0; }
td.naziv { min-width: 240px; }
.km { color: var(--km); } .lm { color: var(--lm); }
th.km, th.lm { color: inherit; }
th.km { box-shadow: inset 0 -2px 0 var(--km); } th.lm { box-shadow: inset 0 -2px 0 var(--lm); }
.nula { color: var(--tiho); opacity: .5; }
.gore { color: var(--lose); } .dole { color: var(--dobro); }
.oznaka { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--linija);
  color: var(--tiho); margin-left: 4px; white-space: nowrap; }
.oznaka.akc { border-color: var(--zlato); color: var(--zlato); }

/* dokumenti */
.dok { background: var(--povrs); border: 1px solid var(--linija); border-radius: 10px; margin-bottom: 12px; box-shadow: var(--senka); }
.dok > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.dok > summary::-webkit-details-marker { display: none; }
.dok > summary::before { content: "▸"; color: var(--tiho); }
.dok[open] > summary::before { content: "▾"; }
.dok .red-dok { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.dok .broj { font-weight: 600; font-family: ui-monospace, Consolas, monospace; }
.dok .polje { font-size: 13px; color: var(--tiho); } .dok .polje b { color: var(--tekst); font-weight: 600; }
.dok .tabela-omot { border: 0; border-top: 1px solid var(--linija); border-radius: 0 0 10px 10px; box-shadow: none; }

/* fioka */
.fioka { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; display: flex; justify-content: flex-end; }
.fioka-telo { width: min(760px, 100%); height: 100%; overflow: auto; background: var(--bg); padding: 22px 20px 40px; position: relative; }
.zatvori { position: absolute; right: 14px; top: 10px; border: 0; background: none; font-size: 28px; cursor: pointer; color: var(--tiho); }
.mreza2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .tabovi { order: 3; flex-basis: 100%; margin: 0 -16px; padding: 0 8px; border-top: 1px solid var(--linija); }
  .tabovi button { padding: 11px 12px 9px; } }
@media (max-width: 640px) { .mreza2 { grid-template-columns: 1fr; } .svezina { display: none; } }
.grafik { background: var(--povrs); border: 1px solid var(--linija); border-radius: 10px; padding: 10px 12px; }
.grafik svg { width: 100%; height: 160px; display: block; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--tiho); }
.legenda i { display: inline-block; width: 10px; height: 3px; vertical-align: middle; margin-right: 5px; }

/* sandbox */
.sb-glava { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.sb-glava .razmak { flex: 1; }
.sb-naziv { font-size: 18px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--linija); border-radius: 8px; background: var(--povrs); min-width: 260px; }
.sb-glava select { padding: 6px 10px; border: 1px solid var(--linija); border-radius: 8px; background: var(--povrs); }
.sb-napomena { width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid var(--linija); border-radius: 8px; background: var(--povrs); resize: vertical; margin-bottom: 6px; }
.sb-dodaj { width: 220px; padding: 7px 10px; border: 1px solid var(--linija); border-radius: 8px; background: var(--povrs); }
td.unos { padding: 3px 6px; }
.sb-unos { width: 84px; padding: 5px 7px; border: 1px solid var(--linija); border-radius: 6px; background: var(--povrs2); text-align: right; font-variant-numeric: tabular-nums; }
.sb-unos:focus { outline: 2px solid var(--zlato); outline-offset: -1px; background: var(--povrs); }
.sb-unos[disabled] { opacity: .6; }

/* sličice */
td.naziv { vertical-align: middle; }
.th { float: left; margin-right: 10px; width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--linija); }
.th.prazno { display: inline-block; background: var(--povrs2); }
.fioka-glava { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 4px; }
.th-m { width: 140px; height: 140px; object-fit: contain; flex: none; border-radius: 10px; background: #fff; border: 1px solid var(--linija); }
@media (max-width: 640px) { .th-m { width: 96px; height: 96px; } }
.dugme.brisi:hover { color: var(--lose); }