/* The two figures on a province's row of «رقابت‌های هر استان»
   (تسک ۱۴۰۵/۰۷/۰۴/۰۱، بند ۳ و ۱۸).

   Here rather than in `theme.css` for the same reason every other panel-wide
   sheet in `public/css/` is: this ships as a file the page links, so it takes
   effect on the server without the assets being rebuilt. Loaded right after
   `panel-menu-count.css`, whose pill this is written beside and deliberately
   unlike — a province's row carries two figures that mean two different things,
   so neither of them may read as the green «تعداد» every management wears. */

/* Filament wraps whatever a navigation item's badge returns in its own
   `<x-filament::badge>`, which brings a tint, a ring and padding of its own.
   Where — and only where — that wrapper holds this pair, it is stood down, so
   what is drawn is two boxes and not two boxes inside a third. Every other badge
   in the panel, the green counter included, is untouched. */
.fi-badge:has(> .fi-province-counts) {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.fi-province-counts {
    display: inline-flex;
    align-items: center;
    /* A real gap, so the red and the yellow never touch and never read as one
       number (بند ۱۸: «اعداد روی یکدیگر نیفتند»). */
    gap: 0.25rem;
    white-space: nowrap;
}

.fi-province-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.0625rem 0.3125rem;
    /* A rectangle, not a pill: بند ۳ asks for «کادر» — a box — and a rounded
       rectangle is what tells these two apart from the round green «تعداد». */
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    /* Exactly the line height of the menu's own counter, so a row carrying two
       figures is no taller than a row carrying one (بند ۳ و ۱۸). */
    line-height: 1.125rem;
    /* So a two-figure number does not jitter the row it sits on. */
    font-variant-numeric: tabular-nums;
}

/* «تعداد رقابت‌های مادر» — a red box (بند ۳). White lettering, because the
   document asks only the yellow box for black text and red needs the contrast. */
.fi-province-count-parents {
    background-color: #b91c1c;
    color: #ffffff;
}

/* «تعداد رقابت‌ها» — a yellow box with black lettering, said twice in the
   document (بند ۳ و ۱۸، و معیار پذیرش ۹). */
.fi-province-count-competitions {
    background-color: #facc15;
    color: #000000;
}

/* The province being stood in is itself filled with `--panel-accent`. The two
   boxes keep their own colours there — they are the figures, not the state of the
   row — and only gain a hairline so they do not sit straight on the green. */
.fi-sidebar-item-active .fi-province-count,
.dark .fi-sidebar-item-active .fi-province-count {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Narrow windows: the name stays readable and the two boxes stay whole, so the
   row shrinks by the name and never by the figures (بند ۱۸). */
@media (max-width: 480px) {
    .fi-province-counts {
        gap: 0.1875rem;
    }

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