/* Логотип на светлом фоне — страница входа. В шапке меню фон синий и надпись там
   жёлтая; на белом она невидима, поэтому для входа берётся синий вариант той же
   надписи. Переменную объявляет модуль FinIQ.Brand.LeptonX, значение — наше. */
:root {
    --finiq-logo-on-light: url('/images/brand/service-zayavki-light.svg');
}

:root {
    --lpx-theme-light-bg: url('/LeptonX/images/login-pages/login-bg-img-light.svg');
    --lpx-theme-dim-bg: url('/LeptonX/images/login-pages/login-bg-img-dim.svg');
    --lpx-theme-dark-bg: url('/LeptonX/images/login-pages/login-bg-img-dark.svg');
}

/*
 * Меню на телефоне: последние пункты нельзя было ни увидеть, ни нажать.
 *
 * Тема задаёт контейнеру меню одновременно top, bottom и height — при таком наборе
 * bottom по правилам CSS игнорируется, и высоту определяет только height:
 * calc(100vh - 72px). А 100vh на телефоне считается от экрана с УБРАННОЙ адресной
 * строкой, то есть от большего, чем видно: низ списка уезжает за край экрана,
 * и прокрутка кончается там же, где кончается контейнер, — за пределами видимого.
 * Сверху последние 72 пикселя перекрывает сама нижняя панель.
 *
 * dvh считается от того, что видно сейчас, и пересчитывается вместе с адресной строкой.
 * Отступ снизу — под вырез и полосу жестов iOS.
 *
 * В браузере на компьютере, включая эмуляцию мобильной верстки, дефекта не видно:
 * там адресной строки нет и 100vh совпадает с видимой высотой. Проверяется только
 * на настоящем телефоне.
 */
.lpx-mobile-menu {
    height: calc(100dvh - 72px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * Телефон в альбомной ориентации: от экрана оставалась треть.
 *
 * Тема знает только про ширину — мобильный режим включается по max-width: 767px, —
 * и задаёт нижней панели 72 пикселя на всю ширину независимо от того, сколько высоты
 * вообще есть. В портрете это 8% экрана, в альбомной — пятая часть, и вместе
 * с адресной строкой браузера на содержимое остаётся треть.
 *
 * Поэтому на низком экране панель перестаёт быть полосой: остаётся одна кнопка —
 * гамбургер, — а всё, что было отдельными вкладками, открывается внутри неё.
 *
 * Так можно только потому, что вкладки и панели меню — разные вещи. Меню темы держит
 * три независимых списка (data-lpx-mobile-menu="routes | settings | user"), и её скрипт
 * показывает тот, чью вкладку нажали, пряча остальные классом d-none. Спрятать вкладки
 * и не тронуть списки означало бы отнять выход из системы: «Выйти» живёт только
 * в списке user и открывался только аватаром. Поэтому здесь же снимается и скрытие
 * списков — на низком экране открытое меню показывает их подряд, одним свитком.
 *
 * Список user раскрывается ТОЛЬКО там, где у него есть своя вкладка, то есть у вошедшего.
 * Тема отрисовывает его разметку и анониму, но пункты в нём — «Мой счёт», «Сессии»,
 * «Выйти» — ему не годятся. Отсюда :has() по вкладке: условие проверяет ровно то,
 * от чего зависит правильность, а не косвенный признак вроде класса на body.
 * Анониму «Войти» приходит вместе со списком разделов — это наш пункт главного меню
 * (FinIQMenus.Login), а не вкладка темы.
 *
 * Высота считается в dvh, а не vh, по той же причине, что и у меню выше: 100vh
 * на телефоне больше видимого.
 *
 * Порог 480px берётся по высоте, а не по ориентации: планшет в альбомной шире 767px,
 * и мобильного режима там нет вовсе. Портрет телефона не ниже 568px даже у самых
 * мелких, поэтому правило туда не протекает.
 *
 * Проверяется только на настоящем телефоне: раскладки в разметке нет, тесты страниц
 * видят те же 200 и тот же HTML.
 */
@media only screen and (max-width: 767px) and (max-height: 480px) {
    /* Полосы внизу больше нет — содержимое занимает всю высоту. */
    .lpx-content-container {
        bottom: 0;
        height: 100dvh;
    }

    /* Последняя строка не должна прятаться под плавающей кнопкой. */
    .lpx-content-container .lpx-content {
        padding-bottom: 64px;
    }

    .lpx-mobile-menu {
        bottom: 0;
        height: 100dvh;
    }

    /* Панель из полосы во всю ширину становится кнопкой в углу. */
    .lpx-mobile-navbar {
        left: auto;
        right: env(safe-area-inset-right, 0px);
        bottom: env(safe-area-inset-bottom, 0px);
        width: auto;
        min-width: 0;
        height: auto;
        margin: 0 8px 8px 0;
        border-radius: var(--lpx-radius, 12px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
        opacity: .95;
    }

    .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab {
        display: none;
    }

    .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab:has(.lpx-mobile-hamburger) {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        margin: 0;
        padding: 10px 14px;
    }

    .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab .mobile-item-text {
        display: none;
    }

    /* Отступы иконок рассчитаны на кнопку высотой 72px вместе с подписью. */
    .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab .menu-item-icon {
        margin: 0;
    }

    /* Полоска-индикатор рисуется по низу кнопки шириной 40px — на сжатой кнопке
       она вылезает за её края. */
    .lpx-mobile-nav-tab-container .lpx-mobile-nav-tabs .lpx-mobile-nav-tab a:after {
        display: none;
    }

    /* Открытое меню показывает все списки подряд, а не тот, чью вкладку нажали:
       вкладок больше нет. d-none у темы объявлен с !important, поэтому и здесь он. */
    .lpx-mobile-navbar-container .lpx-mobile-menu [data-lpx-mobile-menu="routes"],
    .lpx-mobile-navbar-container .lpx-mobile-menu [data-lpx-mobile-menu="settings"] {
        display: block !important;
    }

    .lpx-mobile-navbar-container:has([data-lpx-mobile-menu-toggle="user"]) .lpx-mobile-menu [data-lpx-mobile-menu="user"] {
        display: block !important;
    }

    /* Границей списки отделяются друг от друга — иначе разделы, оформление и учётная
       запись читаются одним слитным перечнем. */
    .lpx-mobile-navbar-container .lpx-mobile-menu [data-lpx-mobile-menu] + [data-lpx-mobile-menu] {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(var(--lpx-navbar-text-color-rgb), .15);
    }
}