/*
    «دستور ساخت گالری» — the appearance of that one management, and of nothing
    else (تسک ۱۴۰۵/۰۶/۱۷/۰۱، فشرده‌سازی رابط).

    Everything here is scoped to `.fi-mgb-page`, the class the page puts on its
    own `.fi-page` wrapper. The header, the filter panel and the date box are all
    markup the whole panel shares, so a rule written without that scope would
    repaint seventy other managements; ظاهر-دستور-گالری-۰۷۰ forbids exactly that.

    Nothing in here changes what the page *does*: no filter is removed, no
    dependency is touched, no query changes. It is height, position and colour.
*/

/* ——— ظاهر-دستور-گالری-۰۰۲ و ۰۰۳: the figure beside the name ———

   «دستور ساخت گالری | ۱» — the name stays white and the number is the panel's
   own yellow, so the eye finds the figure without the title shouting. Only the
   colour of the digits changes: where the number comes from, how it is worked
   out and when it is refreshed are the page's and are untouched
   (ظاهر-دستور-گالری-۰۰۴). */
.fi-mgb-page .mgb-heading-count {
    color: var(--std-color-warning-400);
}

/* The upright rule between the two, which was as bright as the title itself. */
.fi-mgb-page .mgb-heading [aria-hidden='true'] {
    color: var(--std-color-gray-500);
}

/* ——— ظاهر-دستور-گالری-۰۰۵ … ۰۱۲: the header, in one row instead of three ———

   Filament's header is a flex row of two children: the block holding the
   breadcrumbs, the heading and the description, and the block holding the
   buttons. Centred against a two-line description, the buttons end up halfway
   down it — a row of their own, in effect — and the description stops dead where
   they begin and wraps at 672 pixels.

   Made a grid, with the heading block letting its own children through
   (`display: contents`), all three can be placed: breadcrumbs across the top,
   the title and the buttons facing each other, and the description across both
   columns underneath with the whole width to run in. No size is written down and
   nothing is positioned by hand, so it holds at any width; below the panel's own
   `md` the header is already one column and is left exactly as it is
   (ظاهر-دستور-گالری-۰۵۷). The same arrangement «استانداردسازی نمای پنل» has
   carried since محل‌استفاده-۰۰۲. */
.fi-mgb-page .fi-header {
    align-items: flex-start;
}

.fi-mgb-page .fi-header-subheading {
    /* The panel caps a description at 42rem, which is what turned one sentence
       into two lines on a 1440-pixel screen (ظاهر-دستور-گالری-۰۱۱). The words
       themselves are untouched — not shortened, not rewritten, not clipped, and
       the font is the panel's (ظاهر-دستور-گالری-۰۱۰ و ۰۱۲). */
    max-width: none;
}

@media (min-width: 768px) {
    .fi-mgb-page .fi-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 0;
    }

    .fi-mgb-page .fi-header > div:first-child {
        display: contents;
    }

    .fi-mgb-page .fi-header .fi-breadcrumbs {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-block-end: 1rem;
    }

    .fi-mgb-page .fi-header-heading {
        grid-column: 1;
        grid-row: 2;
    }

    /* The space the panel puts above the buttons is there for the stacked
       header, where they sit under the title. Here they are beside it, and that
       space is what would push them off its line. */
    .fi-mgb-page .fi-header-actions-ctn {
        grid-column: 2;
        grid-row: 2;
        margin-block-start: 0;
    }

    .fi-mgb-page .fi-header-subheading {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-block-start: 0.35rem;
    }
}

/* ——— ظاهر-دستور-گالری-۰۲۲ و ۰۴۷: the panel itself, closer together ———

   The grid is the page's own (six columns, declared in PHP). What is left here
   is the air between the rows and around the edge, which is what made a panel of
   eleven filters a thousand pixels tall. */
.fi-mgb-page .fi-ta-filters-above-content-ctn .fi-ta-filters {
    padding-block: 0.75rem;
}

.fi-mgb-page .fi-ta-filters .fi-fo-component-ctn {
    gap: 0.6rem 0.75rem;
}

/* «اعمال فیلترها» at the end of the panel, on the line it already ends on,
   without a band of empty space above it (ظاهر-دستور-گالری-۰۴۶ … ۰۴۸). Its
   behaviour is the table's own and is untouched. */
.fi-mgb-page .fi-ta-filters-actions-ctn {
    margin-block-start: 0.5rem;
}

/* ——— ظاهر-دستور-گالری-۰۳۴ … ۰۳۸: «از تاریخ» و «تا تاریخ» ———

   The panel's date box is a transparent input on a dark page, which is why the
   two read as disabled fields. Painted the panel's yellow with black writing,
   they read as what they are: something to click.

   Only the box changes. The calendar it opens, the value it holds, the format it
   sends and everything the filter does with that value are the picker's own and
   are not touched here (ظاهر-دستور-گالری-۰۳۹). */
.fi-mgb-page .fi-ta-filters .fi-jdp-input {
    background-color: var(--std-color-warning-400);
    color: var(--std-color-gray-950);
    font-weight: 500;
    cursor: pointer;
    box-shadow: none;
    --tw-ring-color: transparent;
}

/* ظاهر-دستور-گالری-۰۳۷: before a day is picked the box still says, legibly,
   what shape of thing goes in it. */
.fi-mgb-page .fi-ta-filters .fi-jdp-input::placeholder {
    color: var(--std-color-gray-800);
    opacity: 1;
}

/* The wrapper Filament draws around an input carries the ring and the white
   background of its own; on this one field it would show as a pale border round
   the yellow. */
.fi-mgb-page .fi-ta-filters .fi-jdp-field .fi-input-wrp,
.fi-mgb-page .fi-ta-filters .fi-jdp-field {
    background-color: transparent;
}

/* The line under the box that repeats the picked day in words — black on the
   page, not on the button, so it stays readable. */
.fi-mgb-page .fi-ta-filters .fi-jdp-readable {
    color: var(--std-color-warning-400);
}