/* ── v4: Hybrid SVG+HTML — maximum containment ── */
/* ── Themeable via CSS custom properties ── */
.chart {
  --chart-bg: #fff;
  --chart-grid: #e0e0e0;
  --chart-text: #666;
  --chart-title: #333;
  --chart-indicator-stroke: #fff;
  --chart-indicator-bar-fill: rgba(255,255,255,0.3);
  --chart-indicator-bar-stroke: #333;
  --chart-tooltip-bg: rgba(0, 0, 0, 0.8);
  --chart-tooltip-color: #fff;
  --chart-zero-line: #999;

  contain: strict;
  display: block;
  border-radius: 4px;
  max-width: 100%;
}

/* ── Grid: solid, pixel-perfect ── */
.chart-grid {
  fill: none;
  stroke: var(--chart-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
  pointer-events: none;
}

/* ── Bar rectangles: pixel-perfect ── */
.chart-bar {
  shape-rendering: crispEdges;
  pointer-events: none;
}

/* ── Pie/donut slices: smooth antialiased arcs ── */
.chart-slice {
  pointer-events: none;
}

/* ── Series paths: speed-optimized ── */
.chart-series {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  shape-rendering: optimizeSpeed;
  pointer-events: none;
}

/* ── HTML label overlay ── */
.chart-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chart-labels > span {
  position: absolute;
  font: 11px system-ui, -apple-system, sans-serif;
  color: var(--chart-text);
  pointer-events: none;
  line-height: 1;
}

/* Y-tick labels: right-aligned */
.chart-tick-y {
  transform: translateX(-100%);
  text-align: right;
  background: #fff;
  padding: 0 2px;
}

/* X-tick labels: centered */
.chart-tick-x {
  transform: translateX(-50%);
  text-align: center;
  background: #fff;
  padding: 0 2px;
}

/* Axis titles */
.chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--chart-title);
  transform: translateX(-50%);
  text-align: center;
}

/* Y-axis title: horizontal */
.chart-title.chart-rotated {
  white-space: nowrap;
}

/* ── Indicator: lazy-created, transform-based ── */
.chart-indicator {
  stroke: var(--chart-indicator-stroke);
  stroke-width: 2;
  pointer-events: none;
  will-change: transform;
}

/* Bar hover indicator */
rect.chart-indicator {
  fill: var(--chart-indicator-bar-fill) !important;
  stroke: var(--chart-indicator-bar-stroke) !important;
}

/* Pie hover indicator */
path.chart-indicator {
  stroke: var(--chart-indicator-stroke) !important;
}

/* ── Tooltip: GPU-composited, lazy-created ── */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font: 12px system-ui, -apple-system, sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  will-change: transform, opacity;
  white-space: nowrap;
  z-index: 10;
  line-height: 1.4;
}

/* ── Zero-axis line override ── */
.chart line[stroke="#999"] {
  stroke: var(--chart-zero-line) !important;
}

/* ── Dark preset: auto-activates via prefers-color-scheme ── */
@media (prefers-color-scheme: dark) {
  .chart:not([data-chart-theme="light"]) {
    --chart-bg: #1a1d20;
    --chart-grid: #2d333b;
    --chart-text: #8b949e;
    --chart-title: #c9d1d9;
    --chart-indicator-stroke: #1a1d20;
    --chart-indicator-bar-fill: rgba(255,255,255,0.12);
    --chart-indicator-bar-stroke: #c9d1d9;
    --chart-tooltip-bg: rgba(0, 0, 0, 0.85);
    --chart-tooltip-color: #f0f6fc;
    --chart-zero-line: #555d66;
  }
  .chart-tick-y, .chart-tick-x { background: #1a1d20; }

  /* ── Explicit light override: site forces light while OS is dark ── */
  [data-bs-theme="light"] .chart,
  .light .chart,
  .chart-light {
    --chart-bg: #fff;
    --chart-grid: #e0e0e0;
    --chart-text: #666;
    --chart-title: #333;
    --chart-indicator-stroke: #fff;
    --chart-indicator-bar-fill: rgba(255,255,255,0.3);
    --chart-indicator-bar-stroke: #333;
    --chart-tooltip-bg: rgba(0, 0, 0, 0.8);
    --chart-tooltip-color: #fff;
    --chart-zero-line: #999;
  }
  [data-bs-theme="light"] .chart-tick-y,
  [data-bs-theme="light"] .chart-tick-x,
  .light .chart-tick-y,
  .light .chart-tick-x,
  .chart-light .chart-tick-y,
  .chart-light .chart-tick-x { background: #fff; }
}

/* ── Explicit dark: Bootstrap [data-bs-theme="dark"], Tailwind .dark, or .chart-dark ── */
[data-bs-theme="dark"] .chart-tick-y,
[data-bs-theme="dark"] .chart-tick-x,
.dark .chart-tick-y,
.dark .chart-tick-x,
.chart-dark .chart-tick-y,
.chart-dark .chart-tick-x { background: #1a1d20; }

[data-bs-theme="dark"] .chart,
.dark .chart,
.chart-dark {
  --chart-bg: #1a1d20;
  --chart-grid: #2d333b;
  --chart-text: #8b949e;
  --chart-title: #c9d1d9;
  --chart-indicator-stroke: #1a1d20;
  --chart-indicator-bar-fill: rgba(255,255,255,0.12);
  --chart-indicator-bar-stroke: #c9d1d9;
  --chart-tooltip-bg: rgba(0, 0, 0, 0.85);
  --chart-tooltip-color: #f0f6fc;
  --chart-zero-line: #555d66;
}