/* Stili comuni che le classi di Tailwind da sole non coprono.
 *
 * Soprattutto il telefono: sotto i 1024 px (dove cominciano le classi "lg:")
 * il menu laterale non sta piu' accanto alla pagina e diventa un pannello che
 * entra da sinistra col tasto ☰ (apertura e chiusura in app.js, data-menu-*).
 */

.menu-sfondo { display: none; }

/* L'attributo hidden (parti di un modulo spente da app.js) deve vincere sulle
   classi di Tailwind come "grid" o "flex", che altrimenti le rimostrano. */
[hidden] { display: none !important; }

/* Tabelle larghe: scorrono di lato col dito dentro il loro riquadro invece di
   allargare tutta la pagina. Ogni <table> dei template ne ha uno intorno. */
.tabella-scorre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Un'ombra sul bordo avvisa che la tabella continua di lato. Le due
     sfumature bianche scorrono con il contenuto (local) e coprono l'ombra
     (scroll, ferma sul bordo) quando si e' arrivati in fondo da quella parte. */
  background:
    linear-gradient(to right, #fff 30%, rgb(255 255 255 / 0)) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgb(255 255 255 / 0)) right / 2.5rem 100% no-repeat local,
    linear-gradient(to right, rgb(15 23 42 / .16), rgb(15 23 42 / 0)) left / .75rem 100% no-repeat scroll,
    linear-gradient(to left, rgb(15 23 42 / .16), rgb(15 23 42 / 0)) right / .75rem 100% no-repeat scroll;
}

/* Un menu a tendina e' largo quanto la sua voce piu' lunga (un progetto col
   nome del cliente, un componente): sul telefono spingeva fuori dallo schermo
   il pulsante accanto. Cosi' si stringe e la voce scelta si legge per intero
   quando lo si apre. */
select { min-width: 0; max-width: 100%; }

/* Pulsanti nell'intestazione delle pagine (block actions): se non stanno in
   una riga vanno a capo, ma ogni pulsante resta su una riga sola. */
.azioni > .flex { flex-wrap: wrap; }
.azioni a, .azioni button { white-space: nowrap; }

@media (max-width: 1023.98px) {
  .menu-laterale {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    overflow-y: auto;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-100%);
    visibility: hidden;  /* chiuso: niente tab sui link nascosti */
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .menu-aperto .menu-laterale {
    transform: none;
    visibility: visible;
    transition: transform .2s ease;
  }
  .menu-sfondo {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgb(15 23 42 / .5);
  }
  .menu-aperto .menu-sfondo { display: block; }
  .menu-aperto body { overflow: hidden; }

  /* Con l'app aggiunta alla schermata Home di iPhone la barra di stato e'
     trasparente (black-translucent): l'intestazione le lascia spazio. */
  header.intestazione { padding-top: max(.75rem, env(safe-area-inset-top)); }

  /* Safari su iPhone ingrandisce la pagina quando si tocca un campo con il
     testo sotto i 16 px, e poi non la rimpicciolisce da solo. */
  input, select, textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-laterale { transition: none !important; }
}