/* =============================================================================
   BUAMS AI new-ui — BADGES
   Spec: /frontend_design.md §F.4

   Status pills. Per spec §F.3 a badge must never rely on colour alone — pair it
   with a `.bui-badge-dot`, an icon, or text that names the state. Every variant
   here keeps a visible border so it still reads when a printer strips
   background colours (spec §12.5 / EHR2 print rules).
   ============================================================================= */

.bui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-1);
  padding: 2px var(--bui-space-2);
  border: 1px solid transparent;
  border-radius: var(--bui-radius-sm);
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.bui-badge-pill {
  border-radius: var(--bui-radius-pill);
  padding-inline: var(--bui-space-3);
}

/* Leading status dot — the non-colour signal that pairs with the fill */
.bui-badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

/* ── Variants ─────────────────────────────────────────────────────────────── */
.bui-badge-neutral {
  background: var(--bui-surface-2);
  border-color: var(--bui-line-strong);
  color: var(--bui-ink-700);
}

.bui-badge-brand {
  background: var(--bui-primary-100);
  border-color: var(--bui-primary-200);
  color: var(--bui-primary-800);
}

.bui-badge-success {
  background: var(--bui-success-bg);
  border-color: rgba(21, 127, 79, .35);
  color: #0E5334;
}

.bui-badge-warning {
  background: var(--bui-warning-bg);
  border-color: rgba(161, 98, 7, .35);
  color: #6E4305;
}

.bui-badge-danger {
  background: var(--bui-danger-bg);
  border-color: rgba(180, 35, 24, .35);
  color: #7F1810;
}

.bui-badge-info {
  background: var(--bui-info-bg);
  border-color: rgba(23, 92, 211, .32);
  color: #123F92;
}

.bui-badge-accent {
  background: var(--bui-accent-100);
  border-color: rgba(14, 116, 144, .32);
  color: #0A5A70;
}

@media print {
  .bui-badge {
    border-width: 1px;
    border-color: currentColor;
  }
}