/*
 * 移动端底部导航栏优化
 * 提供更精致、美观、好用的移动端底部导航栏UI
 */

/* 底部导航栏基础样式优化 */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px; /* 略微增加高度以提供更好的点击区域 */
  z-index: 1102 !important; /* 确保在抽屉之上 */
  justify-content: space-around;
  align-items: center;

  /* 优化背景效果 - 更精致的磨砂玻璃效果 */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);

  /* 优化边框和阴影 - 更精细的边框和柔和的阴影 */
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);

  /* 添加顶部圆角 - 更大的圆角半径 */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  /* 确保iOS底部安全区域适配 */
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);

  /* 移除所有可能导致导航栏移动的过渡动画 */
  transition: opacity 0.35s cubic-bezier(0.28, 0.11, 0.32, 1);

  /* 性能优化 - 确保导航栏始终固定在底部 */
  will-change: opacity;
  transform: none !important;
  -webkit-transform: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 导航项基础样式优化 */
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  cursor: pointer;
  position: relative;

  /* 优化内边距和间距 */
  padding: 7px 0 9px;

  /* 优化过渡效果 - 使用iOS风格的弹性曲线 */
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);

  /* 默认状态下的透明度 - 提高一点以增强可见性 */
  opacity: 0.8;

  /* 增加点击区域 */
  min-width: 64px;

  /* 移除可能的背景色 */
  background-color: transparent !important;

  /* 添加触摸反馈 */
  -webkit-tap-highlight-color: transparent;
}

/* 导航项图标样式优化 */
.mobile-nav-item i {
  font-size: 1.3rem; /* 略微增大图标 */
  margin-bottom: 4px; /* 增加与文本的间距 */
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  color: var(--secondary-text);

  /* 添加微妙的阴影效果增强可读性 - 减小阴影使其更精致 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);

  /* 确保图标居中对齐 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px; /* 固定高度确保一致性 */
}

/* 导航项文本样式优化 */
.mobile-nav-item span {
  font-size: 0.75rem; /* 略微增大字体 */
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  color: var(--secondary-text);
  line-height: 1;
  margin-top: 1px; /* 微调间距 */

  /* 添加微妙的阴影效果增强可读性 - 减小阴影使其更精致 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* 导航项悬停效果优化 */
.mobile-nav-item:hover {
  opacity: 0.95;
  background-color: transparent !important;
}

.mobile-nav-item:hover i {
  /* 移除向上移动效果，保留颜色变化 */
  color: var(--primary-dark);
}

.mobile-nav-item:hover span {
  color: var(--primary-dark);
  /* 移除向下移动效果 */
}

/* 导航项激活状态优化 */
.mobile-nav-item.active {
  opacity: 1;
  background-color: transparent !important;
  box-shadow: none !important;
}

.mobile-nav-item.active i,
.mobile-nav-item.active span {
  color: var(--primary-dark);
  font-weight: 600;
}

/* 添加激活指示器 - 使用点状指示器而非线条，更符合iOS风格 */
.mobile-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 6px; /* 调整位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 5px; /* 小圆点 */
  height: 5px; /* 小圆点 */
  border-radius: 50%; /* 圆形 */
  background-color: var(--primary-dark);
  opacity: 1;
  box-shadow: 0 0 6px var(--primary-color);
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}

/* 移除点击反馈效果中的缩放和移动 */
.mobile-nav-item:active {
  opacity: 1;
}

.mobile-nav-item:active i {
  color: var(--primary-dark);
}

/* 深色模式适配 - 更精致的深色模式效果 */
.dark-mode .mobile-nav {
  background: rgba(25, 25, 30, 0.85); /* 更深的背景色，降低不透明度 */
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.dark-mode .mobile-nav-item i,
.dark-mode .mobile-nav-item span {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-mode .mobile-nav-item.active i,
.dark-mode .mobile-nav-item.active span,
.dark-mode .mobile-nav-item:hover i,
.dark-mode .mobile-nav-item:hover span {
  color: var(--primary-light);
}

.dark-mode .mobile-nav-item.active::after {
  background-color: var(--primary-light);
  box-shadow: 0 0 8px var(--primary-light);
}

/* 移动设备显示底部导航栏 */
@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
  }
}

/* 非移动设备不显示底部导航栏 */
@media (min-width: 769px) {
  .mobile-nav {
    display: none !important;
  }
}

/* 低性能设备优化 */
.low-performance .mobile-nav {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Android设备特殊处理 - 更适合Android的样式 */
.android-device .mobile-nav {
  background: rgba(255, 255, 255, 0.98); /* 更高不透明度，因为Android设备可能不支持backdrop-filter */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.android-device.dark-mode .mobile-nav {
  background: rgba(25, 25, 30, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Android设备导航项特殊处理 */
.android-device .mobile-nav-item.active::after {
  width: 6px; /* 稍大一点的指示点 */
  height: 6px;
  bottom: 5px;
}

/* 确保底部导航栏在地图控件之上 */
.leaflet-control-container {
  z-index: 1000;
}

/* 强制覆盖所有可能的高亮背景样式 */
.mobile-nav .mobile-nav-item,
.mobile-nav .mobile-nav-item.active,
.mobile-nav .mobile-nav-item:hover,
.mobile-nav .mobile-nav-item:active,
.mobile-nav .mobile-nav-item:focus,
.mobile-nav .mobile-nav-item.btn,
.mobile-nav .mobile-nav-item.btn-primary,
.mobile-nav .mobile-nav-item.btn-primary.active,
.mobile-nav .mobile-nav-item.btn-outline-primary.active {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* iOS风格导航栏特殊效果 - 更精致的iOS风格 */
.ios-nav {
  /* 更强的模糊效果 */
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  /* 更精细的边框 */
  border-top: 0.5px solid rgba(200, 200, 200, 0.25);

  /* 更精致的阴影 */
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.03);
}

/* 导航栏隐藏动画 - 使用不透明度而非位移 */
.mobile-nav.nav-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.28, 0.11, 0.32, 1),
              visibility 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
}

/* 导航项按下状态 - 移除动画效果，仅保留颜色变化 */
.mobile-nav-item.touch-active i {
  color: var(--primary-dark);
}

.mobile-nav-item.touch-active span {
  color: var(--primary-dark);
}

/* 导航项激活指示器动画 - 更精致的脉冲效果 */
.mobile-nav-item.active::after {
  animation: navPulse 2s infinite;
}

@keyframes navPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.6);
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0);
    opacity: 0.9;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0);
    opacity: 0.9;
  }
}

/* 导航项图标和文本的过渡效果 - 仅保留颜色过渡 */
.mobile-nav-item i,
.mobile-nav-item span {
  transition: color 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}

/* 导航项激活时的图标效果 - 移除上移效果 */
.mobile-nav-item.active i {
  /* 移除上移和缩放效果 */
}

/* 导航项激活时的文本效果 - 移除移动效果 */
.mobile-nav-item.active span {
  /* 移除移动效果 */
  letter-spacing: 0.02em;
  font-weight: 600;
}