/* Le schede (components/_tabs) come il «Segmented» del designer (21/10/2026): contenitore bianco
   bordo Gray-200 raggio 8 e padding 4, voci a raggio 6 in 600 14, la scelta piena blu. Le voci
   sono alte 40 (Figma 36) perché il contenitore arrivi a 48 e il dito non manchi la voce. */
.tabs {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.25rem;
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  background: var(--app-surface);
}

.tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--app-muted);
  transition: background-color 0.15s, color 0.15s;
}

.tabs__tab:hover {
  color: var(--app-accent);
  background: var(--app-accent-faint);
}

.tabs__tab--active,
.tabs__tab--active:hover {
  color: var(--app-on-color);
  background: var(--app-accent);
}

/* Il contatore dentro la scheda attiva: bianco su blu, altrimenti il numero sparisce
   (il colore del testo della scheda attiva è bianco come lo sfondo del contatore). */
.tabs__tab--active .badge {
  border-color: var(--app-surface);
  color: var(--app-accent);
  background: var(--app-surface);
}

/* Tablet in verticale (23/10/2026: le sette schede del cliente uscivano di 40 px dal bordo): meno
   aria ai lati della scritta, l'altezza da toccare resta. */
@media (max-width: 900px) {
  .tabs__tab {
    padding: 0 0.625rem;
  }
}