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

   Badges sind Beschriftungen, keine Bedienelemente — deshalb
   --bh-badge-height (24px) statt --bh-control-height. Siehe TOKEN-MAPPING §5.
   Varianten sind semantisch benannt (--success), nie farbbenannt (--green)
   und nie rollenbenannt (--admin).
   ═══════════════════════════════════════════════════════════════════════════ */

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

  min-height: var(--bh-badge-height);
  padding: 0 var(--bh-space-2);

  border: 1px solid var(--bh-color-accent);
  border-radius: var(--bh-radius-md);
  background: var(--bh-color-accent-soft);
  color: var(--bh-color-accent);

  font-size: var(--bh-text-xs);
  font-weight: var(--bh-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.bh-badge > svg { width: 12px; height: 12px; flex: none; }

/* Fläche über Transparenz, Text und Rahmen in der vollen Farbe. */
.bh-badge--success { background: var(--bh-color-success-soft); color: var(--bh-color-success); border-color: var(--bh-color-success); }
.bh-badge--warning { background: var(--bh-color-warning-soft); color: var(--bh-color-warning); border-color: var(--bh-color-warning); }
.bh-badge--danger  { background: var(--bh-color-danger-soft);  color: var(--bh-color-danger);  border-color: var(--bh-color-danger); }

.bh-badge--neutral {
  background: var(--bh-surface-3);
  color: var(--bh-text-tertiary);
  border-color: var(--bh-border-subtle);
}
.bh-badge--outline { background: transparent; }

/* Pille für Zähler. */
.bh-badge--count {
  justify-content: center;
  min-width: var(--bh-badge-height);
  padding: 0 var(--bh-space-1);
  border-radius: var(--bh-radius-pill);
  font-variant-numeric: tabular-nums;
}

/* Statuspunkt ohne Fläche — für Tabellenzellen und Listenzeilen. */
.bh-badge--dot {
  min-height: auto; padding: 0;
  border: 0; background: none;
  color: var(--bh-text-secondary);
  font-weight: var(--bh-weight-regular);
}
.bh-badge--dot::before {
  content: ""; flex: none;
  width: 6px; height: 6px;
  border-radius: var(--bh-radius-round);
  background: currentColor;
}
.bh-badge--dot.bh-badge--success::before { background: var(--bh-color-success); }
.bh-badge--dot.bh-badge--warning::before { background: var(--bh-color-warning); }
.bh-badge--dot.bh-badge--danger::before  { background: var(--bh-color-danger); }

/* Anklickbarer Badge (Filter). Nur dann gibt es Zustände. */
a.bh-badge, button.bh-badge {
  cursor: pointer;
  transition: background var(--bh-transition), border-color var(--bh-transition);
}
a.bh-badge:hover, button.bh-badge:hover { border-color: var(--bh-border-strong); }
a.bh-badge:active, button.bh-badge:active { background: var(--bh-surface-3); }
a.bh-badge:focus-visible, button.bh-badge:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}
button.bh-badge:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }