/* app/static/css/ui/select.css */
/* Кастомные стили для выпадающих списков с уникальными именами */

/* ==========================================================================
   1. БАЗОВЫЕ СТИЛИ SELECT
   ========================================================================== */

/* Контейнер для кастомного селекта */
.app-form-select-wrapper {
    position: relative;
    display: inline-block;
    min-width: 140px;
    width: 100%;
}

/* Основное поле селекта */
.app-form-select {
    width: 100%;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    padding-right: calc(var(--app-spacing-md) * 2 + 16px);
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md);
    background-color: var(--app-color-bg-body);
    color: var(--app-color-text-primary);
    font-size: var(--app-font-size-sm);
    font-family: var(--app-font-family-sans);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: all var(--app-transition-fast) ease;
}

/* Кастомная стрелка для селекта */
.app-form-select-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--app-spacing-md);
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity var(--app-transition-fast) ease;
}

/* Фокус-состояние - подсветка с прозрачной границей */
.app-form-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--app-color-primary) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-color-primary) 20%, transparent);
}

.app-form-select:focus + .app-form-select-wrapper::after {
    opacity: 1;
}

/* Отключенное состояние */
.app-form-select:disabled {
    background-color: var(--app-color-bg-tertiary);
    color: var(--app-color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ==========================================================================
   2. РАЗМЕРЫ SELECT
   ========================================================================== */

/* Маленький селект */
.app-form-select-wrapper-sm {
    min-width: 100px;
}

.app-form-select-wrapper-sm .app-form-select {
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    padding-right: calc(var(--app-spacing-sm) * 2 + 12px);
    font-size: var(--app-font-size-xs);
}

.app-form-select-wrapper-sm::after {
    right: var(--app-spacing-sm);
    width: 10px;
    height: 10px;
}

/* Большой селект */
.app-form-select-wrapper-lg {
    min-width: 180px;
}

.app-form-select-wrapper-lg .app-form-select {
    padding: var(--app-spacing-md) var(--app-spacing-lg);
    padding-right: calc(var(--app-spacing-lg) * 2 + 16px);
    font-size: var(--app-font-size-base);
}

.app-form-select-wrapper-lg::after {
    right: var(--app-spacing-lg);
    width: 14px;
    height: 14px;
}

/* Очень большой селект */
.app-form-select-wrapper-xl {
    min-width: 220px;
}

.app-form-select-wrapper-xl .app-form-select {
    padding: var(--app-spacing-lg) var(--app-spacing-xl);
    padding-right: calc(var(--app-spacing-xl) * 2 + 16px);
    font-size: var(--app-font-size-lg);
}

.app-form-select-wrapper-xl::after {
    right: var(--app-spacing-xl);
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   3. ВАРИАНТЫ СТИЛЕЙ
   ========================================================================== */

/* Селект с иконкой */
.app-form-select-wrapper-icon {
    padding-left: calc(var(--app-spacing-md) * 2 + 16px);
}

.app-form-select-wrapper-icon::before {
    content: "";
    position: absolute;
    left: var(--app-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: 0.6;
}

.app-form-select-wrapper-icon-user::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3C/svg%3E");
}

.app-form-select-wrapper-icon-calendar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
}

.app-form-select-wrapper-icon-globe::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4H2.255a6.57 6.57 0 0 1 .598-1.342 7.468 7.468 0 0 1 1.237.417c.28.109.532.257.757.43zM1.11 5.09A6.59 6.59 0 0 0 2.255 5h1.835a8.535 8.535 0 0 1-1.13 2.696 7.162 7.162 0 0 1-1.85-2.607zM8 10.868a6.592 6.592 0 0 1-2.616-.914 8.619 8.619 0 0 1-1.457-1.682 7.344 7.344 0 0 1-.42-1.28h6.993c-.026.378-.083.76-.185 1.138a8.38 8.38 0 0 1-1.315 2.738zM5.145 12c.672.418 1.43.726 2.25.84V12H5.145zm2.886-1.663c-.376.1-.773.166-1.186.195a8.782 8.782 0 0 1-1.202-.098 7.58 7.58 0 0 1-.935-.171 6.658 6.658 0 0 1-.493-.146 8.292 8.292 0 0 1 1.168-2.207c.279.145.568.274.865.388.297.114.605.213.922.294.317.082.647.137.984.165.337.028.679.028 1.016 0 .336-.028.67-.083.988-.165.319-.082.63-.18.935-.294.306-.114.603-.243.889-.388a8.295 8.295 0 0 1 1.17 2.207 6.657 6.657 0 0 1-.494.146 7.58 7.58 0 0 1-.935.171 8.782 8.782 0 0 1-1.202.098c-.413-.029-.81-.095-1.186-.195z'/%3E%3C/svg%3E");
}

/* Селект без границ */
.app-form-select-wrapper-borderless .app-form-select {
    border: none;
    background-color: transparent;
    padding-left: 0;
    padding-right: calc(var(--app-spacing-md) + 12px);
    border-bottom: 1px solid var(--app-color-border);
    border-radius: 0;
}

.app-form-select-wrapper-borderless::after {
    right: 0;
}

.app-form-select-wrapper-borderless .app-form-select:focus {
    box-shadow: none;
    border-bottom-color: color-mix(in srgb, var(--app-color-primary) 50%, transparent);
}

/* Валидное состояние */
.app-form-select.app-form-valid {
    border-color: color-mix(in srgb, var(--app-color-success) 20%, transparent);
}

.app-form-select.app-form-valid:focus {
    border-color: color-mix(in srgb, var(--app-color-success) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-color-success) 20%, transparent);
}

/* Невалидное состояние */
.app-form-select.app-form-invalid {
    border-color: color-mix(in srgb, var(--app-color-danger) 20%, transparent);
}

.app-form-select.app-form-invalid:focus {
    border-color: color-mix(in srgb, var(--app-color-danger) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-color-danger) 20%, transparent);
}

/* Селект с ошибкой - альтернативный стиль */
.app-form-select-wrapper-error .app-form-select {
    border-color: color-mix(in srgb, var(--app-color-danger) 20%, transparent);
}

.app-form-select-wrapper-error .app-form-select:focus {
    border-color: color-mix(in srgb, var(--app-color-danger) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-color-danger) 20%, transparent);
}

.app-form-select-wrapper-error::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3E%3Cpath fill-rule='evenodd' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Селект с успехом - альтернативный стиль */
.app-form-select-wrapper-success .app-form-select {
    border-color: color-mix(in srgb, var(--app-color-success) 20%, transparent);
}

.app-form-select-wrapper-success .app-form-select:focus {
    border-color: color-mix(in srgb, var(--app-color-success) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-color-success) 20%, transparent);
}

.app-form-select-wrapper-success::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2328a745'%3E%3Cpath fill-rule='evenodd' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. MULTISELECT (МНОГОКРАТНЫЙ ВЫБОР)
   ========================================================================== */

.app-form-multiselect-wrapper {
    position: relative;
    min-width: 160px;
}

.app-form-multiselect {
    width: 100%;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md);
    background-color: var(--app-color-bg-body);
    color: var(--app-color-text-primary);
    font-size: var(--app-font-size-sm);
    font-family: var(--app-font-family-sans);
    cursor: pointer;
    transition: all var(--app-transition-fast) ease;
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-spacing-xs);
}

.app-form-multiselect:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--app-color-primary) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-color-primary) 20%, transparent);
}

.app-form-multiselect-placeholder {
    color: var(--app-color-text-muted);
    font-style: italic;
}

.app-form-multiselect-tag {
    background-color: color-mix(in srgb, var(--app-color-primary) 15%, transparent);
    color: var(--app-color-primary);
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    border-radius: var(--app-radius-sm);
    font-size: var(--app-font-size-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--app-spacing-xs);
}

.app-form-multiselect-tag-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: var(--app-font-size-xs);
    opacity: 0.7;
}

.app-form-multiselect-tag-remove:hover {
    opacity: 1;
}

/* ==========================================================================
   5. SEARCHABLE SELECT (С ПОИСКОМ)
   ========================================================================== */

.app-form-searchable-select {
    position: relative;
}

.app-form-searchable-search {
    width: 100%;
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md) var(--app-radius-md) 0 0;
    background-color: var(--app-color-bg-body);
    color: var(--app-color-text-primary);
    font-size: var(--app-font-size-sm);
    transition: all var(--app-transition-fast) ease;
}

.app-form-searchable-search:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--app-color-primary) 50%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-color-primary) 20%, transparent);
}

.app-form-searchable-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--app-color-bg-body);
    border: 1px solid var(--app-color-border);
    border-top: none;
    border-radius: 0 0 var(--app-radius-md) var(--app-radius-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--app-z-dropdown);
    box-shadow: var(--app-shadow-md);
}

.app-form-searchable-option {
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    cursor: pointer;
    transition: background-color var(--app-transition-fast) ease;
    color: var(--app-color-text-primary);
}

.app-form-searchable-option:hover {
    background-color: var(--app-color-bg-tertiary);
}

.app-form-searchable-option.selected {
    background-color: color-mix(in srgb, var(--app-color-primary) 15%, transparent);
    color: var(--app-color-primary);
    font-weight: 500;
}

/* ==========================================================================
   6. ТЕМНАЯ ТЕМА
   ========================================================================== */

[data-theme="dark"] .app-form-select {
    background-color: var(--app-color-bg-secondary);
    border-color: var(--app-color-border);
    color: var(--app-color-text-primary);
}

[data-theme="dark"] .app-form-select-wrapper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3E%3Cpath fill-rule='evenodd' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

[data-theme="dark"] .app-form-select-wrapper-icon::before {
    filter: brightness(0.8);
}

[data-theme="dark"] .app-form-select-wrapper-borderless .app-form-select {
    border-bottom-color: var(--app-color-border);
}

[data-theme="dark"] .app-form-multiselect {
    background-color: var(--app-color-bg-secondary);
    border-color: var(--app-color-border);
}

[data-theme="dark"] .app-form-searchable-search,
[data-theme="dark"] .app-form-searchable-dropdown {
    background-color: var(--app-color-bg-secondary);
    border-color: var(--app-color-border);
}

/* ==========================================================================
   7. АДАПТИВНОСТЬ
   ========================================================================== */

@media (max-width: 768px) {
    .app-form-select-wrapper,
    .app-form-select-wrapper-sm,
    .app-form-select-wrapper-lg,
    .app-form-select-wrapper-xl {
        min-width: 100%;
    }

    .app-form-multiselect-wrapper {
        min-width: 100%;
    }

    .app-form-multiselect {
        min-height: 38px;
    }
}

@media (max-width: 576px) {
    .app-form-select {
        padding: var(--app-spacing-xs) var(--app-spacing-sm);
        padding-right: calc(var(--app-spacing-sm) * 2 + 12px);
        font-size: var(--app-font-size-xs);
    }

    .app-form-select-wrapper::after {
        right: var(--app-spacing-sm);
        width: 10px;
        height: 10px;
    }

    .app-form-multiselect {
        padding: var(--app-spacing-xs) var(--app-spacing-sm);
        font-size: var(--app-font-size-xs);
    }
}

/* ==========================================================================
   8. ДОПОЛНИТЕЛЬНЫЕ КОМПОНЕНТЫ
   ========================================================================== */

/* Селект с лейблом внутри */
.app-form-select-with-label {
    position: relative;
}

.app-form-select-label {
    position: absolute;
    top: -8px;
    left: var(--app-spacing-sm);
    background-color: var(--app-color-bg-body);
    padding: 0 var(--app-spacing-xs);
    font-size: var(--app-font-size-xs);
    color: var(--app-color-text-secondary);
    z-index: 1;
}

[data-theme="dark"] .app-form-select-label {
    background-color: var(--app-color-bg-secondary);
}

/* Селект с контекстным меню */
.app-form-select-context-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--app-color-bg-body);
    border: 1px solid var(--app-color-border);
    border-radius: 0 0 var(--app-radius-md) var(--app-radius-md);
    border-top: none;
    z-index: var(--app-z-dropdown);
    display: none;
    animation: app-form-select-dropdown var(--app-transition-normal) ease-out;
}

@keyframes app-form-select-dropdown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-form-select-wrapper:focus-within .app-form-select-context-menu {
    display: block;
}

.app-form-select-context-item {
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    cursor: pointer;
    transition: background-color var(--app-transition-fast) ease;
    color: var(--app-color-text-primary);
}

.app-form-select-context-item:hover {
    background-color: var(--app-color-bg-tertiary);
}

.app-form-select-context-item.selected {
    background-color: color-mix(in srgb, var(--app-color-primary) 15%, transparent);
    color: var(--app-color-primary);
    font-weight: 500;
}

/* Группировка в селекте */
.app-form-select-optgroup {
    font-weight: 600;
    color: var(--app-color-text-secondary);
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    background-color: var(--app-color-bg-tertiary);
    font-size: var(--app-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-form-select-option {
    padding: var(--app-spacing-sm) var(--app-spacing-md);
    color: var(--app-color-text-primary);
}

.app-form-select-option:disabled {
    color: var(--app-color-text-muted);
    cursor: not-allowed;
}

/* Индикатор загрузки для селекта */
.app-form-select-loading .app-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--app-spacing-md) center;
    background-size: 16px;
    padding-right: calc(var(--app-spacing-md) * 2 + 20px);
}

.app-form-select-loading::after {
    opacity: 0;
}

/* Компактный multiselect */
.app-form-multiselect-compact .app-form-multiselect-tag {
    font-size: var(--app-font-size-xs);
    padding: 2px 6px;
}

.app-form-multiselect-compact .app-form-multiselect {
    min-height: 36px;
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
}

/* Селект с описанием */
.app-form-select-with-description {
    margin-bottom: var(--app-spacing-sm);
}

.app-form-select-description {
    font-size: var(--app-font-size-xs);
    color: var(--app-color-text-muted);
    margin-top: var(--app-spacing-xs);
}