/* ============================================
   INFINITY OS - BADGES & STATUS
   Shared semantic badge system
   ============================================ */

.infinity-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.badge-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: inherit;
}

.badge-info,
.status-info {
    background: var(--color-info-bg);
    color: var(--color-info);
    border-color: rgba(0, 240, 255, 0.24);
}

.badge-success,
.status-success,
.status-active,
.badge-complete {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: rgba(0, 255, 136, 0.24);
}

.badge-warning,
.status-warning,
.status-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: rgba(255, 193, 7, 0.24);
}

.badge-neutral,
.status-neutral,
.badge-pending {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.badge-error,
.status-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: rgba(255, 107, 129, 0.24);
}
/* ============================================
   PHASE 5 — BADGE SYSTEM REFINEMENTS
   Phase 5: dot indicators, inline counts, outline variants
   ============================================ */

/* Outline badge variants */
.badge-outline-success {
    background: transparent;
    color: var(--neon-green);
    border-color: rgba(0, 255, 136, 0.35);
}

.badge-outline-warning {
    background: transparent;
    color: var(--color-warning);
    border-color: rgba(251, 146, 60, 0.35);
}

.badge-outline-error {
    background: transparent;
    color: var(--color-error);
    border-color: rgba(255, 107, 129, 0.35);
}

.badge-outline-info {
    background: transparent;
    color: var(--neon-cyan);
    border-color: rgba(0, 240, 255, 0.30);
}

/* Count badge — numeric pill (notification count) */
.badge-count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--neon-cyan);
    color: var(--bg-primary);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.badge-count--error {
    background: var(--color-error);
    color: #fff;
}

/* Badge with leading status dot */
.badge-with-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-with-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
    flex-shrink: 0;
}

/* Portal-accent badge (inherits --portal-accent) */
.badge-accent {
    background: rgba(0, 240, 255, 0.10);
    color: var(--portal-accent);
    border-color: rgba(0, 240, 255, 0.22);
}