/*
 * The dashboard's summary tiles.
 *
 * Filament ships them as wide, roomy rectangles three to a row, which put the
 * agency's own figures and the seventeen Baligpa banks well below the fold. The
 * task asks for square-ish tiles so more of them fit across and the page stops
 * scrolling.
 *
 * Shape lives here rather than in the widgets because the widgets decide *how
 * many* columns (see the DenseStatCards trait) and CSS decides what a card in
 * one of those columns looks like. This app has no compiled Filament theme, so
 * the file is served straight from public/ through the panel's versioned render
 * hook.
 *
 * Nothing here removes information: the label and the description are clamped
 * to two lines each — the "optimise the inside of the card" the task asks for —
 * and a tile whose text genuinely needs more room grows past the square instead
 * of cutting the text off, because aspect-ratio yields to content.
 */

/* Denser than Filament's 1.5rem, so the saving from more columns is not spent
   back on the gaps between them. */
.fi-wi-stats-overview .fi-sc {
    gap: 0.75rem;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat {
    padding: 0.875rem 1rem;
    min-height: 6.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*
 * Square from the tablet up. On a phone the grid is one or two columns wide, so
 * a square card would be as tall as the screen — there the task asks for
 * readability, not density, and the card keeps its natural height.
 */
@media (min-width: 640px) {
    .fi-wi-stats-overview .fi-wi-stats-overview-stat {
        aspect-ratio: 1 / 1;
        height: auto;
    }
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-content {
    row-gap: 0.375rem;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-value {
    line-height: 1.15;
    /* Long figures (the storage total) wrap rather than widen the column. */
    overflow-wrap: anywhere;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-label-ctn {
    align-items: flex-start;
    column-gap: 0.375rem;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-label-ctn .fi-icon,
.fi-wi-stats-overview .fi-wi-stats-overview-stat-description .fi-icon {
    flex: none;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-label {
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-description {
    align-items: flex-start;
    line-height: 1.35;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-description > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}

/* ── The header: today, who is signed in, and the way out ─────────────────────
   (AGENCY-DASH-006 … ۰۰۹)

   One line at the end of the topbar, which in this RTL panel is its left. It
   sits inside the header's existing height rather than adding to it. */

.fi-agency-header {
    display: flex;
    align-items: center;
    /* Between the groups (بند ۲۷). The hairline is itself an item of this row,
       so a join measures gap + line + gap, while «زمان ورود» and «تعداد ورود»
       inside the sign-in group stand a third of that apart. The picture and
       «تنظیمات» take the bar's own end-block gap, which is smaller again — so
       «تنظیمات + آواتار + نام کارمند» reads as one group and not as three. */
    gap: 0.75rem;
    white-space: nowrap;
    line-height: 1.6;
}

/* «زمان ورود» and «تعداد ورود» are one group (بند ۲۷). */
.fi-agency-header-login {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.fi-agency-header-user {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-agency-header-logout-form {
    display: inline-flex;
    margin: 0;
}

/* «تنظیمات» — a red button immediately before the account picture, where the
   direct «خروج» used to be (بند ۴). Red because it is the way to the one
   irreversible thing in the panel, and stated in words because the picture
   alone was not read as «here are my settings». */
.fi-agency-header-settings {
    cursor: pointer;
    background-color: var(--danger-600, #dc2626);
    color: var(--color-white);
    border: 0;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5rem;
    white-space: nowrap;
}

.fi-agency-header-settings:hover {
    background-color: var(--danger-700, #b91c1c);
}

/* Kept for the confirmation dialog's own form, which is the framework's now
   rather than one drawn in the bar. */
.fi-agency-header-logout {
    cursor: pointer;
    background-color: var(--danger-600, #dc2626);
    color: var(--color-white);
    border: 0;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.5rem;
}

.fi-agency-header-logout:hover {
    background-color: var(--danger-700, #b91c1c);
}

/* ── «آیا از خروج از پنل مدیریت اطمینان دارید؟» ───────────────────────────────
   (الزام داشبورد-۰۴)

   Out at the page body, because the bar clips anything taller than itself. */
.fi-agency-logout-confirm[hidden] {
    display: none !important;
}

.fi-agency-logout-confirm {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.fi-agency-logout-confirm-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.fi-agency-logout-confirm-box {
    position: relative;
    width: 24rem;
    max-width: 100%;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    background-color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.dark .fi-agency-logout-confirm-box {
    border-color: var(--gray-700, #374151);
    background-color: var(--gray-900, #111827);
}

.fi-agency-logout-confirm-question {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
}

.fi-agency-logout-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.fi-agency-logout-confirm-yes,
.fi-agency-logout-confirm-no {
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.4rem 1.1rem;
    font: inherit;
    font-weight: 600;
}

/* The one that ends the session is the red one; «انصراف» is an ordinary
   button, and it changes nothing at all. */
.fi-agency-logout-confirm-yes {
    border: 0;
    background-color: var(--danger-600, #dc2626);
    color: var(--color-white);
}

.fi-agency-logout-confirm-yes:hover {
    background-color: var(--danger-700, #b91c1c);
}

.fi-agency-logout-confirm-no {
    border: 1px solid var(--gray-300, #d1d5db);
    background-color: transparent;
    color: inherit;
}

.fi-agency-logout-confirm-no:hover {
    background-color: var(--gray-100, #f3f4f6);
}

.dark .fi-agency-logout-confirm-no {
    border-color: var(--gray-600, #4b5563);
}

.dark .fi-agency-logout-confirm-no:hover {
    background-color: var(--gray-800, #1f2937);
}

/* The date and the two sign-in readings are the first things to go when there
   is no room for them; the name and the way out matter more on a phone. The
   hairlines go with them — a separator with nothing left to separate is a mark
   on an empty bar. */
@media (max-width: 640px) {
    .fi-agency-header-date,
    .fi-agency-header-login,
    .fi-agency-header-login-time,
    .fi-agency-header-login-count,
    .fi-agency-header-sep {
        display: none;
    }
}

/* ── The managements, between the figures and the Baligpa breakdown ───────────
   (AGENCY-DASH-022 … ۰۳۹, AGENCY-DASHBOARD-605 … ۰۰۹)

   One column per sidebar group. A grid rather than columns of floats: every
   column in a row starts its heading at the same height whatever number of
   cards hangs beneath it, and a last row with four groups in it makes four
   columns rather than four and three empty ones.

   The cards are about twice the size they were. A card is as wide as its
   column, so «twice the size» is bought by taking roughly a third of the
   columns out of every row and giving the card half again its height: about
   1.4 × 1.4, which is twice the area rather than four times it. Nothing here
   reaches the two rows of stats cards — they have a stylesheet of their own,
   above, and keep the size they had (AGENCY-DASHBOARD-607). */

/*
 * AGENCY-DASHBOARD-CARDS-701 … ۷۰۵: how many groups fit in a row is a question
 * about widths, so the widths answer it.
 *
 * There is no column count here and no breakpoint. `auto-fill` lays down as
 * many columns as the container holds at the width one card needs, and `1fr`
 * then shares out what is left over — so a card is never carried to the next
 * row while its own width is still standing empty at the end of this one, and
 * the number per row rises with the screen instead of stopping at a figure
 * written down in advance (بند ۷۰۱ و ۷۰۴).
 *
 * 14rem is the width a card was given when the last task made these twice the
 * size, measured where the row was not being squeezed. Stating it as the
 * *minimum* is what keeps بند ۷۰۳: more columns are only ever added when they
 * fit at that size, never by shrinking the cards to make room. `min(100%, …)`
 * is for the phone, where 14rem may be more than the whole screen — without it
 * the row would overflow rather than fall to one column (بند ۷۰۴).
 *
 * The gap is the one the panel already used, unchanged (بند ۷۰۵).
 */
.fi-dash-managements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 1.25rem 0.875rem;
    align-items: start;
}

.fi-dash-management-group {
    min-width: 0;
}

/*
 * AGENCY-DASH-MENU-001 … ۰۰۸: where the name of a management menu sits over its
 * own cards.
 *
 * Centred rather than following the page's right-to-left start (بند ۲), and
 * centred on the group's *own* column — the heading is as wide as the column
 * its cards are in, so a name can never read as belonging to the group beside
 * it (بند ۸).
 *
 * Lower than it was (بند ۳). The heading keeps one height for every group, so
 * that the cards of a column whose name runs to two lines stay level with the
 * cards beside them; what changes is where the name sits inside that height.
 * It used to sit at the top, which is what left a one-line name stranded far
 * above the line with the gap growing and shrinking from menu to menu. Pinned
 * to the end instead, every name in the dashboard is the same short distance
 * above its own yellow line, whether it is one line long or two (بند ۳ و ۶).
 *
 * One rule for all of them: nothing here names a menu, so no menu can be left
 * with the old arrangement and none is spaced by hand (بند ۵ و ۶).
 *
 * DASHBOARD-MENU-SPACING-001 و ۰۰۲: that short distance is now twice what it
 * was. The gap the task measures is the one between a name and the yellow line
 * under it — this rule's own `padding-block-end`, ۰٫۵rem, and so ۱rem — and the
 * cards move down with the line, which is the rest of what it asks for. The
 * figure is doubled from the structure that was here rather than picked: the
 * task says as much in بند ۲.
 *
 * The shared height grows by exactly the same ۰٫۵rem. It has to: two lines of
 * text plus the old padding fitted inside ۳٫۱۲۵rem, and with the new padding
 * they would not, so a two-line name would have made its own heading taller
 * than its neighbours' and pushed its cards out of line with theirs (بند ۸).
 * Doubling the gap and keeping every heading one height are the same edit.
 */
.fi-dash-management-group-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Two lines (۲ × ۰٫۸۱۲۵rem × ۱٫۵) and the padding below them still fit. */
    min-height: 3.625rem;
    margin: 0 0 0.5rem;
    /* Clear of the line, at twice the distance it used to be (بند ۱ و ۲). */
    padding-block-end: 1rem;
    border-block-end: 2px solid var(--primary-500, #f59e0b);
    line-height: 1.5;
    text-align: center;
}

/* Two lines at most, so a long group name cannot push its own cards down past
   the cards of the column beside it, and is never cut off sideways at any width
   (بند ۹). The row's headings all start at the same height either way — this
   keeps the cards level too. */
.fi-dash-management-group-title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-dash-management-cards {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Half again as tall as it was — 4.875rem became 7rem — which together with the
   wider column is about twice the card (AGENCY-DASHBOARD-605). Every management
   card is exactly this height whatever its name is (AGENCY-DASH-031).
   The stats cards keep their own height: this rule never reaches them
   (AGENCY-DASH-034, AGENCY-DASHBOARD-602 و ۶۰۷). */
.fi-dash-management-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 7rem;
    padding: 0.75rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.875rem;
    background: var(--gray-50, #f9fafb);
    color: var(--gray-800, #1f2937);
    text-align: center;
    text-decoration: none;
    transition: border-color 120ms, background-color 120ms;
}

:where(.dark) .fi-dash-management-card {
    border-color: var(--gray-700, #374151);
    background: var(--gray-900, #111827);
    color: var(--gray-200, #e5e7eb);
}

.fi-dash-management-card:hover {
    border-color: var(--primary-500, #f59e0b);
    background: var(--primary-50, #fffbeb);
}

:where(.dark) .fi-dash-management-card:hover {
    background: rgba(245, 158, 11, 0.12);
}

/* Grown with the card rather than doubled: the task asks for visual balance
   inside the bigger card, not for an icon twice the size (AGENCY-DASHBOARD-606). */
.fi-dash-management-card-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    color: var(--primary-500, #f59e0b);
}

/* The name in full where it fits and clamped where it does not — never spilling
   out of the card and never overlapping the icon (AGENCY-DASH-033). Three lines
   at every width now: the card is tall enough for them, and a long name that
   used to be cut at two is not. */
.fi-dash-management-card-label {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The more columns a row holds, the narrower each card is — so from four across
   the name is given a slightly smaller size. The card's height does not move:
   what changes is how much of it the name is allowed to fill, which is the
   difference between a name that reads and one that is cut
   (AGENCY-DASH-032 و ۰۳۳). */
@media (min-width: 1280px) {
    .fi-dash-management-card {
        gap: 0.4375rem;
        padding: 0.625rem;
    }

    .fi-dash-management-card-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .fi-dash-management-card-label {
        font-size: 0.875rem;
        line-height: 1.35;
    }
}

.fi-dash-visibility-note {
    line-height: 1.9;
}

/* ── «آخرین تغییرات فنی سایت», the one tile that is not a figure ──────────────
   (تغییرات-فنی-۰۲۰ … ۰۲۶)

   It keeps the height, the width, the corners, the padding and the alignment of
   every other tile in the row — بند ۰۲۲ refuses a card designed outside the
   dashboard's visual language — and is told apart only by the panel's own
   yellow around it.

   Its value is a management's name rather than a number, so it is set at the
   size the panel gives a name and not at the size it gives a figure; a long name
   wraps inside the square instead of widening the column.

   ── One and a half tiles wide, and not one taller (اصلاح-۰۰۱) ──

   The width comes from the grid — the card asks for three of the halves a tile
   is two of (AgencyStatsWidget) — and the only thing said here is that the
   height must not follow it. Every other tile is a square, so its height is its
   own width; this one is let out of the square and stretched to the height of
   the row instead, which is the height of the squares beside it. Nothing else
   about the card is touched: same corners, same yellow, same padding, same
   three levels of information. */

.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-technical-changes {
    border-color: rgb(245 158 11 / 0.55);
    box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.35);
    /* Out of the square (which would make it one and a half times as tall), and
       up to the height of the row, which the squares beside it set. */
    aspect-ratio: auto;
    height: 100%;
}

:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-technical-changes {
    border-color: rgb(251 191 36 / 0.5);
    box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.3);
}

/* الزام «داشبورد-۰۳» of تسک ۱۴۰۵/۰۶/۰۳/۰۹ asks that the variable title of this
   card — the name of a management, «ساخت گالری‌های آژانس» — be two thirds of the
   size it was. Its size is **not written here**: «عدد کارت آماری داشبورد» is a
   role «استانداردسازی نمای پنل» owns, and a stylesheet that decides a managed
   property is a second place to change it. The reduction is an exception row on
   that role, added by
   `2026_08_25_140000_the_technical_change_title_is_two_thirds_of_a_stat_value`,
   which the standards block prints after its own rule.

   What stays here is the shape of the line, which the standard says nothing
   about. */
.fi-wi-stats-overview .fi-stat-technical-changes .fi-wi-stats-overview-stat-value {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* الزام «داشبورد-۰۲» … «داشبورد-۰۵» of تسک ۱۴۰۵/۰۵/۲۶/۲۴ — «آخرین زمان ثبت
   تغییرات», under the date of the newest round.

   Its own line rather than a continuation of the date: the two say different
   things — when the newest round happened, and how stale the record is as a
   whole — and read as one sentence they say neither clearly.

   The value is the panel's standard yellow (`--warning-500`, which is what
   «رنگ زرد استاندارد» is spelled as everywhere else in this file), so it is
   found at a glance; the label in front of it keeps the description's own grey
   so the yellow means the figure and not the sentence. No size is set here —
   «توضیح کارت آماری داشبورد» is a role «استانداردسازی نمای پنل» owns, and a
   stylesheet that decided it would be a second place to change it. */
.fi-wi-stats-overview .fi-stat-technical-changes-elapsed {
    display: block;
    line-height: 1.5;
}

.fi-wi-stats-overview .fi-stat-technical-changes-elapsed-value {
    color: var(--warning-500, #f59e0b);
    font-weight: 600;
}

:where(.dark) .fi-wi-stats-overview .fi-stat-technical-changes-elapsed-value {
    color: var(--warning-400, #fbbf24);
}

/* ── The topbar, after «اصلاح هدر و داشبورد مدیریت آژانس عکس» ─────────────────

   The date is white now (بند ۲۱) and no longer says «امروز». *Which* colour is
   not decided here, though: «تاریخ روز نوار بالا» is a role in «استانداردسازی
   نمای پنل», and the block that page prints comes after every stylesheet and
   carries the same weight — so this declaration is only the fallback for a
   panel whose standards have not been synced, and the real change is the
   migration that repoints the role to the panel's own white. */
.fi-agency-header-date {
    color: var(--color-white, #ffffff);
    white-space: nowrap;
}

/* Neither reading wraps, and neither is allowed to squeeze the other. */
.fi-agency-header-login-time,
.fi-agency-header-login-count {
    white-space: nowrap;
}

/* «زمان ورود» is the panel's standard green, and that green is decided in
   «استاندارد‌سازی نمای پنل» rather than here (هدر-۰۴). Writing it in this file
   as well would be a second source for one colour, and the central block —
   printed after every stylesheet — would win over it anyway. */

/* هدر-اصلاح-۰۱: the figure itself in the agency's yellow — the same yellow the
   date beside it is written in — and the words «تعداد ورود شما به پنل» and
   «بار» in the colour the bar already gives them. It is one number that is
   being called out, not a whole sentence. */
.fi-agency-header-login-count-value {
    color: var(--warning-400, #fbbf24);
    font-weight: 700;
}

/* Below the width the bar can hold it the sign-in steps out of the way rather
   than folding the header onto a second line, which بند ۲۷ forbids. The date and
   the name stay, because those are what a narrow bar is for. */
@media (max-width: 1100px) {
    .fi-agency-header-login,
    .fi-agency-header-sep-login {
        display: none;
    }
}

/* ── The hairline between the three readings (هدر-۰۵ و ۰۸) ────────────────────

   A line rather than more empty space: «امروز …» «زمان ورود : …» and «تعداد
   ورود شما به پنل : …» are three separate facts, and at one gap apart they read
   as one long sentence.

   It takes its colour from the writing beside it, faded, so it is a hairline in
   the day and in the night without either being decided twice; and its height
   is the text's own, so it cannot make the bar any taller than it already is. */
.fi-agency-header-sep {
    flex: none;
    width: 1px;
    height: 1.15em;
    background-color: currentColor;
    opacity: 0.35;
}

/* One tidy row rather than four things spread across the bar: the same small
   gap between the name, the picture, the date, the two readings and the way
   out, instead of the sixteen pixels the bar's own end block used plus a margin
   of its own on top (الزام داشبورد-۰۲). */
.fi-topbar-end {
    gap: 0.5rem;
}

/* «خروج» in the account menu: the whole row red, background and all, so the one
   irreversible thing in that window cannot be clicked for one of the others
   (نیازمندی ۲، بند ۵). Filament's own item, filled — nothing about what it does
   or where it goes is touched.

   Matched on the form the way out posts rather than on a class of ours. The
   account window renders the item itself and does not carry an action's extra
   attributes into the markup, so a class asked for in the panel provider never
   reaches the page — and the window is teleported to the end of the document
   when it opens, so a selector that started at `.fi-user-menu` would stop
   matching the moment it was needed. The form's address survives both. */
form[action$="/logout"] > .fi-dropdown-list-item {
    background-color: var(--danger-600, #dc2626);
    color: var(--color-white);
}

form[action$="/logout"] > .fi-dropdown-list-item:hover,
form[action$="/logout"] > .fi-dropdown-list-item:focus {
    background-color: var(--danger-700, #b91c1c);
}

form[action$="/logout"] > .fi-dropdown-list-item .fi-dropdown-list-item-label,
form[action$="/logout"] > .fi-dropdown-list-item .fi-icon {
    color: var(--color-white);
}

/* ── «قیمت‌های کنونی عکس» ─────────────────────────────────────────────────────
   (نیازمندی ۶ … ۱۲)

   A low strip between the figures and the management cards: a thin yellow rule
   along the top like the dashboard's other dividers, the heading on the right,
   and one cell per active size laid out in a row that survives a fourth. */
.fi-current-prices {
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

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

.fi-current-prices-rule {
    display: block;
    height: 3px;
    background-color: var(--warning-400, #fbbf24);
}

.fi-current-prices-body {
    padding: 0.75rem 1rem;
}

.fi-current-prices-heading {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.fi-current-prices-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
}

.fi-current-prices-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
    line-height: 1.7;
}

.fi-current-prices-size {
    font-weight: 600;
}

/* Only the rate itself is yellow — «نرخ پایه: ۵۲۰,۰۰۰ ریال» and nothing else.
   The size's own name above it and the strip's heading keep the colour they
   have (الزام داشبورد-۰۵). */
.fi-current-prices-amount {
    color: var(--warning-400, #fbbf24);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «کاربران سایت» — the tile that carries three figures instead of one
   (بند ۸ و ۹).

   A tile of the same height as the ones beside it, so the first row is one row
   and nothing in it is shrunk to make room. The whole tile is a link, marked
   with the panel's own yellow along its inner edge exactly as the discount card
   is, and the figures inside it wrap rather than pushing the tile wider.
   ───────────────────────────────────────────────────────────────────────────── */

/* Out of the square the ordinary tiles are cut to, and up to the height of the
   row they set. A card two tiles wide would otherwise be twice as tall as
   everything beside it and leave a hole in the row — بند ۹ asks for exactly the
   opposite: «کارت‌ها روی هم نیفتند … اندازه کارت‌ها بی‌دلیل کوچک نشود». The
   shared minimum height stays the shared one. */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-site-users {
    aspect-ratio: auto;
    height: 100%;
    justify-content: center;
}

.fi-stat-site-users {
    text-decoration: none;
    color: inherit;
}

/*
 * الزام ۹ of تسک ۱۴۰۵/۰۶/۰۲/۱۳: the card had a title and nobody could see it.
 *
 * It was written here as `.fi-site-users-title` — white on the dark page, the
 * page's strongest text on the light one — and the light rule was scoped
 * `:where(:not(.dark))`. `:where()` carries no specificity, so that selector is
 * worth exactly as much as the one above it and comes after it; and on the dark
 * page `<html>` carries the class while `<body>` does not, so «an ancestor that
 * is not dark» matched anyway. The title was therefore drawn in gray-900 on a
 * near-black card at every hour of the day, which is why الزام ۹ reads as «this
 * card, unlike the others, has no title».
 *
 * It is not repainted here. The title is drawn in the markup Filament gives
 * every other tile — `.fi-wi-stats-overview-stat-label-ctn` with the icon
 * before it — so its size, its weight, its place, its spacing and its colour
 * are the other cards' by construction rather than by a rule copied off them,
 * which is what الزام ۹ asks for in so many words. There is nothing left for
 * this file to say about it.
 */

/* بند ۱۰ of تسک ۱۴۰۵/۰۶/۰۸/۰۹ — a column, not a wrapping row.

   `flex-wrap: wrap` on a row put «کاربران جدید ۲۴ ساعت اخیر» beside «کل کاربران
   سایت» whenever there was room for it, and under it when there was not — so
   which row a figure stood on depended on the width of the card and the length
   of the number. One above the other, always, is what makes the three read as
   three rows of the same shape whatever the figures are. */
.fi-site-users-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.fi-site-users-figure {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.fi-site-users-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900, #111827);
}

.dark .fi-site-users-value {
    color: var(--gray-100, #f3f4f6);
}

/*
 * بند ۲۶: «کل کاربران سایت» is the headline of this card, so it is half again
 * the size of the two figures beside it — ۱٫۱۵rem became ۱٫۷۵rem — and it is
 * the agency's own yellow. The other two keep exactly the size and the colour
 * they had, which is the rest of what بند ۲۶ asks: they are meant to matter
 * less than the total, and they now visibly do.
 */
.fi-site-users-figure-lead .fi-site-users-value,
.dark .fi-site-users-figure-lead .fi-site-users-value {
    font-size: 1.75rem;
    color: var(--warning-400, #fbbf24);
}

.fi-site-users-label {
    font-size: 0.7rem;
    color: var(--gray-500, #6b7280);
}

.dark .fi-site-users-label {
    color: var(--gray-400, #9ca3af);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «کارمندان آنلاین و اخیراً فعال» (بند ۱۰ … ۱۶).

   A strip of small cards under the figures, in the same first block of the page
   and above «قیمت‌های کنونی عکس» (بند ۱۷). The grid wraps by itself: a fifth
   operator starts a second row and a fiftieth a tenth, and nothing is ever
   hidden for want of room (بند ۱۵).
   ───────────────────────────────────────────────────────────────────────────── */

.fi-staff-presence-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fi-staff-presence-head-bar {
    width: 0.25rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: var(--warning-400, #fbbf24);
}

.fi-staff-presence-head-label {
    font-size: 0.95rem;
    font-weight: 700;
}

.fi-staff-presence-empty {
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    text-align: center;
    font-size: 0.8rem;
    background-color: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    color: var(--gray-500, #6b7280);
}

.dark .fi-staff-presence-empty {
    background-color: var(--gray-900, #111827);
    border-color: var(--gray-700, #374151);
    color: var(--gray-400, #9ca3af);
}

.fi-staff-presence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem;
}

.fi-staff-presence-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
}

.dark .fi-staff-presence-card {
    background-color: var(--gray-900, #111827);
    border-color: var(--gray-700, #374151);
}

.fi-staff-presence-avatar {
    position: relative;
    flex: 0 0 auto;
}

.fi-staff-presence-avatar img,
.fi-staff-presence-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    object-fit: cover;
}

/* داش-۰۳: the portrait sits over the initials rather than instead of them, so
   an operator who has one still sees it and one whose picture fails to arrive
   is left with the panel's own mark instead of a torn page. The dot beside it
   keeps its place, because the frame it is positioned against is unchanged. */
.fi-staff-presence-avatar img {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

/* No picture uploaded: the panel's own initials in its own yellow, rather than
   a face fetched from an avatar service. */
.fi-staff-presence-initials {
    font-size: 0.8rem;
    font-weight: 700;
    background-color: var(--warning-400, #fbbf24);
    color: var(--gray-900, #111827);
}

/*
 * The ring that lifts the dot off the picture is an `outline` rather than a
 * `box-shadow`, because the beat بند ۲۴ hands it *is* a box-shadow: a ring
 * written here as well would be thrown away for the length of every pulse.
 */
.fi-staff-presence-dot {
    position: absolute;
    inset-inline-start: -0.1rem;
    bottom: -0.1rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    outline: 2px solid var(--gray-50, #f9fafb);
}

.dark .fi-staff-presence-dot {
    outline-color: var(--gray-900, #111827);
}

/* Green while they are here. The beat itself is `fi-live-dot-beating`, the one
   the «تخفیف فعال» mark carries — بند ۲۴ asks for that mark exactly and for no
   second animation to be written where the shared one will do. */
.fi-staff-presence-online .fi-staff-presence-dot {
    background-color: var(--success-500, #22c55e);
}

/* …and a still yellow one once they are only «اخیراً فعال» (بند ۱۲). */
.fi-staff-presence-recent .fi-staff-presence-dot {
    background-color: var(--warning-500, #f59e0b);
}

.dark .fi-staff-presence-recent .fi-staff-presence-dot {
    background-color: var(--warning-400, #fbbf24);
}

@media (prefers-reduced-motion: reduce) {
    .fi-staff-presence-online .fi-staff-presence-dot {
        animation: none;
    }
}

.fi-staff-presence-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.fi-staff-presence-name {
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-staff-presence-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    white-space: nowrap;
    color: var(--gray-500, #6b7280);
}

.dark .fi-staff-presence-meta {
    color: var(--gray-400, #9ca3af);
}

.fi-staff-presence-state {
    font-weight: 600;
}

.fi-staff-presence-online .fi-staff-presence-state {
    color: var(--success-700, #15803d);
}

.dark .fi-staff-presence-online .fi-staff-presence-state {
    color: var(--success-400, #4ade80);
}

.fi-staff-presence-recent .fi-staff-presence-state {
    color: var(--warning-700, #b45309);
}

.dark .fi-staff-presence-recent .fi-staff-presence-state {
    color: var(--warning-400, #fbbf24);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «وضعیت واترمارک عمومی» — the permanent watermark card
   (الزام‌های داشبورد-۰۱ … ۱۲).

   Its shape is «تخفیف فعال»'s shape, which الزام «داشبورد-۰۱» asks for in so
   many words: the same corners, padding and border as every tile in the row,
   out of the square because it holds a title and three figures rather than one
   number, and as tall as the row is — which, with the spacing الزام
   «داشبورد-۰۹» asks for, its four lines fit exactly, so nothing else on the
   dashboard is moved to make room for it. The one thing it does not take from
   that card is the yellow frame — the frame there says «this tile is about a
   campaign running right now», and two yellow-framed tiles side by side would
   say nothing at all.
   ────────────────────────────────────────────────────────────────────────── */

.fi-wi-stats-overview .fi-wi-stats-overview-stat:is(.fi-stat-public-watermark, .fi-stat-photo-metadata, .fi-stat-metadata-updates, .fi-stat-metadata-incomplete, .fi-stat-metadata-date-mismatch) {
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
}

:is(.fi-stat-public-watermark, .fi-stat-photo-metadata, .fi-stat-metadata-updates, .fi-stat-metadata-incomplete, .fi-stat-metadata-date-mismatch) .fi-watermark-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
 * الزام «داشبورد-۰۳»: the managerial title of the watermark in force is the
 * card's own headline, so it is the card's strongest text — the size and weight
 * «کاربران سایت» gives its title beside it.
 *
 * The light page is the base and the dark page the exception, deliberately: a
 * `:where(:not(.dark)) .x` written after `.x` matches on the dark page too,
 * because `<body>` is an ancestor without the class, and being written later at
 * equal weight it then wins everywhere. That is how a card ends up drawing its
 * own title in the colour of its own background.
 */
:is(.fi-stat-public-watermark, .fi-stat-photo-metadata, .fi-stat-metadata-updates, .fi-stat-metadata-incomplete, .fi-stat-metadata-date-mismatch) .fi-watermark-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
    overflow-wrap: anywhere;
    min-width: 0;
}

.dark :is(.fi-stat-public-watermark, .fi-stat-photo-metadata, .fi-stat-metadata-updates, .fi-stat-metadata-incomplete, .fi-stat-metadata-date-mismatch) .fi-watermark-card-title {
    color: var(--color-white, #ffffff);
}

/* الزام «داشبورد-۰۴»: the round state badge of «تخفیف فعال», at its size and
   with its slow pulse — green while a public watermark is in force. */
.fi-watermark-card-dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
}

.fi-watermark-card-dot-active {
    background-color: var(--success-500, #22c55e);
}

.fi-watermark-card-dot-none {
    background-color: var(--danger-500, #ef4444);
}

/* The metadata cards need a third state the watermark card never had (فرا-۶۵):
   «خارج از زمان پردازش» is a scheduled pause, not a fault, so it may not wear
   the red a stopped processor wears. Without these two rules the dot was drawn
   with no colour at all — a 10px hole on a dark card, which reads as «this card
   has no state» rather than as any of the three. */
.fi-watermark-card-dot-missing {
    background-color: var(--danger-500, #ef4444);
}

.fi-watermark-card-dot-idle {
    background-color: var(--gray-400, #9ca3af);
}

/* The same keyframes the discount card's dot uses (`agency-discounts.css`),
   and the same courtesy: anyone who has asked their system to stop animating
   gets a steady dot instead. */
.fi-watermark-card-dot-beating {
    animation: fi-live-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-watermark-card-dot-beating {
        animation: none;
    }
}

/*
 * الزام «داشبورد-۰۹»: the three rows stand half again as far apart as the lines
 * of «تخفیف فعال» used to. At 13px those stood 12.75px apart — 9.75px of
 * leading plus a 3px gap — so these stand 19.5px apart: 11.375px of leading
 * (line-height 1.875 at 13px) plus an 8px gap. الزام «داشبورد-۰۹» allows the
 * card to grow for them; it does not have to — a title and three rows at this
 * spacing come to exactly the height a tile of this row already is.
 */
:is(.fi-stat-public-watermark, .fi-stat-photo-metadata, .fi-stat-metadata-updates, .fi-stat-metadata-incomplete, .fi-stat-metadata-date-mismatch) .fi-watermark-card-figures {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.875;
}

/* Label and figure on one line, the figure held to the far end of the row so a
   column of numbers can be read down rather than hunted for. Wrapping is
   allowed: at a phone's width a long label takes its own line instead of
   pushing the number out of the card (الزام «داشبورد-۱۲»). */
.fi-watermark-card-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    min-width: 0;
}

.fi-watermark-card-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-watermark-card-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The metadata cards mark one figure at a time as the one needing attention — a
   stopped processor, a photograph the queue gave up on — rather than colouring
   whole rows the way the watermark card does. */
.fi-watermark-card-value.is-alert {
    color: var(--danger-700, #b91c1c);
}

.dark .fi-watermark-card-value.is-alert {
    color: var(--danger-400, #f87171);
}

/*
 * الزام «داشبورد-۰۵»: white, green and red — the label and its figure in the
 * same colour, so a row reads as one statement rather than two.
 *
 * White is the panel's own text on the dark page it is designed against; on the
 * light page white on white is nothing, so there the row takes the page's
 * strongest text instead. The green and the red are the panel's success and
 * danger, in the shade each page can carry.
 */
.fi-watermark-card-figure-covered {
    color: var(--gray-900, #111827);
}

.dark .fi-watermark-card-figure-covered {
    color: var(--color-white, #ffffff);
}

.fi-watermark-card-figure-regenerated {
    color: var(--success-700, #15803d);
}

.dark .fi-watermark-card-figure-regenerated {
    color: var(--success-400, #4ade80);
}

.fi-watermark-card-figure-pending {
    color: var(--danger-700, #b91c1c);
}

.dark .fi-watermark-card-figure-pending {
    color: var(--danger-400, #f87171);
}

/* Not one of the three, and drawn only when it is not zero: a photograph the
   queue gave up on is counted apart by the watermark management itself, so it
   is named here rather than hidden inside «نیازمند بازتولید» and left to make
   the sum of the three look wrong (الزام «داشبورد-۰۶»). Amber, because red is
   already saying «still to do» one line above it. */
.fi-watermark-card-figure-failed {
    color: var(--warning-700, #b45309);
}

.dark .fi-watermark-card-figure-failed {
    color: var(--warning-400, #fbbf24);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «همگام‌سازی با بالیگپا» — the dashboard's own reading of the Baligpa pull
   (بند ۱۲ تا ۲۱ of تسک ۱۴۰۵/۰۶/۰۶/۰۵).

   Its shape is the watermark tile's shape, which بند ۱۴ asks for in so many
   words: the same corners, padding, border and width, out of the square because
   it holds a title and three rows rather than one number, and as tall as the
   row is. Everything below is either that card's rule under this card's name,
   or a colour this card alone needs.
   ────────────────────────────────────────────────────────────────────────── */

.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-baligpa-sync {
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
}

.fi-stat-baligpa-sync .fi-sync-stat-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The title is the card's strongest text, the size and weight of the tile
   beside it. Light page as the base, dark page as the exception — a
   `:where(:not(.dark))` written afterwards matches the dark page too and wins
   there by order, which is how a card ends up drawing its title in the colour
   of its own background. */
.fi-stat-baligpa-sync .fi-sync-stat-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
    overflow-wrap: anywhere;
    min-width: 0;
}

.dark .fi-stat-baligpa-sync .fi-sync-stat-title {
    color: var(--color-white, #ffffff);
}

/* بند ۱۶: the same round badge as the watermark tile's, at its size and with
   its slow pulse. It beats in every state on purpose — the card's whole job is
   to say the process is alive, and a light that stops when something goes wrong
   is a light that reads as «nothing to report». The colour is what says which
   state it is, and it is read from the real one (بند ۱۶، «الزام مهم»). */
.fi-sync-stat-dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
}

.fi-sync-stat-dot-healthy {
    background-color: var(--success-500, #22c55e);
}

.fi-sync-stat-dot-error {
    background-color: var(--danger-500, #ef4444);
}

/* Neither green nor red: nothing has completed yet, or the state could not be
   read. بند ۲۰ asks that this never be drawn as health. */
.fi-sync-stat-dot-unknown {
    background-color: var(--warning-500, #f59e0b);
}

/* The keyframes the watermark and discount tiles already animate on, and the
   same courtesy: a steady dot for anyone who has asked their system to stop
   animating (بند ۲۲ — «چشمک‌زدن ملایم باشد»). */
.fi-sync-stat-dot-beating {
    animation: fi-live-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-sync-stat-dot-beating {
        animation: none;
    }
}

/* بند ۱۷: three rows, at the spacing of the three the watermark tile carries,
   so the two tiles are the same height and the row keeps its shape (بند ۲۲). */
.fi-stat-baligpa-sync .fi-sync-stat-figures {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.875;
}

.fi-sync-stat-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    min-width: 0;
}

.fi-sync-stat-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-sync-stat-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* بند ۱۷: «موفق» green and «دارای خطا» red — the whole row, so it reads as one
   statement rather than a grey label beside a coloured word. «نامشخص» is
   amber, for the same reason its dot is. */
.fi-sync-state-healthy .fi-sync-stat-figure-status {
    color: var(--success-700, #15803d);
}

.dark .fi-sync-state-healthy .fi-sync-stat-figure-status {
    color: var(--success-400, #4ade80);
}

.fi-sync-state-error .fi-sync-stat-figure-status {
    color: var(--danger-700, #b91c1c);
}

.dark .fi-sync-state-error .fi-sync-stat-figure-status {
    color: var(--danger-400, #f87171);
}

.fi-sync-state-unknown .fi-sync-stat-figure-status {
    color: var(--warning-700, #b45309);
}

.dark .fi-sync-state-unknown .fi-sync-stat-figure-status {
    color: var(--warning-400, #fbbf24);
}

/* «آخرین همگام‌سازی» is a fact and not a verdict, so it takes the page's own
   strongest text like the watermark tile's first row does. */
.fi-sync-stat-figure-last {
    color: var(--gray-900, #111827);
}

.dark .fi-sync-stat-figure-last {
    color: var(--color-white, #ffffff);
}

/* بند ۱۷: the figure of the third row is green. */
.fi-sync-stat-figure-changes {
    color: var(--success-700, #15803d);
}

.dark .fi-sync-stat-figure-changes {
    color: var(--success-400, #4ade80);
}
/* ─────────────────────────────────────────────────────────────────────────────
   الزام ۸ of تسک ۱۴۰۵/۰۶/۰۲/۱۳ — one yellow edge, on every card of this page.

   «کاربران سایت» carried it and nothing else did, so the dashboard read as two
   kinds of card that happened to share a page. The task names the fault
   plainly — «نباید بعضی کارت‌ها دارای لبه زرد و بعضی بدون آن باقی بمانند» — so
   this is the one rule every card takes, in the shape that card already had:
   3px, solid, the panel's own `--warning-400`, against the corner each card
   already has.

   Last in the file, and with the dark page's own selectors named beside the
   plain ones, because several of these cards set `border-color` for all four
   sides at a higher specificity than the class alone — «آخرین تغییرات فنی
   سایت» in its translucent amber, and every card that darkens its frame on the
   dark page. Without naming them the line would still be drawn, in their colour
   and not in this one, which is exactly the «بعضی … و بعضی» the task is about.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview .fi-wi-stats-overview-stat,
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-technical-changes,
:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-technical-changes,
.fi-staff-presence-card,
.dark .fi-staff-presence-card,
.fi-dash-management-card,
:where(.dark) .fi-dash-management-card,
.fi-current-prices,
.dark .fi-current-prices {
    border-inline-start: 3px solid var(--warning-400, #fbbf24);
}

/* ─────────────────────────────────────────────────────────────────────────────
   بند ۴ of تسک ۱۴۰۵/۰۶/۰۶/۱۱ — the «مانیتورینگ» cards' side edge turns green.

   Only the colour. The 3px, the solid line, the corner it is drawn against and
   the spacing around it are the rule above's and are untouched — «ضخامت، فاصله،
   گردی گوشه و سایر ویژگی‌های طراحی همان قبلی باقی بماند».

   Scoped by a class on the card rather than by the section it is in: «آمار
   داده‌ها» is a second `.fi-wi-stats-overview` on the same page, so «فقط برای
   کارت‌های داخل بخش مانیتورینگ» cannot be said with the widget's own selector.
   `AgencyStatsWidget` marks each of its cards `fi-stat-monitoring`, and nothing
   else on the page carries it — so «قیمت‌های کنونی عکس», the management cards,
   «کارمندان آنلاین» and every tile of «آمار داده‌ها» keep the yellow they had.

   The two named selectors are the two cards that set `border-color` for all
   four sides at a higher specificity than the class alone — «آخرین تغییرات فنی
   سایت» in its translucent amber, on the light page and on the dark one.
   Without naming them the edge would be drawn in their colour, which is the
   very «بعضی سبز و بعضی نه» this asks against.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-monitoring,
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-monitoring.fi-stat-technical-changes,
:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-monitoring.fi-stat-technical-changes {
    border-inline-start-color: var(--success-400, #4ade80);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «آخرین گالری‌های بالیگپا» و «آخرین گالری‌های آژانس» (بند ۷ … ۱۸)

   Three rows of words rather than one figure, so the card is let out of the
   square the ordinary tiles are cut to — the same escape «کاربران سایت» and
   «آخرین تغییرات فنی سایت» take — and grows to whatever its rows need.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-latest-galleries {
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
}

.fi-latest-gallery-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

/* One link over the whole of a row's information (بند ۱۰ و ۱۳).

   Two parts and a gap between them (بند ۱۳ of تسک ۱۴۰۵/۰۶/۰۶/۱۵): the reading
   on its own at the start of the row, and everything about the gallery after
   it. No inline padding, so the reading begins exactly under the card's icon
   rather than four pixels inside it — «شروع ستون زمان … با ساختار عنوان و آیکون
   بالای کارت هماهنگ باشد». */
.fi-latest-gallery-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    min-height: 2rem;
    text-decoration: none;
    color: inherit;
    border-radius: 0.5rem;
    padding: 0.125rem 0;
    transition: background-color 150ms ease;
}

/* بند ۱۲: a place with no gallery in it keeps the height of one and is not a
   link — there is nothing for it to lead to, so it does not light up under the
   pointer either (بند ۱۸: nothing that is not a link is made to look like one). */
.fi-latest-gallery-row-empty,
.fi-latest-gallery-row-empty:hover,
.dark .fi-latest-gallery-row-empty:hover {
    cursor: default;
    background-color: transparent;
}

.fi-latest-gallery-placeholder {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gray-500, #6b7280);
}

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

/* The gallery itself — the portrait, the rule and the words — as one part, so
   the reading beside it is a column of its own rather than the first word of
   the same sentence (بند ۱۳). */
.fi-latest-gallery-gallery {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.fi-latest-gallery-row:hover {
    background-color: var(--gray-100, #f3f4f6);
}

.dark .fi-latest-gallery-row:hover {
    background-color: var(--gray-800, #1f2937);
}

/* How long ago, first in the row and in the panel's green so it is found
   without being read (بند ۹ و ۱۶). It never wraps: a reading of three words is
   not worth two lines, and the gallery's name is what the width is for. */
.fi-latest-gallery-ago {
    flex: none;
    /* A column rather than a word: every reading in the card begins at the same
       place, which is what makes the three of them read down as well as across
       (بند ۱۳). Wide enough for «۳ دقیقه قبل», the longest of them. */
    width: 5.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--success-600, #16a34a);
}

.dark .fi-latest-gallery-ago {
    color: var(--success-400, #4ade80);
}

/* داش-۰۲ و ۰۳: the maker's mark is a fixed circle with the panel's own initials
   in it, and the portrait — when there is one and it loads — is laid over them.

   So a row is the same height whether the maker has a picture or not, and a
   picture that cannot be fetched leaves the initials rather than the browser's
   broken-image mark. Nothing is hidden by this: an employee who has a portrait
   still sees it, from an address of the panel's own that the browser keeps for
   a year. */
.fi-latest-gallery-mark {
    position: relative;
    display: block;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

.fi-latest-gallery-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--gray-600, #4b5563);
    background-color: var(--gray-200, #e5e7eb);
}

.dark .fi-latest-gallery-initials {
    color: var(--gray-300, #d1d5db);
    background-color: var(--gray-700, #374151);
}

.fi-latest-gallery-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

/* بند ۹: the upright yellow rule between the portrait and the gallery. */
.fi-latest-gallery-rule {
    flex: none;
    width: 2px;
    align-self: stretch;
    min-height: 1.5rem;
    border-radius: 1px;
    background-color: var(--warning-400, #fbbf24);
}

.fi-latest-gallery-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.375rem;
    min-width: 0;
}

/* The name of the match, larger than what sits under it (بند ۹). Two lines at
   most, so a long fixture wraps instead of pushing the card wider (بند ۱۸). */
.fi-latest-gallery-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--gray-900, #111827);
}

.dark .fi-latest-gallery-title {
    color: var(--gray-100, #f3f4f6);
}

/* The date of the match and the competition — smaller, of ordinary weight, and
   never louder than the name above them (بند ۹). */
.fi-latest-gallery-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--gray-500, #6b7280);
}

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

.fi-latest-gallery-sep {
    color: var(--gray-300, #d1d5db);
}

.dark .fi-latest-gallery-sep {
    color: var(--gray-600, #4b5563);
}

/* بند ۱۱.۱ of تسک ۱۴۰۵/۰۶/۰۶/۱۵ — the row that belongs to these two cards is
   the widget's own two-column grid ({@see LatestGalleriesWidget}), not a width
   written here: there is no third place for another card to fall into, at any
   screen. Nothing in this stylesheet decides it, and nothing here should. */

/* ─────────────────────────────────────────────────────────────────────────────
   داش-۰۶ — «همگام‌سازی با بالیگپا»'s two states are told the same way.

   The dot already turned red when a bank was failing; the card's side edge did
   not, because `.fi-stat-monitoring` above paints every card of this section
   green and the sync tile had nothing to say otherwise. So the tile read green
   at a glance while reporting an error inside itself — «اگر فقط یکی از این دو
   وضعیت تغییر رنگ می‌دهد، هماهنگ شوند».

   Only the failing state is written. The healthy one already draws green from
   the rule above and is untouched, which is what داش-۰۶ asks for: «اگر همین
   رفتار اکنون کامل و صحیح وجود دارد، تغییر اضافی انجام نشود».
   ───────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-monitoring.fi-sync-state-error,
:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-monitoring.fi-sync-state-error {
    border-inline-start-color: var(--danger-400, #f87171);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «مانیتورینگ حجم سرور» (سرور-۱۰ … ۱۳ و ۲۵)

   The card carries two storages' worth of rows rather than one figure, so it
   takes the same escape from the square that «همگام‌سازی با بالیگپا» and
   «آخرین گالری‌ها» take and grows to what it holds. Everything else — the
   corner, the padding, the 3px edge, the beating dot — is the section's own and
   is inherited rather than restated.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage {
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* سرور-۲۵: any of the three failures — no room, no answer, an answer too old —
   and the edge is red, level with the dot beside the title. */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-alert,
:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-alert {
    border-inline-start-color: var(--danger-400, #f87171);
}

/* Nothing measured yet — the state between a deploy and the first pass. Neither
   green nor red, because neither «سالم» nor «خطا» is true of it. */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-unmeasured,
:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-unmeasured {
    border-inline-start-color: var(--gray-400, #9ca3af);
}

/* بند ۱ of تسک ۱۴۰۵/۰۶/۰۸/۰۹ — this card has no round mark at all.

   It used to carry a `fi-storage-stat-dot`, of its own class so that a state
   written on another card's class could not turn up in that card's readings.
   The task asks for the opposite of a second mark: «نشانگر دایره‌ای اضافی
   ایجاد نشود» — the upright edge beside the card, which already says green,
   red or grey three rules above, is the whole indicator. So the dot is gone
   from the view and its rules from here, and what is left to add is the slow
   breath the task asks that edge for.

   Only the two states that want a person breathe. A green card with room on
   every disk is a card with nothing to say, and a strip that never stops
   moving stops being read. */
@keyframes fi-storage-edge-alert {
    0%,
    100% {
        border-inline-start-color: var(--danger-400, #f87171);
    }

    50% {
        border-inline-start-color: var(--danger-900, #7f1d1d);
    }
}

@keyframes fi-storage-edge-unmeasured {
    0%,
    100% {
        border-inline-start-color: var(--gray-400, #9ca3af);
    }

    50% {
        border-inline-start-color: var(--gray-800, #1f2937);
    }
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-alert {
    animation: fi-storage-edge-alert 2.4s ease-in-out infinite;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-unmeasured {
    animation: fi-storage-edge-unmeasured 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-alert,
    .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage.fi-storage-state-unmeasured {
        animation: none;
    }
}

.fi-storage-stat-sources {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.fi-storage-stat-name {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gray-500, #6b7280);
}

.dark .fi-storage-stat-name {
    color: var(--gray-400, #9ca3af);
}

.fi-storage-stat-row,
.fi-storage-stat-sum {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.fi-storage-stat-sum {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.dark .fi-storage-stat-sum {
    border-top-color: var(--gray-700, #374151);
}

.fi-storage-stat-cell {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
}

.fi-storage-stat-label {
    font-size: 0.6875rem;
    color: var(--gray-500, #6b7280);
}

.dark .fi-storage-stat-label {
    color: var(--gray-400, #9ca3af);
}

.fi-storage-stat-value {
    font-size: 0.8125rem;
    font-weight: 700;
}

/* سرور-۰۹: کل سفید، استفاده‌شده قرمز، خالی سبز — the same three colours the
   management draws, from the panel's own palette. */
.fi-storage-value-total {
    color: var(--gray-900, #111827);
}

.dark .fi-storage-value-total {
    color: #fff;
}

.fi-storage-value-used {
    color: var(--danger-600, #dc2626);
}

.dark .fi-storage-value-used {
    color: var(--danger-400, #f87171);
}

.fi-storage-value-free {
    color: var(--success-600, #16a34a);
}

.dark .fi-storage-value-free {
    color: var(--success-400, #4ade80);
}

/* سرور-۲۵: why the card is red, in the card. */
.fi-storage-stat-reasons {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.35rem;
}

.fi-storage-stat-reason {
    font-size: 0.6875rem;
    color: var(--danger-600, #dc2626);
}

.dark .fi-storage-stat-reason {
    color: var(--danger-400, #f87171);
}

/* ─────────────────────────────────────────────────────────────────────────────
   داش-۰۴ و ۰۵: the mark at the head of «آخرین گالری‌های بالیگپا» و «آخرین
   گالری‌های آژانس».

   Exactly the box the heroicon it replaces occupied — Filament draws a stat's
   label icon at 1.25rem — so the title beside it does not move and the two
   cards are still the same shape. Both marks take this one rule, which is what
   «اندازه آن با لوگوی کادر بالیگپا یکسان باشد» asks for: the sizes cannot
   drift apart because there is only one of them.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-latest-gallery-logo {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────────────────────
   بند ۲ of تسک ۱۴۰۵/۰۶/۰۸/۰۵ — «گزارش‌های فراداده» wears a blue edge.

   The four metadata cards left «مانیتورینگ» and stand under a heading of their
   own. Only the colour of the side edge changes: its 3px, its solid line, the
   corner it is drawn against and the spacing around it are the shared rule's
   and are untouched, exactly as «مانیتورینگ»'s green leaves them.

   Scoped by a class on the card, and written after both the yellow rule and the
   green one, because a metadata card no longer carries `fi-stat-monitoring` at
   all — the class was swapped on each of the four views, which is the element
   the edge is really painted on.

   The colours *inside* the cards are not mentioned here and are untouched: a
   green, a red or a grey in a metadata card means a state, and this blue is
   only the group's identity on the dashboard.
   ───────────────────────────────────────────────────────────────────────────── */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-metadata-report,
:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-metadata-report {
    border-inline-start-color: var(--info-400, #60a5fa);
}

/* The four keep the shape they had in «مانیتورینگ» (بند ۹): out of the square,
   because each holds a title and three figures rather than one number. They
   used to take this from the rule «وضعیت واترمارک عمومی» is in, through the
   `fi-stat-monitoring` they no longer carry. */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-metadata-report {
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
}

/* ─────────────────────────────────────────────────────────────────────────────
   بند ۵ و ۶ — «مانیتورینگ فضای ذخیره‌سازی» at the width of two tiles.

   The card is the standard card, twice as wide: same corners, same border, same
   background, same padding, same shadow, same 3px edge and the same beating dot
   (بند ۷). Nothing here is a new design — every rule below only spends the
   width the grid now gives it.

   The two storages sit beside each other instead of one above the other, so the
   card fills its row rather than leaving half of it empty and growing taller
   than the tiles next to it (بند ۵: «ارتفاع کارت در دسکتاپ با ارتفاع استاندارد
   سایر کارت‌های همان ردیف هماهنگ باشد»).

   The figures are a step larger and the labels stand above them rather than
   beside them, which is what بند ۶ asks for — «اعداد اصلی باید نسبت به وضعیت
   فعلی واضح‌تر و برجسته‌تر باشند». Not one new figure is added to fill the
   space.
   ───────────────────────────────────────────────────────────────────────────── */
/* The card is its own query container, so «is there room to spread the figures
   out» is asked of the CARD and not of the widget around it. Measured in a
   browser: at a 900px window the widget is still wide enough to satisfy a query
   about itself while the card inside it has shrunk to the width of an ordinary
   tile, and the readings then sat on top of one another. */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-server-storage-wide {
    container-type: inline-size;
    container-name: storage-card;
}

/* …and each row wraps rather than overlapping, at every width and whatever the
   figures turn out to say. */
.fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-row,
.fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-sum {
    flex-wrap: wrap;
}

/* 17rem, measured: the card's content box is 19rem exactly at two tiles and
   15.25rem when the grid has narrowed it to one, so the threshold sits between
   the two rather than on the boundary — where a fraction of a pixel decided
   whether the rule applied at all. */
@container storage-card (min-width: 17rem) {
    /* The two storages stay one above the other — measured in a browser, where
       putting them side by side at this width left «استفاده‌شده» and its figure
       on top of each other. What the extra width buys is distance *along* each
       row: the three readings spread across the card instead of crowding into
       its first third. */
    .fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-sources {
        gap: 0.5rem;
    }

    .fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-row,
    .fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-sum {
        justify-content: space-between;
        gap: 0.75rem;
    }

    .fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-cell {
        gap: 0.375rem;
    }

    /* The figures a manager actually reads, a step larger than the labels
       beside them (بند ۶). */
    .fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-value {
        font-size: 0.9375rem;
    }

    .fi-wi-stats-overview .fi-stat-server-storage-wide .fi-storage-stat-name {
        font-size: 0.75rem;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   تسک ۱۴۰۵/۰۶/۰۸/۰۹ — «اصلاح ظاهر و وضعیت کارت‌های داشبورد».

   Appearance only. Every state below is read from the figures the cards already
   carry (بند ۱۱), and nothing here decides a number.
   ═════════════════════════════════════════════════════════════════════════════ */

/* بند ۲ — «آخرین تغییرات فنی سایت» starts at the top, like everything beside it.

   Filament centres a stat's content in the tile. That is right for a tile
   holding one big number and wrong for this one, which holds a title, a name
   and a stamp: the block sat 40px down where every card beside it starts at
   14px, and the card looked half empty at the top and cramped at the bottom.
   The bottom is left empty on purpose — بند ۲ says so outright. */
.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-technical-changes {
    justify-content: flex-start;
}

/* بند ۳ — the mark of a finished rebuild: a still green tick where the beating
   dot was, at the size and in the place the dot had. */
.fi-watermark-card-done {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--success-400, #4ade80);
}

/* بند ۴ و ۵ — «آخرین گالری‌های بالیگپا» green, «آخرین گالری‌های آژانس» yellow.

   **Not here.** «عنوان کارت آماری داشبورد» is a role «استانداردسازی نمای پنل»
   owns, and a stylesheet may not decide a property that management owns — not
   «may not disagree with», may not decide at all, because a second declaration
   is a second place to change. The two colours are two exception rows written
   by `…_the_two_galleries_cards_are_told_apart_by_colour.php`, so they are
   visible in «مشاهده موارد» beside every other place of the role. This note is
   what is left in the stylesheet, so the next person looking for the rule finds
   the answer rather than nothing. */

/* بند ۶ — the four «گزارش‌های فراداده» titles read like «مانیتورینگ فضای
   ذخیره‌سازی».

   That card's title is 0.875rem at weight 400; these four were 1rem at 700, so
   a row of cards that hold the same kind of thing announced themselves at two
   different volumes. Only the title's own voice changes — the card, its dot,
   its rows and its spacing are untouched, which is what بند ۶ asks. The colour
   and the distance from the top of the card were already the same. */
:is(.fi-stat-photo-metadata, .fi-stat-metadata-updates, .fi-stat-metadata-incomplete, .fi-stat-metadata-date-mismatch) .fi-watermark-card-title.fi-metadata-report-title {
    font-size: 0.875rem;
    font-weight: 400;
}

/* بند ۷ — a hairline between the readings of a long report card.

   It runs from where the label starts to where the figure ends — the row's own
   width — and the card's padding is what keeps it clear of the edges, so it is
   never a line drawn across the whole card. Faint enough to separate and not
   to divide. */
.fi-stat-metadata-report .fi-watermark-card-figure + .fi-watermark-card-figure {
    border-top: 1px solid var(--gray-200, #e5e7eb);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
}

:where(.dark) .fi-stat-metadata-report .fi-watermark-card-figure + .fi-watermark-card-figure {
    border-top-color: color-mix(in srgb, var(--gray-100, #f3f4f6) 12%, transparent);
}

/* بند ۹ — «آخرین فعالیت پردازشگر»: the day in the agency's yellow, the clock
   white, and a separator between them that is neither. */
.fi-metadata-last-activity {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.fi-metadata-activity-date {
    color: var(--warning-400, #fbbf24);
}

.fi-metadata-activity-sep {
    color: var(--gray-400, #9ca3af);
    opacity: 0.7;
}

/* The clock keeps the reading colour of every other figure on the card, said
   here so the yellow beside it cannot be read as «this whole line is yellow». */
.fi-metadata-activity-clock {
    color: var(--gray-900, #111827);
}

:where(.dark) .fi-metadata-activity-clock {
    color: var(--gray-100, #f3f4f6);
}

/* بند ۱۰ — «کاربران جدید ۲۴ ساعت اخیر» is read as easily as the total.

   Same size, same weight, and green — so the two rows differ by colour and by
   caption rather than by how loud they are. The month below keeps its own
   smaller size; بند ۱۰ asks only that its row line up with the two above, and
   the column rule does that. */
.fi-site-users-figure-day .fi-site-users-value,
.dark .fi-site-users-figure-day .fi-site-users-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--success-400, #4ade80);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «فضای ذخیره‌سازی تصاویر» — the live state of the store the photographs live in
   (بخش چهارم و ششم of تسک ۱۴۰۵/۰۷/۰۱/۳۲-۰۳).

   The shape of «همگام‌سازی با بالیگپا» above it, which الزام گالری ۳۳-۰۸ asks for
   in so many words: the same corners, padding, border and width, out of the
   square because it holds a title and a stack of rows rather than one number.
   Everything below is either that card's rule under this card's name, or
   something only this card needs.
   ────────────────────────────────────────────────────────────────────────── */

.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-image-storage {
    aspect-ratio: auto;
    height: 100%;
    justify-content: flex-start;
}

.fi-stat-image-storage .fi-storage-health-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The card's strongest text, at the size and weight of the tiles beside it.
   Light page as the base and dark page as the exception, for the reason the sync
   card's own comment gives: a `:where(:not(.dark))` written afterwards matches
   the dark page too and wins there by order. */
.fi-stat-image-storage .fi-storage-health-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
    overflow-wrap: anywhere;
    min-width: 0;
}

.dark .fi-stat-image-storage .fi-storage-health-title {
    color: var(--color-white, #ffffff);
}

/* الزام گالری ۳۳-۰۹ و ۳۳-۱۰: the light itself. */
.fi-storage-health-dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--gray-400, #9ca3af);
}

.fi-storage-health-dot-healthy {
    background-color: var(--success-500, #22c55e);
}

.fi-storage-health-dot-outage {
    background-color: var(--danger-500, #ef4444);
}

/* الزام گالری ۳۳-۱۱: neither green nor red while the answer is not in. Grey and
   not amber — amber on this dashboard already means «دارای خطا» on the tile next
   door, and «در حال بررسی» is not an error. */
.fi-storage-health-dot-checking {
    background-color: var(--gray-400, #9ca3af);
}

/* الزام گالری ۳۳-۰۹: «چشمک‌زدن چراغ سبز باید آرام و استاندارد باشد و باعث آزار
   دیداری نشود», and الزام گالری ۳۳-۲۰: «چشمک‌زدن چراغ باعث جابه‌جایی عناصر
   نشود».

   Its own keyframes rather than the `fi-live-pulse` the discount and sync tiles
   share: that one grows the dot by a quarter and throws a green halo out of it,
   which on a red light would be a red dot with a green glow. This animates
   opacity and nothing else — no size, no position, no shadow — so it cannot move
   a neighbour whatever colour the dot is, and it never drops below a third so
   the light is visible at every frame.

   And a steady dot for anyone who has asked their system to stop animating. */
@keyframes fi-storage-health-breath {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

.fi-storage-health-dot-beating {
    animation: fi-storage-health-breath 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fi-storage-health-dot-beating {
        animation: none;
    }
}

/* الزام گالری ۳۳-۱۷: the rows that are read without opening anything, at the
   spacing of the rows on the tiles beside it so the row of cards keeps one
   height. */
.fi-stat-image-storage .fi-storage-health-figures,
.fi-stat-image-storage .fi-storage-health-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.875;
}

.fi-storage-health-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    min-width: 0;
}

.fi-storage-health-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-storage-health-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* الزام گالری ۳۳-۱۹: the status row is coloured, but the words are there in
   every state — the light and the colour are never the only thing saying which
   state this is. Each page takes the shade it can carry, so both are legible in
   حالت شب and حالت روز. */
.fi-storage-health-state-healthy .fi-storage-health-figure-status {
    color: var(--success-700, #15803d);
}

.dark .fi-storage-health-state-healthy .fi-storage-health-figure-status {
    color: var(--success-400, #4ade80);
}

.fi-storage-health-state-outage .fi-storage-health-figure-status {
    color: var(--danger-700, #b91c1c);
}

.dark .fi-storage-health-state-outage .fi-storage-health-figure-status {
    color: var(--danger-400, #f87171);
}

.fi-storage-health-state-checking .fi-storage-health-figure-status {
    color: var(--gray-600, #4b5563);
}

.dark .fi-storage-health-state-checking .fi-storage-health-figure-status {
    color: var(--gray-300, #d1d5db);
}

/* الزام گالری ۳۳-۱۸: the way into the details. A plain word rather than a
   button's box — the card is a reading, and a raised control on it would read as
   «do something». Not `.fi-btn`, on purpose: that is a role the panel's own
   standards own, and this is not one of them. */
.fi-storage-health-toggle {
    align-self: flex-start;
    margin-block-start: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    color: var(--gray-600, #4b5563);
}

.dark .fi-storage-health-toggle {
    color: var(--gray-300, #d1d5db);
}

.fi-storage-health-toggle:hover,
.fi-storage-health-toggle:focus-visible {
    color: var(--gray-900, #111827);
}

.dark .fi-storage-health-toggle:hover,
.dark .fi-storage-health-toggle:focus-visible {
    color: var(--color-white, #ffffff);
}

/* Not drawn at all before Alpine has taken the card over, so the details never
   flash open on the way in. */
.fi-stat-image-storage [x-cloak] {
    display: none !important;
}

/* الزام گالری ۳۳-۲۰: the details are inside the card and wrap, so on a telephone
   they stay within the width of the screen instead of pushing it wider. */
.fi-stat-image-storage .fi-storage-health-details {
    border-block-start: 1px solid var(--gray-200, #e5e7eb);
    padding-block-start: 0.5rem;
}

.dark .fi-stat-image-storage .fi-storage-health-details {
    border-block-start-color: var(--gray-700, #374151);
}

.fi-storage-health-figure-outage .fi-storage-health-value,
.fi-storage-health-figure-error .fi-storage-health-value {
    color: var(--danger-700, #b91c1c);
}

.dark .fi-storage-health-figure-outage .fi-storage-health-value,
.dark .fi-storage-health-figure-error .fi-storage-health-value {
    color: var(--danger-400, #f87171);
}

/* Why the light is the colour it is, said in a sentence rather than left to be
   guessed from a code (الزام گالری ۳۳-۱۰ و ۳۳-۱۸). */
.fi-storage-health-reason {
    font-size: 0.75rem;
    line-height: 1.75;
    color: var(--gray-600, #4b5563);
    overflow-wrap: anywhere;
}

.dark .fi-storage-health-reason {
    color: var(--gray-300, #d1d5db);
}