/* ============================================================
   Balans: grafieken (ring, sparkline, trendgrafiek)
   Kleuren komen uit --a (accent van het scherm of de kaart).
   ============================================================ */

/* ── Ring ────────────────────────────────────────────────────── */
.ring { position: relative; width: 148px; aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, 0.07); }
.ring-bar { fill: none; stroke: var(--a); }
.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ring-big {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variation-settings: "opsz" 96;
}
.ring-sub { margin-top: 5px; font-size: var(--fs-xs); color: var(--ink-3); }
.ring.small { width: 64px; }
.ring.small .ring-big { font-size: 14px; letter-spacing: -0.02em; }

/* ── Sparkline ───────────────────────────────────────────────── */
.spark { width: 160px; height: auto; }
.spark-area { fill: var(--a); opacity: 0.12; }
.spark-line { fill: none; stroke: var(--a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-end { fill: var(--a); stroke: var(--bg); stroke-width: 2; }

/* ── Trendgrafiek ────────────────────────────────────────────── */
.chart-wrap { position: relative; }
.trend-chart { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.trend-chart .grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.trend-chart .tick { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.trend-chart .goal { stroke: rgba(34, 197, 94, 0.6); stroke-width: 1; }
.trend-chart .goal-label { fill: #86EFAC; font-family: var(--mono); font-size: 11px; }
.trend-chart .band { fill: var(--a); opacity: 0.12; }
.trend-chart .kg-dot { fill: var(--ink-3); opacity: 0.55; }
.trend-chart .trend-line { fill: none; stroke: var(--a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-chart .trend-end { fill: var(--a); stroke: var(--bg); stroke-width: 2; }
.trend-chart .crosshair { stroke: rgba(255, 255, 255, 0.32); stroke-width: 1; }
.trend-chart .hover-dot { fill: var(--a); stroke: var(--bg); stroke-width: 2; }
.chart-empty { color: var(--ink-3); padding: var(--sp-5) 0; }

.chart-tip {
  position: absolute;
  top: 6px;
  min-width: 150px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(13, 17, 23, 0.96);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  pointer-events: none;
  z-index: 1;
}
.chart-tip .tip-date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
.chart-tip .tip-row { display: flex; gap: var(--sp-3); color: var(--ink-2); }
.chart-tip .tip-row b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Op smalle schermen schaalt het SVG sterk terug: tekst en lijnen groter in SVG-eenheden */
@media (max-width: 640px) {
  .trend-chart .tick { font-size: 17px; }
  .trend-chart .goal-label { font-size: 17px; }
  .trend-chart .tick.x { transform: translateY(6px); }
  .trend-chart .trend-line { stroke-width: 3; }
  .trend-chart .kg-dot { r: 4; }
  .ring { width: 132px; }
  .ring-big { font-size: 30px; }
}

@media (max-width: 420px) {
  .trend-chart .tick { font-size: 20px; }
  .ring { width: 120px; }
  .ring-big { font-size: 27px; }
}