/* Global fallback for preview modal + iframe (also in component scoped CSS). */
.student-portal-preview-modal {
    z-index: 2050;
    background: rgba(15, 23, 42, 0.55);
}

.student-portal-preview-modal .modal-content {
    border: 0;
    border-radius: 0;
}

.student-portal-preview-modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.student-portal-preview-frame {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    /* Flex % height can collapse to 0 — keep the frame visible. */
    min-height: calc(100vh - 3.5rem);
    border: 0;
    background: #fff;
}

/* Staff index.html sets html/body overflow:hidden and #app position:absolute.
   Inside the preview iframe that clips long pages (forms). Scroll #app instead,
   and stop .layout-main from trapping wheel events with a non-scrolling overflow. */
html:has(.student-portal-preview-shell) #app {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

html:has(.student-portal-preview-shell) .layout-main {
    overflow: visible !important;
}