/*
 * Sticky Filament headers for long admin pages.
 * Kept in public/css so it works without a Vite build step.
 */

.fi-topbar-ctn {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--fi-body-bg, #09090b);
}

:root:not(.dark) .fi-topbar-ctn {
    background: var(--fi-body-bg, #ffffff);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fi-page-header-main-ctn {
    position: static;
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}

.fi-page-header-main-ctn > .fi-header {
    position: sticky;
    top: 4rem;
    z-index: 20;
    margin-inline: -1rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--fi-body-bg, #09090b) 94%, transparent);
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(14px);
}

:root:not(.dark) .fi-page-header-main-ctn > .fi-header {
    background: color-mix(in srgb, var(--fi-body-bg, #ffffff) 94%, transparent);
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

@media (max-width: 768px) {
    .fi-page-header-main-ctn > .fi-header {
        top: 3.5rem;
        margin-inline: -0.75rem;
        padding: 0.75rem;
    }
}

/*
 * Sticky table head + sticky pagination footer for selected table pages
 * (Фото КП / Ремонт КП / Фактор засорения) — marked with .tko-sticky-table-page
 * via Page::getPageClasses().
 *
 * .fi-ta-content-ctn is the table's own horizontal-scroll container
 * (overflow-x). Any non-visible `overflow` on an ancestor becomes the
 * containing block for `position: sticky` descendants in both axes in most
 * browsers — so a plain `top: <viewport offset>` on thead th never actually
 * sticks to the viewport there, it tries to stick inside that (unbounded,
 * page-flow-height) box instead, which looks like "doesn't stick / overlaps
 * the first row". Fix: make the box itself a real, height-bounded scroll
 * container and stick thead to *its* top (top: 0).
 *
 * Only applied from the `lg` breakpoint up, matching Filament's own
 * mobile "stacked card" breakpoint — on narrow screens the table renders as
 * cards (no thead row to stick), and bounding the container's height there
 * previously produced an unwanted second, always-visible scrollbar.
 */
@media (min-width: 1024px) {
    /*
     * max-height здесь — только запасной вариант на случай, если JS ещё не
     * отработал (см. public/js/tko-sticky-tables.js). Скрипт меряет реальную
     * высоту контента над таблицей (шапка, фильтры, формы — что угодно) и
     * выставляет точный inline max-height, который перекрывает это значение.
     * Так страница не даёт два скролла одновременно независимо от того,
     * сколько контента показано над таблицей на конкретной странице.
     */
    .tko-sticky-table-page .fi-ta-content-ctn {
        max-height: calc(100vh - 14rem);
        min-height: 320px;
        overflow-y: auto;
    }

    .tko-sticky-table-page .fi-ta-table thead th {
        position: sticky;
        top: 0;
        z-index: 15;
        background: var(--fi-body-bg, #09090b);
    }

    :root:not(.dark) .tko-sticky-table-page .fi-ta-table thead th {
        background: var(--fi-body-bg, #ffffff);
    }
}

.tko-sticky-table-page .fi-ta-main > nav.fi-pagination {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: var(--fi-body-bg, #09090b);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.12);
}

:root:not(.dark) .tko-sticky-table-page .fi-ta-main > nav.fi-pagination {
    background: var(--fi-body-bg, #ffffff);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

/*
 * Keep Filament modals above sticky topbar and sidebar layers.
 * This fixes cases where action modals appear under the page chrome.
 */
.fi-modal,
.fi-modal > .fi-modal-close-overlay,
.fi-modal > .fi-modal-window-ctn {
    z-index: 10000 !important;
}

.fi-modal {
    position: fixed !important;
    inset: 0 !important;
}

.fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open > .fi-modal-close-overlay,
.fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open > .fi-modal-window-ctn {
    z-index: 10010 !important;
}

.fi-modal > .fi-modal-close-overlay {
    z-index: 10000 !important;
}

.fi-modal > .fi-modal-window-ctn {
    z-index: 10010 !important;
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    z-index: 10020 !important;
}