/* ============================================================
   CUSTOMER CONSOLE · EXPENSES & BUDGET module css
   tabs · toolbar · savings ring · category budgets · ledger ·
   accounts · loans · insurance · add/edit modal
   (all tokens come from the shared theme — dark + light)
   ============================================================ */

/* ---------------- sub-view tabs ---------------- */
.bd-tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.bd-tabs::-webkit-scrollbar{display:none}
.bd-tab{
  display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:11px;
  background:var(--bg-2);border:1px solid var(--border);color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.14s;
}
.bd-tab:hover{color:var(--text);border-color:var(--border-2);transform:translateY(-1px)}
.bd-tab.on{background:rgba(240,180,41,.12);border-color:rgba(240,180,41,.45);color:var(--gold)}
.bd-tab svg{width:14px;height:14px;flex:none}

/* ---------------- toolbar ---------------- */
.bd-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.bd-bar .grow{flex:1;min-width:8px}
.bd-bar-lab{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.bd-sel{width:auto;min-width:152px;flex:none}
.bd-total{display:flex;flex-direction:column;gap:1px;min-width:0}
.bd-total span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.bd-total b{font-size:21px;font-weight:850;letter-spacing:-.5px}
.bd-total em{font-style:normal;font-size:11.5px;color:var(--muted)}
.bd-total.inc b{color:var(--green-2)}
.bd-total.exp b{color:var(--red-2)}
.bd-total.gold b{color:var(--gold)}

/* ---------------- cash KPI (tap to edit opening balance) ---------------- */
.bd-cash{cursor:pointer}
.bd-cash .k-lab{display:flex;align-items:center;gap:5px}
.bd-cash .k-lab svg{width:11px;height:11px;opacity:.55}
.bd-cash:hover{border-color:rgba(240,180,41,.45);box-shadow:0 10px 26px rgba(0,0,0,.14)}

/* ---------------- savings ring ---------------- */
.bd-ringw{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.bd-ring{position:relative;flex:none;display:grid;place-items:center}
.bd-ring svg{display:block;animation:bdSpinIn .7s cubic-bezier(.2,.8,.3,1)}
@keyframes bdSpinIn{from{opacity:0;transform:rotate(-40deg)}to{opacity:1;transform:none}}
.bd-ringc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.bd-ringc b{display:block;font-size:25px;font-weight:850;letter-spacing:-.8px}
.bd-ringc span{font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.bd-legs{display:flex;flex-direction:column;gap:9px;flex:1;min-width:190px}
.bd-leg{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--muted)}
.bd-leg i{width:10px;height:10px;border-radius:3px;flex:none}
.bd-leg b{margin-left:auto;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--text)}

/* ---------------- category budgets ---------------- */
.bd-bud{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--border)}
.bd-bud:last-of-type{border-bottom:none}
.bd-bi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--border);flex:none}
.bd-bm{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bd-bt{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bd-bt b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-bt span{font-size:10.5px;color:var(--dim);white-space:nowrap;flex:none}
.bd-bp{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--muted);min-width:40px;text-align:right;flex:none}
.bd-bp.over{color:var(--red-2);font-weight:800}
.bd-bp.none{opacity:.45}
.bd-bin{max-width:130px;padding:6px 10px;font-size:12.5px}
.bd-bfoot{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;padding-top:11px;margin-top:4px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.bd-bfoot b{color:var(--text);font-family:ui-monospace,Consolas,monospace}

/* ---------------- transaction rows ---------------- */
.bd-txs{display:flex;flex-direction:column;gap:7px}
.bd-tx{
  display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--border);cursor:pointer;transition:.14s;
}
.bd-tx:hover{border-color:var(--border-2);transform:translateX(2px)}
.bd-ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--border);flex:none;color:var(--muted);transition:.14s}
.bd-tx.income .bd-ti{color:var(--green-2);border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.07)}
.bd-tx.expense .bd-ti{color:var(--red-2);border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.06)}
.bd-tn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bd-tn b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-tn span{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-ta{font-family:ui-monospace,Consolas,monospace;font-size:13px;font-weight:800;flex:none;letter-spacing:-.3px}
.bd-tx.income .bd-ta{color:var(--green-2)}
.bd-tx.expense .bd-ta{color:var(--red-2)}

/* row / record action buttons */
.bd-td,.bd-ico{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;padding:0;
  background:transparent;border:1px solid transparent;color:var(--dim);cursor:pointer;transition:.13s;flex:none;
}
.bd-td:hover,.bd-ico:hover{color:var(--text);background:var(--panel);border-color:var(--border)}
.bd-ico.danger:hover{color:var(--red-2);background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35)}
.bd-td svg,.bd-ico svg{width:14px;height:14px}
.bd-td.armed,.bd-ico.armed{
  color:var(--red-2);background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);
  animation:bdShake .28s ease;
}
.btn.armed{color:var(--red-2);border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}
@keyframes bdShake{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

/* ---------------- category filter chips (legacy class kept for global.css) ---------------- */
.cat-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cat-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:5px 11px;border-radius:20px;
  background:var(--bg-2);border:1px solid var(--border);color:var(--muted);
  cursor:pointer;transition:.13s;user-select:none;
}
.cat-chip:hover{border-color:var(--border-2);color:var(--text)}
.cat-chip.on{background:rgba(240,180,41,.13);border-color:rgba(240,180,41,.5);color:var(--gold);font-weight:700}
.cat-chip svg{width:12px;height:12px;flex:none;opacity:.9}

/* ---------------- bank account cards ---------------- */
.bd-accts{margin-bottom:14px}
.bd-acct{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:15px 16px;transition:.15s}
.bd-acct:hover{border-color:var(--border-2);box-shadow:0 10px 26px rgba(0,0,0,.13)}
.bd-ah{display:flex;gap:11px;align-items:center}
.bd-ah>i{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.28);color:var(--gold);
}
.bd-ah>div{flex:1;min-width:0}
.bd-ah b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-ah span{font-size:10.5px;color:var(--dim)}
.bd-aa{display:flex;gap:4px;flex:none}
.bd-ab{font-size:23px;font-weight:850;letter-spacing:-.6px;margin-top:12px;font-family:ui-monospace,Consolas,monospace}
.bd-am{font-size:11px;color:var(--dim);margin-top:3px}

/* ---------------- record rows (loans / insurance) ---------------- */
.bd-rec{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:12px;transition:.15s}
.bd-rec:hover{border-color:var(--border-2)}
.bd-rh{display:flex;gap:11px;align-items:center}
.bd-ri{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--bg-2);border:1px solid var(--border);color:var(--muted);
}
.bd-ri.gold{color:var(--gold);border-color:rgba(240,180,41,.3);background:rgba(240,180,41,.08)}
.bd-ri.cyan{color:var(--cyan);border-color:rgba(6,182,212,.3);background:rgba(6,182,212,.08)}
.bd-rt{flex:1;min-width:0}
.bd-rt b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-rt span{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-rstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px;margin-top:13px}
.bd-rstats span{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.bd-rstats b{font-size:13.5px;color:var(--text);text-transform:none;letter-spacing:-.2px;font-family:ui-monospace,Consolas,monospace;font-weight:750}
.bd-rstats b.warn{color:var(--red-2)}
.bd-prog{margin-top:13px}
.bd-progt{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);margin-top:6px}
.bd-due{
  font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:20px;white-space:nowrap;flex:none;
  background:var(--bg-2);border:1px solid var(--border);color:var(--muted);
}
.bd-due.soon{background:rgba(240,180,41,.12);border-color:rgba(240,180,41,.35);color:var(--gold)}
.bd-due.today{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:var(--red-2)}
.bd-due.over{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.4);color:var(--red-2)}

/* ---------------- hint strip ---------------- */
.bd-hint{
  display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--dim);line-height:1.55;
  background:var(--bg-2);border:1px dashed var(--border);border-radius:11px;padding:10px 13px;
}
.bd-hint svg{width:14px;height:14px;flex:none;margin-top:2px}

/* ---------------- add / edit modal ---------------- */
.bd-ov{
  position:fixed;inset:0;z-index:90;background:rgba(4,7,12,.66);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:20px;
}
.bd-mw{
  display:flex;flex-direction:column;width:100%;max-width:470px;max-height:calc(100vh - 40px);
  background:var(--panel);border:1px solid var(--border-2);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);animation:bdPop .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes bdPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.bd-mh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border);flex:none}
.bd-mh>span{font-size:14.5px;font-weight:800;letter-spacing:-.2px}
.bd-mx{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;padding:0;
  background:var(--bg-2);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:.13s;
}
.bd-mx:hover{color:var(--text);border-color:var(--border-2)}
.bd-mb{padding:16px 18px;display:flex;flex-direction:column;gap:13px;overflow-y:auto;flex:1;min-height:0}
.bd-mf{display:flex;gap:9px;align-items:center;padding:0 18px 17px;flex:none}
.bd-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.bd-fl{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.bd-frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.bd-seg{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.bd-seg button{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--border);color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.13s;
}
.bd-seg button:hover{color:var(--text);border-color:var(--border-2)}
.bd-seg button.on.d{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.42);color:var(--red-2)}
.bd-seg button.on.i{background:rgba(16,185,129,.13);border-color:rgba(16,185,129,.42);color:var(--green-2)}
.bd-note{
  font-size:11.5px;color:var(--dim);line-height:1.55;
  background:var(--bg-2);border:1px dashed var(--border);border-radius:10px;padding:10px 12px;
}
.bd-note b{color:var(--text)}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .bd-bar{gap:8px}
  .bd-bar .btn{flex:1;justify-content:center}
  .bd-sel{flex:1;min-width:130px}
  .bd-frow{grid-template-columns:1fr}
  .bd-ringw{justify-content:center}
  .bd-ov{align-items:flex-end;padding:0}
  .bd-mw{max-width:none;border-radius:20px 20px 0 0;max-height:90vh;animation:bdUp .22s ease}
  @keyframes bdUp{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
}
@media(max-width:560px){
  .bd-tabs{gap:5px}
  .bd-tab{padding:7px 11px;font-size:12px}
  .bd-total b{font-size:18px}
  .bd-ab{font-size:20px}
  .bd-rstats{grid-template-columns:1fr 1fr}
  .bd-ringw{gap:14px}
  .bd-ring{margin:0 auto}
  .bd-legs{min-width:0;width:100%}
  .bd-mf .btn{flex:1;justify-content:center}
}