/* ========== 侧边栏样式 ========== */

/* CSS变量 */
:root {
  --aside-bg-color: #1C3039;
  --aside-active-color: #FF6666;
  --aside-text-color: #fff; 
  --aside-hover-bg: rgba(255, 255, 255, 0.1);
  --aside-collapsed-width: 72px; 
  --aside-expanded-width: 172px;
  --aside-transition: all 0.3s ease;
}
 
/* 侧边栏主容器 */
.site-menubar {
  position: fixed;
  left: 0;
  top: 48px;
  bottom: 0;
  width: var(--aside-collapsed-width);
  /* 【移除】background-color 和 box-shadow，让 .menu-list-box 负责显示 */
  transition: var(--aside-transition);
  z-index: 999;
  overflow: visible; /* 【修改】改为 visible，允许子元素超出 */
  pointer-events: none; /* 【新增】容器本身不响应鼠标事件 */
}

/* 恢复子元素的鼠标事件 */
.site-menubar > * {
  pointer-events: auto;
}

/* 展开状态 */
.site-menubar.menu-expanded {
  width: var(--aside-expanded-width);
}

/* Logo区域 */
.menu-logo-box {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-logo {
  max-width: 48px;
  max-height: 40px;
  object-fit: contain;
  transition: var(--aside-transition);
}

.menu-expanded .menu-logo {
  max-width: 140px;
}

/* 菜单列表容器 */
.menu-list-box {
  position: fixed; /* 使用固定定位，完全不受父容器 overflow 限制 */
  left: 0;
  top: 48px; /* 与侧边栏顶部对齐 */
  bottom: 0;
  width: var(--aside-collapsed-width); /* 默认宽度 */
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000; /* 高于二级导航面板，展开时覆盖在上方 */
  background-color: var(--aside-bg-color); /* 确保有背景色 */
  transition: var(--aside-transition); /* 添加过渡动画 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); /* 添加阴影 */
}

/* 展开状态下的菜单列表容器 */
.menu-expanded .menu-list-box {
  width: var(--aside-expanded-width); /* 展开时的宽度 172px */
}

/* 自定义滚动条 */
.menu-list-box::-webkit-scrollbar {
  width: 6px;
}

.menu-list-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.menu-list-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.menu-list-box::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 一级菜单 */
.first-level-menu {
  width: 100%;
}

.site-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

/* 菜单项 */
.site-menu-item {
  position: relative;
  margin: 2px 0;
}

.site-menu-item > a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  color: var(--aside-text-color);
  text-decoration: none;
  transition: var(--aside-transition);
  cursor: pointer;
  position: relative;
}

/* 图标 */
.site-menu-item .iconfont {
  font-size: 20px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--aside-transition);
}

/* 菜单文字 */
.site-menu-item .menu-text {
  font-size: 14px;
  margin-left: 12px;
  white-space: nowrap;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.2s, width 0.3s;
}

/* 展开状态下的文字 */
.menu-expanded .site-menu-item .menu-text {
  opacity: 1;
  width: auto;
}

/* Hover效果 */
.site-menu-item > a:hover {
  background-color: var(--aside-hover-bg);
  color: var(--aside-active-color);
}

.site-menu-item > a:hover .iconfont {
  color: var(--aside-active-color);
}

.site-menu-item > a:hover .menu-text {
  color: var(--aside-active-color);
}

/* 激活状态 */
.site-menu-item.active > a {
  background-color: var(--aside-hover-bg);
  color: var(--aside-active-color);
}

.site-menu-item.active > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--aside-active-color);
}

.site-menu-item.active .iconfont {
  color: var(--aside-active-color);
}

.site-menu-item.active .menu-text {
  color: var(--aside-active-color);
}

/* 分隔线 */
.menu-separator {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 12px 16px;
}

/* ========== 二级菜单面板 ========== */
.second-level-menu {
  position: fixed;
  left: var(--aside-collapsed-width);
  top: 48px;
  bottom: 0;
  width: 100px;
  background-color: #DBE1E8;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 998;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 【删除】不需要移动二级导航，让一级导航覆盖在上方即可 */
/* .menu-expanded ~ .second-level-menu {
  left: var(--aside-expanded-width);
} */

/* 二级菜单头部 */
.second-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #CBD5DD;
  border-bottom: 1px solid #BCC6CE;
}

/* 二级菜单标题 */
.second-menu-title {
  font-size: 12px;
  font-weight: 600;
  color: #293142;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 关闭按钮 */
.close-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #5E6D81;
  transition: color 0.3s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.close-btn:hover {
  color: #FF6666;
}

.close-btn i {
  font-size: 14px;
}

/* 二级菜单列表 */
.second-menu-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.second-menu-list li {
  margin: 2px 0;
}

.second-menu-list li a {
  display: block;
  padding: 10px 16px;
  color: #5E6D81;
  font-size: 12px;
  text-decoration: none;
  transition: var(--aside-transition);
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.second-menu-list li a:hover {
  background-color: #CBD5DD;
  color: #293142;
}

/* 二级菜单激活状态 */
.second-menu-list li.active a {
  background-color: #FAFCFF;
  color: #FF6666;
  font-weight: 500;
}

.second-menu-list li.active a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #FF6666;
}

/* 二级菜单滚动条 */
.second-level-menu::-webkit-scrollbar {
  width: 4px;
}

.second-level-menu::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.second-level-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.second-level-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ========== 过渡动画 ========== */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.2s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

/* ========== 响应式优化 ========== */
@media screen and (max-width: 1366px) {
  .site-menubar {
    --aside-expanded-width: 160px;
  }
}

@media screen and (max-width: 1024px) {
  .site-menubar {
    top: 48px;
  }
  
  .second-level-menu {
    top: 48px;
  }
}

/* ========== 收起状态下图标居中 ========== */
.site-menubar:not(.menu-expanded) .site-menu-item > a {
  justify-content: center;
  padding: 0;
}

.site-menubar:not(.menu-expanded) .site-menu-item .iconfont {
  margin: 0;
}

/* ========== 强制收起状态 ========== */
/* 【修改】强制收起状态，但允许鼠标悬停时展开 */
.site-menubar.forced-collapsed:not(.menu-expanded) {
  width: var(--aside-collapsed-width) !important;
}

.site-menubar.forced-collapsed:not(.menu-expanded) .menu-text {
  opacity: 0 !important;
  width: 0 !important;
}

/* 当二级菜单锁定 + 鼠标悬停时，允许一级侧边栏展开 */
.site-menubar.forced-collapsed.menu-expanded {
  width: var(--aside-expanded-width) !important;
}

.site-menubar.forced-collapsed.menu-expanded .menu-text {
  opacity: 1 !important;
  width: auto !important;
  max-width: 80px !important;
}

/* ========== 主内容区域适配 ========== */
/* 为主内容区域添加左边距，避免被侧边栏遮挡 */
:root {
  --content-offset: 72px;
}

/* 【修改】不使用 body 的 padding，改为主容器的 margin */
/* body 的 padding 会影响 fixed 定位的顶部导航 */
.el-container {
  /*margin-left: var(--content-offset) !important;*/
  transition: margin-left 0.3s ease;
  /*margin-top: 48px !important; !* 为固定的顶部导航留出空间 *!*/
}

/* 如果页面使用的是其他主容器类名 */
body > .template,
body > #app > .template {
  margin-left: var(--content-offset);
  transition: margin-left 0.3s ease;
  /*padding-top: 48px; !* 为固定的顶部导航留出空间 *!*/
}

/* 主容器需要为顶部导航留出空间 */
.el-main {
  padding-top: 48px !important;
}

/* 如果内容直接在 body 下 */
body {
  padding-top: 48px; /* 为固定的顶部导航留出空间 */
  box-sizing: border-box;
}

/* 响应式调整 - 移动端可能需要不同的处理 */
@media screen and (max-width: 768px) {
  .el-container {
    margin-left: 0 !important; /* 移动端不需要侧边栏偏移 */
  }
  
  body > .template,
  body > #app > .template {
    margin-left: 0;
  }
}