/* =======================================================================
   charts.css — Chart Containers, Legends, Responsive Areas, Canvas
   Advanced Solar Load Calculator — Production CSS Architecture
   ======================================================================= */

/* ── Chart wrapper ─────────────────────────────────────────────────── */
.chart-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: var(--sp-5);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.chart-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.chart-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 2px;
}

.chart-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  background: rgba(249,115,22,0.15);
  color: var(--accent-2);
  border: 1px solid rgba(249,115,22,0.2);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
}

/* ── Chart container ───────────────────────────────────────────────── */
.chart-container {
  width: 100%;
  position: relative;
}

.chart-container canvas {
  max-width: 100%;
  height: auto !important;
}

/* ── Chart grid layouts ────────────────────────────────────────────── */
.chart-grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
}

.chart-grid-equal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 1024px) {
  .chart-grid-2,
  .chart-grid-equal {
    grid-template-columns: 1fr;
  }
}

/* ── Radial / gauge chart ──────────────────────────────────────────── */
.radial-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

/* ── Tooltip override for chart.js ─────────────────────────────────── */
.chartjs-tooltip {
  background: rgba(15, 20, 36, 0.95) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
  font-size: var(--fs-xs) !important;
  padding: var(--sp-2) var(--sp-3) !important;
}

/* ── No data state ─────────────────────────────────────────────────── */
.chart-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15rem;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* ── Day/Night bar visualization ───────────────────────────────────── */
.energy-bars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.energy-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.energy-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.energy-bar-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(30, 41, 59, 1);
  overflow: hidden;
}

.energy-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ── Chart color dots ──────────────────────────────────────────────── */
.color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: var(--sp-2);
  vertical-align: middle;
}

/* ── Pie chart legend ──────────────────────────────────────────────── */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-2);
}

.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Print chart styles ────────────────────────────────────────────── */
@media print {
  .chart-panel {
    border: 1px solid #ccc;
    background: #fff;
    padding: var(--sp-3);
  }
  .chart-title { color: #111; }
  .chart-subtitle { color: #666; }
}