/* =========================================================
   GLOBAL OVERLAY / MODAL Z-INDEX SYSTEM
   Bootstrap 5 compatible values.
   ========================================================= */
:root {
    --app-z-base: 1;
    --app-z-sticky: 100;
    --app-z-dropdown: 1000;
    --app-z-backdrop: 1050;
    --app-z-modal: 1055;
    --app-z-popover: 1070;
    --app-z-datepicker: 1075;
    --app-z-tooltip: 1080;
    --app-z-toast: 1090;
    --app-z-alert: 1100;
}

/* Keep Bootstrap overlays outside application stacking contexts. */
.modal {
    z-index: var(--app-z-modal);
}

.modal-backdrop {
    z-index: var(--app-z-backdrop);
}

.modal .invalid-feedback {
    position: static;
    display: block;
}

.modal .is-invalid + .invalid-feedback,
.modal .is-invalid ~ .invalid-feedback {
    display: block;
}

/* Third-party overlays must remain usable while a modal is open. */
.select2-container,
.select2-dropdown {
    z-index: var(--app-z-popover);
}

.flatpickr-calendar,
#ui-datepicker-div {
    z-index: var(--app-z-datepicker) !important;
}

.toast-container,
#toast-container,
.toast,
.toastr,
.notification-container,
.app-notification,
.global-notification,
.swal2-container,
.alertify,
.alertify-notifier {
    z-index: var(--app-z-toast) !important;
}

.global-error,
.validation-error-container,
.form-error-container,
.alert-container {
    position: relative;
    z-index: var(--app-z-alert);
}

/* Select2 validation state is shown on the visible replacement control. */
.modal .select2-container .select2-selection.is-invalid,
.modal .select2-container.is-invalid .select2-selection {
    border-color: var(--bs-form-invalid-border-color, #dc3545) !important;
}

/* Native Bootstrap scrolling remains the source of truth for modal bodies. */
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
}

@media (max-width: 575.98px) {
    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - .5rem);
    }
}