/* KKK Zmaj — stilovi */
:root{
  --bg:#f3f6f9; --panel:#ffffff; --panel2:#f8fafc; --text:#132433; --muted:#64748b; --line:#e2e8f0;
  --pri:#0e7490; --pri2:#0b5c73; --pri-soft:#e0f2f7; --acc:#ea6a1f;
  --ok:#15803d; --ok-soft:#dcfce7; --bad:#c2410c; --bad-soft:#ffedd5; --warn:#a16207; --warn-soft:#fef3c7; --info:#1d4ed8; --info-soft:#dbeafe;
  --side:#0f2a3d; --side2:#16384f; --side-text:#cfe3ee;
  --r:12px; --sh:0 1px 2px rgba(16,36,51,.06),0 4px 14px rgba(16,36,51,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1620; --panel:#112130; --panel2:#0e1c29; --text:#e3edf4; --muted:#8aa0b2; --line:#1f3446;
  --pri:#22a3c4; --pri2:#1b8aa6; --pri-soft:#0f3442; --ok:#4ade80; --ok-soft:#12321f; --bad:#fb923c; --bad-soft:#3a2214; --warn:#facc15; --warn-soft:#332a0c; --info:#93c5fd; --info-soft:#15284a;
  --side:#08131c; --side2:#122636; --sh:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0b1620; --panel:#112130; --panel2:#0e1c29; --text:#e3edf4; --muted:#8aa0b2; --line:#1f3446;
  --pri:#22a3c4; --pri2:#1b8aa6; --pri-soft:#0f3442; --ok:#4ade80; --ok-soft:#12321f; --bad:#fb923c; --bad-soft:#3a2214; --warn:#facc15; --warn-soft:#332a0c; --info:#93c5fd; --info-soft:#15284a;
  --side:#08131c; --side2:#122636; --sh:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--pri)}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px}
.sp{flex:1}
.pos{color:var(--ok)} .neg{color:var(--bad)}

/* raspored */
#app{display:flex;min-height:100vh}
#side{width:256px;flex:none;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:12px;align-items:center;padding:18px 18px 14px}
.brand img{width:40px;height:40px;border-radius:10px;object-fit:contain;background:#fff1}
.brand b{display:block;color:#fff;font-size:16px;line-height:1.2}
.brand small{color:#8fb3c7}
#nav{padding:4px 10px;flex:1}
#nav .grp{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6f93a8;margin:14px 10px 4px}
#nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--side-text);text-decoration:none;font-size:14.5px}
#nav a svg{width:18px;height:18px;flex:none;opacity:.85}
#nav a:hover{background:var(--side2);color:#fff}
#nav a.on{background:var(--pri);color:#fff}
#nav a.on svg{opacity:1}
.side-foot{display:flex;gap:8px;padding:12px;border-top:1px solid #ffffff14}
.sync{flex:1;border:0;border-radius:9px;padding:8px 10px;text-align:left;font-size:12.5px;cursor:pointer;background:var(--side2);color:var(--side-text)}
.sync::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:#94a3b8}
.sync.ok::before{background:#4ade80} .sync.wait::before,.sync.sync::before{background:#facc15} .sync.err::before,.sync.off::before{background:#fb923c}
.theme{border:0;border-radius:9px;background:var(--side2);color:var(--side-text);width:38px;cursor:pointer;font-size:16px}
#main{flex:1;min-width:0;display:flex;flex-direction:column}
#top{display:flex;align-items:center;gap:12px;padding:16px 28px 8px;position:sticky;top:0;background:var(--bg);z-index:5}
#top h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
#menuBtn{display:none;border:0;background:var(--panel);border-radius:10px;width:40px;height:40px;font-size:20px;box-shadow:var(--sh);cursor:pointer}
.dot{width:10px;height:10px;border-radius:50%;background:#94a3b8;display:none}
.dot.ok{background:var(--ok)} .dot.wait,.dot.sync{background:#eab308} .dot.err,.dot.off{background:var(--bad)}
#view{padding:12px 28px 40px;max-width:1400px;width:100%}
#scrim{display:none}

@media (max-width:900px){
  #side{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-105%);transition:transform .2s}
  body.nav-open #side{transform:none}
  body.nav-open #scrim{display:block;position:fixed;inset:0;background:#0008;z-index:25}
  #menuBtn{display:block}
  .dot{display:block}
  #top{padding:12px 16px 6px}
  #top h1{font-size:19px}
  #view{padding:8px 16px 32px}
}

/* kartice */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin-bottom:18px}
.card h3{margin:0 0 12px;font-size:15.5px}
.card h3 small{font-weight:400;color:var(--muted)}
.grid2{display:grid;grid-template-columns:3fr 2fr;gap:18px}
.grid2>.card{margin-bottom:0}
.grid2+.grid2,.grid2+.card,.kpis+.card{margin-top:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:18px}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pri)}
.kpi.acc::after{background:var(--acc)} .kpi.ok::after{background:var(--ok)} .kpi.bad::after{background:var(--bad)}
.kpi span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi b{display:block;font-size:24px;margin:4px 0 2px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi small{color:var(--muted)}
.intro{color:var(--muted);margin:0 0 14px;max-width:800px}

/* dugmad */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:500;text-decoration:none;color:var(--text);white-space:nowrap}
.btn:hover{border-color:var(--pri)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pri:hover{background:var(--pri2)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad-soft)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{padding:4px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.quick{display:flex;flex-wrap:wrap;gap:10px}
.quick .btn{padding:10px 16px}

/* traka sa alatima i tabele */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.toolbar input,.toolbar select,.fld input,.fld select,.fld textarea,.inp{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:8px 11px;min-height:38px;outline:none}
.toolbar input:focus,.toolbar select:focus,.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.toolbar .search{min-width:220px;flex:0 1 300px}
.toolbar label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--text);font-size:14px}
.tabs a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.tbl-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:auto;box-shadow:var(--sh)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:11px 14px;background:var(--panel2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--pri-soft)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.acts{text-align:right;white-space:nowrap}
.tbl .empty{text-align:center;color:var(--muted);padding:36px;cursor:default}
.cnt{margin:8px 4px;font-size:13px}
@media (max-width:640px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  .tbl td{border:0;padding:3px 0;display:flex;gap:10px}
  .tbl td::before{content:attr(data-l);color:var(--muted);font-size:12.5px;min-width:96px;flex:none}
  .tbl td.acts{justify-content:flex-start}
  .tbl td.acts::before{content:""}
  .tbl .empty::before{display:none}
  .toolbar .search{flex:1 1 100%}
}
.bdg{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.bdg.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.bdg.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.bdg.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.bdg.info{background:var(--info-soft);color:var(--info);border-color:transparent}

/* modal i forme */
.modal{position:fixed;inset:0;background:#0a1824a6;display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:4vh 14px;overflow:auto}
.modal-box{background:var(--panel);border-radius:16px;width:min(760px,100%);box-shadow:0 20px 60px #0006;margin-bottom:4vh}
.modal.wide .modal-box{width:min(1000px,100%)}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);border-radius:16px 16px 0 0;z-index:2}
.modal-head h2{margin:0;font-size:17px;flex:1}
.x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
#mBody{padding:18px 20px}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.w{grid-column:1/-1}
.fld>span{font-size:13px;font-weight:600;color:var(--muted)}
.fld>span i{color:var(--bad);font-style:normal}
.fld small{color:var(--muted);font-size:12px}
.fld textarea{resize:vertical;min-height:80px}
.fld.chk{flex-direction:row;align-items:center;gap:10px;font-weight:500;padding-top:22px;cursor:pointer}
.fld.chk input{width:18px;height:18px;min-height:0}
.frm-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.filebox{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filebox input{flex:1;min-width:180px}
.multi{border:1px solid var(--line);border-radius:9px;padding:8px}
.multi .mq{width:100%;margin-bottom:6px}
.multi .ml{max-height:190px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 10px}
.multi .ml label{display:flex;gap:8px;align-items:center;padding:3px 4px;border-radius:6px;cursor:pointer;font-size:14px}
.multi .ml label:hover{background:var(--pri-soft)}
@media (max-width:640px){.frm{grid-template-columns:1fr}.fld.chk{padding-top:0}}

/* toast */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
#toast div{background:#132433;color:#fff;padding:10px 18px;border-radius:10px;box-shadow:0 8px 24px #0004;font-size:14px;animation:tin .2s}
#toast div.err{background:#9a3412}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* grafikoni */
.chart svg{width:100%;height:auto;display:block}
.chart .gl{stroke:var(--line)}
.chart .ax{font-size:11px;fill:var(--muted)}
.s1{fill:var(--ok)} .s2{fill:var(--bad)} .s3{fill:var(--pri)}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.legend i.s1{background:var(--ok)} .legend i.s2{background:var(--bad)} .legend i.s3{background:var(--pri)}
.hb{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:6px 10px;align-items:center;font-size:14px}
.hb .bar{height:10px;border-radius:5px;background:var(--pri-soft);overflow:hidden}
.hb .bar i{display:block;height:100%;background:var(--pri);border-radius:5px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hb b{font-weight:600;text-align:right;white-space:nowrap}

/* liste na tabli */
.alerts{list-style:none;margin:0;padding:0}
.alerts li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line)}
.alerts li:last-child{border:0}
.alerts .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700}
.alerts .ic.bad{background:var(--bad-soft);color:var(--bad)} .alerts .ic.warn{background:var(--warn-soft);color:var(--warn)} .alerts .ic.ok{background:var(--ok-soft);color:var(--ok)} .alerts .ic.info{background:var(--info-soft);color:var(--info)}
.alerts a{text-decoration:none;color:var(--text)}
.alerts small{display:block;color:var(--muted)}

/* organi */
.org{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.org h4{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.org h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.org ul{list-style:none;margin:0;padding:0}
.org li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.org li:first-child{border-top:0}
.av{width:34px;height:34px;border-radius:50%;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.org li small{display:block;color:var(--muted);font-size:12px}
.org .none{color:var(--muted);font-style:italic}

/* članarine */
.cg{border-collapse:separate;border-spacing:3px;width:100%}
.cg th{font-size:12px;color:var(--muted);font-weight:600;padding:4px;text-align:center}
.cg th:first-child{text-align:left}
.cg td.n{white-space:nowrap;padding:4px 8px 4px 0;font-size:14px}
.cg td.n small{color:var(--muted)}
.cg td.c{height:32px;min-width:34px;border-radius:7px;text-align:center;cursor:pointer;font-size:13px;font-weight:700;background:var(--panel2);border:1px solid var(--line)}
.cg td.c.paid{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.cg td.c.due{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.cg td.c.fut{opacity:.5}
.cg td.c.na{cursor:default;opacity:.35}
.cg td.c:not(.na):hover{outline:2px solid var(--pri)}
.cg td.s{text-align:right;white-space:nowrap;font-size:13px;padding-left:8px}

/* podešavanja */
.set .frm{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.logo-prev{width:72px;height:72px;border-radius:12px;border:1px solid var(--line);object-fit:contain;background:#fff}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;word-break:break-all}
.steps{margin:0;padding-left:20px}
.steps li{margin:4px 0}
#qr{background:#fff;padding:10px;border-radius:10px;display:inline-block;margin-top:10px}
#qr img,#qr canvas{display:block}

/* zaključavanje */
#lock{position:fixed;inset:0;background:var(--side);z-index:100;display:grid;place-items:center;padding:20px}
.lock-box{background:var(--panel);border-radius:18px;padding:30px;width:min(340px,100%);text-align:center;display:flex;flex-direction:column;gap:12px}
.lock-box img{width:64px;margin:0 auto}
.lock-box h2,.lock-box p{margin:0}
.lock-box input{text-align:center;font-size:22px;letter-spacing:.3em;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel2)}
#lockErr{color:var(--bad);min-height:18px}

/* izveštaji i dokumenti za štampu */
.doc{background:#fff;color:#111;border-radius:var(--r);box-shadow:var(--sh);padding:40px 48px;max-width:900px;margin:0 auto;border:1px solid var(--line)}
.lh{display:flex;gap:16px;align-items:center;border-bottom:2px solid #0e7490;padding-bottom:12px;margin-bottom:22px;font-size:12px;color:#334;line-height:1.45}
.lh img{width:78px;height:78px;object-fit:contain}
.lh b{font-size:17px;color:#0b3b4d}
.rt{font-size:20px;text-align:center;margin:10px 0 2px;color:#111;letter-spacing:.02em}
.rp{text-align:center;margin:0 0 20px;color:#555}
.doc h2{font-size:15px;margin:22px 0 8px;color:#0b3b4d;border-bottom:1px solid #d9e2ea;padding-bottom:4px}
.doc p{margin:0 0 10px}
.doc .pre{white-space:pre-wrap}
.doc .kv{display:grid;grid-template-columns:180px 1fr;gap:4px 14px;font-size:14px}
.doc .kv span{color:#555}
.rk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0 16px}
.rk div{border:1px solid #d9e2ea;border-radius:8px;padding:10px 12px}
.rk span{display:block;font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.04em}
.rk b{font-size:17px}
.rtbl{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 12px}
.rtbl th,.rtbl td{border:1px solid #d3dbe2;padding:6px 8px;text-align:left;vertical-align:top}
.rtbl thead th{background:#eef4f7;font-size:12px}
.rtbl tfoot th{background:#f6f8fa}
.rtbl .r{text-align:right;white-space:nowrap}
.doc .chart .gl{stroke:#e5e9ee} .doc .chart .ax{fill:#666}
.doc .s1{fill:#15803d} .doc .s2{fill:#c2410c} .doc .s3{fill:#0e7490}
.doc .legend i.s1{background:#15803d} .doc .legend i.s2{background:#c2410c}
.doc .hb .bar{background:#e0f2f7} .doc .hb .bar i{background:#0e7490}
.doc .bdg{border:1px solid #ccc;background:none;color:#333}
.doc .muted{color:#666}
.ttl{text-align:center;font-size:22px;letter-spacing:.12em;margin:26px 0 4px}
.sub{text-align:center;font-size:16px;margin:0 0 22px;font-weight:600}
.body{font-size:15px;line-height:1.7;text-align:justify}
.meta{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.sig{display:grid;grid-template-columns:1fr 90px 1fr;gap:20px;margin-top:56px;font-size:14px;break-inside:avoid}
.sig>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.sig i{display:block;width:100%;border-bottom:1px solid #333;height:44px}
.sig b{font-weight:500;margin-top:4px}
.sig .mp{justify-content:flex-end;color:#666;padding-bottom:4px}
.page+.page{break-before:page;margin-top:40px;padding-top:40px;border-top:1px dashed #ccc}

#print{display:none}
@media print{
  /* margina 0 uklanja zaglavlje i podnožje pregledača (adresa sajta, datum i vreme) */
  @page{size:A4;margin:0}
  html,body{background:#fff;margin:0}
  .pwrap{width:100%;border-collapse:collapse}
  .pwrap>tbody>tr>td{padding:0 16mm}
  .pwrap .ph{height:14mm}
  .doc h2,.ttl,.sub{break-after:avoid}
  .rtbl tr,.rk,.chart,.hb{break-inside:avoid}
  #app,#modal,#toast,#lock{display:none!important}
  #print{display:block}
  #print .doc{box-shadow:none;border:0;padding:0;max-width:none;border-radius:0}
  .page+.page{margin-top:0;padding-top:0;border:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* donacije po mesecima */
.tbl.dg th,.tbl.dg td{padding:9px 7px;font-size:13.5px}
.tbl.dg td:first-child{white-space:nowrap}
.tbl .r{text-align:right;white-space:nowrap}
.tbl.dg tfoot th{background:var(--panel2);border-top:1px solid var(--line)}
@media (max-width:640px){.tbl.dg td:empty{display:none}.tbl.dg tfoot{display:none}}
/* ugovor na jednoj strani */
.ugv .lh{margin-bottom:10px}
.ugv .ttl{margin:12px 0 2px;font-size:20px}
.ugv .sub{margin-bottom:12px}
.ugv .body{font-size:13.5px;line-height:1.5;margin:0 0 6px}
.ugv .sig{margin-top:28px}
pre.code.gs{white-space:pre;overflow:auto;max-height:380px;word-break:normal;margin:0;font-size:12px;line-height:1.45}

/* uloge i prijava */
body.ro .w-only{display:none!important}
#login{position:fixed;inset:0;background:var(--side);z-index:99;display:grid;place-items:center;padding:20px}
.lock-box input.txt{letter-spacing:0;font-size:16px;text-align:left}
.role-tag{display:block;font-size:11px;color:#8fb3c7;margin-top:2px}

/* ================= TELEFON – redizajn ================= */
.mob-only{display:none}
#bnav{display:none}
.toolbar .flt,.toolbar .more{display:contents}
.add-btn span{font-size:18px;line-height:1}
@media (max-width:900px){
  body{font-size:16px}
  #top{padding:10px 14px 8px;box-shadow:0 1px 0 var(--line)}
  #top h1{font-size:20px}
  #view{padding:12px 12px calc(84px + env(safe-area-inset-bottom))}
  /* donja navigacija */
  #bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--panel);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(16,36,51,.08)}
  #bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:600}
  #bnav a svg{width:24px;height:24px}
  #bnav a.on{color:var(--pri);background:var(--pri-soft)}
  #menuBtn{display:none}
  /* brojevi: dva po redu, manji */
  .kpis{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .kpi{padding:12px 12px 12px 16px}
  .kpi span{font-size:11px}
  .kpi b{font-size:18px;white-space:normal;line-height:1.2;margin:4px 0}
  .kpi small{font-size:12px;display:block;line-height:1.3}
  .card{padding:14px;margin-bottom:12px;border-radius:14px}
  .card h3{font-size:16px}
  .intro{font-size:14px}
  /* tabovi: jedan red, klizanje */
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px 12px;padding:0 12px 4px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;flex:none;padding:8px 14px}
  /* traka: pretraga + Filteri + ⋯, ostalo se otvara */
  .toolbar{gap:8px;margin-bottom:10px}
  .toolbar .search{flex:1 1 0;min-width:0}
  .mob-only{display:inline-flex}
  .toolbar .flt,.toolbar .more{display:none}
  .toolbar.show-flt .flt,.toolbar.show-more .more{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}
  .toolbar.show-flt .flt select{flex:1 1 100%}
  .toolbar.show-more .more .btn{flex:1 1 calc(50% - 8px);justify-content:center}
  .toolbar > .sp{display:none}
  .tb-f.on{border-color:var(--pri);color:var(--pri)}
  input,select,textarea{font-size:16px!important}
  /* plutajuće dugme „+“ */
  .add-btn{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:19;width:58px;height:58px;border-radius:50%;padding:0;justify-content:center;box-shadow:0 6px 18px rgba(14,116,144,.45)}
  .add-btn span{font-size:30px;font-weight:400}
  .add-btn b{display:none}
  /* liste kao kompaktne kartice */
  .tbl-wrap{background:transparent;border:0;box-shadow:none;overflow:visible}
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--sh)}
  .tbl td{display:inline-flex;align-items:baseline;gap:6px;border:0;padding:0;width:auto;font-size:14px;max-width:100%}
  .tbl td:empty{display:none}
  .tbl td::before{content:attr(data-l);color:var(--muted);font-size:12px;min-width:0;flex:none}
  .tbl td:first-child,.tbl td:nth-child(2){font-size:16px}
  .tbl td:first-child::before,.tbl td:nth-child(2)::before{display:none}
  .tbl td:nth-child(2){flex:1 1 60%}
  .tbl td.acts{flex-basis:100%;justify-content:flex-end;margin-top:4px}
  .tbl td.acts::before{display:none}
  .tbl td.acts .btn{padding:7px 14px}
  .tbl tbody tr:hover td{background:none}
  .tbl tbody tr:active{background:var(--pri-soft)}
  .tbl .empty{flex-basis:100%;justify-content:center}
  .tbl td input.inp,.tbl td select.inp{max-width:100%}
  /* tabela donacija po mesecima ostaje tabela sa klizanjem */
  .card .tbl.dg{display:table}
  .card .tbl.dg thead{display:table-header-group}
  .card .tbl.dg tbody{display:table-row-group}
  .card .tbl.dg tr{display:table-row;box-shadow:none;border:0;background:none;padding:0}
  .card .tbl.dg td{display:table-cell;padding:8px 6px;font-size:13px;border-bottom:1px solid var(--line)}
  .card .tbl.dg td::before{display:none}
  /* forme preko celog ekrana */
  .modal{padding:0;align-items:stretch}
  .modal-box,.modal.wide .modal-box{width:100%;min-height:100%;border-radius:0;margin:0;display:flex;flex-direction:column}
  .modal-head{border-radius:0;padding:14px 16px}
  #mBody{padding:14px 16px calc(16px + env(safe-area-inset-bottom));flex:1}
  .frm{gap:12px}
  .frm-foot{position:sticky;bottom:0;background:var(--panel);margin:8px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:2}
  .frm-foot .btn{padding:11px 16px}
  .frm-foot small{flex-basis:100%}
  .multi .ml{grid-template-columns:1fr 1fr}
  .multi .ml label{padding:7px 4px}
  .alerts li{padding:11px 0}
  .quick .btn{flex:1 1 auto;justify-content:center}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .grid3{grid-template-columns:1fr}
  .side-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){ .kpis{grid-template-columns:1fr} }
@media (max-width:900px){
  .frm-foot{flex-wrap:nowrap;align-items:center}
  .frm-foot > .btn.ghost[data-close]{display:none}
  .frm-foot > .btn.pri{flex:1 1 auto;justify-content:center;font-size:16px}
  .frm-foot > .sp{display:none}
  .frm-foot .btn{padding:11px 12px}
  .tbl td.acts{flex-basis:auto;margin:0 0 0 auto}
  .tbl td.acts .btn{padding:6px 12px;font-size:13px}
  .lock-box{padding:24px}
  .lock-box .btn{padding:12px;justify-content:center;font-size:16px}
}
.izv-card{display:flex;align-items:center;gap:14px;border-color:var(--pri);background:linear-gradient(90deg,var(--pri-soft),var(--panel) 70%)}
.izv-card>div{flex:1;display:flex;flex-direction:column;gap:2px}
.izv-card .btn{padding:10px 18px}