/**
 * 后台配色方案（对齐 shop.pgo.mobi/admin/dashboard）
 * ------------------------------------------------------------------
 * 取色来源：参考后台截图
 *   主色      #4073fa  按钮、选中菜单、分页、链接
 *   深色外壳  #282c34  左侧导航条 / 深色主题侧栏
 *   页面底色  #f0f2f5
 *   卡片      #ffffff，边框 #ebeef5
 *   表格头    #ebf1fe，行悬停 #f5f7fa
 *   文字      #303133 / #606266 / #909399 / #c0c4cc
 *   成功      #19be6b
 *   警告      #e6a23c
 *   危险      #f56c6c
 *   信息      #909399
 *
 * 三套侧边栏主题：
 *   theme-light  #ffffff 浅色侧栏（默认）
 *   theme-dark   #282c34 深色侧栏（对应参考稿的深色导航条）
 *   theme-blue   #262a31 深灰蓝侧栏
 *
 * 说明：此处只覆盖颜色、圆角、阴影，不改变任何布局尺寸。
 * ------------------------------------------------------------------
 */

:root {
	/* 品牌色 */
	--brand: #4073fa;
	--brand-hover: #5c88fb;
	--brand-active: #2f5fe0;
	--brand-soft: #ebf1fe;
	--brand-soft-2: #f5f8ff;
	--brand-border: #b9cdfd;
	--brand-shadow: rgba(64, 115, 250, .14);

	/* 语义色 */
	--success: #19be6b;
	--success-hover: #2ecb7c;
	--success-active: #12a75c;
	--success-soft: #e8f8f0;
	--warning: #e6a23c;
	--warning-hover: #ebb15e;
	--warning-active: #cf8b26;
	--warning-soft: #fdf6ec;
	--danger: #f56c6c;
	--danger-hover: #f78c8c;
	--danger-active: #dd5a5a;
	--danger-soft: #fef0f0;
	--info: #909399;
	--info-hover: #a6a9ad;
	--info-active: #73767a;

	/* 中性色：与后台参考稿一致（Element 灰阶） */
	--text-1: #303133;
	--text-2: #606266;
	--text-3: #909399;
	--text-4: #c0c4cc;
	--border: #dcdfe6;
	--border-light: #ebeef5;
	--bg-page: #f0f2f5;
	--bg-card: #ffffff;
	--bg-hover: #f0f2f5;

	/* 统一外壳（顶栏 / 深色侧边栏） */
	--shell: #282c34;
	--shell-hover: #333842;
	/* 深蓝侧边栏：比原来的 #0f2950 更灰一档，大色块不刺眼 */
	--shell-blue: #262a31;
	--shell-blue-hover: #30343c;
	/* 浅色侧边栏 */
	--sidebar-light: #ffffff;
	--sidebar-light-hover: #f5f7fa;

	/* 皮肤点缀色（默认灰蓝，body.skin-* 会覆盖） */
	--skin: #4073fa;
	--skin-hover: #5c88fb;
	--skin-active: #2f5fe0;
	--skin-soft: #ebf1fe;
	--skin-soft-2: #f5f8ff;
	--skin-border: #b9cdfd;

	/* 形状（后台整体为 Element 风格的小圆角） */
	--radius: 4px;
	--radius-lg: 4px;
	--shadow-card: 0 0 0 1px var(--border-light);
	--shadow-card-hover: 0 2px 12px rgba(0, 0, 0, .06);
	--ring: 0 0 0 3px var(--brand-shadow);
}

/* 各皮肤只保留一组低饱和点缀色 */
body.skin-blue {
	--skin: #4073fa;
	--skin-hover: #5c88fb;
	--skin-active: #2f5fe0;
	--skin-soft: #ebf1fe;
	--skin-soft-2: #f5f8ff;
	--skin-border: #b9cdfd;
}

body.skin-green {
	--skin: #19be6b;
	--skin-hover: #2ecb7c;
	--skin-active: #12a75c;
	--skin-soft: #e8f8f0;
	--skin-soft-2: #f2fbf6;
	--skin-border: #a8e6c3;
}

body.skin-purple {
	--skin: #7b61ff;
	--skin-hover: #9a86ff;
	--skin-active: #6549e8;
	--skin-soft: #f0edff;
	--skin-soft-2: #f7f5ff;
	--skin-border: #c9bdfd;
}

body.skin-red {
	--skin: #f56c6c;
	--skin-hover: #f78c8c;
	--skin-active: #dd5a5a;
	--skin-soft: #fef0f0;
	--skin-soft-2: #fff7f7;
	--skin-border: #fbc4c4;
}

body.skin-yellow {
	--skin: #e6a23c;
	--skin-hover: #ebb15e;
	--skin-active: #cf8b26;
	--skin-soft: #fdf6ec;
	--skin-soft-2: #fffaf2;
	--skin-border: #f3d19e;
}

/* ================= 基础 ================= */
body {
	color: var(--text-2);
}

body.gray-bg,
.gray-bg {
	background-color: var(--bg-page) !important;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-1);
}

a {
	color: var(--brand);
}

a:hover,
a:focus {
	color: var(--brand-hover);
}

::selection {
	background: var(--brand-soft);
	color: var(--brand-active);
}

.text-primary { color: var(--brand) !important; }
.text-success { color: var(--success) !important; }
.text-info    { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-muted   { color: var(--text-3) !important; }

/* ================= 按钮 ================= */
.btn {
	border-radius: var(--radius);
	transition: background-color .2s ease, border-color .2s ease,
		color .2s ease, box-shadow .2s ease;
}

/* 实心按钮：与参考稿一致的扁平风格 */
.btn-primary {
	background-color: var(--brand) !important;
	border-color: var(--brand) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
	background-color: var(--brand-hover) !important;
	border-color: var(--brand-hover) !important;
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
	background-color: var(--brand-active) !important;
	border-color: var(--brand-active) !important;
	box-shadow: none;
}

.btn-success {
	background-color: var(--success) !important;
	border-color: var(--success) !important;
	color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
	background-color: var(--success-hover) !important;
	border-color: var(--success-hover) !important;
}

.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
	background-color: var(--success-active) !important;
	border-color: var(--success-active) !important;
	box-shadow: none;
}

.btn-info {
	background-color: var(--info) !important;
	border-color: var(--info) !important;
	color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
	background-color: var(--info-hover) !important;
	border-color: var(--info-hover) !important;
}

.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
	background-color: var(--info-active) !important;
	border-color: var(--info-active) !important;
}

.btn-warning {
	background-color: var(--warning) !important;
	border-color: var(--warning) !important;
	color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
	background-color: var(--warning-hover) !important;
	border-color: var(--warning-hover) !important;
	color: #ffffff !important;
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
	background-color: var(--warning-active) !important;
	border-color: var(--warning-active) !important;
	color: #fff !important;
}

.btn-danger {
	background-color: var(--danger) !important;
	border-color: var(--danger) !important;
	color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
	background-color: var(--danger-hover) !important;
	border-color: var(--danger-hover) !important;
}

.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
	background-color: var(--danger-active) !important;
	border-color: var(--danger-active) !important;
	box-shadow: none;
}

.btn-default {
	background-color: #fff !important;
	border-color: #dcdfe6 !important;
	color: var(--text-2) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
	background-color: var(--brand-soft-2) !important;
	border-color: var(--brand-border) !important;
	color: var(--brand) !important;
}

.btn-link {
	color: var(--brand) !important;
}

/* 线框按钮：保留描边样式，避免被上面的实心按钮规则覆盖 */
.btn-primary.btn-outline {
	background-color: transparent !important;
	border-color: var(--brand) !important;
	color: var(--brand) !important;
}
.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus {
	background-color: var(--brand) !important;
	border-color: var(--brand) !important;
	color: #fff !important;
}

.btn-success.btn-outline {
	background-color: transparent !important;
	border-color: var(--success) !important;
	color: var(--success) !important;
}
.btn-success.btn-outline:hover,
.btn-success.btn-outline:focus {
	background-color: var(--success) !important;
	border-color: var(--success) !important;
	color: #fff !important;
}

.btn-info.btn-outline {
	background-color: transparent !important;
	border-color: var(--info) !important;
	color: var(--info) !important;
}
.btn-info.btn-outline:hover,
.btn-info.btn-outline:focus {
	background-color: var(--info) !important;
	border-color: var(--info) !important;
	color: #fff !important;
}

.btn-warning.btn-outline {
	background-color: transparent !important;
	border-color: var(--warning) !important;
	color: var(--warning) !important;
}
.btn-warning.btn-outline:hover,
.btn-warning.btn-outline:focus {
	background-color: var(--warning) !important;
	border-color: var(--warning) !important;
	color: #fff !important;
}

.btn-danger.btn-outline {
	background-color: transparent !important;
	border-color: var(--danger) !important;
	color: var(--danger) !important;
}
.btn-danger.btn-outline:hover,
.btn-danger.btn-outline:focus {
	background-color: var(--danger) !important;
	border-color: var(--danger) !important;
	color: #fff !important;
}

/* 按钮内部图标不要继承 hover 色导致反差过小 */
.btn-success:hover i, .btn-success:hover .fa,
.btn-primary:hover i, .btn-primary:hover .fa,
.btn-danger:hover i, .btn-danger:hover .fa,
.btn-warning:hover i, .btn-warning:hover .fa,
.btn-info:hover i, .btn-info:hover .fa {
	color: inherit;
}

/* ================= 顶部导航 / 侧边栏 ================= */
/* 顶栏统一为白色，深色只留给侧边栏和 logo 区（参考稿的深色导航条） */
.navbar,
.skin-blue .navbar,
.skin-green .navbar,
.skin-purple .navbar,
.skin-red .navbar,
.skin-yellow .navbar {
	background-color: #fff !important;
	border-bottom: 1px solid var(--border-light) !important;
	box-shadow: none !important;
}

.theme-dark .navbar-static-side,
.theme-dark .user-panel,
.skin-blue .logo,
.skin-green .logo,
.skin-purple .logo,
.skin-red .logo,
.skin-yellow .logo {
	background-color: var(--shell) !important;
}

.skin-blue .logo:hover,
.skin-green .logo:hover,
.skin-purple .logo:hover,
.skin-red .logo:hover,
.skin-yellow .logo:hover,
.skin-blue.layout-top-nav > .logo:hover {
	background-color: var(--shell-hover) !important;
}

.skin-blue.layout-top-nav > .logo {
	background-color: var(--shell) !important;
	color: #fff !important;
}

/* theme-blue 的侧边栏是深藏青，统一降饱和后与 logo、用户区保持一致 */
.theme-blue .navbar-static-side,
.theme-blue .logo,
.theme-blue .logo:hover,
.theme-blue .user-panel {
	background-color: var(--shell-blue) !important;
}

.theme-blue .navbar-static-side {
	box-shadow: 2px 0 2px 0 rgba(29, 35, 41, .04) !important;
}

/* 顶栏文字与悬停（白底上的灰字 / 蓝字） */
.navbar .nav > li > a,
.skin-blue .navbar .nav > li > a,
.skin-green .navbar .nav > li > a,
.skin-purple .navbar .nav > li > a,
.skin-red .navbar .nav > li > a,
.skin-yellow .navbar .nav > li > a,
.skin-blue .navbar .sidebar-toggle,
.skin-green .navbar .sidebar-toggle,
.skin-purple .navbar .sidebar-toggle,
.skin-red .navbar .sidebar-toggle,
.skin-yellow .navbar .sidebar-toggle {
	color: var(--text-2) !important;
}

.nav.navbar-right > li > a:hover,
.nav.navbar-left > li > a:hover,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.skin-blue .navbar .sidebar-toggle:hover,
.skin-green .navbar .sidebar-toggle:hover,
.skin-purple .navbar .sidebar-toggle:hover,
.skin-red .navbar .sidebar-toggle:hover,
.skin-yellow .navbar .sidebar-toggle:hover {
	background-color: var(--brand-soft-2) !important;
	color: var(--brand) !important;
}

/* 横向菜单布局的选中项 */
.navbar .navbar-toolbar > li.selected > a,
.navbar .navbar-toolbar > li.active > a {
	color: var(--brand) !important;
	background-color: var(--brand-soft) !important;
	border-radius: var(--radius);
}

@media (max-width: 767px) {
	/* 顶栏改白底后，移动端下拉菜单也要用深色文字 */
	.navbar .dropdown-menu li a,
	.skin-blue .navbar .dropdown-menu li a,
	.skin-green .navbar .dropdown-menu li a,
	.skin-purple .navbar .dropdown-menu li a,
	.skin-red .navbar .dropdown-menu li a,
	.skin-yellow .navbar .dropdown-menu li a {
		color: var(--text-1) !important;
	}

	.navbar .dropdown-menu li.divider,
	.skin-blue .navbar .dropdown-menu li.divider,
	.skin-green .navbar .dropdown-menu li.divider,
	.skin-purple .navbar .dropdown-menu li.divider,
	.skin-red .navbar .dropdown-menu li.divider,
	.skin-yellow .navbar .dropdown-menu li.divider {
		background-color: var(--border-light) !important;
	}

	.navbar .dropdown-menu li a:hover,
	.skin-blue .navbar .dropdown-menu li a:hover,
	.skin-green .navbar .dropdown-menu li a:hover,
	.skin-purple .navbar .dropdown-menu li a:hover,
	.skin-red .navbar .dropdown-menu li a:hover,
	.skin-yellow .navbar .dropdown-menu li a:hover {
		background: var(--brand-soft) !important;
		color: var(--brand) !important;
	}
}

/* 所有主题的选中项都不加彩色背景 */
.skin-blue .navbar-default .nav > li.selected > a,
.skin-blue .navbar-default .nav > li.selected > a:focus,
.skin-green .navbar-default .nav > li.selected > a,
.skin-green .navbar-default .nav > li.selected > a:focus,
.skin-purple .navbar-default .nav > li.selected > a,
.skin-purple .navbar-default .nav > li.selected > a:focus,
.skin-red .navbar-default .nav > li.selected > a,
.skin-red .navbar-default .nav > li.selected > a:focus,
.skin-yellow .navbar-default .nav > li.selected > a,
.skin-yellow .navbar-default .nav > li.selected > a:focus {
	background-color: transparent !important;
	color: #fff !important;
}

/* 左侧菜单选中态：中性底 + 皮肤色左边条 */
.skin-blue .nav:not(.navbar-toolbar) > li.active,
.skin-green .nav:not(.navbar-toolbar) > li.active,
.skin-purple .nav:not(.navbar-toolbar) > li.active,
.skin-red .nav:not(.navbar-toolbar) > li.active,
.skin-yellow .nav:not(.navbar-toolbar) > li.active {
	border-left-color: var(--skin) !important;
}

/* 深色 / 深蓝侧边栏：同一套灰蓝处理，只用外壳深浅区分 */
.theme-dark .navbar-default .nav > li > a,
.theme-blue .navbar-default .nav > li > a {
	color: #c0c4cc !important;
}

.theme-dark .navbar-default .nav > li > a:hover,
.theme-dark .navbar-default .nav > li > a:focus,
.theme-blue .navbar-default .nav > li > a:hover,
.theme-blue .navbar-default .nav > li > a:focus {
	background: rgba(255, 255, 255, .06) !important;
	color: #f5f7fa !important;
}

/* 深色侧栏：展开/选中不使用彩色背景，保持导航条本身的底色 */
.theme-dark .nav:not(.navbar-toolbar) > li.active,
.theme-blue .nav:not(.navbar-toolbar) > li.active {
	background: transparent !important;
	border-left-color: transparent !important;
}

.theme-dark .nav:not(.navbar-toolbar) > li.active > a,
.theme-blue .nav:not(.navbar-toolbar) > li.active > a {
	color: #fff !important;
}

/* 深色主题的选中项：只做文字变色 */
.theme-dark .navbar-default .nav > li.selected > a,
.theme-blue .navbar-default .nav > li.selected > a {
	color: #fff !important;
}

.theme-dark .nav-second-level > li > a,
.theme-blue .nav-second-level > li > a {
	color: #b8bec9 !important;
}

.theme-dark .nav-second-level > li > a:hover,
.theme-blue .nav-second-level > li > a:hover {
	color: #f5f7fa !important;
}

/* 深色侧栏里的用户信息区 */
.theme-dark .user-panel > .info > p,
.theme-dark .user-panel > .info,
.theme-dark .user-panel > .info > a,
.theme-blue .user-panel > .info > p,
.theme-blue .user-panel > .info,
.theme-blue .user-panel > .info > a {
	color: #c0c4cc !important;
}

/* 收起菜单时弹出的浮层，三种主题各自跟随自己的外壳色 */
.fixed-sidebar.theme-dark.mini-navbar .nav li:hover > a > span.nav-label,
.fixed-sidebar.theme-dark.mini-navbar .nav li:hover > .nav-second-level {
	background-color: var(--shell) !important;
}

.fixed-sidebar.theme-blue.mini-navbar .nav li:hover > a > span.nav-label,
.fixed-sidebar.theme-blue.mini-navbar .nav li:hover > .nav-second-level {
	background-color: var(--shell-blue) !important;
}

.fixed-sidebar.theme-light.mini-navbar .nav li:hover > a > span.nav-label,
.fixed-sidebar.theme-light.mini-navbar .nav li:hover > .nav-second-level {
	background-color: var(--sidebar-light) !important;
	color: var(--text-2) !important;
}

/* 侧边栏 200px 与内容区 220px 之间有一条 20px 的 #wrapper 背景缝，
   浅色侧栏下会露出深色竖条，这里按主题补成侧栏同色 */
#wrapper {
	background-color: var(--sidebar-light) !important;
}

.theme-dark #wrapper {
	background-color: var(--shell) !important;
}

.theme-blue #wrapper {
	background-color: var(--shell-blue) !important;
}

/* 浅色侧边栏（默认）：文字为柔和灰蓝 */
.theme-light .navbar-static-side {
	background-color: var(--sidebar-light) !important;
	box-shadow: 2px 0 2px 0 rgba(29, 35, 41, .04) !important;
}

.theme-light .user-panel,
.theme-light .logo,
.theme-light .logo:hover {
	background-color: var(--sidebar-light) !important;
}

.theme-light .logo,
.theme-light .logo:hover {
	color: var(--text-2) !important;
}

.theme-light .navbar-default .nav > li > a {
	color: var(--text-2) !important;
}

.theme-light .navbar-default .nav > li > a:hover,
.theme-light .navbar-default .nav > li > a:focus {
	background-color: var(--sidebar-light-hover) !important;
	color: var(--text-1) !important;
}

/* 浅色侧栏不使用彩色选中块，展开/选中保持原有文字与底色 */
.theme-light .nav:not(.navbar-toolbar) > li.active {
	background: transparent !important;
	border-left-color: transparent !important;
}

.theme-light .navbar-default .nav > li.active > a {
	color: var(--text-1) !important;
}

.theme-light .user-panel > .info > p,
.theme-light .user-panel > .info,
.theme-light .user-panel > .info > a {
	color: var(--text-2) !important;
}

.theme-light.skin-blue .navbar-default .nav > li.selected > a,
.theme-light.skin-blue .navbar-default .nav > li.selected > a:focus,
.theme-light.skin-green .navbar-default .nav > li.selected > a,
.theme-light.skin-green .navbar-default .nav > li.selected > a:focus,
.theme-light.skin-purple .navbar-default .nav > li.selected > a,
.theme-light.skin-purple .navbar-default .nav > li.selected > a:focus,
.theme-light.skin-red .navbar-default .nav > li.selected > a,
.theme-light.skin-red .navbar-default .nav > li.selected > a:focus,
.theme-light.skin-yellow .navbar-default .nav > li.selected > a,
.theme-light.skin-yellow .navbar-default .nav > li.selected > a:focus {
	background-color: transparent !important;
	color: var(--skin) !important;
}

.theme-light.skin-blue .navbar-default .nav > li.active > a,
.theme-light.skin-green .navbar-default .nav > li.active > a,
.theme-light.skin-purple .navbar-default .nav > li.active > a,
.theme-light.skin-red .navbar-default .nav > li.active > a,
.theme-light.skin-yellow .navbar-default .nav > li.active > a {
	color: var(--text-1) !important;
}

.theme-light.skin-blue .nav:not(.navbar-toolbar) > li.selected,
.theme-light.skin-green .nav:not(.navbar-toolbar) > li.selected,
.theme-light.skin-purple .nav:not(.navbar-toolbar) > li.selected,
.theme-light.skin-red .nav:not(.navbar-toolbar) > li.selected,
.theme-light.skin-yellow .nav:not(.navbar-toolbar) > li.selected {
	border-right: none !important;
	margin-right: 0;
}

/* 深蓝皮肤（theme-blue）选中项同样跟随皮肤色 */
.theme-blue.skin-blue .navbar-default .nav > li.selected > a,
.theme-blue.skin-blue .navbar-default .nav > li.selected > a:focus,
.theme-blue.skin-green .navbar-default .nav > li.selected > a,
.theme-blue.skin-green .navbar-default .nav > li.selected > a:focus,
.theme-blue.skin-purple .navbar-default .nav > li.selected > a,
.theme-blue.skin-purple .navbar-default .nav > li.selected > a:focus,
.theme-blue.skin-red .navbar-default .nav > li.selected > a,
.theme-blue.skin-red .navbar-default .nav > li.selected > a:focus,
.theme-blue.skin-yellow .navbar-default .nav > li.selected > a,
.theme-blue.skin-yellow .navbar-default .nav > li.selected > a:focus {
	background-color: transparent !important;
	color: #fff !important;
}

.theme-blue.skin-blue .navbar-default .nav > li.active > a,
.theme-blue.skin-green .navbar-default .nav > li.active > a,
.theme-blue.skin-purple .navbar-default .nav > li.active > a,
.theme-blue.skin-red .navbar-default .nav > li.active > a,
.theme-blue.skin-yellow .navbar-default .nav > li.active > a {
	color: #f5f7fa !important;
}

/* 用户信息区跟随皮肤色 */
.skin-blue li.user-header,
.skin-green li.user-header,
.skin-purple li.user-header,
.skin-red li.user-header,
.skin-yellow li.user-header {
	background-color: var(--skin-active) !important;
}

/* ================= 顶部页签（标签页） ================= */
.content-tabs {
	background: #fff;
	border-bottom: 1px solid var(--border-light);
}

.content-tabs button,
.content-tabs .roll-nav {
	background: #fff;
	color: var(--text-3);
}

.content-tabs button:hover,
.content-tabs .roll-nav:hover {
	background: #f5f7fa;
	color: var(--text-1);
}

.page-tabs a {
	color: var(--text-2) !important;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.page-tabs a:hover {
	color: var(--skin) !important;
	background: var(--skin-soft-2) !important;
	border-color: var(--skin-border);
}

.skin-blue .page-tabs a.active,
.skin-green .page-tabs a.active,
.skin-purple .page-tabs a.active,
.skin-red .page-tabs a.active,
.skin-yellow .page-tabs a.active,
.page-tabs a.active {
	color: var(--skin) !important;
	background: var(--skin-soft) !important;
	border: 1px solid var(--skin-border) !important;
}

.page-tabs a.active:hover,
.page-tabs a.active:focus {
	background: var(--skin-soft) !important;
	border-color: var(--skin-border) !important;
	color: var(--skin) !important;
}

.page-tabs a.active i,
.page-tabs a.active i:hover {
	color: var(--skin) !important;
	background: transparent !important;
}

/* ================= 卡片 / 面板 ================= */
.ibox {
	background: var(--bg-card);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	box-shadow: none;
	transition: box-shadow .2s ease;
}

.ibox:hover {
	box-shadow: var(--shadow-card-hover);
}

.ibox-title {
	background: var(--bg-card);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	border-bottom: 1px solid var(--border-light);
}

.ibox-title h5 {
	color: var(--text-1);
	font-weight: 500;
}

.ibox-content {
	border-width: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.ibox-content h1.no-margins {
	color: var(--text-1);
	font-weight: 600;
}

.ibox-title-gray {
	background-color: #f5f7fa;
	color: var(--text-2);
	border-bottom-color: var(--border-light);
}

.ibox-tools a {
	color: var(--text-3);
}

.ibox-tools a:hover {
	color: var(--brand);
}

.nav-tabs-custom > .nav-tabs > li.active {
	border-top-color: var(--brand);
}

.nav-tabs-custom > .nav-tabs > li > a {
	color: var(--text-2);
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
	color: var(--brand);
}

/* ================= 查询面板 ================= */
.search-collapse,
.select-table {
	background: var(--bg-card);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	box-shadow: none;
}

.search-collapse .col-sm-6 .control-label,
.select-list li,
.select-list li label,
.select-list li p {
	color: var(--text-2);
}

.select-list li input,
.select-list li select,
.select-list .btn-default,
.bootstrap-select.form-control .btn-default,
.file-input .btn-default {
	background: #fff !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius);
	color: var(--text-1) !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.select-list li input:hover,
.select-list li select:hover,
.select-list .btn-default:hover,
.bootstrap-select.form-control .btn-default:hover {
	border-color: var(--brand-border) !important;
}

.select-list li input:focus,
.select-list li select:focus,
.select-list .btn-default:focus,
.bootstrap-select.form-control .btn-default:focus {
	border-color: var(--brand) !important;
	box-shadow: var(--ring);
	outline: none;
}

.select-list li input::placeholder {
	color: var(--text-4) !important;
}

.search-btn {
	background-color: var(--brand);
	border-color: var(--brand);
	border-radius: var(--radius);
}

.search-btn:hover,
.search-btn:focus {
	background-color: var(--brand-hover);
	border-color: var(--brand-hover);
}

.select-title {
	color: var(--text-2);
}

/* ================= 表单 ================= */
.form-control,
.single-line {
	border-color: var(--border);
	border-radius: var(--radius);
	color: var(--text-1);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:hover,
.single-line:hover {
	border-color: var(--brand-border);
}

.form-control:focus,
.single-line:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus {
	border-color: var(--brand) !important;
	box-shadow: var(--ring) !important;
}

.form-control[disabled],
.form-control[readonly] {
	background-color: #f5f7fa;
	color: var(--text-3);
}

.has-success .form-control { border-color: var(--success) !important; }
.has-warning .form-control { border-color: var(--warning) !important; }
.has-error .form-control   { border-color: var(--danger) !important; }

.form-header {
	color: var(--text-2);
	border-bottom-color: var(--border);
}

.form-control-plaintext {
	color: var(--text-1);
	border-bottom-color: var(--border);
}

.form-control-plaintext-no-content {
	color: var(--text-4) !important;
	border-bottom-color: var(--border);
}

label.error,
.control-label.is-required:before {
	color: var(--danger) !important;
}

.Validform_error,
input.error,
textarea.error,
select.error {
	background-color: var(--danger-soft);
	border-color: var(--danger);
	color: var(--danger-active);
}

/* ================= 下拉菜单 / 选择器 ================= */
.dropdown-menu {
	color: var(--text-2);
}

.dropdown-menu > li > a {
	color: var(--text-1);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.select-list .dropdown-menu li > a:hover,
.select-list .dropdown-menu li > a:focus,
.bootstrap-select .dropdown-menu li > a:hover,
.bootstrap-select .dropdown-menu li > a:focus {
	background-color: var(--brand-soft) !important;
	color: var(--brand) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.skin-blue .dropdown-menu > .active > a,
.skin-blue .dropdown-menu > .active > a:hover,
.skin-blue .dropdown-menu > .active > a:focus,
.skin-green .dropdown-menu > .active > a,
.skin-green .dropdown-menu > .active > a:hover,
.skin-green .dropdown-menu > .active > a:focus,
.skin-purple .dropdown-menu > .active > a,
.skin-purple .dropdown-menu > .active > a:hover,
.skin-purple .dropdown-menu > .active > a:focus,
.skin-red .dropdown-menu > .active > a,
.skin-red .dropdown-menu > .active > a:hover,
.skin-red .dropdown-menu > .active > a:focus,
.skin-yellow .dropdown-menu > .active > a,
.skin-yellow .dropdown-menu > .active > a:hover,
.skin-yellow .dropdown-menu > .active > a:focus {
	background-color: var(--skin-active) !important;
	color: #fff !important;
}

.dropdown-menu > .divider {
	background-color: var(--border-light) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--brand);
	border-color: var(--brand);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff;
}

.select2-container--bootstrap .select2-selection--single:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection {
	border-color: var(--brand) !important;
}

/* 开关 */
.toggle-switch input:checked ~ span:after {
	background-color: var(--brand);
}

.switch-solid input:checked ~ span {
	background-color: var(--brand);
	border-color: var(--brand);
}

.switch-solid input:checked ~ span:after {
	color: var(--brand);
}

/* ================= 表格 ================= */
.table > thead > tr > th {
	color: var(--text-2);
	font-weight: 600;
	border-bottom: 1px solid var(--border) !important;
}

.table > tbody > tr > td {
	border-color: var(--border-light);
	color: var(--text-2);
}

.table-striped table thead,
.fixed-table-container thead th {
	background-color: var(--brand-soft);
}

.fixed-table-container thead th {
	color: var(--text-2);
	border-bottom: 1px solid var(--border) !important;
}

.table-striped table > thead > tr > th,
.table-striped .table > thead > tr > th {
	color: var(--text-2);
	font-weight: 600;
	border-bottom: 1px solid var(--border) !important;
}

.bootstrap-table .table-hover > tbody > tr.hover > td,
.bootstrap-table .table-hover > tbody > tr:hover > td {
	background-color: #f5f7fa !important;
}

.bootstrap-table .fixed-table-container .table tbody tr.selected td {
	background-color: var(--brand-soft) !important;
	color: var(--text-1) !important;
}

.bootstrap-table .fixed-table-container .table tbody tr.selected td a {
	color: var(--brand);
}

/* 斑马纹：所有表格数据行隔行变色 */
.table > tbody > tr:nth-child(even) > td {
	background-color: var(--brand-soft-2);
}

/* 斑马纹行悬停加深，避免和隔行底色糊在一起 */
.table > tbody > tr:nth-child(even):not(.selected):hover > td,
.table > tbody > tr:nth-child(even):not(.selected).hover > td,
.bootstrap-table .table-hover > tbody > tr:nth-child(even):not(.selected):hover > td {
	background-color: #eef3fa !important;
}

/* 表格自带 table-striped 时统一走上面的隔行色，避免奇偶两套规则叠色 */
.table.table-striped > tbody > tr:nth-of-type(odd) > td {
	background-color: transparent;
}

.fixed-table-pagination .pagination-detail,
.fixed-table-pagination .page-list .btn-default {
	color: var(--text-2);
}

/* 分页 */
.pagination > li > a,
.pagination > li > span {
	border: 1px solid var(--border);
	color: var(--text-2);
	background-color: #fff;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
	color: var(--brand);
	border-color: var(--brand-border);
	background-color: var(--brand-soft-2);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	background-color: var(--brand) !important;
	border-color: var(--brand) !important;
	color: #fff !important;
}

/* 表格行内操作：对齐参考稿的蓝色文字链接，避免每行都是色块 */
.btn-xs {
	border-radius: 4px;
	padding: 2px 4px;
}

.bootstrap-table .btn-xs,
.bootstrap-table .btn-xs:hover,
.bootstrap-table .btn-xs:focus {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.bootstrap-table .btn-primary.btn-xs,
.bootstrap-table .btn-info.btn-xs {
	color: var(--brand) !important;
}

.bootstrap-table .btn-success.btn-xs {
	color: var(--success) !important;
}

.bootstrap-table .btn-warning.btn-xs {
	color: var(--warning) !important;
}

.bootstrap-table .btn-danger.btn-xs {
	color: var(--danger) !important;
}

.bootstrap-table .btn-xs:hover,
.bootstrap-table .btn-xs:focus {
	text-decoration: underline;
	opacity: .85;
}

/* ================= 树 / 弹层 / 提示 ================= */
.ztree li a.curSelectedNode,
.ztree li a.curSelectedNode:hover {
	background-color: var(--brand-soft) !important;
	border-color: var(--brand-soft) !important;
	color: var(--brand) !important;
}

div.ztree-border {
	border-color: var(--border);
}

.popover-title {
	background-color: #f5f7fa;
	border-bottom-color: var(--border-light);
}

.tooltip-inner {
	background-color: var(--text-1);
}

.tooltip.top .tooltip-arrow { border-top-color: var(--text-1); }
.tooltip.right .tooltip-arrow { border-right-color: var(--text-1); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--text-1); }
.tooltip.left .tooltip-arrow { border-left-color: var(--text-1); }

/* 遮罩 loading */
.loaderbox {
	border-color: var(--border);
	background-color: #fff;
	color: var(--text-2) !important;
}

.loaderbox .loading-activity {
	border-top-color: var(--brand);
	border-left-color: var(--brand);
}

/* ================= 状态标签 / 徽标 ================= */
/* 参考稿使用浅底 + 彩色文字的状态标签 */
.label-primary {
	background-color: var(--brand-soft) !important;
	color: var(--brand) !important;
}
.label-success {
	background-color: #f0f9eb !important;
	color: #67c23a !important;
}
.label-warning,
.label-warning-light {
	background-color: #fdf6ec !important;
	color: var(--warning) !important;
}
.label-danger {
	background-color: #fef0f0 !important;
	color: var(--danger) !important;
}
.label-info {
	background-color: #f4f4f5 !important;
	color: var(--info) !important;
}

/* 徽标（未读数等）保持实心，保证辨识度 */
.badge-primary { background-color: var(--brand); }
.badge-success { background-color: var(--success); }
.badge-warning, .badge-warning-light {
	background-color: var(--warning);
	color: #fff;
}
.badge-danger { background-color: var(--danger); }
.badge-info { background-color: var(--info); }

/* ================= 提示条 ================= */
.alert-success {
	background-color: #f0f9eb;
	border-color: #e1f3d8;
	color: #67c23a;
}

.alert-warning {
	background-color: #fdf6ec;
	border-color: #faecd8;
	color: #e6a23c;
}

.alert-danger,
.alert-error {
	background-color: #fef0f0;
	border-color: #fde2e2;
	color: #f56c6c;
}

.alert-info {
	background-color: #f4f4f5;
	border-color: #e9e9eb;
	color: #909399;
}

.tag-ok {
	background: var(--success-soft);
	color: var(--success-active);
	border-color: #a8e6c3;
}

.tag-err {
	background: var(--danger-soft);
	color: var(--danger-active);
	border-color: #fbc4c4;
}

/* 详情页卡片 */
.detail-card {
	border-color: var(--border);
	border-radius: var(--radius-lg);
}

.detail-card-title {
	background: #f5f7fa;
	border-bottom-color: var(--border);
	color: var(--text-2);
}

.detail-card-title i {
	color: var(--text-3);
}

.detail-table th {
	color: var(--text-3);
}

.detail-table td {
	color: var(--text-1);
}

/* ================= 滚动条 ================= */
::-webkit-scrollbar-track {
	background-color: #f0f2f5;
}

::-webkit-scrollbar-thumb {
	background-color: #c0c4cc;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #a6a9ad;
}

/* ================= 首页数据看板 ================= */
/* 首页顶部 app 切换 */
#todayAppForm {
	color: var(--text-2);
}

#todayAppForm select {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	color: var(--text-1);
	height: 30px;
	padding: 0 8px;
	outline: none;
}

#todayAppForm select:focus {
	border-color: var(--brand);
	box-shadow: var(--ring);
}

/* ================= 登录 / 注册 / 锁屏 ================= */
body.signin {
	background: linear-gradient(135deg, #5a7590 0%, #41576d 55%, #33465a 100%) !important;
}

body.lockscreen {
	background: linear-gradient(135deg, #5a7590 0%, #41576d 55%, #33465a 100%) !important;
}

.signin-card .btn-success {
	background: linear-gradient(135deg, #4073fa 0%, #2f5fe0 60%, #2449c4 100%) !important;
	border: none !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(64, 115, 250, .16);
}

.signin-card .btn-success:hover,
.signin-card .btn-success:focus {
	background: linear-gradient(135deg, #5c88fb 0%, #4073fa 60%, #2f5fe0 100%) !important;
	box-shadow: 0 5px 18px rgba(64, 115, 250, .2);
	opacity: 1;
}

.signin-card .form-control:focus {
	border-color: var(--brand) !important;
	box-shadow: 0 0 0 3px var(--brand-shadow) !important;
}

/* 登录卡片文字不要过黑 */
.signinpanel {
	color: var(--text-2);
}

.signin-card h4 {
	color: var(--text-1);
}

.signin-card form {
	color: var(--text-2);
}

.signin-card .form-control,
.signinpanel .uname,
.signinpanel .pword {
	color: var(--text-1) !important;
}

.signin-card .form-control::placeholder {
	color: var(--text-4) !important;
}

.checkbox-custom input[type="checkbox"]:checked + label:after {
	color: var(--brand);
}

.checkbox-custom label:before {
	border-color: #dcdfe6;
}

.captcha-img-wrap .imgcode {
	border-color: var(--border);
}

/* ================= 旧样式里的纯黑文字收口 ================= */
/* Bootstrap / 旧插件局部写死了 #333 / #000 / #212529，
   统一压到灰蓝色阶，避免正文里出现一串串发黑的文字 */
.layer-disabled,
.dd-handle,
.note-editor .btn-default,
ul.notes li div {
	color: var(--text-2) !important;
}

.control-label {
	color: var(--text-1);
}


/* ================= 字重统一 ================= */
/* 微软雅黑等中文字体通常只有 400 / 700 两档，500 / 600 会被
   浏览器匹配成 700，在 11-14px 小字号下很容易发虚。
   策略：正文 / 表单 / 按钮 / 菜单 / 标签 400；
   表头和小标题 500；大标题、统计数字保留 600。 */
body,
.form-control,
.form-control-plaintext,
.btn,
.btn-xs,
.dropdown-menu > li > a,
.nav > li > a,
.navbar .nav > li > a,
.page-tabs a,
.pagination > li > a,
.pagination > li > span,
.input-group-addon,
.select-list li,
.select-list li label,
.control-label,
label,
legend,
.ibox-tools a,
.footer,
.table > tbody > tr > td,
.detail-table td,
.content-tabs {
	font-weight: 400 !important;
}

th,
.table > thead > tr > th,
.fixed-table-container thead th,
.table-striped table > thead > tr > th,
.table-striped .table > thead > tr > th,
.ibox-title h5,
.detail-card-title,
.ibox-title-gray,
.form-header,
.search-collapse .col-sm-6 .control-label,
.user-panel > .info > p {
	font-weight: 500 !important;
}

h1, h2, h3, h4,
.ibox-content h1.no-margins {
	font-weight: 600 !important;
}

h5, h6 {
	font-weight: 500 !important;
}

/* 小字号标签 / 徽标取消加粗 */
.label,
.badge,
.tag-ok,
.tag-err {
	font-weight: 400 !important;
}

label.error {
	font-weight: 400 !important;
}

/* ================= 菜单自定义图标 ================= */
/* 应用管理：四宫格图标。系统管理 -> 菜单管理里把「图标」填成 menu-icon-app 即可 */
.menu-icon-app {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: -2px;
	background: url("../img/app-manage.svg") center / contain no-repeat;
}

/* ================= 左侧菜单持久选中态 ================= */
/* 与框架的 selected 解耦：只有点击左侧菜单才切换，点击页面其他位置不受影响 */
#side-menu li.menu-active > a {
	color: var(--skin) !important;
}

.theme-dark #side-menu li.menu-active > a,
.theme-blue #side-menu li.menu-active > a {
	color: #fff !important;
}

/* 框架自身的 selected 不再参与高亮，避免切换页签时出现两个高亮项 */
#side-menu li.selected:not(.menu-active) > a {
	color: var(--text-2) !important;
}

.theme-dark #side-menu li.selected:not(.menu-active) > a,
.theme-blue #side-menu li.selected:not(.menu-active) > a {
	color: #c0c4cc !important;
}

/* ================= 菜单箭头 ================= */
/* 收起时用右箭头，展开时保持向下 */
.fa.arrow:before {
	content: "\f105";
}

/* ================= 无冲突的兜底 ================= */
/* 表格/卡片内的分割线统一为冷灰，避免和 #ebeef5 的绿灰调打架 */
.hr-line-dashed,
.hr-line-solid,
.border-bottom,
.b-r {
	border-color: var(--border-light) !important;
}