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

   اینجا و نه در `theme.css`، به همان دلیل هر فایل سراسری دیگری در `public/css/`:
   این فایل را خود صفحه لینک می‌کند، پس روی سرور بدون ساخت دوباره دارایی‌ها
   اثر می‌گذارد. بعد از `panel-menu-province-counts.css` بار می‌شود، که این دو
   کادر کنار آن و به همان زبان نوشته شده‌اند — یک کادر مستطیل با رقم فارسی، و
   نه «تعداد» گردِ سبزِ هر مدیریت. */

/* فیلامنت هر چیزی را که یک آیتم منو به‌عنوان badge برمی‌گرداند در
   `<x-filament::badge>` خودش می‌پیچد، که ته‌رنگ، حلقه و padding خودش را می‌آورد.
   فقط و فقط آنجا که آن پوشش این کادرها را در خود دارد، کنار گذاشته می‌شود تا
   آنچه دیده می‌شود کادر باشد نه کادر داخل کادر. هیچ badge دیگری از جمله شمارنده
   سبز پنل دست نمی‌خورد. */
.fi-badge:has(> .fi-match-counts) {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.fi-match-counts {
    display: inline-flex;
    align-items: center;
    /* فاصله واقعی، تا قرمز و زرد هیچ‌وقت به هم نچسبند و یک عدد خوانده نشوند. */
    gap: 0.25rem;
    white-space: nowrap;
}

.fi-match-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.0625rem 0.3125rem;
    /* مستطیل و نه قرص: بند ۱۷ «کادر» خواسته است، و همین است که این‌ها را از
       «تعداد» گردِ سبز جدا می‌کند. */
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    /* دقیقاً ارتفاع خط شمارنده خود منو، تا ردیفی که عدد دارد از ردیف بی‌عدد
       بلندتر نشود. */
    line-height: 1.125rem;
    /* تا عدد چندرقمی ردیفش را نلرزاند. */
    font-variant-numeric: tabular-nums;
}

/* «تعداد رقابت‌های زیرمجموعه» — کادر قرمز (بند ۲۷). متن سفید، چون قرمز به
   کنتراست نیاز دارد و سند فقط برای کادر زرد متن مشکی خواسته است. */
.fi-match-count-children {
    background-color: #b91c1c;
    color: #ffffff;
}

/* «تعداد بازی‌ها» — کادر زرد با متن مشکی (بند ۱۷ و ۲۷). */
.fi-match-count-matches {
    background-color: #facc15;
    color: #000000;
}

/* ردیفی که همین حالا باز است با `--panel-accent` پر می‌شود. کادرها رنگ خودشان را
   نگه می‌دارند — آن‌ها عددند، نه حالتِ ردیف — و فقط یک خط مویی می‌گیرند تا صاف
   روی سبز ننشینند. */
.fi-sidebar-item-active .fi-match-count,
.dark .fi-sidebar-item-active .fi-match-count {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* پنجره‌های باریک: نام کوتاه می‌شود و کادرها کامل می‌مانند. */
@media (max-width: 480px) {
    .fi-match-counts {
        gap: 0.1875rem;
    }

    .fi-match-count {
        min-width: 1.125rem;
        padding: 0.0625rem 0.25rem;
    }
}