/*
 * Точечные правки оформления панели: таблицы (2026-07-30) и раскладка кнопок
 * шапки Инфопанели (2026-08-01) — всё, для чего у Filament нет публичного API.
 *
 * Общие правки для ВСЕХ таблиц Filament (замечание 2026-07-30):
 * 1) Кнопки построчных действий не толкают таблицу вбок — переносятся на новую
 *    строку внутри ячейки вместо расширения ширины таблицы за экран.
 * 2) Длинные подписи кнопок в таблицах переносятся по словам, а не растягивают
 *    кнопку в одну длинную строку.
 * 3) Шапка таблицы (строка заголовков колонок) остаётся видимой при прокрутке
 *    строк — прилипает под верхней панелью Filament.
 *
 * Файл НЕ проходит через Tailwind (регистрируется как отдельный статический
 * актив через FilamentAsset, см. AppServiceProvider) — Tailwind-классы вроде
 * list-disc внутри него не соберутся, поэтому здесь только обычный CSS.
 */

/* (1) Построчные действия переносятся на новую строку, а не растягивают таблицу.
   Filament по умолчанию форсирует одну строку на экранах ≥640px (sm:fi-not-wrapped)
   — !important нужен, чтобы перебить эту утилитную Tailwind-класс без сборки. */
.fi-ta-actions.sm\:fi-not-wrapped {
    flex-wrap: wrap !important;
}

/* (2) Длинные подписи кнопок в таблицах переносятся по словам. */
.fi-ta-header-toolbar .fi-btn,
.fi-ta-actions .fi-btn {
    white-space: normal;
    max-width: 12rem;
    text-align: center;
}

/* (3) Прилипающая шапка таблицы — top совпадает с высотой топбара Filament (4rem). */
.fi-ta-content table.fi-ta-table > thead > tr > th {
    position: sticky;
    top: 4rem;
    z-index: 20;
    background-color: #f9fafb;
}

:where(.dark, .dark *) .fi-ta-content table.fi-ta-table > thead > tr > th {
    background-color: #111827;
}

/*
 * (4) Кнопки шапки Инфопанели — в два ряда (замечание 2026-08-01).
 * Шесть кнопок одной flex-строкой не помещались на 1280px. Сетка 3 колонки:
 * верхний ряд — три жёлтые «Обновить» (пишут наружу), нижний — три серых
 * «Предпросмотр» (read-only). Порядок кнопок задан в
 * Dashboard::getHeaderActions() и повторяется в обоих рядах, поэтому каждый
 * предпросмотр встаёт под своей кнопкой обновления сам, без правки колонок.
 *
 * Четвёртую колонку пробовали 19.08 (под кнопку каталога) — на 1440px четвёртая
 * кнопка обрезается правым краем, та же беда, ради которой сетку и заводили.
 * Саму кнопку каталога с Инфопанели потом убрали совсем: обновление каталога
 * живёт на своей странице. Три колонки — потолок для этих подписей.
 * Браузер без :has() просто оставит прежнюю flex-строку — деградация безопасная.
 */
/* Шапка Filament — flex БЕЗ переноса: пара «заголовок + кнопки» задавала
   минимальную ширину всей области контента, и страница уезжала вправо (кнопка
   справа обрезалась). Разрешаем блоку кнопок переноситься на свою строку и
   сжиматься — тогда ему достаётся вся ширина контента. */
.fi-header:has(.mp-dash-action) {
    flex-wrap: wrap;
}

.fi-header:has(.mp-dash-action) .fi-header-actions-ctn {
    min-width: 0;
}

.fi-ac:has(> .mp-dash-action) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: flex-end;
    align-items: start;
}

/* Если ширины всё же не хватает — подпись переносится по словам, а не толкает
   страницу вбок (тот же принцип, что у кнопок в таблицах выше). */
.fi-ac > .mp-dash-action {
    white-space: normal;
    text-align: center;
}

/* Узкий экран: колонки в ряд всё равно не влезут — кнопки в столбик. */
@media (max-width: 1023px) {
    .fi-ac:has(> .mp-dash-action) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * (5) Модалки предпросмотра на Инфопанели (замечание 2026-08-18).
 * Раньше предпросмотры показывались плашкой-уведомлением: узкая колонка, строки
 * склеены через <br>, прокрутки нет — список из 13 площадок в неё не помещался.
 * Теперь это модальное окно с итоговой шапкой и таблицей; прокручивается только
 * таблица, итог и заголовки колонок остаются на виду.
 *
 * Классы свои, а не Tailwind: этот файл идёт мимо сборки Tailwind (см. шапку),
 * а наши Blade-шаблоны не сканируются сборкой темы Filament — утилитный класс
 * просто не появился бы в CSS.
 */
.mp-preview-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.mp-preview-tile {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #f9fafb;
}

.mp-preview-tile-label {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6b7280;
}

.mp-preview-tile-value {
    display: block;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Прокрутка живёт здесь и только здесь: окно не растёт по высоте, шапка таблицы
   прилипает к верху области прокрутки. 45vh подобраны так, чтобы на обычном
   экране всё окно (итог + таблица + примечания) помещалось целиком и итог не
   уезжал за край — длинные списки прокручиваются внутри таблицы. */
.mp-preview-scroll {
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.mp-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mp-preview-table th,
.mp-preview-table td {
    padding: 0.375rem 0.625rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}

.mp-preview-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f9fafb;
    font-weight: 600;
}

.mp-preview-table .mp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mp-preview-section-title {
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.mp-preview-list {
    margin: 0 0 0.25rem;
    padding-left: 1.1rem;
    list-style: disc;
    font-size: 0.875rem;
}

.mp-preview-note {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.75rem;
}

.mp-preview-warn {
    border: 1px solid #fcd34d;
    background-color: #fffbeb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.mp-preview-danger {
    border: 1px solid #fca5a5;
    background-color: #fef2f2;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.mp-preview-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
}

:where(.dark, .dark *) .mp-preview-tile,
:where(.dark, .dark *) .mp-preview-table thead th {
    background-color: #111827;
    border-color: #374151;
}

:where(.dark, .dark *) .mp-preview-scroll {
    border-color: #374151;
}

:where(.dark, .dark *) .mp-preview-table th,
:where(.dark, .dark *) .mp-preview-table td {
    border-bottom-color: #1f2937;
}

:where(.dark, .dark *) .mp-preview-tile-label,
:where(.dark, .dark *) .mp-preview-note {
    color: #9ca3af;
}

:where(.dark, .dark *) .mp-preview-warn {
    border-color: #92400e;
    background-color: #1f1a0b;
}

:where(.dark, .dark *) .mp-preview-danger {
    border-color: #991b1b;
    background-color: #24100f;
}

/*
 * (6) Страница «Рубильники» (19.08.2026).
 * Классы свои, а не Tailwind: этот файл идёт мимо сборки Tailwind (см. шапку),
 * и утилиты вроде rounded-xl/border/space-y-4, написанные в blade страницы, в
 * собранную тему не попадают — карточки рендерились голым текстом. Тот же
 * приём, что у mp-preview-* выше.
 */
.mp-switch-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mp-switch-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background-color: #ffffff;
    padding: 1rem 1.25rem;
}

.mp-switch-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 18rem;
    flex: 1 1 28rem;
}

.mp-switch-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mp-switch-title {
    font-weight: 600;
}

.mp-switch-note {
    font-size: 0.875rem;
    line-height: 1.35rem;
    color: #6b7280;
    margin: 0;
}

.mp-switch-note code {
    font-size: 0.8125rem;
    background-color: #f3f4f6;
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
}

.mp-switch-modules {
    margin-top: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background-color: #ffffff;
    padding: 1rem 1.25rem;
}

.mp-switch-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.9375rem;
}

.mp-switch-module-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

:where(.dark, .dark *) .mp-switch-card,
:where(.dark, .dark *) .mp-switch-modules {
    border-color: #374151;
    background-color: #111827;
}

:where(.dark, .dark *) .mp-switch-note {
    color: #9ca3af;
}

:where(.dark, .dark *) .mp-switch-note code {
    background-color: #1f2937;
}

/* (4) Кнопка «Выйти» внизу левого меню (просьба директора 2026-08-22).
   Оформлена под обычный пункт навигации Filament. Утилитами Tailwind тут не
   обойтись: CSS панели собран заранее и наш blade-шаблон не сканировал, поэтому
   flex/gap в нём просто не существуют — первая версия рисовала иконку над
   подписью. Цвета взяты из палитры пунктов меню, тёмная тема отдельным блоком. */
.fi-sidebar-logout {
    margin-top: 0.5rem;
    padding-bottom: 0.75rem;
}

.fi-sidebar-logout-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(63 63 70);
    background: transparent;
    cursor: pointer;
    transition: background-color 75ms ease;
}

.fi-sidebar-logout-button:hover,
.fi-sidebar-logout-button:focus-visible {
    background-color: rgb(244 244 245);
    outline: none;
}

.fi-sidebar-logout-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: rgb(161 161 170);
}

:where(.dark, .dark *) .fi-sidebar-logout-button {
    color: rgb(228 228 231);
}

:where(.dark, .dark *) .fi-sidebar-logout-button:hover,
:where(.dark, .dark *) .fi-sidebar-logout-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.05);
}

:where(.dark, .dark *) .fi-sidebar-logout-icon {
    color: rgb(113 113 122);
}