/* =========================================================================
   chart.css — kontener wykresu (SVG). Period selector, siatka, osi.
   ========================================================================= */

.chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-inner);
}

.chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-tight);
}

.chart__periods {
  display: flex;
  gap: 4px;
}
.chart__periods button {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all var(--duration-micro) var(--ease-standard);
}
.chart__periods button:hover { color: var(--text-primary); border-color: rgba(168,85,247,0.4); }
.chart__periods button.is-active {
  color: var(--text-primary);
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.32);
}

.chart__canvas {
  min-height: 240px;
  position: relative;
  border-radius: var(--radius-inner);
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.04);
}

.chart__legend {
  display: flex;
  gap: var(--space-inner);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.chart__legend .item { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend .dot { width: 10px; height: 10px; border-radius: 2px; }

/* Kontekst PV pod chart-coverage — wyjasnienie net-metering vs net-billing.
   Trzy tony (good / warn / info) mapowane na kolor lewej krawedzi i tla. */
.coverage-pv-context {
  margin-top: var(--space-tight);
  padding: 12px 14px;
  border-radius: var(--radius-inner);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent-cyan);
  background: rgba(56, 189, 248, 0.06);
}
.coverage-pv-context[data-tone="good"] {
  border-left-color: var(--accent-green);
  background: rgba(52, 211, 153, 0.06);
}
.coverage-pv-context[data-tone="warn"] {
  border-left-color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.06);
}
.coverage-pv-context[data-tone="info"] {
  border-left-color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.06);
}
.coverage-pv-context strong { color: var(--text-primary); }
.coverage-pv-context em { color: var(--text-tertiary); font-style: normal; }