/* Стили фильтра клубов (SelectPlayerClubsComponent).
   
   ПОЧЕМУ ФАЙЛ ГЛОБАЛЬНЫЙ, А НЕ *.razor.css. Содержимое MudPopover уезжает из своего места в DOM в
   MudPopoverProvider на корне layout'а. Изолированный CSS компилируется в селекторы вида
   «[b-xxxxx] .spc-row», то есть требует ПРЕДКА с атрибутом области, — а после переезда такого предка у
   выпадашки нет, и правила молча перестают применяться. Ровно поэтому стили диалогов в этом проекте
   тоже живут здесь (см. соседние *.css и ссылки в index.html), а не рядом с компонентом.

   Все классы с префиксом spc- — глобальная видимость столкновений не создаёт. */

/* Блок фильтра клубов. Внешне обязан читаться как ещё одна «пилюля» ряда (организации, онлайн, период):
   тот же фон surface, тот же радиус, та же высота — иначе крайний левый блок выглядит чужим элементом,
   случайно попавшим в панель. */
.spc-anchor {
    position: relative;
    display: block;
}

/* MudTooltip оборачивает кнопку СВОИМ div'ом, у которого нет h-100, и цепочка height:100% рвалась именно
   на нём: блок брал высоту по содержимому и оказывался ниже соседей по панели. Селектор по «любому
   ребёнку», а не по классу MudBlazor, — чтобы не сломаться от переименования его внутренних классов. */
.spc-anchor > * {
    height: 100%;
}

.spc-trigger {
    background-color: var(--mud-palette-surface);
    /* Рамки нет НАМЕРЕННО: у соседних блоков панели её тоже нет, и любая рамка тут же выдаёт «чужой»
       элемент в ряду. Наведение и открытие показываем подсветкой фона — тем же приёмом, каким это
       делают кнопки MudBlazor внутри соседних блоков. */
    border: 0;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Отступы как у соседей: у них контейнер несёт p-1 (4px), а кнопка внутри — свои 10px по горизонтали.
       Слева отступ меньше: первый логотип уже несёт собственную рамку и визуально «толще» текста. */
    padding: 4px 10px 4px 8px;
    height: 100%;
    /* Пол на случай, если цепочка height:100% где-то разорвётся: столько же занимает соседний блок —
       4px padding контейнера + кнопка MudBlazor размера Small (30.75px) + 4px. */
    min-height: 40px;
}

.spc-trigger:hover:not(:disabled),
.spc-trigger--open {
    background-color: #434951;
}

.spc-trigger:disabled {
    cursor: default;
    opacity: 0.6;
}

.spc-stack {
    display: flex;
    align-items: center;
    gap: 5px;
}

.spc-ava {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    color: #12151a;
    background-color: var(--spc-c, #78909c);
}

/* В стопке логотипы крупнее, чем в списке: это единственное, что человек видит в закрытом виде, и 28px —
   максимум, который влезает в блок высотой 40px с отступами 4px (32px под содержимое). */
.spc-stack .spc-ava {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    /* Внахлёст: рамка цветом панели вырезает предыдущий логотип и держит стопку читаемой. */
    border: 2px solid var(--mud-palette-surface);
    margin-left: -9px;
}

.spc-stack .spc-ava:first-child {
    margin-left: 0;
}

.spc-ava img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Буква лежит ПОД картинкой, а не вместо неё: тогда битый логотип (onerror прячет img) сам открывает
   букву, и пустых квадратов в стопке не бывает. */
.spc-ava b {
    position: relative;
    z-index: 0;
    line-height: 1;
}

/* Логотипы клубов — PNG С ПРОЗРАЧНОСТЬЮ, и почти у всех вокруг рисунка есть пустые поля. Если оставить
   под ними цвет клуба, он просвечивает и читается как фирменный цвет, которого клубу никто не давал
   (öMAFIA получала розовый квадрат). Цвет остаётся только под БУКВОЙ — там он и нужен, чтобы различать
   клубы без логотипа. */
.spc-ava--logo {
    background-color: rgba(255, 255, 255, 0.10);
}

/* Если логотип не загрузился, onerror прячет img и открывает букву — на нейтральной подложке она должна
   быть светлой, тёмная просто исчезла бы. */
.spc-ava--logo b {
    color: var(--mud-palette-text-primary);
}

.spc-ava--ghost {
    background-color: rgba(255, 255, 255, 0.12);
}

.spc-ava--more {
    background-color: #4a5057;
    color: var(--mud-palette-text-primary);
    font-size: 11px;
    letter-spacing: -0.02em;
    padding: 0 3px;
    min-width: 28px;
    width: auto;
}

/* Рамки больше нет, поэтому жёлтый счётчик — единственный цветной признак того, что фильтр сужен.
   Цвет тот же, которым вкладка «Клубы» помечает сужение (см. FunkyClubsTabComponent.razor.css). */
.spc-trigger--narrowed .spc-ava--more {
    background-color: #ffd166;
    color: #26200c;
}

/* Подпись набрана как текст соседних кнопок панели (размер, начертание, капс) — блок должен читаться
   как ещё одна кнопка ряда, а не как поле ввода со своей типографикой.
   margin-right:auto прижимает каретку к правому краю, когда блок растянут на всю строку (мобилка), и
   ничего не делает, когда блок по ширине содержимого (XL): свободного места там нет. */
.spc-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: auto;
}

.spc-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--mud-palette-text-secondary);
    flex: 0 0 auto;
    opacity: 0.7;
}

/* На узком экране панель — колонка, и блок занимает строку целиком, а его содержимое стоит по центру.
   Ширину надо протащить через ВСЮ цепочку обёрток, и любое звено без width:100% обрезает блок по
   содержимому. Звено, которое это и делало, — обёртка MudTooltip: у неё `width: auto` (MudBlazor.min.css),
   поэтому `width:100%` у кнопки считался от ширины содержимого. Селектор по «любому ребёнку» якоря, а не
   по `.mud-tooltip-root`, — чтобы не сломаться от переименования внутренних классов MudBlazor. */
.select-player-clubs.w-100 .mud-badge-root,
.select-player-clubs.w-100 .spc-anchor,
.select-player-clubs.w-100 .spc-anchor > *,
.select-player-clubs.w-100 .spc-trigger {
    width: 100%;
}

.select-player-clubs.w-100 .spc-trigger {
    justify-content: center;
}

/* В центрированном виде подпись не должна расталкивать каретку — иначе группа «логотипы + подпись»
   уедет влево, а каретка прижмётся к правому краю, и центрирования не будет. */
.select-player-clubs.w-100 .spc-label {
    margin-right: 0;
}

/* ── Выпадашка ─────────────────────────────────────────────────────────── */
.spc-pop {
    z-index: 1400;
}

.spc-pop-inner {
    min-width: 268px;
    max-width: 340px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    padding: 8px;
}

.spc-pop-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 2px 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 6px;
}

.spc-pop-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
}

.spc-reset {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: #ffd166;
    cursor: pointer;
}

.spc-reset:disabled {
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
    cursor: default;
}

.spc-pop-list {
    max-height: 288px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spc-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.spc-row:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.spc-row--sel {
    background-color: rgba(255, 209, 102, 0.16);
}

.spc-box {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: #26200c;
}

.spc-row--sel .spc-box {
    background-color: #ffd166;
    border-color: #ffd166;
}

.spc-row--sel .spc-box::after {
    content: "✓";
}

.spc-ava--row {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.spc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.spc-games {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}