/* ========================================
   UI Kit - Lists Component
   ======================================== */

/* =================================
   Группы списков (.gc-list-group)
   ================================= */


/* Заголовок группы */
.gc-list-group-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--font-primary);
    margin: 0;
}

.gc-list-group-header .gc-status-indicator {
    display: block;
    flex-shrink: 0;
    align-self: center;
    line-height: 0;
}

/* Если в заголовке есть кнопка — пушим её вправо */
.gc-list-group-header:has(> .gc-btn) {
    justify-content: space-between;
}

/* framed — семантический алиас, визуально = обычная группа */
.gc-list-group,
.gc-list-group-framed {
    border: 1px solid var(--ui-border);
    /* Единый радиус оболочки и «внутренней» дуги у крайних строк (−1px под 1px border) */
    --gc-list-group-radius: var(--radius-field);
    border-radius: var(--gc-list-group-radius);
    overflow: hidden;
    background: var(--bg-content-main);
}

/* Borderless-версия оставлена как alias для точечных случаев,
   но основной сценарий без общей рамки теперь живёт в flush. */
.gc-list-group-borderless {
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

/* Единая поверхность без внутренних divider'ов между строками */
.gc-list-group.gc-list-group-unified .gc-list-item,
.gc-list-group.gc-list-group-unified .gc-list-item-add,
.gc-list-group.gc-list-group-unified .gc-list-item-action {
    --gc-list-divider-color: transparent;
}

/**
 * Flush-версия: без внешней рамки и скруглений.
 * Используется внутри gc-card — разделители только между строками.
 * Отрицательные боковые отступы компенсируют padding gc-card-body,
 * чтобы строки тянулись от края до края карточки.
 */
.gc-list-group-flush {
    --gc-list-item-bg: transparent;
    --gc-list-item-hover-bg: transparent;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
}

/* Компенсация padding родителя (gc-panel = mdl, gc-card-body = md) — иначе список «вылезает» за внутренние поля */
.gc-panel .gc-list-group-flush,
.gc-panel-content .gc-list-group-flush,
.gc-card .gc-list-group-flush,
.gc-card-body .gc-list-group-flush,
.gc-panel .gc-list-shell-flush,
.gc-panel-content .gc-list-shell-flush,
.gc-card .gc-list-shell-flush,
.gc-card-body .gc-list-shell-flush {
    margin-left: calc(-1 * var(--gc-content-bleed, var(--spacing-md)));
    margin-right: calc(-1 * var(--gc-content-bleed, var(--spacing-md)));
}

/* Без родителя с горизонтальным padding (gc-panel-content и т.д.) отрицательный margin некуда компенсировать */
.gc-panel.gc-panel--flush > .gc-list-group.gc-list-group-flush,
.gc-panel.gc-panel--flush > .gc-list-shell-flush {
    margin-left: 0;
    margin-right: 0;
}


.gc-list-group-flush .gc-list-item {
    --gc-list-item-padding-x: var(--gc-list-padding-x, var(--gc-list-padding, var(--spacing-md)));
    border-radius: 0;
}

.gc-list-group-flush .gc-list-item:first-child {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.gc-list-group-flush .gc-list-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Скругление углов для обычной группы и framed-alias (концентрично с --gc-list-group-radius оболочки) */
:is(.gc-list-group, .gc-list-group-framed):not(.gc-list-group-flush):not(.gc-list-group-borderless) .gc-list-item:first-child {
    border-top-left-radius: calc(var(--gc-list-group-radius) - 1px);
    border-top-right-radius: calc(var(--gc-list-group-radius) - 1px);
}

:is(.gc-list-group, .gc-list-group-framed):not(.gc-list-group-flush):not(.gc-list-group-borderless) .gc-list-item:last-child {
    border-bottom-left-radius: calc(var(--gc-list-group-radius) - 1px);
    border-bottom-right-radius: calc(var(--gc-list-group-radius) - 1px);
}

/* =================================
   List Shell (родитель для list-group + extras)
   =================================
   Новый API:
   - .gc-list-shell (базовый shell)
   - .gc-list-shell-default (бордер + скругления + фон)
   - .gc-list-shell-flush (без бордера/скругления)
   - .gc-list-shell-interactive (hover всего shell)
   - .gc-list-shell-body (доп. контент: оружие/chips)
   - .gc-list-shell-extra-list (доп. список: пассажиры и т.д.)

   Ниже оставлены алиасы старых классов .gc-list-group-card* для обратной
   совместимости. Новое использование — только через .gc-list-shell*.
*/
.gc-list-shell,
.gc-list-shell-default,
.gc-list-group-card {
    border: 1px solid var(--ui-border);
    --gc-list-group-radius: var(--radius-field);
    border-radius: var(--gc-list-group-radius);
    overflow: hidden;
    background: var(--bg-content-main);
    transition: background-color var(--transition-fast);
}

.gc-list-shell-flush {
    --gc-list-item-bg: transparent;
    --gc-list-item-hover-bg: transparent;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.gc-list-shell-flush > .gc-list-item {
    --gc-list-item-padding-x: var(--gc-list-padding-x, var(--gc-list-padding, var(--spacing-md)));
    border-radius: 0;
}

:is(.gc-list-shell, .gc-list-group-card) > .gc-list-item {
    border: none;
    border-radius: 0;
    background: transparent;
    --gc-list-item-gap: var(--spacing-mdl);
    --gc-list-item-padding-y: var(--gc-list-padding-y, var(--gc-list-padding, var(--spacing-md)));
    --gc-list-item-padding-x: var(--gc-list-padding-x, var(--gc-list-padding, var(--spacing-md)));
    --gc-list-divider-color: transparent;
}

:is(.gc-list-shell, .gc-list-group-card) > .gc-list-item:last-child {
    border-bottom: none;
}

:is(.gc-list-shell, .gc-list-group-card):not(.gc-list-shell-flush) > .gc-list-item:hover {
    background: transparent;
}

/* Shell с древовидными детьми: hover отключён (padding-y=0 — только в контекстных секциях, см. event-layout.css) */
:is(.gc-list-shell, .gc-list-shell-flush):has(.gc-list-tree) > .gc-list-item {
    --gc-list-item-hover-bg: transparent;
}

:is(.gc-list-shell, .gc-list-shell-flush):has(.gc-list-tree) > .gc-list-item:hover {
    background: transparent;
}

.gc-list-shell-interactive,
.gc-list-group-card-interactive {
    --gc-list-shell-hover-bg: var(--gc-interactive-hover-bg);
}

.gc-list-shell-interactive:hover,
.gc-list-group-card-interactive:hover {
    background: var(--gc-list-shell-hover-bg);
}

/* Если блок составной (shell + вложенные интерактивные строки/extra-list),
   hover должен быть общим на контейнере, без второго фонового слоя у дочерних row. */
:is(.gc-list-shell-interactive, .gc-list-group-card-interactive):has(:is(.gc-list-item.interactive, .gc-list-item-interactive, .gc-list-item.profile-trigger)) {
    --gc-list-item-hover-bg: transparent;
}

:is(.gc-list-shell-interactive, .gc-list-group-card-interactive):has(:is(.gc-list-item.interactive, .gc-list-item-interactive, .gc-list-item.profile-trigger))
    :is(.gc-list-item.interactive, .gc-list-item-interactive, .gc-list-item.profile-trigger):hover {
    background-color: transparent;
}

:is(.gc-list-shell, .gc-list-group-card) > .gc-list-item.compact {
    --gc-list-item-min-height: 48px;
    --gc-list-item-padding-y: var(--spacing-sm);
    --gc-list-item-padding-x: var(--spacing-sm);
}

.gc-list-shell-weapon .gc-list-shell-body,
.gc-list-group-card-weapon .gc-list-group-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-sm) var(--spacing-sm);
    background: transparent;
}

.gc-list-shell-flush.gc-list-shell-weapon .gc-list-shell-body {
    padding: 0 var(--spacing-md) var(--spacing-md);
}

/* Weapon shell: верхняя строка участника и chips используют один media rhythm */
.gc-list-shell-weapon > .gc-list-item .gc-list-item-trigger,
.gc-list-group-card-weapon > .gc-list-item .gc-list-item-trigger,
.gc-list-shell-weapon .gc-list-chip,
.gc-list-group-card-weapon .gc-list-chip {
    gap: var(--spacing-sm);
}

:is(.gc-list-shell-weapon, .gc-list-group-card-weapon) .gc-list-chip > :is(.gc-list-media-square, .gc-list-media-icon) {
    --gc-list-media-size: 32px;
}

.gc-list-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md-lg);
    background: var(--ui-surface-1);
    color: var(--font-primary);
}

.gc-list-chip .gc-list-media-square,
.gc-list-chip .gc-list-avatar-square {
    width: 32px;
    height: 32px;
}

.gc-list-shell .gc-list-media-square.gc-list-avatar-fallback,
.gc-list-shell .gc-list-avatar-square.gc-list-avatar-fallback,
.gc-list-group-card .gc-list-media-square.gc-list-avatar-fallback,
.gc-list-group-card .gc-list-avatar-square.gc-list-avatar-fallback {
    font-size: var(--font-size-xs);
}

.gc-list-shell .gc-list-media-square.gc-list-avatar-fallback:not(.gc-list-media-round),
.gc-list-shell .gc-list-avatar-square.gc-list-avatar-fallback:not(.gc-list-media-round),
.gc-list-group-card .gc-list-media-square.gc-list-avatar-fallback:not(.gc-list-media-round),
.gc-list-group-card .gc-list-avatar-square.gc-list-avatar-fallback:not(.gc-list-media-round) {
    border-radius: var(--radius-mdl);
}

:is(.gc-list-shell-extra-list, .gc-list-group-card-list) {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: transparent;
}

:is(.gc-list-shell-extra-list, .gc-list-group-card-list) > .gc-list-item {
    border: none;
    background: transparent;
    --gc-list-item-min-height: 40px;
    --gc-list-item-gap: var(--spacing-sm);
    --gc-list-item-padding-y: var(--spacing-sm);
    --gc-list-item-padding-x: var(--spacing-sm);
}

.gc-list-shell-flush :is(.gc-list-shell-extra-list, .gc-list-group-card-list) > .gc-list-item {
    --gc-list-item-padding-x: var(--spacing-md);
}


/* Tree-режим для вложенных child-row.
   Линия живёт на контейнере, а сами строки получают branch-коннектор. */
.gc-list-tree {
    --gc-list-tree-indent: var(--spacing-lg);
    /* Offset = padding-x текущего контекста — линия у левого края иконки родителя */
    --gc-list-tree-line-offset: var(--gc-list-padding-x, var(--gc-list-padding, var(--spacing-md)));
    --gc-list-tree-line-color: var(--ui-border-strong);
    --gc-list-tree-line-width: 1px;
    --gc-list-tree-branch-width: calc(var(--gc-list-tree-indent) - var(--spacing-sm));
    --gc-list-tree-branch-height: var(--spacing-mdl);
    --gc-list-tree-branch-radius: var(--radius-md);
}

.gc-list-tree > :is(.gc-list-item-child, .gc-list-item.nested) {
    position: relative;
    padding-left: calc(var(--gc-list-item-padding-x) + var(--gc-list-tree-indent));
    background-image: linear-gradient(var(--gc-list-tree-line-color), var(--gc-list-tree-line-color));
    background-repeat: no-repeat;
    background-size: var(--gc-list-tree-line-width) 100%;
    background-position: var(--gc-list-tree-line-offset) 0;
}

.gc-list-tree > :is(.gc-list-item-child, .gc-list-item.nested):last-child {
    background-size: var(--gc-list-tree-line-width) calc(50% - var(--gc-list-tree-branch-height));
}

.gc-list-tree > :is(.gc-list-item-child, .gc-list-item.nested)::after {
    content: "";
    position: absolute;
    left: var(--gc-list-tree-line-offset);
    top: calc(50% - var(--gc-list-tree-branch-height));
    width: var(--gc-list-tree-branch-width);
    height: var(--gc-list-tree-branch-height);
    border-left: var(--gc-list-tree-line-width) solid var(--gc-list-tree-line-color);
    border-bottom: var(--gc-list-tree-line-width) solid var(--gc-list-tree-line-color);
    border-bottom-left-radius: var(--gc-list-tree-branch-radius);
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.gc-list-tree-branchless > :is(.gc-list-item-child, .gc-list-item.nested) {
    background-image: none;
}

.gc-list-tree-branchless > :is(.gc-list-item-child, .gc-list-item.nested)::after {
    display: none;
}

.gc-list-chip-interactive {
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.gc-list-chip-interactive:hover {
    border-color: var(--ui-border-strong);
}

.gc-list-chip-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--font-primary);
}

/* =================================
   Элементы списка (.gc-list-item)
   ================================= */

.gc-list-item {
    --gc-list-item-gap: var(--spacing-sm);
    --gc-list-item-padding-y: var(--gc-list-padding-y, var(--gc-list-padding, var(--spacing-sm)));
    --gc-list-item-padding-x: var(--gc-list-padding-x, var(--gc-list-padding, var(--spacing-sm)));
    --gc-list-item-min-height: 48px;
    --gc-list-divider-color: var(--ui-border);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gc-list-item-gap);
    padding: var(--gc-list-item-padding-y) var(--gc-list-item-padding-x);
    background-color: var(--gc-list-item-bg, var(--bg-content-main));
    border: none;
    min-height: var(--gc-list-item-min-height);
    transition: background-color var(--transition-fast);
    --gc-list-item-hover-bg: var(--gc-interactive-hover-bg);
}

:is(.gc-list-item-add, .gc-list-item-action) {
    --gc-list-divider-color: var(--ui-border);
    position: relative;
}

/*
 * Разделитель между строками внутри группы (раньше был ::before с inset — дублировало смысл
 * с border-top и путало инспектор). Линия на всю ширину строки; цвет — --gc-list-divider-color
 * (у .gc-list-group-unified / shell — transparent).
 *
 * Важно: правило действует для ЛЮБОГО соседства .gc-list-item в DOM — не вкладывайте строки
 * напрямую в gc-stack-sm / произвольный flex без родителя-группы. Для «простого стека» в панели
 * используйте gc-interactive-row (см. блок ниже и shootie.mdc «Списки»), либо gc-panel-content--list-cards
 * на родителе вместе с gc-panel-content--list (styles.css), если нужны карточные .gc-list-item.
 */
:is(.gc-list-item, .gc-list-item-add, .gc-list-item-action):not(:first-child) {
    border-top: 1px solid var(--gc-list-divider-color);
}

/* Выбранный радио/чекбокс имеет серый фон 
   UI Kit v1.1+: Применяется только к прямым дочерним элементам (не к вложенным дропдаунам) */
.gc-list-item:has(> .gc-radio-native:checked),
.gc-list-item:has(> .gc-checkbox-native:checked),
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native:checked),
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native:checked),
.gc-list-item:has(> label > .gc-radio-native:checked),
.gc-list-item:has(> label > .gc-checkbox-native:checked) {
    /* Выбранная строка — фон ячейки; при hover ниже тот же --gc-list-item-hover-bg, что у невыбранной */
    background-color: var(--bg-content-main);
}

/* Радио/чекбокс в строке: один hover фона для выбранного и невыбранного (в т.ч. без .interactive — .gc-radio-wrapper на label) */
.gc-list-item.gc-radio-wrapper:hover,
.gc-list-item.gc-checkbox-wrapper:hover,
.gc-list-item:has(> .gc-radio-native):hover:not(:has(> .gc-radio-native:disabled)),
.gc-list-item:has(> .gc-checkbox-native):hover:not(:has(> .gc-checkbox-native:disabled)),
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native):hover:not(:has(> .gc-radio-wrapper > .gc-radio-native:disabled)),
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native):hover:not(:has(> .gc-checkbox-wrapper > .gc-checkbox-native:disabled)) {
    background-color: var(--gc-list-item-hover-bg);
}

/* Disabled радио/чекбокс - текст становится серым */
/* ТОЛЬКО если input является ПРЯМЫМ дочерним элементом (не в дропдаунах!) */
.gc-list-item:has(> .gc-radio-native:disabled) .gc-list-title,
.gc-list-item:has(> .gc-checkbox-native:disabled) .gc-list-title,
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native:disabled) .gc-list-title,
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native:disabled) .gc-list-title,
.gc-list-item:has(> .gc-radio-native:disabled) .gc-list-meta,
.gc-list-item:has(> .gc-checkbox-native:disabled) .gc-list-meta,
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native:disabled) .gc-list-meta,
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native:disabled) .gc-list-meta {
    color: var(--font-secondary);
}

.gc-list-item:has(> .gc-radio-native:disabled) :is(.gc-badge, .gc-class-badge, .gc-badge-car-number),
.gc-list-item:has(> .gc-checkbox-native:disabled) :is(.gc-badge, .gc-class-badge, .gc-badge-car-number),
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native:disabled) :is(.gc-badge, .gc-class-badge, .gc-badge-car-number),
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native:disabled) :is(.gc-badge, .gc-class-badge, .gc-badge-car-number) {
    opacity: 0.6;
}

.gc-list-item:has(> .gc-radio-native:disabled),
.gc-list-item:has(> .gc-checkbox-native:disabled),
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native:disabled),
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native:disabled) {
    cursor: not-allowed;
    pointer-events: none !important;
}

.gc-list-item:has(> .gc-radio-native:disabled):hover,
.gc-list-item:has(> .gc-checkbox-native:disabled):hover,
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native:disabled):hover,
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native:disabled):hover {
    background: inherit;
}

/* Разрешаем клики по ссылкам внутри disabled элементов */
.gc-list-item:has(> .gc-radio-native:disabled) a,
.gc-list-item:has(> .gc-checkbox-native:disabled) a,
.gc-list-item:has(> .gc-radio-wrapper > .gc-radio-native:disabled) a,
.gc-list-item:has(> .gc-checkbox-wrapper > .gc-checkbox-native:disabled) a {
    pointer-events: auto !important;
}

/* Заглушка внутри gc-list-group */
.gc-list-group > .gc-empty-state {
    background-color: var(--bg-content-main);
    border-top: none;
}

:is(.gc-list-group, .gc-list-group-framed) > :is(.gc-list-item, .gc-list-item-add, .gc-list-item-action) {
    --gc-list-item-bg: transparent;
}

/* =================================
   Модификаторы
   =================================
   Интерактивность строки:
   - .interactive — кликабельная строка (div/button-паттерн)
   - .gc-list-item-interactive — то же (BEM-вариант, предпочтительно в новом коде)
   - .profile-trigger — доменный алиас для открытия профиля (наследует поведение interactive)
   ================================= */

/* Интерактивные элементы (кликабельные) */
.gc-list-item.interactive,
.gc-list-item-interactive,
.gc-list-item.profile-trigger {
    cursor: pointer;
}

.gc-list-item.interactive:hover,
.gc-list-item-interactive:hover,
.gc-list-item.profile-trigger:hover {
    background-color: var(--gc-list-item-hover-bg);
}

/* Централизованные hover-режимы
   - по умолчанию list-item = row hover
   - при необходимости контекст может переключиться на row/shell hover
*/
.gc-list-hover-row {
    --gc-list-item-hover-bg: var(--gc-interactive-hover-bg);
    --gc-list-shell-hover-bg: transparent;
    --gc-list-action-hover-bg: transparent;
    --gc-list-action-hover-border: transparent;
    --gc-list-action-hover-color: inherit;
}

.gc-list-hover-shell {
    --gc-list-item-hover-bg: transparent;
    --gc-list-shell-hover-bg: var(--gc-interactive-hover-bg);
    --gc-list-action-hover-bg: transparent;
    --gc-list-action-hover-border: transparent;
    --gc-list-action-hover-color: inherit;
}

.gc-list-hover-action {
    --gc-list-item-hover-bg: transparent;
    --gc-list-shell-hover-bg: transparent;
    --gc-list-action-hover-bg: var(--ui-surface-1);
    --gc-list-action-hover-border: var(--ui-border);
    --gc-list-action-hover-color: var(--font-primary);
}

/* Кнопки в .gc-list-actions: вид и ховер задают классы (gc-btn-*, gc-dropdown-toggle-outline / -secondary и т.д.), без принудительного ghost. */

/* Для обычной интерактивной строки hover должен работать по всей площади row,
   включая actions-зону. Составные shell-блоки по-прежнему отключают row-hover выше. */

/* Кнопка добавления в список (выше обычной строки — зона призыва к действию) */
.gc-list-item-add {
    --gc-list-item-add-min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-secondary);
    gap: var(--spacing-xs);
    min-height: var(--gc-list-item-add-min-height);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

a.gc-list-item-add {
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    text-decoration: none !important;
}

.gc-list-item-add i {
    font-size: var(--font-size-md);
    color: var(--font-secondary);
    opacity: 0.6;
    transition: all var(--transition-base);
}

.gc-list-item-add span {
    color: var(--font-secondary);
    transition: color var(--transition-base);
}

.gc-list-item-add:hover {
    /* Легче --ui-accent-soft (0.08), чтобы не перебивать контент */
    background-color: rgba(var(--accent-link-rgb), 0.03) !important;
}

.gc-list-item-add:hover i {
    color: var(--accent-link);
    opacity: 1;
}

.gc-list-item-add:hover span {
    color: var(--accent-link);
}

/* Action list item - для кнопок-действий (Добавить участника, Назначить организатора) */
.gc-list-item-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    color: var(--font-secondary);
    font-family: inherit;
}

.gc-list-item-action:hover {
    background-color: var(--bg-hover);
}

.gc-list-item-action i,
.gc-list-item-action svg {
    color: var(--font-secondary);
    flex-shrink: 0;
}

.gc-list-item-action .gc-list-title {
    font-weight: 500;
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
}

/* Неинтерактивные элементы */
.gc-list-item.non-interactive {
    cursor: default;
}

.gc-list-item.non-interactive:hover {
    background-color: var(--gc-list-item-bg, var(--bg-content-main)) !important;
}

/* Дочерняя строка: используется внутри extra-list; .nested оставлен как legacy alias */
.gc-list-item-child,
.gc-list-item.nested {
    --gc-list-item-min-height: 44px;
    --gc-list-item-gap: var(--spacing-sm);
    --gc-list-item-padding-y: var(--spacing-sm);
    --gc-list-item-padding-x: var(--spacing-sm);
    --gc-list-item-hover-bg: var(--gc-interactive-hover-bg);
}

/* Компактный вариант (меньшая высота) */
.gc-list-item.compact {
    --gc-list-item-min-height: 48px;
    --gc-list-item-padding-y: var(--spacing-sm);
    --gc-list-item-padding-x: var(--spacing-sm);
}

/* Child-row + compact: сохраняем компактную высоту без дополнительного left-offset */
.gc-list-item-child.compact,
.gc-list-item.nested.compact {
    --gc-list-item-min-height: 44px;
    --gc-list-item-padding-y: var(--spacing-sm);
    --gc-list-item-padding-x: var(--spacing-sm);
}

/* =================================
   Структурные классы для контента
   ================================= */

/* Кликабельная левая часть строки (аватар + контент) — не захватывает кнопки справа */
.gc-list-item-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
    cursor: inherit;
}

a.gc-list-item-trigger {
    color: inherit;
    text-decoration: none;
}

a.gc-list-item-trigger:hover {
    color: inherit;
}

/* Основная колонка строки: trigger сверху + второй ряд (теги, примечание).
   Прямой ребёнок gc-list-item перед gc-list-actions — чтобы flex-строка не
   превращалась в trigger | actions | tags.
   Лента / заявки: см. gc-list-item-primary-row (или legacy subscriptions-benefit-feed-item__primary-row)
   в lists.css — trigger и gc-list-actions в одной строке; родитель списка —
   gc-panel-content--list + gc-panel-content--list-cards (styles.css). */
.gc-list-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
}

.gc-list-item-body > .gc-list-item-trigger {
    flex: 0 0 auto;
    width: 100%;
}

/* Строка «trigger | actions» внутри body; ниже — бейджи / detail.
 * Имя ряда: gc-list-item-primary-row (нейтральное, UI Kit) или
 * subscriptions-benefit-feed-item__primary-row (те же правила — legacy в разметке ленты). */
.subscriptions-benefit-feed-item.gc-list-item {
    align-items: flex-start;
}

.gc-list-item-body > .gc-list-item-primary-row,
.subscriptions-benefit-feed-item .subscriptions-benefit-feed-item__primary-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gc-list-item-gap, var(--spacing-sm));
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
}

.gc-list-item-body > .gc-list-item-primary-row > .gc-list-item-trigger,
.subscriptions-benefit-feed-item .subscriptions-benefit-feed-item__primary-row > .gc-list-item-trigger {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.gc-list-item-body > .gc-list-item-primary-row > .gc-list-actions,
.subscriptions-benefit-feed-item .subscriptions-benefit-feed-item__primary-row > .gc-list-actions {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

/* Редко: колонка метрик как прямой сосед body без обёртки __primary-row */
.subscriptions-benefit-feed-item-actions.gc-list-actions {
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
}

/* Media contract для list-item / list-shell.
   Canonical primitives:
   - gc-list-avatar: круглое фото
   - gc-list-media-square: квадратное фото/preview
   - gc-list-media-icon: иконочный frame
   Legacy/domain aliases:
   - gc-list-avatar-square
   - gc-list-avatar-icon
   - sidebar-icon-box
   - sidebar-weapon-icon */
.gc-list-avatar,
.gc-list-media-square,
.gc-list-avatar-square,
.gc-list-media-icon,
.gc-list-avatar-icon,
.sidebar-icon-box,
.sidebar-weapon-icon {
    --gc-list-media-size: 40px;
    width: var(--gc-list-media-size);
    height: var(--gc-list-media-size);
    min-width: var(--gc-list-media-size);
    min-height: var(--gc-list-media-size);
    max-width: var(--gc-list-media-size);
    max-height: var(--gc-list-media-size);
    flex-shrink: 0;
}

.gc-list-avatar.sm,
.gc-list-media-square.sm,
.gc-list-avatar-square.sm,
.gc-list-media-icon.sm,
.gc-list-avatar-icon.sm,
.gc-list-avatar-fallback.sm {
    --gc-list-media-size: 32px;
}

.gc-list-avatar.md,
.gc-list-media-square.md,
.gc-list-avatar-square.md,
.gc-list-media-icon.md,
.gc-list-avatar-icon.md,
.gc-list-avatar-fallback.md {
    --gc-list-media-size: 36px;
}

.gc-list-avatar.xs,
.gc-list-media-square.xs,
.gc-list-avatar-square.xs,
.gc-list-media-icon.xs,
.gc-list-avatar-icon.xs,
.gc-list-avatar-fallback.xs {
    --gc-list-media-size: 24px;
}

.gc-list-avatar.lg,
.gc-list-media-square.lg,
.gc-list-avatar-square.lg,
.gc-list-media-icon.lg,
.gc-list-avatar-icon.lg,
.gc-list-avatar-fallback.lg {
    --gc-list-media-size: 42px;
}

.gc-list-media-square,
.gc-list-avatar-square,
.gc-list-avatar-fallback,
.gc-list-media-icon,
.gc-list-avatar-icon,
.sidebar-icon-box,
.sidebar-weapon-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

/* Фото / fallback — приподнятая surface. Иконочные frame — control-bg: в dark ui-surface-1 и ui-border сливались. */
.gc-list-media-square,
.gc-list-avatar-square,
.gc-list-avatar-fallback {
    background: var(--ui-surface-1);
}

.gc-list-media-icon,
.gc-list-avatar-icon,
.sidebar-icon-box,
.sidebar-weapon-icon {
    background: var(--ui-control-bg);
}

.gc-list-media-icon.sm,
.gc-list-avatar-icon.sm {
    --gc-list-media-icon-padding: var(--spacing-3xs);
    --gc-list-media-mask-inset: 3px;
    --gc-list-media-glyph-size: var(--font-size-md);
}

.gc-list-media-icon.xs,
.gc-list-avatar-icon.xs {
    --gc-list-media-icon-padding: var(--spacing-xs);
    --gc-list-media-mask-inset: 1px;
    --gc-list-media-glyph-size: var(--font-size-sm);
}

.gc-list-media-icon.lg,
.gc-list-avatar-icon.lg {
    --gc-list-media-icon-padding: var(--spacing-sm);
    --gc-list-media-mask-inset: var(--spacing-xs);
    --gc-list-media-glyph-size: var(--font-size-xl);
}

/* Круглое фото участника */
.gc-list-avatar {
    object-fit: cover;
    border-radius: 50%;
}

/* Иконка-заглушка вместо фото (эпики, списки) */
.gc-list-avatar.gc-list-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    box-sizing: border-box;
    color: var(--font-secondary);
}

.gc-list-avatar.gc-list-avatar-placeholder i {
    font-size: var(--font-size-lg);
    line-height: 1;
}

/* Квадратная миниатюра для list-item / list-shell (оружие, транспорт и т.п.) */
.gc-list-media-square,
.gc-list-avatar-square {
    object-fit: cover;
    border-radius: var(--radius-md);
}

.gc-list-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.gc-list-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    border: 1.5px solid var(--bg-content);
}

.gc-list-avatar-fallback {
    padding: 1px;
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

/* При использовании квадратного контейнера — скругления вместо круга */
.gc-list-media-square.gc-list-avatar-fallback,
.gc-list-avatar-square.gc-list-avatar-fallback {
    border-radius: var(--radius-md);
}

/* Простой вертикальный список людей/элементов без рамок */
.gc-person-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Контейнер для нескольких смысловых секций — разделяет их отступом md */
.gc-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Иконочный frame для list-item / list-shell */
.gc-list-media-icon,
.gc-list-avatar-icon,
.sidebar-icon-box,
.sidebar-weapon-icon {
    --gc-list-media-icon-padding: var(--spacing-sm);
    --gc-list-media-mask-inset: var(--spacing-xs);
    --gc-list-media-glyph-size: var(--font-size-lg);
    padding: var(--gc-list-media-icon-padding);
    position: relative;
    border-radius: var(--radius-md);
    color: var(--font-primary);
    transition: background var(--transition-fast);
}

.gc-list-media-icon i,
.gc-list-avatar-icon i,
.sidebar-icon-box i,
.sidebar-weapon-icon i {
    font-size: var(--gc-list-media-glyph-size);
    line-height: 1;
    color: currentColor;
}

.gc-list-media-mask,
.sidebar-weapon-img {
    position: absolute;
    inset: var(--gc-list-media-mask-inset);
    display: block;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Shape modifiers для list-media.
   Позволяют явно переопределить форму независимо от типа media. */
:is(
    .gc-list-avatar,
    .gc-list-media-square,
    .gc-list-avatar-square,
    .gc-list-media-icon,
    .gc-list-avatar-icon,
    .gc-list-avatar-fallback,
    .sidebar-icon-box,
    .sidebar-weapon-icon
).gc-list-media-round {
    border-radius: 50%;
}

:is(
    .gc-list-avatar,
    .gc-list-media-square,
    .gc-list-avatar-square,
    .gc-list-media-icon,
    .gc-list-avatar-icon,
    .gc-list-avatar-fallback,
    .sidebar-icon-box,
    .sidebar-weapon-icon
).gc-list-media-rounded {
    border-radius: var(--radius-md);
}

:is(
    .gc-list-avatar,
    .gc-list-media-square,
    .gc-list-avatar-square,
    .gc-list-media-icon,
    .gc-list-avatar-icon,
    .gc-list-avatar-fallback,
    .sidebar-icon-box,
    .sidebar-weapon-icon
).gc-list-media-sharp {
    border-radius: 0;
}

/* Legacy/domain aliases: база 32×32; «lg» — как gc-list-media-icon в лоадаут-сайдбаре (40px + inset sm). */
.sidebar-icon-box,
.sidebar-weapon-icon {
    --gc-list-media-size: 32px;
    --gc-list-media-icon-padding: var(--spacing-3xs);
    --gc-list-media-mask-inset: var(--spacing-xs);
}

.sidebar-icon-box-lg,
.sidebar-weapon-icon-lg {
    --gc-list-media-size: 40px;
    --gc-list-media-icon-padding: var(--spacing-sm);
    --gc-list-media-mask-inset: var(--spacing-sm);
}

.sidebar-icon-box-md,
.sidebar-weapon-icon-md {
    --gc-list-media-size: 32px;
    --gc-list-media-icon-padding: var(--spacing-3xs);
    --gc-list-media-mask-inset: var(--spacing-xs);
}

.sidebar-icon-box-sm,
.sidebar-weapon-icon-sm {
    --gc-list-media-size: 24px;
    --gc-list-media-icon-padding: var(--spacing-xs);
    --gc-list-media-mask-inset: 1px;
}

/* Нумерованный маркер */
.gc-list-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-content-secondary);
    border: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--font-secondary);
    flex-shrink: 0;
}

/* Иконка вместо маркера */
.gc-list-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-secondary);
    flex-shrink: 0;
}

/* Контент списка (имя + мета) — Figma: колонка gap 4px между заголовком и подписью */
.gc-list-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xs);
    min-width: 0; /* Для корректного text-overflow */
    overflow: hidden;
    flex: 1;
}

.gc-list-content > .gc-list-title,
.gc-list-content > .gc-list-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-list-content > .gc-list-title {
    line-height: var(--line-height-list-title);
}

.gc-list-content > .gc-list-meta {
    line-height: var(--line-height-list-description);
}

/* Многострочные описания (радио-настройки и т.п.) — без однострочного ellipsis */
.gc-list-content.gc-list-content--multiline > .gc-list-title,
.gc-list-content.gc-list-content--multiline > .gc-list-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.gc-list-meta-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
    overflow: visible;
    padding-left: var(--spacing-3xs);
    margin-left: calc(-1 * var(--spacing-3xs));
}

.gc-list-meta-status .gc-status-indicator {
    display: block;
    flex-shrink: 0;
    align-self: center;
    line-height: 0;
}

.gc-list-meta-status .gc-list-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-list-content:has(> .gc-list-meta-status) {
    overflow: visible;
}

/* Badge/Meta - контейнер для бейджа/метаданных справа */
.gc-list-badge {
    margin-left: auto;
    flex-shrink: 0;
}

/* Actions - контейнер для кнопок действий */
.gc-list-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Контейнер для метаинформации справа (динамика, статусы) - всегда справа */
.gc-list-meta-right {
    display: flex;
    gap: var(--spacing-xs);
    margin-left: auto;
    flex-shrink: 0;
    align-items: center;
}

/* На мобильных — только когда .gc-list-actions прямой ребёнок .gc-list-item:
   кнопки уходят на следующую строку. Если actions внутри body (напр.
   subscriptions-benefit-feed-item__primary-row), тот же широкий селектор ломал ряд. */
@media (max-width: 767.98px) {
    .gc-list-item:has(> .gc-list-actions > .gc-btn:not(.gc-btn-icon-sm):not(.gc-btn-icon):not(.gc-btn-icon-xs)) {
        flex-wrap: wrap;
    }

    .gc-list-item > .gc-list-actions:has(> .gc-btn:not(.gc-btn-icon-sm):not(.gc-btn-icon):not(.gc-btn-icon-xs)) {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }

    .gc-list-item > .gc-list-actions:has(> .gc-btn:not(.gc-btn-icon-sm):not(.gc-btn-icon):not(.gc-btn-icon-xs)) > .gc-btn {
        flex: 1;
        min-height: 36px;
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

.gc-list-title {
    font-size: var(--font-size-mdl);
    font-weight: 500;
    margin: 0;
    color: var(--font-primary);
    line-height: var(--line-height-list-title);
}

/* Модификатор: жирный заголовок (для названий автомобилей) */
.gc-list-title-bold,
.gc-vehicle-title {
    font-weight: 700;
    color: var(--font-primary);
}

/* Модификатор: маленький заголовок (для названий оружия) */
.gc-list-title-sm {
    font-size: var(--font-size-sm); /* 14px (0.875rem) */
}

/* Модификатор: кегль mdl и межстрочный интервал 24px */
.gc-list-title--mdl {
    font-size: var(--font-size-mdl);
    line-height: var(--line-height-list-title);
}

/* Модификатор: заголовок с бейджем в строку */
.gc-list-title-with-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    flex-wrap: wrap;
}

/* Trailing badge: прижимаем метку к правому краю строки */
.gc-list-title-with-badge .gc-badge,
.gc-list-title-with-badge .gc-badge-car-number {
    margin-left: auto;
    flex-shrink: 0;
}

/* Чуть крупнее compact-badge внутри заголовка списка */
.gc-list-title-with-badge .gc-badge-sm {
    padding: 2px 8px;
    font-size: var(--font-size-xs);
}

/* Метаинформация в списках — вторичная строка (font-size-sm) */
.gc-list-meta {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    margin: 0;
    line-height: var(--line-height-list-description);
    font-weight: 400;
}

/* Вторая строка: дата + метрика (ХФ в очереди модерации челленджа и аналоги) */
.gc-list-meta.gc-list-meta--metrics {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}

.gc-list-meta-hf {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3xs);
    min-width: 0;
}

.gc-list-meta-hf img {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    object-fit: contain;
}

.gc-list-meta-hf > span {
    color: var(--font-secondary);
    font-weight: 500;
}

.gc-list-meta-hf.gc-list-meta-hf--ranking {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3xs);
}

/* Челлендж: отклонённая подача в компактном списке — приглушить метрики в строке */
.gc-list-meta.gc-list-meta--metrics-rejected .gc-list-meta-hf {
    opacity: var(--media-caption-strip-muted-opacity);
    filter: grayscale(1);
}

.gc-list-item--submission-rejected .gc-list-meta.gc-list-meta--metrics-rejected > span:first-child {
    color: var(--font-secondary);
}

/* Плотная вторичная строка (редко): 12px / 16px */
.gc-list-meta.gc-list-meta--compact,
.gc-list-item .gc-list-meta.gc-list-meta--compact {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-list-compact);
}

/* Внутри строки списка — тот же кегль, что у .gc-list-meta */
.gc-list-item .gc-list-meta {
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: var(--line-height-list-description);
}

/* Кнопка меню (три точки) 
   @deprecated Используйте .gc-dropdown-toggle .gc-dropdown-toggle-icon из dropdown.css
   Оставлено для обратной совместимости со старым кодом
*/
.gc-menu-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--font-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    cursor: pointer;
}

.gc-menu-btn:hover {
    color: var(--font-primary);
    background-color: var(--bg-content-secondary);
}

.gc-menu-btn:active {
    background-color: var(--bg-hover);
    transform: scale(0.95);
}

.gc-menu-btn:focus {
    box-shadow: none;
    outline: none;
}

/* Убираем стрелку у gc-menu-btn, если она используется в gc-dropdown */
.gc-dropdown .gc-menu-btn::after {
    display: none !important;
}

/* =================================
   Бейджи и метки
   ================================= */
/* Используй .gc-class-badge и другие бейджи из badges.css */

/* =================================
   Адаптивность
   ================================= */

@media (max-width: 576px) {
    .gc-list-title {
        font-size: var(--font-size-mdl);
    }

    .gc-list-meta {
        font-size: var(--font-size-xs);
    }

    .gc-list-item .gc-list-meta {
        font-size: var(--font-size-xs);
    }

    .gc-list-meta.gc-list-meta--compact,
    .gc-list-item .gc-list-meta.gc-list-meta--compact {
        font-size: var(--font-size-xs);
    }
}

/* =================================
   Аватар с рангом (Rankings)
   ================================= */

.avatar-with-rank {
    position: relative;
    flex-shrink: 0;
}

.rank-badge {
    position: absolute;
    bottom: calc(var(--spacing-xs) * -1);
    right: calc(var(--spacing-xs) * -1);
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    min-width: var(--spacing-lg);
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-size: var(--font-size-2xs);
    font-weight: 500;
    line-height: 1;
    color: var(--font-primary);
    background-color: var(--bg-content-main);
    z-index: 1;
}

/* Места 1–3: цветной фон медали, цифра всегда тёмная (--gc-rank-medal-fg) */
.rank-badge.rank-badge--place-1,
.rank-badge.rank-badge--place-2,
.rank-badge.rank-badge--place-3,
.rank-badge.top-3 {
    color: var(--gc-rank-medal-fg);
    font-weight: 600;
}

.rank-badge.rank-badge--place-1,
.rank-badge.top-3 {
    background-color: var(--gc-rank-place-1-bg);
}

.rank-badge.rank-badge--place-2 {
    background-color: var(--gc-rank-place-2-bg);
}

.rank-badge.rank-badge--place-3 {
    background-color: var(--gc-rank-place-3-bg);
}

/* =================================
   Изменение позиции в рейтинге
   ================================= */

.rank-change {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--spacing-4xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4xs);
    line-height: 1.4;
}

.rank-change.up {
    color: var(--success-color);
    background: rgba(var(--success-color-rgb), 0.08);
}

.rank-change.down {
    color: var(--danger-color);
    background: rgba(var(--danger-color-rgb), 0.08);
}

/* ─── Interactive Row ────────────────────────────────────────────────────── */
/* Замена gc-list-item там, где не нужен gc-list-group и его CSS-переменные  */
/* Паддинг строки = --gc-list-row-padding (8px); в зоне --list вместе с xs зоны = inset mdl (12px). */
/* Компактная строка человека (канал, инвайты): корень — article.gc-interactive-row.interactive (+ profile-trigger при необходимости). */

.gc-interactive-row {
    display: flex;
    align-items: center;
    gap: var(--gc-list-row-padding);
    padding: var(--gc-list-row-padding);
    border-radius: var(--radius-md-lg);
    transition: background var(--transition-fast);
    color: var(--font-primary);
    text-decoration: none;
}

button.gc-interactive-row {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
}

a.gc-interactive-row,
.gc-interactive-row.interactive {
    cursor: pointer;
}

/* Строка-ссылка: не наследовать глобальный `a:hover { color: accent }` — иначе красится весь ряд и иконка в gc-list-actions */
a.gc-interactive-row {
    color: var(--font-primary);
    text-decoration: none;
}

a.gc-interactive-row:hover,
a.gc-interactive-row:focus-visible {
    color: var(--font-primary);
    text-decoration: none;
}

a.gc-interactive-row .gc-list-actions {
    color: var(--font-secondary);
}

a.gc-interactive-row:hover,
a.gc-interactive-row:focus-visible,
.gc-interactive-row.interactive:hover {
    background: var(--gc-interactive-hover-bg);
}

/* Dark theme: secondary-бейдж становится белым чтобы не сливаться с тёмным ховером */
a.gc-interactive-row:hover .gc-badge-secondary,
.gc-interactive-row.interactive:hover .gc-badge-secondary {
    background: #F5F5F5;
    color: #1A1A1A;
    border-color: transparent;
}

/* Light theme: бейдж не меняется (ховер почти незаметен на светлом фоне) */
[data-theme="light"] a.gc-interactive-row:hover .gc-badge-secondary,
[data-theme="light"] .gc-interactive-row.interactive:hover .gc-badge-secondary {
    background: var(--gc-interactive-hover-bg);
    color: var(--font-secondary);
    border-color: var(--ui-border);
}

@media (prefers-color-scheme: light) {
    a.gc-interactive-row:hover .gc-badge-secondary,
    .gc-interactive-row.interactive:hover .gc-badge-secondary {
        background: var(--gc-interactive-hover-bg);
        color: var(--font-secondary);
        border-color: var(--ui-border);
    }
}

.gc-interactive-row:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Иконочный frame / фото слева: базово --radius-md (8px), строка — md-lg (10px) */
.gc-interactive-row > :is(
    .gc-list-media-icon,
    .gc-list-avatar-icon,
    .gc-list-media-square,
    img.gc-list-media-square
) {
    border-radius: var(--radius-md-lg);
    flex-shrink: 0;
}

/* Навигация через data-href (public/js/data-href.js), без inline onclick */
[data-href]:not([data-href=""]) {
    cursor: pointer;
}

[data-href][tabindex="0"]:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Модалка транспорта: обёртка «Беру пассажиров» не разрывает вертикальный список (.gc-grouped-list) */
.transport-modal-body .gc-grouped-list > .transport-passenger-driver-block {
    display: contents;
}

/* Подпись под строкой списка / карточкой (UI Kit) */
.gc-list-entry-detail,
.subscriptions-benefit-feed-entry-detail {
    margin: var(--spacing-2xs) 0 0;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--bg-content-secondary);
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--font-primary);
    line-height: var(--line-height-list-description);
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.gc-list-item-body > .gc-list-entry-detail,
.gc-list-item-body > .subscriptions-benefit-feed-entry-detail,
.gc-challenge-card > .gc-list-entry-detail {
    margin-top: 0;
}