/* ============================================================================
   GitHubDB · css/charts.css — SVG-CHARTS & BALKEN
   ----------------------------------------------------------------------------
   Zuständig für alle Datenvisualisierungen (js/charts.js: Sprachbalken,
   Commit-Aktivität, Code-Frequenz, Beteiligung, Punch-Card, Mini-Bars,
   Stat-Tile-Deltas).
   EIGENE COMPONENT-CLASSES (hier erweitern):
     .lang-bar, .lang-seg, .lang-legend(.pct), .chart-head, .chart-axis,
     .chart-zero, .chart-grid, .chart-label, .commit-chart, .code-chart,
     .punch-chart, .heat-cell, .hit, .bar, .series-* (Füllfarben),
     .area-pos/.area-neg/.line-pos/.line-neg, .mini-bar, .stat-delta, .heatmap
   FARBREGEL: Chart-Serien nur über --chart-series(-2/-3), --chart-pos,
   --chart-neg (siehe tokens.css). Sprachfarben kommen aus js/util.js
   (LANG_COLORS). --info ist KEIN UI-Akzent, nur Datenvisualisierung.
   .lang-dot (Legende + Tabellen) liegt in base.css.
   Nur Tokens; kein Light-Mode; Numbers überall mono/tabular-nums.
   ========================================================================== */

/* ---------- Sprach-Balken (100 %-Stack) ---------- */
.lang-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-2);
  background: var(--surface-2);
}
.lang-seg { display: block; height: 100%; min-width: 2px; }
.lang-seg:hover { filter: brightness(1.2); }

.lang-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.lang-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lang-legend .pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* ---------- Kopfzeile über Charts (Titel links, Metriken rechts, mono) ---------- */
.chart-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}

/* ---------- SVG-Charts: responsive + Haarlinien ---------- */
.commit-chart, .code-chart {
  width: 100%;
  height: auto;
  display: block;
}
.punch-chart {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

/* Hit-Flächen für [data-tip]-Tooltips (decken Mark + Umgebung ab) */
.hit { fill: transparent; }

/* Balken-Hover: Hellere Markierung, sauberer als opacity auf Segmente */
.commit-chart .bar {
  transition: filter var(--transition-fast) var(--ease-out);
}
.commit-chart .bar:hover,
.commit-chart .hit:hover + .bar { filter: brightness(1.3); }

.chart-axis { stroke: var(--border); stroke-width: 1; }
.chart-zero { stroke: var(--border-strong); stroke-width: 1; }
.chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-label {
  fill: var(--text-3);
  font-size: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Serien-Füllfarben (nur Token, keine Rohfarben) ---------- */
.series-primary   { fill: var(--chart-series); }
.series-owner     { fill: var(--chart-series-3); }
.series-community { fill: var(--chart-series-2); }

/* Legenden-Dots für Chart-Serien (überschreiben .lang-dot-Basisfarbe) */
.series-pos-dot      { background: var(--chart-pos); }
.series-neg-dot      { background: var(--chart-neg); }
.series-owner-dot    { background: var(--chart-series-3); }
.series-community-dot { background: var(--chart-series-2); }

/* ---------- Code-Frequenz: Flächen + Linien (grün = +, rot = −) ---------- */
.area-pos { fill: var(--chart-pos); fill-opacity: 0.16; }
.area-neg { fill: var(--chart-neg); fill-opacity: 0.16; }
.line-pos { fill: none; stroke: var(--chart-pos); stroke-width: 1.5; }
.line-neg { fill: none; stroke: var(--chart-neg); stroke-width: 1.5; }

/* ---------- Punch-Card: Heatmap-Zellen (Intensität via fill-opacity) ---------- */
.heat-cell { fill: var(--chart-series); }
.heat-cell:hover { filter: brightness(1.35); }

/* ---------- Inline-Minibalken (Download-Zahlen, Contributors) ---------- */
.mini-bar {
  display: inline-block;
  height: 6px;
  background: var(--chart-series);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* ---------- Stat-Kachel: Delta-Werte (pos → success, neg → danger) ---------- */
.stat-delta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}
.stat-delta.pos { color: var(--success); }
.stat-delta.neg { color: var(--danger); }

/* ---------- (optional) HTML-Heatmap-Raster für künftige Darstellungen ---------- */
.heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}
.heatmap .heat-cell { border-radius: 2px; }

/* Responsive: kompakte Köpfe auf schmalen Screens */
@media (max-width: 560px) {
  .chart-head { font-size: 11px; }
  .lang-legend { gap: 4px var(--space-3); }
}