/* ═══════════════════════════════════════════════════════════
   Badges — extracted from TNonline (StatusBadge / role badge)
   Small status pills in five tones, plus an icon role badge.
   ═══════════════════════════════════════════════════════════ */

.tn-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.tn-badge--blue {
    background: var(--tn-accent-light);
    color: var(--tn-accent);
}

.tn-badge--amber {
    background: var(--tn-warning-light);
    color: var(--tn-warning-text);
}

.tn-badge--green {
    background: var(--tn-success-light);
    color: var(--tn-success-text);
}

.tn-badge--red {
    background: var(--tn-danger-light);
    color: var(--tn-danger-text);
}

.tn-badge--gray {
    background: var(--tn-bg-page);
    color: var(--tn-text-secondary);
}

/* ── Role badge — icon + label pill ── */
.tn-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--tn-radius);
    font-size: var(--tn-font-size-xs);
    font-weight: 600;
    width: fit-content;
}

.tn-role-badge .bi {
    font-size: 0.85rem;
}

.tn-role-badge--admin {
    background: var(--tn-accent-light);
    color: var(--tn-accent);
}

.tn-role-badge--user {
    background: var(--tn-bg-page);
    color: var(--tn-text-secondary);
}