@charset "UTF-8";
/*
 * 湘伟恒能源管理 · 内页统一修正层
 * 建立于 2026-11-01
 *
 * 为什么需要这一层
 * ---------------
 * wh-tokens.css 定义了深空玻璃令牌，wh-theme.css 把「框架层」（顶栏/侧边栏/弹窗）
 * 拉到了深色；但 46 个业务内页仍带着 AdminLTE 浅色残留（#ecf0f5 / #d2d6de / #f2f2f2）
 * 和 layui 原生蓝（#1E9FFF / #3499da），二者在同一屏上打架 —— 这是「看着累」的根源。
 *
 * 逐页改 46 个文件代价太大且容易改漏，所以先把「所有内页共通的病」收敛到这一个文件：
 *   1) 33 个文件写死 .box-white{min-width:897px}  → 移动端必然横滚
 *   2) 部分文件 .box 定义 3 次（前两条是死码）    → 样式来源不明
 *   3) layui 按钮/输入/表格/分页 是亮蓝白框        → 与深色冲突
 *   4) 状态徽标是方角硬色块                        → 改语义色药丸
 *   关于 !important：本层是覆盖层，权重必须压过页面内联 <style>，所以集中使用；
 *   等内联脏色逐页清理完毕后，这个文件可以整体删除。
 *
 * 加载位置：resource_lib.jsp 中 wh-theme.css 之后。
 */

/* ================= 1. 横向溢出根因 ================= */
.box-white {
	min-width: 0 !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* ================= 2. .box 重复定义归一 ================= */
.box {
	border-radius: var(--wh-r-card) !important;
	border: 1px solid var(--wh-glass-border) !important;
	background: var(--wh-glass-bg) !important;
	box-shadow: var(--wh-sh-1) !important;
}

/* ================= 3. layui 控件接管 =================
   注意：wh-theme.css 给 .layui-btn 设了品牌渐变 background-image，
   只改 background-color 是改不掉的（渐变优先级更高），必须显式清 background-image。 */
.layui-btn {
	background: var(--wh-glass-bg-2) !important;
	background-image: none !important;
	border: 1px solid var(--wh-glass-border) !important;
	color: var(--wh-t2) !important;
	border-radius: var(--wh-r-sm) !important;
}
.layui-btn:hover {
	border-color: var(--wh-accent) !important;
	color: var(--wh-accent) !important;
}
/* 表格内的行内操作按钮：深底青字，不再抢注意力 */
.layui-btn-xs.layui-btn-normal {
	background: rgba(34, 211, 238, .12) !important;
	background-image: none !important;
	border: 1px solid rgba(34, 211, 238, .32) !important;
	color: var(--wh-accent) !important;
}
.layui-btn-xs.layui-btn-normal:hover {
	background: rgba(34, 211, 238, .22) !important;
	color: var(--wh-accent) !important;
}
/* 主按钮保留品牌渐变（唯一允许的高饱和色块） */
.layui-btn-primary,
.layui-btn-normal:not(.layui-btn-xs) {
	background: var(--wh-grad-brand) !important;
	background-image: var(--wh-grad-brand) !important;
	border: 0 !important;
	color: var(--wh-on-accent) !important;
}

.layui-input,
.layui-textarea,
.layui-select {
	background: var(--wh-glass-bg-2) !important;
	border: 1px solid var(--wh-glass-border) !important;
	color: var(--wh-t1) !important;
	border-radius: var(--wh-r-sm) !important;
}
.layui-input:focus,
.layui-textarea:focus {
	border-color: var(--wh-accent) !important;
	box-shadow: 0 0 0 2px rgba(34, 211, 238, .15);
}
.layui-input::placeholder { color: var(--wh-t3); }

/* ================= 4. layui 表格 =================
   原来大量页面用 .layui-table thead tr{background:#fff} 在深色页里画白条 */
.layui-table,
.layui-table td,
.layui-table th {
	border-color: rgba(120, 190, 255, .10) !important;
	background: transparent !important;
}
.layui-table th {
	background: rgba(255, 255, 255, .04) !important;
	color: var(--wh-t3) !important;
	font-weight: var(--wh-fw-med);
	white-space: nowrap;
}
.layui-table td { color: var(--wh-t1) !important; }
.layui-table tbody tr:hover td { background: rgba(34, 211, 238, .06) !important; }
/* 分页 */
.layui-laypage a,
.layui-laypage span {
	background: var(--wh-glass-bg-2) !important;
	border-color: var(--wh-glass-border) !important;
	color: var(--wh-t2) !important;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em { background: var(--wh-accent) !important; }

/* ================= 5. 状态徽标 =================
   原：#3499da(layui蓝) / #f44336(硬红) / #4caf50 / #bfbfbf，方角，和深色打架 */
.blue-span, .red-span, .pro-span, .grey-span,
.wh-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: var(--wh-r-pill);
	font-size: var(--wh-fs-12);
	line-height: 1.65;
	white-space: nowrap;
	border: 1px solid transparent;
}
/* 令牌里的 *-soft 是 14% 透明度，纯填充在 #040917 上几乎看不见，
   所以加深底色并补一条同色描边，让药丸轮廓在深色背景上立得住。 */
.blue-span { background: rgba(52,211,153,.18) !important; color: var(--wh-ok) !important; border-color: rgba(52,211,153,.38) !important; }
.red-span  { background: rgba(251,113,133,.18) !important; color: var(--wh-danger) !important; border-color: rgba(251,113,133,.38) !important; }
.pro-span  { background: rgba(34,211,238,.16) !important; color: var(--wh-accent) !important; border-color: rgba(34,211,238,.36) !important; }
.grey-span { background: rgba(125,147,181,.18) !important; color: var(--wh-off) !important; border-color: rgba(125,147,181,.36) !important; }

/* ================= 6. layer 弹窗 / 日期控件 ================= */
.layui-layer {
	background: var(--wh-glass-bg-solid) !important;
	border: 1px solid var(--wh-glass-border) !important;
	border-radius: var(--wh-r-card) !important;
	box-shadow: var(--wh-sh-3) !important;
}
.layui-layer-title {
	background: transparent !important;
	border-bottom: 1px solid var(--wh-glass-border) !important;
	color: var(--wh-t1) !important;
}
.layui-layer-content { color: var(--wh-t1) !important; }
.layui-laydate,
.layui-laydate-header,
.layui-laydate-content { background: var(--wh-glass-bg-solid) !important; color: var(--wh-t1) !important; }

/* ================= 7. 窄屏适配 =================
   45 个页面用 div 模拟行、全站 overflow-x 命中数为 0。
   ⚠ 这里刻意**不用** html,body{overflow-x:hidden}：那只是把溢出裁掉，
   右侧列会直接看不见（实测 alarm_manager 的「处理」列就是这样消失的），
   信息丢失比出横滚更糟。正确做法是让表格容器自己滚。 */
@media (max-width: 820px) {
	.box-white { padding: 0 8px; }

	/* 列表容器自己横向滚动，表头随内容一起走，信息一条不丢 */
	.box,
	.box-white,
	.app-container,
	.layui-table-view {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 真表格给一个可读的最小宽度，宁可滚也不要挤成一列一字 */
	.layui-table {
		min-width: 560px;
	}
	.layui-table th, .layui-table td {
		padding: 8px 10px !important;
		white-space: nowrap;
	}
	.layui-btn-xs { padding: 0 6px !important; font-size: 11px !important; }

	/* 表单类行内元素在窄屏堆叠，避免被压成竖排单字 */
	.layui-form-item { margin-bottom: 10px; }
	.layui-input-block, .layui-input-inline { margin-left: 0 !important; width: 100% !important; }
}

/* ================= 7. zTree 与「通用按钮」解耦（2026-11-09） =================
   病因：wh-theme.css 第 52 行 `.button,.btn,button,.layui-btn{background:linear-gradient(...)!important}`
   本意是皮肤化业务按钮，但 zTree 的展开箭头和图标本身就是 `span.button`。
   于是组态监控左侧「组态列表」每行被渲染成两块 32×34 的青色渐变方块（实测
   background-image = linear-gradient(90deg,#22d3ee,#3b82f6) / 144px 高），
   节点文字被挤到第二行并截断 —— 用户既看不出能不能点，也不知道哪一行是选中的。
   这里把 zTree 的 span 拉回图标语义，并用与深色底匹配的 V 形箭头代替原浅色 sprites。 */
.ztree li span.button:not(.chk) {
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	filter: none !important;
	transform: none !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 4px 0 2px !important;
	position: relative;
	vertical-align: middle !important;
}

/* 展开箭头（showLine:false 时 zTree 用 noline_* 系列 class） */
.ztree li span.button.switch:not(.chk)::after {
	content: "" !important;
	position: absolute;
	left: 5px;
	top: 4px;
	width: 5px;
	height: 5px;
	border-right: 2px solid var(--wh-t3, #8aa2bf);
	border-bottom: 2px solid var(--wh-t3, #8aa2bf);
	transform: rotate(-45deg);
	transition: transform .15s ease;
}
.ztree li span.button.switch.roots_open:not(.chk)::after,
.ztree li span.button.switch.center_open:not(.chk)::after,
.ztree li span.button.switch.bottom_open:not(.chk)::after,
.ztree li span.button.switch.root_open:not(.chk)::after,
.ztree li span.button.switch.noline_open:not(.chk)::after {
	transform: rotate(45deg);
}
.ztree li span.button.switch.roots_docu:not(.chk)::after,
.ztree li span.button.switch.center_docu:not(.chk)::after,
.ztree li span.button.switch.bottom_docu:not(.chk)::after,
.ztree li span.button.switch.root_docu:not(.chk)::after,
.ztree li span.button.switch.noline_docu:not(.chk)::after {
	content: "" !important;
	width: 4px;
	height: 4px;
	left: 6px;
	top: 6px;
	border: 0;
	border-radius: 50%;
	background: var(--wh-t3, #8aa2bf);
	opacity: .55;
	transform: none;
}

/* 节点图标：showIcon:false 时它是空盒子，给一个统一的小圆点当"行首"标记 */
.ztree li span.button.ico_open:not(.chk),
.ztree li span.button.ico_close:not(.chk),
.ztree li span.button.ico_docu:not(.chk) {
	width: 6px !important;
	height: 6px !important;
	margin: 0 6px 0 2px !important;
	border-radius: 50% !important;
	background: rgba(120, 190, 255, .45) !important;
}

/* 节点本体：加大点击区、现在所选行终于看得见了 */
.ztree li a {
	height: auto !important;
	min-height: 30px !important;
	line-height: 1.45 !important;
	padding: 6px 10px 6px 4px !important;
	border-radius: 8px !important;
	color: var(--wh-t2, #9fc4ee) !important;
	white-space: normal !important;
	word-break: break-word !important;
	transition: background .15s ease, color .15s ease;
}
.ztree li a:hover {
	background: rgba(34, 211, 238, .10) !important;
	color: var(--wh-t1, #eaf4ff) !important;
}
.ztree li a.curSelectedNode {
	background: rgba(34, 211, 238, .18) !important;
	border: 1px solid rgba(34, 211, 238, .45) !important;
	color: var(--wh-t1, #eaf4ff) !important;
	font-weight: 600;
	opacity: 1 !important;
}
.ztree li a.curSelectedNode span {
	color: var(--wh-t1, #eaf4ff) !important;
}

/* ================= 8. 左侧长列表：让人看得出还能往下滚（2026-11-09） =================
   实时监控/列表监控的「项目列表」生产库有 78 项、容器高 799px、内容高 2922px，
   但滚动条在深色底上几乎不可见（Chromium 走 overlay 时 clientWidth==offsetWidth），
   用户以为列表就这么多 —— 目标项目"点不到"的第一观感就是这么来的。 */
.dashboard-menu.scoll {
	overflow-y: scroll !important;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(34, 211, 238, .55) rgba(255, 255, 255, .06) !important;
	scrollbar-gutter: stable !important;
}
.dashboard-menu.scoll::-webkit-scrollbar {
	width: 10px !important;
	display: block !important;
}
.dashboard-menu.scoll::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, .05) !important;
	border-radius: 10px;
}
.dashboard-menu.scoll::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(34, 211, 238, .55), rgba(59, 130, 246, .55)) !important;
	border-radius: 10px !important;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.dashboard-menu.scoll::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, rgba(34, 211, 238, .85), rgba(59, 130, 246, .85)) !important;
	background-clip: padding-box;
}

/* 侧栏标题条：统一成一行深色小标题，别再是一块浅色底 */
.prolist {
	padding: 10px 12px !important;
	border-bottom: 1px solid var(--wh-glass-border, rgba(120, 190, 255, .14)) !important;
	background: rgba(12, 22, 40, .55) !important;
}
.prolist span {
	font-size: 13px !important;
	letter-spacing: .5px;
	color: var(--wh-t2, #9fc4ee) !important;
}


/* ================= 9. kkpager 分页：白底块 → 深色药丸（2026-11-09） =================
   项目管理/用户管理等 20 个列表页的分页条来自 lib/kkpager/kkpager_blue.css，
   底色写死 #fff、单页高 25px（小于 32px 的可点尺寸），在深色表格下方像一排白纸片。
   实测：首页/上一页 48×25、页码 30×25、底色 rgb(255,255,255)。 */
#kkpager .pageBtnWrap > span, #kkpager .pageBtnWrap > a {
	display: inline-block !important;
	min-width: 30px !important;
	height: 30px !important;
	line-height: 30px !important;
	padding: 0 10px !important;
	margin: 0 3px !important;
	border-radius: 8px !important;
	text-align: center !important;
	box-sizing: border-box !important;
	background: rgba(20, 38, 66, .9) !important;
	color: #9fc4ee !important;
	border: 1px solid rgba(120, 190, 255, .20) !important;
	font-size: 13px !important;
	text-decoration: none !important;
}
#kkpager .pageBtnWrap > a:hover {
	background: rgba(34, 211, 238, .18) !important;
	color: var(--wh-t1, #eaf4ff) !important;
	border-color: rgba(34, 211, 238, .5) !important;
}
#kkpager .pageBtnWrap > span.curr {
	background: linear-gradient(90deg, #22d3ee, #3b82f6) !important;
	color: #04121f !important;
	border: 0 !important;
	font-weight: 700 !important;
}
#kkpager .pageBtnWrap > span.disabled {
	background: rgba(255, 255, 255, .04) !important;
	color: #6b83a3 !important;
	opacity: .6 !important;
}
#kkpager .spanDot, #kkpager .pageBtnWrap span.spanDot {
	background: transparent !important;
	border: 0 !important;
	min-width: 0 !important;
	padding: 0 2px !important;
}
#kkpager .infoTextAndGoPageBtnWrap {
	color: var(--wh-t3, #8aa2bf) !important;
	font-size: 13px !important;
}


/* ================= 10. 表格行内操作图标（2026-11-09） =================
   项目管理「操作」列是三个字体图标 span.self-icon：编辑 20×26、删除 16×26、生成组态 20×26。
   目标面积远低于 32px 可点基线，也没有 hover 反馈和文字说明，用户只能盲点。
   这里只放大点击区并补 hover 语义色，不动图标本身和 onclick。 */
table td .self-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	margin: 0 2px !important;
	border-radius: 8px !important;
	cursor: pointer;
	color: var(--wh-t2, #9fc4ee) !important;
	transition: background .15s ease, color .15s ease;
}
table td .self-icon:hover {
	background: rgba(34, 211, 238, .16) !important;
	color: var(--wh-t1, #eaf4ff) !important;
}
table td .self-icon.icon-bitbucket:hover {
	background: rgba(248, 113, 113, .18) !important;
	color: #ffb4b4 !important;
}