/* ============ THEME TOKENS ============ */
:root{
  --bg:#070b16; --bg-grad1:#0b1430; --bg-grad2:#0a0f1f;
  --surface:#0f172a; --surface-2:#131d36; --surface-3:#1a2748;
  --border:rgba(148,163,184,.13); --border-2:rgba(148,163,184,.22);
  --ink:#eaf0ff; --ink-2:#aeb9d6; --muted:#7886a8;
  --accent:#22d3ee; --accent-2:#3b82f6; --accent-soft:#38bdf8;
  --green:#34d399; --green-d:#10b981; --red:#fb7185; --red-d:#f43f5e;
  --amber:#fbbf24; --purple:#a78bfa; --pink:#f472b6; --teal:#2dd4bf;
  --glow-accent:0 0 22px rgba(34,211,238,.35);
  --shadow:0 1px 0 rgba(255,255,255,.02),0 10px 30px rgba(2,6,23,.55);
  --shadow-lg:0 18px 50px rgba(2,6,23,.7);
  --radius:18px; --radius-sm:12px; --ease:cubic-bezier(.34,1.2,.36,1);
  --ease2:cubic-bezier(.4,0,.2,1);
  --sidebar:248px;
  --grid:rgba(148,163,184,.10);
}
html[data-theme="light"]{
  --bg:#eef2fb; --bg-grad1:#dbe6ff; --bg-grad2:#e9eefb;
  --surface:#ffffff; --surface-2:#f4f7fd; --surface-3:#eaf0fa;
  --border:#e6ecf5; --border-2:#d6deec;
  --ink:#0f1b34; --ink-2:#41506e; --muted:#69779a;
  --accent:#0891b2; --accent-2:#2563eb; --accent-soft:#3b82f6;
  --green:#16a34a; --green-d:#15803d; --red:#e11d48; --red-d:#be123c;
  --amber:#d97706; --purple:#7c3aed; --pink:#db2777; --teal:#0d9488;
  --glow-accent:0 0 0 rgba(0,0,0,0);
  --shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px rgba(15,23,42,.08);
  --shadow-lg:0 18px 44px rgba(15,23,42,.14);
  --grid:rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,Segoe UI,Arial,sans-serif;color:var(--ink);
  background:
    radial-gradient(1100px 560px at 88% -8%,var(--bg-grad1) 0,transparent 60%),
    radial-gradient(900px 520px at -8% 4%,var(--bg-grad2) 0,transparent 55%),
    var(--bg);
  background-attachment:fixed;
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ============ APP SHELL ============ */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:.2rem;padding:1.1rem .9rem;
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(10,15,31,.92));
  border-right:1px solid var(--border);backdrop-filter:blur(14px);z-index:40}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,247,253,.9))}
.brand{display:flex;align-items:center;gap:.7rem;padding:.5rem .65rem 1.1rem;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.brand .logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 34px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--glow-accent);color:#04121b}
.brand .logo svg{width:19px;height:19px}
.brand small{display:block;font-weight:500;font-size:.7rem;color:var(--muted);letter-spacing:.02em}
.side-nav{display:flex;flex-direction:column;gap:.18rem;margin-top:.2rem}
.side-nav a{position:relative;display:flex;align-items:center;gap:.75rem;padding:.62rem .7rem;border-radius:12px;
  color:var(--ink-2);text-decoration:none;font-size:.93rem;font-weight:500;
  transition:color .2s var(--ease2),background .2s var(--ease2),transform .15s var(--ease2)}
.side-nav a .ic{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;color:var(--muted);transition:color .2s}
.side-nav a .ic svg{width:20px;height:20px}
.side-nav a:hover{color:var(--ink);background:rgba(148,163,184,.09);transform:translateX(2px)}
.side-nav a:hover .ic{color:var(--accent)}
.side-nav a.active{color:#04121b;font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));box-shadow:var(--glow-accent)}
.side-nav a.active .ic{color:#04121b}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.55rem;padding:.4rem .3rem .2rem}
.theme-toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);font-size:.82rem;cursor:pointer;font-family:inherit;
  transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--border-2);color:var(--ink)}
.theme-toggle svg{width:16px;height:16px}

.content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
/* top bar */
.topbar{position:sticky;top:0;z-index:38;display:flex;align-items:center;gap:.9rem;row-gap:.6rem;flex-wrap:wrap;
  padding:.8rem 1.6rem;border-bottom:1px solid var(--border);
  background:rgba(7,11,22,.78);backdrop-filter:blur(14px) saturate(140%)}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.78)}
.topbar .page-title{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.topbar .page-title .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.spacer{flex:1 1 auto}
.month-bar{display:flex;align-items:center;gap:.55rem;flex:0 0 auto;flex-wrap:wrap}
.month-bar form{margin:0;display:flex;align-items:center;gap:.4rem}
.month-bar label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.month-bar select{min-width:128px}
.month-bar .yr{width:84px;text-align:center}
.mb-sep{width:1px;height:26px;background:var(--border-2);margin:0 .15rem;border-radius:1px}
.topbar .btn.sm{white-space:nowrap}
.topbar .btn.sm.icon{padding:.45rem .58rem;font-size:.95rem;line-height:1}
@media(max-width:720px){.mb-sep{display:none}}
.topbar select,.topbar input{padding:.5rem .65rem;border-radius:10px;border:1px solid var(--border-2);
  background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:.86rem;transition:.2s var(--ease2)}
.topbar select:focus,.topbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.topbar option{color:#0f1b34}

main{padding:1.7rem 1.6rem 2.4rem;max-width:1360px;width:100%;margin:0 auto;flex:1}

/* ============ CARDS / ENTRANCE ============ */
.card{position:relative;background:linear-gradient(180deg,var(--surface),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.6rem;margin-bottom:1.3rem;
  box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(148,163,184,.18),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.5}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.card h2{margin:.05rem 0 .25rem;font-size:1.22rem;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:.55rem}
.card>h2:not(:last-child){margin-bottom:1rem}
.card-sub{color:var(--muted);font-size:.86rem;margin:-.1rem 0 1rem}
main>*{animation:fadeInUp .55s var(--ease2) both}
main>*:nth-child(1){animation-delay:.02s}main>*:nth-child(2){animation-delay:.07s}
main>*:nth-child(3){animation-delay:.12s}main>*:nth-child(4){animation-delay:.17s}
main>*:nth-child(5){animation-delay:.22s}main>*:nth-child(6){animation-delay:.27s}
main>*:nth-child(7){animation-delay:.32s}main>*:nth-child(8){animation-delay:.37s}
main>*:nth-child(n+9){animation-delay:.42s}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

h2{margin:.1rem 0 1.1rem;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
h3{margin:1.5rem 0 .7rem;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}

/* ============ TABLES ============ */
table{width:100%;border-collapse:collapse}
th,td{padding:.72rem .7rem;text-align:left;border-bottom:1px solid var(--border);font-size:.95rem}
th{color:var(--muted);font-weight:600;font-size:.73rem;text-transform:uppercase;letter-spacing:.06em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace}
tbody tr{transition:background .18s var(--ease2)}
tbody tr:hover{background:rgba(56,189,248,.06)}
tbody tr.row-paid td{background:rgba(52,211,153,.10)}
tbody tr.row-paid td:first-child{box-shadow:inset 3px 0 0 var(--green)}
tbody tr.row-paid:hover td{background:rgba(52,211,153,.16)}
tfoot td{border-top:1px solid var(--border-2);border-bottom:none}
/* horizontal scroll wrapper so wide tables never clip their controls */
.table-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;margin:0 -.2rem;padding:0 .2rem}
.table-scroll>table{min-width:660px}
/* selects inside tables: keep text from being cut off (e.g. "Not Paid") */
td select{padding:.55rem 1.9rem .55rem .7rem;white-space:nowrap;text-overflow:ellipsis}
.status-sel{min-width:108px}
.cat-sel{min-width:118px}

/* ============ INPUTS ============ */
input[type=text],input[type=number],input[type=date],select,textarea{padding:.62rem .8rem;border:1.5px solid var(--border-2);
  border-radius:11px;font-size:.95rem;width:100%;font-family:inherit;background:var(--surface-2);color:var(--ink);
  transition:border-color .18s var(--ease2),box-shadow .18s var(--ease2),background .18s var(--ease2)}
input:hover,select:hover{border-color:var(--accent-soft)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(34,211,238,.16);background:var(--surface)}
input[type=number],input.num{text-align:right;font-family:'JetBrains Mono',monospace}
input::placeholder{color:var(--muted)}
input:disabled{opacity:.6;cursor:not-allowed}
select option{color:#0f1b34;background:#fff}
input[type=checkbox]{width:auto;accent-color:var(--accent);transform:scale(1.15)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#04121b;border:none;padding:.7rem 1.3rem;border-radius:12px;font-size:.94rem;font-weight:700;
  font-family:inherit;cursor:pointer;text-decoration:none;box-shadow:0 6px 18px rgba(34,211,238,.28);
  transition:transform .15s var(--ease),box-shadow .2s var(--ease2),filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(34,211,238,.4);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.gray{background:linear-gradient(135deg,#475569,#64748b);color:#fff;box-shadow:0 6px 18px rgba(71,85,105,.3)}
.btn.red{background:linear-gradient(135deg,var(--red-d),var(--red));color:#fff;box-shadow:0 6px 18px rgba(244,63,94,.3)}
.btn.green{background:linear-gradient(135deg,var(--green-d),var(--green));color:#04121b;box-shadow:0 6px 18px rgba(16,185,129,.32)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--border-2);box-shadow:none}
.btn.ghost:hover{color:var(--ink);border-color:var(--accent);background:rgba(34,211,238,.08)}
.btn.sm{padding:.42rem .75rem;font-size:.82rem;border-radius:9px}

/* ============ STAT CARDS ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.stat{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.2rem 1.2rem;
  box-shadow:var(--shadow);animation:popIn .5s var(--ease) both;container-type:inline-size;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.stat .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:.4rem}
/* value auto-scales to the card width so large JMD figures never clip */
.stat .val{font-size:1.55rem;font-size:clamp(.95rem,8.5cqw,1.6rem);font-weight:800;margin-top:.45rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;line-height:1.15;
  font-family:'JetBrains Mono',monospace}
.stat .foot{margin-top:.35rem;font-size:.78rem;color:var(--muted)}
.stat .spark{position:absolute;right:-6px;bottom:-6px;width:84px;height:46px;opacity:.5}
.pos{color:var(--green)}.neg{color:var(--red)}
.c-income{color:var(--green)!important}.c-expense{color:var(--red)!important}.c-saving{color:var(--accent)!important}
.stat.s-income{border-top:2px solid var(--green)}
.stat.s-expense{border-top:2px solid var(--red)}
.stat.s-saving{border-top:2px solid var(--accent)}
.stat.s-neutral{border-top:2px solid var(--purple)}

.legend-key{display:inline-flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:.7rem}
.legend-key span{display:inline-flex;align-items:center;gap:.4rem}
.legend-key i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* progress bars + ring */
.bar{height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:.5rem}
.bar>i{display:block;height:100%;border-radius:99px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width 1.1s var(--ease)}
.bar.green>i{background:linear-gradient(90deg,var(--green-d),var(--green))}
.bar.red>i{background:linear-gradient(90deg,var(--red-d),var(--red))}

/* ============ MISC ============ */
.flash{background:linear-gradient(135deg,rgba(251,191,36,.16),rgba(251,191,36,.08));border:1px solid rgba(251,191,36,.4);
  color:var(--amber);padding:.7rem 1rem;border-radius:12px;margin-bottom:1rem;box-shadow:var(--shadow);
  animation:slideDown .4s var(--ease2) both;display:flex;align-items:center;gap:.5rem}
.flash.ok{background:linear-gradient(135deg,rgba(52,211,153,.16),rgba(52,211,153,.07));border-color:rgba(52,211,153,.4);color:var(--green)}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.pill{padding:.18rem .6rem;border-radius:99px;font-size:.74rem;font-weight:700;display:inline-flex;align-items:center;gap:.35rem}
.pill.paid{background:rgba(52,211,153,.16);color:var(--green)}.pill.unpaid{background:rgba(251,113,133,.16);color:var(--red)}
.field{margin-bottom:1.1rem}.field label{display:block;font-size:.82rem;color:var(--ink-2);margin-bottom:.4rem;font-weight:500}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.muted{color:var(--muted);font-size:.85rem}
.addrow td{background:var(--surface-2)}
small.hint{color:var(--muted);font-size:.76rem}
canvas{animation:fadeInUp .6s var(--ease2) both}
.chart-wrap{position:relative}

/* info tooltip */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:var(--surface-3);color:var(--muted);font-size:.65rem;font-weight:700;cursor:help;margin-left:.35rem;border:1px solid var(--border-2)}
.tip:hover{color:var(--accent);border-color:var(--accent)}
.tip::after{content:attr(data-tip);position:absolute;bottom:140%;left:50%;transform:translateX(-50%) scale(.95);
  background:#020617;color:#dbe4ff;border:1px solid var(--border-2);padding:.55rem .7rem;border-radius:10px;width:230px;
  font-size:.75rem;font-weight:500;line-height:1.4;text-align:left;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s var(--ease);box-shadow:var(--shadow-lg);z-index:20;letter-spacing:0}
.tip:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:99px;font-size:.72rem;font-weight:600;
  background:rgba(34,211,238,.12);color:var(--accent);border:1px solid rgba(34,211,238,.25)}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}

/* ============ FLOATING SUMMARY PANEL ============ */
.float-summary{position:fixed;top:120px;right:18px;width:242px;z-index:35;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-2);border-radius:16px;padding:1.05rem 1.1rem;
  box-shadow:var(--shadow-lg);transition:transform .35s var(--ease),opacity .3s var(--ease2)}
.float-summary::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,211,238,.35),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.fs-title{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:800}
.fs-sub{font-size:.82rem;color:var(--ink-2);margin:.05rem 0 .7rem;font-weight:600}
.fs-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--border)}
.fs-row span{font-size:.78rem;color:var(--muted)}
.fs-row strong{font-family:'JetBrains Mono',monospace;font-size:.96rem;font-weight:700;white-space:nowrap;transition:color .25s}
.fs-row.income strong{color:var(--green)} .fs-row.expense strong{color:var(--red)} .fs-row.saving strong{color:var(--accent)}
.fs-row.cash{padding-top:.65rem;border-top:1px solid var(--border-2);border-bottom:none;margin-top:.15rem}
.fs-row.cash span{color:var(--ink-2);font-weight:700}
.fs-row strong.flash{animation:fsFlash .6s var(--ease2)}
@keyframes fsFlash{0%{transform:scale(1)}35%{transform:scale(1.12);filter:brightness(1.3)}100%{transform:scale(1)}}
.fs-close{position:absolute;top:.5rem;right:.55rem;width:22px;height:22px;border:none;border-radius:7px;cursor:pointer;
  background:var(--surface-3);color:var(--muted);font-size:1rem;line-height:1;display:grid;place-items:center;font-family:inherit}
.fs-close:hover{color:var(--ink);background:var(--border-2)}
.fs-reopen{position:fixed;top:124px;right:0;z-index:35;display:none;align-items:center;gap:.4rem;
  padding:.6rem .8rem;border-radius:12px 0 0 12px;border:1px solid var(--border-2);border-right:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04121b;font-weight:700;font-size:.8rem;
  box-shadow:var(--shadow-lg);font-family:inherit}
body:not(.summary-open) .float-summary{transform:translateX(calc(100% + 26px));opacity:0;pointer-events:none}
body:not(.summary-open) .fs-reopen{display:flex}
@media(min-width:1120px){ body.summary-open .content main{padding-right:280px} }
@media(max-width:1119px){
  .float-summary{top:auto;bottom:0;left:0;right:0;width:auto;border-radius:14px 14px 0 0;
    display:flex;gap:.6rem 1.3rem;flex-wrap:wrap;justify-content:space-around;padding:.7rem 1rem}
  .float-summary .fs-title,.float-summary .fs-sub{display:none}
  .fs-row{flex-direction:column;align-items:center;gap:.05rem;border:none;padding:.1rem .3rem}
  .fs-row.cash{border-top:none;margin:0;padding:.1rem .3rem}
  .fs-close{top:.3rem;right:.4rem}
  body:not(.summary-open) .float-summary{transform:translateY(calc(100% + 26px))}
  body.summary-open .content main{padding-bottom:96px}
  body.summary-open #saveStatus{bottom:104px!important}
  .fs-reopen{top:auto;bottom:14px;right:0;border-radius:12px 0 0 12px}
}

/* ============ CREDIT-CARD FLOATING PANEL (right, below the summary) ============ */
.float-cc{position:fixed;right:18px;top:360px;width:242px;z-index:34;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border-2);
  border-radius:16px;padding:1.05rem 1.1rem;box-shadow:var(--shadow-lg);
  transition:transform .35s var(--ease),opacity .3s var(--ease2)}
.float-cc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,158,11,.45),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.float-cc .fs-title{color:#f59e0b}
.float-cc .cc-big{font-family:'JetBrains Mono',monospace;font-size:1.55rem;font-weight:800;color:var(--red);
  margin:.35rem 0 .55rem;white-space:nowrap;letter-spacing:-.02em}
tbody tr.on-cc td:nth-last-child(2){box-shadow:inset 0 0 0 2px rgba(245,158,11,.5);border-radius:6px}
/* hide together with the summary panel */
body:not(.summary-open) .float-cc{transform:translateX(calc(100% + 26px));opacity:0;pointer-events:none}
@media(max-width:1119px){
  .float-cc{position:static;transform:none!important;opacity:1!important;pointer-events:auto;
    width:auto;right:auto;top:auto;margin:0 0 1.2rem}
}

/* expenses page: use full width and fit the table so there is no horizontal scroll */
body.has-ccpanel .content main{max-width:none}
body.has-ccpanel .table-scroll{overflow-x:visible}
.exp-table{table-layout:fixed;width:100%;min-width:0!important}
.exp-table th,.exp-table td{overflow:hidden;padding:.55rem .45rem;text-overflow:ellipsis}
.exp-table input,.exp-table select{max-width:100%}
.exp-table th:nth-child(1),.exp-table td:nth-child(1){width:21%}
.exp-table th:nth-child(2),.exp-table td:nth-child(2){width:15%}
.exp-table th:nth-child(3),.exp-table td:nth-child(3){width:13%}
.exp-table th:nth-child(4),.exp-table td:nth-child(4){width:12%}
.exp-table th:nth-child(5),.exp-table td:nth-child(5){width:15%}
.exp-table th:nth-child(6),.exp-table td:nth-child(6){width:13%}
.exp-table th:nth-child(7),.exp-table td:nth-child(7){width:7%}
.exp-table th:nth-child(8),.exp-table td:nth-child(8){width:4%}

@media (max-width:980px){
  :root{--sidebar:100%}
  .app{flex-direction:column}
  .sidebar{position:sticky;top:0;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;gap:.3rem;padding:.6rem .8rem;align-items:center}
  .brand{padding:.2rem .4rem;flex:0 0 auto}
  .side-nav{flex-direction:row;flex-wrap:wrap;margin:0;flex:1 1 100%;justify-content:flex-start;gap:.2rem;order:3}
  .side-nav a{padding:.45rem .7rem;font-size:.84rem}
  .side-nav a span:not(.ic){display:none}
  .side-nav a .ic{width:18px;height:18px}
  .side-foot{margin:0;flex-direction:row;order:2;margin-left:auto}
  .cols2,.cols3,.cols4{grid-template-columns:1fr}
}
@media (max-width:560px){.topbar{padding:.7rem .9rem}main{padding:1.1rem .9rem 2rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.bar>i{transition:none}}

/* ============ AUTH ============ */
.logout-form{margin:0}
.logout-form .theme-toggle{width:100%}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.2rem}
.login-card{width:100%;max-width:380px;margin:0}
.login-card:hover{transform:none}
.login-card .brand{padding:0 0 1.2rem}
.login-card .btn{width:100%;margin-top:.4rem}
.login-card input[type=password]{padding:.62rem .8rem;border:1.5px solid var(--border-2);border-radius:11px;font-size:.95rem;width:100%;
  font-family:inherit;background:var(--surface-2);color:var(--ink)}
.login-card input[type=password]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(34,211,238,.16);background:var(--surface)}