:root {
    --mobile-padding: 16px;
    --mobile-radius: 12px;
    --mobile-bar: 56px;
}

/* Планшеты и большие смартфоны */
@media only screen and (max-width: 1024px) {

    .th-grid {
        flex-direction: column;
    }

    .th__container {
        padding: var(--mobile-padding);
    }

    .main-content {
        padding: var(--mobile-padding);
        margin-bottom: 50px;
    }

    .filter-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .table-scroll-wrapper,
    .users-table__wrapper {
        white-space: nowrap;
    }

    .profile-section.active,
    .control-panel,
    .register-overlay {
        padding: var(--mobile-padding);
    }

    .form-group__container {
        display: flex;
        flex-flow: column nowrap;
        gap: 0;
    }

    .copy-btn span,
    .copy-btn-raw span,
    .user-card-arrow {
        display: none;
    }

    .kattella-panel__content {
        overflow-x: auto;
    }

}

/* Планшеты */
@media (max-width: 768px) {

    .profile-chart-wrapper {
        height: 280px;
    }

    .kattella-panel__table {
        display: block;
        overflow-x: auto;
    }

}

/* Телефон: нижнее меню */
@media (max-width: 576px) {

    #sidebar.sidebar,
    #sidebar.sidebar.active {
        position: fixed;
        z-index: 50;
        bottom: 0;
        width: 100%;
        border-top: 1px solid var(--vahta-border);
    }

    #sidebar .siderbar-menu {
        position: static;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        height: var(--mobile-bar);
        min-height: 0;
        margin: 0;
        padding: 0 8px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    #sidebar .brand,
    #sidebar #sidebar-toggle,
    #sidebar .slider-nav--text,
    #sidebar .slider-nav--badge,
    #sidebar .user-card__info,
    #sidebar .user-card-arrow,
    #sidebar .user__logout span {
        display: none;
    }

    #sidebar .sidebar-nav,
    #sidebar .sidebar-nav__list,
    #sidebar .sidebar-footer {
        display: contents;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #sidebar .sidebar-nav__list > li {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #sidebar .sidebar-nav__link,
    #sidebar .user-card,
    #sidebar .user__logout,
    #sidebar .sidebar-footer a,
    #sidebar .sidebar-footer button {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        width: 44px;
        max-width: 72px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 12px;
        color: var(--vahta-text-muted);
        background: transparent;
    }

    #sidebar .sidebar-nav__link svg,
    #sidebar .user-card svg,
    #sidebar .user__logout svg,
    #sidebar .sidebar-footer svg {
        width: 24px;
        height: 24px;
        margin: 0;
        flex: 0 0 24px;
    }

    #sidebar .sidebar-nav__link.active {
        color: var(--vahta-accent);
        background: var(--vahta-nav-selected);
    }

    #sidebar .user__logout,
    #sidebar .sidebar-footer a {
        color: var(--vahta-accent);
    }

    .search-input__field {
        width: 100%;
    }

}

/* Смартфоны */
@media (max-width: 480px) {

    .control-panel,
    .profile-section.active {
        padding: 12px;
    }

    .reflex-questions__add-form {
        padding: 0;
        border: none;
        border-radius: 0;
    }

    #tpp-psychomotor-body .tpp-sub-title {
        font-size: 13px;
    }

    .accordion__head,
    #tpp-psychomotor-body {
        white-space: normal;
        padding: var(--mobile-padding);
    }

    #tpp-psychomotor-body .tpp-row {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    #tpp-psychomotor-body .tpp-accordion-footer {
        justify-content: flex-start;
    }

    #tpp-psychomotor-body .tpp-input {
        padding: 6px 13px;
        font-size: 12px;
    }

    .reflex-question-item__content {
        flex-direction: column;
        align-items: flex-start;
    }

    #tpp-psychomotor-body .tpp-sub {
        padding: var(--mobile-padding);
    }

    .profile-chart-wrapper {
        height: 240px;
    }

    .reflex-question-item {
        align-items: flex-start;
    }

    .reflex-question-item__text {
        white-space: break-spaces;
    }

    .main {
        padding: var(--mobile-padding);
    }

}

/* Маленькие смартфоны */
@media (max-width: 375px) {

    .profile-chart-wrapper {
        height: 200px;
    }

}

/* Очень маленькие смартфоны */
@media (max-width: 320px) {

    :root {
        --mobile-padding: 12px;
    }

}