/* La scelta a tendina (components/_choice_menu) come il Dropdown di Figma: il bottone è un
   Input (bianco, bordo System/Borders, raggio 8, scelta Inter 600 e la freccia blu), aperto il
   bordo diventa blu; la tendina è una card bianca con bordo chiaro, una riga per voce separata
   da una linea, la voce scelta in blu grassetto. */

.choice-menu {
  position: relative;
}

.choice-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0 1rem;
  border: 1px solid var(--app-border-strong);
  border-radius: var(--radius);
  font: inherit;
  color: var(--app-ink);
  cursor: pointer;
  background: var(--app-surface);
}

.choice-menu--open .choice-menu__button {
  border-color: var(--app-accent);
}

/* Come il bottone del calendario accanto: il bordo blu sotto il mouse. */
.with-mouse .choice-menu__button:hover {
  border-color: var(--app-accent);
}

.choice-menu__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-placeholder);
}

.choice-menu__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}

.choice-menu__chevron {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--app-accent);
  transition: transform 0.15s ease;
}

.choice-menu--open .choice-menu__chevron {
  transform: rotate(180deg);
}

.choice-menu__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 100%;
  width: max-content;
  max-width: min(24rem, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  background: var(--app-surface);
}

.choice-menu__panel[hidden] {
  display: none;
}

.choice-menu__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--touch);
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* La voce che la ricerca della tendina toglie. */
.choice-menu__option[hidden] {
  display: none;
}

/* Il campo «cerca» in testa alla tendina, che resta fermo mentre le voci scorrono. */
.choice-menu__search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
}

.choice-menu__option + .choice-menu__option {
  border-top: 1px solid var(--app-border);
}

/* Il passaggio del mouse come in tutta l'app (application.css): la voce grigia diventa blu su azzurro
   chiaro; solo dove c'è un mouse. */
.with-mouse .choice-menu__option:hover {
  background: var(--app-accent-faint);
}

.with-mouse .choice-menu__option:hover .choice-menu__option-label {
  color: var(--app-accent);
}

.choice-menu__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-menu__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
}

.choice-menu__option-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--app-muted);
}

.choice-menu__hint {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-placeholder);
}

/* In Figma la voce scelta si riconosce solo dal blu in grassetto: la spunta resta per chi legge
   con lo screen reader, non si vede. */
.choice-menu__check {
  display: none;
}

.choice-menu__option:has(:checked) .choice-menu__option-label {
  font-weight: 600;
  color: var(--app-accent);
}

.choice-menu__option:has(:focus-visible) {
  outline: 2px solid var(--app-accent);
  outline-offset: -2px;
}