/* donut - monthly spending donut (js/views/donut.js). Colours are classes seg-0..seg-7; no inline styles anywhere. */
.seg-0 { --seg: #2563eb; }  /* blue */
.seg-1 { --seg: #0d9488; }  /* teal */
.seg-2 { --seg: #d97706; }  /* amber */
.seg-3 { --seg: #7c3aed; }  /* violet */
.seg-4 { --seg: #db2777; }  /* magenta */
.seg-5 { --seg: #4d7c0f; }  /* olive */
.seg-6 { --seg: #92400e; }  /* brown */
.seg-7 { --seg: #64748b; }  /* slate (also the grouped "other" slice) */

.donut { position: relative; display: grid; gap: .75rem; margin-block-start: .6rem; align-items: center; justify-items: center; }
.donut-chart { position: relative; inline-size: min(100%, 15rem); aspect-ratio: 1; }
.donut-svg { display: block; inline-size: 100%; block-size: 100%; }
.donut-track { stroke: var(--surface-2); }
.donut-seg { stroke: var(--seg, var(--muted)); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; text-align: center; padding: 22%; pointer-events: none; }
.donut-total { font-size: 1.3rem; line-height: 1.15; max-inline-size: 100%; }
.donut-total.sm { font-size: 1.05rem; }
.donut-total.xs { font-size: .9rem; }
.donut-label { font-size: .78rem; color: var(--muted); line-height: 1.2; }

.donut-side { inline-size: 100%; min-inline-size: 0; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.donut-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: .5rem; row-gap: .1rem; inline-size: 100%; min-block-size: 44px; padding: .4rem .6rem; text-align: start; font: inherit; color: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
button.donut-row { cursor: pointer; }
button.donut-row:hover { border-color: var(--accent); }
.donut-swatch { display: block; inline-size: .9rem; block-size: .9rem; border-radius: 4px; background: var(--seg, var(--muted)); }
.donut-name { overflow-wrap: anywhere; }
.donut-amt { white-space: nowrap; }
.donut-pct { min-inline-size: 2.6rem; text-align: end; font-size: .85rem; color: var(--muted); }
.donut-budget { grid-column: 2 / -1; font-size: .82rem; color: var(--muted); }
.donut-budget.over { color: var(--danger); font-weight: 700; }
.donut-item.over .donut-row { border-color: var(--danger); background: var(--danger-soft); border-inline-start-width: 5px; }
.donut-note { margin: .5rem 0 0; }

.donut-empty { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: .9rem .5rem; margin-block-start: .6rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.donut-empty .big { font-size: 2rem; }

.donut-error { margin-block-start: .6rem; }
.donut.loading, .donut-loading .donut { opacity: .55; }

/* visually hidden data table (screen-reader alternative to the chart) */
.donut-sr { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.donut-sr table { inline-size: 100%; table-layout: fixed; }

@media (min-width: 640px) {
  .donut { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: 1.25rem; justify-items: stretch; align-items: start; }
  .donut-chart { justify-self: center; }
}
@media (forced-colors: active) {
  .donut-seg { stroke: CanvasText; }
  .donut-track { stroke: Canvas; }
}