/* app/static/css/ui/badges.css */
/* Кастомные стили для бейджей с использованием CSS переменных */

/* ==================================================================
   1. БАЗОВЫЕ СТИЛИ БЕЙДЖЕЙ
================================================================== */

.app-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    font-size: var(--app-font-size-xs);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--app-radius-sm);
    transition: all 150ms ease;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    gap: var(--app-spacing-xs);
}

/* Размеры бейджей */
.app-badge-sm {
    font-size: 0.65em;
    padding: 0.2em 0.4em;
}

.app-badge-lg {
    font-size: var(--app-font-size-sm);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
}

/* ==================================================================
   2. ЦВЕТОВЫЕ ВАРИАНТЫ (ПРИВЯЗАНЫ К ПЕРЕМЕННЫМ КНОПОК)
================================================================== */

/* Primary бейдж */
.app-badge-primary {
    background-color: color-mix(in srgb, var(--app-btn-primary-color) 15%, transparent);
    color: var(--app-btn-primary-color);
    border-color: color-mix(in srgb, var(--app-btn-primary-color) 30%, transparent);
}

.app-badge-primary:hover {
    background-color: color-mix(in srgb, var(--app-btn-primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--app-btn-primary-color) 40%, transparent);
}

/* Secondary бейдж */
.app-badge-secondary {
    background-color: color-mix(in srgb, var(--app-btn-secondary-color) 15%, transparent);
    color: var(--app-btn-secondary-color);
    border-color: color-mix(in srgb, var(--app-btn-secondary-color) 30%, transparent);
}

.app-badge-secondary:hover {
    background-color: color-mix(in srgb, var(--app-btn-secondary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--app-btn-secondary-color) 40%, transparent);
}

/* Success бейдж */
.app-badge-success {
    background-color: color-mix(in srgb, var(--app-btn-success-color) 15%, transparent);
    color: var(--app-btn-success-color);
    border-color: color-mix(in srgb, var(--app-btn-success-color) 30%, transparent);
}

.app-badge-success:hover {
    background-color: color-mix(in srgb, var(--app-btn-success-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--app-btn-success-color) 40%, transparent);
}

/* Danger бейдж */
.app-badge-danger {
    background-color: color-mix(in srgb, var(--app-btn-danger-color) 15%, transparent);
    color: var(--app-btn-danger-color);
    border-color: color-mix(in srgb, var(--app-btn-danger-color) 30%, transparent);
}

.app-badge-danger:hover {
    background-color: color-mix(in srgb, var(--app-btn-danger-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--app-btn-danger-color) 40%, transparent);
}

/* Warning бейдж */
.app-badge-warning {
    background-color: color-mix(in srgb, var(--app-btn-warning-color) 15%, transparent);
    color: var(--app-btn-warning-color);
    border-color: color-mix(in srgb, var(--app-btn-warning-color) 30%, transparent);
}

.app-badge-warning:hover {
    background-color: color-mix(in srgb, var(--app-btn-warning-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--app-btn-warning-color) 40%, transparent);
}

/* Info бейдж */
.app-badge-info {
    background-color: color-mix(in srgb, var(--app-btn-info-color) 15%, transparent);
    color: var(--app-btn-info-color);
    border-color: color-mix(in srgb, var(--app-btn-info-color) 30%, transparent);
}

.app-badge-info:hover {
    background-color: color-mix(in srgb, var(--app-btn-info-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--app-btn-info-color) 40%, transparent);
}

/* Light бейдж */
.app-badge-light {
    background-color: var(--app-color-bg-tertiary);
    color: var(--app-color-text-secondary);
    border-color: var(--app-color-border);
}

.app-badge-light:hover {
    background-color: var(--app-color-bg-secondary);
    border-color: var(--app-color-border-light);
}

/* Dark бейдж */
.app-badge-dark {
    background-color: var(--app-color-text-primary);
    color: white;
    border-color: var(--app-color-text-primary);
}

.app-badge-dark:hover {
    background-color: color-mix(in srgb, var(--app-color-text-primary) 85%, black);
    border-color: color-mix(in srgb, var(--app-color-text-primary) 85%, black);
}

/* ==================================================================
   3. СПЕЦИАЛЬНЫЕ ВАРИАНТЫ ДЛЯ КОНКРЕТНЫХ СЦЕНАРИЕВ
================================================================== */

/* Бейдж уровня безопасности */
.app-badge-security {
    font-weight: 600;
    letter-spacing: 0.05em;
    min-width: 80px;
    text-transform: uppercase;
}

.app-badge-security-high {
    background-color: color-mix(in srgb, var(--app-btn-success-color) 15%, transparent);
    color: var(--app-btn-success-color);
    border-color: color-mix(in srgb, var(--app-btn-success-color) 30%, transparent);
}

.app-badge-security-medium {
    background-color: color-mix(in srgb, var(--app-btn-warning-color) 15%, transparent);
    color: var(--app-btn-warning-color);
    border-color: color-mix(in srgb, var(--app-btn-warning-color) 30%, transparent);
}

.app-badge-security-low {
    background-color: color-mix(in srgb, var(--app-btn-danger-color) 15%, transparent);
    color: var(--app-btn-danger-color);
    border-color: color-mix(in srgb, var(--app-btn-danger-color) 30%, transparent);
}

/* Бейдж приоритета с анимацией пульсации */
.app-badge-priority-critical {
    background-color: color-mix(in srgb, var(--app-btn-danger-color) 15%, transparent);
    color: var(--app-btn-danger-color);
    border-color: color-mix(in srgb, var(--app-btn-danger-color) 30%, transparent);
    animation: app-badge-pulse-critical 2s infinite;
}

@keyframes app-badge-pulse-critical {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-btn-danger-color) 40%, transparent);
    }
    70% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--app-btn-danger-color) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-btn-danger-color) 0%, transparent);
    }
}

/* Бейдж статуса */
.app-badge-status-active {
    background-color: color-mix(in srgb, var(--app-btn-success-color) 15%, transparent);
    color: var(--app-btn-success-color);
    border-color: color-mix(in srgb, var(--app-btn-success-color) 30%, transparent);
}

.app-badge-status-inactive {
    background-color: color-mix(in srgb, var(--app-btn-secondary-color) 15%, transparent);
    color: var(--app-btn-secondary-color);
    border-color: color-mix(in srgb, var(--app-btn-secondary-color) 30%, transparent);
}

.app-badge-status-paused {
    background-color: color-mix(in srgb, var(--app-btn-warning-color) 15%, transparent);
    color: var(--app-btn-warning-color);
    border-color: color-mix(in srgb, var(--app-btn-warning-color) 30%, transparent);
}

/* ==================================================================
   4. БЕЙДЖИ С ИКОНКАМИ
================================================================== */

.app-badge-with-icon {
    gap: var(--app-spacing-xs);
    padding-left: var(--app-spacing-sm);
    padding-right: var(--app-spacing-md);
}

.app-badge-icon-only {
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    border-radius: var(--app-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-badge .app-badge-icon {
    font-size: 0.9em;
    line-height: 1;
}

/* ==================================================================
   5. ЭФФЕКТЫ И АНИМАЦИИ
================================================================== */

/* Бейдж с эффектом свечения */
.app-badge-glow {
    position: relative;
}

.app-badge-glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: calc(var(--app-radius-sm) + 2px);
    background: inherit;
    opacity: 0.3;
    filter: blur(4px);
    z-index: -1;
    transition: opacity 150ms ease;
}

.app-badge-glow:hover::after {
    opacity: 0.5;
}

/* ==================================================================
   6. ТЕМНАЯ ТЕМА
================================================================== */

[data-theme="dark"] .app-badge-primary,
[data-theme="dark"] .app-badge-secondary,
[data-theme="dark"] .app-badge-success,
[data-theme="dark"] .app-badge-danger,
[data-theme="dark"] .app-badge-warning,
[data-theme="dark"] .app-badge-info,
[data-theme="dark"] .app-badge-security-high,
[data-theme="dark"] .app-badge-security-medium,
[data-theme="dark"] .app-badge-security-low,
[data-theme="dark"] .app-badge-priority-critical,
[data-theme="dark"] .app-badge-status-active,
[data-theme="dark"] .app-badge-status-inactive,
[data-theme="dark"] .app-badge-status-paused {
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .app-badge-primary:hover,
[data-theme="dark"] .app-badge-secondary:hover,
[data-theme="dark"] .app-badge-success:hover,
[data-theme="dark"] .app-badge-danger:hover,
[data-theme="dark"] .app-badge-warning:hover,
[data-theme="dark"] .app-badge-info:hover,
[data-theme="dark"] .app-badge-security-high:hover,
[data-theme="dark"] .app-badge-security-medium:hover,
[data-theme="dark"] .app-badge-security-low:hover,
[data-theme="dark"] .app-badge-priority-critical:hover,
[data-theme="dark"] .app-badge-status-active:hover,
[data-theme="dark"] .app-badge-status-inactive:hover,
[data-theme="dark"] .app-badge-status-paused:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .app-badge-light {
    background-color: var(--app-color-bg-tertiary);
    color: var(--app-color-text-primary);
    border-color: var(--app-color-border);
}

[data-theme="dark"] .app-badge-light:hover {
    background-color: var(--app-color-bg-secondary);
    border-color: var(--app-color-border-light);
}

/* ==================================================================
   7. СОВМЕСТИМОСТЬ С СУЩЕСТВУЮЩИМИ КЛАССАМИ
================================================================== */

/* Обновляем существующие status-badge для совместимости */
.status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--app-spacing-xs) !important;
    padding: var(--app-spacing-xs) var(--app-spacing-sm) !important;
    font-size: var(--app-font-size-xs) !important;
    font-weight: 500 !important;
    border-radius: var(--app-radius-sm) !important;
    border: 1px solid transparent !important;
    transition: all 150ms ease !important;
}

.status-badge--success {
    background-color: color-mix(in srgb, var(--app-btn-success-color) 15%, transparent) !important;
    color: var(--app-btn-success-color) !important;
    border-color: color-mix(in srgb, var(--app-btn-success-color) 30%, transparent) !important;
}

.status-badge--warning {
    background-color: color-mix(in srgb, var(--app-btn-warning-color) 15%, transparent) !important;
    color: var(--app-btn-warning-color) !important;
    border-color: color-mix(in srgb, var(--app-btn-warning-color) 30%, transparent) !important;
}

.status-badge--danger {
    background-color: color-mix(in srgb, var(--app-btn-danger-color) 15%, transparent) !important;
    color: var(--app-btn-danger-color) !important;
    border-color: color-mix(in srgb, var(--app-btn-danger-color) 30%, transparent) !important;
}

/* ==================================================================
   8. ДОПОЛНИТЕЛЬНЫЕ СТИЛИ
================================================================== */

/* Овальные бейджи */
.app-badge-pill {
    border-radius: var(--app-radius-full);
    padding-left: var(--app-spacing-md);
    padding-right: var(--app-spacing-md);
}

/* Бейджи без границы */
.app-badge-borderless {
    border: none;
}

/* Полупрозрачные бейджи */
.app-badge-transparent {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* ==================================================================
   9. АДАПТИВНОСТЬ
================================================================== */

@media (max-width: 576px) {
    .app-badge-lg {
        font-size: var(--app-font-size-xs);
        padding: var(--app-spacing-xs) var(--app-spacing-sm);
    }

    .app-badge-with-icon {
        padding-left: var(--app-spacing-xs);
        padding-right: var(--app-spacing-sm);
    }
}