/* =============================================================================
   INSIGHT EDITORIAL DARK — Chart Styles
   Ohio School Insight
   =============================================================================
   D3.js SVG chart styling, axis theming, tooltip overrides, glow effects,
   and all data visualization component classes. Import after tokens.css.

   Charts use the dark surface palette with teal primary lines and gold
   secondary series. Axes and grids are whisper-quiet (15% opacity) to keep
   the data front and center.
   ============================================================================= */


/* =============================================================================
   CHART CONTAINER
   ============================================================================= */

.chart-container {
  position: relative;
  overflow: visible;   /* Allow tooltips and glow effects to bleed outside */
  width: 100%;
}

/* Clip inner SVG content without clipping floating elements */
.chart-container svg {
  display: block;
  overflow: visible;
}

/* Chart header row: title + legend + actions */
.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.chart-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
  line-height: var(--leading-tight);
  margin: 0;
}

.chart-subtitle {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--on-surface-variant);
  font-weight: 600;
  margin-top: var(--space-1);
}

/* Source attribution below chart */
.chart-source {
  font-size: var(--text-xs);
  color: var(--on-surface-variant);
  opacity: 0.6;
  margin-top: var(--space-3);
  text-align: right;
}


/* =============================================================================
   SVG TEXT DEFAULTS
   Applied globally to all text elements within D3-rendered SVGs.
   ============================================================================= */

.chart-container text,
.chart-container svg text {
  fill: var(--on-surface-variant);
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* Value labels on bars / points — larger and on-surface */
.chart-container .label-value {
  fill: var(--on-surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* District/entity name labels */
.chart-container .label-name {
  fill: var(--on-surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Highlight label — primary accent */
.chart-container .label-highlight {
  fill: var(--primary);
  font-weight: 700;
}

/* Annotation text */
.chart-container .annotation {
  fill: var(--on-surface-variant);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: none;
}


/* =============================================================================
   AXES
   ============================================================================= */

/* Axis domain line and tick lines */
.axis line,
.axis path {
  stroke: var(--outline-variant);
  stroke-opacity: 0.15;
  /* Remove tick marks — clean editorial style */
  shape-rendering: crispEdges;
}

/* Remove domain line entirely for a floating axis effect */
.axis .domain {
  display: none;
}

/* Axis tick text */
.axis text {
  fill: var(--on-surface-variant);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* X-axis specific — bottom labels */
.axis-x text {
  fill: var(--on-surface-variant);
}

/* Y-axis specific — value labels */
.axis-y text {
  fill: var(--on-surface-variant);
}

/* Axis label (the full axis title, e.g. "Proficiency Rate") */
.axis-label {
  fill: var(--on-surface-variant);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  opacity: 0.7;
}


/* =============================================================================
   GRID LINES
   ============================================================================= */

/* Horizontal reference grid — scoped to SVG <g> so Tailwind's .grid utility is unaffected */
g.grid line,
g.grid-y line {
  stroke: var(--outline-variant);
  stroke-opacity: 0.15;
  stroke-dasharray: none;
}

g.grid path,
g.grid-y path {
  display: none;  /* Hide the D3 axis grid domain line */
}

/* Subtle dashed grid variant */
.grid-dashed line {
  stroke: var(--outline-variant);
  stroke-opacity: 0.1;
  stroke-dasharray: 2 4;
}


/* =============================================================================
   CHART TOOLTIP
   Extends the base .tooltip with a top accent border (gradient).
   ============================================================================= */

.chart-tooltip {
  background-color: var(--surface-container-high);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ambient);
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-size: 0.8125rem;   /* 13px */
  line-height: var(--leading-normal);

  position: absolute;
  z-index: var(--z-modal);
  pointer-events: none;
  max-width: 260px;
  min-width: 160px;
  word-wrap: break-word;

  /* Top accent border — 2px primary gradient */
  border-top: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--on-primary-container) 100%
  ) 1;

  /* Transition for smooth appear/disappear */
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition:
    opacity var(--duration-fast) var(--ease-decelerate),
    transform var(--duration-fast) var(--ease-decelerate);
}

.chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Tooltip section: header area */
.chart-tooltip-header {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--on-surface-variant);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(69, 70, 77, 0.3);
}

/* Tooltip metric row */
.chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0;
}

.chart-tooltip-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--on-surface-variant);
  font-size: 0.75rem;
}

.chart-tooltip-value {
  font-weight: 700;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

/* Highlighted value row */
.chart-tooltip-row.highlight .chart-tooltip-value {
  color: var(--primary);
}

/* Color swatch in tooltip legend */
.chart-tooltip-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}


/* =============================================================================
   GLOW EFFECTS (SVG filter-based)
   ============================================================================= */

/* SVG filter definition — reference with filter="url(#dot-glow)" in D3 */
.dot-glow {
  /* Applied to SVG <g> or <circle> elements via CSS filter */
  filter: drop-shadow(0 0 4px rgba(60, 221, 199, 0.8))
          drop-shadow(0 0 8px rgba(60, 221, 199, 0.4));
}

/* Highlighted / selected scatter dot */
.dot-highlight {
  /* Outer ping ring — animated in animations.css */
  position: relative;
  filter: drop-shadow(0 0 6px rgba(60, 221, 199, 0.9))
          drop-shadow(0 0 12px rgba(60, 221, 199, 0.5));
}

/* Gold glow for secondary series */
.dot-glow-gold {
  filter: drop-shadow(0 0 4px rgba(255, 198, 64, 0.8))
          drop-shadow(0 0 8px rgba(255, 198, 64, 0.4));
}

/* Inline SVG filter block — include once per chart SVG via D3 */
/*
  <defs>
    <filter id="glow-teal" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
*/


/* =============================================================================
   LINE CHART PATHS
   ============================================================================= */

/* District comparison line — primary teal, bold */
.line-district {
  stroke: var(--primary);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Glow variant for featured district line */
.line-district-glow {
  stroke: var(--primary);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(60, 221, 199, 0.6));
}

/* State average line — muted, dashed */
.line-state {
  stroke: var(--outline-variant);
  stroke-width: 2;
  stroke-dasharray: 4;
  fill: none;
  stroke-linecap: round;
}

/* Peer group comparison line — tertiary blue-gray, fine dash */
.line-peer {
  stroke: var(--tertiary);
  stroke-width: 2;
  stroke-dasharray: 2 4;
  fill: none;
  stroke-linecap: round;
  opacity: 0.7;
}

/* National benchmark line */
.line-national {
  stroke: var(--secondary);
  stroke-width: 1.5;
  stroke-dasharray: 8 4;
  fill: none;
  opacity: 0.6;
}

/* Area fill beneath district line */
.area-district {
  fill: url(#gradient-district);  /* SVG linearGradient — defined in D3 */
  opacity: 0.15;
}


/* =============================================================================
   PANDEMIC BAND
   Shaded region marking COVID disruption years (2019–2022).
   ============================================================================= */

.pandemic-band {
  fill: var(--surface-container-highest);
  opacity: 0.5;
}

/* Pandemic band label */
.pandemic-label {
  fill: var(--on-surface-variant);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.5;
}


/* =============================================================================
   SCATTER PLOT DOTS
   ============================================================================= */

/* Default dot */
.dot {
  cursor: pointer;
  transition: r 200ms var(--ease-editorial),
              opacity 200ms var(--ease-editorial);
}

.dot:hover {
  opacity: 0.85;
}

/* District dot — primary teal */
.dot-primary {
  fill: var(--primary);
  stroke: var(--surface-container-lowest);
  stroke-width: 1.5;
}

/* Secondary dot — gold */
.dot-secondary {
  fill: var(--secondary);
  stroke: var(--surface-container-lowest);
  stroke-width: 1.5;
}

/* Faded / de-emphasized dot (search not matching) */
.dot-dimmed {
  opacity: 0.15;
}

/* Selected / focused dot */
.dot-selected {
  stroke: var(--primary);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(60, 221, 199, 0.8));
}


/* =============================================================================
   BAR CHARTS
   ============================================================================= */

/* Standard bar */
.bar {
  fill: var(--primary);
  transition: fill 200ms var(--ease-editorial),
              opacity 200ms var(--ease-editorial);
  cursor: pointer;
}

.bar:hover {
  fill: var(--primary-fixed);
}

.bar-dimmed {
  opacity: 0.3;
}

/* Secondary/comparison bar */
.bar-secondary {
  fill: var(--tertiary);
  opacity: 0.6;
}

/* Gold bar */
.bar-gold {
  fill: var(--secondary);
}

/* Negative / below-baseline bar */
.bar-negative {
  fill: var(--error);
  opacity: 0.7;
}

/* Bar label (inside top of bar) */
.bar-label {
  fill: var(--on-primary);
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
  text-transform: none;
  letter-spacing: 0;
}


/* =============================================================================
   DONUT / PIE CHART
   ============================================================================= */

.donut-slice {
  transition:
    opacity 200ms var(--ease-editorial),
    transform 200ms var(--ease-spring);
  transform-origin: center;
  cursor: pointer;
}

.donut-slice:hover {
  opacity: 0.85;
}

/* Center label for donut */
.donut-center-label {
  text-anchor: middle;
  dominant-baseline: central;
}

.donut-center-value {
  fill: var(--on-surface);
  font-size: 28px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
}

.donut-center-text {
  fill: var(--on-surface-variant);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}


/* =============================================================================
   LEGEND
   ============================================================================= */

.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Legend item */
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--on-surface-variant);
  cursor: default;
}

/* Legend color dot */
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
}

/* Legend line indicator (for line charts) */
.legend-line {
  width: 20px;
  height: 2px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 1px;
}

.legend-line-dashed {
  background: repeating-linear-gradient(
    90deg,
    currentColor 0px,
    currentColor 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Legend dot color variants */
.legend-dot-primary    { background-color: var(--primary); }
.legend-dot-secondary  { background-color: var(--secondary); }
.legend-dot-tertiary   { background-color: var(--tertiary); }
.legend-dot-state      { background-color: var(--outline-variant); }
.legend-dot-error      { background-color: var(--error); }

/* Interactive legend — toggle series */
.legend-item-interactive {
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-editorial);
  user-select: none;
}

.legend-item-interactive:hover {
  color: var(--on-surface);
}

.legend-item-interactive.inactive {
  opacity: 0.35;
}


/* =============================================================================
   HEATMAP
   ============================================================================= */

.heatmap-cell {
  transition: opacity 200ms var(--ease-editorial);
  cursor: pointer;
  rx: 2;  /* Rounded corners on SVG rect */
  ry: 2;
}

.heatmap-cell:hover {
  opacity: 0.8;
  stroke: var(--primary);
  stroke-width: 1;
}


/* =============================================================================
   REFERENCE LINES
   Benchmark / goal lines drawn across charts.
   ============================================================================= */

.ref-line {
  stroke: var(--secondary);
  stroke-width: 1;
  stroke-dasharray: 6 3;
  opacity: 0.6;
}

.ref-line-label {
  fill: var(--secondary);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* =============================================================================
   CHART LOADING OVERLAY
   ============================================================================= */

.chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 19, 38, 0.6);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-md);
  z-index: var(--z-raised);
}

/* Spinner */
.chart-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(60, 221, 199, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =============================================================================
   CHART EMPTY STATE
   ============================================================================= */

.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 200px;
  color: var(--on-surface-variant);
  opacity: 0.6;
}

.chart-empty-icon {
  font-size: 2rem;
  opacity: 0.5;
}

.chart-empty-text {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}