@layer components {
  .badge,
  .status,
  .cod-badge,
  .stock-badge,
  .order-payment-badge,
  .finance-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .badge-success,
  .status-ok,
  .status.paid,
  .status-done,
  .stock-ok,
  .cod-positive,
  .payment-cash {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #166534;
  }

  .badge-warning,
  .status-warn,
  .status.pending,
  .status-cod,
  .stock-low,
  .payment-cod {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
  }

  .badge-danger,
  .status-bad,
  .status.cancelled,
  .status-cancelled,
  .stock-negative {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
  }

  .badge-neutral,
  .status-empty,
  .status.neutral,
  .cod-zero,
  .status-pending,
  .stock-zero,
  .payment-other {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
  }

  .badge-info,
  .payment-bank {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
  }

  .finance-cat-badge[data-cat="luong"] { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
  .finance-cat-badge[data-cat="nhap"] { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
  .finance-cat-badge[data-cat="vc"] { background: #fffbeb; color: #b45309; border-color: #fde68a; }
  .finance-cat-badge[data-cat="an"] { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
  .finance-cat-badge[data-cat="di"] { background: #ecfeff; color: #0e7490; border-color: #cffafe; }
  .finance-cat-badge[data-cat="khac"] { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

  .hydra-archived-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    white-space: nowrap;
  }

  .inv-prod-stock-badge {
    display: inline;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
  }

  .inv-prod-stock--zero {
    color: #dc2626;
  }

  .inv-prod-stock--low {
    color: #ea580c;
  }

  .inv-prod-stock--ok {
    color: #16a34a;
  }
}