/*
 * Боковое меню: выделение текущего пункта.
 *
 * Текущий пункт отличался от соседей только цветом текста — #248afd у верхнего
 * уровня, #667895 у подпунктов — и на списке из двадцати строк эту разницу глаз
 * не ловил. Добавляем подложку и полосу слева.
 *
 * Значения одни на обе темы: боковая панель тёмная и в светлой теме, так что
 * подсветка на ней работает одинаково. Тёмная тема берёт эти же переменные.
 */
:root {
    --nav-active-ink: #6cb2ff;
    --nav-active-bg: rgba(108, 178, 255, .10);
}

/*
 * Разметка меню двух видов: у раздела с подпунктами класс `active` стоит на
 * <li>, у самостоятельной страницы — сразу на ссылке. Ловим оба.
 *
 * Селекторы с `.sidebar-dark`: правила темы объявлены именно так, и без этого
 * класса вес не добирает — подложка и цвет не применялись бы.
 */
.sidebar-dark .sidebar .nav .nav-link.active,
.sidebar .nav .nav-link.active,
.sidebar-dark .sidebar .nav .nav-item.active > .nav-link,
.sidebar-dark .sidebar .nav .nav-item.active > * > .nav-link,
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item.active > * > .nav-link {
    background: var(--nav-active-bg);
    box-shadow: inset 3px 0 0 var(--nav-active-ink);
}

.sidebar-dark .sidebar .nav .nav-link.active i,
.sidebar-dark .sidebar .nav .nav-link.active .menu-title,
.sidebar .nav .nav-link.active i,
.sidebar .nav .nav-link.active .menu-title,
.sidebar-dark .sidebar .nav .nav-item.active > .nav-link i,
.sidebar-dark .sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar-dark .sidebar .nav .nav-item.active > * > .nav-link i,
.sidebar-dark .sidebar .nav .nav-item.active > * > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link .menu-title {
    color: var(--nav-active-ink);
}

.sidebar-dark .sidebar .nav.sub-menu .nav-item .nav-link.active,
.sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: var(--nav-active-ink);
    background: var(--nav-active-bg);
    box-shadow: inset 3px 0 0 var(--nav-active-ink);
    font-weight: 600;
}

/* Точка-маркер перед активным подпунктом красится вместе с ним. */
.sidebar .nav.sub-menu .nav-item:has(> .nav-link.active)::before {
    background: var(--nav-active-ink);
}

/* В свёрнутом меню строки нет — полоса легла бы поперёк иконки. */
.sidebar-icon-only .sidebar .nav .nav-item.active > .nav-link,
.sidebar-icon-only .sidebar .nav .nav-item.active > * > .nav-link,
.sidebar-icon-only .sidebar .nav .nav-link.active {
    box-shadow: none;
}

/*
 * Свёрнутое меню (одни значки): раскрытый по наведению раздел.
 *
 * Тема рассчитана на два уровня: правила раскрытого пункта
 * (.nav-item.hover-open .nav-link .menu-title, ... .collapse) написаны через
 * потомков и цепляли подпункты тоже - название каждого становилось отдельной
 * плавающей плашкой справа от значка, счётчики прятались, а вложенный раздел
 * («Аналитика» в «Панели администратора») всегда висел раскрытым поверх
 * соседних пунктов. Плюс hoverable-collapse.js ставил hover-open и на
 * подпункты. Открытие и закрытие - с задержкой (hoverable-collapse.js), чтобы
 * путь к подпункту по диагонали не открывал соседний раздел.
 *
 * Внутри раскрытого раздела подпункты - обычный список: значок, название,
 * счётчик, стрелка у вложенного раздела. Вложенный раздел раскрывается по
 * щелчку, как в развёрнутом меню; текущий уже раскрыт сервером. Панель шире
 * темы (190 px): длинные названия переносились на три строки.
 *
 * html body. - чтобы перебить и правила темы, и тёмной темы (theme-dark.css).
 */
@media (min-width: 992px) {
    /* Вплотную к значку: тема ставила панель на 70 px от края пункта, а пункт
       уже колонки - между значком и панелью оставалось 13 px пустоты. Курсор,
       шедший к подпункту, пересекал её вне пункта, и раздел закрывался. */
    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .nav-link .menu-title,
    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .accordion-heading > .nav-link .menu-title,
    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .accordion-heading > .collapse,
    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .accordion-heading > .collapsing {
        left: 100%;
        width: 250px;
    }

    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .accordion-heading > .collapse {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }

    /* Тень - тёмная. Тема даёт светло-серую (rgba(182, 185, 189, .25)) под
       светлое меню, а боковая панель у нас тёмная в обеих темах, и тень
       выглядела белёсым свечением вокруг заголовка и панели. Панель - на одном
       слое с заголовком (z-index темы у заголовка - 1), чтобы его тень не
       ложилась полосой на верх панели. */
    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .nav-link .menu-title,
    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .accordion-heading > .nav-link .menu-title {
        box-shadow: 6px 0 16px -4px rgba(0, 0, 0, .45);
    }

    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .accordion-heading > .collapse,
    html body.sidebar-icon-only .sidebar > .nav > .nav-item.hover-open > .accordion-heading > .collapsing {
        z-index: 1;
        box-shadow: 6px 8px 18px -4px rgba(0, 0, 0, .45);
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu {
        padding: .25rem 0;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-item::before {
        display: none;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-link {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .5rem 1rem;
        text-align: left;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-link i.menu-icon {
        flex: 0 0 auto;
        width: 1.1rem;
        margin: 0;
        text-align: center;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-link .menu-title {
        display: block;
        flex: 1 1 auto;
        position: static;
        width: auto;
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        line-height: 1.35;
        /* Цвет - от ссылки, как в развёрнутом меню: тема красит названия
           раскрытого раздела белым (вес 0,8,0) и гасит подсветку текущего. */
        color: inherit;
        white-space: normal;
    }

    /* Наведение - лёгкая подложка на всю строку. Правило темы для наведения
       (.nav-link:hover .menu-title, с :hover оно сильнее) возвращало названию
       фон плашки, и подсветка обрывалась перед стрелкой. */
    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-link:hover .menu-title {
        background: none;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-link:hover {
        background: rgba(255, 255, 255, .06);
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-link .badge {
        display: inline-block;
        margin-left: .4rem;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .nav-link i.menu-arrow {
        display: inline-block;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* Вложенный список внутри раскрытого раздела - обычным блоком в потоке,
       а не плавающей панелью темы; во время анимации (.collapsing) - тоже. */
    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .collapse,
    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .collapsing {
        position: static;
        width: auto;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .collapse {
        display: none;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .collapse.show,
    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .collapsing {
        display: block;
    }

    html body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .sub-menu .sub-menu {
        padding-left: 1.1rem;
    }
}

/*
 * Развёрнутое меню и выезжающая панель на узком экране.
 *
 * Подпункты: значок фиксированной ширины - иначе значки разной ширины сдвигали
 * текст, и названия начинались с разных отступов. Счётчик - отдельным
 * элементом строки справа (parts/sidebar_item.php): внутри названия он уезжал
 * на следующую строку.
 */
.sidebar .nav .nav-item .nav-link .nav-counter {
    flex: 0 0 auto;
    margin-left: .5rem;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    gap: .6rem;
}

.sidebar .nav.sub-menu .nav-item .nav-link i.menu-icon {
    flex: 0 0 1.1rem;
    width: 1.1rem;
    margin: 0;
    text-align: center;
}

.sidebar .nav.sub-menu .nav-item .nav-link .menu-title {
    flex: 1 1 auto;
    line-height: 1.3;
}

/* Раздел под курсором - лёгкая подложка, как строки раскрытого раздела.
   Тема рисовала светло-серую плашку (#59606b), тёмная тема перекрасила её
   только у пунктов без подпунктов. Текущий раздел подсвечен своим цветом -
   его не трогаем. */
html body.sidebar-dark .sidebar .nav:not(.sub-menu) > .nav-item:not(.active):hover > .nav-link,
html body.sidebar-dark .sidebar .nav:not(.sub-menu) > .nav-item:not(.active):hover > * > .nav-link {
    background: rgba(255, 255, 255, .06);
}

/* Зелёная полоса темы у вложенных разделов («Аналитика») ничего не значила и
   дублировала стрелку раскрытия. */
html body.sidebar-dark .sidebar .nav.sub-menu .nav-item.accordion-group::after {
    display: none;
}

/* На узком экране меню - выезжающая панель, а не свёрнутая колонка, даже если
   класс свёрнутого режима остался от широкого экрана (кука sphere_sidebar).
   Тёмная тема красит названия свёрнутого меню без границы по ширине экрана, и
   в панели за ними вставали тёмные прямоугольники. #sidebar - чтобы перебить
   те правила. */
@media (max-width: 991.98px) {
    html body.sidebar-icon-only #sidebar .nav .nav-item .nav-link .menu-title {
        background-color: transparent;
    }
}

/*
 * Подложка под выезжающим меню (off-canvas.js): касание мимо открытого меню
 * закрывает его и не попадает в то, что под подложкой. Граница - как у
 * выезжающей панели в теме (991px). Панель - выше подложки, подложка - ниже
 * шапки (1030): кнопка меню в шапке остаётся доступной. Слой 11 темы был ниже
 * липких шапок таблиц.
 */
.sidebar-backdrop { display: none; }

@media (max-width: 991px) {
    .sidebar-offcanvas { z-index: 1029; }

    .sidebar-backdrop {
        position: fixed;
        top: 70px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1028;
        background: rgba(10, 14, 20, .45);
    }

    body.sidebar-offcanvas-open .sidebar-backdrop { display: block; }
}

@media (max-width: 480px) {
    .sidebar-backdrop { top: 50px; }
}

/*
 * Блок логотипа в шапке: тема рисует под ним рамку (#4f5962 в светлой,
 * --d-line в тёмной), и над меню тянулась светлая полоса только на ширину
 * логотипа - справа шапка без рамки. Логотип и меню - одна тёмная колонка,
 * разделять их нечем. Цвет, а не толщина: высота шапки не меняется.
 * Специфичность - выше правила тёмной темы (html[data-theme] .navbar ...).
 */
html body.sidebar-dark .navbar .navbar-brand-wrapper { border-bottom-color: transparent; }

/*
 * Выпадающие меню шапки - профиль и язык (.head-menu). У темы это была
 * квадратная плашка цвета шапки без рамки: в тёмной теме она сливалась с
 * шапкой, на телефоне растягивалась во всю ширину и висела на 20 px ниже
 * шапки, у языка - наезжала на неё (margin-top: -18px), а текущий язык
 * заливался синим. Теперь - карточка под своим значком, со скруглением,
 * рамкой и тенью по теме; строки - с подсветкой при наведении, текущий язык
 * отмечен галочкой.
 *
 * Селекторы длинные нарочно: правило темы для меню языка - в семь классов.
 */
.navbar {
    --hm-bg: #fff;
    --hm-ink: #1f2933;
    --hm-muted: #6b7785;
    --hm-line: #e6e9ee;
    --hm-hover: #f2f4f7;
    --hm-accent: #007bff;
    --hm-active-bg: rgba(0, 123, 255, .1);
    --hm-danger: #d93025;
    --hm-shadow: 0 12px 28px -10px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08);
}

html[data-theme="dark"] .navbar {
    --hm-bg: var(--d-surface-2);
    --hm-ink: var(--d-ink);
    --hm-muted: var(--d-muted);
    --hm-line: var(--d-line-strong);
    --hm-hover: rgba(255, 255, 255, .06);
    --hm-accent: var(--d-accent);
    --hm-active-bg: rgba(77, 163, 255, .14);
    --hm-danger: #ff7b72;
    --hm-shadow: 0 14px 32px -8px rgba(0, 0, 0, .65);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu {
    top: 100%;
    right: 0;
    left: auto;
    width: auto;
    min-width: 11rem;
    max-width: calc(100vw - 16px);
    margin-top: 6px;
    padding: .4rem;
    background: var(--hm-bg);
    color: var(--hm-ink);
    border: 1px solid var(--hm-line);
    border-radius: 10px;
    box-shadow: var(--hm-shadow);
    font-size: .875rem;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu.show {
    animation: head-menu-in .12s ease-out;
}

@keyframes head-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu.show { animation: none; }
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu-profile {
    min-width: 15rem;
}

/* Кто вошёл - над пунктами меню профиля. */
html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-user {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .6rem .7rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--hm-line);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-who {
    min-width: 0;
    line-height: 1.3;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-name,
html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-email {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-name {
    font-weight: 600;
    color: var(--hm-ink);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-email {
    font-size: .78rem;
    color: var(--hm-muted);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    padding: .5rem .6rem;
    border-radius: 7px;
    background: transparent;
    color: var(--hm-ink);
    font-size: .875rem;
    line-height: 1.3;
    white-space: nowrap;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item i {
    flex: none;
    width: 1.1rem;
    margin: 0;
    font-size: 1rem;
    text-align: center;
    color: var(--hm-muted);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item .flag-icon {
    width: 1.35rem;
    font-size: .95rem;
    border-radius: 2px;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item:hover,
html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item:focus,
html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item:active {
    background: var(--hm-hover);
    color: var(--hm-ink);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item:focus-visible {
    outline: 2px solid var(--hm-accent);
    outline-offset: -2px;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item.active {
    background: var(--hm-active-bg);
    color: var(--hm-accent);
    font-weight: 500;
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item .head-menu-check {
    width: auto;
    margin-left: auto;
    font-size: .75rem;
    color: var(--hm-accent);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-logout:hover,
html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .head-menu-logout:hover i {
    color: var(--hm-danger);
}

html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-divider {
    margin: .35rem -.4rem;
    border-top-color: var(--hm-line);
}

/* На узком экране пункт меню в шапке статичен (тема), и карточка
   ставится от шапки: под ней, у правого края, а не во всю ширину. */
@media (max-width: 991px) {
    html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu {
        right: 8px;
    }
}

/* Палец - строки не ниже 44 px. */
@media (pointer: coarse) {
    html .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.head-menu .dropdown-item {
        min-height: 44px;
    }
}