/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/tabs.css
   Version: 0.1.1 · Build: 2026-09-16 · Benötigt: tokens.css, base.css

   0.1.1 — .bh-tabs__panel polsterte oben unbedingt, auch wenn die Karte
   darum herum bereits polsterte. Betrifft jede Karte mit Reitern.
   VENDORED — READ-ONLY.

   Ersetzt .tab-nav aus sieben Projekten.
   Tabs wechseln Inhalt. Der Zustandsumschalter einer Liste ist kein Tab —
   dafür gibt es segmented.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--bh-space-1);
  border-bottom: 1px solid var(--bh-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}
.bh-tabs::-webkit-scrollbar { display: none; }

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

  min-height: var(--bh-control-height);
  padding: 0 var(--bh-space-3);
  margin-bottom: -1px;

  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  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: color var(--bh-transition), border-color var(--bh-transition),
              background var(--bh-transition);
}

.bh-tabs__tab > svg { width: var(--bh-icon-size); height: var(--bh-icon-size); flex: none; }

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

.bh-tabs__tab[aria-selected="true"],
.bh-tabs__tab.is-active {
  color: var(--bh-text-primary);
  border-bottom-color: var(--bh-color-accent);
}

.bh-tabs__tab:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: calc(var(--bh-focus-offset) * -1);
  border-radius: var(--bh-radius-sm) var(--bh-radius-sm) 0 0;
}

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

/* Zähler im Tab. */
.bh-tabs__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 var(--bh-space-1);
  border-radius: var(--bh-radius-pill);
  background: var(--bh-surface-3);
  color: var(--bh-text-muted);
  font-size: var(--bh-text-xs);
  font-variant-numeric: tabular-nums;
}
.bh-tabs__tab[aria-selected="true"] .bh-tabs__count,
.bh-tabs__tab.is-active .bh-tabs__count {
  background: var(--bh-color-accent-soft);
  color: var(--bh-color-accent);
}

/* Tabs in einer Karte sitzen bündig am Kartenrand. */
.bh-card--flush > .bh-tabs { padding: 0 var(--bh-space-5); }

/* Der Abstand zur Reiterleiste gilt dort, wo die Leiste wirklich unmittelbar
   darüber steht. Sitzt das Panel in einem .bh-card__body, polstert bereits
   die Karte — bis 0.1.0 addierten sich beide, und mit einem Kind, das noch
   einen eigenen margin-top mitbrachte, standen 52px zwischen Reiter und
   Inhalt (24 Karte + 16 Panel + 12 Kind). Daneben, wo kein Kind einen
   margin trug, standen 0px. Siehe DESIGN.md §0c.

   Das Geschwister-Zeichen ist die Bedingung selbst: Es trifft genau dann,
   wenn die Leiste tatsächlich das vorherige Geschwister ist. Kein Modifier,
   den jemand setzen oder vergessen könnte. */
.bh-tabs ~ .bh-tabs__panel { padding-top: var(--bh-space-4); }

/* Das Panel ist ein Inhaltsbereich, kein Stapel-Behälter: seine Kinder sind
   von Fall zu Fall verschieden — dichte Zeilenlisten, die sich über eine
   Linie trennen, stehen neben Blöcken, die Luft brauchen. Ein gap hier
   träfe beide gleich und zöge die Listen auseinander. Wer im Panel stapelt,
   nimmt dafür einen Stapel-Behälter (DESIGN.md §0c, letzter Absatz). */
.bh-tabs__panel[hidden] { display: none; }