/* ═══════════════════════════════════════════════════════════════
   Valtio Badge System (vb-)
   Zwei Kontexte: vb-detail (Header) / vb-list (Sidebar, Tabellen)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────── */
.vb {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Detail (unter Titel) ─────────────────────────────────────── */
.vb-detail {
  height: 22px;
  padding: 0 9px;
  font-size: 10.5px;
  gap: 3px;
}

/* ── List (Sidebar, Tabellen) ─────────────────────────────────── */
.vb-list {
  height: 18px;
  padding: 0 6px;
  font-size: 9.5px;
  gap: 2px;
}

/* ── Link (klickbar) ──────────────────────────────────────────── */
.vb-link {
  cursor: pointer;
  text-transform: none;
  transition: background .12s, border-color .12s, color .12s;
}
.vb-link:hover {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
}

/* ── Farben ────────────────────────────────────────────────────── */
.vb-purple { background: rgba(139,92,246,.15);  color: #7c3aed; border-color: rgba(139,92,246,.2); }
.vb-amber  { background: rgba(245,158,11,.12);  color: #d97706; border-color: rgba(245,158,11,.2); }
.vb-orange { background: rgba(234,88,12,.12);   color: #ea580c; border-color: rgba(234,88,12,.2); }
.vb-blue   { background: rgba(59,130,246,.12);  color: #2563eb; border-color: rgba(59,130,246,.2); }
.vb-teal   { background: rgba(13,148,136,.12);  color: #0f766e; border-color: rgba(13,148,136,.2); }
.vb-green  { background: rgba(34,197,94,.12);   color: #15803d; border-color: rgba(34,197,94,.2); }
.vb-red    { background: rgba(239,68,68,.12);   color: #dc2626; border-color: rgba(239,68,68,.2); }
.vb-gray   { background: var(--bg3);            color: var(--txm); border-color: var(--border); }

/* ── Button-Reset (vb auf <button>) ──────────────────────────── */
button.vb {
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* ── Counter (Tab-Zähler) ─────────────────────────────────────── */
.vb-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg3);
  color: var(--txm);
  line-height: 1;
}