/* «خوانایی تیم‌ها، شهرها و ورزشگاه‌ها در مدیریت رقابت‌ها»
   (تسک ۱۴۰۵/۰۷/۰۲/۰۵، بند ۹ تا ۱۳).

   One stylesheet for the whole of مدیریت رقابت‌ها rather than a <style> block per tab:
   بند ۱۴ asks for the same standard on a competition with one stage and on one with five,
   on a stage created a year ago and on one created in the same sitting, and a rule written
   into a tab cannot reach the stage that does not exist yet. Everything here is addressed
   to the panel's own pickers, so a stage added later is drawn by it without anything being
   added anywhere.

   Nothing here changes what a picker offers, what it saves or what it searches — بند ۲۰:
   «هیچ منطق انتخاب/حذف/ذخیره تغییر نکرده است». Three things are drawn differently: the
   team's logo before its name, the name a quarter larger, and the chosen values laid out
   as a grid whose rows alternate (تسک ۱۴۰۵/۰۷/۰۲/۰۵/۰۳، بند ۴ تا ۱۰), which replaces the
   per-box alternation the previous pass drew. */

/* ── بند ۱۱ — the team's own name, a quarter again its size ────────────────────
   ×۱٫۲۵ of whatever the list's own size is, expressed in `em` so it follows the panel
   rather than fixing a size of its own. The span is put round «نام تیم (نام باشگاه)» by
   CompetitionTeamDescriptions::decorate(); the age group, the gender, the sport and the
   city are outside it and keep the size they had, which is بند ۱۱'s «نباید ... مسیر تیم
   یا سایر متادیتاها را بی‌دلیل بزرگ کند».

   Scoped to the places a *picker* draws a team — the open list, the chosen chips, and the
   «لینک تیم‌ها» buttons. A team's name inside a table cell keeps the cell's own size, so
   no column is widened by this. */
.choices .competition-team-name,
.fi-fo-select .competition-team-name,
.competition-team-btn .competition-team-name {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.35;
}

/* ── بند ۴ تا ۹ — شبکه منظم، و رنگ‌بندی بر اساس ردیف ──────────────────────────
   تسک ۱۴۰۵/۰۷/۰۲/۰۵/۰۳.

   The previous decision — every *other box* a different colour — is cancelled by بند ۳
   and بند ۸: «تصمیم قبلی درباره رنگ‌بندی یکی‌درمیان تک‌تک کادرها لغو می‌شود … رنگ‌بندی بر
   اساس ردیف کامل شبکه انجام شود». What it was measured against was not the shade but the
   shape: boxes of different widths one after another read as a wall however they are
   painted, and eighteen teams is exactly when it matters.

   So the chosen values of a competition picker are a grid. The number of columns is the
   one thing a stylesheet cannot work out — it depends on the field's real width and on
   how long the longest value is — and it is handed in as `--cpg-cols` by
   `public/js/competition-picker-grid.js`, which also marks each box with the parity of
   the row it really landed in. Everything below paints what that decided.

   A field the script has not reached yet has no `--cpg-cols`; the fallback of 1 means
   such a field is a single readable column rather than the old wall. */
.competition-picker-striped .choices__list--multiple {
    display: grid;
    grid-template-columns: repeat(var(--cpg-cols, 1), minmax(0, 1fr));
    /* بند ۴ — «بین هر ستون و ستون بعدی؛ هر ردیف و ردیف بعدی فاصله بصری مناسب». */
    gap: 0.5rem;
    /* بند ۴ — «ارتفاع هماهنگ»: every row is as tall as the tallest box in the grid, so
       the columns line up down the field instead of stepping. */
    grid-auto-rows: 1fr;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

/* بند ۴ — «تا حد ممکن عرض یکسان»: the box takes its column rather than its words, and
   بند ۷ — nothing may leave the field, so a long value wraps inside its own box instead
   of widening it. */
.competition-picker-striped .choices__list--multiple > .choices__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.competition-picker-striped .choices__list--multiple > .choices__item .pfs-option-label,
.competition-picker-striped .choices__list--multiple > .choices__item .competition-team-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── تسک ۱۴۰۵/۰۷/۰۶/۶۸، بند ۴ و ۵ — یک ظاهر، برای همهٔ کادرهای یک بخش ─────────
   The previous pass painted every other *row* of the grid a light grey and left the
   rows between it the panel's gold. بند ۴ cancels that outright: «دیگر نباید تعدادی
   از آیتم‌ها سفید و تعدادی رنگی باشند … تمام آیتم‌های یک بخش باید یک استایل واحد و
   یکدست داشته باشند». So there is one wash now, and the row's parity decides nothing
   about it.

   The shade is بند ۴'s own instruction: «استایل پایه همان مدل رنگی قدیمی و فعلی … که
   قبلاً به‌صورت زرد استفاده می‌شد، اما رنگ آن از زرد فعلی تیره‌تر و متمایل‌تر به قرمز
   شود». The old gold was the panel's own primary (Amber 400, #fbbf24) at a tenth; this
   is #c2410c — the same wash model, three steps darker and a whole hue nearer red —
   kept as channels so the ring, the wash and the accent mark below can all be cut from
   the one colour and nothing drifts from it.

   `.cpg-row-even` is still named, and named as an equal of the plain box, so a grid the
   script has marked cannot come out looking different from one it has not reached yet.
   The script itself is untouched; what it writes simply no longer paints anything. */
:root {
    /* #c2410c as channels, so a wash, a ring and a solid mark all come off one value. */
    --competition-chip: 194, 65, 12;
}

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

   پس واش نارنجی `--competition-chip` از حالت عادی برداشته شد و جایش همان سه Tokenی
   نشست که کارت‌های «لینک تیم‌ها» و «لینک‌های باشگاه‌ها» از پیش با آن‌ها کشیده می‌شوند —
   `--competition-link-card`، `--competition-link-card-border` و `-ink` (پایین‌تر در همین
   فایل تعریف شده‌اند). یک مقدار برای دو بخش، پس «دقیقاً هماهنگ» با گذر زمان هم هماهنگ
   می‌ماند.

   `--competition-chip` حذف نشده: × قرمز و رنگ‌های دیگر پایین همین فایل هنوز از آن
   می‌آیند. */
.competition-picker-striped .choices__list--multiple > .choices__item,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even,
.dark .competition-picker-striped .choices__list--multiple > .choices__item,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even {
    background-color: var(--competition-link-card, #333743);
    /* An inset ring rather than a border, so the box is exactly as tall as it was
       (بند ۴ — «ارتفاع هماهنگ»), and the card is told apart from the page behind it. */
    box-shadow: inset 0 0 0 1px var(--competition-link-card-border, #4b5163);
}

/* ── بند ۶ — رنگ تأکیدی از ابتدای اطلاعات تیم برداشته می‌شود ──────────────────
   «تأکید رنگی نباید قبل از لوگو و نام تیم شروع شود»: the gold ink used to begin at the
   very first character of the box — the team's name, right beside its logo — and run to
   the end. The writing is the panel's ordinary ink now, on both themes, so the box opens
   with «اطلاعات اصلی تیم … به شکل عادی». The descendants are named because Filament
   colours the inner spans as well as the box, so `color` on the box alone is overwritten
   one element down.

   «(توضیح تیم در رقابت)» keeps its red: it carries an inline colour of its own, which no
   selector here can or should beat. */
/* بند ۸ — و مرکبِ روی آن کارت تیره، در هر دو تم یکی؛ همان‌طور که کارت‌های «لینک
   تیم‌ها» در هر دو تم یک مرکب دارند، چون بند ۸ «دقیقاً هماهنگ» خواسته و رنگی که با تم
   عوض می‌شد فقط روی یکی از آن دو هماهنگ می‌ماند. */
.competition-picker-striped .choices__list--multiple > .choices__item,
.competition-picker-striped .choices__list--multiple > .choices__item .pfs-option-label,
.competition-picker-striped .choices__list--multiple > .choices__item .competition-team-name,
.competition-picker-striped .choices__list--multiple > .choices__item .competition-team-meta,
.dark .competition-picker-striped .choices__list--multiple > .choices__item,
.dark .competition-picker-striped .choices__list--multiple > .choices__item .pfs-option-label,
.dark .competition-picker-striped .choices__list--multiple > .choices__item .competition-team-name,
.dark .competition-picker-striped .choices__list--multiple > .choices__item .competition-team-meta {
    color: var(--competition-link-card-ink, #f3f4f6);
}

/* ── تسک ۱۴۰۵/۰۷/۰۸/۶۹، بند ۱۰ — خط عمودی داخل کادرها حذف شد ─────────────────
   «خط عمودی رنگی که در وضعیت فعلی داخل کادرهای شهرها، ورزشگاه‌ها و تیم‌ها دیده می‌شود،
   حذف شود. این خط نباید صرفاً Transparent شود؛ فضای اضافی مربوط به آن نیز حذف شود».

   آن خط، تأکید رنگیِ تسک ۱۴۰۵/۰۷/۰۶/۶۸ بند ۶ بود و یک `::after` روی کارت: یک نوار
   ۳ پیکسلی با نیم‌رمِ فاصله پیش از خودش. حالا کل قاعده — نه فقط رنگش — رفته است، پس
   نه خطی می‌ماند و نه جایی که برایش باز شده بود. */

/* ── بند ۷ — لوگوی تیم، سه برابر اندازهٔ فعلی ─────────────────────────────────
   «سه برابر اندازه فعلی … این افزایش اندازه باید واقعی و قابل مشاهده باشد». The chosen
   boxes drew the logo at the 1.1rem `panel-filter-standard.css` gives a box inside a
   list; 3×1.1rem is 3.3rem. `--pfs-media-size` is what the picture itself reads, so it
   is set here rather than the img being sized twice and the two disagreeing.

   Only the *chosen* boxes grow. The open dropdown keeps its own size, so a list of two
   hundred teams is not three times taller to scroll. `object-fit: contain` is already on
   the picture, so بند ۷'s «نسبت تصویر لوگو حفظ شود» holds at any size. */
.competition-picker-striped .choices__list--multiple > .choices__item .pfs-option-media {
    --pfs-media-size: 3.3rem;
    width: 3.3rem;
    height: 3.3rem;
}

/* بند ۷ — «در صورت نیاز ارتفاع/فاصله داخلی کارت متناسب با لوگوی جدید تنظیم شود»، and
   بند ۱۹ — «لوگو روی نام تیم نیفتد» at a small width: the name takes what room is left
   and wraps inside the box rather than pushing the logo over it. */
.competition-picker-striped .choices__list--multiple > .choices__item {
    padding-block: 0.375rem;
}

/* ── تسک ۱۴۰۵/۰۷/۰۸/۶۹، بند ۱۱، ۱۲ و ۱۳ — چیدمان داخل کارت تیم ───────────────

   بند ۱۱ — «خط اول فقط: نام تیم … از خط دوم به بعد تمام اطلاعات تکمیلی تیم قرار گیرند».
   برچسب یک رشته است تا وقتی به انتخاب‌گر می‌رسد، پس
   {@see \App\Support\Competition\CompetitionTeamDescriptions::decorate()} آن را به دو
   span تقسیم می‌کند — نام، و «(باشگاه) / رده / جنسیت / رشته / شهر» — و این دو داخل یک
   span سوم می‌نشینند. `display` همان span سوم است که این بند را اجرا می‌کند: اینجا یک
   ستون است و هر جای دیگری از پنل که همان برچسب چاپ می‌شود یک خط ساده، پس عنوان بازی و
   سلول جدول همان‌اند که بودند.

   بند ۱۲ — «نام باشگاه … به همراه خود پرانتزها Bold نباشد»: باشگاه داخل نیمهٔ دوم است و
   نیمهٔ دوم وزن معمولی دارد، در حالی که نام تیم وزن ۶۰۰ خودش را نگه می‌دارد.

   بند ۱۳ — «علامت × … بعد از اطلاعات/توضیحات تیم قرار گیرد»: Choices آن را به‌صورت
   مطلق می‌چسباند به لبهٔ کارت، که در این پنل راست‌به‌چپ کنار لوگو می‌افتد. اینجا از
   حالت مطلق درمی‌آید و یک آیتم عادی flex می‌شود — و چون در DOM آخرین فرزند کارت است،
   بعد از اطلاعات می‌نشیند. فضای رزروشدهٔ کنارهٔ کارت هم با آن برداشته می‌شود.
   عملکرد حذف، Confirmation و قواعد محافظتی هیچ‌کدام دست نخورده‌اند؛ فقط جای کنترل. */
.competition-picker-striped .choices__list--multiple > .choices__item .competition-team-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.competition-picker-striped .choices__list--multiple > .choices__item .competition-team-meta {
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.5;
}

/* بند ۱۳ — the × leaves the card's edge and joins the row. */
.competition-picker-striped .choices__list--multiple > .choices__item {
    padding-inline-end: 0.5rem;
}

.competition-picker-striped .choices__list--multiple > .choices__item .choices__button {
    position: static;
    flex: 0 0 auto;
    align-self: center;
    order: 9;
    margin: 0;
    margin-inline-start: 0.5rem;
    padding: 0;
    width: 1rem;
    height: 1rem;
    border-inline-start: 0;
}

/* ── بند ۱۳ — ارتفاع کادرهای «شهرها»، هماهنگ با ورزشگاه‌ها ────────────────────
   «ارتفاع این کادرها حدود دو برابر وضعیت فعلی شود … معیار نهایی … هماهنگ بودن با
   کادرهای ورزشگاه‌ها». A city's label is one short line and a stadium's is usually two,
   so the two fields could never agree while each box was only as tall as its own words.
   One floor, given to both, is what makes them agree; a box whose words need more than
   that still grows, and the teams' boxes are already far past it, so nothing shrinks. */
.competition-picker-striped .choices__list--multiple > .choices__item {
    min-height: 3.25rem;
}

/* ── بند ۱۰ — علامت حذف × در تمام کادرها ──────────────────────────────────────
   «باید قرمز و کاملاً قابل تشخیص باشد» on the team's box, the city's and the stadium's,
   and on both colours of row. Choices draws the × as a background image of a black — or,
   on the dark theme, white — cross at half opacity; both are replaced here by one red
   cross at full opacity, so the same mark is read on gold and on grey alike.

   It stays a UI change and nothing more: بند ۱۰ — «قرمزشدن × صرفاً یک تغییر UI است و
   نباید قوانین حذف را دور بزند». What a × does on save is decided on the server, in
   {@see \App\Support\Competition\CompetitionRemovalRules}. */
.competition-picker-striped .choices__list--multiple > .choices__item .choices__button,
.dark .competition-picker-striped .choices__list--multiple > .choices__item .choices__button {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cg fill='%23dc2626' fill-rule='evenodd'%3E%3Cpath d='m2.592.044 18.364 18.364-2.548 2.548L.044 2.592z'/%3E%3Cpath d='M0 18.364 18.364 0l2.548 2.548L2.548 20.912z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 0.65rem 0.65rem;
    opacity: 1;
    filter: none;
    /* بند ۱۳ — the button is no longer positioned against the card's edge; where it
       sits is decided by the flex rule further down, so nothing is offset here. */
    cursor: pointer;
}

/* بند ۱۰ — «حالت نشانگر ماوس نیز مشخص باشد». */
.competition-picker-striped .choices__list--multiple > .choices__item .choices__button:hover,
.competition-picker-striped .choices__list--multiple > .choices__item .choices__button:focus {
    background-size: 0.8rem 0.8rem;
    outline: none;
}

/* ── تسک ۱۴۰۵/۰۷/۰۸/۶۹، بند ۹ — Hover سبز ───────────────────────────────────
   «هنگامی که Mouse روی کادرهای شهر، ورزشگاه و تیم قرار می‌گیرد، رنگ کادر به سبز تغییر
   کند. Hover باید واضح باشد، اما خوانایی متن، لوگو و سایر عناصر داخل کارت را از بین
   نبرد».

   سبزِ پنل (`#15803d`) روی کارت تیرهٔ بند ۸ هم واضح است و هم مرکب روشن روی آن خوانده
   می‌شود؛ حلقهٔ کارت یک پله روشن‌تر می‌شود تا مرز کارت زیر دست ماوس گم نشود. مرکب،
   لوگو و × هیچ‌کدام دست نمی‌خورند. */
.competition-picker-striped .choices__list--multiple > .choices__item:hover,
.competition-picker-striped .choices__list--multiple > .choices__item.is-highlighted {
    background-color: #15803d;
    box-shadow: inset 0 0 0 1px #22c55e;
}

/* A disabled picker keeps Filament's own grey rather than the box colour, so «this field
   cannot be edited» is not confused with «this is a chosen team». */
.competition-picker-striped .choices.is-disabled .choices__list--multiple > .choices__item,
.dark .competition-picker-striped .choices.is-disabled .choices__list--multiple > .choices__item {
    background-color: transparent;
    box-shadow: none;
}

/* ── بند ۹ و ۱۰ — the logo, and the space it keeps when there is none ──────────
   The picture itself is drawn by the panel's own filter standard
   (`panel-filter-standard.js` + `.pfs-option-media`), which already fetches one set of
   urls for a whole list rather than one per row (بند ۱۵). What is added here is only the
   box's behaviour when the picture is the red default: exactly the size of a real logo, so
   every name in the column starts from the same place (بند ۱۰). */
.competition-team-btn-logo,
.pfs-option-media img {
    background-color: transparent;
}

/* ── بند ۹ تا ۱۱ — «لینک تیم‌ها» و «لینک‌های باشگاه‌ها در هیات»، یک رنگ تیره ──
   تسک ۱۴۰۵/۰۷/۰۶/۶۸.

   Both boxes used to take their colour from the record: the team button drew a white
   fill outlined in its club's colour (TEAM-BTN-002/003), and a club link drew that
   colour washed behind it — which is why a row of clubs came out red, green, blue,
   purple and orange side by side. بند ۱۱ ends both: «دیگر رنگ کارت نباید از رنگ تیم،
   باشگاه، لوگو یا سایر داده‌های رکورد گرفته شود»، and بند ۹ و ۱۰ name one shade for the
   two boxes — the dark card «تهران جوان باقرشهر» is drawn with in the task's third
   picture, measured off it at #333743.

   So the colour is a token, declared once and used by both, and it is deliberately the
   same on the light page and the dark one: بند ۱۱ asks for the two sections to be
   «دقیقاً یکدست», and a shade that changed with the theme would only be that on one of
   them. The writing on top is light for the same reason.

   `!important` beats the inline `background`/`border-color` the two blades still write,
   which is also why those blades no longer compute one from the club. */
:root {
    --competition-link-card: #333743;
    --competition-link-card-hover: #3e4353;
    --competition-link-card-border: #4b5163;
    --competition-link-card-ink: #f3f4f6;
}

.competition-team-buttons-wrap .competition-team-btn,
.dark .competition-team-buttons-wrap .competition-team-btn,
.competition-club-links-buttons .competition-club-link-btn,
.dark .competition-club-links-buttons .competition-club-link-btn {
    background-color: var(--competition-link-card) !important;
    border-color: var(--competition-link-card-border) !important;
}

.competition-team-buttons-wrap .competition-team-btn,
.dark .competition-team-buttons-wrap .competition-team-btn,
.competition-team-buttons-wrap .competition-team-btn .competition-team-name,
.competition-club-links-buttons .competition-club-link-btn,
.dark .competition-club-links-buttons .competition-club-link-btn {
    color: var(--competition-link-card-ink);
}

/* بند ۱۲ — nothing about what these boxes *do* changes, so the pointer still lifts one
   out of the row; it only lifts it towards the same shade instead of towards white. */
.competition-team-buttons-wrap .competition-team-btn:hover,
.dark .competition-team-buttons-wrap .competition-team-btn:hover,
.competition-club-links-buttons .competition-club-link-btn:not(.is-disabled):hover,
.dark .competition-club-links-buttons .competition-club-link-btn:not(.is-disabled):hover {
    background-color: var(--competition-link-card-hover) !important;
}

/* The building mark a club with no crest is drawn with, and the × on a team button, are
   both read on the dark card now rather than on white. */
.competition-club-links-buttons .competition-club-link-logo-placeholder {
    color: #cbd5e1;
}

.competition-team-buttons-wrap .competition-team-btn-remove {
    color: #fca5a5;
    border-inline-start-color: rgba(255, 255, 255, 0.18);
}

.competition-team-buttons-wrap .competition-team-btn-remove:hover {
    background: rgba(252, 165, 165, 0.16);
}

/* The trailing details — gender, city — keep the size they had (بند ۱۱). */
.competition-team-btn-details {
    opacity: 0.8;
}

/* The default red mark takes the same box as a real logo — بند ۱۰'s «ابعاد لوگوی پیش‌فرض
   دقیقاً مطابق فضای لوگوی واقعی تیم باشد». */
.competition-team-btn-logo-fallback {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    object-fit: contain;
}

/* ── بند ۴ — «راهنمای واضح بالای هر فیلد مربوط» ────────────────────────────────
   تسک ۱۴۰۵/۰۷/۰۲/۰۵/۰۳. A note, not a warning: it is read before anything has gone
   wrong, so it is drawn in the panel's own quiet ink on a faint wash rather than in the
   red a refusal is written in. The words are CompetitionV3Resource::REMOVAL_GUIDE_*. */
.competition-removal-guide {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border-inline-start: 3px solid var(--panel-accent, #1f7957);
    background-color: rgba(17, 24, 39, 0.04);
    color: #374151;
    font-size: 0.8125rem;
    line-height: 1.9;
}

.dark .competition-removal-guide {
    background-color: rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
}

/* ── تسک ۱۴۰۵/۰۷/۰۶/۶۸، بند ۱۵ و ۱۶ — عنوان هر راهنما، قرمز و توپر ─────────────
   «فقط همین عنوان‌ها Bold شوند؛ قرمز شوند. ادامه جمله و توضیحات هر راهنما با استایل
   فعلی باقی بماند» — so the colour and the weight are on the title's own span and on
   nothing else, and the sentence after it keeps the quiet ink the box has always had.
   The red is the one the panel writes a warning in, which reads on both themes. */
.competition-removal-guide-title {
    font-weight: 700;
    color: #dc2626;
}

.dark .competition-removal-guide-title {
    color: #f87171;
}

/* ── تسک ۱۴۰۵/۰۷/۰۸/۶۹، بند ۷ — آیکون رنگی جلوی عنوان سه بخش ────────────────────
   «قبل از عنوان یک آیکون رنگی مرتبط با مفهوم همان بخش قرار گیرد … از مجموعه آیکون‌های
   استاندارد پروژه».

   آیکون‌ها heroicon هستند و از خود فرم می‌آیند (`->icon()` روی زیرتب و روی کادر): سنجاق
   نقشه برای شهرها، ساختمان برای ورزشگاه‌ها و گروه آدم‌ها برای تیم‌ها. رنگ کادرها را
   خود پنل با `iconColor()` می‌دهد؛ این بلوک همان سه رنگ را به آیکونِ **زیرتب** هم
   می‌دهد، چون `Tabs\Tab` در فیلامنت v3 رنگ آیکون نمی‌گیرد و بی این قاعده هر سه
   خاکستریِ نوار تب می‌شدند. */
/* The three are addressed by their place in the strip, and not by a class of their own:
   فیلامنت `extraAttributes()` یک `Tabs\Tab` را به دکمهٔ تب نمی‌دهد — `tabs.blade.php`
   فقط برچسب، آیکون و Badge را به `x-filament::tabs.item` پاس می‌دهد — پس کلاسی که روی تب
   نوشته شود هرگز به صفحه نمی‌رسد. ترتیب همان ترتیبی است که `baseInfoTabSchema()` اعلام
   می‌کند و آزمون مرورگری هر سه را به همین ترتیب می‌خواند، پس جابه‌جا شدنشان دیده می‌شود.
   `!important` برای غلبه بر کلاس تیلویندی است که آلپاین برای حالت فعال/غیرفعال روی خود
   svg می‌نویسد. */
.competition-base-info-subtabs .fi-tabs-item:nth-of-type(1) .fi-tabs-item-icon {
    color: rgb(var(--info-500, 59 130 246)) !important;
}

.competition-base-info-subtabs .fi-tabs-item:nth-of-type(2) .fi-tabs-item-icon {
    color: rgb(var(--warning-500, 245 158 11)) !important;
}

.competition-base-info-subtabs .fi-tabs-item:nth-of-type(3) .fi-tabs-item-icon {
    color: rgb(var(--success-500, 34 197 94)) !important;
}

/* بند ۵ — «شهرها (۳)»: عدد همان اندازهٔ عنوان است و نوار تب را بلندتر نمی‌کند. */
.competition-subtab-count {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

/* ══ تسک ۷۴ — یکپارچه‌سازی و فشرده‌سازی UI مدیریت رقابت ═══════════════════════
   Everything below is the same on «ساخت رقابت» and «ویرایش رقابت», on «اطلاعات پایه»
   and on every stage's «تیم‌های گروه»: it is addressed to the one picker mark
   (CompetitionV3Resource::STRIPED_PICKER_CLASS), never to a competition, a stage or a
   tab, so a stage created tomorrow is drawn by it too. */

/* ── بخش سوم — Hover سبز روی همهٔ کارت‌ها، نه یکی‌درمیان ──────────────────────
   The bug, exactly: the green hover above was written as
   `.competition-picker-striped .choices__list--multiple > .choices__item:hover` (four
   classes), while the card's resting colour is also declared for
   `.dark … > .choices__item.cpg-row-even` (five). `competition-picker-grid.js` marks
   every other *row* of the grid `cpg-row-even`, so on the dark theme the resting colour
   outranked the hover on exactly those rows — green on one row, nothing on the next.

   The hover is now named for every combination the resting colour is — both themes,
   both row marks — so it is at least as specific as any of them and, being later in the
   file, wins on every card. Nothing here depends on odd/even, the row or the column. */
.competition-picker-striped .choices__list--multiple > .choices__item:hover,
.competition-picker-striped .choices__list--multiple > .choices__item.is-highlighted,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even:hover,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.is-highlighted,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd:hover {
    background-color: #15803d;
    box-shadow: inset 0 0 0 1px #22c55e;
}

/* ── بخش چهارم — Border تیره، نزدیک به مشکی ────────────────────────────────────
   «یک Border ظریف با رنگ تیره و نزدیک به مشکی». Still an inset ring, so no card grows
   by a pixel; only its colour moved from the grey-blue #4b5163, which melted into the
   card and the page alike, to near-black, which sets every card apart from the next. */
:root {
    --competition-card-border: #08090c;
}

.competition-picker-striped .choices__list--multiple > .choices__item,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd,
.dark .competition-picker-striped .choices__list--multiple > .choices__item,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd {
    box-shadow: inset 0 0 0 1px var(--competition-card-border);
}

/* The hover's own ring is declared after the border, so a card under the pointer still
   reads green all round. */
.competition-picker-striped .choices__list--multiple > .choices__item:hover,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even:hover,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd:hover {
    box-shadow: inset 0 0 0 1px #22c55e;
}

/* ── بخش پنجم و ششم — نام اصلی زرد و Bold، در کارت و در لیست بازشونده ─────────
   Only the entity's own name: a team's (`competition-team-name`), a city's first name
   (`city-geo-label-name`) and a stadium's (`competition-stadium-name`). The club, the
   age group, the county, the province, the city of a stadium and the country after them
   keep the colour they had, so the name never runs into its metadata however long
   either is.

   The card is the same dark shade on both themes, so its yellow is one value. The open
   list is white on the light theme, where that yellow cannot be read, so it takes a
   deep amber there and the bright yellow only on the dark one. */
:root {
    --competition-entity-name: #facc15;
    --competition-entity-name-on-light: #b45309;
}

.competition-picker-striped .choices__list--multiple > .choices__item .competition-team-name,
.competition-picker-striped .choices__list--multiple > .choices__item .competition-entity-name,
.dark .competition-picker-striped .choices__list--multiple > .choices__item .competition-team-name,
.dark .competition-picker-striped .choices__list--multiple > .choices__item .competition-entity-name {
    color: var(--competition-entity-name);
    font-weight: 700;
}

.competition-picker-striped .choices__list--dropdown .choices__item .competition-team-name,
.competition-picker-striped .choices__list--dropdown .choices__item .competition-entity-name,
.competition-picker-striped .choices__list[aria-expanded] .choices__item .competition-team-name,
.competition-picker-striped .choices__list[aria-expanded] .choices__item .competition-entity-name {
    color: var(--competition-entity-name-on-light);
    font-weight: 700;
}

.dark .competition-picker-striped .choices__list--dropdown .choices__item .competition-team-name,
.dark .competition-picker-striped .choices__list--dropdown .choices__item .competition-entity-name,
.dark .competition-picker-striped .choices__list[aria-expanded] .choices__item .competition-team-name,
.dark .competition-picker-striped .choices__list[aria-expanded] .choices__item .competition-entity-name {
    color: var(--competition-entity-name);
}

/* ── بخش هفتم — نام گروه، نام انگلیسی و تعداد راند، در یک ردیف ─────────────────
   The three share one grid (CompetitionV3Resource::stageGroupSettingsRow()); this only
   gives each a width that fits what it holds — a group name is a letter or a word, the
   round count a number up to fifty — rather than a third of the stage each. Below the
   grid's breakpoint Filament stacks them, which is the mobile fallback the task allows. */
/* تسک ۱۴۰۵/۰۷/۱۸/۰۲، بند ۴.۲ — the row now holds five things, and the repeater's own
   controls join the end of it (see the block at the foot of this file), so the three
   equal thirds of تسک ۷۴ gave way to the five columns declared there. */

/* ── بخش نهم — کسر امتیاز: سربرگ هر کارت لوگو و نام تیم را دارد ──────────────── */
.standings-deduction-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.standings-deduction-label-logo {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 0.25rem;
}

.standings-deduction-label-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

/* ── بخش اول — پیام کمبود بازی زیر آواتارهای مسئولان ─────────────────────────────
   The page heading (RecordPageHeader::compactPageHeading()) is a column when it carries
   the games line: the label and the avatars, then the line under them. Filament centres
   the heading against the buttons opposite, so a two-row heading would lift the avatars
   off the buttons' line; where the two sit side by side (Filament's own `sm`), both are
   aligned to the top instead, which keeps the avatars level with the first row of
   buttons and lets the games line sit under them. (A line hung out of the heading
   instead disappeared under the form's sticky header.) */
@media (min-width: 640px) {
    .fi-header:has(.fi-compact-page-heading--with-note) {
        align-items: flex-start;
    }
}

/* ══ تسک ۱۴۰۵/۰۷/۱۸/۰۲ — بازطراحی ساخت و ویرایش رقابت ═══════════════════════════
   Everything below is the same on «ساخت رقابت» and «ویرایش رقابت», on «اطلاعات پایه» and
   on every stage's groups: it is addressed to the picker mark and the groups repeater's
   own class, never to a competition, a stage or a tab. */

/* ── بند ۳ و ۴.۵ — خط دور نازک و روشن، نزدیک به سفید، دور هر کارت ────────────────
   «دور هر کارت … یک خط دور نازک، روشن و مشخص، نزدیک به سفید». Still an inset ring, so no
   card grows by a pixel. It replaces the near-black ring of تسک ۷۴ (بخش چهارم), which the
   newer instruction overrules; the card is the same dark shade on both themes, so one
   light value reads on both. */
/* تسک ۷۵، بخش اول — «ظریف‌تر و کم‌رنگ‌تر، نه حذف». The ring is already 1px, so its
   width stays and its strength goes to about 65% of what it was: 0.82 × 0.65 ≈ 0.53 for
   the resting ring, and the hover's green at the same 65%. One token each, so every
   picker that wears the mark — «تیم‌ها»، «ورزشگاه‌ها»، «شهرها» of «اطلاعات پایه» and every
   stage's team pickers — moves together, and nothing outside مدیریت رقابت wears it. The
   red «بدون لوگو» frame and the warning boxes are not drawn from these tokens and keep
   their strength. */
:root {
    --competition-card-border-light: rgba(255, 255, 255, 0.53);
    --competition-card-border-hover: rgba(34, 197, 94, 0.65);
}

.competition-picker-striped .choices__list--multiple > .choices__item,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd,
.dark .competition-picker-striped .choices__list--multiple > .choices__item,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd {
    box-shadow: inset 0 0 0 1px var(--competition-card-border-light);
}

/* The hover's own ring is declared after the border again, so a card under the pointer
   still reads green all round. */
.competition-picker-striped .choices__list--multiple > .choices__item:hover,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even:hover,
.competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-even:hover,
.dark .competition-picker-striped .choices__list--multiple > .choices__item.cpg-row-odd:hover {
    box-shadow: inset 0 0 0 1px var(--competition-card-border-hover);
}

/* ── بند ۳ و ۴.۵ — کارتی که حذفش مجاز نیست، آیکون حذف ندارد ───────────────────────
   The label of such a card carries a hidden mark
   (App\Support\Competition\CompetitionRemovalLocks::MARKER) — a team with a match, a
   player or a staff member in this competition, a stadium or a city used in its matches,
   a team with a match in the very group it is listed in. The × is simply not drawn.

   It is presentation and nothing else: the rule is enforced on the server when the page
   is saved, whatever the browser sends. */
.competition-picker-striped .choices__list--multiple > .choices__item:has(.competition-removal-locked) .choices__button {
    display: none !important;
}

/* ── بند ۳.۱ و ۴.۵ — تیم بی‌لوگو: ضربدر قرمز به‌جای آیکون پیش‌فرض ──────────────────
   «برای تیم فاقد لوگو، به‌جای آیکون پیش‌فرض تیم، یک ضربدر قرمز نمایش داده شود» and «باید
   از دکمه حذف تیم کاملاً قابل تشخیص باشد».

   A team with no logo of its own (and none from its club) is handed the panel's one
   default file, `images/team-logo-fallback.svg`, so that address is what says «no logo».
   The default picture is hidden — it keeps its box, so every name still starts from the
   same place — and the slot draws a red cross instead.

   Told apart from the delete × three ways: it is in the logo's place at the head of the
   card and the full size of a logo, it sits in a dashed red frame, and it is captioned
   «بدون لوگو»; the delete × is the small bare cross at the far end of the card. */
.competition-picker-striped .choices__list--multiple > .choices__item .pfs-option-media:has(img[src*="team-logo-fallback"]) {
    position: relative;
    border: 1px dashed rgba(248, 113, 113, 0.9);
    border-radius: 0.5rem;
    background-color: rgba(220, 38, 38, 0.12);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='%23ef4444' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 52% 52%;
}

.competition-picker-striped .choices__list--multiple > .choices__item .pfs-option-media img[src*="team-logo-fallback"] {
    opacity: 0;
}

.competition-picker-striped .choices__list--multiple > .choices__item .pfs-option-media:has(img[src*="team-logo-fallback"])::after {
    content: 'بدون لوگو';
    position: absolute;
    inset-inline: 0;
    bottom: 0.15rem;
    text-align: center;
    font-size: 0.56rem;
    line-height: 1;
    font-weight: 700;
    color: #fca5a5;
    white-space: nowrap;
    pointer-events: none;
}

/* ── بند ۳ — کادر به زیرتب‌ها نزدیک‌تر، راهنما زیر کادر ────────────────────────────
   «کادر انتخاب تیم‌ها … حدود ۲ تا ۴ میلی‌متر زیر ردیف زیرتب‌ها قرار بگیرد». The heading
   that repeated the count is gone (the sub-tab says «۱۸ تیم»), the guide moved under the
   box, and what is left of the gap is the pane's own padding — trimmed here to about
   3mm. Only the three panes of «اطلاعات پایه» that hold a picker are touched. */
.competition-base-info-subtabs .fi-fo-tabs-tab {
    padding-top: 0.75rem;
}

.competition-base-info-subtabs .competition-tab-pane:has(.competition-picker-striped) > .fi-section-content-ctn > .fi-section-content {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.competition-base-info-subtabs .competition-tab-pane:has(.competition-picker-striped) .fi-fo-component-ctn {
    row-gap: 0.75rem;
}

/* The field's own «؟» (its change history) used to sit on the heading's line. With the
   heading gone it would keep a whole line to itself above the cards, so it is set in the
   empty corner of the box instead — still there, still clickable, taking no row. */
.competition-base-info-subtabs .competition-tab-pane .fi-fo-field-wrp:has(.competition-picker-striped) > .grid {
    position: relative;
}

.competition-base-info-subtabs .competition-tab-pane .fi-fo-field-wrp:has(.competition-picker-striped) > .grid > .justify-end {
    position: absolute;
    inset-inline-end: 0.9rem;
    top: 0.55rem;
    z-index: 2;
}

/* ── بند ۴.۲ — ردیف واحد تنظیمات گروه ──────────────────────────────────────────────
   نام گروه (فارسی) | «۱۸ تیم» | نام انگلیسی | تعداد راند | «نمایش نام گروه در ویو» | and,
   at the end of the same row, the group's own sort / delete / collapse controls.

   The fields are narrower than a fifth of the stage each — a group's name is a word or
   two, the round count a number up to fifty — but never narrower than what they hold.
   Below 1024px Filament lays the grid out in two columns and then one, and the
   controls go back to a bar of their own above it: that is the phone's fallback. */
.competition-group-team-count {
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--competition-entity-name-on-light, #b45309);
}

.dark .competition-group-team-count {
    color: var(--competition-entity-name, #facc15);
}

.competition-group-show-name {
    white-space: nowrap;
}

@media (min-width: 1024px) {
    /* تسک ۷۹، بند ۲ — «۱۸ تیم» moved into the name's own box, so the row is three cells:
       نام گروه (with its count) | نام انگلیسی | تعداد راند. */
    .competition-group-settings-row > .grid {
        grid-template-columns:
            minmax(11rem, 1.7fr)
            minmax(8rem, 1.2fr)
            minmax(5.5rem, 0.6fr) !important;
        align-items: end;
        column-gap: 1rem;
        /* Room for the controls that join this row from the item's header. */
        padding-inline-end: 7.5rem;
    }

    .competition-group-settings-row .competition-group-team-count,
    .competition-group-settings-row .competition-group-show-name {
        padding-bottom: 0.5rem;
    }

    .competition-groups-repeater > ul > div > li.fi-fo-repeater-item {
        position: relative;
    }

    /* An open group: its header is not a bar of its own any more. The same buttons, with
       the same actions, are set at the end of the settings row. */
    .competition-groups-repeater > ul > div > li.fi-fo-repeater-item:not(.fi-collapsed) > .fi-fo-repeater-item-header {
        position: absolute;
        inset-inline-end: 1rem;
        top: 2.45rem;
        z-index: 1;
        padding: 0;
        overflow: visible;
        column-gap: 0.75rem;
    }

    .competition-groups-repeater > ul > div > li.fi-fo-repeater-item:not(.fi-collapsed) > .fi-fo-repeater-item-content {
        border-top-width: 0;
    }
}

/* A folded group says which group it is — «گروه اول — ۱۸ تیم». An open one does not need
   to: its own row says both, on every width. */
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:not(.fi-collapsed) > .fi-fo-repeater-item-header > h4 {
    display: none;
}

.competition-group-item-label {
    font-weight: 700;
}

/* بند ۴.۵ — «کادر تیم‌ها تا حد امکان به ردیف تنظیمات گروه نزدیک شود». */
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item > .fi-fo-repeater-item-content > .fi-fo-component-ctn {
    row-gap: 0.75rem;
}

/*
 * تسک ۱۴۰۵/۰۷/۲۰/۰۳، مورد ۵ — فلش دوحالتهٔ «همهٔ گروه‌ها» کنار «گروه‌ها (N تیم)».
 * رو به چپ و قرمز: همه بسته. رو به پایین و سبز: همه باز. کهربایی و مورب: بعضی باز.
 * جهت و رنگ فقط از `data-state` می‌آید که از وضعیت واقعی گروه‌ها خوانده می‌شود.
 */
.competition-groups-toggle-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: 0.375rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    vertical-align: middle;
    cursor: pointer;
    color: #22c55e;
}

.competition-groups-toggle-all:hover,
.competition-groups-toggle-all:focus-visible {
    background: rgba(148, 163, 184, 0.18);
    outline: none;
}

.competition-groups-toggle-all > svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 150ms ease;
    transform: rotate(-90deg);
}

.competition-groups-toggle-all[data-state='closed'] { color: #ef4444; }
.competition-groups-toggle-all[data-state='closed'] > svg { transform: rotate(0deg); }
.competition-groups-toggle-all[data-state='mixed'] { color: #f59e0b; }
.competition-groups-toggle-all[data-state='mixed'] > svg { transform: rotate(-45deg); }

/* ── تسک ۷۶ — «اصلاح رابط کاربری مدیریت رقابت» ────────────────────────────────────

   بند ۸ — inside a stage, the sub-tab strip is a box of its own (the strip is drawn with
   `contained(false)`), and the page's own background shows between it and the content.
   In «تیم‌ها و تنظیمات دوره» the pane round the groups draws no box at all, so each group
   — its settings row, its teams and its statuses — is a box of its own with the page's
   background between it and the next. A line inside one shared box was not enough. */
.competition-stage-subtabs > .fi-tabs {
    margin-inline: auto;
}

/* The open sub-tab's content, drawn as the box the strip used to share with it. */
.competition-stage-subtabs > .fi-fo-tabs-tab.fi-active {
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 0 0 1px rgb(3 7 18 / 0.05);
}

.dark .competition-stage-subtabs > .fi-fo-tabs-tab.fi-active {
    background-color: rgb(var(--gray-900));
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

/* …except «تیم‌ها و تنظیمات دوره»: no shared box there, each group is its own. */
.competition-stage-subtabs > .fi-fo-tabs-tab.fi-active:has(.competition-stage-pane-period) {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

.fi-section.competition-stage-pane-period {
    background-color: transparent !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
}

.fi-section.competition-stage-pane-period > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
}

/* ── تسک ۸۰، بخش ۲ — «تیم‌ها و تنظیمات دوره»: ۵ میلی‌متر از نوار تب‌های مرحله تا کادر اول
   گروه‌ها ─────────────────────────────────────────────────────────────────────────────

   The 60px that stood there were Filament's 24px above every tab's content, the 28px row of
   «گروه‌ها (N تیم)» and 8px under it. Measured as the task measures it — from the strip's
   bottom edge to the first group box's top edge — 5mm (18.9px) leaves no room for a 28px
   title in between, so on a screen wide enough (1400px and up, where the strip leaves the title room
   to spare) the title moves up into the strip's own row,
   at its start (the right, in RTL), where the strip, centred, leaves the row empty; it keeps
   its size, its count and its open/close arrow. Narrower, where the strip needs the row, the
   title stays above the groups and only the space round it is taken in (24 → 8px over it).
   Only this pane: every group box, its fields and its inside spacing are as they were. */
.competition-stage-subtabs > .fi-fo-tabs-tab.fi-active:has(.competition-stage-pane-period) {
    margin-top: 0.5rem !important;
}

@media (min-width: 1400px) {
    .competition-stage-subtabs > .fi-fo-tabs-tab.fi-active:has(.competition-stage-pane-period) {
        margin-top: 5mm !important;
    }

    .competition-stage-pane-period .fi-fo-field-wrp:has(.competition-groups-repeater) {
        position: relative;
    }

    /* Centred on the strip's row: 5mm and half the strip (54px) above the pane. */
    .competition-stage-pane-period .fi-fo-field-wrp:has(.competition-groups-repeater) > .grid > .flex:first-child {
        position: absolute;
        inset-inline-start: 0;
        top: calc(-5mm - 27px);
        transform: translateY(-50%);
        z-index: 1;
    }
}

.competition-stage-pane-period .competition-groups-repeater > ul > div {
    row-gap: 1.25rem;
}

.competition-stage-pane-period .competition-groups-repeater > ul > div > li.fi-fo-repeater-item {
    background-color: #ffffff;
}

.dark .competition-stage-pane-period .competition-groups-repeater > ul > div > li.fi-fo-repeater-item {
    background-color: rgb(var(--gray-900));
}

/* بند ۹ — each group's «نام گروه (فارسی)» in a colour of its own, by its place in the
   stage: first yellow, second green, then sky, violet, orange, pink, teal and red, and
   round again from yellow. By place, never at random, so a reload draws the same colours;
   only the field's frame and fill change — its text, its focus ring and its error ring
   are Filament's, so it reads and validates exactly as before. */
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item { --cg-hue: 234 179 8; }
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:nth-child(8n + 2) { --cg-hue: 34 197 94; }
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:nth-child(8n + 3) { --cg-hue: 14 165 233; }
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:nth-child(8n + 4) { --cg-hue: 139 92 246; }
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:nth-child(8n + 5) { --cg-hue: 249 115 22; }
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:nth-child(8n + 6) { --cg-hue: 236 72 153; }
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:nth-child(8n + 7) { --cg-hue: 20 184 166; }
.competition-groups-repeater > ul > div > li.fi-fo-repeater-item:nth-child(8n + 8) { --cg-hue: 239 68 68; }

.competition-group-name-field .fi-input-wrp {
    background-color: rgb(var(--cg-hue) / 0.16);
    border-inline-start: 0.375rem solid rgb(var(--cg-hue));
}

.competition-group-name-field .fi-input-wrp input {
    background-color: transparent;
    font-weight: 700;
}

.dark .competition-group-name-field .fi-input-wrp {
    background-color: rgb(var(--cg-hue) / 0.22);
}


/* ══ تسک ۷۹ — یکپارچه‌سازی صفحات ایجاد و ویرایش رقابت ═══════════════════════════════ */

/* بند ۲ — «گروه اول | ۶ تیم» inside the group's coloured box. The name's input is as wide
   as what is typed in it (`field-sizing: content`) so the bar and the count follow the
   name directly; the rest of the box stays the group's colour. A browser without
   `field-sizing` keeps the input full width and the count at the box's far end — still
   inside the box. The count is a suffix: it is drawn, never sent. */
.competition-group-name-field .fi-input-wrp > div:has(> input) {
    flex: 0 1 auto;
    min-width: 0;
}

.competition-group-name-field .fi-input-wrp input {
    field-sizing: content;
    min-width: 3ch;
    max-width: 100%;
}

.competition-group-name-field .fi-input-wrp-suffix {
    padding-inline-start: 0.6rem;
    border-inline-start-width: 0;
}

.competition-group-name-field .competition-group-team-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: 0 !important;
}

.competition-group-name-field .competition-group-team-count-sep {
    margin-inline-end: 0.35rem;
    color: rgb(var(--cg-hue));
    font-weight: 400;
}

/* بند ۳ — «لینک تیم‌ها»، هر دو محل (اطلاعات پایه و هر مرحله): نام تیم و نام باشگاه داخل
   پرانتز ۷۵٪ اندازهٔ قبلی، یعنی ۱٫۲۵em × ۰٫۷۵. لوگو، «/ مردان / تهران»، پیوند و چینش
   همان‌اند؛ متن بلند در موبایل می‌شکند به‌جای آنکه از کادر بیرون بزند. */
.competition-team-buttons-wrap .competition-team-btn .competition-team-name {
    font-size: 0.9375em;
}

@media (max-width: 639px) {
    .competition-team-buttons-wrap .competition-team-btn {
        max-width: 100%;
    }

    .competition-team-buttons-wrap .competition-team-btn-body {
        white-space: normal;
        min-width: 0;
    }
}

/* بند ۴ — «اطلاعات ساخت ← اطلاعات مادر»: نام دسته‌بندی مادر انتخاب‌شده به زرد پنل. فقط
   مقدار انتخاب‌شده (`choices__list--single`)؛ عنوان فیلد و فهرست بازشده همان‌اند. */
.competition-parent-category-select .choices__list--single .choices__item {
    color: var(--competition-entity-name-on-light, #b45309);
    font-weight: 600;
}

.dark .competition-parent-category-select .choices__list--single .choices__item {
    color: var(--competition-entity-name, #facc15);
}

/* بند ۵ — «توضیحات تیم‌ها»: فقط نام تیم زرد؛ «(نام باشگاه) / رده / رشته / شهر» رنگ خودشان
   را دارند. */
.competition-team-description-details .competition-team-name {
    color: var(--competition-entity-name-on-light, #b45309);
}

.dark .competition-team-description-details .competition-team-name {
    color: var(--competition-entity-name, #facc15);
}