/*
 * 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;
    /*
     * Dark on purpose. The task asks for white and green segments, and white
     * text needs a dark ground to be legible — in the light theme as much as in
     * the dark one, so the box carries its own.
     */
    background-color: var(--gray-900);
    border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    /*
     * 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. */
.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(--gray-50, #f9fafb);
    box-shadow: inset 0 0 0 1px rgb(3 7 18 / 0.1);
}

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

/* MANUAL-GALLERY-DESCRIPTION-401, kept: what it says is written in the panel's
   own yellow, so the line the system assembled is told apart at a glance from
   the fields the operator answered. The label above it keeps the ordinary
   colour — only the value is yellow. */
.fi-manual-gallery-description-text {
    margin: 0;
    line-height: 1.75;
    -webkit-text-fill-color: var(--warning-500, #f59e0b);
}

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

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

/* ── MANUAL-GALLERY-TITLE-403 … ۴۰۵: the title, and the gaps left in it ────── */

/* «اصلاح عنوان گالری» is a line of running text with boxes in it rather than
   one box: the pattern's own words are words, and only the places it left as
   «ایکس» can be typed in. */
.fi-manual-gallery-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    line-height: 2;
}

/* The wrapper each segment is drawn in exists for the loop's sake, not the
   layout's — the words and the boxes are the line's own children. */
.fi-manual-gallery-title-part {
    display: contents;
}

/* 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(--gray-950, #030712);
    white-space: pre-wrap;
}

:where(.dark) .fi-manual-gallery-title-fixed {
    color: #fff;
}

/* A gap: a box drawn into the line itself, no wider than what it holds. Once it
   is answered it reads exactly as the words around it (بند ۴۰۵). */
.fi-manual-gallery-title-gap {
    min-width: 5ch;
    padding: 0 0.25rem;
    border: 0;
    border-bottom: 2px dashed var(--gray-300, #d1d5db);
    border-radius: 0;
    background-color: transparent;
    color: var(--gray-950, #030712);
    font: inherit;
    text-align: center;
}

:where(.dark) .fi-manual-gallery-title-gap {
    border-bottom-color: var(--gray-600, #4b5563);
    color: #fff;
}

.fi-manual-gallery-title-gap:focus {
    outline: none;
    border-bottom-color: var(--primary-500, #f59e0b);
}

/* …and until it is answered it is red, which is the whole signal: red is a
   place nobody has written yet (بند ۴۰۳ و ۴۰۵). */
.fi-manual-gallery-title-gap-unanswered {
    border-bottom-color: var(--red-500, #ef4444);
    color: var(--red-600, #dc2626);
    font-weight: 600;
}

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

.fi-manual-gallery-title-gap-unanswered::placeholder {
    color: var(--red-600, #dc2626);
    opacity: 0.6;
}

/* ── 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;
}

/* ── گالری-جدول-۰۰۱ تا ۰۰۳: «عنوان گالری» 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 × ۱٫۳۳ */
    }
}

/* ── فتوامان-لیست-۰۰۱ تا ۰۰۳: «گالری‌های آمده از فتوامان», 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 × ۱٫۳۳ */
    }
}

/* ── 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;
}

/* GALLERY-EDIT-003: the gallery's date, beside the photographers. Yellow and
   bold, and exactly their size — it carries the same badge class, so the size
   is one declaration and cannot drift from theirs. */
.fi-gallery-header-badge-date {
    padding-inline: 0;
}

/* ── 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%;
}

/* 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 «گالری» 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;
}

.fi-gallery-cover-row > .fi-fo-field-label-col > .fi-fo-field-label-ctn > .fi-sc {
    display: grid;
    grid-template-columns: 1fr 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. */
.fi-gallery-header-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--gray-300, #d1d5db);
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-500, #6b7280);
    font-size: 0.8125rem;
}

:where(.dark) .fi-gallery-header-cover-empty {
    border-color: var(--gray-600, #4b5563);
    background: var(--gray-800, #1f2937);
    color: var(--gray-400, #9ca3af);
}

/* 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. */
.fi-page-upload-by-code .fi-gallery-header-cover-empty,
:where(.dark) .fi-page-upload-by-code .fi-gallery-header-cover-empty {
    border-color: var(--std-color-hex-d4d4d0);
    background: #eeeeea;
    color: #5b6169;
}

/* ── «بارگذاری عکس»: 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%;
}

/* 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 both. */
    .fi-upload-code-section .fi-section-content > .fi-grid-col:nth-child(3) {
        flex: 1 0 100%;
    }
}

/* 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;
}

.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-summary,
.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 destination summary and the upload queue ─────────── */

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

/* 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-summary,
.fi-photo-upload-result,
:where(.dark) .fi-photo-upload-summary,
:where(.dark) .fi-photo-upload-result {
    color: var(--gray-800, #1f2937);
}

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

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

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

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

.fi-photo-upload-summary-list dd {
    font-weight: 600;
}

.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;
}

/* ── «بارگذاری عکس»: 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 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);
}

/* ── 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 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;
}

/*
 * 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);
}

/* اصلاح-۰۰۴: 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;
}