/* ═══════════════════════════════════════════════════════════════════════════
   VPP STATUS BADGE — F-45
   Single source of palette truth for VPP01 order status display.
   Paired with the shared helper gtas_vpp_shared.UI.StatusDisplay.GetCssClass().

   Old palette issues (before F-45):
     - Submitted(1) == Success == Approved(7) → same green, indistinguishable
     - Cancelled(4) == Danger == Rejected(8)  → same red, user can't tell why
   New palette:
     - Submitted  → Info     (awaiting admin, neutral attention)
     - Pending    → Warning  (action needed by admin)
     - Approved   → Success  (terminal success state)
     - Cancelled  → Neutral  (user cancellation, no action)
     - Rejected   → Danger   (admin rejection, terminal failure)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base: inherits from .vpp-badge (defined in vpp-kpi.css) for pill sizing.
   These overrides only set the color palette. */
.vpp-badge-submitted {
    background: var(--vpp-info-muted);
    color: var(--vpp-info);
    border: 1px solid var(--vpp-info-muted);
}

.vpp-badge-pending {
    background: var(--vpp-warning-muted);
    color: var(--vpp-warning);
    border: 1px solid var(--vpp-warning-muted);
}

.vpp-badge-approved {
    background: var(--vpp-success-muted);
    color: var(--vpp-success);
    border: 1px solid var(--vpp-success-muted);
}

.vpp-badge-cancelled {
    background: var(--vpp-bg-surface);
    color: var(--vpp-text-tertiary);
    border: 1px solid var(--vpp-border-default);
}

.vpp-badge-rejected {
    background: var(--vpp-danger-muted);
    color: var(--vpp-danger);
    border: 1px solid var(--vpp-danger-muted);
}

/* Fallback for unknown status codes (StatusDisplay.GetCssClass returns
   "vpp-badge-default" for status ∉ {1,4,6,7,8}). */
.vpp-badge-default {
    background: var(--vpp-bg-surface);
    color: var(--vpp-text-secondary);
    border: 1px solid var(--vpp-border-default);
}