/*
 * Ручка изменения ширины бокового меню (№83 п.1).
 *
 * Своего у Filament нет: ширина задаётся конфигом панели один раз.
 * Поведение — public/js/qualor-sidebar.js, здесь только вид ручки.
 *
 * Обычный CSS, а не Tailwind: своя тема не собирается, класс из
 * несобранной темы молча не применился бы (AGENTS §8).
 *
 * ⚠️ РУЧКА НЕВИДИМА, ПОКА НЕ НУЖНА. Постоянная полоса на границе меню
 * читалась бы как элемент разметки и спорила с рамкой самого меню;
 * подсветка при наведении говорит «меня можно тянуть» ровно в тот
 * момент, когда человек к ней подвёл курсор.
 */
.qualor-sidebar-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    z-index: 30;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background-color 0.15s ease;
}

.qualor-sidebar-resizer:hover,
.qualor-sidebar-resizer:active {
    background: var(--primary-500, #f59e0b);
}

/*
 * ⚠️ №95 (приёмка владельца 31.07, стенд train): десктопная переопись
 * позиционирования меню на relative, которая здесь раньше стояла,
 * СНЯТА ЦЕЛИКОМ. Владелец увидел «меню уползает следом за панель» —
 * при прокрутке длинной страницы боковое меню ехало вместе с
 * контентом вместо того, чтобы стоять на месте.
 *
 * Корень: вендорный `.fi-sidebar` — position:fixed на всех ширинах, и
 * именно fixed даёт независимую прокрутку (меню стоит, контент едет
 * под ним). Снятая переопись на десктопе ПЕРЕБИВАЛА fixed (та же
 * специфичность 0,1,0, тот же элемент) — меню возвращалось в поток,
 * его высота становилась высотой списка разделов, и страница
 * прокручивалась целиком вместе с ним. Старый комментарий утверждал
 * «на десктопе правило безвредно и даже избыточно: fixed само по себе
 * уже даёт контекст позиционирования» — это была ошибка: если fixed
 * уже даёт контекст ручке-ресайзеру и кружку-свёртке (см. ниже), то
 * relative его не «проговаривает явно», а ЗАМЕНЯЕТ, что и сломало
 * независимую прокрутку.
 *
 * Мобильная ветка (№91 п.1, <1024px) этим правилом не затрагивалась и
 * не затрагивается сейчас — там правила не было и нет.
 */

/* На узком экране меню выезжает поверх страницы — тянуть там нечего. */
@media (max-width: 1023px) {
    .qualor-sidebar-resizer {
        display: none;
    }
}

/*
 * Свёрнутое боковое меню (№83, доработка владельца 29.07).
 *
 * Filament помечает РАЗВЁРНУТОЕ меню классом fi-sidebar-open, поэтому
 * свёрнутое состояние — это его отсутствие. Своего признака не заводим:
 * два источника правды разошлись бы при первом же сворачивании из
 * другого места.
 */

/*
 * ⚠️ ВЕНДОРНАЯ СТРЕЛКА В ШАПКЕ СКРЫТА. Она стоит в самом верху, у
 * логотипа — далеко от меню, которым управляет (замечание владельца).
 * Своя стрелка живёт рядом с навигацией, в блоке инструментов; две
 * стрелки для одного действия — это вопрос «а в чём между ними
 * разница».
 */
.fi-topbar-collapse-sidebar-btn-ctn {
    display: none !important;
}

/*
 * ⚠️ ВЕРТИКАЛЬНЫЙ РИТМ В СВЁРНУТОМ МЕНЮ. Заголовки групп там скрыты, но
 * их блоки продолжали занимать место — иконки пунктов оказывались
 * разрежены большими пустотами, и меню выглядело сломанным (скрин
 * владельца). Пустой блок убираем совсем, а границу между группами
 * держит тонкая линия: без неё пункты сливаются в один список.
 */
.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
    display: none;
}

.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(127, 127, 127, 0.22);
}

.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items {
    row-gap: 0.125rem;
}

/*
 * Ручка изменения ширины в свёрнутом меню не нужна: ширина там своя
 * (--collapsed-sidebar-width), и тянуть её значит менять невидимое.
 */
.fi-main-sidebar:not(.fi-sidebar-open) .qualor-sidebar-resizer {
    display: none;
}

/*
 * ЗАКРЕПЛЁННАЯ ШАПКА МЕНЮ (полировка п.13, владелец) + ЗОНА ПРОКРУТКИ
 * (эталон владельца 04.08, комментарий в PR #366).
 *
 * Поиск и кнопки живут внутри .fi-sidebar-nav (родной hook
 * SIDEBAR_NAV_START кладёт их её первым потомком), а прокручиваемой
 * областью у вендора была ВСЯ .fi-sidebar-nav — у длинного меню шапка
 * уезжала вверх ровно тогда, когда нужна. Первое решение держало её
 * position:sticky, но трек скроллбара всё равно шёл от ВЕРХА nav — то
 * есть «за спиной» шапки, и полоса прокрутки визуально спорила с ней.
 *
 * Эталон владельца: шапка ВНЕ скролла, трек начинается под ней. Поэтому
 * скролл переезжает с .fi-sidebar-nav на внутренний список
 * .fi-sidebar-nav-groups: шапка остаётся над зоной прокрутки СТРУКТУРНО,
 * а трек скроллбара рисуется только вдоль списка меню. Разметка вендора
 * не тронута — только то, какой из двух уже существующих контейнеров
 * прокручивается.
 *
 * ⚠️ overflow: VISIBLE, НЕ hidden (приёмка v2, регресс №2). Убрать
 * прокрутку с nav через hidden казалось очевидным — но hidden ещё и
 * КЛИПАЕТ потомков, а кружок «свернуть» (edge-handle, рендерится тем же
 * hook'ом ВНУТРИ nav) намеренно торчит за правый край сайдбара: его
 * внешняя половина обрезалась, и в точке центра кнопки верхним
 * оказывался ресайзер — клик по сворачиванию молча перехватывался
 * (Playwright: «.qualor-sidebar-resizer intercepts pointer events»).
 * visible безопасен: nav никогда не переполняется — по высоте flex-дети
 * ужаты (min-height:0 у списка), по ширине список кончается ровно на
 * краю сайдбара.
 *
 * ⚠️ min-height:0 ОБЯЗАТЕЛЕН. .fi-sidebar-nav — flex-колонка; у
 * flex-потомка min-height по умолчанию auto, и без явного нуля список
 * не сжимается, а распирает контейнер — скролл просто не возникает, и
 * длинное меню молча обрезается краем сайдбара.
 *
 * Фон и бордер шапки остаются: бордер отделяет её от списка, фон
 * непрозрачный — вторая страховка вместе с sticky ниже. Цвета —
 * переменными Filament, разные на двух ширинах: на узком экране сайдбар
 * белый (bg-white), на десктопе прозрачен и виден фон страницы
 * (bg-gray-50/950) — один цвет дал бы заметную заплату.
 *
 * Отрицательные поля — под горизонтальные отступы .fi-sidebar-nav
 * (px-6): без них список проезжал бы по бокам от шапки.
 */
.fi-sidebar-nav {
    overflow: visible;
    /* ⚠️ ПАРА К overflow:visible, НЕ КОСМЕТИКА. У flex-потомка с
       overflow, отличным от visible, автоматический min-height равен
       нулю — на этом (незаметно) держалось сжатие nav, пока она была
       скролл-контейнером. С возвратом visible min-height снова стал
       auto (= размер контента): nav вырастала до высоты СПИСКА (3054px
       в сайдбаре 636px), список получал полную высоту, его скролл
       исчезал — и длинное развёрнутое меню молча обрезалось краем.
       Найдено живой пробой каркаса v2; ни один из четырёх сайдбарных
       e2e этого не видел — сторож ниже, в спеке «прокрутка меню
       переживает переход». */
    min-height: 0;
    /* Вендорный scrollbar-gutter: stable резервировал 15px под скроллбар,
       которого на nav больше нет, — и список не дотягивался до края. */
    scrollbar-gutter: auto;
}

/*
 * Каркас v2 п.4 (владелец, 04.08): граница сайдбара отчерчена ТОНКОЙ
 * ЛИНИЕЙ — той же, что отделяет поиск от меню (1px, тот же
 * полупрозрачный серый, работает в обеих темах). До этого на десктопе
 * сайдбар прозрачен и края у него не было вовсе — меню «плавало» на
 * фоне страницы. Только десктоп: на мобиле drawer уже очерчен вендорной
 * тенью ring-1.
 */
@media (min-width: 1024px) {
    .fi-main-sidebar {
        border-right: 1px solid rgba(127, 127, 127, 0.3);
    }
}

/*
 * Дополнение эталона (владелец, 04.08, скрин в PR #366): полоса
 * прокрутки и полоса изменения ширины — ОДНА линия у правого края
 * сайдбара. Список лежит внутри px-6-отступа .fi-sidebar-nav, поэтому
 * его скроллбар рисовался в 1.5rem от края — а ручка ширины на самом
 * краю: двойная вертикаль. Отрицательное правое поле выводит край
 * списка (и его скроллбар) на край сайдбара, компенсирующий padding
 * возвращает пунктам прежний отступ — сами пункты не сдвигаются.
 */
.fi-sidebar-nav > .fi-sidebar-nav-groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -1.5rem;
    padding-right: 1.5rem;
}

/*
 * position:sticky ВОЗВРАЩЁН (приёмка v2, регресс №1): главный механизм
 * «шапка вне скролла» теперь структурный (скроллится список, не nav), и
 * в нескролльном родителе sticky бездействует — но он остаётся ВТОРОЙ
 * страховкой на случай, если прокрутка когда-нибудь вернётся на nav
 * (вендорное обновление, чужая правка): шапка тогда прилипнет, а не
 * уедет молча. На этом же контракте стоит e2e-сторож layer3 «шапка
 * сайдбара закреплена».
 */
[data-qualor-sidebar-tools] {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
    background: #fff;
    /* Owner-референс 04.08: разделитель поиск↔меню — заметная тонкая
       линия (0.18 на тёмной теме почти не читалась). Тот же цвет, что у
       границы сайдбара ниже — пара линий обязана быть одинаковой. */
    border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

html.dark [data-qualor-sidebar-tools] {
    background: var(--gray-900, #111827);
}

@media (min-width: 1024px) {
    [data-qualor-sidebar-tools] {
        background: var(--gray-50, #f9fafb);
    }

    html.dark [data-qualor-sidebar-tools] {
        background: var(--gray-950, #030712);
    }
}

/*
 * НАХОДКА ВЛАДЕЛЬЦА (8081, мобильный drawer, 31.07): ряд инструментов
 * меню (поиск + [−][+]) на мобиле — поле сжимает кнопки до нуля/переносит
 * «+» под поле вместо ряда справа (замечено даже на эталонном скрине).
 *
 * ⚠️ РЯД БЕЗ ЯВНОГО flex-wrap ЛОМАЕТСЯ МЯГКО. Инлайн-style ряда
 * (sidebar-tools.blade.php) задаёт display:flex без wrap-ключа — браузер
 * по умолчанию не переносит, но ничто явно и не запрещает: сжатие поля до
 * min-width:0 не гарантирует, что соседние кнопки (flex-shrink по
 * умолчанию 1, как у самого поля) не схлопнутся первыми на очень узкой
 * ширине. Кнопки — родные x-filament::icon-button, фиксированного
 * размера по смыслу (иконка), их вообще не следует сжимать: сжиматься
 * должно только поле поиска (у него уже flex:1 1 auto; min-width:0).
 */
[data-qualor-sidebar-tools] [data-qualor-menu-toggle-all],
[data-qualor-sidebar-tools] [data-qualor-menu-search-icon] {
    flex-shrink: 0;
}

/*
 * ⚠️ ВЕНДОРНЫЙ margin:-8px У fi-icon-btn СЪЕДАЕТ НАШ gap (финальная
 * доводка владельца 04.08, «иконки залеплены» + «квадрат налазит на
 * поле»). Вендор отрицательными полями прижимает иконку к соседнему
 * тексту — в наших рядах это давало фактический зазор gap−16px:
 * в столбике 12−16 = −4 (перекрытие), в ряду 8−8−… = 0 (рамки впритык).
 * Внутри блока инструментов кнопки стоят между СОБОЙ, а не при тексте —
 * прижимать нечего, margin обнуляется, gap становится честным.
 */
[data-qualor-sidebar-tools] .fi-icon-btn {
    margin: 0;
}

/*
 * Каркас v2 п.4 (владелец, 04.08): умная кнопка «+/−» — иконка В
 * КВАДРАТЕ. Голая иконка рядом с обведённым полем поиска читалась как
 * случайный значок, а не кнопка. Рамка и скругление — те же, что у
 * самого поля (1px, тот же полупрозрачный серый, radius 6px), так ряд
 * «поле + кнопка» выглядит одним семейством. Общий rgba работает в
 * обеих темах — отдельного правила на тёмную не нужно (тот же приём,
 * что у бордера шапки ниже).
 */
[data-qualor-sidebar-tools] [data-qualor-menu-toggle-all] {
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 6px;
}

/*
 * Owner-доводка 04.08: квадрат — «на 2–3 пикселя крупнее +», а не полная
 * кнопка fi-size-md (36px): та вырастала выше поля поиска (~30px) и
 * налазила на него. 28px = иконка 24px + рамка с воздухом.
 *
 * ⚠️ ТОЛЬКО РАЗВЁРНУТЫЙ РЯД (.qualor-sidebar-tools-row), не весь tools:
 * в свёрнутом столбике рядом нет поля, налазить не на что, а ужатая до
 * 28px кнопка рядом с 36px-лупой ломала вертикальный ритм — иконки
 * «залипали» друг к другу (вторая находка владельца тем же днём).
 */
.qualor-sidebar-tools-row [data-qualor-menu-toggle-all] {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

[data-qualor-sidebar-tools] > div[x-cloak] > div {
    flex-wrap: nowrap;
}

/*
 * П9.2 (находка 31.07, УАТ-трекер): «+/− у поиска не видно» — на деле не
 * пропали, а съехали строкой ПОД поле поиска. Причина не в разметке и не
 * в ширинах, а в том, КАК Alpine переключает `x-show`: он сам управляет
 * инлайновым `style.display` (пусто ↔ none) и на «показать» ставит
 * пустую строку, а не возвращает то, что было в исходном инлайн-style —
 * `display:flex`, заданный там же инлайном, при первом же переключении
 * терялся, и ряд опадал в обычный блочный поток (инпут и кнопки — уже
 * друг под другом). display:flex здесь и ниже — не инлайн, а класс
 * СТИЛЕЙ: инлайновому `style.display`, который трогает Alpine, нечего
 * стирать, а когда он пуст — действует это правило каскадом.
 */
.qualor-sidebar-tools-row {
    display: flex;
    /* Финальная доводка владельца 04.08: при gap 4px рамка квадрата «+/−»
       сливалась с рамкой поля поиска в одну линию — «налазит». 8px даёт
       воздух между двумя обведёнными элементами. */
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
}

.qualor-sidebar-tools-row-collapsed {
    display: flex;
    flex-direction: column;
    /* Финальная доводка владельца 04.08: иконки столбика были «сильно
       залеплены» — воздух между ними как у пунктов меню ниже. */
    gap: 0.75rem;
    align-items: center;
    padding: 10px 4px;
}

/*
 * №91 п.2 (решение владельца 30.07): логотип в ШАПКЕ на узком экране,
 * из бокового меню на этой ширине убран.
 *
 * ⚠️ ДВА ПРАВИЛА, А НЕ ОДНО, И ВТОРОЕ ОБЯЗАТЕЛЬНО. Показать знак в шапке
 * недостаточно: пока шапка меню на мобиле остаётся, логотипов становится
 * два, и вертикали в меню не прибавляется — то есть задача не решена, а
 * выглядит решённой.
 *
 * ⚠️ ГРАНИЦА — 1024px, ТА ЖЕ, ЧТО У ОСТАЛЬНЫХ ПРАВИЛ ЭТОГО ФАЙЛА (ручка
 * ширины меню выше). Разные границы у соседних правил дают состояние, в
 * котором логотип уже в шапке, а меню всё ещё считает себя настольным.
 */
[data-qualor-topbar-logo] {
    display: flex;
    align-items: center;
    /* Полоса шапки — 4rem; знак не должен её распирать. */
    max-height: 2.25rem;
}

[data-qualor-topbar-logo] img {
    max-height: 2.25rem;
    width: auto;
    object-fit: contain;
}

/*
 * Тема — классами, а не Alpine: состояние темы надёжно видно только на
 * <html>, и правило «скрыть лишний» переживает любую перерисовку шапки.
 * Правила локальны для этого блока — общий файл донора в панель не
 * подключается, и полагаться на него нельзя (инцидент «логотип пропал»
 * был ровно про тему).
 */
html:not(.dark) [data-qualor-topbar-logo] .qualor-logo--dark,
html.dark [data-qualor-topbar-logo] .qualor-logo--light {
    display: none;
}

@media (min-width: 1024px) {
    /* На десктопе логотип живёт в меню — вендорный, как и был. */
    [data-qualor-topbar-logo] {
        display: none;
    }
}

@media (max-width: 1023px) {
    /*
     * Шапка меню на мобиле содержит ТОЛЬКО логотип: кнопки сворачивания
     * вендор рендерит под условием «нет верхней полосы», а на этой ширине
     * полоса есть (проверено по разметке livewire/sidebar.blade.php).
     * Поэтому скрытие шапки ничего не отнимает у управления — иначе это
     * было бы удаление единственного способа закрыть выехавшее меню.
     */
    .fi-sidebar-header-ctn {
        display: none;
    }
}

/*
 * П9.1/П9.2 (находка 31.07, УАТ-трекер): открытое мобильное меню
 * (`.fi-sidebar`, fixed, top:0 — h-dvh на всю высоту вьюпорта) рисуется
 * ОТ САМОГО ВЕРХА, а баннер окружения обязан лежать ПОВЕРХ него, пока
 * меню открыто (qualor-chrome.css, №91 п.9 — намеренно, там же тест).
 * Вместе это давало не «баннер над пунктами меню», а «баннер вместо
 * шапки меню»: закреплённая строка поиска+[+/-] (`[data-qualor-sidebar-
 * tools]`, sticky top:0 у ПЕРВОГО кадра, до всякой прокрутки) стоит
 * в той же полосе высоты, что топбар+баннер, и пряталась под ним
 * целиком — отсюда обе находки сразу («баннер перекрывает поиск» и
 * «кнопок +/- не видно»: они не пропали, их просто не видно ПОД
 * баннером).
 *
 * ⚠️ НЕ ТРОГАЕМ z-index БАННЕРА. Он поднят намеренно (№91 п.9) — суть
 * находки не «баннер должен уступить», а «меню не должно начинаться
 * под ним». Отодвигаем сам сайдбар вниз на ту же высоту, что уже
 * посчитана для баннера+топбара (--qualor-sticky-chrome, qualor-chrome.js) —
 * теперь баннер лежит НАД полностью открытым меню, а не НА нём.
 *
 * Только пока меню открыто и только на мобиле: в закрытом виде меню на
 * этой ширине и так не видно (скрыто вендором за пределами экрана), а
 * на десктопе баннер и без того ниже меню по z-index (комментарий в
 * qualor-chrome.css) — трогать положение там нечего.
 */
@media (max-width: 1023px) {
    body:has(.fi-sidebar-open) .fi-sidebar {
        top: var(--qualor-sticky-chrome, 4rem);
        height: calc(100dvh - var(--qualor-sticky-chrome, 4rem));
    }
}

/*
 * №91 п.3 (решение владельца 30.07): «свернуть» — КРУЖОК НА ГРАНИЦЕ меню,
 * а не иконка в ряду инструментов.
 *
 * ⚠️ ПОЧЕМУ ОТДЕЛЬНО ОТ РЯДА. В ряду с лупой и кнопкой групп стрелка
 * читалась как ещё один инструмент МЕНЮ, хотя действует на само меню.
 * Кружок на границе — общий приём: он объясняет себя местом, а не
 * подписью. Подпись при наведении остаётся.
 *
 * ⚠️ ТОЧКА ОТСЧЁТА — вендорный .fi-sidebar (position: fixed). Своего
 * relative на .fi-main-sidebar с №95 больше нет (снято, см. комментарий
 * выше в файле) — fixed сам по себе уже создаёт containing block для
 * position:absolute-потомков, ручка ширины и этот кружок держатся на
 * нём. Без position, отличного от static, где-то по цепочке предков
 * кружок позиционировался бы от окна и уезжал при прокрутке.
 */
/*
 * Каркас v2 п.4 (владелец, 04.08): у шеврона сворачивания УБРАНА круглая
 * обводка — остаётся сама кнопка-иконка на границе, без рамки-«кружка».
 * Блок сохраняет позицию и непрозрачный фон: шеврон висит на границе, и
 * сквозь него не должны просвечивать ни пункты меню, ни содержимое
 * страницы; скругление — маленькое, как у остальных кнопок панели, а не
 * окружность.
 */
[data-qualor-sidebar-edge-handle] {
    position: absolute;
    top: 4.5rem;
    right: -0.875rem;
    z-index: 31;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: var(--gray-50, #f9fafb);
}

html.dark [data-qualor-sidebar-edge-handle] {
    background: var(--gray-900, #111827);
}

@media (max-width: 1023px) {
    /*
     * На мобиле меню выезжает поверх страницы и закрывается тапом по
     * затемнению — кружок «свернуть» там не нужен и торчал бы над
     * содержимым.
     */
    [data-qualor-sidebar-edge-handle] {
        display: none;
    }
}