/*
Chart

The frame every chart template shares (shadcn's ChartContainer, tooltip
and legend): a figure that keeps its box (aspect ratio by default, or the
caller's height), a plot area the SVG fills, a legend row, a tooltip that
follows the pointer inside the chart, and a visually hidden data table.

  .chart                       the figure; --color-<key> per config entry
  .chart-plot                  the focusable plot area (one tab stop)
  .chart-svg                   the SVG, sized to the plot
  .chart-grid, .chart-axis     recessive lines and tick text
  .chart-cursor                the hover band or line
  .chart-tooltip               [data-state="open|closed"]
  .chart-legend                legend row; .chart-legend-item[aria-pressed]
  .chart-table                 the data as a table (sr-only unless shown)

Series colors come from the contract's --chart-1 .. --chart-8 and mark
corners from --chart-radius (app/shared/styles/ui-tokens.css).
*/

@layer components {

.chart {
  --chart-grid:        var(--rule);
  --chart-axis-ink:    var(--ink-dim);
  --chart-cursor:      var(--bg-muted);
  --chart-gap:         var(--bg);
  --chart-fill-opacity: calc(var(--opacity-overlay) * 0.8);
  --chart-motion:      var(--duration-slow);
  --chart-ease:        var(--ease-enter);
  --chart-delay:       0s;
  --chart-tooltip-motion: var(--duration-enter);
  --chart-tooltip-ease:   var(--ease-enter);
  --chart-label-inside: var(--white);

  --chart-aspect: 16 / 9;

  position:       relative;
  display:        flex;
  flex-direction: column;
  aspect-ratio:   var(--chart-aspect);
  min-width:      0;
  width:          100%;
  margin:         0;
  font-family:    var(--font-ui);
  font-size:      var(--text-caption);
  color:          var(--ink);
}

/* Polar charts keep a square box no taller than --chart-polar-size. */
.chart.chart-pie,
.chart.chart-radar,
.chart.chart-radial {
  --chart-polar-size: var(--space-64);
  --chart-aspect:     1;
  max-height:         var(--chart-polar-size);
}

.chart-plot {
  position:   relative;
  flex:       1 1 auto;
  min-height: 0;
  outline:    none;
  border-radius: var(--radius-item);
  -webkit-tap-highlight-color: transparent;
}

.chart-plot:focus-visible {
  box-shadow: var(--focus-ring);
}

/* The SVG is laid out in coordinates, not text flow: under dir=rtl it keeps
   ltr so text-anchor start and end mean the same side (Recharts draws the
   same picture in either direction). The tooltip and legend stay rtl. */
.chart-svg {
  position:  absolute;
  inset:     0;
  display:   block;
  width:     100%;
  height:    100%;
  overflow:  visible;
  direction: ltr;
}

.chart-svg text {
  font-family: var(--font-ui);
  font-size:   var(--text-caption);
}

/* Grid And Axes */

.chart-grid line,
.chart-grid path {
  fill:            none;
  stroke:          var(--chart-grid);
  stroke-width:    1;
  shape-rendering: crispEdges;
}

.chart-grid path {
  shape-rendering: auto;
}

/* CartesianGrid fill and stripes: the color comes from the caller's option. */
.chart-grid rect {
  stroke:          none;
  shape-rendering: crispEdges;
}

.chart-grid.is-filled path {
  fill:         var(--chart-grid);
  fill-opacity: var(--opacity-overlay);
}

.chart-axis text {
  fill:                 var(--chart-axis-ink);
  font-variant-numeric: tabular-nums;
}

.chart-axis line {
  stroke:          var(--chart-grid);
  shape-rendering: crispEdges;
}

.chart-axis-angle text {
  fill: var(--ink);
}

/* Marks */

.chart-series {
  transition: opacity var(--duration-enter) var(--ease-enter);
}

.chart-mark {
  fill: var(--series);
}

.chart-hit {
  fill: transparent;
}

.chart-cursor {
  fill:           var(--chart-cursor);
  stroke:         none;
  pointer-events: none;
}

.chart-cursor.is-line {
  fill:            none;
  stroke:          var(--rule-strong);
  stroke-width:    1;
  shape-rendering: crispEdges;
}

.chart-label {
  fill:                 var(--ink);
  font-variant-numeric: tabular-nums;
  pointer-events:       none;
}

.chart-label.is-inside {
  fill: var(--chart-label-inside);
}

.chart-label.is-muted {
  fill: var(--ink-dim);
}

.chart-center-value {
  fill:        var(--ink);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
}

.chart-svg .chart-center-value {
  font-size: var(--text-h3);
}

.chart-center-label {
  fill: var(--ink-dim);
}

/* Marks redraw to new data by animating their geometry. */
.chart.is-ready .chart-mark {
  transition:
    d       var(--chart-motion) var(--chart-ease) var(--chart-delay),
    opacity var(--duration-enter) var(--ease-enter),
    cx      var(--chart-motion) var(--chart-ease) var(--chart-delay),
    cy      var(--chart-motion) var(--chart-ease) var(--chart-delay);
}

.chart[data-resizing] .chart-mark {
  transition: none;
}

/* A script tween (chart/tween.ts) draws the marks itself: a path takes an
   inline d, its dots ride with its points, and pieces are drawn as ghosts in
   .chart-tween-layer while the real ones wait hidden at their new shape. */
.chart.chart[data-tweening] .chart-dot .chart-mark {
  transition: none;
}

.chart-series[data-tweening] > .chart-mark {
  visibility: hidden;
  transition: none;
  animation:  none;
}

.chart-tween-layer {
  pointer-events: none;
}

/* animate=false, and reduced motion: marks appear and move at once. */
.chart.is-static.is-ready .chart-mark,
.chart.is-static .chart-tooltip {
  animation:  none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .chart.chart.is-ready .chart-mark {
    animation:  none;
    transition: none;
  }
}

/* Tooltip (shadcn ChartTooltipContent) */

.chart-tooltip {
  position:       absolute;
  top:            0;
  left:           0;
  z-index:        1;
  display:        grid;
  gap:            var(--space-1-5);
  min-width:      var(--space-32);
  max-width:      min(var(--container-xs), 100%);
  padding:        var(--space-1-5) var(--space-2-5);
  border:         var(--overlay-border-width) solid var(--overlay-border);
  border-radius:  var(--radius-overlay);
  background:     var(--overlay-bg);
  box-shadow:     var(--overlay-shadow);
  color:          var(--overlay-ink);
  font-family:    var(--font-ui);
  font-size:      var(--text-caption);
  line-height:    1;
  pointer-events: none;
  overflow-wrap:  anywhere;
  transition:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--chart-tooltip-motion) var(--chart-tooltip-ease);
}

.chart-tooltip[data-state="closed"] {
  opacity:    0;
  visibility: hidden;
  transition:
    opacity    var(--duration-exit) var(--ease-exit),
    visibility 0s linear var(--duration-exit);
}

.chart-tooltip-label {
  font-weight: var(--weight-ui);
}

/* A long name wraps inside the tooltip (held to the chart's width); the
   value beside it never wraps or shrinks. */
.chart-tooltip-label,
.chart-tooltip-name {
  line-height: var(--leading-heading);
}

.chart-tooltip-items {
  display: grid;
  gap:     var(--space-1-5);
}

.chart-tooltip-item {
  display:     flex;
  align-items: stretch;
  gap:         var(--space-2);
  min-width:   0;
}

.chart-tooltip-item[data-indicator="dot"] {
  align-items: center;
}

.chart-tooltip-item > svg {
  flex:   none;
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
  color:  var(--ink-dim);
}

.chart-indicator {
  flex:          none;
  border-radius: var(--radius-xs);
  background:    var(--series);
  border:        0 solid var(--series);
}

.chart-indicator.is-dot {
  width:  var(--space-2-5);
  height: var(--space-2-5);
}

.chart-indicator.is-line {
  width: var(--space-1);
}

.chart-indicator.is-dashed {
  width:        0;
  background:   transparent;
  border-width: var(--control-border-width);
  border-style: dashed;
}

.chart-tooltip-row {
  display:         flex;
  flex:            1;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  min-width:       0;
}

.chart-tooltip-item.is-nested .chart-tooltip-row {
  align-items: flex-end;
}

.chart-tooltip-names {
  display:   grid;
  gap:       var(--space-1-5);
  min-width: 0;
}

.chart-tooltip-name {
  color: var(--ink-dim);
}

.chart-tooltip-value {
  flex:                 none;
  white-space:          nowrap;
  font-family:          var(--font-mono);
  font-weight:          var(--weight-ui);
  font-variant-numeric: tabular-nums;
  color:                var(--ink);
}

.chart-tooltip-unit {
  margin-inline-start: var(--space-0-5);
  font-family:         var(--font-ui);
  font-weight:         var(--weight-body);
  color:               var(--ink-dim);
}

.chart-tooltip-footer {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--space-4);
  padding-top:     var(--space-1-5);
  border-top:      var(--surface-border-width) solid var(--rule);
  font-weight:     var(--weight-ui);
}

/* Legend (shadcn ChartLegendContent) */

.chart-legend {
  display:         flex;
  flex:            none;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-1) var(--space-4);
  margin:          0;
  padding:         var(--space-3) 0 0;
  list-style:      none;
}

.chart-legend.is-top {
  padding: 0 0 var(--space-3);
}

/* Recharts Legend offset: further from the plot. */
.chart-legend[data-position="bottom"] {
  padding-top: calc(var(--space-3) + var(--chart-legend-offset, 0px));
}

.chart-legend[data-position="top"] {
  padding-bottom: calc(var(--space-3) + var(--chart-legend-offset, 0px));
}

/* Recharts Legend position inside, center or a point: over the plot,
   placed by its inline style, taking no room. */
.chart-legend[data-position="over"] {
  position:       absolute;
  z-index:        1;
  padding:        0;
  pointer-events: none;
}

.chart-legend[data-position="over"] button {
  pointer-events: auto;
}

/* Recharts Legend align: where the items sit in their row. */
.chart-legend[data-align="left"] {
  justify-content: flex-start;
}

.chart-legend[data-align="right"] {
  justify-content: flex-end;
}

/* Recharts Legend layout vertical: one item per line. */
.chart-legend.is-vertical {
  flex-direction: column;
  align-items:    center;
}

.chart-legend.is-vertical[data-align="left"] {
  align-items: flex-start;
}

.chart-legend.is-vertical[data-align="right"] {
  align-items: flex-end;
}

/* A long name wraps inside the chart rather than leaving it. */
.chart-legend > li {
  min-width: 0;
  max-width: 100%;
}

/* Recharts Legend verticalAlign middle: the legend beside the plot,
   centered on it; the plot keeps the rest of the row. */
.chart.has-legend-left,
.chart.has-legend-right {
  flex-direction: row;
  align-items:    center;
  aspect-ratio:   auto;
}

.chart.has-legend-left > .chart-plot,
.chart.has-legend-right > .chart-plot {
  flex:         1 1 0;
  min-width:    0;
  aspect-ratio: var(--chart-aspect);
  max-height:   var(--chart-polar-size, none);
}

.chart.has-legend-left > .chart-legend,
.chart.has-legend-right > .chart-legend {
  max-width: 50%;
}

.chart-legend[data-position="right"] {
  padding: 0 0 0 calc(var(--space-3) + var(--chart-legend-offset, 0px));
}

.chart-legend[data-position="left"] {
  padding: 0 calc(var(--space-3) + var(--chart-legend-offset, 0px)) 0 0;
}

.chart-legend.is-vertical[data-position="right"],
.chart-legend.is-vertical[data-position="left"] {
  align-items: flex-start;
}

.chart-legend-item {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1-5);
  max-width:     100%;
  color:         var(--ink);
  text-align:    start;
  overflow-wrap: anywhere;
}

.chart-legend-name {
  min-width: 0;
}

.chart-legend-item > svg {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
  color:  var(--ink-dim);
}

.chart-swatch {
  flex:          none;
  width:         var(--chart-icon-size, var(--space-2));
  height:        var(--chart-icon-size, var(--space-2));
  border-radius: var(--radius-xs);
  background:    var(--series);
}

/* Recharts Legend iconType. */
.chart-swatch.is-rect {
  height: calc(var(--chart-icon-size, var(--space-2)) * 0.75);
  width:  var(--chart-icon-size, var(--space-3));
}

.chart-swatch.is-circle {
  border-radius: 50%;
}

.chart-swatch.is-line,
.chart-swatch.is-plainline {
  width:         var(--chart-icon-size, var(--space-3-5));
  height:        var(--space-0-5);
  border-radius: 0;
}

.chart-swatch.is-diamond,
.chart-swatch.is-triangle,
.chart-swatch.is-cross,
.chart-swatch.is-star,
.chart-swatch.is-wye {
  width:         var(--chart-icon-size, var(--space-2-5));
  height:        var(--chart-icon-size, var(--space-2-5));
  border-radius: 0;
}

.chart-swatch.is-diamond  { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.chart-swatch.is-triangle { clip-path: polygon(50% 5%, 100% 95%, 0 95%); }
.chart-swatch.is-cross    { clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.chart-swatch.is-star     { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.chart-swatch.is-wye      { clip-path: polygon(40% 100%, 60% 100%, 60% 55%, 95% 25%, 82% 10%, 50% 40%, 18% 10%, 5% 25%, 40% 55%); }

button.chart-legend-item {
  height:        auto;
  min-height:    var(--control-height-sm);
  padding:       0 var(--space-1-5);
  margin:        0;
  border:        0;
  border-radius: var(--radius-item);
  background:    transparent;
  box-shadow:    none;
  font:          inherit;
  cursor:        pointer;
}

button.chart-legend-item:hover {
  background: var(--item-highlight);
}

button.chart-legend-item:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

button.chart-legend-item[aria-pressed="false"] {
  color: var(--ink-faint);
}

button.chart-legend-item[aria-pressed="false"] .chart-swatch {
  background: transparent;
  box-shadow: inset 0 0 0 var(--control-border-width) var(--series);
}

/* Table */

.chart-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-caption);
}

.chart-table-wrap {
  overflow-x: auto;
}

.chart-table-wrap:not(.is-visible) {
  position:    absolute;
  width:       1px;
  height:      1px;
  margin:      -1px;
  padding:     0;
  overflow:    hidden;
  clip:        rect(0 0 0 0);
  white-space: nowrap;
  border:      0;
}

.chart-table th,
.chart-table td {
  padding:       var(--space-1) var(--space-2);
  border-bottom: var(--surface-border-width) solid var(--rule);
  text-align:    end;
}

.chart-table th:first-child {
  text-align: start;
}

.chart-table td {
  font-variant-numeric: tabular-nums;
}

}

@layer components {

/* A visible data table sits under the plot; the plot keeps the ratio. */
.chart:has(> .chart-table-wrap.is-visible) {
  aspect-ratio: auto;
  gap:          var(--space-3);
}

.chart:has(> .chart-table-wrap.is-visible) {
  max-height: none;
}

.chart:has(> .chart-table-wrap.is-visible) > .chart-plot {
  flex:         none;
  aspect-ratio: var(--chart-aspect);
  max-height:   var(--chart-polar-size, none);
}

}

@layer components {

/* Lines, Areas And Dots */

.chart {
  --chart-stroke-width: calc(var(--control-border-width) * 2);
}

.chart-line-mark {
  fill:            none;
  stroke:          var(--series);
  stroke-width:    var(--chart-stroke-width);
  stroke-linejoin: round;
  stroke-linecap:  round;
}

.chart-area-mark {
  fill:         var(--series);
  fill-opacity: var(--chart-fill-opacity);
  stroke:       none;
}

.chart-area-mark.is-gradient {
  fill-opacity: 1;
}

.chart-gradient-start {
  stop-opacity: calc(var(--opacity-overlay) * 1.6);
}

.chart-gradient-end {
  stop-opacity: calc(var(--opacity-overlay) * 0.2);
}

.chart-dot-mark {
  fill:         var(--series);
  stroke:       var(--chart-gap);
  stroke-width: var(--chart-stroke-width);
  paint-order:  stroke fill;
}

.chart-dot.is-hollow .chart-dot-mark,
.chart-dot.is-commit .chart-dot-mark {
  fill:   var(--chart-gap);
  stroke: var(--series);
}

.chart-dot-stem {
  fill:           none;
  stroke:         var(--series);
  stroke-width:   var(--chart-stroke-width);
  stroke-linecap: round;
}

.chart-active-dots,
.chart-dots {
  pointer-events: none;
}

/* Lines, areas and dots fade in the first time the chart is measured. */
.chart.is-ready .chart-line-mark,
.chart.is-ready .chart-area-mark,
.chart.is-ready .chart-dots {
  animation: chart-fade-in var(--chart-motion) var(--chart-ease) var(--chart-delay) both;
}

@keyframes chart-fade-in {
  from { opacity: 0; }
}

.chart.is-static.is-ready .chart-line-mark,
.chart.is-static.is-ready .chart-area-mark,
.chart.is-static.is-ready .chart-dots {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .chart.chart.is-ready .chart-line-mark,
  .chart.chart.is-ready .chart-area-mark,
  .chart.chart.is-ready .chart-dots {
    animation: none;
  }
}

}