/* resources/css/filament/panels.css
 *
 * Единый «хром» всех Filament-панелей (admin / system / club):
 * высокая шапка, сайдбар под ней, логотип, отступ контента.
 *
 * Подключение: Css-актив FilamentAsset (id: panels) в AppServiceProvider.
 * Публикация в public: php artisan filament:assets → public/css/app/panels.css.
 *
 * ВАЖНО (каскад): @filamentStyles рендерит этот файл ДО базовой темы Filament,
 * поэтому все свойства усилены !important — так переопределения перебивают
 * утилиты темы независимо от порядка загрузки (раньше те же правила жили в
 * инлайн-<style> хука panels::styles.after и перебивали тему порядком).
 *
 * Цвета — из дизайн-токенов (docs/DESIGN.md):
 *   граница light: #E6E9E8 = Gray-200
 *   граница dark:  #3A3B3B = Gray-800
 *   фон dark:      #272727 = Gray-900
 */

/* 1. ШАПКА (TOPBAR) — фиксированная, высота 8rem */
.fi-topbar {
    height: 8rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    border-bottom: 1px solid #E6E9E8 !important;
    background-color: #FFFFFF !important;
}
.dark .fi-topbar {
    background-color: #272727 !important;
    border-bottom: 1px solid #3A3B3B !important;
}

/* 2. ВНУТРЕННОСТИ ШАПКИ (NAV) — всё в одну линию по центру */
.fi-topbar > nav {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 3. ЛОГОТИП в шапке (класс ставит хук panels::topbar.start) */
.custom-app-logo {
    height: 6rem !important;
    width: auto !important;
    margin-right: 2rem !important;
    object-fit: contain !important;
}

/* 4. БОКОВАЯ ПАНЕЛЬ — сдвинута под шапку.
   Фон: на мобильных (<1024px) сайдбар — выезжающий ящик поверх контента
   (у Filament: fixed inset-y-0), поэтому фон обязан быть непрозрачным, иначе
   меню «просвечивает» страницу (баг 20.10). На десктопе (>=1024px) сайдбар
   статичен и сидит на фоне страницы — оставляем прозрачным (как
   lg:bg-transparent у самого Filament). Цвета фона — в цвет шапки (п.1):
     light: #FFFFFF; dark: #272727 = Gray-900. */
.fi-sidebar {
    top: 8rem !important;
    height: calc(100vh - 8rem) !important;
    z-index: 40 !important;
    border-right: 1px solid #E6E9E8 !important;
    background-color: #FFFFFF !important;
}
.dark .fi-sidebar {
    border-right: 1px solid #3A3B3B !important;
    background-color: #272727 !important;
}
@media (min-width: 1024px) {
    .fi-sidebar,
    .dark .fi-sidebar {
        background-color: transparent !important;
    }
}

/* Логотип внутри сайдбара скрыт — он теперь в шапке */
.fi-sidebar-header {
    background-color: transparent !important;
    border-bottom: none !important;
}
.fi-sidebar-header .fi-logo {
    display: none !important;
}

/* 5. КОНТЕНТ — отступ под шапку */
.fi-main {
    margin-top: 8rem !important;
}

/* Бургер-кнопку на десктопе прячем (шапка и так видна) */
@media (min-width: 1024px) {
    .fi-topbar > nav > button {
        display: none !important;
    }
}

/* 6. ФУТЕР ПРИЛОЖЕНИЯ (50px, fixed) — partial resources/views/partials/app-footer.blade.php
      с параметром panel (renderHook panels::body.end во всех трёх *PanelProvider).
      Разметка partial-а общая для публичных страниц и панели; здесь — panel-режим:
      fixed-полоса внизу окна, тема следует за классом dark на <html> (Filament v3).
      Цвета — из дизайн-токенов литералами (в панели partial design-tokens не
      подключается, docs/DESIGN.md, правило 1):
        light: фон Gray-50 #F8F9F9, текст Gray-700 #505252, граница Gray-200 #E6E9E8
        dark:  фон Gray-950 #181818, текст #FFFFFF, граница rgba(255,255,255,0.05)
      hover служебной ссылки — Primary-600 #195178. */
.app-footer.app-footer--panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin-inline: 0 !important;
    z-index: 30 !important;
    background-color: #F8F9F9 !important;
    color: #505252 !important;
    border-top: 1px solid #E6E9E8 !important;
}
.app-footer.app-footer--panel .app-footer__service {
    color: #B2B7B6 !important;
}
.app-footer.app-footer--panel .app-footer__service:hover {
    color: #195178 !important;
}

/* Светлая тема панели: лого разработчика — d989.svg (тёмная версия лого скрыта) */
.app-footer.app-footer--panel .app-footer__logo-dark {
    display: none !important;
}
.app-footer.app-footer--panel .app-footer__logo-light {
    display: inline-block !important;
}

/* Тёмная тема панели (:root.dark / .dark на <html>) */
.dark .app-footer.app-footer--panel {
    background-color: #181818 !important;
    color: #FFFFFF !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}
.dark .app-footer.app-footer--panel .app-footer__service {
    color: rgba(255, 255, 255, 0.35) !important;
}
.dark .app-footer.app-footer--panel .app-footer__service:hover {
    color: #195178 !important;
}
.dark .app-footer.app-footer--panel .app-footer__logo-dark {
    display: inline-block !important;
}
.dark .app-footer.app-footer--panel .app-footer__logo-light {
    display: none !important;
}

/* Компенсация fixed-футера (50px): контент и навигация не должны уходить под него.
   Паддинг на body нельзя («мёртвый ход» прокрутки ломает sticky-шапку/сайдбар) —
   компенсируем нижние отступы контейнеров (по образцу wushu-expert, правка 05.10). */
.fi-main {
    padding-bottom: 60px !important;
}
.fi-sidebar {
    padding-bottom: 50px !important;
}
.fi-simple-layout {
    padding-bottom: 50px !important;
}

/* 7. МОДАЛКИ FILAMENT — как QR-модалка wushu-expert (виджет
       public-results-qr-widget, решение заказчика 05.10): затемнена только
       полоса между шапкой (8rem) и футером (50px) на всю ширину окна,
       шапка и футер НЕ гаснут, окно модалки — светлое поверх затемнения.
       В DOM (vendor: filament/support .../components/modal/index.blade.php)
       оба слоя — соседи внутри корня .fi-modal: .fi-modal-close-overlay
       (fixed inset-0 z-40, затемнение) и следующий за ним div (fixed inset-0
       z-40, обёртка окна; КЛАССА у обёртки в этой версии Filament нет —
       селектор «+ div», придуманные имена не работают: из-за мёртвого
       селектора обёртка оставалась z-40 и затемнение гасило саму модалку).
       Ограничение слоёв top/bottom оставляет шапку (z-50) и футер (z-30)
       поверх полосы и незатемнёнными, z-45/46 разводят затемнение и обёртку
       внутри полосы (обёртка — поверх затемнения). Раскладка карточки
       переопределена на 1fr auto 1fr — окно по центру полосы, как margin: auto
       у карточки в wushu-expert. Корень .fi-modal статический и stacking
       context не создаёт.
       ВАЖНО: браузеру отдаётся public/css/app/panels.css (копия этого файла
       командой `php artisan filament:assets`) — после правки ассет нужно
       пересобирать (закреплено тестами QrCodeModalTest: слои + синхронность
       исходника и опубликованной копии). */
.fi-modal-close-overlay {
    top: 8rem !important;
    bottom: 50px !important;
    z-index: 45 !important;
}
.fi-modal-close-overlay + div {
    top: 8rem !important;
    bottom: 50px !important;
    z-index: 46 !important;
}
.fi-modal-close-overlay + div > div {
    grid-template-rows: 1fr auto 1fr !important;
}

/* ------------------------------------------------------------------
   Заготовки из старой заглушки admin/theme.css. Эти правила никогда
   не были активны (заглушка не подключалась) — раскомментировать
   осознанно при появлении симптомов:

   Модалка из-под высокой шапки (лучшее решение — раздел 7 выше):
   .fi-modal-close-overlay + div {
       padding-top: 9rem;
   }

   Непрозрачный мобильный сайдбар — на admin-панели ту же задачу решает
   JS-хак forceOpaqueSidebar (AdminPanelProvider, хук panels::scripts.after).
   ------------------------------------------------------------------ */


/* 8. КНОПКИ «ПАНЕЛИ УПРАВЛЕНИЯ ТУРНИРОМ» (ViewTournament, getHeaderActions)
      и кнопки вкладок турнира «Категории», «Взвешивание», «Все бои»,
      «Расписание боёв» (headerActions RelationManager-ов, живут в .fi-ta-actions):
      все кнопки одинаковой минимальной ширины (10.5rem) и высоты, с внутренними
      отступами; подписи — строго в одну строку (white-space: nowrap): ни
      «Пульт», ни «Построить расписание боёв» на вторую строку не переносятся.
      Длинные подписи расширяют кнопку по содержимому (width: max-content),
      короткие остаются одинаковыми (min-width 10.5rem); раньше ширина была
      фиксированной 13.5rem — ряд кнопок не умещался в шапке.
      Ряды кнопок — по правому краю и умещаются в одну строку: при тесноте
      шапка переносит заголовок и кнопки на свои строки (flex-wrap), сами
      кнопки не разбиваются. Класс tournament-header-btn ставит каждая кнопка
      через ->extraAttributes() (закреплено TournamentBoardButtonsTest). */
.fi-header:has(.tournament-header-btn) {
    flex-wrap: wrap !important;
}
/* Обёртка кнопок шапки (div, внутри которого .fi-ac) — к правому краю:
      при переносе ряда на свою строку justify-between оставляет одиночный
      элемент строки у левого края, margin-inline-start: auto прижимает
      обёртку вправо и в строке с заголовком, и на своей строке. */
.fi-header:has(.tournament-header-btn) > div:last-child {
    margin-inline-start: auto !important;
}
.fi-ac:has(.tournament-header-btn) {
    gap: 0.375rem !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
}
/* Кнопки вкладок (tables::actions → .fi-ta-actions): тот же тесный gap
      и правая выключка ряда (в т.ч. перенесённых строк кнопок). */
.fi-ta-actions:has(.tournament-header-btn) {
    gap: 0.375rem !important;
    margin-inline-start: auto !important;
    justify-content: flex-end !important;
}
.tournament-header-btn {
    min-width: 10.5rem !important;
    width: max-content !important;
    min-height: 2.75rem !important;
    padding: 0.5rem 0.625rem !important;
    gap: 0.25rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
.tournament-header-btn .fi-btn-label {
    white-space: nowrap !important;
    overflow-wrap: normal;
    text-align: center;
}

/* 9. СКРОЛЛБАР — тонкий бегунок (по образцу wushu-expert): красный accent-red
   (#BA0608 = ACCENT_RED_HEX), 5px. Дорожка: light — Gray-200 #E6E9E8,
   dark — Gray-900 #272727. */
* {
    scrollbar-width: thin !important;
    scrollbar-color: #BA0608 var(--fe-scroll-track, #E6E9E8) !important;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--fe-scroll-track, #E6E9E8);
}

::-webkit-scrollbar-thumb {
    background-color: #BA0608 !important;
    border-radius: 3px;
}

.dark {
    --fe-scroll-track: #272727;
}

/* 10. РАСКРЫВАЮЩИЙСЯ СОСТАВ КАТЕГОРИИ (вкладка «Категории» панели управления
       турниром, колонка «Бойцов» CategoriesRelationManager). В ячейке —
       нативный <details>/<summary> (партиал
       resources/views/filament/tournament/category-entries.blade.php):
       клик по счётчику разворачивает список бойцов категории этого турнира,
       JS не требуется. Строка таблицы растягивается по высоте ячейки.
       Цвета — из дизайн-токенов (docs/DESIGN.md): граница light #E6E9E8,
       dark #3A3B3B. */
.category-entries-cell {
    white-space: normal !important;
}

.category-entries {
    white-space: normal;
    min-width: 10rem;
}

.category-entries__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.category-entries__summary::-webkit-details-marker {
    display: none;
}

/* Счётчик бойцов: зелёный (больше одного) / янтарный (0-1) — как цвет
   прежнего бейджа колонки. data-entry-count — маркер для тестов. */
.category-entries__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}
.category-entries__count.is-ok {
    background-color: #DCFCE7;
    color: #166534;
}
.category-entries__count.is-warn {
    background-color: #FEF3C7;
    color: #92400E;
}
.dark .category-entries__count.is-ok {
    background-color: #14532D;
    color: #BBF7D0;
}
.dark .category-entries__count.is-warn {
    background-color: #78350F;
    color: #FDE68A;
}

/* Шеврон: поворот на 180° при раскрытии */
.category-entries__chevron {
    width: 1rem;
    height: 1rem;
    color: #6B7280;
    transition: transform 0.15s ease-in-out;
}
.dark .category-entries__chevron {
    color: #9CA3AF;
}
.category-entries[open] .category-entries__chevron {
    transform: rotate(180deg);
}

/* Панель со списком бойцов */
.category-entries__panel {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #E6E9E8;
    min-width: 16rem;
    max-width: 22rem;
}
.dark .category-entries__panel {
    border-top-color: #3A3B3B;
}

.category-entries__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0;
}
.category-entries__item + .category-entries__item {
    border-top: 1px dotted #E6E9E8;
}
.dark .category-entries__item + .category-entries__item {
    border-top-color: #3A3B3B;
}

.category-entries__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
}
.dark .category-entries__name {
    color: #F3F4F6;
}

.category-entries__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: #6B7280;
}
.dark .category-entries__meta {
    color: #9CA3AF;
}

.category-entries__empty {
    font-size: 0.75rem;
    color: #6B7280;
    font-style: italic;
}
.dark .category-entries__empty {
    color: #9CA3AF;
}