/* ============================================================================
   Aventurx Product Hub — layer responsive condiviso.
   Incluso in tutte le pagine. Sistema i pattern comuni su mobile/tablet:
   modali che sforano, tabelle larghe, toolbar/header, righe a 2 colonne.
   Usa !important dove serve per battere gli stili inline (min-width fisse).
   La sidebar/drawer dei moduli è gestita da ext_nav.js (non qui).
   ============================================================================ */

/* Tabelle: scroll orizzontale invece di sfondare la pagina */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Tablet e sotto ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  /* header e barre a flex vanno a capo */
  .hdr { flex-wrap: wrap; }
  /* barre a tab scrollabili orizzontalmente */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tabs > * { flex-shrink: 0; }
}

/* ── Telefono ───────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  /* Modali: mai più larghi del viewport (batte le min-width inline) */
  .modal {
    min-width: 0 !important;
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 18px 16px !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
  }
  .modal-bg { padding: 0 !important; }

  /* Righe a due colonne → impilate (funziona sia flex sia grid) */
  .fr2, .row2 {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .fr2 > *, .row2 > * { min-width: 0 !important; width: 100% !important; }

  /* Card e contenitori: padding più compatto */
  .card { padding: 14px !important; }

  /* Titoli header un filo più piccoli */
  .hdr h2 { font-size: 20px !important; }

  /* Campi di ricerca/filtro a piena larghezza dove sono in barre flessibili */
  .srch { max-width: none !important; width: 100% !important; }

  /* Griglie a card auto-fit: colonna singola per non spezzare il contenuto */
  .stat-grid, .cards-grid, .kpi-grid { grid-template-columns: 1fr !important; }
}

/* Immagini dentro le card non sforano mai */
.card img { max-width: 100%; height: auto; }

/* ── Telefono: niente auto-zoom iOS ─────────────────────────────────────── */
/* iOS Safari zooma la pagina al focus di qualsiasi campo con font <16px.
   Sotto i 620px portiamo tutti i campi a 16px: batte i font-size inline. */
@media (max-width: 620px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    font-size: 16px !important;
  }
}