/* ==========================================================================
   mc-sidebar.css — 左侧菜单（复刻 007idc member_center 侧栏）
   依据 007idc 线上计算样式：白底、蓝字、左侧蓝条、圆角 8px
   ========================================================================== */

/* ---- 侧栏容器：深色 → 白色 ---- */
.vertical-menu {
  width: 220px !important;
  background: #ffffff !important;
  border-right: 1px solid #e2eaf4 !important;
  box-shadow: none !important;
}

body[data-sidebar-size="small"] .vertical-menu { width: 160px !important; }

/* 顶部 logo 区（原 #14141e）同步改白 */
.navbar-brand-box {
  background: #ffffff !important;
  border-bottom: 1px solid #e8eef7;
}

/* ---- 菜单列表 ---- */
#sidebar-menu,
#sidebar-menu.menu-js {
  padding: 12px 0 24px;
  text-align: left;
}

#side-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

#side-menu > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- 菜单项 ---- */
#sidebar-menu #side-menu > li > a,
#sidebar-menu ul li > a {
  display: flex !important;
  align-items: center;
  height: 42px;
  margin: 2px 10px 2px 0 !important;
  padding: 9px 18px 9px 17px !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  border-radius: 8px !important;
  color: #526984 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 19.5px;
  text-decoration: none !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

#sidebar-menu #side-menu > li > a i,
#sidebar-menu ul li > a i {
  width: 28px;
  margin: 0 !important;
  color: #738baa !important;
  font-size: 17px !important;
  text-align: center;
  vertical-align: middle;
}

#sidebar-menu #side-menu > li > a span,
#sidebar-menu ul li > a span {
  padding-left: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* ---- hover ---- */
#sidebar-menu #side-menu > li > a:hover,
#sidebar-menu ul li > a:hover {
  background: #f4f8ff !important;
  color: #2563eb !important;
}

#sidebar-menu #side-menu > li > a:hover i,
#sidebar-menu ul li > a:hover i {
  color: #2563eb !important;
}

/* ---- 选中态：浅蓝底 + 左侧蓝条 + 蓝字 ---- */
#sidebar-menu #side-menu > li > a.active,
#sidebar-menu #side-menu > li.mm-active > a,
#sidebar-menu ul li > a.active,
#sidebar-menu ul li.mm-active > a {
  background: #edf4ff !important;
  background-image: none !important;
  border-left: 3px solid #4d8bff !important;
  border-radius: 8px !important;
  color: #2563eb !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#sidebar-menu #side-menu > li > a.active i,
#sidebar-menu #side-menu > li.mm-active > a i,
#sidebar-menu ul li > a.active i,
#sidebar-menu ul li.mm-active > a i {
  color: #2563eb !important;
}

/* ---- 子菜单：白底、缩进、次级色 ---- */
#sidebar-menu ul li ul.sub-menu,
#sidebar-menu ul li ul.sub-menu li a {
  background: #ffffff !important;
  color: #64748b !important;
  border-left-color: transparent !important;
}

#sidebar-menu ul li ul.sub-menu li a {
  padding-left: 52px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  height: auto;
  font-size: 13px !important;
}

#sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu ul li ul.sub-menu li.mm-active > a {
  background: #f4f8ff !important;
  color: #2563eb !important;
}

/* 折叠箭头的颜色 */
#sidebar-menu ul li a.has-arrow::after {
  border-color: #9fb3cc !important;
}

#sidebar-menu ul li a.active.has-arrow::after,
#sidebar-menu ul li.mm-active > a.has-arrow::after {
  border-color: #2563eb !important;
}

/* ---- 移动端抽屉：同样白底 ---- */
@media screen and (max-width: 992px) {
  .vertical-menu {
    background: #ffffff !important;
    box-shadow: 4px 0 18px rgba(15, 25, 50, .10) !important;
  }
}