/* =============================================================================
   kp-badge — soft status pills
   -----------------------------------------------------------------------------
   Replaces the harsh saturated Bootstrap badges (bg-success / bg-danger /
   bg-warning text-dark / bg-primary) on status grids and summary headers with
   a softer "tinted background + deep same-hue text" look (Material-style 50/900
   pairing). Used on User Overview and Role Overview.

   Usage:  <span class="kp-badge kp-badge--success">…</span>
   Variants: --success  --danger  --warning  --info  --neutral
   ========================================================================== */

.kp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;            /* full pill */
    border: 1px solid transparent;
    white-space: nowrap;
}

/* icons sit a touch above baseline inside the pill */
.kp-badge > i,
.kp-badge > .fa,
.kp-badge > .fas {
    font-size: 0.8em;
    line-height: 1;
}

.kp-badge--success {
    background-color: var(--kp-success-tint);
    color: var(--kp-success-deep);
    border-color: var(--kp-success-tint-strong);
}

.kp-badge--danger {
    background-color: var(--kp-danger-tint);
    color: var(--kp-danger-deep);
    border-color: var(--kp-danger-tint-strong);
}

.kp-badge--warning {
    background-color: var(--kp-warning-tint);
    color: var(--kp-warning-deep);
    border-color: var(--kp-warning-tint-strong);
}

.kp-badge--info {
    background-color: var(--kp-info-tint);
    color: var(--kp-info-deep);
    border-color: var(--kp-info-tint-strong);
}

.kp-badge--neutral {
    background-color: var(--kp-gray-bs-100);
    color: var(--kp-gray-65);
    border-color: var(--kp-gray-bs-200);
}