/**
 * 模态框背景遮罩修复样式
 * 确保遮罩层不会阻止用户交互
 */

/* 确保模态框遮罩层的z-index不会过高 */
.modal-backdrop {
  z-index: 1040 !important;
  pointer-events: auto !important;
}

/* 确保模态框本身的z-index正确 */
.modal {
  z-index: 1050 !important;
}

/* 防止遮罩层阻止页面交互 */
.modal-backdrop:not(.show) {
  display: none !important;
}

/* 确保没有打开的模态框时，body可以正常交互 */
body:not(.modal-open) {
  pointer-events: auto !important;
  overflow: auto !important;
}

/* 修复可能的遮罩层样式问题 */
.modal-backdrop.fade:not(.show) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 确保模态框内容可以正常交互 */
.modal.show {
  pointer-events: auto !important;
}

.modal-content {
  pointer-events: auto !important;
}

/* 防止多个遮罩层叠加 */
.modal-backdrop + .modal-backdrop {
  display: none !important;
}

/* 紧急修复：如果检测到孤立的遮罩层，隐藏它们 */
.modal-backdrop:not([data-bs-backdrop]) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 深色模式适配 */
.dark-mode .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .modal-backdrop {
    z-index: 1040 !important;
  }
  
  .modal {
    z-index: 1050 !important;
  }
}

/* 调试模式：添加红色边框来识别问题遮罩层 */
.debug-mode .modal-backdrop:not(.show) {
  border: 2px solid red !important;
  background-color: rgba(255, 0, 0, 0.1) !important;
}

.debug-mode .modal-backdrop + .modal-backdrop {
  border: 2px solid orange !important;
  background-color: rgba(255, 165, 0, 0.1) !important;
}