/* ===================================================================
   全站主题：亮色 / 夜间
   用法：<html data-theme="dark"> 即可切换到夜间
   切换由 static/js/theme.js 统一处理（含 localStorage 记忆与后台 iframe 同步）
   本文件需在 layui.css / front.css / admin.css 之后加载，以保证覆盖生效
   =================================================================== */

:root {
    --bg: #f4f6f9;
    --bg-panel: #ffffff;
    --bg-soft: #fafbfc;
    --bg-hover: #eef5ff;
    --text: #333333;
    --text-muted: #888888;
    --text-weak: #aaaaaa;
    --border: #e8ecf1;
    --border-soft: #eef1f5;
    --shadow: 0 1px 4px rgba(0, 0, 0, .05);
    --mp-hl-bg: #ffe9a8;
    --mp-hl-text: #a35b00;
}

html[data-theme="dark"] {
    --bg: #14181f;
    --bg-panel: #1c222c;
    --bg-soft: #212936;
    --bg-hover: #263042;
    --text: #d4dae4;
    --text-muted: #8b95a5;
    --text-weak: #6b7686;
    --border: #2c3543;
    --border-soft: #262e3a;
    --shadow: 0 1px 4px rgba(0, 0, 0, .35);
    --mp-hl-bg: #6b5514;
    --mp-hl-text: #ffd666;
}

/* ---------------- 通用底色 ---------------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body.admin-body {
    background: var(--bg);
    color: var(--text);
}

/* ---------------- 前台 ---------------- */
html[data-theme="dark"] .mp-statbar,
html[data-theme="dark"] .mp-side,
html[data-theme="dark"] .mp-main,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .set-preview,
html[data-theme="dark"] .layui-card {
    background: var(--bg-panel);
    border-color: var(--border);
    box-shadow: var(--shadow);
    color: var(--text);
}

/* 前台效果预览：站名
   必须单独写 —— 页面内联样式里 .set-preview .t 直接把站名固定成 #222，
   而上面那条规则只作用于容器本身，管不到子元素。夜间深色底 + 深色字 = 完全看不见。
   这里用更高特异性覆盖；日间不受影响（规则带 data-theme 前缀）。
   辅助文字 .m 用 #999 在深色底上对比度 5.6，本就清晰，故不动。 */
html[data-theme="dark"] .set-preview .t {
    color: #ffffff;
    font-weight: 600;
}

html[data-theme="dark"] .mp-statbar {
    border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .mp-side-head,
html[data-theme="dark"] .mp-cat-tip {
    background: #1a2433;
    border-bottom-color: var(--border);
    color: var(--text);
}

/* 侧栏搜索框：日间边框是浅灰 #eef1f5，夜间若不覆盖会留下一条突兀的亮线。
   边框必须用 border-color（而非 border-bottom），否则行内/层叠顺序不同时可能不生效。 */
html[data-theme="dark"] .mp-side-search {
    border-bottom-color: var(--border-soft);
    border-color: var(--border-soft);
}
/* 搜索输入框：layui 默认白底，夜间需跟着换底换字 */
html[data-theme="dark"] .mp-side-search .layui-input,
html[data-theme="dark"] .mp-side-search .layui-input:hover,
html[data-theme="dark"] .mp-side-search .layui-input:focus {
    background: var(--bg-soft);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .mp-cat-tip > .layui-icon { color: #6ea8f5; }
html[data-theme="dark"] .mp-cat-tip .txt .lb { color: #6ea8f5; }
html[data-theme="dark"] .mp-cat-tip .close { color: #4d5768; }
html[data-theme="dark"] .mp-cat-tip .close:hover { color: #6ea8f5; }

html[data-theme="dark"] .mp-crumb,
html[data-theme="dark"] .mp-filter,
html[data-theme="dark"] .mp-statbar {
    background: var(--bg-soft);
    border-color: var(--border-soft);
}

/* 面包屑链接：日间的 #555 在深底上几乎看不见，夜间换成浅色文本变量 */
html[data-theme="dark"] .mp-crumb .path { color: var(--text-muted); }
html[data-theme="dark"] .mp-crumb .path .crumb-link { color: var(--text-muted); }
html[data-theme="dark"] .mp-crumb .path .crumb-link:hover { color: #6ea8f5; }
html[data-theme="dark"] .mp-crumb .path .crumb-link:last-child { color: #6ea8f5; }
html[data-theme="dark"] .mp-crumb .path .sep { color: var(--border); }

html[data-theme="dark"] .mp-announce {
    background: #3a2f12;
    border-bottom-color: #4a3c17;
    color: #e8c86a;
}

html[data-theme="dark"] .mp-footer {
    color: var(--text-muted);
    border-top: 1px solid var(--border-soft);
}

html[data-theme="dark"] .mp-tree-wrap {
    background: transparent;
}

html[data-theme="dark"] .layui-tree-line .layui-tree-entry:hover,
html[data-theme="dark"] .layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
    background: var(--bg-hover);
}

html[data-theme="dark"] .mp-tree .layui-tree-txt { color: var(--text); }
html[data-theme="dark"] .mp-tree .layui-tree-iconClick { color: var(--text-muted); }
html[data-theme="dark"] .layui-tree-line .layui-tree-entry.selected { background: #1d3358; }
html[data-theme="dark"] .mp-tree .tv-count { color: var(--text-weak); }

html[data-theme="dark"] .mp-hit-hint { color: var(--text-muted); }
html[data-theme="dark"] .mp-hit-hint .hit-tag {
    background: #24344f; color: #7fa8e8;
}
html[data-theme="dark"] .mp-cell-text { color: var(--text-muted); }
html[data-theme="dark"] .mp-cell-text.mp-cell-muted { color: var(--text-weak); }
html[data-theme="dark"] .text-empty { color: #4a5361; }
html[data-theme="dark"] .mp-hl { background: var(--mp-hl-bg); color: var(--mp-hl-text); }

/* ------------------------------------------------------------------
   业务页套用 LayuiMini 容器后的夜间适配
   ------------------------------------------------------------------
   public.css 里已有 body.dark-mode 版本，那依赖子页面收到父框架的
   主题同步消息才生效。这里按本站的 html[data-theme] 机制再加一份，
   两条规则取值一致，谁先生效都一样；避免子页面单独打开、
   或同步消息延迟时出现"深色页面里一块白底容器"。 */
html[data-theme="dark"] .layuimini-container {
    background-color: #2d2d2d;
    border-color: #444;
}
html[data-theme="dark"] .layuimini-container .table-search-fieldset {
    border-color: #444;
    background-color: #333;
    color: #d8d8d8;
}
html[data-theme="dark"] .layuimini-container .table-search-fieldset legend {
    color: #c9c9c9;
    background-color: #2d2d2d;
}
html[data-theme="dark"] .mp-code { color: #9db9e3; }
html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* 项目名称：日间是深色 #222，夜间必须提亮，否则在深底上几乎看不清 */
html[data-theme="dark"] .mp-name-cell { color: var(--text); }
html[data-theme="dark"] .mp-name-cell:hover { color: #7fa8e8; }

/* 价格为 0 的"暂不定价"：夜间需提亮，日间的浅灰在深底上会糊成一片 */
html[data-theme="dark"] .mp-price-none { color: var(--text-weak); }
/* 负数（减收）：日间的青绿在深底上偏暗，夜间提亮 */
html[data-theme="dark"] .mp-price-minus { color: #4ecdc4; }

/* ---------- 小屏新增元素：夜间配色 ---------- */
/* 名称下方的编码/单位小字：日间浅灰在深底上对比不足 */
html[data-theme="dark"] .mp-name-sub { color: var(--text-weak); }
html[data-theme="dark"] .mp-name-sub .c { color: var(--text-muted); }

/* 详情弹窗价格方块：夜间底色调暗，保持与日间一致的层次 */
html[data-theme="dark"] .mp-detail .price-box .p-item {
    background: var(--bg-soft);
    border-color: var(--border);
}
html[data-theme="dark"] .mp-detail .price-box .p-item .v { color: #ff7875; }
html[data-theme="dark"] .mp-detail .price-box .p-item .l { color: var(--text-muted); }

/* 详情表：夜间边框与字段名底色 */
html[data-theme="dark"] .mp-detail table.detail-tb th,
html[data-theme="dark"] .mp-detail table.detail-tb td { border-color: var(--border-soft); }
html[data-theme="dark"] .mp-detail table.detail-tb th { background: var(--bg-soft); color: var(--text-muted); }

/* 分页条里的"每页条数"下拉：layui 生成的是原生 select，
   上面 .layui-input 那组规则选不到它，背景会残留白色 */
html[data-theme="dark"] .layui-table-page select,
html[data-theme="dark"] .layui-laypage select,
html[data-theme="dark"] .layui-laypage .layui-laypage-skip select,
html[data-theme="dark"] .layui-table-page .layui-laypage-limit select {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border);
}
/* 原生 select 展开后的下拉项（浏览器绘制，CSS 只能靠 color-scheme 影响） */
html[data-theme="dark"] .layui-table-page select option,
html[data-theme="dark"] .layui-laypage select option {
    background: var(--bg-panel);
    color: var(--text);
}
/* 分页条的"共 N 条 / 跳至"等文字 */
html[data-theme="dark"] .layui-table-page .layui-laypage-count,
html[data-theme="dark"] .layui-table-page .layui-laypage-skip {
    color: var(--text-muted);
}

/* ---------------- 后台 ---------------- */
html[data-theme="dark"] .admin-header {
    background: #10151d;
    border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .admin-side { background: #171d27; }
html[data-theme="dark"] .admin-side .layui-nav-tree .layui-nav-item a { color: var(--text); }
html[data-theme="dark"] .admin-side .layui-nav-tree .layui-nav-itemed > a { background: #202836; }
html[data-theme="dark"] .admin-side .layui-nav-tree .layui-nav-child { background: #141a23; }
html[data-theme="dark"] .admin-main { background: var(--bg); }
html[data-theme="dark"] .admin-tab.layui-tab { background: var(--bg-panel); }
html[data-theme="dark"] .admin-tab .layui-tab-title {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .admin-tab .layui-tab-title li { color: var(--text-muted); }
html[data-theme="dark"] .admin-tab .layui-tab-title li:hover { color: #7db0ff; }
html[data-theme="dark"] .admin-tab .layui-tab-title li.layui-this {
    background: var(--bg-panel); color: #7db0ff;
}
html[data-theme="dark"] .admin-tab .layui-tab-title li.layui-this::before { background: #4a8cf7; }
html[data-theme="dark"] .admin-tab .layui-tab-title li.layui-this::after  { background: #4a8cf7; }
html[data-theme="dark"] .admin-tab-tools { background: var(--bg-soft); }
html[data-theme="dark"] .admin-tab-btn { color: var(--text-muted); }
html[data-theme="dark"] .admin-tab-btn:hover { background: #2a3342; color: #7db0ff; }
html[data-theme="dark"] .page-title { color: var(--text); }
html[data-theme="dark"] .stat-card {
    background: var(--bg-panel); border-color: var(--border);
}
html[data-theme="dark"] .stat-card .value { color: var(--text); }
html[data-theme="dark"] .stat-card .label { color: var(--text-muted); }

/* ---------------- layui 组件 ---------------- */
html[data-theme="dark"] .layui-table,
html[data-theme="dark"] .layui-table td,
html[data-theme="dark"] .layui-table th,
html[data-theme="dark"] .layui-table thead tr,
html[data-theme="dark"] .layui-table-view,
html[data-theme="dark"] .layui-table-header,
html[data-theme="dark"] .layui-table-tool,
html[data-theme="dark"] .layui-table-page,
html[data-theme="dark"] .layui-table-total {
    background: var(--bg-panel);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .layui-table tbody tr:hover,
html[data-theme="dark"] .layui-table-hover,
html[data-theme="dark"] .layui-table-click {
    background: var(--bg-hover) !important;
}

html[data-theme="dark"] .layui-table-header th { background: var(--bg-soft) !important; }

html[data-theme="dark"] .layui-table-page .layui-laypage a,
html[data-theme="dark"] .layui-table-page .layui-laypage span {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .layui-table-page .layui-laypage .layui-laypage-curr em {
    background: #1e6fd9; color: #fff;
}
html[data-theme="dark"] .layui-table-page .layui-laypage button,
html[data-theme="dark"] .layui-table-page .layui-laypage input {
    background: var(--bg-soft); color: var(--text); border-color: var(--border);
}

/* 表单 */
html[data-theme="dark"] .layui-input,
html[data-theme="dark"] .layui-select,
html[data-theme="dark"] .layui-textarea,
html[data-theme="dark"] select.layui-input {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .layui-input::placeholder,
html[data-theme="dark"] .layui-textarea::placeholder { color: var(--text-weak); }
html[data-theme="dark"] .layui-form-label { color: var(--text-muted); }
html[data-theme="dark"] .layui-form-select dl { background: var(--bg-panel); border-color: var(--border); }
html[data-theme="dark"] .layui-form-select dl dd:hover { background: var(--bg-hover); }
html[data-theme="dark"] .layui-form-select .layui-select-title input { background: var(--bg-soft); color: var(--text); }
html[data-theme="dark"] .layui-form-radio > i { color: var(--text-muted); }
html[data-theme="dark"] .layui-form-checkbox span { color: var(--text); }
html[data-theme="dark"] .layui-form-checkbox i { border-color: var(--border); background: var(--bg-soft); }
html[data-theme="dark"] .layui-word-aux,
html[data-theme="dark"] .field-tip,
html[data-theme="dark"] .perm-tip { color: var(--text-weak) !important; }

/* 弹层 / 面板 */
html[data-theme="dark"] .layui-layer,
html[data-theme="dark"] .layui-layer-content { background: var(--bg-panel); color: var(--text); }
html[data-theme="dark"] .layui-layer-title { background: var(--bg-soft); color: var(--text); border-bottom-color: var(--border); }
html[data-theme="dark"] .layui-tab-title li { color: var(--text-muted); }
html[data-theme="dark"] .layui-card { background: var(--bg-panel); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .layui-card-header { color: var(--text); border-bottom-color: var(--border-soft); }
html[data-theme="dark"] .layui-btn-primary {
    background: var(--bg-soft); color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] .layui-btn-primary:hover { border-color: #1e6fd9; color: #7fa8e8; }
html[data-theme="dark"] .layui-nav .layui-nav-item a { color: var(--text); }
html[data-theme="dark"] .layui-nav-child { background: var(--bg-panel) !important; border-color: var(--border); }
html[data-theme="dark"] .layui-nav-child a { color: var(--text) !important; }
html[data-theme="dark"] .layui-nav-child dd:hover a,
html[data-theme="dark"] .layui-nav-child a:hover { background: var(--bg-hover) !important; }

/* 表格空数据、详情弹窗内的自定义块 */
html[data-theme="dark"] .mp-empty { color: var(--text-weak); }
html[data-theme="dark"] .mp-detail dt { color: var(--text-muted); }
html[data-theme="dark"] .mp-detail dd { color: var(--text); }
html[data-theme="dark"] .mp-detail .price-box .p-item {
    background: var(--bg-soft); border-color: var(--border);
}
html[data-theme="dark"] .mp-detail .price-box .p-item .l { color: var(--text-muted); }

/* -------- 详情弹窗内的表格 --------
   日间样式里 th（左侧字段名列）是白底 #fafbfc、td 也是浅色系，
   夜间若不覆盖，弹窗内容区变深后这一列仍是大片白块，对比刺眼。 */
html[data-theme="dark"] .mp-detail h4 { color: var(--text); }
html[data-theme="dark"] .mp-detail .sub { color: var(--text-muted); }
html[data-theme="dark"] .mp-detail table.detail-tb th,
html[data-theme="dark"] .mp-detail table.detail-tb td {
    border-color: var(--border);
    background: transparent;
    color: var(--text);
}
html[data-theme="dark"] .mp-detail table.detail-tb th {
    background: var(--bg-soft);
    color: var(--text-muted);
}
/* 计价单位那格内联写了 color:#333，夜间必须提亮 */
html[data-theme="dark"] .mp-detail .price-box .p-item .v { color: #ff8a80; }
html[data-theme="dark"] .mp-detail table.detail-tb a { color: #7fa8e8; }
html[data-theme="dark"] .mp-detail table.detail-tb a:hover { color: #a8c8f5; }

/* ---------------- 主题切换按钮 ---------------- */
.mp-theme-btn,
.admin-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 17px;
    transition: all .2s;
    flex: none;
}
.mp-theme-btn:hover,
.admin-theme-btn:hover {
    background: rgba(255, 255, 255, .3);
}
html[data-theme="dark"] .mp-theme-btn,
html[data-theme="dark"] .admin-theme-btn {
    border-color: var(--border);
    background: var(--bg-soft);
    color: #ffd666;
}

/* ---------------- 登录页 ---------------- */
/* 登录页不走后台框架，底色/卡片/文字都是独立的，需要单独覆盖 */
html[data-theme="dark"] body {
    /* 日间是蓝绿渐变，夜间换成深色渐变，避免大面积亮色刺眼 */
    background: linear-gradient(135deg, #101722 0%, #17222c 100%) !important;
}
html[data-theme="dark"] .login-box {
    background: var(--bg-panel);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .login-side {
    /* 侧栏原本是亮色渐变图，夜间压暗并降低对比 */
    filter: brightness(.62) saturate(.85);
}
html[data-theme="dark"] .login-main { background: var(--bg-panel); }
html[data-theme="dark"] .login-main h3 { color: var(--text); }
html[data-theme="dark"] .login-main .sub { color: var(--text-muted); }
html[data-theme="dark"] .login-tip { color: var(--text-weak); }
html[data-theme="dark"] .login-tip code {
    background: var(--bg-soft);
    color: #ff8a80;
}
html[data-theme="dark"] .mp-totp-tip {
    background: #1a2433;
    border-color: var(--border);
    color: #9dc0ee;
}
html[data-theme="dark"] .mp-totp-tip .layui-icon { color: #6ea8f5; }
html[data-theme="dark"] .login-main a { color: #7fa8e8 !important; }

/* 登录页切换按钮（深色固定在右上角） */
.theme-fixed {
    position: fixed;
    top: 14px; right: 16px;
    z-index: 9999;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .1);
    color: #555;
    font-size: 18px;
}
html[data-theme="dark"] .theme-fixed {
    background: var(--bg-soft);
    border-color: var(--border);
    color: #ffd666;
}

/* 停用标识（夜间）：深底上纯红偏暗，提亮一档 */
:root[data-theme="dark"] .mp-stop,
[data-theme="dark"] .mp-stop { color: #ff7875; }
:root[data-theme="dark"] .mp-stop-date,
[data-theme="dark"] .mp-stop-date { color: #ff7875; }

/* ==================================================================
   后台框架（LayuiMini）夜间模式补充
   ==================================================================
   模板自带的 dark-mode.css 只作用于框架页（业务页不引入，
   否则其中 body.dark-mode * { color:#fff !important } 会把
   彩色标识全部刷白）。因此框架侧的深色适配需要在这里补齐。

   下面三处是实测发现的问题：
     1) .layui-form-label  白字 + #fafafa 浅底 → 完全看不见
     2) 标签栏左右/向下箭头  白字 + 白底     → 完全看不见
     3) 顶部模块菜单         白字 + #e4e4e4 浅底 → 选中项反而最不醒目
   ================================================================== */

/* ---------- 1) 表单 Label ---------- */
[data-theme="dark"] .layui-form-label,
body.dark-mode .layui-form-label {
    background: #23262e;
    color: #c9d1d9;
}

/* 小标题（如「导入价格项目（CSV）」）同样统一为浅色文字 */
[data-theme="dark"] .label,
body.dark-mode .label {
    color: #e6e9ef;
}
[data-theme="dark"] .label b,
body.dark-mode .label b {
    color: #fff;
}

/* ---------- 2) 标签栏箭头（左 / 右 / 向下）---------- */
[data-theme="dark"] .layuimini-tab .layui-tab-control > li,
body.dark-mode .layuimini-tab .layui-tab-control > li {
    background-color: #23262e;
    color: #c9d1d9;                 /* 图标是字体图标，颜色跟随 color */
    border-top-color: #3a3f4a;
    border-bottom-color: #3a3f4a;
    border-left-color: #3a3f4a;
    border-right-color: #3a3f4a;
}

[data-theme="dark"] .layuimini-tab .layuimini-tab-roll-left:hover,
[data-theme="dark"] .layuimini-tab .layuimini-tab-roll-right:hover,
[data-theme="dark"] .layuimini-tab .layuimini-tab-tool:hover,
body.dark-mode .layuimini-tab .layuimini-tab-roll-left:hover,
body.dark-mode .layuimini-tab .layuimini-tab-roll-right:hover,
body.dark-mode .layuimini-tab .layuimini-tab-tool:hover {
    background-color: #2c313a;
    color: #fff;
}

/* 标签标题栏整体：夜间用深色，避免白底突兀 */
[data-theme="dark"] .layuimini-tab .layui-tab-title,
body.dark-mode .layuimini-tab .layui-tab-title {
    background: #1c1f26;
    border-bottom-color: #3a3f4a;
}

/* ---------- 3) 顶部模块菜单 ---------- */
/* 未选中：柔和灰，弱化但不消失 */
[data-theme="dark"] .layuimini-header-menu .layui-nav-item > a,
body.dark-mode .layuimini-header-menu .layui-nav-item > a {
    color: #9aa4b2;
}
[data-theme="dark"] .layuimini-header-menu .layui-nav-item > a:hover,
body.dark-mode .layuimini-header-menu .layui-nav-item > a:hover {
    color: #ffffff;
}

/* 选中模块：主色实底 + 白字 + 底部高亮条，三重提示 */
[data-theme="dark"] .layuimini-header-menu .layui-nav-item.layui-this,
body.dark-mode .layuimini-header-menu .layui-nav-item.layui-this {
    background: #1e9fff !important;
}
[data-theme="dark"] .layuimini-header-menu .layui-nav-item.layui-this > a,
body.dark-mode .layuimini-header-menu .layui-nav-item.layui-this > a {
    color: #ffffff !important;
    font-weight: 600;
}
[data-theme="dark"] .layuimini-header-menu .layui-nav-item.layui-this::after,
body.dark-mode .layuimini-header-menu .layui-nav-item.layui-this::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #ffffff;
}
[data-theme="dark"] .layuimini-header-menu .layui-nav-item.layui-this,
body.dark-mode .layuimini-header-menu .layui-nav-item.layui-this {
    position: relative;
}

/* 手机端「选择模块」下拉同样适配 */
[data-theme="dark"] .layuimini-menu-header-mobile,
body.dark-mode .layuimini-menu-header-mobile {
    background: #23262e;
    border-color: #3a3f4a;
}
[data-theme="dark"] .layuimini-menu-header-mobile a,
body.dark-mode .layuimini-menu-header-mobile a {
    color: #c9d1d9;
}
[data-theme="dark"] .layuimini-menu-header-mobile a:hover,
body.dark-mode .layuimini-menu-header-mobile a:hover {
    background: #2c313a;
    color: #fff;
}