/* Hand-rolled SVG chart styling (no charting library — theme-aware via CSS variables). */

.chart-wrap { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }

.chart-grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis-label { fill: var(--text-muted); font-size: 10.5px; font-family: var(--font-sans); text-anchor: middle; }

.chart-bar { fill: var(--chart-1); transition: opacity var(--duration-fast) var(--ease); }
.chart-bar:hover { opacity: .8; }
.chart-bar.secondary { fill: var(--lime); }

.chart-line-path { fill: none; stroke: var(--chart-1); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chart-area-path { fill: url(#areaGradient); opacity: .9; }
.chart-dot { fill: var(--bg-surface); stroke: var(--chart-1); stroke-width: 2; }
.chart-dot.hover { r: 4.5; }

.chart-tooltip {
    position: absolute;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
    transform: translate(-50%, -110%);
}
.chart-tooltip .tt-label { color: var(--text-muted); margin-bottom: 2px; }
.chart-tooltip .tt-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); font-size: var(--text-xs); }
.chart-legend-item { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.chart-legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

.donut-center-label { fill: var(--text-primary); font-weight: 700; font-size: 20px; font-family: var(--font-sans); text-anchor: middle; }
.donut-center-sub { fill: var(--text-muted); font-size: 10.5px; font-family: var(--font-sans); text-anchor: middle; }

.sparkline-path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }