/* 移动端设置页面滚动修复 - 增强版 */

/* 强制设置面板在移动端可以滚动 */
@media (max-width: 768px) {
  /* 设置面板容器样式 */
  #settings-panel {
    height: 100vh !important; /* 使用视口高度 */
    max-height: calc(100vh - 50px) !important; /* 减去底部导航栏高度 */
    overflow-y: scroll !important; /* 强制启用滚动 */
    -webkit-overflow-scrolling: touch !important; /* 提供iOS流畅滚动 */
    padding-bottom: 100px !important; /* 为底部导航栏留出足够空间 */
    padding-top: 0 !important; /* 移除顶部填充 */
    margin-top: 0 !important; /* 移除顶部边距 */
    position: relative !important;
    z-index: 10 !important; /* 确保在其他元素之上 */
    touch-action: pan-y !important; /* 允许垂直滚动手势 */
  }

  /* 当设置页面激活时，调整侧边栏内容区域 */
  body:has(.mobile-nav-item[data-target="settings-panel"].active) .sidebar-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 在移动端指南和设置页面中隐藏侧边栏标题区域 */
  body:has(.mobile-nav-item[data-target="guide-panel"].active) .sidebar-header,
  body:has(.mobile-nav-item[data-target="settings-panel"].active) .sidebar-header {
    display: none !important;
  }

  /* 设置标签内容区域样式 */
  #settings-tab-content {
    overflow-y: visible !important;
    height: auto !important;
  }

  /* 确保所有设置选项卡内容可滚动 */
  #map-settings,
  #appearance-settings,
  #api-settings {
    overflow-y: visible !important;
    height: auto !important;
    min-height: 200px !important; /* 确保有足够的内容高度 */
  }

  /* 修复Android设备上的滚动问题 */
  .android-device #settings-panel {
    -webkit-transform: translateZ(0) !important; /* 启用硬件加速 */
    transform: translateZ(0) !important;
    will-change: scroll-position !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* 确保底部按钮不会被底部导航栏遮挡 */
  #settings-panel .d-grid {
    margin-bottom: 80px !important;
    padding-bottom: 20px !important;
  }

  /* 确保iOS风格设置页面底部按钮不会被底部导航栏遮挡 */
  #settings-panel .ios-settings-buttons {
    margin-bottom: 120px !important; /* 增加底部边距 */
    padding-bottom: 50px !important; /* 增加底部填充 */
  }

  /* 修复侧边栏容器在移动端的滚动问题 */
  #sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 确保侧边栏内容区域可滚动 */
  .sidebar-content {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 确保内容面板可滚动 */
  .content-panel {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* 修复设置面板在不同浏览器上的滚动问题 */
.safari-browser #settings-panel,
.chrome-browser #settings-panel {
  -webkit-overflow-scrolling: touch !important;
}

/* 确保设置面板在移动端有足够的内边距 */
@media (max-width: 768px) {
  #settings-panel {
    padding: 15px !important;
  }

  /* 确保设置面板中的表单元素有足够的点击区域 */
  #settings-panel .form-check,
  #settings-panel .form-select,
  #settings-panel .form-control {
    margin-bottom: 15px !important;
    min-height: 44px !important; /* 确保有足够的触摸区域 */
  }

  /* 确保设置面板中的按钮有足够的点击区域 */
  #settings-panel .btn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 确保设置选项卡有足够的点击区域 */
  #settings-tabs .nav-link {
    padding: 10px 15px !important;
    min-height: 44px !important;
  }

  /* 确保设置部分有足够的间距 */
  .settings-section {
    margin-bottom: 25px !important;
  }

  /* 修复设置面板中的滚动问题 */
  #settings-panel::-webkit-scrollbar {
    width: 4px !important;
  }

  #settings-panel::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
  }

  /* 防止内容被底部导航栏遮挡 */
  body.has-mobile-nav .content-panel {
    padding-bottom: 70px !important;
  }

  /* 确保恢复默认按钮在移动端有足够的底部间距 */
  .ios-settings-buttons {
    padding-bottom: 20px !important;
  }
}