/* iPhone in orizzontale: Safari ingrandiva i testi da solo */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* =====================================================================
   VERSIONE MOBILE — menu a scomparsa e tabelle in schede
   Si attiva solo su schermi stretti (telefoni).
   ===================================================================== */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {

  /* --- Barra superiore con pulsante menu --- */
  .barra-mobile{
    position: sticky;
    top: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #b71c1c;
    color: #fff;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }
  .barra-mobile .btn-menu{
    background: rgba(255,255,255,.15);
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
  }
  .barra-mobile .titolo-mobile{
    font-weight: 800;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .barra-mobile img{ height: 34px; width: auto; border-radius: 6px; }

  /* --- Il menu diventa un pannello che entra da sinistra --- */
  body.layout-admin, body{ display: block !important; }

  .sidebar{
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 78% !important;
    max-width: 320px;
    height: 100% !important;
    overflow-y: auto !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1300;
    padding-top: 16px !important;
  }
  .sidebar.aperta{ transform: translateX(0); }
  .sidebar img{ width: 120px !important; margin: 0 auto 14px !important; }
  .sidebar .menu{ width: 100%; }
  .sidebar .menu a{ padding: 14px 18px !important; font-size: 1rem; }

  /* velo scuro quando il menu è aperto */
  .velo-menu{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1250;
    display: none;
  }
  .velo-menu.attivo{ display: block; }

  /* --- Contenuto a tutta larghezza --- */
  .main{
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .main h1{ font-size: 1.4rem; }

  /* --- Card e riquadri --- */
  .cards, .cards-container{ grid-template-columns: 1fr !important; gap: 14px !important; }
  .card{ min-height: auto !important; padding: 18px !important; }

  /* --- Campi e pulsanti più comodi da toccare --- */
  input, select, textarea, button{ font-size: 16px !important; }
  button, .action-btn, .btn-admin{ min-height: 42px; }

  /* --- Tabelle trasformate in schede impilate --- */
  table.tabella-schede{ border: 0 !important; width: 100% !important; }
  table.tabella-schede thead{ display: none !important; }
  table.tabella-schede tbody, table.tabella-schede tr, table.tabella-schede td{
    display: block !important;
    width: 100% !important;
  }
  table.tabella-schede tr{
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    margin-bottom: 12px;
    padding: 10px 12px;
  }
  table.tabella-schede td{
    border: 0 !important;
    border-bottom: 1px solid #f2f2f2 !important;
    padding: 8px 0 !important;
    text-align: left !important;
    display: flex !important;
    justify-content: space-between;
    gap: 12px;
  }
  table.tabella-schede td:last-child{ border-bottom: 0 !important; }
  table.tabella-schede td::before{
    content: attr(data-etichetta);
    font-weight: 700;
    color: #b71c1c;
    flex: 0 0 42%;
    font-size: .85rem;
  }
  /* la cella delle azioni occupa tutta la riga, coi pulsanti affiancati */
  table.tabella-schede td.cella-azioni{
    display: block !important;
    padding-top: 10px !important;
  }
  table.tabella-schede td.cella-azioni::before{ display: none; }
  table.tabella-schede td.cella-azioni > *{ margin: 3px 4px 3px 0; }

  /* tabelle non convertite: almeno scorrono senza rompere la pagina */
  table:not(.tabella-schede){ display: block; overflow-x: auto; white-space: nowrap; }
}

/* Su schermi larghi la barra mobile non serve */
@media (min-width: 821px) and (min-height: 521px), (min-width: 821px) and (orientation: portrait){
  .barra-mobile, .velo-menu{ display: none !important; }
}

/* =====================================================================
   FINESTRE (form e dettagli) SU TELEFONO
   Devono occupare lo schermo, scorrere fino in cima e avere il pulsante
   di chiusura sempre visibile.
   ===================================================================== */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {

  #form-container,
  .modal-overlay,
  #ruoli-popup,
  #tipi-container,
  #info-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1400 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* il riquadro interno occupa tutto e scorre */
  #form-container > form,
  #form-container > div,
  .modal-overlay > div,
  #ruoli-popup > div,
  #tipi-container > div {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* spazio in alto per il pulsante di chiusura, in basso per la barra del browser */
    padding: 52px 12px 80px !important;
    box-sizing: border-box !important;
  }

  /* pulsante di chiusura sempre in alto a destra, sopra al contenuto */
  /* (le X dentro la barra rossa, .m-close, restano nella barra: vedi sotto) */
  #form-container .close-btn:not(.m-close),
  #form-container #btn-chiudi-form:not(.m-close),
  #btn-chiudi-form:not(.m-close),
  #info-close:not(.m-close),
  .modal-close:not(.m-close),
  #form-container [id$="-close"]:not(.m-close),
  .modal-overlay [id$="-close"]:not(.m-close),
  #ruoli-popup #ruoli-close:not(.m-close),
  #tipi-container #tipi-close:not(.m-close),
  #info-popup .close-btn:not(.m-close) {
    position: fixed !important;
    top: 10px !important;
    right: 12px !important;
    z-index: 1500 !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
    border: 0 !important;
    font: 400 26px/1 Arial, Helvetica, sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  /* Finestre con la barra rossa (.m-box): la barra resta ferma in alto con
     la X dentro, scorre solo il corpo. Niente piu' spazio vuoto sopra la barra. */
  #form-container > .m-box,
  .modal-overlay > .m-box,
  #ruoli-popup > .m-box,
  #tipi-container > .m-box {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .m-box > .m-corpo{ padding-bottom: 90px !important; }

  /* i campi del form a tutta larghezza */
  #form-container .row{ display: block !important; }
  #form-container .row[hidden]{ display: none !important; }
  #form-container input:not([type="checkbox"]):not([type="radio"]),
  #form-container select,
  #form-container textarea{
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
  }

  /* le tabelle dentro le finestre (patente, patentini) scorrono in orizzontale */
  #form-container table,
  .modal-overlay table{
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap;
  }
}

/* =====================================================================
   PATENTE CRI e PATENTINI su telefono
   Niente scorrimento laterale: ogni riga diventa un blocco verticale.
   ===================================================================== */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {

  /* --- Tabella tipi patente: due colonne strette, nessuno scroll --- */
  table.tab-patente{
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  table.tab-patente td:first-child{ width: auto; }
  table.tab-patente td:last-child{ width: 90px; text-align: center; }

  /* --- Patentini: ogni attrezzatura diventa una scheda verticale --- */
  table.tab-patentini{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  table.tab-patentini thead{ display: none !important; }
  table.tab-patentini tbody,
  table.tab-patentini tr,
  table.tab-patentini td{ display: block !important; width: 100% !important; }

  table.tab-patentini tr{
    border: 1px solid #ddd !important;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fff;
  }
  table.tab-patentini td{
    border: 0 !important;
    padding: 6px 0 !important;
  }
  /* nome dell'attrezzatura come titolo della scheda */
  table.tab-patentini td:first-child{
    font-weight: 800 !important;
    color: #b71c1c;
    font-size: .98rem;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 4px;
    text-align: left !important;
  }
  /* etichette sopra ai campi */
  table.tab-patentini td:nth-child(2)::before{ content: "Protocollo"; }
  table.tab-patentini td:nth-child(3)::before{ content: "Data ottenimento"; }
  table.tab-patentini td:nth-child(4)::before{ content: "Scadenza"; }
  table.tab-patentini td:nth-child(n+2)::before{
    display: block;
    font-size: .78rem;
    color: #666;
    font-weight: 700;
    margin-bottom: 3px;
  }
  table.tab-patentini input{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* le finestre non devono scorrere in orizzontale */
  #form-container > form,
  #form-container > div,
  .modal-overlay > div{
    overflow-x: hidden !important;
  }
  #form-container table.no-schede,
  .modal-overlay table.no-schede{
    display: block !important;
    overflow-x: visible !important;
    white-space: normal !important;
  }
  #form-container table.tab-patente{ display: table !important; }
}

/* Consenso privacy: casella piccola a sinistra, testo a capo accanto */
@media (max-width: 768px), (max-height: 520px) and (orientation: landscape){
  .gs-privacy{ padding: 14px !important; }
  .gs-privacy-check{ display: flex !important; align-items: flex-start !important; gap: 10px !important; }
  .gs-privacy-check input[type="checkbox"]{ width: 22px !important; height: 22px !important; min-width: 22px !important;
    flex: 0 0 22px !important; margin: 2px 0 0 !important; }
  .gs-privacy-check span{ flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important;
    word-break: normal !important; overflow-wrap: anywhere; }
}

/* =====================================================================
   correzioni telefono
   ===================================================================== */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape){
  /* Finestra "Info" (volontari, mezzi, materiali, emergenze, eventi):
     il riquadro stesso e' la finestra -> a tutto schermo, senza spostamento */
  #info-popup{
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    transform: none !important;
    width: 100% !important; max-width: 100% !important;
    height: 100% !important; max-height: 100% !important;
    border-radius: 0 !important; background: #fff !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    padding: 0 0 90px !important; box-sizing: border-box !important;
  }
  #info-popup.active{ display: flex !important; flex-direction: column !important; }
  #info-popup h3{
    border-radius: 0 !important; margin: 0 !important;
    padding: 16px 64px 16px 16px !important; font-size: 1.2rem !important;
    flex: 0 0 auto !important;
    /* la barra resta in alto mentre si scorre: la X (fissa) ci sta sempre sopra */
    position: sticky !important; top: 0 !important; z-index: 3 !important;
    min-height: 60px !important; box-sizing: border-box !important;
  }
  #info-popup #info-content{
    flex: 0 0 auto !important; overflow: visible !important; max-height: none !important;
    padding: 14px 16px !important; line-height: 1.6 !important; font-size: 15px !important;
    word-break: break-word; overflow-wrap: anywhere;
  }
  #info-popup > div:last-child:not(#info-content){ padding: 10px 16px !important; }
  #info-popup img, #info-popup table{ max-width: 100% !important; }

  /* Campi data/ora: su iPhone sono piu' larghi e piu' alti degli altri.
     Stessa larghezza e altezza dei campi di testo, mai oltre lo schermo. */
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]{
    -webkit-appearance: none !important; appearance: none !important;
    display: block !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 44px; height: 44px !important;
    padding: 0 12px !important; margin-left: 0 !important; margin-right: 0 !important;
    font: inherit; font-size: 16px !important; line-height: 44px !important;
    background: #fff !important; color: #222 !important;
    border: 1px solid #ccc; border-radius: 8px;
    text-align: left !important;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value{
    text-align: left !important; margin: 0 !important; min-height: 1.2em;
  }
  input[type="date"]::-webkit-datetime-edit,
  input[type="time"]::-webkit-datetime-edit,
  input[type="datetime-local"]::-webkit-datetime-edit{ padding: 0 !important; }

  /* nelle finestre niente esce dallo schermo: celle di griglie e flex
     possono stringersi, e le colonne affiancate vanno una sotto l'altra */
  .modal-overlay input, .modal-overlay select, .modal-overlay textarea,
  #form-container select, #form-container textarea,
  #ruoli-popup input, #ruoli-popup select,
  #tipi-container input, #tipi-container select{
    max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
  }
  .modal-overlay [style*="grid-template-columns"],
  #form-container [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
  .modal-overlay label, #form-container label{ min-width: 0; max-width: 100%; }
}

@media (max-width: 820px), (max-height: 520px) and (orientation: landscape){
  /* schede da tabella: il testo va a capo, pulsanti e menu scendono sotto */
  table.tabella-schede td{
    flex-wrap: wrap !important; align-items: center;
    white-space: normal !important; overflow-wrap: anywhere; word-break: break-word;
  }
  table.tabella-schede td > *{ max-width: 100%; }
  table.tabella-schede td > button, table.tabella-schede td > .action-btn{ margin: 3px 4px 3px 0; }
  /* Gestione ruoli: menu del ruolo a tutta larghezza sotto l'etichetta */
  #ruoli-popup .select-role{ flex: 1 1 100% !important; width: 100% !important; margin-top: 6px; min-height: 42px; }
  #ruoli-popup .role-badge{ white-space: nowrap; }
  /* finestra Info emergenze: spazio tra etichetta e valore */
  #info-popup .info-label{ margin-right: 6px; }
}

/* Documenti: i pulsanti della barra vanno a capo invece di uscire dallo schermo */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape){
  .toolbar .right{ flex: 1 1 100% !important; flex-wrap: wrap !important; min-width: 0 !important; }
  .toolbar .right .btn{ flex: 1 1 auto; justify-content: center; }
}

/* Telefono in orizzontale: menu compatto (logo piccolo) e che scorre */
@media (max-height: 520px) and (orientation: landscape){
  .sidebar > img, .sidebar img#logo-volontario, .sidebar .logo, .sidebar > a > img{
    width: 64px !important; height: auto !important; margin: 8px auto 6px !important;
  }
  .sidebar .menu, .sidebar #menu-sidebar{ flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  .sidebar .menu a{ padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* Telefono (verticale e orizzontale): scorre la PAGINA, non un riquadro interno.
   Alcune pagine bloccano html/body (pensato per il PC): qui lo sblocco sempre. */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape){
  html, body{ height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; }
  body.layout-admin .main, .layout-admin .main, main.main{ height: auto !important; max-height: none !important; overflow: visible !important; }
}