/**
 * AUTOCORE360 Admin Panel - Badges
 * Badge variants, status badges, priority badges
 */

/* ============ BADGES ============ */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    line-height: 1.2;
    transition: background var(--transition-fast) ease, color var(--transition-fast) ease, transform var(--transition-fast) ease;
}

/* Badge sizes */
.badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}

.badge-lg {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
}

/* Light/outline badges (default) */
.badge-primary {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.12);
    color: var(--primary);
}

.badge-success {
    background: rgba(var(--success-rgb, 34, 197, 94), 0.12);
    color: var(--success);
}

.badge-danger {
    background: rgba(var(--danger-rgb, 239, 68, 68), 0.12);
    color: var(--danger);
}

.badge-warning {
    background: rgba(var(--warning-rgb, 245, 158, 11), 0.12);
    color: var(--warning);
}

.badge-info {
    background: rgba(var(--info-rgb, 14, 165, 233), 0.12);
    color: var(--info);
}

.badge-secondary {
    background: var(--surface-hover);
    color: var(--text-muted);
}

/* Error badge (alias for danger) */
.badge-error {
    background: rgba(var(--danger-rgb, 239, 68, 68), 0.12);
    color: var(--danger);
}

/* Solid badges */
.badge-solid.badge-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.25);
}

.badge-solid.badge-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
}

.badge-solid.badge-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
}

.badge-solid.badge-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
}

.badge-solid.badge-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.25);
}

/* Outline badges */
.badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}

.badge-outline.badge-primary { color: var(--primary); }
.badge-outline.badge-success { color: var(--success); }
.badge-outline.badge-danger { color: var(--danger); }
.badge-outline.badge-warning { color: var(--warning); }
.badge-outline.badge-info { color: var(--info); }

/* Badge with dot indicator */
.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Pulsing badge for live/active items */
.badge-pulse::before {
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Badge with icon */
.badge i {
    font-size: 0.625rem;
}

/* Badge count (numeric badges) */
.badge-count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 50%;
    font-size: 0.625rem;
}

.badge-count.badge-lg {
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
}

/* Clickable badge */
.badge-clickable {
    cursor: pointer;
}

.badge-clickable:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Badge group */
.badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ============ STATUS BADGES ============ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Status badge with built-in dot */
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-badge.active {
    background: rgba(var(--success-rgb, 34, 197, 94), 0.1);
    color: var(--success);
}
.status-badge.active::before {
    background: var(--success);
}

.status-badge.inactive {
    background: rgba(var(--text-muted-rgb, 148, 163, 184), 0.15);
    color: var(--text-muted);
}
.status-badge.inactive::before {
    background: var(--text-muted);
}

.status-badge.pending {
    background: rgba(var(--warning-rgb, 245, 158, 11), 0.1);
    color: var(--warning);
}
.status-badge.pending::before {
    background: var(--warning);
}

.status-badge.error,
.status-badge.failed {
    background: rgba(var(--danger-rgb, 239, 68, 68), 0.1);
    color: var(--danger);
}
.status-badge.error::before,
.status-badge.failed::before {
    background: var(--danger);
}

.status-badge.processing,
.status-badge.in-progress {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: var(--primary);
}
.status-badge.processing::before,
.status-badge.in-progress::before {
    background: var(--primary);
    animation: badgePulse 1.5s infinite;
}

/* Status badge without dot */
.status-badge.no-dot::before {
    display: none;
}

/* ============ STATUS INDICATORS ============ */
/* Inline status indicator (small dot only) */
.status-indicator-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.status-indicator-inline::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator-inline.online::before { background: var(--success); }
.status-indicator-inline.offline::before { background: var(--text-muted); }
.status-indicator-inline.busy::before { background: var(--warning); }
.status-indicator-inline.error::before { background: var(--danger); }

.status-indicator-inline.pulse::before {
    animation: statusDotPulse 2s infinite;
}

@keyframes statusDotPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 4px transparent;
        opacity: 0.8;
    }
}

/* ============ PROGRESS BADGE ============ */
/* Progress badge (shows percentage) */
.badge-progress {
    position: relative;
    overflow: hidden;
    background: var(--surface-hover);
    color: var(--text);
}

.badge-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--progress, 0%);
    background: var(--primary);
    opacity: 0.2;
    transition: width var(--transition-normal) ease;
}

.badge-progress span {
    position: relative;
    z-index: 1;
}