/* ============================================================
 * 食用菌全链追溯管理平台 - 深蓝黑科技风公共样式
 * 来源：docs/layuimini-v2/page/codePool.html 内嵌 <style> 提取
 * 引用：<link rel="stylesheet" href="{$C[admin_static]}css/dark-theme.css">
 * 配色规范见 AGENTS.md 第 2 节
 * ============================================================ */

:root {
  --bg-main: #061328;
  --bg-panel: #0B1F3A;
  --bg-panel-2: #0F2748;
  --bg-input: #0A1A33;
  --border: #1E3A5F;
  --border-strong: #143358;
  --primary: #2F86FF;
  --primary-glow: rgba(47,134,255,0.35);
  --c-orange: #FF8A14;
  --c-green: #12C56C;
  --c-red: #F65454;
  --c-yellow: #F6C23E;
  --c-purple: #8E7BFF;
  --text-main: #E0E6F0;
  --text-regular: #B9CFEA;
  --text-dim: #8899AA;
  --text-placeholder: #4A6A94;

  /* ===== 字号体系（语义化，替换 19 种硬编码）===== */
  --fs-xs: 11px;    /* 辅助/次要文字 */
  --fs-sm: 12px;    /* 次要/表格/标签 */
  --fs-md: 13px;    /* 正文基础（body 默认） */
  --fs-lg: 14px;    /* 强调正文 */
  --fs-card: 15px;  /* 卡片标题 */
  --fs-xl: 18px;    /* 图标字号/区块标题 */
  --fs-2xl: 20px;   /* 看板标题 */
  --fs-stat: 26px;  /* 统计卡片数字 */
  --fs-hero: 32px;  /* 驾驶舱大数字 */

  /* ===== 圆角统一（全局唯一值，替换 3/6/8/9px）===== */
  --radius: 4px;
  --radius-sm: 3px;  /* 仅小徽章/标签 */
  --radius-lg: 6px;  /* 仅大图标容器 */
}

html, body {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--fs-md);
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at top, rgba(47,134,255,0.08), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(142,123,255,0.06), transparent 60%);
}
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

.page-wrap { padding: 15px; position: relative; z-index: 1; }

/* ===== 切角面板通用 ===== */
.dh-panel {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  position: relative; margin-bottom: 15px;
}
#statRow { margin-bottom: 15px; }
.dh-panel::before {
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 8px; height: 8px;
  border-left: 2px solid var(--primary); border-top: 2px solid var(--primary);
}
.dh-panel::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
}
.dh-panel-head {
  padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
}
.dh-panel-head .title {
  font-size: 14px; font-weight: 600; color: var(--text-main);
  display: flex; align-items: center; gap: 8px;
}
.dh-panel-head .title::before {
  content: ''; width: 3px; height: 14px;
  background: linear-gradient(180deg, var(--primary), var(--c-purple)); border-radius: 2px;
}

/* ===== 统计卡片 ===== */
.stat-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px solid var(--border);
  padding: 16px 16px 14px 20px; cursor: pointer;
  transition: all 0.25s;
}
.stat-card::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px;
  border-left: 2px solid var(--c, #2F86FF); border-top: 2px solid var(--c, #2F86FF);
}
.stat-card::after {
  content: ''; position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px;
  border-right: 2px solid var(--c, #2F86FF); border-bottom: 2px solid var(--c, #2F86FF);
}
.stat-card:hover {
  border-color: var(--c, #2F86FF);
  box-shadow: 0 0 16px rgba(47,134,255,0.15);
  transform: translateY(-2px);
}
.stat-card .stat-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.stat-card .stat-num {
  font-size: 28px; font-weight: 700; color: var(--c, #2F86FF);
  font-family: "DIN Alternate", "Roboto", monospace; line-height: 1.2;
  text-shadow: 0 0 12px rgba(47,134,255,0.3);
}
.stat-card .stat-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.stat-card .stat-sub .up { color: var(--c-green); }
.stat-card .stat-sub .down { color: var(--c-red); }

/* ===== 趋势图区域 ===== */
.chart-body { padding: 16px; overflow-x: auto; }
.chart-container {
  display: flex; align-items: flex-end; gap: 3px; height: 220px; min-width: 100%;
}
.chart-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 190px; }
.chart-bar {
  width: 7px; border-radius: 2px 2px 0 0; cursor: pointer;
  transition: opacity 0.2s; position: relative;
}
.chart-bar:hover { opacity: 0.75; }
.chart-bar:hover::after {
  content: attr(data-tip); position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--bg-panel-2); color: var(--text-main);
  font-size: 11px; padding: 4px 8px; border-radius: 3px; margin-bottom: 4px; z-index: 9;
  border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.chart-date { font-size: 9px; color: var(--text-dim); margin-top: 4px; transform: rotate(-45deg); transform-origin: center; white-space: nowrap; }
.chart-legend { display: flex; gap: 16px; padding: 0 16px 12px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-regular); }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-btns { display: flex; gap: 6px; }
.chart-btns button {
  padding: 4px 12px; font-size: 12px; border: 1px solid var(--border);
  background: var(--bg-panel-2); color: var(--text-regular); border-radius: 3px; cursor: pointer; transition: all 0.2s;
}
.chart-btns button:hover { color: var(--primary); border-color: var(--primary); }
.chart-btns button.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

/* ===== 筛选区域 ===== */
.filter-card { padding: 16px; }
/* overflow: visible !important 用于覆盖各页面 inline 的 overflow-x:auto
   原因：overflow-x:auto 会触发 CSS 怪癖把 overflow-y 从 visible 强制为 auto，
   导致 Layui select 的 <dl> 下拉（位于 input 下方，超出 form-item 边界）被裁剪，
   点击 input 后看不到任何选项。允许横向溢出可保留下拉功能。 */
.filter-card .layui-form-item { margin-bottom: 0; white-space: nowrap; overflow: visible !important; }
.filter-card .layui-form-item::-webkit-scrollbar { height: 4px; }
.filter-card .layui-form-item > .layui-inline { margin-right: 6px; vertical-align: middle; float: none; display: inline-block; }
.filter-card .layui-form-item > .layui-inline:last-child { margin-right: 0; }
.filter-card .layui-form-label { width: 60px; padding: 9px 4px 9px 0; text-align: right; }
.filter-card .layui-input-inline { margin-right: 0; }
/* 原生 multiple select 美化 */
select[multiple] {
  width: 100%; height: 38px;
  border: 1px solid var(--border); border-radius: 3px;
  padding: 4px; font-size: 13px; color: var(--text-main);
  background: var(--bg-input);
}
select[multiple]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); outline: none; }
select[multiple] option { background: var(--bg-panel-2); color: var(--text-main); }

/* ===== 表格卡片 ===== */
.table-card-head .title { font-size: 14px; font-weight: 600; color: var(--text-main); }

/* 状态分布进度条 */
.status-bar { display: flex; height: 20px; border-radius: 3px; overflow: hidden; font-size: 10px; line-height: 20px; color: #fff; text-align: center; }
.status-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 时间轴弹窗样式 */
.code-timeline { padding: 16px 20px; }
.code-timeline .tl-item { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
.code-timeline .tl-item:last-child { padding-bottom: 0; }
.code-timeline .tl-item::before {
  content: ''; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--border);
}
.code-timeline .tl-item:last-child::before { display: none; }
.code-timeline .tl-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; z-index: 1;
  background: var(--c, var(--primary)); border: 3px solid var(--bg-panel);
  box-shadow: 0 0 0 2px var(--c, var(--primary)), 0 0 10px var(--c, var(--primary));
}
.code-timeline .tl-body { flex: 1; }
.code-timeline .tl-title { font-size: 14px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
.code-timeline .tl-time { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.code-timeline .tl-desc { font-size: 13px; color: var(--text-regular); line-height: 1.6; }

/* 弹窗表单 */
.layer-form { padding: 20px; }
.alert-warn {
  background: rgba(246,84,84,0.08); border: 1px solid rgba(246,84,84,0.4);
  color: var(--c-red); padding: 10px 14px; border-radius: 3px; margin-bottom: 16px;
  font-size: 12px; display: flex; align-items: center; gap: 8px;
}
.alert-notice {
  background: rgba(246,194,62,0.08); border: 1px solid rgba(246,194,62,0.4);
  color: var(--c-yellow); padding: 10px 14px; border-radius: 3px; margin-bottom: 16px;
  font-size: 12px; display: flex; align-items: center; gap: 8px;
}
.alert-warn .layui-icon, .alert-notice .layui-icon { font-size: 16px; }

/* ========== Layui 表格深色覆盖 ========== */
.layui-table {
  background: transparent !important; color: var(--text-regular) !important;
  border-color: var(--border) !important;
}
/* 表格容器深色背景 */
.layui-table-header { background: #0F2645 !important; }
.layui-table-body, .layui-table-box, .layui-table-total, .layui-table-fixed { background: var(--bg-panel) !important; }
.layui-table thead tr { background: #0F2645 !important; }
/* 覆盖 layui table loading 遮罩的内联白色背景（layui.js 中 style="background-color:#fff;"） */
.layui-table-init { background-color: var(--bg-panel) !important; }
.layui-table-init .layui-icon { color: var(--primary) !important; }
.layui-table thead th {
  background: transparent !important; color: var(--primary) !important;
  font-weight: 600; border-color: var(--border) !important;
}
.layui-table tbody tr { background: transparent !important; border-color: var(--border) !important; }
.layui-table tbody tr:nth-child(even) { background: rgba(15,39,72,0.4) !important; }
.layui-table tbody tr:hover { background: rgba(47,134,255,0.08) !important; }
.layui-table td, .layui-table-view .layui-table td, .layui-table-body .layui-table td, .layui-table-box .layui-table td { border-color: var(--border) !important; border-bottom: 1px dashed var(--border) !important; }
.layui-table-view { border-color: var(--border) !important; background: var(--bg-panel) !important; }
.layui-table-tool { background: var(--bg-panel-2) !important; border-color: var(--border) !important; }
.layui-table-tool .layui-inline { color: var(--text-dim) !important; }
.layui-table-tool .layui-inline:hover { color: var(--primary) !important; }
.layui-table-page { border-color: var(--border) !important; background: var(--bg-panel) !important; }
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span {
  background: transparent !important; color: var(--text-dim) !important; border-color: var(--border) !important;
}
.layui-table-page .layui-laypage a:hover { color: var(--primary) !important; }
.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
  background: var(--primary) !important;
}
.layui-table-page .layui-laypage button:not(.layui-laypage-btn) { color: var(--text-dim) !important; }
.layui-table-page .layui-laypage input { background: var(--bg-panel-2) !important; color: var(--text-main) !important; border-color: var(--border) !important; height: 28px !important; line-height: 28px !important; }
/* 分页器"确定"按钮 */
.layui-table-page .layui-laypage-btn {
  background: var(--primary) !important; color: #fff !important;
  border: 1px solid var(--primary) !important; border-radius: 3px;
  box-shadow: 0 0 8px var(--primary-glow);
  height: 28px !important; line-height: 28px !important; padding: 0 10px; margin-left: 5px;
  box-sizing: border-box;
}
.layui-table-page .layui-laypage-btn:hover { opacity: 0.88; }
/* 分页器 select 下拉框（每页条数） */
.layui-table-page .layui-laypage select {
  background: var(--bg-input) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
  /* border-radius: 3px; */
  height: 21px !important;
  line-height: 28px !important;
}
.layui-table-page .layui-laypage select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important; outline: none;
}
.layui-table-page .layui-laypage select option { background: var(--bg-panel-2) !important; color: var(--text-main) !important; }
/* 分页器跳页输入框与select垂直对齐 */
.layui-table-page .layui-laypage-skip input { vertical-align: middle; }
/*.layui-table-cell { padding: 0 8px !important; }*/
.layui-table-sort .layui-table-sort-asc { border-bottom-color: var(--text-dim) !important; }
.layui-table-sort .layui-table-sort-desc { border-top-color: var(--text-dim) !important; }
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc { border-bottom-color: var(--primary) !important; }
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc { border-top-color: var(--primary) !important; }
/* 固定列（checkbox 左固定 / 操作列右固定）：保留 layui 固定列能力，仅做深色化
   （背景走上方 .layui-table-fixed 规则；禁用 display:none —— 隐藏会导致宽表格的操作列不可达） */
.layui-table-fixed-l { box-shadow: 1px 0 10px rgba(0,0,0,0.4) !important; }
.layui-table-fixed-r { box-shadow: -1px 0 10px rgba(0,0,0,0.4) !important; border-left: 1px solid var(--border); }
.layui-table[lay-size] .layui-table-cell { height: 44px; line-height: 44px; }
/* 单元格内边距收紧 + 操作列按钮间距压缩（避免多按钮操作列溢出被省略号遮挡） */
.layui-table-cell { padding: 6 10px !important; }
.layui-table-cell .layui-btn-xs + .layui-btn-xs { margin-left: 5px; }

/* 框架调试浮层（DEBUG 模式下右下角运行耗时按钮）深色化 */
#kong_trace_open {
  background: var(--bg-panel-2) !important; border-color: var(--border) !important;
  color: var(--text-dim) !important; box-shadow: 0 0 12px rgba(0,0,0,0.5) !important;
}

/* ========== Layui 表单深色覆盖 ========== */
.layui-input, .layui-textarea, .layui-select {
  background: var(--bg-input) !important; color: var(--text-main) !important;
  border-color: var(--border) !important; border-radius: 3px;
}
.layui-input:focus, .layui-textarea:focus, .layui-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}
.layui-input::placeholder, .layui-textarea::placeholder { color: var(--text-placeholder) !important; }
.layui-form-label { color: var(--text-regular) !important; font-size: 13px; }
.layui-form-select dl {
  background: var(--bg-panel-2) !important; border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  /* 覆盖 layui 默认 max-height:300px，避免选项较多（如文件类型9项）时末项被截断显示不全；
     下拉过长时 layui 会自动向上展开以适配视口 */
  max-height: 480px !important;
}
.layui-form-select dl dd { color: var(--text-regular) !important; }
.layui-form-select dl dd.layui-this { background: var(--primary) !important; color: #fff !important; }
.layui-form-select dl dd:hover { background: rgba(47,134,255,0.15) !important; }
/* 禁用选项（如已绑其他基地的设备）：置灰且不响应悬停高亮 */
.layui-form-select dl dd.layui-disabled,
.layui-form-select dl dd.layui-disabled:hover {
  background: transparent !important; color: #56657A !important; cursor: not-allowed !important;
}

/* ========== Layui 按钮覆盖 ========== */
.layui-btn { border-radius: 3px; font-size: 13px; background: var(--primary) !important; box-shadow: 0 0 12px var(--primary-glow); }
.layui-btn:hover { opacity: 0.88; }
.layui-btn-primary {
  background: var(--bg-panel-2) !important; border-color: var(--border) !important; color: var(--text-regular) !important;
}
.layui-btn-primary:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.layui-btn-normal { background: var(--primary) !important; box-shadow: 0 0 12px var(--primary-glow); }
.layui-btn-normal:hover { opacity: 0.88; }
.layui-btn-warm { background: var(--c-orange) !important; box-shadow: 0 0 8px rgba(255,138,20,0.3); }
.layui-btn-danger { background: var(--c-red) !important; box-shadow: 0 0 8px rgba(246,84,84,0.3); }
.layui-btn-xs { font-size: 12px; padding: 0 8px; height: 24px; line-height: 24px; }

/* ========== Badge 颜色 ========== */
.layui-bg-blue { background-color: var(--primary) !important; }
.layui-bg-orange { background-color: var(--c-orange) !important; }
.layui-bg-green { background-color: var(--c-green) !important; }
.layui-bg-red { background-color: var(--c-red) !important; }
.layui-bg-yellow { background-color: var(--c-yellow) !important; }
.layui-bg-purple { background-color: var(--c-purple) !important; }
.layui-bg-cyan { background-color: var(--c-purple) !important; }
/* 2026-08-11 修复：layui-bg-gray 漏深色化 → layui 默认浅灰底(#f2f2f2) + 下方强制白字 = 白底白字不可见（20+ 页面角色/状态徽章受影响） */
.layui-bg-gray { background-color: #46577A !important; }
/* 默认 badge（无 bg 类）深色化 */
.layui-badge {background-color: var(--bg-input);color: var(--text-regular) !important;border: 1px solid var(--border);border-radius: 2px;padding: 0px 8px;font-size: 12px;font-weight: 400;}
.layui-badge .layui-icon { font-size: 12px; margin-right: 2px; }
/* 带 bg 类的 badge 用纯色底 + 白字（layui-badge 默认即白字，这里强制保证） */
.layui-badge[class*="layui-bg-"] { color: #fff !important; border: none; }

/* ========== Layer 弹窗深色 ========== */
.layui-layer { background: var(--bg-panel) !important; box-shadow: 0 0 40px rgba(0,0,0,0.6), 0 0 80px rgba(47,134,255,0.1) !important; border: 1px solid var(--border) !important; }
.layui-layer-title {
  background: var(--bg-panel-2) !important; color: var(--text-main) !important;
  border-bottom: 1px solid var(--border) !important;
}
.layui-layer-btn a { border-radius: 3px; }
.layui-layer-btn .layui-layer-btn0 { background: var(--primary) !important; border-color: var(--primary) !important; box-shadow: 0 0 10px var(--primary-glow); }
.layui-layer-btn .layui-layer-btn1 { background: var(--bg-panel-2) !important; border-color: var(--border) !important; color: var(--text-regular) !important; }
.layui-layer-content { color: var(--text-regular) !important; }
.layui-layer-ico { background-color: var(--text-dim) !important; }
.layui-layer-close { font-size: 16px !important; color: var(--text-dim) !important; }
.layui-layer-close:hover { background: var(--border) !important; color: var(--text-main) !important; }
.layui-layer-btn { position: relative !important; z-index: 2 !important; }
.layui-layer-btn a { pointer-events: auto !important; }
.layui-layer-content { pointer-events: auto !important; }
.layui-layer-setwin .layui-layer-close2 { background-color: transparent !important; }

/* ========== Layer 默认提示框深色化（form.verify 验证提示等） ========== */
.layui-layer-msg { background: var(--bg-panel-2) !important; color: var(--text-main) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important; }
.layui-layer-dialog .layui-layer-content { color: var(--text-main) !important; }
.layui-layer-dialog .layui-layer-content .layui-icon { color: var(--primary) !important; }
.layui-layer-hui { background: var(--bg-panel-2) !important; color: var(--text-main) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important; }
.layui-layer-loading { background: var(--bg-panel-2) !important; border-color: var(--border) !important; }

/* ========== 进度条 ========== */
.layui-progress { background: var(--bg-input) !important; border-radius: var(--radius); }
.layui-progress-bar { background: var(--primary) !important; box-shadow: 0 0 6px var(--primary-glow); }

/* ========== 日期选择器深色 ========== */
/* 面板容器 */
.laydate-key-panel,
.layui-laydate { background: var(--bg-panel-2) !important; border-color: var(--border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important; }
.layui-laydate, .layui-laydate * { color: var(--text-regular) !important; }
/* 头部：年月、前后箭头 */
.layui-laydate-header { border-bottom: 1px solid var(--border) !important; }
.layui-laydate-header i, .layui-laydate-header span { color: var(--text-main) !important; }
.layui-laydate-header i:hover,
.layui-laydate-header span:hover { color: var(--primary) !important; }
/* 表头星期 */
.layui-laydate-content th { color: var(--text-dim) !important; font-weight: 400 !important; }
/* 普通日期 */
.layui-laydate-content td { color: var(--text-regular) !important; }
.layui-laydate-content .laydate-day-next,
.layui-laydate-content .laydate-day-prev { color: var(--text-placeholder) !important; }
/* 今日 */
.layui-laydate-content td.laydate-day-now { color: var(--primary) !important; }
.layui-laydate-content td.laydate-day-now::after { border-color: var(--primary) !important; }
/* 悬浮 */
.layui-laydate-content td:hover:not(.laydate-disabled),
.layui-laydate-list li:hover,
.layui-laydate-shortcut>li:hover { background: rgba(47,134,255,0.15) !important; color: var(--primary) !important; }
/* 选中态：默认 #16baaa 绿色 → 主色 #2F86FF + 光晕 */
.layui-laydate .layui-this,
.layui-laydate .layui-this>div { background-color: var(--primary) !important; color: #fff !important; box-shadow: 0 0 8px var(--primary-glow); }
.layui-laydate-linkage .layui-laydate-content td.laydate-selected>div,
.layui-laydate-linkage .laydate-selected:hover>div { background-color: rgba(47,134,255,0.25) !important; color: var(--primary) !important; }
/* 日期标记点 */
.laydate-day-mark::after { background-color: var(--primary) !important; }
.layui-laydate-content td.layui-this .laydate-day-mark::after { display: none; }
/* 范围模式中间分隔线 */
.layui-laydate-range .laydate-main-list-1 .layui-laydate-content,
.layui-laydate-range .laydate-main-list-1 .layui-laydate-header { border-left-color: var(--border) !important; }
/* 底部栏 */
.layui-laydate-footer { border-top: 1px solid var(--border) !important; }
.layui-laydate-footer span { background: var(--bg-input) !important; color: var(--text-regular) !important; border: 1px solid var(--border) !important; }
.layui-laydate-footer span:hover { color: var(--primary) !important; border-color: var(--primary) !important; }
.layui-laydate-footer span.layui-laydate-preview { color: var(--text-main) !important; border-color: transparent !important; background: transparent !important; }
.layui-laydate-footer span[lay-type=date] { color: var(--primary) !important; }
/* 确认按钮：主色 + 光晕 */
.layui-laydate-btns-confirm { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; box-shadow: 0 0 8px var(--primary-glow); }
.layui-laydate-btns-confirm:hover { opacity: 0.9; }
/* 年/月/时间选择列表 */
.layui-laydate .layui-laydate-list { background: var(--bg-panel-2) !important; }
.layui-laydate .layui-laydate-list li { color: var(--text-regular) !important; }
/* 时间列表 ol 边框 */
.laydate-time-list li ol { border-color: var(--border) !important; }
/* 提示 */
.layui-laydate-hint { color: var(--c-red) !important; }

/* ============================================================
 * 公共组件库（v2 扩展 - 20260802）
 * 抽取自 sysMaintain/sysPerf/sysIndex 等页面重复样式
 * 命名规范：.dh- 前缀（dark house）
 * ============================================================ */

/* ===== 字号工具类（语义化，替换硬编码 font-size）===== */
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }
.fs-lg { font-size: var(--fs-lg); }
.fs-xl { font-size: var(--fs-xl); }
.fs-2xl { font-size: var(--fs-2xl); }
.fs-stat { font-size: var(--fs-stat); }
.fs-hero { font-size: var(--fs-hero); }

/* ===== 卡片头部组件（抽取自 .mc-head，3 页重复）=====
 * 用法：<div class="dh-card-head" style="--c: var(--c-green)">
 *         <div class="dh-card-icon"><i class="layui-icon layui-icon-set"></i></div>
 *         <div class="dh-card-title">标题</div>
 *         <div class="dh-card-tag">标签</div>
 *       </div>
 */
.dh-card-head {
  padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.dh-card-icon {
  width: 32px; height: 32px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: rgba(47,134,255,0.1); border: 1px solid var(--c, var(--primary));
  flex-shrink: 0;
}
.dh-card-icon i { font-size: var(--fs-xl); color: var(--c, var(--primary)); }  /* 18px */
.dh-card-title { font-size: var(--fs-card); font-weight: 600; color: var(--text-main); }  /* 15px */
.dh-card-tag {
  margin-left: auto; font-size: var(--fs-xs); padding: 2px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-panel-2); font-family: monospace; color: var(--text-regular);
}
.dh-card-tag.show { display: inline-block; }

/* ===== 状态徽章（抽取自 .st-on/.st-off/.st-err，2 页重复）=====
 * 用法：<span class="dh-badge dh-badge--on">正常</span>
 */
.dh-badge {
  display: inline-block; font-size: var(--fs-sm); padding: 2px 10px;
  border-radius: var(--radius-sm); white-space: nowrap; border: 1px solid;
}
.dh-badge--on  { color: var(--c-green);  background: rgba(18,197,108,0.1);  border-color: rgba(18,197,108,0.3); }
.dh-badge--off { color: var(--c-red);    background: rgba(246,84,84,0.1);   border-color: rgba(246,84,84,0.3); }
.dh-badge--err { color: var(--c-yellow); background: rgba(246,194,62,0.1);  border-color: rgba(246,194,62,0.3); }
.dh-badge--info{ color: var(--primary);  background: rgba(47,134,255,0.1);  border-color: rgba(47,134,255,0.3); }

/* ===== 自定义数据表（抽取自 .slow-table/.proc-table，非 layui-table）=====
 * 用法：<table class="dh-table"><thead><tr><th>...</th></tr></thead><tbody>...</tbody></table>
 */
.dh-table { width: 100%; border-collapse: collapse; }
.dh-table th, .dh-table td {
  padding: 8px 10px; text-align: left; font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--border);
}
.dh-table th {
  background: #0F2645; color: var(--primary); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dh-table tbody tr:hover td { background: rgba(47,134,255,0.08); }
.dh-table td.dh-table-empty { text-align: center; color: var(--text-dim); padding: 20px; }

/* ===== 大号统计卡片（抽取自 .perf-stat-card，含大图标+大数字）=====
 * 用法：<div class="dh-stat-card" style="--c: var(--c-orange)">
 *         <div class="dh-stat-icon"><i class="layui-icon layui-icon-chart"></i></div>
 *         <div class="dh-stat-body"><div class="dh-stat-num">123</div><div class="dh-stat-label">标签</div></div>
 *       </div>
 */
.dh-stat-card { padding: 18px 20px; display: flex; align-items: center; gap: 16px; }
.dh-stat-icon {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: rgba(47,134,255,0.08); border: 1px solid var(--c, var(--primary));
  flex-shrink: 0;
}
.dh-stat-icon i { font-size: var(--fs-2xl); color: var(--c, var(--primary)); }
.dh-stat-body { flex: 1; min-width: 0; }
.dh-stat-num {
  font-size: var(--fs-stat); font-weight: 700; line-height: 1;
  font-family: "DIN Alternate", "Roboto", monospace;
  text-shadow: 0 0 14px currentColor; color: var(--c, var(--primary));
}
.dh-stat-label { font-size: var(--fs-sm); color: var(--text-main); margin-top: 6px; }
.dh-stat-sub { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; }

/* ===== 排名徽章（抽取自 .slow-rank，圆形序号）===== */
.dh-rank {
  display: inline-block; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 50%; font-weight: 700;
  font-family: "DIN Alternate", "Roboto", monospace; font-size: var(--fs-sm);
}
.dh-rank.r1 { background: rgba(246,84,84,0.2);   color: var(--c-red);   border: 1px solid var(--c-red); }
.dh-rank.r2 { background: rgba(255,138,20,0.2);  color: var(--c-orange); border: 1px solid var(--c-orange); }
.dh-rank.r3 { background: rgba(246,194,62,0.2);  color: var(--c-yellow); border: 1px solid var(--c-yellow); }
.dh-rank.rn { background: var(--bg-panel-2);     color: var(--text-dim); border: 1px solid var(--border); }

/* ===== 弹窗表单规范（统一 .layer-form 内部结构）===== */
.layer-form { padding: 20px; }
.layer-form .layui-form-item { margin-bottom: 15px; }
.layer-form .layui-form-label { width: 90px; padding: 9px 4px 9px 0; text-align: right; }
.layer-form .layui-input-block { margin-left: 100px; }
.layer-form .layui-input-inline { margin-right: 0; }
.layer-form .form-tips {
  font-size: var(--fs-xs); color: var(--text-dim); margin-top: 6px; line-height: 1.6;
}
.layer-form .form-tips .warn { color: var(--c-yellow); }
.layer-form .form-tips .danger { color: var(--c-red); }

/* ===== 信息提示行（抽取自 .slow-tip，表格上方提示）===== */
.dh-tip {
  padding: 10px 16px; font-size: var(--fs-sm); color: var(--text-dim);
  background: var(--bg-panel-2); border-bottom: 1px solid var(--border);
}

/* ===== 网格容器工具类（统计卡/Redis项等网格布局）===== */
.dh-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.dh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.dh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
@media (max-width: 992px) {
  .dh-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .dh-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dh-grid-4, .dh-grid-3, .dh-grid-2 { grid-template-columns: 1fr; }
}

/* ===== 滚动容器（表格横向滚动）===== */
.dh-scroll-x { overflow-x: auto; }
.dh-scroll-x::-webkit-scrollbar { height: 4px; }

/* ============================================================
 * 物流+追溯模块统计卡片/筛选区样式（sc-* / ff-label / btn-group）
 * 适配 6 个模板：logistics_order / logistics_iot / trace_access
 *               trace_field / trace_exception / trace_log
 * 这套模板使用 .sc-top/.sc-label/.sc-icon/.sc-value/.sc-sub
 * 与公共 .stat-label/.stat-num 体系并行，互不冲突
 * ============================================================ */

/* 统计卡片容器：自适应列数（auto-fit 按卡片数铺满整行，空轨道自动收起；
 * 单卡最小 220px，窄容器按需换行。固定列数的页面用页面内嵌 style 覆盖） */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}
@media (max-width: 1200px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* 颜色修饰符：为 .stat-card 的 --c 变量赋值，
 * 切角伪元素/.sc-value/.sc-icon 自动继承对应颜色 */
.stat-card.blue   { --c: var(--primary); }
.stat-card.green  { --c: var(--c-green); }
.stat-card.yellow { --c: var(--c-yellow); }
.stat-card.red    { --c: var(--c-red); }
.stat-card.orange { --c: var(--c-orange); }
.stat-card.purple { --c: var(--c-purple); }

/* sc-* 子元素结构：顶部(标签+图标) / 大数字 / 副文本 */
.stat-card .sc-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.stat-card .sc-label { font-size: var(--fs-sm); color: var(--text-dim); }
.stat-card .sc-icon i {
  font-size: var(--fs-xl); color: var(--c, var(--primary)); opacity: 0.7;
}
.stat-card .sc-value {
  font-size: var(--fs-stat); font-weight: 700; line-height: 1.2;
  font-family: "DIN Alternate", "Roboto", monospace;
  color: var(--c, var(--primary));
  text-shadow: 0 0 12px rgba(47,134,255,0.3);
}
.stat-card .sc-sub { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 6px; }

/* 面板头部工具栏（右侧按钮组）*/
.dh-panel-head .toolbar { display: flex; gap: 8px; align-items: center; }

/* 筛选表单：单行横排，禁止折行
   overflow: visible !important：覆盖页面内嵌的 overflow-x:auto，
   避免 CSS 怪癖把 overflow-y 强制为 auto 导致 Layui select 下拉 <dl> 被裁剪显示不全 */
.filter-form {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 12px; padding: 14px 16px;
  white-space: nowrap; overflow: visible !important;
}
.filter-form::-webkit-scrollbar { height: 4px; }
.filter-form .layui-form-item {
  margin-bottom: 0; display: inline-flex; align-items: center;
  vertical-align: middle; flex-shrink: 0;
}
.filter-form .ff-label {
  font-size: var(--fs-sm); color: var(--text-regular);
  margin-right: 6px; white-space: nowrap;
}
.filter-form .layui-input-inline { margin-right: 0; }
.filter-form .btn-group {
  display: inline-flex; gap: 6px; margin-left: auto; flex-shrink: 0;
}

/* ============================================================
 * Layui 表单控件 - radio/checkbox/switch 深色化（W1 补丁）
 * 覆盖 .layui-form-radio / .layui-form-checkbox / lay-skin="primary" / lay-skin="switch"
 * 主色 #2F86FF + 光晕，关闭/未选为深色底灰边框
 * ============================================================ */

/* radio 单选按钮 */
.layui-form-radio { color: var(--text-regular) !important; }
.layui-form-radio * { color: var(--text-regular) !important; }
.layui-form-radio>i { color: var(--text-dim) !important; }
.layui-form-radioed>i { color: var(--primary) !important; }
.layui-form-radio:hover * { color: var(--primary) !important; }

/* checkbox 复选按钮（默认方块样式） */
.layui-form-checkbox { color: var(--text-regular) !important; }
.layui-form-checkbox[lay-skin="primary"] { color: var(--text-regular) !important; }
.layui-form-checkbox[lay-skin="primary"] i { background: var(--bg-input) !important; border-color: var(--border) !important; color: transparent !important; }
.layui-form-checkbox[lay-skin="primary"] i:hover { border-color: var(--primary) !important; }
.layui-form-checked[lay-skin="primary"] i { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; box-shadow: 0 0 8px var(--primary-glow); }
.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] i { background: var(--border) !important; border-color: var(--border) !important; color: var(--text-dim) !important; }

/* checkbox 默认样式（非 primary） */
.layui-form-checkbox>i { color: var(--text-dim) !important; }
.layui-form-checked.layui-checkbox-disabled>i { color: var(--text-dim) !important; }

/* switch 开关 */
.layui-form-switch { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text-dim) !important; }
.layui-form-switch>i { color: var(--text-dim) !important; }
.layui-form-onswitch { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; box-shadow: 0 0 10px var(--primary-glow); }
.layui-form-onswitch>i { color: #fff !important; }
.layui-form-switch.layui-checkbox-disabled { background: var(--border) !important; border-color: var(--border) !important; color: var(--text-dim) !important; opacity: 0.5; }

/* 表格内的 switch/radio 微调 */
.layui-table-cell .layui-form-switch { margin: 0; }
.layui-table-cell .layui-form-radio { margin: 0; padding: 0; }

/* ===== slider 滑块深色化（layui 2.8.15 类名：.layui-slider 轨道 / .layui-slider-bar 已选段 / .layui-slider-wrap-btn 滑块按钮）===== */
.layui-slider { background: var(--bg-input) !important; height: 4px; border-radius: 3px; }
.layui-slider-bar { background: var(--primary) !important; border-radius: 3px; }
.layui-slider-wrap-btn {
  background: var(--primary) !important; border: 2px solid var(--primary) !important;
  box-shadow: 0 0 8px var(--primary-glow); width: 14px !important; height: 14px !important;
}
.layui-slider-wrap-btn:hover { transform: scale(1.2); box-shadow: 0 0 12px var(--primary-glow); }
.layui-slider-step { background: var(--border) !important; }
.layui-slider-tips { background: var(--bg-panel-2) !important; color: var(--text-main) !important; border: 1px solid var(--border); }
.layui-slider-tips:after { border-color: var(--bg-panel-2) transparent transparent transparent !important; }

/* ===== 弹窗内容超长时内部滚动（表单单列化后表单更高，防止按钮被顶出视口；按钮栏在 .layui-layer-btn 不受影响）===== */
.layui-layer-page .layui-layer-content { max-height: 78vh; overflow-y: auto; }