/* ==========================================================
   eBillSeva - Global Modal System
   Bootstrap 5 compatible
========================================================== */

/*
 * Bootstrap owns:
 * - modal display
 * - backdrop
 * - z-index
 * - body.modal-open
 * - focus trap
 *
 * This file only controls the scrollable modal layout.
 */

.modal {
    overscroll-behavior: contain;
}

/* ----------------------------------------------------------
   Scrollable Dialog
---------------------------------------------------------- */

.modal-dialog-scrollable {
    /*
     * Do NOT force height: 100%.
     * Bootstrap calculates the modal position/display itself.
     */
    max-height: calc(100% - 1rem);
}

/* ----------------------------------------------------------
   Scrollable Modal Content
---------------------------------------------------------- */

.modal-dialog-scrollable .modal-content {
    display: flex;
    flex-direction: column;

    /*
     * Allow Bootstrap to size the modal naturally while
     * keeping long forms inside the modal.
     */
    max-height: calc(100vh - 1rem);

    overflow: hidden;
}

/* ----------------------------------------------------------
   Modal Header
---------------------------------------------------------- */

.modal-dialog-scrollable .modal-header {
    flex: 0 0 auto;
}

/* ----------------------------------------------------------
   Form inside Modal
---------------------------------------------------------- */

.modal-dialog-scrollable .modal-content > form {
    min-height: 0;

    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* ----------------------------------------------------------
   Modal Body
---------------------------------------------------------- */

.modal-dialog-scrollable .modal-content > form > .modal-body {
    min-height: 0;

    flex: 1 1 auto;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    /*
     * Keep vertical finger movement inside the modal.
     */
    touch-action: pan-y;

    /*
     * Do not allow the page behind the modal to receive
     * overscroll from the modal body.
     */
    overscroll-behavior-y: contain;
}

/*
 * Support modals where modal-body is not directly under a form.
 */
.modal-dialog-scrollable .modal-content > .modal-body {
    min-height: 0;

    flex: 1 1 auto;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    touch-action: pan-y;

    overscroll-behavior-y: contain;
}

/* ----------------------------------------------------------
   Modal Footer
---------------------------------------------------------- */

.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

/* ----------------------------------------------------------
   Background Page
---------------------------------------------------------- */

body.modal-open {
    /*
     * Bootstrap already applies this behavior.
     * Keep it explicit for the application shell.
     */
    overflow: hidden;
}

/* ----------------------------------------------------------
   Form Controls
---------------------------------------------------------- */

.modal .form-control,
.modal .form-select {
    min-height: 42px;
}

.modal textarea.form-control {
    min-height: 96px;
}

/*
 * Do not apply pan-y to controls.
 * Native select/input interaction must remain untouched.
 */
.modal input,
.modal select,
.modal textarea,
.modal button {
    touch-action: manipulation;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 575.98px) {

    .modal-dialog {
        width: auto;
        margin: .5rem;
    }

    .modal-dialog-scrollable {
        /*
         * Use max-height instead of forcing height.
         * This prevents the dialog from interfering with
         * Bootstrap's modal visibility/transition.
         */
        max-height: calc(100svh - 1rem);
    }

    .modal-dialog-scrollable .modal-content {
        height: auto;
        max-height: calc(100svh - 1rem);

        border-radius: .75rem;
    }

    .modal-dialog-scrollable .modal-content > form {
        min-height: 0;
        max-height: 100%;
        flex: 1 1 auto;
    }

    .modal-dialog-scrollable .modal-content > form > .modal-body,
    .modal-dialog-scrollable .modal-content > .modal-body {
        min-height: 0;

        flex: 1 1 auto;

        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-y;

        overscroll-behavior-y: contain;

        padding: 1rem;
    }
}

/* ==========================================================
   DYNAMIC VIEWPORT
========================================================== */

@supports (height: 100dvh) {

    @media (max-width: 575.98px) {

        .modal-dialog-scrollable {
            max-height: calc(100dvh - 1rem);
        }

        .modal-dialog-scrollable .modal-content {
            max-height: calc(100dvh - 1rem);
        }
    }
}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .modal-dialog {
        margin: 0;
        min-height: 100svh;
    }

    .modal-dialog-scrollable {
        max-height: 100svh;
    }

    .modal-dialog-scrollable .modal-content {
        min-height: 100svh;
        max-height: 100svh;

        border-radius: 0;
    }
}

@supports (height: 100dvh) {

    @media (max-width: 380px) {

        .modal-dialog {
            min-height: 100dvh;
        }

        .modal-dialog-scrollable {
            max-height: 100dvh;
        }

        .modal-dialog-scrollable .modal-content {
            min-height: 100dvh;
            max-height: 100dvh;
        }
    }
}