/* ============================================
   Badges - Gradient Theme
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-primary {
    background: var(--badge-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(40, 150, 205, 0.25);
}

.badge-success {
    background: var(--badge-success);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.badge-warning {
    background: var(--badge-warning);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.badge-danger {
    background: var(--badge-danger);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.badge-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* Light Badges (Background with colored text) */
.badge-light-primary {
    background: rgba(40, 150, 205, 0.1);
    color: var(--primary-600);
}

.badge-light-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.badge-light-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.badge-light-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge.active::before {
    background: #10b981;
}

.status-badge.inactive::before {
    background: #ef4444;
}

.status-badge.pending::before {
    background: #f59e0b;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}