/* Statistik-Tab (Session 37, Master-Detail seit 2026-06-22).
   Interaktives Dashboard: links Single-Select-Ansicht + Zeitraum-Filter,
   rechts genau eine Ansicht ueber die volle Breite. CSS-basierte Balken,
   D3-Donuts/Histogramme. Nutzt --color-kug-blau und --color-sicht-* (variables.css). */

/* Dashboard-Huelle: linke Sidebar + scrollender Detailbereich.
   Nutzt die geteilte .view-shell/.view-sidebar (sidebar.css) wie Karte/Netzwerk. */
.statistik-main {
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
}

/* Buehne: nur die aktive Ansicht, links ausgerichtet, generoes breit aber
   typografisch noch lesbar (kein Vollbild-Stretch auf Ultrawide). */
.statistik__stage {
  max-width: 1200px;
}

/* Status-Zeile unter dem Zeitraum-Slider: aktiver Schnitt + ausgeblendete undatierte. */
.stat-filter-note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: 1.4;
  margin: 4px 0 0;
}

/* --- Sektionen ----------------------------------------------------------- */
/* Subcharts einer Sektion fließen in ein responsives Grid: bei genug Breite
   stehen Geografie/Netzwerk/Finanzen zweispaltig, der Titel spannt voll. */

.stat-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sektionen mit zwei Subcharts stehen auf breiten Viewports nebeneinander. */
.stat-section--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  align-items: start;
}
.stat-section--split .stat-section__title { grid-column: 1 / -1; }

.stat-section__title {
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-kug-blau);
  display: inline-block;
  align-self: flex-start;
  justify-self: start;
}

@media (max-width: 768px) {
  .stat-section--split { grid-template-columns: 1fr; }
}

.stat-section--minor {
  opacity: 0.92;
}

.stat-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.stat-subsection__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

/* Datengetriebener Hinweis (z. B. datumslose Events nicht im Histogramm). */
.stat-subsection__note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0 0 var(--space-1);
}

/* --- Horizontale Balkenliste --------------------------------------------- */

.stat-bars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Track capped so short bars do not float in front of dead space:
   label | readable-width track | count, then an empty filler column
   absorbs the remaining stage width. */
.stat-bars__row {
  display: grid;
  grid-template-columns: minmax(140px, 18ch) minmax(0, 520px) minmax(90px, auto) 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .stat-bars__row {
    grid-template-columns: minmax(96px, 12ch) minmax(0, 1fr) minmax(72px, auto);
    gap: var(--space-2);
  }
}

.stat-bars__label {
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-bars__track {
  background: var(--color-parchment);
  border-radius: 2px;
  height: 14px;
  overflow: hidden;
  position: relative;
}

.stat-bars__fill {
  background: var(--color-kug-blau);
  height: 100%;
  border-radius: 2px 0 0 2px;
  transition: width var(--transition-normal);
}

.stat-bars__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}

.stat-bars__label--link {
  color: var(--color-kug-blau);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-kug-blau-light);
  cursor: pointer;
}

.stat-bars__label--link:hover {
  color: var(--color-kug-blau-dark);
  border-bottom-style: solid;
}

.stat-bars__label--link:focus-visible {
  outline: 2px solid var(--color-kug-blau);
  outline-offset: 2px;
}

/* --- Horizontale Stapelbalken (Jahrzehnt x Sicht) ------------------------ */
/* One stacked bar per decade; each segment is one of the five mobility
   views (SICHT_COLOR, shared with the map). Track capped like .stat-bars. */

.stat-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-stack__row {
  display: grid;
  grid-template-columns: minmax(140px, 18ch) minmax(0, 520px) minmax(90px, auto) 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.stat-stack__label {
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-stack__track {
  display: flex;
  height: 16px;
  border-radius: 2px;
  background: var(--color-parchment);
  overflow: hidden;
}

.stat-stack__seg {
  height: 100%;
  border: none;
  transition: flex-basis var(--transition-normal);
}

.stat-stack__total {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}

/* Compact inline legend mapping segment color to view name. */
.stat-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.stat-stack-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.stat-stack-legend__swatch {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .stat-stack__row {
    grid-template-columns: minmax(96px, 12ch) minmax(0, 1fr) minmax(72px, auto);
    gap: var(--space-2);
  }
}

/* --- Sidebar-Swatch-Ehrlichkeit ------------------------------------------ */
/* The "Ansicht" selector carries no real per-view fill, so its swatch must
   not pretend to. Lane C passes a transparent/neutral background for those
   chips; a thin ring keeps the slot visible without faking a category color.
   The .vs-chip__swatch base lives in sidebar.css; only this honesty rule
   is owned here. */
.vs-chip__swatch--neutral {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--border-color);
}

/* --- Charts (Donut, Histogramm, Legende) --------------------------------- */

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

.stat-chart__svg-wrap {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.stat-chart svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.stat-donut__center-value {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: var(--weight-bold);
  fill: var(--color-text-primary);
}

.stat-donut__center-label {
  font-size: 11px;
  fill: var(--color-text-tertiary);
}

.stat-chart__legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 440px;
}

.stat-chart__legend-item { list-style: none; }

.stat-chart__legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  padding: 3px 6px;
  border-radius: 4px;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.stat-chart__legend-caret {
  flex: 0 0 10px;
  width: 10px;
  text-align: center;
  color: var(--color-text-tertiary);
  transition: transform 0.15s ease;
}
.stat-chart__legend-row.is-open .stat-chart__legend-caret { transform: rotate(90deg); }

.stat-chart__legend-swatch {
  flex: 0 0 12px;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.stat-chart__legend-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}

.stat-chart__legend-value {
  flex: 0 0 auto;
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

/* Klickbare Zeile (Drilldown in den Bestand) und aufklappbare Gruppe. */
.stat-chart__legend-row--link,
.stat-chart__legend-row--group { cursor: pointer; }
.stat-chart__legend-row--link .stat-chart__legend-label {
  color: var(--color-kug-blau);
  cursor: pointer;
}
.stat-chart__legend-row--link:hover,
.stat-chart__legend-row--group:hover { background: var(--color-parchment); }
.stat-chart__legend-row--link:focus-visible {
  outline: 2px solid var(--color-kug-blau);
  outline-offset: 1px;
}

/* Aufgeklappte "Sonstige"-Kinder, unter die Gruppe eingerueckt. */
.stat-chart__legend-sub {
  list-style: none;
  margin: 1px 0 4px;
  padding: 0 0 0 calc(10px + var(--space-2));
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.stat-chart__legend-subitem {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.9;
}
.stat-chart__legend-subitem .stat-chart__legend-label { color: var(--color-text-secondary); }
.stat-chart__legend-subitem.stat-chart__legend-row--link:hover { background: var(--color-parchment); }
.stat-chart__legend-subitem.stat-chart__legend-row--link .stat-chart__legend-label { color: var(--color-kug-blau); }

/* Hover-Verkettung Segment <-> Legende. */
.stat-donut__arc { transition: opacity var(--transition-fast); }
.stat-donut__arc--link { cursor: pointer; }
.stat-chart--donut.is-hovering .stat-donut__arc:not(.is-active) { opacity: 0.3; }
.stat-chart--donut.is-hovering .stat-chart__legend-row:not(.is-active) { opacity: 0.4; }
.stat-chart__legend-row.is-active { background: var(--color-parchment); }

/* Externer Verweis (z. B. Wikidata) in einer Balkenzeile. */
.stat-bars__ext {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-decoration: none;
  margin-right: 6px;
}
.stat-bars__ext:hover { color: var(--color-kug-blau); }