/* ──────────────────────────────────────────────────────────
   Modal positioning fix — ensures the modal is always visible
   in the viewport regardless of how far the page is scrolled.

   The combination of these rules:
   1. Forces position:fixed (in case any framework or page CSS
      changes it to absolute).
   2. Locks the modal to the full viewport with top/left/right/bottom.
   3. Uses flexbox to vertically center .modal-dialog inside the
      modal — works on every screen size.
   4. Prevents inline height="600px !important" from forcing an
      unwanted height on the wrapper.
   ────────────────────────────────────────────────────────── */

.modal,
.modal#myModal,
.modal#fullModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important; /* override any inline height */
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1050;
}

    /* Vertically + horizontally center the dialog within the modal,
   even when the page is scrolled. Bootstrap 4 has .modal-dialog-centered
   for this, but applying it globally means we don't need to add the class
   to every modal markup. */
    .modal.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

        .modal.show .modal-dialog {
            margin: 1.75rem auto;
            /* Reserve a little breathing room from the top/bottom of the viewport */
            max-height: calc(100vh - 3.5rem);
            display: flex;
            flex-direction: column;
        }

        /* Allow the body to scroll inside the modal if content is taller than
   the dialog, instead of pushing the dialog off-screen. */
        .modal.show .modal-content {
            max-height: calc(100vh - 3.5rem);
            overflow: hidden;
        }

        .modal.show .modal-body {
            overflow-y: auto;
        }

/* Backdrop must stay attached to the viewport too */
.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1040;
}

/* ──────────────────────────────────────────────────────────
   Minimum modal size on medium screens and up (≥768px).
   On small screens the modal stays fluid so it doesn't
   overflow the viewport on phones.
   ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

    /* Apply to standard modal but NOT the full-screen modal — that
       one is meant to fill the viewport. */
    #myModal .modal-dialog {
        min-width: 800px;
        max-width: 90vw; /* don't overflow on smaller md screens (~768-900px) */
    }

    #myModal .modal-content {
        min-height: 600px;
    }

    /* Ensure the body grows to fill the dialog when content is short
       so the modal actually reaches its min-height visually. */
    #myModal .modal-body {
        flex: 1 1 auto;
    }
}

/* Below 768px (phones), let the modal use the full viewport width
   minus a small margin, and let height be content-driven. */
@media (max-width: 767.98px) {
    #myModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
}