/* «استاندارد فیلترها و فیلدهای انتخابی بازشونده» — every open list in the panel
   (تسک ۱۴۰۵/۰۶/۱۱/۰۱، بند ۶ تا ۳۴).

   One stylesheet, loaded once for the whole panel, rather than a block per management.
   That is the point of the task and not a convenience: the behaviour it standardises was
   written into one management's own `<style>` block, scoped to
   `.fi-resource-match-gallery-builds`, and so could never reach a second page (بند ۴۰).

   Everything here addresses `.choices…`, which is the list Filament v3 draws for a
   `Select` and a `SelectFilter` once they are not native. It therefore covers the funnel
   filters and the direct pickers alike, in a form, in a tab, in the filters panel, in a
   window — wherever a select is (بند ۲۶ و ۲۷).

   Loaded after the compiled theme, so a rule of equal weight here is the one that
   applies; where Filament's own rule has to be outranked the selector carries the extra
   class rather than an `!important`.

   The colours are Baligpa's own (بند ۱۴): the two stripe shades are the ones
   «دستور ساخت گالری» already stripes its list with, and the row under the pointer takes
   the panel's identity green from `panel-identity.css`. */

/* ── بند ۶ تا ۹ — the width of the window follows its own content ───────────────
   Filament draws the list at `w-full`, i.e. exactly the closed field's width, whatever
   is in it. So a field 8rem wide cut every title it offered, however much room the page
   had (بند ۸), and a field with short options was no narrower than one with long ones
   (بند ۶).

   `min-width: 100%` keeps بند ۷ — never narrower than the field itself — and
   `width: max-content` is بند ۶: as wide as this list's real content needs. The ceiling
   is بند ۹: `--pfs-room` is how much space there really is between the field and the
   edge of the window, measured by the standard's script when the list opens, so the
   window grows into the space it has and stops there instead of leaving the screen. */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    min-width: 100%;
    width: max-content;
    max-width: var(--pfs-room, min(var(--pfs-list-max-width), calc(100vw - 2rem)));

    /* بند ۳۴ — above the table, the header band, a card and a sticky row. Filament's own
       `z-10` is below the sticky column headings this panel now draws (`z-20`), so an
       open list was covered by them. */
    z-index: 30;
}

/* تسک ۱۴۰۵/۰۶/۳۰/۲۱، بند ۵ — the window that grows the other way.
   Choices pins the list to both inline edges, which with `width: max-content` leaves it
   anchored to the leading one; the standard's script adds this class to a window whose
   content wants more room than that side has while its other side has more to give. Then
   the trailing edge is the anchor and the window opens away from it instead. Nothing
   about the field changes — this rule addresses the list alone — and `--pfs-room`, set by
   the same measurement, still keeps it inside the screen. */
.choices__list--dropdown.pfs-room-flipped,
.choices__list[aria-expanded].pfs-room-flipped {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* ── بند ۱۰ تا ۱۲ — the height of the window, and the scrolling inside it ───────
   `max-h-60` (15rem) is Filament's, which is around six rows: the reference list shows
   about eleven, and بند ۱۰ asks for that. 22rem is eleven rows of this list, and the
   `60vh` beside it keeps a long list off the bottom of a short window.

   Only the list scrolls, never the whole window, so the search box above it stays where
   it is however far down the options one goes (بند ۱۳). And because this is a maximum
   and not a height, a list of three options is three options tall — بند ۱۱'s
   «فضای خالی بزرگ و غیرضروری» cannot occur. */
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    max-height: var(--pfs-list-max-height);
    overflow-y: auto;
    overscroll-behavior: contain; /* بند ۱۲: the page behind must not scroll instead */
    scrollbar-width: thin;
}

/* The scrollbar itself has to be visible and usable (بند ۱۲). WebKit hides an overlay
   scrollbar until it is moved, which on a long list read with the mouse looked like no
   scrollbar at all. */
.choices__list--dropdown .choices__list::-webkit-scrollbar,
.choices__list[aria-expanded] .choices__list::-webkit-scrollbar {
    width: 0.5rem;
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb,
.choices__list[aria-expanded] .choices__list::-webkit-scrollbar-thumb {
    background-color: rgba(17, 24, 39, 0.25);
    border-radius: 9999px;
}

.dark .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb,
.dark .choices__list[aria-expanded] .choices__list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
}

/* ── بند ۱۴ — every other row a shade apart ────────────────────────────────────
   The two shades are «دستور ساخت گالری»'s own, which is the standard this task points
   at: a 3.5–4.5% wash of the page's ink over the panel's background. A difference the
   eye follows down a long list and does not otherwise notice, and it carries a
   background and nothing else — the font, the size, the padding and the height of a row
   are the ones the list already had (بند ۳۶).

   `:nth-child` is right here: Choices rebuilds the list from the matches on every
   keystroke, so the rows in the document are exactly the rows on screen — unlike a list
   that hides rows with `display: none`, where CSS goes on counting them.

   `:not(.is-highlighted)` is بند ۱۵: the row under the pointer stays the row under the
   pointer. */
.choices__list--dropdown .choices__list > .choices__item--choice:not(.is-highlighted):nth-child(even),
.choices__list[aria-expanded] .choices__list > .choices__item--choice:not(.is-highlighted):nth-child(even) {
    background-color: var(--pfs-stripe);
}

.dark .choices__list--dropdown .choices__list > .choices__item--choice:not(.is-highlighted):nth-child(even),
.dark .choices__list[aria-expanded] .choices__list > .choices__item--choice:not(.is-highlighted):nth-child(even) {
    background-color: var(--pfs-stripe-dark);
}

/* Groups keep their own numbering, so a grouped list stripes inside each group rather
   than across the headings (بند ۲۸: a list's own structure is not rearranged). */
.choices__list--dropdown .choices__group .choices__item--choice:not(.is-highlighted):nth-child(even),
.choices__list[aria-expanded] .choices__group .choices__item--choice:not(.is-highlighted):nth-child(even) {
    background-color: var(--pfs-stripe);
}

.dark .choices__list--dropdown .choices__group .choices__item--choice:not(.is-highlighted):nth-child(even),
.dark .choices__list[aria-expanded] .choices__group .choices__item--choice:not(.is-highlighted):nth-child(even) {
    background-color: var(--pfs-stripe-dark);
}

/* ── بند ۱۵ — the interactive states stay unmistakable over the stripe ─────────
   Filament marks the row under the pointer with `bg-gray-50` / `bg-white/5`, which is
   almost exactly one of the two stripe shades: with the stripe in place, «this row is
   under the pointer» and «this row is an even one» became the same thing. بند ۱۵ says
   which of the two wins — «اولویت با وضوح وضعیت تعاملی است» — so the pointer's row now
   takes a wash of the panel's own identity green, which no stripe can be confused with.

   The chosen row keeps the weight the reference gives it, and a disabled row keeps
   Filament's grey. */
.choices__list--dropdown .choices__item--choice.is-highlighted,
.choices__list[aria-expanded] .choices__item--choice.is-highlighted,
.choices__list--dropdown .choices__item--choice:hover,
.choices__list[aria-expanded] .choices__item--choice:hover,
.dark .choices__list--dropdown .choices__item--choice.is-highlighted,
.dark .choices__list[aria-expanded] .choices__item--choice.is-highlighted,
.dark .choices__list--dropdown .choices__item--choice:hover,
.dark .choices__list[aria-expanded] .choices__item--choice:hover {
    background-color: var(--panel-accent-wash, rgba(31, 121, 87, 0.12));
}

/* The stripe steps aside for the row under the pointer whichever of the two marks it —
   Choices' own `is-highlighted`, which follows the keyboard as well, or the plain
   `:hover` that is true the moment the pointer is over a row. */
.choices__list--dropdown .choices__list > .choices__item--choice:hover:nth-child(even),
.choices__list[aria-expanded] .choices__list > .choices__item--choice:hover:nth-child(even),
.dark .choices__list--dropdown .choices__list > .choices__item--choice:hover:nth-child(even),
.dark .choices__list[aria-expanded] .choices__list > .choices__item--choice:hover:nth-child(even) {
    background-color: var(--panel-accent-wash, rgba(31, 121, 87, 0.12));
}

.choices__list--dropdown .choices__item--choice.is-selected,
.choices__list[aria-expanded] .choices__item--choice.is-selected,
.choices__list--dropdown .choices__item--choice[aria-selected='true'],
.choices__list[aria-expanded] .choices__item--choice[aria-selected='true'] {
    font-weight: 700;
}

.choices__list--dropdown .choices__item--choice.choices__item--disabled,
.choices__list[aria-expanded] .choices__item--choice.choices__item--disabled {
    background-color: transparent;
    opacity: 0.55;
}

/* ── بند ۸ و ۲۴ — a title is shown whole, and every row is the same height ─────
   Up to the window's own ceiling the title is never cut and never given an ellipsis;
   past it the words wrap, which بند ۸ allows and بند ۲۴ then keeps orderly — a wrapped
   row is taller than a one-line row by exactly one line, and nothing else about it
   moves. `min-height` is the height of a row carrying a picture, so a row with a title
   only and a row with a picture are the same height (بند ۲۲ و ۲۴). */
.choices__list--dropdown .choices__item--choice,
.choices__list[aria-expanded] .choices__item--choice {
    display: flex;
    align-items: center;
    gap: var(--pfs-row-gap);
    min-height: 2.25rem;
    white-space: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
}

/* ── بند ۱۶ تا ۲۳ — the picture, or the icon that stands in for it ─────────────
   One slot, always present and always the same size, so the titles of a list line up
   whether the thing above them has a logo or not (بند ۲۲). The size is the reference's
   own 1.25rem, it does not grow with the row and it cannot change the row's height
   (بند ۲۳). `object-fit: contain` keeps a crest's proportions.

   Which of the two is drawn is decided by `panel-filter-standard.js`, from the real
   media the server found: an `<img>` when the option really has one, the type's icon
   when it has not (بند ۱۷ و ۱۸), and the icon again the moment an image fails to load
   (بند ۲۱ — the browser's broken-image mark is never left on screen). */
.pfs-option-media {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pfs-media-size);
    height: var(--pfs-media-size);
    line-height: 1;
}

.pfs-option-media img {
    width: var(--pfs-media-size);
    height: var(--pfs-media-size);
    object-fit: contain;
    border-radius: 0.1875rem;
}

.pfs-option-media .pfs-option-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: #9ca3af;
}

.dark .pfs-option-media .pfs-option-icon {
    color: #6b7280;
}

/* The title beside it, which takes what room is left and wraps rather than being cut. */
.pfs-option-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* The picture is drawn beside the chosen value in the closed field too, so opening the
   list and closing it do not describe the same thing two different ways. Nothing else
   about the closed field changes (بند ۳۶). */
.choices__list--single .pfs-option-media,
.choices__list--multiple .pfs-option-media {
    width: 1.1rem;
    height: 1.1rem;
}

.choices__list--single .choices__item,
.choices__list--multiple .choices__item {
    align-items: center;
}

.choices__list--single .choices__item:has(.pfs-option-media) {
    display: inline-flex;
    gap: 0.375rem;
}

/* ── بند ۱۳ و ۲۵ — the search box, exactly where it was ────────────────────────
   Choices puts its search field above the scrolling list, so it is already outside what
   scrolls; this only keeps it from being scrolled away by anything else and gives it the
   full width of a window that has grown to fit its content. Nothing about the search
   itself is touched — the standard changes no option label, so what matches has not
   changed either (بند ۲۵ و ۳۷). */
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
    position: sticky;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
}

/* ── بند ۳۲ و ۳۳ — opening the window moves nothing on the page ────────────────
   The list is taken out of the flow (Filament's own `absolute`), so no table shifts and
   no field moves. What it could still do is push the page sideways, which is what
   `overflow-x` on the window's own scroller would report as a horizontal scrollbar for
   the whole page; a list that has grown wider than its field is clipped by nothing and
   scrolls nothing, because `--pfs-room` never lets it past the edge.

   `--pfs-flip` is set by the script for a field close enough to the far edge that even
   the room it has is not enough: the window then opens from its other side. In a
   right-to-left panel that is the default anchoring, so the property is normally 0. */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    inset-inline-start: var(--pfs-shift, auto);
}

/* A list that has to open upwards keeps everything else about it (Choices' own class). */
.choices__list--dropdown.is-flipped,
.choices__list[aria-expanded].is-flipped {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* ── The closed field, unchanged but for one thing ─────────────────────────────
   بند ۳۶ — «بدون ضرورت نباید ظاهر فیلد بسته تغییر کند». A select that stops being a
   native one is drawn by Choices rather than by the browser, and Filament styles the two
   to match; the one visible difference left is that a Choices field is as tall as its
   content, so it is given the height Filament's own input has. */
.choices__inner {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
}

.choices[data-type*='select-multiple'] .choices__inner {
    display: block;
}

/* ── تسک ۱۴۰۵/۰۶/۱۱/۰۳ — the two rows that are not options ────────────────────
   A very large list is fetched a page at a time, so three things can now stand where an
   option would: «در حال بارگذاری…», «هیچ گزینه‌ای با جستجوی شما مطابقت ندارد.» and the
   row a failed request leaves behind. بند ۱۶ و ۱۷ ask that the three never be mistaken
   for one another, so the last of them is the only one drawn in the panel's warning
   colour and it can be neither chosen nor striped. */
.choices__list--dropdown .choices__item--choice.pfs-option-error,
.choices__list[aria-expanded] .choices__item--choice.pfs-option-error,
.choices__list--dropdown .choices__item.pfs-option-error,
.choices__list[aria-expanded] .choices__item.pfs-option-error {
    background-color: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    cursor: default;
}

.dark .choices__list--dropdown .choices__item.pfs-option-error,
.dark .choices__list[aria-expanded] .choices__item.pfs-option-error {
    background-color: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

/* تسک ۱۱ — on a list searched by the server the failed row is the retry: it looks
   pressable and is underlined on hover, but it still cannot be chosen. */
.choices__list--dropdown .choices__item.pfs-option-error.pfs-option-retry,
.choices__list[aria-expanded] .choices__item.pfs-option-error.pfs-option-retry {
    cursor: pointer;
    /* A disabled choice takes no pointer at all in the framework's style. */
    pointer-events: auto;
}

.choices__list--dropdown .choices__item.pfs-option-error.pfs-option-retry:hover .pfs-option-label,
.choices__list[aria-expanded] .choices__item.pfs-option-error.pfs-option-retry:hover .pfs-option-label {
    text-decoration: underline;
}

/* ── تسک ۱۴۰۵/۰۶/۲۰/۰۵، بند ۵ — the lists that hold people are drawn taller ────
   «ارتفاع هر ردیف نسبت به ارتفاع فعلی یک‌ونیم برابر شود ... تصویر شخص، نام، سن، تیم یا
   سایر توضیحات موجود باید با فاصله مناسب و به‌صورت خوانا نمایش داده شوند».

   Only the lists about people, and every one of them: «نام شخص», «بازیکن خارج‌شده»,
   «بازیکن ورودی», the referees and the observers, on this page and on any other. Which
   list is about a person is not decided here — `FilterOptionMedia` already answers it for
   the whole panel, and `panel-filter-standard.js` copies its answer onto the window's own
   wrapper so a rule can reach it.

   A row of a list about anything else keeps the standard's 2.25rem exactly, which is what
   keeps this a rule about names and faces rather than a change of the standard itself.
   The picture stays vertically centred in the taller row because the row is a flex line
   with `align-items: center`; it is restated here so that a future rule cannot take it
   away silently. */
.choices[data-filter-type='person'] .choices__list--dropdown .choices__item--choice,
.choices[data-filter-type='person'] .choices__list[aria-expanded] .choices__item--choice {
    min-height: var(--pfs-person-row-min-height);
    padding-top: var(--pfs-person-row-padding-y);
    padding-bottom: var(--pfs-person-row-padding-y);
}

.choices[data-filter-type='person'] .choices__list--dropdown .choices__item--choice .pfs-option-media,
.choices[data-filter-type='person'] .choices__list[aria-expanded] .choices__item--choice .pfs-option-media {
    align-self: center;
}

/* ── The standard's own measurements, named ───────────────────────────────────
   تسک ۱۴۰۵/۰۶/۱۱/۰۳، بند ۳۱ — «قواعد پایه تا جای ممکن از منبع مشترک دریافت شوند».

   «دستور ساخت گالری» draws its five quick pickers with a listbox of its own, for a
   reason this task accepts (see the report): its rows are buttons carrying a logo, and a
   Filament select cannot be a bar of five of those. What it must not do is hold a second
   opinion about the numbers — how tall a row is, how far a list may scroll, how large a
   logo is drawn, which two shades stripe it. Those are declared once, here, and that
   page's own stylesheet reads them.

   Change one of these and both lists change together; change one of them *only* in that
   page and `MatchGalleryBuildFilterParityTest` fails (بند ۲۹ و ۴۵). */
:root {
    --pfs-list-max-height: min(22rem, 60vh);
    --pfs-list-max-width: 34rem;
    /* The ceiling for a list anchored to a compact toolbar trigger rather than to a form
       field — «دستور ساخت گالری»'s five quick pickers are the panel's only ones. It is
       narrower than the field-anchored ceiling above because the trigger it opens under
       is a button in a row of buttons, not a field the width of a form column. */
    --pfs-compact-list-max-width: 28rem;
    --pfs-row-padding-y: 0.3rem;
    --pfs-row-padding-x: 0.75rem;
    --pfs-row-line-height: 1.5rem;
    --pfs-row-font-size: 0.875rem;
    --pfs-row-gap: 0.5rem;
    --pfs-media-size: 1.25rem;
    /* بند ۵ — one and a half times the 2.25rem every other row of every other list is,
       and the padding that keeps a two-line name breathing inside it. */
    --pfs-person-row-min-height: 3.375rem;
    --pfs-person-row-padding-y: 0.5rem;
    --pfs-stripe: rgba(17, 24, 39, 0.035);
    --pfs-stripe-dark: rgba(255, 255, 255, 0.045);
}