/**
 * Расширенные CSS стили для bar-driven статусов NN4/NN5
 * Дата: 2025-09-15 14:35:00
 * Версия: 3.0
 */

/* ===================================================================
   АНИМАЦИИ ДЛЯ ОЖИДАЮЩИХ СТАТУСОВ
   ================================================================= */

/* Пульсация для статусов ожидания уровня */
@keyframes waiting-pulse {
    0% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.02);
        box-shadow: 0 0 5px rgba(108, 117, 125, 0.3);
    }
    100% { 
        opacity: 0.6;
        transform: scale(1);
    }
}

.waiting-pulse {
    animation: waiting-pulse 2s ease-in-out infinite;
}

/* Пульсация для статусов обработки запроса */
@keyframes pending-pulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.1);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }
}

.pending-pulse {
    animation: pending-pulse 1.5s ease-in-out infinite;
}

/* Специальные эффекты для комбинированных статусов */
@keyframes combined-status-glow {
    0% { 
        box-shadow: 0 0 2px rgba(0, 123, 255, 0.5);
    }
    50% { 
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.8), 0 0 12px rgba(255, 193, 7, 0.4);
    }
    100% { 
        box-shadow: 0 0 2px rgba(0, 123, 255, 0.5);
    }
}

.combined-status {
    animation: combined-status-glow 3s ease-in-out infinite;
    font-weight: 600;
}

/* ===================================================================
   ФИНАЛЬНЫЕ СТАТУСЫ - ОКОНЧАТЕЛЬНЫЕ СОСТОЯНИЯ ПОЗИЦИЙ
   ================================================================= */

/* P6 Confirmed (Final) - золотисто-синий с особым эффектом */
.badge.final-confirmed {
    background: linear-gradient(135deg, #007bff 0%, #ffc107 100%) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 3px 6px rgba(0, 123, 255, 0.4), 0 0 8px rgba(255, 193, 7, 0.3);
    border: 1px solid #ffd700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    animation: final-status-glow 2s ease-in-out infinite alternate;
}

/* Анимация свечения для финальных статусов */
@keyframes final-status-glow {
    from {
        box-shadow: 0 3px 6px rgba(0, 123, 255, 0.4), 0 0 8px rgba(255, 193, 7, 0.3);
    }
    to {
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.6), 0 0 12px rgba(255, 193, 7, 0.5);
    }
}

/* ===================================================================
   СТАТУСЫ NN5 (P6 КОНТРОЛЬ) - ВЫСШИЙ ПРИОРИТЕТ
   ================================================================= */

/* Ожидание P6 уровня - серый с пульсацией */
.badge.nn5-waiting-p6 {
    background-color: #6c757d !important;
    color: white !important;
    border: 1px solid #495057;
}

/* Запрос к NN5 отправлен - желтый с пульсацией */
.badge.nn5-pending-control {
    background-color: #ffc107 !important;
    color: #212529 !important;
    font-weight: 600;
    border: 1px solid #ffcd39;
}

/* P6 подтвержден - синий (primary) */
.badge.nn5-confirmed {
    background-color: #007bff !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* P6 закрытие - красный */
.badge.nn5-closed {
    background-color: #dc3545 !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* ===================================================================
   СТАТУСЫ NN4 (BUMPER КОНТРОЛЬ) - СРЕДНИЙ ПРИОРИТЕТ
   ================================================================= */

/* Ожидание BUMPER уровня - серый с пульсацией */
.badge.nn4-waiting-bumper {
    background-color: #6c757d !important;
    color: white !important;
    border: 1px solid #495057;
}

/* Запрос к NN4 отправлен - оранжевый с пульсацией */
.badge.nn4-pending-control {
    background-color: #fd7e14 !important;
    color: white !important;
    font-weight: 600;
    border: 1px solid #fd9240;
}

/* BUMPER подтвержден - голубой (info) */
.badge.nn4-confirmed {
    background-color: #17a2b8 !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

/* BUMPER закрытие - красный */
.badge.nn4-closed {
    background-color: #dc3545 !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* ===================================================================
   КОМБИНИРОВАННЫЕ СТАТУСЫ NN5+NN4
   ================================================================= */

/* P6 подтвержден + ожидается BUMPER */
.badge.combined-p6-waiting-bumper {
    background: linear-gradient(45deg, #007bff 0%, #007bff 50%, #6c757d 50%, #6c757d 100%) !important;
    color: white !important;
    font-weight: 600;
    position: relative;
}

.badge.combined-p6-waiting-bumper::after {
    content: '🔵⏳';
    position: absolute;
    right: -20px;
    font-size: 10px;
}

/* P6 подтвержден + BUMPER обрабатывается */
.badge.combined-p6-pending-bumper {
    background: linear-gradient(45deg, #007bff 0%, #007bff 50%, #fd7e14 50%, #fd7e14 100%) !important;
    color: white !important;
    font-weight: 600;
    position: relative;
}

.badge.combined-p6-pending-bumper::after {
    content: '🔵🟡';
    position: absolute;
    right: -20px;
    font-size: 10px;
}

/* ===================================================================
   ПРИОРИТЕТНЫЕ ИНДИКАТОРЫ
   ================================================================= */

/* Индикатор приоритетной системы */
.priority-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.priority-indicator.nn5 {
    background-color: #007bff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

.priority-indicator.nn4 {
    background-color: #fd7e14;
    box-shadow: 0 0 4px rgba(253, 126, 20, 0.5);
}

.priority-indicator.combined {
    background: linear-gradient(45deg, #007bff 50%, #fd7e14 50%);
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.3), 0 0 4px rgba(253, 126, 20, 0.3);
}

.priority-indicator.base {
    background-color: #6c757d;
}

/* ===================================================================
   УЛУЧШЕНИЯ ДЛЯ ТАБЛИЦЫ СТАТУСОВ
   ================================================================= */

/* Специальное выделение для активных контрольных статусов */
tr.has-active-control {
    background-color: rgba(0, 123, 255, 0.03) !important;
    border-left: 3px solid #007bff;
}

tr.has-active-control:hover {
    background-color: rgba(0, 123, 255, 0.06) !important;
}

/* Выделение для комбинированных статусов */
tr.has-combined-status {
    background-color: rgba(253, 126, 20, 0.03) !important;
    border-left: 3px solid transparent;
    border-image: linear-gradient(45deg, #007bff, #fd7e14) 1;
}

/* Иконки статусов в tooltip */
.status-tooltip {
    max-width: 300px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.status-tooltip .priority-section {
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.status-tooltip .priority-title {
    font-weight: bold;
    margin-bottom: 3px;
    color: #fff;
}

.status-tooltip .status-item {
    margin-left: 10px;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.9);
}

/* ===================================================================
   АДАПТИВНОСТЬ И МОБИЛЬНЫЕ УСТРОЙСТВА
   ================================================================= */

@media (max-width: 768px) {
    .badge.combined-p6-waiting-bumper::after,
    .badge.combined-p6-pending-bumper::after {
        display: none; /* Скрываем дополнительные иконки на мобильных */
    }
    
    .priority-indicator {
        width: 6px;
        height: 6px;
    }
    
    .waiting-pulse, .pending-pulse, .combined-status {
        animation: none; /* Отключаем анимации для экономии батареи */
    }
}

/* ===================================================================
   ДОПОЛНИТЕЛЬНЫЕ УТИЛИТАРНЫЕ КЛАССЫ
   ================================================================= */

.status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    font-size: 11px;
}

.status-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-legend-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

/* Специальные цвета для легенды */
.legend-nn5 { background-color: #007bff; color: white; }
.legend-nn4 { background-color: #fd7e14; color: white; }
.legend-combined { background: linear-gradient(45deg, #007bff 50%, #fd7e14 50%); color: white; }
.legend-base { background-color: #6c757d; color: white; }

/* ===================================================================
   DARK THEME SUPPORT
   Monitoring loads this file on top of monitoring.css, so keep the
   overrides scoped and late to avoid regressing existing light styles.
   ================================================================= */
html[data-theme="dark"] tr.has-active-control {
    background-color: rgba(53, 194, 224, 0.07) !important;
    border-left-color: #35c2e0;
}

html[data-theme="dark"] tr.has-active-control:hover {
    background-color: rgba(53, 194, 224, 0.11) !important;
}

html[data-theme="dark"] tr.has-combined-status {
    background-color: rgba(240, 160, 96, 0.06) !important;
    border-image: linear-gradient(45deg, #64b5f6, #f0a060) 1;
}

html[data-theme="dark"] .status-tooltip {
    color: #e8eaf0;
}

html[data-theme="dark"] .status-tooltip .priority-section {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .status-tooltip .priority-title,
html[data-theme="dark"] .status-tooltip .status-item {
    color: rgba(232, 234, 240, 0.94);
}

html[data-theme="dark"] .status-legend {
    background-color: #1b1e28;
    border: 1px solid #2b2e3a;
    color: #a8afbd;
}