/* ============================================================
   GoAbroadly Finance  -  Theme v4
   Display: Bricolage Grotesque | UI: Plus Jakarta Sans
   ============================================================ */
:root{
  --bg:#eef1f6;
  --bg-2:#f7f8fa;
  --card:#ffffff;
  --ink:#0f172a;
  --ink-2:#1e293b;
  --text:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e9edf3;
  --line-2:#dde3ed;
  --brand:#10b981;
  --brand-deep:#059669;
  --brand-soft:#e6f7f1;
  --brand-grad:linear-gradient(135deg,#13c08a 0%,#0a9d6e 100%);
  --income:#10b981;   --income-soft:#e6f7f1;
  --expense:#f04060;  --expense-soft:#fdeaee;
  --transfer:#6366f1; --transfer-soft:#eef0fd;
  --blue:#3b82f6;     --blue-soft:#e8f0fe;
  --amber:#f59e0b;    --amber-soft:#fef3c7;
  --r:18px; --r-md:14px; --r-sm:11px; --pill:999px;
  --sh:0 1px 3px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.15);
  --sh-lg:0 24px 60px -20px rgba(15,23,42,.30);
  --sh-soft:0 1px 2px rgba(15,23,42,.04);
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --display:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;-webkit-tap-highlight-color:transparent}
body{font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
a{color:var(--brand-deep)}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(65% 55% at 90% 5%,rgba(52,211,153,.25),transparent 60%),
    radial-gradient(50% 40% at 5% 95%,rgba(59,130,246,.18),transparent 55%),
    linear-gradient(170deg,#f0f5fb,#e8eef5)}
.auth-card{width:100%;max-width:400px;background:var(--card);border-radius:22px;padding:38px 32px;
  box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.7)}
.brandmark{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.brandmark .dot{width:34px;height:34px;border-radius:11px;background:var(--brand-grad);
  display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:18px;
  box-shadow:0 6px 16px -4px rgba(16,185,129,.5)}
.brandmark b{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.auth-card h1{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px;color:var(--ink)}
.auth-card p.sub{color:var(--muted);font-size:14px;margin-bottom:22px}
label.fld{display:block;margin-bottom:14px}
label.fld span{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
input,select{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#f8fafb;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  padding:11px 13px;transition:border-color .15s,box-shadow .15s,background .15s;appearance:auto}
input::placeholder{color:var(--muted-2)}
input:focus,select:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.12)}

/* Buttons — width is NEVER set globally on btn-primary.
   Full-width only explicitly where needed (auth context). */
.btn{font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;border:none;
  text-decoration:none;display:inline-block;
  border-radius:var(--r-sm);padding:11px 18px;transition:transform .08s,filter .14s,background .14s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 8px 20px -10px rgba(16,185,129,.7)}
.btn-primary:hover{filter:brightness(1.05)}
.auth-card .btn-primary{display:block;width:100%;margin-top:4px}  /* full-width only in auth */
.btn-ghost{background:#fff;color:var(--ink-2);border:1.5px solid var(--line-2)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--line-2)}
.btn-danger{background:var(--expense-soft);color:var(--expense);border:1.5px solid transparent}
.btn-danger:hover{background:#fbd5db}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn-icon{background:none;border:1.5px solid var(--line-2);width:34px;height:34px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:.13s;padding:0}
.btn-icon:hover{border-color:var(--line-2);background:var(--bg-2);color:var(--ink)}
.btn-icon.danger:hover{border-color:var(--expense);color:var(--expense);background:var(--expense-soft)}
.btn-icon svg{width:15px;height:15px}
.err{color:var(--expense);font-size:13px;margin-top:10px;min-height:18px;font-weight:500}

/* ---------- App shell ---------- */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100dvh}
.sidebar{background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 12px;
  position:sticky;top:0;height:100dvh;overflow-y:auto}
.sidebar .brandmark{padding:2px 8px;margin-bottom:20px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;transition:.13s}
.nav a svg{width:18px;height:18px;flex-shrink:0}
.nav a:hover{background:var(--bg-2);color:var(--ink)}
.nav a.active{background:var(--brand-soft);color:var(--brand-deep)}
.nav a.active svg{color:var(--brand-deep)}
.nav .soon{padding:16px 12px 6px;font-size:10px;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.1em;font-weight:700}
.nav a.dimmed{opacity:.5;pointer-events:none}

/* sidebar user block */
.who{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;display:flex;flex-direction:column;gap:8px}
.who-top{display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:11px;
  padding:8px 10px;margin:-8px -10px 0;transition:.13s;position:relative}
.who-top:hover{background:var(--bg-2)}
.who-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;text-transform:uppercase}
.who-id{min-width:0;flex:1}
.who-name{font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-top .email{font-size:11px;color:var(--muted-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-edit{width:14px;height:14px;color:var(--muted-2);flex-shrink:0;opacity:0;transition:.13s}
.who-top:hover .who-edit{opacity:1}
.install-link{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  color:var(--brand-deep);text-decoration:none;background:var(--brand-soft);
  padding:7px 12px;border-radius:var(--pill);text-align:center}
.who-actions{display:flex;justify-content:space-between}
.who-actions a{color:var(--muted);font-size:12px;text-decoration:none;font-weight:600;padding:4px 0}
.who-actions a:hover{color:var(--brand-deep)}

/* ---------- Topbar ---------- */
.main{padding:22px 28px 64px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:22px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar h2{font-family:var(--display);font-size:26px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.2}
.topbar .crumb{color:var(--muted);font-size:13px;margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.profile{display:flex;align-items:center;gap:9px;background:var(--card);
  border:1.5px solid var(--line-2);padding:5px 12px 5px 6px;border-radius:var(--pill);
  box-shadow:var(--sh-soft);cursor:pointer;transition:.13s}
.profile:hover{border-color:#ccd5e0}
.profile .who-avatar{width:28px;height:28px;font-size:12px}
.profile .pemail{font-size:13px;font-weight:700;color:var(--ink-2);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* workspace toggle pill */
.ws-toggle{display:inline-flex;background:var(--bg-2);border:1.5px solid var(--line-2);
  border-radius:var(--pill);padding:3px}
.ws-toggle button{border:none;background:transparent;font-family:var(--sans);font-weight:700;
  font-size:13px;padding:7px 16px;border-radius:var(--pill);cursor:pointer;color:var(--muted);transition:.13s}
.ws-toggle button.on{background:var(--brand-grad);color:#fff;box-shadow:0 4px 12px -4px rgba(16,185,129,.6)}
.ws-toggle.mini{padding:2px}
.ws-toggle.mini button{padding:5px 12px;font-size:12px}
.menu-btn{display:none;width:38px;height:38px;border:1.5px solid var(--line-2);border-radius:10px;
  background:var(--card);place-items:center;cursor:pointer;box-shadow:var(--sh-soft);flex-shrink:0}

/* ---------- Metric cards ---------- */
.cards5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--sh);animation:rise .35s cubic-bezier(.2,.7,.3,1) both}
.mcard:nth-child(2){animation-delay:.05s}.mcard:nth-child(3){animation-delay:.1s}
.mcard:nth-child(4){animation-delay:.15s}.mcard:nth-child(5){animation-delay:.2s}
.micon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.micon svg{width:17px;height:17px}
.mk{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mv{font-family:var(--sans);font-size:22px;font-weight:800;margin-top:5px;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.c-income .micon{background:var(--income-soft);color:var(--income)}
.c-expense .micon{background:var(--expense-soft);color:var(--expense)}
.c-flow .micon{background:var(--brand-soft);color:var(--brand-deep)}
.c-flow .mv{color:var(--brand-deep)}
.c-invest .micon{background:var(--blue-soft);color:var(--blue)}
.c-assets .micon{background:var(--transfer-soft);color:var(--transfer)}

/* ---------- Panels & charts ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.panel h3{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);
  margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.chart-box{position:relative;height:240px}
.analytics-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:14px;flex-wrap:wrap}
.analytics-head h3{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);margin:0}
.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.manage{font-size:12px;font-weight:700;color:var(--brand-deep);text-decoration:none;
  background:var(--brand-soft);padding:5px 10px;border-radius:var(--pill);white-space:nowrap}
.manage:hover{filter:brightness(.97)}

/* account mini-cards on dashboard */
.acctmini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.acctmini{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--bg-2);transition:.13s}
.acctmini:hover{background:#fff;box-shadow:var(--sh-soft)}
.bankicon{width:36px;height:36px;border-radius:10px;background:var(--brand-grad);color:#fff;
  display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 12px -4px rgba(16,185,129,.55)}
.bankicon svg{width:17px;height:17px}
.acctmini .anm{font-size:12.5px;font-weight:700;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctmini .abal{font-size:15px;font-weight:800;margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.acctmini .abal.neg{color:var(--expense)}

/* top spending */
.spendrow{margin-bottom:14px}
.spendrow:last-child{margin-bottom:0}
.spendtop{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.spendtop span:first-child{color:var(--ink-2);font-weight:600}
.spendamt{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.pctmuted{color:var(--muted-2);font-weight:500}
.spendbar{height:7px;background:var(--line);border-radius:var(--pill);overflow:hidden}
.spendbar>div{height:100%;border-radius:var(--pill);transition:width .5s ease}

/* ---------- Table card ---------- */
.tablecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.toolbar{display:flex;gap:9px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar .search{flex:1 1 220px;min-width:180px;position:relative}
.toolbar .search input{padding-left:36px;background:var(--bg-2)}
.toolbar .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted-2)}
.toolbar select{width:auto;min-width:130px;flex:0 1 150px;background:var(--bg-2);font-size:14px;padding:9px 11px}
.toolbar #totalBtn{flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.toolbar #totalBtn svg{width:14px;height:14px;flex-shrink:0}
table{width:100%;border-collapse:collapse}
thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);font-weight:700;background:var(--bg-2)}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--bg-2)}
td.amt{font-variant-numeric:tabular-nums;text-align:right;font-weight:800;white-space:nowrap}
td.amt.income{color:var(--income)} td.amt.expense{color:var(--expense)} td.amt.transfer{color:var(--transfer)}

/* pills + chips */
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:var(--pill);text-transform:capitalize}
.pill.income{background:var(--income-soft);color:var(--brand-deep)}
.pill.expense{background:var(--expense-soft);color:var(--expense)}
.pill.transfer{background:var(--transfer-soft);color:var(--transfer)}
.cat-chip{font-size:11.5px;color:var(--muted);background:var(--bg-2);
  padding:2px 8px;border-radius:6px;border:1px solid var(--line)}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:var(--pill)}
.badge.due{background:#fef3c7;color:#92400e}
.badge.overdue{background:var(--expense-soft);color:var(--expense)}
.badge.upcoming{background:var(--brand-soft);color:var(--brand-deep)}
.badge.paused{background:var(--bg-2);color:var(--muted)}

/* row actions */
.rowacts{display:flex;gap:5px;justify-content:flex-end}

.loadmore{padding:16px;text-align:center}
.empty{padding:48px 20px;text-align:center;color:var(--muted);font-weight:500}
.empty svg{width:36px;height:36px;color:var(--muted-2);margin-bottom:10px;display:block;margin-left:auto;margin-right:auto}

/* ---------- Accounts page ---------- */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.acct{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh);position:relative}
.acct .type{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:700}
.acct .nm{font-family:var(--display);font-size:18px;font-weight:700;margin-top:4px;color:var(--ink)}
.acct .bal{font-variant-numeric:tabular-nums;font-size:23px;font-weight:800;margin-top:14px;color:var(--ink)}
.acct .bal.neg{color:var(--expense)}
.acct .start{font-size:12px;color:var(--muted-2);margin-top:3px}
.acct .acts{position:absolute;top:14px;right:14px;display:flex;gap:6px}

/* ---------- Recurring page ---------- */
.rec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.rec-list{display:flex;flex-direction:column;gap:10px}
.rec-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-soft);transition:.13s}
.rec-item:hover{box-shadow:var(--sh)}
.rec-item.paused{opacity:.6}
.rec-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.rec-icon svg{width:18px;height:18px}
.rec-icon.income{background:var(--income-soft);color:var(--income)}
.rec-icon.expense{background:var(--expense-soft);color:var(--expense)}
.rec-body{flex:1;min-width:0}
.rec-name{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-meta{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rec-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.rec-amount{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.rec-amount.income{color:var(--income)} .rec-amount.expense{color:var(--expense)}
.rec-actions{display:flex;gap:6px}
.upcoming-section{background:var(--amber-soft);border:1.5px solid #fde68a;
  border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px}
.upcoming-section h4{font-size:13px;font-weight:700;color:#92400e;margin-bottom:10px;
  display:flex;align-items:center;gap:6px}
.upcoming-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid #fde68a;font-size:13px}
.upcoming-item:last-child{border-bottom:none;padding-bottom:0}
.upcoming-item .ui-name{font-weight:700;color:var(--ink)}
.upcoming-item .ui-due{color:#92400e;font-weight:600}
.upcoming-apply{border:none;background:var(--brand-grad);color:#fff;
  border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}

/* ---------- Page action rows ---------- */
.page-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-bottom:16px}
@media(max-width:560px){.page-actions{width:100%} .page-actions .btn{flex:1}}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);display:grid;
  place-items:center;padding:20px;z-index:50;backdrop-filter:blur(3px);animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border-radius:20px;width:100%;max-width:460px;
  box-shadow:var(--sh-lg);animation:pop .18s cubic-bezier(.2,.7,.3,1);max-height:92dvh;overflow-y:auto}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal header{padding:20px 22px 0;display:flex;justify-content:space-between;align-items:center}
.modal header h3{font-family:var(--display);font-size:20px;font-weight:800;color:var(--ink)}
.modal .body{padding:18px 22px 22px}
.seg{display:flex;gap:5px;margin-bottom:16px;background:var(--bg-2);padding:4px;border-radius:12px}
.seg button{flex:1;border:none;background:transparent;padding:9px;border-radius:8px;
  font-weight:700;font-size:13px;cursor:pointer;color:var(--muted);transition:.13s;font-family:var(--sans)}
.seg button.on{background:#fff;box-shadow:var(--sh-soft);color:var(--ink)}
.modal .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal footer{display:flex;gap:10px;margin-top:20px}
.modal footer .btn{flex:1}
.x{cursor:pointer;color:var(--muted-2);width:30px;height:30px;display:grid;place-items:center;
  border-radius:8px;font-size:18px;line-height:1}
.x:hover{background:var(--bg-2);color:var(--ink)}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;
  box-shadow:var(--sh-lg);z-index:80;animation:fade .2s;white-space:nowrap}
.toast.bad{background:var(--expense)}

.hidden{display:none!important}
.spin{width:22px;height:22px;border:2px solid var(--line-2);border-top-color:var(--brand);
  border-radius:50%;animation:rot .7s linear infinite;margin:40px auto}
@keyframes rot{to{transform:rotate(360deg)}}
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.3);z-index:55}

/* ---------- Mobile ---------- */
@supports(padding:max(0px)){
  .sidebar{padding-top:max(18px,env(safe-area-inset-top))}
  .main{padding-top:max(18px,env(safe-area-inset-top))}
}
/* ===== Global overflow lock — prevents ANY element causing page-level horizontal scroll ===== */
html,body{overflow-x:hidden;max-width:100vw}

/* ===== Floating Action Button — mobile only ===== */
.fab{position:fixed;bottom:22px;right:18px;width:52px;height:52px;border-radius:50%;
  background:var(--brand-grad);color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 24px -4px rgba(16,185,129,.6);display:none;place-items:center;z-index:45;
  transition:transform .12s,filter .12s}
.fab:active{transform:scale(.9)}
.fab svg{width:22px;height:22px}

/* ===== Transaction card list — mobile ===== */
.tx-card-list{} /* container for cards */
.tx-card{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--line);transition:background .12s;cursor:default}
.tx-card:last-child{border-bottom:none}
.tx-card:active{background:var(--bg-2)}
.txc-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  flex-shrink:0;margin-top:1px}
.txc-icon svg{width:15px;height:15px;stroke-width:2.5}
.txc-icon.income{background:var(--income-soft);color:var(--income)}
.txc-icon.expense{background:var(--expense-soft);color:var(--expense)}
.txc-icon.transfer{background:var(--transfer-soft);color:var(--transfer)}
.txc-body{flex:1;min-width:0}
.txc-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:5px}
.txc-desc{font-size:14px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.txc-amt{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap}
.txc-amt.income{color:var(--income)} .txc-amt.expense{color:var(--expense)} .txc-amt.transfer{color:var(--transfer)}
.txc-row2{display:flex;align-items:center;gap:5px;min-width:0}
.txc-acct{font-size:11.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:90px;flex-shrink:1}
.txc-date{font-size:11.5px;color:var(--muted-2);white-space:nowrap;flex-shrink:0;margin-left:auto}
.txc-btns{display:flex;gap:4px;margin-top:7px}
/* Slightly larger tap targets on mobile */
.txc-btns .btn-icon{width:36px;height:36px}

/* ===== Responsive breakpoints ===== */
@media(max-width:860px){
  /* Sidebar off-canvas */
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-260px;z-index:60;transition:left .22s;width:244px;
    box-shadow:var(--sh-lg);padding:18px 12px}
  .sidebar.open{left:0}
  .main{padding:16px 14px 72px;overflow-x:hidden} /* extra bottom = FAB clearance */
  .menu-btn{display:grid}

  /* Topbar: hide the new-tx button (FAB covers it), shrink toggle */
  #globalNewTxBtn{display:none!important}
  .fab{display:grid}
  .ws-toggle button{padding:6px 11px;font-size:12px}

  /* Dashboard grid */
  .topbar{align-items:center;margin-bottom:16px}
  .topbar h2{font-size:21px}
  .cards5{grid-template-columns:repeat(2,1fr);gap:10px}
  .mcard{padding:14px}
  .mv{font-size:19px}
  .grid-2{grid-template-columns:1fr}
  .acctmini-grid{grid-template-columns:1fr}

  /* Modals */
  .modal .row2{grid-template-columns:1fr}
  .modal{border-radius:16px}

  /* Accounts */
  .acct-grid{grid-template-columns:1fr}

  /* Transactions: kill the horizontal-scroll table approach */
  #txTableWrap{overflow:visible}            /* no sideways scroll on the wrapper */
  #txTableWrap table{min-width:unset}       /* no forced width */

  /* Toolbar: search full-width on top, filters below */
  .toolbar{flex-wrap:wrap;padding:10px 12px}
  .toolbar .search{min-width:100%;order:-1;margin-bottom:0}
  .toolbar select{flex:1;min-width:0;font-size:15px}

  /* Page actions: 2 per row */
  .page-actions .btn{flex:1}

  /* Recurring */
  .rec-item{flex-wrap:wrap}
  .rec-right{flex-direction:row;align-items:center}
  .rec-summary{grid-template-columns:1fr 1fr;gap:10px}

  /* Profile */
  .profile .pemail{display:none}

  /* Calendar */
  .cal-cell{min-height:70px;padding:5px 4px}
  .cal-hd{gap:8px}

  /* Client profit */
  .cp-grid{grid-template-columns:1fr}
  .cp-summary{grid-template-columns:repeat(2,1fr);gap:10px}
}

@media(max-width:480px){
  /* On very small phones go 2-col on summary cards */
  .cards5{grid-template-columns:1fr 1fr}
  .mv{font-size:17px;letter-spacing:-.03em}
  /* Topbar: stack right side below title */
  .topbar-right{width:100%;justify-content:flex-start;gap:8px}
  .ws-toggle button{padding:5px 10px;font-size:11.5px}
  /* Calendar */
  .cal-dow{font-size:9px;padding:6px 2px}
  .cal-cell{min-height:58px;padding:4px 2px}
  .cevent{font-size:9.5px}
  .cal-month-label{font-size:13px;min-width:100px}
  /* Client profit */
  .cp-summary{grid-template-columns:1fr}
}


/* ===== Recurring: summary cards ===== */
.rec-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.rec-sum-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.rec-sum-card.accent{background:var(--brand-soft);border-color:rgba(16,185,129,.25)}
.rsk{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.rsv{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ===== Recurring: action row ===== */
.rec-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.rec-section-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;padding-left:2px}

/* ===== View toggle ===== */
.vtoggle{display:inline-flex;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:var(--pill);padding:3px}
.vtoggle button{border:none;background:transparent;font-family:var(--sans);font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:var(--pill);cursor:pointer;color:var(--muted);transition:.13s;display:flex;align-items:center;gap:5px}
.vtoggle button.on{background:var(--card);box-shadow:var(--sh-soft);color:var(--ink)}
.vtoggle button svg{width:13px;height:13px}

/* ===== Calendar ===== */
.cal-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.cal-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cal-title{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink)}
.cal-nav-row{display:flex;align-items:center;gap:6px}
.cal-nav-row button{border:1.5px solid var(--line-2);background:var(--card);width:30px;height:30px;border-radius:8px;cursor:pointer;color:var(--muted);display:grid;place-items:center;transition:.13s}
.cal-nav-row button:hover{background:var(--bg-2);color:var(--ink);border-color:var(--line-2)}
.cal-month-label{font-weight:800;font-size:15px;color:var(--ink);min-width:130px;text-align:center}

/* Grid: 7 columns, day headers + cells */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{padding:9px 6px;font-size:10.5px;font-weight:700;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);background:var(--bg-2)}
.cal-cell{min-height:92px;padding:7px 6px 5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top;overflow:hidden}
/* remove right border on last column */
.cal-cell:nth-child(7n+8),.cal-cell:nth-child(7n+9),.cal-cell:nth-child(7n+10),.cal-cell:nth-child(7n+11),.cal-cell:nth-child(7n+12),.cal-cell:nth-child(7n+13),.cal-cell:nth-child(7n+14){border-right:none}
.cal-cell.empty-cell{background:var(--bg-2)}
/* remove last row bottom border */
.cal-grid>.cal-cell:nth-last-child(-n+7){border-bottom:none}

/* Today highlight */
.cal-cell.today-cell>.cday{background:var(--brand);color:#fff;border-radius:50%}
.cday{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.13s}

/* Event chips */
.cevent{display:flex;align-items:center;gap:3px;font-size:10.5px;border-left:2.5px solid;padding:2px 4px 2px 5px;border-radius:0 4px 4px 0;margin-bottom:2px;overflow:hidden;white-space:nowrap;cursor:default}
.cevent.expense{border-color:var(--expense);background:rgba(240,64,96,.07);color:var(--expense)}
.cevent.income{border-color:var(--income);background:rgba(16,185,129,.07);color:var(--brand-deep)}
.cevent-cat{font-weight:600;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cevent-amt{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:10px;flex-shrink:0}
.cevent-more{font-size:10px;color:var(--muted-2);padding-left:4px;margin-top:1px}

@media(max-width:1100px){ .cevent-amt{display:none} }
@media(max-width:860px){
  .rec-summary{grid-template-columns:1fr 1fr;gap:10px}
  .rec-action-row{gap:8px}
  .cal-cell{min-height:70px;padding:5px 4px}
  .cal-hd{gap:8px}
  .cal-hd>div:first-child+div{flex-wrap:wrap;gap:6px}
}
@media(max-width:560px){
  .rec-summary{grid-template-columns:1fr}
  .cal-dow{font-size:9px;padding:6px 2px}
  .cal-cell{min-height:58px;padding:4px 2px}
  .cevent{font-size:9.5px;padding:1px 3px 1px 4px}
  .cal-month-label{font-size:13px;min-width:100px}
}

/* ===== Client Profit ===== */
.cp-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.cp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--sh);border-left:4px solid var(--line)}
.cp-card.rev{border-left-color:var(--income)}
.cp-card.cost{border-left-color:var(--expense)}
.cp-card.profit{border-left-color:var(--brand)}
.cp-card.margin{border-left-color:var(--amber)}
.cp-sk{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:6px}
.cp-sv{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.cp-sv.green{color:var(--income)} .cp-sv.red{color:var(--expense)} .cp-sv.amber{color:var(--amber)}

/* Client entry grid */
.cp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cp-entry{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--sh);transition:.13s}
.cp-entry:hover{box-shadow:0 4px 20px rgba(15,23,42,.1)}

/* Entry head */
.cp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.cp-head-left{display:flex;align-items:center;gap:12px}
.cp-avatar{width:42px;height:42px;border-radius:13px;background:var(--bg-2);
  border:1.5px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;color:var(--muted-2)}
.cp-avatar svg{width:21px;height:21px}
.cp-nm{font-size:16px;font-weight:800;color:var(--ink);line-height:1.2}
.cp-service{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-top:4px}
.cp-service svg{width:12px;height:12px;flex-shrink:0;color:var(--muted-2)}
.cp-head-acts{display:flex;gap:5px;flex-shrink:0}

/* Stat row */
.cp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:14px;padding:12px 0}
.cp-stat{padding:0 6px}
.cp-stat:not(:last-child){border-right:1px solid var(--line)}
.cp-sl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-2);margin-bottom:4px}
.cp-val{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.cp-val.pos{color:var(--income)} .cp-val.neg{color:var(--expense)} .cp-val.zero{color:var(--muted)}

/* Footer row */
.cp-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cp-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  font-weight:700;padding:4px 9px;border-radius:var(--pill);text-transform:uppercase}
.cp-badge::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cp-badge.completed{background:var(--income-soft);color:var(--brand-deep)}
.cp-badge.completed::before{background:var(--income)}
.cp-badge.ongoing{background:var(--amber-soft);color:#92400e}
.cp-badge.ongoing::before{background:var(--amber)}
.cp-date{font-size:12px;color:var(--muted-2);font-weight:500;margin-left:4px}
.cp-margin-wrap{display:flex;align-items:center;gap:8px}
.cp-bar{width:80px;height:6px;background:var(--line);border-radius:var(--pill);overflow:hidden;flex-shrink:0}
.cp-bar-fill{height:100%;border-radius:var(--pill);background:var(--income);transition:width .5s ease}
.cp-bar-fill.low{background:var(--amber)} .cp-bar-fill.neg{background:var(--expense);width:0}
.cp-pct{font-size:12.5px;font-weight:800;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.cp-pct.pos{color:var(--income)} .cp-pct.neg{color:var(--expense)} .cp-pct.zero{color:var(--muted)}

/* Company-only banner */
.company-only-notice{text-align:center;padding:48px 24px;color:var(--muted)}
.company-only-notice svg{width:48px;height:48px;color:var(--muted-2);margin-bottom:12px;display:block;margin-inline:auto}
.company-only-notice h3{font-family:var(--display);font-size:18px;color:var(--ink);margin-bottom:8px}

@media(max-width:1100px){ .cp-summary{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){
  .cp-grid{grid-template-columns:1fr}
  .cp-summary{grid-template-columns:repeat(2,1fr);gap:10px}
  .cp-val{font-size:14px}
}
@media(max-width:480px){ .cp-summary{grid-template-columns:1fr} }

/* Prevent long page title from pushing topbar items off-screen on small phones */
@media(max-width:480px){
  .topbar h2{font-size:18px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .crumb{display:none} /* crumb takes space, not needed when title is truncating */
}

/* ===== Date range filter (Transactions toolbar) ===== */
.date-range{display:flex;align-items:center;gap:6px;background:var(--bg-2);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:0 4px;flex-shrink:0}
.date-range input[type="date"]{width:auto;min-width:112px;border:none;background:transparent;
  padding:9px 4px;font-size:12.5px;color:var(--ink-2)}
.date-range input[type="date"]:focus{box-shadow:none;outline:none}
.dr-sep{color:var(--muted-2);font-size:13px;flex-shrink:0}

/* ===== Search Totals modal ===== */
.total-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:var(--r-md);margin-bottom:12px}
.total-row span:first-child{font-size:14px;font-weight:600}
.total-row .tr-amt{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.total-row.income{background:var(--income-soft)}
.total-row.income span:first-child{color:var(--brand-deep)}
.total-row.income .tr-amt{color:var(--brand-deep)}
.total-row.expense{background:var(--expense-soft)}
.total-row.expense span:first-child{color:var(--expense)}
.total-row.expense .tr-amt{color:var(--expense)}
.total-row.net{background:transparent;padding:6px 16px 4px;margin-bottom:18px}
.total-row.net span:first-child{color:var(--muted);font-weight:700}
.total-row.net .tr-amt.pos{color:var(--brand-deep)}
.total-row.net .tr-amt.neg{color:var(--expense)}
.total-divider{height:1px;background:var(--line);margin:0 0 4px}

@media(max-width:860px){
  .date-range{width:100%;justify-content:center}
  .date-range input[type="date"]{flex:1;min-width:0}
  #totalBtn{width:100%}
}