/* 全局修复 vue3-puzzle-vcode 层级问题 - 增强版 */

/* 主要的验证码容器 - 使用更高的z-index */
.vcodeImg-box,
.vcodeImg,
.vcodeImg-Wrap {
  z-index: 9999 !important;
  position: fixed !important;
}

/* 移动滑块 */
.move-box {
  z-index: 10000 !important;
  position: relative !important;
}

/* 验证码背景遮罩 */
.vcodeImg-mask {
  z-index: 9998 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

/* 确保验证码在最顶层显示 - 增强选择器 */
div[class*="vcode"],
.vcode,
[class^="vcode"],
[class$="vcode"] {
  z-index: 9999 !important;
}

/* 特殊情况：确保验证码容器高于所有弹窗 */
body > div[class*="vcode"],
body > .vcodeImg-box,
#app div[class*="vcode"],
.el-overlay + div[class*="vcode"] {
  z-index: 10001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 覆盖Element Plus的最高层级 */
.el-overlay-dialog {
  z-index: 9997 !important;
}

/* 强制覆盖任何可能的样式 */
html body div.vcodeImg-box,
html body .vcodeImg,
html body .vcodeImg-Wrap {
  z-index: 10002 !important;
  position: fixed !important;
}

/* 专门处理打包后可能出现的问题 */
div[data-v-*][class*="vcode"],
div[data-v-*].vcodeImg-box {
  z-index: 10003 !important;
  position: fixed !important;
}

/* 确保滑块拖拽时在最顶层 */
.vcodeImg-Wrap .move-box,
.vcodeImg .move-box {
  z-index: 10004 !important;
  position: relative !important;
}

/* 修复可能的CSS模块化冲突 */
:global(.vcodeImg-box),
:global(.vcodeImg),
:global(.vcodeImg-Wrap) {
  z-index: 10005 !important;
  position: fixed !important;
}
