/**
 * Cодержит медиа-запросы CSS для адаптации элементов интерфейса на экранах
 * с максимальной шириной 1000px и 500px на странице "Детальные данные".
 */

/**
 * Стили для подробного суб-меню.
 * Отображает элементы в ряд, используя flexbox.
 */
.detailed-sub-menu {
    display: flex;
    /* Включение flex-контейнера */
    flex-direction: row;
    /* Расположение элементов в ряд */
}

/**
   * Стили для таблицы.
   * При переполнении по оси Х, включается прокрутка.
   */
.dash-spreadsheet-container {
    overflow-x: scroll !important;
}

.detailed-group-label {
    display: flex;
    align-items: center;
    width: 20%;
}

/**
   * Стили для переключателя.
   * Располагает элементы в ряд и выравнивает их по началу контейнера и концу элементов.
   */
.toggle-switch-style {
    display: flex;
    /* Включение flex-контейнера */
    flex-direction: row;
    /* Расположение элементов в ряд */
    justify-content: start;
    /* Выравнивание элементов по началу контейнера */
    align-items: end;
    /* Выравнивание элементов по нижнему краю */
    margin-left: 1.7rem;
    /* Левый отступ */
}

/**
   * Стили для кнопки переключателя.
   * Устанавливает отступы вокруг кнопки.
   */
#toggle-switch-button {
    margin: 0 .3rem 0 .3rem;
    /* Отступы вокруг кнопки */
}

/**
   * Медиа-запросы для экранов с максимальной шириной 1000px.
   * Адаптирует размер шрифта и масштаб элементов интерфейса.
   */
@media screen and (max-width: 1000px) {
    .page-header>h4 {
        font-size: 1.2rem;
        /* Размер шрифта заголовков */
    }

    .toggle-switch-style>div {
        font-size: 0.9rem;
        /* Размер шрифта переключателя */
    }

    #table-container {
        font-size: 0.6rem;
        /* Размер шрифта в таблице */
    }

    .toggle-switch-style > div:nth-child(1) {
        display: none;
    }

    .detailed-group-text {
        text-align: left; /* Align the text to the left */
    }

    .toggle-switch-style .col {
        display: flex;
        align-items: center;
    }

    .toggle-switch-style {
        justify-content: center;
    }
}

/**
   * Медиа-запросы для экранов с максимальной шириной 500px.
   * Скрывает определенные элементы и корректирует размер шрифта.
   */
@media screen and (max-width: 500px) {

    #view-button,
    #spis-view-button,
    #struct-view-button,
    #potreb2-view-button,
    #potreb-view-button,
    #table-container {
        display: none;
    }

    /* Скрытие кнопки просмотра и контейнера таблицы */

    .toggle-switch-style>div:nth-child(1),
    .toggle-switch-style>div:nth-child(3) {
        font-size: 11px !important;
    }

    /* Размер шрифта для подписей переключателя */

    .detailed-group-label {
        width: 100%;
    }
}