/* ============================================================
   OTTIMIZZAZIONE MOBILE — pagine del supporto (Ticket Center)
   Incluso DOPO gli stili inline di ogni pagina: qui stanno solo
   le regole per gli schermi piccoli, condivise da tutte le pagine.
   ============================================================ */

@media (max-width: 767px) {

  /* === Menu in alto: va a capo invece di uscire dallo schermo === */
  .navbar-tc .container-fluid, .navbar-tc .container { flex-wrap: wrap; }
  .navbar-tc .navbar-brand { font-size: 15px; white-space: normal; }
  .navbar-tc .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0 !important;
    gap: 2px 4px;
  }
  .navbar-tc .nav-link {
    font-size: 12px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    white-space: nowrap;
  }

  /* === Niente scorrimento orizzontale della pagina ===
     (le tabelle larghe scorrono DENTRO .table-responsive) */
  html, body { overflow-x: hidden; }

  /* === Pannelli a tutta larghezza dello schermo ===
     Il contenitore flex ha align-items:flex-start: in colonna (mobile) i
     pannelli diventavano larghi quanto il CONTENUTO (la tabella da 900px),
     sforavano dallo schermo e lo scorrimento interno non scattava mai.
     Qui si obbligano i pannelli alla larghezza dello schermo: cosi' e' la
     tabella a sporgere DENTRO la cornice, che scorre col dito. */
  .contenitore-cruscotto { align-items: stretch !important; }
  .contenitore-cruscotto > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .pannello-griglia, .contenitore-griglia, .sidebar-filtri { width: 100% !important; max-width: 100% !important; }

  /* === Griglie: scorrimento orizzontale col dito ===
     Le tabelle hanno width:100% e sul telefono si schiacciavano dentro
     lo schermo: niente da scorrere, solo colonne illeggibili. Qui si dà
     una larghezza minima alla tabella (così sporge) e lo scorrimento
     avviene DENTRO la cornice .table-responsive. */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .table-responsive > table { min-width: 900px; }
  .table-responsive th, .table-responsive td { white-space: nowrap; }
  /* Le celle con testi lunghi non allargano la griglia all'infinito */
  .table-responsive td { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

  /* === Toolbar della griglia: ricerca a tutta larghezza,
     pulsanti compatti in fila (non piu' giganti impilati) === */
  .toolbar-griglia {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px;
  }
  .toolbar-griglia .titolo { width: 100%; margin-right: 0; }
  .toolbar-griglia .form-control { flex: 1 1 160px; max-width: none !important; }
  .toolbar-griglia .form-select { flex: 1 1 140px; max-width: none !important; }
  .toolbar-griglia .btn { flex: 0 0 auto; width: auto !important; }

  /* === Footer paginazione: compatto e centrato === */
  .footer-griglia {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
  }

  /* === Bolle dei messaggi (pagina ticket): piu' larghe sul telefono === */
  .mess-bolla { max-width: 92%; }
}