/* ========== BURNDOWN CHART - SVG chart styling ========== */

/* ========== CHART CONTAINER ========== */
.burndown-chart {
  font-family: var(--font-mono);
  background: var(--bg-secondary);
}

/* ========== GRID AND AXES ========== */
.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-grid--major {
  stroke: var(--border-strong);
}

.chart-axis {
  stroke: var(--text-muted);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}

.chart-axis-label--x {
  text-anchor: middle;
}

.chart-axis-label--y {
  text-anchor: end;
}

.chart-axis-title {
  fill: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========== IDEAL LINE ========== */
.chart-line-ideal {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
}

/* ========== ACTUAL LINE ========== */
.chart-line-actual {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========== DATA POINTS ========== */
.chart-point {
  fill: var(--accent);
  stroke: var(--bg-secondary);
  stroke-width: 2;
  cursor: pointer;
  transition: r 0.15s var(--ease-snap);
}

.chart-point:hover {
  r: 6;
}

.chart-point--today {
  fill: var(--status-warning);
}

.chart-point--synthetic {
  fill: var(--bg-secondary);
  stroke: var(--accent);
  stroke-width: 2;
}

/* ========== AREA FILL ========== */
.chart-area-ideal {
  fill: var(--text-muted);
  opacity: 0.05;
}

.chart-area-actual {
  fill: var(--accent);
  opacity: 0.1;
}

/* ========== TODAY MARKER ========== */
.chart-today-line {
  stroke: var(--status-warning);
  stroke-width: 2;
  stroke-dasharray: 4 2;
}

.chart-today-label {
  fill: var(--status-warning);
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
}

/* ========== TOOLTIP ========== */
.chart-tooltip {
  position: absolute;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-sm);
  color: var(--text-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease-step-out);
  z-index: 1000;
}

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

.chart-tooltip__date {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--text-secondary);
}

.chart-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.chart-tooltip__label {
  color: var(--text-muted);
}

.chart-tooltip__value {
  font-weight: 500;
}

.chart-tooltip__value--ideal {
  color: var(--text-secondary);
}

.chart-tooltip__value--actual {
  color: var(--accent);
}

/* ========== PROGRESS INDICATOR ========== */
.chart-progress-zone {
  fill: var(--status-success);
  opacity: 0.05;
}

.chart-progress-zone--behind {
  fill: var(--status-error);
}

/* ========== NO DATA STATE ========== */
.chart-no-data {
  fill: var(--text-muted);
  font-size: 14px;
  text-anchor: middle;
}

/* ========== PROJECTION LINE ========== */
.chart-line-projection {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.5;
}

/* ========== BURNDOWN SPECIFICS ========== */

/* Completed sprint overlay */
.chart-completed-overlay {
  fill: var(--status-success);
  opacity: 0.02;
}

/* On-track indicator zone */
.chart-ontrack-zone {
  fill: none;
  stroke: var(--status-success);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.3;
}

/* Sprint boundary markers */
.chart-boundary {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.chart-boundary-label {
  fill: var(--text-muted);
  font-size: 9px;
  text-anchor: middle;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 640px) {
  .chart-axis-label {
    font-size: 9px;
  }

  .chart-axis-title {
    font-size: 10px;
  }

  .chart-line-actual {
    stroke-width: 2;
  }

  .chart-point {
    r: 3;
  }
}