:root{
  --bg:#F4F6F9;--card:#FFFFFF;--line:#E2E8F0;--line2:#CBD5E1;--text:#0F172A;--muted:#475569;--muted2:#64748B;
  --accent:#2563EB;--accent-d:#1E3A8A;--accent-bg:#EFF6FF;--ok:#059669;--ok-bg:#ECFDF5;--ok-t:#065F46;
  --warn-bg:#FFF7ED;--warn-t:#7C2D12;--err:#B91C1C;--err-bg:#FEF2F2;--side:#0F172A;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);font-size:14px;line-height:1.5}
a{color:#1D4ED8}a:hover{color:var(--accent-d)}
h1{font-size:22px;font-weight:600;margin:0}
h2{font-size:16px;font-weight:600;margin:0 0 12px}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  min-height:40px;padding:8px 12px;border:1px solid var(--line2);border-radius:8px;background:#fff;width:100%}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #93C5FD;outline-offset:0;border-color:var(--accent)}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
label.chk{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--text)}
label.chk input{width:18px;height:18px}

.layout{display:flex;flex-wrap:wrap;min-height:100vh}
.side{flex:1 1 232px;max-width:100%;background:var(--side);color:#E2E8F0;padding:18px 14px;display:flex;flex-direction:column;gap:2px}
.side .brand{display:flex;align-items:center;gap:10px;padding:4px 10px 16px}
.side .logo{width:34px;height:34px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.side .brand b{display:block;color:#fff;font-size:15px}
.side .brand span{font-size:12px;color:#94A3B8}
.side .sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;padding:14px 10px 4px}
.side a.nav{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;color:#CBD5E1;text-decoration:none}
.side a.nav:hover{background:#1E293B;color:#fff}
.side a.nav.on{background:var(--accent-d);color:#fff;font-weight:600}
.side .foot{margin-top:auto;padding:14px 10px 0;font-size:12px;color:#94A3B8;display:flex;flex-direction:column;gap:6px}
.side .foot button{background:none;border:1px solid #334155;color:#CBD5E1;border-radius:8px;min-height:36px;cursor:pointer}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 28px;background:#fff;border-bottom:1px solid var(--line)}
.content{padding:24px 28px;display:flex;flex-direction:column;gap:20px}
@media (max-width:820px){
  .side{flex-direction:row;flex-wrap:wrap;gap:4px;padding:10px}
  .side .sec,.side .foot span{display:none}
  .side .brand{padding:4px 8px;width:100%}
  .side a.nav{min-height:36px;padding:0 10px;font-size:13px}
  .side .foot{margin:0;padding:0;flex-direction:row;width:100%}
  .top,.content{padding-left:14px;padding-right:14px}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:#fff;color:var(--text);cursor:pointer;text-decoration:none;font-size:14px;white-space:nowrap}
.btn:hover{background:#F8FAFC;color:var(--text)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:#1D4ED8;color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.btn.danger{color:var(--err);border-color:#FECACA}
.btn.sm{min-height:32px;padding:0 10px;font-size:13px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.card.flush{padding:0;overflow:hidden}
.card .hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.f{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.row>.grow{flex:3 1 560px;min-width:0}
.row>.side-col{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px}
.stack{display:flex;flex-direction:column;gap:10px}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kpi .l{font-size:13px;color:var(--muted)}
.kpi .v{font-size:24px;font-weight:700}
.kpi .s{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.warn{color:#B45309}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line);background:#F8FAFC;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid #EEF2F6;vertical-align:middle}
td.nw{white-space:nowrap}
tr.click:hover td{background:#F8FAFC}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;background:#F8FAFC}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok-t)}
.pill.gray{background:#F1F5F9;color:#334155}
.pill.warn{background:var(--warn-bg);color:var(--warn-t)}
.pill.err{background:var(--err-bg);color:#991B1B}
.pill.blue{background:var(--accent-bg);color:var(--accent-d)}

.flash{padding:12px 14px;border-radius:10px;font-size:14px}
.flash.ok{background:var(--ok-bg);color:var(--ok-t);border:1px solid #A7F3D0}
.flash.greska{background:var(--err-bg);color:#991B1B;border:1px solid #FECACA}
.flash.info{background:var(--accent-bg);color:var(--accent-d);border:1px solid #BFDBFE}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:#fff;color:#334155;text-decoration:none;display:inline-flex;align-items:center;font-size:13px}
.tabs a.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-d);font-weight:600}

.bar{height:10px;background:#EEF2F6;border-radius:4px;min-width:100px}
.bar>div{height:100%;background:var(--accent);border-radius:4px}
.chart{display:flex;align-items:flex-end;gap:8px;height:240px}
.chart .c{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.chart .c>div{width:100%;background:var(--accent);border-radius:4px 4px 0 0}

.lines td input,.lines td select{min-height:36px;padding:6px 8px}
.lines td{padding:6px}
.status-dot{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;text-decoration:none}
.status-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status-dot.ok{background:var(--ok-bg);color:var(--ok-t);border:1px solid #A7F3D0}
.status-dot.err{background:var(--err-bg);color:#991B1B;border:1px solid #FECACA}
.status-dot.off{background:#F1F5F9;color:#334155;border:1px solid var(--line2)}
.a4wrap{background:#E5E7EB;padding:20px;border-radius:12px;overflow:auto}
.a4wrap iframe{width:100%;max-width:820px;height:1180px;border:0;background:#fff;display:block;margin:0 auto;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;padding:28px}
.code-in{font-size:26px;letter-spacing:.3em;text-align:center}
.qr{width:180px;height:180px;border:1px solid var(--line);border-radius:8px}
.swatch{width:30px;height:30px;border-radius:50%;border:3px solid #fff;outline:2px solid transparent;cursor:pointer;padding:0}
.swatch.on{outline-color:var(--text)}
@media print{.side,.top,.noprint{display:none!important}.content{padding:0}}
.autor-logo{display:block;height:130px;width:auto;position:absolute;top:50%;right:14%;transform:translateY(-50%)}
@media (max-width:1100px){.autor-logo{position:static;transform:none;height:80px}}
@media (max-width:640px){.rad-nova{grid-template-columns:1fr!important}}

.side a.nav .nav-badge{margin-left:auto;background:#F97316;color:#fff;border-radius:999px;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
.btn.warn-btn{background:#FFF7ED;border-color:#FDBA74;color:#9A3412;font-weight:600}
.btn.warn-btn:hover{background:#FFEDD5}
.obavijest{display:flex;align-items:center;gap:14px;background:#FFF7ED;border:1px solid #FDBA74;border-radius:12px;padding:12px 16px;color:#7C2D12}
.obavijest b{font-size:15px}
.obavijest .btn{margin-left:auto}

/* ===================== Tamna tema ===================== */
html[data-tema="tamna"]{
  --bg:#0B1220;--card:#111A2E;--line:#22304A;--line2:#334566;--text:#E5EAF3;--muted:#A3B1C6;--muted2:#8A99B1;
  --accent-bg:#13254A;--ok-bg:#0E2A22;--ok-t:#6EE7B7;--warn-bg:#2A1E0E;--warn-t:#FCD34D;--err-bg:#2B1216;--side:#070C17;
  color-scheme:dark;
}
html[data-tema="tamna"] a{color:#7AA7FF}
html[data-tema="tamna"] a:hover{color:#A9C6FF}
html[data-tema="tamna"] input[type=text],html[data-tema="tamna"] input[type=email],html[data-tema="tamna"] input[type=password],
html[data-tema="tamna"] input[type=number],html[data-tema="tamna"] input[type=date],html[data-tema="tamna"] input[type=search],
html[data-tema="tamna"] select,html[data-tema="tamna"] textarea{background:#0D1626;color:var(--text)}
html[data-tema="tamna"] input::placeholder,html[data-tema="tamna"] textarea::placeholder{color:#6B7A93}
html[data-tema="tamna"] .card{background:var(--card);border-color:var(--line)}
html[data-tema="tamna"] .top{background:#0E1729;border-color:var(--line)}
html[data-tema="tamna"] .btn{background:#15213A;color:var(--text);border-color:var(--line2)}
html[data-tema="tamna"] .btn:hover{background:#1B2A48;color:#fff}
html[data-tema="tamna"] .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-tema="tamna"] .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
html[data-tema="tamna"] .btn.danger{color:#F87171;border-color:#5B2128}
html[data-tema="tamna"] th,html[data-tema="tamna"] tfoot td{background:#0F1A30}
html[data-tema="tamna"] tr.click:hover td{background:#14213A}
html[data-tema="tamna"] td{border-color:var(--line)}
html[data-tema="tamna"] .pill.gray{background:#1C2840;color:#C3CDDE}
html[data-tema="tamna"] .pill.err,html[data-tema="tamna"] .flash.greska,html[data-tema="tamna"] .status-dot.err{color:#FCA5A5;border-color:#5B2128}
html[data-tema="tamna"] .pill.ok,html[data-tema="tamna"] .flash.ok{color:#6EE7B7;border-color:#14532D}
html[data-tema="tamna"] .pill.warn{color:#FCD34D}
html[data-tema="tamna"] .pill.blue,html[data-tema="tamna"] .flash.info{color:#93C5FD;border-color:#1E3A8A}
html[data-tema="tamna"] .status-dot.off{background:#1C2840;color:#C3CDDE}
html[data-tema="tamna"] .tabs a{background:#15213A;color:var(--text)}
html[data-tema="tamna"] .bar{background:#1C2840}
html[data-tema="tamna"] .warn{color:#FBBF24}
html[data-tema="tamna"] .a4wrap{background:#1A2438}
html[data-tema="tamna"] .btn.warn-btn,html[data-tema="tamna"] .obavijest{background:#2A1E0E;border-color:#7C4A12;color:#FCD34D}
/* kartice/okviri sa svijetlim pozadinama upisanim direktno u stranici */
html[data-tema="tamna"] [style*="background:#FFFBF5"],html[data-tema="tamna"] [style*="background:#F8FAFC"],html[data-tema="tamna"] [style*="background:#fff"]{background:var(--card)!important}
html[data-tema="tamna"] [style*="border-color:#FDBA74"]{border-color:#7C4A12!important}
html[data-tema="tamna"] .rad-nova{border-color:var(--line2)!important}
html[data-tema="tamna"] .muted{color:var(--muted)}

/* prekidač teme */
.tema-btn{min-width:40px;padding:0 10px;font-size:16px}
html[data-tema="tamna"] .logo-box{background:#fff!important}
html[data-tema="tamna"] .autor-logo{background:#fff;border-radius:10px;padding:8px}
html[data-tema="tamna"] [style*="color:var(--accent-d)"]{color:#93C5FD!important}

.obavijesti{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.obavijest.kompakt{padding:8px 14px;gap:10px;text-decoration:none;color:#7C2D12;min-height:52px}
.obavijest.kompakt:hover{background:#FFEDD5}
.obavijest.kompakt .ik{font-size:18px}
.obavijest.kompakt b{font-size:14px;display:block}
.obavijest.kompakt .small{display:block;opacity:.85}
.obavijest.kompakt .dalje{margin-left:auto;font-weight:600;font-size:13px;white-space:nowrap;color:var(--accent)}
html[data-tema="tamna"] .obavijest.kompakt{color:#FCD34D}
html[data-tema="tamna"] .obavijest.kompakt:hover{background:#3A2A12}
html[data-tema="tamna"] .obavijest.kompakt .dalje{color:#93C5FD}

.rad-slike{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.rad-slike img{width:100%;height:120px;object-fit:cover;border-radius:8px;display:block;margin-bottom:6px;border:1px solid var(--line)}
.potpis-okvir{border:2px dashed var(--line2);border-radius:12px;background:#fff;touch-action:none;width:100%;height:240px;display:block;cursor:crosshair}

/* stalne obaveze – matrica po mjesecima */
.matrica td.num, .matrica th.num { min-width: 64px; }
.matrica td.mx-ok { background: var(--ok-bg); }
.matrica td.mx-manje { background: var(--warn-bg); }
.matrica td.mx-fali { background: var(--err-bg); color: #991B1B; font-weight: 600; }
.matrica td.mx-ceka { color: var(--muted, #64748B); font-style: italic; }
.mx-leg { display: inline-block; padding: 1px 8px; border-radius: 6px; margin-right: 4px; }
.mx-leg.mx-ok { background: var(--ok-bg); }
.mx-leg.mx-manje { background: var(--warn-bg); }
.mx-leg.mx-fali { background: var(--err-bg); color: #991B1B; }
.mx-leg.mx-ceka { border: 1px dashed var(--line, #CBD5E1); font-style: italic; }
html[data-tema="tamna"] .matrica td.mx-fali, html[data-tema="tamna"] .mx-leg.mx-fali { color: #FCA5A5; }

/* računovođa: samo pregled – sakrij forme za izmjene i dugmad za nove dokumente (server ih ionako odbija) */
html[data-uloga="racunovodja"] form[method="post"]:not([data-ro-ok]),
html[data-uloga="racunovodja"] form[method="POST"]:not([data-ro-ok]),
html[data-uloga="racunovodja"] a[href$="/nova"], html[data-uloga="racunovodja"] a[href$="/novi"], html[data-uloga="racunovodja"] a[href*="/nova?"], html[data-uloga="racunovodja"] a[href*="/novi?"],
html[data-uloga="racunovodja"] a[href*="/uredi"], html[data-uloga="racunovodja"] a[href*="/sabloni/novi"],
html[data-uloga="racunovodja"] .samo-izmjene { display: none !important; }