/*
 * Хром панели /fadmin — закреплённые зоны и полоса прокрутки меню (№91,
 * решения владельца 30.07). Четыре независимых правки в одном файле:
 * п.6 (баннер окружения едет с шапкой), п.9 (баннер виден поверх
 * открытого мобильного меню), п.7 (тонкая полоса прокрутки меню), п.8
 * (футер панели закреплён одной строкой) — см. блоки ниже.
 *
 * П.6 — БАННЕР ОКРУЖЕНИЯ ЕДЕТ ВМЕСТЕ С ШАПКОЙ.
 *
 * ⚠️ ЧТО БЫЛО. Полоса «учебный стенд» рендерится хуком TOPBAR_AFTER, то
 * есть СОСЕДОМ закреплённой шапки, а не её частью: шапка у Filament
 * sticky (.fi-topbar-ctn — position: sticky, top: 0, z-index: 30), а
 * баннер оставался в потоке и уезжал при первой же прокрутке. Для
 * учебного стенда это прямая опасность: человек, пролиставший экран,
 * перестаёт видеть единственный признак того, что он не в проде, и
 * заводит «на попробовать» реальные данные — или наоборот, боится
 * нажать в настоящем прод-интерфейсе.
 *
 * ⚠️ ЗАКРЕПЛЯЕТСЯ ТОЛЬКО БАННЕР ОКРУЖЕНИЯ. Соседние полосы (подписка,
 * «просмотр как роль») рендерятся тем же хуком, но их владелец пинить не
 * просил, и они уезжают под баннер, как обычное содержимое: постоянно
 * занятая вертикаль на мобиле дороже, чем их постоянная видимость.
 *
 * ⚠️ top: 4rem — ВЫСОТА ШАПКИ FILAMENT (.fi-topbar: min-height =
 * spacing × 16). Число взято из вендорной сборки, а не на глаз; если оно
 * когда-нибудь разъедется, баннер наложится на шапку или оставит щель —
 * это видно сразу, поэтому дублирующего теста на пиксели нет.
 *
 * Обычный CSS, а не Tailwind: своя тема не собирается, класс из
 * несобранной темы молча не применился бы (AGENTS §8). Цвета баннера не
 * трогаются — владелец просил «вид не менять, поведение закрепить»,
 * поэтому здесь только позиционирование.
 */
.qualor-stand-banner {
    position: sticky;
    top: 4rem;
    /* Ниже шапки (30), выше содержимого: полоса обязана перекрывать
       текст, который под неё уезжает, а не спорить с шапкой. */
    z-index: 29;
}

/*
 * №91 п.9 (находка владельца 30.07 вечер): на мобиле выехавшее меню
 * (`.fi-sidebar-open`, z-index 30 у вендорной `.fi-sidebar` на <lg)
 * ложится ПОВЕРХ баннера окружения (z-index 29) — «данные не боевые»
 * исчезает ровно в момент выбора, куда пойти.
 *
 * ⚠️ НЕ ДУБЛИРОВАТЬ БАННЕР В САЙДБАРЕ. Хост уже пробовал это через
 * SIDEBAR_NAV_START (PR #196, закрыт) — второй носитель класса
 * `.qualor-stand-banner` подхватывает ЭТО ЖЕ глобальное sticky-правило и
 * ломается об него же. Решение — поднять z-index ОРИГИНАЛЬНОГО баннера,
 * пока меню открыто, а не плодить второй экземпляр.
 *
 * `:has()` вместо Alpine-стора: сайдбар и баннер — независимые render
 * hook'и в разных поддеревьях разметки (TOPBAR_AFTER vs Livewire-сайдбар),
 * общего компонента между ними нет, а класс `fi-sidebar-open` уже и так
 * единственный источник правды состояния (см. докблок «Свёрнутое боковое
 * меню» в qualor-sidebar.css — своего признака не заводим). `:has()` читает
 * этот же класс декларативно, без второго слушателя стора.
 *
 * ⚠️ ТОЛЬКО МОБИЛЬНАЯ ШИРИНА, ЯВНО. На десктопе (`lg:z-20` у вендорного
 * сайдбара) баннер и так уже выше открытого меню — поднимать z-index
 * там нечего, но граница задана явно (тот же порог 1023px, что у
 * остальных правил обоих файлов хрома), а не «само как-то не сработает»:
 * привычка этого пакета — про каждую ширину говорить, а не предполагать.
 */
@media (max-width: 1023px) {
    body:has(.fi-sidebar-open) .qualor-stand-banner {
        z-index: 31;
    }
}

/*
 * ⚠️ ЯКОРНЫЕ ПЕРЕХОДЫ ДОЛЖНЫ УЧИТЫВАТЬ ВЫСОТУ ЗАКРЕПЛЁННОЙ ЗОНЫ — прямое
 * замечание владельца к этому пункту. Без этого «перейти к содержимому»
 * (skip-link панели) и любая ссылка-якорь ставят цель ПОД шапку с
 * баннером: строка есть, но её не видно, и человек считает, что переход
 * не сработал.
 *
 * Высота зоны переменная: баннера может не быть вовсе (прод), а на узком
 * экране его текст переносится в две строки. Поэтому число не
 * захардкожено, а считается в public/js/qualor-chrome.js и приезжает сюда
 * переменной. Фолбэк — высота одной шапки: если скрипт не отработал,
 * якорь хотя бы не уедет под неё.
 */
html {
    scroll-padding-top: var(--qualor-sticky-chrome, 4rem);
}

/*
 * №91 п.7 (решение владельца 30.07): полоса прокрутки меню — тоньше, не
 * скрыта совсем.
 *
 * ⚠️ ПОЛНОСТЬЮ ПРЯТАТЬ НЕ СТОИТ (явное решение, не default молчком):
 * длинное меню без индикатора прокрутки дезориентирует новичка, а
 * /fadmin — дверь обучения персонала (задание №91, преамбула).
 *
 * Один селектор покрывает ОБА состояния сайдбара — развёрнутое и
 * свёрнутое (столбик иконок): это один и тот же элемент `.fi-sidebar-nav`,
 * ширина меняется, скролл остаётся тем же.
 *
 * Серый с альфой (127,127,127), а не переменная темы — тот же приём, что
 * у бордера закреплённой шапки меню и кружка-свёртки в qualor-sidebar.css:
 * средний серый одинаково читается на светлом и тёмном фоне через альфу,
 * отдельных правил на тему не требуется.
 *
 * На тач-устройствах системный оверлей-скроллбар прячется сам — эти
 * правила ему не мешают (scrollbar-width/color и ::-webkit-scrollbar
 * браузер с оверлей-скроллом просто не читает).
 */
/*
 * Селектор — .fi-sidebar-nav-groups, НЕ .fi-sidebar-nav: с эталона
 * владельца 04.08 (PR #366) прокручивается внутренний список меню, а не
 * вся nav-область — шапка поиска вне скролла, и трек полосы начинается
 * под ней (правило переезда зоны — qualor-sidebar.css).
 */
.fi-sidebar-nav-groups {
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, 0.4) transparent;
}

.fi-sidebar-nav-groups::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar-nav-groups::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav-groups::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, 0.4);
    border-radius: 9999px;
}

/*
 * №91 п.8 (решение владельца 30.07, повторная просьба): футер панели —
 * закреплён ВСЕГДА, одной тонкой строкой.
 *
 * ⚠️ НАХОДКА, С КОТОРОЙ НАЧАЛОСЬ ЗАДАНИЕ: после п.4 (опустошили главный
 * дашборд) футера не видно вовсе. Причина в разметке, не в нашем футере:
 * `PanelsRenderHook::FOOTER` рендерится ПОСЛЕДНИМ потомком `.fi-main-ctn`
 * (вендорная layout/index.blade.php), а тот уже flex-column с
 * `min-height: calc(100dvh - 4rem)` (вендорный layout.css, тело с
 * fi-body-has-sidebar-collapsible-on-desktop — наш случай). Без
 * flex-grow у `<main>` резерв высоты остаётся ПОСЛЕ футера, а не ДО
 * него: на короткой странице футер оказывается сразу под скудным
 * содержимым, а не у низа вьюпорта, и мелкий текст (opacity .7,
 * 12px) там легко не заметить.
 *
 * ⚠️ ДВА МЕХАНИЗМА, А НЕ ОДИН — ровно то, что просил владелец («прижат к
 * низу на коротких, sticky при прокрутке на длинных»), и оба нужны:
 *   1) flex-grow у `.fi-main` дотягивает контент до низа
 *      `.fi-main-ctn` — на короткой странице футер, будучи следующим (и
 *      последним) flex-потомком, встаёт ровно у нижнего края вьюпорта.
 *   2) `position: sticky; bottom: 0` на самом футере — на длинной
 *      странице держит его прижатым к низу вьюпорта ПРИ ПРОКРУТКЕ, а не
 *      только когда долистали до конца. Он последний элемент контейнера,
 *      поэтому «отлипнуть» ему не от чего — держится всю прокрутку.
 *
 * ⚠️ ПЕРЕКРЫТИЯ КОНТЕНТА НЕТ ПО КОНСТРУКЦИИ, И ЭТО НЕ СЛУЧАЙНОСТЬ: sticky
 * (в отличие от fixed) не выводит элемент из потока — место под футер
 * зарезервировано всегда, поэтому доп. отступ снизу (как scroll-padding
 * у шапки) не нужен.
 *
 * ⚠️ ШИРИНА — САМА ОТ FLEX-РОДИТЕЛЯ. Футер лежит внутри `.fi-main-ctn`
 * (той же колонки, что и `<main>`), которая уже сужена сайдбаром через
 * `.fi-layout{display:flex}` — в отличие от position:fixed, здесь не
 * нужно вручную вычитать ширину меню (и её нет нужды пересчитывать при
 * изменении/перетаскивании ширины сайдбара, №83 п.1).
 *
 * Фон — переменные страницы (--gray-50/--gray-950), те же, что красят
 * `.fi-body` (вендорный layout.css): футер лежит в колонке страницы, а
 * не сайдбара, и эта пара не различается по ширине экрана (в отличие от
 * сайдбарной, см. [data-qualor-sidebar-tools] выше в qualor-sidebar.css).
 */
.fi-main {
    flex: 1 1 auto;
}

.qualor-panel-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--gray-50, #f9fafb);
    border-top: 1px solid rgba(127, 127, 127, 0.18);
}

html.dark .qualor-panel-footer {
    background: var(--gray-950, #030712);
}

/* issue #1928: на телефоне в средней зоне футера остаётся только версия —
   подпись «Powered by Qualor · » прячется, строка не переносится. */
@media (max-width: 640px) {
    .qualor-panel-footer .qualor-footer-powered-label {
        display: none;
    }
}

/*
 * ═══ КАРКАС v2 (владелец, 04.08 ~15:00, после приёмки #366) ═══
 *
 * П.1 — РАЗДЕЛЬНЫЕ ПРОКРУТКИ. До этого скролл был страничным, общим:
 * колесо над меню (когда список докручен) уводило ВСЮ страницу — и
 * заголовок «Панель» уезжал, и футер оказывался в середине экрана (три
 * симптома одного корня, скрин владельца). Теперь body — нескролльный
 * flex-столбец высотой во вьюпорт: топбар и баннер — обычные блоки
 * сверху, а зона .fi-layout делит остаток; main прокручивается САМ
 * (.fi-main-ctn overflow-y:auto), сайдбар — сам (его список,
 * .fi-sidebar-nav-groups, из #366). Прокрутка одного не двигает другое
 * по построению.
 *
 * ⚠️ ПОБОЧНАЯ ВЫГОДА, ради которой каркас и стоил перестройки: верх
 * скролл-зоны main теперь НАЧИНАЕТСЯ под баннером — sticky-заголовку
 * страницы (п.3) достаточно top:0, никакой арифметики высот
 * (--qualor-sticky-chrome остаётся только мобильному drawer'у П9.1 и
 * якорям).
 *
 * ⚠️ ТОЛЬКО ДЕСКТОП (≥1024, порог всех правил хрома). На мобиле меню —
 * drawer поверх страницы, страничный скролл остаётся: там раздельность
 * уже есть по построению (drawer фиксирован), а ломать привычную
 * прокрутку телефона незачем.
 *
 * ⚠️ СОСЕДИ, КОТОРЫХ НЕЛЬЗЯ ЗАДЕТЬ (риски из задания): sticky шапки
 * сайдбара (страховка #366) при нескролльном родителе бездействует —
 * цела; кружок-шеврон живёт в контексте сайдбара — цел; вендорный
 * sticky топбара при нескролльном body бездействует — цел. 4 сайдбарных
 * e2e — приёмочный гейт этого пакета.
 */
@media (min-width: 1024px) {
    .fi-body {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    .fi-layout {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* База сайдбара — зона layout, а не вьюпорт: вендорные top-4rem/
       h-dvh считали от окна и не знали про баннер; теперь высота
       наследуется от зоны, начинающейся под топбаром И баннером. */
    .fi-body-has-topbar .fi-sidebar {
        top: 0;
        height: 100%;
    }

    .fi-main-ctn {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: clip;
    }

    /* Вендорный h-full у .fi-main в старом каркасе безобидно тянулся от
       min-height-контейнера; при фиксированной высоте скролл-контейнера
       он ЗАМОРАЖИВАЕТ main на высоте вьюпорта — длинная таблица
       переполняет main, и футер оказывается плавающим посреди строк
       (снято живьём). Высота — по контенту, рост до низа даёт flex-grow
       из №91 п.8. */
    .fi-main-ctn > .fi-main {
        height: auto;
    }

    /*
     * П.3 — заголовок страницы прижимается к верху своей скролл-зоны
     * (= низу баннера/топбара, см. каркас выше). Фон обязателен: без
     * него контент просвечивает под прилипшим заголовком. Отрицательные
     * поля + компенсирующий padding растягивают фон на горизонтальные
     * отступы .fi-main (px-4/md:px-6/lg:px-8) — иначе строки контента
     * проезжали бы по бокам от заголовка. Прижатие «доехал и
     * зафиксировался» — ровно поведение sticky.
     */
    /*
     * ⚠️ z-index НИЖЕ сайдбара (owner-находка 04.08 после мержа #385):
     * заголовок растянут отрицательными полями за края .fi-main, и с
     * z-25 его фон ложился ПОВЕРХ шеврона сворачивания (сайдбар на
     * десктопе z-20, кнопка живёт в его контексте) — на узком окне
     * шеврон оказывался наполовину «съеден». 15 достаточно: контент
     * main — z-auto, заголовок остаётся над ним и ПОД сайдбаром.
     */
    .fi-main .fi-header {
        position: sticky;
        top: 0;
        z-index: 15;
        margin-left: -2rem;
        margin-right: -2rem;
        padding: 1rem 2rem;
        background: var(--gray-50, #f9fafb);
        border-bottom: 1px solid rgba(127, 127, 127, 0.18);
    }

    html.dark .fi-main .fi-header {
        background: var(--gray-950, #030712);
    }
}

/*
 * П.2 — sticky-футер main работает прежней парой из №91 п.8 (flex-grow
 * у .fi-main + sticky bottom у .qualor-panel-footer): в новом каркасе
 * контейнером прокрутки стал .fi-main-ctn, и та же пара прижимает футер
 * к низу вьюпорта на коротком контенте и держит его при прокрутке на
 * длинном. Отдельных правил не требуется — здесь только заметка, чтобы
 * связь каркаса и футера не потерялась при следующей правке.
 */

/* issue #1938: подсветка окна модалки, над которой тащат файл
   (public/js/qualor-modal-drop.js). Рамка внутри окна — без сдвига вёрстки. */
.fi-modal-window.qualor-drop-active {
    outline: 2px dashed var(--primary-500, #f59e0b);
    outline-offset: -8px;
}