/* Canonical purchase-invoice status surface. Legacy classes carry semantics only. */
.hx-status-badge.hx-status-badge {
  --hx-status-bg:var(--color-gray-200,#e2e8f0);
  --hx-status-ink:var(--color-gray-600,#475569);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  box-sizing:border-box; min-height:28px; width:auto; min-width:0; max-width:none; flex-shrink:0;
  padding:5px 10px; border:1px solid transparent; border-radius:9999px;
  background:var(--hx-status-bg) !important; color:var(--color-gray-900,#0f172a) !important;
  font-family:inherit; font-size:12px; font-weight:600; line-height:16px;
  letter-spacing:normal; text-transform:none; white-space:nowrap; word-break:normal;
  vertical-align:middle; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.hx-status-badge.hx-status-badge:is([hidden],.hidden,.is-hidden,.d-none) { display:none !important; }
.hx-status-badge.hx-status-badge::before,.hx-status-badge.hx-status-badge::after { content:none; }
.hx-status-badge.hx-status-badge[data-hx-status-tone="green"] { --hx-status-bg:var(--color-success-200,#bbf7d0); --hx-status-ink:var(--color-success-800,#166534); }
.hx-status-badge.hx-status-badge[data-hx-status-tone="red"] { --hx-status-bg:var(--color-danger-200,#fecaca); --hx-status-ink:var(--color-danger-800,#991b1b); }
.hx-status-badge.hx-status-badge[data-hx-status-tone="yellow"] { --hx-status-bg:var(--color-warning-light,#fef3c7); --hx-status-ink:var(--color-warning-700,#b45309); }
.hx-status-badge.hx-status-badge[data-hx-status-tone="blue"] { --hx-status-bg:var(--color-primary-200,#bfdbfe); --hx-status-ink:var(--color-primary-800,#1e40af); }
.hx-status-badge.hx-status-badge[data-hx-status-tone="orange"] { --hx-status-bg:#fed7aa; --hx-status-ink:#c2410c; }
.hx-status-badge.hx-status-badge[data-hx-status-tone="purple"] { --hx-status-bg:#ddd6fe; --hx-status-ink:#6d28d9; }
.hx-status-badge.hx-status-badge > :is(i,svg) { width:14px !important; height:14px !important; flex:0 0 14px; color:var(--hx-status-ink); }
.hx-status-badge.hx-status-badge > .badge-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--hx-status-ink); }
.hx-status-badge.hx-status-badge > span { display:inline; color:inherit; font:inherit; white-space:inherit; }