:root {
    --app-dvh: 100vh;
    --app-keyboard-offset: 0px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --modal-z: 20000;
    --modal-backdrop-z: 19990;
    --offcanvas-z: 20010;
    --offcanvas-backdrop-z: 20005;
    --select2-z: 20050;
}

html,
body {
    min-height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

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

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

.offcanvas {
    z-index: var(--offcanvas-z);
}

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

.select2-container--open,
.select2-container--open .select2-dropdown,
.select2-dropdown,
.tox.tox-silver-sink,
.ck-body-wrapper {
    z-index: var(--select2-z) !important;
}

body.modal-open,
body.offcanvas-open {
    overflow: hidden;
    touch-action: manipulation;
    overscroll-behavior: none;
}

.modal,
.modal *,
.offcanvas,
.offcanvas * {
    pointer-events: auto;
}

.modal.show {
    display: block;
}

.modal,
.offcanvas,
.modal-content,
.offcanvas-body,
.modal-body {
    min-height: 0;
}

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

.modal-content,
.offcanvas {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-body,
.offcanvas-body {
    flex: 1 1 auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.modal-dialog {
    width: min(calc(100vw - 2rem), var(--bs-modal-width, 500px));
    max-width: calc(100vw - 2rem);
}

.modal-dialog-scrollable .modal-content,
.modal-dialog .modal-content {
    max-height: min(calc(var(--app-dvh) - var(--app-keyboard-offset) - 2rem), 100%);
}

.modal-header,
.modal-footer {
    flex-shrink: 0;
}

.modal-footer {
    gap: 0.75rem;
}

.modal-footer > * {
    max-width: 100%;
}

.modal-body .table-responsive,
.offcanvas-body .table-responsive {
    -webkit-overflow-scrolling: touch;
}

.modal .select2-container,
.offcanvas .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.modal input,
.modal select,
.modal textarea,
.offcanvas input,
.offcanvas select,
.offcanvas textarea {
    font-size: max(16px, 1rem);
}

.modal-backdrop.show,
.offcanvas-backdrop.show {
    opacity: 0.5;
}

.mobile-overlay-error {
    margin-bottom: 1rem;
}

.modal-open #chatFab,
.modal-open .chat-fab,
.modal-open [data-chat-fab],
.modal-open .support-fab,
.modal-open .support-button,
.modal-open .floating-support-btn,
.modal-open .open-chat-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

@supports (height: 100dvh) {
    .modal {
        height: var(--app-dvh);
    }

    .offcanvas {
        height: var(--app-dvh);
    }
}

@media (max-width: 991.98px) {
    .container,
    .container-fluid {
        padding-left: clamp(0.75rem, 3vw, 1rem);
        padding-right: clamp(0.75rem, 3vw, 1rem);
    }

    .app-content {
        padding-left: 0;
        padding-right: 0;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .btn-toolbar,
    .input-group,
    .pagination {
        flex-wrap: wrap;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .dropdown-menu {
        max-width: min(92vw, 28rem);
    }
}

@media (max-width: 575.98px) {
    .modal {
        padding: 0.5rem;
        overflow-y: auto;
    }

    .modal-dialog {
        margin: 0 auto;
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .modal-dialog.modal-dialog-centered {
        min-height: calc(var(--app-dvh) - 1rem);
        align-items: stretch;
    }

    .modal-content {
        width: 100%;
        max-height: calc(var(--app-dvh) - var(--app-keyboard-offset) - 1rem);
        min-height: 0;
        border-radius: 1rem;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
        padding-bottom: max(1rem, calc(var(--app-safe-bottom) + 0.75rem));
    }

    .modal-header,
    .modal-footer {
        position: sticky;
        z-index: 2;
        background: var(--bs-body-bg, #fff);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-border-color, #dee2e6) 35%, transparent);
    }

    .modal-header {
        top: 0;
        padding-top: max(0.75rem, calc(var(--app-safe-top) * 0.35 + 0.5rem));
    }

    .modal-footer {
        bottom: 0;
        padding-bottom: max(0.75rem, calc(var(--app-safe-bottom) + 0.35rem));
    }

    .modal-footer .btn,
    .modal-footer [type="submit"],
    .modal-footer [data-bs-dismiss] {
        flex: 1 1 100%;
        width: 100%;
        margin: 0 !important;
    }

    .modal-fullscreen-sm-down .modal-dialog,
    .modal-fullscreen-sm-down .modal-content {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: var(--app-dvh) !important;
        max-height: var(--app-dvh) !important;
        border-radius: 0 !important;
    }

    .modal-fullscreen-sm-down .modal-content {
        display: flex;
        flex-direction: column;
    }

    .modal-fullscreen-sm-down .modal-header {
        position: sticky;
        top: 0;
        background: var(--bs-body-bg, #fff);
    }

    .modal-fullscreen-sm-down .modal-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    .modal-fullscreen-sm-down .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--bs-body-bg, #fff);
        padding-bottom: max(0.75rem, calc(var(--app-safe-bottom) + 0.35rem));
    }

    .offcanvas,
    .offcanvas-sm,
    .offcanvas-md {
        max-width: 100vw;
        width: min(100vw, 100%);
    }

    .offcanvas-bottom {
        height: min(85vh, calc(var(--app-dvh) - 0.75rem));
        max-height: min(85vh, calc(var(--app-dvh) - 0.75rem));
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .offcanvas-header,
    .offcanvas-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .offcanvas-body {
        padding: 1rem;
        padding-bottom: max(1rem, calc(var(--app-safe-bottom) + 0.75rem));
    }
}

@media (max-width: 575.98px) {
    body.modal-open {
        overflow: hidden !important;
        touch-action: manipulation;
    }
}