/* combobox.css — searchable dropdown с двуязычным поиском, multi-select.
 *
 * Два режима:
 *   - Display (default): видны chips/placeholder, скрыт input + panel.
 *   - Edit (.is-editing): скрыт chips, видны input + panel с галочками.
 *
 * Подключение: <link rel="stylesheet" href="/shared/css/combobox.css?v={{ salt }}">
 * в _base_core.html.tera (loaded для всех страниц).
 */

.ds-combobox {
    position: relative;
    min-width: 280px;
    max-width: 360px;
}

.ds-combobox__field {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: var(--ds-control-height, 38px);
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.12s;
}
.ds-combobox.is-editing .ds-combobox__field {
    cursor: text;
    border-color: var(--ds-info);
}

/* Display: chips + placeholder в одну строку. */
.ds-combobox__chips {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
    align-items: center;
}
.ds-combobox.is-editing .ds-combobox__chips { display: none; }
.ds-combobox.is-expanded .ds-combobox__chips { flex-wrap: wrap; overflow: visible; }

.ds-combobox__placeholder {
    color: var(--muted);
    font-size: 14px;
    padding: 4px 6px;
}

.ds-combobox__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    background: color-mix(in srgb, var(--ds-info) 22%, var(--bg) 78%);
    border-radius: var(--ds-radius, 2px);
    font-size: 12px;
    white-space: nowrap;
    color: var(--fg);
}
.ds-combobox__chip-x {
    cursor: pointer;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ds-radius, 2px);
    opacity: 0.6;
    font-size: 14px; line-height: 1;
}
.ds-combobox__chip-x:hover { opacity: 1; background: rgba(0,0,0,0.1); }

.ds-combobox__more {
    padding: 2px 8px;
    background: color-mix(in srgb, var(--ds-info) 12%, var(--line) 88%);
    border-radius: var(--ds-radius, 2px);
    font-size: 12px;
    cursor: pointer;
    color: var(--fg);
    white-space: nowrap;
}
.ds-combobox__more:hover {
    background: color-mix(in srgb, var(--ds-info) 25%, var(--line) 75%);
}

/* Input — видим только в edit mode. Полная ширина field'а. */
.ds-combobox__input {
    display: none;
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: var(--fg);
    padding: 4px 4px;
}
.ds-combobox.is-editing .ds-combobox__input { display: block; }
.ds-combobox__input::placeholder { color: var(--muted); }

/* Panel — видим только в edit mode. */
.ds-combobox__panel { display: none; }
.ds-combobox.is-editing .ds-combobox__panel {
    display: block;
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ds-combobox__option {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    color: var(--fg);
    border-left: 3px solid transparent;
    transition: background 0.08s, border-left-color 0.08s;
}
.ds-combobox__option:hover,
.ds-combobox__option.is-highlighted {
    background: color-mix(in srgb, var(--ds-info) 10%, var(--bg) 90%);
}
.ds-combobox__option.is-selected {
    background: color-mix(in srgb, var(--ds-info) 14%, var(--bg) 86%);
    border-left-color: var(--ds-info);
    font-weight: 500;
}
.ds-combobox__option.is-selected:hover,
.ds-combobox__option.is-selected.is-highlighted {
    background: color-mix(in srgb, var(--ds-info) 24%, var(--bg) 76%);
}

.ds-combobox__empty {
    padding: 12px;
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
}

/* Разделитель между selected (сверху) и rest (снизу) в edit-режиме. */
.ds-combobox__sep {
    height: 1px;
    background: color-mix(in srgb, var(--ds-info) 30%, var(--line) 70%);
    margin: 4px 8px;
}