/* ============================================================================
   MODAL KEYBOARD FIX v2 — caricato DOPO app.css.

   Problema risolto:
   Su iOS con tastiera aperta:
   - layout viewport (innerHeight) = es. 619px (escluso keyboard)
   - visualViewport.height       = es. 428px (escluso keyboard + accessory bar)
   - visualViewport.offsetTop    = es. 156px (shift verso il basso per input)
   Quindi:
   - sopra il visualViewport (y=0..156) c'e' una fascia di layout NON visibile
     (la copre la URL bar di Safari, simil "headroom")
   - sotto il visualViewport (y=584..619) un'altra fascia non visibile
     (la copre la accessory bar ^ v ✓)
   Se il modal ha solo height: visualViewport.height, lascia 35px scoperti
   in fondo dove appare la pagina retrostante.

   Soluzione:
   - L'OVERLAY copre TUTTO il layout viewport (top:0; bottom:0) cosi' il dim
     copre ogni pixel scoperto, niente bleed-through.
   - Il DIALOG dentro l'overlay viene "spinto" dalla padding-top/bottom
     dell'overlay esattamente nella fascia visualViewport, cosi' header e
     footer restano nella zona visibile dell'utente.
   ============================================================================ */

/* Custom property fallback (se JS non gira ancora) */
:root {
    --vv-offset-top: 0px;
    --vv-offset-bottom: 0px;
    --app-vh: 100svh;
}

/* OVERLAY: copre tutto il layout viewport (nessun gap) */
body .modal-overlay-minimal,
body .modal-overlay,
body .progetti-modal-overlay,
body .clienti-modal-overlay,
body .firma-overlay,
body .modal-backdrop:not(.show):not(.fade) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: 100vw !important;
    transform: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Spinge il contenuto (dialog) nella fascia visualViewport */
    padding-top: var(--vv-offset-top, 0px) !important;
    padding-bottom: var(--vv-offset-bottom, 0px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

/* Bootstrap modal: idem */
body .modal.show.d-block,
body .modal.fade.show {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    padding-top: var(--vv-offset-top, 0px) !important;
    padding-bottom: var(--vv-offset-bottom, 0px) !important;
    box-sizing: border-box !important;
}

/* DIALOG: riempie il content-box dell'overlay (= visualViewport) */
@media (max-width: 768px) {
    body .modal-overlay-minimal > .modal-dialog-minimal,
    body .modal-overlay > .modal-dialog,
    body .modal-overlay > .modal-box,
    body .progetti-modal-overlay > .progetti-modal-dialog,
    body .clienti-modal-overlay > .clienti-modal-dialog,
    body .firma-overlay > .firma-modal,
    body .modal-backdrop > .modal-container {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
}