/* ==========================================================================
   暗色主题补丁层（2026-10-20）
   --------------------------------------------------------------------------
   干什么：把 layui 原生写死白底/浅灰的"表面"换成跟随主题包的层级色，
           让「星空版」这类暗色主题包不只是换个主色，而是真的整站变暗。

   为什么需要：主题包只能覆盖 system_set 里的皮肤字段 → ThemeConfig 输出 CSS 变量。
           layui.css 里有 51 条规则直接写 background:#fff（表格、弹层、下拉、日期…），
           变量管不到它们，暗色下就成了"深背景 + 白面板"的花斑。

   生效范围：只在 <html class="theme-dark"> 时生效（由主题包 theme.json 的 "dark": true 触发）。
           浅色主题包 / 不装包 = 一条都不生效，观感与以前完全一致。

   层级色全部走变量，暗色包只改 system_set 字段就能调：
     --dlx-s1  面板底      = --bg-card        （卡片/表格/弹窗）
     --dlx-s2  次级底      = 白 4.5%          （表头、输入框、斑马行）
     --dlx-s3  hover 底    = 白 8.5%
     --dlx-line 分隔线     = --bg-border
   ========================================================================== */

html.theme-dark {
    color-scheme: dark; /* 原生滚动条/表单控件跟着变暗 */
    --dlx-s1: var(--bg-card);
    --dlx-s2: rgba(255, 255, 255, .045);
    --dlx-s3: rgba(255, 255, 255, .085);
    --dlx-line: var(--bg-border);
    /* 老样式里若干处写了 var(--bg-hover, #f2f2f2)，浅色兜底在暗色下是块白斑，这里补上 */
    --bg-hover: rgba(255, 255, 255, .06);
}

html.theme-dark body {
    background: var(--bg-page);
    color: var(--text-main);
}

/* ---------- 0. 表面层级：深色下"卡片"要读成一块面（2026-10-21 晚）----------
   背景：星空包第一版 cardAlpha 0.74，卡片透出底下的星云，每张卡透出来的浓度都不一样，
         看板上像蒙了一层脏灰。把 alpha 收到 0.94 之后，只靠底色差（#0b111b vs #05080d）
         在缩略图上几乎看不出边界 —— 所以边界不能只靠"透"，要给它一条发丝边。
   为什么用 inset 顶部高光而不是大阴影：大屏上十几张卡同时压阴影，灰雾会叠成一片。
         顶部 1px 内高光能造出"这块面比背景高"的错觉，成本是 0。 */
html.theme-dark .dlx-card,
html.theme-dark .stat-card,
html.theme-dark .layui-card {
    border: 1px solid rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .30);
}

html.theme-dark .dlx-card:hover,
html.theme-dark .stat-card:hover {
    border-color: rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 10px rgba(0, 0, 0, .38);
}

/* KPI 大数字：深色下不铺主题色（2026-10-21 晚）
   浅色下 --text-accent 压得住，但深色里 4 个 3rem / 900 的主题色数字并排会变成霓虹招牌，
   而且一眼只能看到颜色看不到数值。改近白 + 收一档字重 + 等宽数字，主题色让给图标和单位。 */
html.theme-dark .stat-value {
    color: #f2f6fb;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ---------- 0b. 侧栏选中态：深色下改"淡主题底 + 左竖条"（2026-10-21 晚）----------
   实底 pill（主题色铺满 + 白字）在浅色下最干净，白字压得住；到了深色就是整块高亮色，
   一屏只亮一个也照样扎眼，而且会和旁边的高亮数据抢注意力。
   改成 14% 主题底 + 2px 左竖条：位置感一样清楚，视觉重量降一档。 */
html.theme-dark #sidebar .nav-link.active,
html.theme-dark #sidebarOffcanvas .nav-link.active {
    background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), .14) !important;
    color: rgb(var(--primary-r), var(--primary-g), var(--primary-b)) !important;
    font-weight: 600;
    box-shadow: inset 2px 0 0 rgb(var(--primary-r), var(--primary-g), var(--primary-b));
}

/* ---------- 1. 表格 ---------- */
html.theme-dark .layui-table-view,
html.theme-dark .layui-table-box,
html.theme-dark .layui-table-main,
html.theme-dark .layui-table,
html.theme-dark .layui-table-header,
html.theme-dark .layui-table-body {
    background: transparent;
    border-color: var(--dlx-line);
}

html.theme-dark .layui-table th,
html.theme-dark .layui-table-header th {
    background: var(--dlx-s2) !important;
    color: var(--text-sub);
    border-color: var(--dlx-line);
}

html.theme-dark .layui-table td,
html.theme-dark .layui-table-cell,
html.theme-dark .layui-table-cell .layui-table-cell {
    background: transparent;
    color: var(--text-main);
    border-color: var(--dlx-line);
}

html.theme-dark .layui-table tbody tr:hover,
html.theme-dark .layui-table-hover,
html.theme-dark .layui-table tbody tr.layui-table-hover > td {
    background: var(--dlx-s3) !important;
}

/* 斑马纹：主题色 12% 的淡底在暗色下几乎看不见，改用中性白 3% */
html.theme-dark .layui-table[lay-even] tbody tr:nth-child(even),
html.theme-dark .layui-table[lay-even] tbody tr:nth-child(even) > td {
    background: rgba(255, 255, 255, .025) !important;
}

/* 固定列修补元素：layui 默认 background:#fff，暗色下会在操作列右侧拉出一条白竖条 */
html.theme-dark .layui-table-mend,
html.theme-dark .layui-table-fixed,
html.theme-dark .layui-table-fixed-r .layui-table-body,
html.theme-dark .layui-table-fixed-l .layui-table-body {
    background: var(--dlx-s1) !important;
}

html.theme-dark .layui-table-fixed-r { box-shadow: -1px 0 0 var(--dlx-line); }
html.theme-dark .layui-table-fixed-l { box-shadow: 1px 0 0 var(--dlx-line); }

/* 表头筛选面板 / 列配置面板 / 单元格编辑 / 溢出气泡 */
html.theme-dark .dlx-filter-panel,
html.theme-dark .layui-table-tool-panel,
html.theme-dark .layui-table-col-set,
html.theme-dark .layui-table-tips-main,
html.theme-dark .layui-table-grid-down,
html.theme-dark .layui-table-cell-c {
    background: var(--dlx-s1);
    color: var(--text-main);
    border-color: var(--dlx-line);
}

html.theme-dark .layui-table-edit {
    background: var(--dlx-s2);
    color: var(--text-main);
}

/* 空数据 / 无内容提示 */
html.theme-dark .layui-none,
html.theme-dark .layui-table-page + .layui-none {
    background: transparent;
    color: var(--text-sub);
}

/* ---------- 2. 分页 ---------- */
html.theme-dark .layui-table-page { background: transparent; border-color: var(--dlx-line); }

html.theme-dark .layui-laypage a,
html.theme-dark .layui-laypage span,
html.theme-dark .layui-laypage input,
html.theme-dark .layui-laypage button,
html.theme-dark .layui-laypage select {
    background: var(--dlx-s2);
    border-color: var(--dlx-line);
    color: var(--text-main);
}

html.theme-dark .layui-laypage a:hover,
html.theme-dark .layui-laypage button:hover {
    background: var(--dlx-s3);
    color: var(--text-accent);
}

html.theme-dark .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background: var(--bg-main);
}

html.theme-dark .layui-laypage .layui-laypage-curr em {
    color: var(--text-on-brand);
}

/* ---------- 3. 表单控件 ---------- */
html.theme-dark .layui-input,
html.theme-dark .layui-select,
html.theme-dark .layui-textarea {
    background: var(--dlx-s2);
    border-color: var(--dlx-line);
    color: var(--text-main);
}

html.theme-dark .layui-input:hover,
html.theme-dark .layui-textarea:hover,
html.theme-dark .layui-select:hover { border-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), .55) !important; }

html.theme-dark .layui-input:focus,
html.theme-dark .layui-textarea:focus { border-color: var(--text-accent) !important; }

html.theme-dark .layui-input::placeholder,
html.theme-dark .layui-textarea::placeholder,
html.theme-dark .layui-input::-webkit-input-placeholder { color: rgba(255, 255, 255, .42); }

html.theme-dark .layui-input[disabled],
html.theme-dark .layui-textarea[disabled],
html.theme-dark .layui-select[disabled] {
    background: rgba(255, 255, 255, .02);
    color: var(--text-sub);
}

/* 下拉选项 */
html.theme-dark .layui-form-select dl {
    background: var(--dlx-s1);
    border-color: var(--dlx-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
html.theme-dark .layui-form-select dl dd { color: var(--text-main); }
html.theme-dark .layui-form-select dl dd:hover,
html.theme-dark .layui-form-select dl dd.layui-this {
    background: var(--dlx-s3);
    color: var(--text-accent);
}
html.theme-dark .layui-form-select dl dd.layui-disabled { background: var(--dlx-s1); color: var(--text-sub); }
html.theme-dark .layui-form-select .layui-edge { border-top-color: var(--text-sub); }

/* 复选框 / 单选框 / 开关 */
html.theme-dark .layui-form-checkbox[lay-skin=primary] > i,
html.theme-dark .layui-form-radio > i {
    background: transparent;
    border-color: var(--dlx-line);
    color: var(--text-sub);
}
html.theme-dark .layui-form-checked[lay-skin=primary] > i,
html.theme-dark .layui-form-radioed > i {
    background: var(--bg-main);
    border-color: var(--bg-main);
    color: var(--text-on-brand);
}
html.theme-dark .layui-table-header .layui-form-checkbox[lay-skin=primary] > .layui-icon-indeterminate {
    background-color: var(--dlx-s2) !important;
}

/* ---------- 4. 弹层（layer）---------- */
html.theme-dark .layui-layer {
    background: var(--dlx-s1);
    color: var(--text-main);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}

html.theme-dark .layui-layer-title,
html.theme-dark .layui-layer-page .layui-layer-title {
    background: var(--dlx-s1);
    color: var(--text-main);
    border-bottom: 1px solid var(--dlx-line);
}

html.theme-dark .layui-layer-content { color: var(--text-main); }
html.theme-dark .layui-layer-setwin > a { color: var(--text-sub); }
html.theme-dark .layui-layer-setwin > a:hover { color: var(--text-main); }

/* 弹窗底部按钮：dlx-layui.css 里给 btn0/btn1 写的是带 !important 的固定色
   （主题色 / --color-gray #a1a1a1），这里必须同样用 !important 才能压过它，
   否则暗色下"取消"是一块亮灰。 */
html.theme-dark .layui-layer-btn a {
    background: var(--dlx-s3) !important;
    border-color: var(--dlx-line) !important;
    color: var(--text-main) !important;
}
html.theme-dark .layui-layer-btn .layui-layer-btn0 {
    background: var(--bg-main) !important;
    border-color: var(--bg-main) !important;
    color: var(--text-on-brand) !important;
}
html.theme-dark .layui-layer-btn a:hover { filter: brightness(1.15); opacity: 1; }

/* 提示层（layer.msg）默认半透明黑底白字，暗色下反而更清楚，只补圆角内的描边 */
html.theme-dark .layui-layer-msg { border-color: var(--dlx-line); }

/* ---------- 5. 卡片 / 面板 / 标签页 ---------- */
html.theme-dark .layui-card,
html.theme-dark .layui-panel,
html.theme-dark .layui-panel-window { background: var(--dlx-s1); color: var(--text-main); }

html.theme-dark .layui-tab-title,
html.theme-dark .layui-tabs-header { border-color: var(--dlx-line); }
html.theme-dark .layui-tab-card > .layui-tab-title .layui-this,
html.theme-dark .layui-tabs-card > .layui-tabs-header .layui-this {
    background: var(--dlx-s1);
    color: var(--text-accent);
}
html.theme-dark .layui-tab-card > .layui-tab-title li { color: var(--text-sub); }

/* ---------- 6. 日期 / 颜色 / 菜单 ---------- */
html.theme-dark .layui-laydate,
html.theme-dark .layui-laydate-hint,
html.theme-dark .layui-laydate .layui-laydate-list,
html.theme-dark .layui-laydate-footer span {
    background: var(--dlx-s1);
    color: var(--text-main);
    border-color: var(--dlx-line);
}
html.theme-dark .layui-laydate-header i,
html.theme-dark .layui-laydate-content th { color: var(--text-sub); }
html.theme-dark .layui-laydate-content td { color: var(--text-main); }
html.theme-dark .layui-laydate-content td.laydate-selected,
html.theme-dark .layui-laydate-content td:hover { background: var(--dlx-s3); }
html.theme-dark .layui-laydate .layui-this { background: var(--bg-main) !important; color: var(--text-on-brand) !important; }

html.theme-dark .layui-menu,
html.theme-dark .layui-nav-child { background: var(--dlx-s1); border-color: var(--dlx-line); }
html.theme-dark .layui-menu li,
html.theme-dark .layui-nav-child a { color: var(--text-main); }

html.theme-dark .layui-code { background: rgba(0, 0, 0, .3); color: var(--text-main); border-color: var(--dlx-line); }
html.theme-dark .layui-transfer-box { background: var(--dlx-s1); border-color: var(--dlx-line); }
html.theme-dark .layui-colorpicker-main { background: var(--dlx-s1); border-color: var(--dlx-line); }

/* ---------- 7. 自研组件里的写死浅色 ---------- */
html.theme-dark .dlx-combobox-dd { background: var(--dlx-s1); border-color: var(--dlx-line); }
html.theme-dark .dlx-combobox-dd dd { color: var(--text-main); }
html.theme-dark .dlx-combobox-dd dd:hover { background-color: var(--dlx-s3) !important; }

/* ---------- 8. 滚动条 ---------- */
html.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.theme-dark ::-webkit-scrollbar-track { background: transparent; }
html.theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
html.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); background-clip: content-box; }

/* ---------- 9. 图表容器 ---------- */
/* 只把图表画布本身弄透明，让卡片底色透出来。
   注意别连 .dlx-card 一起写成 transparent —— 那会把卡片的面（和它的圆角阴影）一起抹掉，
   看板会变成"一整块深色平面"，之前踩过。 */
html.theme-dark .chart-box,
html.theme-dark .echarts-container,
html.theme-dark .chart-canvas { background: transparent; }

/* ---------- 0c. 登录页：深色下三团几何装饰会变成灰污渍（2026-10-21 晚）----------
   浅色里 .10 alpha 的主题色圆是"淡淡的点缀"，同一组数值放到 #05080d 上就是三块灰蓝斑，
   尤其 ::before 那个 box-shadow 偏移出来的大圆盘（-36vw 60vh），正好落在登录卡下方，
   1366 宽下像个没对齐的水印。深色只留一圈描边环，实心盘和左上点线整块关掉。 */
html.theme-dark .login-bg-wrapper { opacity: .32; }
html.theme-dark .login-bg-wrapper::before { box-shadow: none; opacity: .55; }
html.theme-dark .login-bg-wrapper::after { display: none; }
html.theme-dark body::before,
html.theme-dark body::after { display: none; }

/* 插图分栏：浅色下靠 6.2% 主题底区分左右两栏，深色下会变成一块"蓝灰塑料板"，
   反而把插图衬得像贴上去的。深色改成"几乎无色 + 1px 竖向分隔线"。 */
html.theme-dark .login-card--split .login-split-illus {
    background:
        radial-gradient(130% 90% at 26% 16%,
            rgba(var(--primary-r), var(--primary-g), var(--primary-b), .10), transparent 62%),
        rgba(255, 255, 255, .014);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

/* ---------- 0d. 深色页底：星点纹理纯 CSS 生成（2026-10-21 晚）----------
   为什么不用主题包背景图：同一个位置试过 AI 深空照片（尘埃带 1440 宽 cover 后像墙面污渍）
   和矢量星野（文件被反复覆盖，部署不可靠）。最终结论是"深色管理系统的底必须可预测"——
   星点本来就是 1px 的点，用 radial-gradient 平铺完全够，而且：
     · 零请求、零文件，不受 uploads 目录被改写影响；
     · 颜色由主色派生，换主色自动换（和 --tex-* 的既有设计一致）；
     · 尺寸用互质的 240 / 361，平铺不会对齐成"点阵屏"。
   三团光晕压到 6~9%，只在边角能感觉到"这里有光"，中间留干净。 */
html.theme-dark .page-bg-wrapper {
    background-image:
        /* 光晕：右上主光 + 左下补光。数值比 --tex-glow(.20) 低一档，深底上 .20 会发灰 */
        radial-gradient(1100px 780px at 92% -14%,
            rgba(var(--primary-r), var(--primary-g), var(--primary-b), .13), transparent 64%),
        radial-gradient(860px 680px at 2% 106%,
            rgba(var(--primary-r), var(--primary-g), var(--primary-b), .075), transparent 66%),
        /* 星点：两层级联，一层偏白（近），一层偏主色（远） */
        radial-gradient(1.3px 1.3px at 37px 53px, rgba(235, 244, 255, .52), transparent 1.5px),
        radial-gradient(1.3px 1.3px at 181px 137px, rgba(235, 244, 255, .34), transparent 1.5px),
        radial-gradient(1.3px 1.3px at 96px 211px, rgba(var(--primary-r), var(--primary-g), var(--primary-b), .46), transparent 1.5px),
        radial-gradient(1.3px 1.3px at 259px 79px, rgba(235, 244, 255, .26), transparent 1.5px),
        /* 两颗"定位星"：不铺开（no-repeat），带 5px 柔光，给整片底一个视线落点 */
        radial-gradient(7px 7px at 78% 13%, rgba(235, 244, 255, .40), rgba(235, 244, 255, .06) 40%, transparent 72%),
        radial-gradient(5px 5px at 16% 82%, rgba(var(--primary-r), var(--primary-g), var(--primary-b), .42), transparent 70%);
    background-size:
        auto, auto,
        240px 240px, 240px 240px,
        361px 361px, 361px 361px,
        auto, auto;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
    background-color: var(--bg-page);
}