/*
 * «مانیتورینگ آماری عکاسان» — the one appearance all twelve statistics share
 * (بند ۵ و ۴۴).
 *
 * Every colour here is a «رنگ‌های استاندارد» token, so the palette stays where a
 * manager can reach it and no code of its own is written into a stylesheet or a
 * piece of markup (استاندارد-اصلاح-۰۱۲). The dozen `--pstat-tint` rules are the
 * whole of بند ۱۸: a management's identity colour is one line, and a thirteenth
 * management is one more line.
 */

.fi-pstat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    --pstat-tint: var(--std-color-chart-blue);
}

/* بند ۱۸ — one identity colour per management, and بند ۱۹: the pie's slices are
   a separate palette, because there the point is telling photographers apart. */
.fi-pstat-sold-photos { --pstat-tint: var(--std-color-chart-blue); }
.fi-pstat-sales-amount { --pstat-tint: var(--std-color-chart-green); }
.fi-pstat-photographer-share { --pstat-tint: var(--std-color-chart-gold); }
.fi-pstat-sale-rate { --pstat-tint: var(--std-color-chart-teal); }
.fi-pstat-gallery-count { --pstat-tint: var(--std-color-chart-purple); }
.fi-pstat-galleries-with-sales { --pstat-tint: var(--std-color-chart-lime); }
.fi-pstat-successful-gallery-rate { --pstat-tint: var(--std-color-chart-violet); }
.fi-pstat-available-photos { --pstat-tint: var(--std-color-chart-cyan); }
.fi-pstat-uploaded-photos { --pstat-tint: var(--std-color-chart-orange); }
.fi-pstat-average-sale-per-gallery { --pstat-tint: var(--std-color-chart-magenta); }
.fi-pstat-average-photos-per-gallery { --pstat-tint: var(--std-color-chart-sky); }
.fi-pstat-average-sale-per-photo { --pstat-tint: var(--std-color-chart-amber); }

/* ── The page heading (تسک ۱۴۰۵/۰۷/۱۸ — ۰۵، بند ۳) ─────────────────────────
   Three quarters of the size the heading had — `em`, so it is exactly 75% at
   every width Filament sizes the heading for — then a vertical rule and the
   page's own figure on the same line, wrapping cleanly when the line is short. */

.fi-pstat-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-size: 0.75em;
    line-height: 1.5;
}

.fi-pstat-heading-rule {
    display: inline-block;
    width: 1px;
    height: 1.1em;
    background-color: var(--std-color-gray-400);
}

.fi-pstat-heading-figure {
    white-space: nowrap;
}

/* تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۳: the figure is yellow — value and unit — and the
   title stays white. Neither colour is written here: the figure carries
   `fi-list-count-heading-count`, «عدد آمار هدر» of «استانداردسازی نمای پنل»,
   and its size stays the heading's own through an exception row of that
   management (migration 2026_10_11_100000). */

/* ── The filter band (بند ۳۳) ─────────────────────────────────────────────── */

.fi-pstat-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200);
    background-color: var(--std-color-color-white);
}

:where(.dark) .fi-pstat-filters {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-900);
}

.fi-pstat-filter {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 9rem;
}

/* تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۸: the four labels a fifth larger than the 0.6875rem
   they were — 0.825rem is exactly 1.2× — and only the labels: the fields, the
   value inside them and the lists are untouched. */
.fi-pstat-filter-label {
    font-size: 0.825rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-filter-label {
    color: var(--std-color-gray-400);
}

.fi-pstat-select,
.fi-pstat-picker-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    background-color: var(--std-color-color-white);
    color: var(--std-color-gray-900);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

:where(.dark) .fi-pstat-select,
:where(.dark) .fi-pstat-picker-trigger {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-800);
    color: var(--std-color-gray-100);
}

/* The list the trigger opens — ours, not the browser's, so it is readable on the
   dark skin and reachable by a test. */
.fi-pstat-options {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    margin-block-start: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    background-color: var(--std-color-color-white);
}

:where(.dark) .fi-pstat-options {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-800);
}

.fi-pstat-option {
    display: block;
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    text-align: start;
    color: var(--std-color-gray-700);
    cursor: pointer;
}

:where(.dark) .fi-pstat-option {
    color: var(--std-color-gray-200);
}

/* تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۵: every other row a shade apart, so twelve months
   read as rows rather than as one block. The pair is the panel's own zebra —
   the washes the sales tables already wear (`--agency-zebra-*`) — so the dark
   skin keeps its look. The order of the rules is the order of precedence: a
   row under the pointer is a third, bluer wash, and the chosen row keeps its
   yellow over both. */
.fi-pstat-option:nth-child(odd) {
    background-color: var(--agency-zebra-odd);
}

.fi-pstat-option:nth-child(even) {
    background-color: var(--agency-zebra-even);
}

.fi-pstat-option:hover {
    background-color: var(--agency-zebra-hover);
}

/* Two classes, after the zebra and the hover, so the chosen row keeps its
   yellow wash on any row and under the pointer (تسک ۰۶، بند ۵). */
.fi-pstat-option.fi-pstat-option-on {
    background-color: var(--std-color-mix-warning-400-10);
    color: var(--std-color-warning-600);
    font-weight: 700;
}

:where(.dark) .fi-pstat-option.fi-pstat-option-on {
    color: var(--std-color-warning-400);
}

.fi-pstat-picker-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background-color: var(--pstat-tint);
    color: var(--std-color-color-white);
    font-size: 0.6875rem;
}

/* ── The photographer picker (بند ۸ و ۹) ──────────────────────────────────── */

.fi-pstat-picker {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.fi-pstat-picker-backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--std-color-c-7089ca8c51);
}

.fi-pstat-picker-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: min(32rem, 100%);
    max-height: 80vh;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200);
    background-color: var(--std-color-color-white);
}

:where(.dark) .fi-pstat-picker-box {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-900);
}

.fi-pstat-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.fi-pstat-picker-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--std-color-gray-900);
}

:where(.dark) .fi-pstat-picker-title {
    color: var(--std-color-gray-100);
}

.fi-pstat-picker-tally {
    font-size: 0.75rem;
    color: var(--std-color-gray-500);
}

.fi-pstat-picker-search {
    width: 100%;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    background-color: var(--std-color-color-white);
    color: var(--std-color-gray-900);
    font-size: 0.8125rem;
}

:where(.dark) .fi-pstat-picker-search {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-800);
    color: var(--std-color-gray-100);
}

.fi-pstat-picker-list {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fi-pstat-picker-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    text-align: start;
    color: var(--std-color-gray-700);
    cursor: pointer;
}

:where(.dark) .fi-pstat-picker-option {
    color: var(--std-color-gray-200);
}

.fi-pstat-picker-option:hover {
    background-color: var(--std-color-mix-gray-400-10);
}

.fi-pstat-picker-option-on {
    background-color: var(--std-color-mix-warning-400-10);
    font-weight: 700;
}

.fi-pstat-picker-name {
    flex: 1 1 auto;
    min-width: 0;
}

.fi-pstat-picker-code,
.fi-pstat-picker-off {
    font-size: 0.6875rem;
    color: var(--std-color-gray-500);
}

.fi-pstat-picker-off {
    color: var(--std-color-danger-600);
}

:where(.dark) .fi-pstat-picker-off {
    color: var(--std-color-danger-400);
}

.fi-pstat-picker-empty {
    padding: 1rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--std-color-gray-500);
}

.fi-pstat-picker-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-pstat-picker-action,
.fi-pstat-picker-confirm {
    padding: 0.3125rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--std-color-gray-700);
    cursor: pointer;
}

:where(.dark) .fi-pstat-picker-action,
:where(.dark) .fi-pstat-picker-confirm {
    border-color: var(--std-color-gray-700);
    color: var(--std-color-gray-200);
}

.fi-pstat-picker-confirm {
    margin-inline-start: auto;
    border-color: var(--pstat-tint);
    background-color: var(--pstat-tint);
    color: var(--std-color-color-white);
}

:where(.dark) .fi-pstat-picker-confirm {
    border-color: var(--pstat-tint);
    color: var(--std-color-color-white);
}

/* بند ۹ و ۱۱ — the same round face in the picker and under the column, and the
   panel's own placeholder where a photographer has none. */
.fi-pstat-avatar {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 9999px;
    object-fit: cover;
    background-color: var(--std-color-gray-200);
}

:where(.dark) .fi-pstat-avatar {
    background-color: var(--std-color-gray-700);
}

/* A picture that will not load still reads as a person rather than as the
   browser's broken-image mark (بند ۹). The shape is a mask, so its colour is a
   «رنگ‌های استاندارد» token like every other colour of this panel. */
.fi-pstat-avatar-missing {
    background-color: var(--std-color-gray-400);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/></svg>");
}

:where(.dark) .fi-pstat-avatar-missing {
    background-color: var(--std-color-gray-600);
}

/* ── What the number means, and the four summary figures (بند ۲۰ و ۲۸) ────── */

.fi-pstat-definition {
    font-size: 0.75rem;
    line-height: 1.9;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-definition {
    color: var(--std-color-gray-400);
}

.fi-pstat-basis {
    display: inline-block;
    margin-inline-end: 0.375rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background-color: var(--pstat-tint);
    color: var(--std-color-color-white);
    font-size: 0.6875rem;
    font-weight: 700;
}

.fi-pstat-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .fi-pstat-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fi-pstat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200);
    border-inline-start: 3px solid var(--pstat-tint);
    background-color: var(--std-color-color-white);
}

:where(.dark) .fi-pstat-tile {
    border-color: var(--std-color-gray-700);
    border-inline-start-color: var(--pstat-tint);
    background-color: var(--std-color-gray-900);
}

/* تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۷: the four titles — «عکاس برتر» among them — a
   quarter larger than the 0.6875rem they were (0.859375rem is exactly 1.25×).
   Weight and colour as before. */
.fi-pstat-tile-label {
    font-size: 0.859375rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-tile-label {
    color: var(--std-color-gray-400);
}

/* تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۱۰: the figures of the first three cards a fifth
   larger than the 1rem they were. The leader's name and figure keep their
   sizes — see `.fi-pstat-leader-name` below. */
.fi-pstat-tile-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--std-color-warning-600);
}

/* تسک ۱۴۰۵/۰۷/۱۸ — ۰۵، بند ۴: every figure of the second row in the panel's
   own yellow — the shade the sidebar and the chosen options already wear. */
:where(.dark) .fi-pstat-tile-value {
    color: var(--std-color-warning-400);
}

/* بند ۴.۱ — «عکاس برتر» with the photographer's face on the left of the card,
   centred on it, sized so the card is no taller than its neighbours. */
.fi-pstat-tile-leader {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.fi-pstat-tile-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.fi-pstat-leader-name {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.fi-pstat-leader-figure {
    font-size: 0.8125rem;
}

/* تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۴: one and a half times the 2.75rem it was, and a
   quarter-rem in from the card's edge so it no longer sits on the border. The
   card's text column is already taller than 4.125rem, so the card does not
   grow; `flex: none` on every avatar keeps it round and off the text on a
   narrow screen. */
.fi-pstat-leader-avatar {
    width: 4.125rem;
    height: 4.125rem;
    margin-inline-start: auto;
    margin-inline-end: 0.25rem;
    align-self: center;
}

/* ── The charts (بند ۱۰ … ۱۷، ۳۹ و ۴۰) ────────────────────────────────────── */

.fi-pstat-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200);
    background-color: var(--std-color-color-white);
}

:where(.dark) .fi-pstat-card {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-900);
}

.fi-pstat-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--std-color-gray-900);
}

:where(.dark) .fi-pstat-card-title {
    color: var(--std-color-color-white);
}

/* تسک ۰۵، بند ۶: the statistic in yellow, a vertical rule — not a dash — and
   the window left in the title's own white. Both charts, one rule. */
.fi-pstat-card-name {
    color: var(--std-color-warning-600);
}

:where(.dark) .fi-pstat-card-name {
    color: var(--std-color-warning-400);
}

.fi-pstat-card-rule {
    display: inline-block;
    width: 1px;
    height: 1.1em;
    background-color: var(--std-color-gray-400);
}

/* تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۹ و ۱۶: the overall figure behind the year, not
   bold. تسک ۱۴۰۵/۰۷/۱۹/۰۹، بند ۴: on the twelve pages it is no longer the
   title's white but the statistic's own colour — the number and its unit
   together, and only they; the name and the year are untouched. The colour
   is the page's `--pstat-tint`, the one its columns are drawn in, so it is
   set once at the head of this file and nowhere per page. */
.fi-pstat-card-figure {
    font-weight: 400;
    white-space: nowrap;
    color: var(--pstat-tint);
}

/* بند ۴۰: the columns scroll inside their own box; the page never goes sideways. */
.fi-pstat-bars-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: 0.25rem;
}

.fi-pstat-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    min-height: 15rem;
}

/* بند ۴۱: the column and its face are one slot, so they scroll together. */
.fi-pstat-bar-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    width: 3.25rem;
}

.fi-pstat-bar-value {
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--std-color-gray-600);
}

:where(.dark) .fi-pstat-bar-value {
    color: var(--std-color-gray-300);
}

.fi-pstat-bar-track {
    position: relative;
    width: 100%;
    height: 11rem;
    border-radius: 0.375rem;
    background-color: var(--std-color-mix-gray-400-10);
}

.fi-pstat-bar {
    position: absolute;
    inset-inline: 0;
    width: 100%;
    min-height: 0.25rem;
    border-radius: 0.375rem;
    background-color: var(--pstat-tint);
}

/* تسک ۱۴۰۵/۰۷/۱۹/۰۸، بند ۵.۳ و ۱۲: with a negative figure on the chart the
   zero line is drawn across every track, and a column below it is the
   danger colour, so a minus is never read as a smaller plus. */
.fi-pstat-bars-signed .fi-pstat-bar-track::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: var(--pstat-zero);
    height: 1px;
    background-color: var(--std-color-gray-400);
}

.fi-pstat-bar-slot.is-negative .fi-pstat-bar {
    background-color: var(--std-color-danger-500);
}

.fi-pstat-bar-slot.is-negative .fi-pstat-bar-value {
    color: var(--std-color-danger-500);
}

/* «بدون داده» is not a zero: an empty dashed outline in place of a column. */
.fi-pstat-bar-slot.is-missing .fi-pstat-bar {
    height: 100% !important;
    top: 0 !important;
    background-color: transparent;
    border: 1px dashed var(--std-color-gray-400);
}

.fi-pstat-bar-slot.is-missing .fi-pstat-bar-value {
    font-weight: 500;
    color: var(--std-color-gray-400);
}

.fi-pstat-bar:hover {
    outline: 2px solid var(--std-color-warning-500);
    outline-offset: 1px;
}

.fi-pstat-bar-avatar {
    width: 2rem;
    height: 2rem;
}

.fi-pstat-pie-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.fi-pstat-pie-box {
    position: relative;
    flex: none;
}

.fi-pstat-pie {
    display: block;
    width: 13rem;
    height: 13rem;
    overflow: visible;
    /* بند ۱۰.۲: a finger on a slice shows it; a finger dragging still scrolls. */
    touch-action: pan-y;
}

.fi-pstat-slice {
    stroke: var(--std-color-color-white);
    stroke-width: 0.5;
    cursor: pointer;
    transition: opacity 120ms ease, filter 120ms ease;
}

:where(.dark) .fi-pstat-slice {
    stroke: var(--std-color-gray-900);
}

/* بند ۹ و ۱۰: one slice lit, the rest dimmed — no movement and no change of
   size, so the circle never jumps under the pointer. */
.fi-pstat-pie-row.is-pointing .fi-pstat-slice {
    opacity: 0.35;
}

.fi-pstat-pie-row.is-pointing .fi-pstat-slice.is-active {
    opacity: 1;
    filter: brightness(1.15);
    stroke-width: 1.25;
}

/* بند ۱۹: ten colours that are about telling photographers apart, and are
   deliberately not the management's own identity colour. */
.fi-pstat-slice-0 { fill: var(--std-color-chart-blue); background-color: var(--std-color-chart-blue); }
.fi-pstat-slice-1 { fill: var(--std-color-chart-orange); background-color: var(--std-color-chart-orange); }
.fi-pstat-slice-2 { fill: var(--std-color-chart-green); background-color: var(--std-color-chart-green); }
.fi-pstat-slice-3 { fill: var(--std-color-chart-magenta); background-color: var(--std-color-chart-magenta); }
.fi-pstat-slice-4 { fill: var(--std-color-chart-teal); background-color: var(--std-color-chart-teal); }
.fi-pstat-slice-5 { fill: var(--std-color-chart-gold); background-color: var(--std-color-chart-gold); }
.fi-pstat-slice-6 { fill: var(--std-color-chart-violet); background-color: var(--std-color-chart-violet); }
.fi-pstat-slice-7 { fill: var(--std-color-chart-lime); background-color: var(--std-color-chart-lime); }
.fi-pstat-slice-8 { fill: var(--std-color-chart-sky); background-color: var(--std-color-chart-sky); }
.fi-pstat-slice-9 { fill: var(--std-color-chart-purple); background-color: var(--std-color-chart-purple); }

/* بند ۸: larger, airier and in as many columns as the width allows. The type
   is a sixth larger than the 0.75rem it was — 0.875rem is exactly 7/6 of it. */
.fi-pstat-legend {
    flex: 1 1 18rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.625rem 1.25rem;
    min-width: 0;
}

.fi-pstat-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--std-color-gray-700);
    cursor: default;
    transition: background-color 120ms ease, opacity 120ms ease;
}

:where(.dark) .fi-pstat-legend-row {
    color: var(--std-color-gray-200);
}

.fi-pstat-pie-row.is-pointing .fi-pstat-legend-row {
    opacity: 0.55;
}

.fi-pstat-pie-row.is-pointing .fi-pstat-legend-row.is-active {
    opacity: 1;
    background-color: var(--std-color-mix-warning-400-10);
    font-weight: 700;
}

.fi-pstat-legend-chip {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    border-radius: 0.1875rem;
}

/* A long name wraps rather than being cut off — it must stay readable. */
.fi-pstat-legend-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-pstat-legend-rule {
    flex: none;
    width: 1px;
    height: 1em;
    background-color: var(--std-color-gray-400);
}

.fi-pstat-legend-share {
    flex: none;
    font-weight: 700;
    white-space: nowrap;
}

/* بند ۱۰: what the pointer over a slice reveals — who, how much, what share. */
.fi-pstat-pie-tip {
    position: absolute;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 9rem;
    max-width: 16rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-200);
    background-color: var(--std-color-color-white);
    color: var(--std-color-gray-900);
    font-size: 0.8125rem;
    line-height: 1.6;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 0.75rem));
}

.fi-pstat-pie-tip[hidden] {
    display: none;
}

:where(.dark) .fi-pstat-pie-tip {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-800);
    color: var(--std-color-gray-100);
}

.fi-pstat-pie-tip-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.fi-pstat-pie-tip-share {
    color: var(--std-color-warning-600);
    font-weight: 700;
}

:where(.dark) .fi-pstat-pie-tip-share {
    color: var(--std-color-warning-400);
}

.fi-pstat-empty {
    padding: 2rem 1rem;
    border-radius: 0.75rem;
    border: 1px dashed var(--std-color-gray-300);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-empty {
    border-color: var(--std-color-gray-700);
    color: var(--std-color-gray-400);
}

[x-cloak] {
    display: none !important;
}

/* ── The export buttons (تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۶) ─────────────────────────
   Their colour is an exception row of «استانداردسازی نمای پنل», one per
   statistic and taken from its chart's colour; nothing here decides it. All
   this adds is that a pointer over one is still seen, whatever colour the
   page gave it, and that a disabled one reads as disabled. */

.fi-pstat-export-btn:hover,
.fi-pstat-export-btn:focus-visible {
    filter: brightness(1.12);
}

.fi-pstat-export-btn:disabled,
.fi-pstat-export-btn[aria-busy="true"] {
    opacity: 0.6;
    filter: none;
    cursor: progress;
}

/* ── «مقایسه آمارها» (تسک ۱۴۰۵/۰۷/۱۸/۰۶، بند ۱۲ … ۲۱) ──────────────────────
   The filters, then the twelve column charts one under another. Each card
   carries its statistic's own `fi-pstat-<key>` class, so its columns wear
   that statistic's colour exactly as on its own page. */

.fi-pstat-compare-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: opacity 120ms ease;
}

/* بند ۲۰: while the filters are being applied the old charts are dimmed, so
   they are never read as the answer to the new question. */
.fi-pstat-compare-list.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.fi-pstat-compare-loading {
    font-size: 0.8125rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-compare-loading {
    color: var(--std-color-gray-400);
}

/* بند ۱۵ و ۲۱: the title on the right, the leader's face on the left. */
.fi-pstat-compare-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.fi-pstat-compare-head .fi-pstat-card-title {
    flex: 1 1 auto;
    min-width: 0;
    padding-block-start: 0.375rem;
}

.fi-pstat-compare-leader {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-inline-end: 0.25rem;
}

.fi-pstat-compare-leader .fi-pstat-avatar {
    width: 3rem;
    height: 3rem;
}

.fi-pstat-compare-leader-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500);
    white-space: nowrap;
}

:where(.dark) .fi-pstat-compare-leader-label {
    color: var(--std-color-gray-400);
}

/* No leader in the window: an empty circle, never somebody else's face. */
.fi-pstat-compare-leader-none {
    display: inline-block;
    border: 1px dashed var(--std-color-gray-400);
    background-color: transparent;
}

:where(.dark) .fi-pstat-compare-leader-none {
    background-color: transparent;
}

.fi-pstat-compare-card .fi-pstat-empty {
    padding: 1.5rem 1rem;
}

.fi-pstat-compare-error {
    border-color: var(--std-color-danger-400);
    color: var(--std-color-danger-600);
}

:where(.dark) .fi-pstat-compare-error {
    border-color: var(--std-color-danger-400);
    color: var(--std-color-danger-400);
}

/* The icon follows the writing the exception gives the button, so it stays
   readable on every page's colour. */
.fi-pstat-export-btn .fi-icon {
    color: inherit;
}

/* «مبنای محاسبات» (تسک ۱۴۰۵/۰۷/۱۹/۰۸_۰۲، بند ۲۲): the panel's yellow on every
   one of the twelve pages. The yellow itself and the dark writing on it are
   «استانداردسازی نمای پنل»'s — one exception scoped by this class — so nothing
   here names a colour. What is left for a stylesheet is how the button answers
   the pointer and the keyboard, which stays within that yellow, and the
   question mark following the writing. The export buttons beside it are not
   touched. */
.fi-pstat-guide-btn .fi-icon {
    color: inherit;
}

.fi-pstat-guide-btn:hover {
    filter: brightness(1.08);
}

.fi-pstat-guide-btn:focus-visible {
    filter: brightness(1.08);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fi-pstat-guide-btn:active {
    filter: brightness(0.94);
}

/* تسک ۱۴۰۵/۰۷/۱۹/۰۷، بخش سوم: on «مقایسه آمارها» — and so on the dashboard's
   «مانیتورینگ عکاسان», which draws the same partial inside the same
   `.fi-pstat-compare` — the overall figure after the title is the panel's
   green. Only the figure: the statistic keeps its yellow, the year its white,
   and the twelve standalone pages keep the title's own colour. A chart with
   nobody on it prints no figure at all, so the green never stands for «no
   data»; a real zero is printed, and green. */
.fi-pstat-compare .fi-pstat-card-figure {
    color: var(--std-color-success-600);
}

:where(.dark) .fi-pstat-compare .fi-pstat-card-figure {
    color: var(--std-color-success-400);
}

/* The dashboard's «مانیتورینگ عکاسان» (بند ۱۴): a title and one line saying
   which window the charts are of, in place of the compare page's filters. */
.fi-pstat-embedded-head {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-block-end: 0.625rem;
}

/* تسک ۱۴۰۵/۰۷/۱۹/۰۹، بند ۷: the switch, «مبنای نمایش» and the link to
   «مقایسه آمارها» in one row — the switch first, the link at the far end —
   where they were three rows. On a narrow screen whatever does not fit goes
   to the next line whole, never over its neighbour. */
.fi-pstat-embedded-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.875rem;
}

.fi-pstat-embedded-bar .fi-pstat-embedded-link {
    margin-inline-start: auto;
}

.fi-pstat-embedded-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--std-color-gray-900);
}

:where(.dark) .fi-pstat-embedded-title {
    color: var(--std-color-color-white);
}

.fi-pstat-embedded-basis {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-embedded-basis {
    color: var(--std-color-gray-400);
}

.fi-pstat-embedded-link {
    color: var(--std-color-success-600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:where(.dark) .fi-pstat-embedded-link {
    color: var(--std-color-success-400);
}

/* While the tab's twelve charts are on their way (بند ۱۴.۲، قانون ۸). */
.fi-pstat-dashboard-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.fi-pstat-dashboard-loading-text {
    font-size: 0.875rem;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-dashboard-loading-text {
    color: var(--std-color-gray-400);
}

/* ─── «مبنای محاسبات» (تسک ۱۴۰۵/۰۷/۱۹/۰۸، بند ۱۵) ─────────────────────────
   A window in the middle of the page: the title white, bold and centred,
   each question in the statistic's own colour and each answer in white, one
   bordered section apiece, scrolling inside itself when the answers are long.
   The panel is dark in both themes so «white» is always readable. */
.fi-pstat-guide-root {
    display: inline-flex;
    align-items: center;
}

.fi-pstat-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: color-mix(in oklab, var(--std-color-gray-950) 65%, transparent);
}

.fi-pstat-guide-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(42rem, 100%);
    max-height: min(85vh, 48rem);
    border-radius: 0.875rem;
    padding: 1.5rem 1.25rem 1.25rem;
    background-color: var(--std-color-gray-900);
    box-shadow: 0 20px 40px color-mix(in oklab, var(--std-color-gray-950) 45%, transparent);
    color: var(--std-color-color-white);
}

.fi-pstat-guide-title {
    margin: 0;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--std-color-color-white);
}

.fi-pstat-guide-subtitle {
    margin: 0.375rem 0 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--pstat-tint);
}

.fi-pstat-guide-stale {
    margin: 0 0 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    background-color: var(--std-color-mix-danger-400-10);
    color: var(--std-color-danger-300);
}

.fi-pstat-guide-body {
    overflow-y: auto;
    padding-inline-end: 0.25rem;
}

.fi-pstat-guide-item {
    padding: 0.75rem 0;
    border-top: 1px solid color-mix(in oklab, var(--std-color-color-white) 12%, transparent);
}

.fi-pstat-guide-item:first-child {
    border-top: 0;
}

.fi-pstat-guide-question {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--pstat-tint);
}

.fi-pstat-guide-answer {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--std-color-color-white);
}

.fi-pstat-guide-close {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
    color: color-mix(in oklab, var(--std-color-color-white) 70%, transparent);
}

.fi-pstat-guide-close:hover {
    color: var(--std-color-color-white);
}

.fi-pstat-guide-icon {
    display: inline-flex;
    align-items: center;
    color: var(--pstat-tint);
    opacity: 0.85;
}

.fi-pstat-guide-icon:hover,
.fi-pstat-guide-icon:focus-visible {
    opacity: 1;
}

.fi-pstat-guide-icon-svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* بند ۱۴: a dashboard chart's title opens its own statistic in a new tab. */
.fi-pstat-card-link {
    color: inherit;
    text-decoration: none;
}

.fi-pstat-card-link:hover .fi-pstat-card-name,
.fi-pstat-card-link:focus-visible .fi-pstat-card-name {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    cursor: pointer;
}

/* بند ۱۳: «فعال / همه عکاسان» on the dashboard tab — a light switch in the
   tab's own head, not the filter band of the pages. */
.fi-pstat-embedded-status {
    display: inline-flex;
    gap: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.125rem;
    background-color: var(--std-color-mix-gray-400-10);
}

.fi-pstat-embedded-status button {
    border-radius: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--std-color-gray-500);
}

.fi-pstat-embedded-status button.is-current {
    font-weight: 700;
    color: var(--std-color-gray-950);
    background-color: var(--std-color-gray-100);
}

:where(.dark) .fi-pstat-embedded-status button.is-current {
    color: var(--std-color-color-white);
    background-color: var(--std-color-gray-700);
}

/* بند ۵.۱: فروش ناخالص، استرداد، خالص — the parts of the page's figure. */
.fi-pstat-tile-part .fi-pstat-tile-value {
    font-size: 0.9375rem;
}

.fi-pstat-tile-value.is-negative {
    color: var(--std-color-danger-500);
}

@media (max-width: 640px) {
    .fi-pstat-guide-panel {
        max-height: 90vh;
        padding: 1.25rem 0.875rem 0.875rem;
    }

    .fi-pstat-guide-title {
        font-size: 1rem;
    }
}

/* تسک ۱۴۰۵/۰۷/۱۹/۰۹، بند ۱۱.۴: while one statistic is read month by month,
   «سال» and «ماه» stay where they are, grey and unanswering — not hidden —
   and still showing what they were set to, which is what comes back with
   «همه». */
.fi-pstat-filter.is-disabled .fi-pstat-filter-label {
    color: var(--std-color-gray-400);
}

.fi-pstat-filter.is-disabled .fi-pstat-select {
    cursor: not-allowed;
    opacity: 0.55;
    border-style: dashed;
    color: var(--std-color-gray-500);
    background-color: var(--std-color-gray-100);
}

:where(.dark) .fi-pstat-filter.is-disabled .fi-pstat-select {
    color: var(--std-color-gray-400);
    background-color: var(--std-color-gray-900);
}

/* بند ۱۱.۷: a month with nothing in it keeps its box and says so. */
.fi-pstat-compare-month-empty {
    font-weight: 700;
}

/* The line under «تعداد عکس بارگذاری‌شده» saying how far the audit of the
   archive's upload dates has come (بند ۱۸). */
.fi-pstat-audit-note {
    margin: 0;
    border-inline-start: 3px solid var(--pstat-tint);
    padding-inline-start: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--std-color-gray-600);
}

:where(.dark) .fi-pstat-audit-note {
    color: var(--std-color-gray-300);
}


/* ── «مقایسه عملکرد دوره‌ای عکاسان» (تسک ۱۴۰۵/۰۷/۲۱/۱۰) ───────────────────
   One photographer's months or days, so a column is named by its period where
   the compare page has a face; «آینده» is dotted rather than dashed, so it is
   never read as «بدون داده»; and in place of «عکاس برتر» the chart's two image
   exports, in the statistic's own colour. */
.fi-pstat-bar-label {
    display: block;
    min-height: 2rem;
    max-width: 4.5rem;
    margin-inline: auto;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--std-color-gray-600);
    white-space: normal;
}

:where(.dark) .fi-pstat-bar-label {
    color: var(--std-color-gray-300);
}

.fi-pstat-periods[data-pstat-periods="month"] .fi-pstat-bar-label,
.fi-pstat-periods .fi-pstat-bar-label {
    overflow-wrap: anywhere;
}

.fi-pstat-bar-slot.is-future .fi-pstat-bar {
    border-style: dotted;
    opacity: 0.6;
}

.fi-pstat-period-exports {
    display: flex;
    flex: none;
    gap: 0.5rem;
    align-items: center;
    padding-block-start: 0.25rem;
}

.fi-pstat-period-export {
    min-width: 3.25rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--std-color-white);
    background-color: var(--pstat-tint);
    cursor: pointer;
}

.fi-pstat-period-export:hover {
    filter: brightness(1.1);
}

.fi-pstat-period-export[disabled] {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 640px) {
    .fi-pstat-periods .fi-pstat-compare-head {
        flex-wrap: wrap;
    }
}

/* ── «فروش نموداری هر عکاس» (تسک ۱۴۰۵/۰۷/۲۲/۱۰_۰۲) ────────────────────────
   The photographer picker as «آواتار | نام | شناسه» on the field and on every
   option, the field a little wider so a name and its code both read; the
   face beside each chart's exports; an image icon on JPEG and PNG; and the
   tooltip of a period's column, whose figure is larger than the short one
   above the column. */
.fi-pstat-person-filter {
    min-width: 15rem;
    max-width: 20rem;
}

.fi-pstat-person-select,
.fi-pstat-person-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.fi-pstat-person-avatar {
    width: 1.5rem;
    height: 1.5rem;
}

.fi-pstat-person-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-pstat-person-rule {
    flex: none;
    width: 1px;
    height: 0.875rem;
    background-color: var(--std-color-gray-400);
}

.fi-pstat-person-code {
    flex: none;
    font-weight: 600;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-person-code {
    color: var(--std-color-gray-400);
}

.fi-pstat-person-options {
    min-width: 100%;
    max-height: 20rem;
}

.fi-pstat-period-avatar {
    width: 2rem;
    height: 2rem;
}

.fi-pstat-period-export {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.fi-pstat-period-export-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.fi-pstat-bar-tip {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    max-width: 16rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--pstat-tip-tint, var(--std-color-gray-300));
    background-color: var(--std-color-color-white);
    color: var(--std-color-gray-900);
    box-shadow: 0 6px 18px var(--std-color-mix-gray-400-10);
    pointer-events: none;
    text-align: center;
    direction: rtl;
}

:where(.dark) .fi-pstat-bar-tip {
    background-color: var(--std-color-gray-800);
    color: var(--std-color-gray-100);
}

.fi-pstat-bar-tip[hidden] {
    display: none;
}

.fi-pstat-bar-tip-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--std-color-gray-500);
}

:where(.dark) .fi-pstat-bar-tip-title {
    color: var(--std-color-gray-400);
}

/* Larger than the 0.6875rem figure above the column (بند ۳.۲). */
.fi-pstat-bar-tip-value {
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.fi-pstat-bar-slot.is-tipped .fi-pstat-bar-track {
    outline: 1px solid var(--pstat-tint);
}

@media (max-width: 640px) {
    .fi-pstat-person-filter {
        min-width: 100%;
    }
}