/**
 * 设置页面布局增强
 * 专门优化设置页面的排版和侧边栏宽度
 * 只在设置页面激活时生效，不影响其他页面
 */

/* 当设置页面激活时，调整侧边栏宽度以更好地显示设置内容 */
body:has(.mobile-nav-item[data-target="settings-panel"].active) {
  --sidebar-width-settings: 480px; /* 设置页面专用的侧边栏宽度，增加到480px以显示更多文字 */
}

/* 电脑版设置页面侧边栏宽度调整 */
@media (min-width: 769px) {
  /* 当设置页面激活时，扩大侧边栏宽度 */
  body:has(.mobile-nav-item[data-target="settings-panel"].active) .sidebar {
    width: var(--sidebar-width-settings, 480px) !important;
    min-width: var(--sidebar-width-settings, 480px) !important;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  /* 相应调整地图控件位置 */
  body:has(.mobile-nav-item[data-target="settings-panel"].active) .leaflet-control-zoom {
    left: calc(var(--sidebar-width-settings, 480px) + 20px) !important;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  body:has(.mobile-nav-item[data-target="settings-panel"].active) .leaflet-control-locate {
    left: calc(var(--sidebar-width-settings, 480px) + 20px) !important;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  body:has(.mobile-nav-item[data-target="settings-panel"].active) .leaflet-control-random {
    left: calc(var(--sidebar-width-settings, 480px) + 20px) !important;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

/* 设置项统一高度和排版优化 */
.ios-settings-item {
  /* 确保所有设置项有足够高度显示完整文字 */
  display: flex !important;
  align-items: flex-start !important; /* 改为顶部对齐，适应多行文字 */
  min-height: 72px !important; /* 稍微减少基础高度 */
  height: auto !important; /* 允许高度自适应内容 */
  padding: 18px 22px !important; /* 稍微减少内边距 */
  box-sizing: border-box !important;
}

/* 设置项图标统一尺寸 */
.ios-settings-icon {
  width: 34px !important; /* 稍微减小基础图标尺寸 */
  height: 34px !important;
  border-radius: 9px !important;
  flex-shrink: 0 !important;
  margin-right: 18px !important; /* 减少图标与文字的间距 */
  margin-top: 3px !important; /* 调整对齐 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ios-settings-icon i {
  font-size: 18px !important; /* 稍微减小基础图标字体 */
  color: white !important;
}

/* 设置项内容区域优化 */
.ios-settings-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* 改为顶部对齐 */
  min-height: 36px !important;
  overflow: visible !important; /* 允许内容溢出以显示完整文字 */
  padding-top: 2px !important; /* 轻微向下偏移以与图标对齐 */
  /* 不限制最大宽度，让箭头自然推到右边 */
}

/* 设置项标题统一样式 */
.ios-settings-title {
  font-size: 15px !important; /* 稍微减小基础标题字体 */
  font-weight: 500 !important;
  line-height: 1.25 !important; /* 减少行高 */
  margin: 0 0 1px 0 !important; /* 减少与描述的间距 */
  color: var(--text-color) !important;
  /* 允许标题换行以显示完整内容 */
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  max-width: 100% !important;
}

/* 设置项描述统一样式 */
.ios-settings-description {
  font-size: 12px !important; /* 稍微减小基础描述字体 */
  line-height: 1.3 !important; /* 减少行高 */
  margin: 0 !important; /* 移除间距 */
  color: var(--secondary-text) !important;
  opacity: 0.8 !important;
  /* 允许描述换行以显示完整内容 */
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  max-width: 100% !important;
}

/* 设置项控件区域优化 */
.ios-settings-control {
  margin-left: 20px !important; /* 增加与内容的间距 */
  display: flex !important;
  align-items: flex-start !important; /* 改为顶部对齐 */
  flex-shrink: 0 !important;
  min-width: 80px !important; /* 增加控件区域宽度 */
  justify-content: flex-end !important;
  padding-top: 8px !important; /* 轻微向下偏移以与文字对齐 */
}

/* 设置项右侧箭头优化 */
.ios-settings-arrow {
  margin-left: auto !important; /* 自动推到最右边 */
  padding-left: 16px !important; /* 增加左侧间距，推得更远 */
  padding-right: 4px !important; /* 增加右侧间距，不贴边 */
  display: flex !important;
  align-items: center !important;
  color: #C7C7CC !important;
  font-size: 14px !important;
  flex-shrink: 0 !important; /* 防止箭头被压缩 */
}

/* 可点击设置项的特殊布局优化 */
.ios-settings-item.clickable {
  justify-content: space-between !important; /* 确保内容和箭头分布在两端 */
}

.ios-settings-item.clickable .ios-settings-content {
  flex: 1 !important;
  margin-right: 8px !important; /* 与箭头保持间距 */
}

/* 设置组间距优化 */
.ios-settings-group {
  margin-bottom: 24px !important; /* 减少组间距 */
}

.ios-settings-group:last-child {
  margin-bottom: 16px !important; /* 减少最后一组的底部间距 */
}

/* 电脑版设置组间距进一步优化 */
@media (min-width: 769px) {
  .ios-settings-group {
    margin-bottom: 20px !important; /* 电脑版更紧凑的组间距 */
  }

  .ios-settings-group:last-child {
    margin-bottom: 12px !important;
  }
}

/* 设置组标题优化 */
.ios-settings-group-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 14px 20px !important; /* 减少底部间距 */
  padding-top: 18px !important; /* 减少顶部间距 */
  color: var(--primary-color) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  opacity: 0.9 !important;
}

/* 第一个设置组的标题不需要顶部间距 */
.ios-settings-group:first-child .ios-settings-group-title {
  padding-top: 0 !important;
}

/* 设置面板整体优化 */
#settings-panel {
  padding: 20px !important;
}

/* 电脑版设置面板额外优化 */
@media (min-width: 769px) {
  #settings-panel {
    padding: 20px !important; /* 减少面板内边距 */
    max-width: none !important;
  }

  /* 设置项在电脑版上紧凑但信息密度高 */
  .ios-settings-item {
    min-height: 64px !important; /* 减少最小高度，提高信息密度 */
    height: auto !important; /* 允许高度自适应 */
    padding: 16px 24px !important; /* 减少内边距，更紧凑 */
  }
  
  .ios-settings-icon {
    width: 36px !important; /* 稍微减小图标尺寸 */
    height: 36px !important;
    margin-right: 18px !important; /* 减少图标间距 */
    margin-top: 4px !important; /* 调整对齐 */
  }
  
  .ios-settings-icon i {
    font-size: 20px !important; /* 稍微减小图标字体 */
  }

  .ios-settings-title {
    font-size: 16px !important; /* 保持合适的标题字体大小 */
    line-height: 1.2 !important; /* 减少行高，更紧凑 */
    margin-bottom: 2px !important; /* 减少标题与描述的间距 */
  }

  .ios-settings-description {
    font-size: 13px !important; /* 稍微减小描述字体 */
    line-height: 1.3 !important; /* 减少行高，更紧凑 */
    margin-top: 0 !important; /* 移除顶部间距 */
  }
  
  .ios-settings-control {
    margin-left: 18px !important; /* 减少控件间距 */
    min-width: 80px !important; /* 减少控件区域宽度 */
    padding-top: 6px !important; /* 调整对齐 */
  }

  /* 电脑版箭头优化 */
  .ios-settings-arrow {
    padding-left: 20px !important; /* 电脑版更大的左侧间距 */
    padding-right: 6px !important; /* 电脑版更大的右侧间距 */
    font-size: 15px !important; /* 电脑版稍大的箭头 */
  }

  /* 电脑版内容区域优化 */
  .ios-settings-content {
    /* 不限制宽度，让箭头自然推到右边 */
    padding-top: 2px !important; /* 减少顶部间距 */
  }

  /* 电脑版可点击设置项的内容区域 */
  .ios-settings-item.clickable .ios-settings-content {
    margin-right: 12px !important; /* 电脑版与箭头保持更大间距 */
  }
  
  .ios-settings-group-title {
    margin-left: 20px !important; /* 减少左边距 */
    margin-bottom: 12px !important; /* 减少底部间距 */
    padding-top: 16px !important; /* 减少顶部间距 */
    font-size: 12px !important; /* 稍微减小字体 */
  }

  .ios-settings-group:first-child .ios-settings-group-title {
    padding-top: 0 !important;
  }
}

/* 移动端精致化设计 - 对齐桌面版风格 */
@media (max-width: 768px) {
  /* 移动端不调整侧边栏宽度 */
  body:has(.mobile-nav-item[data-target="settings-panel"].active) {
    --sidebar-width-settings: 100vw;
  }

  /* 移动端设置项精致化 */
  .ios-settings-item {
    min-height: 64px !important; /* 减少高度，提高信息密度 */
    height: auto !important; /* 允许高度自适应 */
    padding: 14px 16px !important; /* 减少内边距 */
  }

  .ios-settings-icon {
    width: 32px !important; /* 减小图标尺寸 */
    height: 32px !important;
    margin-right: 14px !important; /* 减少图标间距 */
    margin-top: 2px !important; /* 调整对齐 */
    border-radius: 8px !important; /* 减少圆角 */
  }

  .ios-settings-icon i {
    font-size: 16px !important; /* 减小图标字体 */
  }

  .ios-settings-title {
    font-size: 16px !important; /* 保持可读性 */
  }

  .ios-settings-description {
    font-size: 13px !important; /* 保持描述字体 */
  }

  .ios-settings-control {
    margin-left: 12px !important; /* 减少控件间距 */
    min-width: 80px !important; /* 增加控件宽度以适应内容 */
    padding-top: 6px !important; /* 调整对齐 */
  }

  /* 移动端内容区域优化 */
  .ios-settings-content {
    /* 不限制宽度，让箭头自然推到右边 */
    padding-top: 2px !important; /* 调整对齐 */
    min-height: 36px !important; /* 减少最小高度 */
  }

  /* 移动端可点击设置项的内容区域 */
  .ios-settings-item.clickable .ios-settings-content {
    margin-right: 8px !important; /* 移动端与箭头保持适中间距 */
  }

  /* 移动端箭头优化 */
  .ios-settings-arrow {
    padding-left: 12px !important; /* 移动端适中的左侧间距 */
    padding-right: 3px !important; /* 移动端适中的右侧间距 */
    font-size: 14px !important; /* 稍微增大箭头以保持可见性 */
  }

  #settings-panel {
    padding: 12px !important; /* 减少面板内边距 */
  }

  .ios-settings-group-title {
    margin-left: 18px !important; /* 减少左边距 */
    margin-bottom: 12px !important;
    padding-top: 16px !important;
    font-size: 12px !important; /* 减小组标题字体 */
  }

  .ios-settings-group {
    margin-bottom: 16px !important; /* 减少组间距 */
  }
}

/* 确保设置项悬停效果在统一高度下正常工作 */
.ios-settings-item:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%) !important;
  transform: translateY(-1px) !important;
}

.dark-mode .ios-settings-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  transform: translateY(-1px) !important;
}

/* 确保开关控件在统一高度下居中 */
.ios-settings-item .form-check-input {
  margin: 0 !important;
}

/* 确保下拉菜单在统一高度下居中 */
.ios-settings-item .form-select {
  margin: 0 !important;
  min-height: 36px !important;
}

/* 确保按钮在统一高度下居中 */
.ios-settings-item .btn {
  margin: 0 !important;
  min-height: 36px !important;
}

/* 平滑过渡效果 */
.sidebar,
.leaflet-control-zoom,
.leaflet-control-locate,
.leaflet-control-random {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}