/**
 * idf-bar-chart v0.1.0 - Balkendiagramm mit Reihen-Vergleich
 *
 * Gegenstueck zu idf-bar-chart.js. Alle Groessen und Farben aus den
 * Tokens; das Diagramm hat bewusst keinen eigenen Rahmen und keinen
 * eigenen Hintergrund, damit es in eine Modal-Spalte, eine Karte oder
 * eine Seite passt, ohne dort als Fremdkoerper zu sitzen.
 *
 * Die Rasterlinien liegen als repeating-linear-gradient in der Buehne
 * und nicht als eigene Elemente: sie sind Dekoration, kein Inhalt, und
 * muessen bei jeder Hoehe automatisch mitwandern.
 */

.idf-barchart {
  --idf-barchart-hoehe: 240px;
  --idf-barchart-stufen: 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

/* ---------------- Legende ------------------------------------------ */

.idf-barchart-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-xs2);
  color: var(--mid);
}

.idf-barchart-legende-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.idf-barchart-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-xs);
  background: var(--idf-barchart-farbe, var(--primary));
  flex: none;
}

/* Die Einheit steht rechts und traegt keine Farbe - sie gehoert zur
   Achse, nicht zu einer Reihe. */
.idf-barchart-einheit {
  margin-left: auto;
  color: var(--soft);
}

/* ---------------- Plot: Achse links, Buehne rechts ------------------ */

.idf-barchart-plot {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
}

.idf-barchart-achse {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Genau die Buehnenhoehe: die Beschriftungen sitzen auf den Linien.
     Die letzte Zeile (0) steht auf der Grundlinie, deshalb wird der Text
     ueber translateY zentriert und nicht per padding verschoben. */
  height: var(--idf-barchart-hoehe);
  flex: none;
  text-align: right;
  font-size: var(--font-xs);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.idf-barchart-achse-wert {
  line-height: var(--leading-tight);
  transform: translateY(-50%);
}
/* Erste und letzte Beschriftung nicht aus dem Rahmen kippen lassen. */
.idf-barchart-achse-wert:first-child { transform: translateY(0); }
.idf-barchart-achse-wert:last-child  { transform: translateY(-100%); }

.idf-barchart-buehne {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
  height: var(--idf-barchart-hoehe);
  border-bottom: 1px solid var(--line);
  /* Rasterlinien: eine Linie je Achsen-Abschnitt. Der Gradient laeuft von
     unten nach oben, damit die Grundlinie nicht doppelt gezeichnet wird. */
  background-image: repeating-linear-gradient(
    to top,
    var(--shade-04) 0,
    var(--shade-04) 1px,
    transparent 1px,
    transparent calc(var(--idf-barchart-hoehe) / var(--idf-barchart-stufen))
  );
}

/* ---------------- Gruppen + Saeulen --------------------------------- */

.idf-barchart-gruppe {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.idf-barchart-saeulen {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
}

.idf-barchart-saeule {
  position: relative;
  display: block;
  flex: 1 1 0;
  max-width: 22px;
  min-height: 0;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--idf-barchart-farbe, var(--primary));
  transition: filter var(--motion-base) ease;
}

.idf-barchart-saeule:hover {
  filter: brightness(1.12);
}

/* Klickbare Saeule (Issue 969, `onOpen`): Zeiger sagt es, und ohne
   user-select markierte der oeffnende Doppelklick stattdessen Text -
   dieselbe Falle wie bei row-open-Listenzeilen. */
.idf-barchart-saeule.is-openbar {
  cursor: pointer;
  user-select: none;
}

/* Kein Wert ist nicht dasselbe wie null: statt eines Balkens bleibt ein
   flacher Strich auf der Grundlinie, damit die Spalte trotzdem einen
   Hover-Bereich fuer den Tooltip hat. */
.idf-barchart-saeule.is-leer {
  height: 2px;
  background: var(--line);
}

/* Stapel-Saeule (Issue 950): EINE Saeule, deren Hoehe die Summe traegt;
   die Segmente teilen sie im Verhaeltnis ihrer Werte. column-reverse legt
   die ERSTE Lage der Gruppe nach unten - im Markup stehen sie in
   Serien-Reihenfolge, gelesen wird von der Grundlinie aufwaerts.

   Die Segmente liegen in einem eigenen Clip-Container statt direkt in der
   Saeule: overflow: hidden schneidet sie in deren runden Kopf, wuerde an
   der Saeule selbst aber auch das Summen-Label (`werteAnzeigen`, absolut
   UEBER der Saeule) mitclippen. */
.idf-barchart-saeule.is-stapel {
  background: transparent;
}
.idf-barchart-stapel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column-reverse;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  overflow: hidden;
}
.idf-barchart-segment {
  flex: 0 0 auto;
  background: var(--idf-barchart-farbe, var(--primary));
}

.idf-barchart-saeule-wert {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 2px;
  font-size: var(--font-xs);
  color: var(--mid);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.idf-barchart-kategorie {
  flex: none;
  padding-top: var(--space-1);
  text-align: center;
  font-size: var(--font-xs);
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- Farben der Reihen --------------------------------- */
/* Eine Variable je Reihe, gesetzt am Element - Swatch und Saeule teilen
   sie sich. Innerhalb von .idf-barchart gescoped, weil `is-farbe-*` ein
   sehr allgemeiner Name ist und global mit Modul-CSS kollidieren wuerde.
   Bewusst keine Ampelfarben: eine Menge ist nicht gut oder schlecht. Die
   zweite Reihe ist grau, weil der Vergleichswert zuruecktreten soll. */

.idf-barchart .is-farbe-primary { --idf-barchart-farbe: var(--primary); }
.idf-barchart .is-farbe-accent  { --idf-barchart-farbe: var(--accent); }
.idf-barchart .is-farbe-indigo  { --idf-barchart-farbe: var(--indigo); }
.idf-barchart .is-farbe-confirm { --idf-barchart-farbe: var(--confirm); }
.idf-barchart .is-farbe-neutral { --idf-barchart-farbe: var(--neutral-mid); }
/* Aufgehellte Stufe fuer nachrangige STAPEL-Lagen desselben Messwerts
   (Issue 950): dieselbe Rolle, leiser - eine zweite Vollfarbe saehe nach
   einer eigenen, vergleichbaren Reihe aus. -soft-Stufen entstehen erst mit
   ihrem Konsumenten: primary-soft mit dem Zeitbudget (Gebucht = im Budget +
   Zusatz), confirm-soft mit dem Finanzbudget (Pauschale = verwendet + nicht
   abgerufen, Issue 951). */
.idf-barchart .is-farbe-primary-soft {
  --idf-barchart-farbe: color-mix(in srgb, var(--primary) 42%, var(--white));
}
.idf-barchart .is-farbe-confirm-soft {
  --idf-barchart-farbe: color-mix(in srgb, var(--confirm) 42%, var(--white));
}

/* ---------------- Leerzustand --------------------------------------- */

.idf-barchart-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--idf-barchart-hoehe);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: var(--soft);
  text-align: center;
  padding: var(--space-4);
}

/* ---------------- Schmale Buehnen ----------------------------------- */
/* Zwoelf Monate in einer Modal-Spalte: unter 520 px werden Saeulen und
   Beschriftung kleiner, sonst schneidet das Ellipsis die Monatskuerzel
   auf einen Buchstaben zusammen. */

@media (max-width: 520px) {
  .idf-barchart-kategorie {
    font-size: 9px;
  }
  .idf-barchart-saeule {
    max-width: 14px;
  }
}