/* Cash on Hand — CleverProfits brand kit, Reports v4 palette (design_handoff + PRD tokens).
   Every color is a :root token; components below only reference tokens. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{
  --accent:#0A2C92;--accent-hover:#082579;--accent-tint:#E4ECFD;
  --ink:#0F0038;--ink2:#524770;--ink3:#6A6184;
  --bg:#EEF2FB;--surface:#FFFFFF;--hairline:#E7E7E7;--raised:#F4F4F7;--hover:#EDEDF3;
  --ok:#047857;--ok-bg:#E3F4EC;
  --bad:#B91C1C;--bad-bg:#FDECEC;--bad-text:#7F1D1D;
  --warm:#9A5414;--warm-bg:#FDEBDD;
  --amber:#B45309;--amber-bg:#FEF3C7;
  --disabled:#9A93B3;
  --shadow:0 1px 3px rgba(15,0,56,.08);
  --shadow-lg:0 12px 32px -8px rgba(15,0,56,.18),0 4px 10px -4px rgba(15,0,56,.08);
  --r-card:16px;--r-ctl:10px;--r-pill:9999px;
  --display:'Inter',sans-serif;--body:'DM Sans',sans-serif;--mono:'SF Mono','Fira Code',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
button{font-family:inherit;border:none;background:none;padding:0;color:inherit;cursor:pointer}
button:disabled{cursor:default}
input,select{font-family:inherit;font-variant-numeric:tabular-nums}
h1,h2,h3,p{margin:0}
table{border-collapse:collapse}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.grow{flex:1 1 auto}.min0{min-width:0}.nowrap{white-space:nowrap}.block{display:block}
.strong{font-weight:600}.muted{color:var(--ink3)}.ink2{color:var(--ink2)}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.mt2{margin-top:2px}.mt3{margin-top:3px}
.muted12{font-size:12px;color:var(--ink3)}.muted13{font-size:13px;color:var(--ink3)}
.h15{font-size:15px;font-weight:600}.h17{font-size:17px;font-weight:600}
.h22{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.row-gap8{display:flex;flex-wrap:wrap;gap:8px}.row-gap8.center{align-items:center}

/* ---------- layout shell ---------- */
.app{display:flex;flex-wrap:wrap;align-items:stretch;min-height:100vh;background:var(--bg)}
.side{background:var(--surface);border-right:1px solid var(--hairline);padding:20px 14px;display:flex;flex-direction:column;gap:4px;
  width:240px;min-width:240px;transition:width 200ms ease-out,min-width 200ms ease-out;position:sticky;top:0;height:100vh;overflow-y:auto}
.side.collapsed{padding:20px 10px}
.brand{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;padding:4px 10px 16px}
.brand a{display:flex;align-items:center;gap:10px;color:var(--ink);white-space:nowrap}
.brand img{border-radius:var(--r-pill);display:block;flex-shrink:0}
.nav{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-height:0}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink2);
  white-space:nowrap;overflow:hidden;transition:background 150ms ease-out}
.nav-item:hover{background:var(--hover);color:var(--ink)}
.nav-item.on{font-weight:600;color:var(--ink);background:var(--bg)}
/* T-010 design v2: disabled item is greyed by colour (INK3), not opacity, so the Coming soon pill keeps #E4ECFD/#0A2C92 */
.nav-item.disabled,.nav-item.disabled:hover{color:var(--ink3);background:transparent;cursor:not-allowed}
.nav-pill{border-radius:var(--r-pill);padding:0 7px;font-size:11px;font-weight:600;line-height:18px;background:#E4ECFD;color:#0A2C92;white-space:nowrap}
.nav-badge{border-radius:var(--r-pill);min-width:20px;padding:0 6px;font-size:11px;font-weight:700;line-height:18px;text-align:center;background:var(--bad-bg);color:var(--bad)}
.sources{border-top:1px solid var(--hairline);padding-top:8px;margin-top:8px}
.sources-head{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 10px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.sources-head:hover{background:var(--hover);color:var(--ink)}
.sources-head .chev{transition:transform .18s;transform:rotate(-90deg)}
.sources.open .chev{transform:none}
.sources-body{display:none;padding:2px 0 4px}
.sources.open .sources-body{display:block}
.src-group{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:8px 10px 3px;opacity:.8}
.src-btn{display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;border-radius:8px;font-family:var(--mono);font-size:11.5px;color:var(--ink2);text-align:left}
.src-btn:hover{background:var(--hover);color:var(--ink)}
.src-btn .cnt{font-family:var(--body);font-size:11px;color:var(--ink3)}
.help-btn{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:36px;padding:0 12px;font-family:var(--display);
  font-size:13px;font-weight:600;border-radius:var(--r-ctl);background:var(--raised);transition:background 150ms ease-out}
.help-btn:hover{background:var(--hover)}
.signout-btn{margin-top:8px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap;width:100%;transition:background 150ms ease-out}
.signout-btn:hover{background:var(--hover);color:var(--ink)}
.collapse-btn{margin-top:8px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink2);
  white-space:nowrap;transition:background 150ms ease-out}
.collapse-btn:hover{background:var(--hover);color:var(--ink)}
.acct{margin-top:8px;padding:12px 6px 0;border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:8px}
.acct-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:28px;height:28px;border-radius:var(--r-pill);background:var(--bg);color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mainpad{flex:999 1 560px;min-width:0;padding:40px clamp(16px,3vw,40px) 48px;display:flex;flex-direction:column;align-items:center;gap:24px}
.wrap{width:100%;max-width:1080px;display:flex;flex-direction:column;gap:24px}

/* ---------- page 1 ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 0 4px}
.eyebrow{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.hero-num{font-family:var(--display);font-size:56px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.hero-sub{font-size:14px;color:var(--ink2)}
.hero-sub .strong{color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tile{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 22px;display:flex;align-items:center;gap:12px}
.tile-ico{width:36px;height:36px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.tile-ico.blue{background:var(--accent-tint);color:var(--accent)}
.tile-ico.warm{background:var(--warm-bg);color:var(--warm)}
.tile-label{font-size:13px;font-weight:500;color:var(--ink2)}
.tile-num{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tile-sub{font-size:12px;color:var(--ink3);margin-top:2px}
.banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-radius:14px;background:var(--bad-bg);color:var(--bad)}
.banner-main{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1 1 360px}
.banner-title{font-size:14px;font-weight:700}
.banner-text{font-size:13px;margin-top:2px;color:var(--bad-text)}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-top:8px}
.bar-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sync-fail{font-size:12px;font-weight:600;color:var(--bad)}

/* ---------- buttons ---------- */
.btn-primary,.btn-outline,.btn-danger{display:flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;white-space:nowrap;transition:background 150ms ease-out}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{background:var(--disabled)}
.btn-outline{gap:8px;border:1.5px solid var(--accent);background:#fff;color:var(--accent)}
.btn-outline:hover{background:var(--accent-tint)}
.btn-outline:disabled{opacity:.7}
.btn-danger{background:var(--bad);color:#fff}
.lg{height:40px;padding:0 18px}
.icon-btn{width:36px;height:36px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;color:var(--ink3);transition:background 150ms ease-out}
.icon-btn.sm{width:32px;height:32px;color:inherit}
.danger-hover:hover{background:var(--bad-bg);color:var(--bad)}
.link-btn{font-size:13px;font-weight:700;color:var(--accent);text-decoration:underline;min-height:28px}

/* ---------- cards + tables ---------- */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 0 6px}
.card.alerts{padding-bottom:8px}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px 12px}
.card-top.bordered{border-bottom:1px solid var(--hairline)}
.card-top.flexwrap{flex-wrap:wrap;gap:10px 16px}
.card-pad{padding:0 22px 12px}
.label-up{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.total{font-weight:700;white-space:nowrap}
.scroll{overflow-x:auto}
.t{width:100%;font-size:14px}
.t thead tr{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.t th[scope=col]{padding:10px 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.t th.th-l{text-align:left;padding-left:22px}.t th.th-l2{text-align:left}.t th.th-r{text-align:right}.t th.th-c{text-align:center;padding-right:22px}
.t th.th-r.last{padding-right:22px}
.t.fixed{table-layout:fixed}
.t.fixed th,.t.fixed td{overflow:hidden;text-overflow:ellipsis}
.t tbody tr{border-bottom:1px solid var(--hairline)}
.t tbody tr:last-child{border-bottom:none}
.t tbody tr.bb:last-child{border-bottom:1px solid var(--hairline)}
.cell-l{text-align:left;padding:14px 12px 14px 22px;font-weight:600}
.cell-l.p12{padding:12px 12px 12px 22px}
.cell-r{padding:14px 22px 14px 12px;text-align:right;white-space:nowrap}
.cell-m{padding:14px 12px;text-align:right;white-space:nowrap}
.cell-type{padding:12px;color:var(--ink2);white-space:nowrap}
.cell-in{padding:8px 12px;text-align:right;white-space:nowrap}
.cell-c{padding:12px 22px 12px 12px;text-align:center}
.p12{padding:12px}
.subline{display:block;font-size:12px;font-weight:500;color:var(--ink3);margin-top:2px}
.sel.sel-kind{height:30px;padding:0 6px;font-size:12.5px;width:100%}
.cell-type .kind-sub{white-space:normal;font-size:11.5px;line-height:1.35}
.money-in{display:inline-flex;align-items:center;height:34px;padding:0 10px;border:1.5px solid var(--hairline);border-radius:var(--r-ctl);background:#fff;gap:4px}
.money-in:focus-within{border-color:var(--accent)}
.money-in .cur{color:var(--ink3)}
.money-in input{width:96px;border:none;background:transparent;font-size:13px;font-weight:600;color:var(--ink);text-align:right;outline:none}
.cb{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:var(--r-pill);background:currentColor}
.pill.green{background:var(--ok-bg);color:var(--ok)}
.pill.red{background:var(--bad-bg);color:var(--bad)}
.pill.grey{background:var(--raised);color:var(--ink2)}
.pill.amber{background:var(--amber-bg);color:var(--amber)}

/* ---------- alerts ---------- */
.alerts-head{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 320px}
.ico-circle{width:32px;height:32px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.card.alerts .card-top{padding-bottom:14px}
.note-grey{margin:0 22px 12px;padding:10px 14px;border-radius:12px;background:var(--raised);color:var(--ink2);font-size:13px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.run-panel{margin:0 22px 14px;padding:12px 14px;border-radius:12px;background:var(--raised);border:1px solid var(--hairline);display:flex;flex-direction:column;gap:6px;font-size:13px}
.run-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.run-line{margin:0;padding:6px 0 6px 10px;border-left:3px solid var(--hairline);color:var(--ink2);line-height:1.4;overflow-wrap:anywhere}
.run-line.sent{border-left-color:var(--ok);color:var(--ink)}
.run-line.bad{border-left-color:var(--bad);color:var(--bad-text)}
.run-label{color:var(--ink3)}
.alerts-empty{padding:16px 22px;border-top:1px solid var(--hairline);font-size:13px;color:var(--ink3)}
.alert-row{padding:14px 22px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:10px}
.alert-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.sel{height:36px;padding:0 10px;border:1.5px solid var(--hairline);border-radius:var(--r-ctl);background:#fff;font-size:13px;font-weight:600;color:var(--ink);max-width:100%}
.alert-line .money-in{height:36px}
.alert-line .money-in input{width:100px}
.disc-text{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--r-ctl);background:var(--raised);font-size:13px;font-weight:600}
.notify{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:#fff;color:var(--ink2);
  font-size:13px;font-weight:600;white-space:nowrap;transition:background 150ms ease-out}
.chip.on{border-color:var(--accent);background:var(--accent);color:#fff}

/* ---------- page 2 / 3 ---------- */
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 16px}
.info-strip{padding:12px 16px;border-radius:12px;background:var(--accent-tint);color:var(--accent);font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px}
.item-head{display:flex;align-items:center;gap:10px;min-width:0}
.avatar32{width:32px;height:32px;border-radius:var(--r-pill);background:var(--bg);color:var(--accent);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar28{width:28px;height:28px;border-radius:var(--r-pill);background:var(--bg);color:var(--accent);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.person{display:flex;align-items:center;gap:10px}
.add-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:16px 22px 10px}
.add-form.bt{border-top:1px solid var(--hairline)}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--ink2)}
.fld.f2{flex:2 1 220px}.fld.f1{flex:1 1 140px}.fld.f1w{flex:1 1 200px}.fld.f1e{flex:1 1 260px}
.fld input,.fld select{height:40px;padding:0 12px;border:1.5px solid var(--hairline);border-radius:12px;font-size:14px;color:var(--ink);background:#fff;font-weight:400}
.fld select{padding:0 10px}
.fld input:focus,.fld select:focus,.sel:focus{border-color:var(--accent)}
.fld input.r{text-align:right}
.slack-card{padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.slack-main{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1 1 360px}
.slack-text{font-size:13px;color:var(--ink2);margin-top:4px;max-width:560px}

/* ---------- lineage: hover tooltip + source pop-out ---------- */
.f{cursor:help;border-bottom:1px dotted transparent;transition:border-color .12s}
.f:hover{border-bottom-color:var(--accent)}
.ftip{position:fixed;left:0;top:0;background:var(--ink);color:#fff;font-size:11px;padding:7px 11px;border-radius:8px;max-width:420px;
  opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:var(--shadow-lg);z-index:400;display:flex;flex-direction:column;gap:3px;font-weight:500}
.ftip.show{opacity:1}
.ftip .mono{font-family:var(--mono);font-size:10px;color:#C7D2FE}
.ftip .fx{font-size:11px;color:#fff}
.ftip .go{font-size:10px;color:rgba(255,255,255,.7)}
.panel{position:fixed;top:0;right:0;width:min(940px,82vw);height:100vh;background:#fff;box-shadow:var(--shadow-lg);transform:translateX(102%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:200;display:flex;flex-direction:column}
.panel.open{transform:translateX(0)}
.panel-h{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--hairline)}
.panel-h h3{font-family:var(--display);font-size:16px;color:var(--ink)}
.panel-h .db{font-family:var(--mono);font-size:11px;color:var(--accent)}
.panel-x{margin-left:auto;background:var(--raised);color:var(--ink);width:32px;height:32px;border-radius:9px;font-size:18px}
.panel-x:hover{background:var(--hover)}
.panel-body{flex:1;overflow:auto;padding:16px 22px}
.panel-desc{font-size:13px;color:var(--ink2);margin-bottom:10px}
.panel-fx{font-size:13px;color:var(--ink);background:var(--accent-tint);border-radius:8px;padding:8px 12px;margin-bottom:10px}
.panel-loc{font-size:11px;color:var(--accent);margin-bottom:12px}
.mono{font-family:var(--mono)}
table.grid{width:100%;font-size:12px}
table.grid th{position:sticky;top:0;background:var(--ink);color:#fff;text-align:left;padding:7px 9px;font-weight:600;white-space:nowrap;z-index:2}
table.grid td{padding:5px 9px;border-bottom:1px solid var(--hairline);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
table.grid tr.row-hl td{background:rgba(10,44,146,.12)}
table.grid td.col-hl,table.grid th.col-hl{background:rgba(10,44,146,.22)}
table.grid th.col-hl{background:var(--accent)}
.scrim{position:fixed;inset:0;background:rgba(15,0,56,.28);opacity:0;pointer-events:none;transition:opacity .2s;z-index:150}
.scrim.open{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:10px 16px;
  border-radius:12px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:500;max-width:min(560px,92vw)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad)}

@media (max-width:767px){.side{display:none!important}.mainpad{padding:16px!important}.tiles{grid-template-columns:minmax(0,1fr)!important}}
.stripe-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;padding:14px 22px;border-top:1px solid var(--hairline)}
.stripe-masked{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--raised);padding:3px 8px;border-radius:var(--r-ctl)}
.stripe-help{flex:1 1 100%;margin:0}

/* Admin (T-008) */
.code{display:block;margin-top:6px;padding:8px 12px;border:1px solid var(--hairline);border-radius:var(--r-ctl);background:var(--bg);font-family:var(--mono);font-size:12.5px;color:var(--ink);word-break:break-all;user-select:all}
.dom-block{padding-top:18px;border-top:1px solid var(--hairline);margin-top:8px}
.dom-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dom-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 12px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--ink);font-size:13px;font-weight:600}
.dom-chip .chip-x{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-pill);color:var(--ink3)}
.dom-chip .chip-x:hover{background:#fff;color:var(--bad)}
/* Stripe key: masked text field, not type=password, so password managers don't treat it as a login */
input.masked{-webkit-text-security:disc}