/* ============================================================
   Adattamento mobile condiviso (telefoni e tablet piccoli).
   Caricato DOPO lo <style> di ogni pagina e dopo theme-dark.css.
   Tocca solo la disposizione, non i colori.
   ============================================================ */

@media (max-width: 720px) {

  /* Margini di pagina piu' contenuti */
  .page {
    padding: 14px !important;
  }

  /* --- Griglie multi-colonna -> singola colonna --- */
  .dashboard,
  .cards,
  .grid,
  .mail-body,
  .calendar-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Barre superiori e di azione: impilate in verticale --- */
  .top,
  .topbar,
  .toolbar,
  .actions,
  .filters,
  .tabs,
  .reply-actions,
  .status-form,
  .row,
  .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .sync { margin-left: 0 !important; }

  /* Controlli dentro le barre: a tutta larghezza */
  .top > *,
  .topbar > *,
  .toolbar > *,
  .actions > *,
  .filters > *,
  .reply-actions > *,
  .status-form > *,
  .form-row > * {
    width: 100% !important;
  }

  /* Il blocco titolo/brand resta allineato a sinistra, non centrato */
  .brand { justify-content: flex-start !important; }

  /* --- Aree toccabili piu' generose --- */
  button,
  select,
  input,
  textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* evita lo zoom automatico su iOS */
  }

  /* Tab di sezione a tutta larghezza e centrate */
  .section-tab,
  .tab {
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Titoli piu' compatti */
  h1 { font-size: 22px !important; }
  h2 { font-size: 17px !important; }

  /* --- Tabelle: scorrimento orizzontale invece di sforare --- */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table th,
  table td {
    white-space: nowrap;
  }
  /* NB: il calendario noleggi ha gia' una sua gestione mobile dedicata
     nella pagina rentals; non lo tocchiamo qui per non disallineare
     le colonne dei giorni. */

  /* Modale/scheda non piu' larga dello schermo */
  .card,
  .panel {
    width: auto !important;
  }
}

/* ============================================================
   Calendario noleggi: timeline orizzontale scorrevole su smartphone.
   Le barre restano complete (cliente, dispositivi, stato); si scorre
   lateralmente con il dito.
   ============================================================ */
@media (max-width: 720px) {

  /* Colonna giorno un po' piu' stretta sul telefono, per vedere piu' giorni. */
  .tl-grid { --dayw: 88px !important; }

  /* Le barre mantengono l'altezza della corsia e tutto il testo. */
  .tl-bar {
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
  }
  .tl-bar strong,
  .tl-items,
  .tl-bar .small { display: block !important; }

  .calendar-title { font-size: 18px !important; }
}

/* ============================================================
   Sezione WhatsApp: ottimizzazione per smartphone.
   ============================================================ */
@media (max-width: 720px) {

  /* Bolle dei messaggi a tutta larghezza */
  .bubble { max-width: 100% !important; }

  /* Controlli sotto ogni messaggio (stato, categoria, note, salva, +attività):
     impilati e a tutta larghezza per essere toccabili senza sforare. */
  .ctrl { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .ctrl form { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; }
  .ctrl > *,
  .ctrl form > * { width: 100% !important; }
  .ctrl input,
  .ctrl select { max-width: none !important; }

  /* Barra di risposta / compositore: elementi impilati e bottoni comodi */
  .replybar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .replybar > *,
  .replybar > span { width: 100% !important; }
  .replybar > span { display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .replybar select,
  .replybar label { width: 100% !important; }

  /* Campo file e area di testo non devono sforare lo schermo */
  input[type="file"] { max-width: 100% !important; }
  textarea { width: 100% !important; }

  /* "Applica a tutti": form del titolo conversazione impilato */
  .rowform { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .rowform > * { width: 100% !important; }

  /* Chip filtro categoria: comode da toccare */
  .chip { padding: 9px 12px !important; }

  /* Colonne secondarie nascoste su telefono per far stare la tabella nello schermo */
  .col-hide-sm { display: none !important; }

  /* Statistiche WhatsApp disposte due a due su smartphone */
  .cards.wa-stats { grid-template-columns: 1fr 1fr !important; }

  /* Filtri e ricerca WhatsApp a scomparsa solo su smartphone */
  .wa-filters-toggle { display: inline-flex !important; align-items: center; }
  .wa-filters { display: none !important; }
  .wa-filters.open { display: block !important; }
}

/* Schermi molto stretti (telefoni piccoli) */
@media (max-width: 420px) {
  .stat-value { font-size: 24px !important; }
  h1 { font-size: 20px !important; }
  .page { padding: 11px !important; }
}