/* ========================================
   CN/biz 专属导航样式（一级+二级）
   独立文件，确保所有biz页面复用
   ======================================== */

/* ========== 一级导航优化 ========== */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;  /* 确保一级导航在最上层 */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 0;  /* 移除底部margin */
  border-bottom: none;  /* 移除底部边框，避免缝隙 */
}

/* 一级导航下拉菜单 z-index 设置 */
.dropdown {
  position: relative;
}

.dropdown-content {
  z-index: 190 !important;  /* 下拉菜单略低于一级导航，但高于二级导航 */
}

/* ========== 二级导航样式 ========== */
.biz-tab-navigation {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 55px;  /* 紧贴一级导航（一级导航高度55px） */
  z-index: 150;  /* 低于一级导航下拉菜单，确保不遮挡 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(10px);
  margin-top: -1px;  /* 向上移动1px，消除缝隙 */
  padding-top: 1px;  /* 补偿1px，保持视觉平衡 */
  border-top: 1px solid #e5e7eb;  /* 添加与底部一致的边框 */
}

.biz-tab-nav-container {
  display: flex;
  gap: 4px;  /* 从8px减小到4px */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #10B981 #f0f0f0;
  padding: 6px 0;  /* 从8px减小到6px */
  flex-wrap: nowrap;  /* 确保不换行 */
  justify-content: flex-start;  /* 左对齐 */
}

.biz-tab-nav-container::-webkit-scrollbar {
  height: 4px;
}

.biz-tab-nav-container::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 2px;
}

.biz-tab-nav-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #10B981, #059669);
  border-radius: 2px;
}

.biz-tab-nav-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

.biz-tab-item {
  padding: 8px 12px;  /* 从12px 20px减小到8px 12px */
  color: #6b7280;
  font-weight: 500;
  font-size: 0.8125rem;  /* 从0.875rem(14px)减小到0.8125rem(13px) */
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;  /* 从8px减小到6px */
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  flex-shrink: 0;  /* 防止压缩 */
}

.biz-tab-item i {
  font-size: 0.875rem;  /* 从1rem(16px)减小到0.875rem(14px) */
  transition: transform 0.3s ease;
}

.biz-tab-item:hover {
  color: #10B981;
  background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
  border-color: #a7f3d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.biz-tab-item:hover i {
  transform: scale(1.1) rotate(5deg);
}

.biz-tab-item.active {
  color: white;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  font-weight: 600;
  border-color: #10B981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.biz-tab-item.active i {
  color: white;
}

/* ========== 响应式适配 ========== */
@media (max-width: 768px) {
  #navbar {
    height: 55px;
  }
  
  .biz-tab-navigation {
    top: 55px;  /* 移动端一级导航高度也是55px */
  }
  
  .biz-tab-item {
    padding: 6px 10px;  /* 移动端进一步减小 */
    font-size: 0.75rem;  /* 移动端进一步减小 */
  }
  
  .biz-tab-item i {
    font-size: 0.8125rem;  /* 移动端图标大小 */
  }
}

/* ========== 页面主体适配 ========== */
/* 为固定的一级导航 + 二级导航留出空间 */
body.has-biz-nav main {
  padding-top: 120px;  /* 一级导航55px + 二级导航约50px + 余量 */
}

@media (max-width: 768px) {
  body.has-biz-nav main {
    padding-top: 110px;  /* 移动端稍微减少间距 */
  }
}

/* ========== 分级下拉菜单样式 ========== */
/* 二级下拉菜单容器 */
.dropdown-submenu {
  position: relative;
}

/* 二级下拉菜单内容 */
.dropdown-submenu-content {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: white;
  min-width: 250px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 200 !important;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  padding: 16px 0;
  animation: dropdownSlide 0.2s ease-out;
}

/* 悬停显示二级下拉菜单 */
.dropdown-submenu:hover .dropdown-submenu-content {
  display: block;
}

/* 二级下拉菜单链接样式 */
.dropdown-submenu-content a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 二级下拉菜单链接悬停效果 */
.dropdown-submenu-content a:hover {
  background-color: #f5f5f5;
  color: #10B981;
}

/* 多级下拉菜单箭头 */
.dropdown-header i.fa-angle-right {
  float: right;
  font-size: 0.875rem;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

/* 悬停时旋转箭头 */
.dropdown-submenu:hover .dropdown-header i.fa-angle-right {
  transform: rotate(90deg);
}

/* ========== Z-index 层级规范 ========== */
/*
  z-index 层级说明：
  - 一级导航：z-index: 200
  - 一级导航下拉菜单：z-index: 190
  - 二级导航：z-index: 150
  - 页面内容：z-index: 1-10
  
  这样确保：
  1. 一级导航始终在最上层
  2. 一级导航下拉菜单可以覆盖二级导航
  3. 二级导航不会被页面内容遮挡
*/