/* Adattamento mobile del portale ABDental.
   Non ridefinisce colori/font: usa le stesse variabili --colore-* e --font-*
   già definite in style.css, aggiungendo solo layout e comportamenti
   specifici per schermi stretti. */

/* Rete di sicurezza generale: evita che un elemento troppo largo (immagine,
   riga flex non responsive, ecc.) apra uno scroll orizzontale su tutta la
   pagina o "sfondi" i bordi dello schermo. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------
   Pulsante hamburger: nel markup desktop esiste sempre, ma resta
   nascosto finché non siamo sotto la soglia mobile qui sotto.
   --------------------------------------------------------------------- */
.pulsante-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
  background: transparent;
  color: var(--colore-testo);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s var(--easing), transform 0.2s var(--easing);
}

.pulsante-hamburger:hover {
  background: color-mix(in srgb, var(--colore-testo) 7%, transparent);
}

/* Il simbolo ruota di un quarto di giro quando il menu si apre (il testo
   diventa "✕", scambiato da base.html): un piccolo segnale che l'icona
   sta davvero cambiando stato, non solo il pannello sotto di lei. */
.pulsante-hamburger[aria-expanded="true"] {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  /* -------------------------------------------------------------------
     Header e navigazione: il menu diventa un pannello a comparsa,
     aperto/chiuso dal pulsante hamburger tramite la classe .aperta
     applicata a <nav id="menu-principale"> via JS in base.html.
     ------------------------------------------------------------------- */
  .intestazione-contenuto {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
  }

  .intestazione .logo-immagine {
    height: 56px;
  }

  .saluto-intestazione {
    display: none;
  }

  .pulsante-hamburger {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }

  .intestazione nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s var(--easing), opacity 0.2s var(--easing);
  }

  .intestazione nav.aperta {
    max-height: 400px;
    opacity: 1;
    padding-top: 8px;
    border-top: 1px solid var(--colore-bordo);
  }

  .intestazione nav a,
  .intestazione nav .dentista-loggato {
    padding: 12px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
  }

  .intestazione nav a {
    border-bottom: 1px solid var(--colore-bordo);
  }

  /* ---------------------------------------------------------------------
     Contenuto generale: meno margini laterali, schede e wizard più
     compatti, occupano tutta la larghezza disponibile.
     --------------------------------------------------------------------- */
  .contenitore {
    width: 100%;
    padding: 16px 12px 40px;
  }

  .scheda,
  .scheda-larga {
    padding: 16px;
    border-radius: var(--raggio-medio);
  }

  .intestazione-pagina {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .intestazione-pagina .pulsante {
    width: 100%;
  }

  .griglia-schede,
  .griglia-materiali {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* Le schede del sottotipo sono solo testo (niente foto): con colonne
     strette come le altre, una parola lunga come "Scheletrato" non ci
     sta e trabocca dalla scheda invece di restare centrata. Servono
     colonne un po' piu' larghe, solo per questa griglia. */
  .griglia-schede--sottotipo {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .griglia-due-colonne,
  .griglia-caratteristiche-impianto {
    grid-template-columns: 1fr;
    max-width: none;
  }

  /* Fascia di riepilogo "I miei lavori": due colonne invece che cinque
     affiancate, con il separatore che passa da verticale a orizzontale
     (altrimenti a questa larghezza le celle diventerebbero troppo strette
     per leggere un numero a due cifre e un'etichetta). */
  .riepilogo-lavori {
    grid-template-columns: repeat(2, 1fr);
  }

  .riepilogo-voce {
    border-right: none;
    border-bottom: 1px solid var(--colore-bordo);
  }

  /* La fascia ha cinque voci: con due colonne l'ultima riga ha un solo
     elemento (dispari), che non deve chiudersi con un filo a meta' del
     nulla sotto di se'. */
  .riepilogo-voce:last-child {
    border-bottom: none;
  }

  /* Schede "Tipo di lavoro" / "Sottotipo" / "Materiale": su schermi stretti
     le celle si restringono. Il testo puo' andare a capo su piu' righe
     (va bene), ma non deve mai spezzare una parola a meta': niente
     word-break/overflow-wrap "break-word", si va a capo solo tra le parole. */
  .scheda-visiva > span,
  .scheda-materiale {
    display: block;
    width: 100%;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }

  .scheda-visiva--sottotipo > span {
    font-size: 13px;
  }

  .scheda-materiale {
    min-height: 44px;
    padding: 8px 8px;
  }

  /* Il pallino "da file" (badge-da-file) ha dimensione fissa in style.css
     (26px), pensata per le card larghe desktop: con le card ristrette qui
     sopra risulta sproporzionato rispetto alla foto. Lo riduciamo in
     proporzione. */
  .badge-da-file {
    width: 18px;
    height: 18px;
    background-size: 10px 10px;
  }

  /* ---------------------------------------------------------------------
     Schermata di accesso e registrazione (login.html, registrazione.html):
     la scheda usa dimensioni fisse pensate per desktop (dente + logo alti
     110px/60px affiancati). Su schermi stretti la riduciamo e le lasciamo
     andare a capo invece di farle sconfinare fuori dallo schermo.
     --------------------------------------------------------------------- */
  .scena-accesso {
    padding: 12px;
  }

  .scena-accesso-scheda {
    width: 100%;
    padding: 28px 20px;
    border-radius: 20px;
  }

  .scena-accesso-palco {
    flex-wrap: wrap;
    gap: 6px;
  }

  .scena-accesso-dente {
    height: 64px;
    max-width: 100%;
  }

  .scena-accesso-testo {
    height: 34px;
    max-width: 100%;
  }

  /* ---------------------------------------------------------------------
     Indicatore "Passo X di Y" del wizard Nuovo lavoro (_passi_wizard.html):
     e' una riga flex e, di default, i suoi elementi non si restringono
     sotto la larghezza del proprio testo ("Materiale e invio" ecc.),
     quindi su schermi stretti sfondavano la scheda. Sotto i 768px si
     mostra solo il numero del passo, con l'etichetta testuale solo per
     il passo attivo.
     --------------------------------------------------------------------- */
  .passi-wizard {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .passo-wizard {
    flex-shrink: 0;
    min-width: 0;
    gap: 4px;
  }

  .passo-wizard .etichetta-passo {
    display: none;
  }

  .passo-wizard.attivo .etichetta-passo {
    display: inline;
  }

  .separatore-passo-wizard {
    min-width: 10px;
  }

  .riepilogo-scelte-precedenti {
    word-break: break-word;
  }

  .sezione-campo:has(.arcata-dentale) {
    overflow-x: auto;
  }

  .arcata-dentale {
    width: 480px;
    max-width: none;
  }

  /* ---------------------------------------------------------------------
     Tabella lavori -> card verticali. Ogni <td> mostra la propria
     etichetta (attributo data-label sui template) come se fosse una
     riga "chiave: valore" invece di una colonna di tabella.
     --------------------------------------------------------------------- */
  #tabella-lavori,
  #tabella-lavori thead,
  #tabella-lavori tbody,
  #tabella-lavori th,
  #tabella-lavori td,
  #tabella-lavori tr {
    display: block;
  }

  #tabella-lavori thead {
    display: none;
  }

  #tabella-lavori tbody tr {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-medio);
    padding: 8px 14px;
    margin-bottom: 12px;
  }

  #tabella-lavori tbody tr#riga-stato-vuoto {
    background: none;
    border: none;
    padding: 0;
  }

  /* Su telefono ogni lavoro e' una card con il suo sfondo: serve una regola
     apposita (piu' specifica di quella qui sopra) perche' l'evidenziazione
     del lavoro selezionato si veda anche qui. */
  #tabella-lavori tbody tr.selezionata {
    background: color-mix(in srgb, var(--colore-primario) 26%, var(--colore-superficie));
    border-color: var(--colore-primario);
  }

  /* Barra di selezione: conteggio e pulsante sulla stessa riga, spiegazione
     di Ctrl/Shift sotto (a mano libera sul telefono non si usano, ma la
     selezione multipla resta possibile con clic ripetuti). */
  .barra-selezione .pulsante {
    flex: 1 1 auto;
    justify-content: center;
  }

  #tabella-lavori td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--colore-bordo);
    background: none !important;
  }

  #tabella-lavori td:last-child {
    border-bottom: none;
  }

  #tabella-lavori td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--colore-testo-secondario);
    width: 100%;
  }

  #tabella-lavori td[colspan] {
    display: block;
    padding: 0;
    border-bottom: none;
  }

  #tabella-lavori td[colspan]::before {
    content: none;
  }

  /* ---------------------------------------------------------------------
     Form (nuovo lavoro, login, registrazione): colonna singola, campi a
     piena larghezza, font-size 16px minimo per evitare lo zoom
     automatico di iOS Safari sul focus degli input.
     --------------------------------------------------------------------- */
  .riga-campi {
    flex-direction: column;
    gap: 0;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  input[type="file"],
  select,
  textarea,
  .campo-accesso {
    font-size: 16px;
    min-height: 44px;
  }

  /* La casella della data ("Data di consegna prevista") sui telefoni non e'
     un campo di testo normale: e' un controllo disegnato dal sistema. Su
     iPhone in particolare si dimensiona da solo secondo il suo contenuto e
     ignora la larghezza che gli diamo, finendo spostato a destra e fuori
     dal bordo della scheda. Queste righe gli tolgono l'aspetto nativo e lo
     obbligano a stare dentro lo spazio che ha: si tocca e si apre il
     calendario esattamente come prima. */
  input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    /* Dentro a un contenitore flex un campo non scende sotto la larghezza
       del proprio contenuto se non glielo si dice: senza questa riga
       l'overflow resterebbe anche con le due qui sopra. */
    min-width: 0;
  }

  /* ---------------------------------------------------------------------
     Pulsanti: area di tocco minima di 44px, a piena larghezza dentro ai
     form perché più facili da raggiungere con il pollice.
     --------------------------------------------------------------------- */
  .pulsante,
  .pulsante-accesso,
  button[type="submit"] {
    min-height: 44px;
    width: 100%;
  }

  .azioni-wizard {
    flex-direction: column;
    align-items: stretch;
  }

  .azioni-wizard .pulsante {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .griglia-schede,
  .griglia-materiali {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  }

  /* Stessa eccezione di sopra, sui telefoni piu' stretti. */
  .griglia-schede--sottotipo {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .scheda-visiva span,
  .scheda-materiale,
  .scheda-visiva--sottotipo span {
    font-size: 12px;
  }
}