/*
 * Soft badge utility — tinted pill badges from the frosted-glass redesign
 * (reference: docs/mockups/customer-listing-redesign.html).
 *
 * Usage: add `badge-soft` alongside an existing bootstrap badge:
 *   <span class="badge badge-soft bg-success">Active</span>
 * or use the semantic color classes directly:
 *   <span class="badge-soft b-amber"><i class="bi bi-hourglass-split"></i>In Progress</span>
 *
 * The tints are translucent so they sit naturally on both white and frosted
 * surfaces — this is the look theme-settings hex colors can't reproduce.
 */

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 4px 11px !important;
    border-radius: 99px !important;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
}

/* green — success / active / enrolled */
.badge-soft.b-green,
.badge-soft.bg-success {
    background: rgba(22, 163, 74, 0.14) !important;
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
}

/* blue — primary / info / completed */
.badge-soft.b-blue,
.badge-soft.bg-primary,
.badge-soft.bg-info {
    background: rgba(37, 116, 166, 0.14) !important;
    color: #1d5c86 !important;
    border-color: rgba(37, 116, 166, 0.3) !important;
}

/* amber — warning / pending / in-progress */
.badge-soft.b-amber,
.badge-soft.bg-warning {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #b45309 !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
}

/* slate — secondary / inactive / not started */
.badge-soft.b-slate,
.badge-soft.bg-secondary,
.badge-soft.bg-dark {
    background: rgba(100, 116, 139, 0.14) !important;
    color: #475569 !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
}

/* red — danger / withdrawn / hold */
.badge-soft.b-red,
.badge-soft.bg-danger {
    background: rgba(220, 38, 38, 0.14) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.32) !important;
}

/* lime — account credit */
.badge-soft.b-lime {
    background: rgba(132, 204, 22, 0.2) !important;
    color: #3f6212 !important;
    border-color: rgba(132, 204, 22, 0.4) !important;
}

/* pending — driven by the org theme's "Badge Pending" colors
   (set BadgePending / BadgePendingFg in Org → Theme Settings → Custom Badge Types;
   grey suggestion: #E9EBEF background, #475569 text) */
.badge-soft.b-pending {
    background: var(--bit-badge-pending, #e9ebef) !important;
    color: var(--bit-badge-pending-fg, #475569) !important;
    border-color: color-mix(in srgb, var(--bit-badge-pending-fg, #475569) 28%, transparent) !important;
}

/* owed / balance-due — driven by org theme "Badge Warning"
   (suggest #F9EADA background, #B45309 text for the soft amber look) */
.badge-soft.b-owed {
    background: var(--bit-badge-warning, #f9eada) !important;
    color: var(--bit-badge-warning-fg, #b45309) !important;
    border-color: color-mix(in srgb, var(--bit-badge-warning-fg, #b45309) 28%, transparent) !important;
}