/* ==========================================================================
   READ VPN Backoffice — Charts (DEV-GUIDE §3.7, READVPN-DESIGN-SYSTEM §6)
   Inline SVG drawn by assets/js/components/charts.js. Colours come from the
   chart tokens (--rv-chart-1..6, --rv-chart-grid, --rv-chart-label,
   --rv-chart-prev); marks are flat (no gradients, bevels or shadows).
   ========================================================================== */
.rv-chart { position: relative; min-width: 0; font-family: var(--rv-font-family); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-primary); }
.rv-chart__top { display: flex; justify-content: flex-end; margin-bottom: var(--rv-space-1); }
.rv-chart__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--rv-space-2); border: 1px solid transparent; border-radius: var(--rv-radius-control); background: transparent; color: var(--rv-primary-700); font: inherit; font-size: var(--rv-fs-small); font-weight: 500; cursor: pointer; }
.rv-chart__toggle:hover { background: var(--rv-primary-50); color: var(--rv-primary-800); }
.rv-chart__toggle:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-chart__view { min-width: 0; }
.rv-chart.is-wide .rv-chart__view { display: flex; align-items: center; gap: var(--rv-space-6); }
.rv-chart.is-wide .rv-chart__plot { flex: 0 0 auto; }
.rv-chart.is-wide .rv-chart__legend { flex: 1 1 auto; margin-top: 0; }
.rv-chart__plot { position: relative; width: 100%; min-width: 0; border-radius: var(--rv-radius-control); touch-action: pan-y; }
.rv-chart__plot:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; }
.rv-chart__plot.is-clickable { cursor: pointer; }
.rv-chart__svg { display: block; max-width: none; overflow: visible; }

/* SVG marks */
.rv-chart__svg text { font-family: var(--rv-font-family); font-size: 12px; fill: var(--rv-chart-label); }
.rv-chart__grid { stroke: var(--rv-chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.rv-chart__baseline { stroke: var(--rv-neutral-300); stroke-width: 1; shape-rendering: crispEdges; }
.rv-chart__axis-title { font-weight: 500; }
.rv-chart__svg .rv-chart__cat { fill: var(--rv-text-primary); }
.rv-chart__svg .rv-chart__note { fill: var(--rv-text-muted); }
.rv-chart__svg .rv-chart__value { fill: var(--rv-text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.rv-chart__svg .rv-chart__conv { fill: var(--rv-text-muted); font-weight: 400; }
.rv-chart__line { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.rv-chart__line.is-dashed { stroke-dasharray: 6 4; stroke-linecap: butt; }
.rv-chart__dot { stroke: var(--rv-surface); stroke-width: 1.5px; }
.rv-chart__marker { stroke: var(--rv-surface); stroke-width: 2px; }
.rv-chart__guide { stroke: var(--rv-neutral-400); stroke-width: 1; stroke-dasharray: 3 3; shape-rendering: crispEdges; }
.rv-chart__band { fill: var(--rv-neutral-100); }
.rv-chart__track { fill: var(--rv-neutral-100); }
.rv-chart__bar { shape-rendering: crispEdges; }
.rv-chart__slice { stroke: var(--rv-surface); stroke-width: 1.5px; }
.rv-chart__slice.is-active { stroke-width: 2px; }
.rv-chart__svg .rv-chart__center-value { fill: var(--rv-text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.rv-chart__svg .rv-chart__center-label { fill: var(--rv-text-muted); }

/* legend (below by default; right side for wide donuts) */
.rv-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-1) var(--rv-space-4); margin-top: var(--rv-space-2); color: var(--rv-text-secondary); }
.rv-chart__legend[hidden] { display: none; }
.rv-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.rv-chart__swatch { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 2px; }
.rv-chart__swatch--line { width: 16px; height: 0; border-top: 2px solid currentColor; border-radius: 0; background: none !important; }
.rv-chart__swatch--line.is-dashed { border-top-style: dashed; }
.rv-chart__legend-list { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; padding: 0; list-style: none; }
.rv-chart__legend-item.is-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 52px; align-items: center; gap: var(--rv-space-2); width: 100%; min-height: 28px; padding: 2px var(--rv-space-1); border-radius: 4px; }
button.rv-chart__legend-item { cursor: pointer; }
.rv-chart__legend-item.is-row:hover, button.rv-chart__legend-item:focus-visible { background: var(--rv-neutral-50); }
button.rv-chart__legend-item:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 0; }
.rv-chart__legend-label { min-width: 0; color: var(--rv-text-primary); overflow-wrap: anywhere; }
.rv-chart__legend-val { color: var(--rv-text-primary); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-chart__legend-pct { color: var(--rv-text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* tooltip */
.rv-chart__tooltip { position: absolute; z-index: var(--rv-z-popover); min-width: 140px; max-width: 280px; padding: var(--rv-space-2) 10px; background: var(--rv-surface); border: 1px solid var(--rv-neutral-300); border-radius: 4px; box-shadow: var(--rv-shadow-popover); font-size: var(--rv-fs-small); line-height: 18px; color: var(--rv-text-primary); pointer-events: none; }
.rv-chart__tt-title { margin-bottom: var(--rv-space-1); font-weight: 600; overflow-wrap: anywhere; }
.rv-chart__tt-row { display: flex; align-items: center; gap: 6px; }
.rv-chart__tt-row + .rv-chart__tt-row { margin-top: 2px; }
.rv-chart__tt-name { flex: 1 1 auto; min-width: 0; color: var(--rv-text-secondary); overflow-wrap: anywhere; }
.rv-chart__tt-val { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-chart__tt-row.is-total { margin-top: var(--rv-space-1); padding-top: var(--rv-space-1); border-top: 1px solid var(--rv-divider); }
.rv-chart__tt-note { margin-top: var(--rv-space-1); color: var(--rv-text-muted); }

/* table view + empty state */
.rv-chart__table { min-width: 0; }
.rv-chart__table .rv-table-wrap { max-height: 360px; overflow: auto; }
.rv-chart__datatable th[scope="row"] { font-weight: 400; text-align: left; }
.rv-chart__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rv-space-2); color: var(--rv-text-muted); font-size: var(--rv-fs-body); }
.rv-chart__empty svg { color: var(--rv-neutral-400); }

@media (max-width: 767px) {
  .rv-chart__legend-item.is-row { grid-template-columns: 10px minmax(0, 1fr) auto 48px; }
}
@media (pointer: coarse) {
  .rv-chart__toggle { min-height: var(--rv-touch); }
  .rv-chart__legend-item.is-row { min-height: var(--rv-touch); }
}
@media print {
  .rv-chart__toggle { display: none !important; }
}