/* ==========================================================================
   Menu "Partite" nelle barre filtri (v89, js/selezione-gare.js)
   ========================================================================== */
.sg-menu { position: relative; display: inline-block; vertical-align: top; }
.sg-menu > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 800;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.sg-menu > summary::-webkit-details-marker { display: none; }
.sg-menu > summary::after { content: "▾"; font-size: 10px; }
.sg-menu[open] > summary::after { content: "▴"; }
.sg-menu.sg-attivo > summary {
  color: var(--color-brand-ink);
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
}
.sg-lista {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 4px);
  min-width: 240px; max-width: 86vw; max-height: 320px; overflow-y: auto;
  padding: 8px 10px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.sg-azioni { display: flex; gap: 6px; margin-bottom: 6px; }
.sg-btn {
  flex: 1; padding: 5px 8px; font-size: 12px; font-weight: 800;
  color: var(--color-text-primary); background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
.sg-riga {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px; font-weight: 600;
  color: var(--color-text-primary); white-space: nowrap;
  touch-action: manipulation;
}
.sg-riga input { width: 17px; height: 17px; accent-color: var(--color-brand); flex-shrink: 0; }

/* Telefono: il menu occupa tutta la riga, così l'elenco non esce dallo
   schermo quando il bottone finisce a destra della barra filtri. */
@media (max-width: 560px) {
  .sg-menu { display: block; width: 100%; margin-top: 4px; }
  .sg-lista { right: 0; min-width: 0; max-width: none; }
}