/* Expandable List Component - Стили для списков с кнопкой "Показать все" */

.expandable-list {
    position: relative;
}

.expandable-list-items {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.expandable-list-items.collapsed {
    max-height: var(--collapsed-height, 400px);
}

.expandable-list-items.expanded {
    max-height: none;
}

/* Градиент-затемнение внизу списка */
.expandable-list-fade {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--color-bg-secondary, #1a1a1a));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.expandable-list.expanded .expandable-list-fade {
    opacity: 0;
}

/* Кнопка "Показать все" */
.expandable-list-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    width: 100%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-top: var(--space-2, 8px);
    background: var(--color-bg-tertiary, #222);
    border: 1px solid var(--color-border-subtle, #333);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-secondary, #aaa);
    font-size: var(--font-size-sm, 14px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.expandable-list-toggle:hover {
    background: var(--color-bg-elevated, #2a2a2a);
    color: var(--color-text-primary, #fff);
    border-color: var(--color-border-default, #444);
}

.expandable-list-toggle i {
    transition: transform 0.3s ease;
}

.expandable-list.expanded .expandable-list-toggle i {
    transform: rotate(180deg);
}

/* Счётчик скрытых элементов */
.expandable-list-count {
    background: var(--color-accent-primary, #00d4ff);
    color: #000;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
}

/* Компактный вариант для боковых панелей */
.expandable-list-compact .expandable-list-toggle {
    padding: var(--space-2, 8px);
    font-size: var(--font-size-xs, 12px);
}

/* Ссылка "Показать все" вместо кнопки */
.expandable-list-link {
    display: block;
    text-align: center;
    padding: var(--space-3, 12px);
    color: var(--color-accent-primary, #00d4ff);
    font-size: var(--font-size-sm, 14px);
    text-decoration: none;
    transition: color 0.2s ease;
}

.expandable-list-link:hover {
    color: var(--color-accent-secondary, #00ff88);
    text-decoration: underline;
}