/* «جدول رده‌بندی مرحله» و «مدیریت جدول» — تسک ۱۴۰۵/۰۷/۰۶/۷۱.

   Two things are drawn here and nothing else is: the read-only standings table of a
   stage (بند ۵ و ۶ — a taller row, and the team's logo before its name), and the
   «مدیریت جدول» that is now the fourth tab beside «کل | میزبان | میهمان» (بند ۱۱ تا ۱۷).

   Nothing in this file knows which competition, stage or group it is drawing, which is
   بند ۳'s «هیچ شناسه‌ای در راه‌حل هاردکد نشود» at the level of the stylesheet: every rule
   is addressed to the markup the two views emit, so a stage created tomorrow is drawn by
   it without anything being added anywhere. */

/* ── بند ۵ — ارتفاع ردیف، ۱٫۵ برابر ──────────────────────────────────────────
   The row was `padding: 5px 8px` around a `text-sm` line: ۵ + ۲۰ + ۵ = ۳۰px. ۱٫۵ × ۳۰
   is ۴۵px, which is the height below, and it is a height rather than more padding
   because بند ۵ is explicit that «صرفاً افزودن فضای خالی نامتناسب کافی نیست و محتوای
   ردیف باید از نظر عمودی تراز مناسب داشته باشد» — the cell centres its content in
   whatever height the row really has.

   It is the one rule for all three tables: کل, میزبان and میهمان are the same view with
   a different column suffix, so none of them can be left behind. */
.standings-readonly-table tbody tr {
    height: 2.8125rem;
}

.standings-readonly-table td {
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}

/* ── تسک ۷۴، بخش هشتم — جدول فشرده و وسط‌چین ─────────────────────────────────
   The table used to be `w-full`, so its ten columns were spread over the whole box and
   «نام تیم» stood a third of the page away from its own numbers. It is as wide as its
   columns now, centred in the box, and the gaps are three numbers of one rule:

   - between two statistics columns: the standard, `2 × --srt-gap`;
   - «نام تیم ↔ تعداد بازی»: the same standard, since the name's cell ends with the
     same `--srt-gap` every statistics cell starts with;
   - «رتبه ↔ نام تیم»: half of it — the rank's end and the name's start each take half
     a `--srt-gap`.

   The font size, the row height and the logo are untouched — بخش هشتم: «هدف این نیست
   که فونت یا خوانایی کاهش پیدا کند». A narrow screen scrolls the wrapper sideways
   rather than the page, as before. */
.standings-readonly-table--compact {
    --srt-gap: 0.75rem;
    width: auto;
    margin-inline: auto;
}

.standings-readonly-table--compact th,
.standings-readonly-table--compact td {
    padding: 0.25rem var(--srt-gap);
    white-space: nowrap;
}

.standings-readonly-table--compact th {
    padding-block: 0.375rem;
}

.standings-readonly-table--compact .standings-readonly-rank {
    padding-inline-end: calc(var(--srt-gap) / 2);
}

.standings-readonly-table--compact .standings-readonly-team-cell {
    padding-inline-start: calc(var(--srt-gap) / 2);
    white-space: normal;
    min-width: 10rem;
}

/* ── بند ۶ — لوگوی تیم، پیش از نام تیم ───────────────────────────────────────
   «[لوگوی تیم] نام تیم» in one line, the picture sized to the taller row and never
   stretched, and the name free to wrap without the logo moving.

   The picture is `1.75rem`: a little over half the row, so it is unmistakable and still
   leaves the name its line. `object-fit: contain` is what keeps بند ۶'s «نسبت تصویر آن
   حفظ شود» true at any size, and `flex: 0 0 auto` is what stops a long name squashing
   it — بند ۶'s «باعث تغییر نامناسب عرض ستون نشود». */
.standings-readonly-team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.standings-readonly-team-logo {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 0.25rem;
}

.standings-readonly-team-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── بند ۱۱ — پنج تب داخلی «مدیریت جدول» ────────────────────────────────────
   Drawn as the panel's own tabs are — a row of pills with the open one filled — and
   بند ۲۰: they wrap onto a second line at a small width rather than running off the
   side or forcing the page to scroll sideways. */
.standings-manage {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.standings-manage-heading {
    font-size: 0.9375rem;
    font-weight: 700;
}

.standings-manage-online-note {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: rgba(245, 158, 11, 0.12);
    border-inline-start: 3px solid #f59e0b;
    font-size: 0.8125rem;
    line-height: 2;
}

.standings-manage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(120, 120, 120, 0.25);
}

.standings-manage-tab {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(120, 120, 120, 0.3);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.standings-manage-tab:hover {
    background-color: var(--panel-accent-wash, rgba(31, 121, 87, 0.12));
}

.standings-manage-tab.is-active {
    background-color: var(--panel-accent, #1f7957);
    border-color: var(--panel-accent, #1f7957);
    color: var(--panel-on-accent, #ffffff);
}

.standings-manage-note {
    font-size: 0.8125rem;
    line-height: 2;
}

.standings-manage-empty {
    font-size: 0.875rem;
}

.standings-manage-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* بند ۲۰ — a wide table scrolls inside its own box rather than making the whole page
   scroll sideways on a narrow screen. */
.standings-manage-scroll {
    overflow-x: auto;
}

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

.standings-manage-table.is-compact {
    font-size: 0.8125rem;
}

.standings-manage-table th,
.standings-manage-table td {
    padding: 0.5rem;
    text-align: start;
}

.standings-manage-row-actions {
    display: flex;
    gap: 0.5rem;
}

/* ── بند ۱۳ — تب هشدارها: راست‌چین کامل، و ارتفاع ردیف دو برابر ──────────────
   «کل محتوای تب هشدارها راست‌چین شود. این شامل عنوان‌ها، متن هشدار، توضیحات، شناسه‌ها و
   اطلاعات مرتبط و محتوای ردیف‌ها است» — the whole component is `dir="rtl"`, and the
   list is told again here so a badge and its sentence read right to left whatever the
   page around them does.

   «ارتفاع ردیف‌های هشدار نسبت به وضعیت فعلی ۲ برابر شود»: the row was one `line-height:
   2.2` line of `text-sm` — about ۳۱px — so the floor is ۶۲px, and «اگر متن طولانی است،
   ارتفاع باید اجازه خواندن مناسب را بدهد و متن نباید بریده یا روی ردیف دیگر بیفتد» is
   why it is a floor and not a fixed height: a long warning grows past it instead of
   being cut. */
.standings-warnings {
    display: flex;
    flex-direction: column;
    /* ── تسک ۱۴۰۵/۰۷/۰۸/۶۹، بند ۲۹ — «هر کادر هشدار باید از کادر بعدی توسط رنگ زمینه
       اصلی صفحه / فاصله بصری واضح جدا شود … نباید … همه ردیف‌ها روی یک Background
       یکپارچه قرار گرفته و به‌صورت یک بلوک واحد دیده شوند». نیم‌رم فاصله، به‌جای
       ۰٫۳۷۵rem، پس رنگ زمینهٔ صفحه بین دو کادر واقعاً دیده می‌شود. */
    gap: 0.5rem;
    text-align: right;
    direction: rtl;
    background-color: transparent;
}

.standings-warning-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(120, 120, 120, 0.2);
    font-size: 0.875rem;
    line-height: 2.2;
    text-align: right;
}

/* ── تسک ۱۴۰۵/۰۷/۰۸/۶۹، بند ۲۸ — رنگ‌بندی یکی‌درمیان هشدارها ──────────────────
   «هر ردیف هشدار نسبت به ردیف بعدی رنگ زمینه متفاوت داشته باشد. Alternating Background
   باید به‌اندازه‌ای قابل تشخیص باشد که کاربر بتواند هر هشدار را سریعاً از هشدار بعدی
   جدا کند».

   دو سایه از پالت خود پنل، و نه رنگی تازه: ردیف زوج روشن‌تر و ردیف فرد یک پله تیره‌تر،
   در هر دو تم. پاریتهٔ ردیف را خود Blade روی عنصر می‌نویسد. */
.standings-warning-row[data-row-parity="0"] {
    background-color: rgba(var(--gray-50, 249 250 251), 1);
}

.standings-warning-row[data-row-parity="1"] {
    background-color: rgba(var(--gray-200, 229 231 235), 1);
}

:where(.dark) .standings-warning-row[data-row-parity="0"] {
    background-color: rgba(var(--gray-900, 17 24 39), 1);
}

:where(.dark) .standings-warning-row[data-row-parity="1"] {
    background-color: rgba(var(--gray-700, 55 65 81), 1);
}

.standings-warning-text {
    min-width: 0;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
}

/* ── تسک ۱۰۵ — هشدارها در موبایل ────────────────────────────────────────────────
   در یک ردیف، نشان نوع هشدار و لینک «اتفاقات بازی» هیچ‌کدام کوچک نمی‌شوند؛ در صفحهٔ
   ۳۹۰ پیکسلی تقریباً همهٔ پهنا را می‌گرفتند و برای متن هشدار به اندازهٔ یک حرف جا
   می‌ماند، پس متن حرف‌به‌حرف زیر هم می‌شکست و صفحه ده‌ها هزار پیکسل بلند می‌شد. در پهنای
   کم، متن خط کامل خودش را می‌گیرد: نشان بالا، متن زیر آن، لینک در انتها. */
@media (max-width: 640px) {
    .standings-warning-row {
        flex-wrap: wrap;
    }

    .standings-warning-text {
        flex: 1 1 100%;
    }
}

/* ── بند ۳۳ — ارتفاع Badge زرد نوع هشدار، ۱٫۵ برابر ─────────────────────────────
   «کادر/Badge زردی که … عبارتی مانند «اختلاف نتیجه رسمی با اتفاقات گل» را نمایش می‌دهد،
   از نظر ارتفاع ۱.۵ برابر وضعیت فعلی شود. متن باید از نظر عمودی داخل Badge به‌درستی
   Center شود».

   Badge خود فیلامنت `min-height` ندارد؛ ارتفاعش از `padding-block` و `line-height`
   می‌آید و در این پنل ۱٫۵rem درمی‌آید. پس یک `min-height` صریح به اندازهٔ ۱٫۵ برابرِ آن
   داده می‌شود و متن با flex در مرکز عمودی می‌نشیند — و چون ردیف خودش `align-items:
   center` است، بلندشدن Badge بقیهٔ محتوای ردیف را جابه‌جا نمی‌کند (شرط پایانی بند ۳۳). */
.standings-warning-row .standings-warning-badge {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* ── بند ۳۱ و ۳۲ — لینک «اتفاقات بازی» هر هشدار ────────────────────────────────
   انتهای ردیف، پس متن هشدار را از جای خودش تکان نمی‌دهد؛ و در تب تازه باز می‌شود، که
   کار خودِ لینک است و نه کار شیوه‌نامه. */
.standings-warning-match-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    color: rgb(var(--primary-600, 217 119 6));
}

:where(.dark) .standings-warning-match-link {
    color: rgb(var(--primary-400, 251 191 36));
}

.standings-warning-match-link:hover {
    background-color: rgba(120, 120, 120, 0.15);
}

.standings-warning-match-link svg {
    width: 1rem;
    height: 1rem;
}

/* ── بند ۳۰ — همین استاندارد خوانایی، در بقیهٔ تب‌های «مدیریت جدول» ──────────────
   «هرجا لیستی از رکوردها/ردیف‌ها وجود دارد، همین استاندارد خوانایی رعایت شود: تفکیک
   واضح ردیف‌ها؛ Alternating Background؛ جداسازی کارت‌ها با Background صفحه».

   جدول‌های همان تب — کسر امتیاز، تاریخچهٔ احکام، نتایج حکم‌های مرحله و محاسبهٔ آنلاین —
   همه `.standings-manage-table` هستند، پس یک قاعده برای هر چهار تا، و برای هر جدولی که
   فردا به همین تب اضافه شود. */
.standings-manage-table tbody tr:nth-child(odd) {
    background-color: rgba(var(--gray-50, 249 250 251), 1);
}

.standings-manage-table tbody tr:nth-child(even) {
    background-color: rgba(var(--gray-200, 229 231 235), 1);
}

:where(.dark) .standings-manage-table tbody tr:nth-child(odd) {
    background-color: rgba(var(--gray-900, 17 24 39), 1);
}

:where(.dark) .standings-manage-table tbody tr:nth-child(even) {
    background-color: rgba(var(--gray-700, 55 65 81), 1);
}

/* …و یک فاصلهٔ واقعی بین ردیف‌ها، تا فهرست یک بلوک یکپارچه نباشد (بند ۲۹ و ۳۰). */
.standings-manage-table {
    border-collapse: separate;
    border-spacing: 0 0.25rem;
}

/* ── بند ۲۵ و ۲۶ — زیرتب‌های «کلی | میزبان | میهمان | مدیریت جدول» ─────────────
   بند ۲۵ — «به‌صورت مجموعه‌ای وسط‌چین نمایش داده شوند»: نوار تب یک flex است، پس
   `justify-content: center` کل مجموعه را وسط صفحه می‌برد و نه هر تب را در جای خودش.

   بند ۲۶ — «ارتفاع هرکدام … حدود ۲۵٪ / یک‌چهارم بیشتر شود»: ارتفاع یک تب از
   `padding-block` می‌آید؛ ۰٫۷۵rem به ۰٫۹۵rem می‌رسد، که با `line-height` ۱٫۲۵rem
   ارتفاع را از ۲٫۷۵rem به ۳٫۱۵rem می‌برد — همان یک‌چهارمِ خواسته‌شدهٔ فضای بالا و پایین.
   عرض و فاصله دست نمی‌خورد، پس «متعادل و هماهنگ» می‌ماند. */
.competition-standings-subtabs .fi-tabs {
    justify-content: center;
}

.competition-standings-subtabs .fi-tabs-item {
    padding-block: 0.95rem;
}

/* ── تسک ۱۱۰ — بازطراحی «تنظیم جدول» و جدول رده‌بندی هر مرحله ─────────────────── */

/* ۳.۱ — نام نوع جدولِ انتخاب‌شده به زرد استاندارد پنل (رنگ اصلی، Amber). فقط مقدار
   انتخاب‌شده (`choices__list--single`) و فقط خود نام؛ نشان رنگی و «۸ معیار رتبه‌بندی»
   همان‌اند که بودند، و فهرست بازشده هم دست نمی‌خورد. */
.standings-template-select .choices__list--single .standings-template-option-name {
    color: rgb(var(--primary-400));
    font-weight: 700;
}

/* ۳.۲ — کادر سبز «رتبه‌های برتری این جدول» با تسک ۱۴۰۵/۰۷/۱۸/۰۲ (بند ۵.۳) برداشته شد. */

/* ۴ و ۶ — نوار زیرتب‌های تازه، مثل «کلی | میزبان | میهمان | مدیریت جدول» وسط‌چین. */
.competition-standings-competition-subtabs .fi-tabs,
.competition-standings-overall-subtabs .fi-tabs {
    justify-content: center;
    flex-wrap: wrap;
}

/* ۴.۳ و ۶ — عنوان کادرهای زیرتب‌ها زرد و پررنگ. */
.competition-standings-competition-subtabs .fi-section-header-heading,
.competition-standings-overall-subtabs .fi-section-header-heading {
    color: rgb(var(--primary-400));
    font-weight: 700;
}

/* ══ تسک ۱۴۰۵/۰۷/۱۸/۰۲ — «تنظیم جدول» و جدول رده‌بندی هر مرحله ══════════════════ */

/* بند ۵.۲ — فیلد «انتخاب نوع جدول رده‌بندی» حدود ۲ تا ۳ میلی‌متر زیر زیرتب‌ها.
   The strip's own bottom margin and the tab's top padding were what stood between the
   two; both are trimmed here, on this strip only. The help text under the field and the
   field itself are untouched. */
.competition-standings-setup-tabs > .fi-tabs {
    margin-bottom: 0;
}

.competition-standings-setup-tabs > .fi-fo-tabs-tab {
    padding-top: 0.6rem;
}

.competition-standings-setup-tabs > .fi-fo-tabs-tab > .fi-fo-component-ctn {
    row-gap: 0.75rem;
}

/* بند ۶.۱ — one strip of four tabs; it wraps on a narrow screen rather than scrolling
   out of sight, and its section headings keep the yellow the nested strip had. */
.competition-standings-subtabs .fi-tabs {
    flex-wrap: wrap;
}

.competition-standings-subtabs .fi-section-header-heading {
    color: rgb(var(--primary-400));
    font-weight: 700;
}

/* ══ تسک ۷۹ — «تنظیم جدول» و جدول رده‌بندی هر مرحله ═══════════════════════════════════
   Spacing and colour only. Every rule is addressed to a class the form puts on its own
   tab or box, so a competition with one stage and one with five, the create page and the
   edit page, are all drawn by the same rules, and nothing about a value, its save or its
   calculation is touched. */

/* بند ۷ — «تنظیم جدول»: ردیف «انتخاب نوع جدول / تنظیمات اختصاصی جدول» به نصف فاصلهٔ قبلی
   از تب‌های اصلی صفحه (۲۴ → ۱۲ پیکسل). */
.fi-fo-tabs-tab.competition-standings-setup-tab {
    margin-top: 0.75rem !important;
}

/* بند ۶ — «انتخاب نوع جدول» حدود ۳٫۵ میلی‌متر (۱۳ پیکسل) زیر ردیف تب‌ها: عنوان، فیلد،
   توضیح و ردیف‌های معیارها یک مجموعه به پهنای محتوا، وسط‌چین، و عنوان وسط‌چین روی فیلد.
   ترتیب معیارها و انتخاب فعلی همان است. */
.competition-standings-setup-tabs > .fi-fo-tabs-tab.competition-standings-type-pane {
    margin-top: 0 !important;
    padding-top: 0.8rem;
}

.competition-standings-type-pane > .fi-fo-component-ctn {
    width: fit-content;
    min-width: min(32rem, 100%);
    max-width: 100%;
    margin-inline: auto;
    row-gap: 0.6rem;
}

.competition-standings-type-pane .fi-fo-field-wrp > .grid > .flex.items-center:first-child {
    position: relative;
    justify-content: center;
}

/* The field's change-history mark keeps its corner without pushing the title off centre. */
.competition-standings-type-pane .fi-fo-field-wrp > .grid > .flex.items-center:first-child > .fi-information-history-mark {
    position: absolute;
    inset-inline-end: 0;
}

.competition-standings-type-pane .fi-fo-field-wrp-helper-text {
    text-align: center;
}

/* بند ۷ — ردیف «تعیین امتیازات منفی کارت‌ها / تنظیمات رودررو / کارت‌های تعدادی» به یک‌سوم
   فاصلهٔ قبلی از ردیف بالایی (۳۴ → ۱۱ پیکسل)، و محتوای هر زیرتب به همان الگوی فشرده
   (۲۴ → ۸ پیکسل) زیر ردیف خودش — با محتوا یا بی‌محتوا. */
.competition-standings-setup-tabs > .fi-fo-tabs-tab.competition-standings-competition-pane {
    margin-top: 0 !important;
    padding-top: 0.7rem;
}

.competition-standings-competition-subtabs > .fi-fo-tabs-tab {
    margin-top: 0.5rem !important;
}

/* بند ۸ — «الگوی انتخاب‌شده تنظیم اختصاصی کارت زرد یا کارت قرمز ندارد.» به زرد پنل. */
.standings-card-penalty-none {
    color: var(--competition-entity-name-on-light, #b45309);
    font-weight: 600;
}

.dark .standings-card-penalty-none {
    color: var(--competition-entity-name, #facc15);
}

/* بند ۹ — دو تب «کارت قرمز / کارت زرد»: فاصلهٔ ردیف تب‌ها از متن بالا و از محتوای زیر
   یکسان، دو‌سوم فاصلهٔ قبلی (۲۴ → ۱۶ پیکسل). */
.competition-standings-competition-subtabs > .fi-fo-tabs-tab:has(> .fi-fo-component-ctn > * > .competition-counting-cards-tabs) > .fi-fo-component-ctn {
    row-gap: 1rem;
}

.competition-counting-cards-tabs > .fi-fo-tabs-tab {
    margin-top: 1rem !important;
}

.competition-counting-cards-tabs > .fi-tabs {
    justify-content: center;
}

/* «وضعیت مؤثر فعلی» زرد؛ غیرفعال قرمز، فعال سبز، و «فعال ولی ناقص» — که هنوز اجرا
   نمی‌شود — کهربایی. */
.standings-effective-state-label {
    color: var(--competition-entity-name-on-light, #b45309);
    font-weight: 700;
}

.dark .standings-effective-state-label {
    color: var(--competition-entity-name, #facc15);
}

.standings-effective-state {
    font-weight: 600;
}

.standings-effective-state--inactive {
    color: #dc2626;
}

.standings-effective-state--active {
    color: #16a34a;
}

.standings-effective-state--incomplete {
    color: #d97706;
}

.dark .standings-effective-state--inactive {
    color: #f87171;
}

.dark .standings-effective-state--active {
    color: #4ade80;
}

.dark .standings-effective-state--incomplete {
    color: #fbbf24;
}

/* بند ۱۰ — «جدول»: از ردیف زیرتب‌ها تا نشان نام گروه و سه جدول حدود ۵ میلی‌متر
   (۲۴ → ۱۹ پیکسل). اندازهٔ نشان نام گروه در خود نمای سه‌جدولی است. */
.competition-standings-subtabs > .fi-fo-tabs-tab:has([data-testid="stage-standings-trio"]) {
    margin-top: 1.2rem !important;
}

/* بند ۱۱ و ۱۲ — «مرحله اول | گروه اول»: نام مرحله به رنگ ثابت سربرگ‌های همین بخش
   (زرد پنل)، خط عمودی خاکستری، و نام گروه به رنگ ثابت جایگاهش (GroupColours). */
.competition-scope-heading {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-weight: 700;
}

.competition-scope-stage {
    color: rgb(var(--primary-600));
}

.dark .competition-scope-stage {
    color: rgb(var(--primary-400));
}

.competition-scope-sep {
    color: rgb(var(--gray-400));
    font-weight: 400;
}

.competition-scope-group {
    color: var(--competition-group-ink);
}

.dark .competition-scope-group {
    color: var(--competition-group-text);
}

/* بند ۱۱ — کادر هر گروه در «تعیین وضعیت‌ها» بی‌سربرگ و فشرده‌تر؛ «وضعیت‌های این گروه» و
   «مرحله اول | گروه اول» در یک ردیف. فیلدها همان اندازه‌اند. */
.fi-section.standing-titles-group > .fi-section-content-ctn > .fi-section-content {
    padding: 0.85rem 1rem;
}

.fi-section.standing-titles-group > .fi-section-content-ctn > .fi-section-content > .fi-fo-component-ctn {
    row-gap: 0.85rem;
}

.standing-titles-group-head {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
}

.standing-titles-group-head .competition-scope-heading {
    padding: 0.05rem 0.6rem;
    border-radius: 0.4rem;
    background-color: rgb(var(--gray-950) / 0.04);
}

.dark .standing-titles-group-head .competition-scope-heading {
    background-color: rgb(255 255 255 / 0.05);
}

/* بند ۱۱ — نام وضعیت انتخاب‌شده در فیلد «عنوان وضعیت» به رنگ خود وضعیت. */
.choices__list--single .standings-title-option-name {
    color: var(--standings-title-colour);
    font-weight: 600;
}

/* بند ۱۲.۳ — «کسر امتیاز: ۳» روی کارت بستهٔ تیم. */
.standings-deduction-label-amount {
    margin-inline-start: 0.75rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: #b91c1c;
    background-color: rgb(239 68 68 / 0.1);
    white-space: nowrap;
}

.dark .standings-deduction-label-amount {
    color: #fca5a5;
    background-color: rgb(239 68 68 / 0.16);
}

/* ══ تسک ۸۰ — «تعیین امتیازات منفی کارت‌ها» ═════════════════════════════════════════
   بند ۲.۱ — the two fields were half the page each. Each is now about a third of that,
   the pair centred in one row whose width — two fields and the gap between them — is the
   width of the «تعیین امتیازات منفی کارت‌ها / تنظیمات رودررو / کارت‌های تعدادی» strip
   above, so neither field reaches past the strip's ends. On a phone the pair stays in one
   row and shrinks, and never runs off the screen. Only width and placing: the value, its
   validation and its save are the form's, untouched. */
.competition-card-penalty-row > .fi-fo-component-ctn {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    column-gap: 1.5rem;
    width: 100%;
    max-width: 28.5rem;
    margin-inline: auto;
}

.competition-card-penalty-row > .fi-fo-component-ctn > * {
    flex: 1 1 13.5rem;
    min-width: 0;
    max-width: 13.5rem;
}

/* «الگوی انتخاب‌شده … ندارد.» stands alone, as wide as it needs. */
.competition-card-penalty-row > .fi-fo-component-ctn > :has(.standings-card-penalty-none) {
    flex-basis: 100%;
    max-width: none;
    text-align: center;
}

.competition-card-penalty-row:has(.standings-card-penalty-none) > .fi-fo-component-ctn {
    max-width: none;
}

/* بند ۲.۲ و ۲.۳ — the title and the number in the card's own colour, the number set to
   the right. The required star keeps its own colour. Yellow and red are the panel's
   (Tailwind yellow-400 / red-400 on the dark theme, yellow-700 / red-600 on the light). */
.competition-card-penalty-field {
    --card-penalty-colour: #a16207;
}

.competition-card-penalty-red {
    --card-penalty-colour: #dc2626;
}

.dark .competition-card-penalty-yellow {
    --card-penalty-colour: #facc15;
}

.dark .competition-card-penalty-red {
    --card-penalty-colour: #f87171;
}

.competition-card-penalty-field .fi-fo-field-wrp-label > span {
    color: var(--card-penalty-colour) !important;
    font-weight: 700;
}

.competition-card-penalty-field input.fi-input {
    color: var(--card-penalty-colour) !important;
    font-weight: 700;
    text-align: right;
}