/* Мобильная версия (до 576px): своя верхняя полоса, нижний таб-бар и выезжающее меню
   (LayoutHorizontal/MenuMobile/MobileNavbar). Десктопная шапка тут скрыта (02-shell.css). */

.mobile-navbar-menu .sd-seg {
    background: var(--sd-surface);
}

#mobile-navbar-menu .side-nav .mm-active > a,
#mobile-navbar-menu .side-nav a.active {
    color: var(--sd-primary) !important;
}

@media (max-width: 575.98px) {
    /* заголовок страницы на мобиле показывает mobile-title, второй — лишний */
    .layout-horizontal .page-title-box {
        display: none;
    }

    .layout-horizontal .content-page {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .mobile-topbar-container {
        margin-bottom: 0 !important;
    }

    /* строка «Всего записей + пагинация» поиска Yoda не влезала в 375px и уезжала влево */
    .layout-horizontal .text-right.text-nowrap {
        white-space: normal !important;
    }

    .layout-horizontal .text-right.text-nowrap .pagination {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .mobile-topbar {
        height: 52px !important;
        background: var(--sd-surface) !important;
        border-bottom: 1px solid var(--sd-hair) !important;
    }

    .mobile-topbar-logo {
        height: 26px;
    }

    .btn-go-back,
    .btn-go-qoldau {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: var(--sd-r);
        color: var(--sd-ink-2) !important;
        transition: background var(--sd-t) ease, transform .08s ease;
    }

    .btn-go-back { left: 6px; }
    .btn-go-qoldau { right: 6px; }

    .btn-go-back:active,
    .btn-go-qoldau:active {
        background: var(--sd-muted-bg);
        transform: scale(.94);
    }

    .mobile-topbar-container .page-title {
        margin: 16px 12px 14px !important;
        color: var(--sd-ink);
        font: 700 22px/28px var(--sd-font);
        letter-spacing: -.015em;
    }

    /* нижний таб-бар */
    .mobile-navbar {
        height: calc(60px + env(safe-area-inset-bottom)) !important;
        padding: 6px 6px env(safe-area-inset-bottom) !important;
        border-top: 1px solid var(--sd-hair) !important;
        background: rgba(255, 255, 255, .94) !important;
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
    }

    .mobile-navbar a {
        gap: 2px;
        color: var(--sd-ink-3) !important;
        font-weight: 600;
        line-height: 1;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--sd-t) ease, transform .08s ease;
    }

    .mobile-navbar a i {
        font-size: 22px !important;
        line-height: 26px;
    }

    .mobile-navbar a p {
        margin: 0;
        font-size: 10.5px !important;
        line-height: 13px;
        text-align: center;
    }

    .mobile-navbar a.active {
        color: var(--sd-primary) !important;
    }

    .mobile-navbar a:active {
        transform: scale(.94);
    }

    /* выезжающее меню */
    .mobile-navbar-menu {
        height: calc(100% - 60px - env(safe-area-inset-bottom)) !important;
        background: var(--sd-bg) !important;
        overscroll-behavior: contain;
    }

    .mobile-navbar-menu[style*="display: block"] {
        animation: sd-sheet-in .22s var(--sd-ease);
    }

    .mobile-navbar-menu .card-shadow {
        box-shadow: var(--sd-shadow) !important;
    }

    .mobile-navbar-menu .side-nav .side-nav-link {
        color: var(--sd-ink) !important;
        font: 600 15px/22px var(--sd-font);
    }

    .mobile-navbar-menu .side-nav .side-nav-second-level li a,
    .mobile-navbar-menu .side-nav .side-nav-third-level li a {
        color: var(--sd-ink-2) !important;
        font: 500 14.5px/20px var(--sd-font);
    }

    .mobile-navbar-menu .metismenu ul {
        border-radius: var(--sd-r);
        background: rgba(0, 40, 70, .04) !important;
    }
}

@keyframes sd-sheet-in {
    from { opacity: 0; transform: translateY(8px); }
}