/* ============================================================
   Dashboard: hero banner, budget overview, settle-up and bills.
   ============================================================ */

/* ===== Dashboard hero: the navy banner ===== */
.welcome-hero{
  position:relative;overflow:hidden;
  background:var(--hero-bg);color:#fff;
  border:1px solid var(--hero-border);
  border-radius:var(--radius-xl);
  padding:32px 36px;
  margin-bottom:24px;
}
/* the logo, oversized and faint, bleeding off the top-right corner */
.hero-mark{position:absolute;right:-40px;top:-30px;width:320px;height:320px;opacity:.12;pointer-events:none}
.welcome-hero > *:not(.hero-mark){position:relative}
.welcome-greet{
  font-family:var(--display);font-size:var(--fs-xl);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.15;
}
.welcome-sub{font-size:15px;color:#c9d2ec;margin-top:6px}
.welcome-status{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);font-weight:600;padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);color:#fff;
}
.sp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#c9d2ec}
.sp-dot.ok{background:#5fd3a0}
.sp-dot.watch{background:#f0b54e}
.sp-dot.owe{background:var(--p1)}
.sp-dot.peace{background:var(--p0)}
.welcome-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:24px}
.wfact{display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.08);border-radius:14px;padding:14px 16px}
.wfact-label{font-size:12px;color:#c9d2ec;font-weight:500}
.wfact-val{font-size:24px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.25}
.cur{font-weight:500;opacity:.7;margin-left:.06em}
.wfact-val.good{color:#7ee2b5}
.wfact-val.bad{color:#ff9aa5}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 16px;gap:12px;flex-wrap:wrap}
.section-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.section-sub{font-size:var(--fs-base);color:var(--ink-mute);margin-top:4px}

/* ===== Budget overview list ===== */
.card-link{font-size:var(--fs-sm);color:var(--brand);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.card-link:hover{color:var(--ink)}
.bgt-list{display:flex;flex-direction:column;gap:16px}
.bgt-row{display:flex;flex-direction:column;gap:6px}
.bgt-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bgt-name{font-size:var(--fs-base);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgt-amt{font-size:var(--fs-base);color:var(--ink-soft);white-space:nowrap}
.bgt-amt b{color:var(--ink);font-weight:700}
.bgt-amt b.bad{color:var(--bad)}
.bgt-track{position:relative;height:10px;border-radius:5px;background:var(--line-soft)}
/* pace marker: how much of the month has gone by — spending left of it is on pace */
.bgt-pace{position:absolute;top:-3px;width:2px;height:16px;margin-left:-1px;background:var(--ink);pointer-events:none}
.bgt-fill{height:100%;border-radius:5px;background:var(--p0);transition:width .35s ease}
.bgt-fill.full{background:var(--solid)}
.bgt-fill.warn{background:var(--warn)}
.bgt-fill.bad{background:var(--bad)}

/* Dashboard grid */
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:24px}
.dash-grid > .card{padding:24px}
.dash-grid .card-head{margin-bottom:18px;justify-content:flex-start;gap:10px}
.dash-block{margin-bottom:24px}
.chip.pace{background:var(--bg-alt);border:none;color:var(--ink-soft);font-size:12px;font-weight:600;padding:4px 10px}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr}}

/* Settle-up card: who owes whom this month */
.settle-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  display:flex;flex-direction:column;
}
.settle-head{display:flex;align-items:center;gap:8px}
.settle-head .card-sub{font-size:var(--fs-sm);font-weight:600}
.settle-flow{display:flex;align-items:center;margin-top:18px}
.settle-flow svg{width:28px;height:36px;color:var(--ink-mute)}
.settle-flow .ok{color:var(--good);font-size:var(--fs-lg);font-weight:700;margin-left:10px}
.settle-amt{
  font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.15;
  color:var(--ink);margin-top:10px;
}
/* "All square" / "Settled" is a good state, not an empty one: full ink, green check */
.settle-amt.done{font-size:var(--fs-xl)}
.settle-check{color:var(--good)}
.settle-desc{font-size:var(--fs-base);color:var(--ink-soft);margin-top:2px}
.settle-hint{margin:8px 0 0;font-size:12px;color:var(--ink-mute);text-align:center;line-height:1.35}
.settle-box .divider{margin:18px 0 12px;background:var(--line)}
.settle-rows{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.settle-rows > div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.settle-rows > div > span:first-child{color:var(--ink-mute)}
.settle-rows > div > span:last-child{font-weight:600;color:var(--ink)}

/* Bills due this month */
.bill-list{display:flex;flex-direction:column;margin-top:-4px}
.bill-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.bill-row:last-child{border-bottom:none}
.bill-day{
  width:40px;height:40px;border-radius:var(--radius-md);flex-shrink:0;
  background:var(--bg-alt);color:var(--ink);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.bill-day.paid{background:var(--good-bg);color:var(--good)}
.bill-day svg{width:18px;height:18px}
.bill-main{flex:1;min-width:0;display:flex;flex-direction:column}
.bill-name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bill-sub{font-size:12px;color:var(--ink-mute)}
.bill-amt{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bill-row.paid .bill-amt{color:var(--ink-mute)}

/* Chart legend drawn in HTML (the canvas legend is off) */
.chart-legend{display:flex;gap:16px;margin-top:-6px;font-size:12px;color:var(--ink-soft)}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:block}