/**
 * 后台侧栏 / 顶部栏自定义样式（在 skin 之后加载）
 */

/* ========== 顶部栏：60px + Logo（与前台 user 中心一致） ========== */
.main-header .logo,
.main-header .navbar,
#firstnav {
  min-height: 60px;
}
.main-header .logo {
  height: 60px !important;
  line-height: normal !important;
}
.main-header .logo .logo-lg {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
#firstnav {
  height: 60px !important;
}
#secondnav {
  top: 60px !important;
}

/* ========== 顶部栏美化 ========== */
.skin-blue-light .main-header {
  background: linear-gradient(90deg, #0f2d6e 0%, #1e40af 38%, #2563eb 72%, #4e73df 100%) !important;
  box-shadow: 0 2px 14px rgba(15, 45, 110, 0.22);
  border-bottom: none;
}
.skin-blue-light .main-header .logo,
.skin-blue-light .main-header .logo:hover,
.skin-blue-light .main-header .navbar,
.skin-blue-light .main-header #firstnav,
.skin-blue-light .main-header .navbar-custom-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.skin-blue-light .main-header .logo {
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.skin-blue-light .main-header .navbar .nav > li > a {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.skin-blue-light .main-header .navbar .nav > li > a:hover,
.skin-blue-light .main-header .navbar .nav > li > a:active,
.skin-blue-light .main-header .navbar .nav > li > a:focus,
.skin-blue-light .main-header .navbar .nav .open > a,
.skin-blue-light .main-header .navbar .nav .open > a:hover,
.skin-blue-light .main-header .navbar .nav .open > a:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.skin-blue-light .main-header li.user-header {
  background: linear-gradient(135deg, #1e40af 0%, #4e73df 100%) !important;
}
.skin-blue-light #secondnav {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #e5eaf1;
  box-shadow: 0 1px 6px rgba(15, 45, 110, 0.06);
}

/* 超管一级导航：未选中透明胶囊（避免白字+浅底不可见） */
.skin-blue-light #firstnav .nav-addtabs > li:not(.active) > a,
.skin-black-blue #firstnav .nav-addtabs > li:not(.active) > a {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.skin-blue-light #firstnav .nav-addtabs > li:not(.active) > a:hover,
.skin-blue-light #firstnav .nav-addtabs > li:not(.active) > a:focus,
.skin-black-blue #firstnav .nav-addtabs > li:not(.active) > a:hover,
.skin-black-blue #firstnav .nav-addtabs > li:not(.active) > a:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
}
.skin-blue-light #firstnav .nav-addtabs > li:not(.active) > a .fa,
.skin-black-blue #firstnav .nav-addtabs > li:not(.active) > a .fa {
  color: rgba(255, 255, 255, 0.85) !important;
}
.skin-blue-light #firstnav .nav-addtabs > li.active > a,
.skin-blue-light #firstnav .nav-addtabs > li.active > a:hover,
.skin-blue-light #firstnav .nav-addtabs > li.active > a:focus,
.skin-black-blue #firstnav .nav-addtabs > li.active > a,
.skin-black-blue #firstnav .nav-addtabs > li.active > a:hover,
.skin-black-blue #firstnav .nav-addtabs > li.active > a:focus {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}
.skin-blue-light #firstnav .nav-addtabs > li.active > a .fa,
.skin-black-blue #firstnav .nav-addtabs > li.active > a .fa {
  color: rgba(255, 255, 255, 0.92) !important;
}

.skin-black-blue .main-header {
  background: linear-gradient(90deg, #1e40af 0%, #2563eb 45%, #4e73df 100%) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  border-bottom: none;
}
.skin-black-blue .main-header .logo,
.skin-black-blue .main-header .logo:hover,
.skin-black-blue .main-header .navbar,
.skin-black-blue .main-header #firstnav,
.skin-black-blue .main-header .navbar-custom-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.skin-black-blue .main-header .logo {
  color: #fff !important;
  font-weight: 600;
}
.skin-black-blue .main-header .navbar .nav > li > a {
  color: rgba(255, 255, 255, 0.9) !important;
}
.skin-black-blue .main-header .navbar .nav > li > a:hover,
.skin-black-blue .main-header .navbar .nav > li > a:active,
.skin-black-blue .main-header .navbar .nav > li > a:focus,
.skin-black-blue .main-header .navbar .nav .open > a,
.skin-black-blue .main-header .navbar .nav .open > a:hover,
.skin-black-blue .main-header .navbar .nav .open > a:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.skin-black-blue #secondnav {
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

@media (max-width: 767px) {
  .main-header .logo,
  .main-header .navbar,
  #firstnav {
    min-height: 50px;
    height: 50px !important;
  }
  .main-header .logo .main-header-logo {
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }
  .main-header .logo .logo-lg {
    font-size: 14px;
  }
  #secondnav {
    top: 50px !important;
  }
  .multiplenav .content-wrapper,
  .multiplenav .right-side,
  .multiplenav .main-sidebar {
    padding-top: 50px !important;
  }
  .multipletab.multiplenav .content-wrapper,
  .multipletab.multiplenav .right-side {
    padding-top: 94px !important;
  }
  .multipletab.multiplenav .main-sidebar {
    padding-top: 94px !important;
  }
}

/* ========== 侧栏菜单 ========== */
.main-sidebar .sidebar-menu {
  padding-top: 0;
}
.main-sidebar .sidebar-menu > li > a {
  margin: 2px 10px 2px 0;
  border-radius: 0 8px 8px 0;
  border-left: 3px solid transparent !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.main-sidebar .sidebar-menu .treeview-menu {
  padding-top: 4px;
  padding-bottom: 4px;
}
.main-sidebar .sidebar-menu .treeview-menu > li > a {
  margin: 2px 10px 2px 0;
  padding-left: 36px;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid transparent !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sidebar-collapse .main-sidebar .sidebar-menu > li:hover > a,
.sidebar-collapse .main-sidebar .sidebar-menu > li.active:not(.treeview) > a {
  border-radius: 0 8px 8px 0;
}
.sidebar-collapse .main-sidebar .sidebar-menu .treeview-menu > li.active > a,
.sidebar-collapse .main-sidebar .sidebar-menu .treeview-menu > li:hover > a {
  border-radius: 0 6px 6px 0;
}

/* skin-black-blue 深色侧栏 - 默认态 */
.skin-black-blue .main-sidebar .sidebar-menu > li:not(.active):not(:hover) > a,
.skin-black-blue .main-sidebar .sidebar-menu > li.treeview.active > a,
.skin-black-blue .main-sidebar .sidebar-menu > li.treeview.treeview-open > a {
  color: #b8c7ce !important;
  background: transparent !important;
}
.skin-black-blue .main-sidebar .sidebar-menu > li.treeview.active > a,
.skin-black-blue .main-sidebar .sidebar-menu > li.treeview.treeview-open > a {
  border-left-color: #4e73df !important;
  font-weight: 600;
}
.skin-black-blue .main-sidebar .sidebar-menu .treeview-menu > li:not(.active):not(:hover) > a {
  color: #8aa4af !important;
  background: transparent !important;
}

/* skin-blue-light 浅色侧栏 - 默认态 */
.skin-blue-light .main-sidebar .sidebar-menu > li:not(.active):not(:hover) > a,
.skin-blue-light .main-sidebar .sidebar-menu > li.treeview.active > a,
.skin-blue-light .main-sidebar .sidebar-menu > li.treeview.treeview-open > a {
  color: #444 !important;
  background: transparent !important;
}
.skin-blue-light .main-sidebar .sidebar-menu > li.treeview.active > a,
.skin-blue-light .main-sidebar .sidebar-menu > li.treeview.treeview-open > a {
  border-left-color: #4e73df !important;
  font-weight: 600;
}
.skin-blue-light .main-sidebar .sidebar-menu .treeview-menu > li:not(.active):not(:hover) > a {
  color: #777 !important;
  background: transparent !important;
}

/* 悬停 / 选中：蓝色渐变（一级、二级、multiplenav 扁平菜单） */
.main-sidebar .sidebar-menu > li:hover > a,
.main-sidebar .sidebar-menu > li.treeview.active:hover > a,
.main-sidebar .sidebar-menu > li.treeview.treeview-open:hover > a,
.main-sidebar .sidebar-menu > li.active:not(.treeview) > a,
.main-sidebar .sidebar-menu > li.active[pid] > a,
.main-sidebar .sidebar-menu .treeview-menu > li:hover > a,
.main-sidebar .sidebar-menu .treeview-menu > li.active > a,
.sidebar-collapse .main-sidebar .sidebar-menu > li:hover > a,
.sidebar-collapse .main-sidebar .sidebar-menu > li.active:not(.treeview) > a,
.sidebar-collapse .main-sidebar .sidebar-menu > li.active[pid] > a,
.sidebar-collapse .main-sidebar .sidebar-menu .treeview-menu > li:hover > a,
.sidebar-collapse .main-sidebar .sidebar-menu .treeview-menu > li.active > a,
.skin-black-blue .main-sidebar .sidebar-menu > li:hover > a,
.skin-black-blue .main-sidebar .sidebar-menu > li.active:not(.treeview) > a,
.skin-black-blue .main-sidebar .sidebar-menu > li.active[pid] > a,
.skin-black-blue .main-sidebar .sidebar-menu .treeview-menu > li:hover > a,
.skin-black-blue .main-sidebar .sidebar-menu .treeview-menu > li.active > a,
.skin-blue-light .main-sidebar .sidebar-menu > li:hover > a,
.skin-blue-light .main-sidebar .sidebar-menu > li.active:not(.treeview) > a,
.skin-blue-light .main-sidebar .sidebar-menu > li.active[pid] > a,
.skin-blue-light .main-sidebar .sidebar-menu .treeview-menu > li:hover > a,
.skin-blue-light .main-sidebar .sidebar-menu .treeview-menu > li.active > a {
  color: #fff !important;
  background: linear-gradient(90deg, #1e40af 0%, #4e73df 55%, #6b93f0 100%) !important;
  border-left-color: #93c5fd !important;
  font-weight: 600;
}
.main-sidebar .sidebar-menu > li:hover > a > .fa,
.main-sidebar .sidebar-menu > li:hover > a > .ion,
.main-sidebar .sidebar-menu > li:hover > a > .glyphicon,
.main-sidebar .sidebar-menu > li.active:not(.treeview) > a > .fa,
.main-sidebar .sidebar-menu > li.active:not(.treeview) > a > .ion,
.main-sidebar .sidebar-menu > li.active:not(.treeview) > a > .glyphicon,
.main-sidebar .sidebar-menu > li.active[pid] > a > .fa,
.main-sidebar .sidebar-menu > li.active[pid] > a > .ion,
.main-sidebar .sidebar-menu > li.active[pid] > a > .glyphicon,
.main-sidebar .sidebar-menu .treeview-menu > li:hover > a > .fa,
.main-sidebar .sidebar-menu .treeview-menu > li:hover > a > .ion,
.main-sidebar .sidebar-menu .treeview-menu > li:hover > a > .glyphicon,
.main-sidebar .sidebar-menu .treeview-menu > li.active > a > .fa,
.main-sidebar .sidebar-menu .treeview-menu > li.active > a > .ion,
.main-sidebar .sidebar-menu .treeview-menu > li.active > a > .glyphicon {
  color: #fff !important;
}