/* ═══════════════════════════════════════════════════════════════════════════
   SELECT CERCABILE — NON MODIFICARE
   Fa parte di uicore/core: al prossimo riallineamento questo file viene
   sovrascritto.
   ═══════════════════════════════════════════════════════════════════════════

   Sostituisce il `<select>` nativo, che nel kit non si usa mai.

   Il motivo è tecnico e non aggirabile: la tendina di un `<select>` la disegna
   il sistema operativo, non il CSS. Resta grigio-blu di sistema in tema chiaro
   come in scuro, non prende i raggi né il vetro, e non può contenere né icone
   né testo secondario. Sulle schermate degli screenshot è l'unico elemento che
   si vede subito "fuori posto".

   Sotto i 768px non si apre una tendina: si apre il pannello dal basso. Una
   lista sospesa vicino al bordo inferiore di un telefono è scomoda da
   raggiungere e finisce sotto la tastiera appena si scrive.
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-select {
    position: relative;
    display: block;
    width: 100%;
}

/* ── Comando ──────────────────────────────────────────────────────────────── */
.ui-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-panel);
    color: var(--ui-ink);
    font-size: var(--ui-text-md);
    text-align: left;
    transition:
        border-color var(--ui-duration-fast) var(--ui-ease),
        box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.ui-select-trigger:focus-visible,
.ui-select.is-open .ui-select-trigger {
    outline: none;
    border-color: color-mix(in oklab, var(--ui-brand) 55%, transparent);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.ui-select-trigger:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ui-select-icon {
    flex-shrink: 0;
    width: 22px;
    display: grid;
    place-items: center;
    color: var(--ui-brand);
}
.ui-select-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--ui-weight-medium);
}
.ui-select-label.is-placeholder {
    color: var(--ui-ink-muted);
    font-weight: var(--ui-weight-normal);
}
.ui-select-hint {
    flex-shrink: 0;
    font-size: var(--ui-text-xs);
    color: var(--ui-ink-muted);
}
.ui-select-caret {
    flex-shrink: 0;
    font-size: var(--ui-text-xs);
    opacity: .5;
    transition: transform var(--ui-duration-base) var(--ui-ease);
}
.ui-select.is-open .ui-select-caret { transform: rotate(180deg); }

/* ── Tendina (da tablet in su) ────────────────────────────────────────────── */
.ui-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: var(--ui-z-sticky);
    max-height: 340px;
    display: none;
    flex-direction: column;
    border-radius: var(--ui-radius-md);
    overflow: hidden;
}
.ui-select.is-open .ui-select-panel { display: flex; }
/* Quando sotto non c'è spazio si apre verso l'alto: una lista tagliata dal
   bordo della finestra costringe a scorrere la pagina per leggerla. */
.ui-select.is-up .ui-select-panel {
    top: auto;
    bottom: calc(100% + 6px);
}

.ui-select-search {
    flex-shrink: 0;
    padding: var(--ui-space-2);
    border-bottom: 1px solid var(--bs-border-color);
}
.ui-select-search input {
    width: 100%;
    height: 34px;
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ui-radius-xs);
    background: var(--ui-panel);
    color: inherit;
    font-size: var(--ui-text-sm);
}
.ui-select-search input:focus {
    outline: none;
    border-color: color-mix(in oklab, var(--ui-brand) 55%, transparent);
}

.ui-select-list {
    overflow-y: auto;
    padding: var(--ui-space-2);
}

.ui-select-group {
    font-size: var(--ui-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--ui-tracking-wide);
    font-weight: var(--ui-weight-bold);
    opacity: .5;
    padding: var(--ui-space-3) var(--ui-space-2) var(--ui-space-1);
}

.ui-select-item {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    width: 100%;
    min-height: 40px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: none;
    border-radius: var(--ui-radius-xs);
    background: transparent;
    color: inherit;
    text-align: left;
    font-size: var(--ui-text-sm);
}
/* `is-focus` è la voce raggiunta con le frecce: deve distinguersi da quella
   selezionata, altrimenti navigando da tastiera non si capisce dove si è. */
.ui-select-item.is-focus {
    background: color-mix(in oklab, var(--ui-ink) 8%, transparent);
}
.ui-select-item.is-selected {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: var(--ui-weight-semibold);
}
.ui-select-item[disabled] { opacity: .4; }
.ui-select-item-icon {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    color: var(--ui-brand);
}
.ui-select-item.is-selected .ui-select-item-icon { color: inherit; }
.ui-select-item-label { flex: 1; min-width: 0; }
.ui-select-item-sub {
    display: block;
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-weight-normal);
    opacity: .65;
}
.ui-select-item-hint {
    flex-shrink: 0;
    font-size: var(--ui-text-2xs);
    color: var(--ui-ink-muted);
}
.ui-select-item.is-selected .ui-select-item-hint { color: inherit; opacity: .8; }

.ui-select-none {
    padding: var(--ui-space-5) var(--ui-space-3);
    text-align: center;
    font-size: var(--ui-text-sm);
    color: var(--ui-ink-muted);
}

/* Dentro il pannello dal basso la tendina non serve: la lista occupa tutto
   lo spazio disponibile. */
.ui-sheet .ui-select-list { max-height: none; padding: 0; }
.ui-sheet .ui-select-item { min-height: var(--ui-touch-target); }

/* Il campo di ricerca scorre insieme alla lista.

   Era agganciato in alto, ma per restare leggibile mentre le voci gli
   passano sotto serviva un fondo — e un fondo semitrasparente sopra il vetro
   del pannello fa due strati: si vedeva una banda netta larga quanto il
   pannello, chiara col tema chiaro e scura con quello scuro. Renderla
   invisibile avrebbe richiesto un fondo pieno, che sul vetro si nota
   ancora di più.

   Il prezzo è che su un elenco lungo, scorrendo, il campo esce di vista.
   Preferibile a un bordo che non dovrebbe esserci. */
.ui-select-search-sheet {
    padding: 0 0 var(--ui-space-3);
    border-bottom: none;
    background: transparent;
}
.ui-select-search-sheet input { height: var(--ui-control-height); }