/* ========================================================
 * cany_dianle 侧边栏样式覆盖
 * 深色背景 #1E1E2D + 白色文字
 * 选中项蓝紫渐变胶囊高亮
 * 展开 280px / 折叠 64px (@1920 设计稿基准)
 * 结构: Logo 区(81px) + 菜单区(flex:1 滚动) + 折叠按钮(48px)
 * ======================================================== */

/* ===== 侧栏容器 ===== */
.el-aside,
.cany-aside {
  background: var(--bg-dark, var(--color-menu-bg, #1e1e2d)) !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 280px !important;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: var(--layout-aside-transition, width 0.25s ease);
  z-index: 100;
}

/* 折叠态: 64px */
.cany-aside.is-collapse,
.el-aside.is-collapse {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

/* ===== Logo 区 (顶部, 与顶栏同高 81px) ===== */
.cany-aside-logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--layout-header-height, 0.81rem);
  flex-shrink: 0;
  padding: 0 24px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}
.cany-aside.is-collapse .cany-aside-logo-link {
  padding: 0;
  justify-content: center;
}
.cany-aside-logo-full {
  display: block;
  height: 46px;
  max-width: 200px;
  width: auto;
  /*filter: brightness(0) invert(1);*/
  transition: opacity 0.2s;
}
.cany-aside-logo-mini {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* 菜单区: flex:1 撑满剩余, 内部可滚动 */
.cany-aside-menu-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
}
.cany-aside.is-collapse .cany-aside-menu-wrap {
  padding: 12px 0;
}

.el-aside .menu-alink,
.cany-aside .menu-alink {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* 兼容旧 .ali-logo (移动端 drawer 仍在用) */
.el-aside .ali-logo {
  display: block;
  height: 32px;
  width: auto;
  margin: 24px auto 16px;
  cursor: pointer;
  filter: brightness(0) invert(1);
}

/* ===== 菜单 ===== */
.el-aside .menu-top,
.cany-aside .menu-top {
  background: transparent !important;
  border-right: none !important;
  margin-top: 0 !important;
}
.cany-aside .cany-aside-menu {
  width: 100%;
}
/* 折叠态: el-menu 自带 collapse 宽度由 element 控制, 这里强制 100% */
.cany-aside.is-collapse .cany-aside-menu.el-menu--collapse {
  width: 100% !important;
  border-right: none !important;
}

/* 一级菜单项 (固定 px 尺寸, 不受 lib-flexible 影响) */
.el-aside .el-menu-item,
.el-aside .el-submenu__title,
.cany-aside .el-menu-item,
.cany-aside .el-submenu__title {
  background: transparent !important;
  color: var(--color-menu-text) !important;
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 12px;
  margin-bottom: 4px;
  padding: 0 20px !important;
  font-size: 16px;
  font-weight: 500;
  transition:
    background 0.3s,
    color 0.3s;
  min-width: 0;
}
.cany-aside .el-menu-item i,
.cany-aside .el-submenu__title i {
  color: var(--color-menu-text) !important;
  margin-right: 0;
  font-size: 18px;
  width: 20px;
  text-align: center;
  vertical-align: middle;
  transition: color 0.3s;
}

/* 折叠态: 菜单项变正方形, icon 居中 */
.cany-aside.is-collapse .el-menu-item,
.cany-aside.is-collapse .el-submenu__title {
  padding: 0 !important;
  height: 48px !important;
  line-height: 48px !important;
  margin: 4px 8px;
  border-radius: 12px;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.cany-aside.is-collapse .el-menu-item i,
.cany-aside.is-collapse .el-submenu__title i {
  margin: 0;
  font-size: 20px;
}
.cany-aside.is-collapse .aside-menu-text {
  display: none;
}

/* hover */
.cany-aside .el-menu-item:hover,
.cany-aside .el-submenu__title:hover {
  background: var(--color-menu-hover-bg) !important;
  color: #ffffff !important;
}
.cany-aside .el-menu-item:hover i,
.cany-aside .el-submenu__title:hover i {
  color: #ffffff !important;
}

/* 选中态 - 渐变/纯色胶囊（颜色随主题自适应）*/
.cany-aside .el-menu-item.is-active,
.el-aside .el-menu-item.is-active {
  background: var(
    --gradient-brand,
    var(--color-menu-active-bg, #6687fb)
  ) !important;
  color: var(--color-menu-text-active, #ffffff) !important;
  box-shadow: var(--shadow-btn, 0 4px 12px rgba(0, 0, 0, 0.2));
  font-weight: 600;
}
.cany-aside .el-menu-item.is-active i,
.el-aside .el-menu-item.is-active i {
  color: var(--color-menu-text-active, #ffffff) !important;
}
.cany-aside .el-submenu.is-active > .el-submenu__title,
.el-aside .el-submenu.is-active > .el-submenu__title {
  color: var(--color-menu-text-active, #ffffff) !important;
}
.cany-aside .el-submenu.is-active > .el-submenu__title i,
.el-aside .el-submenu.is-active > .el-submenu__title i {
  color: var(--color-menu-text-active, #ffffff) !important;
}

/* 二级菜单(子菜单) */
.cany-aside .el-menu--inline,
.el-aside .el-menu--inline {
  background: rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px;
  padding: 4px;
  margin: 4px 0 6px;
}
.cany-aside .el-menu--inline .el-menu-item,
.el-aside .el-menu--inline .el-menu-item {
  padding-left: 52px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 13px;
  font-weight: normal;
  color: var(--color-menu-text, rgba(255, 255, 255, 0.6)) !important;
  opacity: 0.85;
}
.cany-aside .el-menu--inline .el-menu-item:hover,
.el-aside .el-menu--inline .el-menu-item:hover {
  background: var(--color-menu-hover-bg, rgba(255, 255, 255, 0.06)) !important;
  color: var(--color-menu-text-active, #ffffff) !important;
  opacity: 1;
}
.cany-aside .el-menu--inline .el-menu-item.is-active,
.el-aside .el-menu--inline .el-menu-item.is-active {
  background: var(
    --gradient-brand,
    var(--color-menu-active-bg, #6687fb)
  ) !important;
  color: var(--color-menu-text-active, #ffffff) !important;
  opacity: 1;
  margin-bottom: 0;
}

/* 分隔线 */
.cany-aside .line,
.el-aside .line {
  height: 1px;
  width: auto;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 12px 16px !important;
  border: none !important;
  opacity: 1 !important;
}

/* 子菜单箭头 */
.cany-aside .el-submenu__title .el-submenu__icon-arrow,
.el-aside .el-submenu__title .el-submenu__icon-arrow {
  color: var(--color-menu-text);
  transition: transform 0.3s;
}
.cany-aside .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow,
.el-aside .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  color: #ffffff;
}
/* 折叠态: 隐藏箭头 */
.cany-aside.is-collapse .el-submenu__icon-arrow {
  display: none;
}

/* ===== 滚动条 (内部菜单容器专用) ===== */
.cany-aside-menu-wrap::-webkit-scrollbar {
  width: 4px;
}
.cany-aside-menu-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
.cany-aside-menu-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}
.cany-aside-menu-wrap::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== 折叠按钮 (底部) ===== */
.cany-aside-collapse-btn {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 24px;
  margin: 0 8px 8px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.04);
  transition:
    background 0.2s,
    color 0.2s;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.cany-aside-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.cany-aside-collapse-btn.is-collapse {
  justify-content: center;
  padding: 0;
}
.cany-aside-collapse-arrow {
  font-size: 16px;
  transition: transform 0.25s ease;
}
.cany-aside-collapse-btn.is-collapse .cany-aside-collapse-arrow {
  transform: rotate(180deg);
}
.cany-aside-collapse-text {
  font-size: 13px;
  letter-spacing: 1px;
}

/* ===== 折叠态: el-menu popup 弹层 (子菜单) 美化 ===== */
.el-menu--vertical.el-menu--popup {
  background: var(--bg-dark, var(--color-menu-bg, #1e1e2d)) !important;
  border: 1px solid rgba(128, 128, 128, 0.16) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  min-width: 180px;
}
.el-menu--vertical.el-menu--popup .el-menu-item {
  background: transparent !important;
  color: var(--color-menu-text) !important;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 8px;
  font-size: 13px;
}
.el-menu--vertical.el-menu--popup .el-menu-item:hover {
  background: var(--color-menu-hover-bg, rgba(255, 255, 255, 0.08)) !important;
  color: var(--color-menu-text-active, #ffffff) !important;
}
.el-menu--vertical.el-menu--popup .el-menu-item.is-active {
  background: var(
    --gradient-brand,
    var(--color-menu-active-bg, #6687fb)
  ) !important;
  color: var(--color-menu-text-active, #ffffff) !important;
}

/* ===== 主内容区 ===== */
.el-main {
  background: var(--bg-page, #f5f6f8);
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - var(--layout-header-height, 0.81rem));
  box-sizing: border-box;
}
.el-container {
  background: var(--bg-page, #f5f6f8);
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

/* ===== 白色侧栏主题专用适配 (theme1 白色底, theme8 白色底) ===== */
/* 覆盖条件: --color-menu-bg 为 #fff 且 --color-menu-text 为深色 */
:root[theme="theme1"] .cany-aside,
:root[theme="theme1"] .el-aside,
:root[theme="theme8"] .cany-aside,
:root[theme="theme8"] .el-aside {
  background: var(--color-menu-bg, #ffffff) !important;
  border-right: 1px solid var(--border-line, #ebeef5);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

/* 白色侧栏的 Logo 区下边框改为浅灰 */
:root[theme="theme1"] .cany-aside-logo-link,
:root[theme="theme8"] .cany-aside-logo-link {
  border-bottom-color: var(--border-line, #ebeef5);
}
/* 白色侧栏 logo: 取消白色滤镜，显示原色 */
:root[theme="theme1"] .cany-aside-logo-full,
:root[theme="theme1"] .cany-aside-logo-mini,
:root[theme="theme8"] .cany-aside-logo-full,
:root[theme="theme8"] .cany-aside-logo-mini {
  filter: none;
}

/* 白色侧栏分隔线改为浅灰 */
:root[theme="theme1"] .cany-aside .line,
:root[theme="theme1"] .el-aside .line,
:root[theme="theme8"] .cany-aside .line,
:root[theme="theme8"] .el-aside .line {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* 白色侧栏折叠按钮: 深色文字 + 浅色背景 */
:root[theme="theme1"] .cany-aside-collapse-btn,
:root[theme="theme8"] .cany-aside-collapse-btn {
  color: rgba(0, 0, 0, 0.48);
  background: rgba(0, 0, 0, 0.03);
  border-top-color: var(--border-line, #ebeef5);
}
:root[theme="theme1"] .cany-aside-collapse-btn:hover,
:root[theme="theme8"] .cany-aside-collapse-btn:hover {
  color: var(--color-primary, #0058ff);
  background: rgba(0, 0, 0, 0.06);
}

/* 白色侧栏滚动条: 深色 thumb */
:root[theme="theme1"] .cany-aside-menu-wrap::-webkit-scrollbar-thumb,
:root[theme="theme8"] .cany-aside-menu-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
:root[theme="theme1"] .cany-aside-menu-wrap::-webkit-scrollbar-thumb:hover,
:root[theme="theme8"] .cany-aside-menu-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.24);
}

/* 白色侧栏折叠态 popup 弹层: 白色底 + 深色文字 */
:root[theme="theme1"] .el-menu--vertical.el-menu--popup,
:root[theme="theme8"] .el-menu--vertical.el-menu--popup {
  background: #ffffff !important;
  border: 1px solid var(--border-line, #ebeef5) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
:root[theme="theme1"] .el-menu--vertical.el-menu--popup .el-menu-item,
:root[theme="theme8"] .el-menu--vertical.el-menu--popup .el-menu-item {
  color: var(--color-menu-text, #2b2b2b) !important;
}
:root[theme="theme1"] .el-menu--vertical.el-menu--popup .el-menu-item:hover,
:root[theme="theme8"] .el-menu--vertical.el-menu--popup .el-menu-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--color-primary, #0058ff) !important;
}