/*
 * Gallery-management styling the panel cannot express through Filament's own
 * options: the pinned «راهنمای فتوامان», its colouring, and the crest that leads
 * every team in a dropdown.
 *
 * Plain CSS served from public/, matching how the panel already loads its font
 * and its Jalali datepicker — this app has no compiled Filament theme, and one
 * stylesheet is not worth introducing a build step for.
 */

/* ── The photoaman edit page: header and guide pinned, in that order ───────── */

/*
 * Three things end up stacked at the top of this page — the panel's topbar, the
 * page header, then the guide — and none may land on another, so each is offset
 * by the measured height of the ones above it rather than by a number that would
 * drift the moment the heading wraps to two lines. The two custom properties are
 * written by the panel's own script; the fallbacks keep the stack apart on a
 * one-line header before the first measurement lands.
 */
.fi-page-galleries-edit .fi-header {
    position: sticky;
    /* Under the panel's topbar, which is itself pinned at the very top. */
    top: var(--fi-photoaman-topbar-h, 4rem);
    /* Below the topbar's z-index (30), so the topbar still wins. */
    z-index: 20;
    /* The page background, so the form scrolls under rather than through. */
    background-color: var(--gray-50);
    padding-block: calc(var(--spacing) * 3);
}

:where(.dark) .fi-page-galleries-edit .fi-header {
    background-color: var(--gray-950);
}

/*
 * Sticky needs a tall containing block, and Filament wraps every schema
 * component in a grid cell exactly as tall as the component — so a sticky
 * callout would be pinned inside its own height and never move.
 *
 * Dropping the wrappers to `display: contents` makes the callout a direct child
 * of the list it is in, and taking that list off `grid` for this page makes the
 * list a block container tall enough to stick within. The grid's `gap` goes with
 * it, so the spacing between the cards is put back by hand.
 */
.fi-page-galleries-edit .fi-sc:has(> .fi-grid-col > .fi-sc-component > .fi-photoaman-guide) {
    display: block;
}

.fi-page-galleries-edit
    .fi-sc:has(> .fi-grid-col > .fi-sc-component > .fi-photoaman-guide)
    > .fi-grid-col
    + .fi-grid-col {
    margin-top: calc(var(--spacing) * 6);
}

.fi-page-galleries-edit .fi-grid-col:has(> .fi-sc-component > .fi-photoaman-guide),
.fi-page-galleries-edit .fi-sc-component:has(> .fi-photoaman-guide) {
    display: contents;
}

.fi-page-galleries-edit .fi-photoaman-guide {
    position: sticky;
    top: calc(var(--fi-photoaman-topbar-h, 4rem) + var(--fi-photoaman-header-h, 4.5rem));
    z-index: 19;
    /*
     * Pinning only. The ground and the ink are decided once, further down, for
     * every page that draws this box rather than for this one — see
     * «تسک ۱۴۰۵/۰۶/۲۸/۰۲ — بخش چهارم» at the end of this file. A
     * background written here would be a page-scoped rule beating the themed
     * ones, and the box would then be one colour here and another everywhere
     * else.
     */
    /*
     * Tall notes must not eat the form. Past this the guide scrolls inside
     * itself and the fields below stay reachable.
     */
    max-height: 30vh;
    overflow-y: auto;
}

/* PHOTOAMAN-003, then گالری-فتوامان-رابط-۰۰۳: the note was one and a half times
   the size the callout would otherwise use, and is now three quarters of that —
   ۱٫۵ × ۰٫۷۵ = ۱٫۱۲۵em, a quarter smaller, which is what the task asks.

   Only the words inside the box. The heading above them is a rule of its own and
   is untouched, as are the box's size, its padding, its colours, its border and
   its background: the box is sized by the page, not by this text, and the
   `max-height` above still decides when the note scrolls inside itself. */
.fi-page-galleries-edit .fi-photoaman-guide .fi-callout-description {
    /* ۱٫۱۲۵ = ۱٫۵ × ۳/۴ — «حدود یک‌چهارم کوچک‌تر». */
    line-height: 1.8;
}

/* ── گالری-فتوامان-رابط-۰۰۱: the page's own heading, a third smaller ───────── */

/* «ویرایش آرمان آفرینان ستارگان ایرانیان ۱ - ۲ المپیک اندیشه» at two thirds of
   the size the panel gives a page heading — a third smaller, and nothing else on
   the page with it.

   Two thirds *of the heading*: `em` is read against the parent, which is the
   `h1` itself, so the proportion holds at both sizes the panel uses for headings
   (`--text-2xl`, and the larger one on a wide screen) instead of being a pixel
   figure that drifts from one of them.

   The rule is on this span alone (`EditGallery::getHeading()` puts the words in
   it) rather than on the `h1` or the header around it. That is what leaves the
   header's own spacing, its buttons, the breadcrumbs, the guide beneath it and
   every reading on the form at exactly the size they were: the line's height
   comes from the `h1`, which is untouched. */
.fi-page-galleries-edit .fi-photoaman-heading-title {
    /* ۲/۳ — «حدود یک‌سوم کوچک‌تر». */
    font-size: 0.667em;
}

/* PHOTOAMAN-004: comma-separated segments, alternating. */
.fi-photoaman-guide-a {
    color: var(--color-white);
}

.fi-photoaman-guide-b {
    color: var(--green-400, #4ade80);
}

/* ── PHOTOAMAN-012: a team reads as its crest first, then its name ─────────── */

.fi-team-option {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-width: 0;
}

.fi-team-option-logo {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* The stand-in for a team the mirror holds no crest for. */
.fi-team-option-logo-placeholder {
    background-color: var(--gray-200);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3 4.5 5.25v5.25c0 4.5 3 8.25 7.5 10.25 4.5-2 7.5-5.75 7.5-10.25V5.25L12 3Z'/%3E%3C/svg%3E");
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

:where(.dark) .fi-team-option-logo-placeholder {
    background-color: var(--gray-700);
}

/* MANUAL-GALLERY-TEAM-005: «پرسپولیس (پرسپولیس) / جوانان / مردان / تهران» — one
   line, kept on one line. Two teams of the same club differ only in the parts
   after the name, so wrapping the tail onto a second row is what would make the
   list unreadable again. */
.fi-team-option-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── MANUAL-GALLERY-DATE-001 و ۰۰۲: the date, and how to reach it ──────────── */

/* Twice the size of an ordinary field label, in the panel's own yellow, right
   aligned — with «روی تاریخ کلیک کنید» on the same line at the other end of it,
   ordinary-sized so it reads as guidance rather than as a second heading. */
.fi-manual-gallery-date > .fi-fo-field-label-col > .fi-fo-field-label-ctn {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
}

.fi-manual-gallery-date .fi-fo-field-label {
    line-height: 1.4;
    text-align: right;
}

/* «روی تاریخ کلیک کنید» — ordinary-sized, so it never competes with the heading
   beside it, but in the panel's own yellow rather than grey, which is what made
   it easy to look straight past (MANUAL-GALLERY-DATE-301). It sits inside the
   same container as the label and is a sibling of it, not a child, so it
   inherits nothing and says all of this itself. */

/* MANUAL-GALLERY-DATE-302 و ۳۰۳: the date is picked by clicking it, so it is
   drawn as a button — filled, ringed and raised the way the panel's own buttons
   are — and answers the pointer like one. Nothing about how it works changes;
   it just stops looking like a box that merely happens to hold a date.

   MANUAL-GALLERY-DATE-601: …and a hairline of the panel's own yellow around it,
   so the part of the row that can be clicked is bounded rather than merely
   shaded. One pixel, and the radius the control already had — Filament draws
   its edge with an inset ring, so the border sits outside that and the two
   corners have to agree. The pointer, the hover and the calendar underneath are
   بند ۶۰۲ and are untouched. */
.fi-manual-gallery-date .fi-input {
    cursor: pointer;
    text-align: center;
    background-color: var(--gray-50, #f9fafb);
    border: 1px solid var(--warning-500, #f59e0b);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition:
        background-color 75ms ease,
        box-shadow 75ms ease;
}

.fi-manual-gallery-date .fi-input:hover {
    background-color: var(--gray-100, #f3f4f6);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

:where(.dark) .fi-manual-gallery-date .fi-input {
    background-color: var(--gray-800, #1f2937);
    border-color: var(--warning-400, #fbbf24);
}

:where(.dark) .fi-manual-gallery-date .fi-input:hover {
    background-color: var(--gray-700, #374151);
}

/* ── MANUAL-GALLERY-DESC-601 … ۶۰۳: «توضیحات گالری» is read, not written ───── */

/* Not a control any more. The box is a framed reading — the same frame the rest
   of the form's fields carry, so it still belongs to the form, with nothing
   inside it to type in, tab to or put a cursor in.

   Centred both ways (بند ۶۰۳): `justify-content` puts the line in the middle of
   the box however tall the box grows, and `text-align` centres a line that
   wrapped onto two. */
/* GALLERY-DESCRIPTION-401: the line inside the box is right-aligned. It is
   Persian prose that regularly runs onto a second row, and a centred second row
   leaves the reader hunting for where it starts; the box, its ground and every
   rule about how the text is built are untouched (بند ۴۰۲). The paragraph is
   stretched to the box's width rather than shrunk to its own, or aligning it
   would move nothing. */
/* بخش سوم of تسک ۱۴۰۵/۰۶/۲۸/۰۲: the box is the page turned inside out.

   شب → کادر سفید + محتوای تیره, روز → کادر تیره + محتوای روشن (معیار ۷ و ۸).
   It used to be a faint tint of the ground it sits on — gray-50 on white, a
   five-percent white on near-black — which is a field that happens not to be
   editable rather than a block of information the system wrote. Reversing it
   against the page is what makes it read as its own thing at a glance, and it is
   the same separation «اطلاعات گالری (از فتوامان)» carries below.

   Only the drawing. The text, the order it is built in, its rebuilding on every
   answer and the value that is saved are all untouched (معیار ۱۳).

   Every colour is a `--std-color-*` token, so a palette changed in
   «استانداردسازی نمای پنل» moves this box with it. */
.fi-manual-gallery-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
    text-align: right;
    cursor: default;
    border-radius: 0.5rem;
    background-color: var(--std-color-gray-900, #111827);
    box-shadow: inset 0 0 0 1px var(--std-color-gray-700, #374151);
}

:where(.dark) .fi-manual-gallery-description {
    background-color: var(--std-color-white, #ffffff);
    box-shadow: inset 0 0 0 1px var(--std-color-gray-300, #d1d5db);
}

/* معیار ۷ و ۸: the writing is whatever the ground is not — and it is not
   written here.

   It was the panel's yellow in both themes (MANUAL-GALLERY-DESCRIPTION-401),
   which told the system's own line apart from the operator's answers. Yellow on
   the white card بند ۷ asks for is not «تیره/مشکی و کاملاً خوانا», and the
   reversed card is what tells the block apart now, more plainly than a colour
   did.

   Both this line and the placeholder under it are roles «استانداردسازی
   نمای پنل» owns — «متن راهنمای تأکیدی» and «متن توضیحی» — and the block
   it prints comes after every stylesheet, so a colour written here would lose
   to it *and* be the second source استاندارد-۰۶۶ forbids. The two inks are
   exception rows on those roles instead (see the ۱۴۰۵/۰۶/۲۸ migration), and
   the difference shows up in «مشاهده موارد» beside every other place of the
   role. */
.fi-manual-gallery-description-text {
    margin: 0;
    line-height: 1.75;
}

/* Before anything has been chosen the box says what will fill it, quietly —
   the placeholder the field always carried. */
.fi-manual-gallery-description-empty {
    margin: 0;
}

/* ── الزام عنوان-۰۳، ۱۳ و ۱۶: the title, read out ──────────────────────────── */

/* «عنوان گالری» is a line of running text, not a box to type in: the pattern's
   own words and the values read off the fields above are simply the sentence
   the gallery will be called. */
.fi-manual-gallery-title-line {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    line-height: 2;
}

/* Block rather than flex on purpose: a flex line turns each run of text into an
   item of its own and eats the space between a value and the word after it, so
   «استقلال در آزادی» would come out «استقلالدرآزادی». Written with both class
   names so nothing decides it by which rule was read last. */
.fi-manual-gallery-title-line.fi-manual-gallery-title-readonly {
    display: block;
    color: var(--std-form-field-value-color, var(--gray-950, #030712));
    white-space: pre-wrap;
    cursor: default;
}

/* Where the panel is dark, the title reads in the same light colour every other
   field's value reads in — «مقدار داخل فیلد» in «استانداردهای ظاهر پنل», so the
   day that colour is decided centrally this box follows it rather than keeping
   a shade of its own (تسک ۱۴۰۵/۰۶/۰۲ آژانس عکس، بند ۵).

   Written with **both** class names, exactly as the rule above is. The rule
   above carries two classes, so a dark rule carrying one loses to it whatever
   order the two are read in — which is how the finished title came out
   near-black on the panel's dark surface while everything around it was light
   (بند ۱). The settled words of a title are not wrapped in a span of their own,
   so this line's colour is the colour they are read in. */
:where(.dark) .fi-manual-gallery-title-line.fi-manual-gallery-title-readonly {
    color: var(--std-form-field-value-color-dark, #fff);
}

/* Nothing chosen yet: the placeholder, quiet, in the box's own line. */
.fi-manual-gallery-title-empty {
    color: var(--gray-400, #9ca3af);
}

/* Settled text: the panel's ordinary reading colour — white where the panel is
   dark — and the spaces the pattern wrote are kept as it wrote them. */
.fi-manual-gallery-title-fixed {
    color: var(--std-form-field-value-color, var(--gray-950, #030712));
    white-space: pre-wrap;
}

:where(.dark) .fi-manual-gallery-title-fixed {
    color: var(--std-form-field-value-color-dark, #fff);
}

/* A mark whose value could not be read yet stays exactly where the pattern
   wrote it and is drawn red — the word *and* its number, one piece, because
   «ایکس۱۲» is one mark and not the word «ایکس» beside a number
   (الزام عنوان-۱۳). Red is the whole signal: this part is not settled. */
.fi-manual-gallery-title-gap-unanswered {
    color: var(--red-600, #dc2626);
    font-weight: 600;
}

:where(.dark) .fi-manual-gallery-title-gap-unanswered {
    color: var(--red-400, #f87171);
}

/* Under the box, one line per mark that is still standing — all of them at
   once, so nobody has to press «ذخیره» again to be told the next thing
   (الزام عنوان-۱۶). */
.fi-manual-gallery-title-problems {
    margin: 0.375rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--red-600, #dc2626);
    font-size: 0.75rem;
    line-height: 1.8;
}

:where(.dark) .fi-manual-gallery-title-problems {
    color: var(--red-400, #f87171);
}

/* ── PHOTOGRAPHER-TABS-004: «قراردادها» goes red when there is no contract ───

   The class is still written on the tab; its colour is not written here any
   more. «تب هشدار» is one of the panel's four tab roles and is drawn from
   «ترکیب‌های رنگ» like the other three (استاندارد-اصلاح-۰۴ و ۱۳). A colour
   left here would be a second place to change it, and the day somebody changed
   only one of the two the management would stop telling the truth. */

/* ── GALLERY-EDIT-007 … ۰۱۲: the page heading ──────────────────────────────── */

/* A quarter under the panel's 1.5rem page heading (تسک ۱۵، بند ۲). The colour
   is no longer the whole line's: the heading now carries a picture and two
   readings, and only the code is yellow. */
.fi-page-gallery-edit .fi-header-heading {
    line-height: 1.8;
}

/* Reading from the right: the creator's picture, about a centimetre of air,
   then «گالری بالیگپا | کد: ۱۰۰۰». On a narrow screen the text wraps under the
   picture rather than pushing the page sideways. */
.fi-gallery-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.5cm;
    width: max-content;
    max-width: 100%;
}

.fi-gallery-heading-avatar {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    object-fit: cover;
    background: var(--gray-200, #e5e7eb);
}

/* A gallery Baligpa raised has no operator behind it, so there is no face to
   show; the frame keeps the heading's shape and is titled with whoever the
   gallery is credited to (GALLERY-EDIT-008). */
.fi-gallery-heading-avatar-empty {
    display: block;
    border: 1px dashed var(--gray-300, #d1d5db);
    background: var(--gray-100, #f3f4f6);
}

:where(.dark) .fi-gallery-heading-avatar-empty {
    border-color: var(--gray-600, #4b5563);
    background: var(--gray-800, #1f2937);
}

/* No `min-width: 0` on either of these, and none on the row above. The page
   header is a chain of flex items that size to their content, so a heading
   whose own minimum width is zero collapses the whole header to nothing — the
   picture and the text then stack in a column one letter wide. Letting each
   part claim its natural width keeps the header the size of what it says. */
.fi-gallery-heading-text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
}

.fi-gallery-heading-code {
    white-space: nowrap;
}

/* ── گالری-آمار-۰۰۱ تا ۰۰۳: the counts on the heading line, and no cards ───── */

/* The three stat cards that used to stand above this table are gone, and with
   them every rule that shaped them. Nothing replaces them here — no smaller
   card, no band where they were: the page has no header widget left, so the
   table now begins where the cards began.

   What is left is the heading itself: «گالری‌ها | همه: ۶۸ | گالری بالیگپا: ۴۵ |
   گالری آژانس: ۲۳ | آمده از فتوامان: ۲۳۴۲», one line, evenly spaced. */
.fi-gallery-stats-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* The same room either side of every rule, so the four figures sit at even
       distances rather than drifting apart (گالری-آمار-۰۰۳). */
    gap: 0.25rem 0.75rem;
    width: max-content;
    max-width: 100%;
}

/* Every figure — the words and the number together — in the panel's yellow, and
   two thirds of the size of the heading it stands on (گالری-هدر-آمار-۰۰۱): a
   third smaller than it was, words and number alike, since both are inside this
   one element.

   Two thirds *of the heading*, not of some size written down here: `em` is read
   against the parent, which is the heading itself, so the figures keep their
   proportion whatever size the panel gives its headings.

   The rule is on the figures and on nothing above them (گالری-هدر-آمار-۰۰۲ و
   ۰۰۳). Shrinking the heading or the line that holds it would have taken the
   white name and the white rules down with it; they are left at `inherit`
   above, and the yellow elsewhere on the page — a gallery's code and its title
   on the edit page — is a different rule again and untouched.

   The line they sit on is aligned by `baseline`, so a smaller figure sits on
   the same line as the name beside it rather than floating in the middle of
   it. */
.fi-gallery-stats-heading-stat {
    /* ۲/۳ — «تقریباً دو سوم اندازه فعلی». */
    white-space: nowrap;
}

/* ── بند ۲۰ تا ۲۲: سه عنوان متنی هدر، با لوگو ─────────────────────────────────

   «گالری بالیگپا»، «گالری آژانس» و «آمده از فتوامان» با نشان خودشان نوشته
   می‌شوند و عددشان سر جای خودش می‌ماند. ارتفاع ردیف آماری نباید بلندتر شود، پس
   ارتفاع نشان دقیقاً یک `em` است — همان اندازه‌ای که حروف کنارش دارند — و
   فاصلهٔ خط (line-height) از آن بیشتر است، بنابراین نشان از کادر خط بیرون
   نمی‌زند و چیزی را جابه‌جا نمی‌کند.

   عرض آزاد و `contain`: نشان نه بریده می‌شود و نه کشیده، و نسبت اصلی‌اش را نگه
   می‌دارد (بند ۲۲). */
.fi-gallery-stats-heading-stat-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.fi-gallery-stats-heading-logo {
    height: 1em;
    width: auto;
    max-width: 2.5em;
    object-fit: contain;
    flex: none;
}

/* ── گالری-۰۷: each figure in its own colour ──────────────────────────────── */

/* «همه» white, «گالری بالیگپا» green, «گالری آژانس» the yellow it already wore,
   «آمده از فتوامان» red — the name and the number together, since both live
   inside the one span.

   Written with the heading in the selector on purpose. «عدد آمار هدر» is a
   managed standard, so the standards block prints
   `.fi-gallery-stats-heading-stat{color:var(--std-header-stat-value-color)}`
   after every stylesheet; a rule of the same weight here would lose to it
   whatever order the files load in. Two classes plus the parent out-specifies
   it, so these four win and the standard still decides everything else about
   the figures — their size, their weight, and the colour of any figure without
   a class of its own.

   The colours are «رنگ‌های استاندارد» tokens, not codes: the panel publishes
   them as `--std-color-*` for exactly this, so its palette stays the one place
   they are decided.

   The rules between the figures are a different element and are not mentioned
   here at all (الزام گالری-۰۸). */
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-gallery-stat-all {
    color: var(--std-color-white, #ffffff);
}

.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-gallery-stat-baligpa {
    color: var(--std-color-success-400, #4ade80);
}

.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-gallery-stat-agency {
    color: var(--std-color-warning-500, #f59e0b);
}

.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-gallery-stat-photoaman {
    color: var(--std-color-danger-400, #f87171);
}

/* ── گالری-هدر-۰۱ … ۰۶: هر آمار یک ستون، و یک‌سوم بزرگ‌تر ──────────────────── */

/* بالای مدیریت گالری‌ها، آمارها تا امروز «لوگو و عدد، کنار هم، در یک خط» بودند.
   یک خط از نشان و رقم که چشم روی هیچ‌کدامشان نمی‌ایستاد. حالا هر آمار یک ستون
   است: نشان بالا، عدد زیرش — و همین یک قاعده برای همهٔ آنهاست، از «همه» تا
   «گالری‌های نیازمند بررسی مجدد» (الزام گالری-هدر-۰۱ و ۰۶).

   ستون‌ها از پایین هم‌تراز می‌شوند تا اعداد روی یک خط بنشینند، هرچند نشان‌های
   بالای سرشان هم‌اندازه نباشند. */
.fi-page-gallery-list .fi-gallery-stats-heading {
    align-items: flex-end;
    gap: 0.5rem 1.25rem;
}

.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-stat,
.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-stat-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* فاصلهٔ یکدست میان نشان و عدد، برای همهٔ آمارها (الزام گالری-هدر-۰۶). */
    gap: 0.2em;
    line-height: 1.15;
}

/* جداکننده‌ها برای ساختار عمودی تنظیم می‌شوند: پیش از این کنار یک خط نوشته
   می‌نشستند، حالا باید قد ستون را بگیرند تا نه وسط هوا بمانند و نه ستون‌ها را
   به هم بچسبانند (الزام گالری-هدر-۰۶). */
.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-sep {
    align-self: stretch;
    display: inline-flex;
    align-items: flex-end;
}

/* الزام گالری-هدر-۰۲: «حدود یک‌سوم بزرگ‌تر».

   عدد روی عنصر خودش بزرگ می‌شود و نه روی کل آمار: اندازهٔ `.fi-gallery-stats-heading-stat`
   یک استاندارد مدیریت‌شدهٔ پنل است («عدد آمار هدر»، ۰٫۶۶۷em) و بلوک استانداردها
   آخر از همه چاپ می‌شود، پس هر قاعده‌ای با همان وزن اینجا می‌بازد — و مهم‌تر،
   دو مدیریت دیگر هم همان استاندارد را می‌پوشند و قرار نیست عدد آنها بزرگ شود.

   ۱٫۳۳۳em نسبت به همان ۰٫۶۶۷em خوانده می‌شود، یعنی دقیقاً یک‌سوم بزرگ‌تر از چیزی
   که بود، و نسبتش با اندازهٔ عنوان صفحه حفظ می‌ماند.

   ── بند ۲ از تسک ۱۴۰۵/۰۷/۰۸/۳۶: «فقط اعداد آمار کوچک‌تر شوند» ───────────────

   «اندازهٔ اعداد دقیقاً حدود ۲۰٪ کمتر از وضعیت فعلی شود؛ یعنی Font Size آنها به
   ۴/۵ اندازه فعلی برسد.» همان ۱٫۳۳۳em ضربدر ۴/۵ می‌شود ۱٫۰۶۷em — و این تنها
   خطی است که برای این بند عوض شده. نشان‌ها و آیکون‌ها (دو قاعدهٔ پایین) دست
   نخورده‌اند، چون خواسته صریح است: «خود لوگوها و آیکون‌ها هیچ تغییری نکنند». */
.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-stat .fi-gallery-stats-heading-count {
    font-size: 1.067em;
}

/* و نشان‌ها به همان نسبت: ارتفاعشان تا امروز دقیقاً یک `em` بود تا خط آماری
   بلندتر نشود؛ حالا که هر آمار ستون خودش است، بلندتر شدنِ نشان چیزی را جابه‌جا
   نمی‌کند. عرض آزاد و `contain` سر جای خودش است، پس نشان نه بریده می‌شود و نه
   کشیده (الزام گالری-هدر-۰۲). */
.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-logo {
    height: 1.333em;
    max-width: 3.4em;
}

/* آیکون‌ها — چشم خط‌خوردهٔ «عکس‌های هیدن» و مثلث هشدار «نیازمند بررسی مجدد» — هم
   با همان اندازه و همان فاصله‌گذاری کشیده می‌شوند، تا هیچ آماری در این ردیف با
   بقیه فرق نکند (الزام گالری-هدر-۰۶). رنگشان از خودِ آمار به ارث می‌رسد، چون
   آیکون با `currentColor` کشیده می‌شود. */
.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fi-page-gallery-list .fi-gallery-stats-heading .fi-gallery-stats-heading-icon svg {
    height: 1.333em;
    width: 1.333em;
    flex: none;
}

/* الزام گالری-هدر-۰۴: مثلث زرد هشدار — همان زردی که آیکون «چک مجدد» در ستون
   لیست گالری‌ها دارد. مثل چهار رنگ بالا با دو کلاس و والدشان نوشته شده تا از
   بلوک استانداردها که بعد از همهٔ فایل‌ها چاپ می‌شود جلو بزند، و از توکن‌های
   «رنگ‌های استاندارد» خوانده می‌شود نه از یک کد رنگ. */
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-gallery-stat-recheck {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── گالری-۰۳: the kind as its own mark ───────────────────────────────────── */

/* Whole, and in proportion. Filament sizes an image column's box; `contain`
   keeps the badge inside it at its own aspect ratio rather than filling the box
   by cropping, which is what `cover` would do to a square mark in a cell that
   is not quite square (بند ۶). */
.fi-page-gallery-list .fi-ta-cell-type img.fi-gallery-type-mark,
.fi-page-photoaman-gallery-list .fi-ta-cell-type img.fi-gallery-type-mark {
    object-fit: contain;
    /* Never so small that the yellow and the green cannot be told apart on a
       phone (بند ۲۵). */
    min-width: 1.25rem;
    min-height: 1.25rem;
}

/* ── گالری-۰۵ و بند ۱۰ و ۱۲: centred headings, right-aligned values ────────── */

/* ── الزام گالری-۰۰۳: every column NAME centred, and not one row moved ────── */

/* The task is explicit twice over: the headings are to be centred and «چینش
   محتوای ردیف‌ها دقیقاً مانند وضعیت فعلی باقی بماند». Filament has one
   alignment per column and uses it for both halves, so centring the columns
   themselves would have taken every row with them.

   `.fi-ta-header-cell` is the `<th>` and nothing else, so this reaches no body
   cell at all: whatever a row looks like today — the right-aligned titles
   below, the centred badges, the covers — it looks like tomorrow. The inner
   rule is for the sort control, which is a flex row and would otherwise stay
   where it was inside a centred box. */
.fi-page-gallery-list .fi-ta-header-cell,
.fi-page-photoaman-gallery-list .fi-ta-header-cell {
    text-align: center;
}

.fi-page-gallery-list .fi-ta-header-cell > *,
.fi-page-photoaman-gallery-list .fi-ta-header-cell > * {
    justify-content: center;
}

/* Filament has ONE alignment for a column and uses it for the header cell and
   the body cell alike. The task wants them apart: the column's name stays
   centred, the Persian sentences under it read from the right like every other
   sentence in the panel. So the column keeps `alignCenter()` — which is what
   the header uses — and the body cell is turned back here.

   `.fi-ta-col` is Filament's own flex row inside the cell and is what actually
   places the text, so it is turned with the cell rather than left centred
   inside a right-aligned box. */
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-title,
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-view-title-note {
    text-align: right;
}

.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-title .fi-ta-col,
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-view-title-note .fi-ta-col,
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-title .fi-ta-text,
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-view-title-note .fi-ta-text {
    justify-content: flex-end;
    text-align: right;
}

/* بند ۱۷ of تسک ۱۴۰۵/۰۷/۱۱/۳۹: «تمام محتوای ستون «رقابت» راست‌چین شود؛ شامل
   عنوان رقابت و اطلاعات جانبی آن».

   The same three layers the title needed, for the same reason: the cell, the
   `.fi-ta-col` flex row Filament puts inside it, and — this one is the column's
   own — `.fi-gallery-competition-season`, the inline flex row that holds the
   name, the rule and the year together. Centring that row is what kept the pair
   in the middle of a wide cell however the cell itself was aligned.

   The column's heading stays centred like every other heading on this list: the
   task asks for the content, and Filament has one alignment for both, so the
   column keeps `alignCenter()` and the body is turned back here. */
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-competition\.name {
    text-align: right;
}

.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-competition\.name .fi-ta-col,
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-competition\.name .fi-ta-text,
.fi-page-gallery-list .fi-ta-cell.fi-ta-cell-competition\.name .fi-gallery-competition-season {
    justify-content: flex-end;
    text-align: right;
}

/* ── گالری-جدول-۰۰۱ تا ۰۰۳: «عنوان گالری» and «رقابت», a third wider ───────── */

/* Both columns are sized by what is in them, so a third more room means a third
   more room to be sized *to*: the two limits in the table grew by a third
   (۴۰ → ۵۳ و ۲۵ → ۳۳ characters) and these floors carry the widening through
   even when the rows on screen happen to be short — measured in the browser at
   ~۱۹۲px and ~۱۵۶px before the change, so ×۱٫۳۳ of each.

   Floors, not fixed widths: nothing else is squeezed, the table still lays
   itself out, and on a narrow screen the rule is dropped altogether so the
   phone and tablet behaviour is exactly what it was. */
@media (min-width: 1024px) {
    .fi-page-gallery-list .fi-ta-header-cell-title,
    .fi-page-gallery-list .fi-ta-cell-title {
        min-width: 24.5rem; /* ۲۹۵px × ۱٫۳۳ */
    }

    .fi-page-gallery-list .fi-ta-header-cell-competition\.name,
    .fi-page-gallery-list .fi-ta-cell-competition\.name {
        min-width: 7.625rem; /* ۹۲px × ۱٫۳۳ */
    }

    /* بند ۲۴: «توضیح عنوان در ویو» has to be readable, not a column two words
       wide — and the room for it is the room the page just gained by dropping
       its width cap, so nothing beside it is squeezed to find it. */
    .fi-page-gallery-list .fi-ta-header-cell-view-title-note,
    .fi-page-gallery-list .fi-ta-cell-view-title-note {
        min-width: 12rem;
    }
}

/* ── تسک ۱۴۰۵/۰۷/۱۴/۴۲، بند ۱ … ۳: the whole title, between its two crests ──── */

/* «لوگوی میزبان ← عنوان کامل گالری ← لوگوی میهمان», on one line.

   The title is no longer cut (the column's `limit()` is gone), and the line is
   kept whole on a single row: the column then lays itself out to the longest
   title on the page, and the table's own horizontal scroll — which the table
   standard owns — takes whatever is wider than the screen. Nothing here sets a
   width, so no other column is squeezed to pay for it, and the floor above
   still holds for a page of short titles.

   The crests are the panel's own team marks (`.fi-team-option-logo`, or its
   placeholder), drawn a little smaller than in a dropdown so they sit level
   with one line of bold text and the row keeps its height. In a right-to-left
   row the first item is on the right, so the home crest is read before the
   title and the away crest after it. */
.fi-gallery-title-line {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    white-space: nowrap;
}

.fi-gallery-title-crest {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.fi-gallery-title-crest .fi-team-option-logo {
    width: 1.25rem;
    height: 1.25rem;
}

/* ── فتوامان-لیست-۰۰۱ تا ۰۰۳: «گالری‌های آمده از فتوامان», its own header ──── */

/* This page's name, about a third smaller: two thirds of the heading it stands
   on (فتوامان-لیست-۰۰۱).

   Two thirds *of the heading*, not of a size written down here — `em` is read
   against the parent, which is the heading line itself, so the proportion holds
   whatever size the panel gives its headings.

   The rule is on the name and on nothing else. The figure beside it, the rule
   between them and the line that holds all three are read against the heading
   too, so shrinking the heading or the line would have taken the number down
   with the name — which the task rules out in as many words. Nothing here says
   a colour, so the white name and the yellow figure are exactly the colours
   they were.

   It is scoped to this page because «گالری‌ها» is built from the same three
   spans: an unscoped rule would shrink that page's name as well, and this task
   is «فقط صفحه لیست گالری‌های آمده از فتوامان». */
.fi-page-photoaman-gallery-list .fi-gallery-stats-heading-title {
    /* ۲/۳ — «حدود یک‌سوم کوچک‌تر». */
}

/* «عنوان» and «رقابت», a third wider (فتوامان-لیست-۰۰۲ و ۰۰۳).

   Both columns are sized by what is in them, so a third more room means a third
   more room to be sized *to*: the two cuts in the table grew by a third
   (۴۰ → ۵۳ و ۲۵ → ۳۳ characters) and these floors carry the widening through
   even when the rows on screen happen to be short — measured in the browser at
   ~۲۶۳px and ~۲۰۳px before the change, so ×۱٫۳۳ of each.

   Floors, not fixed widths (فتوامان-لیست-۰۰۳ و ۰۰۵): nothing else is squeezed,
   the table still lays itself out, and on a narrow screen the rule is dropped
   altogether so the phone and tablet behaviour is exactly what it was. */
@media (min-width: 1024px) {
    .fi-page-photoaman-gallery-list .fi-ta-header-cell-title,
    .fi-page-photoaman-gallery-list .fi-ta-cell-title {
        min-width: 21.875rem; /* ۲۶۳px × ۱٫۳۳ */
    }

    .fi-page-photoaman-gallery-list .fi-ta-header-cell-competition\.name,
    .fi-page-photoaman-gallery-list .fi-ta-cell-competition\.name {
        min-width: 16.875rem; /* ۲۰۳px × ۱٫۳۳ */
    }
}

/* ── الزام گالری-فتوامان-۰۳۱ … ۰۳۵: the management inside one frame ──────────

   Lifting the ۸۰rem cap (`getMaxContentWidth(Width::Full)` on the page) gives
   the table the width the screen has, and at every ordinary desktop width the
   heading, the two header buttons, the search, the filters, the table and the
   pagination now share one frame from edge to edge.

   Below that width the table is genuinely wider than the page — «عنوان» and
   «رقابت» carry a floor width from فتوامان-لیست-۰۰۲ و ۰۰۳ — and بند ۳۴ says
   that scroll is to be kept. What must not happen is what was happening: the
   panel makes the page area the scrolling box so a table's column headings can
   pin (`agency-tables.css`), which leaves `.fi-ta-content-ctn` at
   `width: max-content` inside a card that does not grow with it — so the table
   was drawn *outside* its own card's left border, and the heading above it
   stayed behind while the page scrolled.

   Two lines settle it. The card grows to whatever the table needs, so the table
   is always inside the card that holds it; and the page's frame grows with the
   card, so the heading, the toolbar and the pagination stay lined up with the
   table's edges however far the page is scrolled. `min-width: 100%` leaves every
   width where the table already fits exactly as it is. */
.fi-page-photoaman-gallery-list .fi-ta-ctn {
    width: max-content;
    min-width: 100%;
}

.fi-main:has(.fi-page-photoaman-gallery-list) {
    width: max-content;
    /* `Width::Full` writes `max-width: 100%`, which would clamp the frame back
       to the window and leave the card hanging out of it again. */
    max-width: none;
    min-width: 100%;
}

/* ── الزام گالری-فتوامان-۰۲۳ … ۰۳۰: «رفتن به صفحه», in the pagination bar ────

   Filament lays the bar out as a three-column grid — the count, «در هر صفحه»,
   the numbered pages — and a fourth control auto-placed into it takes a whole
   `1fr` column and stretches across the width of it. On this one page the bar
   is a plain row instead, so the four controls stand side by side at their own
   sizes and share one line and one height (بند ۳۰). Nothing is removed and
   nothing changes place: the count still reads at the right, the numbered pages
   still at the left, «در هر صفحه» is where it was, and the new list sits beside
   it (بند ۲۳ و ۲۴).

   Only this management's bar: the selector is the page's own class, so the
   sixty other tables in the panel keep Filament's grid exactly as it is. */
.fi-page-photoaman-gallery-list .fi-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fi-page-photoaman-gallery-list .fi-pagination-page-jump-select-ctn,
.fi-page-photoaman-gallery-list .fi-pagination-records-per-page-select-ctn {
    flex: 0 0 auto;
    justify-self: auto;
}

/* The list itself reads as «در هر صفحه» does — the same input shell, the same
   height — and is no wider than the page numbers in it need. */
.fi-pagination-page-jump-select {
    display: inline-flex;
    align-items: center;
}

.fi-pagination-page-jump-select .fi-input-wrp {
    width: auto;
}

/* ── GALLERY-EDIT-001: the full-width gallery header, mirroring the site's ─── */

/* The cover on the right, the reading beside it on the left and right-aligned
   against it, with about half a centimetre between the two (بند ۱). */
.fi-gallery-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.2rem; /* ≈ 0.5cm between the picture and the text */
    align-items: center;
    justify-content: flex-start;
    text-align: right;
    padding: 1.25rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background: var(--gray-50, #f9fafb);
}

:where(.dark) .fi-gallery-header {
    border-color: var(--gray-700, #374151);
    background: var(--gray-900, #111827);
}

.fi-gallery-header-cover {
    flex: 0 0 auto;
    width: min(280px, 100%);
    aspect-ratio: 700 / 391;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--gray-200, #e5e7eb);
}

.fi-gallery-header-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Everything the picture leaves, aligned against it. */
.fi-gallery-header-body {
    flex: 1 1 18rem;
    min-width: 0;
}

.fi-gallery-header-badges {
    justify-content: flex-start;
}

.fi-gallery-header-title {
    margin: 0;
    line-height: 1.7;
}

.fi-gallery-header-code {
    white-space: nowrap;
}

.fi-gallery-header-info,
.fi-gallery-header-result,
.fi-gallery-header-description {
    margin: 0.375rem 0 0;
    line-height: 1.9;
}

.fi-gallery-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.fi-gallery-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    line-height: 1.8;
    /* الزام گالری-اصلاح-۰۳، ۰۶ و ۱۹: every badge on this card has an edge, and
       the same one. A photographer, a photo count and a date are three things
       side by side; without a border the eye has only the fill to go on, and on
       a badge whose fill is `transparent` — the date's — there was nothing to
       go on at all. Thin enough not to grow the badge, plain enough to read as
       a boundary rather than as decoration.

       Written here rather than in «استانداردسازی نمای پنل», which owns the size,
       the weight and the colour of the writing and no other property. */
    border: 1px solid rgb(17 24 39 / 0.28);
}

/* …white on the dark panel, where a near-black edge would vanish
   (الزام گالری-اصلاح-۰۳).

   Said as «an ancestor carries `.dark`» rather than as «no ancestor does».
   `:where(:not(.dark)) X` reads as the second and is not: it matches X whenever
   *any* ancestor lacks the class, which is true of `<body>` on every page there
   is — so a rule written that way is simply always on, in both themes. The two
   light surfaces are then the day theme, which is this rule's own absence, and
   the white card «کاور گالری از طریق کد» draws, which states its own edge
   below (الزام گالری-اصلاح-۱۹). */
:where(.dark) .fi-gallery-header-badge {
    border-color: rgb(255 255 255 / 0.45);
}

/* GALLERY-EDIT-003 و الزام گالری-اصلاح-۰۷: the gallery's date, beside the
   photographers, inside a badge of its own rather than as bare text — the same
   shape and the same size as the badges it sits with, since it carries the same
   class, and green so that the day is never read as one of the numbers around
   it.

   Two classes rather than one: «استانداردسازی نمای پنل» writes a colour for
   `.fi-gallery-header-badge-date` and its block is printed after this
   stylesheet, so a rule of equal weight would lose to it silently. Only the
   colour is said here; the size and the weight are still the management's. */
.fi-gallery-header-badge.fi-gallery-header-badge-date {
    font-weight: 600;
    color: var(--success-600, #16a34a);
}

:where(.dark) .fi-gallery-header-badge.fi-gallery-header-badge-date {
    color: var(--success-400, #4ade80);
}

/* ── الزام گالری-یکپارچه-۰۴ … ۰۸: what is missing is said, not left out ──────

   The card keeps the place of every important thing it shows. When a gallery
   has no cover, no photographs, no photographers or no date, the place stays
   and turns red — «مقدار جعلی تولید نشود», so nothing is filled in for it
   either.

   Two classes rather than one on every rule below. The panel's central
   «استانداردسازی نمای پنل» block is printed after this stylesheet and writes a
   colour for `.fi-gallery-header-badge`, `.fi-gallery-header-info` and
   `.fi-gallery-header-result`; a rule of equal weight here would lose to it
   silently. The doubled class is one step more specific, so the red survives —
   and it is the only thing these rules say, so everything else about the badge
   is still the management's. */
.fi-gallery-header-badge.fi-gallery-header-badge-empty {
    font-weight: 600;
    color: var(--danger-600, #dc2626);
    background-color: rgb(220 38 38 / 0.12);
}

:where(.dark) .fi-gallery-header-badge.fi-gallery-header-badge-empty {
    color: var(--danger-400, #f87171);
    background-color: rgb(248 113 113 / 0.16);
}

.fi-gallery-header-info.fi-gallery-header-missing,
.fi-gallery-header-result.fi-gallery-header-missing {
    font-weight: 600;
    color: var(--danger-600, #dc2626);
}

:where(.dark) .fi-gallery-header-info.fi-gallery-header-missing,
:where(.dark) .fi-gallery-header-result.fi-gallery-header-missing {
    color: var(--danger-400, #f87171);
}

/* ── «این گالری کاور ندارد», one component in four places ─────────────────────

   الزام گالری-اصلاح-۳۵: the empty-cover state is drawn by
   `resources/views/components/gallery-cover-missing.blade.php` and by nothing
   else, so the gallery card, the box a cover is chosen in, «کاور گالری از طریق
   کد» and the «کاور» column of a list all say it the same way. Only the size
   changes with the place, and each size is one rule below.

   الزام گالری-یکپارچه-۰۶: the cover's own place is kept and turned red rather
   than closed up. Same box, same 700 × 391 shape, so a card is the height it
   always is and the eye finds the picture where the picture goes. */
.fi-gallery-cover-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--danger-500, #ef4444);
    border-radius: 0.5rem;
    background-color: rgb(220 38 38 / 0.1);
    color: var(--danger-600, #dc2626);
    font-weight: 600;
    line-height: 1.7;
}

:where(.dark) .fi-gallery-cover-missing {
    background-color: rgb(248 113 113 / 0.14);
    color: var(--danger-400, #f87171);
}

/* الزام گالری-اصلاح-۱۵ و ۲۶: under the sentence, inside the same frame, the
   panel's own way in to a file. It is deliberately not red — the warning is
   about the gallery, the line under it is an action, and it keeps the white and
   yellow every «فایل را اینجا بکشید…» on this panel is written in. */
.fi-gallery-cover-missing-hint {
    font-weight: 500;
    color: var(--gray-700, #374151);
}

:where(.dark) .fi-gallery-cover-missing-hint {
    color: var(--gray-200, #e5e7eb);
}

/* The card at the top of an edit page and of «کاور گالری از طریق کد». The
   shape is `.fi-gallery-header-cover`'s, which it is drawn with. */
.fi-gallery-cover-missing-card {
    font-size: 0.875rem;
}

/* The box a cover is chosen in, at the head of it: the width of the picker it
   speaks about, and no taller than the two lines it holds — a second full-size
   frame above the panel would push «انتخاب عکس از کامپیوتر» off the screen to
   say one thing. */
.fi-gallery-cover-missing-field {
    width: 100%;
    min-height: 4.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* الزام گالری-اصلاح-۳۳: the «کاور» column of a list. The same frame and the
   same words, at the height of a row — a full-size warning inside a table would
   push every row apart to say one thing about one of them. */
.fi-gallery-cover-missing-table {
    width: 100%;
    max-width: 5.5rem;
    min-height: 2.5rem;
    margin-inline: auto;
    padding: 0.2rem 0.3rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    line-height: 1.4;
}

/* الزام گالری-یکپارچه-۰۹ … ۱۲: a photographer inside a card badge is the very
   badge «عکاسان گالری» draws, only smaller — the portrait comes down a size so
   the badge stays one line high, and the hairline comes down with it. Nothing
   here states a colour: the code keeps the panel's yellow it is given on
   `.fi-photographer-option-code`, and the badge's own colour is the
   management's. */
.fi-gallery-header-badge-photographers .fi-photographer-option {
    gap: calc(var(--spacing) * 1.5);
}

.fi-gallery-header-badge-photographers .fi-photographer-option-avatar {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-gallery-header-badge-photographers .fi-photographer-option-divider {
    height: 0.625rem;
}

/* ── GALLERY-LIST-001: the season, as a badge and a year ───────────────────── */

.fi-gallery-season {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.fi-gallery-season-badge {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.fi-gallery-season-year {
    white-space: nowrap;
}

/* ── GALLERY-EDIT-002: choosing a cover from the gallery's own photographs ─── */

.fi-gallery-photo-picker {
    display: grid;
    /* Big enough to judge a photograph by (COVER-GRID-FIX-006): the subject, the
       composition, where the players are. At 13rem a portrait came out about a
       hundred pixels tall, which is a thumbnail to recognise a file by rather
       than a picture to choose a cover from.

       The column count still follows the width, so a phone gets fewer and
       larger rather than a row of stamps — and never a sideways scroll, because
       a column is never asked to be wider than the track it is in
       (COVER-GRID-FIX-008). */
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    /* The same gap down every column and across every row (COVER-GRID-FIX-007). */
    gap: 1rem;
    /* Each tile is its own height, so a tall neighbour must not stretch the ones
       beside it into a frame their picture does not fill. */
    align-items: start;
    /* THE overlap (COVER-GRID-FIX-003). The box below has a definite height, and
       against a definite height an `auto` row is squeezed to make the rows fit —
       while each tile keeps the height its own shape asks for. Every row then
       ends shorter than the tiles standing in it and the pictures lie across the
       row beneath them, which is precisely «عکس‌ها روی یکدیگر می‌افتند»: on a
       laptop, with enough photographs to fill the box, every row but the last.
       On a tall screen with four photographs it never happens, which is how it
       survived the last two rounds of this.
       `min-content` rows take their own height and the box scrolls instead;
       `align-content: start` stops the leftovers being redistributed back. */
    grid-auto-rows: min-content;
    align-content: start;
    /* The box scrolls rather than the page (COVER-GRID-FIX-009), and it is worth
       most of the window: this modal exists to be looked at. */
    max-height: min(70vh, 44rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem;
}

/* COVER-GRID-FIX-002 … ۰۰۶ (بحرانی): one photograph, one cell, and the cell is
   the photograph.

   Three rounds of this now, and the first two both tried to give the picture a
   frame. A 700 × 391 window with the picture cropped to fill it showed a
   portrait as a band across its own middle; a fixed 4 : 3 frame with the picture
   *contained* showed the whole thing, but as a narrow ribbon adrift in a
   landscape box — «فقط یک نوار باریک از عکس دیده می‌شود», and four such ribbons
   in a row of continuous grey read as pictures piled on one another.

   There is no frame now: the tile is cut to the photograph, at the shape the
   component works out from the record and writes into `--fi-photo-shape`.

   The shape is spelled as `padding-block-start` on a pseudo-element rather than
   as `aspect-ratio`, which is what the previous attempt used. A percentage
   padding resolves against the tile's *width*, and the grid column has already
   settled that — so the height is definite, always, first time. `aspect-ratio`
   instead leaves the item's height and its grid row depending on each other,
   and Chrome resolves that circle by sizing the row shorter than the tile
   renders: the tiles then genuinely overlap the row beneath them, which is the
   thing this task is about (COVER-GRID-FIX-003). The picture is positioned
   inside that box, so nothing but the box decides the layout. */
.fi-gallery-photo-picker-item {
    position: relative;
    display: block;
    /* The tile always fills its column, so the columns line up whatever shapes
       the gallery holds (COVER-GRID-FIX-007). */
    width: 100%;
    cursor: pointer;
    border: 2px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--gray-100, #f3f4f6);
}

/* The tile's whole height. The fallback is a landscape frame, for a record that
   never got its dimensions — better a tile than a collapsed line. */
.fi-gallery-photo-picker-item::before {
    content: '';
    display: block;
    padding-block-start: var(--fi-photo-shape, 75%);
}

:where(.dark) .fi-gallery-photo-picker-item {
    border-color: var(--gray-700, #374151);
    background: var(--gray-800, #1f2937);
}

/* `contain`, so at a clamped shape the picture is letterboxed a little rather
   than cropped or stretched (COVER-GRID-FIX-005). Everywhere else the box is
   already the picture's own shape and there is nothing to letterbox. */
.fi-gallery-photo-picker-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* The radio itself is the record of the choice, not the thing to look at. */
.fi-gallery-photo-picker-input {
    position: absolute;
    inset-inline-start: 0.375rem;
    inset-block-start: 0.375rem;
    z-index: 1;
}

.fi-gallery-photo-picker-item:has(.fi-gallery-photo-picker-input:checked) {
    border-color: var(--primary-500, #f59e0b);
    box-shadow: 0 0 0 2px var(--primary-200, #fde68a);
}

/* ── GALLERY-EDIT-003: the footer row — the switch beside the button ───────── */

.fi-gallery-form-footer {
    align-items: center;
}

/* GALLERY-EDIT-006: ذخیره → انصراف → «نمایش گالری در سایت», reading from the
   right, all on one line with about half a centimetre between the last button
   and the switch. The switch used to sit in a half-page column of its own at
   the far end of the row, which put the whole width of the page between it and
   the button it belongs beside.

   `display: flex` on the schema's own grid rather than a column count on the
   component: Filament writes the column count into the class list, so the row
   is laid out here, where it can be a row of exactly what is in it. */
.fi-gallery-form-footer > .fi-sc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 0.5cm;
}

.fi-gallery-form-footer > .fi-sc > .fi-grid-col {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* چک-گالری-۰۱۰ و ۰۴۸: «یادداشت» wraps onto a line of its own under the two
   switches rather than being squeezed between them. The row above is a flex
   line of auto-width items, which is right for two switches and two buttons and
   wrong for a box someone writes a sentence in, so this one column is told to
   take the whole line and push what follows it down. Nothing else about the row
   changes, and at narrow widths the row was already wrapping. */
.fi-gallery-form-footer > .fi-sc > .fi-grid-col:has(.fi-gallery-recheck-note) {
    flex: 1 1 100%;
    width: 100%;
    max-width: 32rem;
}

/* The cover panel is a 700 × 391 window, not a page-wide one — at full width an
   empty one is a wall of nothing, and a filled one is bigger than the site
   will ever render it.
   A third narrower again (تسک ۱۵، بند ۷): this is the size it is *shown* at and
   nothing else — the file that leaves this page is still 700 × 391. */
.fi-gallery-cover {
    max-width: 22.5rem;
}

/* ── The cover picker is the whole of cover management ─────────────────────
   (الزام کاور-یکپارچه-۰۳ … ۰۷)

   One field, one reading. A gallery that has a cover shows it in the panel
   below; a gallery that has none says so in the panel's own idle label. What
   used to stand above the field — a red frame on one page, «کاور فعلی این
   گالری» on another — is gone from both, so there is no page left where the
   cover, or the lack of one, is read anywhere but here. */

/* الزام کاور-یکپارچه-۰۴-۲: the file's name, off the picture.
   FilePond prints «xKZM…jpg» and its size across the top of the preview, over
   the very thing the operator is looking at. A cover is chosen by eye — the
   name of the file it came out of says nothing about whether it is the right
   picture, and it covered a third of the frame to say it. */
.fi-gallery-cover .filepond--file-info {
    display: none;
}

/* الزام کاور-یکپارچه-۰۴-۱: the «×» keeps its meaning, loses its coin.
   FilePond draws every action button as a white glyph on a 50%-black disc. On
   a 700 × 391 photograph that disc read as a hole punched in the cover. The
   glyph stays and stays legible — a drop shadow does on any photograph what the
   disc was there to do, without taking a bite out of the image. */
.fi-gallery-cover .filepond--file-action-button {
    background-color: transparent;
    box-shadow: none;
    /* تسک ۱۴۰۵/۰۶/۰۵/۰۴، بند ۱۲ و ۱۳: قرمز، و تقریباً دو برابر اندازهٔ قبلی.
       FilePond خود دکمه را ۱٫۶۲۵em می‌کشد و svg تمام آن را پر می‌کند، پس
       بزرگ‌کردن خود دکمه هم گلیف و هم محدودهٔ کلیک را با هم بزرگ می‌کند —
       بدون transform، که جای دکمه را در گوشه جابه‌جا می‌کرد. رنگ از
       currentColor خود svg خوانده می‌شود. */
    width: 3.25em;
    height: 3.25em;
    color: var(--std-color-danger-600, #dc2626);
}

.dark .fi-gallery-cover .filepond--file-action-button {
    color: var(--std-color-danger-400, #f87171);
}

.fi-gallery-cover .filepond--file-action-button:hover,
.fi-gallery-cover .filepond--file-action-button:focus {
    background-color: transparent;
    box-shadow: none;
}

/* سایه باقی می‌ماند: ضربدر روی خود عکس می‌نشیند و روی کاور روشن باید همچنان
   دیده شود. */
.fi-gallery-cover .filepond--file-action-button svg {
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.85));
}

/* الزام کاور-یکپارچه-۰۶: «این گالری کاور ندارد», inside the picker.
   The words the card and the list column carry, said in the one place the
   operator can do something about them, with the panel's usual way in to a file
   directly under them. Red is the sentence, not a frame around it: the picker
   already has an outline, and a second box inside it was the arrangement this
   replaces. */
.fi-cover-picker-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.7;
}

.fi-cover-picker-label-missing {
    font-weight: 700;
    color: var(--danger-600, #dc2626);
}

:where(.dark) .fi-cover-picker-label-missing {
    color: var(--danger-400, #f87171);
}

/* …and the line under it is not red. The warning is about the gallery; this is
   an action, and it keeps the wording and the colours every other
   «فایل را اینجا بکشید…» on this panel is written in. */
.fi-cover-picker-label-hint {
    font-weight: 500;
    color: var(--gray-700, #374151);
}

:where(.dark) .fi-cover-picker-label-hint {
    color: var(--gray-200, #e5e7eb);
}

/* ── The «گالری» box: cover right, everything said about it stacked left ──────
   (بند ۳–۶ و ۱۴)

     ┌──────────────┬──────────────────────┐
     │              │  وضعیت گالری          │
     │  کاور        │  عکاسان               │
     │              │  [گالری] [کامپیوتر]   │
     └──────────────┴──────────────────────┘

   The two buttons are the upload field's own hint actions and have to stay
   there — moved into a component of their own they stop running — but they
   belong in the third row on the *left*, which is a different cell from the
   preview. So the field and the grid column Filament wraps it in are both
   flattened with `display: contents`, which promotes the field's label column
   (the buttons) and its content column (the preview) to items of the box's own
   grid, where each can be placed on its own.

   Column 1 is the right-hand one: the panel is RTL. */

.fi-gallery-cover-row {
    display: contents;
}

@media (min-width: 1024px) {
    .fi-gallery-box .fi-section-content {
        grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
        align-items: start;
        column-gap: 1.5rem;
    }

    /* Two wrappers, not one: Filament puts a `.fi-sc-component` inside the grid
       column, and that is the box the grid actually lays out. Both have to
       vanish for the field's own two columns to become grid items. */
    .fi-gallery-box .fi-section-content > .fi-grid-col:has(.fi-gallery-cover-row),
    .fi-gallery-box .fi-section-content > .fi-grid-col > .fi-sc-component:has(.fi-gallery-cover-row) {
        display: contents;
    }

    .fi-gallery-cover-row > .fi-fo-field-content-col {
        grid-column: 1;
        grid-row: 1 / span 3;
        min-width: 0;
    }

    .fi-gallery-cover-row > .fi-fo-field-label-col {
        grid-column: 2;
        grid-row: 3;
        min-width: 0;
    }

    .fi-gallery-box .fi-section-content > .fi-grid-col:has(.fi-gallery-box-status) {
        grid-column: 2;
        grid-row: 1;
    }

    .fi-gallery-box .fi-section-content > .fi-grid-col:has(.fi-gallery-box-photographers) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Only ever shown for a gallery with no fixture to name it; when it is
       shown it goes under the whole arrangement rather than into it. */
    .fi-gallery-box .fi-section-content > .fi-grid-col:has(.fi-gallery-box-template) {
        grid-column: 1 / -1;
        grid-row: 4;
    }
}

/* The two ways in, side by side, filling the row under «عکاسان» and the same
   height as each other (بند ۶). */
.fi-gallery-cover-row > .fi-fo-field-label-col .fi-fo-field-label-ctn {
    display: block;
}

.fi-gallery-cover-row > .fi-fo-field-label-col .fi-sc-action {
    display: flex;
}

/* As many columns as there are buttons. «انتخاب عکس از گالری» is hidden
   (الزام گالری-یکپارچه-۱۹), so the row must not keep half of itself empty for
   it — and it must go straight back to two halves the day the button returns. */
.fi-gallery-cover-row > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-sc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.fi-gallery-cover-row > .fi-fo-field-label-col .fi-sc-action > .fi-btn {
    width: 100%;
    height: 100%;
    justify-content: center;
}

/* ── «بارگذاری عکس از طریق کد گالری»: the gallery card ─────────────────────── */

/* Where the cover would be, when there is none (UPLOAD-CODE-FIX-007). The frame
   keeps the card's shape and says what it is; it is scenery, and no page treats
   it as a cover. */
/* Off-white rather than the panel's dark surface, with the text darkened to
   match (UPLOAD-CODE-FIX-009 و ۰۱۰). Scoped to this page: the same component
   heads the gallery edit page, which was not asked to change.

   Stated rather than taken from a token: the panel's grey scale flips with the
   theme, so `--gray-50` is nearly black in the dark one — and this card is
   meant to read as a light surface either way. #f8f8f6 is soft rather than a
   glaring pure white. */
/* استاندارد-اصلاح-۰۰۴ و ۰۰۵، استاندارد-رنگ-۰۰۱: the card is light in both
   modes, so the night colours the standards carry would put pale writing on a
   pale surface. This is not an exception to any standard — it is every
   standard's *day* value, used at night as well — and it is said by pointing
   each night token at its own day token, so the values still come from
   «استاندارد‌سازی نمای پنل» and not one colour code is written here. */
.fi-page-upload-by-code .fi-gallery-header,
:where(.dark) .fi-page-upload-by-code .fi-gallery-header {
    background: var(--std-color-hex-f8f8f6);
    border-color: var(--std-color-hex-e3e3df);

    --std-gallery-card-title-color-dark: var(--std-gallery-card-title-color);
    --std-gallery-card-code-color-dark: var(--std-gallery-card-code-color);
    --std-gallery-card-info-color-dark: var(--std-gallery-card-info-color);
    --std-header-record-name-color-dark: var(--std-header-record-name-color);

    --std-combo-badge-photos-text-dark: var(--std-combo-badge-photos-text);
    --std-combo-badge-photos-background-dark: var(--std-combo-badge-photos-background);
    --std-combo-badge-photographers-text-dark: var(--std-combo-badge-photographers-text);
    --std-combo-badge-photographers-background-dark: var(--std-combo-badge-photographers-background);
    --std-combo-badge-plain-text-dark: var(--std-combo-badge-plain-text);
}

/* …and so does the empty frame. */
/* الزام گالری-یکپارچه-۰۶ و الزام گالری-اصلاح-۲۲: on this page's light card too,
   «کاور ندارد» stays red rather than being repainted to match the paper — it is
   a warning, and the whole point of it is that it is not the colour of the
   card. */
.fi-page-upload-by-code .fi-gallery-cover-missing,
:where(.dark) .fi-page-upload-by-code .fi-gallery-cover-missing {
    border-color: var(--danger-500, #ef4444);
    background-color: rgb(220 38 38 / 0.1);
    color: var(--danger-600, #dc2626);
}

.fi-page-upload-by-code .fi-gallery-cover-missing-hint,
:where(.dark) .fi-page-upload-by-code .fi-gallery-cover-missing-hint {
    color: var(--gray-700, #374151);
}

/* الزام گالری-اصلاح-۱۹: this card is light in both themes, so the badges on it
   need the dark edge in both — a white one would disappear into the paper,
   which is precisely the complaint. */
.fi-page-upload-by-code .fi-gallery-header-badge,
:where(.dark) .fi-page-upload-by-code .fi-gallery-header-badge {
    border-color: rgb(17 24 39 / 0.28);
}

/* …and the hairline in a photographer's badge with it (الزام گالری-اصلاح-۲۱).
   White on this page's own paper is not a line; the badge it divides is drawn
   in «نشان زرد — عکاسان», which is near-white here. */
.fi-page-upload-by-code .fi-photographer-option-divider,
:where(.dark) .fi-page-upload-by-code .fi-photographer-option-divider {
    background-color: rgb(3 7 18 / 0.45);
}

/* الزام گالری-اصلاح-۲۰: the date badge is green here as well, in the darker
   green the light card can carry. */
.fi-page-upload-by-code .fi-gallery-header-badge.fi-gallery-header-badge-date,
:where(.dark) .fi-page-upload-by-code .fi-gallery-header-badge.fi-gallery-header-badge-date {
    color: var(--success-700, #15803d);
}

/* ── «بارگذاری عکس»: the cover box ─────────────────────────────────────────── */

/* The gallery's current cover is no longer repeated here (UPLOAD-COVER-UI-002).
   It is in the gallery card above, and this box is only ever about the cover
   the gallery is *getting*: choose, crop, preview, save. */

/* The panel and the two buttons, side by side, with the buttons finishing level
   with the bottom of the preview (UPLOAD-COVER-UI-004).

   Read in RTL: the panel takes the right, and `margin-inline-start: auto`
   carries the buttons to the left edge of the box. `align-items: flex-end` is
   what levels their bottom with the panel's — which is why the box's one line
   of guidance sits below both columns rather than under the panel.

   The children are the section's own grid cells in schema order: the panel,
   the buttons, the guidance. */
/* PHOTO-UPLOAD-UI-301 و ۳۰۲ / PHOTO-CODE-COVER-301 و ۳۰۲: the two buttons belong
   *beside the cover field*, about half a centimetre off its left edge — near
   enough to read as part of it, far enough not to touch it. They used to be
   carried to the far end of the box by `margin-inline-start: auto`, which put
   the whole width of the page between «ذخیره کاور» and the picture it saves.

   1.25rem is that half centimetre at the panel's own root size; the unit is not
   cm on purpose, so the gap scales with the rest of the layout. */
.fi-upload-cover-section .fi-section-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
}

/* Grows to the 22.5rem the preview is drawn at, and gives way before the row
   breaks — so a tablet keeps the buttons beside the panel rather than under it. */
.fi-upload-cover-section .fi-section-content > .fi-grid-col:nth-child(1) {
    flex: 1 1 12rem;
    max-width: 22.5rem;
    min-width: 0;
}

.fi-upload-cover-section .fi-section-content > .fi-grid-col:nth-child(2) {
    flex: 0 0 auto;
}

.fi-upload-cover-section .fi-section-content > .fi-grid-col:nth-child(3) {
    flex: 1 0 100%;
}

/* الزام گالری-یکپارچه-۲۸: «نمایش گالری در ویو» and «ذخیره» at the end of the
   very box the cover is managed in, on their own line under the hint — where
   the fourth cell of this box's flex row is. They used to be a box of their own
   the height of this one. */
.fi-upload-cover-section .fi-section-content > .fi-grid-col:nth-child(4) {
    flex: 1 0 100%;
}

/* Compact and beside each other, reading from the right: ذخیره, then the
   switch about half a centimetre off it — the very arrangement the foot of a
   gallery's edit page uses (`fi-gallery-form-footer`). */
.fi-cover-by-code-decision > .fi-sc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 0.5cm;
}

.fi-cover-by-code-decision > .fi-sc > .fi-grid-col {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* ── الزام گالری-یکپارچه-۳۲ … ۳۷: «شما به این گالری دسترسی ندارید» ───────────

   In the middle of the page and over everything, so it is read before anything
   else is done. It was a small panel in the top corner, above the topbar and
   below an operator's attention; the sentence in it is unchanged. */
.fi-gallery-access-warning {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgb(3 7 18 / 0.6);
}

.fi-gallery-access-warning-box {
    width: min(28rem, 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--danger-500, #ef4444);
    border-radius: 0.75rem;
    background-color: var(--gray-50, #f9fafb);
    box-shadow: 0 20px 45px rgb(3 7 18 / 0.35);
}

:where(.dark) .fi-gallery-access-warning-box {
    background-color: var(--gray-900, #111827);
}

.fi-gallery-access-warning-text {
    margin: 0;
    line-height: 2.1;
    font-weight: 600;
    color: var(--danger-600, #dc2626);
}

:where(.dark) .fi-gallery-access-warning-text {
    color: var(--danger-400, #f87171);
}

/* One control, and it is obvious which one (الزام گالری-یکپارچه-۳۵). Enter is
   bound to the same call, so the ring below is what a keyboard sees when the
   window opens (الزام گالری-یکپارچه-۳۶). */
.fi-gallery-access-warning-button {
    align-self: center;
    min-width: 9rem;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--gray-950, #030712);
    background-color: var(--warning-500, #f59e0b);
}

.fi-gallery-access-warning-button:focus-visible {
    outline: 2px solid var(--warning-400, #fbbf24);
    outline-offset: 2px;
}

/* Narrow screens: the buttons drop under the panel rather than squeezing it.
   Their order and what they do is unchanged (UPLOAD-RESPONSIVE-001). */
@media (max-width: 47.99em) {
    .fi-upload-cover-section .fi-section-content > .fi-grid-col:nth-child(1),
    .fi-upload-cover-section .fi-section-content > .fi-grid-col:nth-child(2) {
        flex: 1 0 100%;
        max-width: none;
    }
}

/* ── «بارگذاری عکس از طریق کد گالری»: the code box ─────────────────────────── */

/* Desktop: the field takes about half the box and «جستجو» sits beside it rather
   than under it (UPLOAD-CODE-UI-002).

   The button is pushed down past the field's own label so the two line up on
   the input, not on the label above it. */
@media (min-width: 48em) {
    .fi-upload-code-section .fi-section-content {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .fi-upload-code-section .fi-section-content > .fi-grid-col:nth-child(1) {
        flex: 0 1 50%;
        min-width: 0;
    }

    .fi-upload-code-section .fi-section-content > .fi-grid-col:nth-child(2) {
        flex: 0 0 auto;
        padding-block-start: 1.75rem;
    }

    /* Whatever the search had to say goes on its own line under the rest. */
    .fi-upload-code-section .fi-section-content > .fi-grid-col:has(.fi-upload-code-error) {
        flex: 1 0 100%;
    }
}

/* The counter that used to sit beside «جستجو» — a green, white-outlined or
   yellow badge with the gallery's photograph count in it — is gone from that
   place (تسک ۱۸، بند ۲۰). Its reading moved into the page's own header as plain
   text; the rules for it are with the rest of the header, below.
   (تسک ۱۷/۰۱، بند ۱۸ … ۲۳ is what put it beside the button.) */

/* Mobile keeps the field on its own row with «جستجو» under it — the layout the
   box already had, stated rather than inherited so nothing overflows
   (UPLOAD-CODE-UI-003). */

/* ── تسک «فشرده‌سازی چیدمان»: less empty space on both upload managements ──── */

/* «تایتل صفحه | آواتار سازنده گالری» (UPLOAD-UI-001). Until a gallery is named
   the heading is the title alone, and neither the bar nor the picture exists to
   be styled. */
.fi-page-photo-upload .fi-header-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* PHOTO-UPLOAD-HEADER-302 / PHOTO-CODE-HEADER-302: «کد گالری: ۱۰۰۰» in the
   panel's own yellow, so an operator can see at a glance which gallery they are
   filling. Never wrapped onto a second line — a code split across two rows is
   not a code. */
.fi-upload-header-code {
    white-space: nowrap;
}

/* تسک ۱۸، بند ۲۱ — «بعد از آواتار عکاس → خط عمودی سفید → متن تعداد عکس».

   «این عنصر دکمه نباشد؛ Background دکمه‌ای نداشته باشد؛ فقط اطلاعات متنی باشد؛
   با اطلاعات هدر هماهنگ باشد»: so no border, no fill, no radius and no padding —
   the only thing said here is that it never wraps and that its own figure is
   legible. The words take the heading's colour, which «استانداردسازی نمای پنل»
   owns and this must not touch. */
.fi-upload-header-tally {
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    font-weight: 400;
}

/* The number itself carries the weight, so the count can be read off the header
   at a glance without the label shouting. */
.fi-upload-header-tally-value {
    font-weight: 700;
}

/* «خط عمودی سفید» — the separator before it, white in both themes, and
   deliberately a different element from `.fi-upload-header-separator`, which is
   the bar between the page's name and the gallery's code. */
.fi-upload-header-divider {
    color: var(--color-white, #ffffff);
    opacity: 0.75;
}

:where(:not(.dark)) .fi-upload-header-divider {
    color: var(--gray-400, #9ca3af);
    opacity: 1;
}

.fi-upload-header-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
    background: var(--gray-200, #e5e7eb);
}

:where(.dark) .fi-upload-header-avatar {
    background: var(--gray-700, #374151);
}

/* Half the gap the page used to leave between the last box and «شروع بارگذاری»,
   and between the boxes at the foot of the page and the one above them
   (UPLOAD-SPACING-001 و ۰۰۲).

   Both halves of it: the page's own row gap and the margin each of those blocks
   carries — 32px + 24px became 16px + 12px. Only the blocks below the form
   move; the form's own sections keep the spacing they had. */
.fi-page-photo-upload .fi-page-content {
    row-gap: 1rem;
}

.fi-page-photo-upload .fi-photo-upload-blocked,
.fi-page-photo-upload .fi-photo-upload-result,
.fi-page-photo-upload .fi-photo-upload-queue,
.fi-page-photo-upload .fi-photo-upload-actions {
    margin-block-start: 0.75rem;
}

/* ── «بارگذاری عکس»: the gallery that cannot receive photographs ───────────── */

/* Not a Filament notification: this is a standing condition of the chosen
   gallery, not something that happened, and it has to stay on screen with the
   link that fixes it. */
.fi-photo-upload-blocked {
    margin-block-start: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--danger-300, #fca5a5);
    border-radius: 0.75rem;
    background-color: var(--danger-50, #fef2f2);
    line-height: 1.9;
}

.fi-photo-upload-blocked-link {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-weight: 700;
    text-decoration: underline;
}

/* ── «بارگذاری عکس»: the result of a run, and the upload queue ────────────── */

/* «خلاصه مقصد» used to be the first of these, a white card above «شروع
   بارگذاری» repeating the gallery, its code, the photographer and the file
   count. It is off the page (الزام کاور-یکپارچه-۰۸) and its rules went with it;
   what is left here is the card a *finished* run leaves behind, which says
   something no other part of the page does. */

/* PHOTO-UPLOAD-UI-303 و ۳۰۴ / PHOTO-CODE-UPLOAD-UI-301 و ۳۰۲: the light boxes
   above «شروع بارگذاری» state their own background and nothing about their
   text, so in the dark theme they came out near-white boxes carrying the
   theme's near-white type — «نوشته‌ها سفید هستند و روی Background روشن خوانده
   نمی‌شوند». The backgrounds are right and are left alone; what they were
   missing is a text colour of their own, in both themes.

   Stated on the box and on every part of it that sets a colour, because a rule
   the dark theme writes on `dt` is not overridden by one written on the box. */
.fi-photo-upload-result,
:where(.dark) .fi-photo-upload-result {
    color: var(--gray-800, #1f2937);
}

.fi-photo-upload-result-title,
.fi-photo-upload-result-list dd,
:where(.dark) .fi-photo-upload-result-title,
:where(.dark) .fi-photo-upload-result-list dd {
    color: var(--gray-900, #111827);
}

.fi-photo-upload-result-title,
.fi-photo-upload-queue-title {
    font-weight: 700;
    margin-block-end: 0.75rem;
}

.fi-photo-upload-queue {
    margin-block-start: 1.5rem;
}

.fi-photo-upload-queue-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.fi-photo-upload-queue-progress-text {
    font-size: 0.875rem;
    color: var(--gray-600, #4b5563);
}

.fi-photo-upload-queue-failed {
    color: var(--danger-600, #dc2626);
}

.fi-photo-upload-progress {
    height: 0.5rem;
    margin-block: 0.5rem 1rem;
    border-radius: 999px;
    background-color: var(--gray-200, #e5e7eb);
    overflow: hidden;
}

.fi-photo-upload-progress-bar {
    height: 100%;
    background-color: var(--primary-500, #f59e0b);
    transition: width 0.3s ease;
}

.fi-photo-upload-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.fi-photo-upload-table th,
.fi-photo-upload-table td {
    padding: 0.5rem 0.75rem;
    text-align: start;
    border-block-end: 1px solid var(--gray-200, #e5e7eb);
}

.fi-photo-upload-table th {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    font-weight: 600;
}

/* A filename is an identifier: it reads as it is on disk, never re-ordered by
   the RTL layout. */
.fi-photo-upload-row-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
}

.fi-photo-upload-row-error {
    color: var(--danger-600, #dc2626);
}

.fi-photo-upload-status {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

.fi-photo-upload-retry {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-600, #d97706);
    text-decoration: underline;
}

.fi-photo-upload-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block-start: 1.5rem;
}

/* «بارگذاری» while nothing has been chosen (آژانس ـ بارگذاری ـ دکمه ـ ۰۰۲).

   The button really is disabled — the attribute is on it, Filament puts
   `pointer-events: none` behind that, and the server refuses an empty نوبت
   whatever arrives — but the panel's own disabled state is `opacity: .7`, and
   seven tenths of the agency's yellow is still plainly a yellow button. The
   operator had to press it to find out.

   No colour is invented and none is written here: the button keeps the very
   fill its role is given in «استانداردسازی نمای پنل», and it is drained of it
   and dimmed. That is why this rule declares no `color`, no `background` and no
   size — those belong to the management, and a stylesheet may not decide them
   for a button (بند ۱۵ of the panel standards). What is left — how much of the
   colour is there at all — is this page's to say.

   `not-allowed` rather than Filament's `default`: the cursor is the one part of
   the answer that arrives before the click. */
.fi-photo-upload-actions .fi-btn[disabled]:not(.fi-force-enabled) {
    opacity: 0.45;
    filter: grayscale(0.9);
    cursor: not-allowed;
}

/* ── «بارگذاری عکس»: what the نوبت came to ────────────────────────────────── */

.fi-photo-upload-result {
    margin-block-start: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    background-color: var(--gray-50, #f9fafb);
}

/* Partial success is its own colour. A run that put 143 photographs in a
   gallery and lost 7 is neither green nor red. */
.fi-photo-upload-result-success {
    border-color: var(--success-300, #86efac);
    background-color: var(--success-50, #f0fdf4);
}

.fi-photo-upload-result-warning {
    border-color: var(--warning-300, #fcd34d);
    background-color: var(--warning-50, #fffbeb);
}

.fi-photo-upload-result-danger {
    border-color: var(--danger-300, #fca5a5);
    background-color: var(--danger-50, #fef2f2);
}

.fi-photo-upload-result-title {
    margin-block-end: 0.75rem;
}

.fi-photo-upload-result-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem 1.5rem;
}

.fi-photo-upload-result-list dt {
    color: var(--gray-500, #6b7280);
    font-size: 0.75rem;
}

.fi-photo-upload-result-list dd {
    font-weight: 700;
}

.fi-photo-upload-result-ok {
    color: var(--success-700, #15803d);
}

.fi-photo-upload-result-bad {
    color: var(--danger-700, #b91c1c);
}

/* ══ تسک ۱۴۰۵/۰۷/۰۳/۱۷ — «بارگذاری عکس» در سه مدیریت ══════════════════════ */

/* ── بند ۷: the chosen photographs, twelve to a row ───────────────────────── */

/*
 * «در وضعیت فعلی حدود سه کارت عکس در هر ردیف نمایش داده می‌شود و فضای بسیار
 * زیادی از صفحه اشغال می‌شود… در نسخه دسکتاپ ۱۲ عکس در هر ردیف نمایش داده شود.»
 *
 * Filament lays a grid picker out at two per row and three from 64rem up. Only
 * the two upload managements are widened past that, and only inside their own
 * picker — `.fi-upload-files-section` — so the cover picker on the same page,
 * the photographer's portrait and every other file box in the panel keep the
 * layout the framework gives them.
 *
 * The steps below are بند ۷'s second half: «در موبایل و عرض‌های کوچک‌تر، تعداد
 * ستون‌ها به‌صورت واکنش‌گرا کاهش پیدا کند و اجبار ۱۲ ستون باعث غیرقابل‌استفاده‌شدن
 * صفحه نشود.» Twelve is the desktop answer and nothing narrower is asked to
 * carry it.
 *
 * `- .5rem` is the framework's own arithmetic, kept: FilePond gives each item a
 * `.25em` margin on both sides, and the subtraction is what leaves room for it.
 */
.fi-page-photo-upload .fi-upload-files-section .filepond--root[data-style-panel-layout='grid'] .filepond--item {
    width: calc(33.333% - 0.5rem);
}

@media (min-width: 30rem) {
    .fi-page-photo-upload .fi-upload-files-section .filepond--root[data-style-panel-layout='grid'] .filepond--item {
        width: calc(25% - 0.5rem);
    }
}

@media (min-width: 48rem) {
    .fi-page-photo-upload .fi-upload-files-section .filepond--root[data-style-panel-layout='grid'] .filepond--item {
        width: calc(12.5% - 0.5rem);
    }
}

@media (min-width: 64rem) {
    .fi-page-photo-upload .fi-upload-files-section .filepond--root[data-style-panel-layout='grid'] .filepond--item {
        width: calc(8.3333% - 0.5rem);
    }
}

/*
 * …and everything inside the card with it (بند ۷: «ابعاد موارد زیر متناسب کاهش
 * پیدا کنند: تصویر بندانگشتی؛ کارت عکس؛ نام فایل؛ وضعیت؛ آیکن‌ها؛ کنترل‌های داخل
 * کارت»).
 *
 * One declaration rather than six. FilePond sizes every part of a card in `em`
 * — the padding, the filename, the status line, the round action buttons, the
 * gap between them — off the root's own font size, so moving that moves all of
 * them together and in proportion. Picking each one off separately would be six
 * numbers that could drift apart, and would still leave the parts not named
 * here at full size inside a card a twelfth of the width.
 *
 * The thumbnail needs nothing: its height follows the item's width, which the
 * rules above have already divided by four.
 */
@media (min-width: 48rem) {
    .fi-page-photo-upload .fi-upload-files-section .filepond--root {
        font-size: 0.6875rem;
    }
}

/* The drop area above the cards keeps its own reading size — it is a sentence
   addressed to the operator, not a label on a card. */
.fi-page-photo-upload .fi-upload-files-section .filepond--drop-label {
    font-size: 0.875rem;
}

/* ── بند ۸: «صف بارگذاری» ─────────────────────────────────────────────────── */

/* «ارتفاع هر ردیف صف بارگذاری حدود ۲۵ درصد بیشتر از وضعیت فعلی شود.»
   0.5rem of padding above and below became 0.75rem: a 2.25rem row is 2.75rem,
   which is the asked-for quarter. */
.fi-photo-upload-table td {
    padding-block: 0.75rem;
}

/* «اولین ستون از سمت راست: عکس. در هر ردیف، تصویر بندانگشتی همان عکسی که قرار
   است بارگذاری شود نمایش داده شود.» Narrow and fixed, so the picture cannot
   push the filename about as names get longer. */
.fi-photo-upload-col-thumb {
    width: 3.5rem;
}

.fi-photo-upload-row-thumb {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.375rem;
    object-fit: cover;
    background-color: var(--gray-200, #e5e7eb);
}

:where(.dark) .fi-photo-upload-row-thumb {
    background-color: var(--gray-700, #374151);
}

/* «عنوان «نام فایل» دقیقاً بالای نام فایل‌ها و هم‌راستا با همان ستون باشد.»

   The column was never crooked. The cell carries `dir="ltr"` so that a filename
   reads in the order it is on disk, and `text-align: start` inside an LTR cell
   means *left* — while the heading one row above, still in the page's RTL,
   meant right. Two edges, two answers. Saying `right` for both ends it, and the
   `dir` attribute that makes the name readable is untouched.

   Written against the table rather than against the class alone: the box above
   already says `text-align: start` for every `th` and `td` of this table, and
   one class does not outrank a class and an element. */
.fi-photo-upload-table .fi-photo-upload-col-name {
    text-align: right;
}

/* ── بند ۱۴: the photographs refused for being chosen twice ───────────────── */

.fi-photo-upload-duplicates {
    margin-block-start: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--warning-300, #fcd34d);
    border-radius: 0.75rem;
    background-color: var(--warning-50, #fffbeb);
    color: var(--gray-800, #1f2937);
}

:where(.dark) .fi-photo-upload-duplicates {
    background-color: color-mix(in srgb, var(--warning-400, #fbbf24) 10%, transparent);
    color: var(--gray-200, #e5e7eb);
}

.fi-photo-upload-duplicates-title {
    font-weight: 700;
    margin-block-end: 0.5rem;
}

.fi-photo-upload-duplicates ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fi-photo-upload-duplicate {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.fi-photo-upload-duplicate-thumb {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    object-fit: cover;
    background-color: color-mix(in srgb, var(--warning-400, #fbbf24) 25%, transparent);
}

.fi-photo-upload-duplicate-body {
    display: flex;
    flex-direction: column;
    line-height: 1.7;
}

.fi-photo-upload-duplicate-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    text-align: right;
}

.fi-photo-upload-duplicate-reason {
    font-size: 0.8125rem;
}

/* ── بند ۹ … ۲۰: «در حال بارگذاری عکس» → «گزارش پایان بارگذاری» ───────────── */

/*
 * One window for both halves of the operation (بند ۱۵). `position: fixed` with
 * `inset: 0` is بند ۹'s «پاپ‌آپ مرکزی»: the viewport becomes its containing
 * block, so scrolling the queue underneath cannot carry the run off the screen.
 *
 * It takes clicks, unlike a plain veil: «مشاهده شد» is on it, and while it is
 * up the operator has nothing else to do on this page.
 */
.fi-photo-upload-window {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: color-mix(in srgb, var(--gray-950, #030712) 55%, transparent);
}

/* تسک ۱۸، بند ۷ — the window is up from the moment the photographs are chosen,
   and in that moment it must not be a curtain: the operator may still be adding
   files to the picker behind it. So `staging` has no backdrop and docks at the
   foot of the viewport, and the page above it stays reachable.

   `running` and `finished` keep the full overlay they had — while a run is going
   nothing under it may be touched, and the report is the thing to be read. */
.fi-photo-upload-window[data-state='staging'] {
    align-items: flex-end;
    background-color: transparent;
    pointer-events: none;
}

.fi-photo-upload-window[data-state='staging'] .fi-photo-upload-window-box {
    pointer-events: auto;
    width: min(38rem, 100%);
    max-height: 60vh;
}

.fi-photo-upload-window-box {
    position: relative;
    width: min(30rem, 100%);
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--gray-400, #9ca3af) 45%, transparent);
    background-color: var(--gray-900, #111827);
    color: var(--gray-200, #e5e7eb);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--gray-950, #030712) 55%, transparent);
    text-align: right;
}

/* بند ۱۰ — «در حال بارگذاری عکس | کد گالری | آواتار عکاس», on one line and
   centred, exactly as the sample window puts it. */
.fi-photo-upload-window-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: 700;
    line-height: 2;
    text-align: center;
}

/* بند ۱۱ — «به‌جای آن آیکن زرد مخصوص عکس نمایش داده شود». The sample carries the
   green Baligpa mark; this operation is about photographs, and it wears the
   panel's own yellow. */
.fi-photo-upload-window-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary-400, #facc15);
}

.fi-photo-upload-window-icon svg {
    width: 100%;
    height: 100%;
}

.fi-photo-upload-window-title {
    color: var(--primary-400, #facc15);
}

/* The report is not an operation in progress, so it reads as an answer rather
   than as an ongoing thing. */
.fi-photo-upload-window[data-state='finished'] .fi-photo-upload-window-title {
    color: var(--success-400, #4ade80);
}

.fi-photo-upload-window-separator {
    color: color-mix(in srgb, var(--gray-400, #9ca3af) 70%, transparent);
}

/* بند ۱۰ — «کد گالری با رنگ سفید نمایش داده شود». Never wrapped: a code split
   across two lines is not a code. */
.fi-photo-upload-window-code {
    color: var(--color-white, #ffffff);
    white-space: nowrap;
}

/* بند ۱۰ — «آواتار عکاس مربوط به همین گالری نیز در همان سربرگ دیده شود تا در
   تمام مدت عملیات مشخص باشد عکس‌های کدام عکاس… در حال بارگذاری هستند». */
.fi-photo-upload-window-avatar {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    object-fit: cover;
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 25%, transparent);
}

/* بند ۹ — four figures, each a number over the word for what it counts, so the
   window is read at a glance rather than parsed. */
.fi-photo-upload-window-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.fi-photo-upload-window-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--gray-400, #9ca3af) 30%, transparent);
}

.fi-photo-upload-window-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}

.fi-photo-upload-window-stat-label {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* بند ۹ — «رنگ‌بندی و مدل کادرهای آماری مطابق نمونه تصویری ارائه‌شده باشد»:
   «کل عکس‌ها» سفید، «بارگذاری‌شده/موفق» سبز، «باقی‌مانده» زرد، «خطا/ناموفق» قرمز. */
.fi-photo-upload-window-stat[data-kind='total'] {
    border-color: var(--color-white, #ffffff);
}

.fi-photo-upload-window-stat[data-kind='done'] {
    border-color: var(--success-500, #10b981);
}

.fi-photo-upload-window-stat[data-kind='remaining'] {
    border-color: var(--primary-400, #facc15);
}

.fi-photo-upload-window-stat[data-kind='failed'] {
    border-color: var(--danger-500, #ef4444);
}

.fi-photo-upload-window-stat[data-kind='done'] .fi-photo-upload-window-stat-value {
    color: var(--success-500, #10b981);
}

.fi-photo-upload-window-stat[data-kind='remaining'] .fi-photo-upload-window-stat-value {
    color: var(--primary-400, #facc15);
}

.fi-photo-upload-window-stat[data-kind='failed'] .fi-photo-upload-window-stat-value {
    color: var(--danger-500, #ef4444);
}

/* تسک ۱۴۰۵/۰۷/۱۳/۲۴، بند ۹ — «کارت انتخاب‌شده باید از نظر بصری کاملاً مشخص
   باشد».

   Once the report is open، «موفق» و «ناموفق» دکمه‌اند و نه عدد؛ این قاعده ظاهر
   دکمه‌بودن را از مرورگر می‌گیرد تا هر چهار کادر یک‌شکل بمانند، و فقط کادر فعال
   را پررنگ می‌کند: زمینهٔ کم‌رنگ از رنگ خودش، حاشیهٔ ضخیم‌تر، و یک حلقهٔ نازک
   بیرونی. */
button.fi-photo-upload-window-stat {
    font: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    text-align: center;
}

button.fi-photo-upload-window-stat:hover {
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 12%, transparent);
}

.fi-photo-upload-window-stat[data-selected='true'] {
    border-width: 2px;
    box-shadow: 0 0 0 1px currentColor;
}

.fi-photo-upload-window-stat[data-kind='done'][data-selected='true'] {
    color: var(--success-500, #10b981);
    background-color: color-mix(in srgb, var(--success-500, #10b981) 16%, transparent);
}

.fi-photo-upload-window-stat[data-kind='failed'][data-selected='true'] {
    color: var(--danger-500, #ef4444);
    background-color: color-mix(in srgb, var(--danger-500, #ef4444) 16%, transparent);
}

/* تسک ۱۴۰۵/۰۷/۱۳/۲۴، بند ۱۱ — «در فضای مقابل وضعیت فایل … دلیل خطا به‌شکل خوانا
   نمایش داده شود». کنار وضعیت و در همان ردیف، نه در فهرست دوم. */
.fi-photo-upload-window-file-reason {
    color: var(--danger-400, #f87171);
    font-size: 0.72rem;
    line-height: 1.7;
}

/* تسک ۱۴۰۵/۰۷/۱۳/۲۴، بند ۱۴ — «تمام عرض فضای داخلی Modal … رنگ قرمز». */
.fi-photo-upload-window-history {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--danger-600, #dc2626);
    color: var(--color-white, #ffffff);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    text-decoration: none;
}

.fi-photo-upload-window-history:hover {
    background-color: var(--danger-700, #b91c1c);
}

/* بند ۱۲ — «علت خطاها»: every reason for this نوبت, once each, inside the
   window rather than in a corner of the page. */
.fi-photo-upload-window-errors {
    border-block-start: 1px solid color-mix(in srgb, var(--gray-400, #9ca3af) 25%, transparent);
    padding-block-start: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.8;
    max-height: 30vh;
    overflow-y: auto;
}

.fi-photo-upload-window-errors-title {
    display: block;
    font-weight: 700;
    color: var(--danger-400, #f87171);
    margin-block-end: 0.3rem;
}

.fi-photo-upload-window-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fi-photo-upload-window-error {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.fi-photo-upload-window-error-thumb {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 0.4rem;
    object-fit: cover;
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-500, #ef4444) 60%, transparent);
}

/* A duplicate is not a failure — nothing went wrong with the file — so it is
   told apart from one by the colour of its frame. */
.fi-photo-upload-window-error-duplicate .fi-photo-upload-window-error-thumb {
    border-color: color-mix(in srgb, var(--primary-400, #facc15) 70%, transparent);
}

.fi-photo-upload-window-error-thumb-empty {
    display: inline-block;
}

.fi-photo-upload-window-error-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fi-photo-upload-window-error-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    text-align: right;
    opacity: 0.75;
    overflow-wrap: anywhere;
}

/* بند ۱۷ — the gallery this نوبت filled, beside the arithmetic. */
/* بند ۸ — «وضعیت باید واقعی باشد و کاربر بداند عملیات هنوز در حال انجام است یا
   تمام شده است». One sentence, centred under the four figures. */
.fi-photo-upload-window-stage {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--gray-200, #e5e7eb) 80%, transparent);
}

/* «پیشرفت کلی» — the bar the «صف بارگذاری» section used to carry. */
.fi-photo-upload-window-progress {
    height: 0.45rem;
    border-radius: 9999px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 30%, transparent);
}

.fi-photo-upload-window-progress-bar {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--primary-500, #eab308);
    transition: width 200ms linear;
}

/* بند ۵ — one display of each file's state, and this is it. A list rather than
   the table the removed section used, because the window is narrow and a row of
   seven columns in it was unreadable on a phone. */
.fi-photo-upload-window-files {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fi-photo-upload-window-file {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 12%, transparent);
}

.fi-photo-upload-window-file-thumb {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 0.35rem;
    object-fit: cover;
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 25%, transparent);
}

.fi-photo-upload-window-file-thumb-empty {
    display: inline-block;
}

.fi-photo-upload-window-file-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.fi-photo-upload-window-file-name {
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.fi-photo-upload-window-file-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--gray-200, #e5e7eb) 70%, transparent);
}

.fi-photo-upload-window-file-status {
    font-weight: 700;
}

.fi-photo-upload-window-file-status[data-status='uploaded'],
.fi-photo-upload-window-file-status[data-status='processing'],
.fi-photo-upload-window-file-status[data-status='done'] {
    color: var(--success-400, #4ade80);
}

.fi-photo-upload-window-file-status[data-status='failed'],
.fi-photo-upload-window-file-status[data-status='cancelled'] {
    color: var(--danger-400, #f87171);
}

.fi-photo-upload-window-file-status[data-status='uploading'] {
    color: var(--primary-400, #facc15);
}

.fi-photo-upload-window-file-retry {
    flex: 0 0 auto;
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--danger-400, #f87171);
    background: none;
    color: var(--danger-400, #f87171);
    font-size: 0.7rem;
    cursor: pointer;
}

/* بند ۱۳ و ۱۴ — «عنوان گالری | ۱۶» on one line, and the description directly
   under it as secondary text rather than behind a «شرح گالری» heading. What used
   to be five labelled rows in a two-column grid is three lines of prose. */
.fi-photo-upload-window-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-block-start: 1px solid color-mix(in srgb, var(--gray-400, #9ca3af) 25%, transparent);
    padding-block-start: 0.6rem;
    margin: 0;
}

.fi-photo-upload-window-gallery-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}

/* «عنوان گالری با استایل اصلی خودش نمایش داده شود» — the title keeps the weight
   and the size it had as the report's own heading. */
.fi-photo-upload-window-gallery-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-white, #ffffff);
}

.fi-photo-upload-window-gallery-bar {
    opacity: 0.6;
}

/* «عدد تعداد عکس زرد باشد». */
.fi-photo-upload-window-gallery-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-400, #facc15);
}

/* «Bold نباشد؛ به‌عنوان متن توضیحی ثانویه نمایش داده شود». */
.fi-photo-upload-window-gallery-description {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.9;
    color: color-mix(in srgb, var(--gray-200, #e5e7eb) 75%, transparent);
}

.fi-photo-upload-window-gallery-finished {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.75rem;
}

.fi-photo-upload-window-gallery-finished-label {
    color: color-mix(in srgb, var(--gray-200, #e5e7eb) 65%, transparent);
}

/* بند ۲۰ — «مشاهده شد», the one action the window has. The button is the
   panel's own and takes its colour from «استانداردسازی نمای پنل»; all that is
   said here is that it spans the window. */
/* تسک ۱۷/۰۱، بند ۱۲ — «عکس/آواتار عکاس… با اندازه بزرگ‌تر و واضح‌تر… نام عکاس
   نیز در کنار یا زیر آواتار به‌صورت واضح باقی بماند». The header's own picture
   is 1.75rem; this one is four times across and stands at the foot of the
   report with the name under it. */
.fi-photo-upload-window-photographer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
    border-block-start: 1px solid color-mix(in srgb, var(--gray-400, #9ca3af) 25%, transparent);
}

.fi-photo-upload-window-photographer-avatar {
    width: 7rem;
    height: 7rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid var(--primary-400, #facc15);
    background-color: color-mix(in srgb, var(--gray-400, #9ca3af) 25%, transparent);
}

.fi-photo-upload-window-photographer-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-white, #ffffff);
}

/* بند ۲۴ — the clock never wraps: a time split across two lines is not a time. */
.fi-photo-upload-window-time {
    white-space: nowrap;
}

/* تسک ۱۷، بند ۱۲ — «۱۲۰ عکس | Rate: ۸ ★ | قابل نمایش», the one line that says
   what is about to happen. It sat in the body of the page; it is in the window
   now, directly over the button it describes. */
.fi-photo-upload-summary {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-400, #facc15);
}

.fi-photo-upload-window-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fi-photo-upload-window-actions > * {
    flex: 1 1 auto;
    justify-content: center;
}

/* ── تسک ۱۴۰۵/۰۷/۰۴/۱۹: آماده‌سازی، وضعیت زنده و گزارش پایان ──────────────── */

/* بند ۱۱ — «عنوان بالای Popup با همان منطق بصری دایره‌های مانیتورینگ به‌آرامی
   روشن و خاموش شود… بعد از پایان عملیات، این Animation متوقف شود.»

   The attribute is only on the header while the run is going, so «stop when it
   ends» is not a second rule — there is nothing left to stop. The whole line
   breathes together rather than each piece on its own beat: the icon, the words
   and the code are one thing being said, and three animations out of step read
   as a fault. */
.fi-photo-upload-window-head[data-live='true'] {
    animation: fi-photo-upload-live 2s ease-in-out infinite;
}

@keyframes fi-photo-upload-live {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* بند ۲۲ — «تمام Animationها باید سبک باشند»; and anyone who has asked their
   system to stop animating gets the header standing still, exactly as the
   monitoring dots elsewhere in the panel do. */
@media (prefers-reduced-motion: reduce) {
    .fi-photo-upload-window-head[data-live='true'] {
        animation: none;
    }
}

/* The confirmation «بارگذاری عکس‌های هیدن» و «بارگذاری تاپ‌شات‌ها» ask for is a
   Filament modal at z-index 40, and this window is at 60: it was drawn over the
   modal's own buttons, so on those two managements «تأیید و شروع بارگذاری» could
   be seen and not pressed. While a question is open the window steps behind it
   — 30 is under the modal and still over the page. */
.fi-photo-upload-window[data-confirming='true'] {
    z-index: 30;
}

/* بند ۱۵ — «۱۲۰ عکس بارگذاری شد» in the report's header, where the gallery code
   used to be. Green, because it is the count that succeeded and the report's
   own title beside it is already green. */
.fi-photo-upload-window-uploaded {
    color: var(--success-400, #4ade80);
    white-space: nowrap;
}

/* بند ۹ و ۱۰ — one mark per row: yellow and breathing while anything is still
   owed for that photograph, green and still once it is done. It stands where
   the words «آماده بارگذاری» و «بارگذاری موفق» used to be, and is the same size
   as them so no row changes height as it turns. */
.fi-photo-upload-window-file-tick {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.fi-photo-upload-window-file-tick svg {
    width: 100%;
    height: 100%;
}

/* «تیک زرد به‌آرامی روشن و خاموش شود. این انیمیشن نشان دهد عکس آماده است اما
   عملیات نهایی آن هنوز تکمیل نشده است.» The same slow breath as the header and
   as the panel's monitoring dots — a blink fast enough to be noticed is the
   «حرکت آزاردهنده» بند ۶ rules out. */
.fi-photo-upload-window-file-tick[data-status='ready'],
.fi-photo-upload-window-file-tick[data-status='receiving'] {
    color: var(--primary-400, #facc15);
    animation: fi-photo-upload-live 2s ease-in-out infinite;
}

/* «تیک سبز ثابت» — no animation at all, which is the whole difference between
   «done» and «not done yet» at a glance.

   تسک ۱۴۰۵/۰۷/۱۳/۲۳، بند ۹ و ۱۰ — `uploaded` and `processing` are green too,
   because the question the tick answers is «آیا این عکس از دست عکاس خارج شده
   است؟» and for both of them the answer is yes: the original is in the store and
   the system has taken the rest. A yellow breathing tick over a file nobody is
   waiting for would be telling the operator to stay. */
.fi-photo-upload-window-file-tick[data-status='uploaded'],
.fi-photo-upload-window-file-tick[data-status='processing'],
.fi-photo-upload-window-file-tick[data-status='done'] {
    color: var(--success-400, #4ade80);
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .fi-photo-upload-window-file-tick[data-status='ready'],
    .fi-photo-upload-window-file-tick[data-status='receiving'] {
        animation: none;
    }
}

/* بند ۱۰ — «دور Thumbnail همان عکس یک کادر سبز نازک نمایش داده شود». On the
   row's own picture, which is the one the tick beside it is about. Thin: one
   pixel, the same weight as the frame a failed file's picture already wears. */
.fi-photo-upload-window-file[data-status='uploaded'] .fi-photo-upload-window-file-thumb,
.fi-photo-upload-window-file[data-status='processing'] .fi-photo-upload-window-file-thumb,
.fi-photo-upload-window-file[data-status='done'] .fi-photo-upload-window-file-thumb {
    border: 1px solid var(--success-500, #10b981);
}

/* بند ۱۰ — «یک متن کوچک و غیرمزاحم». Quiet on purpose: the panel's muted text,
   a size below the list it sits under, and no colour of its own. It explains a
   number; it is not an event. */
.fi-photo-upload-window-background-note {
    margin: 0.5rem 0 0;
    text-align: center;
    color: var(--gray-400, #9ca3af);
}

/* بند ۱۶ — «۳۳ عکس + ۱۰ عکس جدید بارگذاری شده». The first is what the gallery
   held before this نوبت and gives up the yellow it wore when it was the only
   number on the line; the second is what this نوبت added and is yellow, because
   بند ۱۶ asks for that one in so many words. */
.fi-photo-upload-window-gallery-count {
    color: var(--color-white, #ffffff);
}

.fi-photo-upload-window-gallery-plus {
    font-size: 0.95rem;
    font-weight: 700;
    opacity: 0.6;
}

.fi-photo-upload-window-gallery-new {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-400, #facc15);
}

/* بند ۱۲ — «استایل دکمه لغو بارگذاری… کادر/ظاهر آن زرد باشد».
 *
 * Filament's `outlined` draws its edge as a **ring**, which is a box-shadow —
 * there is no border on the element at all, so «کادر» would be a shadow that a
 * measurement of the button's own box cannot see and that sits under the panel
 * standards' own shadows. A real one-pixel border is written here instead, in
 * the panel's own yellow, and the words take the same colour so the button reads
 * as one thing rather than as a yellow box round a grey label.
 */
.fi-photo-upload-cancel-button {
    border: 1px solid var(--warning-400, #fbbf24);
    color: var(--warning-400, #fbbf24);
    font-weight: 700;
}

/* بند ۱۳ — the second question, over the run's own window.

   `position: absolute` inside `.fi-photo-upload-window`, which is already fixed
   to the viewport: so this covers the run and nothing else has to be moved or
   closed for it, and the window underneath keeps filling in behind it. */
.fi-photo-upload-cancel-confirm {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: color-mix(in srgb, var(--gray-950, #030712) 65%, transparent);
}

.fi-photo-upload-cancel-confirm-box {
    width: min(24rem, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary-400, #facc15) 55%, transparent);
    background-color: var(--gray-900, #111827);
    color: var(--gray-200, #e5e7eb);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--gray-950, #030712) 60%, transparent);
    text-align: right;
}

.fi-photo-upload-cancel-confirm-title {
    margin: 0;
    font-weight: 700;
    color: var(--primary-400, #facc15);
}

.fi-photo-upload-cancel-confirm-body {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.9;
}

.fi-photo-upload-cancel-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fi-photo-upload-cancel-confirm-actions > * {
    flex: 1 1 auto;
    justify-content: center;
}

/* بند ۵ … ۷ — «در حال آماده‌سازی»: the window over everything while the chosen
   photographs are on their way to temporary storage.

   `z-index` above the upload window's own 60, because it is the newer thing and
   the operator has nothing to do underneath it. It carries no button, so it
   deliberately does not take clicks either (بند ۲۱). */
.fi-photo-upload-preparing {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: color-mix(in srgb, var(--gray-950, #030712) 60%, transparent);
}

.fi-photo-upload-preparing[hidden] {
    display: none;
}

.fi-photo-upload-preparing-box {
    width: min(24rem, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary-400, #facc15) 45%, transparent);
    background-color: var(--gray-900, #111827);
    color: var(--gray-200, #e5e7eb);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--gray-950, #030712) 55%, transparent);
    text-align: center;
}

/* بند ۶ — the panel's own monitoring dot, on the keyframes «تخفیف فعال» and the
   watermark card already share (`agency-discounts.css`). No new component, and
   no second animation written where the shared one will do. */
.fi-photo-upload-preparing-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: var(--primary-400, #facc15);
    animation: fi-live-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-photo-upload-preparing-dot {
        animation: none;
    }
}

.fi-photo-upload-preparing-title {
    margin: 0;
    font-weight: 700;
    color: var(--color-white, #ffffff);
}

.fi-photo-upload-preparing-count {
    color: var(--primary-400, #facc15);
}

.fi-photo-upload-preparing-hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.9;
    color: color-mix(in srgb, var(--gray-200, #e5e7eb) 70%, transparent);
}

@media (max-width: 30em) {
    .fi-photo-upload-window-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fi-photo-upload-window-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    /* بند ۲۲ — «در نسخه موبایل نیز Popupها، شمارنده‌ها، Thumbnailها، دکمه لغو و
       Popup تأیید باید بدون بیرون‌زدگی و اسکرول افقی غیرضروری قابل استفاده
       باشند.» The header wraps onto a second line rather than pushing the box
       wider than the screen, and the two answers of the cancel question stack
       instead of being squeezed side by side. */
    .fi-photo-upload-window-head {
        row-gap: 0.25rem;
    }

    .fi-photo-upload-cancel-confirm-actions {
        flex-direction: column;
    }

    .fi-photo-upload-preparing-box,
    .fi-photo-upload-cancel-confirm-box {
        width: 100%;
    }
}

/* ── The photographer record: a form that starts at the top of the page ───── */

/*
 * Filament's avatar uploader is a fixed 8rem circle. On this form it was the
 * first thing on the page and pushed every field an operator actually types
 * into below the fold, so it is halved to 4rem. This is presentation only —
 * the uploader still stores the same 500x500 file it always did.
 *
 * The height follows the width, because the stock rule is `h-full w-32` and a
 * full-height circle inside a 4rem-wide box would be an ellipse.
 */
.fi-photographer-avatar .fi-fo-file-upload-input-ctn {
    width: 4rem;
    height: 4rem;
}

/* The label row is gone with the label, so the picture would still sit on the
 * grid gap that separated it from a heading that no longer exists. */
.fi-photographer-avatar {
    margin-block-start: calc(var(--spacing) * -1);
}

/*
 * The drag-and-drop sentence does not fit a 4rem circle — it wrapped to four
 * clipped lines. It is hidden rather than removed, because this label *is* the
 * click target for choosing a file; the helper text under the field now carries
 * the words. Drag-and-drop itself is untouched.
 */
.fi-photographer-avatar .filepond--drop-label label {
    font-size: 0;
}

/*
 * «نمایش نام در View»: the question mark explains this switch, so it belongs
 * against it. Filament renders a hint through an afterLabel schema container,
 * and that container grows to fill the row — which threw the icon to the far
 * side of a full-width form. Not growing is the whole fix; the row is still a
 * flexbox, so a narrow screen wraps it rather than overflowing.
 */
.fi-photographer-visibility .fi-fo-field-label-ctn > .fi-sc {
    flex-grow: 0;
}

.fi-photographer-visibility .fi-fo-field-label-ctn {
    flex-wrap: wrap;
    row-gap: calc(var(--spacing) * 1);
}

/*
 * The photographer's code in the record heading. Amber is the panel's primary
 * colour — the same token the list's links use — so nothing new is defined; the
 * 600/400 pair is Filament's own light/dark split and clears 3:1 against both
 * page backgrounds at heading size.
 */
.fi-photographer-code {
    color: var(--primary-600);
}

:where(.dark) .fi-photographer-code {
    color: var(--primary-400);
}

/* ── بخش چهارم: «۲۴ گالری | ۲۰۰۰ عکس» beside the name and the code ───────────

   Two readings, not two headings. They are set at two thirds of the heading
   they sit on — «تقریباً یک‌سوم کوچک‌تر» — in the ordinary weight rather than
   the heading's, and a step quieter in colour, so the eye reaches the name and
   the code first and the figures afterwards.

   `em`, so the pair keeps its proportion to whatever size the heading is drawn
   at: «عنوان اصلی هدر» is a managed standard and its size is set from
   «استانداردسازی نمای پنل», where it may change tomorrow. Written as its own
   class rather than as a rule under `.fi-header-heading`, so nothing here
   decides a property that management owns. */
.fi-photographer-header-stat {
    font-size: 0.667em;
    font-weight: 400;
    letter-spacing: normal;
    white-space: nowrap;
    color: var(--std-color-gray-500, #6b7280);
}

:where(.dark) .fi-photographer-header-stat {
    color: var(--std-color-gray-400, #9ca3af);
}

/* The upright rules between them: separators, and quiet enough to read as
   punctuation rather than as one of the four things they divide. */
.fi-photographer-header-sep {
    font-size: 0.667em;
    font-weight: 400;
    color: var(--std-color-gray-400, #9ca3af);
}

:where(.dark) .fi-photographer-header-sep {
    color: var(--std-color-gray-600, #4b5563);
}

/* ── Which column a table is sorted by, and which way ─────────────────────── */

/*
 * Filament draws a chevron on every sortable header: up when that column is
 * actively sorted ascending, down otherwise. So a column sorted *descending*
 * looks exactly like every column that is not sorted at all, and the operator
 * cannot tell which one the table is ordered by.
 *
 * The state is already in the markup — Filament puts `fi-ta-header-cell-sorted`
 * on the active `<th>` — it is only never painted. Colouring the active header
 * and fading the idle chevrons makes the answer readable at a glance, and keeps
 * the idle ones as the affordance that says «this column can be sorted».
 */
.fi-ta-header-cell-sort-btn > .fi-icon {
    opacity: 0.35;
}

.fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn {
    color: var(--primary-600);
    font-weight: 600;
}

.fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn > .fi-icon {
    opacity: 1;
}

:where(.dark) .fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn {
    color: var(--primary-400);
}

/* ── GALLERY-EDIT-004: the saving overlay ─────────────────────────────────── */

/*
 * Shown while the page is saving and taken away the moment it settles, either
 * way (تسک ۱۵، بند ۱۶ و ۱۸). Fixed rather than absolute: the row that starts
 * the save is at the bottom of a long form, and an overlay that scrolled with
 * it would be off-screen exactly when it is needed.
 *
 * Hidden by default and turned on by `wire:loading.flex`: an overlay that
 * defaulted to visible would sit over the whole form and swallow every click,
 * which is exactly what happened while the directive was mistyped.
 */
.fi-gallery-saving-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(2px);
}

.fi-gallery-saving-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding: 1.75rem 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--gray-50, #f9fafb);
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.25);
}

:where(.dark) .fi-gallery-saving-box {
    background-color: var(--gray-800, #1f2937);
}

.fi-gallery-saving-spinner {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary-600, #d97706);
}

.fi-gallery-saving-text {
    margin: 0;
}

/* ── «کارمندان»: the edit form and its heading ────────────────────────────── */

/* A third off the panel's 1.5rem page heading (EMPLOYEE-EDIT-005). The name is
   still there in full — only the size moves — and at 1rem it is still a
   heading rather than body text (EMPLOYEE-EDIT-006). */
.fi-page-employee-edit .fi-header-heading {
    line-height: 1.8;
}

/* ── EMPLOYEE-EDIT-101 … ۱۰۵: the heading over the employee's form ─────────── */

/* Centred over the form, and low enough in the header that it sits across from
   the middle of the picture underneath rather than above its top edge
   (EMPLOYEE-EDIT-101 و ۱۰۲). The two are not nested — the title stays in the
   page header and the avatar stays the form's first field; only their
   alignment is made to agree.

   The offset is a share of the avatar's own height, so the two stay level
   whatever the picture is scaled to; the page header keeps its normal height
   and nothing below it moves. */
.fi-page-employee-edit .fi-header {
    justify-content: center;
    text-align: center;
}

.fi-page-employee-edit .fi-header-heading {
    text-align: center;
    margin-block-start: 1.5rem;
}

.fi-employee-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.375rem;
    width: max-content;
    max-width: 100%;
}

/* کارمند-هدر-۰۴: the camera that says the name after it is the *photographer*,
   not a second reading of the employee. Spacing only — the size and the colour
   of both yellows are the standards block's, which is printed after this file
   and must stay the one place they are decided. */
.fi-employee-heading-camera {
    margin-inline-end: 0.25rem;
    font-style: normal;
    line-height: 1;
}

/* The picture is the first thing on the form and needs no heading over it
   (EMPLOYEE-EDIT-002). Without a label the field would sit flush against the
   name field below; this gives it room of its own. */
.fi-employee-avatar {
    margin-block-end: 0.25rem;
}

/* ── EMPLOYEE-LIST-101 و ۱۰۲: «کارمندان | تعداد کل: ۱۲ نفر» ────────────────── */

/* A quarter off the panel's 1.5rem page heading — 75% of what it was — and the
   count beside it at the size of body text, so saying how many there are does
   not put the header's height back. */
.fi-page-employee-list .fi-header-heading {
    line-height: 1.8;
}

/* Shared by every list that says how many rows it holds — «کارمندان» and
   «الگوهای عنوان گالری» so far. Only the employee list shrinks its heading; the
   markup either side of the rule is the same wherever a count is shown. */
.fi-employee-list-heading,
.fi-list-count-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Room either side of the rule, as the task asks: the title is not up
       against it and neither is the figure. */
    gap: 0.25rem 0.75rem;
    width: max-content;
    max-width: 100%;
}

.fi-employee-list-heading-count {
    white-space: nowrap;
}

/* GALLERY-TEMPLATE-LIST-402: after the rule stands a bare figure, so it is read
   as part of the heading rather than as a note beside it — the panel's own
   yellow, and exactly the size of the title it follows (`inherit`, so it keeps
   step with the heading whatever size that is). */
.fi-list-count-heading-count {
    white-space: nowrap;
}

/* ── «مستندات فنی», laid out to be read ─────────────────────────────────────
   (MANUAL-GALLERY-HELP-605, ADMIN-GUIDE-015 و ۰۲۳)

   Written once for every guide in the panel: the rules hang off
   `.fi-admin-guide`, which every guide page's article carries, so a second
   management's guide is a second `chapters()` and no stylesheet of its own.
   A page that needs something only it needs still has its own class beside
   this one. */

/*
 * The article is held to a measure a person can read rather than to the width
 * of the window: past roughly 70 characters the eye loses the start of the next
 * line, which is exactly what turns a workflow guide into a wall. On a phone
 * the same rule is simply the width available.
 */
.fi-admin-guide {
    max-width: 44rem;
    margin-inline: auto;
    line-height: 2;
}

/*
 * ADMIN-GUIDE-UPGRADE-005: the name of the management the page explains.
 *
 * The heading is Filament's own, above the article rather than in it, so it is
 * reached through the class the page carries. Centred, and at exactly the size
 * of a chapter title — stated as the same value the chapter rule uses, so the
 * two cannot drift apart — which is what makes the top of the page read as the
 * first heading of the guide rather than as a page title of some other kind.
 */
.fi-admin-guide-page .fi-header-heading {
    text-align: center;
}

/*
 * تسک ۱۴۰۵/۰۶/۱۲/۰۱: the management this documentation belongs to, under the
 * title and on the same axis as it.
 *
 * The shared documentation page is «مستندات فنی» for every management there is,
 * so the title alone would not say which one is being read — بند ۵ asks that
 * opening it from a management show that management's documentation, and the
 * reader has to be able to see that at a glance. It is centred with the title
 * rather than left where a subheading normally sits, so the header stays the one
 * block the reference management's header is (بند ۳); the words are the panel's
 * own subheading and are not sized or coloured here.
 */
.fi-admin-guide-page .fi-header-subheading {
    margin-inline: auto;
    text-align: center;
}

/*
 * DOC-UPGRADE-003: the title in the middle of the page, and «لیست آخرین
 * تغییرات» facing it from the end of the same row — which in this right-to-left
 * panel is its left.
 *
 * Three columns rather than a row pushed apart: the two outer ones share what is
 * left over equally, so the title's middle is the page's middle and stays there
 * whatever the button beside it is called. That matters beyond the header — the
 * date line under it is centred in the article, and the two are only on one axis
 * if the title is centred on the page rather than on the space the button leaves.
 */
.fi-admin-guide-page .fi-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: center;
}

.fi-admin-guide-page .fi-header > :first-child {
    grid-column: 2;
}

.fi-admin-guide-page .fi-header-actions-ctn {
    grid-column: 3;
    justify-self: end;
}

/* On a phone there is no room to face anything across a row, so the button
   drops to the row beneath the title — deliberately, and still on the left,
   rather than squeezing the title out of the middle (DOC-UPGRADE-003). */
@media (max-width: 48rem) {
    .fi-admin-guide-page .fi-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .fi-admin-guide-page .fi-header > :first-child,
    .fi-admin-guide-page .fi-header-actions-ctn {
        grid-column: 1;
    }
}

/* اصلاح-۰۰۳: the sentence saying what the page is about is Filament's own
   subheading, so it hangs under the title at the panel's standard distance and
   nothing is written here about that distance. Only its alignment is: a line
   set to the right under a centred title reads as belonging to something else. */
.fi-admin-guide-page .fi-header-subheading {
    text-align: center;
}

/* ── ADMIN-GUIDE-UPGRADE-006، DOC-UPGRADE-004 … ۰۰۶: the date under the title ─

   The whole line as it was written — «آخرین به‌روزرسانی: … | ساعت: …» — moved
   under «مستندات فنی» and centred on the same axis: the article is held to a
   measure and centred in the page, so a line centred inside it is centred on the
   page, which is where the title is.

   The two distances around it are the point of بند ۵ و ۶. Above it, half the
   panel's standard gap, set on the header container so the title and the date
   read as one header rather than as a heading and then something else. Below it,
   exactly the distance the panel puts between a page's description and the start
   of its content, so nothing empty is left before the first chapter. */

.fi-admin-guide-doc-page .fi-page-header-main-ctn {
    row-gap: calc(var(--spacing, 0.25rem) * 4);
}

.fi-admin-guide .fi-guide-stamp {
    margin: 0 0 calc(var(--spacing, 0.25rem) * 8);
    text-align: center;
}

/* The panel's own yellow, the same as the one at the foot of the page: it is
   the same value, so it is said the same way (بند ۶). */
.fi-admin-guide .fi-guide-stamp-value {
    color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-admin-guide .fi-guide-stamp-value {
    color: var(--warning-400, #fbbf24);
}

/* ── DOC-CHANGE-FIX-002 … ۰۰۴: «بازگشت», in the header of a history ──────────
   The way back out of a history is the page's own header action now, so where it
   sits is the header row's business and not a rule of ours: the end of that row,
   which in this right-to-left panel is its left, facing the title. It used to
   stand at the start of the article, taking a row of content to itself — the
   empty space that was left between the description of the page and its first
   «تاریخ تغییر». Nothing here closes that space; removing the control's row is
   what closed it.

   At the top of the header rather than the middle of it, because a history's
   header is a title with two lines of description under it and the middle of
   that is halfway down the page's opening. The documentation's own button keeps
   the middle: its header is a single line, so the two are the same thing there.

   Red and light: no border, no background, nothing that would read as a second
   button. The arrow and the word are aligned on their middles a quarter of a
   space apart, and the link is around both, so no part of it fails to answer a
   click. The arrow points to the right because the page does. */

.fi-admin-guide-history-page .fi-header-actions-ctn {
    align-self: start;
}

.fi-admin-guide-page .fi-guide-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: color 120ms;
}

.fi-admin-guide-page .fi-guide-back:hover {
    color: var(--danger-700, #b91c1c);
    text-decoration: underline;
}

:where(.dark) .fi-admin-guide-page .fi-guide-back:hover {
    color: var(--danger-300, #fca5a5);
}

/* The arrow at the size of the words beside it, so the pair reads as one line
   of text rather than as an icon with a caption. */
.fi-admin-guide-page .fi-guide-back .fi-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.fi-admin-guide .fi-guide-chapter + .fi-guide-chapter {
    margin-top: 2.5rem;
}

/* Each stage of the job announced in the panel's own yellow, with a rule under
   it, so the page can be skimmed for the part the operator is stuck on. */
.fi-admin-guide .fi-guide-chapter-title {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(3 7 18 / 0.1);
}

:where(.dark) .fi-admin-guide .fi-guide-chapter-title {
    border-bottom-color: rgb(255 255 255 / 0.15);
}

.fi-admin-guide .fi-guide-section + .fi-guide-section {
    margin-top: 1.5rem;
}

.fi-admin-guide .fi-guide-section-title {
    margin: 0 0 0.375rem;
}

/*
 * ── مستندات-همگام‌سازی-۰۰۹ … ۰۱۳: what the last round changed ────────────────
 *
 * A soft halo and a heading in the panel's danger red, and nothing more: بند ۰۱۰
 * asks for the section to be findable at a glance without the page being
 * redesigned around it, so the lines inside keep the colour and the size they
 * always had. Only the heading and the ring say «this changed».
 *
 * The ring is a background and a border rather than an outline, so it wraps the
 * whole section however tall it is, and the negative margin puts the text back
 * where it was — a marked section does not shift the column it sits in.
 */
.fi-admin-guide .fi-guide-section-changed {
    margin-inline: -0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(239 68 68 / 0.35);
    background-color: rgb(239 68 68 / 0.06);
}

:where(.dark) .fi-admin-guide .fi-guide-section-changed {
    border-color: rgb(248 113 113 / 0.4);
    background-color: rgb(248 113 113 / 0.09);
}

/* The heading only — «رنگ کل متن پاراگراف‌ها قرمز نشود» (بند ۰۱۰). The mark in
   front of it is an emoji and keeps its own colour, as every other one does.

   Written against both of the heading's classes on purpose. A section heading is
   green by standard now (بند ۱-۱ of «استانداردسازی نمای پنل ۱۱»), and that green
   is printed after every stylesheet, so a rule of the same weight as the
   standard's would lose to it wherever it stood in this file. This one is a
   class heavier and wins by being more specific rather than by being later —
   which is what «this section was rewritten» has to be: an exception to the
   colour of a heading, and only for as long as the round is the newest one. */
.fi-admin-guide .fi-guide-section-title.fi-guide-section-title-changed {
    color: var(--danger-600, #dc2626);
}

:where(.dark) .fi-admin-guide .fi-guide-section-title.fi-guide-section-title-changed {
    color: var(--danger-400, #f87171);
}

/*
 * بند ۰۱۱: «مشاهده در صفحه تغییرات», beside the heading it belongs to.
 *
 * A line of text and not a button, for the reason «بازگشت» is one: it is a way
 * off the page, not something done on it. `inline-flex` keeps the dot and the
 * words together on one line and lets the whole control drop to the next line
 * when the heading runs out of room, which is what happens on a phone.
 */
.fi-admin-guide .fi-guide-section-change-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: 0.75rem;
    padding: 0.125rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--danger-600, #dc2626);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

.fi-admin-guide .fi-guide-section-change-link:hover {
    color: var(--danger-700, #b91c1c);
}

:where(.dark) .fi-admin-guide .fi-guide-section-change-link {
    color: var(--danger-400, #f87171);
}

:where(.dark) .fi-admin-guide .fi-guide-section-change-link:hover {
    color: var(--danger-300, #fca5a5);
}

.fi-admin-guide .fi-guide-section-change-mark {
    font-size: 0.625em;
    line-height: 1;
    color: initial;
}

/* On a phone the control takes a line of its own under the heading and a tap
   target the height of a finger, rather than being squeezed beside the words. */
@media (max-width: 640px) {
    .fi-admin-guide .fi-guide-section-change-link {
        display: flex;
        width: fit-content;
        margin-inline-start: 0;
        margin-top: 0.375rem;
        min-height: 2.25rem;
        align-items: center;
        white-space: normal;
    }
}

/*
 * MANUAL-GALLERY-GUIDE-501 و ۵۰۲: the mark in front of a heading.
 *
 * Headings of one level are drawn identically — one size, one gap before the
 * words — so the mark says «this is a chapter» or «this is a step inside one»
 * rather than merely decorating the line. The size is stated in `em` on purpose:
 * it is then the heading's own size that decides it, and every chapter mark ends
 * up the same as every other chapter mark without the two rules ever being kept
 * in step by hand.
 */
.fi-admin-guide .fi-guide-icon {
    display: inline-block;
    margin-inline-end: 0.5rem;
    font-size: 1em;
    line-height: 1;
    /* Emoji are colour glyphs; the heading's own colour must not tint them. */
    color: initial;
}

.fi-admin-guide .fi-guide-icon-section {
    font-size: 0.75em;
    vertical-align: 0.1em;
}

/* ── MANUAL-GALLERY-GUIDE-504: «شرط اولیه ← اتفاق ← نتیجه» ──────────────────── */

/*
 * A rule with more than one step is drawn as the chain it is, so the order is
 * read at a glance instead of being reassembled from a paragraph. The chain
 * wraps rather than scrolls: on a phone the steps stack and stay whole.
 */
.fi-admin-guide .fi-guide-flows {
    margin-top: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fi-admin-guide .fi-guide-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.fi-admin-guide .fi-guide-flow-step {
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    background-color: rgb(3 7 18 / 0.05);
    border: 1px solid rgb(3 7 18 / 0.08);
}

:where(.dark) .fi-admin-guide .fi-guide-flow-step {
    background-color: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.12);
}

.fi-admin-guide .fi-guide-flow-arrow {
    font-size: 0.875rem;
    color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-admin-guide .fi-guide-flow-arrow {
    color: var(--warning-400, #fbbf24);
}

/* ── MANUAL-GALLERY-GUIDE-507: allowed and refused, ✅ و ❌ ─────────────────── */

.fi-admin-guide .fi-guide-states {
    margin: 0.625rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fi-admin-guide .fi-guide-state {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* The mark holds a column of its own so several rows read as one table rather
   than as sentences that happen to start with an emoji. */
.fi-admin-guide .fi-guide-state-mark {
    flex: none;
    width: 1.25rem;
    line-height: 1.9;
}

.fi-admin-guide .fi-guide-line {
    margin: 0 0 0.375rem;
}

.fi-admin-guide .fi-guide-line b {
    font-weight: 700;
}

/*
 * بند ۱-۱ of «استانداردسازی نمای پنل ۱۱»: the third level of a guide.
 *
 * A guide is read at three levels — the chapter in the panel's yellow, the
 * heading of a section in green, and the words under it in the ordinary colour —
 * and the name of a term explained in the run of the text is a heading of the
 * second kind, not a bold word in a sentence. It is the bold that *opens* a line
 * that names a term («رنگ استاندارد: …»), so that is what is coloured; a bold
 * word inside a sentence is emphasis and keeps the colour of the sentence. Which
 * lines those are is marked as the guide is written (`fi-guide-line-term`),
 * because a selector alone cannot tell a heading from an emphasis.
 *
 * The section headings themselves are not written here: their colour is a
 * managed standard («عنوان بخش راهنما»), decided in «استانداردسازی نمای پنل» and
 * printed after this stylesheet, so it has one source and not two
 * (استاندارد-۰۶۶).
 */
.fi-admin-guide .fi-guide-line-term > b:first-child {
    color: var(--success-600, oklch(0.627 0.194 149.214));
}

:where(.dark) .fi-admin-guide .fi-guide-line-term > b:first-child {
    color: var(--success-400, oklch(0.792 0.209 151.711));
}

/* A rule easy to be caught out by is boxed rather than left in the run of the
   text — «ایکس» above all, which is the one thing that stops a save. */
.fi-admin-guide .fi-guide-box {
    margin: 0.625rem 0 0;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border-inline-start: 3px solid transparent;
}

.fi-admin-guide .fi-guide-note {
    background-color: rgb(59 130 246 / 0.08);
    border-inline-start-color: var(--info-500, #3b82f6);
}

.fi-admin-guide .fi-guide-warning {
    background-color: rgb(245 158 11 / 0.12);
    border-inline-start-color: var(--warning-500, #f59e0b);
}

/* ── MANUAL-GALLERY-HELP-607 … ۶۱۰: when this text was last written ────────── */

.fi-admin-guide .fi-guide-footer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(3 7 18 / 0.1);
}

:where(.dark) .fi-admin-guide .fi-guide-footer {
    border-top-color: rgb(255 255 255 / 0.15);
}

.fi-admin-guide .fi-guide-updated {
    margin: 0;
}

/* بند ۶۰۹: the current time in the panel's yellow… */
.fi-admin-guide .fi-guide-updated-value {
    color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-admin-guide .fi-guide-updated-value {
    color: var(--warning-400, #fbbf24);
}

/* …and the one before it deliberately quieter, so the eye lands on the current
   one first. */
.fi-admin-guide .fi-guide-updated-previous {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--gray-500, #6b7280);
}

:where(.dark) .fi-admin-guide .fi-guide-updated-previous {
    color: var(--gray-400, #9ca3af);
}

.fi-admin-guide .fi-guide-automatic {
    margin: 0.75rem 0 0;
}

/* ── «لیست آخرین تغییرات», read in the guide's own language ──────────────────
   (ADMIN-GUIDE-UPGRADE-010 … ۰۱۵)

   The history hangs off `.fi-admin-guide` as well, so it inherits the measure,
   the chapter rule and the boxes without a stylesheet of its own; what is added
   here is only what a change log has and a guide does not — the round, the
   card one change is drawn in, and the two rows saying what was there before
   and what is there now. A page of unbroken paragraphs is exactly what بند ۱۰
   refuses, so a change is a card with a heading, a mark and a gap around it. */

.fi-admin-guide-history .fi-guide-round + .fi-guide-round {
    margin-top: 2.5rem;
}

/*
 * مستندات-همگام‌سازی-۰۱۲: arriving from «مشاهده در صفحه تغییرات».
 *
 * The round the link names is scrolled to by the browser, and stops under the
 * panel's sticky topbar rather than behind it. It is then ringed in the same red
 * the section in the documentation was, so the operator can see they have landed
 * on the right round — the same mark on both ends of the one link. It fades on
 * its own: this says «you arrived here», not «this round is special».
 */
.fi-admin-guide-history .fi-guide-round {
    scroll-margin-top: 6rem;
}

.fi-admin-guide-history .fi-guide-round:target {
    margin-inline: -0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(239 68 68 / 0.35);
    background-color: rgb(239 68 68 / 0.06);
}

:where(.dark) .fi-admin-guide-history .fi-guide-round:target {
    border-color: rgb(248 113 113 / 0.4);
    background-color: rgb(248 113 113 / 0.09);
}

.fi-admin-guide-history .fi-guide-round-subject {
    margin: -0.5rem 0 1rem;
}

.fi-admin-guide-history .fi-guide-change {
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(3 7 18 / 0.1);
    border-radius: 0.75rem;
    background-color: rgb(3 7 18 / 0.02);
}

:where(.dark) .fi-admin-guide-history .fi-guide-change {
    border-color: rgb(255 255 255 / 0.12);
    background-color: rgb(255 255 255 / 0.03);
}

.fi-admin-guide-history .fi-guide-change-title {
    margin-bottom: 0.625rem;
}

/* بند ۱۴: a capability that never had a previous state says so beside its own
   name, where it cannot be missed, rather than in a paragraph under it. */
.fi-admin-guide-history .fi-guide-change-new {
    display: inline-block;
    margin-inline-start: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background-color: rgb(34 197 94 / 0.14);
}

:where(.dark) .fi-admin-guide-history .fi-guide-change-new {
    background-color: rgb(34 197 94 / 0.2);
}

/* بند ۱۳: «چه بوده ← چه شده», one under the other, each labelled, so the two
   states are told apart at a glance instead of being read out of a sentence. */
.fi-admin-guide-history .fi-guide-change-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.375rem;
}

.fi-admin-guide-history .fi-guide-change-row:last-of-type {
    margin-bottom: 0;
}

.fi-admin-guide-history .fi-guide-change-label {
    flex: none;
}

.fi-admin-guide-history .fi-guide-change-before .fi-guide-change-label {
    color: var(--gray-500, #6b7280);
}

:where(.dark) .fi-admin-guide-history .fi-guide-change-before .fi-guide-change-label {
    color: var(--gray-400, #9ca3af);
}

.fi-admin-guide-history .fi-guide-change-before .fi-guide-change-text {
    color: var(--gray-500, #6b7280);
}

:where(.dark) .fi-admin-guide-history .fi-guide-change-before .fi-guide-change-text {
    color: var(--gray-400, #9ca3af);
}

.fi-admin-guide-history .fi-guide-change-after .fi-guide-change-label {
    color: var(--warning-600, #d97706);
}

:where(.dark) .fi-admin-guide-history .fi-guide-change-after .fi-guide-change-label {
    color: var(--warning-400, #fbbf24);
}

.fi-admin-guide-history .fi-guide-change-text {
    flex: 1 1 12rem;
    min-width: 0;
}

/* ── GALLERY-TEMPLATE-406 … ۴۰۸: a pattern, and what it is for ───────────────

   «الگوی عنوان گالری» in «ساخت گالری‌های آژانس» lists patterns whose names
   alone do not say which gallery each one suits. Every pattern that carries a
   «راهنمای انتخاب الگوی عنوان» is drawn as «عنوان الگو | راهنما», so the list
   can be read once instead of opened pattern by pattern. */

.fi-title-template-option {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    min-width: 0;
}

/* The name keeps exactly the look it had before the guide existed (بند ۴۰۷). */
.fi-title-template-option-title {
    flex-shrink: 0;
}

/* The rule between the two — a drawn line rather than a typed «|», so it keeps
   its height whatever the two texts do, and is never read out as a character.
   It exists only when there is a guide after it; a pattern without one has no
   rule and no space held open for it (بند ۴۰۸). */
.fi-title-template-option-divider {
    align-self: stretch;
    flex-shrink: 0;
    width: 1px;
    min-height: 1rem;
    background-color: rgb(255 255 255 / 0.35);
}

:where(:not(.dark)) .fi-title-template-option-divider {
    background-color: rgb(3 7 18 / 0.2);
}

/* Not bold, two pixels smaller than the name, and in the colour the panel gives
   the sentence under a field (GALLERY-TEMPLATE-SELECT-501 و ۵۰۲).

   `calc(1em - 2px)` and not a fixed size: `1em` here *is* the name's size,
   because the name says nothing about its own and inherits the option's. So the
   difference stays exactly two pixels whatever the dropdown's font size turns
   out to be — which is the rule as the task states it, rather than a pair of
   numbers that happen to differ by two today.

   The colour is Filament's own helper-text grey, the one under every field in
   this panel, so the guide is recognisably the same kind of thing here as it is
   there — quieter than the name it follows, and still plainly readable. It used
   to be pure white on a dark dropdown, which was the one thing louder than the
   name it was meant to sit behind. */
.fi-title-template-option-guide {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Once a pattern is chosen, the closed field shows its name alone: the guide is
   read in its own box under it (GALLERY-TEMPLATE-409), and repeating it inside
   the control would only make the field taller. */
.fi-select-input-value-label .fi-title-template-option-divider,
.fi-select-input-value-label .fi-title-template-option-guide {
    display: none;
}

/* ── GALLERY-TEMPLATE-409 … ۴۱۴: the guide of the chosen pattern ─────────────

   Beside «اصلاح عنوان گالری» and two thirds of its row, a box that is plainly
   an explanation rather than a field: a soft ground taken from the boxes the
   panel already draws, no border to type against, and no control inside it. */

.fi-manual-gallery-template-guide {
    padding: 0.75rem 1rem;
    text-align: right;
    cursor: default;
    border-radius: 0.5rem;
    background-color: var(--gray-50, #f9fafb);
    box-shadow: inset 0 0 0 1px rgb(3 7 18 / 0.1);
}

:where(.dark) .fi-manual-gallery-template-guide {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}

/* The whole of the text, however long it is (بند ۴۱۲ و ۴۱۳): it wraps onto as
   many lines as it needs, the box grows with it, and nothing is cut off with
   «…» or hidden behind a scrollbar. Right-aligned Persian prose (بند ۴۱۴). */
.fi-manual-gallery-template-guide-text {
    margin: 0;
    line-height: 1.9;
    text-align: right;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}

/* MANUAL-GALLERY-GUIDE-702: the help mark and the heading, read as one line.

   The row they share is Filament's own, which sets its parts against the top of
   the line and holds them three quarters of a rem apart — right for a checkbox
   beside a label, too loose for a mark that belongs to the words. So the two are
   centred on one another and the gap is closed to a quarter of a rem: the mark
   reads as part of the heading rather than as something standing next to it. */
.fi-fo-field.fi-manual-gallery-template-guide-field .fi-fo-field-label-ctn {
    align-items: center;
    column-gap: 0.25rem;
}

/* Sized from the heading itself rather than in absolute pixels, so the two stay
   in proportion if the panel's type size ever moves.

   `em` is only as good as the type size it is measured against, and the mark
   does not stand inside the words: it is a sibling of the `<label>`, so it
   inherits the page's own size rather than the heading's smaller one, and 1.15em
   of the page came out a third larger than the words it belongs to
   (MANUAL-GALLERY-GUIDE-FIX-004). Told the heading's size first, the same 1.15em
   is measured against the right thing. */
.fi-fo-field.fi-manual-gallery-template-guide-field .fi-manual-gallery-template-guide-icon {
    flex: none;
    font-size: var(--text-sm, 0.875rem);
    width: 1.15em;
    height: 1.15em;
}

/* ── GALLERY-TEMPLATE-LIST-501 … ۵۰۵: the guide, in the list of patterns ─────

   A column wide enough for about six ordinary words and no wider
   (بند ۵۰۳): a guide is a sentence, and a sentence given as much room as it
   asks for would squeeze «عنوان الگو», «اولویت» and «تعداد گالری» into columns
   too narrow to read. Two lines, then «…» (بند ۵۰۴) — so a long guide costs the
   row two lines of height rather than ten, and the whole of it is a hover away
   (بند ۵۰۵).

   The cap goes on what is *inside* the cell, not on the cell. This table lays
   itself out automatically, and an automatic layout sizes each column to the
   widest thing in it while ignoring a `max-width` written on the `<td>`. Cap
   the content and the widest thing is capped, so the column follows. The
   heading is capped the same way, or a long column name would widen the column
   straight back.

   The two lines themselves are Filament's own `lineClamp`, not a rule written
   here: the panel already knows how to clamp a table cell, and a second
   implementation of it would drift from the first. */
.fi-ta-cell-template-guide .fi-ta-text,
.fi-ta-header-cell-template-guide > * {
    max-width: 14rem;
}

.fi-ta-cell-template-guide .fi-ta-text-item {
    overflow-wrap: break-word;
}

/* GALLERY-TEMPLATE-LIST-505: what the hover shows. Persian prose read from the
   right, wrapped onto as many lines as it needs rather than run off the edge of
   one. Its width is tippy's own 350px and where it is placed — flipped above
   the row or shifted along it so it never leaves the page — is tippy's too;
   both are left alone, since the first is already a comfortable reading measure
   and the second is the part that keeps the box on the page. */
[data-tippy-root] .tippy-box {
    direction: rtl;
    text-align: right;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ── GALLERY-TEMPLATE-EDIT-501 و ۵۰۲: who made this pattern ──────────────────

   After the page's own title, a rule and the creator's face — no name beside
   it, because the face is the answer and the name is a hover away. Drawn the
   way the upload pages already head themselves, so the two headers are the same
   header. */
.fi-template-heading {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
}

.fi-template-heading-sep {
    align-self: stretch;
    width: 1px;
    min-height: 1.5rem;
    background-color: rgb(3 7 18 / 0.2);
}

:where(.dark) .fi-template-heading-sep {
    background-color: rgb(255 255 255 / 0.35);
}

.fi-template-heading-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgb(3 7 18 / 0.1);
}

:where(.dark) .fi-template-heading-avatar {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2);
}

/* ── «لیست آخرین تغییرات فنی سایت» — the head of a round ──────────────────────
   (تغییرات-فنی-۰۰۹ … ۰۱۶ و ۰۳۰)

   The aggregate page is a history and is styled as one; everything above it in
   this file already reaches it. What only it has is the head of a round, which
   here must also say *which* management changed — icon, name, date and time —
   with the way to that management's documentation facing it.

   Laid out as a row that wraps rather than one that shrinks: on a phone the
   button drops under the name and the name under nothing, so بند ۰۳۰ holds —
   the row breaks, and nothing is dropped or overlapped to make it fit. */

.fi-admin-guide-history .fi-guide-round-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
    /* The rule a chapter title carries moves down to the row, so the button
       stands above the same line the name does rather than beside a shorter
       one. */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(3 7 18 / 0.1);
}

/* The heading keeps the size and the colour of every other round title; only
   the rule under it moves to the row, so the button sits above the line too. */
.fi-admin-guide-history .fi-guide-round-head .fi-guide-round-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 18rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-head {
    border-bottom-color: rgb(255 255 255 / 0.15);
}

/* بند ۰۱۰: the management's own icon, at the height of its name. */
.fi-admin-guide-history .fi-guide-round-icon {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
}

.fi-admin-guide-history .fi-guide-round-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* بند ۰۱۲: the date and the time, quieter than the name they follow — the same
   weight the rest of the panel gives a timestamp beside a title. */
.fi-admin-guide-history .fi-guide-round-stamp {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(3 7 18 / 0.55);
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-stamp {
    color: rgb(255 255 255 / 0.6);
}

/* بند ۰۱۳: «صفحه مستندات مدیریت», drawn as the panel's own outlined yellow
   button — the same control «لیست آخرین تغییرات» is on a documentation page, so
   the pair reads as one family. */
.fi-admin-guide-history .fi-guide-round-docs {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--warning-600, #d97706);
    border: 1px solid rgb(245 158 11 / 0.5);
    border-radius: 0.5rem;
    text-decoration: none;
}

.fi-admin-guide-history .fi-guide-round-docs:hover {
    background-color: rgb(245 158 11 / 0.08);
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-docs {
    color: var(--warning-400, #fbbf24);
    border-color: rgb(251 191 36 / 0.45);
}

/* الزام مستندات-۰۵ of تسک ۱۴۰۵/۰۵/۲۶/۲۴ — «مدیریت‌های درگیر این تسک», under
   the head of a round that belongs to more than one of them.

   Its own line rather than a longer head: the head is a title, and three
   management names inside it turn the title into a sentence. The names carry
   the panel's yellow, the label in front of them the muted colour every other
   label on this page has, so the eye lands on the managements. */
.fi-admin-guide-history .fi-guide-round-managements {
    margin-block: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.7;
}

.fi-admin-guide-history .fi-guide-round-managements-label {
    color: rgb(3 7 18 / 0.55);
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-managements-label {
    color: rgb(255 255 255 / 0.6);
}

.fi-admin-guide-history .fi-guide-round-managements-names {
    font-weight: 600;
    color: var(--warning-600, #d97706);
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-managements-names {
    color: var(--warning-400, #fbbf24);
}

/* اصلاح-۰۰۴: and where a management has no documentation at all, the same
   place, the same size and the same line — in red, and plainly not a button.
   No border, no hover, no pointer and no underline: nothing here suggests
   there is something to press, because there is not. The row it sits in is
   the row the button sits in, so the name, the date and the time keep their
   places whichever of the two is drawn. */
.fi-admin-guide-history .fi-guide-round-docs-missing {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--danger-600, #dc2626);
    cursor: default;
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-docs-missing {
    color: var(--danger-400, #f87171);
}

/* بند ۰۱۸: the pagination under the record, away from the last round. */
.fi-site-technical-changes-pagination {
    margin-top: 2rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   «استاندارد‌سازی نمای پنل» — the management's own screens.

   Deliberately spare, and deliberately written with colours the panel already
   uses: this stylesheet is one of the three the standards survey reads, so a
   colour invented here would appear in «رنگ‌های استاندارد» as though the panel
   had always had it.
   ───────────────────────────────────────────────────────────────────────── */

.fi-std-summary p,
.fi-std-preview-label {
    margin: 0 0 0.35rem;
}

/* نما-۱۱: the technical line under the two samples used to start on the pixel
   the sample boxes end on — no gap at any width, and at a glance the writing
   read as part of the night box rather than as a note about both. It belongs
   below the pair, clear of it, and the gap has to survive the width at which
   the pair stops being two columns and becomes two rows. */
.fi-std-preview-note {
    margin: 1.25rem 0 0;
    clear: both;
}

.fi-std-preview-note + .fi-std-preview-warning {
    margin-top: 0.5rem;
}

/* ── The two colour managements' own pages ────────────────────────────────
   نما-۰۴ … ۰۶: «بازگشت» level with the heading rather than halfway down the
   description, and the description given the width of the page.

   Filament already offsets the header actions by the height of the breadcrumbs
   above the heading; centring them against the whole block — heading *and* a
   four-line description — is what pushed the button down. Aligning the header
   to its start is the whole fix, and it puts the button exactly on the heading
   line because that offset was measured for precisely this. */
.fi-std-colour-page .fi-header {
    align-items: flex-start;
}

/* The description is capped at 42rem by the panel, which on this page turns two
   sentences into four lines and a header taller than the first row of the
   table. Nothing about the text changes; it is simply allowed the width that is
   already there beside it. */
.fi-std-colour-page .fi-header-subheading {
    max-width: none;
}

.fi-std-summary-previous {
    color: var(--gray-500, #6b7280);
}

.fi-std-preview-box {
    padding: 1.25rem;
    border: 1px dashed var(--gray-300);
    border-radius: 0.75rem;
    text-align: center;
}

/* بند ۲۵ و ۲۶: day and night side by side, each drawn on the surface it will
   really be drawn on — a combination judged on its writing alone is how an
   unreadable one gets saved. The two boxes carry their own surface rather than
   following the panel's mode, so both can be seen at once. */
.fi-std-preview-pair {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .fi-std-preview-pair {
        grid-template-columns: 1fr 1fr;
    }
}

.fi-std-preview-mode {
    margin: 0 0 0.35rem;
    color: var(--gray-500, #6b7280);
}

.fi-std-preview-day {
    background-color: var(--std-color-hex-fff, #fff);
}

.fi-std-preview-night {
    background-color: var(--std-color-gray-900, #111827);
}

.fi-std-preview-warning {
    margin: 0.75rem 0 0;
    color: var(--warning-600, #d97706);
}

.fi-std-combo-preview {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 0.5rem;
}

/* بند ۱۳ و ۱۴: the sample sits on the surface it will really sit on, and is
   the shape of the thing the combination dresses. A tab whose background is
   transparent looks like nothing at all against the page, which is exactly
   what an administrator needs to be able to see. */
.fi-std-combo-box {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px dashed var(--gray-300);
}

.fi-std-combo-button {
    padding: 0.5rem 1rem;
}

.fi-std-combo-tab {
    padding: 0.5rem 0.75rem;
}

.fi-std-combo-preview-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* نما-۰۲: the two lines «نام ترکیب» is held to are Filament's own line clamp,
   asked for on the column. All that is left for the stylesheet is the row: a
   two-line name beside a one-line sample reads as a mistake unless the two are
   centred against each other. */
.fi-std-colour-page .fi-ta-cell {
    vertical-align: middle;
}

/* بند ۱۴: a button standard is previewed as a button and a tab standard as a
   tab. Only the shape is written here — the padding and the rounded edge the
   panel gives them. Everything that can be decided from the management, the
   sample takes from the form as it is being filled in, so the shape can never
   quietly disagree with the standard. */
.fi-std-preview-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.fi-std-preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.fi-std-preview-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
}

.fi-std-preview-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

/* The tab beside the one being previewed, so the sample reads as a tab strip
   rather than as a lone chip. It is deliberately not styled from the form: it
   stands for «the other tabs», which this standard does not decide. */
.fi-std-preview-tab-other {
    color: var(--gray-400);
}

/* The value an exception is holding, under the tick that says it is one
   (بند ۱۲). */
.fi-std-tick-value {
    display: block;
    margin-top: 0.25rem;
    color: var(--gray-500, #6b7280);
}

.fi-std-places-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fi-std-places-filter {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
}

.fi-std-places-filter-on {
    border-color: var(--warning-500, #f59e0b);
    color: var(--warning-500, #f59e0b);
}

.fi-std-tick {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.fi-std-recorded-at {
    color: var(--gray-500, #6b7280);
}

/* محل‌استفاده-۰۰۲ و ۰۰۳: «بازگشت» and «راهنمای استفاده» belong on the line the
   heading is on, and the sentence under them belongs across the whole width of
   the page.

   The panel's own header is a flex row of two children — the heading block, and
   the buttons — which puts the description inside the first of them and so
   stops it dead where the buttons begin. Made a grid instead, with the heading
   block letting its own children through (`display: contents`), the three parts
   can be placed: breadcrumbs across the top, the heading and the buttons facing
   each other on one line, and the description across both columns underneath —
   which is where the width it was missing comes from. Nothing is positioned by
   hand and no width is hard-coded, so the arrangement holds at any size.

   Below the panel's own `md` breakpoint the header is already a single column
   and is left exactly as it is. */
@media (min-width: 768px) {
    .fi-std-places-page .fi-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 0;
    }

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

    .fi-std-places-page .fi-header .fi-breadcrumbs {
        grid-column: 1 / -1;
        grid-row: 1;
        /* The row gap the header used to give it, now that the rows carry
           none of their own. */
        margin-block-end: 1rem;
    }

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

    .fi-std-places-page .fi-header-actions-ctn {
        grid-column: 2;
        grid-row: 2;
    }

    .fi-std-places-page .fi-header-subheading {
        grid-column: 1 / -1;
        grid-row: 3;
        /* The panel caps every description at 42rem, which on this page turns
           three sentences into four lines and a header taller than the first
           rows of the table. It is given the page instead, stopping the two
           centimetres short of the edge the task asks for so the text still has
           a margin to breathe in. */
        max-width: none;
        padding-inline-end: 2cm;
    }
}

/* محل‌استفاده-۰۰۷: «مشمول استاندارد» said once, under the heading of the column
   it explains, instead of beside every tick of every row. Smaller and quieter
   than the heading, and on its own line so it cannot widen the column. */
.fi-std-col-note {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.2;
    margin-block-start: 0.15rem;
    color: var(--gray-500, #6b7280);
}

/* In the «ستون‌ها» panel a column is picked by its name; the note under the
   heading would only be noise there. */
.fi-ta-col-manager-label .fi-std-col-note {
    display: none;
}

/* بند ۱۱: the colour itself is the first thing in the row, and big enough to
   judge from across the desk. */
.fi-std-color-chip {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
}

.fi-std-colors-table td {
    /* Names and notes read as sentences, so the row is no longer forced onto
       one line by the code that used to lead it. */
    white-space: normal;
}

/* نما-۰۷: exactly two columns hold Persian prose rather than a figure, and
   prose reads from the right. Written on the two cells and not on the table,
   so the counts under «استانداردهای استفاده‌کننده» and «محل‌های استفاده» stay
   centred under their own headings. `right` and not `start`: the value has to
   be readable as itself when the page is measured. */
.fi-std-colors-table th.fi-std-colors-cell-name,
.fi-std-colors-table td.fi-std-colors-cell-name,
.fi-std-colors-table th.fi-std-colors-cell-status,
.fi-std-colors-table td.fi-std-colors-cell-status {
    text-align: right;
}

/* نما-۰۹: «ویرایش رنگ» is three words and was being broken over two lines by a
   column exactly one word too narrow. The button may have the width it needs —
   what it may not have is a second line, which made every row taller than the
   swatch in it. */
.fi-std-colors-table td.fi-std-colors-cell-actions {
    white-space: nowrap;
}

.fi-std-colors-table td.fi-std-colors-cell-actions .fi-btn {
    white-space: nowrap;
}

.fi-std-colors-table td.fi-std-colors-cell-actions .fi-btn-label {
    white-space: nowrap;
}

.fi-std-color-name {
    display: block;
    font-weight: 600;
}

/* Still here, still readable, no longer the loudest thing in the table
   (بند ۱۱ — «اطلاعات فنی نباید مهم‌ترین اطلاعات بصری جدول باشد»). */
.fi-std-color-value,
.fi-std-color-note,
.fi-std-combo-values {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* بند ۱۲: the colour as it will be, before «ذخیره». */
.fi-std-color-sample {
    display: inline-block;
    width: 3rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
    vertical-align: middle;
}

.fi-std-color-sample-text {
    margin-inline-start: 0.75rem;
    vertical-align: middle;
}

.fi-std-unresolved,
.fi-std-recorded {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.75rem;
}

.fi-std-unresolved-title,
.fi-std-recorded-title {
    font-weight: 700;
}

/* ── «نمونه محل» و «نمونه» ────────────────────────────────────────────────
   بند ۳، ۶، ۸ و ۱۱ of «استانداردسازی نمای پنل ۹»: a link out of a list to the
   real place a standard is used, and — for the roles that are buttons — the
   button itself in the row.

   The link is drawn as a link and not as a button on purpose: the row already
   carries the operations of that row, and a sample is a way out of the list
   rather than something done to it. */
.fi-std-sample-link {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    color: var(--primary-600, #d97706);
}

.fi-std-sample-empty {
    color: var(--gray-500, #6b7280);
}

/* بند ۸: the row shows the button itself, wearing the standard it is listing —
   its colours from the role's own combination, its size and weight from the one
   standard every button in the panel shares. Only the shape is written here. */
.fi-std-sample-button {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

.fi-std-sample-button-outlined {
    border-style: solid;
    border-width: 1px;
}

/* The ring the opened page draws round the element a sample link was followed
   for (بند ۹). It is added by script and taken off again a few seconds later,
   so it changes nothing permanent about the element or the page — and it is
   loud on purpose, because an operator who cannot find the element straight
   away has been sent to a page rather than to a place. */
.fi-std-sample-target {
    outline: 3px solid var(--danger-500, #ef4444) !important;
    outline-offset: 3px;
    border-radius: 0.375rem;
    animation: fi-std-sample-pulse 1s ease-in-out 0s 4;
}

@keyframes fi-std-sample-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
    }

    50% {
        box-shadow: 0 0 0 0.75rem rgba(239, 68, 68, 0);
    }
}

/* بند ۷: the buttons of «استانداردسازی نمای پنل» face the title, exactly as
   they do on the two colour pages, so the top of the page is one row rather
   than a block above the table. */
.fi-std-standards-page .fi-header {
    align-items: flex-start;
}

/* بند ۲-۴: «استانداردسازی» over «نمای پنل», and not because the window happens
   to be that wide. Each half is its own line at every width — on a desktop too,
   which is where the title used to run out as one long line — and only in this
   page's header: the sidebar, the browser tab and the breadcrumbs are drawn from
   the page's title, which is still one line of plain text. */
.fi-std-standards-page .fi-header-heading .fi-std-title-line {
    display: block;
}

/* بند ۲-۱: the sentence under the title, given the width of the page.
   `max-width: none` alone was not enough — the panel's header is a flex row of
   two children, the heading block and the buttons, and the description sits
   inside the first of them, so it stopped dead where five buttons began and ran
   to four lines. Made a grid, with the heading block letting its own children
   through (`display: contents`), the description can be placed across both
   columns underneath: the heading and the buttons keep the row they share and
   the words get the whole width.

   Nothing is positioned by hand and no width is written down, so it holds at any
   size; below the panel's own `md` breakpoint the header is already one column
   and is left exactly as it is. Same arrangement as «محل‌های استفاده»
   (محل‌استفاده-۰۰۲ و ۰۰۳), for the same reason. */
.fi-std-standards-page .fi-header-subheading {
    max-width: none;
}

@media (min-width: 768px) {
    .fi-std-standards-page .fi-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        /* The operations on the line the title is on (بند ۷) — with a two-line
           title, level with the middle of it. */
        align-items: center;
        row-gap: 0;
    }

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

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

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

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

    .fi-std-standards-page .fi-header-actions-ctn {
        grid-column: 2;
        grid-row: 2;
    }

    .fi-std-standards-page .fi-header-subheading {
        grid-column: 1 / -1;
        grid-row: 3;
        /* The line runs to the far edge of the content, stopping the two
           centimetres short of it that leave the words a margin to breathe in. */
        padding-inline-end: 2cm;
        margin-block-start: 0.5rem;
    }
}

/* بند ۱۴: what a standard is now, as a table — one property to a row, and the
   sample of that property beside it. Sentences run together on one line were
   what an operator had to read three times to find the weight in. */
.fi-std-info-table {
    width: 100%;
    border-collapse: collapse;
}

.fi-std-info-table th,
.fi-std-info-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    text-align: start;
    vertical-align: middle;
}

.fi-std-info-table tr:last-child th,
.fi-std-info-table tr:last-child td {
    border-bottom: 0;
}

.fi-std-info-table th {
    width: 16rem;
    font-weight: 600;
    color: var(--gray-600, #4b5563);
}

.fi-std-info-table td.fi-std-info-sample {
    width: 10rem;
    text-align: center;
}

/* «لیست ایکس‌های فیلدها» — the small window over the pattern form that says
   which detail each mark stands for (بند ۹ و ۱۰).

   Layout only. The mark itself is drawn by `.fi-gallery-title-slot`, whose
   colour «استانداردهای نمای پنل» owns, and «بدون اتصال» is a Filament badge —
   neither colour is written here, so neither can drift from the panel's own. */
.fi-mark-directory-table {
    width: 100%;
    border-collapse: collapse;
}

.fi-mark-directory-table td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    text-align: start;
    vertical-align: middle;
}

.fi-mark-directory-table tr:last-child td {
    border-bottom: 0;
}

.fi-mark-directory-mark {
    width: 10rem;
    font-weight: 600;
}

/* «فیلدهای اطلاعاتی مرتبط» — the technical pattern read out in words, in a box
   shaped like the fields around it but plainly not one of them
   (الزام ۲ of «بهبود خوانایی عنوان فنی»).

   Layout and the frame only. The one colour in it, the «بدون اتصال» warning, is
   `.fi-gallery-title-slot`'s, which «استانداردهای نمای پنل» owns. */
.fi-template-fields-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 0.5rem;
    background-color: var(--gray-50, #f9fafb);
    line-height: 1.9;
}

.dark .fi-template-fields-box {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-800, #1f2937);
}

.fi-template-fields-box-sep {
    opacity: 0.5;
}

/* The structure under the heading of the edit page: readable, at the size of a
   line of text, and at ordinary weight — no longer the page's own title
   (الزام ۱). */
.fi-template-technical-subheading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 400;
}

/* ── The duplicate-gallery dialog ──────────────────────────────────────────
   الزام گالری-تکراری-۰۸، ۰۹، ۱۲ و ۱۳: the card inside the dialog that names the
   gallery already here — its code, its title, the day it is filed under and what
   it has in common with the one being made.

   The code is the one thing in it that has to be found at a glance, so it is the
   only thing set larger than a line of text. Nothing here styles a button, a tab
   or a badge: those belong to «استانداردهای نمای پنل» and not to a stylesheet. */
.fi-gallery-duplicate-notice {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fi-gallery-duplicate-card {
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 0.5rem;
    background-color: var(--gray-50, #f9fafb);
    padding: 0.75rem 1rem;
    line-height: 2;
}

.dark .fi-gallery-duplicate-card {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-800, #1f2937);
}

.fi-gallery-duplicate-card-definite {
    border-color: var(--danger-400, #f87171);
}

.dark .fi-gallery-duplicate-card-definite {
    border-color: var(--danger-500, #ef4444);
}

.fi-gallery-duplicate-code {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.fi-gallery-duplicate-code-label {
    color: var(--gray-500, #6b7280);
}

.dark .fi-gallery-duplicate-code-label {
    color: var(--gray-400, #9ca3af);
}

.fi-gallery-duplicate-code-value {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.fi-gallery-duplicate-type {
    color: var(--gray-500, #6b7280);
}

.dark .fi-gallery-duplicate-type {
    color: var(--gray-400, #9ca3af);
}

.fi-gallery-duplicate-title,
.fi-gallery-duplicate-date,
.fi-gallery-duplicate-marks {
    margin: 0;
}

.fi-gallery-duplicate-date,
.fi-gallery-duplicate-marks {
    color: var(--gray-500, #6b7280);
}

.dark .fi-gallery-duplicate-date,
.dark .fi-gallery-duplicate-marks {
    color: var(--gray-400, #9ca3af);
}

.fi-gallery-duplicate-hint {
    margin: 0;
    color: var(--gray-500, #6b7280);
}

.dark .fi-gallery-duplicate-hint {
    color: var(--gray-400, #9ca3af);
}

/* تسک ۱۴۰۵/۰۶/۲۱/۰۲/۰۵: on an edit page the dialog opens by saying which gallery
   is being edited. Every code below it belongs to some *other* gallery, and
   without this line the operator has no way to tell theirs apart from what was
   found. It is set apart by a rule rather than by a colour of its own, because
   the palette of this dialog belongs to «استانداردهای نمای پنل». */
.fi-gallery-duplicate-editing {
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    color: var(--gray-500, #6b7280);
}

.dark .fi-gallery-duplicate-editing {
    border-bottom-color: var(--gray-700, #374151);
    color: var(--gray-400, #9ca3af);
}

.fi-gallery-duplicate-editing-code {
    font-weight: 700;
    color: var(--gray-700, #374151);
}

.dark .fi-gallery-duplicate-editing-code {
    color: var(--gray-200, #e5e7eb);
}

/* ── الزام گالری-تاریخ-۰۱ … ۰۶: تاریخ خوانا داخل خود کادر ─────────────────── */

/* The picked day, said the way the panel says a day — «۱۷ شهریور ۱۴۰۵» — inside
   the box, over the ۱۴۰۵/۰۶/۱۷ the calendar itself has to be able to parse
   (الزام گالری-تاریخ-۰۲). The line that used to stand *under* the field is gone
   with it: `persianReadout()` draws one reading or the other, never both, so the
   same date is no longer written twice a few pixels apart
   (الزام گالری-تاریخ-۰۱).

   The cover, the transparent input beneath it and the fact that the box keeps
   sending the numeric form are all `agency-discounts.css`'s — one implementation
   of «a readable day in the box», wherever the panel needs one. What belongs
   here is only the colour: bold and the panel's own yellow, the very pair «روی
   تاریخ کلیک کنید» above it is drawn in, so the two readings of the same field
   agree (الزام گالری-تاریخ-۰۳).

   Three classes deep on purpose. `agency-discounts.css` states the cover's own
   near-black at two, and it is linked *after* this file — at equal weight the
   later rule would win and the date would read black. The marker on the field
   wrapper keeps every other date box in the panel exactly as it was, and nothing
   about how the date is stored, parsed or sent changes (الزام گالری-تاریخ-۰۵). */
.fi-manual-gallery-date .fi-jdp-readout .fi-jdp-cover {
    font-size: 1rem;
    font-weight: 700;
    color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-manual-gallery-date .fi-jdp-readout .fi-jdp-cover {
    color: var(--warning-400, #fbbf24);
}

/* الزام ساخت-۰۱ و ویرایش-۰۱ of تسک ۱۴۰۵/۰۶/۰۵/۰۵: the day itself, centred in
   its box, on the create page and on every edit page — the field is one
   component and both pages draw it.

   The readout is what is seen: the input under it is drawn with transparent
   text, so centring the words means centring this cover. The value, its format
   and everything the calendar and the server do with the date are untouched. */
.fi-manual-gallery-date .fi-jdp-readout .fi-jdp-cover {
    justify-content: center;
}

.fi-manual-gallery-date .fi-jdp-readout .fi-jdp-input {
    text-align: center;
}

/* A box with no day picked in it yet whispers today's date. That is a hint and
   not a value, so it is not drawn as one — the yellow above says «this gallery
   is of this day», and nothing may say that until a day is chosen. */
.fi-manual-gallery-date .fi-jdp-readout .fi-jdp-cover-hint {
    font-weight: 400;
    color: var(--gray-500, #6b7280);
}

:where(.dark) .fi-manual-gallery-date .fi-jdp-readout .fi-jdp-cover-hint {
    color: var(--gray-400, #9ca3af);
}

/* «آواتار | نام و نام خانوادگی │ ۱۰۲۵» — one row, in that order
   (الزام گالری-عکاس-۰۲). Built like the team option above it, so the two lists
   in this form read as one panel rather than two ideas. */
.fi-photographer-option {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-width: 0;
}

/* The photographer's own portrait, and — when there is none — the stand-in the
   panel already draws for a person, which `portraitUrl()` hands over as an
   ordinary address. So there is nothing to draw here for the empty case: it is
   the same round picture either way (بند ۳، آخرین سطر). */
.fi-photographer-option-avatar {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
    border-radius: 9999px;
}

.fi-photographer-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A line rather than a character, so «نام» and «کد عکاس» are two things at a
   glance (بند ۳). The same hairline the pattern list uses.

   White, and plainly white (الزام گالری-اصلاح-۰۴). It used to be drawn at 0.35
   of white, which against a badge's own fill and beside a yellow code read as a
   gap rather than as a line. There is exactly one line in the badge and it goes
   between the name and the code: there is none between the portrait and the
   name, which is what «بین آواتار و نام عکاس خطی وجود نداشته باشد» asks for and
   what the markup has always done — `PhotographerBadge` draws one divider, in
   one place. */
.fi-photographer-option-divider {
    /* الزام کاور-یکپارچه-۰۹: half the height it was, and level with the name.
       The line used to be stretched to the full height of the badge — the
       portrait's 1.5rem — so it stood a good way above and below the words it
       divides and read as a rule between two rows rather than as a hairline
       between a name and a code. It is centred on the row now and given a
       height of its own, which stays inside the line-height of the name beside
       it whatever that name is. */
    align-self: center;
    flex-shrink: 0;
    width: 1px;
    height: 0.75rem;
    /* On a light surface a white line is no line at all, so there it is the
       same hairline in the panel's near-black. The rule the task is really
       making is «قابل تشخیص از زمینه»; white is that rule's answer on the dark
       panel, which is every gallery edit page. */
    background-color: rgb(3 7 18 / 0.45);
}

/* …and white on the dark panel (الزام گالری-اصلاح-۰۴).
   
   This is the half that was never really drawn. The line used to be declared
   white on the bare class and then overridden by `:where(:not(.dark))`, which
   matches whenever *any* ancestor lacks `.dark` — true of `<body>` always — so
   the dark hairline won in both themes and the white one was never on screen.
   Said as «an ancestor carries `.dark`», it is. */
:where(.dark) .fi-photographer-option-divider {
    background-color: rgb(255 255 255 / 0.92);
}

/* The bare code, and never wrapped away from the name it follows
   (الزام گالری-عکاس-۰۳).

   «کد عکاس:» used to stand in front of it. It is gone: the hairline before it
   already says the number is a second thing, and three words of label pushed the
   code off the end of a narrow badge. What tells the two apart now is colour —
   the panel's own yellow, so the name and the code are never read as one string
   (الزام گالری-عکاس-۰۴). */
.fi-photographer-option-code {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-photographer-option-code {
    color: var(--warning-400, #fbbf24);
}

/* ── «توضیح عنوان در ویو» beside «عنوان گالری» ────────────────────────────────
   (الزام ساخت-۰۲ … ۰۶ و ویرایش-۰۲ … ۰۵ of تسک ۱۴۰۵/۰۶/۰۵/۰۵)

   The same soft ground as «راهنمای انتخاب الگوی عنوان» under it: a box that is
   plainly a reading rather than a field — nothing to type against, nothing to
   focus. The heading's yellow is not here; it is a managed role
   («عنوان کادر راهنمای فرم») and is decided in «استاندارد‌سازی نمای پنل». */
.fi-gallery-view-note {
    padding: 0.75rem 1rem;
    text-align: right;
    cursor: default;
    border-radius: 0.5rem;
    background-color: var(--gray-50, #f9fafb);
    box-shadow: inset 0 0 0 1px rgb(3 7 18 / 0.1);
}

:where(.dark) .fi-gallery-view-note {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}

.fi-gallery-view-note-text {
    margin: 0;
    line-height: 1.9;
    text-align: right;
    white-space: normal;
    overflow-wrap: break-word;
}

/* الزام ساخت-۰۶ و ویرایش-۰۵: a pattern with no phrase says so, in red, inside
   the box — never an empty frame and never no box at all. */
.fi-gallery-view-note-absent {
    margin: 0;
    line-height: 1.9;
    text-align: right;
    color: var(--danger-600, #dc2626);
}

:where(.dark) .fi-gallery-view-note-absent {
    color: var(--danger-400, #f87171);
}

/* «۳۵۱ عکس» — how many of this gallery's photographs are this photographer's
   (الزام عکاس-۰۲ … ۰۴ of تسک ۱۴۰۵/۰۶/۰۵/۰۵).

   The same yellow as the code beside it, and for the same reason: the badge now
   holds three facts, and the two that are numbers are told from the name by
   colour rather than by punctuation. The second hairline is the first one's
   rule, so the two dividers are the same line at the same height without a
   second declaration to keep in step. */
.fi-photographer-option-photos {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-photographer-option-photos {
    color: var(--warning-400, #fbbf24);
}

/* ── «نام عکاس» in the upload managements (آژانس ـ بارگذاری ـ عکاس ـ ۰۰۱ … ۰۰۵)

   The field draws a photographer as `PhotographerBadge` — «آواتار | نام | کد |
   تعداد عکس در همین گالری» — which is the same badge the gallery card above it
   and «عکاسان گالری» already print. Nothing here re-draws the badge; what is
   said is only that in *this* field it is half again as tall as an ordinary
   one, so a face, a name, a code and a count are four things read at a glance
   rather than four things squeezed onto one line (بند ۱۸ … ۲۰).

   ۲.۲۵rem is Filament's own `min-height` for a select — 9 × --spacing — taken
   1.5×. The avatar goes up with it in the same proportion and no further, so it
   cannot push the box past the height that was asked for (بند ۱۹). */
.fi-upload-photographer-field .fi-select-input-btn,
.fi-upload-photographer-field .fi-input-wrp {
    min-height: calc(var(--spacing) * 13.5);
}

/* Centred rather than pinned to the top: the box got taller, and text that
   keeps its old place inside it reads as text that has slipped
   (بند ۲۰ — «نباید بعد از افزایش ارتفاع، متن در بالا یا پایین کادر بچسبد»). */
.fi-upload-photographer-field .fi-select-input-btn,
.fi-upload-photographer-field .fi-select-input-value-ctn {
    align-items: center;
}

/* The list under it is the same field: an option that is shorter than the
   closed box would make the badge two sizes in one control. */
.fi-upload-photographer-field .fi-photographer-option-avatar,
.fi-select-input-options-ctn .fi-photographer-option-avatar {
    width: 2.25rem;
    height: 2.25rem;
}

/* …and the hairlines grow with the words they divide, so the badge stays one
   piece at the new size (بند ۱۹ و ۲۰). */
.fi-upload-photographer-field .fi-photographer-option-divider,
.fi-select-input-options-ctn .fi-photographer-option-divider {
    height: 1.1rem;
}

/* Every photographer of the gallery, drawn the one way (بند ۲۱): the rules
   above are written against the badge rather than against a row, so a gallery
   with four photographers has four badges of one height with four avatars of
   one size. */
.fi-select-input-options-ctn .fi-photographer-option,
.fi-upload-photographer-field .fi-photographer-option {
    gap: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
}

/* الزام گالری-یکپارچه-۱۵ و ۱۶: «کاور گالری» on the hand-made gallery's form is
   the standard box's field now, so the rules that used to place it on a form of
   its own — `.fi-manual-gallery-cover` — are gone. Everything about where it
   sits is `fi-gallery-box`'s, above, and there is exactly one arrangement of it
   to keep working. */

/* ── The photographers already chosen (الزام عکاس-۰۶) ────────────────────────
   A multiple select draws each chosen value as a badge above the box, with its
   own «×». The badge is handed the very markup the list was drawn with, so the
   three parts survive the move: the operator sees a face, a name and a code for
   every photographer on the gallery rather than a row of bare numbers, and can
   tell at a glance who is attached.

   What has to be said here is only what the badge is smaller than the list:
   the portrait comes down a size so a badge stays one line high, and the
   hairline comes down with it. No colour is stated inside a `.fi-badge` — the
   badge's own is the management's to decide (بند ۱۵ of the panel standards),
   and the hairline keeps the one the list drew it in. */
.fi-manual-gallery-photographers .fi-badge .fi-photographer-option {
    gap: calc(var(--spacing) * 1.5);
}

.fi-manual-gallery-photographers .fi-badge .fi-photographer-option-avatar {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-manual-gallery-photographers .fi-badge .fi-photographer-option-divider {
    height: 0.625rem;
}

/* The badges themselves: a row that wraps, so three photographers read as three
   things and the box below them does not shrink. */
.fi-manual-gallery-photographers .fi-select-input-value-badges-ctn {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
}


/* ── الزام گالری-اصلاح-۱۲: «وضعیت گالری», read out ───────────────────────────

   Drawn the way «توضیحات گالری» is drawn a few fields above it: a framed
   reading with no control in it, so nothing on the box looks like a list that
   refuses to open. Same frame, same height, so the two readings on the page are
   plainly the same kind of thing. */
.fi-gallery-status-readout {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    text-align: right;
    cursor: default;
    border-radius: 0.5rem;
    background-color: var(--gray-50, #f9fafb);
    box-shadow: inset 0 0 0 1px rgb(3 7 18 / 0.1);
}

:where(.dark) .fi-gallery-status-readout {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}

/* The state itself, in the panel's own yellow — the same way «توضیحات گالری»
   tells what the system wrote apart from what the operator answered. */
.fi-gallery-status-readout-value {
    font-weight: 600;
    -webkit-text-fill-color: var(--warning-500, #f59e0b);
}

:where(.dark) .fi-gallery-status-readout-value {
    -webkit-text-fill-color: var(--warning-400, #fbbf24);
}

.fi-gallery-status-readout-empty {
    -webkit-text-fill-color: var(--danger-600, #dc2626);
    font-weight: 600;
}

:where(.dark) .fi-gallery-status-readout-empty {
    -webkit-text-fill-color: var(--danger-400, #f87171);
}

/* «کاور فعلی این گالری» stood here — the cover a gallery already had, drawn in
   a box of its own above the picker that replaces it, on «کاور گالری از طریق
   کد». The picker holds that cover itself now (الزام کاور-یکپارچه-۰۳ و ۰۵), so
   there is no second box to shape and no caption to keep readable on two
   backgrounds: the cover is shown where it is changed, once. */

/* ── الزام گالری-اصلاح-۳۱ … ۳۳: the «کاور» column of a gallery list ──────────

   `.fi-ta-col` is a flex row, so a custom cell that does not claim the whole
   width is hugged to one edge and `alignCenter()` reads as `start`. */
.fi-gallery-cover-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fi-gallery-cover-cell-image {
    display: block;
    height: 2.5rem;
    width: auto;
    max-width: 5.5rem;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* ── الزام گالری-اصلاح-۲۹: «عکاسان گالری» on «ساخت گالری» ────────────────────

   An ordinary field of the form, directly under «توضیحات گالری» — no card, no
   background and no frame of its own. Everything it needs is the sizing the
   chosen badges have always had, which it carries through
   `fi-manual-gallery-photographers`; there is nothing left for this class to
   say, and it exists so a test can find the field where the task asks for it. */
.fi-gallery-create-photographers {
    background: none;
}

/* ── ۳.۱ از بخش سوم: «نام» با هدر وسط‌چین و مقدارهای راست‌چین ───────────────────

   Filament gives a column ONE alignment and uses it for the header cell and the
   body cell alike. The task wants them apart: the column's heading stays where
   it is, and the names under it read from the right like every other Persian
   name in the panel. So the column keeps `alignCenter()` — which is what the
   header uses — and the body cell is turned back here.

   `.fi-ta-col` is Filament's own flex row inside the cell and is what actually
   places the text, so it is turned with the cell rather than left centred
   inside a right-aligned box. Only this column of only this page: no other
   column and no other list moves. */
.fi-page-photographer-list .fi-ta-cell.fi-ta-cell-name {
    text-align: right;
}

.fi-page-photographer-list .fi-ta-cell.fi-ta-cell-name .fi-ta-col,
.fi-page-photographer-list .fi-ta-cell.fi-ta-cell-name .fi-ta-text {
    justify-content: flex-end;
    text-align: right;
}

/* ── بخش یازدهم: «کارمندان» با عرض کامل و نیم سانتی‌متر فاصله از دو کناره ──────

   `getMaxContentWidth(Width::Full)` on the page removes Filament's ۸۰rem cap;
   what is left is the padding the panel puts down each side, which at the full
   width is wider than the task asks for. Half a centimetre is written as
   `0.5cm` rather than converted to a guess in rem, because that is the
   measurement the task gives and CSS knows what it means.

   Only from the panel's own `md` breakpoint up: a phone keeps the padding it
   has, where a hand's breadth of margin is the difference between a readable
   table and one glued to the glass. Nothing about the table itself changes —
   the columns size themselves exactly as before, the fonts are untouched, and
   the horizontal scroll `.fi-ta-ctn` already carries stays for a set of columns
   too wide even for this. */
@media (min-width: 768px) {
    .fi-main:has(.fi-page-employee-list) {
        padding-inline: 0.5cm;
    }
}

/* ── تسک ۱۴۰۵/۰۶/۱۰/۰۱ — «اصلاحات الگوهای عنوان گالری و ساخت گالری در آژانس» ──

   Five items, all of them about how two screens read: «الگوهای عنوان گالری» and
   «ساخت گالری‌های آژانس». Nothing here decides a size, a weight or a colour of
   a role «استانداردسازی نمای پنل» owns — the quieter header of the pattern form
   is an exception row written by a migration, and the yellow figure in it is the
   panel's own `fi-list-count-heading-count`. */

/* ── الزام ۲: «لیست ایکس‌های فیلدها» beside the label it belongs to ────────────

   Filament draws a field's hint at the far end of the label's own row, which put
   a link about «عنوان فنی الگو» on the opposite side of the page from the words
   it explains. The row itself is right: what moves is where the hint sits in it
   — immediately after the label, half a centimetre from it, and nowhere else
   («بالای عنوان قرار نگیرد؛ پایین عنوان قرار نگیرد؛ به سمت دیگر صفحه منتقل
   نشود»).

   `0.5cm` rather than a guess in rem, because that is the measurement the task
   gives and CSS knows what it means. Nothing about the list, its window or its
   marks is touched by this. */
.fi-title-template-technical > .fi-fo-field-label-col > .fi-fo-field-label-ctn {
    justify-content: flex-start;
    gap: 0;
}

.fi-title-template-technical > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-fo-field-label {
    flex: 0 0 auto;
}

.fi-title-template-technical > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-sc {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-inline-start: 0.5cm;
    margin-inline-end: 0;
}

/* ── الزام ۱-۵ و ۱-۶: the colour that stands for a pattern ────────────────────

   A filled circle before the pattern's name, wherever that name is offered. The
   colour itself is written into the markup from the pattern's own row — it is
   data, not a decision anybody could make centrally — and a pattern with none
   yet gets this hollow ring rather than a colour chosen for it. */
.fi-template-color-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 0 0 1px rgb(3 7 18 / 0.2);
}

:where(.dark) .fi-template-color-dot {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35);
}

/* A pattern written before «رنگ الگو» existed: an empty ring, so the names below
   it still line up and nothing pretends to be a colour. */
.fi-template-color-dot-empty {
    background-color: transparent;
}

/* The circle sits on the line the name sits on, and the option's own baseline
   alignment would hang it under one. */
.fi-title-template-option {
    align-items: center;
}

/* ── مورد ۳: every «اطلاعات گالری» list, read the same way ────────────────────

   Alternating row backgrounds so a long list can be followed across, and room
   for the logo drawn in front of each name. The rules hang off the field's own
   wrapper: Filament builds a select's dropdown inside the field it belongs to,
   so these reach the ten lists «ساخت گالری‌های آژانس» is made of and no other
   list in the panel (قاعده ۶).

   `:nth-child(even)` over the options themselves, not over everything in the
   panel: the search box and the «چیزی پیدا نشد» line are not options and are
   not counted. */
.fi-gallery-info-select .fi-dropdown-panel li[role='option']:nth-child(even) {
    background-color: rgb(3 7 18 / 0.05);
}

:where(.dark) .fi-gallery-info-select .fi-dropdown-panel li[role='option']:nth-child(even) {
    background-color: rgb(255 255 255 / 0.05);
}

/* An option is a logo and then a name, on one line, whatever kind of record it
   is — a team already read this way, and the eight lists beside it now do too
   (الزام ۳-۲). */
.fi-gallery-info-select .fi-dropdown-panel li[role='option'] .fi-team-option {
    display: flex;
    width: 100%;
    align-items: center;
}

/* ── تسک ۱۴۰۵/۰۶/۲۱/۰۲/۰۷: «تیم اول» و «تیم دوم» ──────────────────────────────

   ردیف تیم یک‌ستونه شد: فیلد انتخاب تیم تمام نیم‌ردیف خودش را می‌گیرد — همان
   عرضی که «رقابت» بالای آن دارد — متن راهنما به بالای فیلد رفت (فرم،
   `aboveContent`) و دو کلید «عدم فیلتر» و «رده سنی» زیر فیلد، کنار هم نشستند.

   قبل از این، ردیف چهارستونه بود و فیلد تیم فقط دو ستون از آن؛ نام کامل یک تیم
   — «آرمان آفرینان (آرمان آفرینان آینده ساز ورزش) / نوجوانان / مردان / تهران» —
   در یک‌چهارم فرم جا نمی‌شد و روی کلید کنارش کشیده می‌شد. همین سرریز، صورت
   مسئله این تسک است.

   اندازه عنوان و توضیح این دو کلید اینجا نوشته نمی‌شود: «عنوان فیلد» و «توضیح
   فیلد» نقش‌های «استانداردسازی نمای پنل» هستند و یک شیت اجازه ندارد درباره
   خصوصیتی که آن مدیریت مالک آن است تصمیم بگیرد. اندازه کوچک‌ترشان «مورد
   استثنا» ثبت شده است — مهاجرت `2026_09_18_000100_the_team_switches_are_read_smaller`.
   آنچه اینجا می‌ماند، اندازه خود کلید و فاصله‌ها است. */

/* نام تیم، هرچقدر بلند، داخل کادر می‌ماند — در فرم‌های ساخت و ویرایش گالری، و در
   صفحه «گالری‌ها» (بازی رسمی) که کلیدی کنار فیلد تیمش ندارد ولی همین سرریز را
   داشت (کلاس `fi-gallery-team-select`).

   گزینه تیم یک ردیف فلکس است (نشان تیم و بعد نام)؛ بدون `min-width: 0` یک آیتم
   فلکس کوچک‌تر از محتوایش نمی‌شود، پس نام از کادر بیرون می‌زد. با این دو قاعده،
   نام تا هر جا که جا دارد خوانده می‌شود و انتهای آن «…» می‌شود — نه بیرون‌زدگی،
   نه اسکرول افقی. */
.fi-gallery-info-select .fi-select-input-value-label,
.fi-gallery-team-select .fi-select-input-value-label {
    min-width: 0;
    overflow: hidden;
}

/* در صفحه «گالری‌ها» نام تیم متن ساده است (نشان و توضیح ندارد)، پس «…» روی خود
   همین لایه نوشته می‌شود. در فرم‌های گالری این کار به لایه نام تیم سپرده شده
   است، چون آنجا گزینه از چند تکه ساخته شده و یک‌خطی‌کردن کل لایه، فهرست‌های
   چندتکه دیگر همان فرم را هم عوض می‌کرد. */
.fi-gallery-team-select .fi-select-input-value-label {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fi-gallery-info-select .fi-select-input-value-label > .fi-team-option,
.fi-gallery-team-select .fi-select-input-value-label > .fi-team-option {
    min-width: 0;
    max-width: 100%;
}

.fi-gallery-info-select .fi-select-input-value-label .fi-team-option-text,
.fi-gallery-team-select .fi-select-input-value-label .fi-team-option-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* متن راهنمای بالای فیلد: یک خط جمع‌وجور که ارتفاع فرم را بی‌دلیل بلند نکند. */
.fi-gallery-team-hint {
    line-height: 1.35;
}

/* ── بند ۱۰ و ۱۱ تسک «تکمیل کنترل الگوهای عنوان گالری» ────────────────────────

   دو کنترل زیر هر تیم، هرکدام روی یک خط: «نمایش رده سنی تیم اول» و «فیلتر تیم
   اول بر اساس فیلدهای اطلاعات». پیش از این کنار هم بودند و برای جاشدن در نصف
   عرض یک فیلد، هم عنوان‌ها و هم خود کلیدها یک‌سوم کوچک شده بودند — همان چیزی
   که تسک «بیش از حد کوچک و فشرده» می‌نامد.

   جای کلی این بخش تغییر نمی‌کند (بند ۱۰): همان‌جا، زیر همان فیلد تیم. */
.fi-gallery-team-switches {
    row-gap: 0.5rem;
}

.fi-gallery-team-switches .fi-sc-component:has(> .fi-manual-gallery-unfiltered),
.fi-gallery-team-switches .fi-sc-component:has(> .fi-manual-gallery-age-group) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* عنوان هر کلید کنار خودش و در یک خط می‌ماند. حالا که هر کنترل یک خط کامل
   دارد، جای این کار هست. */
.fi-manual-gallery-unfiltered .fi-fo-field-label-content,
.fi-manual-gallery-age-group .fi-fo-field-label-content {
    white-space: nowrap;
}

.fi-manual-gallery-age-group .fi-sc-text {
    white-space: nowrap;
    line-height: 1.35;
}

/* خودِ کلید به اندازه استاندارد پنل برمی‌گردد — ۲۴×۴۴ پیکسل با دستهٔ ۲۰
   پیکسلی — که همان اندازه‌ای است که هر کلید دیگر همین فرم دارد. اندازهٔ کوچک
   قبلی (۱۶×۲۸) خواستهٔ تسک قبلی بود و بند ۱۱ همان را پس می‌گیرد. چون دیگر
   چیزی از اندازهٔ پیش‌فرض کم نمی‌شود، مسیر حرکت دسته هم دست‌کاری نمی‌شود. */

/* ── الزام ۱-۲: a colour code reads left to right ──────────────────────────────

   The panel is written right to left, and an RTL text box draws «#f59e0b» as
   «f59e0b#» — the hash walks to the far end and the code stops being one. The
   box is told its own direction; it stays at the right-hand edge of the field,
   where every other value on the form sits. */
.fi-title-template-color .fi-input {
    direction: ltr;
    text-align: right;
}

/* ── تسک ۱۴۰۵/۰۶/۱۰/۰۱ (اصلاحات ۲) ────────────────────────────────────────── */

/* مورد ۱: every open list on «ساخت گالری‌های آژانس», half as tall again.

   «ارتفاع فضای نمایش گزینه‌ها در تمام فیلدهای بازشونده این صفحه نسبت به وضعیت
   فعلی یک‌ونیم برابر شود» — so that more rows are read at once. Filament gives
   a select's open list `calc(var(--spacing) * 60)`; this is that same figure
   times one and a half, written the same way so the proportion stays visible
   rather than becoming a number nobody can trace back.

   Nothing else about a list moves: a row's height, the text, the logo, the
   padding, the width, the scrolling, the search box and the choosing are all
   the panel's own and are untouched. The rule is the panel's own with this
   page's class in front of it, so it outweighs Filament's by one class and
   reaches no list on any other page. */
.fi-page-manual-galleries-create .fi-select-input .fi-dropdown-panel {
    max-height: calc(var(--spacing, 0.25rem) * 90);
}

/* مورد ۴-۲: «...» where the rest of the title will go.

   Red, and heavier and larger than the words around it — «قرمز باشد؛ کاملاً
   واضح باشد؛ ضخیم و بسیار پررنگ نمایش داده شود». The red is the same red an
   unfinished title has always been drawn in, so nothing about the page's
   palette changes; only the marks it used to be spelled out with are gone.

   `em`, so the dots stay in proportion to the title beside them at whatever
   size the panel draws a field's value. */
.fi-manual-gallery-title-ellipsis {
    color: var(--red-600, #dc2626);
    font-weight: 900;
    font-size: 1.35em;
    letter-spacing: 0.08em;
}

:where(.dark) .fi-manual-gallery-title-ellipsis {
    color: var(--red-400, #f87171);
}

/* ── تسک ۱۴۰۵/۰۶/۱۵/۰۱: «تاریخ بازی» زرد، و «رقابت | فصل» در یک ستون ──────── */

/* گالری-ظاهر-۰۰۴: the date each row is read by, in the agency's own yellow.

   `->color('warning')` on a table cell is not enough in this panel. «رنگ متن
   سلول جدول» is a managed standard and `StandardsStyle` prints its block after
   every stylesheet and outside Filament's own layer, so a cell carrying
   `fi-color-warning` still computes to that standard's near-black — measured in
   a browser rather than assumed.

   So the column is excepted by specificity, and the yellow is *named*: the
   colour Filament derives for a `warning` cell is two steps darker than the
   `--warning-400` the header date, the dashboard icons and everything else the
   panel calls «زرد استاندارد» are drawn in, so `var(--text)` would have given
   the date a brown of its own.

   Written same-element, because `->extraAttributes()` lands on the very element
   that carries `fi-ta-text-item fi-color` — a descendant selector matches
   nothing here while looking perfectly reasonable. */
.fi-ta-text-item.fi-color.fi-gallery-date-value {
    color: var(--warning-600, #d97706);
}

:where(.dark) .fi-ta-text-item.fi-color.fi-gallery-date-value {
    color: var(--warning-400, #fbbf24);
}

/* گالری-ظاهر-۰۰۵ … ۰۰۸: the competition and the season on one line.

   The name, a rule, then the season's badge and its year. The rule is drawn
   only when the markup carries one — a competition with no season registered is
   a name with nothing after it (گالری-ظاهر-۰۰۷) — so nothing here has to hide
   an empty divider.

   The gap is the divider's own margin rather than a `gap` on the row, because
   the season is `GallerySeasonBadge`'s own `inline-flex` and already spaces its
   badge from its year; one gap for the whole row would have moved those two
   apart as well. */
.fi-gallery-competition-season {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 100%;
}

.fi-gallery-competition-name {
    min-width: 0;
}

/* Quieter than either side of it: a rule that separates, not a third value.
   `em` so it stays in proportion to the names beside it. */
.fi-gallery-competition-divider {
    flex: none;
    margin-inline: 0.55em;
    opacity: 0.45;
    font-weight: 400;
    user-select: none;
}

/* «تعیین نشده» reads as the absence it is, exactly as the column's own
   placeholder does, rather than as the name of a competition. */
.fi-gallery-competition-missing {
    opacity: 0.6;
}

/* الزام گالری-ظاهر-۰۰۸: the room «فصل» used to take goes to «رقابت», which now
   has two things to say instead of one.

   The floor is the one گالری-جدول-۰۰۲ measured (۷٫۶۲۵rem) plus the width the
   season column was drawing in — its badge, its year and the cell's own padding
   — so the pair has the room the two columns had between them and the table is
   no wider than it was. Still a floor and still desktop-only, so the phone and
   the tablet behave exactly as before. */
@media (min-width: 1024px) {
    .fi-page-gallery-list .fi-ta-header-cell-competition\.name,
    .fi-page-gallery-list .fi-ta-cell-competition\.name {
        min-width: 13.5rem;
    }
}

/* ── تسک ۱۴۰۵/۰۶/۱۷/۰۱ — «بدون آواتار», said rather than left blank ────────── */

/*
 * عکاس-رابط-۰۱۹ تا ۰۲۲.
 *
 * A photographer with no picture used to be an empty grey disc, which reads
 * exactly like a picture that failed to load — the one reading the task says a
 * manager must never make. So the empty circle is now marked in red and the
 * words «بدون آواتار» are printed beside it.
 *
 * The state is FilePond's own: `:not(:has(.filepond--item))` is «this control
 * holds no file», and the words are its `labelIdle`, which the library removes
 * itself the instant a picture is chosen. Nothing of ours is kept in step with
 * anything, and nothing here touches adding, replacing or removing the picture
 * (عکاس-رابط-۰۲۲) — the click target is the circle itself, which is the
 * hopper, not the label these rules move.
 *
 * A photographer who *has* a picture is untouched: the disc is the picture, and
 * the label keeps the `font-size: 0` above (عکاس-رابط-۰۱۹).
 */
.fi-photographer-avatar .filepond--root:not(:has(.filepond--item)) .filepond--panel-root {
    background-color: var(--std-color-danger-50, #fef2f2);
    box-shadow: inset 0 0 0 2px var(--std-color-danger-500, #ef4444);
}

:where(.dark) .fi-photographer-avatar .filepond--root:not(:has(.filepond--item)) .filepond--panel-root {
    background-color: rgb(127 29 29 / 25%);
    box-shadow: inset 0 0 0 2px var(--std-color-danger-500, #ef4444);
}

/*
 * Beside the circle rather than inside it: «بدون آواتار» does not fit in a 4rem
 * disc at a size anybody would read, and the avatar now shares its row with
 * «نام و فامیل عکاس», so the space next to it is empty and free. `inset-inline-end`
 * — the panel is RTL, so that is the side the rest of the row is on.
 */
.fi-photographer-avatar .filepond--root:not(:has(.filepond--item)) .filepond--drop-label {
    overflow: visible;
}

.fi-photographer-avatar .filepond--root:not(:has(.filepond--item)) .filepond--drop-label label {
    position: absolute;
    inset-inline-end: calc(100% + 0.625rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

/*
 * The red itself has to be stated inside Filament's own layer, and this is the
 * one place in this stylesheet that does so.
 *
 * Filament paints that label `color: var(--gray-600) !important` — and
 * `var(--gray-400) !important` on a dark page — from a rule inside
 * `@layer components`. Cascade layers reverse for important declarations: an
 * important declaration in *any* layer outranks an important declaration in
 * none, whatever their selectors. So an ordinary rule here, `!important` or
 * not, could not change that colour; measured, not assumed — the words stayed
 * grey with `!important` on a four-class selector.
 *
 * Written into the same layer, the ordinary rules apply again: this selector is
 * four classes to Filament's two, so it wins on its own merit and the
 * `!important` is only there to meet theirs. It is scoped to the empty avatar of
 * this one form, so no other file upload in the panel is touched.
 */
@layer components {
    .fi-photographer-avatar .filepond--root:not(:has(.filepond--item)) .filepond--drop-label label {
        color: var(--std-color-danger-600, #dc2626) !important;
    }

    :where(.dark) .fi-photographer-avatar .filepond--root:not(:has(.filepond--item)) .filepond--drop-label label {
        color: var(--std-color-danger-400, #f87171) !important;
    }
}

/* ── عکاس-رابط-۰۳۳ — the photograph count, in green ──────────────────────── */

/*
 * «۳۱۸۱۹ عکس» in the record's heading, all of it green — the figure and its
 * word, which is what the task asks for and what a manager reads as one thing.
 *
 * Only the colour: the number is still `photos()->count()` on each render and
 * nothing about where it comes from moved (عکاس-رابط-۰۳۴). The size, the weight
 * and the spacing stay `.fi-photographer-header-stat`'s, so the pair of figures
 * still reads as one row; the class only overrides the grey.
 */
.fi-photographer-header-stat.fi-photographer-header-stat-photos {
    color: var(--std-color-success-600, #16a34a);
}

:where(.dark) .fi-photographer-header-stat.fi-photographer-header-stat-photos {
    color: var(--std-color-success-400, #4ade80);
}

/* ── عکاس-رابط-۰۳۱ و ۰۳۲ — the switches at the foot of «اطلاعات عکاس» ────── */

/*
 * The row is Filament's grid; all this does is stop the three long explanations
 * under the switches from pulling the columns to different heights, and keep
 * each one's own words with it when the row breaks on a narrow screen.
 */
.fi-photographer-switches {
    align-items: start;
}

/* ═════════════════════════════════════════════════════════════════════════
   تسک ۱۴۰۵/۰۶/۱۸/۰۱ — «اصلاح لیست و صفحه ویرایش «گالری‌های آمده از فتوامان»»
   ═════════════════════════════════════════════════════════════════════════ */

/* ── گالری-فتوامان-۰۱۰ … ۰۱۲ و ۰۶۳ … ۰۶۵ — the bar above the table ──────────
   ── تسک ۱۴۰۵/۰۶/۱۸/۰۳ — فیلتر-تکمیل-۰۰۳ … ۰۵۴, the same bar, turned over ─── */

/*
 * Read from the **left** edge of the page: «تنظیم ستون‌ها ← جستجو ← رقابت ←
 * رقابت مادر ← بازنشانی» (فیلتر-تکمیل-۰۰۴). That is the reverse of what the bar
 * showed, and بند ۰۰۳ says so in as many words.
 *
 * Two things make it, and neither is a `direction` trick — بند ۰۰۵ asks for the
 * arrangement to be true of the page as it really reads, right to left:
 *
 *  - the two selects are declared «رقابت مادر» then «رقابت» in `GalleriesTable`,
 *    so the document order *is* the order on screen and the tab order agrees;
 *  - here, the two blocks are placed around one another — the filters (which
 *    carry «بازنشانی» and the two selects) at the right-hand end, the toolbar
 *    (search and «تنظیم ستون‌ها») at the left.
 *
 * ── Why the bar used to scroll, and why its dropdowns were cut ──────────────
 *
 * The old rule gave `.fi-ta-filters-above-content-ctn` `overflow-x: auto`, to
 * let the bar slide sideways where four controls would not fit. It is the root
 * of three of the faults this task reports, and taking it out is the whole fix:
 *
 *  1. **A box that scrolls on one axis scrolls on both.** CSS computes an
 *     `overflow` of `visible` to `auto` when the other axis is not `visible`,
 *     so the container was `overflow-y: auto` as well — and an open select is
 *     384px tall inside a 96px bar, which is the vertical scrollbar the task's
 *     screenshots show down the side of the filter row (فیلتر-تکمیل-۰۱۳ … ۰۱۵).
 *  2. **A scroll container clips.** The dropdown is `position: absolute` and is
 *     painted at `z-index: 30`, well over the table's pinned header row at ۱۰ —
 *     it was never *behind* anything. It was **cut off** at the bar's own
 *     bottom edge, and what showed through below the cut was the table. That is
 *     فیلتر-تکمیل-۰۱۶ … ۰۲۱, and بند ۰۲۱ is right that raising a z-index would
 *     have changed nothing.
 *  3. **Two scrollbars at once.** The list inside the panel has a scrollbar of
 *     its own (the panel-wide standard, `agency-filters.css`), so the clipped
 *     panel and the list inside it made the nested pair of بند ۰۳۰ … ۰۳۲.
 *
 * Nothing is hidden to make this true (خط قرمز ۱ و ۲): the container simply
 * does not scroll any more, on either axis, because it is no longer asked to.
 * Where the five controls will not fit, the bar **wraps** onto a second row
 * (فیلتر-تکمیل-۰۵۳) — which is what بند ۶۵ wanted a sideways scroll for, done
 * in the way that does not clip what opens out of it.
 */
@media (min-width: 1024px) {
    .fi-page-photoaman-gallery-list .fi-ta-header-ctn {
        display: flex;
        flex-wrap: wrap;
        /* Every control on the bar is one line high now that the labels stand
           beside their fields, so they are centred on one another rather than
           hung from a baseline that no longer exists. */
        align-items: center;
        gap: 0.75rem;
    }

    /* The right-hand end: «بازنشانی», «رقابت مادر», «رقابت». */
    .fi-page-photoaman-gallery-list .fi-ta-filters-above-content-ctn {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* …and the left: the search box, then «تنظیم ستون‌ها» at the very edge. */
    .fi-page-photoaman-gallery-list .fi-ta-header-toolbar {
        order: 2;
        flex: 0 0 auto;
    }

    /* Above the table the filters have a heading, a frame and a background of
       their own; inside the bar they are only the fields. */
    .fi-page-photoaman-gallery-list .fi-ta-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        border: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .fi-page-photoaman-gallery-list .fi-ta-filters-heading {
        display: none;
    }

    /* «بازنشانی فیلترها» is drawn in the filters' own header, which Filament
       puts first — and first, on a right-to-left row, is the right-hand end,
       which is exactly where بند ۰۰۴ now wants it. So it is left where it
       falls and the fields follow it. */
    .fi-page-photoaman-gallery-list .fi-ta-filters-header,
    .fi-page-photoaman-gallery-list .fi-ta-filters-actions-ctn {
        flex: 0 0 auto;
        margin: 0;
    }

    /* The grid of filters, and the filter's own grid of fields. */
    .fi-page-photoaman-gallery-list .fi-ta-filters > .fi-sc.fi-grid,
    .fi-page-photoaman-gallery-list .fi-ta-filters .fi-sc-component > div > .fi-sc.fi-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    /* A flex row sizes its items to their content, and a select's content is a
       placeholder — so without a floor each one collapses to a column of single
       letters. The floor is the field's own; the cell takes its size from it. */
    .fi-page-photoaman-gallery-list .fi-ta-filters .fi-grid-col {
        flex: 0 0 auto;
    }
}

/* ── فیلتر-تکمیل-۰۰۶ … ۰۱۲ — the words beside the box, not over it ──────────
 *
 * `inlineLabel()` on both selects (`GalleriesTable`) is what moves them; this
 * only sizes the row it makes. Filament's inline label is a three-column grid
 * — one column of label to two of field — which is right on a form and wrong on
 * a bar, where «رقابت مادر» would then be given a third of the control's width.
 * Two columns instead: the label exactly as wide as its own words, the field
 * everything left.
 *
 * The gap is Filament's own (`column-gap` on `.fi-fo-field-has-inline-label`,
 * ۱rem), so بند ۰۰۹ — «فاصله … مطابق استاندارد رابط فعلی پنل … و عنوان به فیلد
 * نچسبد» — is answered by the panel and not by a figure invented here.
 *
 * The height the bar used to spend on a row of labels above a row of fields is
 * simply gone: one line instead of two (بند ۰۰۸ و ۰۱۱).
 */
.fi-page-photoaman-gallery-list .fi-ta-filters .fi-gallery-filter.fi-fo-field-has-inline-label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.fi-page-photoaman-gallery-list .fi-ta-filters .fi-gallery-filter .fi-fo-field-label-col {
    /* Filament pushes an inline label down to meet the top of a tall control;
       beside a one-line select there is nothing to meet. And the column is as
       tall as the select beside it, so the words inside it are centred on that
       select rather than hung from its top edge — «در همان خط» (بند ۰۰۶ و ۰۰۷)
       measured, which is what `fi-vertical-align-start` would otherwise cost. */
    display: flex;
    align-items: center;
    padding-top: 0;
}

.fi-page-photoaman-gallery-list .fi-ta-filters .fi-gallery-filter .fi-fo-field-label {
    white-space: nowrap;
}

.fi-page-photoaman-gallery-list .fi-ta-filters .fi-gallery-filter .fi-fo-field-content-col {
    /* Undo the `span 2` Filament writes for its own three-column grid: in a
       two-column one the field is simply the second column. */
    grid-column: auto;
}

/* ── فیلتر-تکمیل-۰۲۷ … ۰۲۹ — how wide each closed box is ────────────────────
 *
 * The floor is on the **field**, not on the wrapper, now that the wrapper also
 * holds the label: a floor on the wrapper would be spent on the words and the
 * box would be as cramped as before. بند ۰۲۸ names the four things that must
 * not be squeezed together inside it — the chosen title, the رقابت's crest, the
 * arrow and the × — and this is the room for them.
 *
 * «رقابت» is the wider of the two, because «لیگ برتر فوتبال امیدهای استان
 * تهران | فصل ۱۴۰۵» is the longest thing either of them has to say.
 */
.fi-page-photoaman-gallery-list .fi-gallery-filter .fi-fo-field-content-col {
    min-width: 0;
}

.fi-page-photoaman-gallery-list .fi-gallery-filter-parent .fi-fo-field-content-col {
    min-width: 15rem;
}

.fi-page-photoaman-gallery-list .fi-gallery-filter-competition .fi-fo-field-content-col {
    min-width: 21rem;
}

/*
 * فیلتر-تکمیل-۰۵۲ و ۰۵۳ — and the two floors give way before the row does.
 *
 * Between ۱۰۲۴ and ۱۲۸۰ pixels the five controls at their full width come to
 * more than the page column holds, and the bar would wrap «رقابت مادر» onto a
 * second line. بند ۰۵۲ asks for one line on a desktop and بند ۰۵۳ allows a
 * rearrangement only where they genuinely do not fit — so what gives way first
 * is the room inside the two boxes, not the row.
 *
 * Narrower, not narrow: «لیگ برتر فوتبال امیدهای استان تهران» still reads whole
 * in the closed box, and the open list is not sized by the box at all any more.
 * Below ۱۰۲۴ the whole one-line layout is off and Filament stacks the bar as it
 * stacks every other one, which is بند ۰۵۳ proper.
 *
 * The ceiling moved from ۱۲۸۰ to ۱۵۳۶ when the closing audit of تسک
 * ۱۴۰۵/۰۷/۱۱/۳۹ put a third control on this bar — «گالری‌های منتشرشده فاقد
 * موقعیت», which is where the galleries it counts actually live. At ۱۲۸۰ the
 * five controls plus the new box come to ۱۷۴ pixels more than the column holds,
 * and the rule بند ۰۵۲ wrote down is that the room inside the boxes gives way
 * before the row does. Nothing else about the two floors changed: they are the
 * same two figures, over a wider band of screens.
 */
@media (min-width: 1024px) and (max-width: 1535px) {
    .fi-page-photoaman-gallery-list .fi-gallery-filter-parent .fi-fo-field-content-col {
        min-width: 11rem;
    }

    .fi-page-photoaman-gallery-list .fi-gallery-filter-competition .fi-fo-field-content-col {
        min-width: 15rem;
    }
}

/* ── فیلتر-تکمیل-۰۴۶ … ۰۴۸ — «بازنشانی فیلترها» ─────────────────────────────
 *
 * بند ۰۴۷ asks whether it need be shown at all while nothing is filtered, and
 * the answer is no: with no رقابت and no رقابت مادر chosen there is nothing for
 * it to undo, and each select carries its own × for the one thing it *can* undo
 * (گالری-فتوامان-۰۳۳).
 *
 * «Nothing chosen» is read off the page rather than guessed at: Filament draws
 * `.fi-select-input-value-remove-btn` — that × — only inside a select that is
 * holding an answer. So the link is there the moment either filter is on and
 * gone the moment both are off, and it is `display: none`, so it leaves the tab
 * order with it rather than lurking invisibly in it.
 *
 * Kept compact when it is shown (بند ۰۴۸): it is Filament's own text link, one
 * line high like every other control on the bar, and centred with them by the
 * `align-items` above.
 */
.fi-page-photoaman-gallery-list
    .fi-ta-filters:not(:has(.fi-select-input-value-remove-btn))
    .fi-ta-filters-header {
    display: none;
}

/* An option of either list is one line — a رقابت that wraps is a رقابت a
   manager has to read twice. */
.fi-page-photoaman-gallery-list .fi-fo-select-option-label,
.fi-page-photoaman-gallery-list .fi-team-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* ── گالری-فتوامان-۰۳۵ … ۰۳۸ — «رقابت», half as wide again ────────────────── */

/*
 * The column is sized by what is in it, so a wider cut is what widens it: the
 * text is cut at ۵۰ characters instead of ۳۳ (`GalleriesTable`), and this floor
 * carries the widening through even on a screenful of short names — ۱۶٫۸۷۵rem
 * × ۱٫۵.
 *
 * A floor and not a fixed width (بند ۳۷): nothing else is squeezed, the table
 * still lays itself out, and below ۱۰۲۴px the rule is dropped altogether so the
 * phone and tablet behaviour is exactly what it was (بند ۳۸). It overrides the
 * ×۱٫۳۳ floor written for فتوامان-لیست-۰۰۳ above, being the later rule of equal
 * weight.
 */
@media (min-width: 1024px) {
    .fi-page-photoaman-gallery-list .fi-ta-header-cell-competition\.name,
    .fi-page-photoaman-gallery-list .fi-ta-cell-competition\.name {
        min-width: 25.3125rem; /* ۱۶٫۸۷۵rem × ۱٫۵ */
    }
}

/* ── گالری-فتوامان-۰۴۳ … ۰۴۹، سپس تسک ۱۴۰۵/۰۶/۲۸/۰۲ بخش چهارم ────── */

/*
 * «اطلاعات گالری (از فتوامان)» — a block of information, reversed against
 * the page it sits on so it cannot be read as part of the form.
 *
 * ۱۴۰۵/۰۶/۱۸ asked for a white card in both themes, which answered the
 * night — white against a near-black page — and left the day a white card on a
 * white page, told apart by a hairline. بند ۱۰ of ۲۸/۰۲ names that: in the
 * light theme the card is to be dark and everything in it light, and the night,
 * which already works, is not to be redesigned. So the card is simply the
 * opposite of the ground, exactly as «توضیحات گالری» above it now is.
 *
 * **Every page that draws this box**, not one of them. The box is one component
 * placed by three forms — «گالری‌های آمده از فتوامان», «گالری‌های
 * آژانس» and «گالری بازی‌های رسمی» — and بند ۴ asks for the separation
 * wherever the source information is shown. The colours are therefore written
 * on the box's own class, with no page in the selector; the pinning above stays
 * on the one page that pins it.
 *
 * Only the surface and the ink. The box keeps its place, its pinning, its
 * height, its logo, its heading and every fact inside it (معیار ۱۱ و ۱۳).
 *
 * The heading and the body text are «متن کادر هشدار», a role
 * «استانداردسازی نمای پنل» owns, so their colour is not written here at
 * all: it is an exception row on that standard, printed after the shared rule
 * (see the ۱۴۰۵/۰۶/۲۸ migration). A declaration here would be the second
 * source استاندارد-۰۶۶ forbids.
 */
.fi-photoaman-guide {
    background-color: var(--std-color-gray-900, #111827);
    border-color: var(--std-color-gray-700, #374151);
}

:where(.dark) .fi-photoaman-guide {
    background-color: var(--std-color-white, #ffffff);
    border-color: var(--std-color-gray-300, #d1d5db);
}

/* بند ۴۶ و معیار ۱۱: the ordinary segments of the reading, each legible on
   the ground its own theme gives them. */
.fi-photoaman-guide .fi-photoaman-guide-a {
    color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-photoaman-guide .fi-photoaman-guide-a {
    color: var(--std-color-gray-900, #111827);
}

/* بند ۴۷ … ۴۹: the green segments stay green, and stay the *same* segments —
   نقش معنایی رنگ سبز تغییر نکرده. Only the shade moves with the ground:
   the ۴۰۰ that is legible on a near-black card, the ۷۰۰ that is legible on
   white. */
.fi-photoaman-guide .fi-photoaman-guide-b {
    color: var(--std-color-success-400, #4ade80);
}

:where(.dark) .fi-photoaman-guide .fi-photoaman-guide-b {
    color: var(--std-color-success-700, #15803d);
}

/* …and the sentence a gallery with no photoaman reading shows instead. */
.fi-photoaman-guide .fi-photoaman-guide-missing {
    color: var(--std-color-gray-400, #9ca3af);
}

:where(.dark) .fi-photoaman-guide .fi-photoaman-guide-missing {
    color: var(--std-color-gray-600, #4b5563);
}

/* ══════════════════════════════════════════════════════════════════════════
   تسک ۱۴۰۵/۰۶/۱۸/۰۵ — «آمار سازندگان گالری» و «تاریخ رقابت کنار عنوان فیلد»
   ══════════════════════════════════════════════════════════════════════════ */

/* ── گالری-کارمند-۰۰۱ … ۰۰۶ و ۰۱۵ … ۰۱۷: the row of employee portraits ────── */

/* On the toolbar row of «گالری‌ها», at its right-hand end — which in a
   right-to-left panel is where `TOOLBAR_START` puts it, directly under the
   page's own heading (بند ۰۰۱ و ۰۰۴).

   `margin-inline-end: auto` is what keeps it there: the toolbar is a flex row
   and everything else on it — search, «تنظیم ستون‌ها» — is pushed to the far
   side rather than lining up beside the portraits (بند ۰۱۵).

   The whole block scrolls sideways *within itself* once there are more
   employees than the row can hold, and never gives the page a scrollbar of its
   own (بند ۰۱۶ و آزمون-۰۱۲): `min-width: 0` lets a flex child be narrower than
   its contents, and `overflow-x: auto` then belongs to this box alone. */
.fi-gallery-creator-stats {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline-end: auto;
    /*
     * بند ۰۰۴: «اولین کارمند از سمت راست دقیقاً در محدوده زیر عنوان صفحه شروع
     * شود». The toolbar keeps a gutter of its own on that side — the same one
     * the search box sits behind at the other end — which left the first
     * portrait ۲۴ پیکسل short of where the heading above it starts. This gives
     * exactly that gutter back, written as the panel's own spacing step rather
     * than as a pixel figure, so the two edges line up and stay lined up if the
     * panel's spacing ever moves.
     */
    margin-inline-start: calc(var(--spacing) * -6);
    padding-block: calc(var(--spacing) * 1);
    scrollbar-width: thin;
}

/* One employee: the portrait and, under it, the number of galleries — read
   downwards, in that order (بند ۰۰۳, as تسک ۱۴۰۵/۰۶/۲۰/۰۱ leaves it: the name
   that used to stand between them is gone, and nothing took its place). */
.fi-gallery-creator-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: calc(var(--spacing) * 0.5);
    padding-inline: calc(var(--spacing) * 2.5);
    /*
     * بند ۰۰۶: a thin yellow rule between one employee and the next, drawn as a
     * leading border on every unit *after* the first — so there is never a
     * stray one past the last, and never one before the first. The colour is
     * the panel's own standard yellow, taken as a token rather than written as
     * a code here (بند ۰۰۶: «هماهنگ با زرد استاندارد پنل»).
     */
    border-inline-start: 1px solid var(--std-color-warning-500, #f59e0b);
}

.fi-gallery-creator-stat:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

/* The employee's own portrait, or the panel's stand-in for one who uploaded
   none — whichever `filament()->getUserAvatarUrl()` returns (بند ۰۲۰ و ۰۲۱). */
.fi-gallery-creator-stat-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* The number of galleries, directly under the portrait (تسک ۱۴۰۵/۰۶/۲۰/۰۱).
   Tabular figures so a column of them lines up rather than wandering. */
.fi-gallery-creator-stat-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* بند ۰۱۷: on a phone and a tablet the row is the same row — the portrait and
   the number are both still there — only closer together, so the search line
   beside it is not broken. */
@media (max-width: 1023px) {
    .fi-gallery-creator-stat {
        padding-inline: calc(var(--spacing) * 1.5);
    }
}

/* ── گالری-رقابت-۰۰۲ … ۰۱۲: «رقابت ▏ تاریخ شروع — تاریخ پایان» ─────────────── */

/* The label of a gallery form's «رقابت» field, once a competition is chosen.
   One line where there is room for one, wrapping rather than overflowing where
   there is not — so it can never lie over the field beside it or push the form
   off the screen (آزمون-۰۱۱). */
.fi-competition-dates {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 calc(var(--spacing) * 1.5);
}

/* بند ۰۰۲: a white upright rule between the word «رقابت» and the dates. An
   element of its own rather than a border, so the space either side of it is
   the same and no rule that draws borders on labels can take it away. */
.fi-competition-dates-rule {
    color: var(--std-color-color-white, #ffffff);
    font-weight: 400;
}

/* بند ۰۰۳ و ۰۰۹: the start date — and the «؟» that stands in for one nobody
   entered — in the panel's own «سبز موفقیت».

   Two classes deep on purpose. «عنوان فیلد» is a colour the panel manages and
   its block is printed after every stylesheet, so a rule of equal weight would
   lose to it; these are read inside `.fi-fo-field-label-content`, which makes
   them more specific than the standard rather than merely later than it. */
.fi-fo-field-label-content .fi-competition-dates-start {
    color: var(--std-color-success-400, #4ade80);
}

/* بند ۰۰۴ و ۰۱۰: and the end date, with its own «؟», in «قرمز خطا». */
.fi-fo-field-label-content .fi-competition-dates-end {
    color: var(--std-color-danger-400, #f87171);
}

/* The dash between them belongs to neither date, so it keeps the label's own
   colour rather than borrowing one of the two. */
.fi-competition-dates-dash {
    opacity: 0.7;
}

/* ── پنجره راهنمای ساخت گالری ─────────────────────────────────────────────────

   بند ۶ of تسک ۱۴۰۵/۰۶/۲۱/۰۲/۰۸. The window itself is the panel's own modal —
   centred, dark, with a half-transparent cover behind it — so nothing about any
   of that is decided here. Only the reading of the text is: an administrator may
   write as much as the guide needs, and a long guide must be read inside the
   window rather than making it taller than the screen. Its own line breaks are
   kept, because they are how a guide of several paragraphs is written.

   No size and no colour: «توضیح فیلد» and every other reading role belongs to
   «استانداردسازی نمای پنل», and this box inherits the window's own. */
.fi-gallery-guide-window-body {
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-line;
    line-height: 1.9;
}

/* ── تسک ۱۴۰۵/۰۶/۲۱/۰۲/۲۶ ─────────────────────────────────────────────────────

   بند ۱ و ۲: «تیم اول» روبه‌روی «گل زده تیم اول» و «تیم دوم» روبه‌روی «گل زده تیم
   دوم».

   هر ردیفِ بازی حالا یک گرید دوستونی مستقل است. محتوای هر سلول از بالای همان
   سلول شروع می‌شود، پس کادر هر فیلد دقیقاً به اندازهٔ چیزی که بالای آن نوشته شده
   پایین می‌آید؛ به همین دلیل هر دو نیمهٔ ردیف یک خط توضیح بالای کادر دارند، با
   یک نقش و یک اندازه و یک فاصله.

   یک‌خطی یا دوخطی‌شدن این توضیح‌ها نباید هم‌ترازی را به هم بزند، پس در عرض‌هایی
   که ردیف دوستونی است ارتفاع این نوار برابر دو خط گرفته می‌شود و متن به انتهای
   نوار — درست بالای کادر — می‌چسبد. زیر md ردیف یک‌ستونی می‌شود و دو فیلد زیر هم
   می‌نشینند، پس چیزی برای هم‌ترازکردن نمانده و نوار به اندازهٔ متن خودش است.

   هیچ رنگ و اندازه‌ای اینجا تعیین نمی‌شود؛ هر دو از آنِ «استانداردسازی نمای پنل»
   است و از همان‌جا می‌آید. */
@media (min-width: 48rem) {
    .fi-gallery-fixture-row .fi-gallery-team-hint {
        display: flex;
        align-items: flex-end;
        min-height: 2.7em;
    }
}

/* بند ۷: ستون‌ها از بالا شروع می‌کنند، تا نیمهٔ کوتاه‌ترِ ردیف وسط‌چین نشود و
   کادرش نسبت به نیمهٔ دیگر پایین بیفتد. */
.fi-gallery-fixture-row {
    align-items: start;
}

/* ══════════════════════════════════════════════════════════════════════════
   تسک ۱۴۰۵/۰۶/۲۸/۰۲ — «اصلاحات تکمیلی الگوهای عنوان گالری»
   ══════════════════════════════════════════════════════════════════════════ */

/* ── بخش اول، بند ۱: «فیلدهای مرتبط» as a column of the list ───────────────

   Nine marks and nine names to a cell, and the task asks for them «جمع‌وجور،
   خوانا و در صورت نیاز چندخطی» without «به‌هم‌ریختگی غیرضروری عرض جدول». Two
   columns of five rows is what that is: one long line of nine would be the
   widest thing in the column, and this table lays itself out automatically, so
   the widest thing in a column *is* the column.

   The cap goes on what is inside the cell rather than on the `<td>`, for the
   same reason «راهنمای انتخاب الگوی عنوان» above caps its own text: an
   automatic layout sizes a column to its content and ignores a `max-width`
   written on the cell. The heading is capped with it, or a long column name
   would widen the column straight back. */
.fi-template-related-form-fields {
    /* `inline-grid`, so the block is as wide as the two columns need and the
       cell's own centring then centres the block rather than stretching it. */
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem 0.75rem;
    max-width: 21rem;
    /* The names inside keep the panel's own direction, whatever the cell around
       them is centred to. */
    text-align: right;
}

.fi-ta-header-cell-template-related-fields > * {
    max-width: 21rem;
}

/* One field: its mark, then its name, on one line that never breaks between
   the two. */
.fi-template-related-form-field {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    line-height: 1.5;
    white-space: nowrap;
}

.fi-template-related-form-field-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The mark is the size a small table icon is, not the size a heading icon is:
   nine of them to a cell, on every row of the list. */
.fi-template-related-form-field-mark {
    flex: none;
    width: 1rem;
    height: 1rem;
}

/* بند ۱، «نحوه نمایش وضعیت»: روشن سبز، خاموش قرمز — the panel's own two
   colours, read from «استانداردسازی نمای پنل» by key rather than written here,
   so a palette changed there moves these marks with it. Only the mark is
   coloured; the name beside it keeps the colour every other word in the table
   has, or nine green words a row would drown the columns around them. */
.fi-template-related-form-field-on .fi-template-related-form-field-mark {
    color: var(--std-color-success-600, #16a34a);
}

.fi-template-related-form-field-off .fi-template-related-form-field-mark {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-template-related-form-field-on .fi-template-related-form-field-mark {
    color: var(--std-color-success-400, #4ade80);
}

:where(.dark) .fi-template-related-form-field-off .fi-template-related-form-field-mark {
    color: var(--std-color-danger-400, #f87171);
}

/* ── بند ۱۵: ستون «وضعیت فیلتر تیم‌ها» ───────────────────────────────────────

   دو وضعیت زیر هم، هرکدام یک علامت و یک نام: «فیلتر تیم اول» و «فیلتر تیم دوم».
   همان دو علامت و همان دو رنگ ستون «فیلدهای مرتبط» کنار خودش، چون هر دو یک چیز
   می‌گویند: روشن یا خاموش بودن یک تنظیم الگو. */
.fi-template-team-filters {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
    max-width: 11rem;
    text-align: right;
}

.fi-ta-header-cell-template-team-filters > * {
    max-width: 11rem;
}

.fi-template-team-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    line-height: 1.5;
    white-space: nowrap;
}

.fi-template-team-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-template-team-filter-mark {
    flex: none;
    width: 1rem;
    height: 1rem;
}

/* سبز = پیش‌فرض الگو روشن است، قرمز = پیش‌فرض الگو خاموش است (بند ۱۵). رنگ‌ها
   از «استانداردسازی نمای پنل» خوانده می‌شوند، نه اینجا نوشته. */
.fi-template-team-filter-on .fi-template-team-filter-mark {
    color: var(--std-color-success-600, #16a34a);
}

.fi-template-team-filter-off .fi-template-team-filter-mark {
    color: var(--std-color-danger-600, #dc2626);
}

:where(.dark) .fi-template-team-filter-on .fi-template-team-filter-mark {
    color: var(--std-color-success-400, #4ade80);
}

:where(.dark) .fi-template-team-filter-off .fi-template-team-filter-mark {
    color: var(--std-color-danger-400, #f87171);
}

/* ── کارمند-۰۴: «نام» و «نقش‌ها» در فهرست کارمندان ──────────────────────────
   Both columns already asked Filament to centre them, and the text obeys. What
   this adds is the *content* of the cell being centred as one block rather than
   each line of it being centred on its own: a row holding three role badges
   keeps them together in the middle of the column, and keeps them there when
   they wrap onto a second line, which is exactly what the task asks for
   («مجموعه برچسب‌های نقش به‌صورت یک واحد نسبت به عرض ستون وسط‌چین»).

   The heading carries the same class, so a column's title and the thing under
   it share an axis.

   Nothing here touches a size, a colour or the wording of a badge — those are
   the standards block's, and it is printed after this file. The gap is the one
   the inline badges already had, written down now that they are flex children
   and the whitespace between them no longer shows. */
.fi-employee-cell-centred,
.fi-employee-cell-centred .fi-ta-col,
.fi-employee-cell-centred .fi-ta-header-cell-sort-btn {
    text-align: center;
    justify-content: center;
}

.fi-employee-cell-centred .fi-ta-text {
    justify-content: center;
    text-align: center;
}

.fi-employee-cell-centred .fi-ta-text-has-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

/* ══ تسک ۱۴۰۵/۰۷/۰۸/۳۶ ═════════════════════════════════════════════════════ */

/* ── بند ۵: پنجرهٔ روی آواتار سازنده ──────────────────────────────────────── */

/*
 * «وقتی Mouse روی آواتار هر سازنده قرار می‌گیرد، یک Tooltip/Popup خوانا نمایش
 * داده شود» — نام کارمند و تفکیک تعداد گالری‌هایش.
 *
 * سه خط است، پس `title` جوابگو نبود: خود پنل هم همه‌جا از tooltip خودش استفاده
 * می‌کند و این همان است، فقط با سه سطر به‌جای یک عبارت. سطرها بلوک‌اند تا زیر هم
 * بنشینند و در پنل راست‌به‌چپ از راست خوانده شوند؛ نام پررنگ‌تر از دو سطر زیرش
 * است، چون آن دو دربارهٔ اوست.
 *
 * هیچ رنگی اینجا نوشته نشده: قاب و زمینهٔ پنجره مال خود tippy است و با theme
 * پنل می‌آید.
 */
.fi-gallery-creator-tip-name,
.fi-gallery-creator-tip-line {
    display: block;
    text-align: right;
    direction: rtl;
    white-space: nowrap;
}

.fi-gallery-creator-tip-name {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.fi-gallery-creator-tip-line {
    font-weight: 400;
}

/* ── بند ۸: رنگ‌بندی یکی‌درمیان ردیف‌های جدول گالری‌ها ─────────────────────── */

/*
 * «ردیف‌های جدول اصلی گالری‌ها به‌صورت یکی‌درمیان دارای رنگ پس‌زمینه متفاوت
 * باشند… رنگ ردیف دوم نباید شبیه نوار Header عنوان ستون‌های جدول باشد.»
 *
 * در حالت تیرهٔ آژانس، نوار عنوان ستون‌ها روی `--std-color-gray-900` کشیده
 * می‌شود و ردیف‌ها روی زمینهٔ خود جدول. پس سه سطح لازم است و سه سطح هست:
 *
 *   نوار عنوان  →  تیره‌ترین (زمینهٔ خود فیلامنت، دست‌نخورده)
 *   ردیف فرد    →  زمینهٔ جدول (دست‌نخورده)
 *   ردیف زوج    →  یک پله روشن‌تر از زمینهٔ جدول، و روشن‌تر از نوار عنوان
 *
 * پلهٔ ردیف زوج از `--std-color-gray-700` با شفافیت کم ساخته شده، نه از
 * `gray-900` که رنگ نوار عنوان است — «محسوس ولی ملایم» و از بالای جدول قابل
 * تفکیک. در حالت روشن همان شکل با `gray-50` نوشته می‌شود.
 *
 * Hover همچنان برنده است (قاعدهٔ بعدی): ردیفی که زیر نشانگر است باید همچنان
 * همانی باشد که به چشم می‌آید.
 */
.fi-page-gallery-list .fi-ta-row:nth-child(even) {
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-page-gallery-list .fi-ta-row:nth-child(even) {
    background-color: color-mix(in oklab, var(--std-color-gray-700, #374151) 40%, transparent);
}

/*
 * «Hover فعلی ردیف‌ها نیز حفظ شود و همچنان قابل تشخیص باشد» — فیلامنت خودش
 * روی hover یک زمینه می‌گذارد، ولی قاعدهٔ یکی‌درمیانِ بالا با همان وزن و
 * دیرتر چاپ می‌شود و ردیف زوج را زیر نشانگر بی‌تغییر می‌گذاشت. این دو خط
 * همان زمینهٔ hover خود پنل را برمی‌گرداند و روی هر دو نوع ردیف یکی است.
 */
.fi-page-gallery-list .fi-ta-row:nth-child(even):hover,
.fi-page-gallery-list .fi-ta-row:hover {
    background-color: var(--std-color-gray-100, #f3f4f6);
}

:where(.dark) .fi-page-gallery-list .fi-ta-row:nth-child(even):hover,
:where(.dark) .fi-page-gallery-list .fi-ta-row:hover {
    background-color: color-mix(in oklab, var(--std-color-gray-700, #374151) 75%, transparent);
}

/* ── تسک ۱۴۰۵/۰۷/۱۱/۴۱، بند ۱ و ۲: «گالری‌های عکاس» ستون نیست ────────────── */

/*
 * ستونِ «گالری‌های عکاس» برداشته شد و عددش زیرِ آواتارِ خودِ عکاس رفت، پس
 * قاعده‌های این فایل برای آن ستون — ارقامِ هم‌عرض، و خنثی‌ماندنِ خط تیره —
 * اینجا نیستند: چیزی برای رنگ‌کردن نمانده بود و یک قاعدهٔ مرده، جای دومی است
 * که روزی کسی دنبالش می‌گردد. ردیفِ استثنای سبزِ آن ستون هم در مهاجرتِ
 * `2026_10_03_120000_the_photographers_galleries_are_counted_under_their_face.php`
 * برداشته می‌شود.
 *
 * عددِ تازه داخلِ نمای خودِ ستون «عکاسان» کشیده می‌شود و رنگ و اندازه‌اش
 * همان‌جاست، کنار آواتاری که زیرش می‌نشیند.
 */

/* ── تسک ۱۴۰۵/۰۷/۱۰/۳۸، بند ۹: «عرض خودکار ستون رقابت» ───────────────────── */

/*
 * The complaint was that a competition's name is broken across lines for no
 * reason other than the column being narrow. Two things decide that, and both
 * are answered without a fixed width anywhere:
 *
 *   - the cut. A `TextColumn` is sized by its `limit()`, because the table lays
 *     itself out from its content, so the real fix is in the PHP:
 *     `COMPETITION_LIMIT` went from ۳۳ to ۴۰ characters. Measured rather than
 *     guessed — the longest competition name any gallery in the archive belongs
 *     to is ۳۶ characters, and ۳۷ of the ۴۵ competitions in use were over ۳۳. At
 *     ۴۰ every one of them is shown whole, and the figure is still a bound: the
 *     column cannot grow past it however long a name arrives tomorrow.
 *
 *   - the wrap. Given the room, the name still has to be allowed to use it in
 *     one line. `nowrap` on the name alone — not on the cell — so the season's
 *     badge beside it keeps its own behaviour, and an ellipsis rather than an
 *     overflow if a page ever happens to be narrower than its longest name.
 *
 * From the desktop width up only. Below it the column behaves exactly as it did:
 * the phone and the tablet wrap, the table's horizontal scroll is untouched, and
 * no column's order or share of the row is changed — these are floors and a
 * line-break rule, not widths taken from the columns beside them.
 */
@media (min-width: 1024px) {
    .fi-page-gallery-list .fi-gallery-competition-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ۴۰ characters of a Persian competition name, plus the season's badge and
       the cell's own padding — the floor that carries the extra room through a
       screenful of short names, raised from ۱۳٫۵rem by the same ratio as the cut
       (۳۳ → ۴۰). */
    .fi-page-gallery-list .fi-ta-header-cell-competition\.name,
    .fi-page-gallery-list .fi-ta-cell-competition\.name {
        min-width: 16.375rem;
    }
}

/*
 * بند ۱۱: «به‌روزرسانی» holds a date and a clock, and they belong on one line —
 * «۹ مهر ۱۴۰۵ | ۱۴:۳۵» broken after the divider reads as two separate facts.
 * The column is narrow enough that nothing else is paid for it.
 */
@media (min-width: 1024px) {
    .fi-page-gallery-list .fi-ta-header-cell-last-activity-at,
    .fi-page-gallery-list .fi-ta-cell-last-activity-at {
        min-width: 11rem;
    }

    .fi-page-gallery-list .fi-gallery-last-activity-value {
        white-space: nowrap;
    }
}

/* ── بند ۲۱ of تسک ۱۴۰۵/۰۷/۱۱/۳۹: the sort toggle beside the search box ───── */

/* One button, not two: it stands on the toolbar row the search field is on, in
   the shape of the controls already there — the same height, the same corner
   radius and the same ring — so it reads as one of them rather than as
   something bolted on.

   `--std-color-*` throughout: a raw colour in a panel stylesheet fails the
   panel-standards survey, and these are the tokens that survey publishes. */
.fi-gallery-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding-inline: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    background-color: var(--std-color-white);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--std-color-gray-700);
    white-space: nowrap;
    cursor: pointer;
}

.dark .fi-gallery-sort-toggle {
    border-color: var(--std-color-gray-600);
    background-color: var(--std-color-gray-900);
    color: var(--std-color-gray-200);
}

.fi-gallery-sort-toggle:hover {
    border-color: var(--std-color-warning-500);
    color: var(--std-color-warning-600);
}

.dark .fi-gallery-sort-toggle:hover {
    color: var(--std-color-warning-400);
}

/* While the list really is ordered by «آخرین به‌روزرسانی» the button is lit, so
   a glance at the toolbar says which of the two orders is in force — the label
   alone cannot, because it deliberately names the *next* action. */
.fi-gallery-sort-toggle[data-sort-mode='activity'] {
    border-color: var(--std-color-warning-500);
    background-color: var(--std-color-mix-warning-400-10);
    color: var(--std-color-warning-600);
}

.dark .fi-gallery-sort-toggle[data-sort-mode='activity'] {
    color: var(--std-color-warning-400);
}

.fi-gallery-sort-toggle-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.fi-gallery-sort-toggle:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ── بند ۱۲ از تسک ۱۴۰۵/۰۷/۱۱/۰۲: هدر شخصی عکاس محدود ─────────────────────── */

/* «تعداد گالری‌های من: ۲۷ | تعداد عکس‌های من: ۳۵۴» — همان خط آماری هدر، با دو
   آمار به‌جای شش آمار عمومی. ساختار، فاصله‌ها، جداکنندهٔ عمودی و چیدمان ستونی
   (عنوان بالا، عدد زیرش) همان قاعده‌های بالاست و چیزی اینجا تکرار نشده؛ فقط
   رنگ عنوان‌ها.

   رنگ روی «عنوان» می‌نشیند و نه روی کل آمار: اندازه و رنگ «عدد آمار هدر» یک
   استاندارد مدیریت‌شدهٔ پنل است و بلوک استانداردها آخر از همه چاپ می‌شود، پس عدد
   باید همان‌جا که هست بماند و فقط واژه‌ها سبز شوند. سه کلاس به‌علاوهٔ والد، تا
   قاعده با وزن بیشتری از بلوک استانداردها نوشته شود.

   سبز از توکن‌های «رنگ‌های استاندارد» خوانده می‌شود — همان سبزی که «گالری
   بالیگپا» روی همین خط دارد — نه از یک کد رنگ تازه. */
.fi-gallery-stats-heading .fi-gallery-stats-heading-stat.fi-gallery-stat-mine .fi-gallery-stats-heading-label {
    color: var(--std-color-success-400, #4ade80);
}