/**
 * Z-Claw 后台顶栏：浅色业务外壳 + 品牌色点缀
 * 兼顾深色首页与白色业务子页面
 */
.skin-blue-light .main-header {
  background:
    linear-gradient(90deg, rgba(99, 215, 255, 0.035), transparent 38%),
    #f8fafc;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.07);
}

.skin-blue-light .main-header .navbar {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.98), rgba(247, 251, 255, 0.96)) !important;
  border-bottom: 1px solid rgba(126, 163, 255, 0.16);
}

.skin-blue-light .main-header .logo {
  background:
    linear-gradient(90deg, rgba(99, 215, 255, 0.06), transparent),
    #f8fafc !important;
  color: #1e293b !important;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.skin-blue-light .main-header .logo:hover {
  background:
    linear-gradient(90deg, rgba(99, 215, 255, 0.09), transparent),
    #f1f5f9 !important;
  color: #0f172a !important;
}

#firstnav {
  box-shadow: none;
  border-bottom: none;
}

/* 顶栏右侧：清理缓存、全屏、用户头像统一成轻量工具区 */
.skin-blue-light .main-header .navbar-custom-menu {
  padding-right: 12px;
}

.skin-blue-light .main-header .navbar-custom-menu .navbar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  line-height: 1;
  color: #42526b !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a.header-icon-only,
.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a[data-toggle="fullscreen"] {
  width: 32px;
  height: 32px;
  margin: 8px 0;
  padding: 0;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a.header-icon-only > .fa,
.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a[data-toggle="fullscreen"] > .fa {
  margin: 0;
  color: #64748b;
  font-size: 15px;
}

.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a.header-icon-only:hover,
.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a[data-toggle="fullscreen"]:hover,
.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li.open > a.header-icon-only {
  border-color: #dbe5f0;
  background: #f5f8fc !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a.header-icon-only:hover > .fa,
.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li > a[data-toggle="fullscreen"]:hover > .fa,
.skin-blue-light .main-header .navbar-custom-menu .navbar-nav > li.open > a.header-icon-only > .fa {
  color: #334155;
}

.skin-blue-light .main-header .navbar .navbar-nav > li.user-menu > a {
  height: 32px;
  min-height: 32px;
  margin: 8px 0 8px 2px;
  padding: 3px 10px 3px 5px;
  gap: 7px;
  border: 1px solid #dbe5f0;
  border-radius: 999px;
  background: #f8fbff;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.skin-blue-light .main-header .navbar .navbar-nav > li.user-menu > a .user-image {
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid rgba(99, 215, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(99, 215, 255, 0.08);
}

.skin-blue-light .main-header .navbar .navbar-nav > li.user-menu > a:hover,
.skin-blue-light .main-header .navbar .navbar-nav > li.user-menu.open > a {
  border-color: #dbe5f0;
  background: #f5f8fc !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

/* 边栏折叠按钮 */
#firstnav .sidebar-toggle {
  border-right: 1px solid rgba(126, 163, 255, 0.14);
  color: #334155 !important;
}

/* 默认 FastAdmin 使用 :before 显示 \f0c9（三条横线），改为分栏图标，更贴合「侧栏开关」且与列表横杠区分 */
.skin-blue-light .main-header .sidebar-toggle:before,
#firstnav .sidebar-toggle:before {
  content: "\f0db";
  font-size: 17px;
  opacity: 0.9;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover:before,
#firstnav .sidebar-toggle:hover:before {
  opacity: 1;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
  background: rgba(99, 215, 255, 0.08) !important;
  color: #0f172a !important;
}

/* 悬停与展开：浅色品牌底 */
.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 {
  background: rgba(99, 215, 255, 0.08) !important;
  color: #0f172a !important;
}

.skin-blue-light .main-header .navbar .nav .open > a > .fa {
  color: #0f172a;
}

/* 多标签页导航条（若启用）与顶栏一体 */
.skin-blue-light #firstnav .nav-tabs {
  border-bottom-color: transparent;
}

.skin-blue-light #firstnav .nav-tabs > li > a {
  color: #64748b;
}

.skin-blue-light #firstnav .nav-tabs > li.active > a {
  color: #63d7ff;
}

/* 二级顶栏（multiplenav 开启时） */
.skin-blue-light #secondnav {
  background: #f8fbff;
  border-top: 1px solid rgba(126, 163, 255, 0.14);
}