/* ========================================================================== EWER MODAL LAYOUT SYSTEM v2 - SSOT - Keeps overlays above the topbar/sidebar. - Preserves compact, standard, form and detail modal sizes. - Uses one internal content scrollbar for tall dialogs. - Modal overlays are portalled to by app.js. ========================================================================== */ :root { --ewer-modal-layer: 1000000; --ewer-modal-gutter: clamp(0.75rem, 2vw, 1.5rem); } body.modal-open { overflow: hidden !important; } /* Default modal size. Individual workflows only override this variable. */ .modal-overlay { --ewer-modal-width: 46rem; } /* Compact confirmations and utility dialogs. */ #assignmentModal, #mobileAppModal { --ewer-modal-width: 25rem; } #restoreModal, #transitionCommentModal, #archiveCaseModal { --ewer-modal-width: 32rem; } #forgotPasswordModal, #forceUpdatePasswordModal, #setupSecurityQuestionModal, #customExportModal { --ewer-modal-width: 34rem; } /* Data-entry and administration workspaces. */ #newCaseModal, #newIncidentModal, #newRiskModal, #atiModal, #editUserModal, #newUserModal, #generateReportModal { --ewer-modal-width: 52rem; } /* Record-detail workspaces. */ #caseDetailModal, #incidentDetailModal, #riskDetailModal, #atiDetailModal { --ewer-modal-width: 68rem; } .modal-overlay:not(.hidden) { position: fixed !important; inset: 0 !important; width: 100dvw !important; height: 100dvh !important; min-width: 100dvw !important; min-height: 100dvh !important; margin: 0 !important; padding: var(--ewer-modal-gutter) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; z-index: var(--ewer-modal-layer) !important; background: rgba(15, 23, 42, 0.68) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .modal-overlay:not(.hidden) > .modal, .modal-overlay:not(.hidden) > .modal-content { position: relative !important; flex: 0 1 auto !important; width: min(100%, var(--ewer-modal-width)) !important; max-width: var(--ewer-modal-width) !important; max-height: calc(100dvh - 2rem) !important; margin: auto !important; padding: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } .modal-overlay:not(.hidden) > .modal > .modal-header, .modal-overlay:not(.hidden) > .modal-content > .modal-header { flex: 0 0 auto !important; min-width: 0; gap: 0.75rem; } .modal-overlay .modal-header .modal-title, .modal-overlay .modal-header > h2, .modal-overlay .modal-header > h3 { min-width: 0; margin-right: auto !important; overflow-wrap: anywhere; } /* Only the direct content area scrolls; nested forms keep their normal size. */ .modal-overlay:not(.hidden) > .modal > .modal-body, .modal-overlay:not(.hidden) > .modal > form, .modal-overlay:not(.hidden) > .modal-content > .modal-body, .modal-overlay:not(.hidden) > .modal-content > form { flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; box-sizing: border-box !important; } .modal-overlay .modal-footer, .modal-overlay .form-actions { flex: 0 0 auto; } @media (max-width: 640px) { :root { --ewer-modal-gutter: 0.5rem; } .modal-overlay:not(.hidden) { align-items: flex-start !important; } .modal-overlay:not(.hidden) > .modal, .modal-overlay:not(.hidden) > .modal-content { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 1rem) !important; border-radius: 0.75rem !important; } .modal-overlay .modal-header { flex-wrap: wrap; } }