/* theme.css - the look of the app: colors, fonts, sizes, spacing, phone layout.
   Colors and dark mode: edit the variables in the first three blocks.
   Loads after base.css, so rules here win. Print styles are in print.css. */
:root{--bg:#f5f6f8;--card:#fff;--ink:#17202a;--mute:#697586;--line:#e4e8ee;--in:#16794c;--out:#c2415a;--acc:#2b5aa8;--onacc:#fff;--soft:#eef2f8;--r:12px;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1319;--card:#161d25;--ink:#e8edf3;--mute:#93a1b2;--line:#252f3a;--in:#4cc38a;--out:#f2829a;--acc:#7eaaf0;--onacc:#0b1626;--soft:#1c2631;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1319;--card:#161d25;--ink:#e8edf3;--mute:#93a1b2;--line:#252f3a;--in:#4cc38a;--out:#f2829a;--acc:#7eaaf0;--onacc:#0b1626;--soft:#1c2631;color-scheme:dark}
body{font:14.5px/1.5 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,.tot b,.bal b{font-family:inherit}
h1{font-size:20px;font-weight:700;letter-spacing:-.01em}
h2{font-size:15px;font-weight:600;display:block;margin:0 0 12px}
.top{align-items:center;margin:2px 0 18px}
.top small{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;font-size:12.5px}
#who{display:inline-block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.top .msg{font-size:13px}
.ver{font-size:11px;padding:1px 6px;vertical-align:middle}

/* cards, tiles */
.card{border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:none}
.tot{gap:12px}
.tot div{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.tot div:nth-child(n){border-top-color:var(--line)}
.tot span{font-size:12px;font-weight:500;color:var(--mute)}
.tot b{font-size:20px;font-weight:600;line-height:1.35}
.bal{background:var(--acc);color:var(--onacc);border-radius:var(--r);padding:16px 18px}
.bal span{font-size:13px}.bal b{font-size:24px;font-weight:600;color:inherit}.bal b.in,.bal b.out{color:inherit}
.note,.net{border-radius:10px;font-size:13px}
.net{background:var(--acc);color:var(--onacc)}
#vgw{border-radius:var(--r);padding:10px 14px}

/* forms */
label{font-size:12.5px;font-weight:500;color:var(--mute);margin:12px 0 5px}
input,select{height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:14.5px}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
input[type=checkbox],input.sel{width:16px;height:16px;padding:0;accent-color:var(--acc);box-shadow:none}
input[type=file]{height:auto;padding:8px 10px}
.seg{gap:8px}
.seg button{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:600}
.seg button.on.i{background:color-mix(in srgb,var(--in) 10%,transparent);border-color:var(--in)}
.seg button.on.o{background:color-mix(in srgb,var(--out) 10%,transparent);border-color:var(--out)}

/* buttons */
.btn{min-height:40px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:600;margin-top:14px;background:var(--acc);color:var(--onacc)}
.btn.ghost{background:transparent;color:var(--acc);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft)}
.btn:disabled{opacity:.45;cursor:default}
.lk{color:var(--acc);text-decoration:none;font-weight:500;padding:4px 8px;min-height:30px;border-radius:6px}
.lk:hover{background:var(--soft)}
.chips{gap:6px}
.chips button{min-height:34px;padding:0 14px;font-size:13px}
.chips button.on{background:var(--acc);color:var(--onacc);border-color:var(--acc)}
.selbar{margin:12px 0 4px}.selbar .btn{min-height:34px;padding:0 12px;font-size:13px}
.inl .btn{margin-top:0}

/* tables */
table{font-size:13.5px}
th{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);padding:10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:nth-child(even){background:none}
tbody tr:hover{background:var(--soft)}
tfoot th{border-top:1px solid var(--ink);background:var(--soft)}
.bar{height:6px}
#ch h2,#ms h2,#bc h2,#rp h2{color:var(--ink)}
#ms thead th,#rp thead th,#bc thead th{background:transparent}
#ms tfoot th{background:var(--soft)}
.bcd{border-radius:10px}.bcd.in,.bcd.out{border-color:var(--line)}
.bcd.in summary{background:color-mix(in srgb,var(--in) 9%,var(--card))}
.bcd.out summary{background:color-mix(in srgb,var(--out) 8%,var(--card))}

/* records: filters + pager */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.filters .fq{grid-column:1/-1}
.recs{margin-top:8px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px}
.pager span{font-size:13px;color:var(--mute)}
.pager .btn{margin-top:0;min-height:34px;padding:0 14px}

/* sign-in / loading cards */
.gate{margin:14vh auto 0;padding:28px 24px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.gate h1{font-size:22px}
.lockov .gate{margin-top:10vh}

/* sidebar (desktop) */
nav{background:var(--card);border:1px solid var(--line);border-radius:14px;gap:2px}
nav button{flex-direction:row;align-items:center;gap:10px;padding:9px 11px;font-size:14px;font-weight:500;border-radius:8px;color:var(--mute)}
nav button:hover{background:var(--soft);color:var(--ink)}
nav button.on{background:var(--soft);color:var(--acc);font-weight:600}
nav .ico{width:18px;height:18px;flex:none}
@media(min-width:701px){
  nav{left:16px;top:16px;bottom:16px;width:204px;padding:10px}
  main{padding:20px 28px 28px 240px}
  #app>section,#app>.top{max-width:980px}
}

/* floating add button + modals */
.fab{width:48px;height:48px;font-size:24px;line-height:1;display:grid;place-items:center;background:var(--acc);color:var(--onacc);box-shadow:0 6px 16px rgba(20,30,50,.25)}
.modal{background:rgba(10,15,22,.55)}

/* phones */
@media(max-width:700px){
  body{font-size:14px}
  main{padding:12px}
  #app>.top{padding-top:8px;flex-wrap:wrap}
  .top small{justify-content:flex-start}
  .card{padding:14px}
  .tot b{font-size:18px}
  /* records and latest records become compact cards instead of a wide table */
  #list thead,#hl thead{display:none}
  #list table,#list tbody,#hl table,#hl tbody{display:block;min-width:0}
  #list tbody tr,#hl tbody tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"cat amt" "note note" "date rcpt" "act act";gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  #list tbody tr:hover,#hl tbody tr:hover{background:none}
  #list tbody td,#hl tbody td{display:block;padding:0;border:0;min-width:0}
  #list tbody td:nth-child(1),#hl tbody td:nth-child(1){grid-area:date;font-size:13px}
  #list tbody td:nth-child(2),#hl tbody td:nth-child(2){grid-area:cat;font-weight:600}
  #list tbody td:nth-child(3),#hl tbody td:nth-child(3){grid-area:note;color:var(--mute);font-size:13px}
  #list tbody td:nth-child(4),#hl tbody td:nth-child(4){grid-area:amt;text-align:right;font-weight:600}
  #list tbody td:nth-child(5),#hl tbody td:nth-child(5){grid-area:rcpt;text-align:right}
  #list tbody td:nth-child(6){grid-area:act;margin-top:2px}
  #list tbody td.empty,#hl tbody td.empty{grid-area:1/1/2/3}
  .pager{justify-content:center}.pager span{order:-1;width:100%;text-align:center}.pager .btn{flex:1}
}

/* release notes (opened from the version badge) */
.rn-h{font-size:14px;font-weight:600;margin:16px 0 4px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.rn-h small{font-weight:400;color:var(--mute);font-size:12px}
.rn{margin:0;padding-left:18px;color:var(--ink)}.rn li{margin:3px 0}
.ver:hover{border-color:var(--acc);color:var(--acc)}

/* ===== bottom tab bar (phones) ===== */
.tabbar,#navscrim{display:none}
.lockov{z-index:70}
@media(max-width:700px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line)}
  .tabbar button{flex:1;min-width:0;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;border:0;border-radius:10px;background:none;color:var(--mute);font:inherit;font-size:11.5px;font-weight:500;cursor:pointer}
  .tabbar button.on{background:var(--soft);color:var(--acc);font-weight:600}
  .tabbar button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.nav-open #navscrim{display:block;position:fixed;inset:0;z-index:49}
  .nav-toggle{display:none!important}
  .fab{display:none!important}
  /* the four main tabs live in the bar, so the drawer only lists the rest */
  nav button[data-t=home],nav button[data-t=add],nav button[data-t=list],nav button[data-t=rep]{display:none}
  nav{bottom:0;padding:16px 12px calc(76px + env(safe-area-inset-bottom,0px))}
  main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  #toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

/* summary group filter */
#vgw{padding:0;border:0;background:none;margin:0 0 12px;border-radius:0}
#vgw select{max-width:360px}
#vgn{margin-top:6px;font-size:12.5px;color:var(--mute)}

/* help link in the menu + first-run banner */
nav a.navlink{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-top:auto;font-size:14px;font-weight:500;border-radius:8px;color:var(--mute);text-decoration:none}
nav a.navlink:hover{background:var(--soft);color:var(--ink)}
nav a.navlink .ico{width:18px;height:18px;flex:none}
.note a{color:var(--acc);font-weight:600}