/* Leafcode Financije — stilovi (tamna tema preuzeta iz stare PP Financije aplikacije) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0e0f11; --surface:#16181c; --border:#252830; --border-light:#2e3240;
  --accent:#e8a020; --accent-dim:#b87d18;
  --green:#2ecc71; --red:#e74c3c; --blue:#3498db; --purple:#9b59b6;
  --text:#e8eaf0; --text-muted:#7a8099; --text-dim:#4a5068;
}
body { background:var(--bg); color:var(--text); font-family:'DM Sans','Segoe UI',sans-serif; min-height:100vh; }

/* ── HEADER ── */
#header { background:var(--surface); border-bottom:1px solid var(--border); padding:0 24px; position:sticky; top:0; z-index:100; }
#header-inner { display:flex; align-items:center; justify-content:space-between; max-width:1400px; margin:0 auto; }
#logo { padding:14px 0; }
#logo .name { font-size:15px; font-weight:700; color:var(--accent); font-family:'DM Mono',monospace; letter-spacing:-0.02em; }
#logo .sub  { font-size:10px; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; }
#divider { width:1px; height:32px; background:var(--border); margin:0 16px; flex-shrink:0; }
#nav { display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#nav::-webkit-scrollbar { display:none; }
.nav-btn { background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; padding:18px 13px; font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:6px; transition:color .15s; font-family:inherit; white-space:nowrap; flex-shrink:0; }
.nav-btn.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.nav-btn:hover:not(.active) { color:var(--text); }
#header-actions { display:flex; gap:8px; flex-shrink:0; align-items:center; }
.hdr-btn { background:none; border:1px solid var(--border); border-radius:4px; color:var(--text-muted); padding:6px 12px; cursor:pointer; font-size:12px; display:flex; align-items:center; gap:6px; font-family:inherit; transition:all .15s; white-space:nowrap; }
.hdr-btn:hover { border-color:var(--accent); color:var(--accent); }
#save-status { font-size:11px; color:var(--text-dim); font-family:'DM Mono',monospace; }

/* ── LOADER ── */
#page-loader { position:fixed; inset:0; background:var(--bg); z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; }
.loader-spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loader-text { font-size:12px; color:var(--text-muted); font-family:'DM Mono',monospace; }

/* ── CONTENT ── */
#content { max-width:1400px; margin:0 auto; padding:24px; }
.tab-pane { display:none; } .tab-pane.active { display:block; }

/* ── STAT CARDS ── */
.card-row { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:16px 20px; flex:1; min-width:130px; }
.stat-card.warn { border-color:rgba(231,76,60,.4); }
.stat-card .lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.stat-card .val { font-size:22px; font-weight:700; font-family:'DM Mono',monospace; }
.stat-card .sub { font-size:11px; color:var(--text-dim); margin-top:4px; }
.section-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:10px; margin-top:8px; }

/* ── TABLE ── */
.tbl-wrap { background:var(--surface); border:1px solid var(--border); border-radius:6px; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; font-family:'DM Mono',monospace; }
thead tr { background:var(--bg); }
th { padding:9px 10px; text-align:left; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; border-bottom:1px solid var(--border); white-space:nowrap; }
th.r { text-align:right; }
td { padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.td-r { text-align:right; } .td-muted { color:var(--text-muted); } .td-dim { color:var(--text-dim); }
.td-ellipsis { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── FILTERS ── */
.filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
input,select,textarea { background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text); padding:7px 10px; font-size:13px; font-family:'DM Mono',monospace; outline:none; width:100%; transition:border-color .15s; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
select { cursor:pointer; } select option { background:var(--surface); }
.filter-sm { padding:6px 10px; font-size:12px; }
textarea { resize:vertical; min-height:60px; font-size:12px; }

/* ── BUTTONS ── */
.btn-primary { background:var(--accent); border:none; border-radius:4px; color:#000; padding:8px 18px; cursor:pointer; font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:6px; font-family:inherit; transition:background .15s; }
.btn-primary:hover { background:var(--accent-dim); }
.btn-ghost { background:none; border:1px solid var(--border); border-radius:4px; color:var(--text-muted); padding:8px 16px; cursor:pointer; font-size:13px; font-family:inherit; transition:border-color .15s, color .15s; }
.btn-ghost:hover { border-color:var(--text-muted); color:var(--text); }
.btn-icon { background:none; border:none; cursor:pointer; padding:3px; color:var(--text-dim); transition:color .15s; }
.btn-icon:hover { color:var(--text); } .btn-icon.del:hover { color:var(--red); }
.btn-sm { padding:5px 12px; font-size:12px; }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:1000; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--surface); border:1px solid var(--border-light); border-radius:8px; padding:24px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; }
.modal-box.wide { max-width:740px; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-title { font-size:16px; font-family:'DM Mono',monospace; }
.form-row { display:flex; gap:12px; margin-bottom:12px; }
.form-field { display:flex; flex-direction:column; gap:4px; flex:1; }
.form-field label { font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

/* ── BADGES ── */
.badge { padding:2px 10px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; display:inline-block; }
.badge-green  { background:#1a3a2a; color:var(--green); border:1px solid rgba(46,204,113,.27); }
.badge-blue   { background:#1a2d3a; color:var(--blue);  border:1px solid rgba(52,152,219,.27); }
.badge-yellow { background:#2a2a1a; color:var(--accent); border:1px solid rgba(232,160,32,.27); }
.badge-red    { background:#3a1a1a; color:var(--red);   border:1px solid rgba(231,76,60,.27); }
.badge-gray   { background:var(--surface); color:var(--text-muted); border:1px solid var(--border); }

/* ── WARN BOX ── */
.warn-box { background:#2a1a1a; border:1px solid rgba(231,76,60,.27); border-radius:6px; padding:12px 16px; margin-bottom:20px; }
.warn-box .warn-title { display:flex; gap:8px; align-items:center; margin-bottom:6px; font-size:12px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.06em; }
.warn-box .warn-item { font-size:12px; color:#f08080; padding-left:23px; margin-top:2px; }

/* ── SMS GROUP ── */
.sms-group { background:var(--surface); border:1px solid var(--border); border-radius:6px; margin-bottom:12px; overflow:hidden; }
.sms-group.neg { border-color:rgba(231,76,60,.35); }
.sms-header { padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

/* ── JVP PANEL ── */
.jvp-panel { background:var(--surface); border:1px solid var(--border); border-radius:6px; margin-bottom:8px; overflow:hidden; }
.jvp-panel.open { border-color:var(--border-light); }
.jvp-panel-hdr { padding:14px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; user-select:none; transition:background .12s; flex-wrap:wrap; }
.jvp-panel-hdr:hover { background:rgba(255,255,255,.03); }
.jvp-panel-body { display:none; border-top:1px solid var(--border); }
.jvp-panel.open .jvp-panel-body { display:block; }
.chevron { transition:transform .2s; flex-shrink:0; }
.jvp-panel.open .chevron { transform:rotate(90deg); }
.panel-tabs { display:flex; border-bottom:1px solid var(--border); }
.panel-tab { background:none; border:none; border-bottom:2px solid transparent; padding:9px 16px; font-size:12px; color:var(--text-muted); cursor:pointer; font-family:inherit; transition:color .12s; }
.panel-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.year-chips { display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--border); }
.year-chip { padding:3px 12px; border-radius:20px; font-size:11px; font-weight:700; cursor:pointer; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); transition:all .12s; font-family:'DM Mono',monospace; }
.year-chip.active { background:var(--accent); color:#000; border-color:var(--accent); }

/* ── INV BADGES ── */
.inv-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:.05em; }
.inv-badge-paid    { background:#1a3a2a; color:var(--green); }
.inv-badge-partial { background:#2a2a1a; color:var(--accent); }
.inv-badge-open    { background:#3a1a1a; color:var(--red); }

/* ── SETTINGS ── */
.settings-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:20px; margin-bottom:16px; }
.settings-title { font-size:11px; color:var(--accent); font-family:'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; font-weight:700; }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.tag { display:inline-flex; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:4px 10px; font-size:12px; font-family:'DM Mono',monospace; }
.tag-del { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; line-height:1; padding:0; }
.tag-del:hover { color:var(--red); }
.tag-add { display:flex; gap:6px; }
.tag-add input { flex:1; }

/* ── SMS OBRAČUN ── */
.sms-calc-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:20px; margin-bottom:16px; }
.sms-calc-title { font-size:11px; color:var(--accent); font-family:'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; font-weight:700; }
.upload-zone { border:2px dashed var(--border-light); border-radius:6px; padding:32px 20px; text-align:center; cursor:pointer; transition:all .2s; }
.upload-zone:hover,.upload-zone.drag { border-color:var(--accent); background:rgba(232,160,32,.04); }
.price-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; }
.price-row { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:8px 12px; }
.price-net-label { flex:1; font-size:12px; font-family:'DM Mono',monospace; }
.price-input { width:90px; background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:5px 8px; color:var(--accent); font-family:'DM Mono',monospace; font-size:12px; text-align:right; outline:none; }
.price-input:focus { border-color:var(--accent); }
.sms-report-tbl { width:100%; border-collapse:collapse; font-size:11px; font-family:'DM Mono',monospace; }
.sms-report-tbl th { background:var(--bg); padding:7px 10px; text-align:right; font-size:10px; color:var(--text-muted); letter-spacing:.07em; border-bottom:1px solid var(--border); white-space:nowrap; }
.sms-report-tbl th:first-child { text-align:left; }
.sms-report-tbl td { padding:7px 10px; border-bottom:1px solid var(--border); text-align:right; }
.sms-report-tbl td:first-child { text-align:left; font-family:'DM Sans',sans-serif; font-weight:700; font-size:12px; }
.sms-report-tbl tr.grand-total td { background:rgba(232,160,32,.07); font-weight:700; border-top:2px solid var(--border-light); color:var(--accent); }
.sms-report-tbl tr.grand-total td:first-child { color:var(--text); }

/* ── MISC ── */
.c-green{color:var(--green)}.c-red{color:var(--red)}.c-blue{color:var(--blue)}.c-accent{color:var(--accent)}.c-muted{color:var(--text-muted)}.c-dim{color:var(--text-dim)}
.fw7{font-weight:700}.mono{font-family:'DM Mono',monospace}
.empty-state{padding:40px;text-align:center;color:var(--text-dim);font-size:13px}
.meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.meta-info{font-size:11px;color:var(--text-muted)}
#dnd-overlay{display:none;position:fixed;inset:0;background:rgba(14,15,17,.92);z-index:2000;align-items:center;justify-content:center;flex-direction:column;gap:16px;border:3px dashed var(--accent);pointer-events:none}
#dnd-overlay.active{display:flex}
#dnd-overlay .dnd-icon{font-size:48px}
#dnd-overlay .dnd-text{font-size:18px;font-weight:700;color:var(--accent);font-family:'DM Mono',monospace}

@media(max-width:640px){
  #header-inner{flex-wrap:wrap}
  #header-actions{padding-bottom:8px}
  #content{padding:14px 12px}
  .card-row{flex-direction:column}
  .form-row{flex-direction:column}
  .modal-box{padding:16px}
}

/* ═══ Leafcode Financije — dodano ═══ */
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
#logo a { text-decoration:none; }
#logo .name a { color:var(--accent); }
.hdr-user { font-size:12px; color:var(--text-muted); }
.hdr-form { display:inline; }
.nav-link { text-decoration:none !important; }
.projekt-oznaka { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
.tocka { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.oznaka-vrste { font-size:10px; padding:2px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.oznaka-privatni { background:#2a1f2e; color:#c39bd3; border:1px solid rgba(155,89,182,.35); }
.oznaka-zajednicki { background:#1a2d3a; color:var(--blue); border:1px solid rgba(52,152,219,.35); }
.oznaka-citanje { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }

/* Poruke (flash) */
.poruke { margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.poruka { padding:10px 14px; border-radius:6px; font-size:13px; background:#2a1a1a; border:1px solid rgba(231,76,60,.35); color:#f08080; white-space:pre-line; }
.poruka.ok { background:#1a2a20; border-color:rgba(46,204,113,.35); color:var(--green); }

/* Početna — kartice projekata */
.projekti-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin-bottom:24px; }
.projekt-kartica { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:18px 20px; cursor:pointer; transition:border-color .15s; border-left-width:4px; display:block; color:var(--text); text-decoration:none !important; }
.projekt-kartica:hover { border-color:var(--border-light); }
.projekt-kartica.arhiviran { opacity:.55; }
.pk-naslov { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.pk-naziv { font-size:16px; font-weight:700; }
.pk-brojke { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.pk-brojke .lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.pk-brojke .val { font-size:15px; font-weight:700; font-family:'DM Mono',monospace; }
.pk-dno { margin-top:12px; font-size:11px; color:var(--text-dim); display:flex; justify-content:space-between; }

/* Dashboard — graf i alati */
.alatna-traka { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.alatna-traka .razmak { flex:1; }
.graf-wrap { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:16px 16px 8px; margin-bottom:16px; }
.graf-legenda { display:flex; gap:16px; font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.graf-legenda span::before { content:''; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; background:currentColor; }
.graf { width:100%; height:200px; display:block; }
.graf text { font-family:'DM Mono',monospace; font-size:10px; fill:var(--text-dim); }
.dvije-kolone { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dvije-kolone > div { min-width:0; }

/* Forme (admin, uvoz, prijava) */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:16px; }
.panel h2 { font-size:13px; color:var(--accent); font-family:'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.panel p, .panel li { font-size:13px; color:var(--text-muted); line-height:1.6; }
.panel ol, .panel ul { padding-left:20px; margin:6px 0; }
.kvacice { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; }
.kvacice label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400; color:var(--text); font-size:13px; }
.kvacice input[type=checkbox], .kvacice input[type=radio] { width:auto; }
input[type=color] { padding:2px; height:34px; }
details.uredi { border-top:1px solid var(--border); }
details.uredi > summary { cursor:pointer; padding:12px 0; list-style:none; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
details.uredi > summary::-webkit-details-marker { display:none; }
details.uredi[open] > summary { color:var(--accent); }
details.uredi > form { padding:4px 0 16px; }
.login-box { max-width:380px; margin:10vh auto 0; }
.login-box .panel { padding:28px; }
.login-box .form-field { margin-bottom:12px; }
.login-box button { width:100%; justify-content:center; margin-top:8px; }

/* Uvoz */
.uvoz-rezultat table td, .uvoz-rezultat table th { font-size:12px; }
.upozorenja-lista { max-height:260px; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:10px 14px; font-size:12px; font-family:'DM Mono',monospace; color:#f0c080; }
.upozorenja-lista div { padding:2px 0; }
.korak { display:none; } .korak.aktivan { display:block; }

/* Modal: popis otvorenih faktura */
.izbor-lista { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.izbor-lista button { text-align:left; justify-content:space-between; display:flex; width:100%; }

@media(max-width:860px){ .dvije-kolone{grid-template-columns:1fr} }

@media print {
  #header, .alatna-traka, .no-print, .sms-calc-section { display:none !important; }
  body { background:#fff; color:#000; }
  .tbl-wrap, .sms-report-tbl th, .sms-report-tbl td { background:#fff !important; color:#000 !important; border-color:#ccc !important; }
}
.panel-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.panel-tabs::-webkit-scrollbar { display:none; }
.panel-tab { flex-shrink:0; white-space:nowrap; }
.card-row .stat-card { min-width:180px; }

/* Grafovi — boje provjerene validatorom (dataviz) na tamnoj podlozi #16181c: CVD ΔE ≥ 11 */
:root { --graf-prihod:#27ae60; --graf-odljev:#c0392b; --graf-slobodno:#27ae60; --graf-namjensko:#9b59b6; }
.graf-naslov { font-size:12px; font-weight:700; margin-bottom:6px; }
.graf-legenda .l-prihod::before { background:var(--graf-prihod); }
.graf-legenda .l-odljev::before { background:var(--graf-odljev); }
.graf-legenda .l-slobodno::before { background:var(--graf-slobodno); height:3px; vertical-align:3px; }
.graf-legenda .l-namjensko::before { background:var(--graf-namjensko); height:3px; vertical-align:3px; }
.graf-legenda span { color:var(--text-muted); }
.hover-tocka .kriz { opacity:0; }
.hover-tocka:hover .kriz { opacity:1; }
.graf-tip { position:fixed; z-index:3000; pointer-events:none; display:none; white-space:pre-line; background:var(--surface); border:1px solid var(--border-light);
  border-radius:6px; padding:8px 10px; font-size:12px; font-family:'DM Mono',monospace; color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,.4); max-width:280px; }
.h-stupci { display:flex; flex-direction:column; gap:6px; padding:4px 0 8px; }
.h-red { display:grid; grid-template-columns:minmax(80px,32%) 1fr auto; gap:10px; align-items:center; font-size:12px; }
.h-naziv { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); }
.h-traka { height:12px; display:block; }
.h-traka span { display:block; height:100%; background:var(--graf-odljev); border-radius:0 4px 4px 0; }
.h-iznos { font-family:'DM Mono',monospace; color:var(--text); white-space:nowrap; }
.btn-ghost.active { border-color:var(--accent); color:var(--accent); }