/* Premium Knjiga — izgled. Svijetla i tamna tema, tokeni, jedan sistem. */
:root {
  --navy:#2c3e50; --akcent:#1c7fc3; --akcent-d:#15689e; --akcent-s:#dbeaf7;
  --bg:#f4f6f9; --bg2:#ffffff; --bg3:#eef2f6; --tekst:#1b2530; --tekst2:#5b6775; --crta:#e2e7ed; --sjena:0 8px 28px rgba(44,62,80,.08);
  --zel:#1e8f5a; --zel-s:#dff3e8; --nar:#d9822b; --nar-s:#fdebd8; --crv:#c0392b; --crv-s:#f9dedb; --ljub:#8e44ad; --ljub-s:#ecdff5;
  --side:#22303f; --side-t:#d6dee8; --side-akt:#1c7fc3;
  --r:14px; --r2:9px;
}
:root[data-theme="dark"] {
  --bg:#0f141a; --bg2:#171e27; --bg3:#1f2834; --tekst:#e6ebf1; --tekst2:#9aa7b5; --crta:#2a3542; --sjena:0 8px 28px rgba(0,0,0,.35);
  --akcent-s:#163a55; --zel-s:#123b2a; --nar-s:#45301a; --crv-s:#4a1f1b; --ljub-s:#35204a;
  --side:#0b1016; --side-t:#aab6c3;
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:'Exo 2','Segoe UI',system-ui,sans-serif; background:var(--bg); color:var(--tekst); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; }
a { color:var(--akcent); text-decoration:none; } a:hover { text-decoration:underline; }
button, input, select, textarea { font:inherit; color:inherit; }
::selection { background:var(--akcent-s); }
.ucitavanje { padding:40px; color:var(--tekst2); }
.skelet { background:linear-gradient(90deg, var(--bg3) 25%, var(--crta) 50%, var(--bg3) 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:8px; height:14px; margin:8px 0; }
@keyframes sk { to { background-position:-200% 0; } }

/* ---------- prijava ---------- */
.prijava { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(1200px 600px at 20% -10%, var(--akcent-s), transparent), var(--bg); }
.prijava .kutija { background:var(--bg2); border:1px solid var(--crta); border-radius:18px; padding:30px 32px; width:100%; max-width:430px; box-shadow:var(--sjena); }
.prijava .logo-plocica { margin:0 auto 18px; }
.prijava h1 { font-size:20px; margin:0 0 4px; text-align:center; }
.prijava .pod { text-align:center; color:var(--tekst2); font-size:13px; margin-bottom:18px; }
.logo-plocica { background:#2c3e50; width:208px; max-width:100%; border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:center; }
.logo-plocica img { width:100%; display:block; }
label { display:block; font-size:12px; color:var(--tekst2); margin:10px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea { width:100%; border:1px solid var(--crta); border-radius:var(--r2); padding:8px 11px; background:var(--bg2); color:var(--tekst); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--akcent-s); border-color:var(--akcent); }
input[type=number] { text-align:right; font-variant-numeric:tabular-nums; }
.dug { background:var(--akcent); color:#fff; border:none; border-radius:var(--r2); padding:8px 15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:background .12s, transform .05s; }
.dug:hover { background:var(--akcent-d); } .dug:active { transform:translateY(1px); }
.dug.sek { background:var(--bg3); color:var(--tekst); } .dug.sek:hover { background:var(--crta); }
.dug.crv { background:var(--crv); } .dug.zel { background:var(--zel); }
.dug.mali { padding:5px 10px; font-size:12.5px; }
.dug.siroko { width:100%; margin-top:16px; justify-content:center; }
.dug:disabled { opacity:.5; cursor:default; transform:none; }
.dug svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.poruka { margin-top:12px; padding:10px 12px; border-radius:var(--r2); font-size:13px; }
.poruka.greska { background:var(--crv-s); color:var(--crv); } .poruka.ok { background:var(--zel-s); color:var(--zel); } .poruka.info { background:var(--akcent-s); color:var(--akcent-d); }
:root[data-theme="dark"] .poruka.info { color:#9ccbf0; } :root[data-theme="dark"] .poruka.greska { color:#f2a59c; } :root[data-theme="dark"] .poruka.ok { color:#8fd9b3; }
.qr { display:flex; justify-content:center; margin:14px 0; } .qr img { border:8px solid #fff; border-radius:8px; }
.tajna { font-family:Consolas, monospace; letter-spacing:2px; text-align:center; background:var(--bg3); padding:8px; border-radius:8px; word-break:break-all; font-size:13px; }

/* ---------- ljuska ---------- */
.app { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.app.skupljeno { grid-template-columns:64px 1fr; }
.app aside { background:var(--side); color:var(--side-t); padding:12px 10px; position:sticky; top:0; height:100vh; overflow:auto; display:flex; flex-direction:column; }
.app aside .logo-plocica { width:100%; margin-bottom:10px; }
.app.skupljeno aside .logo-plocica { padding:8px; } .app.skupljeno aside .logo-plocica img { width:36px; }
.app aside .grupa { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; opacity:.5; padding:12px 10px 3px; }
.app.skupljeno aside .grupa, .app.skupljeno aside .txt { display:none; }
.app aside button { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; color:var(--side-t); font-size:13.5px; padding:7px 10px; border-radius:9px; cursor:pointer; text-align:left; white-space:nowrap; }
.app aside button:hover { background:rgba(255,255,255,.07); color:#fff; }
.app aside button.akt { background:var(--side-akt); color:#fff; font-weight:600; }
.app aside button:disabled { opacity:.35; cursor:default; }
.app aside svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.app aside .dno { margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding-top:8px; }
.app aside .modul { margin-top:4px; }
.app aside .modul .zag { font-weight:600; color:#fff; }
.app aside .modul .zag .broj { margin-left:auto; font-size:10.5px; opacity:.55; font-weight:500; }
.app aside .modul .zag .strelica { opacity:.6; transition:transform .15s; font-size:14px; line-height:1; }
.app aside .modul.zatvoren .zag .strelica { transform:rotate(-90deg); }
.app aside .modul .stavke { margin-left:10px; border-left:1px solid rgba(255,255,255,.12); padding-left:4px; }
.app aside .modul.zatvoren .stavke { display:none; }
.app aside button.pod { font-size:13px; padding:5px 10px; }
.app aside .tacka { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; flex:none; margin:0 6px; }
.app aside button.pod.akt .tacka { opacity:1; }
.app.skupljeno aside .modul .stavke { display:none; } .app.skupljeno aside .modul .zag .strelica { display:none; }
.app aside .oznaka { margin-left:auto; }
.app main { min-width:0; display:flex; flex-direction:column; }
.vrh { display:flex; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid var(--crta); background:var(--bg2); position:sticky; top:0; z-index:20; }
.vrh h2 { margin:0; font-size:17px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vrh .ikdug { background:none; border:1px solid var(--crta); border-radius:9px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--tekst2); }
.vrh .ikdug:hover { background:var(--bg3); color:var(--tekst); }
.vrh .ikdug svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vrh .trazi { display:flex; align-items:center; gap:8px; border:1px solid var(--crta); border-radius:9px; padding:6px 10px; color:var(--tekst2); cursor:text; min-width:240px; background:var(--bg); }
.vrh .trazi svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.vrh .trazi span { white-space:nowrap; }
.vrh .trazi kbd { font-family:inherit; font-size:11px; border:1px solid var(--crta); border-radius:5px; padding:1px 5px; margin-left:auto; }
.vrh .ko { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tekst2); }
.vrh .ko .avatar { width:30px; height:30px; border-radius:50%; background:var(--akcent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.alati { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sadrzaj { padding:18px 20px 40px; }
.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; margin-bottom:16px; }
.kpi .k { background:var(--bg2); border:1px solid var(--crta); border-radius:var(--r); padding:13px 15px; cursor:default; transition:transform .1s, box-shadow .1s; }
.kpi .k.klik { cursor:pointer; } .kpi .k.klik:hover { transform:translateY(-2px); box-shadow:var(--sjena); }
.kpi .k .v { font-size:24px; font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.kpi .k .n { font-size:12px; color:var(--tekst2); margin-top:2px; }
.kpi .k.nar .v { color:var(--nar); } .kpi .k.zel .v { color:var(--zel); } .kpi .k.crv .v { color:var(--crv); } .kpi .k.plav .v { color:var(--akcent); }
.kart { background:var(--bg2); border:1px solid var(--crta); border-radius:var(--r); padding:16px 18px; margin-bottom:14px; }
.kart h3 { margin:0 0 10px; font-size:14.5px; display:flex; align-items:center; gap:8px; }
.kart h3 .oznaka { margin-left:auto; }
.mreza { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.tabela { overflow:auto; border:1px solid var(--crta); border-radius:12px; background:var(--bg2); max-height:72vh; }
table.mt { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
table.mt th { text-align:left; padding:9px 10px; background:var(--bg3); color:var(--tekst2); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; position:sticky; top:0; z-index:1; border-bottom:1px solid var(--crta); }
table.mt td { padding:7px 10px; border-bottom:1px solid var(--crta); white-space:nowrap; vertical-align:middle; }
table.mt tr:last-child td { border-bottom:none; }
table.mt td.br, table.mt th.br { text-align:right; font-variant-numeric:tabular-nums; }
table.mt tr.suma td { font-weight:700; background:var(--bg3); position:sticky; bottom:0; }
table.mt tbody tr:hover td { background:color-mix(in srgb, var(--akcent-s) 45%, transparent); }
table.mt tr.klik { cursor:pointer; }
table.mt td.neg { color:var(--crv); }
table.mt td.w { white-space:normal; min-width:200px; }
.oznaka { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--bg3); color:var(--tekst2); white-space:nowrap; }
.oznaka.zel { background:var(--zel-s); color:var(--zel); } .oznaka.nar { background:var(--nar-s); color:var(--nar); } .oznaka.crv { background:var(--crv-s); color:var(--crv); } .oznaka.plav { background:var(--akcent-s); color:var(--akcent-d); } .oznaka.ljub { background:var(--ljub-s); color:var(--ljub); }
:root[data-theme="dark"] .oznaka.plav { color:#9ccbf0; } :root[data-theme="dark"] .oznaka.zel { color:#8fd9b3; } :root[data-theme="dark"] .oznaka.nar { color:#f0b87a; } :root[data-theme="dark"] .oznaka.crv { color:#f2a59c; }
.filter { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; align-items:end; }
.filter > div { min-width:130px; } .filter label { margin:0 0 4px; }
.cipovi { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.cip { border:1px solid var(--crta); border-radius:20px; padding:4px 11px; font-size:12px; background:var(--bg2); cursor:pointer; }
.cip.akt, .cip:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.podtab { display:flex; border-bottom:2px solid var(--crta); margin-bottom:14px; flex-wrap:wrap; }
.podtab span { padding:8px 14px; font-size:13px; font-weight:600; color:var(--tekst2); border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer; }
.podtab span.akt { color:var(--tekst); border-color:var(--akcent); }
.sifr { color:var(--tekst2); font-family:Consolas, monospace; font-size:12.5px; }
.nap { font-size:12px; color:var(--tekst2); margin-top:10px; line-height:1.5; }
.red { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; flex-wrap:wrap; }
.polja { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:14px; }
.polje label { margin:0 0 3px; } .polje .v { border:1px solid var(--crta); border-radius:var(--r2); padding:7px 9px; background:var(--bg); font-size:13px; min-height:34px; }
dialog { border:none; border-radius:16px; padding:22px 24px; width:min(560px, 94vw); box-shadow:0 18px 50px rgba(0,0,0,.3); background:var(--bg2); color:var(--tekst); }
dialog.siroka { width:min(1100px, 96vw); }
dialog::backdrop { background:rgba(10,16,24,.55); backdrop-filter:blur(2px); }
dialog h3 { margin:0 0 10px; font-size:17px; }
.pravo { display:inline-block; width:14px; height:14px; border-radius:3px; background:var(--zel-s); border:1px solid #9fd4b8; }
.pravo.ne { background:var(--bg3); border-color:var(--crta); } .pravo.citaj { background:var(--nar-s); border-color:#e6cf7a; }
.prava-tab th, .prava-tab td { text-align:center; } .prava-tab td:first-child, .prava-tab th:first-child { text-align:left; } .prava-tab input { width:16px; height:16px; }
.hodogram { display:flex; gap:0; align-items:stretch; flex-wrap:wrap; }
.hodogram .korak { background:var(--bg); border:1px solid var(--crta); border-radius:10px; padding:8px 12px; font-size:12.5px; min-width:140px; position:relative; margin-right:22px; margin-bottom:8px; }
.hodogram .korak:after { content:'→'; position:absolute; right:-18px; top:8px; color:var(--tekst2); } .hodogram .korak:last-child:after { content:''; }
.hodogram .korak b { display:block; } .hodogram .korak small { color:var(--tekst2); }

/* urednik temeljnice */
.urednik table.mt td { padding:4px 6px; }
.urednik input, .urednik select { padding:6px 8px; font-size:13px; }
.urednik .saldo { font-weight:700; font-variant-numeric:tabular-nums; }
.urednik .saldo.ok { color:var(--zel); } .urednik .saldo.ne { color:var(--crv); }

/* toast */
#toasti { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:100; }
.toast { background:var(--navy); color:#fff; padding:10px 14px; border-radius:10px; font-size:13px; box-shadow:var(--sjena); animation:ulaz .18s ease-out; max-width:360px; }
.toast.greska { background:var(--crv); } .toast.ok { background:var(--zel); }
@keyframes ulaz { from { transform:translateY(8px); opacity:0; } }

/* paleta pretrage */
.paleta { width:min(640px,94vw); padding:0; overflow:hidden; }
.paleta input { border:none; border-bottom:1px solid var(--crta); border-radius:0; padding:14px 18px; font-size:15px; }
.paleta input:focus { outline:none; }
.paleta .rez { max-height:50vh; overflow:auto; }
.paleta .rez div { padding:9px 18px; display:flex; gap:10px; align-items:center; cursor:pointer; }
.paleta .rez div:hover, .paleta .rez div.akt { background:var(--akcent-s); }
.paleta .rez small { color:var(--tekst2); margin-left:auto; }

@media print { .app aside, .vrh, .alati, .nap, .red { display:none !important; } .app { display:block; } .tabela { max-height:none; overflow:visible; } body { background:#fff; } }
@media (max-width:860px) { .app, .app.skupljeno { grid-template-columns:1fr; } .app aside { height:auto; position:static; flex-direction:row; flex-wrap:wrap; gap:4px; } .app aside .logo-plocica, .app aside .grupa, .app aside .dno { width:100%; } .app aside button { width:auto; } .vrh .trazi { min-width:0; } .vrh .ko span { display:none; } }