/* ========================================
   gc-select — выпадающий список (UI Kit)
   Разметка: .gc-select > .gc-select-trigger + .gc-select-dropdown
   ======================================== */

/* ─── Контейнер ──────────────────────────────────────────────────────────── */

.gc-select {
    position: relative;
    width: 100%;
}

.gc-select-auto {
    width: auto;
    min-width: 130px;
}

/* ─── Триггер ────────────────────────────────────────────────────────────── */

.gc-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px; /* Синхронизировано с gc-input */
    padding: 0 var(--spacing-mdl);
    font-size: var(--font-size-sm);
    color: var(--font-primary);
    background-color: var(--ui-field-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-field);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.gc-select-trigger:hover {
    border-color: var(--border-secondary);
}

/* Focus-ring как у gc-input */
.gc-select-trigger.active {
    border-color: var(--accent-link);
    box-shadow: 0 0 0 3px rgba(var(--accent-link-rgb), 0.12);
    outline: none;
}

/* Текст-плейсхолдер (до выбора) */
.gc-select-placeholder {
    flex: 1;
    color: var(--font-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    pointer-events: none;
}

/* Текст выбранного значения */
.gc-select-value {
    flex: 1;
    color: var(--font-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    pointer-events: none;
}

/* Для обратной совместимости (старый класс) */
.gc-select-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    pointer-events: none;
}

/* Стрелка-шеврон */
.gc-select-arrow {
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    margin-left: var(--spacing-xs);
}

.gc-select-trigger.active .gc-select-arrow {
    transform: rotate(180deg);
}

/* ─── Dropdown ───────────────────────────────────────────────────────────── */

.gc-select-dropdown {
    --gc-select-item-gap: var(--spacing-xs);

    position: absolute;
    top: calc(100% + var(--spacing-xs));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gc-select-item-gap);

    background-color: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-field);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
    padding: var(--spacing-xs);
    max-height: 280px;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--spacing-xs)));
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
}

.gc-select-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Обёртка списка (напр. скводы): тот же вертикальный ритм, что и у прямых детей .gc-select-dropdown */
.gc-select-dropdown > .gc-select-options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gc-select-item-gap);
    min-width: 0;
}

/* ─── Группа / Лейбл группы ─────────────────────────────────────────────── */

.gc-select-group-label {
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--font-secondary);
    pointer-events: none;
}

/* ─── Разделитель ────────────────────────────────────────────────────────── */

.gc-select-separator {
    flex-shrink: 0;
    height: 1px;
    margin: 0;
    background: var(--ui-border);
}

/* ─── Опции ──────────────────────────────────────────────────────────────── */

.gc-select-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--font-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
    margin: 0;
    /* Без min-height: жёсткий min-height + padding сжимал блок с title + subtitle */

    /* Убираем border-bottom (был в v1) */
    border: none;
}

.gc-select-option:hover {
    background: var(--bg-hover);
}

/* Активная (selected) опция */
.gc-select-option:has(input:checked) {
    background: var(--bg-hover);
}

/* Скрываем нативный radio/checkbox — используем только кастомный UI */
.gc-select-option input[type="radio"],
.gc-select-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/*
 * Индикатор выбранной строки (справа в списке опций; на триггере селекта не дублируется).
 * По умолчанию скрыт; показывается у строки с :checked и/или классом .gc-select-option--selected (см. gc-select.js).
 */
.gc-select-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-mdl);
    line-height: 1;
    color: var(--accent-link);
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    opacity: 0;
}

.gc-select-option--selected .gc-select-option-check,
.gc-select-option:has(input:checked) .gc-select-option-check {
    opacity: 1;
}

/* Текст опции */
.gc-select-option-text {
    flex: 1;
    min-width: 0;
    color: var(--font-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Метка (дисциплина и т.п.) в строке опции — размер из UI Kit, без сжатия */
.gc-select-option > .gc-badge {
    flex-shrink: 0;
    align-self: center;
}

/* Опция с заголовком + подзаголовком */
.gc-select-option-content {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    align-self: stretch;
}

.gc-select-option-title {
    color: var(--font-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.gc-select-option-subtitle {
    color: var(--font-secondary);
    font-size: var(--font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: var(--spacing-4xs);
}

.gc-select-option-description {
    color: var(--font-secondary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-4xs);
}

/* Иконка/аватар в опции (слева) */
.gc-select-option-icon {
    font-size: var(--font-size-md);
    color: var(--font-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ─── Disabled ───────────────────────────────────────────────────────────── */

/* Disabled на контейнере */
.gc-select-disabled,
.gc-select.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Disabled контейнер должен выглядеть как readonly-контрол (без "живого" фона) */
.gc-select-disabled .gc-select-trigger,
.gc-select.disabled .gc-select-trigger {
    background: var(--ui-control-disabled-bg);
    border-color: var(--ui-border);
    cursor: not-allowed;
}

/* Disabled прямо на триггере (зависимый селект) */
.gc-select-trigger.gc-select-disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    background: var(--ui-control-disabled-bg);
    border-color: var(--ui-border);
}

.gc-select-option.disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* ─── Состояние ошибки ───────────────────────────────────────────────────── */

.gc-select.gc-select-error .gc-select-trigger,
.gc-select-trigger.is-invalid {
    border-color: var(--danger-color);
}

.gc-select.gc-select-error .gc-select-trigger.active,
.gc-select-trigger.is-invalid.active {
    box-shadow: 0 0 0 3px rgba(var(--danger-color-rgb), 0.12);
}

/* ─── Размеры ────────────────────────────────────────────────────────────── */

.gc-select.gc-select-sm .gc-select-trigger {
    height: 32px;
    padding: 0 var(--spacing-xs) 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.gc-select.gc-select-lg .gc-select-trigger {
    height: 48px;
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-base);
}

/* ─── Скроллбар ──────────────────────────────────────────────────────────── */

.gc-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.gc-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.gc-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: var(--radius-full);
}

.gc-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--border-tertiary);
}