/*
 * On mobile, ignore the custom max_width set by insoles_form.js
 * (it's meant for desktop only). Let Bootstrap's default modal
 * responsive behavior take over on phones.
 */

@media (max-width: 767.98px) {

    /* Override the inline maxWidth set by insoles_form.js so the modal
       falls back to Bootstrap's default responsive sizing on phones. */
    #insoles-instance-forms .modal-dialog,
    #insoles-detail .modal-dialog,
    #pdf-preview-modal .modal-dialog {
        max-width: none !important;
    }

    #pdf-preview-modal {
        overscroll-behavior: contain;
    }

    #pdf-preview-modal .modal-dialog {
        min-height: calc(100dvh - 1rem);
    }

    #pdf-preview-modal .modal-content {
        max-height: calc(100dvh - 1rem);
    }

    #pdf-preview-modal .modal-body {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: contain;
        touch-action: pan-x pan-y;
    }

    #pdf-preview-modal .pdf-preview-frame {
        display: block;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

body.pdf-preview-scroll-locked {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}