@layer components {

/* ── Chart tooltip (hover info card for bar / line / pie) ──
 * Matches MUI X Charts tooltip: floating white card, MUI elevation-2
 * shadow, 4px corners, 8/12 padding. Header line is bold (axis label
 * or series), body rows are "[dot] label  value" with secondary-text
 * labels and right-aligned tabular-nums values. */
.ds-chart-tooltip {
  position: fixed;
  z-index: 10006;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  background: var(--chart-tooltip-bg, #fff);
  border-radius: 4px;
  box-shadow: var(--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)
  );
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--chart-tooltip-fg, rgba(0, 0, 0, 0.87));
  pointer-events: none;
  min-width: 140px;
  letter-spacing: 0.15px;
  /* MUI tooltip fade-in */
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ds-chart-tooltip__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--chart-tooltip-fg, rgba(0, 0, 0, 0.87));
  padding-bottom: 2px;
  letter-spacing: 0.1px;
}
.ds-chart-tooltip__rows { display: flex; flex-direction: column; gap: 4px; }
.ds-chart-tooltip__row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ds-chart-tooltip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-chart-tooltip__label { color: rgba(0, 0, 0, 0.6); }
.ds-chart-tooltip__value {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Line chart hover guide (crosshair) ──
 * Thin vertical guide that snaps to the nearest x-point on hover —
 * matches MUI X Charts' crosshair behavior. */
.ds-chart-crosshair {
  stroke: var(--chart-axis, rgba(0, 0, 0, 0.23));
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-chart-crosshair.is-visible { opacity: 1; }
.ds-chart-active-dot {
  fill: var(--chart-c-2, #2E96FF);
  stroke: var(--chart-stroke, #fff);
  stroke-width: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-chart-active-dot.is-visible { opacity: 1; }

/* ── Pie slice hover bump ──
 * Each slice expands ~5px outward on hover. Implemented via a transform
 * on the slice path; the renderer adds `.ds-chart-pie__slice` and a
 * transform-origin that points to the pie's centre. */
.ds-chart-pie__slice {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 150ms ease;
  transform-origin: 0 0;
  cursor: pointer;
}
.ds-chart-pie__slice:hover {
  transform: scale(1.04);
  filter: brightness(1.04);
}

} /* end @layer components */