/* ============================================================
   Mac 风格 · 用户中心导航覆盖
   目标：aside-menu（侧边栏） + top-menu（顶部栏）
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  --mac-nav-bg: rgba(255, 255, 255, 0.68);
  --mac-nav-blur: blur(24px) saturate(180%);
  --mac-nav-border: rgba(0, 0, 0, 0.06);
  --mac-nav-text: #1d1d1f;
  --mac-nav-text-secondary: #6e6e73;
  --mac-nav-blue: #007aff;
  --mac-nav-blue-soft: rgba(0, 122, 255, 0.1);
  --mac-nav-hover: rgba(0, 0, 0, 0.04);
  --mac-nav-radius: 10px;
  --mac-nav-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "PingFang SC", "Helvetica Neue", sans-serif;
}

/* ============================================================
   1. 侧边栏 aside-menu
   ============================================================ */
.aside-menu {
  background: var(--mac-nav-bg) !important;
  -webkit-backdrop-filter: var(--mac-nav-blur);
  backdrop-filter: var(--mac-nav-blur);
  border-right: 1px solid var(--mac-nav-border) !important;
  font-family: var(--mac-nav-font);
}

/* 菜单项基础 */
.aside-menu .el-menu {
  background: transparent !important;
  border-right: none !important;
}

.aside-menu .el-menu-item,
.aside-menu .el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  margin: 2px 8px !important;
  border-radius: var(--mac-nav-radius) !important;
  color: var(--mac-nav-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

/* 悬停 */
.aside-menu .el-menu-item:hover,
.aside-menu .el-submenu__title:hover {
  background: var(--mac-nav-hover) !important;
  color: var(--mac-nav-text) !important;
}

/* 选中态（Mac 蓝） */
.aside-menu .el-menu-item.is-active,
.aside-menu .el-submenu.is-active > .el-submenu__title {
  background: var(--mac-nav-blue-soft) !important;
  color: var(--mac-nav-blue) !important;
  font-weight: 600 !important;
}

/* 选中态左侧色条 */
.aside-menu .el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--mac-nav-blue);
  border-radius: 3px;
}

/* 图标颜色 */
.aside-menu .el-menu-item i,
.aside-menu .el-submenu__title i {
  color: inherit !important;
  margin-right: 10px !important;
}

/* 子菜单容器 */
.aside-menu .el-submenu .el-menu {
  background: transparent !important;
}

.aside-menu .el-submenu .el-menu-item {
  height: 36px !important;
  line-height: 36px !important;
  margin: 1px 8px 1px 20px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

/* 折叠状态微调 */
.aside-menu.el-menu--collapse .el-menu-item,
.aside-menu.el-menu--collapse .el-submenu__title {
  margin: 2px 6px !important;
  text-align: center;
}

/* ============================================================
   2. 顶部栏 top-menu
   ============================================================ */
.top-menu {
  background: var(--mac-nav-bg) !important;
  -webkit-backdrop-filter: var(--mac-nav-blur);
  backdrop-filter: var(--mac-nav-blur);
  border-bottom: 1px solid var(--mac-nav-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  font-family: var(--mac-nav-font);
}

/* 顶部菜单项（如果是 el-menu 横向） */
.top-menu .el-menu--horizontal {
  background: transparent !important;
  border-bottom: none !important;
}

.top-menu .el-menu--horizontal > .el-menu-item,
.top-menu .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 14px !important;
  margin: 0 2px !important;
  border-radius: 8px !important;
  color: var(--mac-nav-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.top-menu .el-menu--horizontal > .el-menu-item:hover,
.top-menu .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
  background: var(--mac-nav-hover) !important;
  color: var(--mac-nav-text) !important;
}

.top-menu .el-menu--horizontal > .el-menu-item.is-active,
.top-menu .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: var(--mac-nav-blue) !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}

/* 顶部栏内头像、用户名等通用元素 */
.top-menu .el-avatar {
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   3. 移动端适配
   ============================================================ */
@media (max-width: 768px) {

  /* 侧边栏抽屉化（如果默认主题在移动端是抽屉） */
  .aside-menu {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
  }

  .aside-menu .el-menu-item,
  .aside-menu .el-submenu__title {
    height: 44px !important;
    line-height: 44px !important;
    margin: 2px 10px !important;
    font-size: 14px !important;
  }

  .top-menu {
    background: rgba(255, 255, 255, 0.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }

  .top-menu .el-menu--horizontal > .el-menu-item,
  .top-menu .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   4. 深色模式兼容（可选，默认注释）
   ============================================================ */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --mac-nav-bg: rgba(28, 28, 30, 0.72);
    --mac-nav-border: rgba(255, 255, 255, 0.06);
    --mac-nav-text: #f5f5f7;
    --mac-nav-text-secondary: #a1a1a6;
    --mac-nav-hover: rgba(255, 255, 255, 0.06);
    --mac-nav-blue-soft: rgba(0, 122, 255, 0.2);
  }
}
*/