/* Vexaro Charts companion stylesheet. Load after vexaro.css. */
:root { --vx-chart-color-1: var(--vx-color-primary); --vx-chart-color-2: var(--vx-color-success); --vx-chart-color-3: var(--vx-color-warning); --vx-chart-color-4: var(--vx-color-text); --vx-chart-color-5: #1d4ed8; --vx-chart-color-6: #7e22ce; --vx-chart-color-7: #0e7490; --vx-chart-color-8: #be185d; }
[data-vx-theme="dark"] { --vx-chart-color-5: #93c5fd; --vx-chart-color-6: #d8b4fe; --vx-chart-color-7: #67e8f9; --vx-chart-color-8: #f9a8d4; }
.vx-chart { min-width: 0; width: 100%; }
.vx-chart-svg { background-color: var(--vx-color-surface); display: block; width: 100%; height: auto; overflow: visible; color: var(--vx-color-text); font-family: var(--vx-font-sans); font-size: 12px; fill: currentColor; }
.vx-chart-grid { stroke: var(--vx-color-border-subtle); stroke-width: 1; fill: none; }
.vx-chart-axis { stroke: var(--vx-color-border); stroke-width: 1; }
.vx-chart-label { fill: var(--vx-color-text-muted); font-size: 11px; }
.vx-chart-series-0 { color: var(--vx-chart-color-1); }
.vx-chart-series-1 { color: var(--vx-chart-color-2); }
.vx-chart-series-2 { color: var(--vx-chart-color-3); }
.vx-chart-series-3 { color: var(--vx-chart-color-4); }
.vx-chart-series-4 { color: var(--vx-chart-color-5); }
.vx-chart-series-5 { color: var(--vx-chart-color-6); }
.vx-chart-series-6 { color: var(--vx-chart-color-7); }
.vx-chart-series-7 { color: var(--vx-chart-color-8); }
.vx-chart-bar, .vx-chart-point { fill: currentColor; }
.vx-chart-point { stroke: var(--vx-color-surface); stroke-width: 1.5; }
.vx-chart-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.vx-chart-line.vx-chart-series-1 { stroke-dasharray: 7 3; }
.vx-chart-line.vx-chart-series-2 { stroke-dasharray: 2 3; }
.vx-chart-area { fill: currentColor; fill-opacity: .12; }
.vx-chart-radar { fill: currentColor; fill-opacity: .12; stroke: currentColor; stroke-width: 2; }
.vx-chart-slice { fill: currentColor; stroke: var(--vx-color-surface); stroke-width: 2; }
.vx-chart-hole { fill: var(--vx-color-surface); }
.vx-chart-total { fill: var(--vx-color-text); font-size: 22px; font-weight: 600; }
.vx-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vx-space-2); padding-block: var(--vx-space-3); }
.vx-chart-legend-item { display: inline-flex; align-items: center; gap: var(--vx-space-2); border: 1px solid var(--vx-color-border-subtle); padding: var(--vx-space-2); background: var(--vx-color-surface); font-size: var(--vx-text-xs); }
button.vx-chart-legend-item { cursor: pointer; }
.vx-chart-legend-item::before { content: ""; display: inline-block; width: .65rem; height: .65rem; background: currentColor; }
.vx-chart-legend-item[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }
.vx-chart-legend-item:focus-visible { outline: var(--vx-focus-width) solid var(--vx-color-focus); outline-offset: var(--vx-focus-offset); }
.vx-chart-data { margin-top: var(--vx-space-3); font-size: var(--vx-text-sm); }
.vx-chart-data summary { cursor: pointer; padding-block: var(--vx-space-2); }
@media (forced-colors: active) { .vx-chart-svg { forced-color-adjust: none; } .vx-chart-line, .vx-chart-radar { stroke: CanvasText; } .vx-chart-bar, .vx-chart-point, .vx-chart-slice { fill: CanvasText; stroke: Canvas; } .vx-chart-grid, .vx-chart-axis { stroke: GrayText; } .vx-chart-label, .vx-chart-total { fill: CanvasText; } .vx-chart-hole { fill: Canvas; } }