/* Kontrola URA i IRA — bela pozadina, tirkizni akcenti (#0d9488, kao KPDV), visok kontrast.
   Tabela liči na Excel predložak; štampa = A4 landscape preko @media print. */

* { box-sizing: border-box; }

:root {
  --tirkiz: #0d9488;
  --tirkiz-taman: #115e59;
  --tirkiz-svetli: #ccfbf1;
  --siva-okvir: #cbd5e1;
  --siva-tekst: #64748b;
  --siva-pozadina: #f1f5f9;
  --crvena: #dc2626;
  --zelena: #16a34a;
  --zaklj: #e2e8f0; /* zaključana (siva) ćelija — kao u Excelu */
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  color: #0f172a;
  background: #fff;
}

.hidden { display: none !important; }

button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

.btn {
  border: 1px solid var(--siva-okvir);
  background: #fff;
  border-radius: 6px;
  padding: 6px 14px;
}
.btn:hover { background: var(--siva-pozadina); }
.btn-primary {
  background: var(--tirkiz);
  border-color: var(--tirkiz);
  color: #fff;
}
.btn-primary:hover { background: var(--tirkiz-taman); }
.btn-danger { color: var(--crvena); border-color: var(--crvena); }
.btn-danger:hover { background: #fef2f2; }
.btn-ghost { border-color: transparent; background: transparent; color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.15); }
.btn-small { padding: 2px 8px; font-size: 13px; }

.error {
  color: var(--crvena);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 10px 0;
}

/* ---------- prijava ---------- */

#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--siva-pozadina);
}
#login-form {
  background: #fff;
  border: 1px solid var(--siva-okvir);
  border-radius: 12px;
  padding: 32px 36px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-logo {
  align-self: center;
  background: var(--tirkiz);
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  border-radius: 12px;
  padding: 12px 18px;
}
#login-form h1 { font-size: 19px; text-align: center; margin: 0; }
#login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
#login-form input { padding: 8px 10px; border: 1px solid var(--siva-okvir); border-radius: 6px; }

/* ---------- raspored aplikacije ---------- */

#app-header {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--tirkiz);
  color: #fff;
  padding: 10px 18px;
  flex-wrap: wrap;
}
.header-title { font-weight: bold; font-size: 17px; }
#app-nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  border-radius: 6px;
  padding: 5px 12px;
}
.nav-btn:hover { background: rgba(255,255,255,.15); }
.nav-btn.active { background: #fff; color: var(--tirkiz); font-weight: 600; }
.header-user { display: flex; align-items: center; gap: 10px; }

#main { padding: 18px; padding-bottom: 80px; max-width: 1500px; margin: 0 auto; }

#app-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--tirkiz);
  color: #fff;
  font-size: 13px;
  padding: 5px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
/* link ka GitHub repou — izgleda kao običan tekst, podvlači se tek na hover */
.footer-author {
  opacity: .85;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.footer-author:hover { opacity: 1; text-decoration: underline; }
.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#footer-build { opacity: .8; font-variant-numeric: tabular-nums; }
#footer-build.klik { cursor: pointer; }
#footer-build.klik:hover { opacity: 1; text-decoration: underline; }
.footer-right { display: flex; align-items: center; gap: 14px; }

/* na uskom ekranu build ustupa mesto nazivu i satu (kao u KPDV-u) */
@media (max-width: 700px) {
  #footer-build { display: none; }
}
#footer-kpdv { color: #fff; opacity: .85; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.6); }
#footer-kpdv:hover { opacity: 1; border-bottom-style: solid; }

/* ---------- lista kontrola ---------- */

.list-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.list-toolbar select { padding: 6px 8px; border: 1px solid var(--siva-okvir); border-radius: 6px; }

table.lista {
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
}
table.lista th, table.lista td {
  border: 1px solid var(--siva-okvir);
  padding: 8px 12px;
  text-align: left;
}
table.lista th { background: var(--tirkiz-svetli); }
table.lista tr:hover td { background: var(--siva-pozadina); }
table.lista .akcije { display: flex; gap: 6px; flex-wrap: wrap; }
.prazno { color: var(--siva-tekst); font-style: italic; margin: 20px 0; }

/* ---------- kontrola (tabela za unos) ---------- */

.k-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.k-status { color: var(--siva-tekst); font-size: 13px; margin-left: auto; }
.k-status.saved { color: var(--zelena); }

/* živi prekidač za napomenu (ekran/štampa) — grupa u alatnoj traci kontrole */
.nap-prekidaci { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; color: var(--siva-tekst); }
.nap-naslov { font-weight: 600; color: var(--tekst); }
.nap-prekidac { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; white-space: nowrap; }
.nap-prekidac input { cursor: pointer; }
/* sakrivanje napomene na ekranu — klasu na #main postavlja renderKontrola iz localStorage */
#main.sakrij-napomenu-ekran .napomena-tekst { display: none; }

/* Zaključana kontrola (Faza 7). Traka SE ŠTAMPA — na papiru je dokaz da je mesec zatvoren. */
.k-zakljucana {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #92400e;
}
.btn-otkljucaj { color: #b45309; border-color: #fcd34d; }
.btn-otkljucaj:hover { background: #fffbeb; }
.katanac { cursor: help; }

.k-naslov {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 12px 0;
}

/* Opis bloka u radnom delu (v2.14.0) — pojašnjenje iznad tabele bloka; `no-print` u JS-u,
   pa na papir ne ide. Za spojene blokove ide kao red UNUTAR tabele (`.blok-opis-red`). */
.blok-opis-prikaz {
  margin: 14px 0 4px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  color: var(--siva-tekst);
  background: var(--tirkiz-svetli);
  border-left: 3px solid var(--tirkiz);
  border-radius: 0 6px 6px 0;
}
tr.blok-opis-red td {
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  color: var(--siva-tekst);
  background: var(--tirkiz-svetli);
  font-style: italic;
}

table.grid {
  border-collapse: collapse;
  width: 100%;
}
table.grid th, table.grid td {
  border: 1px solid #94a3b8;
  padding: 3px 6px;
  vertical-align: middle;
}
table.grid th {
  background: var(--tirkiz-svetli);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
table.grid td.oe { white-space: nowrap; font-weight: 600; width: 80px; }
table.grid td.napomena { font-size: 13px; }
/* Ćelija za unos. Redovi su često visoki (duga napomena razvuče red), a polje ostaje
   svoje prirodne visine na sredini ćelije. Zato:
   — klik BILO GDE u ćeliju otvara unos (mousedown handler u app.js),
   — `cursor: text` to najavljuje,
   — okvir fokusa se crta oko CELE ćelije (:focus-within), ne oko malog polja,
     pa se vidi da je cela ćelija aktivna.
   Polje se NE razvlači po visini: `height:100%` se u tabelarnoj ćeliji ne razrešava,
   a apsolutno pozicioniranje bi srušilo visinu redova u kojima su sve ćelije unos
   (npr. rezervni redovi 28/29 u IRE mreži). */
table.grid td.celija { padding: 0; width: 110px; cursor: text; }
table.grid td.celija input {
  width: 100%;
  border: 0;
  padding: 4px 6px;
  text-align: right;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
table.grid td.celija input:focus { outline: none; }
table.grid td.celija:focus-within {
  outline: 2px solid var(--tirkiz);
  outline-offset: -2px;
  background: var(--tirkiz-svetli);
}
table.grid td.zakljucana { background: var(--zaklj); }
table.grid td.izracunato {
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: #f8fafc;
  font-weight: 600;
  width: 110px;
}
table.grid td.suma-label { font-size: 13px; }
table.grid td.konto { white-space: pre-line; font-size: 12px; text-align: center; width: 70px; }
tr.suma-prva td.izracunato { border-top: 2px solid #0f172a; }
/* spojene ćelije zbirnog reda (A–F) — bez ivica i bez sive pozadine, kao u Excelu */
td.bez-ivice { border: 0 !important; background: transparent !important; }

/* ---------- blokovi (v2.0.0) ---------- */

/* blok „ZA PRIJAVU", saldo glavne knjige i provere — isti izgled kao mreža, uža tabela */
.blok-wrap { margin-top: 22px; }
table.prijava {
  border-collapse: collapse;
  width: 100%;
}
table.prijava th, table.prijava td {
  border: 1px solid #94a3b8;
  padding: 3px 6px;
  vertical-align: middle;
}
table.prijava th { background: var(--tirkiz-svetli); font-weight: 600; text-align: center; }
table.prijava td.celija { padding: 0; width: 110px; cursor: text; }
table.prijava td.celija input {
  width: 100%;
  border: 0;
  padding: 4px 6px;
  text-align: right;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
table.prijava td.celija input:focus { outline: none; }
table.prijava td.celija:focus-within {
  outline: 2px solid var(--tirkiz);
  outline-offset: -2px;
  background: var(--tirkiz-svetli);
}
table.prijava td.zakljucana { background: var(--zaklj); }
table.prijava td.izracunato {
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: #f8fafc;
  font-weight: 600;
  width: 110px;
}
table.prijava td.polje { text-align: center; font-weight: 600; white-space: nowrap; }
table.prijava td.napomena { font-size: 12px; }
table.prijava td.suma-label { font-weight: 600; white-space: nowrap; }

/* traka sa naslovom bloka („ZA PRIJAVU") */
tr.blok-naslov th {
  background: var(--tirkiz);
  color: #fff;
  letter-spacing: .06em;
  text-align: left;
}
/* prazan red između spojenih blokova (rupa u Excel numeraciji) */
tr.blok-razmak td { border: 0; height: 10px; padding: 0; }
/* „Provera" redovi — moraju da upadnu u oči, to su kontrolne nule */
tr.provera td { background: #fffbeb; }
tr.provera td.izracunato { background: #fef3c7; }
tr.zbir td { border-top: 2px solid #0f172a; }

/* Zamrznuto zaglavlje — „freeze panes" kao u Excelu: dok se skroluje kroz blok njegovo
   zaglavlje stoji na vrhu, a kad počne sledeći blok njegovo zaglavlje preuzima (svaki blok
   je zasebna tabela). `top` svakog reda postavlja zamrzniZaglavlja() u app.js — višeredno
   zaglavlje (traka „ZA PRIJAVU" + red kolona) se slaže bez preklapanja. box-shadow crta
   ivice, jer collapsed border „otpadne" sa ćelije kad je sticky. */
table.grid thead th,
table.prijava thead th,
table.pppdv thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 1px 0 #94a3b8, inset 0 -1px 0 #94a3b8;
}

.komentar-ikona {
  display: inline-block;
  color: var(--tirkiz);
  cursor: help;
  font-size: 12px;
  margin-left: 6px;
  border: 1px solid var(--tirkiz);
  border-radius: 50%;
  width: 16px; height: 16px;
  line-height: 14px;
  text-align: center;
}

.formula-greska {
  color: var(--crvena);
  font-size: 12px;
  white-space: normal;
}

/* PPPDV tabela */
.pppdv-wrap { margin-top: 22px; max-width: 700px; }
table.pppdv {
  border-collapse: collapse;
}
table.pppdv th, table.pppdv td {
  border: 1px solid #94a3b8;
  padding: 4px 10px;
}
table.pppdv th { background: var(--tirkiz-svetli); font-size: 13px; }
table.pppdv td.broj {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 110px;
  font-weight: 600;
}
table.pppdv td.polje { text-align: center; font-weight: 600; width: 70px; }
table.pppdv tr.zbir td { border-top: 2px solid #0f172a; }

/* ---------- template editor ---------- */

.tpl-sekcija { margin-bottom: 30px; }
.tpl-sekcija h2 { font-size: 16px; border-bottom: 2px solid var(--tirkiz); padding-bottom: 4px; }
.tpl-meta { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.tpl-meta label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--siva-tekst); }
.tpl-meta input, .tpl-meta textarea {
  padding: 6px 8px; border: 1px solid var(--siva-okvir); border-radius: 6px; color: #0f172a;
}
.tpl-hint { font-size: 13px; color: var(--siva-tekst); margin: 6px 0 12px; }

/* naslov bloka + dugmad za preimenovanje/brisanje u istom redu; h2 nosi liniju,
   pa raste do kraja i gura dugmad desno */
.blok-zaglavlje { display: flex; align-items: baseline; gap: 8px; }
.blok-zaglavlje h2 { flex: 1; }
.tpl-meta input.br-redova { max-width: 90px; }

/* opis bloka (editor) — diskretno polje ispod naslova bloka */
.blok-opis { display: block; margin: 4px 0 8px; font-size: 12px; color: var(--siva-tekst); }
.blok-opis .tekst-input { margin-top: 2px; }

/* Blok sa mnogo kolona je širi od ekrana — skroluje se SAM, da cela stranica
   ne ode u horizontalni skrol (zaglavlje, naslovi i dugmad ostaju na mestu). */
/* blok skroluje SEBE (horizontalno je širi od ekrana; vertikalno mu damo granicu da bi
   zaglavlje moglo da se zamrzne unutar sopstvenog okvira dok se dugačak blok skroluje) */
.tpl-tabela-wrap { overflow: auto; max-height: 75vh; }
table.tpl-tabela { border-collapse: collapse; width: 100%; }
table.tpl-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 1px 0 var(--siva-okvir), inset 0 -1px 0 var(--siva-okvir);
}
table.tpl-tabela th, table.tpl-tabela td {
  border: 1px solid var(--siva-okvir);
  padding: 4px 6px;
  font-size: 13px;
  vertical-align: middle;
}
table.tpl-tabela th { background: var(--tirkiz-svetli); }
table.tpl-tabela input[type="text"], table.tpl-tabela textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 5px;
  background: transparent;
  resize: none;
}
table.tpl-tabela input[type="text"]:hover, table.tpl-tabela textarea:hover { border-color: var(--siva-okvir); }
table.tpl-tabela input[type="text"]:focus, table.tpl-tabela textarea:focus {
  border-color: var(--tirkiz); outline: none; background: #fff;
}
table.tpl-tabela td.chk { text-align: center; }
table.tpl-tabela td.akcije { white-space: nowrap; }
table.tpl-tabela td.red-broj { text-align: right; color: var(--siva-tekst); font-variant-numeric: tabular-nums; }
/* ćelija u editoru blokova: izbor tipa + polje koje tom tipu odgovara */
table.tpl-tabela td.tpl-celija { vertical-align: top; min-width: 130px; }
select.tip-izbor {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 11px;
  color: var(--siva-tekst);
  padding: 1px 2px;
}
select.tip-izbor:hover, select.tip-izbor:focus { border-color: var(--siva-okvir); background: #fff; }
input.kol-naziv {
  width: 100%; border: 1px solid transparent; border-radius: 4px;
  padding: 2px 4px; background: transparent; font-size: 12px; text-align: center;
}
input.kol-naziv:hover { border-color: var(--siva-okvir); }
input.kol-naziv:focus { border-color: var(--tirkiz); outline: none; background: #fff; }
label.dopune-chk { font-size: 11px; color: var(--siva-tekst); display: inline-flex; align-items: center; gap: 2px; }
/* polje za formulu — textarea koja se prelama u nove redove (duga formula mora da se vidi cela);
   visinu podešava autoGrow u app.js */
table.tpl-tabela textarea.formula-input {
  font-family: Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere; /* formule nemaju razmake — prelama se gde stigne */
  min-height: 1.9em;
}
/* Tekstualno polje u editoru: skupljeno na jedan red dok se ne dira, na fokus se raširi
   (autoGrow) da se vidi cela vrednost — isto ponašanje kao polje za formulu. */
textarea.tekst-input {
  overflow: hidden;
  white-space: pre-wrap;
  line-height: 1.35;
  min-height: 1.9em;
}
/* skupljeno polje kojem sadržaj ne staje — tačkasta linija najavljuje „ima još, klikni" */
textarea.tekst-input.ima-jos { border-bottom: 2px dotted var(--tirkiz); }
textarea.tekst-input:focus { background: #fff; }

.formula-pregled { font-size: 12px; color: var(--siva-tekst); white-space: nowrap; text-align: right; }
.formula-pregled.greska { color: var(--crvena); white-space: normal; }

/* adresno slovo kolone (kao u Excelu) — badge u zaglavlju template tabela */
.kol-slovo {
  display: inline-block;
  font-family: Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--tirkiz-taman);
  background: #fff;
  border: 1px solid var(--siva-okvir);
  border-radius: 3px;
  padding: 0 5px;
  line-height: 16px;
  vertical-align: middle;
}
div.kol-slovo { display: block; width: max-content; margin: 0 auto 3px; }

/* ćelija koju trenutno uneta formula referiše:
   narandžasto = referisana, ali doprinos nije prosto +/- (množenje, deljenje, ABS),
   zeleno = sabira se, crveno = oduzima se */
.ref-celija, tr.ref-celija > td { background: #ffedd5; }
td.ref-celija { outline: 2px solid #f97316; outline-offset: -2px; }

.ref-plus, tr.ref-plus > td { background: #dcfce7; }
td.ref-plus { outline: 2px solid #16a34a; outline-offset: -2px; }

.ref-minus, tr.ref-minus > td { background: #fee2e2; }
td.ref-minus { outline: 2px solid #ef4444; outline-offset: -2px; }

/* ---------- korisnici / backup ---------- */

.users-wrap, .backup-wrap { max-width: 700px; }
.users-wrap table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
.users-wrap th, .users-wrap td { border: 1px solid var(--siva-okvir); padding: 8px 10px; text-align: left; }
.users-wrap th { background: var(--tirkiz-svetli); }
.forma-red { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.forma-red input, .forma-red select { padding: 6px 8px; border: 1px solid var(--siva-okvir); border-radius: 6px; }
.backup-wrap p { line-height: 1.5; }

/* ---------- dijalog ---------- */

dialog {
  border: 1px solid var(--siva-okvir);
  border-radius: 10px;
  padding: 20px;
  min-width: 320px;
}
dialog::backdrop { background: rgba(15,23,42,.4); }
dialog h3 { margin-top: 0; }
dialog .forma-red { margin: 12px 0; }
dialog .dijalog-dugmad { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* changelog (klik na „build" u footeru) */
.changelog-dijalog { max-width: min(760px, 92vw); }
.changelog-telo { max-height: 70vh; overflow-y: auto; line-height: 1.5; }
.changelog-telo h3 { margin: 0 0 12px; }
.changelog-telo h4 { margin: 18px 0 4px; color: var(--tirkiz-taman); }
.changelog-telo ul { margin: 0 0 6px; padding-left: 20px; }
.changelog-telo li { margin: 2px 0; }
.changelog-telo p { margin: 6px 0; }
.changelog-telo code { font-family: Consolas, monospace; font-size: 12px; background: var(--tirkiz-svetli); padding: 1px 4px; border-radius: 4px; }
.changelog-telo a { color: var(--tirkiz-taman); }

/* ---------- dinamički tekstovi (placeholderi) ---------- */

.tpl-legenda { margin: 6px 0 16px; }
.tpl-legenda-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tpl-legenda-lista .btn { font-family: Consolas, monospace; }
.tekst-sa-pregledom { display: flex; flex-direction: column; gap: 2px; }
/* pregled razrešenog teksta ispod polja — prazan je kad tekst nema nijedan placeholder */
.tekst-pregled { font-size: 12px; color: var(--tirkiz-taman); font-style: italic; }
.tekst-pregled:empty { display: none; }

/* ---------- dopune uz formulu ---------- */

/* bedž „➕" na izračunatoj ćeliji — diskretan dok se ne pređe mišem preko ćelije */
.dopuna-bedz {
  border: 0;
  background: transparent;
  color: var(--siva-tekst);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0 0 0 4px;
  opacity: 0;
}
td:hover > .dopuna-bedz, .dopuna-bedz:focus { opacity: 1; }
.dopuna-bedz:hover { color: var(--tirkiz); }

/* ćelija koja IMA dopune — tirkizni ugao, da se na prvi pogled vidi da nije čista formula */
td.ima-dopune {
  position: relative;
  background-image: linear-gradient(225deg, var(--tirkiz) 0 8px, transparent 8px);
}
td.ima-dopune > .dopuna-bedz { opacity: 1; color: var(--tirkiz); }

.dopune-dlg { min-width: 460px; max-width: 90vw; }
table.dopune-tabela { border-collapse: collapse; width: 100%; }
table.dopune-tabela th, table.dopune-tabela td {
  border: 1px solid var(--siva-okvir); padding: 4px 6px; font-size: 13px;
}
table.dopune-tabela th { background: var(--tirkiz-svetli); text-align: left; }
table.dopune-tabela input { width: 100%; border: 1px solid transparent; border-radius: 4px; padding: 3px 5px; }
table.dopune-tabela input:focus { border-color: var(--tirkiz); outline: none; }
input.dopuna-iznos { text-align: right; font-variant-numeric: tabular-nums; min-width: 110px; }
.dopune-zbir {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--siva-okvir);
  font-size: 13px; color: var(--siva-tekst);
}
.dopune-zbir span { font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }

/* ---------- veze između kontrola (Faza 9) ---------- */

table.veze-tabela { border-collapse: collapse; width: 100%; margin: 10px 0; }
table.veze-tabela th, table.veze-tabela td {
  border: 1px solid var(--siva-okvir); padding: 5px 8px; font-size: 13px; text-align: left;
}
table.veze-tabela th { background: var(--tirkiz-svetli); }
/* svaka tabela veza skroluje SAMA (široka polja) — cela strana ne ide u horizontalni skrol */
.veze-tabela-wrap { overflow-x: auto; }
/* diskretan izgled: bez sistemske „kućice/strelice" (appearance:none), usklađeno sa aplikacijom;
   strelica je crtana CSS gradijentom (bez CDN/data-URI zbog CSP-a) */
table.veze-tabela select, select.veze-cist {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--siva-okvir); border-radius: 6px;
  padding: 6px 28px 6px 8px;
  background-color: #fff; color: #0f172a; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--siva-tekst) 50%),
    linear-gradient(135deg, var(--siva-tekst) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
table.veze-tabela select:hover, select.veze-cist:hover { border-color: var(--siva-tekst); }
table.veze-tabela select:focus, select.veze-cist:focus { border-color: var(--tirkiz); outline: none; }
/* široka polja (ciljno/izvorno) — dovoljno da se cela opcija vidi; uski „izvorni tip" ostaje po sadržaju */
table.veze-tabela select.veze-polje { width: 100%; min-width: 464px; }
td.veze-strelica { text-align: center; color: var(--siva-tekst); }
.veze-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.veze-akcije { display: flex; gap: 10px; margin-top: 12px; }
.veza-problem { color: var(--crvena); }
tr.veza-preskok { color: var(--siva-tekst); }
.povuci-dlg { min-width: 520px; max-width: 92vw; }

/* ciljna ćelija veze — ugao u tamnijem tirkizu (leva strana, da se razlikuje od desnog
   ugla dopuna); crven kad je izvor u međuvremenu promenjen (povlačenje je zastarelo) */
td.veza-cilj { position: relative; }
td.veza-cilj::after {
  content: ''; position: absolute; top: 0; left: 0; pointer-events: none;
  border-width: 7px; border-style: solid;
  border-color: var(--tirkiz-taman) transparent transparent var(--tirkiz-taman);
}
td.veza-cilj.veza-zastarelo::after {
  border-top-color: var(--crvena); border-left-color: var(--crvena);
}

/* ---------- baner „nova verzija" (Faza 11) ---------- */
/* nenametljiva pilula pri vrhu, iznad sadržaja; klasa no-print je izostavlja iz štampe */
#nova-verzija {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 94%;
  padding: 10px 16px;
  background: var(--tirkiz-taman);
  color: #fff;
  border: 1px solid var(--tirkiz);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
  font-size: 14px;
}
#nova-verzija .nv-tekst { line-height: 1.3; }
#nova-verzija .nv-osvezi {
  background: var(--tirkiz-svetli);
  border-color: var(--tirkiz-svetli);
  color: var(--tirkiz-taman);
  font-weight: 600;
  white-space: nowrap;
}
#nova-verzija .nv-osvezi:hover { background: #fff; }
#nova-verzija .nv-kasnije {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  white-space: nowrap;
}
#nova-verzija .nv-kasnije:hover { background: rgba(255, 255, 255, .15); }
@media (max-width: 640px) {
  #nova-verzija { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ---------- štampa ---------- */

.print-header { display: none; }
#print-strane { display: none; }

@media print {
  @page { size: A4 landscape; margin: 10mm 12mm; }

  .no-print, #app-header, #app-footer { display: none !important; }
  /* napomena izostavljena iz štampe (nezavisno od prikaza na ekranu) */
  #main.sakrij-napomenu-stampa .napomena-tekst { display: none; }
  /* donji padding = mesto za „Strana N od M", da broj strane ne legne preko poslednjeg reda */
  #main { padding: 0 0 8mm; max-width: none; }
  body { font-size: 11px; }

  /* sloj sa brojevima strana (puni ga ocrtajBrojeveStrana u app.js) */
  #print-strane {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 0;
  }
  .print-strana-broj {
    position: absolute;
    right: 0;
    font-size: 10px;
    color: var(--siva-tekst);
  }

  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 11px;
  }
  .print-header .firma { font-family: Cambria, Georgia, serif; font-weight: bold; font-size: 13px; }
  .print-header .datum { text-align: right; }

  table.grid th, table.grid td { padding: 2px 4px; }
  table.grid td.celija input {
    border: 0;
    font-size: 11px;
    padding: 1px 3px;
  }
  table.prijava th, table.prijava td { padding: 2px 4px; }
  table.prijava td.celija input { border: 0; font-size: 11px; padding: 1px 3px; }
  table.grid, table.prijava { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  .pppdv-wrap, .blok-wrap { page-break-inside: avoid; }
  .komentar-ikona { display: none; }
  /* dopune: štampa se samo zbirna vrednost ćelije (kao na ekranu) — bez oznake i bez spiska */
  td.ima-dopune { background-image: none; }
  /* veze: povučena vrednost je pravi iznos u ćeliji — ugao je samo UI oznaka, ne štampa se */
  td.veza-cilj::after { display: none; }
  /* zamrznuto zaglavlje je samo za ekran — na papiru bi sticky pomerio red i pokvario prelom */
  table.grid thead th, table.prijava thead th, table.pppdv thead th,
  table.tpl-tabela thead th { position: static; box-shadow: none; }
}