/* ═══════════════════════════════════════════════════════════
   Event workspace — small shared pieces the staff event tabs use:
   status pills and toggle chips. Global (not scoped) because they
   are rendered inside RenderFragments passed between components,
   where scoped CSS never reaches.
   ═══════════════════════════════════════════════════════════ */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--crm-surface-2, #E6EEF8);
    color: var(--crm-text-2, #4A5B78);
}

.pill--good { background: rgba(0, 158, 136, 0.12); color: #00715f; }
.pill--warn { background: rgba(217, 119, 6, 0.13); color: #92400e; }
.pill--bad { background: rgba(194, 65, 12, 0.12); color: #9a3412; }
.pill--info { background: rgba(58, 90, 150, 0.12); color: var(--crm-navy-600, #1E3D70); }
.pill--quiet { background: transparent; border: 1px solid var(--crm-border, #DCE5F0); }

.chip {
    border: 1px solid var(--crm-border-2, #C5D3E8);
    background: var(--crm-white, #fff);
    color: var(--crm-text-2, #4A5B78);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.chip:hover { color: var(--crm-text, #0D2447); }

.chip.is-on {
    background: var(--crm-teal-50, rgba(0, 197, 168, 0.08));
    border-color: var(--crm-teal-600, #009E88);
    color: var(--crm-navy, #0D2447);
}

/* A tab label's count, and the dot that says a tab needs attention. */
.tab-count {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--crm-text-3, #8A9BB5);
}

.nav-link.active .tab-count { color: var(--crm-text-2, #4A5B78); }

.tab-attention {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: #d97706;
    vertical-align: middle;
}