/*
 * Skin: Blue
 * -----------
 * 这是基于AdminLTE模板的蓝色主题皮肤样式
 * 主要定义后台管理系统的导航栏、侧边栏、Logo、菜单、搜索框等核心组件样式
 * 整体风格：以蓝色系为主，兼顾交互反馈和响应式适配
 */

/* 1. 顶部导航栏 - 移动端菜单切换按钮样式 */
.skin-blue .main-header .navbar-toggle {
  color: #333; /* 按钮文字颜色：深灰色 */
}

/* 2. 顶部导航栏 - 品牌/Logo文字容器样式 */
.skin-blue .main-header .navbar-brand {
  color: #333; /* 文字颜色：深灰色 */
  border-right: 1px solid #eee; /* 右侧1px浅灰色边框，分隔导航项 */
}

/* 3. 顶部导航栏 - 整体背景样式 */
.skin-blue .main-header .navbar {
  background-color: #fff; /* 导航栏背景：纯白色 */
  border-radius: 10px;
}

/* 4. 顶部导航栏 - 导航菜单项默认样式 */
.skin-blue .main-header .navbar .nav > li > a {
  color: #444; /* 菜单文字颜色：中灰色 */
}

/* 5. 顶部导航栏 - 导航菜单项交互样式（悬停/激活/聚焦/展开下拉） */
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
  background: rgba(0, 0, 0, 0.02); /* 背景：极浅的黑色透明，轻微高亮 */
  color: #4e73df; /* 文字颜色：主题主蓝色（核心色值） */
}

/* 6. 顶部导航栏 - 多标签页关闭按钮样式 */
.skin-blue .main-header .navbar .nav-addtabs li > .close-tab {
  color: #4e73df; /* 关闭按钮颜色：主题主蓝色 */
}

/* 7. 顶部导航栏 - 侧边栏切换按钮默认样式 */
.skin-blue .main-header .navbar .sidebar-toggle {
  color: #444; /* 按钮文字颜色：中灰色 */
}

/* 8. 顶部导航栏 - 侧边栏切换按钮悬停样式 */
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  color: #4e73df; /* 文字颜色：主题主蓝色 */
  background: rgba(0, 0, 0, 0.02); /* 背景：极浅的黑色透明 */
}

/* 9. 顶部导航栏 - 侧边栏切换按钮（直接子元素）样式 */
.skin-blue .main-header .navbar > .sidebar-toggle {
  color: #333; /* 文字颜色：深灰色 */
  border-right: 1px solid #eee; /* 右侧1px浅灰色边框，分隔元素 */
}

/* 10. 顶部导航栏 - 普通导航项边框样式 */
.skin-blue .main-header .navbar .navbar-nav > li > a {
  border-right: 1px solid #eee; /* 右侧1px浅灰色边框，分隔菜单项 */
}

/* 11. 顶部导航栏 - 自定义菜单/右侧菜单边框样式（覆盖默认） */
.skin-blue .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
.skin-blue .main-header .navbar .navbar-right > li > a {
  border-left: 1px solid #eee; /* 先定义左侧边框（后续覆盖） */
  border-left: none; /* 取消左侧边框 */
  border-right-width: 0; /* 取消右侧边框 */
}

/* 12. 顶部Logo区域 - 大屏默认样式 */
.skin-blue .main-header > .logo {
  background-color: #4e73df; /* Logo背景：主题主蓝色 */
  color: #fff; /* 文字颜色：白色 */
  border-bottom: 0 solid transparent; /* 取消底部边框 */
  border-right: 1px solid #4e73df; /* 右侧1px主蓝色边框 */
  box-shadow: none; /* 取消阴影，简洁风格 */
}

/* 13. 顶部Logo区域 - 悬停样式 */
.skin-blue .main-header > .logo:hover {
  background-color: #4a70de; /* 背景：主蓝色稍暗，hover反馈 */
}

/* 14. 响应式适配 - 小屏幕（手机，宽度≤767px）Logo样式 */
@media (max-width: 767px) {
  .skin-blue .main-header > .logo {
    background-color: #fff; /* 背景改为白色，适配移动端 */
    color: #222; /* 文字改为深灰色 */
    border-bottom: 0 solid transparent; /* 取消底部边框 */
    border-right: none; /* 取消右侧边框（移动端无侧边栏） */
  }
  /* 小屏幕Logo悬停样式 */
  .skin-blue .main-header > .logo:hover {
    background-color: #fcfcfc; /* 背景：超浅灰色，轻微hover反馈 */
  }
}

/* 15. 顶部用户面板 - 头部背景样式 */
.skin-blue .main-header li.user-header {
  background-color: #4e73df; /* 背景：主题主蓝色，统一视觉 */
}

/* 16. 顶部多标签页 - 边框样式 */
.skin-blue .main-header .nav-addtabs > li > a,
.skin-blue .main-header .nav-addtabs > li.active > a {
  border-right-color: transparent; /* 取消右侧边框，避免重复分隔 */
}

/* 17. 内容区域头部 - 样式 */
.skin-blue .content-header {
  background: transparent; /* 背景透明，简化视觉 */
  box-shadow: none; /* 取消阴影，扁平化风格 */
}

/* 18. 侧边栏 - 整体背景样式（包裹层/侧边栏主体/左侧区域） */
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background-color: #4e73df; /* 背景：主题主蓝色，统一侧边栏色调 */
}

/* 19. 侧边栏 - 用户面板文字样式 */
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
  color: #fff; /* 文字/链接颜色：白色，与蓝色背景对比 */
}

/* 20. 侧边栏 - 树形子菜单内边距 */
.skin-blue .sidebar-menu .treeview-menu {
  padding-left: 3px; /* 左侧内边距缩小，紧凑布局 */
}

/* 21. 侧边栏 - 菜单分组标题样式 */
.skin-blue .sidebar-menu > li.header {
  color: #a4b7ef; /* 文字颜色：浅蓝灰色，弱化标题视觉权重 */
  background: #3d65dc; /* 背景：主蓝色稍暗，区分分组 */
}

/* 22. 侧边栏 - 主菜单交互样式（悬停/激活） */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
  color: #fff; /* 文字颜色：白色，高亮 */
  background: #456cdd; /* 背景：主蓝色稍暗，hover/激活反馈#456cdd; */
  border-left-color: #d81212; /* 左侧边框：白色，标识激活状态 */
}


/* 23. 侧边栏 - 树形子菜单背景样式 */
.skin-blue .sidebar-menu > li > .treeview-menu {
  background: #3d6cd9; /* 背景：青绿色，区分主/子菜单层级#3d6cd9 */
}

/* 24. 侧边栏 - 通用链接默认样式 */
.skin-blue .sidebar a {
  color: #ccd9ff; /* 文字颜色：浅蓝白色，与蓝色背景柔和对比#ccd9ff */
}

/* 25. 侧边栏 - 通用链接悬停样式（取消下划线） */
.skin-blue .sidebar a:hover {
  text-decoration: none; /* 取消下划线，保持简洁 */
}

/* 26. 侧边栏 - 树形子菜单链接默认样式 */
.skin-blue .treeview-menu > li > a {
  color: #ccd9ff; /* 文字颜色：浅蓝白色，与主菜单一致 */
}

/* 27. 侧边栏 - 树形子菜单链接交互样式（激活/悬停） */
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
  color: #fff; /* 文字颜色：白色，高亮反馈 */
  font-weight: 600; /* 字体加粗：600，增强视觉 */
  background: rgba(7, 239, 119, 0.6); /* 背景：青绿色，区分主/子菜单层级#3d6cd9 加选中背景效果 */
}

/* 28. 侧边栏 - 搜索框容器样式 */
.skin-blue .sidebar-form {
  border-radius: 3px; /* 圆角：3px，柔和边角 */
  border: 1px solid #7995e7; /* 边框：浅蓝灰色，与背景区分 */
  background-color: #7995e7; /* 背景：浅蓝灰色，轻量化设计 */
  margin: 10px 10px; /* 外边距：上下左右10px，与菜单分隔 */
}

/* 29. 侧边栏 - 搜索框输入框/按钮基础样式 */
.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
  box-shadow: none; /* 取消阴影，扁平化 */
  background-color: #7995e7; /* 背景：与搜索框容器一致 */
  border: 1px solid transparent; /* 透明边框（聚焦时修改） */
  height: 35px; /* 高度：35px，统一尺寸 */
}

/* 30. 侧边栏 - 搜索框输入框样式 */
.skin-blue .sidebar-form input[type="text"] {
  color: #666; /* 文字颜色：中灰色（聚焦时修改） */
  /* 圆角：仅左上/左下圆角，与右侧按钮拼接成完整圆角 */
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}

/* 31. 侧边栏 - 搜索框输入框聚焦样式（输入框+按钮） */
.skin-blue .sidebar-form input[type="text"]:focus,
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff; /* 背景：白色，聚焦高亮 */
  color: #666; /* 文字颜色：中灰色，提升可读性 */
}

/* 32. 侧边栏 - 搜索框输入框聚焦时按钮容器样式 */
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn {
  background: #fff; /* 背景：白色，与输入框统一 */
  /* 圆角：仅右上/右下圆角，与左侧输入框拼接 */
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

/* 33. 侧边栏 - 搜索框输入框聚焦时按钮边框样式 */
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff; /* 左侧边框：白色，与输入框无缝衔接 */
}

/* 34. 侧边栏 - 搜索框按钮默认样式 */
.skin-blue .sidebar-form .btn {
  color: #999; /* 文字颜色：浅灰色，弱化按钮视觉 */
  /* 圆角：仅右上/右下圆角，与左侧输入框拼接 */
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}

/* 35. 侧边栏 - 主菜单项基础样式 */
.skin-blue .sidebar-menu > li > a {
  border-left: 3px solid transparent; /* 左侧透明边框（激活时改为白色） */
  padding-left: 12px; /* 左侧内边距：12px，调整菜单缩进 */
}

/* 36. 响应式适配 - 大屏（≥768px）侧边栏折叠时菜单hover样式 */
@media (min-width: 768px) {
  .skin-blue.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
    margin-left: -3px; /* 左外边距：-3px，调整折叠菜单hover时文字位置 */
  }
}

/* 37. 侧边栏 - 搜索框输入框占位符样式（Firefox） */
.skin-blue .sidebar-form input[type="text"]::-moz-placeholder {
  color: #fff; /* 占位符文字：白色，与浅蓝背景对比 */
  opacity: 1; /* 不透明度：1，确保颜色显示正常 */
}

/* 38. 侧边栏 - 搜索框输入框占位符样式（IE/Edge） */
.skin-blue .sidebar-form input[type="text"]:-ms-input-placeholder {
  color: #fff; /* 占位符文字：白色 */
}

/* 39. 侧边栏 - 搜索框输入框占位符样式（Chrome/Safari） */
.skin-blue .sidebar-form input[type="text"]::-webkit-input-placeholder {
  color: #fff; /* 占位符文字：白色 */
}

/* 40. 侧边栏 - 搜索框输入框/按钮文字颜色（覆盖默认） */
.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
  color: #fff; /* 文字颜色：白色，与浅蓝背景对比 */
}

/* 41. 响应式适配 - 小屏幕（≤767px）多标签导航样式 */
@media (max-width: 767px) {
  /* 移动端多标签导航栏背景 */
  .skin-blue.multiplenav .main-header .navbar {
    background-color: #4e73df; /* 背景：主题主蓝色，与PC端区分 */
  }
  /* 移动端多标签导航菜单项文字 */
  .skin-blue.multiplenav .main-header .navbar .nav > li > a {
    color: #fff; /* 文字：白色，与蓝色背景对比 */
  }
  /* 移动端多标签导航菜单项交互样式（悬停/激活/聚焦） */
  .skin-blue.multiplenav .main-header .navbar .nav > li > a:hover,
  .skin-blue.multiplenav .main-header .navbar .nav > li > a:active,
  .skin-blue.multiplenav .main-header .navbar .nav > li > a:focus,
  .skin-blue.multiplenav .main-header .navbar .nav .open > a,
  .skin-blue.multiplenav .main-header .navbar .nav .open > a:hover,
  .skin-blue.multiplenav .main-header .navbar .nav .open > a:focus,
  .skin-blue.multiplenav .main-header .navbar .nav > .active > a {
    background: rgba(0, 0, 0, 0.1); /* 背景：浅黑色透明，hover反馈 */
    color: #f6f6f6; /* 文字：浅白色，高亮 */
  }
  /* 移动端多标签页关闭按钮颜色 */
  .skin-blue.multiplenav .main-header .navbar .nav-addtabs li > .close-tab {
    color: #f6f6f6; /* 颜色：浅白色，与导航栏一致 */
  }
  /* 移动端侧边栏切换按钮颜色 */
  .skin-blue.multiplenav .main-header .navbar .sidebar-toggle {
    color: #fff; /* 颜色：白色 */
  }
  /* 移动端侧边栏切换按钮悬停样式 */
  .skin-blue.multiplenav .main-header .navbar .sidebar-toggle:hover {
    color: #f6f6f6; /* 文字：浅白色 */
    background: rgba(0, 0, 0, 0.1); /* 背景：浅黑色透明 */
  }
  /* 移动端Logo背景/文字样式 */
  .skin-blue.multiplenav .main-header > .logo {
    background-color: #4e73df; /* 背景：主题主蓝色 */
    color: #fff; /* 文字：白色 */
    border-bottom: 0 solid transparent; /* 取消底部边框 */
  }
  /* 移动端Logo悬停样式 */
  .skin-blue.multiplenav .main-header > .logo:hover {
    background-color: #4a70de; /* 背景：主蓝色稍暗，hover反馈 */
  }
  /* 移动端侧边栏导航按钮默认样式 */
  .skin-blue.multiplenav .sidebar .mobilenav a.btn-app {
    background: #7995e7; /* 背景：浅蓝灰色 */
    color: #fff; /* 文字：白色 */
  }
  /* 移动端侧边栏导航按钮激活样式 */
  .skin-blue.multiplenav .sidebar .mobilenav a.btn-app.active {
    background: #fff; /* 背景：白色，高亮 */
    color: #7995e7; /* 文字：浅蓝灰色，对比 */
  }
}

/* 源映射文件（用于开发调试，关联编译后的CSS与源文件） */
/*# sourceMappingURL=skin-blue.css.map */