/*
 * The column titles of a management table stay put while its rows scroll under
 * them — تسک ۱۴۰۵/۰۶/۱۱/۰۱ (کراولر-اسکرول-۰۰۱ تا ۰۰۷، کراولر-معماری-۰۰۱ تا ۰۰۴).
 *
 * What the operator sees: scrolling a management down carries everything above
 * the table — the page heading, the buttons beside it, whatever cards a page
 * puts there, the search box and the filters — off the top exactly as it always
 * did; from the moment the row of column titles reaches the top of the visible
 * area it stays there, immediately under the panel's own bar, and the rows keep
 * moving beneath it. Scrolling a wide table sideways moves the titles with their
 * columns, because the titles and the rows are one table: nothing is duplicated
 * and nothing is synchronised, so a title cannot end up over another column's
 * data. Scrolling back up puts the row back where it belongs, with no second bar
 * and no gap.
 *
 * This file is the whole of it. There is no list of pages anywhere in it and no
 * page opts in by name (کراولر-معماری-۰۰۱): it is keyed off the panel's two
 * kinds of management table, so every management that has one today has this
 * behaviour, and a management built tomorrow gets it by being built the same way
 * (کراولر-معماری-۰۰۴):
 *
 *   - `.fi-ta-table` — Filament's own table, which every resource list page, and
 *     every relation manager, draws;
 *   - `[data-management-table]` — the marker a hand-written management table in
 *     this panel carries (the employee-activity tables). One attribute, and the
 *     table behaves like every other.
 *
 * Three things this needs that are easy to assume and are not true.
 *
 * One: a sticky `<thead>` sticks to its *nearest scroll container*, and in a
 * Filament v5 table that is `.fi-ta-content-ctn`, which ships `overflow-x: auto`
 * for wide tables. A box that scrolls in one axis scrolls in both as far as CSS
 * is concerned, and since that box is exactly as tall as its table it never
 * scrolls vertically — so a sticky `<thead>` inside it is inert, whatever `top`
 * it is given. The overflow has to move up to the box that does the page's
 * scrolling, which is what the rules below do; the table then scrolls sideways
 * there instead, and the titles travel with the columns for free.
 *
 * Two: the thing that scrolls has to hold *everything above the table too*, or
 * the page header would stay on screen while the rows moved under a pinned bar
 * (بند ۱۰). So the page's own main area becomes the single scrolling box: the
 * heading, the header buttons, the widgets, the toolbar and the table all live
 * in it and all leave through the top of it in the usual order.
 *
 * Three: the height of the panel's own bar is never written down (بند ۱۲). The
 * body becomes a column of exactly the viewport's height, the bar takes what it
 * needs at the top of it and the scrolling box takes the rest — so the pinned
 * titles land under the real bar, whatever height it happens to have, and a bar
 * that changes height later needs nothing changed here.
 */

/*
 * The page itself stops being the thing that scrolls; the main area does.
 *
 * `:has()` is what keeps this off every page that has no management table — the
 * dashboard, the forms, «راهنمای سامانه», «پایش سامانه» — without naming any of
 * them (کراولر-معماری-۰۰۱).
 */
body.fi-body:has(.fi-ta-table, [data-management-table]) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

/* The panel's bar keeps its own height; the rest of the column is the page. */
body.fi-body:has(.fi-ta-table, [data-management-table]) > .fi-layout {
    flex: 1 1 auto;
    min-height: 0;
}

/*
 * The one scrolling box — the full-width column the page sits in, not the page
 * itself (تسک ۰۸_۰۲ بند ۴). `.fi-main` is centred at a maximum width, so while it
 * was the box its scrollbar was drawn beside the content, in the middle of a wide
 * screen, under the bar: a second, unexplained bar on every management list. The
 * column runs from the sidebar to the window's edge, so its scrollbar is where a
 * page's scrollbar is expected, and it still holds everything above the table.
 */
body.fi-body:has(.fi-ta-table, [data-management-table]) .fi-main-ctn {
    min-height: 0;
    overflow: auto;
}

/*
 * `container-type` is not decoration: it makes `100cqw` below mean «as wide as
 * the page's content area», which is how the toolbar and the pagination row keep
 * the width they have today when the table beside them is wider than the screen.
 */
body.fi-body:has(.fi-ta-table, [data-management-table]) .fi-main {
    flex: 0 0 auto;
    container-type: inline-size;
}

/*
 * Filament's own scroll box inside the table gives up its overflow, so the
 * sticky titles resolve against the main area above instead of against a box
 * that never scrolls (the first of the three notes at the top).
 */
body.fi-body:has(.fi-ta-table) .fi-ta-content-ctn {
    overflow: visible;
}

/*
 * A table with no toolbar ships `overflow: hidden` on its card, which would be a
 * scroll container again. `clip` cuts exactly the same corner without scrolling
 * anything, so the card looks identical and the titles still stick.
 */
body.fi-body:has(.fi-ta-table) .fi-ta-ctn:not(.fi-ta-ctn-with-header) {
    overflow: clip;
}

/*
 * With the table free to be wider than its card, the card grows with it — else a
 * wide table would be drawn outside the white (dark: near-black) surface it
 * belongs to and past the line around it.
 *
 * `fit-content`, not `max-content`: a table only exceeds the page when its
 * columns cannot be made to fit at all, which is exactly what `fit-content`
 * measures. `max-content` would instead widen every table to the width at which
 * no cell wraps — «اخبار ورودی» would gain 313px of sideways scrolling it does
 * not have today, and its columns would change width (بند ۲۱).
 */
body.fi-body:has(.fi-ta-table) .fi-ta-ctn {
    width: fit-content;
    min-width: 100%;
}

/*
 * ...and the two rows that are not the table keep the width they have today,
 * rather than being spread across a card that is now as wide as twenty columns:
 * the search box, the filter and column buttons and the pagination all stay
 * exactly where the management put them (بند ۹).
 */
body.fi-body:has(.fi-ta-table) .fi-ta-header-ctn,
body.fi-body:has(.fi-ta-table) .fi-ta-ctn .fi-pagination {
    width: 100cqw;
}

/*
 * The row of column titles itself — the one thing that is pinned (بند ۱۱).
 *
 * `top: 0` is the top of the main area, which begins under the panel's bar, so
 * the pinned row lands at the highest point that is actually visible and never
 * behind the bar (بند ۱۲).
 *
 * The z-index is below Filament's dropdown panels (20), so a filter, a column
 * arranger or a row's own menu still opens over the titles rather than under
 * them, and above the rows, which are not positioned at all.
 */
body.fi-body:has(.fi-ta-table) .fi-ta-table > thead,
body.fi-body:has([data-management-table]) [data-management-table] > thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/*
 * ...and it is opaque while it is pinned (بند ۱۳): the surface the table is
 * drawn on, so nothing about the titles looks different from how they look now,
 * and no text, number, badge, image or checkbox is readable through them as the
 * rows pass underneath. The colour is Filament's own card surface, read from the
 * same variables `.fi-ta-ctn` is painted with, so it follows the light and the
 * dark page by itself.
 */
body.fi-body:has(.fi-ta-table) .fi-ta-table > thead > tr > th {
    background-color: var(--color-white);
}

.dark body.fi-body:has(.fi-ta-table) .fi-ta-table > thead > tr > th {
    background-color: var(--gray-900);
}

/*
 * The panel's own hand-written management tables — «مانیتور فعالیت کارمندان»,
 * «گزارش فعالیت کارمندان» and the two lists on an employee's own page. They are
 * not Filament tables, so they carry the marker instead; everything else about
 * them is untouched.
 */
body.fi-body:has([data-management-table]) [data-management-table] > thead > tr > th {
    background-color: var(--color-white);
}

.dark body.fi-body:has([data-management-table]) [data-management-table] > thead > tr > th {
    background-color: var(--gray-900);
}