/* ==========================================================================
   sdoclub 主题覆盖层 —— 清爽亮色卡片风
   基于 #007bfc 品牌蓝，叠加在 default 主题(Bootstrap4/Skote + global.css)之上
   只覆盖样式，不改结构；如需回滚，后台切回 default 主题即可
   ========================================================================== */

:root {
	--sdo-primary: #007bfc;
	--sdo-primary-dark: #0062cc;
	--sdo-primary-soft: rgba(0, 123, 252, .08);
	--sdo-bg: #f4f6fa;
	--sdo-card-border: #eef1f6;
	--sdo-text: #1f2d3d;
	--sdo-text-sub: #64748b;
	--sdo-radius: 14px;
	--sdo-radius-sm: 8px;
	--sdo-shadow: 0 2px 12px rgba(31, 45, 61, .05);
	--sdo-shadow-hover: 0 8px 24px rgba(31, 45, 61, .10);
}

/* ---------- 1. 全局基调 ---------- */
body {
	background-color: var(--sdo-bg);
	color: var(--sdo-text);
}

.main-content {
	background-color: var(--sdo-bg);
}

a {
	color: var(--sdo-primary);
}

a:hover {
	color: var(--sdo-primary-dark);
}

/* ---------- 2. 顶栏（功能不变，只换皮） ---------- */
#page-topbar .navbar-header {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--sdo-card-border), 0 4px 16px rgba(31, 45, 61, .04);
}

#page-topbar .header-item {
	color: #495a6e;
	border-radius: var(--sdo-radius-sm);
	transition: background .2s;
}

#page-topbar .header-item:hover {
	background: var(--sdo-primary-soft);
	color: var(--sdo-primary);
}

/* ---------- 3. 侧栏（保留深色，精致化：圆角菜单项 + 渐变高亮） ---------- */
.vertical-menu {
	background: linear-gradient(180deg, #1e1e2d 0%, #191926 100%) !important;
}

.navbar-brand-box {
	background: #16161f !important;
}

.vertical-menu #sidebar-menu ul li > a {
	border-radius: 10px;
	margin: 2px 12px;
	width: auto;
	transition: background .2s, color .2s;
}

.vertical-menu #sidebar-menu ul li > a:hover {
	background: rgba(255, 255, 255, .06);
}

.vertical-menu #sidebar-menu ul li > a.active,
.vertical-menu #sidebar-menu .mm-active > a {
	background: linear-gradient(135deg, rgba(0, 123, 252, .28), rgba(0, 123, 252, .14));
	color: #fff !important;
}

.vertical-menu #sidebar-menu ul li > a.active i,
.vertical-menu #sidebar-menu .mm-active > a i {
	color: #7ab8ff !important;
}

/* 折叠态悬浮菜单圆角 */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > ul {
	border-radius: 12px;
	box-shadow: var(--sdo-shadow-hover);
}

/* ---------- 4. 卡片 ---------- */
.card {
	border: 1px solid var(--sdo-card-border);
	border-radius: var(--sdo-radius);
	box-shadow: var(--sdo-shadow);
	transition: box-shadow .25s ease;
}

.card-title {
	font-weight: 600;
	color: var(--sdo-text);
}

.card-header {
	background-color: #fff;
	border-bottom: 1px solid var(--sdo-card-border);
	border-radius: var(--sdo-radius) var(--sdo-radius) 0 0 !important;
	font-weight: 600;
}

/* ---------- 5. 按钮 ---------- */
.btn {
	border-radius: var(--sdo-radius-sm);
	transition: all .2s ease;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	background: linear-gradient(135deg, #007bfc 0%, #3d9bff 100%);
	border: none;
	box-shadow: 0 4px 12px rgba(0, 123, 252, .25);
}

.btn-primary:hover,
.btn-primary:focus {
	background: linear-gradient(135deg, #0069dd 0%, #2b8df5 100%);
	box-shadow: 0 6px 16px rgba(0, 123, 252, .35);
	transform: translateY(-1px);
}

.btn-success {
	background: #34c38f;
	border-color: #34c38f;
}

.btn-danger {
	background: #f46a6a;
	border-color: #f46a6a;
}

.btn-light {
	border-radius: var(--sdo-radius-sm);
	border-color: #e6e9f0;
}

.btn-sm {
	border-radius: 6px;
}

/* ---------- 6. 表单 ---------- */
.form-control {
	border-radius: var(--sdo-radius-sm);
	border-color: #e6e9f0;
	color: var(--sdo-text);
	transition: border-color .2s, box-shadow .2s;
}

.form-control:focus {
	border-color: rgba(0, 123, 252, .5);
	box-shadow: 0 0 0 3px rgba(0, 123, 252, .12);
}

.custom-select {
	border-radius: var(--sdo-radius-sm);
	border-color: #e6e9f0;
}

.input-group-prepend .btn,
.input-group-append .btn {
	border-radius: 0 var(--sdo-radius-sm) var(--sdo-radius-sm) 0;
}

label {
	color: var(--sdo-text-sub);
	font-weight: 500;
	font-size: 13px;
}

/* ---------- 7. 表格 ---------- */
.table thead th {
	background: #f8fafc;
	border-bottom: 1px solid var(--sdo-card-border);
	border-top: none;
	color: var(--sdo-text-sub);
	font-size: 13px;
	font-weight: 600;
}

.table td {
	border-color: #f1f4f8;
	vertical-align: middle;
}

.table-hover tbody tr:hover {
	background-color: #f8fafd;
}

.table-responsive {
	border-radius: var(--sdo-radius-sm);
}

/* ---------- 8. 状态徽章（胶囊化） ---------- */
.status,
.status-active,
.status-paid,
.status-unpaid,
.status-pending,
.status-suspended,
.status-cancelled,
.status-refunded,
.status-deleted,
.status-success,
.status-verifiy_active,
.status-overdue_active,
.status-issue_active {
	border-radius: 999px !important;
	padding: 4px 12px !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2px;
}

.badge {
	border-radius: 999px;
	font-weight: 500;
	padding: .32em .7em;
}

/* ---------- 9. 分页 ---------- */
.pagination .page-link {
	border: none;
	border-radius: var(--sdo-radius-sm);
	margin: 0 3px;
	color: var(--sdo-text-sub);
	background: #fff;
	box-shadow: 0 1px 3px rgba(31, 45, 61, .06);
}

.pagination .page-item.active .page-link {
	background: linear-gradient(135deg, #007bfc, #3d9bff);
	color: #fff;
	box-shadow: 0 4px 10px rgba(0, 123, 252, .3);
}

/* ---------- 10. 弹窗 / 下拉 ---------- */
.modal-content {
	border: none;
	border-radius: var(--sdo-radius);
	box-shadow: 0 16px 48px rgba(31, 45, 61, .18);
}

.modal-header {
	border-bottom: 1px solid var(--sdo-card-border);
	border-radius: var(--sdo-radius) var(--sdo-radius) 0 0;
}

.modal-footer {
	border-top: 1px solid var(--sdo-card-border);
}

.dropdown-menu {
	border: 1px solid var(--sdo-card-border);
	border-radius: 12px;
	box-shadow: var(--sdo-shadow-hover);
}

.dropdown-item {
	border-radius: 8px;
	margin: 2px 6px;
	width: auto;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--sdo-primary-soft);
	color: var(--sdo-primary);
}

/* ---------- 11. 页脚 ---------- */
.footer {
	background: transparent;
	border-top: 1px solid var(--sdo-card-border);
	color: var(--sdo-text-sub);
}

/* ---------- 12. 控制台首页 ---------- */
.user-center_product_grid .user-center_product {
	border: 1px solid var(--sdo-card-border);
	border-radius: 10px;
	transition: all .2s ease;
}

.user-center_product_grid .user-center_product:hover {
	border-color: rgba(0, 123, 252, .4);
	box-shadow: 0 6px 16px rgba(0, 123, 252, .12);
	transform: translateY(-2px);
}

.user-center_header {
	background: linear-gradient(135deg, #007bfc, #3d9bff) !important;
	box-shadow: 0 6px 14px rgba(0, 123, 252, .35);
}

/* 会员分组徽章（clientarea.tpl 新增） */
.sdo-group-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: linear-gradient(135deg, rgba(0, 123, 252, .12), rgba(61, 155, 255, .08));
	color: var(--sdo-primary);
	border: 1px solid rgba(0, 123, 252, .25);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	padding: 2px 10px;
	margin-left: 6px;
	vertical-align: middle;
	white-space: nowrap;
}

.sdo-group-badge i {
	font-size: 13px;
}

/* 工单/知识库条目卡片化 */
.ticket-item {
	border: 1px solid var(--sdo-card-border) !important;
	border-radius: 12px !important;
	transition: all .2s ease;
}

.ticket-item:hover {
	box-shadow: var(--sdo-shadow-hover) !important;
	transform: translateY(-1px);
}

/* ---------- 13. 登录 / 注册页 ---------- */
/* 左侧品牌区：图片上叠加品牌渐变 */
.auth-full-bg .bg-overlay {
	background-color: rgba(10, 40, 90, .35);
	background-image: linear-gradient(135deg, rgba(6, 42, 100, .55) 0%, rgba(0, 123, 252, .25) 100%);
	opacity: 1;
}

.auth-full-page-content {
	background: #fff;
}

.login_right {
	max-width: 420px;
}

/* 页签：胶囊分段式 */
.affs-nav.nav-tabs-custom {
	border-bottom: none;
	background: #f1f4f9;
	border-radius: 10px;
	padding: 4px;
	margin-top: 24px;
}

.affs-nav.nav-tabs-custom .nav-item .nav-link {
	border: none !important;
	border-radius: 8px;
	color: var(--sdo-text-sub);
	line-height: 36px;
	padding: 0 8px;
	transition: all .2s ease;
}

.affs-nav.nav-tabs-custom .nav-item .nav-link:hover {
	color: var(--sdo-primary);
}

.affs-nav.nav-tabs-custom .nav-item .nav-link.active {
	background: #fff;
	color: var(--sdo-primary);
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(31, 45, 61, .10);
}

/* 客服求助区 */
.sdo-support {
	border: 1px solid var(--sdo-card-border);
	border-radius: 12px;
	background: #fafbfd;
	padding: 14px 16px;
}

.sdo-support-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sdo-text);
	margin-bottom: 10px;
}

.sdo-support-title i {
	color: var(--sdo-primary);
	font-size: 16px;
}

.sdo-support-items {
	display: flex;
	gap: 10px;
}

.sdo-support-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--sdo-card-border);
	border-radius: 10px;
	padding: 10px 6px;
	cursor: pointer;
	text-align: center;
	color: var(--sdo-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all .2s ease;
	position: relative;
}

.sdo-support-item:hover {
	border-color: rgba(0, 123, 252, .45);
	box-shadow: 0 4px 12px rgba(0, 123, 252, .12);
	transform: translateY(-1px);
	color: var(--sdo-primary);
	text-decoration: none;
}

.sdo-support-item i {
	font-size: 22px;
	line-height: 1;
}

.sdo-support-item small {
	font-size: 11px;
	color: #98a3b3;
	font-weight: 400;
	line-height: 1.3;
}

/* 微信二维码悬浮弹层 */
.sdo-qr-pop {
	display: none;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid var(--sdo-card-border);
	border-radius: 12px;
	box-shadow: var(--sdo-shadow-hover);
	padding: 10px;
	z-index: 30;
	width: 160px;
}

.sdo-support-item:hover .sdo-qr-pop,
.sdo-qr-pop:active {
	display: block;
}

.sdo-qr-pop img {
	width: 140px;
	height: 140px;
	object-fit: contain;
	display: block;
}

.sdo-qr-empty {
	width: 140px;
	height: 140px;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #98a3b3;
	font-size: 12px;
	background: #f6f8fb;
	border-radius: 8px;
	padding: 10px;
}

.sdo-support-tip {
	margin-top: 10px;
	font-size: 12px;
	color: #98a3b3;
	text-align: center;
}

/* ---------- 14. 响应式修补 ---------- */
@media (max-width: 991.98px) {
	.user-center_h300 {
		height: auto !important;
		min-height: 260px;
	}

	.user-center_calc {
		height: auto !important;
		min-height: 320px;
	}

	.sdo-qr-pop {
		position: static;
		transform: none;
		box-shadow: none;
		border: none;
		padding: 6px 0 0;
		display: block;
		width: auto;
	}

	.sdo-qr-pop img,
	.sdo-qr-empty {
		margin: 0 auto;
	}
}

@media (max-width: 575.98px) {
	.card {
		border-radius: 12px;
	}

	.page-content {
		padding: 12px 14px;
	}

	.sdo-support-items {
		flex-wrap: wrap;
	}

	.sdo-support-item {
		min-width: calc(50% - 5px);
	}

	.table thead th {
		font-size: 12px;
		white-space: nowrap;
	}
}

/* ---------- 15. 表格列表页通用（产品/账单/发票/积分/合同/日志等共用 .tablelist 骨架） ---------- */

/* 头部工具区：筛选 + 搜索 */
.table-header {
	padding: 2px 0 16px;
}

.search-box .form-control {
	border-radius: 999px;
	background: #f8fafc;
	border-color: #e6e9f0;
	padding-left: 16px;
	padding-right: 42px;
	transition: all .2s ease;
}

.search-box .form-control:focus {
	background: #fff;
	border-color: rgba(0, 123, 252, .5);
	box-shadow: 0 0 0 3px rgba(0, 123, 252, .12);
}

.search-box .search-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #98a3b3;
	font-size: 18px;
	cursor: pointer;
	transition: color .2s;
}

.search-box .search-icon:hover {
	color: var(--sdo-primary);
}

/* 状态筛选下拉（bootstrap-select / btn-default） */
.table-filter .btn-default,
.table-filter .bootstrap-select > .btn {
	border-radius: 999px;
	background: #f8fafc;
	border-color: #e6e9f0;
	color: var(--sdo-text-sub);
	padding: .5rem 1.1rem;
	transition: all .2s ease;
}

.table-filter .btn-default:hover,
.table-filter .bootstrap-select > .btn:hover {
	background: #fff;
	border-color: rgba(0, 123, 252, .4);
	color: var(--sdo-primary);
}

.table-filter .btn-primary {
	border-radius: 999px;
}

/* 表格本体 */
.table.tablelist thead.bg-light th {
	background: #f8fafc !important;
	color: var(--sdo-text-sub);
	font-weight: 600;
	font-size: 13px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--sdo-card-border);
	white-space: nowrap;
}

.table.tablelist thead th.pointer {
	cursor: pointer;
	transition: color .15s;
}

.table.tablelist thead th.pointer:hover {
	color: var(--sdo-primary);
}

.table.tablelist tbody td {
	padding: 14px;
	border-color: #f1f4f8;
}

.table.tablelist tbody tr {
	transition: background .15s ease;
}

.table.tablelist tbody tr:hover {
	background: #f8fafd;
}

/* 产品名称链接 */
.table.tablelist td a.text-dark {
	transition: color .15s;
}

.table.tablelist td a.text-dark:hover {
	color: var(--sdo-primary) !important;
}

.table.tablelist td a.text-dark strong {
	font-weight: 600;
}

/* 单号 chip */
.table.tablelist .badge-light {
	background: #f1f4f9;
	color: var(--sdo-text-sub);
	border-radius: 6px;
	font-weight: 500;
	padding: .4em .6em;
}

/* 账单金额列 */
.sdo-amount {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 空数据提示 */
.no-data {
	color: #98a3b3;
}

/* 行内操作链接 → 胶囊小按钮 */
.table.tablelist td a.text-success,
.table.tablelist td a.text-danger,
.table.tablelist td a.text-primary:not(.btn) {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: all .15s ease;
	text-decoration: none !important;
	white-space: nowrap;
}

.table.tablelist td a.text-success {
	color: #1f9d6c !important;
	background: rgba(52, 195, 143, .10);
}

.table.tablelist td a.text-success:hover {
	background: rgba(52, 195, 143, .20);
}

.table.tablelist td a.text-primary:not(.btn) {
	color: var(--sdo-primary) !important;
	background: var(--sdo-primary-soft);
}

.table.tablelist td a.text-primary:not(.btn):hover {
	background: rgba(0, 123, 252, .16);
}

.table.tablelist td a.text-danger {
	color: #e05252 !important;
	background: rgba(244, 106, 106, .10);
}

.table.tablelist td a.text-danger:hover {
	background: rgba(244, 106, 106, .20);
}

/* 复选框 */
.table-container .custom-control-label::before {
	border-radius: 5px;
	border-color: #d4dae3;
}

.table-container .custom-control-input:checked ~ .custom-control-label::before {
	background: var(--sdo-primary);
	border-color: var(--sdo-primary);
}

/* 底部工具 + 分页 */
.table-footer {
	padding-top: 16px;
	margin-top: 4px;
	border-top: 1px solid var(--sdo-card-border);
}

.table-footer .table-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.table-footer .table-tools .btn {
	border-radius: 999px;
}

.table-pageinfo {
	color: var(--sdo-text-sub);
	font-size: 13px;
	display: flex;
	align-items: center;
}

.table-pageinfo select {
	border-radius: 6px;
	border: 1px solid #e6e9f0;
	background: #fff;
	padding: 2px 6px;
	color: var(--sdo-text);
	margin: 0 4px;
}

#pay-combine {
	color: var(--sdo-text-sub);
	font-size: 13px;
}

/* 电源状态圆点（产品列表） */
.dots {
	border: none !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(31, 45, 61, .08);
}

/* 移动端 */
@media (max-width: 767.98px) {
	.table-header {
		flex-wrap: wrap;
		gap: 10px;
		padding-bottom: 12px;
	}

	.table-header > * {
		flex: 1 1 100% !important;
	}

	.table-header .table-search .row,
	.table-header .table-filter .row {
		margin-left: 0;
		margin-right: 0;
	}

	.table-header .table-search .col-sm-6 {
		max-width: 100%;
		flex: 1 1 100%;
		padding: 0;
	}

	.table-footer {
		flex-direction: column;
		align-items: stretch !important;
		gap: 12px;
	}

	.table-footer .table-pagination {
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 8px;
	}

	.table.tablelist tbody td {
		padding: 10px 8px;
		font-size: 13px;
	}
}