/* ============================================
   Badges Component
   Единая система бейджей
   ============================================ */

/* Base Badge */
.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: var(--backdrop-blur-light);
    display: inline-block;
}

/* Status Badges */
.badge-online {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15));
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.badge-offline {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.15));
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.badge-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.15));
    color: var(--accent-yellow);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

/* Yes/No Badges */
.badge-yes {
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.badge-no {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
}

/* Status Indicator (Dot) */
.status-indicator {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    box-shadow: 0 0 8px currentColor;
}

.status-online {
    background: var(--accent-green);
    color: var(--accent-green);
}

.status-offline {
    background: var(--accent-red);
    color: var(--accent-red);
}

/* Mini Tags (для таблиц) */
.mini-tag {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--accent-purple-light);
    margin: 2px;
    transition: all var(--transition-base);
    
    &:hover {
        background: rgba(139, 92, 246, 0.25);
    }
}