/* IZVODI — stil kao Projekti (varijanta D, ZZ 30.10.2026.) i demo ekrani Z-20261031-0020. */
:root{--bg:#EFECE8;--line:#E3DDD4;--rub:#8F8273;--ink:#1E1B22;--mut:#6B6474;--zz:#8A6A4F;--or:#E0823A;
  --in:#0F7A55;--inb:#E6F3EC;--out:#B3402A;--outb:#FBECE8;--pdv:#5B5F97;--pdvb:#ECEDF7;--wa:#8A6A00;--wab:#FFF5D6;
  --ok:#2E7D4F;--okb:#E6F3EA;--no:#B3261E;--nob:#FBE9E7;--ljub:#7B4FC9;--ljubb:#F3E8F7}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;color:var(--ink);font-size:14.5px;line-height:1.45}
a{color:var(--zz)}
.num,.mono,code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
code{font-size:13px;word-break:break-all}

/* gornji izbornik */
.top{background:#fff;border-bottom:1.5px solid var(--rub)}
.top .in{max-width:1240px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:4px}
.brand{font-weight:700;color:var(--zz);margin-right:14px;white-space:nowrap;padding:14px 0;text-decoration:none;letter-spacing:.02em}
.nav{display:flex;white-space:nowrap;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{display:inline-block;padding:14px 12px;color:var(--mut);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent}
.nav a.on{color:var(--zz);font-weight:600;border-bottom-color:var(--zz)}
.odjava{margin-left:8px}
.odjava button{font:inherit;font-size:13.5px;color:var(--mut);background:none;border:1px solid #D8D2C8;border-radius:8px;height:32px;padding:0 10px;cursor:pointer}

.wrap{max-width:1240px;margin:0 auto;padding:16px 16px 60px}
.wrap.usko{max-width:440px;padding-top:8vh}
.subn{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.subn a,.chips a{font-size:13.5px;padding:5px 13px;border-radius:16px;border:1px solid #D8D2C8;background:#fff;color:var(--mut);text-decoration:none;white-space:nowrap}
.subn a.on,.chips a.on{background:var(--zz);border-color:var(--zz);color:#fff;font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px;align-items:center}
.chips .razmak{flex:1}

.panel{background:#fff;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row .rastegni{flex:1}
h2{font-size:21px;margin:0}
h2 small,h3 small{font-size:14px;color:var(--mut);font-weight:400}
h3{font-size:16px;margin:16px 0 8px}
.mut{color:var(--mut)}
.mali{font-size:12.5px;color:var(--mut)}
p{margin:8px 0}

/* gumbi i polja */
select,.btn,button.btn{font:inherit;font-size:14px;height:36px;padding:0 14px;border-radius:8px;border:1.5px solid var(--rub);background:#fff;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn.pri{background:var(--zz);border-color:var(--zz);color:#fff;font-weight:600}
.btn.mali{height:30px;font-size:13px;padding:0 12px;border-width:1px}
form.u-redu{display:inline}
label{display:block;margin:12px 0;font-size:13.5px;color:var(--mut)}
input[type=text],input[type=password]{display:block;width:100%;margin-top:4px;height:40px;padding:0 12px;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--rub);border-radius:8px}
input:focus,select:focus,button:focus-visible,summary:focus-visible{outline:2px solid var(--or);outline-offset:1px}
.greska{color:var(--no)}
.poruka{border-radius:10px;padding:10px 14px;margin:10px 0;font-size:13.5px}
.poruka.ok{background:var(--okb);color:var(--ok)}.poruka.no{background:var(--nob);color:var(--no)}.poruka.wa{background:var(--wab);color:var(--wa)}

/* okvir za učitavanje */
details.drop{margin-top:12px}
details.drop>summary{list-style:none;display:inline-flex}
details.drop>summary::-webkit-details-marker{display:none}
.dropb{margin-top:12px;border:2px dashed #B9AE9F;border-radius:12px;padding:14px 16px;background:#FBFAF8;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dropb .tx{flex:1;min-width:200px}.dropb b{font-size:15px}.dropb .sm{color:var(--mut);font-size:13px}
.dropb input[type=file]{font:inherit;font-size:13px;max-width:100%}

/* brojevi */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.kpi>div{border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;min-width:0}
.kpi .k{font-size:12.5px;color:var(--mut)}.kpi .v{font-size:21px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}.kpi .s{font-size:12px;color:var(--mut);margin-top:2px}
.v.in,.gin{color:var(--in)}.v.out,.gout{color:var(--out)}.v.pdv{color:var(--pdv)}

/* pilule */
.pill{font-size:12.5px;padding:1px 9px;border-radius:10px;white-space:nowrap;display:inline-block;font-weight:600}
.p-ok{background:var(--okb);color:var(--ok)}.p-no{background:var(--nob);color:var(--no)}.p-wa{background:var(--wab);color:var(--wa)}
.p-in{background:var(--ljubb);color:var(--ljub)}.p-gr{background:#F1EEEA;color:var(--mut)}

/* mjeseci kao padajući redci */
details.mj{border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}
details.mj[open]{border-color:var(--or)}
details.mj>summary{list-style:none;cursor:pointer}
details.mj>summary::-webkit-details-marker{display:none}
.mh{display:grid;grid-template-columns:1.3fr repeat(4,1fr) 24px;gap:10px;align-items:center;padding:11px 16px}
.mh.s3{grid-template-columns:1.3fr repeat(3,1fr) 24px}
.mh .n{font-size:16.5px;font-weight:600}.mh .n small{display:block;font-size:13px;color:var(--mut);font-weight:400}
.c{text-align:right;min-width:0}.c .k{font-size:12px;color:var(--mut)}.c .v{font-size:15.5px}
.chev{color:var(--mut);text-align:center;transition:transform .2s}
details[open]>summary .chev{transform:rotate(180deg)}
.mb{padding:0 12px 12px}

/* tablice (unutar panela smiju vodoravno kliziti) */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600;padding:6px 8px;text-align:right;border-bottom:1.5px solid var(--rub);white-space:nowrap}
th.l{text-align:left}
td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-size:13.5px}
td.l{text-align:left;white-space:normal}
.zero{color:#C9C2B8}

/* transakcije: redak koji se otvara */
.tl{border-top:1.5px solid var(--rub)}
.izh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#F6F3EF;font-weight:600;font-size:13px;color:var(--zz);padding:7px 10px;border-bottom:1px solid #D8D2C8}
.izh .mut{font-weight:400}
details.t{border-bottom:1px solid var(--line)}
details.t>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:92px minmax(0,1fr) 130px 130px;gap:10px;padding:8px 10px;align-items:start}
details.t>summary::-webkit-details-marker{display:none}
details.t>summary:hover{background:#FBFAF8}
details.t[open]>summary{background:#F6EFE8}
details.t.rx>summary .p{color:#2563A8}
.t .d{font-size:13px;color:var(--mut)}
.t .p{font-weight:500;overflow-wrap:anywhere}.t .s{display:block;color:var(--mut);font-size:12px;overflow-wrap:anywhere}
.t .iz{text-align:right;font-size:14px}
.tag{font-size:11px;padding:1px 7px;border-radius:9px;white-space:nowrap;font-weight:600;margin-left:6px;vertical-align:1px}
.t-rx{background:#E8EEF8;color:#2563A8}.t-pr{background:var(--wab);color:var(--wa)}
.tdet{background:#FBFAF8;padding:8px 12px 12px 112px;font-size:13px;color:var(--mut);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 16px}
.tdet b{color:var(--ink);font-weight:500}
.thead{display:grid;grid-template-columns:92px minmax(0,1fr) 130px 130px;gap:10px;padding:6px 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:600}
.thead .r{text-align:right}

.note{background:#fff;border:1px solid #D8D2C8;border-radius:10px;padding:12px 16px;font-size:13.5px;color:var(--mut);line-height:1.6}
.note b{color:var(--ink)}
ul.cist{list-style:none;padding:0;margin:8px 0}
ul.cist li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qr{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px;display:inline-block}
ol.kodovi{columns:2;padding-left:22px}
ol.kodovi code{font-size:15px;letter-spacing:.04em}

@media(max-width:900px){
  .mh,.mh.s3{grid-template-columns:1fr 1fr;row-gap:4px}.mh .n{grid-column:1/2}.mh .chev{grid-row:1;grid-column:2;justify-self:end}
  .c{text-align:left}
  .kpi{grid-template-columns:1fr 1fr}.kpi .v{font-size:16px}
  .thead{display:none}
  details.t>summary{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  details.t>summary .d{grid-column:1/-1;order:-1}
  details.t>summary .iz:empty{display:none}
  .tdet{padding-left:12px}
}
@media(max-width:420px){
  .top .in{padding:0 8px}.brand{margin-right:6px}.nav a{padding:14px 8px}
  .panel{padding:14px 12px}
  ol.kodovi{columns:1}
}
/* pomoćne klase (CSP ne dopušta style="…") */
.brand.naslovni{display:block;padding:0 0 10px}
.prazno{padding:10px}
.blok{display:block}
.razmak-dolje{margin-bottom:12px}
/* F6 graf (SVG atributi; boje iz klasa) */
.graf{width:100%;height:auto;margin-top:14px;max-width:760px}
.graf .g-in{fill:var(--in)}.graf .g-out{fill:var(--out);opacity:.8}
.graf .g-mj{font-size:11px;fill:var(--mut)}.graf .g-d{font-size:10px;font-weight:600;fill:var(--ink)}.graf .g-d.neg{fill:var(--out)}
.mh.s5{grid-template-columns:1.3fr repeat(5,1fr) 24px}