/* Canonical badge contract. Legacy selectors remain as presentation aliases for
   existing JS hooks; new templates use erp-badge + a semantic variant.
   Do not use Bootstrap background/text/rounded utilities on badges. */
.erp-theme :where(.erp-badge, .badge, .active-pill, .inactive-pill, .role-pill, .super-pill, .status-pill, .page-status, .status-complete, .status-test, .supplier-chip, .warning-chip, .qc-chip, .qc-status, .completion-status, .pw-badge, .approval-status, .approval-count, .approval-governance-badge, .approval-builder-status, .approval-builder-step, .approval-stage-badges span, .collection-state, .category-product-count, .child-count, .receipt-signal, .receipt-summary-badges span, .header-actions b) {
  --badge-bg: var(--erp-color-muted-surface);
  --badge-fg: var(--erp-color-muted);
  --badge-border: var(--erp-color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  box-sizing: border-box;
  min-height: var(--erp-badge-height);
  max-width: 100%;
  padding: 1px var(--erp-badge-padding-x);
  border: 1px solid var(--badge-border);
  border-radius: var(--erp-badge-radius);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-family: var(--erp-font-sans);
  font-size: var(--erp-badge-font);
  font-weight: 500;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  box-shadow: none;
}
.erp-theme :is(.inactive-pill, .qc-status-draft, .completion-status.status-reversed, .approval-status-draft, .approval-status-cancelled, .pw-badge-muted) {
  --badge-bg: var(--erp-color-muted-surface); --badge-fg: var(--erp-color-muted); --badge-border: var(--erp-color-border);
}
.erp-theme :is(.pw-badge-info, .qc-status-completed, .completion-status.status-draft_ready, .approval-status-scheduled, .approval-status-validated, .approval-status-pending, .approval-governance-badge.is-working) {
  --badge-bg: var(--erp-color-info-surface); --badge-fg: var(--erp-color-info); --badge-border: var(--erp-color-info-border);
}
.erp-theme :is(.active-pill, .status-complete, .qc-status-approved, .qc-status-ready, .completion-status.status-posted, .pw-badge-success, .approval-status-active) {
  --badge-bg: var(--erp-color-success-surface); --badge-fg: var(--erp-color-success); --badge-border: var(--erp-color-success-border);
}
.erp-theme :is(.status-test, .warning-chip, .qc-status-unassigned, .qc-status-warning, .completion-status.status-no_template, .completion-status.status-draft_incomplete, .pw-badge-warning, .approval-governance-badge.is-missing) {
  --badge-bg: var(--erp-color-warning-surface); --badge-fg: var(--erp-color-warning); --badge-border: var(--erp-color-warning-border);
}
.erp-theme :is(.qc-status-blocked) {
  --badge-bg: var(--erp-color-danger-surface); --badge-fg: var(--erp-color-danger-text); --badge-border: var(--erp-color-danger-border);
}
.erp-theme :is(.role-pill, .super-pill, .supplier-chip, .qc-chip, .qc-chip.required, .pw-badge-task, .approval-governance-badge.is-configured, .approval-builder-step, .approval-stage-badges span, .receipt-signal, .receipt-summary-badges span) {
  --badge-bg: var(--erp-color-surface); --badge-fg: var(--erp-color-primary); --badge-border: var(--erp-color-border);
}
.erp-theme .erp-badge.erp-badge--neutral {
  --badge-bg: var(--erp-color-muted-surface); --badge-fg: var(--erp-color-muted); --badge-border: var(--erp-color-border);
}
.erp-theme .erp-badge.erp-badge--progress {
  --badge-bg: var(--erp-color-info-surface); --badge-fg: var(--erp-color-info); --badge-border: var(--erp-color-info-border);
}
.erp-theme .erp-badge.erp-badge--success {
  --badge-bg: var(--erp-color-success-surface); --badge-fg: var(--erp-color-success); --badge-border: var(--erp-color-success-border);
}
.erp-theme .erp-badge.erp-badge--warning {
  --badge-bg: var(--erp-color-warning-surface); --badge-fg: var(--erp-color-warning); --badge-border: var(--erp-color-warning-border);
}
.erp-theme .erp-badge.erp-badge--danger {
  --badge-bg: var(--erp-color-danger-surface); --badge-fg: var(--erp-color-danger-text); --badge-border: var(--erp-color-danger-border);
}
.erp-theme .erp-badge.erp-badge--kind {
  --badge-bg: var(--erp-color-surface); --badge-fg: var(--erp-color-primary); --badge-border: var(--erp-color-border);
}
.erp-theme .erp-badge.erp-badge--selected {
  --badge-bg: var(--erp-color-selected); --badge-fg: var(--erp-color-primary); --badge-border: var(--erp-color-primary);
}
.erp-theme :is(.erp-badge--count, .erp-badge--chip, .approval-count, .category-product-count, .child-count, .header-actions b) {
  border-radius: var(--erp-radius-pill);
  font-variant-numeric: tabular-nums;
}
.erp-theme :is(a.erp-badge, button.erp-badge):hover {
  text-decoration: underline;
  border-color: currentColor;
}
.erp-theme :is(a.erp-badge, button.erp-badge):focus-visible {
  outline: var(--erp-focus-width) solid var(--erp-color-primary);
  outline-offset: var(--erp-focus-offset);
}
.erp-theme :is(.erp-badge, .badge, .header-actions b)[hidden] { display: none !important; }

.erp-theme .receipt-signal-complete { --badge-bg: var(--erp-color-success-surface); --badge-fg: var(--erp-color-success); --badge-border: var(--erp-color-success-border); }
.erp-theme .receipt-signal-pending { --badge-bg: var(--erp-color-info-surface); --badge-fg: var(--erp-color-info); --badge-border: var(--erp-color-info-border); }
.erp-theme .receipt-signal-warning { --badge-bg: var(--erp-color-warning-surface); --badge-fg: var(--erp-color-warning); --badge-border: var(--erp-color-warning-border); }
.erp-theme :is(.receipt-signal-muted, .receipt-signal-return) { --badge-bg: var(--erp-color-muted-surface); --badge-fg: var(--erp-color-muted); --badge-border: var(--erp-color-border); }

/* Icon counters are compact overlays, not 22px content badges. */
.erp-theme .erp-header .header-actions b {
  min-width:14px;
  min-height:14px;
  height:14px;
  max-width:none;
  padding:0 3px;
  font-size:9px;
  font-weight:600;
  line-height:12px;
  white-space:nowrap;
  top:-3px;
  right:-2px;
  pointer-events:none;
}