/*
 * «مدل مالی عکاسان» — the few things the financial screens draw that Filament
 * has no component for.
 *
 * Nothing here invents a size, a weight or a colour of its own: the readable
 * dates take the very variables «استاندارد‌سازی نمای پنل» already publishes for
 * a field's value (--std-form-field-value-*), and the empty-period rows take
 * Filament's own danger colour. A parallel appearance rule for this one screen
 * is exactly what الزام ظاهر-۰۱ forbids.
 */

/* ── تاریخ‌های پنجره افزودن/ویرایش مدل مالی (الزام ظاهر-۰۱) ───────────────
 *
 * The picked date and the calendar it is picked from were both drawn in a
 * washed-out grey the library ships with, so an operator had to lean in to read
 * a date they are about to attach money to. They now carry the panel's own
 * value colour and weight.
 */
.jdp-container,
jdp-container {
    color: var(--std-form-field-value-color, rgb(17 24 39));
}

.jdp-container .jdp-day,
jdp-container .jdp-day,
.jdp-container .jdp-month,
jdp-container .jdp-month,
.jdp-container .jdp-year,
jdp-container .jdp-year,
.jdp-container .jdp-months,
jdp-container .jdp-months,
.jdp-container .jdp-years,
jdp-container .jdp-years {
    color: var(--std-form-field-value-color, rgb(17 24 39));
    font-weight: var(--std-form-field-value-weight, 500);
}

/* A day of the neighbouring month was at 40% and unreadable; it is still
 * plainly the quieter one, but it can be read. */
.jdp-container .jdp-day.not-in-month,
jdp-container .jdp-day.not-in-month {
    opacity: 0.75;
}

.fi-modal .fi-input[data-jdp],
.fi-fo-field-wrp .fi-input[data-jdp] {
    color: var(--std-form-field-value-color, rgb(17 24 39));
    font-weight: var(--std-form-field-value-weight, 500);
}

/* ── ردیف بازه بدون مدل مالی (الزام مالی-رصد-۱۴) ─────────────────────────
 *
 * A computed row, never a record: it is tinted rather than merely written in
 * red, so a stretch nobody has agreed terms for cannot be read as one of the
 * deals it sits between.
 */
.fi-financial-gap-row > td,
.fi-financial-gap-row > .fi-ta-cell {
    background-color: rgb(254 242 242);
}

.dark .fi-financial-gap-row > td,
.dark .fi-financial-gap-row > .fi-ta-cell {
    background-color: rgb(69 10 10 / 0.35);
}

/* ── پنجره قراردادهای عکاس (الزام قرارداد-۰۸) ────────────────────────────── */
.fi-photographer-contracts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fi-photographer-contract-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
}

.dark .fi-photographer-contract-row {
    border-color: rgb(63 63 70);
}

.fi-photographer-contract-period {
    font-size: 0.875rem;
}

.fi-photographer-contract-model {
    margin-inline-start: 0.5rem;
    opacity: 0.75;
}

.fi-photographer-contract-title {
    font-weight: 600;
}

.fi-photographer-contract-name {
    font-size: 0.75rem;
    opacity: 0.75;
}

.fi-photographer-contract-download {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    color: rgb(21 128 61);
}

.fi-photographer-contract-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-photographer-contract-empty {
    font-size: 0.875rem;
    opacity: 0.75;
}

/* ── پرداختی‌ها به عکاسان ─────────────────────────────────────────────────
 *
 * The few things the payment screens draw that Filament has no component for.
 * Everything here takes a `--std-color-*` token, so a colour changed in
 * «رنگ‌های استاندارد» changes here too and nothing is a second palette.
 */

/* «تاریخ پرداخت» on «ثبت پرداخت» (الزام پرداخت-۰۳).
 *
 * A payment recorded against the wrong day is the one mistake on this form that
 * nothing downstream catches, so its label is larger and carries the panel's
 * own emphatic colour, and the whole field is set off from the ones around it.
 * The words of a Filament label live in `.fi-fo-field-label-content`, one
 * element inside the label itself; colouring the label alone is overwritten. */
.fi-payment-date-field .fi-fo-field-label-content {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-payment-date-field .fi-fo-field-label-content {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-payment-date-field {
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-warning-300, #fcd34d);
    background-color: var(--std-color-mix-warning-400-10, rgba(251, 191, 36, 0.1));
}

/* A voided payment in the photographer's own history: still there, still
 * readable, plainly not one of the others (بند ۲۱). */
.fi-payment-void-row {
    background-color: var(--std-color-mix-danger-400-10, rgba(248, 113, 113, 0.1));
    opacity: 0.75;
}

/* ── هدر صفحه پرداختی‌های یک عکاس (بند ۱۹ و ۲۰) ───────────────────────── */
.fi-photographer-payments-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.fi-photographer-payments-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fi-photographer-payments-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    object-fit: cover;
    background-color: var(--std-color-gray-100, #f3f4f6);
}

.fi-photographer-payments-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-photographer-payments-name {
    color: var(--std-color-color-white, #fff);
}

.fi-photographer-payments-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fi-photographer-payments-metric {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 12rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
}

.fi-photographer-payments-metric-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-photographer-payments-metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-photographer-payments-metric-value {
    color: var(--std-color-color-white, #fff);
}

.fi-photographer-payments-metric-note {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

/* مانده مثبت: عکاس بستانکار است — قرمز، و معنایش کنارش نوشته شده. */
.fi-photographer-payments-metric-credit {
    border-color: var(--std-color-danger-300, #fca5a5);
    background-color: var(--std-color-mix-danger-400-10, rgba(248, 113, 113, 0.1));
}

.fi-photographer-payments-metric-credit .fi-photographer-payments-metric-value,
.dark .fi-photographer-payments-metric-credit .fi-photographer-payments-metric-value {
    color: var(--std-color-danger-600, #dc2626);
}

/* مانده منفی: آژانس بیشتر پرداخت کرده — سبز. */
.fi-photographer-payments-metric-overpaid {
    border-color: var(--std-color-success-300, #86efac);
    background-color: var(--std-color-mix-success-400-10, rgba(74, 222, 128, 0.1));
}

.fi-photographer-payments-metric-overpaid .fi-photographer-payments-metric-value,
.dark .fi-photographer-payments-metric-overpaid .fi-photographer-payments-metric-value {
    color: var(--std-color-success-600, #16a34a);
}

/* ── تاریخ‌های مدل مالی، خواناتر (الزام تاریخ-مالی-۰۱ و ۰۴) ────────────────
 *
 * The two boundaries of a financial period decide which deal every photograph
 * of that stretch is for ever paid under, so they are read before they are
 * chosen. The label is larger and bolder, and the picked date itself carries
 * the panel's own yellow at the weight «استانداردسازی نمای پنل» gives a field's
 * value. As on «ثبت پرداخت», the words of a Filament label live one element
 * inside it — `.fi-fo-field-label-content` — and colouring the label alone is
 * silently overwritten.
 */
.fi-financial-date-field .fi-fo-field-label-content {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-financial-date-field .fi-fo-field-label-content {
    color: var(--std-color-color-white, #fff);
}

.fi-financial-date-field .fi-input[data-jdp] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-financial-date-field .fi-input[data-jdp] {
    color: var(--std-color-warning-400, #fbbf24);
}

/* «۲۳ مرداد ۱۴۰۵» under the ۱۴۰۵/۰۵/۲۳ the calendar itself has to be able to
 * parse (الزام تاریخ-مالی-۰۴). It is written by the browser the instant a day is
 * picked, which is also the plainest proof that the pick arrived
 * (الزام تاریخ-مالی-۰۳). */
.fi-jdp-readable {
    margin-block-start: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-financial-date-field .fi-jdp-readable {
    font-size: 1rem;
    font-weight: 700;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-financial-date-field .fi-jdp-readable {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── وضعیت تسویه عکاسان ──────────────────────────────────────────────────── */

/* الزام تسویه-۰۶: the panel caps a page's description at 42rem, which turned one
 * sentence into two lines and a header taller than the first rows of the table.
 * It is given the width of the page instead — and nothing else changes, so on a
 * phone it wraps as it always did rather than shrinking or scrolling sideways. */
.fi-settlement-status-page .fi-header-subheading {
    max-width: none;
}

/* «عکاس»: the face and the name on one line (الزام تسویه-۰۵). `.fi-ta-col` is a
 * flex row, so the cell takes the whole column itself or the pair hugs its
 * edge.
 *
 * الزام تسویه-عکاس-۰۰۱ و ۰۰۳: the portrait is the shared `avatar-badge` now, so
 * the watch sits on its corner exactly as it does in the photographers list, and
 * the face and the name are one link into that photographer's own «مدل مالی».
 * The link is not painted: it is the whole cell, and a blue name in a table of
 * money would read as a state rather than as a way in. */
.fi-photographer-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.fi-photographer-cell-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.fi-photographer-cell-link:hover .fi-photographer-cell-name {
    text-decoration: underline;
}

.fi-photographer-cell-name {
    font-weight: 600;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-photographer-cell-name {
    color: var(--std-color-color-white, #fff);
}

/* ── ستون‌های حساب بانکی در پرداختی‌ها (الزام پرداخت-۰۴ تا ۰۹) ─────────────
 *
 * «حساب مبدأ» and «حساب مقصد» are one line each: the bank's mark and the name
 * beside it, never on two rows. The separate «بانک» column both replace is gone.
 *
 * `.fi-ta-col` is a flex row, so the cell takes the whole column itself or the
 * pair hugs the column's edge instead of starting at its side.
 *
 * Every mark is drawn in the same 1.5rem box whether it is an uploaded logo or
 * the fallback icon, and `object-fit: contain` keeps a wide logo wide rather
 * than stretching it into the square. That box is shorter than the line of text
 * beside it, so a row with a logo is exactly as tall as a row without one.
 */
.fi-bank-account-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.fi-bank-account-cell-logo {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.fi-bank-account-cell-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-bank-account-cell-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* The name takes what is left and shortens itself on a narrow screen, so the
 * table never grows a sideways scrollbar to hold one long account name
 * (الزام پرداخت-۰۹). */
.fi-bank-account-cell-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-bank-account-cell-empty {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ── رنگ اطلاعات داخل ردیف‌ها ─────────────────────────────────────────────
 *
 * «استانداردسازی نمای پنل» owns the colour of every cell of every table —
 * `.fi-ta-text، .fi-ta-text-item` — and its block is printed after the
 * stylesheets, so a column that asks for a colour of its own is overwritten and
 * draws in the standard's near-black however correctly it was written. That is
 * the right default: a table where every column picks its own colour is a
 * table nobody can read.
 *
 * These few columns are the exception the task asks for, one by one and never
 * as a rule over all tables (الزام عکاس-ظاهر-۰۲ و ۰۳، پرداخت-ظاهر-۰۴ و ۰۵،
 * تسویه-۱۱). No colour is written here: `--text` is the colour Filament already
 * worked out from the column's own `->color()`, so the palette is still the
 * panel's and the decision is still in the PHP beside the column.
 *
 * The heading above each of them is untouched and keeps the colour every other
 * heading has.
 */
.fi-ta-cell-first-gallery-date .fi-ta-text-item.fi-color,
.fi-ta-cell-galleries-count .fi-ta-text-item.fi-color,
.fi-ta-cell-paid-at .fi-ta-text-item.fi-color,
.fi-ta-cell-amount-rial .fi-ta-text-item.fi-color,
.fi-ta-cell-calculated .fi-ta-text-item.fi-color,
.fi-ta-cell-paid .fi-ta-text-item.fi-color,
.fi-ta-cell-remaining .fi-ta-text-item.fi-color,
.fi-ta-cell-documents-state .fi-ta-text-item.fi-color,
.fi-ta-cell-financial-coverage-state .fi-ta-text-item.fi-color,
.fi-ta-cell-percentage .fi-ta-text-item.fi-color,
.fi-ta-cell-income-rial .fi-ta-text-item.fi-color {
    color: var(--text);
}

/* ── تب «مدارک» ──────────────────────────────────────────────────────────
 *
 * «مدارک ✓» when the paperwork is complete and «مدارک (۳)» when it is not,
 * with **only the number** in red (الزام مدارک-۱۰). The label is built in
 * DocumentsRelationManager; these two rules are the whole of its appearance,
 * and neither invents a colour: both are the panel's own success and danger.
 */
.fi-documents-complete {
    color: var(--success-600);
    font-weight: 700;
}

.fi-documents-missing {
    color: var(--danger-600);
    font-weight: 700;
}

.dark .fi-documents-complete {
    color: var(--success-400);
}

.dark .fi-documents-missing {
    color: var(--danger-400);
}

/* ── خط توضیح و آمار سریع «وضعیت تسویه عکاسان» ───────────────────────────
 *
 * The explanations and the two quick figures stand on one line on a desktop,
 * separated by upright rules, with the figures at the far left of the same line
 * (الزام مالی-۰۲ و ۰۳). On a narrow screen the line is allowed to wrap: the
 * task forbids shrinking the type or making the page scroll sideways to keep it
 * in one piece.
 */
.fi-settlement-status-page .fi-settlement-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    width: 100%;
}

.fi-settlement-status-page .fi-settlement-notes,
.fi-settlement-status-page .fi-settlement-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.fi-settlement-status-page .fi-settlement-sep {
    color: var(--gray-400);
}

/* The two figures are yellow and the same size as the notes beside them
 * (الزام مالی-۰۳) — the panel's own warning colour, not a new one. */
.fi-settlement-status-page .fi-settlement-stat {
    color: var(--warning-600);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.fi-settlement-status-page .fi-settlement-stat:hover {
    text-decoration: underline;
}

.dark .fi-settlement-status-page .fi-settlement-stat {
    color: var(--warning-400);
}

/* «تسویه‌نشده‌ها» is red, heading and figure together (الزام رصد-همه-۱۱): it is
 * money the agency still owes, and beside «عکاسان» in the same yellow it read as
 * one more count rather than as something outstanding. The panel's own danger
 * colour, the one every other overdue thing in it uses. */
.fi-settlement-status-page .fi-settlement-stat-danger {
    color: var(--danger-600);
}

.dark .fi-settlement-status-page .fi-settlement-stat-danger {
    color: var(--danger-400);
}

/* ── «درآمد ماهانه عکاس» ─────────────────────────────────────────────────
 *
 * تسک مدل مالی عکاسان ۹، الزام درآمد-۰۱ تا ۱۱. No colour is invented here:
 * every one is a panel token, so the page carries the panel's palette in both
 * light and dark.
 */
/* «[آواتار] درآمد ماهانه نام عکاس | کد» — the whole header on the heading's own
 * line (الزام رصد-همه-۰۹). The portrait, the name and the code used to be a
 * block under it, which put the name on the screen twice; the portrait is half
 * as large again as it was there and now sits in the heading row itself. */
.fi-monthly-income-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.fi-monthly-income-avatar {
    width: 5.25rem;
    height: 5.25rem;
    flex: none;
    border-radius: 9999px;
    object-fit: cover;
}

.fi-monthly-income-heading-sep {
    color: var(--gray-400);
    font-weight: 400;
}

.dark .fi-monthly-income-heading-sep {
    color: var(--gray-600);
}

.fi-monthly-income-years {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fi-monthly-income-year,
.fi-monthly-income-year-clear {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
    font-size: 0.875rem;
    color: var(--gray-700);
    background: transparent;
    cursor: pointer;
}

.fi-monthly-income-year-active {
    border-color: var(--primary-500);
    color: var(--primary-600);
    font-weight: 700;
}

.fi-monthly-income-year-clear:disabled {
    opacity: 0.5;
    cursor: default;
}

.dark .fi-monthly-income-year,
.dark .fi-monthly-income-year-clear {
    border-color: var(--gray-700);
    color: var(--gray-200);
}

.dark .fi-monthly-income-year-active {
    border-color: var(--primary-400);
    color: var(--primary-400);
}

.fi-monthly-income-months {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.75rem;
}

.fi-monthly-income-card {
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.dark .fi-monthly-income-card {
    border-color: var(--gray-700);
}

.fi-monthly-income-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fi-monthly-income-card-title {
    font-weight: 700;
    color: var(--gray-900);
}

.dark .fi-monthly-income-card-title {
    color: var(--gray-100);
}

/* «کل درآمد ماه: ۱۲٬۵۰۰٬۰۰۰ ریال» at the top of every card, and only there
 * (الزام درآمد-۰۷، الزام رصد-همه-۱۰). The words are the panel's own yellow and
 * the amount — the figure and the «ریال» after it — is the card's own text
 * colour, white in the dark panel, so the label reads as a label and the money
 * reads as money. */
.fi-monthly-income-card-total {
    font-weight: 700;
}

.fi-monthly-income-card-total-label {
    color: var(--warning-600);
}

.dark .fi-monthly-income-card-total-label {
    color: var(--warning-400);
}

.fi-monthly-income-card-total-value {
    color: var(--gray-900);
}

.dark .fi-monthly-income-card-total-value {
    color: var(--color-white, #fff);
}

.fi-monthly-income-block {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--gray-200);
}

.dark .fi-monthly-income-block {
    border-color: var(--gray-700);
}

.fi-monthly-income-block-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--primary-600);
}

.dark .fi-monthly-income-block-title {
    color: var(--primary-400);
}

.fi-monthly-income-lines {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--gray-700);
    line-height: 1.9;
}

.dark .fi-monthly-income-lines {
    color: var(--gray-200);
}

.fi-monthly-income-hint,
.fi-monthly-income-empty {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* ── کارت «خلاصه کل آژانس» در گزارش ماهانه تغییرات عکس ─────────────────────
 *
 * الزام گزارش-۰۳ و ۰۶: the six figures were six block-level lines, which in an
 * RTL page meant one narrow column of labels and numbers pinned to the right
 * edge with two thirds of the card left empty and the card itself taller than
 * the table under it. They are given the card's width instead, as one row of
 * equal parts read in the order the month happens — «ابتدای ماه» to
 * «انتهای ماه».
 *
 * Nothing here is a new colour. The four changes keep the panel's own badges
 * (سبز، قرمز، زرد، آبی) and the two ends of the month are plain type in the
 * table's own near-black, so a manager cannot mistake a stock figure for a
 * fifth kind of change (الزام گزارش-۰۵).
 */
.fi-photo-changes-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.fi-photo-changes-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    text-align: center;
    min-width: 0;
}

.dark .fi-photo-changes-tile {
    border-color: var(--gray-700);
}

.fi-photo-changes-tile-label {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gray-500);
}

.dark .fi-photo-changes-tile-label {
    color: var(--gray-400);
}

/* «عکس ابتدای ماه» و «عکس انتهای ماه»: readable and emphatic, and plainly not
 * one of the four coloured states (الزام گزارش-۰۵). */
.fi-photo-changes-tile-figure {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}

.dark .fi-photo-changes-tile-figure {
    color: var(--gray-100);
}

/* الزام گزارش-۰۷: the explanation sits under the figures with air between them,
 * separated by a rule so it reads as the report's own note rather than as a
 * caption belonging to the last tile. */
.fi-photo-changes-notes {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gray-200);
}

.dark .fi-photo-changes-notes {
    border-color: var(--gray-700);
}

.fi-photo-changes-note {
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--gray-500);
}

.fi-photo-changes-note + .fi-photo-changes-note {
    margin-top: 0.5rem;
}

/* الزام گزارش-۰۸: narrower screens split the six into two tidy rows and then
 * into two columns, and never back into one tall column. No width scrolls
 * sideways to keep the six abreast. */
@media (max-width: 1279px) {
    .fi-photo-changes-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .fi-photo-changes-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
}

/* الزام گزارش-۰۱: the sentence under the heading is given the width of the page
 * rather than the 42rem the panel caps a description at, so on a desktop it
 * stands on one line and on a phone it wraps like any other paragraph. */
.fi-photo-changes-report-page .fi-header-subheading {
    max-width: none;
}

/* ── «رصد مدل مالی» wherever it is drawn ────────────────────────────────────
 *
 * الزام رصد-همه-۰۱، ۰۳، ۰۵، ۰۷ و ۱۲. The state itself is one answer from one
 * place — `FinancialCoverageWatch` — and these are the two shapes it takes
 * outside a table column: the small mark after a photographer's code, and the
 * badge on the corner of their portrait in the list. No colour is invented: each
 * is the panel's own success, danger or gray token, the very ones the column's
 * icon is painted with.
 */
.fi-coverage-watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fi-coverage-watch-icon {
    width: 100%;
    height: 100%;
}

.fi-coverage-watch-success {
    color: var(--success-600);
}

.fi-coverage-watch-danger {
    color: var(--danger-600);
}

.fi-coverage-watch-gray {
    color: var(--gray-400);
}

.dark .fi-coverage-watch-success {
    color: var(--success-400);
}

.dark .fi-coverage-watch-danger {
    color: var(--danger-400);
}

.dark .fi-coverage-watch-gray {
    color: var(--gray-500);
}

/* Beside the photographer's code in their own header (الزام رصد-همه-۰۱).
 *
 * Twice the size it was until ۱۴۰۵/۰۵/۲۸ (الزام PHOTO-FIN-005) — a whole `em`
 * rather than half of one, so it stands as tall as the code it follows and is
 * read on the way past instead of hunted for. Only the size changed: its place
 * in the header, its colour, its meaning and what it does are untouched, and
 * because it is still sized in `em` and sits inline it moves with the heading
 * rather than pushing the name and the code onto each other
 * (الزام PHOTO-UI-001). */
.fi-photographer-header-watch {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* ── «آواتار» in the photographers list, with the watch on it ───────────────
 *
 * الزام رصد-همه-۰۵. Half the badge on the portrait and half outside it, at the
 * bottom corner. Only the red is ever drawn — the view decides that, so a green
 * or grey photographer costs no markup at all.
 */
.fi-photographer-avatar-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fi-photographer-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex: none;
}

.fi-photographer-avatar-image {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
}

.fi-photographer-avatar-watch {
    position: absolute;
    bottom: -0.3125rem;
    inset-inline-end: -0.3125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    /* The panel's own surface behind it, so the mark reads as a badge on the
     * portrait rather than as part of the photograph. */
    background: var(--gray-50);
}

.dark .fi-photographer-avatar-watch {
    background: var(--gray-900);
}

/* ── «عکاسان | ۳۷» ─────────────────────────────────────────────────────────
 *
 * الزام رصد-همه-۰۷: how many photographers the agency has, beside the heading,
 * in the same yellow the panel writes a photographer's code in.
 */
.fi-photographers-total-sep {
    color: var(--gray-400);
    font-weight: 400;
}

.dark .fi-photographers-total-sep {
    color: var(--gray-600);
}

.fi-photographers-total {
    color: var(--warning-600);
}

.dark .fi-photographers-total {
    color: var(--warning-400);
}

/* ── The line above a photographer's financial periods ──────────────────────
 *
 * الزام رصد-همه-۰۳: «اولین گالری: … | آخرین گالری: … | وضعیت پوشش». Only the two
 * dates are coloured — the beginning of the working life in green, its far end
 * in red — because «اولین گالری» and «آخرین گالری» are labels, and a coloured
 * label reads as a state.
 */
.fi-financial-coverage-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.fi-financial-coverage-sep {
    color: var(--gray-400);
}

.fi-financial-coverage-first {
    color: var(--success-600);
    font-weight: 700;
}

.fi-financial-coverage-last {
    color: var(--danger-600);
    font-weight: 700;
}

.dark .fi-financial-coverage-first {
    color: var(--success-400);
}

.dark .fi-financial-coverage-last {
    color: var(--danger-400);
}

/* ── «آمار فروش ویترین من» (تسک مدل مالی عکاسان ۱۳) ──────────────────────
 *
 * The four figures over the table, and the two things its rows draw that
 * Filament has no component for. Every colour is a `--std-color-*` token, so
 * this page carries the panel's palette in both modes and adds none of its own.
 */

/* الزام آمار-ویترین-۰۴: four equal parts across the width of the page, folding
 * on narrower screens rather than stacking into one tall column. */
.fi-sales-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.5rem;
}

.fi-sales-summary-tile {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
}

.dark .fi-sales-summary-tile {
    border-color: var(--std-color-gray-700, #374151);
}

.fi-sales-summary-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-sales-summary-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-sales-summary-value {
    color: var(--std-color-color-white, #fff);
}

.fi-sales-summary-note {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

/* «درآمد من» is the figure the photographer came for — the panel's own green,
 * the same one the «درآمد عکاس» column is written in (الزام آمار-ویترین-۱۳). */
.fi-sales-summary-tile-income {
    border-color: var(--std-color-success-300, #86efac);
    background-color: var(--std-color-mix-success-400-10, rgba(74, 222, 128, 0.1));
}

.fi-sales-summary-tile-income .fi-sales-summary-value,
.dark .fi-sales-summary-tile-income .fi-sales-summary-value {
    color: var(--std-color-success-600, #16a34a);
}

/* الزام آمار-ویترین-۱۹: the four fold, and never squeeze. */
@media (max-width: 1023px) {
    .fi-sales-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .fi-sales-summary {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.75rem 1rem;
    }
}

/* بندانگشتی ستون «عکس» (الزام آمار-ویترین-۰۹): one size for every row, whatever
 * the photograph's own shape, and a pointer that says it opens. */
.fi-sold-photo-thumb {
    width: 4rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.375rem;
    cursor: zoom-in;
}

/* نام عکاس در هدر صفحه، کنار عنوان — به همان اندازه و وزن عنوان، در رنگ آرام‌تر
 * تا عنوان همچنان عنوان بماند (الزام آمار-ویترین-۰۳). */
.fi-monthly-income-heading-name {
    color: var(--std-color-gray-500, #6b7280);
    /* بخش هشتم: a name is one thing to read, so it is one unbreakable run.
       The row around it still wraps — it has to on a phone — but it wraps
       *between* its parts. Without this the heading was allowed to break inside
       the word, and «فاطمه یوسفی» came out as «فاطمه یوس» with «فی» alone on
       the next line. `flex: none` stops the same break happening the other way,
       by a flex row squeezing the name narrower than its own text. */
    flex: none;
    white-space: nowrap;
}

.dark .fi-monthly-income-heading-name {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ── «جزئیات مالی» به شکل تب (تسک مدل مالی عکاسان ۱۲) ────────────────────
 *
 * The page used to be six wide boxes one under another, each holding a few
 * lines of text down its right-hand edge: very tall, mostly empty, and nothing
 * on it comparable at a glance. It is six tabs now, and inside each the figures
 * are laid across the width of the screen.
 *
 * Nothing here invents a colour. Every one is a `--std-color-*` token, so a
 * colour changed in «رنگ‌های استاندارد» changes here too, and the three
 * financial states keep the meanings the whole panel gives them: سبز تسویه،
 * قرمز بستانکار، آبی اضافه‌پرداخت.
 */

/* Only the chosen tab is on the screen. Alpine hides the others the moment it
 * boots; until then `x-cloak` keeps them out, so the page never flashes all six
 * at once (بند ۲). */
.fi-financial-tabpanel[x-cloak] {
    display: none;
}

/* بند ۳: فاصله استاندارد میان نوار تب و محتوای آن. */
.fi-financial-tabs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* بند ۱۳: در عرض کم، نوار تب به‌جای شکستن یا فشرده‌شدن، افقی اسکرول می‌شود. */
.fi-financial-tabbar {
    max-width: 100%;
    overflow-x: auto;
}

/* ── کارت‌های آماری ──────────────────────────────────────────────────────
 *
 * بند ۴، ۷، ۸ و ۱۱: the number is the card's own voice and its title is small
 * above it, and the cards are equal in size and abreast rather than stacked
 * down one side of a box the width of the page.
 */
.fi-fin-stats {
    display: grid;
    gap: 0.75rem;
    align-items: start;
}

.fi-fin-stats-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fi-fin-stats-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fi-fin-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
}

.dark .fi-fin-stat {
    border-color: var(--std-color-gray-700, #374151);
}

.fi-fin-stat-label {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-fin-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-fin-stat-value {
    color: var(--std-color-color-white, #fff);
}

.fi-fin-stat-note {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

/* سبز: تسویه. */
.fi-fin-stat-success {
    border-color: var(--std-color-success-300, #86efac);
    background-color: var(--std-color-mix-success-400-10, rgba(74, 222, 128, 0.1));
}

.fi-fin-stat-success .fi-fin-stat-value,
.dark .fi-fin-stat-success .fi-fin-stat-value {
    color: var(--std-color-success-600, #16a34a);
}

/* قرمز: عکاس بستانکار است / تسویه‌نشده. */
.fi-fin-stat-danger {
    border-color: var(--std-color-danger-300, #fca5a5);
    background-color: var(--std-color-mix-danger-400-10, rgba(248, 113, 113, 0.1));
}

.fi-fin-stat-danger .fi-fin-stat-value,
.dark .fi-fin-stat-danger .fi-fin-stat-value {
    color: var(--std-color-danger-600, #dc2626);
}

/* آبی: اضافه‌پرداخت. */
.fi-fin-stat-info {
    border-color: var(--std-color-info-300, #93c5fd);
    background-color: var(--std-color-mix-info-400-10, rgba(96, 165, 250, 0.1));
}

.fi-fin-stat-info .fi-fin-stat-value,
.dark .fi-fin-stat-info .fi-fin-stat-value {
    color: var(--std-color-info-600, #2563eb);
}

/* ── کارت یک بازه مالی، و خانه‌های اطلاعاتی داخل آن (بند ۵) ──────────────── */
.fi-fin-period {
    padding: 0.875rem 1rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    border-radius: 0.75rem;
}

.dark .fi-fin-period {
    border-color: var(--std-color-gray-700, #374151);
}

.fi-fin-period + .fi-fin-period {
    margin-top: 0.75rem;
}

.fi-fin-period-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-fin-period-head {
    border-color: var(--std-color-gray-700, #374151);
}

/* الزام مالی-نمایش-۰۰۴: نام مدل مالی تأکید خودش را نگه می‌دارد و تاریخ بازه با
 * وزن معمولی خوانده می‌شود، تا دو چیز در یک ردیف از هم تفکیک شوند. */
.fi-fin-period-window {
    font-weight: 400;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-fin-period-window {
    color: var(--std-color-color-white, #fff);
}

/* وضعیت بازه در انتهای هدر کارت، نه چسبیده به تاریخ‌ها. */
.fi-fin-period-status {
    margin-inline-start: auto;
}

.fi-fin-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.fi-fin-field {
    min-width: 0;
}

.fi-fin-field-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-fin-field-value {
    font-weight: 700;
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-fin-field-value {
    color: var(--std-color-color-white, #fff);
}

.fi-fin-field-note {
    display: block;
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-fin-value-success,
.dark .fi-fin-value-success {
    color: var(--std-color-success-600, #16a34a);
}

.fi-fin-value-danger,
.dark .fi-fin-value-danger {
    color: var(--std-color-danger-600, #dc2626);
}

.fi-fin-value-info,
.dark .fi-fin-value-info {
    color: var(--std-color-info-600, #2563eb);
}

.fi-fin-value-strong {
    font-weight: 700;
}

/* دکمه‌های عملیاتی پایین کارت (بند ۵ و ۸). */
.fi-fin-period-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.875rem;
}

/* ── انتخابگرهای تاریخ، در یک ردیف بالای تب (بند ۷ و ۸) ─────────────────── */
.fi-fin-pickers {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fi-fin-picker {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
}

.fi-fin-picker-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

/* تاریخ انتخاب‌شده، خوانا و کنار انتخابگرها. */
.fi-fin-picked {
    margin-inline-start: auto;
    font-weight: 700;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-fin-picked {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── جدول‌های داخل تب‌ها (بند ۶، ۹ و ۱۳) ─────────────────────────────────
 *
 * A plain table rather than a Filament one: these rows are computed lists, not
 * a resource's records, and they carry no filters, no sorting and no actions.
 * The appearance is the panel's own — its rule colours, its type sizes — and on
 * a narrow screen the table scrolls inside its own box instead of squeezing its
 * columns into nothing.
 */
.fi-fin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

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

.fi-fin-table th,
.fi-fin-table td {
    padding: 0.5rem 0.625rem;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-fin-table th,
.dark .fi-fin-table td {
    border-color: var(--std-color-gray-700, #374151);
}

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

.fi-fin-table td {
    color: var(--std-color-gray-900, #111827);
}

.dark .fi-fin-table td {
    color: var(--std-color-gray-100, #f3f4f6);
}

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

/* عنوان و توضیح یک ریز محاسبه. */
.fi-fin-breakdown {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-fin-breakdown {
    border-color: var(--std-color-gray-700, #374151);
}

.fi-fin-breakdown-title {
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--std-color-primary-600, #2563eb);
}

.dark .fi-fin-breakdown-title {
    color: var(--std-color-primary-400, #60a5fa);
}

.fi-fin-breakdown-title + .fi-fin-table-wrap + .fi-fin-breakdown-title,
.fi-fin-table-wrap + .fi-fin-breakdown-title,
.fi-fin-hint + .fi-fin-breakdown-title {
    margin-top: 1rem;
}

/* مغایرت پس از تسویه — گزارش می‌شود و بازنویسی نمی‌شود. */
.fi-fin-drift {
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--std-color-mix-danger-400-10, rgba(248, 113, 113, 0.1));
}

.fi-fin-drift-title {
    font-weight: 700;
    color: var(--std-color-danger-600, #dc2626);
}

.dark .fi-fin-drift-title {
    color: var(--std-color-danger-400, #f87171);
}

/* توضیح‌های آموزشی، آرام‌تر از خود مبالغ (بند ۴). */
.fi-fin-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-fin-hint-icon {
    display: inline-flex;
    flex: none;
    cursor: help;
}

.fi-fin-hint-svg {
    width: 1rem;
    height: 1rem;
}

/* ── واکنش‌گرایی (بند ۱۳) ────────────────────────────────────────────────
 *
 * Fewer cards to a row as the screen narrows, and one column only on a phone —
 * never a page that scrolls sideways to keep five cards abreast.
 */
@media (max-width: 1279px) {
    .fi-fin-stats-5,
    .fi-fin-stats-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fi-fin-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fi-fin-stats-5,
    .fi-fin-stats-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fi-fin-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fi-fin-picked {
        margin-inline-start: 0;
    }
}

@media (max-width: 479px) {
    .fi-fin-stats-5,
    .fi-fin-stats-4,
    .fi-fin-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* بند ۳: توضیح زیر عنوان صفحه، به‌جای ۴۲rem، به عرض صفحه — تا در دسکتاپ در یک
 * خط خوانده شود و در موبایل مثل هر پاراگراف دیگری بشکند. */
.fi-my-financial-details-page .fi-header-subheading {
    max-width: none;
}

/* ── «جدول درآمدی من» (تسک مدل مالی عکاسان ۱۴) ──────────────────────────
 *
 * The five figures over the monthly table, and the two tables inside «جزئیات
 * ماه». Every colour is a `--std-color-*` token, so the page carries the
 * panel's palette in both modes and invents none of its own.
 */

/* الزام درآمد-۰۵: five equal parts across the width of a desktop, folding
 * rather than squeezing as the screen narrows. */
.fi-income-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1279px) {
    .fi-income-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fi-income-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .fi-income-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* «کل درآمد» is the figure the whole page adds up to: white and prominent,
 * ویترین green beside it and فریم the panel's yellow (الزام درآمد-۲۰). */
.fi-income-summary-tile-total .fi-sales-summary-value {
    font-size: 1.25rem;
}

.fi-income-summary-tile-frame {
    border-color: var(--std-color-warning-300, #fcd34d);
    background-color: var(--std-color-mix-warning-400-10, rgba(251, 191, 36, 0.1));
}

.fi-income-summary-tile-frame .fi-sales-summary-value,
.dark .fi-income-summary-tile-frame .fi-sales-summary-value {
    color: var(--std-color-warning-700, #b45309);
}

/* مانده حساب: the account's own three states, in the three colours the rest of
 * the panel settles an account with (الزام درآمد-۰۶). */
.fi-income-summary-tile-credit {
    border-color: var(--std-color-danger-300, #fca5a5);
    background-color: var(--std-color-mix-danger-400-10, rgba(248, 113, 113, 0.1));
}

.fi-income-summary-tile-credit .fi-sales-summary-value,
.dark .fi-income-summary-tile-credit .fi-sales-summary-value {
    color: var(--std-color-danger-600, #dc2626);
}

.fi-income-summary-tile-level {
    border-color: var(--std-color-success-300, #86efac);
    background-color: var(--std-color-mix-success-400-10, rgba(74, 222, 128, 0.1));
}

.fi-income-summary-tile-level .fi-sales-summary-value,
.dark .fi-income-summary-tile-level .fi-sales-summary-value {
    color: var(--std-color-success-600, #16a34a);
}

.fi-income-summary-tile-overpaid {
    border-color: var(--std-color-info-300, #93c5fd);
    background-color: var(--std-color-mix-info-400-10, rgba(96, 165, 250, 0.1));
}

.fi-income-summary-tile-overpaid .fi-sales-summary-value,
.dark .fi-income-summary-tile-overpaid .fi-sales-summary-value {
    color: var(--std-color-info-600, #2563eb);
}

/* الزام درآمد-۱۷: «جزئیات ماه» — the ویترین half and the frame half, one under
 * the other, each with the month's own rows beneath its figures. */
.fi-income-details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fi-income-details-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--std-color-gray-900, #111827);
    margin-bottom: 0.5rem;
}

.dark .fi-income-details-title {
    color: var(--std-color-color-white, #fff);
}

.fi-income-details-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 767px) {
    .fi-income-details-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fi-income-details-label {
    color: var(--std-color-gray-500, #6b7280);
}

.fi-income-details-empty {
    font-size: 0.8125rem;
    color: var(--std-color-gray-500, #6b7280);
}

.fi-income-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.fi-income-details-table th,
.fi-income-details-table td {
    padding: 0.375rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-income-details-table th,
.dark .fi-income-details-table td {
    border-color: var(--std-color-gray-700, #374151);
}

.fi-income-details-table th {
    color: var(--std-color-gray-500, #6b7280);
    font-weight: 500;
}

/* ── «مانیتور فروش ویترین من» (تسک مدل مالی عکاسان ۱۵) ───────────────────
 *
 * A grid of picture cards, one to a photograph. The grid itself is the panel's
 * own `contentGrid`; what is here is the card's inside — the picture kept to
 * one shape whatever the photograph's own is, and the four figures under it
 * kept short enough that a card stays a card.
 */
.fi-monitor-card {
    gap: 0.375rem;
}

/* الزام مانیتور-۱۲: the picture is the card's largest part, never stretched and
 * never deformed — a portrait and a landscape sit in the same box, each shown
 * whole rather than cropped to fit. */
.fi-monitor-card-image {
    width: 100%;
    height: 11rem;
    object-fit: contain;
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
    border-radius: 0.5rem;
    cursor: pointer;
}

@media (max-width: 639px) {
    .fi-monitor-card-image {
        height: 14rem;
    }
}

.fi-monitor-card-code {
    font-size: 0.75rem;
}

.fi-monitor-card-gallery {
    font-weight: 600;
}

/* الزام مانیتور-۱۶: «۸ فروش» has to be readable at a glance while scrolling. */
.fi-monitor-card-sales .fi-ta-text-item-label {
    font-size: 1rem;
    font-weight: 700;
}

.fi-monitor-details-summary {
    font-size: 0.8125rem;
    color: var(--std-color-gray-500, #6b7280);
    margin-bottom: 0.75rem;
}

/* ── اصلاحات نمایشی صفحات مالی عکاس (تسک مدل مالی عکاسان ۱۹) ─────────────
 *
 * نمایش و بس. هیچ عدد، فرمول، سهم یا منبع داده‌ای با این بخش تغییر نمی‌کند، و
 * هیچ رنگ تازه‌ای هم تعریف نمی‌شود: هر رنگ اینجا یک `--std-color-*` است.
 */

/* الزام مالی-نمایش-۰۰۶: عنوان صفحه و توضیح زیرش یک بلوک‌اند، تا توضیح زیر خود
 * «جزئیات مالی من» بماند و به زیر نام عکاس یا کل ردیف هدر نرود. */
.fi-monthly-income-heading-main {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

/* توضیح داخل <h1> می‌نشیند و بدون این، وزن و فاصله‌ی حروف عنوان را به ارث
 * می‌برد؛ اندازه و رنگش همان استاندارد «زیرعنوان هدر» است و اینجا بازنویسی
 * نمی‌شود. */
.fi-monthly-income-heading-note {
    font-weight: 400;
    letter-spacing: normal;
    white-space: normal;
}

/* الزام مالی-نمایش-۰۱۰: در عرض کم هدر می‌شکند، اسکرول افقی نمی‌سازد و هیچ‌یک از
 * آواتار، عنوان، توضیح، نام و کد عکاس حذف نمی‌شود. */
.fi-monthly-income-heading {
    flex-wrap: wrap;
    max-width: 100%;
    /* Filament's heading sets `overflow-wrap: break-word` so a long title
       cannot overflow the page. That is right for a title and wrong for a
       name — it is the permission the heading was using to break «یوسفی» in
       half. The row keeps its own wrapping; only the mid-word break goes
       (بخش هشتم). */
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 639px) {
    .fi-monthly-income-avatar {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* الزام مالی-نمایش-۰۰۵: نام عکس در «ریز محاسبه»، لینک به صفحه عمومی همان عکس. */
.fi-fin-photo-link {
    color: var(--std-color-primary-600, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dark .fi-fin-photo-link {
    color: var(--std-color-primary-400, #60a5fa);
}

/* الزام مالی-نمایش-۰۰۸: در کارت هر عکس، «مبلغ فروش» زرد و «درآمد من» سبز — تا
 * فروش و سهم عکاس از یک نگاه از هم جدا شوند. رنگ در PHP انتخاب شده است؛ این دو
 * قاعده فقط بلوک «استانداردسازی نمای پنل» را که رنگ هر سلول جدول را یکدست
 * می‌کند، برای همین دو ستون کنار می‌زنند و رنگ خود فیلامنت را برمی‌گردانند. */
.fi-ta-text-item.fi-color.fi-monitor-card-sale,
.fi-ta-text-item.fi-color.fi-monitor-card-income {
    color: var(--text);
}

.fi-monitor-card-sale,
.fi-monitor-card-income {
    font-weight: 600;
}

/* ── «جدول درآمدی من»: ردیف‌های یکی‌درمیان (الزام مالی-نمایش-۰۰۹) ─────────
 *
 * دو پس‌زمینه بسیار نزدیک، از تم خود پنل: راه‌راه ملایمی که دنبال‌کردن یک ردیف
 * را ساده می‌کند و خوانایی متن را دست نمی‌زند. حالت ماوس از هر دو پررنگ‌تر است،
 * وگرنه روی ردیف رنگی دیده نمی‌شد. */
.fi-my-incomes-page .fi-ta-row.fi-striped {
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
}

.fi-my-incomes-page .fi-ta-row:hover,
.fi-my-incomes-page .fi-ta-row.fi-striped:hover {
    background-color: var(--std-color-mix-info-400-10, rgba(96, 165, 250, 0.1));
}

/* ── هدر کارت بازه مالی، ۲۵٪ بزرگ‌تر ───────────────────────────────────────
 *
 * الزام PHOTO-FIN-008: عنوان مدل مالی و تاریخ‌های بازه یک‌چهارم بزرگ‌تر از
 * اندازه فعلی خوانده می‌شوند — نه چند برابر. `em` است نه `rem`، پس هرچه پنل
 * اندازه پایه را عوض کند نسبت ۲۵٪ سر جای خود می‌ماند، و چون هدر خودش
 * `flex-wrap` دارد، بزرگ‌شدن در عرض کم به خط بعد می‌رود و از کادر بیرون
 * نمی‌زند (الزام PHOTO-UI-001).
 */
.fi-fin-period-type,
.fi-fin-period-window {
    font-size: 1.25em;
}

/* ── «از ۱۳۷۷/۰۵/۰۱ تا ۱۴۱۰/۰۵/۳۱» ────────────────────────────────────────
 *
 * الزام PHOTO-FIN-009: شروع بازه سبز، پایان آن قرمز، و «از» و «تا» با همان
 * رنگ متن هدر که در حالت شب سفید است. فقط خود تاریخ‌ها رنگ می‌گیرند.
 */
.fi-fin-window-start,
.dark .fi-fin-window-start {
    color: var(--std-color-success-600, #16a34a);
}

.fi-fin-window-end,
.dark .fi-fin-window-end {
    color: var(--std-color-danger-600, #dc2626);
}

/* ── ستون «ثبت‌کننده» در «پرداخت‌ها» ───────────────────────────────────────
 *
 * الزام PHOTO-PAY-002 و ۰۰۳: چهره به‌جای نام، و نام کامل زیر نشانگر. اندازه
 * همان ۲ رم آواتار عکاس در فهرست است، پس ارتفاع ردیف جدول را بالا نمی‌برد
 * (الزام PHOTO-UI-001).
 */
.fi-fin-recorder-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    object-fit: cover;
    display: block;
}

/* ── هدر «جزئیات مالی عکاس» ────────────────────────────────────────────────
 *
 * الزام PHOTO-FIN-006: نام عکاس | آواتار | کد عکاس | آیکون رصد مالی، با خط
 * عمودی میان هر دو بخش. کد همان زرد پنل است — همان کلاسی که رکورد خود عکاس
 * کدش را با آن می‌نویسد — و نشان رصد همان نشان مرکزی است
 * (الزام PHOTO-FIN-007).
 *
 * `flex-wrap` دارد تا در عرض کم بشکند و چیزی حذف نشود (الزام PHOTO-UI-001).
 */
.fi-fin-heading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.fi-fin-heading-sep {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1.5rem;
    background: var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-fin-heading-sep {
    background: var(--std-color-gray-700, #374151);
}

.fi-fin-heading-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    object-fit: cover;
    flex: none;
}

.fi-fin-heading-watch {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
}

/* ── «آواتار + نشان رصد + نام عکاس» در گزارش‌ها ─────────────────────────────
 *
 * الزام PHOTO-MONTHLY-001 … ۰۰۳ و PHOTO-MONITOR-001 … ۰۰۳. یک ستون، نه دو:
 * چهره و نام کنار هم خوانده می‌شوند. `flex-wrap` دارد تا در عرض کم نام زیر
 * آواتار برود و روی هم نیفتند (الزام PHOTO-REPORT-002).
 */
.fi-photographer-avatar-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fi-photographer-avatar-name-text {
    min-width: 0;
}

/* الزام گزارش-ماهانه-۰۰۱: the portrait is a link now. Nothing about it is
 * painted — the face is the target, and an underline or a colour under it would
 * change the look of a column the same task says to leave alone. */
.fi-photographer-avatar-link {
    display: inline-flex;
    flex: none;
    color: inherit;
    text-decoration: none;
}

/* ── ستون‌های «عکاس» و «مدل مالی در تاریخ گالری» در مانیتور مالی ────────────
 *
 * الزام مانیتور-مالی-۰۰۱ … ۰۰۳: «عکاس» ستون خودش است — چهره با نشان رصد و نام،
 * کنار هم و نه در دو ستون — و «مدل مالی در تاریخ گالری» همان جمله‌ای که همیشه
 * درباره‌اش گفته می‌شد، بی «تعداد عکس». نشان از محدوده آواتار بیرون نمی‌زند چون
 * همان جزء مشترک فهرست عکاسان است.
 *
 * دو ستون یک فهرست‌اند با یک ترتیب، پس هر سطرشان دقیقاً به بلندی یک آواتار است
 * تا سطر nـام این یکی روبه‌روی سطر nـام آن یکی بنشیند — حتی وقتی جمله‌ی مدل
 * مالی کوتاه‌تر از یک چهره باشد.
 */
.fi-monitor-photographers {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    min-width: 0;
}

.fi-monitor-photographer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    min-width: 0;
}

/* نام می‌شکند و از ستون بیرون نمی‌زند: تا پیش از این، نام در همان سلولِ جمله‌ی
 * مدل مالی می‌نشست و جا داشت؛ حالا ستون خودش را دارد و باید در همان بماند. */
.fi-monitor-photographer-name {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* کفِ ستون «عکاس»، تا «آواتار + نام» در یک سطر جا شود و نام بی‌جهت نشکند
 * (الزام مانیتور-مالی-۰۰۱). کف است نه عرض ثابت، و روی صفحه‌های باریک برداشته
 * می‌شود. */
@media (min-width: 1024px) {
    .fi-gallery-financial-monitor-page .fi-ta-header-cell-photographers,
    .fi-gallery-financial-monitor-page .fi-ta-cell-photographers {
        min-width: 11.5rem;
    }
}

.fi-monitor-photographer-model {
    color: var(--std-color-gray-500, #6b7280);
}

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

/* ── «اضافه‌شده» سبز و «حذف‌شده» قرمز ──────────────────────────────────────
 *
 * الزام PHOTO-MONTHLY-004 و ۰۰۵: خودِ عدد رنگ می‌گیرد، نه پس‌زمینه ستون.
 * «استانداردسازی نمای پنل» رنگ هر سلول متنی جدول را بازنویسی می‌کند، پس این
 * دو ستون — و فقط این دو — با نام از آن قاعده مستثنا می‌شوند؛ `var(--text)`
 * همان رنگی است که فیلامنت از `->color()` خود ستون درآورده، پس تصمیم در PHP
 * می‌ماند و پالت همان پالت پنل است.
 */
.fi-ta-cell-added .fi-ta-text-item.fi-color,
.fi-ta-cell-removed .fi-ta-text-item.fi-color {
    color: var(--text);
}

/* ── توضیح زیر عنوان «مانیتور مدل مالی گالری عکاسان» ───────────────────────
 *
 * الزام PHOTO-MONITOR-014 و ۰۱۵: در دسکتاپ یک خط. متن دست نمی‌خورد — فقط
 * عرضِ ۴۲rem که پنل به توضیح می‌دهد برداشته می‌شود و اندازه فونت به قدر لازم
 * کم می‌شود. در عرض‌های کم مثل هر پاراگراف دیگری می‌شکند.
 */
.fi-gallery-financial-monitor-page .fi-header-subheading {
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.25rem;
}

/* ── عرض ستون «گالری» در مانیتور مدل مالی ───────────────────────────────────
 *
 * الزام مانیتور-مالی-۰۰۴ و ۰۰۵: حدود یک‌سوم پهن‌تر — «۱۳۳ درصد عرض فعلی».
 *
 * ستون با محتوایش اندازه می‌گیرد، پس یک‌سوم جای بیشتر یعنی یک‌سوم جای بیشتر
 * برای اندازه‌گرفتن: عرض فعلی در مرورگر روی دسکتاپ ۲۴۹px اندازه گرفته شد، و
 * این کفْ ۱٫۳۳ برابر همان است.
 *
 * کف است، نه عرض ثابت: چیز دیگری فشرده نمی‌شود، جدول همچنان خودش را می‌چیند، و
 * روی صفحه‌های باریک قاعده اصلاً اعمال نمی‌شود تا رفتار موبایل و تبلت همان باشد
 * که بود. فقط پهنا عوض می‌شود — نام گالری همچنان با `wrap` رفتار استاندارد
 * جدول را دارد و ارتفاع ردیف بی‌جهت بلند نمی‌شود (الزام مانیتور-مالی-۰۰۵).
 */
@media (min-width: 1024px) {
    .fi-gallery-financial-monitor-page .fi-ta-header-cell-title,
    .fi-gallery-financial-monitor-page .fi-ta-cell-title {
        min-width: 20.75rem; /* ۲۴۹px × ۱٫۳۳ */
    }
}

/* ── ردیف‌های یکی‌درمیان در دو گزارش عکاسان ────────────────────────────────
 *
 * الزام PHOTO-MONTHLY-007 و PHOTO-MONITOR-010. همان دو پس‌زمینه‌ای که «جدول
 * درآمدی من» استفاده می‌کند — یک زبان بصری برای هر سه جدول، و آن‌قدر ملایم که
 * سبز و قرمز ستون‌های تغییر، نشان رصد و لینک‌ها روی هر دو ردیف واضح بمانند.
 * حالت ماوس از هر دو پررنگ‌تر است، وگرنه روی ردیف رنگی دیده نمی‌شد.
 */
.fi-photo-changes-report-page .fi-ta-row.fi-striped,
.fi-gallery-financial-monitor-page .fi-ta-row.fi-striped {
    background-color: var(--std-color-mix-gray-400-10, rgba(156, 163, 175, 0.1));
}

.fi-photo-changes-report-page .fi-ta-row:hover,
.fi-photo-changes-report-page .fi-ta-row.fi-striped:hover,
.fi-gallery-financial-monitor-page .fi-ta-row:hover,
.fi-gallery-financial-monitor-page .fi-ta-row.fi-striped:hover {
    background-color: var(--std-color-mix-info-400-10, rgba(96, 165, 250, 0.1));
}

/* ── وضعیت تکمیل هر «حساب بانکی» کنار عنوان کادر ────────────────────────────
 *
 * الزام حساب-بانکی-۰۰۲ و ۰۰۴: کنار عنوان هر کادر حساب بانکی، تیک سبز وقتی
 * اطلاعات آن حساب کامل است و نشان قرمز وقتی کامل نیست. کادرها پیش‌فرض بسته‌اند
 * (الزام حساب-بانکی-۰۰۱)، پس این نشان باید در حالت بسته هم دیده شود — و چون
 * روی خودِ عنوان نشسته است، باز و بسته بودن کادر هیچ اثری بر آن ندارد.
 *
 * همان دو رنگی که نشان «مدارک» در همین صفحه دارد، تا یک صفحه دو زبان رنگی
 * نداشته باشد.
 */
.fi-account-state {
    font-weight: 700;
}

.fi-account-state-complete {
    color: var(--success-600);
}

.fi-account-state-incomplete {
    color: var(--danger-600);
}

.dark .fi-account-state-complete {
    color: var(--success-400);
}

.dark .fi-account-state-incomplete {
    color: var(--danger-400);
}

/* ── نرخ‌های پایه فروش عکس ───────────────────────────────────────────────── */

/* الزام نرخ-۰۴ و ۰۵: در ستون «قیمت پایه»، عدد ریالی خط اول است و معادل تومان به
 * حروف خط دوم — زردِ خودِ پنل، یک اندازه کوچک‌تر و کمی کم‌رنگ‌تر از عدد، تا عنصر
 * اصلی همچنان عدد بماند.
 *
 * متن حروفی در یک خط نگه داشته می‌شود و به عرض ستون بریده می‌شود، وگرنه یک مبلغ
 * بلند ارتفاع همه ردیف‌ها را بالا می‌برد. عرض ۱۰۰٪ لازم است چون `.fi-ta-col` یک
 * ردیف فلکس است و بدون آن، جعبه به اندازه محتوایش جمع می‌شود و بریدن اتفاق
 * نمی‌افتد. */
.fi-price-rial-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    min-width: 0;
}

.fi-price-rial-amount {
    font-size: 0.875rem;
    font-weight: 600;
}

.fi-price-rial-words {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--std-color-warning-700, #b45309);
    opacity: 0.85;
}

.dark .fi-price-rial-words {
    color: var(--std-color-warning-400, #fbbf24);
}

/* عنوان و توضیح صفحه «جزئیات فروش» — نام نرخ و معادل حروفی مبلغ، در همان زردی
 * که مبلغ‌ها با آن نوشته می‌شوند. اینجا بریدنی در کار نیست: یک عنوان جا دارد. */
.fi-price-sales-heading-rate,
.fi-price-sales-heading-words {
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-sales-heading-rate,
.dark .fi-price-sales-heading-words {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── سوابق تغییر نرخ‌های پایه (الزام نرخ‌سابقه-۱۱ تا ۱۷) ──────────────────── */

/* هر گروه تغییر، یک کادر مستقل با هدر و جدول سه‌ردیفی خودش
 * (الزام نرخ‌سابقه-۱۱). جدول همان جدول استاندارد پنل است و فقط سرگروهش شکل
 * «هدر کادر» می‌گیرد: خط جداکننده بالای هر گروه، تا مرز دو تغییر متوالی با یک
 * نگاه دیده شود. رنگ‌ها همان توکن‌های «استانداردسازی نمای پنل» هستند و هیچ رنگ
 * تازه‌ای اینجا ساخته نمی‌شود.
 *
 * قاعده به خودِ هدرِ همین جدول محدود است (`:has`) و نه به هر جدول گروه‌بندی‌شده
 * پنل، چون جدول ویجت راهی برای گرفتن کلاس اختصاصی ندارد. */
.fi-ta-group-header-cell:has(.fi-base-price-card-header) {
    border-top: 2px solid var(--std-color-gray-200, #e5e7eb);
    background-color: var(--std-color-gray-50, #f9fafb);
}

.dark .fi-ta-group-header-cell:has(.fi-base-price-card-header) {
    border-top-color: var(--std-color-gray-700, #374151);
    background-color: var(--std-color-gray-800, #1f2937);
}

.fi-base-price-card-header {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fi-base-price-card-kind {
    font-weight: 700;
}

.fi-base-price-card-sep {
    opacity: 0.4;
}

/* «فاصله از تغییر قبلی» یک بار در هدر کادر گفته می‌شود و ستون مستقل ندارد،
 * چون برای هر سه سایز یکسان است (الزام نرخ‌سابقه-۱۳). */
.fi-base-price-card-gap {
    font-weight: 500;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-base-price-card-gap {
    color: var(--std-color-warning-400, #fbbf24);
}

/* «تفاوت قیمت»: افزایش سبز، کاهش قرمز، بدون تغییر خنثی (الزام نرخ‌سابقه-۱۶).
 * وزن رنگ اینجا با `specificity` بالاتر از بلوک استانداردهای پنل نوشته شده،
 * وگرنه رنگ سلول به رنگ عمومی متن جدول برمی‌گردد. */
.fi-ta-cell .fi-base-price-diff {
    width: 100%;
    font-weight: 600;
    white-space: nowrap;
}

.fi-ta-cell .fi-base-price-diff-up {
    color: var(--std-color-success-600, #16a34a);
}

.dark .fi-ta-cell .fi-base-price-diff-up {
    color: var(--std-color-success-400, #4ade80);
}

.fi-ta-cell .fi-base-price-diff-down {
    color: var(--std-color-danger-600, #dc2626);
}

.dark .fi-ta-cell .fi-base-price-diff-down {
    color: var(--std-color-danger-400, #f87171);
}

.fi-ta-cell .fi-base-price-diff-same,
.fi-ta-cell .fi-base-price-diff-none {
    color: var(--std-color-gray-500, #6b7280);
    font-weight: 500;
}

.dark .fi-ta-cell .fi-base-price-diff-same,
.dark .fi-ta-cell .fi-base-price-diff-none {
    color: var(--std-color-gray-400, #9ca3af);
}

/* «ثبت‌کننده»: فقط آواتار، و نام کامل در تولتیپ (الزام نرخ‌سابقه-۱۸ و ۱۹).
 * چند مدیر در یک زنجیره یعنی چند آواتار کنار هم. */
.fi-base-price-authors {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.fi-base-price-author-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    object-fit: cover;
}

.fi-base-price-author-absent {
    opacity: 0.6;
}

/* «توضیح»: در ستون فقط یک آیکون، و متن کامل در پنجره (الزام نرخ‌سابقه-۲۱). */
.fi-base-price-note-icon {
    cursor: pointer;
}

.fi-base-price-note-absent {
    opacity: 0.45;
    cursor: default;
}

.fi-base-price-notes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fi-base-price-note {
    border-inline-start: 3px solid var(--std-color-warning-500, #f59e0b);
    padding-inline-start: 0.75rem;
}

.fi-base-price-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-base-price-note-meta {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-base-price-note-author {
    font-weight: 600;
}

.fi-base-price-note-text {
    margin-top: 0.25rem;
    line-height: 1.9;
}

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

/* در دسکتاپ مبلغ‌ها نباید از هم فشرده شوند و تاریخ نباید بشکند؛ در عرض‌های
 * کوچک‌تر همان رفتار استاندارد جدول‌های آژانس (اسکرول افقی) کار می‌کند، پس هیچ
 * ستون مالی حذف نمی‌شود. */
.fi-base-price-history-nowrap {
    white-space: nowrap;
}

/* ── متغیرهای افزایش قیمت عکس (الزام بخش دوم-۳ تا ۳۱) ────────────────────── */

/* هیچ رنگ خامی اینجا نوشته نمی‌شود: همه رنگ‌ها همان توکن‌های «استانداردسازی نمای
 * پنل» هستند که مبلغ‌ها و کادرهای مالی قبلاً با آن‌ها نوشته شده‌اند، و هر
 * `var()` مقدار پشتیبان خودش را دارد تا اگر توکنی هنوز چاپ نشده باشد صفحه
 * بی‌رنگ نشود (الزام بخش دوم-۳۰). */

/* خلاصه وضعیت سایز، بالای هر تب — یک جدول شش‌ستونی، نه شش خانه شناور
 * (بند ۱۶ تا ۱۹ از «متغیرهای قیمت — اصلاحات ۲»).
 *
 * گرید قبلی `auto-fit` بود و در عرض واقعی صفحه می‌شکست: «افزایش تجمعی تا آخرین
 * مرحله» به ردیف دوم می‌افتاد و ارتفاع کادر بی‌دلیل زیاد می‌شد (بند ۱۸). حالا
 * عنوان‌ها یک ردیف‌اند و مقدارها دقیقاً زیر عنوان خودشان، و پهنای ستون‌ها فقط
 * به‌اندازه چیزی است که در آن‌هاست — پس در عرض معمول دسکتاپ یک‌ردیفه می‌ماند و
 * در عرض‌های کمتر، مثل بقیه جدول‌های آژانس، افقی اسکرول می‌شود و هیچ ستونی حذف
 * نمی‌شود. */
.fi-price-summary-scroll {
    overflow-x: auto;
}

.fi-price-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    /* ستون‌ها به اندازه محتوای خودشان، نه به اندازه مساوی: «سایز» و «تعداد
       مراحل» کوتاه‌اند و نباید همان پهنای یک مبلغ را بگیرند (بند ۱۸). */
    table-layout: auto;
}

.fi-price-summary-table th,
.fi-price-summary-table td {
    /* فاصله ستون‌ها کمتر از جدول‌های دیگر این صفحه است، چون هدف صریح تسک
       یک‌ردیفه ماندن همین جدول است (بند ۱۸). */
    padding: 0.375rem 0.625rem;
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-price-summary-table th,
.dark .fi-price-summary-table td {
    border-bottom-color: var(--std-color-gray-700, #374151);
}

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

.dark .fi-price-summary-table th {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-price-summary-table td {
    font-size: 0.9375rem;
    font-weight: 600;
}

.fi-price-summary-table tbody tr:last-child th,
.fi-price-summary-table tbody tr:last-child td {
    border-bottom: 0;
}

.fi-price-summary-amount {
    display: block;
    font-size: 1.0625rem;
    white-space: nowrap;
}

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

/* بند ۱۹: سایز و تعداد مراحل زرد، قیمت در آخرین مرحله سبز. رنگ روی خود مقدار
 * می‌نشیند؛ عنوان‌های جدول ساختار استاندارد خودشان را نگه می‌دارند و بقیه
 * مقدارها بی‌دلیل رنگی نمی‌شوند (بند ۲۳). */
.fi-price-summary-table .fi-price-summary-size,
.fi-price-summary-table .fi-price-summary-steps {
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-summary-table .fi-price-summary-size,
.dark .fi-price-summary-table .fi-price-summary-steps {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-summary-table .fi-price-summary-last-price .fi-price-summary-amount {
    color: var(--std-color-success-700, #15803d);
}

.dark .fi-price-summary-table .fi-price-summary-last-price .fi-price-summary-amount {
    color: var(--std-color-success-400, #4ade80);
}

/* معادل تومان به حروف — همان زرد و همان کم‌رنگی «قیمت پایه»، یک اندازه
 * کوچک‌تر، در یک خط و با تولتیپ برای متن کامل (الزام بخش دوم-۴ و ۱۵). */
.fi-price-summary-words,
.fi-price-simulator-words,
.fi-price-forecast-words {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--std-color-warning-700, #b45309);
    opacity: 0.85;
}

.dark .fi-price-summary-words,
.dark .fi-price-simulator-words,
.dark .fi-price-forecast-words {
    color: var(--std-color-warning-400, #fbbf24);
}

.dark .fi-price-summary-label,
.dark .fi-price-summary-muted {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-price-increase-empty,
.fi-price-simulator-empty,
.fi-price-forecast-empty,
.fi-price-forecast-note {
    font-size: 0.875rem;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-increase-empty,
.dark .fi-price-simulator-empty,
.dark .fi-price-forecast-empty,
.dark .fi-price-forecast-note {
    color: var(--std-color-gray-400, #9ca3af);
}

/* شبیه‌ساز قیمت (الزام شبیه‌ساز-۰۳ و ۰۴) */
.fi-price-simulator {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* «نرخ پایه ← تخفیف ۵۰٪ ← قیمت نهایی» — مسیر رسیدن به عدد. در عرض کم
 * می‌شکند و هیچ‌وقت از کادر بیرون نمی‌زند.
 *
 * الزام شبیه‌ساز-۰۵: این مسیر یک زیرنویس ریز بود و حالا نیست. هر اندازه‌ای در
 * آن — نوشته، عدد، فاصله، بالشتک و خود فلش — دو برابر شده، چون چیزی که باید
 * دیده شود «چطور از نرخ پایه به قیمت نهایی رسیدیم» است، نه فقط خود عدد آخر. */
.fi-price-simulator-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.625rem;
    line-height: 1.5;
}

.fi-price-simulator-trail-part {
    border-radius: 0.75rem;
    padding: 0.25rem 1rem;
    font-weight: 600;
    background: var(--std-color-gray-100, #f3f4f6);
    color: var(--std-color-gray-700, #374151);
}

/* الزام شبیه‌ساز-۰۶: هر مرحله رنگ مفهوم خودش را دارد. سبزِ «نرخ پایه» همان
 * سبزِ کادر نرخ پایه است و قرمزِ «تخفیف» روی کل برچسب می‌نشیند — عنوان و درصد
 * با هم — چون هر دو یک برچسب‌اند. «قیمت نهایی» همان زرد قبلی می‌ماند. */
.fi-price-simulator-trail-base {
    background: var(--std-color-success-100, #dcfce7);
    color: var(--std-color-success-700, #15803d);
}

.fi-price-simulator-trail-discount {
    background: var(--std-color-danger-100, #fee2e2);
    color: var(--std-color-danger-700, #b91c1c);
}

.fi-price-simulator-trail-final {
    background: var(--std-color-warning-100, #fef3c7);
    color: var(--std-color-warning-700, #b45309);
}

.fi-price-simulator-trail-arrow {
    font-size: 1.625rem;
    color: var(--std-color-gray-400, #9ca3af);
}

.dark .fi-price-simulator-trail-part {
    background: var(--std-color-gray-800, #1f2937);
    color: var(--std-color-gray-200, #e5e7eb);
}

/* در حالت شب زمینه‌ها یکسان می‌مانند و تفاوت روی خود نوشته است — همان کاری که
 * «قیمت نهایی» از قبل می‌کرد. */
.dark .fi-price-simulator-trail-base {
    background: var(--std-color-gray-700, #374151);
    color: var(--std-color-success-400, #4ade80);
}

.dark .fi-price-simulator-trail-discount {
    background: var(--std-color-gray-700, #374151);
    color: var(--std-color-danger-400, #f87171);
}

.dark .fi-price-simulator-trail-final {
    background: var(--std-color-gray-700, #374151);
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-simulator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem 1.5rem;
}

.fi-price-simulator-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.fi-price-simulator-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-simulator-label {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-price-simulator-value {
    font-size: 0.9375rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fi-price-simulator-final .fi-price-simulator-amount {
    font-size: 1.125rem;
}

/* جدول پیش‌بینی (الزام پیش‌بینی-۰۳). در عرض کم افقی اسکرول می‌شود، مانند
 * جدول‌های دیگر پنل، و هیچ ستونی فشرده و ناخوانا نمی‌شود. */
.fi-price-forecast-scroll {
    overflow-x: auto;
}

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

.fi-price-forecast-table th,
.fi-price-forecast-table td {
    padding: 0.5rem 0.75rem;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-price-forecast-table th,
.dark .fi-price-forecast-table td {
    border-bottom-color: var(--std-color-gray-700, #374151);
}

.fi-price-forecast-table th {
    font-weight: 600;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-forecast-table th {
    color: var(--std-color-gray-400, #9ca3af);
}

/* سطری که خود مدیر تعریفش کرده، از نقاط مرجع جدول جدا دیده شود. */
.fi-price-forecast-step {
    background: var(--std-color-warning-50, #fffbeb);
}

.dark .fi-price-forecast-step {
    background: var(--std-color-gray-800, #1f2937);
}

.fi-price-forecast-badge {
    margin-inline-start: 0.375rem;
    border-radius: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--std-color-warning-100, #fef3c7);
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-forecast-badge {
    background: var(--std-color-gray-700, #374151);
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-forecast-amount-cell {
    min-width: 0;
}

.fi-price-forecast-amount {
    display: block;
    font-weight: 600;
}

/* ── سوابق تغییر متغیرهای افزایش قیمت (الزام تاریخچه-۱۵ تا ۲۰) ───────────── */

/* کادر و هدر هر نسخه، همان کادر و هدر «سوابق تغییر نرخ‌های پایه» است و از همان
 * کلاس‌ها استفاده می‌کند؛ دو سابقه مالی که کنار هم خوانده می‌شوند نباید دو ظاهر
 * متفاوت داشته باشند. اینجا فقط پنجره «اثر بر قیمت» ماند که چیز تازه‌ای است. */

.fi-price-version-effect {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fi-price-version-name {
    font-size: 0.9375rem;
    font-weight: 700;
}

.fi-price-version-base {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-version-base,
.fi-price-version-missing {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-price-version-missing {
    font-size: 0.8125rem;
}

.fi-price-version-table {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.fi-price-version-table td {
    padding: 0.375rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-price-version-table td {
    border-bottom-color: var(--std-color-gray-700, #374151);
}

/* رنگ اینجا نوشته نمی‌شود: عنوان هر سن رنگ خودش را از کلاس همان سن می‌گیرد و
 * یک رنگ خنثی که هیچ‌وقت دیده نمی‌شود، فقط بعداً سر راه می‌گیرد (بند ۸). */
.fi-price-version-age {
    white-space: nowrap;
}

.fi-price-version-amount {
    font-weight: 600;
    white-space: nowrap;
}

/* معادل تومان به حروف. رنگش اینجا نوشته نمی‌شود: هر ردیف رنگ عنوان سنِ خودش را
 * می‌گیرد، و آن رنگ پایین‌تر در همین فایل یک‌بار تعریف شده است (بند ۳ و ۸). */
.fi-price-version-words {
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── «متغیرهای افزایش قیمت عکس» — سه بخش به‌جای یک صفحه بلند ───────────────── */
/* الزام افزایش-قیمت-۰۲ تا ۲۵. */

/* الزام افزایش-قیمت-۰۲ و ۰۳: «افزودن مرحله افزایش قیمت» روبه‌روی عنوان مدیریت
   بنشیند و توضیح زیر آن در یک خط کامل خوانده شود. هدر پنل به‌طور پیش‌فرض یک ردیف
   فلکس دو ستونی است، پس توضیح از جایی که دکمه شروع می‌شود می‌شکند؛ اینجا گرید
   می‌شود تا عنوان و دکمه روبه‌روی هم بنشینند و توضیح تمام عرض را داشته باشد.

   معیار-افزایش-۰۱۲ تا ۰۲۳: همان چیدمان، حالا برای هر سه «معیار افزایش قیمت».
   «مستندات فنی» و «تاریخچه تغییرات اطلاعات» را پنل با یک render hook بالای هر
   مدیریتی می‌کشد (معیار-افزایش-۰۵۳)، پس آن دکمه‌ها اینجا ساخته نمی‌شوند و
   جابه‌جا هم نمی‌شوند — فقط ردیفی که هدرِ همین سه صفحه در آن چیده می‌شود گرید
   می‌شود. دامنه اثر دقیقاً همین سه کلاس صفحه است و هیچ مدیریت دیگری تکان
   نمی‌خورد (معیار-افزایش-۰۵۴ و ۰۵۵).

   زیر ۷۶۸ پیکسل هیچ‌کدام از این قاعده‌ها اجرا نمی‌شوند: هدر همان ستونِ
   پیش‌فرض پنل می‌ماند، دکمه‌ها به ردیف بعد می‌روند و متن توضیح نه بریده می‌شود
   نه از عرض بیرون می‌زند (معیار-افزایش-۰۱۷ و ۰۲۳). */
@media (min-width: 768px) {
    .fi-price-increase-page .fi-header,
    .fi-mission-distance-page .fi-header,
    .fi-photo-equipment-page .fi-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 0;
    }

    .fi-price-increase-page .fi-header > div:first-child,
    .fi-mission-distance-page .fi-header > div:first-child,
    .fi-photo-equipment-page .fi-header > div:first-child {
        display: contents;
    }

    .fi-price-increase-page .fi-header .fi-breadcrumbs,
    .fi-mission-distance-page .fi-header .fi-breadcrumbs,
    .fi-photo-equipment-page .fi-header .fi-breadcrumbs {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-block-end: 1rem;
    }

    .fi-price-increase-page .fi-header-heading,
    .fi-mission-distance-page .fi-header-heading,
    .fi-photo-equipment-page .fi-header-heading {
        grid-column: 1;
        grid-row: 2;
    }

    /* آفست ۲۸ پیکسلی پنل برای هدر عمودی است و اینجا دکمه را از خط عنوان
       پایین می‌برد. */
    .fi-price-increase-page .fi-header-actions-ctn,
    .fi-mission-distance-page .fi-header-actions-ctn,
    .fi-photo-equipment-page .fi-header-actions-ctn {
        grid-column: 2;
        grid-row: 2;
        margin-block-start: 0;
    }

    .fi-price-increase-page .fi-header-subheading,
    .fi-mission-distance-page .fi-header-subheading,
    .fi-photo-equipment-page .fi-header-subheading {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: none;
        margin-block-start: 0.5rem;
    }

    /* معیار-افزایش-۰۱۴ و ۰۲۱: ردیف دکمه‌ها باید فقط به‌اندازه خودش عرض بگیرد و
       نه بیشتر، وگرنه ستون دوم گرید پهن می‌ماند و عرضی که قرار بود آزاد شود به
       متن توضیح نمی‌رسد. */
    .fi-mission-distance-page .fi-header-actions-ctn,
    .fi-photo-equipment-page .fi-header-actions-ctn {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* الزام افزایش-قیمت-۰۴: تب‌های اصلی مدیریت، با همان فاصله‌ای که بخش‌های دیگر
   پنل از نوار تب می‌گیرند. */
.fi-price-increase-sections > .fi-tabs {
    margin-block-end: 1.5rem;
}

.fi-price-increase-sections .fi-sc-component + .fi-sc-component,
.fi-price-increase-sections .fi-ta-ctn + .fi-sc-component {
    margin-block-start: 1.5rem;
}

/* ── جدول پیش‌بینی قیمت (الزام افزایش-قیمت-۱۰ و ۱۱) ────────────────────────── */

/* در هر ردیف فقط دو مقدار رنگ می‌گیرند — «سن عکس» و «قیمت نهایی به حروف» — و
   رنگشان در ردیف‌های متوالی یکی‌درمیان بین زرد و سبز عوض می‌شود، تا چشم بتواند
   سن را به قیمت همان ردیف وصل کند. رنگ روی خود مقدار می‌نشیند، نه روی خانه و نه
   روی پس‌زمینه ردیف. */
.fi-price-forecast-age-value {
    font-weight: 600;
}

.fi-price-forecast-table .fi-price-forecast-words {
    opacity: 1;
}

.fi-price-forecast-table tbody tr:nth-child(odd) .fi-price-forecast-age-value,
.fi-price-forecast-table tbody tr:nth-child(odd) .fi-price-forecast-words {
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-forecast-table tbody tr:nth-child(odd) .fi-price-forecast-age-value,
.dark .fi-price-forecast-table tbody tr:nth-child(odd) .fi-price-forecast-words {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-forecast-table tbody tr:nth-child(even) .fi-price-forecast-age-value,
.fi-price-forecast-table tbody tr:nth-child(even) .fi-price-forecast-words {
    color: var(--std-color-success-700, #15803d);
}

.dark .fi-price-forecast-table tbody tr:nth-child(even) .fi-price-forecast-age-value,
.dark .fi-price-forecast-table tbody tr:nth-child(even) .fi-price-forecast-words {
    color: var(--std-color-success-400, #4ade80);
}

/* نشان «مرحله تعریف‌شده» و پس‌زمینه ردیف مرحله خنثی می‌شوند: زرد و سبز از این پس
   فقط معنای «این سن به این قیمت می‌رسد» را دارند و نباید با نشانه دیگری اشتباه
   گرفته شوند (الزام افزایش-قیمت-۱۱). */
.fi-price-forecast-badge {
    background: var(--std-color-gray-100, #f3f4f6);
    color: var(--std-color-gray-600, #4b5563);
}

.dark .fi-price-forecast-badge {
    background: var(--std-color-gray-700, #374151);
    color: var(--std-color-gray-300, #d1d5db);
}

.fi-price-forecast-step {
    background: var(--std-color-gray-50, #f9fafb);
}

.dark .fi-price-forecast-step {
    background: var(--std-color-gray-800, #1f2937);
}

/* ── شبیه‌ساز قیمت (الزام افزایش-قیمت-۱۳ تا ۱۹) ────────────────────────────── */

/* «سایز عکس» و «تاریخ گالری» روبه‌روی هم و در یک کادر، تا در نگاه اول ورودی‌های
   اصلی شبیه‌سازی دیده شوند. */
.fi-price-simulator-inputs {
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
    background: var(--std-color-gray-50, #f9fafb);
    padding: 1rem;
}

.dark .fi-price-simulator-inputs {
    border-color: var(--std-color-gray-700, #374151);
    background: var(--std-color-mix-gray-500-10, rgba(107, 114, 128, 0.1));
}

/* الزام افزایش-قیمت-۱۵: دور بخش قابل انتخاب تاریخ کادر مشخصی باشد تا معلوم شود
   انتخابی است. کلاس‌های حلقه‌ای خود فیلد به تنهایی روی این زمینه دیده نمی‌شوند. */
.fi-price-simulator-inputs .fi-jdp-input {
    box-shadow: inset 0 0 0 1px var(--std-color-gray-300, #d1d5db);
    background: var(--std-color-white, #fff);
}

.dark .fi-price-simulator-inputs .fi-jdp-input {
    box-shadow: inset 0 0 0 1px var(--std-color-gray-600, #4b5563);
    background: var(--std-color-mix-white-5, rgba(255, 255, 255, 0.05));
}

/* «تاریخ گالری: ۲ شهریور ۱۴۰۴ — سن عکس از همین تاریخ محاسبه می‌شود.» یک خط، زیر
   همان دو ورودی (الزام افزایش-قیمت-۱۶). */
.fi-price-simulator-basis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-simulator-basis {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-price-simulator-basis-date {
    font-weight: 700;
    color: var(--std-color-gray-700, #374151);
}

.dark .fi-price-simulator-basis-date {
    color: var(--std-color-gray-200, #e5e7eb);
}

/* الزام افزایش-قیمت-۱۷ و ۱۹: نتیجه شبیه‌سازی یک جدول خانه‌بندی‌شده است — هر
   مقدار دقیقاً زیر عنوان خودش، با مرزبندی ظریف و بدون فضای خالی بی‌مورد. */
.fi-price-simulator-scroll {
    overflow-x: auto;
}

.fi-price-simulator-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.fi-price-simulator-table th,
.fi-price-simulator-table td {
    padding: 0.5rem 0.625rem;
    text-align: right;
    vertical-align: top;
    border: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-price-simulator-table th,
.dark .fi-price-simulator-table td {
    border-color: var(--std-color-gray-700, #374151);
}

.fi-price-simulator-table th {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--std-color-gray-500, #6b7280);
    background: var(--std-color-gray-50, #f9fafb);
}

.dark .fi-price-simulator-table th {
    color: var(--std-color-gray-400, #9ca3af);
    background: var(--std-color-mix-gray-500-10, rgba(107, 114, 128, 0.1));
}

.fi-price-simulator-table td {
    font-weight: 600;
}

.fi-price-simulator-table .fi-price-simulator-amount {
    display: block;
    white-space: nowrap;
}

.fi-price-simulator-table .fi-price-simulator-words {
    font-weight: 500;
}

.fi-price-simulator-note {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-simulator-note {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-price-simulator-table .fi-price-simulator-final .fi-price-simulator-amount {
    font-size: 0.9375rem;
}

/* ══ «متغیرهای افزایش قیمت عکس» — خوانایی و رنگ‌بندی تکمیلی ═══════════════════
 * تسک ۱۴۰۵/۰۶/۰۲/۱۰. هیچ فرمول، نرخ، مرحله یا سابقه‌ای اینجا تغییر نمی‌کند؛ فقط
 * چیزی که خوانده می‌شود عوض می‌شود (بند ۲۵).
 *
 * یک قاعده در همه‌جا (بند ۲۴): سایز زرد، مقدار قبلی قرمز، مقدار جدید سبز، عکس
 * یک‌ساله سبز، پنج‌ساله آبی، ده‌ساله نارنجی، و «نرخ پایه آن زمان» بنفش. هیچ رنگ
 * خامی نوشته نمی‌شود: همه از توکن‌های «استانداردسازی نمای پنل» می‌آیند و هر
 * `var()` مقدار پشتیبان خودش را دارد. */

/* ── پنجره «اثر این نسخه از قوانین بر قیمت» (بند ۱ تا ۴) ───────────────────── */

/* بند ۲: نام هر سایز، در تمام بخش‌های تکرارشونده پنجره. */
.fi-price-version-name {
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-version-name {
    color: var(--std-color-warning-400, #fbbf24);
}

/* بند ۴: «نرخ پایه آن زمان» بنفش روشن — عمداً نه زردِ سایز و نه هیچ‌کدام از سه
 * رنگِ سن، تا با آن‌ها اشتباه نشود. بنفش رنگی است که این پنل جای دیگری برای
 * «معنا» به کار نبرده، پس معنای تازه‌ای با خودش نمی‌آورد. */
.fi-price-version-base {
    color: #7e22ce; /* violet-700 */
    font-weight: 500;
}

.dark .fi-price-version-base {
    color: #c4b5fd; /* violet-300 */
}

/* بند ۳: یک الگوی ثابت برای هر سه سن، در تمام سایزهای پنجره. رنگ‌ها روی زمینه
 * تیره پنل انتخاب شده‌اند و در حالت روشن، سرِ تیره‌تر همان طیف را می‌گیرند.
 *
 * رنگ هر سن فقط همین‌جا نوشته می‌شود. هر چیزی که در آن ردیف باید هم‌رنگ عنوان سن
 * باشد — از جمله قیمت حروفی تومانی — همین متغیر را می‌خواند، پس اگر رنگ یک سن
 * روزی عوض شود، ردیفش یکجا با آن عوض می‌شود و دو رنگِ ناهماهنگ پیش نمی‌آید. */
.fi-price-version-effect {
    --fi-price-version-one: var(--std-color-success-700, #15803d);
    --fi-price-version-five: #1d4ed8; /* blue-700 */
    --fi-price-version-ten: #c2410c; /* orange-700 */
}

.dark .fi-price-version-effect {
    --fi-price-version-one: var(--std-color-success-400, #4ade80);
    --fi-price-version-five: #60a5fa; /* blue-400 */
    --fi-price-version-ten: #fb923c; /* orange-400 */
}

.fi-price-version-table .fi-price-version-age-one {
    color: var(--fi-price-version-one);
}

.fi-price-version-table .fi-price-version-age-five {
    color: var(--fi-price-version-five);
}

.fi-price-version-table .fi-price-version-age-ten {
    color: var(--fi-price-version-ten);
}

.fi-price-version-age-one,
.fi-price-version-age-five,
.fi-price-version-age-ten {
    font-weight: 600;
}

/* ── تب «سوابق تغییر متغیرهای افزایش قیمت» (بند ۵ تا ۱۳) ──────────────────── */

/* بند ۶: تاریخ و ساعت هر سابقه زرد، هم در «وضعیت اولیه» و هم در تغییرهای بعدی.
 * قاعده فقط به هدرِ همین مدیریت وصل است — «سوابق تغییر نرخ‌های پایه» کنارش از
 * همان کلاس مشترک استفاده می‌کند و نباید با این تسک عوض شود. */
.fi-price-history-card-when {
    color: var(--std-color-warning-700, #b45309);
    font-weight: 600;
}

.dark .fi-price-history-card-when {
    color: var(--std-color-warning-400, #fbbf24);
}

/* بند ۸ و ۹: «سن قبلی» و «درصد قبلی» قرمز، «سن جدید» و «درصد جدید» سبز.
 *
 * `->color()` روی یک ستون جدول در این پنل به‌تنهایی کار نمی‌کند: بلوک مرکزی
 * «استانداردسازی نمای پنل» پس از شیوه‌نامه‌ها چاپ می‌شود و رنگ متن هر خانه را
 * برمی‌گرداند. پس همان دو نقش با وزنِ بیشتر و روی همان عنصری که کلاس ستون رویش
 * می‌نشیند دوباره نوشته می‌شوند. عنوان ستون‌ها دست‌نخورده‌اند (بند ۸ و ۲۳). */
.fi-ta-text-item.fi-color.fi-price-history-before {
    color: var(--danger-600, #dc2626);
}

.fi-ta-text-item.fi-color.fi-price-history-after {
    color: var(--success-600, #16a34a);
}

:where(.dark) .fi-ta-text-item.fi-color.fi-price-history-before {
    color: var(--danger-400, #f87171);
}

:where(.dark) .fi-ta-text-item.fi-color.fi-price-history-after {
    color: var(--success-400, #4ade80);
}

/* بند ۱۰: «اثر بر قیمت» زرد باشد و از همان ابتدا زیرخط داشته باشد، تا بدون
 * بردن موس روی آن پیدا باشد که لینک است و پنجره دیگری باز می‌کند.
 *
 * رنگ را خودِ کنش با `->color('warning')` تعیین می‌کند و همان‌جا هم باید تعیین
 * شود؛ ولی بلوک مرکزی «استانداردسازی نمای پنل» پس از شیوه‌نامه‌ها چاپ می‌شود و
 * رنگ متن این خانه را برمی‌گرداند. پس دقیقاً همان نقش، فقط برای همین یک پیوند و
 * با وزن بیشتر، دوباره نوشته می‌شود — همان استثنایی که «عنوان تخفیف» در فهرست
 * تخفیف‌ها هم با آن نوشته شده. مقدارش توکن زرد استاندارد است، نه رنگ خام. */
.fi-ta-actions .fi-link.fi-price-history-effect-link {
    color: var(--std-color-warning-700, #b45309);
    text-decoration-line: underline;
    text-underline-offset: 0.2em;
}

:where(.dark) .fi-ta-actions .fi-link.fi-price-history-effect-link {
    color: var(--std-color-warning-400, #fbbf24);
}

/* بند ۱۱ تا ۱۳: هر تغییر یک کادر مستقل.
 *
 * جدول همان جدول گروه‌بندی‌شده استاندارد است — ستون‌ها با همان سازوکار عمومی
 * جابه‌جا می‌شوند و هیچ ساختار موازی ساخته نشده — ولی مرز میان دو تغییر با یک
 * نگاه دیده می‌شود: هدر هر گروه بالای کادر، دو کناره در تمام ردیف‌های همان
 * گروه، و خط پایانی روی آخرین ردیف پیش از هدر گروه بعد. فاصله میان دو کادر یک
 * فاصله استاندارد است، نه آن‌قدر زیاد که مرور سوابق سخت شود (بند ۱۳).
 *
 * دامنه قاعده با `:has` به جدولی محدود شده که واقعاً هدر کارت همین مدیریت را
 * دارد؛ جدول یک ویجت راهی برای گرفتن کلاس اختصاصی ندارد. */
/* سرِ کادر — و فاصله‌ای که آن را از کادر قبلی جدا می‌کند.
 *
 * فاصله با `padding` ساخته شده و نه با `border-top`: جدول پنل
 * `border-collapse: collapse` است و در این حالت مرورگر مرزهای دو خانه مجاور را
 * در هم می‌آمیزد، پس یک حاشیه بالای خانه سرگروه اصلاً به عرض نمی‌رسد. یک لایه
 * مطلق روی همان خانه، از پایینِ فاصله تا کف خانه، سقف و دو کناره کادر را
 * می‌کشد؛ بالای آن لایه دست‌نخورده می‌ماند و همان فاصله میان دو کادر است. */
.fi-ta-group-header-cell:has(.fi-price-history-card-header) {
    position: relative;
    /* ۱ رمِ فاصله، به‌علاوه فاصله داخلی معمول سرگروه. */
    padding-block-start: 1.75rem;
    background-color: transparent;
}

.fi-ta-group-header-cell:has(.fi-price-history-card-header)::before {
    content: '';
    position: absolute;
    inset-block: 1rem 0;
    inset-inline: 0;
    background-color: var(--std-color-gray-50, #f9fafb);
    border-top: 2px solid var(--std-color-warning-500, #f59e0b);
    border-inline: 1px solid var(--std-color-gray-200, #e5e7eb);
    pointer-events: none;
}

.dark .fi-ta-group-header-cell:has(.fi-price-history-card-header)::before {
    background-color: var(--std-color-gray-800, #1f2937);
    border-inline-color: var(--std-color-gray-700, #374151);
}

/* نوشته سرگروه روی همان لایه بنشیند، نه زیرش. */
.fi-ta-group-header-cell:has(.fi-price-history-card-header) .fi-ta-group-header {
    position: relative;
}

/* نخستین کادر صفحه فاصله بالای خودش را لازم ندارد. */
.fi-ta-table tbody > tr:first-child > .fi-ta-group-header-cell:has(.fi-price-history-card-header) {
    padding-block-start: 0.75rem;
}

.fi-ta-table tbody > tr:first-child > .fi-ta-group-header-cell:has(.fi-price-history-card-header)::before {
    inset-block-start: 0;
}

/* کناره‌های کادر: نخستین و آخرین خانه هر ردیفِ داده. */
.fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row) > .fi-ta-cell:first-child {
    box-shadow: inset 1px 0 0 0 var(--std-color-gray-200, #e5e7eb);
}

.fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row) > .fi-ta-cell:last-child {
    box-shadow: inset -1px 0 0 0 var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row) > .fi-ta-cell:first-child {
    box-shadow: inset 1px 0 0 0 var(--std-color-gray-700, #374151);
}

.dark .fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row) > .fi-ta-cell:last-child {
    box-shadow: inset -1px 0 0 0 var(--std-color-gray-700, #374151);
}

/* کفِ کادر: ردیفی که بلافاصله پیش از هدر گروه بعدی است، و ردیف آخر جدول. */
.fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row):has(+ .fi-ta-group-header-row) > .fi-ta-cell,
.fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row):last-child > .fi-ta-cell {
    border-bottom: 1px solid var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row):has(+ .fi-ta-group-header-row) > .fi-ta-cell,
.dark .fi-ta-table:has(.fi-price-history-card-header) tbody > tr:not(.fi-ta-group-header-row):last-child > .fi-ta-cell {
    border-bottom-color: var(--std-color-gray-700, #374151);
}

/* ── تب «شبیه‌ساز قیمت» (بند ۱۴ و ۱۵) ──────────────────────────────────────── */

/* بند ۱۴: فقط مقدارِ انتخاب‌شده زرد می‌شود — نه کادر، نه عنوان و نه پس‌زمینه. */
.fi-price-simulator-input-size .fi-select-input-value-label,
.fi-price-simulator-input-date .fi-jdp-cover {
    color: var(--std-color-warning-700, #b45309);
    font-weight: 600;
}

.dark .fi-price-simulator-input-size .fi-select-input-value-label,
.dark .fi-price-simulator-input-date .fi-jdp-cover {
    color: var(--std-color-warning-400, #fbbf24);
}

/* هنوز روزی انتخاب نشده: نوشته کم‌رنگِ داخل کادر یک مقدار نیست و مثل مقدار
 * رنگ نمی‌شود. */
.fi-price-simulator-input-date .fi-jdp-cover-hint {
    color: var(--std-color-gray-500, #6b7280);
    font-weight: 400;
}

.dark .fi-price-simulator-input-date .fi-jdp-cover-hint {
    color: var(--std-color-gray-400, #9ca3af);
}

/* بند ۱۵: در جدول نتیجه، سایز و تاریخ زرد و افزایش تجمعی سبز. */
.fi-price-simulator-table .fi-price-simulator-size,
.fi-price-simulator-table .fi-price-simulator-date {
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-simulator-table .fi-price-simulator-size,
.dark .fi-price-simulator-table .fi-price-simulator-date {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-simulator-table .fi-price-simulator-cumulative {
    color: var(--std-color-success-700, #15803d);
}

.dark .fi-price-simulator-table .fi-price-simulator-cumulative {
    color: var(--std-color-success-400, #4ade80);
}

/* ── جدول «پیش‌بینی قیمت» (بند ۲۰ تا ۲۲) ───────────────────────────────────── */

/* «درصد مرحله» زرد و «درصد تجمعی» سبز، در تمام ردیف‌ها. این دو ستون تازه‌اند و
 * جای قاعده قبلی را نمی‌گیرند: «سن عکس» و «قیمت نهایی حروفی» همچنان یکی‌درمیان
 * زرد و سبز می‌شوند و قاعده‌شان بالاتر در همین فایل دست‌نخورده مانده (بند ۲۲). */
.fi-price-forecast-table .fi-price-forecast-step-percent {
    color: var(--std-color-warning-700, #b45309);
    font-weight: 600;
}

.dark .fi-price-forecast-table .fi-price-forecast-step-percent {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-forecast-table .fi-price-forecast-cumulative {
    color: var(--std-color-success-700, #15803d);
    font-weight: 600;
}

.dark .fi-price-forecast-table .fi-price-forecast-cumulative {
    color: var(--std-color-success-400, #4ade80);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * تسک ۱۴۰۵/۰۶/۳۲/۰۱ — «اصلاح رنگ‌بندی جدول پیش‌بینی قیمت و پنجره اثر بر قیمت».
 *
 * دو تغییر، هر دو فقط دیدنی: ردیف‌های «جدول پیش‌بینی قیمت» یکی‌درمیان زمینه‌ی
 * کمی متفاوت می‌گیرند، و در پنجره «اثر این نسخه از قوانین بر قیمت» قیمت حروفی
 * هر ردیف هم‌رنگ عنوان سن همان ردیف می‌شود. هیچ عدد، درصد یا محاسبه‌ای دست
 * نمی‌خورد (بند ۹).
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── بند ۱ و ۲: ردیف‌های یکی‌درمیان، کنار خطوط جداکننده ────────────────────── */

/* یک لایه‌ی بسیار کم‌رنگ روی ردیف‌های زوج، نه یک رنگ تازه. عمداً به‌جای
 * `background-color` از یک لایه‌ی تصویری استفاده می‌شود تا *روی* پس‌زمینه‌ی
 * موجود بنشیند و آن را پاک نکند: ردیف «مرحله تعریف‌شده» رنگ خودش را نگه می‌دارد
 * و همچنان از ردیف‌های دیگر جدا دیده می‌شود.
 *
 * خطوط افقی هم دست نمی‌خورند (بند ۲): زمینه کنار خط می‌نشیند، نه به‌جای آن. و
 * رنگ‌های داخل ردیف — سن عکس، درصد مرحله، درصد تجمعی و قیمت حروفی — روی خودِ
 * مقدار هستند، نه روی ردیف، پس هیچ‌کدام از این تغییر اثری نمی‌گیرند. */
.fi-price-forecast-table tbody tr:nth-child(even) {
    background-image: linear-gradient(rgba(17, 24, 39, 0.035), rgba(17, 24, 39, 0.035));
}

.dark .fi-price-forecast-table tbody tr:nth-child(even) {
    background-image: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035));
}

/* ── بند ۳ تا ۸: قیمت حروفی، هم‌رنگ عنوان سن همان ردیف ─────────────────────── */

/* رنگ دوباره نوشته نمی‌شود؛ همان متغیری خوانده می‌شود که عنوان سن همان ردیف از
 * آن رنگ می‌گیرد (بند ۸). قاعده در همه‌ی سایزهای پنجره یکی است و برای هر سایزی
 * که بعداً اضافه شود هم به‌خودی‌خود برقرار می‌ماند (بند ۵). */
.fi-price-version-table .fi-price-version-words-one {
    color: var(--fi-price-version-one);
}

.fi-price-version-table .fi-price-version-words-five {
    color: var(--fi-price-version-five);
}

.fi-price-version-table .fi-price-version-words-ten {
    color: var(--fi-price-version-ten);
}

/* بند ۶: عدد ریالی سفید می‌ماند — رنگی به آن داده نمی‌شود و رنگ ردیف هم روی آن
 * نمی‌نشیند. بند ۷: «نرخ پایه آن زمان» هم همان بنفشِ خودش را نگه می‌دارد؛ هیچ
 * قاعده‌ای در این بخش آن را نمی‌بیند. */

/* ─────────────────────────────────────────────────────────────────────────────
 * تسک ۱۴۰۵/۰۶/۳۲/۰۳ — «اصلاح و تکمیل مدیریت متغیرهای افزایش قیمت عکس».
 *
 * همه‌چیز اینجا دیدنی است: ترتیب و رنگ و ترازِ چیزهایی که از قبل روی صفحه
 * بوده‌اند. هیچ عدد، درصد، نرخ پایه یا محاسبه‌ای دست نمی‌خورد (بند ۱۰).
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── الزام ۲-۳: نام سایز در عنوان پنجره «افزودن مرحله افزایش قیمت» ─────────── */

/* رنگ فقط روی نام سایز می‌نشیند؛ «افزودن مرحله افزایش قیمت —» همان عنوانی است
 * که هر پنجره دیگری در پنل دارد. */
.fi-price-step-size {
    color: var(--std-color-warning-700, #b45309);
    font-weight: 700;
}

.dark .fi-price-step-size {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── الزام ۳-۱: رنگ «سن» بر اساس واحد همان ردیف ───────────────────────────── */

/* سه واحد، سه رنگ ثابت و کاملاً متمایز: روز آبی، ماه زرد، سال سبز — دقیقاً
 * همان سه رنگی که خود تسک پیشنهاد داده و هر سه از توکن‌های «استانداردسازی نمای
 * پنل» خوانده می‌شوند، پس با تم تیره صفحه هماهنگ‌اند و هیچ‌کدام قرمزِ «خطا»
 * نیستند. ردیف «سن صفر» نرخ پایه است و واحدی ندارد، پس رنگ خنثای خودش را
 * می‌گیرد و یکی از آن سه را قرض نمی‌گیرد.
 *
 * `.fi-ta-text-item` را «استانداردسازی نمای پنل» بعد از همه‌ی شیوه‌نامه‌ها چاپ
 * می‌کند، پس رنگ باید با یک انتخابگر مشخص‌تر از آن نوشته شود وگرنه بی‌صدا به
 * نزدیکِ سیاه برمی‌گردد؛ کلاس مستقیماً روی همان عنصری می‌نشیند که
 * `fi-ta-text-item` دارد. */
.fi-ta-text-item.fi-price-step-age-day {
    color: var(--std-color-info-700, #0369a1);
    font-weight: 700;
}

.dark .fi-ta-text-item.fi-price-step-age-day {
    color: var(--std-color-info-400, #38bdf8);
}

.fi-ta-text-item.fi-price-step-age-month {
    color: var(--std-color-warning-700, #b45309);
    font-weight: 700;
}

.dark .fi-ta-text-item.fi-price-step-age-month {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-ta-text-item.fi-price-step-age-year {
    color: var(--std-color-success-700, #15803d);
    font-weight: 700;
}

.dark .fi-ta-text-item.fi-price-step-age-year {
    color: var(--std-color-success-400, #4ade80);
}

.fi-ta-text-item.fi-price-step-age-base {
    color: var(--std-color-gray-500, #6b7280);
    font-weight: 700;
}

.dark .fi-ta-text-item.fi-price-step-age-base {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ── الزام ۳-۲: ردیف‌های یکی‌درمیان در جدول مراحل افزایش قیمت ──────────────── */

/* همان روش «جدول پیش‌بینی قیمت»: یک لایه‌ی بسیار کم‌رنگ *روی* زمینه‌ی موجود، نه
 * یک رنگ تازه به‌جای آن، تا خطوط جداکننده و هر زمینه‌ی دیگری که ردیف داشته باشد
 * سر جای خودش بماند. تفاوت عمداً بسیار ملایم است: هدف فقط دنبال‌کردن یک ردیف تا
 * انتهای آن است. */
.fi-price-increase-page .fi-ta-row:nth-child(even) {
    background-image: linear-gradient(rgba(17, 24, 39, 0.035), rgba(17, 24, 39, 0.035));
}

.dark .fi-price-increase-page .fi-ta-row:nth-child(even) {
    background-image: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035));
}

/* ── الزام ۶-۱ و ۶-۲: دو مقدار جدول خلاصه ────────────────────────────────── */

/* «افزایش تجمعی تا آخرین مرحله» و «آخرین نقطه زمانی» زیر عنوان خودشان وسط‌چین
 * و قرمز می‌شوند تا مجموع افزایش با یک نگاه دیده شود. عنوان ستون‌ها تغییر رنگ
 * نمی‌کنند و بقیه‌ی مقدارها دست‌نخورده‌اند. */
.fi-price-summary-table .fi-price-summary-cumulative,
.fi-price-summary-table .fi-price-summary-last-point {
    text-align: center;
    color: var(--std-color-danger-700, #b91c1c);
}

.dark .fi-price-summary-table .fi-price-summary-cumulative,
.dark .fi-price-summary-table .fi-price-summary-last-point {
    color: var(--std-color-danger-400, #f87171);
}

.fi-price-summary-table .fi-price-summary-cumulative {
    font-weight: 800;
}

/* ── الزام ۷-۲: توضیح «شبیه‌ساز قیمت» زرد شود ─────────────────────────────── */

/* فقط توضیح زیر عنوان. خود عنوان و آیکن کنارش هیچ رنگی از اینجا نمی‌گیرند. */
.fi-price-simulator-section .fi-section-header-description {
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-simulator-section .fi-section-header-description {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── الزام ۸-۱ تا ۸-۳ و الزام شبیه‌ساز-۰۱ تا ۰۳: دو کادر «نرخ پایه» و «قیمت
       نهایی» ──────────────────────────────────────────────────────────────── */

/* نتیجه‌ی شبیه‌سازی باید با یک نگاه دیده شود، پس یک کادر مستقل با حاشیه و
 * زمینه‌ی بسیار کم‌رنگِ زرد آژانس — نه یک کادر تماماً زرد که بقیه‌ی صفحه را
 * تحت‌الشعاع قرار دهد. مبلغ ریالی درشت‌ترین چیز داخل کادر است و معادل حروفی
 * تومان زیر آن می‌نشیند، همان‌طور که تسک خواسته. */

/* الزام شبیه‌ساز-۰۱ و ۰۸: همان فضای تمام‌عرض، حالا بین دو کادر هم‌اندازه.
 * صفحه راست‌به‌چپ است، پس اولین کادر — «نرخ پایه» — سمت راست می‌افتد و «قیمت
 * نهایی» سمت چپ. فاصله‌ی میانشان همان فاصله‌ی اجزای دیگر همین بخش است.
 *
 * در عرض کم دو کادر روی هم می‌روند تا مبلغ‌ها فشرده و شکسته نشوند؛ هیچ‌کدام
 * حذف نمی‌شود. */
.fi-price-simulator-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
}

@media (max-width: 48rem) {
    .fi-price-simulator-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ابعاد، ارتفاع، ساختار، اندازه‌ی نوشته‌ها و چینش هر دو کادر یکی است — یک قاعده
 * برای هر دو، تا الگوی «قیمت نهایی» عیناً همان الگوی «نرخ پایه» بماند
 * (الزام شبیه‌ساز-۰۲ و ۰۳). تنها تفاوت، رنگ است. */
.fi-price-simulator-card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-width: 2px;
    border-style: solid;
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
}

.fi-price-simulator-card > span {
    text-align: center;
}

.fi-price-simulator-final-card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    align-items: center;
    border: 2px solid var(--std-color-warning-500, #f59e0b);
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--std-color-warning-50, #fffbeb);
}

/* الزام شبیه‌ساز-۰۲: همان کادر، به سبز — تا نقطه‌ی شروع محاسبه از نقطه‌ی پایان
 * آن با یک نگاه جدا شود. همان سبزی که «نرخ پایه» در مسیر محاسبه دارد. */
.fi-price-simulator-base-card {
    border-color: var(--std-color-success-600, #16a34a);
    background: var(--std-color-success-50, #f0fdf4);
}

.dark .fi-price-simulator-base-card {
    background: rgba(22, 163, 74, 0.08);
}

.fi-price-simulator-base-card-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--std-color-success-700, #15803d);
}

.dark .fi-price-simulator-base-card-label {
    color: var(--std-color-success-400, #4ade80);
}

.fi-price-simulator-base-card-amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--std-color-success-700, #15803d);
}

.dark .fi-price-simulator-base-card-amount {
    color: var(--std-color-success-400, #4ade80);
}

.fi-price-simulator-base-card-words {
    font-size: 1rem;
    font-weight: 600;
    color: var(--std-color-success-700, #15803d);
    opacity: 0.9;
}

.dark .fi-price-simulator-base-card-words {
    color: var(--std-color-success-400, #4ade80);
}

.dark .fi-price-simulator-final-card {
    background: rgba(245, 158, 11, 0.08);
}

.fi-price-simulator-final-card-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-simulator-final-card-label {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-simulator-final-card-amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-price-simulator-final-card-amount {
    color: var(--std-color-warning-400, #fbbf24);
}

.fi-price-simulator-final-card-words {
    font-size: 1rem;
    font-weight: 600;
    color: var(--std-color-warning-700, #b45309);
    opacity: 0.9;
}

.dark .fi-price-simulator-final-card-words {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── الزام ۵-۱ و ۵-۲: ستون‌های «جدول پیش‌بینی قیمت» جابه‌جا می‌شوند ───────── */

/* عنوان ستون‌ها دستگیره‌ی خودشان هستند: نشانگر «کشیدنی» می‌گیرند و متنشان
 * هنگام کشیدن انتخاب نمی‌شود تا مرورگر به‌جای جابه‌جایی، متن را های‌لایت نکند. */
.fi-price-forecast-reorder-hint {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-forecast-reorder-hint {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-price-forecast-table th.fi-price-forecast-head {
    cursor: grab;
    user-select: none;
}

.fi-price-forecast-table th.fi-price-forecast-head:active {
    cursor: grabbing;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * تسک ۱۴۰۵/۰۶/۳۲/۰۴ — «رفع باگ ثبت سوابق نرخ پایه و بازطراحی نرخ‌های پایه».
 *
 * صفحه دو تب شد، و «سوابق تغییر نرخ‌های پایه» به‌جای یک جدول بلندِ چسبیده،
 * برای هر نوبت تغییر یک کادر مستقل با هدر خودش دارد (بند ۸ و ۹).
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── بند ۸: هر نوبت تغییر، یک کادر مستقل ──────────────────────────────────── */

/* گروه‌های جدول قبلاً فقط با یک خط بالای سرگروه از هم جدا می‌شدند و در عمل یک
 * جدول پیوسته دیده می‌شدند. حالا هر گروه یک کادر واقعی است: هدرش گِرد و پررنگ،
 * و ردیف‌هایش داخل همان کادر — با فاصله‌ی روشن بین دو کادر متوالی، تا «امروز» و
 * «۲۹ مرداد» دو چیز جدا دیده شوند و نه دو ردیف پشت هم. */
.fi-ta-group-header-cell:has(.fi-base-price-card-header) {
    border-top: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    padding-block: 0.75rem;
    box-shadow: inset 0 0 0 1px var(--std-color-gray-200, #e5e7eb);
}

.dark .fi-ta-group-header-cell:has(.fi-base-price-card-header) {
    box-shadow: inset 0 0 0 1px var(--std-color-gray-700, #374151);
}

/* فاصله‌ی بین کادرها: هر سرگروه — جز اولی — از کادر بالای خودش فاصله می‌گیرد. */
.fi-ta-group:not(:first-child) .fi-ta-group-header-cell:has(.fi-base-price-card-header) {
    margin-block-start: 1.25rem;
}

.fi-base-price-card-header {
    font-size: 0.8125rem;
}

/* «ثبت‌کننده» حالا در هدر کادر است، نه ستونی که سه بار تکرار شود (بند ۱۱). */
.fi-base-price-card-author {
    font-weight: 600;
}

/* «توضیح تغییر» اگر ثبت شده باشد، روی همان هدر خوانده می‌شود (بند ۱۱). */
.fi-base-price-card-note {
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--std-color-info-700, #0369a1);
}

.dark .fi-base-price-card-note {
    color: var(--std-color-info-400, #38bdf8);
}

/* ── بند ۲: کادر «در حال ثبت» ─────────────────────────────────────────────── */

/* تغییری که همین حالا ذخیره شده و هنوز پانزده دقیقه‌اش تمام نشده، بلافاصله و در
 * بالای همه دیده می‌شود — با حاشیه‌ی زرد، تا با کادرهای قطعی‌شده اشتباه نشود. */
.fi-ta-group-header-cell:has(.fi-base-price-card-header-pending) {
    box-shadow: inset 0 0 0 2px var(--std-color-warning-500, #f59e0b);
}

.dark .fi-ta-group-header-cell:has(.fi-base-price-card-header-pending) {
    box-shadow: inset 0 0 0 2px var(--std-color-warning-500, #f59e0b);
}

.fi-base-price-card-header-pending .fi-base-price-card-kind,
.fi-base-price-card-pending {
    color: var(--std-color-warning-700, #b45309);
    font-weight: 700;
}

.dark .fi-base-price-card-header-pending .fi-base-price-card-kind,
.dark .fi-base-price-card-pending {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── بند ۹: نرخ قبلی خنثی، نرخ جدید سبز ───────────────────────────────────── */

/* رنگ روی خودِ مبلغ می‌نشیند. «تفاوت قیمت» کنارشان همچنان همان ستونی است که
 * می‌گوید کدام سایز واقعاً تغییر کرده. */
.fi-ta-cell.fi-base-price-rate-before .fi-price-rial-amount {
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-ta-cell.fi-base-price-rate-before .fi-price-rial-amount {
    color: var(--std-color-gray-400, #9ca3af);
}

.fi-ta-cell.fi-base-price-rate-after .fi-price-rial-amount {
    color: var(--std-color-success-700, #15803d);
    font-weight: 700;
}

.dark .fi-ta-cell.fi-base-price-rate-after .fi-price-rial-amount {
    color: var(--std-color-success-400, #4ade80);
}

/* ── هشدار «ثبت سابقه پس از ۱۵ دقیقه» (الزام قیمت-۰۱ تا ۰۴) ───────────────── */

/* یک خط در بالای هر دو مدیریت قیمت‌گذاری، زیر هدر و توضیح صفحه. مثلث زرد در
 * ابتدای متن و نوشتهٔ قرمز، هم‌اندازهٔ توضیح زیر عنوان صفحه — نه بزرگ‌تر، تا با
 * خود عنوان رقابت نکند.
 *
 * inline-flex با align-items: start، چون در موبایل متن چند خط می‌شود و آیکون
 * باید کنار خط اول بماند نه وسط پاراگراف؛ و flex-shrink صفر تا مثلث در عرض کم
 * له نشود. عرض بیشتر از متن نمی‌گیرد، پس اسکرول افقی نمی‌سازد. */
.fi-price-history-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.75rem;
    color: var(--std-color-danger-600, #dc2626);
}

.dark .fi-price-history-notice {
    color: var(--std-color-danger-400, #f87171);
}

/* مثلث هشدار زرد — رنگ شناسهٔ خود پنل، همان زردی که «واترمارک فعال» می‌گیرد. */
.fi-price-history-notice-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.25rem;
    color: var(--std-color-warning-500, #f59e0b);
}

.dark .fi-price-history-notice-icon {
    color: var(--std-color-warning-400, #fbbf24);
}

/* متن رنگش را از خط بالا می‌گیرد؛ اینجا فقط شکستن درست کلمه‌های طولانی است. */
.fi-price-history-notice-text {
    min-width: 0;
}

/* ------------------------------------------------------------------
   «آخرین تغییر» زیر هر فیلد و هر فایل عکاس (الزام نمایش-۰۱ … ۰۳)

   تاریخ باید دیده شود و در عین حال از خود فیلد کم‌اهمیت‌تر بماند: کوچک،
   قرمز و نازک — نه ضخیم، چون هشدار نیست و فقط یک سابقه است. آواتار کارمند
   هم‌قد همان خط است تا ردیف بلندتر نشود.
   ------------------------------------------------------------------ */
.fi-field-history {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.25;
}

.fi-field-history-date,
.fi-field-history-note {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--std-color-danger-600, #dc2626);
}

.dark .fi-field-history-date,
.dark .fi-field-history-note {
    color: var(--std-color-danger-400, #f87171);
}

/* آواتار کارمند: بسیار کوچک، گرد، و نام او فقط با نگه‌داشتن نشانگر روی آن. */
.fi-field-history-avatar {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   «پیوست مدارک دیگر» — تسک ۱۴۰۵/۰۶/۰۵/۱۰، الزام نما-۰۱

   The papers a photographer may have that the panel has no field for. Two
   columns on a desktop, one on a telephone, and — the whole of the
   responsive requirement — a long file name wraps instead of pushing the row
   off the screen.
   ------------------------------------------------------------------ */
.fi-photographer-attachments .fi-fo-repeater-item {
    /* A repeater item is a grid track; without this a name with no spaces in
       it makes the track as wide as itself and takes the page with it. */
    min-width: 0;
}

.fi-photographer-attachments .fi-fo-file-upload-file-info-title,
.fi-photographer-attachments .filepond--file-info-main,
.fi-photographer-attachments .filepond--file-info-sub {
    /* «معرفی‌نامه-هیئت-فوتبال-استان-تهران-۱۴۰۵.pdf» has no space to break at,
       so it is broken anywhere rather than allowed to widen the row. */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* The date and the employee under each paper sit on their own line and wrap
   with it, so they can never land on top of the file above them. */
.fi-photographer-attachments .fi-field-history {
    flex-wrap: wrap;
    max-width: 100%;
}

/* ── تجهیزات-۰۲۱ تا ۰۲۴ و ۰۲۹: «افزایش قیمت بر اساس تجهیزات» ─────────────── */

/* سهم تجهیزات در کادر خلاصه «متغیرهای افزایش قیمت عکس». عمداً رنگ «افزایش
   تجمعی» را نمی‌گیرد: همان چیزی که این ستون باید ثابت کند این است که افزایش
   تجهیزات از افزایش زمانی جداست (تجهیزات-۰۲۱ و ۰۲۲). */
.fi-price-summary-table .fi-price-summary-equipment {
    text-align: center;
    font-weight: 700;
    color: var(--std-color-info-700, #0369a1);
}

.dark .fi-price-summary-table .fi-price-summary-equipment {
    color: var(--std-color-info-400, #38bdf8);
}

/* ستون «افزایش تجهیزات» جدول پیش‌بینی — عمداً خالی است، پس کم‌رنگ است
   (تجهیزات-۰۲۴). */
.fi-price-forecast-table .fi-price-forecast-equipment {
    text-align: center;
    color: var(--std-color-gray-500, #6b7280);
}

.dark .fi-price-forecast-table .fi-price-forecast-equipment {
    color: var(--std-color-gray-400, #9ca3af);
}

/* نام کامل انگلیسی تجهیز در جدول: چپ‌به‌راست و بدون کوتاه‌شدن
   (تجهیزات-۰۰۷). */
.fi-photo-equipment-page .fi-equipment-name {
    direction: ltr;
    text-align: left;
    font-weight: 600;
}

.fi-equipment-modal-name {
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--std-color-warning-700, #b45309);
}

.dark .fi-equipment-modal-name {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── معیار-افزایش-۰۲۴ تا ۰۲۷ — کادر آماری تجهیزات، وسط‌چین ────────────────── */

/* هر شاخص یک واحد است: عنوانِ شاخص و مقدارِ همان شاخص در یک ستون جدول‌اند، پس
   وسط‌چین‌کردن هر دو نسبت به همان ستون، آن‌ها را نسبت به هم وسط‌چین می‌کند.

   فقط جهت متن عوض می‌شود. پهنای ستون‌ها همان `table-layout: auto` قبلی است و
   فاصله‌ها همان `padding` مشترک، پس فاصله میان شاخص‌ها به‌هم نمی‌ریزد
   (معیار-افزایش-۰۲۶)، و رنگ‌ها و عددها و منطق شمارش اصلاً از اینجا رد نمی‌شوند
   (معیار-افزایش-۰۲۷).

   دامنه: `.fi-equipment-summary` و بس. کادر خلاصه «معیار زمان در افزایش قیمت»
   همان جدول را می‌کشد و عمداً راست‌چین می‌ماند. */
.fi-equipment-summary .fi-price-summary-table th,
.fi-equipment-summary .fi-price-summary-table td {
    text-align: center;
}

/* یک خط توضیح زیر شمارنده‌های تجهیزات. */
.fi-equipment-summary-note {
    margin-top: 0.75rem;
    color: var(--std-color-gray-600, #4b5563);
}

.dark .fi-equipment-summary-note {
    color: var(--std-color-gray-400, #9ca3af);
}

/* ── تجهیزات-۰۲۲: کادر خلاصه با ستون هفتم از عرض صفحه بیرون می‌زد ────────── */

/* The summary box is a grid item, and a grid item's own `min-width: auto` lets
   it grow to its widest child rather than scroll inside its track. With six
   columns it happened to fit; with «افزایش تجهیزات» beside them it did not, and
   the card ran off the edge of the page — measured in a browser at ۱۶۰۰
   پیکسل: the section's own box was ۱۴۹۰ wide starting at x=−۱۰۶.

   `min-width: 0` is what lets `.fi-price-summary-scroll`'s own `overflow-x`
   finally do its job, so the table scrolls inside the card instead of taking
   the card with it. Nothing about the table itself changes: بند ۱۸ still keeps
   it on one line. */
/* `.fi-page` carries `min-width: 100%` and no maximum, so it grows to its
   widest child and takes the whole column with it — the card ended at
   x=−۱۰۶ off the left edge of the page. Capping it at the column's own width
   is what finally makes `.fi-price-summary-scroll`'s `overflow-x` the thing
   that gives, so the seventh column scrolls inside the card rather than
   pushing the card off the screen. Measured in a browser at ۱۶۰۰ پیکسل, before
   and after. */
.fi-price-increase-page,
.fi-photo-equipment-page {
    max-width: 100%;
}

.fi-price-increase-page .fi-page-main,
.fi-price-increase-page .fi-sc .fi-grid-col,
.fi-price-increase-page .fi-sc-component,
.fi-price-increase-summary,
.fi-price-increase-summary .fi-section-content-ctn,
.fi-price-increase-summary .fi-section-content,
.fi-equipment-summary,
.fi-equipment-summary .fi-section-content-ctn,
.fi-equipment-summary .fi-section-content {
    min-width: 0;
    max-width: 100%;
}

.fi-price-summary-scroll {
    min-width: 0;
    max-width: 100%;
}

/* ── «افزایش قیمت بر اساس مأموریت» ────────────────────────────────────────
   آژانس-فاصله-۰۴۶: the calculator sits under the bands and must stay readable
   at ۳۹۰ پیکسل, so its reading is a two-column table that wraps rather than a
   row of labels that runs off the edge.

   Every colour is a managed token — a raw hex in a panel stylesheet fails the
   standards survey, and the tokens carry their own dark-mode shade. */
.fi-mission-distance-page {
    max-width: 100%;
}

.fi-mission-tester {
    min-width: 0;
    max-width: 100%;
}

.fi-mission-tester-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.fi-mission-tester-table th,
.fi-mission-tester-table td {
    padding: 0.5rem 0.75rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in oklab, var(--std-color-gray-500, #6b7280) 25%, transparent);
    word-break: break-word;
}

.fi-mission-tester-table th {
    width: 40%;
    font-weight: 500;
    color: color-mix(in oklab, var(--std-color-gray-500, #6b7280) 90%, transparent);
}

.fi-mission-tester-answer th,
.fi-mission-tester-answer td {
    border-bottom: none;
}

.fi-mission-tester-percent {
    display: block;
    font-weight: 700;
    color: var(--std-color-warning-500, #f59e0b);
}

.fi-mission-tester-reason {
    display: block;
    margin-top: 0.25rem;
    color: color-mix(in oklab, var(--std-color-gray-500, #6b7280) 90%, transparent);
}

.fi-mission-tester-empty {
    margin-top: 1rem;
    color: color-mix(in oklab, var(--std-color-gray-500, #6b7280) 90%, transparent);
}

/* لوکیشن-۰۱۲ تا ۰۱۴ — the calculator inside the window its button opens.
   The window draws the heading and the sentence itself, so the tool is bare
   inside it and only needs room. */
.fi-mission-tester-shell {
    min-width: 0;
    max-width: 100%;
}

/* ── لوکیشن-۰۰۷ تا ۰۱۱ — the list itself ──────────────────────────────────
   Three tones a reader can tell apart at a glance: the header bar, an odd row
   and an even one. They are deliberately close together — the stripe is there
   to carry the eye across a row, not to pattern the table — and the header keeps
   its own, distinctly darker, surface so it is never mistaken for a row
   (لوکیشن-۰۰۸). */
.fi-mission-distance-page .fi-ta-row:nth-child(even) {
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-mission-distance-page .fi-ta-row:nth-child(even) {
    background-color: rgb(255 255 255 / 3.5%);
}

/* The header bar, a step the other way, so the three levels read
   header → row → row rather than two of them agreeing. */
.fi-mission-distance-page thead tr {
    background-color: var(--std-color-gray-100, #f3f4f6);
}

:where(.dark) .fi-mission-distance-page thead tr {
    background-color: rgb(0 0 0 / 25%);
}

/* لوکیشن-۰۰۹ تا ۰۱۱ — «افزودن بازه فاصله», «آزمایش محاسبه افزایش قیمت» and the
   column-toggle icon share one row.

   Filament draws the two buttons inside `.fi-ta-header` and the icon inside
   `.fi-ta-header-toolbar`, one under the other, so a management with no search
   box and no filters spent a whole row of height on a single icon. Laying the
   container out as a row puts the icon at the far end of the line the buttons
   are already on, and the row it used to have goes with it (لوکیشن-۰۱۰) —
   nothing is hidden and no empty space is left behind. */
.fi-mission-distance-page .fi-ta-header-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fi-mission-distance-page .fi-ta-header {
    flex: 1 1 20rem;
    padding-block-end: 0;
    border-block-end: 0;
}

.fi-mission-distance-page .fi-ta-header-toolbar {
    flex: 0 1 auto;
    margin-inline-start: auto;
    padding-block: 0.5rem;
    border-block-start: 0;
}

/* لوکیشن-۰۲۰ — the two enlarged cells must not make the row tall.
   The band's own line box is tightened and the cells' vertical padding trimmed,
   so the row grows by much less than its text does: measured in a browser,
   ۵۷ → ۸۱ پیکسل while the band itself went ۱۴ → ۲۸. Left alone it would have
   been about ۱۱۴. */
.fi-mission-distance-page .fi-ta-cell {
    padding-block: 0.375rem;
}

/* لوکیشن-۰۴۱ besides: at ۳۹۰ پیکسل the bigger band text has to wrap inside its
   own cell rather than push the table sideways. */
.fi-mission-distance-page .fi-mission-band-range {
    line-height: 1.15;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ══ «افزایش قیمت بر اساس تجهیزات» — تسک ۱۴۰۵/۰۶/۱۵/۰۷ ══════════════════════ */

/* تجهیز-رابط-۰۰۸ — «نوع تجهیز» وسط‌چین، و فقط عنوان ستون.
   The value under it is an English model name, kept left-to-right and
   left-aligned by `.fi-equipment-name` above; only the heading moves, which is
   what the requirement asks for in as many words. Filament draws the heading as
   a flex row (a label and a sort arrow), so it is the row that is centred. */
.fi-photo-equipment-page .fi-equipment-name-header .fi-ta-header-cell-sort-btn,
.fi-photo-equipment-page .fi-equipment-name-header > * {
    justify-content: center;
}

.fi-photo-equipment-page .fi-equipment-name-header {
    text-align: center;
}

/* تجهیز-رابط-۰۱۳ تا ۰۱۵ — سه سطح بصری: هدر جدول، ردیف نوع اول، ردیف نوع دوم.
   The stripe is deliberately faint — it exists to carry the eye along one piece
   of gear's row, not to pattern the table — and the header bar steps the other
   way, so it can never be mistaken for a row (خط قرمز تجهیز-رابط-۰۱۵). */
.fi-photo-equipment-page .fi-ta-row:nth-child(even) {
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-photo-equipment-page .fi-ta-row:nth-child(even) {
    background-color: rgb(255 255 255 / 3.5%);
}

.fi-photo-equipment-page thead tr {
    background-color: var(--std-color-gray-100, #f3f4f6);
}

:where(.dark) .fi-photo-equipment-page thead tr {
    background-color: rgb(0 0 0 / 25%);
}

/* ── تجهیز-رابط-۰۰۳ تا ۰۰۶ — چهار تاریخ، به شکل کنترل انتخاب تاریخ ────────── */

/* The four dates used to be drawn as bare text boxes with their text made
   transparent and the readable date laid over them, which is why nobody could
   tell they were controls. They are now unmistakably boxes: a border that
   reacts, a pointer cursor over the whole of it, and a calendar mark at the
   trailing edge.

   The mark is a background image rather than an element, and the readable cover
   over the input keeps `pointer-events: none` (agency-discounts.css), so a
   click anywhere inside the control still lands on the input itself and still
   opens jalaliDatepicker — تجهیز-رابط-۰۰۴ asks for exactly that, and an element
   in the way would break it. */
.fi-equipment-date-field .fi-jdp-field {
    position: relative;
    border-radius: 0.5rem;
    transition: box-shadow 75ms ease, background-color 75ms ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.6' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.15rem 1.15rem;
    background-position: left 0.7rem center;
}

:where(.dark) .fi-equipment-date-field .fi-jdp-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.6' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/%3E%3C/svg%3E");
}

/* The whole box is the click target, cursor included, so the control looks and
   behaves like one thing rather than a line of text with a hidden input. */
.fi-equipment-date-field .fi-jdp-field,
.fi-equipment-date-field .fi-jdp-input,
.fi-equipment-date-field .fi-jdp-cover {
    cursor: pointer;
}

/* Room for the mark, and a box tall enough to read as a control. */
.fi-equipment-date-field .fi-jdp-input {
    padding-block: 0.5rem;
    padding-inline-end: 2.5rem;
}

.fi-equipment-date-field .fi-jdp-readout .fi-jdp-cover {
    inset-inline-end: 0.75rem;
    inset-inline-start: 2.5rem;
}

/* It reacts, so a manager can see it is live before clicking it. */
.fi-equipment-date-field .fi-jdp-field:hover .fi-jdp-input {
    background-color: var(--std-color-gray-50, #f9fafb);
}

:where(.dark) .fi-equipment-date-field .fi-jdp-field:hover .fi-jdp-input {
    background-color: rgb(255 255 255 / 6%);
}

/* تجهیز-رابط-۰۰۶ — an empty control says «انتخاب تاریخ», faintly, and a filled
   one shows its own date at full strength. The two states are never confused. */
.fi-equipment-date-field .fi-jdp-cover-hint {
    color: var(--std-color-gray-400, #9ca3af);
}

:where(.dark) .fi-equipment-date-field .fi-jdp-cover-hint {
    color: var(--std-color-gray-500, #6b7280);
}

/* تجهیز-رابط-۰۰۲ — the gear's own name, under the window's one heading. */
.fi-equipment-modal-name {
    display: block;
    font-weight: 600;
}

.fi-equipment-modal-note {
    display: block;
    margin-top: 0.35rem;
}

/* ── مبدأ-رابط-۰۰۵ و ۰۱۰ — «تهران / غرب», the one thing in a row that is yellow */

/*
   `->color('warning')` alone loses this cell to the standards block, which is
   printed last and paints table text near-black. The column carries its own
   class instead and the colour is stated at a weight that survives it; the
   period beside it deliberately keeps the table's ordinary text colour, so the
   origin is what the eye lands on and the dates do not compete with it.
*/
.fi-ta-text-item .fi-pricing-origin-place,
.fi-pricing-origin-place.fi-ta-text-item {
    color: var(--std-color-warning-600, #d97706);
}

:where(.dark) .fi-ta-text-item .fi-pricing-origin-place,
:where(.dark) .fi-pricing-origin-place.fi-ta-text-item {
    color: var(--std-color-warning-400, #fbbf24);
}

/* ── مبدأ-رابط-۰۱۴ تا ۰۲۲ — the two dates, as controls anybody can see ────── */

/*
   The two boxes read as plain grey text before this: a transparent background,
   a hairline ring, and no sign at all that clicking opens a calendar. They are
   now the panel's yellow — a filled box with white, bold, centred text — and the
   whole of the box is the click target.

   The readable cover keeps `pointer-events: none` (agency-discounts.css), so a
   click anywhere inside still lands on the input underneath and still opens
   jalaliDatepicker; nothing here changes what the field stores or sends
   (مبدأ-رابط-۰۱۶ و خط قرمز «تاریخ فارسی فقط به‌صورت ظاهری ساخته نشود»).
*/
.fi-pricing-origin-date-field .fi-jdp-field {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: box-shadow 75ms ease, filter 75ms ease;
}

.fi-pricing-origin-date-field .fi-jdp-field,
.fi-pricing-origin-date-field .fi-jdp-input,
.fi-pricing-origin-date-field .fi-jdp-cover {
    cursor: pointer;
}

/* The box itself. `!important` is not needed — the input's own ring and
   background are utility classes of a single class each, and this selector is
   two.

   عکاس-رابط-۰۴۱ — **and the input's own text stays transparent.** It said
   `color: #fff` here until ۱۴۰۵/۰۶/۱۷, and that one word is the whole of the
   «two dates on top of each other» fault: `JalaliDatePicker` deliberately keeps
   «۱۴۰۵/۰۶/۱۷» in the input — jalaliDatepicker parses it to build the day grid,
   and it is what is sent to the server — and lays the readable «۱۷ شهریور
   ۱۴۰۵» over it in `.fi-jdp-cover`. What makes that legible is one rule in
   `agency-discounts.css`, `.fi-jdp-readout .fi-jdp-input { color: transparent }`,
   and this selector is three classes to its two, so it won and the numeric form
   came back — painted white, in the same place, under the Persian one. Nothing
   was duplicated, nothing was rendered twice: one colour outranked another. */
.fi-pricing-origin-date-field .fi-jdp-field .fi-jdp-input,
.fi-pricing-origin-date-field .fi-jdp-input {
    background-color: var(--std-color-warning-500, #f59e0b);
    box-shadow: inset 0 0 0 1px var(--std-color-warning-600, #d97706);
    color: transparent;
    font-weight: 700;
    text-align: center;
    padding-block: 0.55rem;
    caret-color: transparent;
}

:where(.dark) .fi-pricing-origin-date-field .fi-jdp-field .fi-jdp-input,
.fi-pricing-origin-date-field .fi-jdp-input {
    background-color: var(--std-color-warning-500, #f59e0b);
    color: transparent;
}

/* مبدأ-رابط-۰۱۵ و ۰۱۷: the date a manager reads is the cover, so the weight and
   the centring have to be stated there too — the input's own text is
   transparent underneath it.

   عکاس-رابط-۰۳۹ و ۰۴۰: and the words are the panel's near-black rather than
   white. The yellow of the box is untouched; only the writing on it changed,
   and it clears 7:1 against that yellow where white cleared 2:1. The invitation
   an empty «تا تاریخ» carries keeps its own lighter tone below — it is not a
   date, and the task changes the colour of dates. */
.fi-pricing-origin-date-field .fi-jdp-readout .fi-jdp-cover,
:where(.dark) .fi-pricing-origin-date-field .fi-jdp-readout .fi-jdp-cover {
    justify-content: center;
    color: var(--std-color-gray-950, #030712);
    font-weight: 700;
}

/* مبدأ-رابط-۰۱۸: an empty «تا تاریخ» is still visibly a control — the same
   yellow box, with its invitation written in it rather than a blank. */
.fi-pricing-origin-date-field .fi-jdp-cover-hint,
:where(.dark) .fi-pricing-origin-date-field .fi-jdp-cover-hint {
    color: rgb(255 255 255 / 85%);
    font-weight: 600;
}

/* It reacts, so it is plainly live rather than a coloured label. */
.fi-pricing-origin-date-field .fi-jdp-field:hover {
    filter: brightness(1.06);
}

.fi-pricing-origin-date-field .fi-jdp-input:focus {
    box-shadow: inset 0 0 0 2px var(--std-color-warning-700, #b45309);
}

/* مبدأ-رابط-۰۲۹ — at ~۳۹۰ پیکسل the box is still one line and still inside the
   window; the date is short enough that nothing has to shrink. */
@media (max-width: 30rem) {
    .fi-pricing-origin-date-field .fi-jdp-input {
        padding-inline: 0.5rem;
    }
}

/* ── تسک ۱۴۰۵/۰۶/۱۷/۰۱ — «بازه و سقف اعتبار» ─────────────────────────────── */

/*
 * عکاس-رابط-۰۳۶ و ۰۳۷: the first day of the period green and the last day red,
 * with the word between them left exactly as it was.
 *
 * Written as a class on the span rather than as a `->color()` on the column,
 * for two reasons: a colour on the column would paint the whole phrase, and a
 * table cell's `->color()` loses to the panel's standards block and draws
 * near-black in this panel. The selector is doubled — once under
 * `.fi-ta-text-item`, once bare — so it outranks that block wherever the cell
 * is drawn.
 *
 * Nothing about the dates themselves, the record's validity or the no-overlap
 * rule is touched (عکاس-رابط-۰۳۸).
 */
.fi-ta-text-item .fi-pricing-origin-from,
.fi-pricing-origin-from {
    color: var(--std-color-success-600, #16a34a);
    font-weight: 600;
}

:where(.dark) .fi-ta-text-item .fi-pricing-origin-from,
:where(.dark) .fi-pricing-origin-from {
    color: var(--std-color-success-400, #4ade80);
}

.fi-ta-text-item .fi-pricing-origin-to,
.fi-pricing-origin-to {
    color: var(--std-color-danger-600, #dc2626);
    font-weight: 600;
}

:where(.dark) .fi-ta-text-item .fi-pricing-origin-to,
:where(.dark) .fi-pricing-origin-to {
    color: var(--std-color-danger-400, #f87171);
}