/* 侧边栏自定义样式 - 现代简约风格 */

/* 侧边栏基础样式 */
body .vertical-menu,
body[data-sidebar="light"] .vertical-menu,
html body .vertical-menu,
html body[data-sidebar="light"] .vertical-menu {
  background-color: #f8f9fa !important;
  border-right: 1px solid #e9ecef !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.03) !important;
}

/* 菜单容器样式 */
body #sidebar-menu,
body[data-sidebar="light"] #sidebar-menu,
html body #sidebar-menu,
html body[data-sidebar="light"] #sidebar-menu {
  background-color: #f8f9fa !important;
  padding: 10px !important;
}

/* 菜单项基础样式 */
body #sidebar-menu ul li a,
body[data-sidebar="light"] #sidebar-menu ul li a,
html body #sidebar-menu ul li a,
html body[data-sidebar="light"] #sidebar-menu ul li a {
  color: #495057 !important;
  font-weight: 500 !important;
  padding: 12px 15px !important;
  border-radius: 8px !important;
  margin-bottom: 3px !important;
  transition: all 0.3s ease !important;
}

/* 菜单项图标样式 */
body #sidebar-menu ul li a i,
body[data-sidebar="light"] #sidebar-menu ul li a i,
html body #sidebar-menu ul li a i,
html body[data-sidebar="light"] #sidebar-menu ul li a i {
  color: #6c757d !important;
  font-size: 18px !important;
  margin-right: 10px !important;
  transition: all 0.3s ease !important;
}

/* 鼠标悬停效果 */
body #sidebar-menu ul li a:hover,
body[data-sidebar="light"] #sidebar-menu ul li a:hover,
html body #sidebar-menu ul li a:hover,
html body[data-sidebar="light"] #sidebar-menu ul li a:hover {
  color: #007bff !important;
  background-color: rgba(0, 123, 255, 0.08) !important;
  transform: translateX(3px) !important;
}

body #sidebar-menu ul li a:hover i,
body[data-sidebar="light"] #sidebar-menu ul li a:hover i,
html body #sidebar-menu ul li a:hover i,
html body[data-sidebar="light"] #sidebar-menu ul li a:hover i {
  color: #007bff !important;
}

/* 活动菜单项样式 */
body #sidebar-menu ul li.mm-active > a,
body[data-sidebar="light"] #sidebar-menu ul li.mm-active > a,
html body #sidebar-menu ul li.mm-active > a,
html body[data-sidebar="light"] #sidebar-menu ul li.mm-active > a {
  color: #007bff !important;
  background-color: rgba(0, 123, 255, 0.12) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15) !important;
}

body #sidebar-menu ul li.mm-active > a i,
body[data-sidebar="light"] #sidebar-menu ul li.mm-active > a i,
html body #sidebar-menu ul li.mm-active > a i,
body[data-sidebar="light"] #sidebar-menu ul li.mm-active > a i {
  color: #007bff !important;
}

/* 子菜单容器样式 */
body #sidebar-menu ul .sub-menu,
body[data-sidebar="light"] #sidebar-menu ul .sub-menu,
html body #sidebar-menu ul .sub-menu,
html body[data-sidebar="light"] #sidebar-menu ul .sub-menu {
  background-color: transparent !important;
  padding-left: 30px !important;
  margin-top: 3px !important;
}

/* 子菜单项样式 */
body #sidebar-menu ul .sub-menu li a,
body[data-sidebar="light"] #sidebar-menu ul .sub-menu li a,
html body #sidebar-menu ul .sub-menu li a,
html body[data-sidebar="light"] #sidebar-menu ul .sub-menu li a {
  color: #6c757d !important;
  font-weight: 400 !important;
  padding: 8px 15px !important;
  font-size: 0.9rem !important;
  border-radius: 6px !important;
}

/* 子菜单项悬停效果 */
body #sidebar-menu ul .sub-menu li a:hover,
body[data-sidebar="light"] #sidebar-menu ul .sub-menu li a:hover,
html body #sidebar-menu ul .sub-menu li a:hover,
html body[data-sidebar="light"] #sidebar-menu ul .sub-menu li a:hover {
  color: #007bff !important;
  background-color: rgba(0, 123, 255, 0.05) !important;
}

/* 子菜单活动项样式 */
body #sidebar-menu ul .sub-menu li.mm-active > a,
body[data-sidebar="light"] #sidebar-menu ul .sub-menu li.mm-active > a,
html body #sidebar-menu ul .sub-menu li.mm-active > a,
html body[data-sidebar="light"] #sidebar-menu ul .sub-menu li.mm-active > a {
  color: #007bff !important;
  background-color: rgba(0, 123, 255, 0.08) !important;
  font-weight: 500 !important;
}

/* 菜单箭头样式 */
body .metismenu .has-arrow:after,
body[data-sidebar="light"] .metismenu .has-arrow:after,
html body .metismenu .has-arrow:after,
html body[data-sidebar="light"] .metismenu .has-arrow:after {
  border-color: #adb5bd !important;
  width: 0.5em !important;
  height: 0.5em !important;
  right: 1.5em !important;
  transition: all 0.3s ease !important;
}

/* 活动菜单箭头样式 */
body .metismenu .mm-active > .has-arrow:after,
body[data-sidebar="light"] .metismenu .mm-active > .has-arrow:after,
html body .metismenu .mm-active > .has-arrow:after,
html body[data-sidebar="light"] .metismenu .mm-active > .has-arrow:after {
  border-color: #007bff !important;
  transform: rotate(-135deg) translateY(-50%) !important;
}

/* 滚动条样式 */
body .simplebar-scrollbar:before,
body[data-sidebar="light"] .simplebar-scrollbar:before,
html body .simplebar-scrollbar:before,
html body[data-sidebar="light"] .simplebar-scrollbar:before {
  background-color: rgba(0, 123, 255, 0.3) !important;
  border-radius: 10px !important;
}

/* 菜单标签样式 */
body #sidebar-menu ul li a span.badge,
body[data-sidebar="light"] #sidebar-menu ul li a span.badge,
html body #sidebar-menu ul li a span.badge,
html body[data-sidebar="light"] #sidebar-menu ul li a span.badge {
  background-color: #007bff !important;
  color: #ffffff !important;
  padding: 4px 8px !important;
  font-size: 0.7rem !important;
  border-radius: 30px !important;
  margin-left: 5px !important;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important;
}

/* 移动端菜单按钮颜色 */
body .vertical-menu-btn,
body[data-sidebar="light"] .vertical-menu-btn,
html body .vertical-menu-btn,
html body[data-sidebar="light"] .vertical-menu-btn {
  color: #495057 !important;
} 

/* 折叠态悬停弹出二级菜单背景白色修复 */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu,
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul.sub-menu,
.vertical-collpsed .vertical-menu #sidebar-menu ul.sub-menu.mm-collapse.mm-show,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.mm-collapse.mm-show,
.vertical-collpsed .vertical-menu #sidebar-menu ul.mm-collapse.mm-show {
  background-color: #ffffff !important;
}

/* 深色侧边栏下也统一使用白色背景，保证弹出菜单清晰可读 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul ul.sub-menu,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu ul.sub-menu.mm-collapse.mm-show,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.mm-collapse.mm-show,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu ul.mm-collapse.mm-show {
  background-color: #ffffff !important;
}

/* has-arrow 和 waves-effect 元素平常状态保持透明，去除间距 */
.vertical-collpsed .vertical-menu #sidebar-menu .has-arrow.waves-effect,
.vertical-collpsed .vertical-menu #sidebar-menu .waves-effect.has-arrow,
.vertical-collpsed .vertical-menu #sidebar-menu a.has-arrow,
.vertical-collpsed .vertical-menu #sidebar-menu a.waves-effect {
  background-color: transparent !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

/* has-arrow 和 waves-effect 元素 hover 状态显示白色背景 */
.vertical-collpsed .vertical-menu #sidebar-menu .has-arrow.waves-effect:hover,
.vertical-collpsed .vertical-menu #sidebar-menu .waves-effect.has-arrow:hover,
.vertical-collpsed .vertical-menu #sidebar-menu a.has-arrow:hover,
.vertical-collpsed .vertical-menu #sidebar-menu a.waves-effect:hover {
  background-color: #ffffff !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

/* 深色和彩色侧边栏下的 has-arrow 和 waves-effect 元素平常状态透明 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu .has-arrow.waves-effect,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu .waves-effect.has-arrow,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu a.has-arrow,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu a.waves-effect,
body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu .has-arrow.waves-effect,
body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu .waves-effect.has-arrow,
body[data-sidebar="colored"].vertical-menu #sidebar-menu a.has-arrow,
body[data-sidebar="colored"].vertical-menu #sidebar-menu a.waves-effect {
  background-color: transparent !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

/* 深色和彩色侧边栏下的 has-arrow 和 waves-effect 元素 hover 状态白色背景 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu .has-arrow.waves-effect:hover,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu .waves-effect.has-arrow:hover,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu a.has-arrow:hover,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu a.waves-effect:hover,
body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu .has-arrow.waves-effect:hover,
body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu .waves-effect.has-arrow:hover,
body[data-sidebar="colored"].vertical-menu #sidebar-menu a.has-arrow:hover,
body[data-sidebar="colored"].vertical-menu #sidebar-menu a.waves-effect:hover {
  background-color: #ffffff !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

/* sub-menu mm-collapse mm-show 移除外边距 - sidebar.css 覆盖 */
.vertical-collpsed .vertical-menu #sidebar-menu .sub-menu.mm-collapse.mm-show,
.vertical-collpsed .vertical-menu #sidebar-menu ul.sub-menu.mm-collapse.mm-show,
.vertical-collpsed .vertical-menu #sidebar-menu .mm-collapse.mm-show.sub-menu {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* 深色和彩色侧边栏下的 sub-menu mm-collapse mm-show 也移除外边距 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu .sub-menu.mm-collapse.mm-show,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu ul.sub-menu.mm-collapse.mm-show,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu .mm-collapse.mm-show.sub-menu,
body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu .sub-menu.mm-collapse.mm-show,
body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu ul.sub-menu.mm-collapse.mm-show,
body[data-sidebar="colored"].vertical-collpsed .vertical-menu #sidebar-menu .mm-collapse.mm-show.sub-menu {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}