/* «مستندات فنی»، «لیست آخرین تغییرات» و «لیست آخرین تغییرات فنی سایت»
   (تسک ۱۴۰۵/۰۶/۱۲/۰۱).

   Written once for every management in the panel: the rules hang off
   `.fi-admin-guide`, which every one of these pages' article carries, so a
   management's documentation is its own content and never a stylesheet of its
   own.

   Ported from the photo agency panel, which this task names as the mandatory
   reference — with one systematic change. That panel is Filament v5, where a
   palette token is a colour; this one is v3, where `--warning-500` is the string
   «245 158 11» and `color: var(--warning-500)` is therefore thrown away by the
   browser, declaration and all. Every token below is wrapped back into `rgb()`
   with the stock value as a fallback, exactly as `panel-identity.css` does for
   the menus. The two header selectors that differ between the versions are named
   where they are used. */

/* ── «مستندات فنی», laid out to be read ─────────────────────────────────────

   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 > :last-child {
    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 > :last-child {
        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-header {
    row-gap: 1rem;
}

.fi-admin-guide .fi-guide-stamp {
    margin: 0 0 2rem;
    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: rgb(var(--warning-500, 245 158 11));
}

:where(.dark) .fi-admin-guide .fi-guide-stamp-value {
    color: rgb(var(--warning-400, 251 191 36));
}

/* ── 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 > :last-child {
    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: rgb(var(--danger-700, 185 28 28));
    text-decoration: underline;
}

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

/* 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: rgb(var(--danger-600, 220 38 38));
}

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

/*
 * بند ۰۱۱: «مشاهده در صفحه تغییرات», 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: rgb(var(--danger-600, 220 38 38));
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

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

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

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

.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: rgb(var(--warning-500, 245 158 11));
}

:where(.dark) .fi-admin-guide .fi-guide-flow-arrow {
    color: rgb(var(--warning-400, 251 191 36));
}

/* ── 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: rgb(var(--success-600, 22 163 74));
}

:where(.dark) .fi-admin-guide .fi-guide-line-term > b:first-child {
    color: rgb(var(--success-400, 74 222 128));
}

/* 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: rgb(var(--info-500, 59 130 246));
}

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

/* ── 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: rgb(var(--warning-500, 245 158 11));
}

:where(.dark) .fi-admin-guide .fi-guide-updated-value {
    color: rgb(var(--warning-400, 251 191 36));
}

/* …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: rgb(var(--gray-500, 107 114 128));
}

:where(.dark) .fi-admin-guide .fi-guide-updated-previous {
    color: rgb(var(--gray-400, 156 163 175));
}

.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 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: rgb(var(--gray-500, 107 114 128));
}

:where(.dark) .fi-admin-guide-history .fi-guide-change-before .fi-guide-change-label {
    color: rgb(var(--gray-400, 156 163 175));
}

.fi-admin-guide-history .fi-guide-change-before .fi-guide-change-text {
    color: rgb(var(--gray-500, 107 114 128));
}

:where(.dark) .fi-admin-guide-history .fi-guide-change-before .fi-guide-change-text {
    color: rgb(var(--gray-400, 156 163 175));
}

.fi-admin-guide-history .fi-guide-change-after .fi-guide-change-label {
    color: rgb(var(--warning-600, 217 119 6));
}

:where(.dark) .fi-admin-guide-history .fi-guide-change-after .fi-guide-change-label {
    color: rgb(var(--warning-400, 251 191 36));
}

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

/* ── The head of one round in «لیست آخرین تغییرات فنی سایت» ─────────────────

   The management's icon and name, the time of the round, and the way to that
   management's own documentation, all on one row.

   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 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: rgb(var(--warning-600, 217 119 6));
    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: rgb(var(--warning-400, 251 191 36));
    border-color: rgb(251 191 36 / 0.45);
}

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

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

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

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

.fi-admin-guide-history .fi-guide-round-managements-names {
    font-weight: 600;
    color: rgb(var(--warning-600, 217 119 6));
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-managements-names {
    color: rgb(var(--warning-400, 251 191 36));
}

/* اصلاح-۰۰۴: 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: rgb(var(--danger-600, 220 38 38));
    cursor: default;
}

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

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


/* ── The pieces this panel needs and the reference did not ──────────────────

   The title of a documentation page is «مستندات فنی» for every management, so
   the management's own name is the subheading under it — and it has to be
   centred with the title rather than left where the panel puts a description. */

.fi-admin-guide-page .fi-header-heading,
.fi-admin-guide-page .fi-header-subheading {
    text-align: center;
}

.fi-admin-guide-page .fi-header-subheading {
    max-width: none;
}

/* «لیست آخرین تغییرات فنی سایت» holds every management's rounds, so it is the
   one page of the three that runs to more than one screenful and needs the
   panel's own pagination under it. */
.fi-admin-guide .fi-guide-pagination {
    margin-top: 2rem;
}

/* The «مستندات فنی» button at the top of a management (بند ۶).

   Drawn by a render hook into the header's own action row, so it stands beside
   that management's own buttons rather than in a bar of its own. It is a link
   and not a Filament action — it opens a tab of its own, which an action cannot
   do — so its shape is written here, matching the panel's outlined grey button
   exactly. */
.fi-technical-docs-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: rgb(var(--gray-700, 55 65 81));
    box-shadow: inset 0 0 0 1px rgb(var(--gray-300, 209 213 219));
    transition: background-color 75ms ease;
}

.fi-technical-docs-button:hover {
    background-color: rgb(var(--gray-50, 249 250 251));
}

:where(.dark) .fi-technical-docs-button {
    color: rgb(var(--gray-200, 229 231 235));
    box-shadow: inset 0 0 0 1px rgb(var(--gray-600, 75 85 99));
}

:where(.dark) .fi-technical-docs-button:hover {
    background-color: rgb(var(--gray-800, 31 41 55));
}

.fi-technical-docs-button .fi-icon,
.fi-technical-docs-button svg {
    height: 1.25rem;
    width: 1.25rem;
}

/* ── The dashboard card «آخرین تغییرات فنی سایت» (بند ۲۵) ────────────────────

   The panel's own card shape — the same rounded box, ring and dark surface every
   dashboard card is drawn with — with the management's name at the size of a
   card title, the date and time under it, and the elapsed time in the panel's
   standard yellow, which is what بند ۲۵ asks for by name. */

.fi-technical-changes-card {
    display: block;
    border-radius: 0.75rem;
    background-color: #ffffff;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(3 7 18 / 0.05);
    transition: background-color 75ms ease;
}

.fi-technical-changes-card:hover {
    background-color: rgb(var(--gray-50, 249 250 251));
}

:where(.dark) .fi-technical-changes-card {
    background-color: rgb(var(--gray-900, 17 24 39));
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

:where(.dark) .fi-technical-changes-card:hover {
    background-color: rgb(var(--gray-800, 31 41 55));
}

.fi-technical-changes-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgb(var(--gray-500, 107 114 128));
}

.fi-technical-changes-card-head .fi-icon,
.fi-technical-changes-card-head svg {
    height: 1.25rem;
    width: 1.25rem;
}

.fi-technical-changes-card-management {
    margin-top: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--panel-card-title, #111827);
}

.fi-technical-changes-card-stamp {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: rgb(var(--gray-500, 107 114 128));
}

.fi-technical-changes-card-elapsed-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.fi-technical-changes-card-clock {
    color: rgb(var(--warning-500, 245 158 11));
}

.fi-technical-changes-card-clock .fi-icon,
.fi-technical-changes-card-clock svg {
    height: 1.5rem;
    width: 1.5rem;
}

/* بند ۲۵ — «مقدار زمان با رنگ زرد استاندارد پنل نمایش داده شود». */
.fi-technical-changes-card-elapsed {
    font-size: 0.875rem;
    font-weight: 700;
    color: rgb(var(--warning-500, 245 158 11));
}

:where(.dark) .fi-technical-changes-card-elapsed,
:where(.dark) .fi-technical-changes-card-clock {
    color: rgb(var(--warning-400, 251 191 36));
}


/* ── بند ۱۶ — the three lines a round carries in «لیست آخرین تغییرات فنی سایت»
   and nowhere else ──────────────────────────────────────────────────────────

   «خلاصه تغییر», «ارتباط با مستندات مدیریت» و «وضعیت ثبت». They sit between the
   subject of the round and its «قبل و بعد» boxes, in the size and the muted
   label colour every other line of this page uses, so the record still reads as
   one record rather than as a form. */
.fi-admin-guide-history .fi-guide-round-summary {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: rgb(3 7 18 / 0.7);
}

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

.fi-admin-guide-history .fi-guide-round-docs-sections {
    margin-block: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.9;
}

.fi-admin-guide-history .fi-guide-round-doc-section {
    font-weight: 600;
    color: rgb(var(--warning-600, 217 119 6));
    text-decoration: none;
}

.fi-admin-guide-history .fi-guide-round-doc-section:hover {
    text-decoration: underline;
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-doc-section {
    color: rgb(var(--warning-400, 251 191 36));
}

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

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

/* The status itself: green when the three records are all there, red when one
   of them is missing, and the panel's muted colour for a record recovered from
   before this cycle existed — which is neither. */
.fi-admin-guide-history .fi-guide-round-status {
    margin-block: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.9;
}

.fi-admin-guide-history .fi-guide-round-status-label {
    font-weight: 600;
}

.fi-admin-guide-history .fi-guide-round-status-complete .fi-guide-round-status-label {
    color: rgb(var(--success-600, 22 163 74));
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-status-complete .fi-guide-round-status-label {
    color: rgb(var(--success-400, 74 222 128));
}

.fi-admin-guide-history .fi-guide-round-status-incomplete .fi-guide-round-status-label {
    color: rgb(var(--danger-600, 220 38 38));
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-status-incomplete .fi-guide-round-status-label {
    color: rgb(var(--danger-400, 248 113 113));
}

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

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

/* بند ۲۰: an incomplete record names what is missing, one sentence at a time —
   never «خطا رخ داد». */
.fi-admin-guide-history .fi-guide-round-status-missing {
    margin: -0.5rem 0 0.875rem;
    padding-inline-start: 1.25rem;
    list-style: disc;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: rgb(var(--danger-600, 220 38 38));
}

:where(.dark) .fi-admin-guide-history .fi-guide-round-status-missing {
    color: rgb(var(--danger-400, 248 113 113));
}