/* =========================================================
   客户区外壳样式层（sidebar.css）—— task-clientarea-02/04
   作用页：全部登录态页面（购物车页复用客户区头部，一并生效）
   内容：
   1. 浅色侧边栏（一级=分组标题不选中，二级默认全展开+图标）
   2. 主色收敛（框架文件中 #6064ff 全量覆盖为 token 蓝）
   3. 字体颜色/字重规范统一
   4. 顶栏 / 全局卡片 / 弹窗圆角阴影统一
   依赖：tokens.css（v1.1 蓝主色）；Skote app/bootstrap.min.css
   ========================================================= */

/* ---------- 页面底色 ---------- */
body {
	background: var(--bg-page);
}

/* ---------- 字体规范统一（标题/正文/辅助三级） ---------- */
body {
	color: var(--text-2);
	font-size: 14px;
}

h4.card-title,
.page-title-box h4 {
	color: var(--text-1);
	font-size: 16px;
	font-weight: 600;
}

.table thead th {
	color: var(--text-3);
	font-size: 13px;
	font-weight: 500;
}

.table td {
	color: var(--text-2);
	font-size: 13.5px;
}

label {
	color: var(--text-2);
	font-weight: 500;
}

/* ---------- 顶栏（60px 紧凑高度，联动 logo/内容区/菜单起点） ---------- */
#page-topbar {
	background: var(--bg-card);
	box-shadow: none;
	border-bottom: 1px solid var(--line-1);
}

.navbar-header {
	background: var(--bg-card);
	height: 60px;
	min-height: 60px;
	align-items: center;
}

.header-item {
	height: 40px;
	line-height: 40px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	color: var(--text-2);
	font-size: 16px;
	transition: background-color .15s ease, color .15s ease;
}

.header-item:hover {
	color: var(--brand-primary);
	background: var(--brand-primary-light);
}

/* 统一顶栏图标：覆盖购物车/铃铛图标上的内联 margin-top（登记于 CHANGELOG） */
.navbar-header .header-item i {
	margin-top: 0 !important;
	font-size: 19px;
}

/* 顶栏头像精修（覆盖内联尺寸） */
.navbar-header .user-center_header {
	width: 32px !important;
	height: 32px !important;
	font-size: 15px !important;
}

/* 右侧图标组间距 */
.navbar-header > .d-flex:last-child {
	gap: 4px;
	padding-right: 10px;
}

/* 品牌区（与侧边栏连为一体；logo 用 flex 垂直居中，
   避免行高 + 内联图片基线把左侧组撑到 75px 导致按钮上移裁切） */
.navbar-brand-box {
	background: var(--bg-card);
	border-right: 1px solid var(--line-1);
}

.navbar-header .d-flex {
	align-items: center;
}

.navbar-header .navbar-brand-box {
	display: flex;
	align-items: center;
}

.navbar-header .logo {
	line-height: 1;
}

.navbar-header .logo img {
	vertical-align: middle;
}

/* 60px 顶高联动：内容区下移量、侧边栏起点、吸顶表头 */
.vertical-menu {
	top: 60px;
}

.page-content {
	padding-top: calc(60px + 24px);
}

.main-content .content {
	margin-top: 60px;
}

.table-rep-plugin .fixed-solution .sticky-table-header {
	top: 60px !important;
}

/* 用户头像（顶栏） */
.user-center_header {
	background-color: var(--brand-primary);
}

/* ---------- 侧边栏：白底 ---------- */
.vertical-menu {
	background: var(--bg-card);
	border-right: 1px solid var(--line-1);
	box-shadow: none;
}

.vertical-menu .simplebar-content-wrapper::-webkit-scrollbar {
	width: 4px;
}

.vertical-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb {
	background: var(--line-1);
	border-radius: 4px;
}

#sidebar-menu {
	padding: 8px 10px 30px 10px;
}

/* 展开态：有子菜单的一级分组标题不渲染图标，仅作分割线（站长要求，2026-10-11）；
   一级直达项（无子菜单）正常渲染图标并可点击（2026-10-12 修订）；
   折叠成图标栏时全部保留图标作飞出入口 */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a.has-arrow > i {
	display: none;
}

/* 一级菜单：有子菜单 → 分组标题（不参与选中，带分割线） */
#sidebar-menu > ul > li > a.has-arrow {
	display: flex;
	align-items: center;
	margin: 16px 8px 6px;
	padding: 0 8px;
	line-height: 24px;
	border-radius: 0;
	background: transparent;
	color: var(--text-3);
	font-size: 13px;
	font-weight: 600;
	cursor: default;
	transition: none;
}

#sidebar-menu > ul > li > a.has-arrow i {
	width: auto;
	margin-right: 8px;
	font-size: 16px;
	color: var(--text-3);
}

/* 标题后的细分割线（::after 覆盖 metisMenu 折叠箭头） */
#sidebar-menu > ul > li > a.has-arrow::after {
	content: "";
	display: block;
	flex: 1;
	height: 1px;
	margin-left: 12px;
	background: var(--line-1);
	float: none;
	transition: none;
	transform: none;
}

#sidebar-menu > ul > li > a.has-arrow:hover,
#sidebar-menu > ul > li > a.has-arrow:hover i,
#sidebar-menu > ul > li.mm-active > a.has-arrow,
#sidebar-menu > ul > li.mm-active > a.has-arrow i {
	background: transparent;
	color: var(--text-3);
}

/* 覆盖框架 .mm-active > a / > a i 的 #6064ff !important（第三方 !important 无法
   提高优先级以外方式取胜，按 SOP §3.1-4 登记）：分组标题不参与选中，文字保持灰；
   折叠栏/悬浮中活动分组的图标用品牌蓝作位置提示 */
#sidebar-menu > ul > li.mm-active > a.has-arrow,
#sidebar-menu ul li ul.sub-menu li.mm-active > a.has-arrow {
	color: var(--text-3) !important;
}

#sidebar-menu > ul > li.mm-active > a.has-arrow i,
#sidebar-menu ul li ul.sub-menu li.mm-active > a.has-arrow i {
	color: var(--brand-primary) !important;
}

/* 一级菜单：无子菜单 → 普通胶囊项（可选中） */
#sidebar-menu > ul > li > a:not(.has-arrow) {
	margin: 2px 0;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	color: var(--text-2);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	transition: background-color .15s ease, color .15s ease;
}

#sidebar-menu > ul > li > a:not(.has-arrow) i {
	width: 26px;
	/* 框架 #sidebar-menu ul li a i{min-width:1.75rem;padding-bottom:.125em} 会撑宽/下坠图标盒 */
	min-width: 0;
	padding-bottom: 0;
	font-size: 19px;
	line-height: 24px;
	color: var(--text-3);
	transition: color .15s ease;
}

#sidebar-menu > ul > li > a:not(.has-arrow):hover {
	background: rgba(var(--brand-primary-rgb), .06);
	color: var(--brand-primary);
}

#sidebar-menu > ul > li > a:not(.has-arrow):hover i {
	color: var(--brand-primary);
}

#sidebar-menu > ul > li.mm-active > a:not(.has-arrow) {
	background: var(--brand-primary-light);
	color: var(--brand-primary);
}

#sidebar-menu > ul > li.mm-active > a:not(.has-arrow) i {
	color: var(--brand-primary);
}

/* 二级菜单：默认全部展开（折叠成悬浮栏时除外，保留 Skote 飞出交互） */
body:not(.vertical-collpsed) .vertical-menu .sub-menu {
	display: block !important;
	height: auto !important;
}

/* 覆盖框架对激活叶子项的紫色 !important */
#sidebar-menu .mm-active .active {
	color: var(--brand-primary) !important;
}

#sidebar-menu .mm-active .active i {
	color: var(--brand-primary) !important;
}

/* 二级菜单项 */
#sidebar-menu ul li ul.sub-menu li a {
	display: flex;
	align-items: center;
	padding: 8px 12px 8px 24px;
	color: var(--text-2);
	font-size: 13.5px;
	line-height: 22px;
	border-radius: var(--radius-md);
	transition: background-color .15s ease, color .15s ease;
}

/* 生产环境子菜单带 <i> 图标（shd_nav.fa_icon 经控制器输出）时：与下方 ::before 字形
   同规格（20px 盒、15px 字号），防止裸 <i> 继承字号错位 */
#sidebar-menu ul li ul.sub-menu li a > i {
	flex: none;
	width: 20px;
	/* 框架 #sidebar-menu ul li a i{min-width:1.75rem;padding-bottom:.125em} 覆盖：归还声明宽度 */
	min-width: 0;
	padding-bottom: 0;
	margin-right: 8px;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	color: inherit;
	transition: color .15s ease;
}

/* 前置图形默认为小圆点（未映射图标的链接回退用） */
#sidebar-menu ul li ul.sub-menu li a::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	margin-right: 12px;
	border-radius: 50%;
	background: currentColor;
	opacity: .35;
	transition: opacity .15s ease, color .15s ease;
}

/* 已映射图标的链接：完整字体渲染（置于圆点规则后，覆盖其盒尺寸）
   颜色用 inherit 与文字完全一致，悬停/激活随文字一起变品牌色 */
#sidebar-menu ul li ul.sub-menu li a[href="cart"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="details"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="security"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="verified"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="message"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="systemlog"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="apimanage"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="billing"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="addfunds"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="credit"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="contract"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="transaction"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="invoicelist"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="invoicecompany"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="invoiceaddress"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="supporttickets"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="submitticket"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="knowledgebase"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="news"]::before,
#sidebar-menu ul li ul.sub-menu li a[href="downloads"]::before,
#sidebar-menu ul li ul.sub-menu li a[href^="service?groupid="]::before {
	font-family: boxicons;
	font-style: normal;
	font-weight: 400;
	flex: none;
	width: 20px;
	height: auto;
	margin-right: 8px;
	border-radius: 0;
	background: none;
	opacity: 1;
	color: inherit;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	transition: color .15s ease;
}

/* 图标映射（与 shd_nav.fa_icon 的设计一一对应） */
#sidebar-menu ul li ul.sub-menu li a[href="cart"]::before { content: "\e9d4"; }
#sidebar-menu ul li ul.sub-menu li a[href="details"]::before { content: "\ea86"; }
#sidebar-menu ul li ul.sub-menu li a[href="security"]::before { content: "\eb3c"; }
#sidebar-menu ul li ul.sub-menu li a[href="verified"]::before { content: "\e9d6"; }
#sidebar-menu ul li ul.sub-menu li a[href="message"]::before { content: "\e994"; }
#sidebar-menu ul li ul.sub-menu li a[href="systemlog"]::before { content: "\ea7e"; }
#sidebar-menu ul li ul.sub-menu li a[href="apimanage"]::before { content: "\e9f8"; }
#sidebar-menu ul li ul.sub-menu li a[href="billing"]::before { content: "\eb0e"; }
#sidebar-menu ul li ul.sub-menu li a[href="addfunds"]::before { content: "\eb9f"; }
#sidebar-menu ul li ul.sub-menu li a[href="credit"]::before { content: "\eb7f"; }
#sidebar-menu ul li ul.sub-menu li a[href="contract"]::before { content: "\ea49"; }
#sidebar-menu ul li ul.sub-menu li a[href="transaction"]::before { content: "\eb7b"; }
#sidebar-menu ul li ul.sub-menu li a[href="invoicelist"]::before { content: "\eaaa"; }
#sidebar-menu ul li ul.sub-menu li a[href="invoicecompany"]::before { content: "\e9bb"; }
#sidebar-menu ul li ul.sub-menu li a[href="invoiceaddress"]::before { content: "\eaba"; }
#sidebar-menu ul li ul.sub-menu li a[href="supporttickets"]::before { content: "\eb65"; }
#sidebar-menu ul li ul.sub-menu li a[href="submitticket"]::before { content: "\ea36"; }
#sidebar-menu ul li ul.sub-menu li a[href="knowledgebase"]::before { content: "\ea7b"; }
#sidebar-menu ul li ul.sub-menu li a[href="news"]::before { content: "\eade"; }
#sidebar-menu ul li ul.sub-menu li a[href="downloads"]::before { content: "\ea31"; }
#sidebar-menu ul li ul.sub-menu li a[href^="service?groupid="]::before { content: "\eb32"; }

/* 图标去重（2026-10-12 生产反馈）：链接自身已带 <i> 图标时抑制 ::before 兜底图形，
   避免"图标 + 兜底"双显。has-fa 类由 menu.tpl 追加（与 <i> 同条件输出）；
   :has() 独立成条作旧模板未同步时的兜底——单条选择器失效不牵连另一条 */
#sidebar-menu ul li ul.sub-menu li a.has-fa::before {
	display: none;
}

#sidebar-menu ul li ul.sub-menu li a.waves-effect:has(> i)::before {
	display: none;
}

/* 圆点回退项悬停时加深 */
#sidebar-menu ul li ul.sub-menu li a:hover::before {
	opacity: .8;
}

#sidebar-menu ul li ul.sub-menu li a:hover {
	color: var(--brand-primary);
	background: rgba(var(--brand-primary-rgb), .05);
}

/* 框架 #sidebar-menu ul li a:hover i 会把图标染灰，与文字同步品牌蓝 */
#sidebar-menu ul li ul.sub-menu li a:hover i {
	color: var(--brand-primary);
}

#sidebar-menu ul li ul.sub-menu li a.active::before {
	opacity: 1;
}

/* 三级菜单再缩进 */
#sidebar-menu ul li ul.sub-menu ul.sub-menu li a {
	padding-left: 48px;
}

/* 二级菜单中的下级分组标题（如 发票管理）：同为展示型标题，去掉箭头 */
#sidebar-menu ul li ul.sub-menu li > a.has-arrow {
	color: var(--text-3);
	font-size: 12.5px;
	font-weight: 600;
	cursor: default;
}

#sidebar-menu ul li ul.sub-menu li > a.has-arrow::after {
	display: none;
}

#sidebar-menu ul li ul.sub-menu li > a.has-arrow:hover {
	background: transparent;
	color: var(--text-3);
}

/* 折叠悬浮展开层保持白底细边 */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
	box-shadow: var(--shadow-pop);
	border-radius: var(--radius-md);
}

/* 折叠态：图标栏几何覆写（与 Skote 折叠规则同选择器同优先级，靠后文件生效）
   图标在 70px 栏内水平居中，不再溢出裁切 */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
	justify-content: center;
	padding: 13px 0;
	text-align: center;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i {
	width: auto;
	margin: 0;
	font-size: 20px;
}

/* 折叠态分组标题：隐藏分割线，仅保留图标 */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a.has-arrow::after {
	display: none;
}

/* =========================================================
   主色收敛（覆盖框架文件中硬编码的 #6064ff）
   ========================================================= */
.text-primary {
	color: var(--brand-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
	color: var(--brand-primary-dark) !important;
}

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus {
	background-color: var(--brand-primary-dark);
	border-color: var(--brand-primary-dark);
}

.btn-primary:focus {
	box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .18);
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.btn-outline-primary {
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.badge-primary {
	background-color: var(--brand-primary);
}

.bg-primary {
	background-color: var(--brand-primary) !important;
}

.page-item.active .page-link {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.page-link {
	color: var(--brand-primary);
}

.page-link:focus {
	box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .18);
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--brand-primary);
}

.avatar-title {
	background: rgba(var(--brand-primary-rgb), .1);
	color: var(--brand-primary);
}

.custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio-primary .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

/* 输入框聚焦统一品牌色 */
.form-control:focus {
	border-color: rgba(var(--brand-primary-rgb), .55);
	box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .12);
}

/* ---------- 全局卡片统一（企业蓝白风） ---------- */
.card {
	border: 0;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.card .card-body,
.card-body {
	border-radius: var(--radius-lg);
}

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

.dropdown-menu {
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-pop);
}

/* ---------- 页头 ---------- */
.page-title-box {
	padding: 1.25rem 0 .5rem;
}

/* =========================================================
   批次 ca06：残留紫色 #6064ff → 品牌蓝（D1 收尾）
   覆盖对象：bootstrap.min.css / app.min.css 字面量紫。
   全部靠“同权选择器 + sidebar.css 后加载”或“更高特异性”取胜，
   未新增 !important（见 task-clientarea-06 登记）。
   ========================================================= */

/* 1) 基础链接色：bootstrap 裸 a 为紫（系统日志等裸链接可见） */
a {
	color: var(--brand-primary);
}

/* 2) 折叠态侧栏 flyout 悬停（app.min.css 同权选择器，后加载覆盖） */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
	color: var(--brand-primary);
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
	color: var(--brand-primary);
}

/* 2b) 框架裸 .mm-active/.mm-show（!important 紫）会命中整条容器链：
   div#sidebar-menu、li、simplebar 包装层、sub-menu —— 从载体上统一收敛。
   文字节点（a/i）由 ca05 规则单独处理，不受影响。 */
body .mm-active,
body .mm-show {
	color: var(--text-3) !important;
}

/* 3) 复选/单选“选中态”（bootstrap .custom-control-input:checked；提一层特异性） */
.custom-control .custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
	border-color: var(--brand-primary);
	background-color: var(--brand-primary);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
	border-color: var(--brand-primary);
	background-color: var(--brand-primary);
}

/* 4) 描边主按钮全状态（基础/悬停/聚焦/禁用/按下） */
.btn-outline-primary {
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
	color: #fff;
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}
.btn-outline-primary.focus,
.btn-outline-primary:focus {
	box-shadow: 0 0 0 0.15rem rgba(var(--brand-primary-rgb), 0.5);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
	color: var(--brand-primary);
	background-color: transparent;
	border-color: var(--brand-primary);
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--brand-primary-dark);
	border-color: var(--brand-primary-dark);
}

/* 5) 药丸导航 / 软徽章 / 列表激活态 */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--brand-primary);
}
.badge-soft-primary {
	color: var(--brand-primary);
	background-color: rgba(var(--brand-primary-rgb), 0.12);
}
.badge-soft-primary[href]:focus,
.badge-soft-primary[href]:hover {
	color: var(--brand-primary);
	background-color: rgba(var(--brand-primary-rgb), 0.22);
}
.list-group-item.active {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

/* 6) 组件点缀：头像圆标 / 下载分类激活 / 日期选中 / select2 高亮 */
.avatar-title {
	background-color: var(--brand-primary);
}
.categories-list li.active a {
	color: var(--brand-primary);
}
.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
	background-color: rgba(var(--brand-primary-rgb), 0.18);
	color: var(--brand-primary);
}
.datepicker-panel > ul > li.highlighted,
.datepicker-panel > ul > li.highlighted:hover,
.datepicker-panel > ul > li:hover {
	background-color: var(--brand-primary);
	color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--brand-primary);
}
.select2-container--default .select2-results__option[aria-selected="true"]:hover {
	background-color: var(--brand-primary);
	color: #fff;
}

/* 7) 聚焦环紫 → 蓝（键盘交互态；bootstrap 字面量/rgba 紫） */
.btn.focus,
.btn:focus {
	box-shadow: 0 0 0 0.15rem rgba(var(--brand-primary-rgb), 0.25);
}
.btn-primary.focus,
.btn-primary:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.5);
}
.custom-control .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25);
}