/* Dashboard view: cash-flow chart, savings tracker, categories, recent activity */

/* The whole row is sized by the category card: nine rows, then it scrolls.
   One row is 18px of text over a 6px gap and a 6px bar, and rows sit 14px apart,
   so nine of them come to 9*30 + 8*14. The chart and the savings tracker are
   measured back from that figure, which means changing --cat-rows resizes all
   three cards together and they stay level.

   Declared here rather than in tokens.css, which holds colour. */
.mid-row{
  --cat-rows:9;
  --cat-row-height:30px;
  --cat-row-gap:14px;
  /* Clearance past the last bar. Zero ends the list exactly on it. Anything up to
     the 14px gap adds breathing room without letting a tenth row peek through. */
  --cat-list-tail:0px;
  --cat-list-height:calc(
    var(--cat-rows) * var(--cat-row-height) +
    (var(--cat-rows) - 1) * var(--cat-row-gap) +
    var(--cat-list-tail));
  /* The plot sits under a 22px toolbar and a 6px gap, the list under an 8px gap
     alone — so the plot takes 20px less to finish level with the list. */
  --chart-height:calc(var(--cat-list-height) - 20px);
}

.chart-wrap{
  height:var(--chart-height);
  margin-top:6px;
}
.chart-wrap svg{width:100%; height:100%; display:block; overflow:visible;}
.bar-income{fill:var(--teal);}
.bar-expense{fill:var(--rust);}
.bar rect{transition:height .5s cubic-bezier(.2,.7,.3,1), y .5s cubic-bezier(.2,.7,.3,1);}
.axis-line{stroke:var(--line); stroke-width:1;}
.axis-label{font-family:var(--font-mono); font-size:10px; fill:var(--text-faint);}
.month-label{font-family:var(--font-body); font-size:11px; fill:var(--text-dim); font-weight:500;}

/* savings goal tracker */
.savings-wrap{
  /* 4px short of the chart, because this sits under a 10px margin where the chart
     sits under 6px. The panel is then the same height whichever view is showing,
     so toggling between them does not nudge the page. */
  height:calc(var(--chart-height) - 4px);
  margin-top:10px;
  overflow-y:auto;
  padding-right:2px;
}
.goal-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.goal-input-label{font-size:12px; font-weight:600; color:var(--text-dim);}
/* The month this input writes to. Without it the control looks like it sets the
   target for the whole ledger, which is exactly what it no longer does. */
.goal-input-month{font-weight:500; color:var(--text-faint);}
.goal-input-prefix{font-family:var(--font-mono); font-size:13px; color:var(--text-dim);}
#goalInput{
  width:92px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  border:1px solid var(--line-input);
  border-radius:7px;
  padding:6px 8px;
  color:var(--text);
  background:var(--paper);
}
#goalInput:focus{outline:2px solid var(--teal); outline-offset:1px;}
.goal-list{display:flex; flex-direction:column; gap:16px;}
.goal-row-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
}
.goal-month{font-size:13px; font-weight:600; color:var(--text);}
.goal-net{font-family:var(--font-mono); font-size:13px; font-weight:700;}
.goal-bar-track{
  height:6px;
  background:var(--line-soft);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:6px;
}
.goal-bar-fill{
  height:100%;
  border-radius:4px;
  width:0%;
  transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.goal-bar-fill.goal-good{background:var(--teal);}
.goal-bar-fill.goal-warn{background:var(--gold);}
.goal-bar-fill.goal-bad{background:var(--rust);}
.goal-status{font-size:11.5px; font-weight:600;}
.goal-status.goal-good{color:var(--teal);}
.goal-status.goal-warn{color:var(--gold);}
.goal-status.goal-bad{color:var(--rust);}
.goal-target{color:var(--text-faint); font-weight:400;}

/* category card */
/* Nine rows, then it scrolls. The cap is what makes it scroll at all: .mid-row
   stretches both panels to the height of the taller one, and this list had
   overflow-y:auto but no height to overflow — so it grew instead, the chart's
   wrapper absorbed the extra height, and the chart drifted down inside it. Every
   category added made the dashboard longer. */
.cat-list{
  display:flex;
  flex-direction:column;
  gap:var(--cat-row-gap);
  margin-top:8px;
  max-height:var(--cat-list-height);
  overflow-y:auto;
  padding-right:2px;
}
.cat-row-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:6px;
  /* A definite height, so a row is exactly 30px: 18 here, a 6px margin, a 6px
     bar. line-height alone was not enough — the name is set in Inter and the
     amount in JetBrains Mono, and aligning two different fonts on their shared
     baseline grows the line box past its line-height. A couple of pixels a row,
     nine rows deep, is what was clipping the last bar. */
  height:18px;
  line-height:18px;
}
/* Block rather than flex, so a category name longer than the card ellipsises
   instead of wrapping — a second line would now overflow the row's fixed height
   and run into the bar underneath it. `min-width:0` is what lets it shrink at
   all; the amount beside it is nowrap and would otherwise hold the row open. */
.cat-name{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.cat-dot{
  display:inline-block;
  vertical-align:middle;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
}
.cat-amount{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.cat-bar-track{
  height:6px;
  background:var(--line-soft);
  border-radius:4px;
  overflow:hidden;
}
.cat-bar-fill{
  height:100%;
  border-radius:4px;
  width:0%;
  transition:width .6s cubic-bezier(.2,.7,.3,1);
}

.recent-panel .txn-row{
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.recent-panel .txn-row:last-child{border-bottom:none; padding-bottom:2px;}
.txn-avatar{
  width:36px;height:36px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  color:var(--on-accent);
  flex-shrink:0;
}
.txn-info{flex:1; min-width:0;}
.txn-name{font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.txn-meta{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
.txn-amount{font-family:var(--font-mono); font-size:13.5px; font-weight:700; white-space:nowrap;}