/* ============================================================
   Componenti CSS BancoAlimentare — stili di tutti i componenti
   Ba (classi .ba-*). Popolato dai task successivi.
   ============================================================ */

/* --- Animazioni condivise (rotazione spinner, pulse skeleton) ---
   Nota: il rallentamento/blocco per prefers-reduced-motion è già
   garantito globalmente dal blocco in base.css, non va ripetuto qui. */
@keyframes ba-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ba-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* --- BaButton: bottone testuale nelle quattro varianti --- */
.ba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ba-sp-2);
  min-height: var(--ba-target-min);
  padding: 0 var(--ba-sp-4);
  border: none;
  border-radius: var(--ba-raggio-ctrl);
  font-family: inherit;
  font-size: var(--ba-testo);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition: background var(--ba-durata-1) var(--ba-easing);
}

.ba-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Variante primaria: azione principale della schermata */
.ba-btn--primario {
  background: var(--ba-primary-600);
  color: var(--ba-bianco);
}

.ba-btn--primario:hover:not(:disabled) {
  background: var(--ba-primary-700);
}

.ba-btn--primario:active:not(:disabled) {
  background: var(--ba-primary-800);
}

/* Variante secondaria: azione di default, bordo senza sfondo pieno */
.ba-btn--secondario {
  border: 1px solid var(--ba-bordo);
  color: var(--ba-ink);
  background: var(--ba-bianco);
}

.ba-btn--secondario:hover:not(:disabled) {
  background: var(--ba-surface);
}

.ba-btn--secondario:active:not(:disabled) {
  background: var(--ba-surface-2);
}

/* Variante pericolo: azione distruttiva/irreversibile */
.ba-btn--pericolo {
  background: var(--ba-errore);
  color: var(--ba-bianco);
}

.ba-btn--pericolo:hover:not(:disabled) {
  filter: brightness(0.9);
}

.ba-btn--pericolo:active:not(:disabled) {
  filter: brightness(0.8);
}

/* Variante testo: basso rilievo visivo, solo testo colorato */
.ba-btn--testo {
  color: var(--ba-primary-700);
}

.ba-btn--testo:hover:not(:disabled) {
  background: var(--ba-primary-50);
}

.ba-btn--testo:active:not(:disabled) {
  background: var(--ba-primary-100);
}

/* Spinner inline dello stato "in caricamento": cerchio ruotante nel colore
   del testo corrente, così resta leggibile su sfondi sia chiari che scuri. */
.ba-btn__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ba-spin 0.6s linear infinite;
}

.ba-btn__testo:empty {
  display: none;
}

/* --- BaIconButton: bottone quadrato 44×44 con sola icona --- */
.ba-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ba-target-min);
  height: var(--ba-target-min);
  border: none;
  border-radius: var(--ba-raggio-ctrl);
  background: transparent;
  color: var(--ba-ink);
  cursor: pointer;
  transition: background var(--ba-durata-1) var(--ba-easing);
}

.ba-icon-btn:hover:not(:disabled) {
  background: var(--ba-surface-2);
}

.ba-icon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- BaProgress: indicatore di caricamento (spinner) --- */
.ba-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.ba-progress__spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--ba-surface-2);
  border-top-color: var(--ba-primary-600);
  border-radius: 50%;
  animation: ba-spin 0.7s linear infinite;
}

/* --- BaProgress determinata: barra lineare con percentuale nota, al posto
   dello spinner. Occupa tutta la larghezza disponibile del contenitore. --- */
.ba-progress--determinata {
  width: 100%;
  height: auto;
  justify-content: stretch;
}

.ba-progress__barra {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--ba-surface-2);
  overflow: hidden;
}

.ba-progress__riempimento {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ba-primary-600);
  transition: width var(--ba-durata-2) var(--ba-easing);
}

/* --- BaSkeleton: blocco segnaposto animato per contenuti in caricamento --- */
.ba-skeleton {
  display: block;
  border-radius: var(--ba-raggio-ctrl);
  background: var(--ba-surface-2);
  animation: ba-skeleton-pulse 1.5s ease-in-out infinite;
}

/* --- Campo form (BaTextField, BaSelect): etichetta sopra + controllo +
   riga di aiuto/errore sotto, collegata con aria-describedby --- */
.ba-campo {
  display: flex;
  flex-direction: column;
  gap: var(--ba-sp-1);
}

.ba-campo__etichetta {
  font-size: var(--ba-testo-sm);
  font-weight: 500;
  color: var(--ba-ink);
}

/* Asterisco dei campi obbligatori: stesso colore semantico dell'errore */
.ba-campo__obbligatorio {
  color: var(--ba-errore);
  margin-left: 2px;
}

.ba-campo__controllo,
.ba-select {
  min-height: var(--ba-target-min);
  width: 100%;
  padding: 0 var(--ba-sp-3);
  border: 1px solid var(--ba-bordo);
  border-radius: var(--ba-raggio-ctrl);
  background: var(--ba-bianco);
  color: var(--ba-ink);
  font-family: inherit;
  font-size: var(--ba-testo);
  transition: border-color var(--ba-durata-1) var(--ba-easing), box-shadow var(--ba-durata-1) var(--ba-easing);
}

.ba-campo__controllo:focus-visible,
.ba-select:focus-visible {
  outline: none;
  border-color: var(--ba-primary-500);
  box-shadow: 0 0 0 3px oklch(0.66 0.18 45 / 0.25);
}

.ba-campo__controllo:disabled,
.ba-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--ba-surface);
}

/* Stato di errore: bordo e testo del messaggio nel colore semantico errore */
.ba-campo__controllo--errore,
.ba-select--errore {
  border-color: var(--ba-errore);
}

.ba-campo__messaggio {
  font-size: var(--ba-testo-sm);
  color: var(--ba-ink-2);
}

.ba-campo__messaggio--errore {
  color: var(--ba-errore);
}

/* Wrapper input + bottone "×" opzionale (BaTextField Cancellabile). */
.ba-campo__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Lascia spazio al bottone "×" per non sovrapporlo al testo. */
.ba-campo__controllo--cancellabile {
  padding-right: calc(var(--ba-target-min));
}

/* Bottone "×" interno al campo: target 44px, centrato a destra. */
.ba-campo__cancella {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: var(--ba-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ba-ink-2);
  border-radius: var(--ba-raggio-ctrl);
}

.ba-campo__cancella:hover {
  color: var(--ba-ink);
}

/* --- BaSelect: <select> nativo con freccia custom (SVG inline, chevron in basso) --- */
.ba-select-contenitore {
  position: relative;
}

.ba-select {
  appearance: none;
  padding-right: var(--ba-sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='20' height='20' fill='%23575043'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ba-sp-3) center;
  background-size: 1.25rem;
  cursor: pointer;
  /* Con opzioni lunghe (es. periodo con date), il valore selezionato si tronca
     con ellissi invece di essere tagliato a filo bordo. */
  text-overflow: ellipsis;
}

/* --- BaAutocomplete: campo di testo (stile BaTextField) con pannello di
   suggerimenti a comparsa, posizionato come il pannello di BaMenu (wrapper
   relative, pannello absolute con --ba-z-dropdown). --- */
.ba-autocomplete-contenitore {
  position: relative;
}

.ba-autocomplete__pannello {
  position: absolute;
  top: calc(100% + var(--ba-sp-1));
  left: 0;
  right: 0;
  z-index: var(--ba-z-dropdown);
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--ba-sp-2) 0;
  list-style: none;
  background: var(--ba-bianco);
  border: 1px solid var(--ba-bordo);
  border-radius: var(--ba-raggio-superficie);
  box-shadow: var(--ba-ombra-2);
}

.ba-autocomplete__opzione {
  display: flex;
  align-items: center;
  min-height: var(--ba-target-min);
  padding: 0 var(--ba-sp-4);
  color: var(--ba-ink);
  cursor: pointer;
}

.ba-autocomplete__opzione:hover,
.ba-autocomplete__opzione--evidenziata {
  background: var(--ba-surface-2);
}

.ba-autocomplete__vuoto {
  padding: var(--ba-sp-2) var(--ba-sp-4);
  color: var(--ba-ink-2);
}

/* --- BaCheckbox: casella nativa con etichetta cliccabile a destra --- */
.ba-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ba-sp-2);
  min-height: var(--ba-target-min);
}

.ba-checkbox__controllo {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  accent-color: var(--ba-primary-600);
  cursor: pointer;
}

.ba-checkbox__controllo:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ba-checkbox__etichetta {
  color: var(--ba-ink);
  cursor: pointer;
}

/* --- BaAlert: messaggio di stato inline con icona automatica per severità.
   Bordo SEMPRE 1px pieno su tutti i lati: mai un side-stripe colorato. --- */
.ba-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ba-sp-3);
  padding: var(--ba-sp-4);
  border: 1px solid;
  border-radius: var(--ba-raggio-ctrl);
}

.ba-alert__contenuto {
  flex: 1;
}

.ba-alert--info {
  background: var(--ba-info-bg);
  color: var(--ba-info);
  border-color: var(--ba-info);
}

.ba-alert--successo {
  background: var(--ba-successo-bg);
  color: var(--ba-successo);
  border-color: var(--ba-successo);
}

.ba-alert--avviso {
  background: var(--ba-avviso-bg);
  color: var(--ba-avviso);
  border-color: var(--ba-avviso);
}

.ba-alert--errore {
  background: var(--ba-errore-bg);
  color: var(--ba-errore);
  border-color: var(--ba-errore);
}

/* --- BaCard: superficie con header/corpo/footer opzionali. Non annidare mai
   una card dentro un'altra (divieto del design system). --- */
.ba-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--ba-raggio-superficie);
  box-shadow: var(--ba-ombra-1);
  background: var(--ba-bianco);
}

.ba-card__header {
  padding: var(--ba-sp-6) var(--ba-sp-6) var(--ba-sp-4);
}

.ba-card__titolo {
  font-size: var(--ba-titolo-3);
  color: var(--ba-ink);
}

.ba-card__corpo {
  padding: 0 var(--ba-sp-6) var(--ba-sp-6);
  color: var(--ba-ink);
}

/* Se il corpo è il primo elemento (nessun header), recupera il padding superiore. */
.ba-card__corpo:first-child {
  padding-top: var(--ba-sp-6);
}

.ba-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ba-sp-2);
  padding: 0 var(--ba-sp-6) var(--ba-sp-6);
}

/* --- BaChip: etichetta compatta con pallino colorato opzionale e "X" di
   rimozione opzionale. Il testo resta sempre su sfondo neutro. --- */
.ba-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ba-sp-2);
  min-height: 1.75rem;
  padding: 0 var(--ba-sp-3);
  border-radius: 999px;
  background: var(--ba-surface-2);
  color: var(--ba-ink);
  font-size: var(--ba-testo-sm);
}

.ba-chip__pallino {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
}

.ba-chip__testo {
  white-space: nowrap;
}

/* Variante "piena": pillola con sfondo colorato pieno e testo bianco, per far
   risaltare a colpo d'occhio uno stato importante (es. preferenza obbligatoria).
   Lo sfondo è passato inline dal componente tramite il parametro Colore; qui si
   impostano testo bianco e peso maggiore. Usare solo con colori scuri a
   contrasto verificato con il bianco (es. --ba-errore = 6.62:1). */
.ba-chip--pieno {
  color: var(--ba-bianco);
  font-weight: 600;
}

/* Wrapper cliccabile di un BaChip (es. il "Sì" dei collegamenti in Gestione
   Preferenze): azzera lo stile nativo del <button> perché resti visibile solo la
   pillola. Il focus da tastiera usa l'anello globale :focus-visible (base.css). */
.ba-chip-azione {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  border-radius: 999px;
  cursor: pointer;
}

/* Bottone "X" compatto: resta visivamente 20×20 (1.25rem) per non snaturare
   l'ingombro della pillola inline, ma l'area cliccabile/toccabile va estesa a
   ≥44×44 per l'accessibilità touch. Tecnica dell'hit-area estesa: il bottone
   diventa "position: relative" e uno pseudo-elemento ::before invisibile,
   posizionato con "inset" negativo (12px per lato: 20px + 12px*2 = 44px),
   copre l'area attorno al bottone e riceve i click al suo posto, senza
   occupare spazio nel flusso del layout (è "position: absolute").
   Nota: se due chip fossero molto vicini le hit-area estese potrebbero
   sovrapporsi leggermente; è un compromesso accettato per rispettare
   l'ingombro visivo compatto della pillola. */
.ba-chip__rimuovi {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ba-ink-2);
  cursor: pointer;
  transition: background var(--ba-durata-1) var(--ba-easing);
}

.ba-chip__rimuovi::before {
  content: "";
  position: absolute;
  inset: -12px;
}

.ba-chip__rimuovi:hover {
  background: var(--ba-surface);
  color: var(--ba-ink);
}

/* Nella pillola piena lo sfondo è scuro: la «X» eredita il bianco del testo e al passaggio schiarisce senza cambiare colore. */
.ba-chip--pieno .ba-chip__rimuovi {
  color: inherit;
}

.ba-chip--pieno .ba-chip__rimuovi:hover {
  background: oklch(1 0 0 / 0.25);
  color: inherit;
}

/* --- BaExpansion: <details>/<summary> nativi stilizzati, con chevron ruotante. --- */
.ba-expansion {
  border: 1px solid var(--ba-bordo);
  border-radius: var(--ba-raggio-ctrl);
  background: var(--ba-bianco);
}

.ba-expansion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ba-sp-3);
  min-height: var(--ba-target-min);
  padding: 0 var(--ba-sp-4);
  cursor: pointer;
  font-weight: 500;
  color: var(--ba-ink);
  list-style: none;
}

/* Rimuove il triangolo nativo del summary (WebKit/Blink e resto). */
.ba-expansion__summary::-webkit-details-marker {
  display: none;
}

.ba-expansion__chevron {
  display: inline-flex;
  transition: transform var(--ba-durata-1) var(--ba-easing);
}

.ba-expansion[open] > .ba-expansion__summary .ba-expansion__chevron {
  transform: rotate(180deg);
}

.ba-expansion__corpo {
  padding: 0 var(--ba-sp-4) var(--ba-sp-4);
  color: var(--ba-ink);
}

/* --- BaMenu: popover posizionato con solo CSS (wrapper relative + pannello
   absolute), backdrop trasparente per il click fuori. --- */
.ba-menu {
  position: relative;
  display: inline-block;
}

.ba-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ba-z-dropdown) - 1);
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}

.ba-menu__pannello {
  position: absolute;
  top: calc(100% + var(--ba-sp-1));
  /* Allineato al bordo destro del trigger: l'unico utilizzo attuale (menu utente
     nell'appbar) ha il trigger vicino al bordo destro della finestra, dove un
     pannello aperto verso destra (left:0) uscirebbe dal viewport. */
  right: 0;
  z-index: var(--ba-z-dropdown);
  min-width: 200px;
  margin: 0;
  padding: var(--ba-sp-2) 0;
  list-style: none;
  background: var(--ba-bianco);
  border: 1px solid var(--ba-bordo);
  border-radius: var(--ba-raggio-superficie);
  box-shadow: var(--ba-ombra-2);
}

.ba-menu-item__bottone {
  display: flex;
  align-items: center;
  gap: var(--ba-sp-2);
  width: 100%;
  min-height: var(--ba-target-min);
  padding: 0 var(--ba-sp-4);
  border: none;
  background: transparent;
  color: var(--ba-ink);
  font-family: inherit;
  font-size: var(--ba-testo);
  text-align: left;
  cursor: pointer;
  transition: background var(--ba-durata-1) var(--ba-easing);
}

.ba-menu-item__bottone:hover {
  background: var(--ba-surface-2);
}

/* --- BaToastHost: notifiche temporizzate impilate in alto a destra. Bordo
   SEMPRE 1px pieno (mai side-stripe); slide-in da destra, ridotto a comparsa
   istantanea (crossfade) da prefers-reduced-motion tramite il blocco globale
   già presente in base.css, quindi non va ripetuto qui. --- */
.ba-toast-host {
  position: fixed;
  top: var(--ba-sp-4);
  right: var(--ba-sp-4);
  z-index: var(--ba-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ba-sp-2);
  width: min(360px, calc(100vw - var(--ba-sp-8)));
  pointer-events: none;
}

.ba-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ba-sp-3);
  padding: var(--ba-sp-4);
  border: 1px solid;
  border-radius: var(--ba-raggio-ctrl);
  box-shadow: var(--ba-ombra-2);
  pointer-events: auto;
  animation: ba-toast-slide-in var(--ba-durata-2) var(--ba-easing);
}

@keyframes ba-toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.ba-toast__contenuto {
  flex: 1;
}

.ba-toast--info {
  background: var(--ba-info-bg);
  color: var(--ba-info);
  border-color: var(--ba-info);
}

.ba-toast--successo {
  background: var(--ba-successo-bg);
  color: var(--ba-successo);
  border-color: var(--ba-successo);
}

.ba-toast--avviso {
  background: var(--ba-avviso-bg);
  color: var(--ba-avviso);
  border-color: var(--ba-avviso);
}

.ba-toast--errore {
  background: var(--ba-errore-bg);
  color: var(--ba-errore);
  border-color: var(--ba-errore);
}

/* --- BaDialog: <dialog> nativo (showModal/close via ba-dialog.js) con header
   (titolo + "X") e corpo che ospita il componente-dialog specifico. La larghezza
   massima arriva inline dall'host (OpzioniDialog.LarghezzaMax); qui solo aspetto
   visivo e animazione di comparsa (fade+scale), ridotta a comparsa istantanea da
   prefers-reduced-motion tramite il blocco globale già presente in base.css. --- */
.ba-dialog {
  padding: 0;
  border: none;
  border-radius: var(--ba-raggio-superficie);
  box-shadow: var(--ba-ombra-3);
  background: var(--ba-bianco);
  color: var(--ba-ink);
  z-index: var(--ba-z-modal);
  max-height: calc(100vh - 2 * var(--ba-sp-8));
  animation: ba-dialog-comparsa var(--ba-durata-2) var(--ba-easing);
}

.ba-dialog::backdrop {
  background: oklch(0.2 0.02 55 / 0.45);
  animation: ba-dialog-backdrop-comparsa var(--ba-durata-2) var(--ba-easing);
}

@keyframes ba-dialog-comparsa {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ba-dialog-backdrop-comparsa {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Wrapper interno: riceve il click "reale" (stopPropagation) così solo i click
   sul backdrop (il <dialog> stesso) raggiungono la chiusura per click fuori. */
.ba-dialog__wrapper {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.ba-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ba-sp-3);
  padding: var(--ba-sp-4) var(--ba-sp-4) var(--ba-sp-3);
  border-bottom: 1px solid var(--ba-bordo);
}

.ba-dialog__titolo {
  font-size: var(--ba-titolo-3);
  color: var(--ba-ink);
}

/* Scorre di norma solo il contenuto (.ba-dialog__contenuto), così il footer con i pulsanti
   (.ba-dialog__azioni) resta sempre visibile; overflow-y auto è la rete di sicurezza per i
   dialog che non usano BaDialog (contenuto senza .ba-dialog__contenuto). */
.ba-dialog__corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* --- BaDialog (componente wrapper di contenuto): corpo e footer azioni. --- */
.ba-dialog__contenuto {
  padding: var(--ba-sp-4);
  color: var(--ba-ink);
  min-height: 0;
  overflow-y: auto;
}

.ba-dialog__azioni {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--ba-sp-3);
  padding: var(--ba-sp-3) var(--ba-sp-4) var(--ba-sp-4);
  flex: none;
}

/* --- BaTable: toolbar (azioni + ricerca) --- */
.ba-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ba-sp-3);
  margin-bottom: var(--ba-sp-3);
}

.ba-table-toolbar__azioni {
  display: flex;
  align-items: center;
  gap: var(--ba-sp-2);
}

.ba-table-toolbar__ricerca {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
}

.ba-table-toolbar__ricerca > svg {
  position: absolute;
  left: var(--ba-sp-3);
  bottom: 11px;
  color: var(--ba-ink-2);
  pointer-events: none;
}

.ba-table-toolbar__ricerca .ba-campo {
  flex: 1;
}

.ba-table-toolbar__ricerca .ba-campo__controllo {
  padding-left: var(--ba-sp-8);
}

/* Etichetta del campo ricerca: presente per gli screen reader ma
   visivamente nascosta (equivalente scoped di .ba-visually-hidden,
   qui perché BaTextField non espone una classe custom sulla label). */
.ba-table-toolbar__ricerca .ba-campo__etichetta {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- BaTable: wrapper con scroll orizzontale e tabella semantica --- */
.ba-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ba-bordo);
  border-radius: var(--ba-raggio-superficie);
}

.ba-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ba-testo-sm);
}

.ba-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--ba-z-sticky);
  background: var(--ba-surface);
  color: var(--ba-ink);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  padding: var(--ba-sp-3) var(--ba-sp-4);
  border-bottom: 1px solid var(--ba-bordo);
}

.ba-table thead th[role="button"] {
  cursor: pointer;
  user-select: none;
}

.ba-table__intestazione {
  display: inline-flex;
  align-items: center;
  gap: var(--ba-sp-1);
}

.ba-table__intestazione svg {
  flex: none;
  color: var(--ba-ink-2);
}

.ba-table tbody td {
  padding: var(--ba-sp-3) var(--ba-sp-4);
  border-bottom: 1px solid var(--ba-bordo);
  color: var(--ba-ink);
  vertical-align: middle;
}

.ba-table tbody tr:hover td {
  background: var(--ba-surface-2);
}

.ba-table tbody tr:last-child td {
  border-bottom: none;
}

.ba-table__vuoto {
  text-align: center;
  padding: var(--ba-sp-8) var(--ba-sp-4);
  color: var(--ba-ink-2);
}

/* --- BaTable: barra di paginazione --- */
.ba-table-paginazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ba-sp-3);
  margin-top: var(--ba-sp-3);
}

.ba-table-paginazione__intervallo {
  color: var(--ba-ink-2);
  font-size: var(--ba-testo-sm);
  white-space: nowrap;
}

.ba-table-paginazione__pagine {
  display: flex;
  align-items: center;
  gap: var(--ba-sp-1);
}

.ba-table-paginazione__pagina {
  min-width: var(--ba-target-min);
  min-height: var(--ba-target-min);
  border: 1px solid transparent;
  border-radius: var(--ba-raggio-ctrl);
  background: transparent;
  color: var(--ba-ink);
  font-size: var(--ba-testo-sm);
  cursor: pointer;
  transition: background var(--ba-durata-1) var(--ba-easing);
}

.ba-table-paginazione__pagina:hover {
  background: var(--ba-surface-2);
}

.ba-table-paginazione__pagina--attiva {
  background: var(--ba-primary-500);
  color: var(--ba-bianco);
}

.ba-table-paginazione__ellissi {
  padding: 0 var(--ba-sp-1);
  color: var(--ba-ink-2);
}

.ba-table-paginazione__dimensione {
  min-width: 160px;
}

/* ============================================================
   Shell: MainLayout (appbar + nav laterale + contenuto). Sotto i
   960px la nav è off-canvas con backdrop; sopra i 960px è in-flow,
   sticky sotto l'appbar e collassabile (il contenuto si allarga).
   ============================================================ */

/* --- Contenitore generale: appbar in cima, sotto la coppia nav+contenuto --- */
.ba-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Appbar: fissa in cima, logo/titolo, spazio elastico, menu utente --- */
.ba-appbar {
  position: sticky;
  top: 0;
  z-index: var(--ba-z-sticky);
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--ba-sp-3);
  height: var(--ba-appbar-altezza);
  padding: 0 var(--ba-sp-4);
  background: var(--ba-bianco);
  border-bottom: 1px solid var(--ba-bordo);
  box-shadow: var(--ba-ombra-1);
}

.ba-appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ba-sp-2);
  color: var(--ba-ink);
  text-decoration: none;
  border-radius: var(--ba-raggio-ctrl);
}

.ba-appbar__logo {
  height: 36px;
  width: auto;
}

.ba-appbar__titolo {
  font-size: var(--ba-titolo-3);
  font-weight: 600;
  white-space: nowrap;
}

/* Nome del centro selezionato: testo secondario, non in competizione visiva col titolo. */
.ba-appbar__centro {
  color: var(--ba-ink-2);
  font-size: var(--ba-testo-sm);
  font-weight: 400;
  white-space: nowrap;
}

.ba-appbar__spazio {
  flex: 1;
}

/* Selettore di periodo globale nell'appbar: etichetta accessibile ma nascosta
   visivamente (l'appbar è alta 60px e il valore è autoesplicativo). */
.ba-appbar__periodo {
  display: flex;
  align-items: center;
}

.ba-appbar__periodo .ba-campo {
  margin: 0;
}

.ba-appbar__periodo .ba-campo__etichetta {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ba-appbar__periodo .ba-select-contenitore {
  min-width: 210px;
}

.ba-appbar__utente {
  display: flex;
  align-items: center;
  gap: var(--ba-sp-2);
}

.ba-appbar__username {
  color: var(--ba-ink-2);
  font-size: var(--ba-testo-sm);
  white-space: nowrap;
}

/* --- Corpo: nav laterale + contenuto, sotto l'appbar --- */
.ba-shell__corpo {
  display: flex;
  flex: 1;
  position: relative;
}

/* --- Nav laterale: off-canvas (mobile-first). Sotto i 960px è agganciata a
   sinistra fuori schermo (transform) e scorre sopra il contenuto quando aperta. --- */
.ba-nav {
  position: fixed;
  top: var(--ba-appbar-altezza);
  left: 0;
  bottom: 0;
  z-index: calc(var(--ba-z-backdrop) + 1);
  width: var(--ba-nav-larghezza);
  flex: none;
  overflow-y: auto;
  background: var(--ba-surface);
  border-right: 1px solid var(--ba-bordo);
  padding: var(--ba-sp-3) 0;
  transform: translateX(-100%);
  transition: transform var(--ba-durata-2) var(--ba-easing);
}

.ba-nav--aperta {
  transform: translateX(0);
}

.ba-nav__gruppo + .ba-nav__gruppo {
  margin-top: var(--ba-sp-4);
}

/* Intestazione di gruppo: solo testo, non cliccabile/interattiva. */
.ba-nav__intestazione {
  margin: 0;
  padding: var(--ba-sp-2) var(--ba-sp-4);
  color: var(--ba-ink-2);
  font-size: var(--ba-testo-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ba-nav__voce {
  display: flex;
  align-items: center;
  gap: var(--ba-sp-3);
  min-height: var(--ba-target-min);
  padding: 0 var(--ba-sp-4);
  color: var(--ba-ink);
  text-decoration: none;
  transition: background var(--ba-durata-1) var(--ba-easing);
}

.ba-nav__voce:hover {
  background: var(--ba-surface-2);
}

/* Voce attiva (classe "active" applicata da NavLink): sfondo pieno tinto,
   MAI un side-stripe colorato (divieto del design system). */
.ba-nav__voce.active {
  background: var(--ba-primary-50);
  color: var(--ba-primary-800);
  font-weight: 600;
}

/* --- Backdrop della nav off-canvas: chiude la nav al click; visibile solo
   sotto i 960px (sopra, la nav non è mai in overlay). --- */
.ba-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--ba-z-backdrop);
  background: oklch(0.2 0.02 55 / 0.4);
  border: none;
  padding: 0;
  cursor: default;
}

/* --- Contenuto principale --- */
.ba-contenuto {
  flex: 1;
  min-width: 0;
  padding: var(--ba-sp-6);
}

/* --- Sopra i 960px: nav sempre in-flow (sticky sotto l'appbar), niente
   overlay/backdrop. Il margine negativo azzera l'ingombro della nav chiusa
   nel flusso flex, così il contenuto si allarga per riempire lo spazio. --- */
@media (min-width: 961px) {
  .ba-nav__backdrop {
    display: none;
  }

  .ba-nav {
    position: sticky;
    top: var(--ba-appbar-altezza);
    height: calc(100vh - var(--ba-appbar-altezza));
    transform: none;
    /* Collapse basato sulla larghezza (non su margin-left): garantisce che la
       nav sparisca davvero dal flusso, invece di restare visibile fuori dal
       contenitore con overflow nascosto. */
    overflow-x: hidden;
    width: var(--ba-nav-larghezza);
    transition: width var(--ba-durata-2) var(--ba-easing);
  }

  .ba-nav:not(.ba-nav--aperta) {
    width: 0;
    min-width: 0;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
  }

  .ba-shell__corpo {
    /* clip (non hidden): impedisce l'overflow orizzontale della nav collassata SENZA
       trasformare il corpo in un contenitore di scorrimento. Con "hidden", infatti,
       il browser calcola overflow-y a "auto" e il corpo diventa lo scroll-port: la
       nav sticky verrebbe allora ancorata a "top: 60px" rispetto al corpo (già sotto
       l'appbar), spingendola in basso di ~60px sulle pagine scrollabili. Con "clip"
       la nav resta ancorata alla finestra e rimane correttamente sotto l'appbar. */
    overflow-x: clip;
  }
}

/* ============================================================
   Utilità: classi generiche riusabili nelle pagine, per evitare
   stili inline ripetuti (es. elenchi mostrati dentro le celle di
   BaTable).
   ============================================================ */

/* Elenco puntato "pulito": azzera i margini di default della lista e
   dispone le voci in colonna con spaziatura ridotta, per contesti
   compatti come il contenuto di una BaExpansion in una cella tabella. */
.ba-elenco-pulito {
  margin: 0;
  padding-left: var(--ba-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ba-sp-1);
}

/* Testo secondario attenuato (stesso colore di BaCampo__messaggio),
   per messaggi di stato poco rilevanti (es. "Nessuna postazione"). */
.ba-testo-attenuato {
  color: var(--ba-ink-2);
}

/* Riga di filtri/select sopra una tabella o una pagina (es. periodo/versione
   in Riepilogo): si dispone su più righe se lo spazio non basta, ogni campo
   prova a occupare almeno 240px prima di andare a capo. */
.ba-riga-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ba-sp-4);
  margin-bottom: var(--ba-sp-4);
}

.ba-riga-filtri > * {
  flex: 1 1 240px;
}

/* Variante compatta: usata per un singolo controllo (es. "Raggruppa per"),
   non occupa tutta la larghezza disponibile. */
.ba-riga-filtri--compatta {
  margin-bottom: var(--ba-sp-3);
}

.ba-riga-filtri--compatta > * {
  flex: 0 1 320px;
  max-width: 100%;
}

/* Griglia responsiva per card di statistiche (es. i KPI in cima a Riepilogo):
   si adatta al numero di card disponibili, min 280px ciascuna. */
.ba-griglia-statistiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ba-sp-4);
  margin-bottom: var(--ba-sp-4);
}

/* Etichetta e valore di una scheda di statistica dentro una BaCard. */
.ba-statistica__etichetta {
  margin: 0 0 var(--ba-sp-2);
  color: var(--ba-ink-2);
  font-size: var(--ba-testo-sm);
}

.ba-statistica__valore {
  margin: 0;
  font-size: var(--ba-titolo-1);
  font-weight: 600;
}

/* Griglia responsiva per le card di distribuzione (es. Riepilogo: distribuzione
   per supermercato/fascia oraria/tipologia), una card per serie di dati. */
.ba-griglia-distribuzione {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ba-sp-4);
  margin-bottom: var(--ba-sp-4);
}

/* Riga di una card di distribuzione: etichetta+valore sopra una BaProgress
   determinata. */
.ba-distribuzione-riga {
  margin-bottom: var(--ba-sp-3);
}

.ba-distribuzione-riga:last-child {
  margin-bottom: 0;
}

.ba-distribuzione-riga__etichetta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ba-sp-2);
  margin-bottom: var(--ba-sp-1);
  font-size: var(--ba-testo-sm);
}

/* Intestazione di un gruppo nella vista raggruppata di una tabella (es.
   dettaglio volontari in Riepilogo): nome del gruppo + conteggio elementi. */
.ba-gruppo-titolo {
  margin: var(--ba-sp-4) 0 var(--ba-sp-2);
}

/* Titolo di una sotto-sezione dentro il corpo di un dialog (es. "Report per
   Supermercato" in ReportDialog): più contenuto di un h3 di pagina. */
.ba-dialog__sezione {
  margin: var(--ba-sp-4) 0 var(--ba-sp-2);
  font-size: var(--ba-testo);
  font-weight: 600;
}

/* Elenco verticale di BaCheckbox (che di per sé sono inline-flex e quindi
   affiancherebbero le une alle altre): una per riga, spaziatura ridotta. */
.ba-lista-checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--ba-sp-1);
}

/* Titolo di una sotto-sezione dentro il corpo di una card/expansion (es. i
   gruppi della legenda in Gestione): più contenuto di un h4 di pagina. */
.ba-sottotitolo {
  margin: var(--ba-sp-4) 0 var(--ba-sp-2);
  font-size: var(--ba-testo);
  font-weight: 600;
}

/* ── Gestione gruppi: pannello di dettaglio ────────────────────────────── */
.gruppo-dettaglio { display: flex; flex-direction: column; gap: var(--ba-sp-3); }
.gruppo-dettaglio__segnalazioni { margin: 0; padding-inline-start: var(--ba-sp-4); }
.gruppo-dettaglio__turni, .gruppo-dettaglio__supermercati {
    border: 1px solid var(--ba-bordo); border-radius: var(--ba-raggio-ctrl);
    padding: var(--ba-sp-2) var(--ba-sp-3); display: flex; flex-wrap: wrap; gap: var(--ba-sp-2);
}
.gruppo-dettaglio__titolo-membri { margin: var(--ba-sp-2) 0 0; font-size: var(--ba-testo); }
.gruppo-dettaglio__membri { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ba-sp-1); }
.gruppo-dettaglio__membro { display: flex; align-items: center; gap: var(--ba-sp-2); padding: var(--ba-sp-1); border-radius: var(--ba-raggio-ctrl); }
.gruppo-dettaglio__membro--selezionato { background: var(--ba-surface-2); }
.gruppo-dettaglio__membro-nome { background: none; border: none; cursor: pointer; color: var(--ba-primary-700); font: inherit; padding: 0; min-height: var(--ba-target-min); }
.gruppo-dettaglio__membro-turni { color: var(--ba-ink-2); font-size: var(--ba-testo-sm); }
.gruppo-dettaglio__collegamenti { background: var(--ba-surface); border-radius: var(--ba-raggio-superficie); padding: var(--ba-sp-3); }
.gruppo-dettaglio__azioni { display: flex; justify-content: flex-end; margin-top: var(--ba-sp-2); }

/* ── Gestione gruppi: popup master-detail ──────────────────────────────── */
.gestione-gruppi { display: flex; flex-direction: column; gap: var(--ba-sp-3); }
.gestione-gruppi__layout { display: flex; gap: var(--ba-sp-4); align-items: flex-start; }
.gestione-gruppi__master { flex: 1 1 55%; min-width: 0; }
.gestione-gruppi__detail { flex: 1 1 45%; min-width: 0; }
.gestione-gruppi__errori { margin: 0; padding-inline-start: var(--ba-sp-4); }
@media (max-width: 960px) {
    .gestione-gruppi__layout { flex-direction: column; }
    .gestione-gruppi__master, .gestione-gruppi__detail { flex-basis: auto; width: 100%; }
}