/* 배지 및 상태 표시 컴포넌트 스타일 */

/* 배지 기본 스타일 */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* 배지 색상 변형 */
.badge.bg-success {
    background-color: var(--accent-success) !important;
    color: var(--bg-canvas) !important;
}

.badge.bg-warning {
    background-color: var(--accent-warning) !important;
    color: var(--bg-canvas) !important;
}

.badge.bg-danger {
    background-color: var(--accent-danger) !important;
    color: var(--bg-canvas) !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: var(--bg-canvas) !important;
}

.badge.bg-primary {
    background-color: var(--accent-primary) !important;
    color: var(--bg-canvas) !important;
}

.badge.bg-secondary {
    background-color: var(--text-muted) !important;
    color: var(--text-primary) !important;
}

/* 상태 표시 스타일 */
.status-online {
    color: var(--accent-success);
    font-weight: 600;
}

.status-online::before {
    content: '●';
    margin-right: 0.5rem;
    color: var(--accent-success);
    animation: pulse 2s infinite;
}

.status-offline {
    color: var(--accent-danger);
    font-weight: 600;
}

.status-offline::before {
    content: '●';
    margin-right: 0.5rem;
    color: var(--accent-danger);
}

.status-checking {
    color: var(--accent-warning);
    font-weight: 600;
}

.status-checking::before {
    content: '●';
    margin-right: 0.5rem;
    color: var(--accent-warning);
    animation: blink 1s infinite;
}

/* 상태 표시 애니메이션 */
@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0.3;
    }
}

/* Glow 애니메이션 */
.glow-animation {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px var(--accent-primary), 0 0 10px var(--accent-primary);
    }
    to {
        box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary), 0 0 30px var(--accent-primary);
    }
}

/* 로딩 스피너 */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.125em;
}

.spinner-border {
    border: 0.25em solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 배지 크기 변형 */
.badge-lg {
    font-size: 0.875rem;
    padding: 0.5em 0.75em;
}

.badge-sm {
    font-size: 0.6rem;
    padding: 0.25em 0.5em;
}

/* 배지 애니메이션 */
.badge-animated {
    transition: all 0.3s ease;
}

.badge-animated:hover {
    transform: scale(1.1);
}

/* 상태 점 (별도 요소) */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-dot.online {
    background-color: var(--accent-success);
    animation: pulse 2s infinite;
}

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

.status-dot.checking {
    background-color: var(--accent-warning);
    animation: blink 1s infinite;
}

/* 반응형 배지 */
@media (max-width: 768px) {
    .badge {
        font-size: 0.7rem;
        padding: 0.25em 0.5em;
    }
    
    .badge-lg {
        font-size: 0.8rem;
        padding: 0.35em 0.6em;
    }
}