/* 修复模态框显示层级和位置问题 - 确保模态框像全屏加载一样显示在顶层居中 */

/* 确保模态背景遮罩在最顶层并正确显示 */
.modal-backdrop {
    z-index: 20000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

/* 当遮罩显示时确保可见 */
.modal-backdrop.show {
    opacity: 1 !important;
    display: block !important;
}

/* 遮罩淡入动画 */
.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}

.modal-backdrop.fade.show {
    opacity: 1;
}

/* 确保模态框容器在背景之上且覆盖全屏 */
.modal {
    z-index: 20001 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: none;
    overflow: hidden;
    outline: 0;
}

/* 当模态框显示时，使用 flex 布局居中显示对话框 */
.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 模态对话框的基本定位和样式 */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 0;
    pointer-events: none;
}

/* 确保模态内容可以接受点击事件 */
.modal.show .modal-dialog {
    pointer-events: auto;
}

/* 模态内容本身也需要能够接受点击事件 */
.modal-content {
    pointer-events: auto;
}