/*
 * Skin: Black blue - 完整版（浅蓝→白 选中渐变）
 * 深蓝渐变侧边栏 + 浅蓝渐变到白选中
 */

/* ===== 顶部导航栏 ===== */
.skin-black-blue .main-header {
  background: linear-gradient(145deg, #0a1628 0%, #122a4a 40%, #1a3a5a 100%);
  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}
.skin-black-blue .main-header .navbar {
  background-color: rgba(255, 255, 255, 0.10);
}
.skin-black-blue .main-header .navbar .nav > li > a {
  color: rgba(255, 255, 255, 0.75);
}
.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,
.skin-black-blue .main-header .navbar .nav > .active > a {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}
.skin-black-blue .main-header .navbar .nav-addtabs li > .close-tab {
  color: rgba(255, 255, 255, 0.60);
}
.skin-black-blue .main-header .navbar .sidebar-toggle {
  color: rgba(255, 255, 255, 0.70);
}
.skin-black-blue .main-header .navbar .sidebar-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}
.skin-black-blue .main-header .navbar .navbar-nav > li > a {
  border-right: none;
}
.skin-black-blue .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
.skin-black-blue .main-header .navbar .navbar-right > li > a {
  border-left: none;
  border-right-width: 0;
}
@media (max-width: 767px) {
  .skin-black-blue .main-header .navbar {
    background-color: rgba(10, 22, 40, 0.85);
  }
  .skin-black-blue .main-header .navbar .nav > li > a {
    color: rgba(255, 255, 255, 0.75);
  }
  .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,
  .skin-black-blue .main-header .navbar .nav > .active > a {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .skin-black-blue .main-header .navbar .nav-addtabs li > .close-tab {
    color: rgba(255, 255, 255, 0.6);
  }
  .skin-black-blue .main-header .navbar .sidebar-toggle {
    color: rgba(255, 255, 255, 0.75);
  }
  .skin-black-blue .main-header .navbar .sidebar-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ===== Logo 区域 ===== */
/* ===== Logo 区域（白色渐变到深蓝） ===== */
.skin-black-blue .main-header .logo {
  background: linear-gradient(145deg, #1a3050 0%, #122a4a 40%, #0a1628 100%);
  color: rgba(220, 240, 255, 0.95);
  border-bottom: 0 solid transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.skin-black-blue .main-header .logo:hover {
  background: linear-gradient(145deg, #1a3050 0%, #1a3a5a 50%, #0a1628 100%);
}
@media (max-width: 767px) {
  .skin-black-blue .main-header .logo {
    background: linear-gradient(145deg, #1a3050 0%, #122a4a 40%, #0a1628 100%);
    color: rgba(220, 240, 255, 0.95);
    border-bottom: 0 solid transparent;
    border-right: none;
  }
  .skin-black-blue .main-header .logo:hover {
    background: linear-gradient(145deg, #1a3050 0%, #1a3a5a 50%, #0a1628 100%);
  }
}

/* ===== 用户头像卡片 ===== */
.skin-black-blue .main-header li.user-header {
  background: linear-gradient(145deg, #0a1628 0%, #122a4a 30%, #2b7a9e 70%, #5bb8e0 100%);
}

/* ===== 内容区 ===== */
.skin-black-blue .content-header {
  background: transparent;
  box-shadow: none;
}

/* ============================================================
   【侧边栏】深蓝到亮蓝渐变
   ============================================================ */
.skin-black-blue .wrapper,
.skin-black-blue .main-sidebar,
.skin-black-blue .left-side {
  background: linear-gradient(180deg, #0a1628 0%, #0f2040 25%, #162a4a 50%, #1a3a5a 75%, #2a5a7a 100%);
}

/* ===== 用户面板文字 ===== */
.skin-black-blue .user-panel > .info,
.skin-black-blue .user-panel > .info > a {
  color: #e8f0f8;
}
.skin-black-blue .user-panel > .info > a:hover {
  color: #8fd0e8;
}

/* ===== 侧边栏菜单分组标题 ===== */
.skin-black-blue .sidebar-menu > li.header {
  color: rgba(200, 220, 240, 0.25);
  background: rgba(255, 255, 255, 0.02);
}

/* ===== 一级菜单 - 未选中 ===== */
.skin-black-blue .sidebar-menu > li > a {
  color: rgba(220, 240, 255, 0.80);
  border-left: none;
}
.skin-black-blue .sidebar-menu > li > a .fa,
.skin-black-blue .sidebar-menu > li > a .glyphicon {
  color: rgba(200, 230, 255, 0.55);
}

/* ===== 一级菜单 - 悬停 ===== */
.skin-black-blue .sidebar-menu > li:hover > a {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}
.skin-black-blue .sidebar-menu > li:hover > a .fa,
.skin-black-blue .sidebar-menu > li:hover > a .glyphicon {
  color: rgba(255, 255, 255, 0.70);
}

/* ============================================================
   【选中效果】浅蓝渐变到白色
   ============================================================ */

/* 一级菜单（叶子菜单）选中 */
.skin-black-blue .sidebar-menu > li.active > a {
  color: #0a1628 !important;
  background: linear-gradient(135deg, #90caf9 0%, #bbdefb 40%, #e3f2fd 70%, #ffffff 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 25px rgba(144, 202, 249, 0.25) !important;
}
.skin-black-blue .sidebar-menu > li.active > a .fa,
.skin-black-blue .sidebar-menu > li.active > a .glyphicon {
  color: #0a1628 !important;
}

/* 父级菜单选中 */
.skin-black-blue .sidebar-menu > li.treeview.active > a,
.skin-black-blue .sidebar-menu > li.treeview > a.active {
  color: #0a1628 !important;
  background: linear-gradient(135deg, #90caf9 0%, #bbdefb 40%, #e3f2fd 70%, #ffffff 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 25px rgba(144, 202, 249, 0.25) !important;
}
.skin-black-blue .sidebar-menu > li.treeview.active > a .fa,
.skin-black-blue .sidebar-menu > li.treeview > a.active .fa,
.skin-black-blue .sidebar-menu > li.treeview.active > a .glyphicon,
.skin-black-blue .sidebar-menu > li.treeview > a.active .glyphicon {
  color: #0a1628 !important;
}
.skin-black-blue .sidebar-menu > li.treeview.active > a {
  background: linear-gradient(135deg, #90caf9 0%, #bbdefb 40%, #e3f2fd 70%, #ffffff 100%) !important;
  border-radius: 999px !important;
  color: #0a1628 !important;
}

/* 二级子菜单选中 */
.skin-black-blue .treeview-menu > li.active > a {
  color: #0a1628 !important;
  background: linear-gradient(135deg, #90caf9 0%, #bbdefb 40%, #e3f2fd 70%, #ffffff 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 25px rgba(144, 202, 249, 0.25) !important;
}
.skin-black-blue .treeview-menu > li.active > a .fa,
.skin-black-blue .treeview-menu > li.active > a .glyphicon {
  color: #0a1628 !important;
}

/* 二级子菜单悬停 */
.skin-black-blue .treeview-menu > li > a:hover {
  color: rgba(255, 255, 255, 0.90);
  background: rgba(255, 255, 255, 0.06);
}
.skin-black-blue .treeview-menu > li > a:hover .fa,
.skin-black-blue .treeview-menu > li > a:hover .glyphicon {
  color: rgba(255, 255, 255, 0.60);
}

/* ===== 侧边栏链接文字（全局） ===== */
.skin-black-blue .sidebar a {
  color: rgba(220, 240, 255, 0.80);
}
.skin-black-blue .sidebar a:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
}

/* ===== 树状子菜单 ===== */
.skin-black-blue .sidebar-menu > li > .treeview-menu {
  background: rgba(0, 0, 0, 0.15);
  border-left: none;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.skin-black-blue .treeview-menu > li > a {
  color: rgba(200, 225, 245, 0.70);
  font-size: 13px;
}
.skin-black-blue .treeview-menu > li > a .fa,
.skin-black-blue .treeview-menu > li > a .glyphicon {
  color: rgba(180, 215, 240, 0.40);
}

/* ===== 侧边栏搜索框 ===== */
.skin-black-blue .sidebar-form {
  border-radius: 999px;
  border: 1px solid rgba(200, 220, 240, 0.06);
  background: rgba(255, 255, 255, 0.03);
}
.skin-black-blue .sidebar-form:focus-within {
  border-color: rgba(144, 202, 249, 0.20);
  background: rgba(255, 255, 255, 0.06);
}
.skin-black-blue .sidebar-form input[type="text"],
.skin-black-blue .sidebar-form .btn {
  box-shadow: none;
  background: transparent;
  border: 1px solid transparent;
  height: 35px;
  color: rgba(220, 240, 255, 0.80);
}
.skin-black-blue .sidebar-form input[type="text"]::placeholder {
  color: rgba(200, 220, 240, 0.25);
}
.skin-black-blue .sidebar-form input[type="text"]:focus,
.skin-black-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.90);
}
.skin-black-blue .sidebar-form .btn {
  color: rgba(200, 220, 240, 0.20);
}
.skin-black-blue .sidebar-form .btn:hover {
  color: rgba(200, 220, 240, 0.45);
}

/* ===== 折叠模式 ===== */
.skin-black-blue.sidebar-collapse .sidebar-menu li:hover > a,
.skin-black-blue.sidebar-collapse .sidebar-menu li.active > a {
  color: #0a1628 !important;
  background: linear-gradient(135deg, #90caf9 0%, #bbdefb 40%, #e3f2fd 70%, #ffffff 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 25px rgba(144, 202, 249, 0.25) !important;
}
.skin-black-blue.sidebar-collapse .sidebar-menu .treeview-menu li.active > a {
  color: #0a1628 !important;
  background: linear-gradient(135deg, #90caf9 0%, #bbdefb 40%, #e3f2fd 70%, #ffffff 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 25px rgba(144, 202, 249, 0.25) !important;
}
.skin-black-blue.sidebar-collapse .sidebar-menu .treeview-menu li.treeview > a {
  background: transparent;
  border-left-color: transparent;
}

/* ===== 移动端快捷按钮 ===== */
@media (max-width: 767px) {
  .skin-black-blue.multiplenav .sidebar .mobilenav a.btn-app {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(220, 240, 255, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 999px;
  }
  .skin-black-blue.multiplenav .sidebar .mobilenav a.btn-app.active {
    color: #0a1628 !important;
    background: linear-gradient(135deg, #90caf9 0%, #bbdefb 40%, #e3f2fd 70%, #ffffff 100%) !important;
    box-shadow: 0 4px 25px rgba(144, 202, 249, 0.25) !important;
    border-color: transparent;
  }
}