/* ===========================================================================
   Topla paleta. Svetla je podrazumevana; tamna je topao ugalj, ne crno.
   =========================================================================== */
:root{
  --bg:#f6f1e9;          /* topla krem pozadina */
  --panel:#fffdf9;
  --panel2:#f1e9dd;
  --line:#e3d8c8;
  --line2:#efe6d9;
  --txt:#2f2a24;
  --muted:#7c7064;
  --dim:#a09485;

  --terra:#c0522c;       /* glavni akcenat — isti kao na sajtu Vidika */
  --olive:#5e8a3c;       /* dobro */
  --brick:#b5402f;       /* lose */
  --amber:#d59520;
  --teal:#3d8a84;
  --plum:#8a6a9c;

  --shadow:0 1px 2px rgba(80,60,40,.06), 0 4px 14px rgba(80,60,40,.05);
  --r:12px;
}
:root[data-theme="dark"]{
  --bg:#1a1613;
  --panel:#242019;
  --panel2:#2e2820;
  --line:#3a3128;
  --line2:#332b23;
  --txt:#f2e9dc;
  --muted:#b5a693;
  --dim:#8b7d6c;

  --terra:#e08154;
  --olive:#8fbc63;
  --brick:#e06a58;
  --amber:#e6ad3e;
  --teal:#5bb3ab;
  --plum:#b28fc4;
  --shadow:none;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* telefon inace sam „naduva" tekst u sirim pasusima */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
/* Telefon: sve za nijansu manje. Velicine su u px po celom fajlu, pa se
   smanjuje jednim potezom umesto dvesta pravila. Grafikoni se crtaju u
   pikselima kontejnera (sirina()), pa i oni prate.                    */
@media(max-width:620px){ html{zoom:.92} }
h1,h2,h3{margin:0;font-weight:600}

/* ---------- zaglavlje ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 26px;background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:block}
/* ime proizvoda: isti serif kao na sajtu; bez interneta pada na Georgia */
.ime-proizvoda{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.ime-proizvoda span{color:var(--terra)}
.topbar h1.ime-proizvoda{font-size:20px}
.topbar h1{font-size:16px;letter-spacing:.1px}
.sub{color:var(--muted);font-size:12px}
.topbar-right{display:flex;align-items:center;gap:12px}
.asof{color:var(--muted);font-size:12px}
.asof b{color:var(--txt)}
.btn{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:9px;padding:7px 14px;font-size:13px;cursor:pointer;
  font-family:inherit;
}
.btn:hover{background:var(--line2);border-color:var(--dim)}
.btn-ikona{padding:7px 10px;font-size:15px;line-height:1}

/* birac baze */
.izbor{display:flex;align-items:center;gap:8px}
.izbor > span{
  color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:600
}
.izbor select{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;
  max-width:320px;
}
.izbor select:hover{border-color:var(--dim)}
.izbor select:focus{outline:2px solid var(--terra);outline-offset:1px}
@media(max-width:760px){
  .izbor > span{display:none}
  .izbor select{max-width:180px}
  .asof{display:none}
}

/* ---------- kartice (tabovi) ---------- */
.tabs{
  display:flex;gap:4px;padding:0 26px;background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:59px;z-index:19;overflow-x:auto;
}
.tab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font:500 13.5px/1 "Segoe UI",system-ui,sans-serif;
  padding:13px 16px;cursor:pointer;white-space:nowrap;
}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--terra);border-bottom-color:var(--terra)}
.tab .cnt{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:20px;
  background:var(--panel2);color:var(--dim);font-size:11px;font-weight:600;
}
.tab.active .cnt{background:var(--terra);color:#fff}
/* gura Zadatke i Ispise desno — to su alatke, ne pregledi */
.tabs-razmak{flex:1;min-width:16px}

/* drugi nivo: ekrani unutar grupe. Tiši je od glavne trake namerno —
   nosi izbor unutar teme, ne samu temu.                                 */
.podtabs{
  display:flex;gap:2px;padding:0 26px;background:var(--panel2);
  border-bottom:1px solid var(--line);
  position:sticky;top:104px;z-index:18;overflow-x:auto;
}
.podtab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font:500 12.5px/1 "Segoe UI",system-ui,sans-serif;
  padding:9px 13px;cursor:pointer;white-space:nowrap;border-radius:7px 7px 0 0;
}
.podtab:hover{color:var(--txt);background:var(--panel)}
.podtab.active{color:var(--terra);border-bottom-color:var(--terra);background:var(--panel)}

/* ---------- raspored ---------- */
main{max-width:1340px;margin:0 auto;padding:20px 26px 60px}
.grid{display:grid;gap:16px;margin-bottom:16px;align-items:start}
.grid-1-1{grid-template-columns:1fr 1fr}
.grid-2-1{grid-template-columns:1.6fr 1fr}
@media(max-width:980px){.grid-1-1,.grid-2-1{grid-template-columns:1fr}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:16px;min-width:0;box-shadow:var(--shadow);
}
.grid .card{margin-bottom:0}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-h h3{font-size:14.5px}
.hint{color:var(--dim);font-size:11.5px;text-align:right}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
/* uža traka: tri-četiri broja koja se tiču baš te grupe */
.kpis-uze{grid-template-columns:repeat(4,1fr);max-width:920px}
@media(max-width:900px){.kpis-uze{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.kpi.good::before{background:var(--olive)}
.kpi.bad::before{background:var(--brick)}
.kpi.warn::before{background:var(--amber)}
.kpi.info::before{background:var(--teal)}
.kpi .lab{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px}
.kpi .val{font-size:22px;font-weight:600;margin:5px 0 2px;letter-spacing:-.3px}
.kpi .val small{font-size:12px;color:var(--muted);font-weight:400;margin-left:3px}
.kpi .cmp{font-size:12px;color:var(--muted)}
.up{color:var(--olive)} .down{color:var(--brick)} .amber{color:var(--amber)}

/* ---------- tabele ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;color:var(--dim);font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.8px;
  padding:0 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.name{white-space:normal;min-width:220px;max-width:420px}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--panel2)}
.badge{
  display:inline-block;padding:1.5px 8px;border-radius:20px;font-size:11px;
  background:var(--panel2);color:var(--muted)
}
.badge.red{background:#f6dcd6;color:#9c3222}
.badge.amber{background:#f7e8c9;color:#8a6110}
.badge.green{background:#dfeed1;color:#41631f}
:root[data-theme="dark"] .badge.red{background:#402019;color:#f0a496}
:root[data-theme="dark"] .badge.amber{background:#3c2f16;color:#e8c47a}
:root[data-theme="dark"] .badge.green{background:#24331a;color:#a8ce85}
.mini{color:var(--dim);font-size:11.5px}

/* ---------- grafikoni ---------- */
svg{display:block;width:100%;height:auto;overflow:visible}
.ax{fill:var(--dim);font-size:11px}
.gl{stroke:var(--line2);stroke-width:1}
.lbl{fill:var(--muted);font-size:12px}
.vlbl{fill:var(--txt);font-size:12px;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
svg .hit:hover rect.bg{fill:var(--txt);fill-opacity:.04}

/* ---------- ucitavanje / greska ---------- */
.loader{display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--muted);padding:90px 20px}
.spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--terra);
  border-radius:50%;animation:s .8s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.err{margin:40px auto;max-width:700px;background:#fbe9e5;border:1px solid #e0b3a8;
  color:#8f2d1c;padding:16px 18px;border-radius:var(--r);font-size:13px;white-space:pre-wrap}
:root[data-theme="dark"] .err{background:#3a201a;border-color:#5e3428;color:#f0a496}

/* ---------- modal ---------- */
/* overscroll-behavior:contain zaustavlja skrol na ivici prozora. Bez njega
   se, kad se dodje do dna spiska, nastavlja skrolovanje stranice ISPOD
   modala — na telefonu se to desava stalno, jer prst ne staje. */
.modal{position:fixed;inset:0;background:rgba(45,35,25,.55);display:flex;
  align-items:center;justify-content:center;padding:24px;z-index:50;
  overscroll-behavior:contain}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(920px,100%);max-height:82vh;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:18px 20px;
  box-shadow:0 20px 50px rgba(50,35,20,.25)}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.modal-h h3{font-size:15px}

/* ---------- forma za zadatak ---------- */
.forma{display:flex;flex-direction:column;gap:14px}
.forma label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);flex:1}
.forma input,.forma textarea,.forma select{
  background:var(--bg);color:var(--txt);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px;width:100%;
}
.forma input:focus,.forma textarea:focus,.forma select:focus{
  outline:2px solid var(--terra);outline-offset:1px;border-color:transparent
}
.forma textarea{resize:vertical}
.forma .red{display:flex;gap:14px}
@media(max-width:520px){.forma .red{flex-direction:column}}
.forma-dno{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
.btn-glavni{background:var(--terra);border-color:var(--terra);color:#fff;font-weight:600}
.btn-glavni:hover{filter:brightness(1.08);background:var(--terra);border-color:var(--terra)}
.btn-glavni:disabled{opacity:.55;cursor:default;filter:none}
.btn-mali{
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:3px 9px;font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap
}
.btn-mali:hover{border-color:var(--terra);color:var(--terra)}
.ok{color:var(--olive)}

.foot{color:var(--dim);font-size:11.5px;margin-top:30px;text-align:center}

/* ---------- detalji jednog reda ---------- */
.card-akcije{display:flex;align-items:center;gap:12px}
.detalji{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 18px}
.detalji dt{color:var(--muted);font-size:12px;white-space:nowrap}
.detalji dd{margin:0;font-size:13.5px}
.tekst-redovi{white-space:pre-line}
#dAkcije{justify-content:flex-start;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line2);padding-top:14px}

/* ---------- spisak gotovih ispisa ---------- */
.izv-plocice{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}
.izv-plocica{
  position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;cursor:pointer;font:inherit;color:var(--txt);min-height:74px
}
.izv-plocica:hover{border-color:var(--terra);background:var(--panel2)}
.izv-plocica.aktivna{border-color:var(--terra);box-shadow:inset 3px 0 0 var(--terra)}
.izv-plocica-naziv{font-size:13.5px;font-weight:600;line-height:1.3}
.izv-plocica-opis{font-size:11.5px;color:var(--muted);line-height:1.4}
.izv-znak{
  position:absolute;top:10px;right:10px;font-size:10px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--teal)
}
.izv-nova{border-style:dashed;justify-content:center}
.izv-nova .izv-plocica-naziv{color:var(--terra)}

/* traka iznad rezultata */
.izv-traka{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line2)
}

/* ---------- alat za sastavljanje ispisa ---------- */
.izv-red{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.izv-red .izbor select{max-width:260px}
.izv-mreza{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;align-items:start}
@media(max-width:1080px){.izv-mreza{grid-template-columns:1fr}}
.izv-blok h4{
  margin:0 0 10px;font-size:11px;font-weight:700;color:var(--dim);
  text-transform:uppercase;letter-spacing:.8px
}
.izv-oznaka{color:var(--dim);font-size:11px;margin-bottom:6px}
.izv-dvekolone{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.izv-dvekolone{grid-template-columns:1fr}}
.izv-trazi{
  width:100%;margin-bottom:6px;background:var(--bg);color:var(--txt);
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:inherit;font-size:12.5px
}
.izv-trazi:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:transparent}
.izv-lista{
  list-style:none;margin:0;padding:4px;max-height:220px;overflow:auto;
  border:1px solid var(--line);border-radius:9px;background:var(--bg)
}
.izv-lista.izv-niska{max-height:150px}
.izv-lista li{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 7px;border-radius:6px;font-size:12.5px;cursor:pointer
}
.izv-lista li:hover{background:var(--panel2)}
.izv-lista li.prazno{color:var(--dim);cursor:default;font-size:11.5px}
.izv-lista li.prazno:hover{background:none}
.izv-lista label{display:flex;align-items:center;gap:7px;cursor:pointer;width:100%}
.izv-strelice{display:flex;gap:2px;flex:0 0 auto}
.izv-strelice b{
  display:inline-block;width:20px;text-align:center;border-radius:5px;
  color:var(--dim);font-weight:400
}
.izv-strelice b:hover{background:var(--line2);color:var(--terra)}
.izv-lista li[data-dodaj] b{color:var(--dim)}
.izv-lista li[data-dodaj]:hover b{color:var(--terra)}

.izv-filteri{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.izv-filter{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 9px
}
.izv-filter-naziv{font-size:12px;color:var(--muted);min-width:96px}
.izv-filter input,.izv-filter select{
  background:var(--panel);color:var(--txt);border:1px solid var(--line);
  border-radius:7px;padding:5px 8px;font:inherit;font-size:12.5px;min-width:0;flex:1
}
.izv-filter input[type=date]{min-width:132px;max-width:160px}
.izv-do{color:var(--dim);font-size:11.5px}
.izv-lista-izbor{min-height:60px}
.izv-dodaj{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;font:inherit;font-size:12.5px;width:100%;cursor:pointer
}
.izv-podesavanja{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.izv-podesavanja label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.izv-podesavanja select,.izv-podesavanja input{
  background:var(--bg);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;font:inherit;font-size:12.5px;max-width:170px
}
.izv-dugmad{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  border-top:1px solid var(--line2);padding-top:14px}

/* zaglavlje ispisa - na ekranu diskretno, na papiru je ono sto se vidi */
.ispis-zaglavlje{margin-bottom:14px}
.ispis-firma{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}
.ispis-zaglavlje h2{font-size:16px;font-weight:600;margin:3px 0 5px}
.ispis-uslovi{font-size:12px;color:var(--muted)}
.ispis-meta{font-size:11px;color:var(--dim);margin-top:3px}
.ispis-podnozje{color:var(--dim);font-size:11.5px;margin-top:12px}
#tblIzvestaj tfoot td{
  border-top:1.5px solid var(--line);font-weight:600;padding-top:9px;
  background:var(--panel2)
}
/* ---------- grid: zaglavlje kolone je i upravljanje ---------- */
th.izv-th{cursor:pointer;user-select:none;position:relative;padding-right:46px}
th.izv-th:hover{color:var(--terra)}
th.izv-th.izv-meta{box-shadow:inset 2px 0 0 var(--terra)}
th.izv-th .izv-strelica{color:var(--terra);font-size:9px}
th.izv-th .izv-alatke{
  position:absolute;top:-3px;right:0;opacity:0;display:flex;gap:1px;
  background:var(--panel);border-radius:5px
}
th.izv-th:hover .izv-alatke{opacity:1}
th.izv-th .izv-alatke b{
  font-weight:400;color:var(--dim);font-size:10px;padding:2px 4px;
  border-radius:4px;cursor:pointer
}
th.izv-th .izv-alatke b:hover{background:var(--panel2);color:var(--terra)}
th.izv-th .izv-alatke b[data-skloni-kol]:hover{color:var(--brick)}

/* ivica za širinu kolone */
.izv-ivica{
  position:absolute;top:0;right:-6px;bottom:-4px;width:12px;cursor:col-resize;z-index:3
}
.izv-ivica:hover{background:linear-gradient(to right,transparent 5px,var(--terra) 5px,var(--terra) 7px,transparent 7px)}

/* klizač iznad tabele (blizanac onog na dnu) */
.izv-skroler{
  overflow-x:auto;overflow-y:hidden;margin-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--dim) var(--panel2)
}
.izv-skroler > div{height:1px}
.izv-skroler::-webkit-scrollbar{height:10px}
.izv-skroler::-webkit-scrollbar-track{background:var(--panel2);border-radius:6px}
.izv-skroler::-webkit-scrollbar-thumb{background:var(--dim);border-radius:6px}
.izv-skroler::-webkit-scrollbar-thumb:hover{background:var(--terra)}

/* kad korisnik zada širine, tabela ih poštuje doslovno */
#tblIzvestaj.izv-fiksne{table-layout:fixed}
#tblIzvestaj.izv-fiksne td{overflow:hidden;text-overflow:ellipsis}
#tblIzvestaj.izv-fiksne th{overflow:hidden}

/* birač kolona u traci */
.izv-kolone-birac{position:relative}
.izv-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:270px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 30px rgba(50,35,20,.18);padding:10px
}
.izv-panel-lista{max-height:280px;overflow:auto;margin-top:6px}
.izv-panel-red{
  display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:7px;
  font-size:12.5px;cursor:pointer
}
.izv-panel-red:hover{background:var(--panel2)}
.izv-panel-red i{margin-left:auto;font-style:normal;font-size:9.5px;color:var(--dim)}
#izvPorediPanel{width:300px}
#izvPorediPanel .izv-panel-red{align-items:flex-start}
#izvPorediPanel small{font-size:11px}

/* poređenje dva perioda: traka sa ukupnim, putanja, razlaganje reda */
.por-traka{
  margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);display:flex;flex-direction:column;gap:6px;font-size:13px
}
.por-periodi{font-weight:600}
.por-mere{display:flex;flex-wrap:wrap;gap:6px 18px}
.por-mera{white-space:nowrap}
.por-mera b{font-weight:600;margin-right:4px}
.por-put{font-size:12.5px;color:var(--muted)}
.por-korak{
  background:none;border:0;padding:0;font:inherit;color:var(--terra);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px
}
.por-razlozi{
  margin:0 0 10px;padding:8px 10px;border:1px dashed var(--terra);border-radius:10px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center
}
#tblIzvestaj tr.izv-razlozi{cursor:pointer}
#tblIzvestaj tr.izv-razlozi:hover td{background:var(--panel2)}
/* na telefonu se A i B sklanjaju — razlika i % su ono što se čita */
@media(max-width:640px){
  #tblIzvestaj .por-ab{display:none}
  /* naziv se lomi u više redova, da razlika stane na ekran bez klizanja */
  #tblIzvestaj.izv-por td:not(.num){white-space:normal;min-width:110px;max-width:150px}
  #tblIzvestaj.izv-por th{white-space:normal;min-width:0;vertical-align:bottom}
  #tblIzvestaj.izv-por td{font-size:12.5px}
  .por-mera{white-space:normal}
}

pre.sql{
  margin:0;padding:14px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;font:12.5px/1.55 Consolas,"Courier New",monospace;
  white-space:pre-wrap;word-break:break-word;color:var(--txt)
}


/* ===========================================================================
   Kontrola PDV-a
   Celo pravilo izgleda: razlika mora da se vidi bez čitanja. Zato vaga
   (dva obračuna jedan naspram drugog), pa jedan veliki broj, pa tek onda
   tabele. Očekivana odstupanja su siva i sklopljena da ne prave buku.
   =========================================================================== */
.pdv-traka{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}

/* --- vaga --- */
.pdv-vaga{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;
  margin-bottom:16px
}
.pdv-tas{
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;text-align:center
}
.pdv-tas.star{border-color:var(--brick);background:color-mix(in srgb,var(--brick) 8%,var(--panel2))}
.pdv-tas-ime{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pdv-tas-broj{font-size:30px;font-weight:650;line-height:1.15;color:var(--txt)}
.pdv-tas-sub{font-size:12px;color:var(--dim);margin-top:-2px}
.pdv-tas-datum{font-size:12px;color:var(--muted);margin-top:6px}
.pdv-znak{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  background:var(--brick);color:#fff;font-size:11px;font-weight:600
}
.pdv-razlika{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-width:96px;padding:0 10px
}
.pdv-razlika-broj{font-size:26px;font-weight:650;color:var(--brick)}
.pdv-razlika-lab{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.pdv-razlika.nula .pdv-razlika-broj{color:var(--olive)}
.pdv-upozorenje{
  grid-column:1 / -1;padding:10px 14px;border-radius:10px;
  background:color-mix(in srgb,var(--brick) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brick) 35%,transparent);
  font-size:13px;color:var(--txt)
}

/* --- obrazac naspram svojih stavki (ono sto se predaje naspram dokumenata) --- */
.pdv-obrazac{
  grid-column:1 / -1;padding:10px 14px;border-radius:10px;font-size:13px;
  background:var(--panel2);border:1px solid var(--line)
}
.pdv-obrazac.pazi{
  background:color-mix(in srgb,var(--amber) 9%,transparent);
  border-color:color-mix(in srgb,var(--amber) 40%,transparent)
}
.pdv-obrazac-naslov{margin-bottom:8px;color:var(--txt)}
.pdv-obrazac-neto{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;color:var(--muted)}
.pdv-obrazac-neto b{color:var(--txt);font-variant-numeric:tabular-nums}
.pdv-obrazac-lab{color:var(--txt);font-weight:600}
.pdv-obrazac .table-wrap{margin-top:8px}
.pdv-dobro{color:var(--olive)}

/* --- glavni nalaz --- */
.pdv-nalaz-lose,.pdv-nalaz-ok{padding:16px 18px;border-radius:var(--r);text-align:center}
.pdv-nalaz-lose{background:color-mix(in srgb,var(--brick) 12%,transparent);
                border:1px solid color-mix(in srgb,var(--brick) 40%,transparent)}
.pdv-nalaz-ok{background:color-mix(in srgb,var(--olive) 12%,transparent);
              border:1px solid color-mix(in srgb,var(--olive) 40%,transparent)}
.pdv-nalaz-broj{font-size:34px;font-weight:650;letter-spacing:-.01em}
.pdv-nalaz-lose .pdv-nalaz-broj{color:var(--brick)}
.pdv-nalaz-ok   .pdv-nalaz-broj{color:var(--olive)}
.pdv-nalaz-sub{font-size:13px;color:var(--muted);margin-top:2px}

/* --- grupe po razlogu --- */
.pdv-grupa{border-left:4px solid var(--line)}
.pdv-grupa.lose{border-left-color:var(--brick)}
.pdv-grupa.pazi{border-left-color:var(--amber)}
.pdv-grupa.sivo{border-left-color:var(--line);opacity:.82}
.pdv-grupa-h{cursor:pointer;user-select:none}
.pdv-grupa-h h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pdv-strelica{display:inline-block;margin-left:8px;color:var(--dim)}
.pdv-tag{
  display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;
  font-weight:650;text-transform:uppercase;letter-spacing:.04em;color:#fff
}
.pdv-tag.lose{background:var(--brick)}
.pdv-tag.pazi{background:var(--amber)}
.pdv-tag.sivo{background:var(--dim)}
.pdv-popravka{
  margin:0 0 12px;padding:9px 13px;border-radius:9px;
  background:var(--panel2);font-size:13px;color:var(--txt)
}

/* --- matrica: gde dokument postoji, a gde ga nema --- */
.pdv-mat{display:inline-flex;gap:3px}
.pdv-c{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:5px;font-size:12px;font-weight:700
}
.pdv-c.ima {background:color-mix(in srgb,var(--olive) 22%,transparent);color:var(--olive)}
.pdv-c.nema{background:color-mix(in srgb,var(--brick) 22%,transparent);color:var(--brick)}
.pdv-tabela td,.pdv-tabela th{white-space:nowrap}
.pdv-tabela .mono{font:12.5px/1.4 Consolas,"Courier New",monospace}
.pdv-sivo{color:var(--dim)}
.pdv-lose{color:var(--brick)}

@media (max-width:760px){
  .pdv-vaga{grid-template-columns:1fr}
  .pdv-razlika{flex-direction:row;gap:8px;min-width:0}
}
.pdv-grupa.info{border-left-color:var(--teal)}
.pdv-tag.info{background:var(--teal)}
.pdv-nalaz-info{
  padding:16px 18px;border-radius:var(--r);text-align:center;
  background:color-mix(in srgb,var(--teal) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 40%,transparent)
}
.pdv-nalaz-info .pdv-nalaz-broj{font-size:24px;color:var(--teal)}
.pdv-broj{font-size:11.5px;font-weight:400;margin-top:1px}
.pdv-zbir td{
  border-top:2px solid var(--line);font-weight:650;background:var(--panel2)
}
/* duga imena firmi razvlace tabelu preko ekrana - skracuje se, ceo naziv je u tooltipu */
.pdv-tabela td.pdv-partner{
  max-width:270px;overflow:hidden;text-overflow:ellipsis
}
.pdv-tabela .num{font-variant-numeric:tabular-nums}

/* ---- skener svih perioda ---------------------------------------------
   Ulazni ekran kontrole: koji meseci uopšte ne štimaju i šta se ponavlja.
   Tek onda se ide u pojedinačan period.                                  */
.pdv-skener{margin-bottom:20px}
.pdv-skener-zbir{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:16px 18px;border-radius:var(--r);margin-bottom:14px;
  background:color-mix(in srgb,var(--brick) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brick) 32%,transparent)
}
.pdv-skener-zbir.cist{
  background:color-mix(in srgb,var(--olive) 10%,transparent);
  border-color:color-mix(in srgb,var(--olive) 32%,transparent)
}
.pdv-skener-broj{font-size:26px;font-weight:650;letter-spacing:-.02em;color:var(--brick)}
.pdv-skener-zbir.cist .pdv-skener-broj{color:var(--olive)}
.pdv-skener-tekst{font-size:13.5px;color:var(--muted)}

.pdv-ponavlja{display:grid;gap:8px;margin-bottom:16px}
.pdv-ponavlja-red{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:10px;background:var(--panel2);
  border-left:3px solid var(--line)
}
.pdv-ponavlja-red.lose{border-left-color:var(--brick)}
.pdv-ponavlja-red.pazi{border-left-color:var(--amber)}
.pdv-ponavlja-koliko{
  font-weight:700;font-size:13px;padding:3px 10px;border-radius:99px;
  background:var(--brick);color:#fff;white-space:nowrap
}
.pdv-ponavlja-red.pazi .pdv-ponavlja-koliko{background:var(--amber)}
.pdv-ponavlja-tekst{flex:1;min-width:200px;font-size:14px}
.pdv-ponavlja-tekst small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.pdv-ponavlja-iznos{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}

.pdv-meseci{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.pdv-mesec{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 9px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;min-width:74px;
  font-size:11.5px;transition:transform .15s,border-color .2s,box-shadow .2s
}
.pdv-mesec:hover{transform:translateY(-2px);border-color:var(--terra);box-shadow:var(--shadow)}
.pdv-mesec.aktivan{border-color:var(--terra);box-shadow:0 0 0 2px color-mix(in srgb,var(--terra) 25%,transparent)}
.pdv-mesec-ime{font-weight:600;font-variant-numeric:tabular-nums}
.pdv-mesec-iznos{font-size:11px;font-variant-numeric:tabular-nums}
.pdv-mesec.lose .pdv-mesec-iznos{color:var(--brick);font-weight:600}
.pdv-mesec.cist{opacity:.5}
.pdv-mesec.cist .pdv-mesec-iznos{color:var(--olive)}
.pdv-mesec-tacka{width:100%;height:3px;border-radius:2px;background:var(--line)}
.pdv-mesec.lose .pdv-mesec-tacka{background:var(--brick)}
.pdv-mesec.cist .pdv-mesec-tacka{background:var(--olive)}
.pdv-mesec.info .pdv-mesec-tacka{background:var(--teal)}
.pdv-mesec.pazi .pdv-mesec-tacka{background:var(--amber)}
.pdv-mesec.pazi .pdv-mesec-iznos{color:var(--amber);font-weight:600}

/* ===========================================================================
   MENADZERSKI DELOVI (analitika.js)
   =========================================================================== */

/* ---------- nalazi: sta trazi potez ---------- */
.nalazi-zbir{grid-column:1/-1;font-size:12.5px;color:var(--muted);margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* min(300px,100%) umesto 300px: minmax sa fiksnim minimumom NE ide ispod
   njega, pa je na ekranu od 254 px kolona ostajala 300 i kartice su
   izlazile van. Ovako se minimum sam spusti na sirinu koja postoji. */
.nalazi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.nalaz{
  border:1px solid var(--line);border-left-width:3px;border-radius:10px;
  padding:9px 12px;background:var(--panel2);
  transition:transform .15s,border-color .2s
}
.nalaz.clickable{cursor:pointer}
.nalaz.clickable:hover{transform:translateY(-2px);border-color:var(--terra)}
.nalaz.bad{border-left-color:var(--brick)}
.nalaz.warn{border-left-color:var(--amber)}
.nalaz.good{border-left-color:var(--olive)}
.nalaz-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.nalaz-t b{font-weight:600;font-size:13.5px}
.nalaz-iznos{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;font-size:13px;text-align:right}
/* ispod iznosa piše ŠTA je taj broj — inače isto mesto znači čas vrednost
   dokumenta, čas koliko je prodaja pala */
.nalaz-iznos small{display:block;font-weight:400;font-size:10px;color:var(--dim);letter-spacing:.2px}
.nalaz.bad .nalaz-iznos{color:var(--brick)}
.nalaz.good .nalaz-iznos{color:var(--olive)}

/* ---------- poredjenje sa lanjskom ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;align-items:start}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.uporedno{margin-bottom:0}
.up-val{font-size:26px;font-weight:600;letter-spacing:-.4px;margin:2px 0 4px}
.up-dno{font-size:12.5px;color:var(--muted)}

/* ---------- koeficijenti ---------- */
.koef{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.koef{grid-template-columns:repeat(2,1fr)}}
.koef-p{border-left:3px solid var(--line);padding-left:12px}
.koef-p .lab{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px}
.koef-p .val{font-size:21px;font-weight:600;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.koef-p .cmp{font-size:12px;margin-top:3px}

/* ---------- koncentracija ---------- */
.koncBrojevi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media(max-width:860px){.koncBrojevi{grid-template-columns:repeat(2,1fr)}}
.konc-b .lab{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px}
.konc-b .val{font-size:20px;font-weight:600;margin:3px 0 1px;font-variant-numeric:tabular-nums}

/* ---------- alatke u zaglavlju kartice ---------- */
.alatke{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alatke .izv-trazi{width:220px}

/* ---------- karton partnera ---------- */
.karton-box{width:min(1120px,100%);max-height:90vh}
.karton .card{background:var(--panel2)}
.karton-kpis{grid-template-columns:repeat(4,1fr);margin-bottom:16px}
@media(max-width:820px){.karton-kpis{grid-template-columns:repeat(2,1fr)}}
.karton .detalji{margin-bottom:0}
.karton-alarm{
  border:1px solid var(--brick);border-left-width:3px;border-radius:10px;
  padding:10px 13px;margin-bottom:16px;color:var(--brick);
  background:color-mix(in srgb,var(--brick) 8%,transparent);font-size:13px
}

/* ---------- pitanje svojim rečima (ai.js) ---------- */
.pitanje{margin-bottom:18px}
.pitanje-red{display:flex;gap:10px;align-items:stretch}
.pitanje-red input{
  flex:1;background:var(--bg);color:var(--txt);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font:inherit;font-size:15px
}
.pitanje-red input:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:transparent}
.pitanje-red .btn{white-space:nowrap}
.pitanje-primeri{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}

/* šta je model razumeo — stoji iznad rezultata */
.razumeo{
  border:1px solid var(--line);border-left:3px solid var(--terra);
  border-radius:10px;padding:10px 13px;margin-bottom:14px;background:var(--panel2)
}
.razumeo-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px}
.razumeo-t b{font-size:14px}
@media print{.pitanje,.razumeo{display:none !important}}

/* ---------- status kod NBS-a (blokada računa) ---------- */
.nbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border:1px solid var(--line);border-left-width:3px;border-radius:10px;
  padding:9px 13px;margin-bottom:16px;font-size:13.5px;background:var(--panel2)
}
.nbs-oznaka{
  font-size:10px;font-weight:700;letter-spacing:.8px;
  padding:2px 6px;border-radius:5px;background:var(--line);color:var(--muted)
}
.nbs-lose{border-left-color:var(--brick);color:var(--brick)}
.nbs-lose .nbs-oznaka{background:var(--brick);color:#fff}
.nbs-pazi{border-left-color:var(--amber)}
.nbs-pazi .nbs-oznaka{background:var(--amber);color:#3a2c08}
.nbs-dobro{border-left-color:var(--olive)}
.nbs-dobro .nbs-oznaka{background:var(--olive);color:#fff}
.nbs-sivo{border-left-color:var(--line)}
.nbs-cekam{border-left-color:var(--line);color:var(--dim);font-size:12px}

/* ---------- naziv/adresa naspram APR-a ---------- */
.apr-blok{display:block}
.apr-glava{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.apr-red{
  display:grid;grid-template-columns:70px 1fr 18px 1fr;gap:8px;align-items:baseline;
  padding:5px 0;border-top:1px solid var(--line2);font-size:13px
}
.apr-sta{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.apr-nase{color:var(--muted);text-decoration:line-through}
.apr-strelica{color:var(--dim);text-align:center}
.apr-zvanicno{font-weight:600}
@media(max-width:700px){
  .apr-red{grid-template-columns:1fr;gap:2px}
  .apr-strelica{display:none}
}

/* ---------- pretraga u zaglavlju ---------- */
.trazilica{position:relative}
.trazilica input{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:9px;padding:7px 12px;font:inherit;font-size:13px;width:260px;
}
.trazilica input::placeholder{color:var(--dim)}
.trazilica input:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:transparent;width:320px}
.trazilica input{transition:width .15s}
@media(max-width:980px){.trazilica input{width:150px}.trazilica input:focus{width:220px}}

.trazi-rez{
  position:absolute;top:calc(100% + 6px);right:0;width:420px;max-width:92vw;
  max-height:min(60vh,520px);overflow-y:auto;z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(50,35,20,.22);padding:6px;
}
.trazi-grupa{
  color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.9px;
  font-weight:700;padding:9px 10px 4px;
}
.trazi-stavka{
  display:block;width:100%;text-align:left;background:none;border:none;
  border-radius:8px;padding:7px 10px;cursor:pointer;font:inherit;color:var(--txt);
}
.trazi-stavka:hover,.trazi-stavka.izabran{background:var(--panel2)}
.trazi-stavka.izabran{box-shadow:inset 2px 0 0 var(--terra)}
.trazi-ime{display:block;font-size:13.5px;line-height:1.35}
.trazi-stavka .mini{display:block;margin-top:1px}
.trazi-prazno{padding:14px 12px;color:var(--dim);font-size:12.5px}
@media print{.trazilica{display:none}}

/* ---------- linkovi ka zvaničnim registrima ---------- */
.nbs-link{
  color:var(--terra);text-decoration:none;font-size:11.5px;white-space:nowrap;
  border-bottom:1px dotted currentColor;
}
.nbs-link:hover{border-bottom-style:solid}
.apr-linkovi{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line2);
}
/* kad nema šta da se prijavi, linkovi stoje sami — tiho */
.apr-samo-linkovi{margin:-8px 0 16px;padding-left:13px}
.apr-samo-linkovi .apr-linkovi{margin-top:0;padding-top:0;border-top:none}

/* ---------- „odakle ovaj broj" ---------- */
.kpi-klik{cursor:pointer;transition:transform .12s,border-color .2s}
.kpi-klik:hover{transform:translateY(-2px);border-color:var(--dim)}
.kpi-klik::after{
  content:"?";position:absolute;top:9px;right:11px;
  width:15px;height:15px;border-radius:50%;
  background:var(--panel2);color:var(--dim);
  font-size:10px;font-weight:700;line-height:15px;text-align:center;
  opacity:0;transition:opacity .15s;
}
.kpi-klik:hover::after{opacity:1}

.od-red{
  display:grid;grid-template-columns:130px 1fr;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line2);font-size:13.5px;
}
.od-oznaka{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px;padding-top:2px}
.od-red code{
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;font-size:12.5px;font-family:Consolas,monospace;
}
.od-napomena{
  margin-top:14px;padding:10px 13px;border-radius:9px;
  border-left:3px solid var(--amber);background:var(--panel2);
  font-size:12.5px;color:var(--muted);
}

/* ---------- „od čega se sastoji" (razlaganje grafikona) ---------- */
.hit.klik{cursor:pointer}
.hit.klik:hover .bg{fill:var(--panel2)}

.od-strana{margin-bottom:20px}
.od-naslov{
  font-size:11px;text-transform:uppercase;letter-spacing:.9px;font-weight:700;
  padding-bottom:7px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.od-naslov.je-prihod{color:var(--olive)}
.od-naslov.je-trosak{color:var(--brick)}

.od-konto{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding:7px 0;align-items:baseline;
}
.od-konto-ime{font-size:13px;line-height:1.35}
.od-konto-ime b{font-variant-numeric:tabular-nums;margin-right:5px}
.od-konto-ime .mini{margin-left:6px}
.od-konto-iznos{
  text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;
}
.od-konto-iznos .mini{display:block;font-weight:400}
.od-traka{
  grid-column:1/-1;height:3px;border-radius:2px;background:var(--line2);overflow:hidden;
}
.od-traka i{display:block;height:100%;border-radius:2px}
.od-traka.je-prihod i{background:var(--olive)}
.od-traka.je-trosak i{background:var(--brick)}

/* red koji vodi dalje (karton partnera ili artikla) */
.od-konto.klik{cursor:pointer;margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:7px}
.od-konto.klik:hover{background:var(--panel2)}

/* „← Nazad" — korak unazad kroz prozore; naslov kaže kuda vodi, pa mora
   da stane u jedan red i da ne gura „Zatvori" sa ekrana */
.btn-nazad{
  max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-right:6px;
}

/* isečak donuta / segment kofe koji otvara „od čega se sastoji" */
svg .klik{cursor:pointer}
svg .klik:hover{opacity:.82}

/* Umesto grafikona koji bi bio prazan — rečenica koja kaže zašto ga nema.
   Prazna mreža sa osom 0–100% ne govori ništa, a zauzima pola ekrana. */
.prazno-objasnjenje{
  padding:22px 18px;font-size:13.5px;line-height:1.55;color:var(--muted);
  background:var(--panel2);border-radius:10px;
}
.prazno-objasnjenje b{color:var(--txt)}

/* Od prihoda do dobiti - recenica je odgovor, grafikon dokaz */
.rez-recenica{margin:2px 0 12px;font-size:15px;line-height:1.5;color:var(--muted)}
.rez-recenica b{color:var(--txt)}
.rez-recenica .up{color:var(--olive)}
.rez-recenica .down{color:var(--brick)}

/* kokpit ceka da se konektor javi (cloud rezim) */
.cekam-konektor{margin-top:10px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.cekam-konektor:before{content:"";width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--terra);border-radius:50%;animation:s .8s linear infinite}

/* ekran „Povežite svoju bazu" — prvi susret klijenta sa proizvodom */
.povezivanje{margin-top:18px;text-align:left;color:var(--txt)}
.povezivanje h2{font-size:15px;margin:0 0 6px}
.povezivanje p{color:var(--muted);font-size:13px;margin:0 0 14px}
.povezivanje ol{margin:0;padding-left:20px}
.povezivanje li{margin-bottom:14px;font-size:13px;line-height:1.5}
.povezivanje .btn{margin-top:7px;display:inline-block}
.kod-veliki{font:600 26px/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;
  margin:12px 0 4px;color:var(--terra)}
.kod-rok{font-size:12px;color:var(--muted)}

/* --- nalog: ko je prijavljen i odjava ----------------------------------- */
.nalog{position:relative}
.nalog-meni{position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  min-width:230px;padding:13px 15px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.nalog-ko{font-weight:600;font-size:13px;word-break:break-all}
.nalog-pretplata{color:var(--muted);font-size:12px;margin:3px 0 11px}
.nalog-meni .btn{width:100%}

/* --- „poveži drugi računar" — sporedna radnja, ne prva ponuda ----------- */
.drugi-konektor{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
/* otvorene stavke: rečenica gore, sklopljeni delovi ispod (pokriveno, poništeno) */
.stavke-recenica{font-size:13.5px;line-height:1.5;margin:4px 0 12px}
.citanje{padding:4px 16px 10px;font-size:13.5px;line-height:1.5}
/* Kako Vidik čita firmu - štikle i dokaz uz svaki tip dokumenta */
.ci-svi{display:block;margin:4px 0 8px}
.ci-tabela td.ci-c{text-align:center;width:64px}
.ci-tabela input[type=checkbox]{width:18px;height:18px;cursor:pointer}
.ci-tabela tr.ci-promena td{background:var(--panel2)}
.ci-tabela tr.ci-promena td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.ci-dugmad{display:flex;gap:8px;flex-wrap:wrap}
/* prozor: glava i dno stoje, skroluje se samo telo */
.ci-box{display:flex;flex-direction:column;overflow:hidden;padding:0;max-height:88vh}
.ci-glava{padding:16px 20px 0;margin:0}
/* kartice kao prekidac - da se vidi da su dugmad (kao tekst nisu delovale
   klikabilno, 14.10.2026) */
.ci-tabovi{display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ci-tab{border:1px solid var(--line2);background:var(--panel2);border-radius:999px;padding:7px 14px;
  color:var(--txt);cursor:pointer;font:inherit;font-size:13.5px;display:flex;align-items:center;gap:6px;
  transition:background .12s,border-color .12s}
.ci-tab:hover{border-color:var(--terra);background:var(--panel)}
.ci-tab.aktivan{background:var(--terra);border-color:var(--terra);color:#fff;font-weight:600}
.ci-tab.aktivan .mini{color:rgba(255,255,255,.85)}
.ci-tab .mini{font-weight:400}
.ci-tab.aktivan .ci-tacka{background:#fff}
.ci-tacka{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.ci-telo{overflow:auto;flex:1;min-height:0;padding:6px 20px 10px;overscroll-behavior:contain}
/* naslovi kolona ostaju na vrhu tela dok se skroluje (table-wrap ne sme da
   bude svoj kontejner za skrol, inace sticky ne radi) */
.ci-telo .table-wrap{overflow:visible}
.ci-tabela thead th{position:sticky;top:-6px;background:var(--panel);z-index:1;box-shadow:0 1px 0 var(--line)}
.ci-dno{margin:0;padding:12px 20px;border-top:1px solid var(--line);background:var(--panel)}
@media(max-width:640px){ .ci-tabela .ci-dokaz{display:none} .ci-dugmad{flex-direction:column} }
.citanje p{margin:6px 0}
.stavke-recenica b{color:var(--txt)}
.stavke-sklop{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.stavke-sklop summary{cursor:pointer;font-size:13px;color:var(--muted)}
.stavke-sklop summary b{color:var(--txt)}
.stavke-sklop p{font-size:12.5px;color:var(--muted);margin:8px 0}
.drugi-konektor summary{cursor:pointer;color:var(--muted);font-size:13px}
.drugi-konektor p{font-size:12.5px;margin:9px 0 0}

/* --- unos kljuca konektora (kljuc pravi konektor, ovde se lepi) --------- */
.povezivanje .nap{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
.povezivanje code{font:500 12px/1 ui-monospace,Consolas,monospace;
  background:var(--panel2);padding:2px 5px;border-radius:4px}
.kljuc-unos{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.kljuc-unos input{font:600 17px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;
  padding:9px 12px;width:14.5em;color:var(--txt);background:var(--panel);
  border:1px solid var(--line);border-radius:8px;text-transform:uppercase}
.kljuc-unos input:focus{outline:none;border-color:var(--terra)}
.kljuc-unos .btn{margin-top:0}
#kljucPoruka{margin-top:9px;font-size:13px;line-height:1.5}
.kljuc-ok{color:var(--olive);font-weight:600}
.kljuc-los{color:var(--brick)}
.kljuc-ceka{color:var(--muted)}
.uputstvo-link{margin-top:14px;font-size:13px;color:var(--muted)}
.uputstvo-link a{color:var(--terra);font-weight:600}

/* =======================================================================
   TELEFON — kokpit se gleda iz automobila, ne samo za stolom
   -----------------------------------------------------------------------
   Mereno 25.09.2026 na sirini 320 px: sadrzaj je bio 655 px sirok, duplo
   preko ekrana. Krivac je bilo zaglavlje: pretraga 150 + izbor baze 180 +
   tri dugmeta, sve u jednom redu koji se ne prelama.

   Dve stvari koje NISU bile problem, da se ne „popravljaju" ponovo:
     - kartice (.tabs, .podtabs) vec imaju `overflow-x:auto`, pa ono sto
       tamo „viri" je skrolabilna traka a ne greska
     - tabele su vec umotane u `.table-wrap` sa svojim skrolom (15 mesta)

   Zamka koja se lako previdi: obe trake kartica su sticky sa zakucanim
   `top` (43 i 104 px), a ti brojevi su zbir visina onoga iznad. Cim se
   zaglavlje prelomi u dva reda, brojevi vise ne vaze i trake se zalepe
   preko sadrzaja. Zato se na telefonu zaglavlje NE lepi — tada `top`
   zavisi samo od traka, bez obzira koliko je zaglavlje visoko. Usput se
   dobija i vertikalni prostor, koga je na telefonu najmanje.
   ======================================================================= */
@media(max-width:620px){

  /* --- zaglavlje: prelama se, i ne lepi se --- */
  .topbar{
    position:static;                 /* vidi objasnjenje iznad */
    flex-wrap:wrap;row-gap:10px;gap:10px;padding:10px 14px
  }
  .topbar h1{display:none}           /* logo nosi identitet, ime ne treba */
  .brand .sub{display:none}          /* naziv baze vec stoji u spisku ispod */
  .topbar-right{flex:1 1 auto;flex-wrap:wrap;gap:8px;justify-content:flex-end}

  /* Pretraga u svoj red, preko cele sirine — na telefonu se kuca palcem. */
  .trazilica{order:9;flex:1 1 100%}
  .trazilica input,
  .trazilica input:focus{width:100%}

  .izbor select{max-width:none;flex:1 1 auto;min-width:0}

  /* --- trake kartica: `top` sada zavisi samo od njih samih --- */
  .tabs{top:0;padding:0 14px}
  .podtabs{top:43px;padding:0 14px}  /* 43 = izmerena visina .tabs */
  .tabs-razmak{display:none}         /* gurao je Zadatke i Ispise van ekrana */

  /* --- sadrzaj --- */
  main{padding:14px 14px 40px}
  .kpis{grid-template-columns:repeat(2,1fr)}

  /* Stavke mreza se po standardu ne skupljaju ispod svog sadrzaja
     (`min-width:auto`), pa jedan dugacak naziv izgura celu mrezu van. */
  .kpis > *, .kpis-uze > *, .grid-1-1 > *, .grid-2-1 > *, .grid-3 > *,
  .koef > *, .karton-kpis > *, .koncBrojevi > *, .izv-mreza > * { min-width:0 }

  /* Nazivi partnera i artikala znaju da budu duzi od ekrana. */
  .card h3, .kpi .lab, .kpi .cmp { overflow-wrap:break-word }
}

/* --- telefon: sve za nijansu sitnije, i vise prostora za sadrzaj -------
   Velicine su pravljene za monitor. Na 320 px ekranu broj od 22 px i
   kartica sa 18 px paddinga pojedu red pre nego sto se ista procita.
   Sitnije slovo ovde nije usteda nego citljivost: stane cela recenica
   umesto polovine.                                                      */
@media(max-width:620px){
  body{font-size:13px}

  /* Kartica: 18 px sa svake strane je 36 px manje za grafikon. */
  .card{padding:12px 12px;margin-bottom:12px;border-radius:10px}
  .card h3{font-size:13.5px}
  main{padding:12px 10px 40px}

  /* KPI: broj i dalje mora da se vidi iz ruke, ali 22 px je bilo previse. */
  .kpi{padding:10px 11px}
  .kpi .val{font-size:18px}
  .kpi .val small{font-size:11px}
  .kpi .lab{font-size:10px;letter-spacing:.4px}
  .kpi .cmp{font-size:11px}
  .kpis{gap:8px}

  /* Nalazi („Traži potez") */
  .nalazi{gap:8px}
  .nalaz{padding:8px 10px}
  .nalaz-t b{font-size:12.5px}
  .nalaz-iznos{font-size:12px}
  .nalaz-iznos small{font-size:9.5px}
  .nalazi-zbir{font-size:11.5px}

  /* Tabele: 13 px x dvanaest kolona nikad nije stalo; sitnije + skrol. */
  table{font-size:12px}
  th,td{padding:6px 8px}
}

/* --- telefon: prozori i zaglavlje --------------------------------------
   Prozor je gubio 48 px na spoljni okvir i jos 40 na svoj padding, pa je
   od 320 px ekrana za tekst ostajalo 230. Uz to `.od-red` deli red na
   130 px za oznaku i ostatak za vrednost — tako je „Razlika izmedju
   prodajne i nabavne vrednosti" izlazila u pet redova po dve reci.
   Na uskom ekranu oznaka ide IZNAD vrednosti, ne pored nje.            */
@media(max-width:620px){
  .modal{padding:8px}
  .modal-box{padding:12px 13px;max-height:92vh;border-radius:12px}
  /* Naslov je delio red sa dugmadima, pa mu je ostajalo 60 px i oznaka
     dokumenta se lomila na „23- / 3200- / 000001". Sada naslov ima svoj
     red, a dugmad stoje ispod njega.                                  */
  .modal-h{gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .modal-h h3{font-size:14px;flex:1 1 100%;overflow-wrap:anywhere}
  .modal-h .card-akcije{flex:1 1 100%;display:flex;gap:8px;justify-content:flex-end}

  /* oznaka iznad vrednosti umesto pored */
  .od-red{grid-template-columns:1fr;gap:3px;padding:8px 0;font-size:13px}
  .od-oznaka{padding-top:0}
  .od-red code{font-size:11.5px;word-break:break-word}
  .od-napomena{font-size:11.5px;padding:9px 11px}

  /* Zaglavlje: bez `min-width:0` flex stavka ne sme ispod svog sadrzaja,
     pa su select sa dugackim nazivom firme i polje pretrage virili van.  */
  .topbar-right,.izbor,.trazilica,.trazilica input,.izbor select{min-width:0}
  .izbor select{font-size:12px}
  .trazilica input{font-size:13px}

  /* Koeficijenti („Koliko dana novac nije nas") — dve kolone na 320 px
     daju 130 px po polju, u sta naziv ne staje.                        */
  /* Jedna kolona, ali svaki koeficijent je RED (naziv levo, broj desno),
     ne blok od cetiri reda — inace kartica zauzme ceo ekran za 4 broja. */
  .koef{grid-template-columns:1fr;gap:0}
  .koef > *{min-width:0}
  .koef-p{display:grid;grid-template-columns:1fr auto;column-gap:12px;
          padding:7px 0 7px 10px;border-bottom:1px solid var(--line)}
  .koef-p:last-child{border-bottom:0}
  .koef-p .lab{grid-column:1;grid-row:1}
  .koef-p .mini{grid-column:1;grid-row:2}
  .koef-p .val{grid-column:2;grid-row:1/span 2;align-self:center;text-align:right;
               font-size:18px;margin:0;white-space:nowrap}
  .koef-p .cmp{grid-column:1/-1;grid-row:3;margin-top:2px}
  .koef-p .cmp-prazno{display:none}
}

/* Dok je prozor otvoren, stranica ispod stoji — vidi posmatraca u app.js. */
body.prozor-otvoren{overflow:hidden}

/* nalaz: šta uraditi stoji u svom redu, ne na kraju sivog pasusa */
.nalaz .potez{display:block;margin-top:6px;color:var(--txt);font-weight:600;font-size:12.5px}
.nalaz.bad .potez{color:var(--brick)}
.nalaz.good .potez{color:var(--olive)}

/* ---------- telefon: znak, ime i dugmad u jednom redu ----------
   Ranije je znak stajao sam u prvom redu, pa su tek ispod išli baza,
   dugmad i pretraga — četiri reda pre prvog broja. Sada je prvi red
   Vidik + dugmad, drugi baza, treći pretraga. `display:contents` pušta
   decu desne strane da se ređaju direktno u zaglavlju.              */
@media(max-width:620px){
  .topbar{align-items:center}
  .brand{flex:1 1 auto;gap:10px;min-width:0}
  .topbar h1.ime-proizvoda{display:block;font-size:19px}
  .logo{width:30px;height:30px}
  .topbar-right{display:contents}
  #tema,#osvezi,#nalog{order:1}
  .izbor{order:8;flex:1 1 100%;display:flex}
  .trazilica{order:9}
  .asof{order:10;flex:1 1 100%;margin-top:-4px}
}

/* ===========================================================================
   Novac / 30 dana (novac.js)
   Rečenica je glavna stvar na ekranu - zato je velika; broj je njen dokaz.
   =========================================================================== */
.n30-naslov{font-size:26px;font-weight:650;letter-spacing:-.4px;line-height:1.2}
.n30-naslov.lose{color:var(--brick)}
.n30-naslov.dobro{color:var(--olive)}
.n30-pod{margin-top:6px;font-size:14px;color:var(--muted);max-width:760px}
.n30-upozorenje{
  margin:12px 0 0;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;
  background:var(--panel2);border-left:3px solid var(--amber);color:var(--txt)
}
.n30-rucno{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px;font-size:13px}
.n30-rucno label{color:var(--muted)}
.n30-rucno input{
  width:170px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--txt);font:inherit;font-variant-numeric:tabular-nums
}
#chartNovac30{margin-top:10px}
.n30-vrste{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.n30-vrsta{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line2);border-radius:9px}
.n30-vrsta-naziv{font-size:12px;color:var(--muted)}
.n30-vrsta b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.n30-poziv{
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;text-align:left;
  padding:9px 10px;margin:0 0 6px;border:1px solid var(--line2);border-radius:9px;
  background:none;color:var(--txt);font:inherit;cursor:pointer
}
.n30-poziv:hover{background:var(--panel2)}
.n30-poziv-ime{font-weight:600}
.n30-poziv b{font-variant-numeric:tabular-nums}
.n30-poziv .mini{grid-column:1 / -1}
#tblNovac30 tr.klik{cursor:pointer}
#tblNovac30 tr.klik:hover td{background:var(--panel2)}
#tblNovac30 td:nth-child(2){white-space:normal}
.n30-kasni{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.n30-kasni-broj{font-size:22px;font-weight:600;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.n30-kasni-lista{list-style:none;margin:0;padding:0}
.n30-kasni-lista li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line2);font-size:13px;cursor:pointer}
.n30-kasni-lista li:hover{color:var(--terra)}
.n30-kasni-lista b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){
  .n30-naslov{font-size:21px}
  .n30-vrste{grid-template-columns:1fr 1fr}
  .n30-kasni{grid-template-columns:1fr}
  .n30-rucno input{width:100%}
}

/* ---------- obećanja kupca (karton + Novac / 30 dana) ---------- */
.ob-kutija{margin-top:12px}
.ob-forma{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.ob-forma input{
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--txt);font:inherit;font-size:13px
}
#kObIznos{width:130px;font-variant-numeric:tabular-nums}
#kObNapomena{flex:1;min-width:180px}
.ob-red{padding:7px 0;border-bottom:1px solid var(--line2);font-size:13px}
.ob-red:last-child{border-bottom:0}
.ob-red b{font-variant-numeric:tabular-nums}
.ob-stanje{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;font-size:11.5px;background:var(--panel2)}
.ob-stanje.up{color:var(--olive)}
.ob-stanje.down{color:var(--brick)}
.ob-stanje.amber{color:var(--amber)}
@media(max-width:640px){ #kObIznos,#kObNapomena{width:100%;flex:auto} }

/* ---------- Gde curi marža (Provera / Marža) ---------- */
.cur-dob{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 8px}
.cur-dob-cip{padding:3px 9px;border-radius:9px;background:var(--panel2);font-size:12.5px}
#tblCurenje td.name{white-space:normal}

/* ---------- meni ☰: podaci na dan, obećanja, tema ---------- */
.nalog-meni .asof{display:block;margin:0 0 10px;font-size:12px}
.nalog-meni .meni-stavka{margin-bottom:6px;text-align:left}
/* ---------- prozor Obećanja kupaca ---------- */
.ob-trazi{width:100%;margin:4px 0 8px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--txt);font:inherit}
.ob-rez{margin-bottom:6px}
.ob-sve{margin-top:10px;border-top:1px solid var(--line2);padding-top:8px;max-height:50vh;overflow:auto}

/* ---------- pomoć: „?" uz naslov, oblačić, traka ekrana (pomoc.js) ---------- */
.pomoc-znak,.pomoc-znak-ekran{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:18px;height:18px;margin-left:7px;padding:0;vertical-align:1px;
  border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--dim);font-family:inherit;font-size:11px;font-weight:600;line-height:1;cursor:pointer;
}
.pomoc-znak:hover,.pomoc-znak[aria-expanded="true"],.pomoc-znak-ekran:hover{
  border-color:var(--terra);color:var(--terra)
}
/* veća meta za prst, bez veće slike */
@media(pointer:coarse){.pomoc-znak,.pomoc-znak-ekran{position:relative}
  .pomoc-znak::after,.pomoc-znak-ekran::after{content:"";position:absolute;inset:-10px}}
.pomoc-ugao{float:right;margin:-4px -6px 0 8px}
.pomoc-ugao .pomoc-znak{margin-left:0}
.izv-traka [data-pomoc]{margin-left:auto;display:inline-flex}

.pomoc-oblak{
  position:fixed;z-index:70;width:min(360px,calc(100vw - 16px));
  max-height:min(70vh,520px);overflow:auto;
  background:var(--panel);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;font-size:13px;line-height:1.45;
  box-shadow:0 10px 30px rgba(40,30,20,.22);
}
.pomoc-glava{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.pomoc-glava b{font-size:14px}
.pomoc-x{border:0;background:none;color:var(--dim);cursor:pointer;font-size:13px;padding:2px 4px}
.pomoc-x:hover{color:var(--terra)}
.pomoc-deo{margin-top:8px}
.pomoc-deo b{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.pomoc-deo p{margin:2px 0 0}
.pomoc-pazi{border-left:3px solid var(--amber);padding-left:9px}
/* na telefonu oblačić ide na dno ekrana, preko cele širine */
@media(max-width:639px){
  .pomoc-oblak{left:8px !important;right:8px;bottom:8px;top:auto !important;width:auto;max-height:60vh}
}

.ekran-opis{
  margin:0 0 16px;padding:9px 14px;border-radius:var(--r);
  background:var(--panel2);border:1px solid var(--line2);font-size:13px;color:var(--muted)
}
.ekran-opis .eo-red{display:flex;align-items:center;gap:6px}
.ekran-opis.otvoren{background:var(--panel);border-color:var(--line);border-left:3px solid var(--terra);
  color:var(--txt);padding:13px 16px;line-height:1.45}
.ekran-opis.otvoren .eo-red{display:block;font-size:14px}
.ekran-opis.otvoren .pomoc-deo{max-width:760px}
.pomoc-opste{margin-top:12px;padding-top:10px;border-top:1px solid var(--line2);
  display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px;color:var(--muted)}
.pomoc-opste > b{flex-basis:100%;color:var(--txt)}
.pomoc-opste span b{color:var(--txt)}
.eo-dno{margin-top:12px}

@media print{.pomoc-znak,.pomoc-znak-ekran,.pomoc-ugao,.ekran-opis,.pomoc-oblak{display:none !important}}

/* ---------- Predlog ili problem / Šta je novo (predlozi.js) ---------- */
.nalog .btn-ikona{position:relative}
.nalog .btn-ikona.ima-novo::after,.meni-tacka{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--terra)}
.nalog .btn-ikona.ima-novo::after{position:absolute;top:4px;right:4px}
.meni-tacka{margin-left:7px;vertical-align:1px}

.pr-vrsta{display:flex;gap:8px;margin-bottom:10px}
.pr-vrsta .btn{flex:1}
.pr-vrsta .btn.aktivna{border-color:var(--terra);color:var(--terra);box-shadow:inset 0 0 0 1px var(--terra)}
.pr-tekst{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--txt);font:inherit;font-size:14px;line-height:1.5;resize:vertical;min-height:110px}
.pr-tekst:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:transparent}
.pr-dno{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 4px}
.pr-moji{margin-top:14px;max-height:45vh;overflow:auto}
.pr-moji-h{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  padding-top:12px;border-top:1px solid var(--line2);margin-bottom:4px}
.pr-lista{list-style:none;margin:0;padding:0}
.pr-lista li{padding:9px 0;border-bottom:1px solid var(--line2)}
.pr-red{display:flex;justify-content:space-between;gap:10px}
.pr-red b{font-weight:500;font-size:12.5px;white-space:nowrap}
.pr-sta{font-size:13.5px;line-height:1.5;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere}
.pr-odgovor{margin-top:6px;padding:7px 10px;border-left:3px solid var(--terra);background:var(--panel2);
  border-radius:0 6px 6px 0;font-size:13px;line-height:1.5}

.novo-stavka{padding:12px 0;border-bottom:1px solid var(--line2)}
.novo-stavka:first-child{padding-top:0}
.novo-stavka b{display:block;font-size:14.5px;margin:2px 0 4px}
.novo-stavka .btn-mali{margin-top:8px}
.novo-sveze b::after{content:"novo";margin-left:8px;padding:1px 6px;border-radius:6px;font-size:10.5px;
  font-weight:600;vertical-align:2px;background:var(--terra);color:#fff}
.novo-glava{display:flex;gap:10px;align-items:center}
.novo-vas{font-size:11.5px;font-weight:600;color:var(--terra)}
.novo-tekst{font-size:13.5px;line-height:1.55;color:var(--txt)}
.novo-dno{margin-top:14px}
.novo-dno a{color:var(--terra)}
@media(max-width:640px){ .pr-dno{flex-direction:column-reverse;align-items:stretch} .pr-dno .btn{width:100%} }

/* ---------- Više firmi zajedno (grupa.js) ---------- */
.gr-recenica p{margin:6px 0 0;font-size:17px;line-height:1.55}
.gr-imena{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.gr-nalaz{color:var(--brick)}
#grKpi{margin:14px 0}
.gr-tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.gr-tabela th{font-size:11.5px;font-weight:600;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.gr-tabela td{padding:9px 8px;border-bottom:1px solid var(--line2);font-variant-numeric:tabular-nums}
.gr-tabela .num{text-align:right;white-space:nowrap}
.gr-tabela tr[data-b]{cursor:pointer}
.gr-tabela tr[data-b]:hover td{background:var(--panel2)}
.gr-tabela tr[data-b]:hover td.name{color:var(--terra)}
.gr-zbir td{color:var(--muted);border-bottom:0}
.gr-zbir td.name{font-style:italic}
.gr-glavni td{color:var(--txt);font-weight:700;border-top:2px solid var(--line)}
.gr-glavni td.name{font-style:normal}
.gr-oznaka{color:var(--terra);font-weight:700;margin-left:4px}
.gr-medju{list-style:none;margin:0;padding:0}
.gr-medju li{padding:10px 0 10px 12px;border-bottom:1px solid var(--line2);border-left:3px solid var(--olive);font-size:14px;line-height:1.5}
.gr-medju li.nesl{border-left-color:var(--brick)}
.gr-medju li .mini{margin-top:3px}
.gr-napomena{margin-top:10px;line-height:1.5}
.gr-upoz{font-size:13px;color:var(--amber);line-height:1.6}
.gr-uvod{line-height:1.5;margin:0 0 10px}
.gr-spisak{max-height:48vh;overflow:auto;border:1px solid var(--line2);border-radius:8px}
.gr-stavka{display:flex;gap:10px;align-items:flex-start;padding:8px 11px;border-bottom:1px solid var(--line2);cursor:pointer;font-size:13.5px}
.gr-stavka:last-child{border-bottom:0}
.gr-stavka.izabrana{background:var(--panel2)}
.gr-stavka input{margin-top:3px;accent-color:var(--terra)}
.gr-stavka .mini{display:block;margin-top:1px}
/* telefon: tabela firmi postaje kartice - osam kolona ne staje u 390 px */
@media(max-width:640px){
  .gr-tabela thead{display:none}
  .gr-tabela,.gr-tabela tbody,.gr-tabela tr,.gr-tabela td{display:block;width:100%}
  .gr-tabela tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .gr-tabela td{display:flex;justify-content:space-between;padding:3px 0;border:0}
  .gr-tabela td.name{font-weight:700;font-size:14.5px;margin-bottom:2px}
  .gr-tabela td[data-l]:not([data-l=""])::before{content:attr(data-l);color:var(--muted);font-size:12px}
  .gr-glavni td{border-top:0}
  .gr-recenica p{font-size:15.5px}
}


/* --- filter skladišta / vrste artikla (filter.js, 01.10.2026) --- */
.filter-dugme{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-dugme.filter-aktivan{border-color:var(--terra);color:var(--terra);font-weight:600}
.filter-traka{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 20px;background:var(--panel2);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}
.filter-traka b{color:var(--txt)}
.filter-telo{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-height:60vh;overflow:auto}
.filter-nasl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.filter-red{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid var(--line2);cursor:pointer}
.filter-ime{flex:1;min-width:0;overflow-wrap:anywhere}
.filter-iznos{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.filter-oznaka{font-style:normal;font-size:11px;color:var(--terra);margin-left:4px}
.filter-poruka{flex:1;color:var(--brick)}
.btn-mali{padding:3px 8px;font-size:12px}
@media(max-width:640px){
  .filter-telo{grid-template-columns:1fr}
  .filter-traka{flex-direction:column;align-items:flex-start;padding:8px 16px}
  .filter-dugme{max-width:100%}
}
.filter-period{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.filter-period select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;font:inherit}

/* ===========================================================================
   „računam…" koji radi (app.js: oznaciCekanje) - tačkice se smenjuju, tekst
   blago pulsira. Bez toga natpis koji stoji pola minuta izgleda kao da je
   stalo.
   =========================================================================== */
.ceka{animation:ceka-puls 1.6s ease-in-out infinite}
.ceka::after{
  content:'...';display:inline-block;overflow:hidden;vertical-align:bottom;
  width:0;animation:ceka-tacke 1.4s steps(4,end) infinite
}
@keyframes ceka-tacke{to{width:1.25em}}
@keyframes ceka-puls{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){
  .ceka,.ceka::after{animation:none}
  .ceka::after{width:auto}
}

/* ---------- telefon: tabele, objasnjenja i „Kako Vidik cita firmu" (15.10.2026) ----------
   Na zahtev korisnika: tabele i okviri sa objasnjenjem su bili za nijansu
   preveliki, a prozor „Kako Vidik cita firmu" pretrpan dugmadima — Zatvori
   u svom redu, kartice u dva reda, dva dugmeta preko cele sirine.       */
.ci-tel{display:none}
@media(max-width:620px){
  table{font-size:12.5px}
  td{padding:7px 8px}
  th{padding:0 8px 6px}
  .prazno-objasnjenje{padding:12px 13px;font-size:12.5px;line-height:1.5}

  .modal-box.ci-box{padding:0}
  .ci-glava{padding:12px 14px 0;flex-wrap:nowrap;align-items:center}
  .ci-glava h3{flex:1 1 auto}
  .ci-glava > div:first-child{flex:1 1 auto;min-width:0}
  .ci-glava .card-akcije{flex:0 0 auto}
  .ci-tabovi{flex-wrap:nowrap;gap:6px;padding:10px 14px}
  .ci-tab{padding:6px 12px;font-size:12.5px;white-space:nowrap}
  .ci-tab .mini{display:none}
  .ci-telo{padding:4px 14px 8px}
  .citanje{padding:2px 0 8px;font-size:12.5px}
  .ci-tabela td.ci-c{width:40px;padding-left:2px;padding-right:2px}
  .ci-tabela th{padding-left:4px;padding-right:4px}
  .ci-tel{display:block;margin-top:3px;white-space:normal}
  .ci-tabela td.name{white-space:normal}

  .pr-dno.ci-dno{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px}
  .ci-dno #ciPoruka:empty{display:none}
  .ci-dno #ciPoruka{flex:1 1 100%}
  .ci-dno .ci-dugmad{flex-direction:row;flex:1 1 100%;justify-content:space-between;align-items:center}
  .ci-dno .btn{width:auto}
  /* sporedna radnja kao veza, ne kao jos jedno dugme */
  #ciVrati{background:none;border:0;padding:6px 0;color:var(--muted);text-decoration:underline;font-size:12.5px}
  #ciSacuvaj{padding:8px 22px}
}
@media(max-width:620px){
  .ci-tabela th{letter-spacing:.3px;font-size:10px}
  .ci-tabela .badge{white-space:normal;border-radius:6px}
}

/* ---------- telefon, drugi krug (15.10.2026) ---------- */
@media(max-width:620px){
  /* Glavna traka: pet grupa mora da stane, inace se „Provera" ne vidi.
     Brojac ostaje, samo sitniji.                                       */
  .tab{padding:12px 9px;font-size:13px}
  .tab .cnt{margin-left:4px;padding:0 5px;font-size:10px}
  .podtab{padding:8px 10px}

  /* Opis kartice ide ISPOD naslova, preko cele sirine — pored naslova se
     gurao u tri reda od po tri reci.                                    */
  .card-h{flex-wrap:wrap;row-gap:2px;margin-bottom:10px}
  .card-h > .hint{flex:1 1 100%;text-align:left;order:5}

  /* Kupci / Artikli: izbor i pretraga u jednom redu ispod naslova */
  .card-h > .alatke{flex:1 1 100%;display:flex;gap:8px;margin-top:6px}
  .card-h > .alatke .izv-trazi{flex:1 1 auto;min-width:0;width:auto}
  .card-h > .alatke .izbor{flex:0 0 auto}

  /* Ovaj mesec / prosli / godina: red (naziv levo, broj desno), ne tri
     pune kartice za tri broja — isto kao koeficijenti.                 */
  #uporedno{gap:8px}
  .uporedno{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
  .uporedno .card-h{grid-column:1;grid-row:1;margin:0}
  .uporedno .card-h > .hint{order:0}
  .uporedno .up-val{grid-column:2;grid-row:1/span 2;font-size:20px;margin:0;text-align:right;white-space:nowrap}
  .uporedno .up-dno{grid-column:1;grid-row:2;font-size:11.5px}
}
@media(max-width:620px){
  /* PDV meseci: ravna mreza od cetiri, ne cik-cak razlicitih sirina */
  .pdv-meseci{display:grid;grid-template-columns:repeat(4,1fr)}
  .pdv-mesec{min-width:0;padding-left:4px;padding-right:4px}
  .pdv-mesec-iznos{font-size:10px}
}
@media(max-width:620px){
  /* pločice ispisa: visina po sadržaju, ne 74 px za svaku */
  .izv-plocica{min-height:0;padding:9px 12px;gap:3px}
}
@media(max-width:620px){ .kpis.kpis-sporedna{display:none} }