/* ═══════════════════════════════════════════════════════════
   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);
}

/* ── Notification dot — lets a trigger element (an icon button that opens
   a panel, a menu item, a nav link) signal unread/pending state WHILE
   whatever it opens stays closed. Give the trigger `position: relative`
   and drop this inside it:
     <button class="tn-panel-trigger" style="position:relative">
       <i class="bi bi-chat-dots"></i>
       <span class="tn-badge-dot"></span>
     </button>
   Dot-only by default. Add `--count` and put a number inside (cap it
   yourself, e.g. "9+", for anything wider than two digits — the badge
   doesn't reflow for it). ── */
.tn-badge-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    box-sizing: border-box;
    min-width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tn-danger);
    border: 2px solid var(--tn-bg-card);
}

.tn-badge-dot--count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* ── Solid count badge — same visual weight as .tn-badge-dot--count (solid
   danger red, white text), but flows inline instead of overlaying a
   trigger. Use this for an unread/pending count sitting in a list row or
   next to a label; use .tn-badge-dot--count for the icon-button overlay
   case. TNonline has no source component for this — the five .tn-badge--*
   tones above are the faithful extraction (see StatusBadge.razor.css, all
   soft/muted); this reuses that same --tn-danger token at full strength
   rather than inventing a new color. ── */
.tn-badge--count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tn-danger);
    color: #fff;
    font-size: var(--tn-font-size-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}