/* ============================================================
 * ds-charts — visual theme for the Test Report / Insights /
 *             QC Monitoring chart family. Tracks MUI X Charts'
 *             default rendering so our SVG renderers (in
 *             public/test-report/charts.js) feel consistent
 *             with the rest of the MUI-styled UI.
 *
 * Drop-in tokens (consumed via `var()` from JS render code):
 *   --chart-text         label / tick color (MUI text-secondary)
 *   --chart-axis         axis line color (MUI divider)
 *   --chart-grid         gridline color (MUI divider / 50%)
 *   --chart-stroke       white separator stroke between segments
 *   --chart-tooltip-bg   tooltip card background
 *   --chart-tooltip-fg   tooltip text
 *   --chart-tooltip-shadow MUI elevation-1
 *   --chart-c-1..6       blueberryTwilightPalette (MUI default)
 *
 * Threshold colors (used by bar coverage / leakage / density):
 *   --chart-status-good    MUI success.main
 *   --chart-status-warn    MUI warning.main
 *   --chart-status-bad     MUI error.main
 *   --chart-status-none    MUI grey 200 (no-data)
 * ============================================================ */
@layer components {

:root {
  /* MUI palette: blueberryTwilightPalette (Charts default)
   * https://mui.com/x/react-charts/styling/#palette */
  --chart-c-1: #02B2AF;
  --chart-c-2: #2E96FF;
  --chart-c-3: #B800D8;
  --chart-c-4: #60009B;
  --chart-c-5: #2731C8;
  --chart-c-6: #03008D;

  /* Axes, gridlines, separator strokes */
  --chart-text:   rgba(0, 0, 0, 0.6);
  --chart-axis:   rgba(0, 0, 0, 0.23);
  --chart-grid:   rgba(0, 0, 0, 0.12);
  --chart-stroke: #ffffff;

  /* Tooltip card */
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-fg: rgba(0, 0, 0, 0.87);
  --chart-tooltip-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.20),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);

  /* Threshold semantics (MUI palette.{success,warning,error}.main) */
  --chart-status-good: #2e7d32;
  --chart-status-warn: #ed6c02;
  --chart-status-bad:  #d32f2f;
  --chart-status-none: #e0e0e0;
}

/* ── Pie ──
 * A thin 2px white stroke between slices is the MUI X default.
 * We render the pie itself as a `conic-gradient` background; the
 * "stroke" effect comes from rotating an SVG overlay positioned
 * by the JS renderer. */
.ds-chart-pie {
  position: relative;
}
.ds-chart-pie__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ds-chart-pie__slice-stroke {
  fill: none;
  stroke: var(--chart-stroke);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* ── Legend ──
 * MUI legend: small filled circle marker + label. Centered above
 * the chart by default, wraps cleanly on narrow viewports. */
.ds-chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--chart-tooltip-fg);
}
.ds-chart-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.ds-chart-legend .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-chart-legend .legend-text {
  color: rgba(0, 0, 0, 0.87);
  letter-spacing: 0.15px;
}

} /* end @layer components */