.menu_item_active {
    color: #afafbe;
    pointer-events: none
}

.menu_list_item.active {
    /* color: var(--main-color);  Можно сделать текст желтым/салатовым */
    opacity: 1;
}

.menu_default_link {
    font-size: 20px;
    text-decoration: none
}

.menu_list .menu_dropdown__toggle.active {
    color: #afafbe;
    /* Здесь поставьте код вашего серого цвета */
}






/* Контейнер для прокрутки (если таблица не влезает в экран) */
.table-container {
    width: 80%;
    text-align: justify;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    /* Скругляем углы контейнера */
    background: #6685b2;
    overflow-x: auto;
}

/* Стили самой таблицы */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    overflow-x: auto;
}

/* Шапка таблицы */
.styled-table td tr {
    background-color: #4c6080;
    /* Приятный изумрудный цвет */
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    overflow-x: auto;
}

/* Заголовки столбцов */
.styled-table th,
.styled-table td {
    padding: 12px 15px;
    overflow-x: auto;
}

/* Закрепление шапки при прокрутке */
.styled-table td th {

    top: 0;
    background-color: #233c63;
    z-index: 1;
    overflow-x: auto;
}

/* Нижняя граница строк */
.styled-table tbody tr {
    border-bottom: 1px solid #a0a1a7;
    transition: all 0.2s ease;
}

/* Эффект "Зебра" (чередование цветов строк) */
.styled-table tbody tr:nth-of-type(even) {
    background-color: #4b6183;
    overflow-x: auto;
}

/* Последняя линия */
.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #516586;
    overflow-x: auto;
}

/* Подсветка строки при наведении */
.styled-table tbody tr:hover {
    background-color: #9bbaf3;
    /* Светло-бирюзовый */
    color: #232330;
    font-weight: 600;
    cursor: pointer;
    overflow-x: auto;
}

.shapka {
    background-color: #2c384b;
    /* Приятный изумрудный цвет */
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    overflow-x: auto;
}

/* =========================================
       АДАПТАЦИЯ ПОД ТЕЛЕФОН (Media Query)
       ========================================= */
@media (max-width: 768px) {

    /* 1. Скрываем шапку таблицы, она не влезет */

    /* 2. Превращаем строки и ячейки в блоки */
    .styled-table,
    .styled-table tbody,
    .styled-table tr,
    .styled-table td {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    /* 3. Оформляем каждую строку как отдельную карточку */
    .styled-table tr {
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #fff;
        /* Фон карточки */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        overflow-x: auto;
    }

    /* 4. Настройка ячеек внутри карточки */
    .styled-table td {
        text-align: right;
        /* Текст справа */
        padding-left: 50%;
        /* Место для заголовка слева */
        position: relative;
        border-bottom: 1px solid #eee;
        overflow-x: auto;
    }

    /* 5. Добавляем заголовки через CSS (магия data-label) */
    .styled-table td::before {
        content: attr(data-label);
        /* Берет текст из HTML атрибута */
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        overflow-x: auto;
        color: #233c63;
        /* Цвет заголовка в карточке */
    }
}