/* ============================================================
   MOBILE.CSS — adattamento responsive globale (Gestionale A&L)
   ------------------------------------------------------------
   Regole valide SOLO da 768px in giù: l'esperienza desktop
   resta identica a prima. Nessuna classe/ID esistente viene
   rinominata o rimossa: qui si aggiunge soltanto.
   Caricato DOPO il CSS/inline-style di ogni pagina.
   ============================================================ */

/* Safe-area iOS: usata dai pannelli ancorati in basso.
   Definita fuori dalla media query perché è solo un valore. */
:root {
  --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mob-safe-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 768px) {

  /* ---- Nessuno scroll orizzontale della pagina ---------------------
     Lo scroll orizzontale deve esistere SOLO dentro i contenitori
     dedicati (griglia planning, tabelle), mai sul body.
     NB: non si tocca il padding-top del body — header.php lo impone
     già con !important (62px) su tutte le larghezze.                  */
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  img, video, canvas, svg {
    max-width: 100%;
    height: auto;
  }

  /* ---- Campi form: >= 16px o iOS zooma da solo al focus ------------
     Serve !important perché quasi tutte le pagine dichiarano
     font-size: 12/13px con selettori più specifici.                   */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- Tap target minimi ------------------------------------------- */
  .btn,
  .icon-btn,
  button[type="submit"] {
    min-height: 40px;
  }

  /* ---- Tabelle generiche: scroll orizzontale contenuto -------------
     Le pagine Utenti / Strutture usano tabelle larghe senza wrapper
     scrollabile. display:block le rende scrollabili da sole, senza
     dover toccare il markup PHP.
     NB: la griglia della Pianificazione è esclusa e viene rimessa a
     display:table da planning_mobile.css (caricato dopo).             */
  table.users-table,
  table.rooms-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  table.users-table th,
  table.users-table td,
  table.rooms-table th,
  table.rooms-table td {
    white-space: nowrap;
  }

  /* ---- Pagina Strutture: card a colonna singola --------------------
     minmax(320px, 1fr) sfora a 360px una volta tolti i padding.       */
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Contenitori generici: mai più larghi del viewport ------------ */
  .container,
  .wrap,
  main {
    max-width: 100%;
  }

  /* Strutture (.page) e Utenti (.page-wrapper) hanno padding: 24px:
     su 360px se ne mangiano 48. Solo i lati, il verticale resta. */
  .page,
  .page-wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 480px) {

  /* Su schermi molto stretti recuperiamo ogni pixel orizzontale */
  .container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Nome utente già nascosto dall'header; qui il wordmark */
  .ah-inner {
    gap: 8px;
  }
}