/* SVG charts (Components/Shared/Charts). Marks take their color from the theme, so a chart
   follows light and dark mode with the rest of the page. */

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

.svg-chart text {
    fill: var(--color-text-secondary);
    font-size: 11px;
}

.svg-chart .label-strong {
    fill: var(--color-text-primary);
}

.svg-chart .label-muted {
    fill: var(--color-text-muted);
    font-size: 10px;
}

.svg-chart .value {
    fill: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.svg-chart .grid {
    stroke: var(--color-border-light);
    stroke-width: 1;
}

.svg-chart .axis {
    stroke: var(--color-text-muted);
    stroke-width: 1;
}

.svg-chart .zero-dash {
    stroke: var(--color-border);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.svg-chart .band {
    fill: var(--color-bg-muted);
}

.svg-chart .clickable {
    cursor: pointer;
}

.svg-chart .clickable:hover rect {
    opacity: 0.8;
}

.svg-chart .tone-neutral { fill: #9fb3b1; stroke: #9fb3b1; }
.svg-chart .tone-good { fill: var(--color-success); stroke: var(--color-success); }
.svg-chart .tone-poor { fill: var(--bs-danger); stroke: var(--bs-danger); }
.svg-chart .tone-warn { fill: var(--color-warning); stroke: var(--color-warning); }
.svg-chart .tone-primary { fill: var(--color-primary); stroke: var(--color-primary); }
.svg-chart .tone-accent { fill: #3b6ea8; stroke: #3b6ea8; }
.svg-chart .tone-muted { fill: var(--color-text-muted); stroke: var(--color-text-muted); }

.svg-chart polyline {
    fill: none;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.svg-chart polyline.emphasis {
    stroke-width: 2.5;
}

.svg-chart polyline.dashed {
    stroke-dasharray: 6 4;
}

.svg-chart text.series-label {
    stroke: none;
    font-weight: 600;
}

.svg-chart text.series-label .value {
    font-weight: 400;
}

.svg-chart circle.point {
    fill: var(--color-bg-surface);
    stroke-width: 1.5;
}

.svg-chart text.segment {
    fill: #ffffff;
    font-size: 10px;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.chart-legend .swatch {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.chart-legend .swatch.tone-neutral { background: #9fb3b1; }
.chart-legend .swatch.tone-good { background: var(--color-success); }
.chart-legend .swatch.tone-poor { background: var(--bs-danger); }
.chart-legend .swatch.tone-warn { background: var(--color-warning); }
.chart-legend .swatch.tone-primary { background: var(--color-primary); }
.chart-legend .swatch.tone-accent { background: #3b6ea8; }
.chart-legend .swatch.tone-muted { background: var(--color-text-muted); }

.tone-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}

.tone-dot.tone-good { background: var(--color-success); }
.tone-dot.tone-poor { background: var(--bs-danger); }
.tone-dot.tone-warn { background: var(--color-warning); }
.tone-dot.tone-neutral { background: #9fb3b1; }
.tone-dot.tone-muted { background: var(--color-border); }

.movement-table .num {
    font-variant-numeric: tabular-nums;
}