/* ─────────────────────────────────── */
/* COMPONENT: Badge                    */
/* ─────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.badge__icon {
    font-size: var(--icon-sm);
}

.badge__count {
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    line-height: 1;
}

.badge__label {
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* ─── Colour variants ─── */

.badge--purple {
    background-color: var(--color-purple);
    color: var(--color-white);
}

.badge--green {
    background-color: var(--color-green);
    color: var(--color-white);
}

.badge--yellow {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.badge--red {
    background-color: var(--color-red);
    color: var(--color-white);
}

.badge--no-gap {
    gap: 0;
}

/* Invisible placeholder — keeps card__badges height consistent */
.badge--placeholder {
    visibility: hidden;
}

/* Overflow count badge — no background, just blue text */
.badge--overflow {
    background: none;
    color: var(--color-blue) !important;
    padding: 0 !important;
}