/*
 * _patches.css — 临时补丁与未归类样式
 * ====================================
 *
 * 业务页面巡检时发现的"白底图片、内联硬编码颜色、组件未归类样式"等补丁集中在此。
 *
 * 在第 10 章实施，逐条加入：
 * - 徽章 / 标签 / 卡片 / 折叠面板
 * - 树形控件、级联选择
 * - 颜色选择器、滑动条、评分
 * - 富文本编辑器在暗色背景下的可读性补丁（不切换主题，仅做边框/外框适配）
 * - 业务页面里 inline <style> 写死浅色的元素
 *
 * 每条补丁加注释说明：哪个页面 / 为什么 / 修复方式
 */

/* === 通用 layui badge / font 系列 === */
html[data-skin="dark"] .layui-badge {
    background: var(--primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-xs);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.4;
    height: auto;
}

html[data-skin="dark"] .layui-badge-rim {
    background: transparent;
    color: var(--text-1);
    border: 1px solid var(--border);
}

html[data-skin="dark"] .layui-badge.layui-bg-orange { background: var(--warning); color: #fff; }
html[data-skin="dark"] .layui-badge.layui-bg-red { background: var(--danger); color: #fff; }
html[data-skin="dark"] .layui-badge.layui-bg-green { background: var(--success); color: #fff; }
html[data-skin="dark"] .layui-badge.layui-bg-blue { background: var(--info); color: #fff; }
html[data-skin="dark"] .layui-badge.layui-bg-cyan { background: var(--info); color: #fff; }
html[data-skin="dark"] .layui-badge.layui-bg-gray,
html[data-skin="dark"] .layui-badge.layui-bg-black {
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--border);
}

html[data-skin="dark"] .layui-font-red    { color: var(--danger); }
html[data-skin="dark"] .layui-font-orange { color: var(--warning); }
html[data-skin="dark"] .layui-font-green  { color: var(--success); }
html[data-skin="dark"] .layui-font-blue   { color: var(--info); }
html[data-skin="dark"] .layui-font-cyan   { color: var(--info); }
html[data-skin="dark"] .layui-font-gray   { color: var(--text-2); }
html[data-skin="dark"] .layui-font-purple { color: var(--accent); }
html[data-skin="dark"] .layui-font-black  { color: var(--text-1); }

/* === list 页"轻度模式"：保留原 .layui-fluid > .layui-card，
 * 在 .skin-page 内套用暗色卡片样式（不需要每页都重写 DOM）
 */
html[data-skin="dark"] .skin-page > .layui-fluid {
    padding: 0;
}

html[data-skin="dark"] .skin-page > .layui-fluid > .layui-card,
html[data-skin="dark"] .skin-page .layui-fluid > .layui-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin: 0;
}

html[data-skin="dark"] .skin-page > .layui-fluid > .layui-card > .layui-card-header,
html[data-skin="dark"] .skin-page .layui-fluid > .layui-card > .layui-card-header {
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--text-1);
    padding: 12px 16px;
    height: auto;
    min-height: 48px;
}

/* 搜索表单内 form-label 紧凑 */
html[data-skin="dark"] .layui-card-header .layui-form .layui-form-label {
    color: var(--text-2);
    padding: 6px 8px 6px 0;
    width: auto;
    text-align: right;
    font-size: 13px;
    line-height: 28px;
}

html[data-skin="dark"] .layui-card-header .layui-form .layui-input-inline,
html[data-skin="dark"] .layui-card-header .layui-form .layui-input {
    width: 160px;
}

html[data-skin="dark"] .layui-card-header .layui-form .layui-input {
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 13px;
}

html[data-skin="dark"] .layui-card-header .layui-form .layui-btn {
    height: 32px;
    line-height: 30px;
    padding: 0 14px;
    font-size: 13px;
}

html[data-skin="dark"] .layui-card-header .layui-form-item {
    margin-bottom: 8px;
}

html[data-skin="dark"] .layui-card-header .layui-form-item:last-child {
    margin-bottom: 0;
}

/* === layui card（业务页常用） === */
html[data-skin="dark"] .layui-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    margin-bottom: var(--space-4);
}

html[data-skin="dark"] .layui-card-header {
    background: var(--bg-3);
    color: var(--text-1);
    border-bottom: 1px solid var(--divider);
    font-size: var(--font-size-md);
    font-weight: 500;
    height: 48px;
    line-height: 48px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

html[data-skin="dark"] .layui-card-body {
    background: var(--bg-2);
    padding: var(--space-5);
    color: var(--text-1);
}

/* === 统一 list 页表格"宽度感"：含 table 的 card-body 不要 padding === */
html[data-skin="dark"] .skin-page .layui-card-body:has(> table),
html[data-skin="dark"] .skin-page .layui-card-body:has(> #lay-tableList),
html[data-skin="dark"] .skin-page .layui-card-body:has(.layui-table-view) {
    padding: 0;
}

/* === 消息中心：dark 下隐藏左侧"我的信箱"过滤 panel，让表格全宽 ===
 * 原 layui-col-md2 + layui-col-md10 双列让表格只占 83% 宽，跟其他 list 页不统一
 * dark 下隐藏左侧（#msgType 容器），右侧 col-md10 拉满 100% 宽
 * （消息过滤功能由表格顶部按钮组替代，不影响业务）
 */
html[data-skin="dark"] .skin-page .layui-row .layui-col-md2:has(#msgType) {
    display: none;
}

html[data-skin="dark"] .skin-page .layui-row .layui-col-md2:has(#msgType) + .layui-col-md10 {
    width: 100%;
    float: none;
}

/* === 统一 list 页 .layui-card 内 padding === */
html[data-skin="dark"] .skin-page > .layui-fluid > .layui-card,
html[data-skin="dark"] .skin-page .layui-row .layui-col-md10 > .layui-card {
    margin: 0;
}

/* === 强制所有 list 页 .layui-fluid / .layui-card / .layui-table-view 满宽 ===
 * 看到佣金发放日志只占右侧 60% 宽 — layui table.render 内部计算列宽时
 * 可能让 .layui-table-view 不撑满 .layui-card。强制 width: 100%
 */
html[data-skin="dark"] .skin-page .layui-fluid,
html[data-skin="dark"] .skin-page .layui-fluid > .layui-card,
html[data-skin="dark"] .skin-page .layui-card-body,
html[data-skin="dark"] .skin-page .layui-table-view,
html[data-skin="dark"] .skin-page .layui-table-view .layui-table,
html[data-skin="dark"] .skin-page .layui-table-view .layui-table-body,
html[data-skin="dark"] .skin-page .layui-table-view .layui-table-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* layui-table 内的 table 元素本身（被 .layui-table-body 包裹） */
html[data-skin="dark"] .skin-page .layui-table-body table,
html[data-skin="dark"] .skin-page .layui-table-header table {
    width: 100% !important;
}

/* === layui collapse（折叠面板） === */
html[data-skin="dark"] .layui-collapse {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

html[data-skin="dark"] .layui-colla-item {
    border-top: 1px solid var(--divider);
}

html[data-skin="dark"] .layui-colla-item:first-child {
    border-top: 0;
}

html[data-skin="dark"] .layui-colla-title {
    background: var(--bg-3);
    color: var(--text-1);
    height: 44px;
    line-height: 44px;
    padding: 0 var(--space-4) 0 var(--space-5);
}

html[data-skin="dark"] .layui-colla-title:hover {
    background: var(--bg-elevated);
}

html[data-skin="dark"] .layui-colla-icon {
    color: var(--text-2);
}

html[data-skin="dark"] .layui-colla-content {
    background: var(--bg-2);
    color: var(--text-1);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--divider);
}

/* === 图标基础色（在暗色背景下提升对比度） === */
html[data-skin="dark"] .layui-icon,
html[data-skin="dark"] .fa {
    color: inherit;
}

/* === 滚动加载/loading 圈（业务页面常见的 layui 加载动画占位） === */
html[data-skin="dark"] .layui-anim-loading {
    color: var(--primary);
}

/* === 业务页面通用容器（layui-fluid 内嵌时的微调） === */
html[data-skin="dark"] .layui-fluid > .skin-card:first-child,
html[data-skin="dark"] .layui-fluid > .skin-page:first-child {
    margin-top: 0;
}

/* === 表单页 site-title 区块（多见于 add/edit 复杂表单页） ===
 * 原 CSS 用 fieldset + legend 做分组标题，浅色 border-top + 大字号 legend。
 * 暗色下：border 变 var(--border)，legend 文字变 var(--text-1)，背景吸取 bg
 */
html[data-skin="dark"] .site-title {
    margin: 16px 0 20px;
}

html[data-skin="dark"] .site-title fieldset {
    border: 0;
    border-top: 1px solid var(--border);
    padding: 0;
}

html[data-skin="dark"] .site-title fieldset legend {
    color: var(--text-1);
    background: var(--bg-1);
    padding: 0 14px;
    font-size: 18px;
    font-weight: 500;
}

html[data-skin="dark"] .site-title fieldset legend a {
    color: var(--text-1);
    text-decoration: none;
}

html[data-skin="dark"] .site-title fieldset legend a:hover {
    color: var(--primary);
}

/* === 表单页 dark 模式下的卡片化容器（add.html / edit.html 用） === */
html[data-skin="dark"] .skin-page .layui-fluid {
    padding: 0;
    background: transparent;
}

html[data-skin="dark"] .skin-page .layui-fluid > form.layui-card,
html[data-skin="dark"] .skin-page .layui-fluid > .layui-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* === layui-input-prefix / -suffix（add.html 表单字段前后缀） ===
 *
 * layui 默认给 .layui-input-split 设了 border: 1px solid #d2d2d2，
 * 暗色背景下显示为白色边框（截图4 的"复制"小图标方框边框）。
 * 这里把 .layui-input-suffix / -prefix / -split 的 border、background、icon 颜色
 * 全部对齐到暗色：背景透明、左/右分隔线用 --border 暗色变量、图标用 --text-3。
 */
html[data-skin="dark"] .layui-input-prefix,
html[data-skin="dark"] .layui-input-split {
    color: var(--text-3);
}

/* split 默认 border 1px solid #d2d2d2 —— 暗色下统一改成 --border 不可见的暗色 */
html[data-skin="dark"] .layui-input-split {
    border-color: var(--border) !important;
    background: transparent !important;
}

/* 跟 input 同色的 suffix 容器（不可独立成白色块） */
html[data-skin="dark"] .layui-input-suffix,
html[data-skin="dark"] .layui-input-prefix {
    background: transparent !important;
}

/* suffix 内 icon 字色（默认 layui 是 #5f5f5f，暗色下提亮到 text-2） */
html[data-skin="dark"] .layui-input-suffix .layui-icon,
html[data-skin="dark"] .layui-input-prefix .layui-icon {
    color: var(--text-2);
}

/* add.html / edit.html 用 .copys 类（复制图标），统一字色和 hover */
html[data-skin="dark"] .layui-input-suffix.copys {
    cursor: pointer;
    transition: color var(--transition-fast);
}

html[data-skin="dark"] .layui-input-suffix.copys:hover .layui-icon,
html[data-skin="dark"] .layui-input-suffix.copys:hover {
    color: var(--primary);
}

/* add.html 中 inline style 写死了 success / error 图标的色（#16b777 / #ff5722），
 * 暗色下这些颜色对比可以，但跟整体语义色对齐到 --success / --danger。
 * 仅在 dark 模式下覆盖，老站点不受影响。
 */
html[data-skin="dark"] .layui-input-suffix .layui-icon-success,
html[data-skin="dark"] .layui-input-suffix .layui-icon[style*="#16b777"] {
    color: var(--success) !important;
}

html[data-skin="dark"] .layui-input-suffix .layui-icon-error,
html[data-skin="dark"] .layui-input-suffix .layui-icon[style*="#ff5722"] {
    color: var(--danger) !important;
}

html[data-skin="dark"] .layui-input-group {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

html[data-skin="dark"] .layui-input-group > .layui-input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* === layui-card 表单容器（productset / shop-setting 等） === */
html[data-skin="dark"] .layui-form.layui-card,
html[data-skin="dark"] form.layui-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-1);
}

/* === layui-bg-white（弹窗内的白底 form 容器） === */
html[data-skin="dark"] .layui-bg-white {
    background: var(--bg-2) !important;
    color: var(--text-1);
}

/* === layui-footer 表单底部按钮区（add.html 提交按钮区 / basecfg / tradecfg 等设置页） === */
html[data-skin="dark"] .layui-form-footer,
html[data-skin="dark"] .layui-footer.layui-form-item,
html[data-skin="dark"] .layui-footer,
html[data-skin="dark"] #layui-footer-btn {
    background: var(--bg-3);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 16px 20px;
    text-align: center;
    min-height: 64px;
    box-sizing: border-box;
}

/* footer 内按钮间距 */
html[data-skin="dark"] .layui-footer .layui-btn,
html[data-skin="dark"] #layui-footer-btn .layui-btn,
html[data-skin="dark"] .layui-form-footer .layui-btn {
    margin: 0 6px;
}

/* === layui-form-radio 标签 === */
html[data-skin="dark"] .layui-form-radio > span {
    color: var(--text-1);
}

/* === layui-form-label 标签字色（form 字段名） === */
html[data-skin="dark"] .layui-form-label {
    color: var(--text-2);
}

html[data-skin="dark"] .layui-form-label font[color="red"] {
    color: var(--danger) !important;
}

/* === layui-input-split 嵌入文字（input 前缀/后缀如 "g"、"%"） === */
html[data-skin="dark"] .layui-input-suffix .layui-icon {
    background: transparent;
}

/* === layui-form-mid 副文本（提亮到 text-2 而非 text-3，避免暗背景下对比度过低）=== */
html[data-skin="dark"] .layui-form-mid,
html[data-skin="dark"] .layui-word-aux {
    color: var(--text-2);
}

/* form-mid / word-aux 内部嵌套 font[color="red"] 提示文字（业务页面常见警示语）
 * 不希望被外层 var(--text-2) 覆盖，统一改成柔和的 danger
 */
html[data-skin="dark"] .layui-form-mid font[color="red"],
html[data-skin="dark"] .layui-word-aux font[color="red"] {
    color: var(--danger) !important;
}

/* === 消息中心铃铛 iframe（layui-instant-list） === */
html[data-skin="dark"] .layui-instant-list {
    background: transparent;
}

html[data-skin="dark"] .layui-instant-list-item {
    background: var(--bg-2);
    border-bottom: 1px solid var(--divider);
    color: var(--text-1);
    transition: background var(--transition-base);
}

html[data-skin="dark"] .layui-instant-list-item:hover {
    background: var(--bg-3);
}

html[data-skin="dark"] .layui-instant-list-item.active_0 {
    /* 未读：左侧高亮色条 */
    border-left: 3px solid var(--primary);
}

html[data-skin="dark"] .layui-instant-item-title {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-instant-item-text {
    color: var(--text-3);
}

html[data-skin="dark"] .layui-instant-list-empty {
    background: transparent;
    color: var(--text-3);
    padding: 64px 20px;
    text-align: center;
}

html[data-skin="dark"] .layui-instant-footer {
    background: var(--bg-3);
    border-top: 1px solid var(--border);
    padding: 12px 20px;
    text-align: center;
    color: var(--text-2);
}

html[data-skin="dark"] .layui-instant-footer a {
    color: var(--primary);
}

html[data-skin="dark"] .layui-instant-footer a:hover {
    color: var(--primary-active);
}

html[data-skin="dark"] .layui-instant-footer span {
    color: var(--text-3);
    margin: 0 10px;
}

/* === 顶部行情卡片（订单/锁价/结算/风控/客服等页面顶部的报价小卡片） ===
   原 DOM 结构：
   .quotes-item > .layui-card.smallblock > .layui-small-block > .title + .price
   .price 内有两个 <font color="green/red"> 标识买卖价
   设计目标：紧凑单行展示「商品名 + 买价 / 卖价」，整体高度 ~36px
*/
html[data-skin="dark"] .quotes-item .layui-card.smallblock,
html[data-skin="dark"] .layui-card.smallblock {
    background: rgba(20, 26, 46, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base), background var(--transition-base);
    box-shadow: none;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
}

html[data-skin="dark"] .quotes-item .layui-card.smallblock:hover {
    border-color: var(--primary);
    background: rgba(20, 26, 46, 0.85);
}

/* 行情卡片内部 layout — row 布局，单行紧凑展示
   覆盖 dashboard 的 .layui-small-block 通用规则 */
html[data-skin="dark"] .quotes-item .layui-small-block,
html[data-skin="dark"] .smallblock .layui-small-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    min-height: 0 !important;
}

/* 商品名 */
html[data-skin="dark"] .quotes-item .layui-small-block .title,
html[data-skin="dark"] .smallblock .layui-small-block .title {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 价格 */
html[data-skin="dark"] .quotes-item .layui-small-block .price,
html[data-skin="dark"] .smallblock .layui-small-block .price {
    font-size: 13px;
    font-weight: 600;
    font-family: "SF Mono", Consolas, Monaco, monospace;
    line-height: 1 !important;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 !important;
    white-space: nowrap;
}

/* 买卖价（绿/红）—— 覆盖 inline <font color="green/red"> */
html[data-skin="dark"] .quotes-item .price font[color="green"],
html[data-skin="dark"] .smallblock .price font[color="green"] {
    color: #16BE8C !important;
    font-variant-numeric: tabular-nums;
}

html[data-skin="dark"] .quotes-item .price font[color="red"],
html[data-skin="dark"] .smallblock .price font[color="red"] {
    color: #FF5C7C !important;
    font-variant-numeric: tabular-nums;
}

/* 行情容器整体压缩下边距：覆盖 inline style margin-bottom + 收紧 layui-col-space10 纵向 padding */
html[data-skin="dark"] .layui-row:has(.quotes-item) {
    margin-bottom: 1px !important;
}

html[data-skin="dark"] .layui-row.layui-col-space10:has(.quotes-item) > .quotes-item {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* === 打开新页面 iframe 加载期间的白底 === */
/* 原 style.css#1007:  .layui-carousel, .layadmin-carousel > [carousel-item] > * { background-color: #fff }
   这是 layadmin 切换 tab 时的容器，iframe 内页加载完成前用户看到的就是这个白色背景。
   覆盖为暗色背景，并让 iframe / swiftadmin-iframe 自身也使用暗色，加载白屏期间无视觉跳变。 */
html[data-skin="dark"] .layui-carousel,
html[data-skin="dark"] .layadmin-carousel > [carousel-item] > *,
html[data-skin="dark"] .layadmin-tabsbody-item,
html[data-skin="dark"] .layui-tab-content,
html[data-skin="dark"] .layui-tab-item {
    background-color: var(--bg-1) !important;
}

html[data-skin="dark"] iframe,
html[data-skin="dark"] .swiftadmin-iframe,
html[data-skin="dark"] .layadmin-tabsbody-item iframe {
    background-color: var(--bg-1);
}

/* === swiftadmin 自带的 iframe 加载遮罩 #loading（admin.js 动态注入） === */
/* 原 style.css#1952: #loading { background-color: #f2f2f2 } 浅灰底
   这是用户看到的"白色加载页"真正来源，覆盖为暗色 + 主色 spinner */
html[data-skin="dark"] #loading {
    background-color: var(--bg-1) !important;
}

html[data-skin="dark"] #loading .loader .ant-spin,
html[data-skin="dark"] #loading .loader .ant-spin-spinning {
    color: var(--primary) !important;
}

html[data-skin="dark"] #loading .loader .ant-spin-dot-item {
    background-color: var(--primary) !important;
    box-shadow: 0 0 6px var(--primary);
}

/* ============================================================
 * 业务模板内联硬编码字色兜底
 * ============================================================
 * 业务页面里大量 inline style="color:#333"、color:#000、color:#666 等
 * 在暗色背景下完全看不清。这里按 attribute selector 全局兜底替换：
 * - 深黑字（#000、#111、#222、#333、#444）→ 提亮到 var(--text-1)
 * - 中灰字（#666、#777、#888、#999、#aaa）→ 弱化到 var(--text-2)
 * - 浅灰字（#bbb、#ccc、#ddd、#eee）→ 弱化到 var(--text-3)
 * 同时覆盖常见的 rgba(0,0,0,*) 文字
 * 老站点不受影响（不在 data-skin="dark" 作用域）
 */
html[data-skin="dark"] [style*="color:#000"]:not(.layui-bg-black),
html[data-skin="dark"] [style*="color: #000"]:not(.layui-bg-black),
html[data-skin="dark"] [style*="color:#111"],
html[data-skin="dark"] [style*="color: #111"],
html[data-skin="dark"] [style*="color:#222"],
html[data-skin="dark"] [style*="color: #222"],
html[data-skin="dark"] [style*="color:#333"],
html[data-skin="dark"] [style*="color: #333"],
html[data-skin="dark"] [style*="color:#444"],
html[data-skin="dark"] [style*="color: #444"],
html[data-skin="dark"] [style*="color:#555"],
html[data-skin="dark"] [style*="color: #555"] {
    color: var(--text-1) !important;
}

html[data-skin="dark"] [style*="color:#666"],
html[data-skin="dark"] [style*="color: #666"],
html[data-skin="dark"] [style*="color:#777"],
html[data-skin="dark"] [style*="color: #777"],
html[data-skin="dark"] [style*="color:#888"],
html[data-skin="dark"] [style*="color: #888"] {
    color: var(--text-2) !important;
}

html[data-skin="dark"] [style*="color:#999"],
html[data-skin="dark"] [style*="color: #999"],
html[data-skin="dark"] [style*="color:#aaa"],
html[data-skin="dark"] [style*="color: #aaa"],
html[data-skin="dark"] [style*="color:#AAA"],
html[data-skin="dark"] [style*="color: #AAA"],
html[data-skin="dark"] [style*="color:#bbb"],
html[data-skin="dark"] [style*="color: #bbb"],
html[data-skin="dark"] [style*="color:#ccc"],
html[data-skin="dark"] [style*="color: #ccc"] {
    color: var(--text-3) !important;
}

/* HTML 老语法 <font color="..."> 兜底（业务页面常用） */
html[data-skin="dark"] font[color="#333"],
html[data-skin="dark"] font[color="#000"],
html[data-skin="dark"] font[color="#000000"],
html[data-skin="dark"] font[color="#333333"],
html[data-skin="dark"] font[color="black"] {
    color: var(--text-1) !important;
}

html[data-skin="dark"] font[color="#666"],
html[data-skin="dark"] font[color="#999"],
html[data-skin="dark"] font[color="gray"],
html[data-skin="dark"] font[color="grey"] {
    color: var(--text-2) !important;
}

/* 语义关键字色兜底：业务页面大量用 <font color="red"> 做警示，
 * 暗色下统一改成 --danger 柔和红，避免过度刺眼 */
html[data-skin="dark"] font[color="red"],
html[data-skin="dark"] font[color="#f00"],
html[data-skin="dark"] font[color="#ff0000"] {
    color: var(--danger) !important;
}

html[data-skin="dark"] font[color="green"],
html[data-skin="dark"] font[color="#0f0"],
html[data-skin="dark"] font[color="#00ff00"] {
    color: var(--success) !important;
}

html[data-skin="dark"] font[color="orange"],
html[data-skin="dark"] font[color="yellow"] {
    color: var(--warning) !important;
}

html[data-skin="dark"] font[color="blue"],
html[data-skin="dark"] font[color="#00f"],
html[data-skin="dark"] font[color="#0000ff"] {
    color: var(--info) !important;
}

/* inline color: rgba(0,0,0,*) 黑色透明文字兜底
 * 注意必须用 "color:" 前缀避免误匹配 border / background / box-shadow 的 rgba */
html[data-skin="dark"] [style*="color:rgba(0,0,0"],
html[data-skin="dark"] [style*="color: rgba(0,0,0"],
html[data-skin="dark"] [style*="color: rgba(0, 0, 0"] {
    color: var(--text-1) !important;
}

/* 表单 / 卡片 内 常见 inline 标题块（h1~h6 + b/strong 默认色） */
html[data-skin="dark"] .layui-card-body h1,
html[data-skin="dark"] .layui-card-body h2,
html[data-skin="dark"] .layui-card-body h3,
html[data-skin="dark"] .layui-card-body h4,
html[data-skin="dark"] .layui-card-body h5,
html[data-skin="dark"] .layui-card-body h6,
html[data-skin="dark"] .skin-card h1,
html[data-skin="dark"] .skin-card h2,
html[data-skin="dark"] .skin-card h3,
html[data-skin="dark"] .skin-card h4,
html[data-skin="dark"] .skin-card h5,
html[data-skin="dark"] .skin-card h6,
html[data-skin="dark"] .layui-card-body b,
html[data-skin="dark"] .layui-card-body strong {
    color: var(--text-1);
}

html[data-skin="dark"] .layui-card-body p,
html[data-skin="dark"] .layui-card-body span:not(.layui-badge):not([class*="layui-bg-"]):not([style*="color"]),
html[data-skin="dark"] .layui-card-body label:not(.layui-form-label) {
    color: inherit;
}

/* ============================================================
 * select placeholder vs 选中值 字色区分
 * ============================================================
 * layui select 内部用 readonly input；未选中时显示 placeholder 文本（::placeholder
 * 伪元素），选中后把值写入 input.value。
 * 默认 _forms.css 中 placeholder 用 --text-3，input 文字用 --text-1，理论已经分级。
 * 但浏览器 :placeholder-shown 状态下我们再叠加 opacity 让对比更明显，
 * 同时把选中值的字色明确强化（粗体感）：
 */
html[data-skin="dark"] .layui-form-select .layui-input::placeholder,
html[data-skin="dark"] .layui-form-select .layui-input::-webkit-input-placeholder {
    color: var(--text-3) !important;
    opacity: 1;
    font-style: normal;
}

/* placeholder 显示态下，input 整体看起来更弱（避免出现 input 值已被填但仍灰） */
html[data-skin="dark"] .layui-form-select .layui-input:placeholder-shown {
    color: var(--text-3);
    font-weight: 400;
}

/* 已选中真实值时：字色用主文本色，略加字重，跟 placeholder 拉开层级 */
html[data-skin="dark"] .layui-form-select .layui-input:not(:placeholder-shown) {
    color: var(--text-1);
    font-weight: 500;
}

/* layui 把第一项 "请选择 / 全部" 这种默认占位 option 渲染为 select 的初始 value
 * 时（option value=""），input 仍是 :placeholder-shown，能命中上面规则。
 * 但当 option value="0" 且 text="全部分类"被选中时，input 有值 — 此时希望 placeholder 弱化效果失效，
 * 直接用 var(--text-1) 主色。这点上面 :not(:placeholder-shown) 已经覆盖。
 */

/* ============================================================
 * Tab 右键菜单暗色化（layui dropdown 渲染的 .layui-menu） ===
 * ============================================================
 * 主框架 Tab 上右键弹出"刷新当前 / 关闭当前 / 关闭其他 / 关闭全部"，
 * 由 admin.js#2499 的 dropdown.render 渲染，DOM 结构是
 * <div class="layui-dropdown"><ul class="layui-menu"><li class="layui-menu-item-parent">...</li></ul></div>
 * 之前 patches 写的是 .layui-dropdown-menu —— 但实际 layui 用的是 .layui-menu，
 * 所以右键菜单仍是白底黑字（截图3）。
 */
html[data-skin="dark"] .layui-dropdown {
    background: transparent;
    /* layui-dropdown 自身是容器，背景由内部 .layui-menu 提供 */
}

html[data-skin="dark"] .layui-dropdown > .layui-menu,
html[data-skin="dark"] .layui-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    color: var(--text-1);
    padding: var(--space-2) 0;
    margin: 0;
}

html[data-skin="dark"] .layui-menu li {
    color: var(--text-1);
    line-height: 32px;
    padding: 0;
    margin: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

html[data-skin="dark"] .layui-menu li:hover {
    background: var(--bg-3);
    color: var(--primary);
}

html[data-skin="dark"] .layui-menu .layui-menu-body-title {
    color: inherit;
    margin: 0;
    padding: 0 var(--space-4);
    font-size: var(--font-size-sm);
}

html[data-skin="dark"] .layui-menu .layui-menu-body-title a {
    color: inherit;
    margin: 0;
    padding: 0;
}

html[data-skin="dark"] .layui-menu .layui-menu-body-title a:hover {
    color: var(--primary);
}

/* 选中（layui-menu-item-checked）项 */
html[data-skin="dark"] .layui-menu .layui-menu-item-checked,
html[data-skin="dark"] .layui-menu .layui-menu-item-checked2 {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}

html[data-skin="dark"] .layui-menu .layui-menu-item-checked a,
html[data-skin="dark"] .layui-menu .layui-menu-item-checked2 a {
    color: var(--primary) !important;
}

html[data-skin="dark"] .layui-menu .layui-menu-item-checked:after {
    border-right-color: var(--primary) !important;
}

/* 禁用 / 分隔线 */
html[data-skin="dark"] .layui-menu .layui-menu-item-divider {
    border-bottom-color: var(--divider) !important;
}

html[data-skin="dark"] .layui-menu li.layui-disabled,
html[data-skin="dark"] .layui-menu .layui-menu-item-none {
    color: var(--text-3) !important;
}

/* dropdown shade 透明遮罩（关闭点击区） */
html[data-skin="dark"] .layui-dropdown-shade {
    background: transparent;
}

/* ============================================================
 * layui.transfer 穿梭框暗色覆盖（导出弹窗用）
 * ============================================================
 * 用于 app/admin/view/export/xlsx.html — 订单/用户列表的"导出"按钮弹窗，
 * 内部用 layui.transfer 渲染双 panel 穿梭框。默认 layui 样式 transfer-box
 * 是 #fff 白底 + #eee 边框 —— 在 dark 皮的 layer 弹窗里：
 *   - box 背景默认是白，但 _patches.css 其他规则没有覆盖它，理论应该是白色块
 *   - 实际渲染 transfer 时 layui 把 box 当 layui-form 子元素，受 form 内 input
 *     美化干扰，加上 layer-content 的 var(--bg-elevated) 父级背景，部分子元素
 *     表现为透明 → 看起来 box 同色融进背景，右 panel "导出字段" 几乎看不见
 *
 * 解决：给整套 transfer 子组件显式上暗色变量
 */
html[data-skin="dark"] .layui-transfer {
    background: transparent;
    color: var(--text-1);
}

html[data-skin="dark"] .layui-transfer-box {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    color: var(--text-1);
}

/* panel 头（"未选中字段 / 导出字段"标题栏） */
html[data-skin="dark"] .layui-transfer-header {
    background: var(--bg-3);
    color: var(--text-1);
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 0 12px;
    height: 38px;
    line-height: 38px;
    font-weight: 500;
}

/* panel 内全选 checkbox 与 layui-form-checkbox 在 header 内的对齐 */
html[data-skin="dark"] .layui-transfer-header .layui-form-checkbox {
    color: var(--text-1);
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
}

html[data-skin="dark"] .layui-transfer-header .layui-form-checkbox > i {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
}

/* 搜索框 */
html[data-skin="dark"] .layui-transfer-search {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border) !important;
    padding: 10px;
}

html[data-skin="dark"] .layui-transfer-search .layui-input {
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    color: var(--text-1);
    height: 32px;
    line-height: 30px;
}

html[data-skin="dark"] .layui-transfer-search .layui-icon-search {
    color: var(--text-3);
}

/* 数据列表 */
html[data-skin="dark"] .layui-transfer-data {
    background: var(--bg-input);
    color: var(--text-1);
}

html[data-skin="dark"] .layui-transfer-data li {
    color: var(--text-1);
    padding: 0 12px;
    line-height: 32px;
    height: 32px;
    transition: background var(--transition-fast);
}

html[data-skin="dark"] .layui-transfer-data li:hover {
    background: var(--bg-3) !important;
    transition: none;
}

/* 列表里的 layui-form-checkbox（每条数据项前的复选框，lay-skin="primary"）
 *
 * 之前 _forms.css 中 .layui-form-checkbox[lay-skin="primary"] 设了
 * line-height: 1.5 / height: auto / padding-left: 24px —— 这在普通表单里 OK，
 * 但在 transfer-data li (height: 32px) 里会让 checkbox 高度 21px 撑不满 li，
 * i 偏上，文字垂直没居中。这里专门给 transfer 内的 checkbox 重新对齐：
 *
 * - height 32px / line-height 32px 跟 li 同高
 * - 维持 layui 默认 padding-left: 28px（给 i 留空，不让 i 盖住文字第一个字符）
 * - i 用 top: 50% + margin-top 居中
 * - 暗色字色 + 边框 + checked 态主色
 */
html[data-skin="dark"] .layui-transfer-data li .layui-form-checkbox[lay-skin="primary"],
html[data-skin="dark"] .layui-transfer-data li .layui-form-checkbox {
    background: transparent !important;
    height: 32px !important;
    line-height: 32px !important;
    padding-left: 28px !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
}

html[data-skin="dark"] .layui-transfer-data li .layui-form-checkbox > div {
    color: var(--text-1) !important;
    background: transparent !important;
    line-height: 32px !important;
    padding-right: 8px !important;
    margin-top: 0 !important;
}

html[data-skin="dark"] .layui-transfer-data li .layui-form-checkbox > i {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-strong) !important;
    color: transparent;
    width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    top: 50% !important;
    margin-top: -8px !important;
}

html[data-skin="dark"] .layui-transfer-data li .layui-form-checked > i,
html[data-skin="dark"] .layui-transfer-data li .layui-form-checkbox.layui-form-checked > i {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* transfer-header 内的全选 checkbox 也用同样规则保持高度一致 */
html[data-skin="dark"] .layui-transfer-header .layui-form-checkbox[lay-skin="primary"] {
    height: 38px !important;
    line-height: 38px !important;
    padding-left: 28px !important;
    margin: 0 !important;
}

html[data-skin="dark"] .layui-transfer-header .layui-form-checkbox > div {
    line-height: 38px !important;
    margin-top: 0 !important;
}

html[data-skin="dark"] .layui-transfer-header .layui-form-checkbox > i {
    top: 50% !important;
    margin-top: -8px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
}

/* 无数据态 */
html[data-skin="dark"] .layui-transfer-data .layui-none {
    color: var(--text-3);
    background: transparent;
}

/* 中间穿梭按钮区 */
html[data-skin="dark"] .layui-transfer-active {
    margin: 0 12px;
}

html[data-skin="dark"] .layui-transfer-active .layui-btn {
    background: var(--bg-3);
    border: 1px solid var(--border-strong);
    color: var(--text-2);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

html[data-skin="dark"] .layui-transfer-active .layui-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}

html[data-skin="dark"] .layui-transfer-active .layui-btn-disabled,
html[data-skin="dark"] .layui-transfer-active .layui-btn-disabled:hover {
    background: var(--bg-2) !important;
    border-color: var(--border) !important;
    color: var(--text-3) !important;
    cursor: not-allowed;
}

html[data-skin="dark"] .layui-transfer-active .layui-btn .layui-icon {
    color: inherit;
}

/* ============================================================
 * 打印窗口强制白底黑字（不能跟随暗色皮，否则打印预览/出纸全黑）
 * ============================================================
 * 涉及 6 个打印模板：
 *   - app/admin/view/customer/customer/userprint.html       客户持单明细
 *   - app/admin/view/customer/customer/userverifyorder.html 客户对账单
 *   - app/admin/view/shop/order/print.html                  订单打印
 *   - app/admin/view/shop/order/userprint.html              客户全仓打印
 *   - app/admin/view/shop/order/userprintlock.html          客户锁价打印
 *   - app/admin/view/shop/order/checkout-print.html         结算打印
 * 共同特征：内有 <div class="layui-card-body" id="order">（业务页 #order 是
 * hidden input，不是 card-body，所以 .layui-card-body#order 精确命中打印窗口）
 *
 * 用 :has() 让 body / html 在含有该容器时整体切回浅色：
 *   - 主背景白
 *   - 内部所有文字黑（覆盖 inline #333/#000 的兜底规则，也覆盖外层 layui-card 暗背景）
 *   - 仅工具按钮区 .layui-form-footer / .btnss 维持 layui 默认浅色（已属浅色组件）
 */
html[data-skin="dark"]:has(.layui-card-body#order),
html[data-skin="dark"] body:has(.layui-card-body#order) {
    background: #fff !important;
    color: #000 !important;
}

html[data-skin="dark"] body:has(.layui-card-body#order) .layui-fluid,
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-card,
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-form,
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-card-body,
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-tab,
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-tab-content,
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-tab-item {
    background: #fff !important;
    color: #000 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* 打印模板内的纯文字 div / span / p / td / th 一律黑字
 * （盖掉前面 attribute selector 把 #333/#000 强制改成 var(--text-1) 的兜底规则）
 */
html[data-skin="dark"] body:has(.layui-card-body#order) #order,
html[data-skin="dark"] body:has(.layui-card-body#order) #order *,
html[data-skin="dark"] body:has(.layui-card-body#order) #order [style*="color"] {
    color: #000 !important;
}

/* 表格边框还原到黑色 1px solid（不能用 --border 暗色） */
html[data-skin="dark"] body:has(.layui-card-body#order) #order table,
html[data-skin="dark"] body:has(.layui-card-body#order) #order th,
html[data-skin="dark"] body:has(.layui-card-body#order) #order td {
    background: #fff !important;
    border-color: #000 !important;
}

/* 打印窗口顶部 Tab（userprint.html "全仓/锁价" 两个 Tab）维持浅色 */
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-tab-title,
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-tab-title li {
    background: #fff !important;
    color: #333 !important;
    border-color: #e6e6e6 !important;
}

html[data-skin="dark"] body:has(.layui-card-body#order) .layui-tab-title li.layui-this {
    color: #16baaa !important;
}

/* 底部"打印 / 关闭"按钮区（layui-form-footer / .btnss）维持 layui 默认 */
html[data-skin="dark"] body:has(.layui-card-body#order) .layui-form-footer,
html[data-skin="dark"] body:has(.layui-card-body#order) .btnss {
    background: #fff !important;
    border-top: 1px solid #e6e6e6 !important;
}

html[data-skin="dark"] body:has(.layui-card-body#order) .layui-form-footer .layui-btn,
html[data-skin="dark"] body:has(.layui-card-body#order) .btnss .layui-btn {
    color: #fff !important;
}

/* @media print 阶段：浏览器实际打印时再强制一次，确保不会被任何残留暗色规则覆盖 */
@media print {
    html[data-skin="dark"]:has(.layui-card-body#order),
    html[data-skin="dark"] body:has(.layui-card-body#order),
    html[data-skin="dark"] body:has(.layui-card-body#order) * {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}