/* «استاندارد فیلترها و فیلدهای انتخابی بازشونده» — every open list in the agency
   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: what little
   of this behaviour the panel had was written into one management's own file,
   scoped to `.fi-page-photo-list`, and against `.choices__…` — the markup
   Filament v3 drew a select with. This panel is on v5, whose select is its own
   component, so those rules matched nothing at all (بند ۳۹ و ۵۲).

   Everything here addresses `.fi-dropdown-panel` inside `.fi-select-input-ctn`,
   which is the list Filament v5 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.

   The colours are the agency's own (بند ۱۳): the two stripe shades are a wash
   of the page's ink over the panel's background, and the row under the pointer
   takes the panel's identity colour from `panel-identity.css`. */

/* ── بند ۶ تا ۹ — the width of the window follows its own content ────────────
   Filament sets the panel's width inline, in JavaScript, to exactly the closed
   field's width. 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 (بند ۶).

   `--afs-field` is that same field width, measured by the standard's script,
   so بند ۷ still holds — the window is never narrower than the field it belongs
   to. `--afs-room` is بند ۹: how much space there really is between the field
   and the edge of the window, so the list grows into the room it has and stops
   there instead of leaving the screen. The width itself is set by the script,
   because an inline width can only be outranked from the same place.

   ── The ceiling could not be set from here at all (تسک ۱۴۰۵/۰۶/۱۸/۰۳) ───────

   The `max-width` below is kept as the written statement of بند ۹ and as the
   value for a panel the script has not reached — but on a panel the script
   *has* reached, the ceiling in force is the one `place()` writes into the
   element's own style attribute, and this line loses to Filament.

   Filament's stylesheet says

       .fi-select-input .fi-dropdown-panel { max-width: 100% !important }

   where `100%` is the closed field's own container — and it says it **inside a
   cascade layer**. An `!important` declaration in a layer outranks an
   `!important` declaration outside every layer, whatever its specificity and
   however much later it is read; that is the one place in the cascade where
   layer order runs backwards. So from the day this standard was written its
   ceiling was never once the ceiling in force, and **every** open list in the
   panel was capped at exactly the width of the field it hung from — which is
   the very thing بند ۶ و ۸ were written to end.

   It is what فیلتر-تکمیل-۰۲۲ … ۰۲۶ report as رقابت‌ها cut short in
   «گالری‌های آمده از فتوامان», and it was equally true of «عکس‌ها» and of every
   other select. Only an inline `!important` outranks a layered one, so the real
   ceiling is written beside the width, in `agency-filters.js`. */
.fi-select-input-ctn .fi-dropdown-panel {
    min-width: var(--afs-field, 100%);
    max-width: var(--afs-room, min(34rem, calc(100vw - 2rem)));

    /* بند ۱۰ — Filament caps the panel itself at 15rem, which is about six
       rows: the reference list shows about eleven, and بند ۱۰ asks for that.
       The cap has to be lifted here as well as on the list inside it, or the
       list's own room is decided by the panel around it. `60vh` keeps a long
       list off the bottom of a short window, and because both are maxima a
       list of three options is still three options tall (بند ۱۱). */
    --afs-panel-max: min(24rem, 66vh);

    /* The search box above the list, rounded up. What it is for is on the
       list's own `max-height` below. */
    --afs-search-h: 2.75rem;

    max-height: var(--afs-panel-max);
}

/* ── بند ۱۰ تا ۱۲ — the height of the window, and the scrolling inside it ────
   About eleven rows, which is the reference list's own height, and `60vh`
   beside it keeps a long list off the bottom of a short window.

   Only the list scrolls, never the panel, so a 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.

   ── The list's ceiling is the panel's, less the search box ──────────────────

   تسک ۱۴۰۵/۰۶/۱۸/۰۳، فیلتر-تکمیل-۰۳۰ … ۰۳۲. The two ceilings used to be
   written down independently — ۲۲rem for the list, ۲۴rem for the panel — and a
   full list plus the search box above it came to ۳۸۹ pixels inside a panel of
   ۳۸۴. Five pixels, and they were enough: the panel is `overflow-y: auto` when
   Filament marks it scrollable, so a **second** vertical scrollbar appeared
   beside the list's own. That is the «اسکرول تودرتو» of بند ۰۳۱ و ۰۳۲, and no
   list was ever meant to be reached through two of them.

   Subtracting rather than guessing a smaller number keeps بند ۱۰ true at both
   of the panel's own ceilings — ۲۴rem on a tall window, ۶۶vh on a short one —
   without either of them having to be repeated here. A select with no search
   box gives its list ۲٫۷۵rem it could have used; it also never had two
   scrollbars, which is the trade. */
.fi-select-input-ctn .fi-dropdown-panel > .fi-dropdown-list,
.fi-select-input-ctn .fi-dropdown-panel > .fi-select-input-options-ctn {
    max-height: calc(var(--afs-panel-max, min(24rem, 66vh)) - var(--afs-search-h, 2.75rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* The scrollbar itself has to be visible and usable (بند ۱۲): an overlay
   scrollbar is hidden until it moves, which on a long list read with the mouse
   looks like no scrollbar at all. */
.fi-select-input-ctn .fi-dropdown-panel ::-webkit-scrollbar {
    width: 0.5rem;
}

.fi-select-input-ctn .fi-dropdown-panel ::-webkit-scrollbar-thumb {
    background-color: rgba(17, 24, 39, 0.25);
    border-radius: 9999px;
}

:where(.dark) .fi-select-input-ctn .fi-dropdown-panel ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
}

/* ── بند ۱۳ — every other row a shade apart ──────────────────────────────────
   A wash of the page's ink over the panel's own background: a difference the
   eye follows down a long list and does not otherwise notice. 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: Filament 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.

   Written on `.afs-row`, the class the standard's script marks a decorated row
   with, so a stripe can never be painted over a list the script has not
   reached. */
.fi-dropdown-panel .fi-dropdown-list > .afs-row:nth-child(even) {
    background-color: rgba(17, 24, 39, 0.05);
}

:where(.dark) .fi-dropdown-panel .fi-dropdown-list > .afs-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ── بند ۱۴ — the interactive states stay unmistakable over the stripe ───────
   بند ۱۴ says which wins where the two meet — «اولویت با وضوح وضعیت تعاملی
   است» — so the row under the pointer and the row already chosen take the
   panel's own identity colour, which no stripe can be confused with. A
   disabled row keeps Filament's grey. */
.fi-dropdown-panel .fi-dropdown-list > .afs-row:hover,
.fi-dropdown-panel .fi-dropdown-list > .afs-row:focus,
.fi-dropdown-panel .fi-dropdown-list > .afs-row.fi-selected,
.fi-dropdown-panel .fi-dropdown-list > .afs-row:nth-child(even):hover,
.fi-dropdown-panel .fi-dropdown-list > .afs-row:nth-child(even):focus,
.fi-dropdown-panel .fi-dropdown-list > .afs-row:nth-child(even).fi-selected {
    /* The panel's own Amber — `->colors(['primary' => Color::Amber])` — at a
       sixth, which is a wash no stripe can be mistaken for and which leaves
       the title over it perfectly readable in both themes. */
    background-color: rgba(245, 158, 11, 0.18);
}

.fi-dropdown-panel .fi-dropdown-list > .afs-row[aria-selected='true'] {
    font-weight: 700;
}

.fi-dropdown-panel .fi-dropdown-list > .afs-row.fi-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 a 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 (بند ۲۱ و ۲۳). */
.fi-dropdown-panel .afs-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    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 picture or not (بند ۲۱). It does
   not grow with the row and it cannot change the row's height (بند ۲۲), and
   `object-fit: contain` keeps a crest's proportions.

   Which of the two is drawn is decided by `agency-filters.js` from the real
   media the server found: an `<img>` when the option really has one, the kind'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). */
.afs-media {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
}

.afs-media img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    border-radius: 0.1875rem;
}

.afs-media svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #9ca3af;
}

:where(.dark) .afs-media svg {
    color: #6b7280;
}

/* The title beside it, which takes what room is left and wraps rather than
   being cut.

   The line box is written down (بند ۲۳): a management that draws its own option
   markup — a crest and a title in two spans of its own — gives that row a
   different line height from a row of plain text, and the two then sit at two
   different heights in one list. One line box for every row of every list
   settles it without touching a single management's markup. */
.fi-dropdown-panel .afs-row > .afs-label {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5rem;
}

/* 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 (بند ۳۵). */
.fi-select-input-value-ctn .afs-media,
.fi-select-input-value-label .afs-media {
    width: 1.1rem;
    height: 1.1rem;
}

.fi-select-input-value-ctn .afs-media img,
.fi-select-input-value-label .afs-media img {
    width: 1.1rem;
    height: 1.1rem;
}

/* ── بند ۲۴ — the search box, exactly where it was ───────────────────────────
   Filament puts its search above the scrolling list, so it is already outside
   what scrolls; this only keeps 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 (بند ۳۶). */
.fi-select-input-ctn .fi-dropdown-panel > .fi-select-input-search-ctn {
    width: 100%;
    box-sizing: border-box;
}

/* ── بند ۳۳ — the window is never behind anything ────────────────────────────
   The pinned column-header row of a management table is drawn at `z-index: 10`
   (`agency-tables.css`); an open list has to stand over it, over the table's
   own toolbar and over a card. */
.fi-select-input-ctn .fi-dropdown-panel {
    z-index: 30;
}