/* Charts — visual layer for charts.js.
 *
 * The Bklit UI original themes itself from Tailwind CSS variables; this port
 * does the same with the club palette already declared in base.css, so a chart
 * dropped on any page inherits the site's maroon-and-gold identity without
 * being told about it. Override --chart-1..5 on a .chart to recolour one chart.
 */

:root {
  --chart-1: var(--color-maroon-700);
  --chart-2: var(--color-gold);
  --chart-3: var(--color-success);
  --chart-4: var(--color-red);
  --chart-5: var(--color-text-muted);
  --chart-grid: var(--color-border);
  --chart-axis-text: var(--color-text-muted);
}

.chart {
  margin: 0;
}

.chart-canvas {
  position: relative;
  width: 100%;
}

.chart-canvas svg {
  display: block;
  overflow: visible;
}

/* Grid + axes */
.chart-grid line {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart-axis text {
  fill: var(--chart-axis-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

.chart-marker {
  stroke: white;
  stroke-width: 2;
}

.chart-bar {
  /* Without fill-box the origin is the SVG's own (0,0), so the grow-from-the-
     baseline animation in charts.js would sweep bars in from the top left. */
  transform-box: fill-box;
  transform-origin: bottom center;
}

/* Pre-entry state for elements waiting to be revealed.
 *
 * This has to be a class rather than an inline style: Motion drives opacity and
 * transform through WAAPI and *cancels* the animation when it finishes, so the
 * element falls back to whatever is underneath. An inline opacity:0 would
 * therefore win the instant the reveal ended and leave the bars invisible.
 * charts.js removes this class in the same tick it starts the animation. */
.chart-enter {
  opacity: 0;
}

.chart-bar.chart-enter {
  transform: scaleY(0);
}

/* Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

/* Tooltip */
.chart-crosshair {
  stroke: var(--color-maroon-700);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
  pointer-events: none;
}

.chart-tooltip-dot {
  stroke: white;
  stroke-width: 2;
  pointer-events: none;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 140px;
  padding: 0.6rem 0.75rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 0.82rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.chart-tooltip.is-visible {
  opacity: 1;
}

.chart-tooltip-x {
  font-weight: 600;
  color: var(--color-maroon-700);
  margin-bottom: 0.35rem;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-muted);
}

.chart-tooltip-row strong {
  margin-left: auto;
  color: var(--color-text);
}

/* Ring */
.chart-ring-track {
  stroke: var(--color-tint);
}

.chart-ring-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.chart-ring-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-maroon-700);
  line-height: 1.1;
}

.chart-ring-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Card wrapper, for charts that need to sit in the page like a panel */
.chart-card {
  background: white;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

.chart-title {
  font-family: var(--font-display);
  color: var(--color-maroon-700);
  font-size: 1.05rem;
  margin: 0 0 0.2rem;
}

.chart-caption {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .chart-tooltip {
    transition: none;
  }
}