/* ==========================================================================
   ЦВЕТОВАЯ ПАЛИТРА И ТЕМАТИЗАЦИЯ (High-Contrast Corporate Light UI)
   ========================================================================== */
:root {
    /* Основные фоны (более выраженное разделение) */
    --ui-bg-white: #ffffff;
    --ui-bg-light: #f1f5f9; /* Заметный серый фон подложки */
    --ui-bg-section: #e2e8f0; /* Темнее для четкого выделения зон */
    --ui-bg-disabled: #e2e8f0;
    /* Четкие, контрастные границы */
    --ui-border-default: #cbd5e1; /* Хорошо видимая граница */
    --ui-border-light: #e2e8f0;
    --ui-border-dark: #94a3b8; /* Акцентная темная граница */
    /* Максимально читаемый темный текст */
    --ui-text-main: #334155;
    --ui-text-dark: #475569 !important; /* Почти черный для заголовков и важных данных */
    --ui-text-muted: #475569; /* Читаемый серый вместо блеклого */
    --ui-text-slate: #64748b;
    --ui-text-input: #0f172a;
    /* Насыщенные акценты (без пастельной размытости) */
    --ui-primary: #1d4ed8; /* Глубокий синий */
    --ui-primary-focus: rgba(29, 78, 216, 0.2);
    --ui-violet: #4338ca; /* Плотный фиолетовый */
    --ui-violet-focus: rgba(67, 56, 202, 0.2);
    /* Строгие сигнальные цвета */
    --ui-success: #059669;
    --ui-success-hover: #047857;
    --ui-success-shadow: rgba(5, 150, 105, 0.3);
    --ui-amber: #d97706;
    --ui-amber-dark: #b45309;
    --ui-amber-bg: #fef3c7; /* Контрастный желтый */

    --ui-danger: #dc2626; /* Чистый красный */
    --ui-danger-bg: #fee2e2; /* Очевидный фон ошибки */
    --ui-danger-text: #7f1d1d;
}

/* ==========================================================================
   СТРУКТУРНЫЕ БЛОКИ (Строгая геометрия и плотность)
   ========================================================================== */
.modal-content {
    border: 1px solid #435561 !important;
    border-radius: 5px;
    background-color: #F0F0F0;
    box-shadow: 0 0 0 80em rgba(0, 0, 0, 0.57), 0 0 0 0.01em #dedede;
}

.modal-header {
    padding: 6px 10px 6px 10px;
    background-color: #22313f;
    color: white;
    border-radius: 4px 4px 0 0;
    border-bottom: 2px solid #1a2229 !important;
}

.modal-body {
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.7);
}
    

.modal-title {
    color: #f8fafc !important; /* Ультра-белый холодный цвет */
    font-weight: 800 !important;
    font-size: 15px !important;
    text-transform: uppercase; /* Военный регламент — только капс */
    letter-spacing: 2px; /* Четкий межсимвольный интервал для читаемости */
    display: inline-flex;
    align-items: center;
    /* Эффект свечения экрана */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(240, 248, 255, 0.2);
}

    /* Левая скобка [ */
    .modal-title::before {
        content: "[";
        color: #526643;
        margin-right: 10px;
        font-weight: 400;
        opacity: 0.8;
        text-shadow: 0 0 4px #a5f43c80;
    }

    /* Правая скобка ] */
    .modal-title::after {
        content: "]";
        color: #526643;
        margin-left: 10px;
        font-weight: 400;
        opacity: 0.8;
        text-shadow: 0 0 4px #a5f43c80;
    }

.modal-footer {
    padding: 4px;
    background: #22313f;
    color: white;
    border-radius: 0 0 4px 4px;
    border-top: 2px solid #1a2229 !important;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.7);
}
    

.btn-close {
    filter: brightness(0.7);
}

.modal.fade.show.d-block {
    --backdrop-filter: blur(5px);
}

/* =========================================================================
   ТАКТИЧЕСКИЙ БЛОК ПАРАМЕТРА (Авиационный Алюминий — Утопленный)
   ========================================================================= */
.param-item {
    padding: 4px 10px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 90px;
    height: 38px;
    /* Оптическая вогнутость: сверху темнее (тень), снизу светлее */
    background: linear-gradient(to bottom, #d2d7df, #f4f6f8) !important;
    /* Четкий стальной контур */
    border: 2px solid #a2b0be !important;
    border-radius: 6px !important;
    overflow: hidden;
    /* Иллюзия фрезеровки: внутренняя тень нависает сверху, белый блик ложится снизу */
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: all 0.12s ease-in-out;
}

    /* Эффект захвата цели при фокусе (Экран заливается светом изнутри) */
    .param-item:focus-within:not(.disabled):not(:has(.form-control:disabled)) {
        border-color: #f4aa3c !important; /* Сигнальный янтарный контур */
        background: #ffffff !important; /* Внутренняя подсветка */
        /* Янтарный ореол вокруг утопленной ниши */
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 8px rgba(244, 170, 60, 0.35) !important;
    }


/* --- 3. ШИЛЬДИКИ / ТЕХНИЧЕСКИЕ ПОДПИСИ (.param-label) --- */
.param-label {
    background: transparent !important;
    color: #475569 !important; /* Оружейная сталь (высокий контраст на светлом металле) */
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 0 !important;
    margin-top: 2px !important;
    line-height: 1.1 !important;
    border: none !important;
    transition: color 0.12s ease-in-out;
}


/* --- 4. ВНУТРЕННИЕ ПОЛЯ ВВОДА (.form-control) --- */
.param-item .form-control {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 50px;
    height: 22px !important;
    padding: 0 5px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1e293b !important; /* Глубокий slate-угольный для максимальной читаемости цифр */
    text-align: center; /* Выравнивание строго по центру дисплея */
    transition: color 0.12s ease-in-out !important;
}


/* -------------------------------------------------------------------------
   ОТКЛЮЧЕННОЕ СОСТОЯНИЕ (Прибор полностью обесточен)
   ------------------------------------------------------------------------- */

/* Гасим корпус до плоской матовой стали */
.param-item.disabled,
.param-item:has(.form-control:disabled) {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important; /* Полностью убираем объем и тени */
    cursor: not-allowed !important;
}

    /* Блокируем клики и наведение на все внутренние элементы */
    .param-item.disabled *,
    .param-item:has(.form-control:disabled) * {
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    /* Цифры блекнут до неактивного свинцового */
    .param-item.disabled .form-control,
    .param-item .form-control:disabled {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important; /* Жесткий фикс резкости шрифта для iOS/Safari */
    }

    /* Затухающий шильдик */
    .param-item.disabled .param-label,
    .param-item:has(.form-control:disabled) .param-label {
        color: #94a3b8 !important;
    }


/* Полностью скрываем стандартный чекбокс, сохраняя доступность */
.tactical-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Основной корпус тактической плиты */
.tactical-switch-plate {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(to bottom, #2a3540, #1f2831); /* Матовая сталь */
    border: 1px solid #384857;
    border-radius: 6px;
    padding: 3px; /* Идеальный внутренний отступ для иконки */
    cursor: pointer;
    user-select: none;
    height: 42px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.4);
}

    /* Ховер-эффект (металл слегка бликует при наведении) */
    .tactical-switch-plate:hover {
        border-color: #4c5d6e;
        background: linear-gradient(to bottom, #2f3c49, #232d37);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 6px rgba(0, 0, 0, 0.5);
    }

/* Левый отсек под иконку-индикатор */
.tactical-switch-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #182027; /* Вдавленное гнездо */
    border-radius: 4px;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Текст подтверждения */
.tactical-switch-text {
    font-size: 13px;
    font-weight: 700;
    color: #788b9c; /* Приглушенный стальной цвет */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 16px;
    transition: color 0.2s ease;
}

/* Иконка галочки (векторный темный силуэт по умолчанию) */
.tactical-switch-icon {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5d6e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease;
    opacity: 0.4;
}


/* ======================================================== */
/*  СОСТОЯНИЕ АКТИВАЦИИ (КОГДА ЧЕКБОКС НАЖАТ)               */
/* ======================================================== */

/* 1. Плита окрашивается в глубокий сине-стальной цвет (в тон шапки модалки!) */
.tactical-switch-input:checked + .tactical-switch-plate {
    background: linear-gradient(to bottom, #2c3e50, #202d3a);
    border-color: #41566b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 8px rgba(0, 0, 0, 0.4);
}

    /* 2. Отсек иконки загорается строгим матовым армейским зеленым (Khaki/Drab) */
    .tactical-switch-input:checked + .tactical-switch-plate .tactical-switch-icon-box {
        background: #2e4d34; /* Никакой кислоты, чистый военный зеленый */
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 0 8px rgba(46, 77, 52, 0.3);
    }

    /* 3. Галочка становится контрастной белой */
    .tactical-switch-input:checked + .tactical-switch-plate .tactical-switch-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        opacity: 1;
        transform: scale(1.1);
    }

    /* 4. Текст загорается белым с четкой тенью */
    .tactical-switch-input:checked + .tactical-switch-plate .tactical-switch-text {
        color: #ffffff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    }

/* Физический отклик при клике */
.tactical-switch-plate:active {
    transform: translateY(1px);
}



/* =========================================================================
   ОСНОВНОЙ КОНТЕЙНЕР ТАКТИЧЕСКОГО ТРИГГЕРА / ПАНЕЛИ
   ========================================================================= */
.tactical-military-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- ЕДИНЫЙ СВЕТЛЫЙ КОРПУС ДЛЯ ВСЕХ ПОЛЕЙ (Авиационный алюминий) --- */
.military-field {
    display: inline-flex;
    align-items: center;
    height: 38px;
    background: #f1f5f9 !important; /* Светлая база вместо темного колодца */
    border: 2px solid #a2b0be !important; /* Четкий стальной контур */
    border-radius: 4px !important;
    overflow: hidden;
    /* Легкая внутренняя тень создает правильное ощущение утопленного в панель прибора */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    max-width: 150px;
    transition: all 0.15s ease-in-out;
}

    /* Эффект фокуса / Активного состояния прибора (Янтарное наведение) */
    .military-field:focus-within:not(.disabled) {
        border-color: #ff9f0a !important; /* Сигнальный янтарный */
        box-shadow: 0 0 8px rgba(255, 159, 10, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        background: #ffffff !important; /* Подсвечиваем поле изнутри при вводе */
    }

    /* Размеры элементов */
    .military-field.select-type {
        flex: 0;
        min-width: 110px;
    }

    .military-field.input-weight {
        flex: 1;
        min-width: 85px;
        max-width: 105px;
    }

    .military-field.urgency-toggle {
        flex: 1.5;
        min-width: 110px;
        max-width: 130px;
    }

    .military-field.importance-box {
        flex: 1;
        min-width: 85px;
        max-width: 105px;
    }


/* --- ТЕКСТ И ЦИФРЫ НА ПРИБОРНОЙ ПАНЕЛИ (Максимальный контраст) --- */
.military-input, .military-select {
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 10px !important;
    font-size: 15px !important; /* Чуть уменьшили для большей аккуратности */
    font-weight: 800 !important;
    color: #1e293b !important; /* Глубокий slate-угольный цвет для идеальной читаемости */
}

/* Цифровые моноширинные поля (Вес, Важность) */
.military-input {
    text-align: center;
}

.military-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

    .military-select:disabled {
        color: #94a3b8 !important; /* Блеклый серый для отключенного состояния */
        cursor: not-allowed;
    }


/* --- БОКОВЫЕ МЕТАЛЛИЧЕСКИЕ НАКЛАДКИ С ИКОНКАМИ --- */
.military-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    border-left: 1px solid #a2b0be;
    /* Металлический градиент в тон рамки */
    background: linear-gradient(to bottom, #f1f5f9, #dbe2eb);
    flex-shrink: 0;
}

/* Цвета индикаторов в стиле физических приборов */
.select-arrow {
    color: #475569; /* Темная стрелка */
    font-size: 10px;
}

.icon-gauge {
    color: #d97706; /* Медно-янтарный манометр */
    font-size: 13px;
    opacity: 0.9;
}

.icon-shield {
    color: #4f46e5; /* Насыщенный синий датчик защиты */
    font-size: 13px;
    opacity: 0.9;
}


/* --- ТУМБЛЕР "СРОЧНО" (ИНДИКАТОР ТРЕВОГИ) --- */
.urgency-toggle {
    padding: 0 !important;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(to bottom, #f8fafc, #e2e8f0) !important;
}

.military-checkbox-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.urgency-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 12px;
}

.icon-lightning {
    color: #94a3b8; /* Потушенная лампа (холодная сталь) */
    font-size: 13px;
    transition: all 0.15s ease;
}

.urgency-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569; /* Четкий темный шрифт вместо блеклого */
    margin-left: 8px;
    transition: all 0.15s ease;
}

/* Ховер тумблера (Мягкое подсвечивание металла) */
.urgency-toggle:hover:not(.disabled) {
    border-color: #ff9f0a !important; /* Вспышка янтаря */
    background: linear-gradient(to bottom, #ffffff, #edf2f7) !important;
}

    .urgency-toggle:hover:not(.disabled) .urgency-label {
        color: #d97706; /* Текст загорается медно-оранжевым */
    }

    .urgency-toggle:hover:not(.disabled) .icon-lightning {
        color: #d97706;
    }

/* ------------------------------------------- */
/* АКТИВНОЕ СОСТОЯНИЕ (РЕЖИМ ФОРСАЖА ВКЛЮЧЕН)  */
/* ------------------------------------------- */
.urgency-toggle.active {
    /* Приятный светлый милитари-зеленый (Status: Active) */
    background: linear-gradient(to bottom, #e2f0d9, #cbdcc3) !important;
    border-color: #70ad47 !important; /* Зеленый контур */
    box-shadow: 0 2px 6px rgba(112, 173, 71, 0.25);
}

    .urgency-toggle.active .icon-lightning {
        color: #385723 !important; /* Глубокий, отлично читаемый зеленый */
        filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.8));
    }

    .urgency-toggle.active .urgency-label {
        color: #2b4425 !important; /* Глубокий хвойный шрифт для контраста */
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }

/* Заблокированный тумблер */
.urgency-toggle.disabled {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    opacity: 0.7; /* Слегка приглушаем, но не превращаем в кашу */
    box-shadow: none !important;
}

    .urgency-toggle.disabled .icon-lightning,
    .urgency-toggle.disabled .urgency-label {
        color: #94a3b8 !important;
    }


.headerTitle {
    background: #cdd2d7;
    border: 1px solid var(--ui-border-default);
    border-bottom: none;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 6px 6px 0 0;
    font-weight: 700;
    color: var(--ui-text-dark);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    position: relative;
    top: 1px;
    z-index: 2;
}

.cardHead {
    background: var(--ui-bg-white);
    border: 1px solid var(--ui-border-default);
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 8px;
    margin-bottom: 8px;
}

.detailTitle {
    background: #cdd2d7;
    border: 1px solid var(--ui-border-dark);
    border-bottom: none;
    display: inline-block;
    padding: 5px 14px;
    border-radius: 6px 6px 0 0;
    font-weight: 700;
    color: var(--ui-text-dark);
    font-size: 0.8rem;
    position: relative;
    top: 1px;
    z-index: 2;
}

.cardDetails {
    background: var(--ui-bg-white);
    border: 1px solid var(--ui-border-dark);
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 8px;
    margin-bottom: 8px;
}




/* ==========================================================================
   ЭЛЕМЕНТЫ ФОРМЫ
   ========================================================================== */
.form-floating > .form-control,
.form-floating > .form-select {
    height: 3.2rem; /* Чуть компактнее стандартного */
    border: 1px solid var(--ui-border-dark);
    border-radius: 4px;
    color: var(--ui-text-input);
    transition: border-color 0.1s, box-shadow 0.1s;
}

.form-floating > label {
    padding: 0.85rem 0.75rem;
    color: var(--ui-text-muted);
    font-weight: 500;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-focus);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ui-bg-disabled) !important;
    border-color: var(--ui-border-default);
    color: var(--ui-text-main);
    opacity: 1;
    font-weight: 600;
}



/* ==========================================================================
   ПАНЕЛИ ПАРАМЕТРОВ И КОМПАКТНЫЕ ИНПУТЫ
   ========================================================================== */
.params-row {
    background: var(--ui-bg-light);
    border: 1px solid var(--ui-border-default);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.departure-params-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ui-bg-light);
    border: 1px solid var(--ui-border-default);
    border-radius: 6px;
    padding: 8px;
    flex-wrap: wrap;
}

.params-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.param-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ui-bg-white);
    border: 1px solid var(--ui-border-dark);
    border-radius: 6px;
    height: 38px; 
}

    .param-input-wrapper:focus-within {
        border-color: var(--ui-violet);
        box-shadow: 0 0 0 3px var(--ui-violet-focus);
    }

    .param-input-wrapper input {
        border: none !important;
        background: transparent !important;
        padding: 0 30px 0 10px !important;
        height: 100%;
        font-weight: 700;
        color: var(--ui-text-input);
    }

.input-icon-label {
    position: absolute;
    right: 10px;
    color: var(--ui-text-muted);
    pointer-events: none;
}

.select-type {
    width: 135px;
}

.input-weight {
    width: 95px;
}

.importance-box {
    width: 85px;
}

.cost-box {
    width: 133px;
    background: #fee2e2;
    border-color: #fca5a5;
}

    .cost-box input {
        color: var(--ui-danger) !important;
    }

.checkbox-item {
    background: var(--ui-bg-white);
    border: 1px solid var(--ui-border-default);
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

    .checkbox-item:hover {
        border-color: var(--ui-border-dark);
        background: var(--ui-bg-light);
    }

    .checkbox-item.checked-row {
        border-color: var(--ui-primary);
        background: rgba(29, 78, 216, 0.08);
    }

.text-violet {
    color: var(--ui-violet) !important;
}


/* ==========================================================================
   4. ЭЛЕМЕНТЫ ФОРМ И ИНПУТЫ
   ========================================================================== */

/* Скрытие стрелок числовых полей */
.param-item input::-webkit-outer-spin-button,
.param-item input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]::-webkit-inner-spin-button {
    transform: scale(1.3);
}

/* ==========================================================================
   КНОПКИ
   ========================================================================== */
.btn-add-main {
    background: var(--ui-success) !important;
    color: var(--ui-bg-white) !important;
    border: 1px solid var(--ui-success-hover);
    height: 38px;
    padding: 0 16px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    transition: all 0.1s ease;
}

    .btn-add-main:hover {
        background: var(--ui-success-hover) !important;
        box-shadow: 0 2px 8px var(--ui-success-shadow) !important;
        color: var(--ui-bg-white) !important;
    }

    .btn-add-main:active,
    .btn-add-main.active {
        background-color: var(--ui-success-hover) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

/* ==========================================================================
   ПОПОВЕРЫ И ВСПЛЫВАЮЩИЕ СПИСКИ
   ========================================================================== */
/* --- КНОПКА ШЕСТЕРЕНКИ (Консоль настроек) --- */
/* --- КНОПКА ШЕСТЕРЕНКИ (Светлая тактическая консоль) --- */
.btn-tactical-settings {
    position: relative; /* Обязательно: привязка уголка к кнопке */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    /* Светлый титан / Шлифованная сталь */
    background: linear-gradient(to bottom, #f4f6f8, #d2d7df);
    border: 2px solid #a2b0be !important;
    border-radius: 4px !important;
    /* Контрастный темный металл для иконки */
    color: #475569 !important;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* Состояние HOVER (Запуск цепи / Янтарное наведение) */
    .btn-tactical-settings:hover {
        /* Эффект полированного подсвеченного металла */
        background: linear-gradient(to bottom, #ffffff, #e1e5eb);
        border-color: #bea2a2 !important;
        color: #bea2a2 !important; /* Иконка загорается предупреждающим оранжевым */
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18), 0 0 6px rgba(255, 159, 10, 0.2);
    }

    /* Состояние ACTIVE (Система запущена / Индикатор ОК) */
    .btn-tactical-settings.active {
        /* Приятный, чистый милитари-зеленый (Status: Operational) */
        background: linear-gradient(to bottom, #e2f0d9, #c5dfb5) !important;
        border-color: #70ad47 !important;
        color: #385723 !important; /* Глубокий зеленый для иконки шестеренки */
        box-shadow: 0 2px 4px rgba(112, 173, 113, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
/* =========================================
   1. ВЕРХНИЙ ЛЕВЫЙ УГОЛОК (Прицел)
   ========================================= */
    .btn-tactical-settings::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 6px;
        height: 6px;
        border-top: 2px solid #a2b0be;
        border-left: 2px solid #a2b0be;
        pointer-events: none;
        transition: all 0.2s ease;
    }

/* =========================================
   2. НИЖНИЙ ПРАВЫЙ УГОЛОК (Прицел)
   ========================================= */
    .btn-tactical-settings::after {
        content: '';
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 6px;
        height: 6px;
        border-bottom: 2px solid #a2b0be;
        border-right: 2px solid #a2b0be;
        pointer-events: none;
        transition: all 0.2s ease;
    }

/* =========================================
   3. Эффект при наведении (Захват цели)
   ========================================= */
    .btn-tactical-settings:hover::before {
        border-color: #bea2a2;
    }

    .btn-tactical-settings:hover::after {
        border-color: #bea2a2;
    }

/* --- ВЫПАДАЮЩИЙ ТАКТИЧЕСКИЙ ПЛАНШЕТ --- */
.tactical-popover {
    background: #1a2229 !important; /* Стальной темный фон корпуса */
    border: 2px solid #384857 !important;
    border-radius: 6px !important;
    padding: 2px !important;
    min-width: 210px;
    margin-top: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
    position:absolute;
    z-index: 1050;
}

/* Заголовок выпадающего меню */
.tactical-popover-header {
    padding: 8px 12px;
    background: #13191f;
    border-bottom: 2px dashed #2a3540;
    color: #8fa3b5;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    font-size: 11px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    align-items: center;
}


/* --- СТРОКИ С СЕРВИСАМИ --- */
.tactical-popover-body {
    padding: 4px;
}

.tactical-popover-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

    /* Подсветка строки при наведении */
    .tactical-popover-item:hover {
        background-color: #242f3a;
    }


/* --- МИКРО-ЧЕКБОКС (LED-Индикатор) --- */
.tactical-checkbox-mini {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #3f4e5a;
    background: #12181d; /* Потушенный диод */
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    transition: all 0.2s ease;
}

    /* Ховер на индикатор */
    .tactical-checkbox-mini:hover {
        border-color: #5d758c;
    }

    /* Когда тумблер ВКЛ (диод загорается зеленым) */
    .tactical-checkbox-mini:checked {
        background: #2e4d34;
        border-color: #487551;
        box-shadow: 0 0 6px rgba(46, 77, 52, 0.6);
    }

        /* Внутренний кристалл светодиода при активации */
        .tactical-checkbox-mini:checked::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 6px;
            height: 6px;
            background-color: #7ce691; /* Яркая точка внутри */
            border-radius: 1px;
            box-shadow: 0 0 4px #7ce691;
        }


/* --- ИКОНКИ И ТЕКСТ ВНУТРИ СПИСКА --- */
.tactical-label-mini {
    color: #8fa3b5; /* Тусклый стальной по умолчанию */
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 12px;
    cursor: pointer;
    transition: color 0.15s ease;
}

    /* Иконки выравниваем по центру */
    .tactical-label-mini i {
        width: 20px;
        text-align: center;
        margin-right: 8px;
        color: #4c5d6e; /* Тусклый цвет иконки */
        font-size: 14px;
        transition: color 0.15s ease;
    }

/* Эффекты при наведении на строку */
.tactical-popover-item:hover .tactical-label-mini {
    color: #ffffff;
}

    .tactical-popover-item:hover .tactical-label-mini i {
        color: #8fa3b5;
    }

/* Когда услуга активна — подсвечиваем текст и иконку мягким зеленым */
.tactical-checkbox-mini:checked + .tactical-label-mini {
    color: #ffffff;
}

    .tactical-checkbox-mini:checked + .tactical-label-mini i {
        color: #7ce691; /* Иконка загорается в тон активного светодиода */
    }



.form-control-xs {
    height: 28px;
    padding: 2px 5px;
    font-size: 0.8rem;
    border: 1px solid var(--ui-border-dark);
    border-radius: 4px;
    background-color: var(--ui-bg-white);
    font-weight: 600;
}



/* =========================================================================
   2. СИГНАЛЬНЫЙ ТРАНСПАРАНТ (.modern-alert — Аварийное табло)
   ========================================================================= */
.modern-alert {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px !important;
    background: #180608 !important; /* Сверхглубокий угольно-бордовый */
    /* Массивный защитный кожух */
    border: 3px solid #3f1012 !important;
    border-radius: 2px !important; /* Почти острые углы промышленного оборудования */
    /* Левый маркер превращаем в полноценную тактическую «зебру» (Hazard Stripes) */
    border-left: 12px solid transparent !important;
    border-image: repeating-linear-gradient(-45deg, #ff3333, #ff3333 4px, #180608 4px, #180608 8px) 10 !important;
    /* Жесткая тень «внутреннего взрыва» + внешнее зловещее мерцание */
    box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.3), 0 4px 20px rgba(255, 51, 51, 0.2) !important;
}

    /* СВЕТОДИОДНАЯ ЛАМПА (.alert-icon) */
    .modern-alert .alert-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff3333 !important;
        font-size: 16px;
        /* Имитация выпуклой стеклянной линзы */
        background: rgba(255, 51, 51, 0.1);
        padding: 4px;
        border-radius: 50%;
        box-shadow: 0 0 8px #ff3333;
        animation: militaryStrobe 1s infinite steps(2); /* Резкое армейское стробирование вместо мягкой пульсации */
    }

    /* ТЕКСТ ДОКЛАДА (.alert-content) */
    .modern-alert .alert-content {
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #ff9999 !important;
        /* Эффект старого светящегося люминофора */
        text-shadow: 0 0 4px rgba(255, 51, 51, 0.6);
    }


/* =========================================================================
   4. СИСТЕМНЫЕ АНИМАЦИИ
   ========================================================================= */
.fade-in-slide {
    animation: radarScanIn 0.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes radarScanIn {
    0% {
        transform: scaleY(0) translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: scaleY(1) translateY(0);
        opacity: 1;
    }
}

/* Стробоскоп для аварийной лампы (вкл/выкл без сглаживания — как на реле) */
@keyframes militaryStrobe {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 6px #ff3333);
    }

    50% {
        opacity: 0.3;
        filter: none;
    }
}



/* =========================================
   1. КОРРЕКЦИЯ ТАБЛИЧНОЙ СТРОКИ ВАЛИДАЦИИ
   ========================================= */
/* Полностью убираем дефолтные рамки и фоны ячейки таблицы, 
   чтобы наш приборный блок не конфликтовал с линиями строк */
tr.fade-in td[colspan="10"] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Настраиваем отступы контейнера внутри таблицы */
.validation-container.mt-3 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}


/* =========================================
   1. ПРИБОРНАЯ ПАНЕЛЬ ТРЕВОГИ (Hazard Military)
   ========================================= */
.validation-container .alert-warning {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    background: linear-gradient(178deg, #3d4955 0%, #22313f 100%) !important;
    border: 1px solid #543a1f !important;
    /* Сигнальные полосы (Hazard Stripes) на левой границе */
    border-left: 8px solid transparent !important;
    border-image: repeating-linear-gradient( -45deg, #f4aa3c, #f4aa3c 5px, #22313f 5px, #22313f 10px ) 8 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(244, 170, 60, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

    /* =========================================
   2. ИКОНКА ПРЕДУПРЕЖДЕНИЯ (Диодный маяк)
   ========================================= */
    .validation-container .alert-warning .alert-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background: rgba(244, 170, 60, 0.1);
        border: 1px solid rgba(244, 170, 60, 0.3);
        border-radius: 50%;
        color: #f4aa3c !important;
        font-size: 12px;
        margin-right: 12px !important;
        flex-shrink: 0;
        animation: warningPulse 1.8s infinite ease-in-out;
    }

    /* =========================================
   3. ТЕКСТ ДОКЛАДА (Контрастный текст)
   ========================================= */
    .validation-container .alert-warning .alert-content.text-black,
    .validation-container .alert-warning .alert-content {
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: #fbe3b5 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        line-height: 1.3;
    }

/* =========================================
   4. АНИМАЦИЯ ПУЛЬСАЦИИ
   ========================================= */
@keyframes warningPulse {
    0%, 100% {
        box-shadow: 0 0 4px rgba(244, 170, 60, 0.4);
        filter: drop-shadow(0 0 2px rgba(244, 170, 60, 0.6));
    }

    50% {
        box-shadow: 0 0 12px rgba(244, 170, 60, 0.8);
        filter: drop-shadow(0 0 8px rgba(244, 170, 60, 0.9));
    }
}



/* =========================================================================
   ТАКТИЧЕСКИЙ СЕЛЕКТ (Dropdown / Переключатель режимов — Авиационный Алюминий)
   ========================================================================= */
select.form-select-sm {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Принудительно заставляем браузер использовать светлую системную схему */
    color-scheme: light !important;
    /* Твой фирменный металлический градиент и стальная стрелка */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 6 6 6 6-6'/%3e%3c/svg%3e"), linear-gradient(to bottom, #f4f6f8, #d2d7df) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 0.55rem center, center !important;
    background-size: 10px 10px, 100% 100% !important;
    /* Рамка под цвет тактических кнопок */
    border: 2px solid #a2b0be !important;
    border-radius: 4px !important;
    padding: 0.25rem 1.6rem 0.25rem 0.6rem !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Все статусы пишем капсом */
    color: #475569 !important; /* Серый оружейный */
    /* Внутренняя тень объема и легкая внешняя тень */
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(15, 23, 42, 0.1) !important;
    cursor: pointer;
    transition: all 0.12s ease-in-out !important;
}

    /* Состояние наведения (Шеврон и рамка мягкие голубые) */
    select.form-select-sm:hover:not(:disabled) {
        border-color: #769fbd !important;
        color: #5187b5 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235187b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 6 6 6 6-6'/%3e%3c/svg%3e"), linear-gradient(to bottom, #ffffff, #edf2f7) !important;
        box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgb(10 131 255 / 15%) !important;
    }

    /* Фокус / Выбор значения (Акцентный голубой) */
    select.form-select-sm:focus {
        outline: none !important;
        border-color: #769fbd !important;
        color: #5187b5 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230a83ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 6 6 6 6-6'/%3e%3c/svg%3e"), linear-gradient(to bottom, #ffffff, #edf2f7) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 8px rgba(10, 131, 255, 0.45) !important;
    }

    /* Опции выпадающего списка (светлый тактический блокнот) */
    select.form-select-sm option {
        background-color: #f1f5f9 !important; /* Светло-серый тактический пластик */
        color: #475569 !important; /* Оружейный серый */
        padding: 6px 12px !important;
        font-size: 11px !important;
        font-weight: 700;
    }

    /* Заблокированное состояние (Прибор обесточен) */
    select.form-select-sm:disabled {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
        border-color: #cbd5e1 !important;
        color: #94a3b8 !important;
        /* Затухшая серая стрелка и плоский фон */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 6 6 6 6-6'/%3e%3c/svg%3e"), linear-gradient(to bottom, #e2e8f0, #cbd5e1) !important;
        box-shadow: none !important;
    }