/*
 * Назначение: стили верхнего (горизонтального) меню — замена бокового меню.
 * Что делает: прячет сайдбар и гамбургер, обнуляет левый отступ контента,
 *   капит ширину сайта (1600px, симметрично), оформляет sticky-navbar с
 *   подсветкой активного раздела, анимированными дропдаунами, 2-колоночными
 *   мега-меню и flyout третьего уровня.
 * Как использовать: подключается через AppAsset при body.top-nav-mode (layout main.php).
 * Зависимости: AdminLTE / Bootstrap 3.
 */

/* Переменные темы (совпадают со skin-blue AdminLTE). */
.top-nav-mode {
    --tn-accent:      #3c8dbc;  /* фирменный синий AdminLTE */
    --tn-accent-dark: #367fa9;
    --tn-text:        #444;
    --tn-hover-bg:    #f6f7f9;
    --tn-border:      #e4e7ea;
    --tn-max-width:   1600px;
    /* Высота липкой полосы .top-nav-bar (измерено: 43.1875px) — единый источник для
     * всех, кто должен «нырять» под неё при скролле: .pc-topbar (product-card.css) и
     * шапка грида склада (stock-documents.css). НАРОЧНО занижено (не округлено вверх до
     * 44/45px): у .top-nav-bar фона на самом <thead>/<nav> нет, только на ячейках/детях,
     * поэтому округление В БОЛЬШУЮ сторону оставляло долю пикселя прозрачного зазора
     * между низом меню и верхом шапки/топбара — через него на скролле «просвечивал»
     * контент таблицы (баг 2026-07-24). Занижение вместо этого даёт лёгкий заход
     * шапки/топбара ПОД меню — не зазор, а нахлёст, который прячет z-index меню (1030,
     * выше и .pc-topbar 1020, и thead 4). Небольшой запас (не впритык к 43.1875) —
     * страховка от чуть иной высоты меню на реальном шрифте/DPI пользователя. */
    --tn-bar-h:       42px;
}

/* --- Прячем боковое меню и убираем левый отступ контента --- */
.top-nav-mode .main-sidebar,
.top-nav-mode .left-side {
    display: none !important;
}
.top-nav-mode .content-wrapper,
.top-nav-mode .right-side,
.top-nav-mode .main-footer {
    margin-left: 0 !important;
}
/* В верхней ориентации сворачивать нечего — прячем «три полоски» */
.top-nav-mode .sidebar-toggle {
    display: none !important;
}

/* --- Глобальный кап ширины сайта + симметричные отступы слева/справа ---
 * Тот же предел, что у карточки товара (.product-update, 1600px), но здесь
 * центрируем (margin auto с обеих сторон) — сайдбара нет, провала слева не будет. */
.top-nav-mode .top-nav-inner,
.top-nav-mode .content-header,
.top-nav-mode .content {
    max-width: var(--tn-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Широкие страницы (body.content-full-width) — контент на всю ширину без капа.
 * Меню и шапка остаются капнутыми по центру. */
.top-nav-mode.content-full-width .content,
.top-nav-mode.content-full-width .content-header {
    max-width: none;
}

/* Синяя шапка (лого + поиск + кабинет/выход): полоса во всю ширину, но её
 * содержимое прижато к тем же 1600px по центру — логотип встаёт вровень с
 * меню слева, кабинет/выход — у правого края контента. Симметричные боковые
 * поля создаём паддингом; фон делаем сплошным синим, чтобы поля не «просвечивали».
 * На узких экранах (<1600) паддинг = 0 (max(0px, …)) — раскладка не ломается. */
.top-nav-mode .main-header {
    background-color: var(--tn-accent);
    padding-left: max(0px, calc((100% - var(--tn-max-width)) / 2));
    padding-right: max(0px, calc((100% - var(--tn-max-width)) / 2));
}
/* Логотип ужат до ширины текста «TMS» + небольшие боковые отступы (был фикс. блок
 * 230px под бывший сайдбар). Навбар сдвигаем ровно на новую ширину логотипа,
 * чтобы поиск встал сразу за ним без зазора и без наезда. */
.top-nav-mode .main-header .logo {
    width: 92px;
    min-width: 92px;
    padding: 0;
}
.top-nav-mode .main-header .navbar {
    margin-left: 92px;
}

/* --- Липкая полоса основного меню (без под-панели раздела и без поиска) ---
 * Решение Кирилла 2026-07-24: липнет только строка разделов (.top-nav-bar);
 * .subnav-bar (под-панель раздела) и .main-header (лого/поиск/кабинет) —
 * обычный поток, уезжают со скроллом.
 *
 * Диагноз (как в product-card.css/.pc-topbar и stock-documents.css/thead):
 * AdminLTE вешает на body/.wrapper height:auto (JS) + overflow-y:auto (CSS) —
 * это делает их формальным scroll-контейнером для position:sticky, который
 * сам никогда не скроллится (скроллится window) → sticky-потомок «улетает»
 * вместе со страницей (это и произошло в первой попытке того же дня).
 * ФИКС — глобальный (не :has()-гейт конкретной страницы, как у карточки/склада):
 * меню есть на КАЖДОЙ странице, поэтому снимаем overflow-перехват с body/.wrapper
 * унифицированно, при этом body:has(.product-update)/.wrapper:has(.stock-index)
 * гейты в product-card.css/stock-documents.css стали избыточны для body/.wrapper
 * (но НЕ для .content-wrapper/.content — те остаются page-local, см. там же).
 * ПОБОЧНЫЙ ЭФФЕКТ (осознанно принят 2026-07-24): overflow — это ОБА измерения
 * сразу (по спеке CSS overflow-x:hidden + overflow-y:visible откатывается
 * браузером обратно в overflow-y:auto) → снимается и overflow-x:hidden с body/
 * .wrapper. Если у какой-то страницы контент шире вьюпорта — вместо невидимого
 * обрезания появится горизонтальный скролл СТРАНИЦЫ (а не «залипание» вёрстки). */
.top-nav-mode,
.top-nav-mode .wrapper {
    overflow: visible;
}

/* Поповеры страницы (bootstrap-datepicker, Select2/kartik) должны быть ПОВЕРХ
 * липкого меню (z 1030) и его дропдаунов (z 1051). У datepicker z-index
 * вычисляется низким и ставится инлайн — перебиваем !important; Select2 по
 * умолчанию 1051, поднимаем для запаса. */
.top-nav-mode .datepicker,
.top-nav-mode .datepicker-dropdown {
    z-index: 1100 !important;
}
.top-nav-mode .select2-container--open,
.top-nav-mode .select2-dropdown {
    z-index: 1100;
}

/* --- Полоса верхнего меню под шапкой (липкая, см. диагноз выше) --- */
.top-nav-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;            /* над контентом, под поповерами (см. выше) */
    margin: 0;
    min-height: 0;
    border: none;
    border-bottom: 1px solid var(--tn-border);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.top-nav-inner {
    padding: 0;              /* левый край пунктов выровнен с контентом (отступ даёт padding ссылки) */
}
.top-nav-menu {
    float: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

/* --- Пункты верхнего уровня --- */
.top-nav-menu > li > a {
    position: relative;
    padding: 13px 12px;
    color: var(--tn-text);
    font-size: 13.5px;
    line-height: 1.2;
    white-space: nowrap;
    background: transparent;
    transition: color .15s ease, background-color .15s ease;
}
.top-nav-menu > li > a > i {
    margin-right: 5px;
    color: #9aa4ac;
    transition: color .15s ease;
}
.top-nav-menu > li > a .caret {
    margin-left: 4px;
    opacity: .6;
}
.top-nav-menu > li > a:hover,
.top-nav-menu > li > a:focus,
.top-nav-menu > li.open > a {
    background: var(--tn-hover-bg);
    color: var(--tn-accent-dark);
}
.top-nav-menu > li > a:hover > i,
.top-nav-menu > li.open > a > i {
    color: var(--tn-accent);
}

/* Активный раздел — цвет + акцентная линия снизу (без сдвига разметки) */
.top-nav-menu > li.active > a {
    color: var(--tn-accent-dark);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--tn-accent);
}
.top-nav-menu > li.active > a > i {
    color: var(--tn-accent);
}

/* Вертикальный разделитель между «Основными пунктами» и разделами «Навигации»
 * (рендерится из заголовка-секции _menu_items.php). */
.top-nav-menu > li.top-nav-sep {
    align-self: center;
    width: 1px;
    height: 22px;
    margin: 0 9px;
    padding: 0;
    background: var(--tn-border);
    pointer-events: none;
}

/* --- Дропдауны --- */
.top-nav-menu .dropdown-menu {
    z-index: 1051;           /* поверх соседних пунктов панели */
    margin: 0;
    min-width: 240px;
    padding: 6px 0;
    border: 1px solid var(--tn-border);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.top-nav-menu .dropdown-menu > li > a {
    padding: 8px 18px;
    color: var(--tn-text);
    white-space: normal;
    transition: background-color .12s ease, color .12s ease, padding-left .12s ease;
}
.top-nav-menu .dropdown-menu > li > a:hover,
.top-nav-menu .dropdown-menu > li > a:focus {
    background: var(--tn-hover-bg);
    color: var(--tn-accent-dark);
    padding-left: 22px;      /* лёгкий «сдвиг» при наведении */
}
.top-nav-menu .dropdown-menu > li.active > a,
.top-nav-menu .dropdown-menu > li.active > a:hover {
    background: var(--tn-accent);
    color: #fff;
}

/* Крайние правые разделы (Управление, Архив) открываем ВЛЕВО, иначе широкий
 * мега-дропдаун упирается в правый край и вторая колонка обрезается. */
.top-nav-menu > li.dropdown:last-child > .dropdown-menu,
.top-nav-menu > li.dropdown:nth-last-child(2) > .dropdown-menu {
    left: auto;
    right: 0;
}

/* li с дропдауном — позиционируем, чтобы открытое меню легло поверх соседей */
.top-nav-menu > li.dropdown {
    position: relative;
}
.top-nav-menu > li.dropdown:hover,
.top-nav-menu > li.dropdown.open {
    z-index: 1051;
}

/* Открытие верхних дропдаунов по наведению + плавное появление */
.top-nav-menu > li.dropdown:hover > .dropdown-menu {
    display: block;
    animation: tnDropIn .14s ease;
}
@keyframes tnDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Мега-меню: крупные плоские списки в 2 колонки --- */
.top-nav-menu .dropdown-menu.mega {
    min-width: 520px;
    padding: 6px 0;
    columns: 2;
    column-gap: 0;
}
.top-nav-menu .dropdown-menu.mega > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.top-nav-menu .dropdown-menu.mega > li > a {
    padding-right: 22px;
}

/* --- Третий уровень: flyout вправо --- */
.top-nav-menu .dropdown-submenu {
    position: relative;
}
.top-nav-menu .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    border-radius: 3px;
}
.top-nav-menu .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    animation: tnFlyIn .14s ease;
}
@keyframes tnFlyIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.top-nav-menu .dropdown-submenu > a:after {
    content: "\f105"; /* fa-angle-right */
    font-family: FontAwesome;
    float: right;
    margin-left: 10px;
    color: #adb5bd;
}
.top-nav-menu .dropdown-submenu:hover > a:after {
    color: var(--tn-accent);
}

/* ============================================================================
 * Панель раздела (_subnav.php) — «контекст соседей» под верхним меню.
 * Стиль — плитки/пилюли (.subnav--tiles); активная — смягчённой акцентной пилюлей.
 * ==========================================================================*/
.subnav-bar {
    background: #f7f8fa;
    border-bottom: 1px solid var(--tn-border);
}
.subnav-inner {
    max-width: var(--tn-max-width);
    margin: 0 auto;
    padding: 0 12px;         /* пилюли выровнены по левому краю с меню и контентом */
    display: flex;
    align-items: stretch;
    min-height: 42px;
}
.subnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex: 1;
}

/* --- Плитки/пилюли --- */
.subnav--tiles .subnav-list {
    gap: 8px;
    padding: 7px 0;
    align-items: center;
}
.subnav--tiles .subnav-item > a {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    font-size: 13px;
    color: #55606a;
    background: #fff;
    border: 1px solid var(--tn-border);
    border-radius: 16px;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.subnav--tiles .subnav-item > a > i {
    margin-right: 6px;
    color: #9aa4ac;
    transition: color .15s ease;
}
.subnav--tiles .subnav-item > a:hover > i {
    color: var(--tn-accent);
}
.subnav--tiles .subnav-item > a:hover {
    color: var(--tn-accent-dark);
    border-color: #bcd6e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
/* Активная — сплошная акцентная пилюля (первый вариант): заливка + белый текст. */
.subnav--tiles .subnav-item.active > a {
    color: #fff;
    font-weight: 600;
    background: var(--tn-accent);
    border-color: var(--tn-accent);
    box-shadow: 0 1px 4px rgba(60, 141, 188, .35);
}
.subnav--tiles .subnav-item.active > a > i {
    color: #fff; /* иконка того же цвета, что текст — на синей заливке акцент был бы невидим */
}

/* --- Планшет/мобайл: панель переносится колонкой, мега → 1 колонка --- */
@media (max-width: 991px) {
    .top-nav-menu {
        flex-direction: column;
    }
    .top-nav-menu > li.active > a {
        box-shadow: inset 3px 0 0 var(--tn-accent); /* акцент слева, не снизу */
    }
    .top-nav-menu > li.top-nav-sep {
        display: none; /* вертикальная черта не нужна в колоночной раскладке */
    }
    .top-nav-menu .dropdown-menu,
    .top-nav-menu .dropdown-menu.mega {
        position: static;
        float: none;
        width: 100%;
        min-width: 0;
        columns: 1;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: #fafbfc;
    }
    .top-nav-menu .dropdown-submenu > .dropdown-menu {
        left: 0;
        margin-top: 0;
    }
    /* Панель раздела: пилюли переносятся, чуть больше вертикального воздуха */
    .subnav--tiles .subnav-list {
        padding: 9px 0;
    }
}