/* =====================================================================
 * badges.css — canonical status-pill / badge system.
 * Aliases the portal's pre-existing .mfr-status family so existing
 * markup keeps working while new screens can adopt the cleaner .badge.
 *
 * Variants: .badge-success, .badge-warning, .badge-danger, .badge-info,
 * .badge-neutral. Combine with .badge-soft for the muted "row-tag" look.
 * =====================================================================*/

.badge,
.mfr-status,
.ctr-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding: 0 var(--space-2);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: rgba(15,23,42,0.5);
    color: var(--text-default);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Status variants — pair color + soft background + matching border. */
.badge-success,
.mfr-status-done {
    background: var(--color-success-soft);
    border-color: rgba(34,197,94,0.45);
    color: var(--color-success);
}
.badge-warning,
.mfr-status-todo {
    background: var(--color-warning-soft);
    border-color: rgba(251,146,60,0.45);
    color: var(--color-warning);
}
.badge-danger {
    background: var(--color-danger-soft);
    border-color: rgba(248,113,113,0.45);
    color: var(--color-danger);
}
.badge-info {
    background: var(--color-accent-soft);
    border-color: rgba(56,189,248,0.45);
    color: var(--color-accent);
}
.badge-neutral {
    background: rgba(148,163,184,0.12);
    border-color: rgba(148,163,184,0.35);
    color: var(--text-muted);
}

/* Soft variant — borderless, used inside dense lists. */
.badge-soft {
    border-color: transparent;
    height: 18px;
    padding: 0 var(--space-2);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}