/* ============================================================================
   AVENLEO — DASHBOARD
   ----------------------------------------------------------------------------
   The account on one screen: balances, seven days of movement, the recent
   ledger, rewards and referrals.

   The hierarchy is deliberate and it is the point of this page. The total
   balance is the largest thing on it; the four stat tiles are next; everything
   else is supporting. That order used to be muddied by a tinted gradient panel
   behind the total, a second gradient behind the reward figure, and stat icons
   in the brand colour — four things competing to be looked at first.

   Now exactly one element is emphasised, and it is emphasised with a rule and a
   type size rather than a colour wash.
   ========================================================================== */

/* ---- the stat row ------------------------------------------------------- */
.dash-stats {
  display: grid;
  /* Three, since the Locked stat was removed — only Available, Rewards and
     the prompt count are balances a member can act on. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* ---- main / side split -------------------------------------------------- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---- activity chart -----------------------------------------------------
   Keep this height and the `H` constant in dashboard/charts.js in step. The
   SVG is drawn with preserveAspectRatio="none" so it fills the width, which
   means a mismatch here squashes every label inside it. */
.chart { width: 100%; height: 196px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart__bar { transition: opacity var(--dur-fast) var(--ease-out); }
.chart__bar:hover { opacity: .75; }
.chart__grid { stroke: var(--color-border); stroke-width: 1; shape-rendering: crispEdges; }
.chart__label { fill: var(--color-text-faint); font-family: var(--font-sans); font-size: 10px; }
.chart__ymax { fill: var(--color-text-faint); font-family: var(--font-sans); font-size: 10px; }
.chart-legend { display: flex; gap: var(--space-3); }
.legend-key { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-2xs); color: var(--color-text-subtle); font-weight: var(--weight-medium); }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
/* These two must be the exact fills charts.js paints the bars with, or the key
   describes a chart that is not on screen. */
.legend-dot--deposit, .legend-dot--spend { background: var(--color-primary); }
.legend-dot--earn { background: var(--color-accent-strong); }

/* ---- the balance, which is the point of the screen ---------------------- */
.hero-balance {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--edge-highlight);
}
.hero-balance__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.hero-balance__label .icon { width: 13px; height: 13px; }
.hero-balance__amount {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5.5vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  margin: var(--space-3) 0 var(--space-1);
  font-variant-numeric: tabular-nums;
}
.hero-balance__meta { font-size: var(--text-xs); color: var(--color-text-subtle); display: flex; align-items: center; gap: var(--space-2); }

/* Three quick actions, equal width, icon over label. */
.qa-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
.qa-row .btn { flex-direction: column; gap: 5px; padding: var(--space-3) var(--space-1); height: auto; font-size: var(--text-2xs); }
.qa-row .btn .icon { width: 17px; height: 17px; }

/* ---- rewards ------------------------------------------------------------ */
.reward-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.reward-head__val {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.reward-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---- referral snapshot -------------------------------------------------- */
.ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-4); }
.ref-cell {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.ref-cell__v {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.ref-cell__l { font-size: var(--text-2xs); color: var(--color-text-faint); margin-top: 1px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .dash-stats .card { padding: var(--space-3); }
  .dash-stats .stat__value { font-size: var(--text-xl); }
  .hero-balance__amount { font-size: var(--text-3xl); }
}
@media (max-width: 480px) {
  .table--compact tbody td { padding: var(--space-2); }
}