/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/segmented.css
   Version: 0.1.1 · Build: 2026-09-21 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   Status-Umschalter: filtert eine bestehende Liste, wechselt keinen Inhalt.
   Im Bestand gab es das nirgends — überall war es als .tab-nav missbraucht.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-lg);
  background: var(--bh-surface-2);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.bh-segmented::-webkit-scrollbar { display: none; }

.bh-segmented__item {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-2);

  min-height: calc(var(--bh-control-height) - 6px);
  padding: 0 var(--bh-space-3);

  border: 0;
  border-radius: var(--bh-radius-md);
  background: transparent;
  color: var(--bh-text-tertiary);

  font-family: inherit;
  font-size: var(--bh-text-sm);
  font-weight: var(--bh-weight-medium);
  white-space: nowrap;

  cursor: pointer;
  transition: background var(--bh-transition), color var(--bh-transition);
}

.bh-segmented__item:hover { background: var(--bh-surface-hover); color: var(--bh-text-primary); }
.bh-segmented__item:active { background: var(--bh-surface-3); }

.bh-segmented__item[aria-pressed="true"],
.bh-segmented__item[aria-selected="true"],
.bh-segmented__item.is-active {
  background: var(--bh-surface-3);
  color: var(--bh-text-primary);
  box-shadow: var(--bh-shadow-1);
}

.bh-segmented__item:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: calc(var(--bh-focus-offset) * -1);
}

.bh-segmented__item:disabled,
.bh-segmented__item[aria-disabled="true"] {
  color: var(--bh-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Zähler rechts im Segment. */
.bh-segmented__count {
  color: var(--bh-text-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--bh-text-xs);
}
.bh-segmented__item.is-active .bh-segmented__count,
.bh-segmented__item[aria-pressed="true"] .bh-segmented__count { color: var(--bh-text-tertiary); }

/* Statuspunkt im Segment — nutzt dieselben Statusfarben wie der Badge. */
.bh-segmented__dot {
  width: 6px; height: 6px; flex: none;
  border-radius: var(--bh-radius-round);
  background: var(--bh-text-muted);
}
.bh-segmented__dot--success { background: var(--bh-color-success); }
.bh-segmented__dot--warning { background: var(--bh-color-warning); }
.bh-segmented__dot--danger  { background: var(--bh-color-danger); }

/* --block verspricht: volle Breite, gleiche Teile. Wenn die Beschriftungen
   nicht nebeneinander passen, muss das Versprechen brechen — die Frage ist
   nur, WIE. Bisher brach es unsichtbar: .bh-segmented hat overflow-x: auto
   mit scrollbar-width: none, also schob sich das letzte Segment aus dem
   Bild, ohne dass etwas darauf hinwies.

   Gemessen in der Meta-Spalte einer Detailseite: 320px Spalte minus 48px
   Kartenpolster = 272px innen. „Offen · In Arbeit · Geschlossen" mit
   Punkten braucht rund 330px. Es fehlen 60px, und keine Kürzung an
   Polster oder Abstand holt die herein.

   Also Umbruch statt Überlauf: zwei Zeilen lesen sich noch als eine
   Gruppe, ein abgeschnittenes Wort nicht. min-width: max-content hält die
   Beschriftung ganz und erzwingt den Umbruch; flex-grow füllt jede Zeile
   aus. overflow-x: visible hebt die unsichtbare Leiste für diesen Fall
   auf — was hier nicht passt, wird umgebrochen, nicht versteckt. */
.bh-segmented--block {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  overflow-x: visible;
}
.bh-segmented--block .bh-segmented__item {
  flex: 1 1 auto;
  min-width: max-content;
  justify-content: center;
}