/* ══════════════════════════════════════════════════════════════════
   Tremor chart chrome → Stackz design tokens
   ══════════════════════════════════════════════════════════════════
   The vendored Tremor components paint their chrome with Tailwind palette
   utilities — `fill-gray-500` on axis ticks, `stroke-gray-200` on gridlines,
   `text-gray-900` in tooltips — and switch them with Tailwind's `dark:`
   variant.

   That variant keys off `prefers-color-scheme` (or a `.dark` class). This app
   themes with `html.theme-light` on a dark-by-default `:root`, so Tremor's
   dark styles never activate and its light greys are wrong against the dark
   surface. Chart text also arrived in the UI sans-serif at Tailwind's `text-xs`
   rather than the tabular mono every other figure in the product uses.

   Rather than edit the vendored components — they should stay diffable
   against upstream — this restyles the chrome through Recharts' own semantic
   class names, which are stable across Tremor versions.

   Series marks are NOT touched here: those come from the palette slots in
   frontend/tremor/utils/chartColors.ts, which already resolve to --sz-*.
   ══════════════════════════════════════════════════════════════════ */

@layer components {
  /* ── Axis ticks ───────────────────────────────────────────────────
     Dates and money are figures, so they take the tabular mono face and the
     11px floor, matching every other number in the product. */
  .recharts-cartesian-axis-tick text,
  .recharts-cartesian-axis-tick-value,
  .recharts-polar-angle-axis-tick-value {
    fill: var(--sz-ink-3) !important;
    font-family: var(--sz-font-num) !important;
    font-size: var(--sz-text-micro) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: 0;
  }

  /* ── Grid + axis lines ────────────────────────────────────────────
     Hairlines that separate without competing; the axis line itself is
     dropped because the tick labels already anchor the scale. */
  .recharts-cartesian-grid line,
  .recharts-cartesian-grid-horizontal line,
  .recharts-cartesian-grid-vertical line {
    stroke: var(--sz-rule) !important;
  }
  .recharts-cartesian-axis-line,
  .recharts-cartesian-axis-tick-line {
    stroke: transparent !important;
  }

  /* ── Axis labels ──────────────────────────────────────────────── */
  .recharts-label,
  .recharts-cartesian-axis-label {
    fill: var(--sz-ink-4) !important;
    font-family: var(--sz-font-text) !important;
    font-size: var(--sz-text-micro) !important;
  }

  /* ── Legend ───────────────────────────────────────────────────────
     Tremor renders its legend as HTML beside the SVG. Series names are prose,
     so they keep the text face; only figures get the mono. */
  .recharts-wrapper + div [role="button"],
  .recharts-legend-wrapper {
    font-family: var(--sz-font-text);
  }

  /* ── Tooltip card ─────────────────────────────────────────────────
     Tremor's tooltip is HTML with gray-900 text on a white card. Repaint it
     as one of the product's own surfaces so it reads in both themes. */
  .recharts-tooltip-wrapper > div,
  .recharts-default-tooltip {
    background: var(--sz-surface) !important;
    border: 1px solid var(--sz-rule-strong) !important;
    border-radius: var(--sz-r-md) !important;
    box-shadow: var(--sz-shadow-md) !important;
    color: var(--sz-ink) !important;
  }
  .recharts-tooltip-wrapper p,
  .recharts-tooltip-wrapper span,
  .recharts-tooltip-wrapper div {
    color: var(--sz-ink-2);
  }
  /* The value in a tooltip is a figure — tabular, and never clipped. */
  .recharts-tooltip-wrapper .font-medium,
  .recharts-tooltip-wrapper [class*="text-right"] {
    color: var(--sz-ink) !important;
    font-family: var(--sz-font-num);
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* ── Donut centre label ───────────────────────────────────────── */
  .recharts-pie-labels text,
  .recharts-text.recharts-pie-label-text {
    fill: var(--sz-ink) !important;
    font-family: var(--sz-font-num) !important;
    font-variant-numeric: tabular-nums;
  }

  /* Slice seams: separate adjacent slices without drawing a visible ring. */
  .recharts-pie-sector path,
  .recharts-sector {
    stroke: var(--sz-surface);
    stroke-width: 1.5;
  }

  /* ── Active/hover states ──────────────────────────────────────── */
  .recharts-active-dot circle {
    stroke: var(--sz-surface) !important;
    stroke-width: 2;
  }
  .recharts-tooltip-cursor {
    fill: var(--sz-surface-3) !important;
    fill-opacity: 0.55;
    stroke: transparent !important;
  }
}