/* ========================================
   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-sm);
    font-weight: 600;
    color: var(--font-primary);
    margin: 0; /* Отступами управляет gap родителя */
}

.gc-list-group {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden; /* Изменено с visible на hidden для правильного скругления */
    background: var(--bg-content-main);
}

/* Скругление углов у первого и последнего элемента */
.gc-list-group .gc-list-item:first-child {
    border-top-left-radius: calc(var(--radius-lg) - 1px);
    border-top-right-radius: calc(var(--radius-lg) - 1px);
}

.gc-list-group .gc-list-item:last-child {
    border-bottom-left-radius: calc(var(--radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

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

.gc-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-3sm) var(--spacing-3sm);
    background-color: var(--bg-content-main);
    border: none;
    border-top: 1px solid var(--border-primary);
    min-height: 68px;
    transition: background-color var(--transition-fast);
}

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

.gc-list-item:first-child {
    border-top: none;
}

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

/* =================================
   Модификаторы
   ================================= */

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

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

/* Дропдаун внутри list item не должен триггерить hover на родителе */
.gc-list-item:has(.gc-dropdown[aria-expanded="true"]) {
    background-color: var(--bg-content-secondary);
}

/* Кнопка добавления в список */
.gc-list-item-add {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-secondary);
    gap: var(--spacing-xs);
    min-height: 68px; /* Та же высота что у обычных элементов */
    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-tertiary);
    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 {
    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;
    border-top: 1px solid var(--border-primary);
    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-tertiary);
    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(--bg-content-main) !important;
}

/* Вложенные элементы (с отступом слева) */
.gc-list-item.nested {
    padding-left: calc(var(--spacing-md) * 2.5); /* ~48px */
}

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

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

/* Аватар участника */
.gc-list-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
}

.gc-list-avatar.sm {
    width: 32px;
    height: 32px;
}

.gc-list-avatar.lg {
    width: 48px;
    height: 48px;
}

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

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

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

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

/* На мобильных - только КНОПКИ переносятся на следующую строку */
@media (max-width: 767.98px) {
    .gc-list-item:has(.gc-list-actions) {
        flex-wrap: wrap;
    }
    
    .gc-list-actions {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }
    
    .gc-list-actions .gc-btn {
        flex: 1; /* Растягиваем кнопки поровну */
        min-height: 36px; /* Меньше стандартных 44px */
        font-size: var(--font-size-sm); /* 14px */
        padding: var(--spacing-xs) var(--spacing-sm); /* 8px 12px */
    }
}

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

/* Модификатор: жирный заголовок (для названий автомобилей) */
.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) */
}

/* Метаинформация в списках (адреса, роли, описания)
   Использует фиксированный размер 14px вместо относительного .920em из typography.css */
.gc-list-meta {
    font-size: var(--font-size-sm); /* 14px (0.875rem) */
    color: var(--font-secondary);
}

/* Кнопка меню (три точки) 
   @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-item {
        min-height: 60px;
        padding: var(--spacing-md) var(--spacing-md);
    }
    
    .gc-list-avatar {
        width: 36px;
        height: 36px;
    }
    
    .gc-list-title {
        font-size: var(--font-size-sm); /* 14px - остается тот же размер на мобильных */
    }
    
    .gc-list-meta {
        font-size: var(--font-size-sm); /* 14px - мобильный размер */
    }
}

/* =================================
   Аватар с рангом (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);
    min-width: var(--spacing-lg);
    height: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--font-primary);
    background: var(--bg-content-main);
    border: 2px solid var(--bg-primary);
    border-radius: var(--radius-full);
    z-index: 1;
}

.rank-badge.top-3 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000; /* Черный текст на золоте для читаемости в любой теме */
    font-weight: 700;
    border-color: var(--bg-secondary);
}

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

.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);
}