/*
 * POSTECH / WASender Global Modal Fix
 * Version: 1.3.4
 * Scope: Bootstrap 4/5 modals across admin, user, gateway and frontend layouts.
 */

:root {
    --postech-modal-vh: 100vh;
    --postech-modal-gap: 20px;
    --postech-modal-z: 20000;
    --postech-modal-backdrop-z: 19990;
}

/* The project sidebar uses z-index 1060. Keep every dialog and backdrop above it. */
.modal-backdrop {
    position: fixed !important;
    z-index: var(--postech-modal-backdrop-z) !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--postech-modal-vh) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep the Bootstrap backdrop transparent and non-interactive; the modal surface handles dismissal. */
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.in {
    background: transparent !important;
    background-color: transparent !important;
    opacity: 0 !important;
}

.modal {
    position: fixed !important;
    z-index: var(--postech-modal-z) !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--postech-modal-vh) !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
}

.modal.show,
.modal.in {
    display: block;
}

/* Preserve Bootstrap sizes instead of forcing every dialog to the XL width. */
.modal .modal-dialog {
    position: relative !important;
    inset: auto !important;
    width: calc(100vw - (var(--postech-modal-gap) * 2)) !important;
    max-width: 560px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: var(--postech-modal-gap) auto !important;
    pointer-events: auto !important;
}

.modal .modal-dialog.modal-sm {
    max-width: 360px !important;
}

.modal .modal-dialog.modal-lg {
    max-width: 900px !important;
}

.modal .modal-dialog.modal-xl {
    max-width: 1140px !important;
}

.modal .modal-dialog-centered {
    display: flex !important;
    min-height: calc(var(--postech-modal-vh) - (var(--postech-modal-gap) * 2)) !important;
    align-items: center !important;
}

.modal .modal-dialog-centered::before {
    display: none !important;
    height: 0 !important;
    content: none !important;
}

.modal.fade:not(.show):not(.in) .modal-dialog {
    transform: translateY(-12px);
}

.modal.fade.show .modal-dialog,
.modal.fade.in .modal-dialog {
    transform: none !important;
}

.modal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(var(--postech-modal-vh) - (var(--postech-modal-gap) * 2)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    box-shadow: none !important;
}

/* WASender forms frequently wrap the modal sections directly. */
.modal .modal-content > form,
.modal .modal-content > .modal-form {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: inherit !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

.modal .modal-header,
.modal .modal-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
}

.modal .modal-body {
    position: relative;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
}

.modal .modal-footer {
    margin-top: auto;
}

.modal .close,
.modal .btn-close,
.modal [data-dismiss="modal"],
.modal [data-bs-dismiss="modal"] {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
    touch-action: manipulation;
}

/* Dropdowns and editors opened from a modal must stay above the current dialog. */
.select2-container--open,
.select2-dropdown,
.bootstrap-select.show .dropdown-menu,
.daterangepicker,
.datepicker,
.datetimepicker,
.flatpickr-calendar,
.tt-menu,
.ui-autocomplete {
    z-index: 20200 !important;
}

.swal2-container,
.tox-tinymce-aux,
.note-popover,
.note-modal {
    z-index: 20400 !important;
}

/* Prevent wide content from pushing a dialog outside the viewport. */
.modal table,
.modal img,
.modal video,
.modal iframe,
.modal canvas {
    max-width: 100%;
}

.modal .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.modal pre,
.modal code,
.modal td,
.modal th,
.modal label,
.modal p,
.modal .form-control,
.modal .input-group {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.modal-open {
    overflow: hidden !important;
}

body.modal-open #sidenav-main,
body.modal-open .wastech-sidenav-backdrop {
    pointer-events: none !important;
}

body:not(.modal-open) {
    padding-right: 0;
}

@media (max-width: 575.98px) {
    :root {
        --postech-modal-gap: 8px;
    }

    .modal .modal-dialog,
    .modal .modal-dialog.modal-sm,
    .modal .modal-dialog.modal-lg,
    .modal .modal-dialog.modal-xl {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    .modal .modal-content {
        max-height: calc(var(--postech-modal-vh) - 16px) !important;
        border-radius: 12px;
    }

    .modal .modal-dialog-centered {
        min-height: calc(var(--postech-modal-vh) - 16px) !important;
    }

    .modal .modal-header,
    .modal .modal-body,
    .modal .modal-footer {
        padding-right: 14px;
        padding-left: 14px;
    }

    .modal .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal .modal-footer .btn {
        min-height: 40px;
    }
}

@media (max-height: 600px) {
    :root {
        --postech-modal-gap: 8px;
    }

    .modal .modal-dialog {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .modal .modal-content {
        max-height: calc(var(--postech-modal-vh) - 16px) !important;
    }
}

html[dir="rtl"] .modal,
body.rtl .modal {
    direction: rtl;
    text-align: right;
}