/**
 * 设置模态框层级修复
 * 确保所有设置用途的模态框在手机版上位于顶层（高于底部导航栏）
 */

/* 设置所有iOS风格设置模态框的z-index高于底部导航栏 */
.ios-settings-modal {
  z-index: 1200 !important; /* 高于底部导航栏的1102 */
}

/* 确保模态框背景遮罩也位于底部导航栏之上 */
.modal-backdrop {
  z-index: 1150 !important; /* 在底部导航栏之上，但在模态框之下 */
}

/* 确保语言设置模态框也位于顶层 */
#language-settings-modal {
  z-index: 1200 !important;
}

/* 确保天气单位设置模态框也位于顶层 */
#weather-units-modal {
  z-index: 1200 !important;
}

/* 确保API设置模态框也位于顶层 */
#api-settings-modal {
  z-index: 1200 !important;
}

/* 确保地图图层设置模态框也位于顶层 */
#map-layer-modal {
  z-index: 1200 !important;
}

/* 确保标记点显示设置模态框也位于顶层 */
#marker-display-modal {
  z-index: 1200 !important;
}

/* 确保附近功能设置模态框也位于顶层 */
#nearby-settings-modal {
  z-index: 1200 !important;
}

/* 确保主题设置模态框也位于顶层 */
#theme-settings-modal {
  z-index: 1200 !important;
}

/* 确保无障碍朗读设置模态框也位于顶层 */
#accessibility-settings-modal {
  z-index: 1200 !important;
}

/* 确保移动图片质量设置模态框也位于顶层 */
#mobile-image-settings-modal {
  z-index: 1200 !important;
}

/* 确保API测试模态框也位于顶层 */
#api-test-modal {
  z-index: 1210 !important; /* 比普通设置模态框更高一级 */
}

/* 确保地图源选择模态框保持最高层级 */
.map-source-modal {
  z-index: 99999 !important; /* 保持原有的最高层级 */
}

/* 移动设备特定样式 */
@media (max-width: 768px) {
  /* 确保模态框在打开时，底部导航栏不会遮挡模态框内容 */
  body.modal-open .mobile-nav {
    z-index: 1102 !important; /* 保持原有z-index，但确保不会高于模态框 */
  }
  
  /* 确保模态框打开时，底部导航栏不会出现在模态框之上 */
  .modal.show ~ .mobile-nav {
    z-index: 1102 !important; /* 保持原有z-index */
  }
}

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