/* ==========================================================================
   SOLVO — Charts
   --------------------------------------------------------------------------
   The two charts are preserved exactly as built: same SVG geometry, same
   data encoding, same interactions. Only their COLOR SOURCE changes — from
   hardcoded hex to tokens — which is what makes them correct in both themes.

   Series color is assigned by entity (which debt category, which service),
   never by rank, so filtering the list never repaints the survivors.
   ========================================================================== */

/* ==========================================================================
   Debt composition donut
   ========================================================================== */
.debt-summary-section { padding: 0; overflow: hidden; }
.debt-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  cursor: pointer;
  list-style: none;
}
.debt-summary-toggle h3 { margin: 0; font-size: var(--fs-md); }
.debt-summary-toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-normal); }
.debt-summary-section[open] > .debt-summary-toggle { border-bottom: 1px solid var(--line); }
.debt-summary-body { padding: var(--s-4); display: grid; gap: var(--s-4); }

.debt-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  gap: var(--s-4);
  align-items: start;
}
.debt-summary-stack { display: grid; gap: var(--s-3); }

.debt-donut-card, .debt-usage-card, .debt-category-card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}
.debt-donut-card {
  display: grid;
  grid-template-columns: clamp(200px, 17vw, 240px) minmax(170px, 1fr);
  gap: var(--s-5);
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}

.debt-donut {
  position: relative;
  width: clamp(200px, 17vw, 240px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.debt-donut-svg { grid-area: 1/1; width: 100%; height: 100%; overflow: visible; }

/* The hole. Uses the card's own surface so it disappears into it in either
   theme — this is what used to be a hardcoded #fff. */
.debt-donut::before {
  content: "";
  grid-area: 1/1;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

/* 2px surface-colored gap between adjacent segments, so neighbouring slices
   never blend into one another. */
.debt-donut-segment {
  stroke: var(--surface-soft);
  stroke-width: 2.5;
  cursor: pointer;
  transition: transform var(--t), opacity var(--t);
  transform-box: view-box;
  transform-origin: 100px 100px;
}
.debt-donut-segment:hover,
.debt-donut-segment:focus-visible { transform: translate(var(--dx), var(--dy)); outline: none; }
.debt-donut-segment:focus-visible { stroke: var(--ink); stroke-width: 3; }

.debt-donut-center { grid-area: 1/1; z-index: 1; width: 58%; text-align: center; }
.debt-donut-center span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.debt-donut-center strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Legend is always present — identity is never carried by color alone. */
.debt-legend { display: grid; gap: 1px; align-content: center; min-width: 0; }
.debt-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast);
}
.debt-legend-row:hover { background: var(--surface); }
.debt-legend-row strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }

.debt-summary-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); }
.debt-action-card { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-3); }
.debt-action-card span {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.debt-action-card strong { font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.debt-action-card small { color: var(--muted); font-size: var(--fs-xs); }
.debt-action-card button { margin-top: var(--s-1); justify-self: start; }

.debt-usage-card { display: grid; gap: var(--s-2); padding: var(--s-3); }
.debt-usage-stats { border: 0; box-shadow: none; background: transparent; }
.debt-usage-stats > div { border: 1px solid var(--line); border-radius: var(--r-xs); min-height: 0; }
.debt-usage-card .kpi { font-size: var(--fs-hero); font-weight: var(--fw-bold); }

.debt-category-list { display: grid; gap: var(--s-2); }
.debt-category-summary { grid-template-columns: 10px minmax(0, 1fr) auto auto; padding: 0 var(--s-4); }
.debt-category-label strong { display: block; font-size: var(--fs-base); }
.debt-category-label small { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-sm); }
.debt-category-accounts { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.debt-summary-account { padding: var(--s-3); display: grid; gap: var(--s-2); }
.debt-summary-account-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.debt-summary-account-main strong { font-size: var(--fs-base); }
.debt-summary-account-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.debt-summary-source { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: var(--fs-xs); }

/* ==========================================================================
   Household service charts — monthly bars per service
   ========================================================================== */
.household-chart-grid, .household-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-3);
}
.household-chart-card, .household-element-card, .household-share-card {
  padding: var(--s-4);
  overflow: hidden;
}
/* Fixed head height so the bar charts below start on the same line in every
   card of a row — service names run to two lines and would otherwise stagger
   the whole grid. */
.household-chart-head, .household-element-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 46px;
  margin-bottom: var(--s-2);
}
.household-chart-title > div { min-width: 0; }
.household-chart-title { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }

/* The service's series color, used as identity — same hue as its bars. */
.household-chart-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--household-color, var(--chart-1));
  color: var(--on-brand);
}
html[data-theme="dark"] .household-chart-icon { color: var(--canvas); }
.household-chart-icon svg { width: 20px; height: 20px; }

/* Text wears text tokens, never the series color — the colored icon beside
   it already carries identity, and colored text fails contrast in one mode
   or the other. */
.household-chart-title h4, .household-element-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}
.household-chart-title small, .household-element-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.household-chart-stat { flex: 0 0 auto; text-align: right; }
.household-chart-stat strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums;
}
.household-chart-stat span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}
/* Spending up is bad news in this product; spending down is good. */
.household-chart-stat span.up { color: var(--neg); background: var(--neg-soft); border-color: transparent; }
.household-chart-stat span.down { color: var(--pos); background: var(--pos-soft); border-color: transparent; }
.household-chart-stat small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }

.household-element-chart { margin: var(--s-1) 0 var(--s-2); width: 100%; overflow: hidden; }
.household-bar-chart { display: block; width: 100%; height: auto; max-height: 190px; }
.household-spark { display: block; width: 100%; height: 52px; }

/* Gridlines and axis text read from tokens via these classes, set on the
   SVG elements themselves. */
.hh-grid { stroke: var(--line); }
.hh-axis { stroke: var(--line-strong); }
.hh-tick { fill: var(--muted); }
.hh-label { fill: var(--muted); }
.hh-value { fill: var(--ink-2); }
.hh-bar { transition: opacity var(--t-fast); }
.hh-bar:hover { opacity: 1 !important; }

.household-element-meta, .household-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.household-expand-label, .household-detail-button { color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.household-mini-chart { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.household-mini-chart div { flex: 1; display: grid; align-content: end; gap: 2px; }
.household-mini-chart i { display: block; border-radius: 2px 2px 0 0; background: var(--household-color, var(--chart-1)); }
.household-mini-chart span { color: var(--muted); font-size: 9px; text-align: center; }

.household-share-card { display: grid; gap: var(--s-2); }
.household-share-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.household-share-card strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.household-filtered-transactions { display: grid; gap: var(--s-2); }
.household-kpi-card { display: grid; gap: var(--s-1); padding: var(--s-3); }
.ui-service-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.ui-service-summary strong { display: block; margin-top: var(--s-1); font-size: var(--fs-hero); font-weight: var(--fw-bold); letter-spacing: var(--track-num); }
.ui-service-summary small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); }
.ui-person-share, .ui-person-share-list > div {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}
.ui-person-share-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-2); }
.ui-person-share strong { display: block; font-size: var(--fs-base); }
.ui-person-share small { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--fs-sm); }
.ui-person-share b { display: block; margin-top: 2px; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .debt-summary-layout, .debt-donut-card { grid-template-columns: 1fr; }
  .debt-donut { margin: 0 auto; }
}