/**
 * 下拉菜单样式文件
 * 支持点击和鼠标滑动显示子菜单功能
 */

/* 下拉菜单基础样式 - 支持点击和鼠标悬停显示 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉菜单按钮样式 - 主要从header.css继承，只保留必要的下拉特有样式 */
.dropdown-toggle {
  /* 基础样式主要从header.css中的.nav-link和.nav-link.dropdown-toggle继承 */
  position: relative;
  /* 下拉菜单按钮特有属性 */
  background: transparent;
  border: none;
  cursor: pointer;
  /* 过渡效果继承自header.css，但这里保留以确保兼容性 */
  transition: all 0.3s ease;
}

/* 下拉菜单箭头 */
.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
  color: #007bff;
  background-color: #f5f5f5;
}

/* 下拉菜单容器样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  color: #333;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  /* 添加平滑过渡效果 */
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  opacity: 0;
  transform: translateY(5px);
}

/* 下拉菜单项样式 */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  clear: both;
  font-weight: normal;
  color: #333;
  text-align: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f8f9fa;
}

/* 下拉菜单项高亮样式，不显示下划线 */
.dropdown-item-active {
  /* 保留高亮颜色但不显示下划线 */
  color: #007bff; /* 可以根据实际主题色调整 */
  background-color: #f8f9fa; /* 轻微的背景色变化，提供视觉反馈 */
  /* 明确确保没有下划线 */
  text-decoration: none !important;
  /* 移除任何可能的下边框或伪元素下划线 */
  border-bottom: none !important;
}

/* 确保下拉菜单项的active类不会显示下划线，且不设置单独的背景色 */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  color: #007bff; /* 保留高亮文字颜色 */
  text-decoration: none !important;
  background-color: transparent; /* 移除背景色 */
  border-bottom: none !important;
}

/* 移除冗余的激活状态下拉按钮样式，使用统一的border-bottom设置 */

/* 确保激活状态下的下拉箭头正确显示 */
.nav-link.dropdown-toggle.active::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
  border-top: 4px solid !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  /* 确保不会被其他样式覆盖 */
  opacity: 1 !important;
  visibility: visible !important;
}

/* 下拉菜单显示状态 - 用于JavaScript和hover触发 */
.dropdown-menu.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* 桌面端鼠标悬停显示 - 关键样式，确保鼠标滑动时菜单正确显示 */
@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 优化桌面端交互 - 基础padding从header.css继承，无需重复设置 */
  .dropdown-toggle {
    /* 桌面端特有属性可以在这里设置，如果需要的话 */
  }
  
  .dropdown-menu {
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
  
  .dropdown-item {
    padding: 10px 15px;
  }
  
  /* 确保下拉菜单在导航栏内正确定位 */
  .navbar .dropdown-menu {
    margin-top: 0;
  }
  
  /* 导航栏下拉切换按钮样式 */
  .navbar .dropdown-toggle {
    display: flex;
    align-items: center;
  }
}

/* 移动端样式优化 */
@media (max-width: 767px) {
  .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin-top: 0;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
  }
  
  .dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
  }
  
  /* 移动端菜单项样式调整 */
  .dropdown-item {
    padding: 10px 15px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }
  
  .dropdown-item:last-child {
    border-bottom: none;
  }
  
  /* 点击切换时的样式 */
  .dropdown-toggle.active + .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}

/* 确保菜单在页面边缘被截断 */
.dropdown-menu-right {
  right: 0;
  left: auto;
}

/* 确保多级菜单的层级显示 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}

/* 为嵌套下拉菜单添加悬停效果 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* 多级下拉菜单支持 */
.dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}

/* 响应式调整 */
@media (max-width: 576px) {
  .dropdown-menu {
    min-width: 100%;
    margin: 0;
  }
  
  .dropdown-menu .dropdown-menu {
    position: static;
    left: 0;
    margin-top: 0;
  }
}