/*
 * Базовые UI-фиксы пакета xenondev/backpack.
 *
 * Шрифты, цвета primary и прочая брендовая тема НЕ задаются здесь —
 * см. раздел «Кастомизация» в Readme.md пакета (skins/custom-color-palette.css
 * и skins/custom-fonts.css в проекте).
 */

/* Поля select2 в тёмной теме — выравниваем с остальными инпутами Tabler */
[data-bs-theme=dark] span.select2-selection.select2-selection--single,
[data-bs-theme=dark] .select2-selection.select2-selection--multiple ul.select2-selection__rendered {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--tblr-primary-border-subtle) !important;
    border-radius: var(--tblr-border-radius) !important;
    background-color: var(--tblr-dark) !important;
    color: var(--tblr-muted) !important;
}

span.select2-selection.select2-selection--single {
    height: 40px;
}

/* Фикс перекрытия контента backdrop'ом модалок в Tabler */
.modal-backdrop {
    position: relative !important;
}

/* ===========================================================================
 * Фиксы палитры Tabler: читаемость тёмной темы + сменный акцент (вариант A).
 *
 * Грузится после skins/backpack-color-palette.css, поэтому переопределяет её
 * переменные. Структуру палитры не трогаем — только корректируем значения.
 *
 * Главный принцип: все токены, ЗАВИСЯЩИЕ ОТ АКЦЕНТА (подложки, рамки, текст-
 * акцент, ссылки, code, focus-ring), вычисляются из --tblr-primary через
 * color-mix(). Поэтому проекту достаточно переопределить --tblr-primary
 * (+ --tblr-primary-rgb) на зелёный/оранжевый/любой — и акцент расходится
 * по всему UI без сиреневых хвостов. Нейтрали остаются нейтральными.
 * =========================================================================== */

/* --- Акцентные токены, производные от --tblr-primary: СВЕТЛАЯ тема --------- */
:root, [data-bs-theme=light], [data-menu-theme=light] {
    --tblr-primary-text-emphasis:  color-mix(in srgb, var(--tblr-primary), #000 55%);
    --tblr-primary-bg-subtle:      color-mix(in srgb, var(--tblr-primary) 12%, #fff);
    --tblr-primary-border-subtle:  color-mix(in srgb, var(--tblr-primary) 35%, #fff);
    --tblr-link-color:             var(--tblr-primary);
    --tblr-link-hover-color:       color-mix(in srgb, var(--tblr-primary), #000 20%);
    --tblr-focus-ring-color:       color-mix(in srgb, var(--tblr-primary) 25%, transparent);
}

/* --- Акцентные токены + читаемость + нейтрализация: ТЁМНАЯ тема ------------ */
[data-bs-theme=dark], [data-menu-theme=dark] {
    /* 1. Синхронизируем body-color и его rgb-вариант: в исходной палитре они
     *    указывали на РАЗНЫЕ цвета (#c9c1d6 против #a09bbe), из-за чего текст,
     *    собранный через rgba(var(--tblr-body-color-rgb), …), выходил тусклее. */
    --tblr-body-color-rgb: 201, 193, 214;

    /* 2. Поднимаем контраст границ (нейтральные): #20202b на фоне #181818
     *    почти невидим (~1.2:1). Делаем рамки карточек/таблиц/инпутов видимыми. */
    --tblr-border-color: #34343c;
    --tblr-border-color-translucent: var(--tblr-border-color);
    --tblr-dark-mode-border-color: #3a3a42;

    /* 3. Осветляем вторичный/третичный текст до читаемого на тёмном фоне. */
    --tblr-secondary-color: rgba(201, 193, 214, .85);
    --tblr-secondary-color-rgb: 201, 193, 214;
    --tblr-tertiary-color: rgba(201, 193, 214, .65);
    --tblr-tertiary-color-rgb: 201, 193, 214;

    /* 4. Нейтрализуем фиолетово-тонированные поверхности (та же светлота,
     *    но без сиреневого) — чтобы любой акцент садился на них чисто. */
    --tblr-bg-surface: #222226;
    --tblr-secondary-bg: #26262b;
    --tblr-secondary-bg-rgb: 38, 38, 43;
    --tblr-tertiary-bg: #1f1f24;
    --tblr-tertiary-bg-rgb: 31, 31, 36;
    --tblr-light-bg-subtle: #26262b;
    --tblr-dark-bg-subtle: #131316;

    /* 5. Акцентные токены — из --tblr-primary (подмешиваем в фон страницы). */
    --tblr-primary-bg-subtle:     color-mix(in srgb, var(--tblr-primary) 16%, var(--tblr-body-bg, #181818));
    --tblr-primary-border-subtle: color-mix(in srgb, var(--tblr-primary) 32%, var(--tblr-body-bg, #181818));
    --tblr-primary-text-emphasis: color-mix(in srgb, var(--tblr-primary) 65%, #fff);
    --tblr-link-color:            color-mix(in srgb, var(--tblr-primary) 70%, #fff);
    --tblr-link-hover-color:      color-mix(in srgb, var(--tblr-primary) 82%, #fff);
    --tblr-code-color:            var(--tblr-link-color);
    --tblr-focus-ring-color:      color-mix(in srgb, var(--tblr-primary) 30%, transparent);
}

/* 6. Выделение текста: Tabler нигде не задаёт ::selection, поэтому в тёмной
 *    теме браузер рисует светлую плашку, на которой текст почти не виден.
 *    Красим выделение в акцент (primary) с белым текстом. */
[data-bs-theme=dark] ::selection {
    background-color: var(--tblr-primary);
    color: #fff;
}
[data-bs-theme=dark] ::-moz-selection {
    background-color: var(--tblr-primary);
    color: #fff;
}

/* ===========================================================================
 * Кастомная шапка админки (layout horizontal): два бара + offcanvas-меню.
 *   • верхний бар (.xwa-topbar) — бренд + topbar-утилиты + тема + аватар
 *   • нижний бар (.xwa-subbar)  — кнопка вызова сайдбара + хлебные крошки
 *   • меню вынесено в offcanvas-сайдбар (.xwa-sidebar), открывается кнопкой
 * Разметка — resources/views/vendor/backpack/theme-tabler/layouts/horizontal.blade.php
 * =========================================================================== */
/* Шапка целиком (оба бара) — поверх offcanvas-backdrop (1040),
 * чтобы при открытом меню верхние бары оставались видимыми и не затемнялись. */
.xwa-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    /* непрозрачный фон: в светлой теме glass.css делает --tblr-bg-surface
     * полупрозрачным, поэтому берём сплошной body-bg, а в тёмной — surface */
    background-color: var(--tblr-body-bg);
    backdrop-filter: none;
}
/* В админке (горизонтальный layout) шапка зафиксирована к вьюпорту (fixed),
 * а не приклеена (sticky). Контент компенсируем отступом сверху на высоту
 * шапки (--xwa-header-h ставит JS). Базовый .xwa-header (sticky) оставляем
 * для публичной шапки CMS, у которой нет bp-layout=horizontal и своя разметка. */
body[bp-layout=horizontal] .xwa-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
body[bp-layout=horizontal] .page-wrapper {
    padding-top: var(--xwa-header-h, 7rem);
}

/* ---------------------------------------------------------------------------
 * ФИКС наложения: шапка перекрывала модалки/выезжающие панели билдеров.
 *
 * Контейнер контента Backpack обёрнут в `.container-fluid.animated.fadeIn`
 * (animate.css). Анимация opacity ДЕРЖИТ на этой обёртке постоянный
 * stacking-context (в Chromium), а сама обёртка — z-index:auto (уровень ~0).
 * Из-за этого ЛЮБАЯ модалка/панель внутри неё (Bootstrap .modal, z-index:1055)
 * прижималась к уровню обёртки и оказывалась НИЖЕ фикс-шапки (z-index:1050) —
 * её перекрывала шапка, даже при z-index:99999 на самой модалке.
 *
 * Снимаем анимацию у обёртки контента в админке: stacking-context исчезает,
 * модалки выходят в корневой контекст и штатно открываются поверх шапки.
 * (Затраты — лёгкий fade-in контента при загрузке страницы; ради корректного
 * наложения модалок им жертвуем.) Диагностировано через elementsFromPoint +
 * побайтовый bisect предков: ловушка начиналась ровно на .animated.fadeIn. */
body[bp-layout=horizontal] .page-body .container-fluid.animated.fadeIn {
    animation: none !important;
}
[data-bs-theme=dark] .xwa-header { background-color: var(--tblr-bg-surface, var(--tblr-body-bg)); }
/* Между верхним и нижним баром делителя НЕТ — они читаются как одна шапка.
 * Единственный тонкий делитель — под всей шапкой (отделяет от контента). */
.xwa-topbar { border-bottom: 0; }

.xwa-subbar {
    border-bottom: 1px solid var(--tblr-border-color);
    padding-block: .25rem;
    min-height: 2.75rem;
}
/* крошки в саб-баре — всегда видимы (тема прячет их .d-none d-lg-block) и слева */
.xwa-subbar nav[aria-label="breadcrumb"] { display: block !important; }
.xwa-subbar .breadcrumb {
    margin: 0 0 0 .5rem !important;
    justify-content: flex-start !important;
}

/* Кнопка вызова меню — только иконка, без рамки; бургер морфит в крестик */
.xwa-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tblr-secondary-color);
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
}
/* Никакого фона/подложки ни в одном состоянии — кнопка сливается с баром,
 * единственная обратная связь — морфинг иконки ☰ ⇄ ✕ и цвет иконки. */
.xwa-menu-btn:hover,
.xwa-menu-btn:focus,
.xwa-menu-btn:active,
.xwa-menu-btn.is-open {
    color: var(--tblr-body-color);
    background: transparent !important;
    box-shadow: none !important;
}
.xwa-burger {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 14px;
}
.xwa-burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
}
.xwa-burger span:nth-child(1) { top: 0; }
.xwa-burger span:nth-child(2) { top: 6px; }
.xwa-burger span:nth-child(3) { top: 12px; }
.xwa-menu-btn.is-open .xwa-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.xwa-menu-btn.is-open .xwa-burger span:nth-child(2) { opacity: 0; }
.xwa-menu-btn.is-open .xwa-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* offcanvas-сайдбар: фикс. ширина, выезжает ПОД шапкой; перебиваем
 * fixed-позицию/ширину, которые navbar-vertical навешивает на тот же элемент.
 * Непрозрачный фон (иначе в светлой теме панель просвечивает). */
.xwa-sidebar.offcanvas { --tblr-offcanvas-width: 17rem; --bs-offcanvas-width: 17rem; }
.xwa-sidebar.navbar-vertical.offcanvas {
    /* Tabler навешивает на .navbar-vertical:not(.navbar-fixed) правило
     * position:absolute!important (@media min-width:992px) — оно перебивает
     * fixed у .offcanvas, и панель начинает «ездить» вместе со скроллом
     * страницы (после прокрутки уезжает за вьюпорт → меню выглядит куцым).
     * Возвращаем fixed (наша специфичность выше Tabler-овской). */
    position: fixed !important;
    top: var(--xwa-header-h, 0);
    bottom: auto;
    height: calc(100vh - var(--xwa-header-h, 0));
    height: calc(100dvh - var(--xwa-header-h, 0));
    width: 17rem !important;
    max-width: 85vw;
    min-width: 0;
    box-shadow: none;
    border-right: 1px solid var(--tblr-border-color);
    background-color: var(--tblr-body-bg) !important;
    backdrop-filter: none !important;
}
[data-bs-theme=dark] .xwa-sidebar.navbar-vertical.offcanvas {
    background-color: var(--tblr-bg-surface, var(--tblr-body-bg)) !important;
}
.xwa-sidebar .offcanvas-body { padding: 0 .5rem 1rem; overflow-y: auto; }
.xwa-sidebar .navbar-nav { width: 100%; }

/* Поле поиска по меню — липкое сверху панели */
.xwa-menu-search {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .65rem .25rem;
    margin: 0 -.5rem .25rem;
    background: inherit;
}
.xwa-menu-search .form-control { background-color: var(--tblr-body-bg); }

/* Меню — плоский список «подпись + плитки», без вложенности, отступов и пилюль.
 * (структура задаётся в inc/menu_items: menu-dropdown-header = подпись,
 *  menu-item = плитка-кнопка) */

/* Подпись секции — мелкий капс, приглушённый, как «PAGE SECTIONS» в референсе */
.xwa-sidebar .dropdown-header {
    margin: 0;
    padding: 1rem .75rem .35rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tblr-secondary-color);
}
.xwa-sidebar .dropdown-header .nav-icon { display: none; }

/* Пункт-плитка: во всю ширину, без скруглений и боковых отступов */
.xwa-sidebar .nav-item .nav-link {
    justify-content: flex-start !important;
    text-align: left;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: .5rem .75rem;
    color: var(--tblr-body-color);
}
.xwa-sidebar .nav-item .nav-link:hover {
    background: var(--tblr-tertiary-bg) !important;   /* лёгкая плитка на ховер */
}
/* Активный пункт — БЕЗ пилюли, помечен подчёркиванием-акцентом */
.xwa-sidebar .nav-item .nav-link.active {
    background: transparent !important;
    color: var(--tblr-primary) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--tblr-primary);
}