/* ============================================================================
   BADGES & TAGS
   Small status / category indicators. Soft, refined, status-aware.
   ============================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: none;
    border: 1px solid transparent;
    background: var(--surface-3);
    color: var(--text-default);
    white-space: nowrap;
}

/* Solid (Bootstrap-compatible) — used for high-emphasis labels */
.badge.bg-primary   { background: var(--primary-color)   !important; color: #fff; border-color: transparent; }
.badge.bg-secondary { background: var(--text-muted)      !important; color: #fff; }
.badge.bg-success   { background: var(--success-color)   !important; color: #fff; }
.badge.bg-warning   { background: var(--warning-color)   !important; color: #fff; }
.badge.bg-danger    { background: var(--danger-color)    !important; color: #fff; }
.badge.bg-info      { background: var(--info-color)      !important; color: #fff; }
.badge.bg-light     { background: var(--surface-3)       !important; color: var(--text-default); }
.badge.bg-dark      { background: var(--text-strong)     !important; color: #fff; }
.badge.bg-accent    { background: var(--accent-color)    !important; color: #fff; }

/* Soft variants — preferred for status pills in tables */
.badge-soft-primary { background: var(--primary-soft);   color: var(--primary-color); border-color: rgba(13, 31, 66, 0.12); }
.badge-soft-success { background: var(--success-soft);   color: var(--success-dark);  border-color: rgba(22, 163, 74, 0.18); }
.badge-soft-warning { background: var(--warning-soft);   color: var(--warning-dark);  border-color: rgba(217, 119, 6, 0.22); }
.badge-soft-danger  { background: var(--danger-soft);    color: var(--danger-dark);   border-color: rgba(220, 38, 38, 0.18); }
.badge-soft-info    { background: var(--info-soft);      color: var(--info-dark);     border-color: rgba(8, 145, 178, 0.18); }
.badge-soft-accent  { background: var(--accent-soft);    color: var(--accent-dark-color); border-color: rgba(200, 164, 80, 0.22); }
.badge-soft-muted   { background: var(--surface-3);      color: var(--text-muted);    border-color: var(--border-color); }

/* Tiny dot indicator inside badges */
.badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Outline variant */
.badge-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-default);
}

/* Sizing */
.badge-sm { padding: 0.15rem 0.4rem; font-size: 0.65rem; }
.badge-lg { padding: 0.35rem 0.75rem; font-size: var(--font-size-sm); }

/* "+N more" pill — used after truncated category lists */
.badge-more {
    background: var(--surface-3);
    color: var(--text-muted);
    border-color: transparent;
    font-weight: var(--font-weight-medium);
}