/* Prihodi — knjiga prihoda i troškova za stanove.
   Ideja: računovodstvena knjiga u mastilu. Teget mastilo za akcije, mesing za procene,
   dvostruka linija ispod konačnih zbirova (računovodstveni znak za "ukupno"). */
:root{
  --bg:#f2f3ef; --card:#ffffff; --sunk:#f7f8f5; --ink:#1a2238; --mut:#687083; --line:#e2e4de; --line2:#cfd3ca;
  --acc:#1d2b53; --acc-ink:#ffffff; --acc-soft:#e7eaf4; --brass:#a87a22; --brass-soft:#f6eedc;
  --hero:#1d2b53; --hero-ink:#ffffff; --hero-mut:#b9c2dc;
  --pos:#1d7a4c; --neg:#b42318; --warn:#8a5300;
  --ok-bg:#e3f3ea; --ok-fg:#155c39; --warn-bg:#fdf1d8; --warn-fg:#7a4a00; --err-bg:#fbe6e3; --err-fg:#8f1d13;
  --r:14px; --r-s:9px;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Public Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --shadow:0 1px 0 rgba(26,34,56,.04),0 6px 24px -12px rgba(26,34,56,.18);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1420; --card:#171d2b; --sunk:#131927; --ink:#e7e9ef; --mut:#9aa2b5; --line:#252d3e; --line2:#334055;
  --acc:#a9baf2; --acc-ink:#0f1420; --acc-soft:#212b45; --brass:#e0b45c; --brass-soft:#33290f;
  --hero:#24315c; --hero-ink:#ffffff; --hero-mut:#b3bedf;
  --pos:#5cc890; --neg:#ff8a7e; --warn:#f2b54a;
  --ok-bg:#12301f; --ok-fg:#8fe0b3; --warn-bg:#352a0f; --warn-fg:#f4c86d; --err-bg:#3a1714; --err-fg:#ffaaa1;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 8px 28px -14px rgba(0,0,0,.6); color-scheme:dark;
}}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
h1,h2{font-family:var(--f-display);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:28px;font-weight:700;margin:0;line-height:1.15}
h2{font-size:17px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
small{font-size:12.5px}
.muted{color:var(--mut)} .neg{color:var(--neg)!important} .pos{color:var(--pos)}
.hint{color:var(--mut);font-size:13.5px;margin:0 0 14px;max-width:78ch}

/* ---------- Gornja traka ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:10px max(20px,env(safe-area-inset-left)) 10px max(20px,env(safe-area-inset-right));
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink)} .brand:hover{text-decoration:none}
.mark{width:22px;height:22px;border-radius:7px;background:var(--acc);position:relative;flex:none}
.mark::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--brass);right:4px;bottom:4px;box-shadow:0 0 0 2px var(--acc)}
.top nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.top nav a{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;color:var(--mut);font-weight:500;white-space:nowrap}
.top nav a:hover{color:var(--ink);background:var(--sunk);text-decoration:none}
.top nav a.on{color:var(--acc);background:var(--acc-soft);font-weight:600}
.top nav svg{width:17px;height:17px;fill:currentColor;flex:none}
.out{color:var(--mut);font-size:13px}

main{max-width:1180px;margin:0 auto;padding:26px max(18px,env(safe-area-inset-right)) 70px max(18px,env(safe-area-inset-left))}

/* ---------- Zaglavlje stranice ---------- */
.head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.period{display:flex;align-items:center;gap:12px}
.nav{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:20px;line-height:1;transition:background .15s}
.nav:hover{background:var(--acc-soft);text-decoration:none}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:3px}
.seg a{padding:6px 15px;border-radius:8px;color:var(--mut);font-weight:500} .seg a:hover{text-decoration:none;color:var(--ink)}
.seg a.on{background:var(--acc);color:var(--acc-ink)}

/* ---------- Kartice ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .grid2>*{min-width:0} .grid2 .card{margin-bottom:0}

/* ---------- Brojke na vrhu ---------- */
.kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr;gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:3px;min-width:0}
.kpi span{color:var(--mut);font-size:13px;font-weight:500}
.kpi b{font-family:var(--f-display);font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.kpi small{color:var(--mut)}
.kpi.big{background:var(--hero);color:var(--hero-ink);border:0;box-shadow:var(--shadow);padding:18px 22px}
.kpi.big span,.kpi.big small{color:var(--hero-mut)}
.kpi.big b{font-size:36px;align-self:flex-start;padding-bottom:3px;border-bottom:4px double color-mix(in srgb,var(--hero-ink) 55%,transparent)}
.kpi.big b.neg{color:#ffb4ab!important}
.adr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.adr div{display:flex;flex-direction:column;padding-left:8px;border-left:2px solid var(--line)}
.adr small{font-size:11.5px;color:var(--mut);font-weight:600}.adr b{font-size:17px!important}

/* ---------- Novac / zbirovi ---------- */
.flow .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.flow .row:last-child{border-bottom:0}.flow .row b{font-weight:600;white-space:nowrap}
.flow .sub{color:var(--mut);font-size:14px}
.flow .in b{color:var(--pos)}.flow .wait b{color:var(--warn)}.flow .out b{color:var(--neg)}
.flow .total{font-weight:700;font-size:16px;border-top:1px solid var(--ink);border-bottom:0;margin-top:4px;padding-top:11px}
.flow .total b{font-family:var(--f-display);font-size:19px;font-weight:700;border-bottom:4px double var(--ink);padding-bottom:1px}
.catrow{display:flex;align-items:center;gap:12px;padding:7px 0}
.catrow span{width:150px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catrow b{min-width:84px;text-align:right;font-weight:600}
.mini{display:inline-block;width:52px;height:6px;background:var(--line);border-radius:3px;margin-right:7px;vertical-align:middle;overflow:hidden}
.mini div{height:100%;background:var(--acc);border-radius:3px}.mini.wide{flex:1;width:auto;height:8px}.catrow .mini div{background:var(--brass)}

/* ---------- Tabele ---------- */
.tablewrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:600;color:var(--mut);font-size:12.5px;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
tbody tr:hover td{background:var(--sunk)}
th.num,td.num{text-align:right}
tr.tot td{font-weight:700;border-bottom:0;border-top:1px solid var(--ink);background:none!important;padding-top:12px}
tr.tot td:last-child b,tr.tot td.num#sumeur,tr.tot td.num:last-of-type{border-bottom:4px double var(--ink)}
tr.muted td{color:var(--mut)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px;flex:none}
table.edit td{padding:6px}table.edit input:not([type=checkbox]):not([type=color]){min-width:110px}
table.bills input{width:118px;text-align:right}
td.out{font-weight:700;min-width:90px}
td.out.est,td.est{color:var(--brass);font-weight:500;font-style:italic}

/* ---------- Liste ---------- */
.list .item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line)}
.list .item:last-child{border-bottom:0}
.item .l{display:flex;align-items:center;color:var(--ink);min-width:0}.item .l:hover{text-decoration:none}.item .l:hover b{color:var(--acc)}
.item .r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.item .r form{display:inline;margin:0}
.item.cancel{opacity:.5}.item.cancel b{text-decoration:line-through}
.sum{margin:14px 0 0;color:var(--mut);font-size:14px}
.log div{font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}.log div.bad{color:var(--neg)}.log small{color:var(--mut);margin-right:8px}

/* ---------- Oznake ---------- */
.tag,.pill,.src,.miss,.due.soon,.due.late,.innote{display:inline-flex;align-items:center;border-radius:999px;font-size:12px;font-weight:600;padding:3px 10px;border:0;font-family:inherit;line-height:1.3;white-space:nowrap}
.tag{cursor:pointer}
.tag.ok{background:var(--ok-bg);color:var(--ok-fg)}.tag.wait{background:var(--warn-bg);color:var(--warn-fg)}
.pill{background:var(--acc-soft);color:var(--acc)}.pill.okp{background:var(--ok-bg);color:var(--ok-fg)}.pill.warnp{background:var(--warn-bg);color:var(--warn-fg)}
.src{background:var(--acc-soft);color:var(--acc);font-size:11px;padding:1px 8px;margin-left:4px}
.miss{background:var(--warn-bg);color:var(--warn-fg);font-size:11px;padding:1px 8px;margin-left:4px}
.due{font-size:11.5px;color:var(--mut);margin-left:6px;white-space:nowrap;font-weight:500}
.due.soon{background:var(--warn-bg);color:var(--warn-fg);font-size:11px;padding:1px 8px}
.due.late{background:var(--err-bg);color:var(--err-fg);font-size:11px;padding:1px 8px}
.innote{background:var(--warn-bg);color:var(--warn-fg);font-weight:500}
.paidbox{flex-direction:row!important;align-items:center;gap:6px;cursor:pointer;font-size:12px!important;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn-fg)!important;width:max-content}
.paidbox.on{background:var(--ok-bg);color:var(--ok-fg)!important}.paidbox input{width:14px;height:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px}
.filechip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;background:var(--acc-soft);color:var(--acc);border-radius:8px;padding:3px 9px;white-space:nowrap}
.upbtn{display:inline-flex!important;flex-direction:row!important;cursor:pointer;font-size:12px!important;font-weight:600;color:var(--acc)!important;border:1px dashed color-mix(in srgb,var(--acc) 45%,transparent);border-radius:8px;padding:3px 9px;width:max-content}
.upbtn:hover{background:var(--acc-soft)}.upbtn input{display:none}.filecell{white-space:nowrap}

/* ---------- Dugmad i polja ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--acc);color:var(--acc-ink);border:1px solid var(--acc);border-radius:10px;padding:10px 17px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(1.12);text-decoration:none}.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line2)}.btn.ghost:hover{background:var(--sunk);filter:none}
.btn.danger{background:var(--neg);border-color:var(--neg);color:#fff}
button.link{background:none;border:0;color:var(--acc);font:inherit;cursor:pointer;padding:0}button.link:hover{text-decoration:underline}button.link.danger{color:var(--neg)}
.acts{display:flex;gap:14px;align-items:center}.acts form{margin:0}
input,select,textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line2);border-radius:var(--r-s);padding:9px 11px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--mut) 70%,transparent)}
input[type=color]{width:42px;height:36px;padding:3px}input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc)}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500;color:var(--mut)}
label.check{flex-direction:row;align-items:center;gap:10px;color:var(--ink);font-size:15px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}.w2{grid-column:1/-1}
.calc{background:var(--acc-soft);color:var(--acc);border-radius:var(--r-s);padding:11px 14px;font-weight:600}
.actions{display:flex;gap:10px}.del{max-width:760px;text-align:right}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:16px 0 4px;padding:16px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-s)}
.inline-form label{flex:1;min-width:140px}
.filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}.filters input{flex:1;min-width:180px}.filters select{width:auto}
pre.code{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px;overflow-x:auto;font-size:13px;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.rentcell{display:flex;gap:4px}.rentcell input{min-width:80px!important;width:96px}.rentcell select{width:72px}
#rentform input[inputmode]{width:110px;text-align:right}

/* ---------- Mesečni računi ---------- */
.billhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.billhead h2{margin:0}
.ratebox{flex-direction:row!important;align-items:center;gap:8px;font-size:14px!important;color:var(--ink)!important;background:var(--brass-soft);padding:6px 6px 6px 13px;border-radius:11px;font-weight:600}
.ratebox input{width:96px;text-align:right;font-weight:600}

/* ---------- Primljeni računi ---------- */
.inbox{border-color:color-mix(in srgb,var(--acc) 25%,var(--line))}
.inbox .inrow{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;padding:14px 0;border-top:1px solid var(--line)}
.inbox .inrow label{flex:1;min-width:140px}
.inmeta{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.inrow .onlyone{display:none}.inrow.one .onlyone{display:flex}.inrow.one .onlyrec{display:none}
.inact{display:flex;gap:14px;align-items:center}
.dropform label.btn{cursor:pointer;color:var(--ink)}
.recent{margin-top:14px;font-size:13.5px}.recent summary{cursor:pointer;color:var(--mut);font-weight:500}
.recent div{display:flex;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}.recent div span:nth-child(2){flex:1}

/* ---------- Poruke ---------- */
.flash{padding:12px 16px;border-radius:var(--r-s);margin-bottom:12px;font-size:14px;border-left:4px solid}
.flash a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.flash.ok{background:var(--ok-bg);color:var(--ok-fg)}.flash.warn{background:var(--warn-bg);color:var(--warn-fg)}.flash.err{background:var(--err-bg);color:var(--err-fg)}
.duelist>b{display:block;margin-bottom:6px;font-size:15px}
.duelist div{display:flex;gap:12px;padding:4px 0;font-size:13.5px;border-top:1px solid color-mix(in srgb,currentColor 15%,transparent)}
.duelist div span:first-child{flex:1}.duelist div b{min-width:76px;text-align:right}
.duelist>a{display:inline-block;margin-top:6px}

/* ---------- Kalendar ---------- */
.cal{overflow-x:auto;padding:14px}
.calgrid{display:grid;grid-template-columns:132px repeat(var(--days),minmax(36px,1fr));grid-auto-rows:48px;min-width:calc(132px + var(--days)*36px)}
.cname{grid-column:1;display:flex;align-items:center;font-size:13px;font-weight:600;position:sticky;left:0;background:var(--card);z-index:2;padding-right:8px;border-bottom:1px solid var(--line)}
.dh{grid-row:1;text-align:center;font-size:13px;font-weight:600;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line2);line-height:1.15}
.dh small{font-size:10.5px;color:var(--mut);font-weight:500}.dh.we{background:var(--sunk)}
.dh.today{color:var(--acc-ink);background:var(--acc);border-radius:8px 8px 0 0}.dh.today small{color:inherit;opacity:.8}
.cell{border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.cell:hover{background:var(--acc-soft)}
.bk{z-index:1;margin:7px 2px;border-radius:8px;background:var(--c);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;display:flex;flex-direction:column;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.bk:hover{text-decoration:none;filter:brightness(1.1)}
.bk small{font-weight:500;opacity:.85;font-size:10.5px}.bk.cont{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.bk.unpaid{background:repeating-linear-gradient(-45deg,var(--c) 0 8px,color-mix(in srgb,var(--c) 80%,#fff) 8px 16px)}

/* ---------- Prijava ---------- */
.auth{display:grid;place-items:center;min-height:100vh;padding:16px;background:radial-gradient(1200px 500px at 50% -10%,var(--acc-soft),transparent),var(--bg)}
.authbox{width:100%;max-width:370px;display:flex;flex-direction:column;gap:14px;padding:28px;box-shadow:var(--shadow)}
.authbox h1{display:flex;align-items:center;gap:10px;font-size:26px}

/* ---------- Telefon ---------- */
@media (max-width:1000px){.kpis{grid-template-columns:1fr 1fr}.kpi.big{grid-column:1/-1}.kpis .kpi:last-child{grid-column:1/-1}.grid2{grid-template-columns:1fr}}
@media (max-width:720px){
  .top{gap:10px;padding-top:max(10px,env(safe-area-inset-top))}
  .top nav{position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-around;gap:0;overflow:visible;
    background:var(--card);border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  .top nav a{flex-direction:column;gap:2px;padding:5px 2px;font-size:10.5px;flex:1;border-radius:10px;min-width:0}
  .top nav a span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .top nav svg{width:21px;height:21px}
  .brand{flex:1}
  main{padding-top:18px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  h1{font-size:23px}.card{padding:16px}.kpi.big b{font-size:32px}
  .form{grid-template-columns:1fr}
  .list .item{flex-wrap:wrap}.item .r{width:100%;justify-content:space-between}
  .catrow span{width:110px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Za uraditi ---------- */
.headr{display:flex;align-items:center;gap:14px}
.pill.errp{background:var(--err-bg);color:var(--err-fg)}
.todo{padding-bottom:10px}
.tdrow{display:flex;align-items:center;gap:12px;padding:10px 6px;margin:0 -6px;border-top:1px solid var(--line);color:var(--ink);border-radius:8px}
.tdrow:hover{background:var(--sunk);text-decoration:none}
.tdrow i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--mut)}
.tdrow.err i{background:var(--neg);box-shadow:0 0 0 4px var(--err-bg)}.tdrow.warn i{background:var(--brass);box-shadow:0 0 0 4px var(--brass-soft)}
.tdrow span{flex:1;min-width:0}.tdrow.err span{font-weight:600}
.tdrow small{color:var(--mut);white-space:nowrap}.tdrow.err small{color:var(--neg);font-weight:600}
.tdrow::after{content:"";width:7px;height:7px;border-right:2px solid var(--line2);border-top:2px solid var(--line2);transform:rotate(45deg);flex:none;margin-right:4px}
@media (max-width:720px){
  .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card)}
  .headr{width:100%;justify-content:space-between}
  .tdrow{flex-wrap:wrap;row-gap:2px}.tdrow small{order:3;flex-basis:100%;padding-left:20px}.tdrow::after{display:none}
}
table.bills .paidbox input,.paidbox input{width:14px;height:14px;flex:none;padding:0}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}.kpis .kpi:last-child{grid-column:1/-1}}
@media (max-width:720px){.kpi{padding:13px 14px}.kpi b{font-size:19px}.kpi small{font-size:11.5px}.kpi.big b{font-size:32px}}
.inrow.neu .onlyrec{display:flex}