/*
 * QAME v8.12.18
 * TARGETED TALL-MODAL FIT / ACTION VISIBILITY
 *
 * IMPORTANT:
 * This stylesheet is generated by the installer with ONLY the IDs of
 * tall modals detected in the current project.
 *
 * It does NOT target .modal globally.
 * It preserves the Sneat / Bootstrap native modal baseline.
 *
 * Goals for selected long modals:
 * - modal fits within the viewport
 * - close button/header stays visible
 * - Save/Cancel footer stays visible
 * - only modal body scrolls
 * - feature-specific width and form fields remain untouched
 */

#addFDModal .modal-dialog,
#addSchoolModal .modal-dialog,
#createTemplateModal .modal-dialog,
#wappRoutingRuleModal .modal-dialog {
    max-height: calc(100dvh - 2rem);
}

@supports not (height: 100dvh) {
#addFDModal .modal-dialog,
#addSchoolModal .modal-dialog,
#createTemplateModal .modal-dialog,
#wappRoutingRuleModal .modal-dialog {
        max-height: calc(100vh - 2rem);
    }
}

#addFDModal .modal-content,
#addSchoolModal .modal-content,
#createTemplateModal .modal-content,
#wappRoutingRuleModal .modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

@supports not (height: 100dvh) {
#addFDModal .modal-content,
#addSchoolModal .modal-content,
#createTemplateModal .modal-content,
#wappRoutingRuleModal .modal-content {
        max-height: calc(100vh - 2rem);
    }
}

/*
 * Several QAME long modals wrap header/body/footer inside a <form>.
 * Bootstrap's modal-dialog-scrollable does not automatically make that
 * intermediate form a flex container, which can push Save/Cancel below
 * the viewport. Fix only those detected modals.
 */
#addFDModal .modal-content > form,
#addSchoolModal .modal-content > form,
#createTemplateModal .modal-content > form,
#wappRoutingRuleModal .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
    overflow: hidden;
}

#addFDModal .modal-header,
#addSchoolModal .modal-header,
#createTemplateModal .modal-header,
#wappRoutingRuleModal .modal-header,
#addFDModal .modal-footer,
#addSchoolModal .modal-footer,
#createTemplateModal .modal-footer,
#wappRoutingRuleModal .modal-footer {
    flex: 0 0 auto;
}

#addFDModal .modal-body,
#addSchoolModal .modal-body,
#createTemplateModal .modal-body,
#wappRoutingRuleModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#addFDModal .modal-footer,
#addSchoolModal .modal-footer,
#createTemplateModal .modal-footer,
#wappRoutingRuleModal .modal-footer {
    position: relative;
    z-index: 3;
    margin-top: 0;
    background: #fff;
}

/* Keep controls usable on smaller screens without changing modal width. */
@media (max-width: 767.98px) {
#addFDModal .modal-dialog,
#addSchoolModal .modal-dialog,
#createTemplateModal .modal-dialog,
#wappRoutingRuleModal .modal-dialog {
        max-height: calc(100dvh - 1rem);
    }

#addFDModal .modal-content,
#addSchoolModal .modal-content,
#createTemplateModal .modal-content,
#wappRoutingRuleModal .modal-content {
        max-height: calc(100dvh - 1rem);
    }

    @supports not (height: 100dvh) {
#addFDModal .modal-dialog,
#addSchoolModal .modal-dialog,
#createTemplateModal .modal-dialog,
#wappRoutingRuleModal .modal-dialog {
            max-height: calc(100vh - 1rem);
        }

#addFDModal .modal-content,
#addSchoolModal .modal-content,
#createTemplateModal .modal-content,
#wappRoutingRuleModal .modal-content {
            max-height: calc(100vh - 1rem);
        }
    }
}