@charset "utf-8";
/* ==========================================================================
   左侧菜单 · 动感增强（MenuMotionStyle.css）
   --------------------------------------------------------------------------
   作用：给 home 左侧菜单（DevExtreme Menu / TreeView）增加
         ① 底色   —— 悬停/选中时高亮底色「从左侧滑入」，取代原来的整块突变
         ② 动感   —— 统一缓动、图标微放大染色、文字微位移、右缘指示条渐亮
         ③ 层次   —— 面板淡渐变、顶部分组装饰条、右缘柔和投影、滚动条美化

   作用范围：第 1-11 节只命中「.layout-container 里的 .dx-drawer 面板」（与
             LayoutStyle.css 自身的写法一致）。已核对：.layout-container 只在首页
             出现，其余几处 layout-container-home / -xxx 是不同类名、不会命中，
             且那些页面没有抽屉。不改变原有 130px 宽度与各项高度。

             第 12-16 节把范围扩展到「首页的内容区」与「二级菜单弹层」—— 这两处
             都不在 .layout-container 的子树里（前者是面板的兄弟分支，后者被
             DevExtreme 挂到 <body> 下），靠 HomeIndex.js 的 xmMirrorTheme() 把主题
             镜像成 <html class="xm-home xm-theme-*"> 之后才够得到；范围仍严格限定
             在首页：业务页签是 <iframe class="XC_iframe"> 独立文档，不受影响。
   主题兼容：项目有 4 套主题（默认白 / #f3f5f6 灰 / #2980b9 蓝 / #292929 黑），
             主题类由 applyTreeColor() 直接加在 .dx-drawer-panel-content 自身，
             本文件按主题切换强调色与高亮底色，不会把主题体系搞乱。

   顺带修正一个现状缺陷：菜单的「选中态」四套主题下都是同一块半透明灰
   rgba(224,224,224,.87)（DevExtreme 默认），而悬停态才是跟随主题的，
   于是蓝/黑主题下选中项是一块浅灰、且选中还不如悬停明显；本文件统一为
   跟随主题、且比悬停更重一层。

   回退方式：删掉 _Layout.cshtml 里对本文件的 <link> 即完全复原。
             （可选）给 .layout-container-leftMenu 加 xm-boost 类可启用更强动感。
   ========================================================================== */


/* ==========================================================================
   0. 设计参数 —— 想调颜色/速度只改这一块
   --------------------------------------------------------------------------
   时序令牌（--xm-dur / --xm-ease）必须定义在 :root：
   子菜单弹层是 DevExtreme 的 overlay，会挂到 <body> 下，不在 .layout-container
   里面；若只把变量定义在 .layout-container 上，弹层读不到变量，
   var() 替换失败会让整条 animation 声明在计算值阶段失效 —— 静默不生效，
   排查起来很费事（踩过）。颜色变量则可以继续按容器/主题分层。
   ========================================================================== */
:root {
    --xm-dur:  .22s;                    /* 交互动效时长 */
    --xm-ease: cubic-bezier(.22, .61, .36, 1);  /* 先快后缓，手感顺 */
}

.layout-container {
    --xm-accent:      #00a8ff;                 /* 主强调色（沿用项目原蓝） */
    --xm-accent2:     #14c9d6;                 /* 渐变副色（青） */
    --xm-accent-mid:  rgba(0, 168, 255, .55);  /* 悬停时的指示条（比选中的淡一档） */
    --xm-hi:          rgba(0, 168, 255, .13);  /* 悬停底色 · 左端 */
    --xm-hi2:         rgba(0, 168, 255, 0);    /* 悬停底色 · 右端（渐隐到透明，方向感更明确） */
    --xm-sel:         rgba(0, 168, 255, .10);  /* 选中在悬停之上再叠一层，做「更重」 */
    --xm-glow:        rgba(0, 168, 255, .55);  /* 右缘指示条光晕 */
}

/* --- 三套主题各自的强调色 / 高亮底色 --- */
.dx-theme-treeView-color-gray .layout-container-leftMenu {
    --xm-accent:     #5c95c6;
    --xm-accent2:    #8ec3e8;
    --xm-accent-mid: rgba(92, 149, 198, .55);
    --xm-hi:         rgba(92, 149, 198, .15);
    --xm-hi2:        rgba(92, 149, 198, 0);
    --xm-sel:        rgba(92, 149, 198, .11);
    --xm-glow:       rgba(92, 149, 198, .50);
}

.dx-theme-treeView-color-blue .layout-container-leftMenu {
    --xm-accent:     #7fd0f0;
    --xm-accent2:    #b6ecff;
    --xm-accent-mid: rgba(127, 208, 240, .55);
    --xm-hi:         rgba(255, 255, 255, .15);
    --xm-hi2:        rgba(255, 255, 255, 0);
    --xm-sel:        rgba(255, 255, 255, .11);
    --xm-glow:       rgba(182, 236, 255, .60);
}

.dx-theme-treeView-color-black .layout-container-leftMenu {
    --xm-accent:     #d8d8d8;
    --xm-accent2:    #9a9a9a;
    --xm-accent-mid: rgba(216, 216, 216, .50);
    --xm-hi:         rgba(255, 255, 255, .10);
    --xm-hi2:        rgba(255, 255, 255, 0);
    --xm-sel:        rgba(255, 255, 255, .08);
    --xm-glow:       rgba(216, 216, 216, .45);
}


/* ==========================================================================
   1. 面板：底色渐变 + 右缘柔和投影
   注意：applyTreeColor() 会给面板设「内联 background-color」来切主题，
        内联色优先级最高，所以这里只用 background-image 叠加，
        让主题底色照常透出来，不会把主题色洗掉。
   ========================================================================== */
.layout-container .dx-drawer .dx-drawer-panel-content {
    background-image: linear-gradient(180deg, rgba(0, 168, 255, .045) 0, rgba(0, 168, 255, 0) 130px);
    background-repeat: no-repeat;
    border-right: 1px solid rgba(0, 168, 255, .16);
    box-shadow: 1px 0 10px rgba(16, 58, 96, .05);
    transition: background-color .3s ease;
}

/* 深色主题改用白色顶光，避免蓝色渐变在深底上发脏。
   注意：主题类是直接加在 .dx-drawer-panel-content 自身（applyTreeColor 里
   $colorTreeView = drawer.$element().find(".dx-drawer-panel-content")），
   所以这里必须用「同类名连写」；写成 .dx-theme-xxx .dx-drawer-panel-content
   这种后代形式是匹配不到的（踩过这个坑）。 */
.layout-container .dx-drawer .dx-drawer-panel-content.dx-theme-treeView-color-blue,
.layout-container .dx-drawer .dx-drawer-panel-content.dx-theme-treeView-color-black {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, 0) 130px);
    border-right-color: rgba(255, 255, 255, .12);
    box-shadow: 1px 0 10px rgba(0, 0, 0, .18);
}


/* ==========================================================================
   2. 顶部分组（「我的」快捷区）上沿装饰条 —— 载入时从左「生长」出来
   ========================================================================== */
.layout-container-leftMenu .first_todoList {
    position: relative;
}

.layout-container-leftMenu .first_todoList::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--xm-accent), var(--xm-accent2));
    transform-origin: left center;
    animation: xm-bar-in .5s var(--xm-ease) both;
    pointer-events: none;
}

@keyframes xm-bar-in {
    from { transform: scaleX(0); opacity: .25; }
    to   { transform: scaleX(1); opacity: .9;  }
}


/* ==========================================================================
   3. 菜单项本体：底色「滑入」+ 右缘指示条「渐亮」
   --------------------------------------------------------------------------
   两层 background-image 叠加，靠 background-size 逐层推入：
     第一层（--xm-hi） ：悬停就推满
     第二层（--xm-sel）：只有选中才推满，于是「选中」比「悬停」更重一层
   background-size 是可动画属性，所以两层都能平滑过渡，不会出现硬闪。
   右缘指示条用 inset box-shadow 画（阴影不占布局，杜绝「走位」）。
   ========================================================================== */
.layout-container-leftMenu .dx-menu .dx-menu-item,
.layout-container-leftMenu .dx-treeview .dx-treeview-item {
    background-image: linear-gradient(90deg, var(--xm-hi) 0%, var(--xm-hi2) 100%),
                      linear-gradient(90deg, var(--xm-sel) 0%, rgba(0, 0, 0, 0) 100%);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%, 0% 100%;
    box-shadow: inset -3px 0 0 0 rgba(0, 0, 0, 0);
    transition: background-size var(--xm-dur) var(--xm-ease),
                box-shadow    var(--xm-dur) var(--xm-ease),
                color         var(--xm-dur) var(--xm-ease);
}

/* 悬停 / 子菜单展开态：第一层推满，指示条用「淡一档」的强调色 */
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-hover,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-expanded,
.layout-container-leftMenu .dx-treeview .dx-treeview-item.dx-state-hover {
    background-size: 100% 100%, 0% 100%;
    background-color: transparent !important;
    border-right-color: transparent !important;
    box-shadow: inset -3px 0 0 0 var(--xm-accent-mid),
                inset -16px 0 12px -12px var(--xm-glow);
}

/* 选中项：两层都推满（底色更重），指示条用足色，一眼可见「我在哪一页」 */
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-selected,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-selected {
    background-size: 100% 100%, 100% 100%;
    background-color: transparent !important;
    border-right-color: transparent !important;
    box-shadow: inset -3px 0 0 0 var(--xm-accent),
                inset -18px 0 14px -13px var(--xm-glow);
}


/* ==========================================================================
   4. 图标：悬停/选中时轻微放大并染成强调色
   ========================================================================== */
.layout-container-leftMenu .dx-menu .dx-menu-item .dx-icon,
.layout-container-leftMenu .dx-treeview .dx-treeview-item .dx-icon {
    transform-origin: left center;
    transition: transform var(--xm-dur) var(--xm-ease),
                color     var(--xm-dur) var(--xm-ease);
}

.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-hover .dx-icon,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-expanded .dx-icon,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-selected .dx-icon,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-selected .dx-icon {
    transform: scale(1.14);
    color: var(--xm-accent) !important;
}

/* LayoutStyle.css 里有一条硬编码的
   .layout-container-leftMenu .dx-menu .dx-state-hover.dx-menu-item.dx-menu-item-has-text.dx-menu-item-has-icon .dx-icon
   { color: #00a8ff !important; }，权重同为 0,7,0。本文件在其之后加载，
   这里把类名链补全到同等权重即可反超，让悬停图标跟随当前主题的强调色
   （否则蓝/黑主题下会跳出刺眼的亮蓝）。 */
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-hover.dx-menu-item-has-text.dx-menu-item-has-icon .dx-icon,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-expanded.dx-menu-item-has-text.dx-menu-item-has-icon .dx-icon,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-selected.dx-menu-item-has-text.dx-menu-item-has-icon .dx-icon {
    color: var(--xm-accent) !important;
}


/* ==========================================================================
   5. 文字：悬停/选中时微微右移，像被「推」了一下
   ========================================================================== */
.layout-container-leftMenu .dx-menu .dx-menu-item .dx-menu-item-content,
.layout-container-leftMenu .dx-treeview .dx-treeview-item .dx-treeview-item-content {
    transition: transform var(--xm-dur) var(--xm-ease);
}

.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-hover .dx-menu-item-content,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-expanded .dx-menu-item-content,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-menu-item-selected .dx-menu-item-content,
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-selected .dx-menu-item-content,
.layout-container-leftMenu .dx-treeview .dx-treeview-item.dx-state-hover .dx-treeview-item-content {
    transform: translateX(2px);
}

/* 按下的一瞬间轻轻回缩，给出「按到了」的反馈 */
.layout-container-leftMenu .dx-menu .dx-menu-item.dx-state-active .dx-menu-item-content {
    transform: scale(.985);
    transition-duration: .06s;
}


/* ==========================================================================
   6. 子菜单展开箭头：悬停/展开时右移并染色
   ========================================================================== */
.layout-container-leftMenu .dx-menu-item-has-submenu .dx-item-content.dx-menu-item-content::after {
    transition: transform var(--xm-dur) var(--xm-ease),
                color     var(--xm-dur) var(--xm-ease);
}

.layout-container-leftMenu .dx-menu-item-has-submenu.dx-state-hover .dx-item-content.dx-menu-item-content::after,
.layout-container-leftMenu .dx-menu-item-has-submenu.dx-menu-item-expanded .dx-item-content.dx-menu-item-content::after {
    transform: translateX(2px);
    color: var(--xm-accent);
}


/* ==========================================================================
   7. 子菜单弹层：把 DevExtreme 自带的那一下淡入拉长一点、曲线调顺
   --------------------------------------------------------------------------
   两个必须知道的约束（都实测过）：
   ① 弹层是 DevExtreme 的 overlay，DOM 层级是
        .dx-overlay-wrapper > .dx-overlay-content.dx-context-menu > .dx-submenu
      （.dx-submenu 是 content 的子元素，不是它本身）；
   ② 定位靠「内联 transform: translate(x, y)」，且内联写了 transition: none。
      而 CSS 动画的优先级高于内联声明 —— 一旦动画里出现 transform，
      弹层会被拉到 translate(0,0)、也就是跳到左上角。所以这里只能动 opacity。
   ========================================================================== */
@keyframes xm-menu-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dx-overlay-wrapper .dx-overlay-content.dx-context-menu {
    animation: xm-menu-fade .16s var(--xm-ease) both;
}


/* ==========================================================================
   8. 滚动条美化（菜单项多时出现）—— 细一点、带主题色，不再是一根灰棍
   ========================================================================== */
.layout-container-leftMenu::-webkit-scrollbar {
    width: 6px;
}

.layout-container-leftMenu::-webkit-scrollbar-track {
    background: transparent;
}

.layout-container-leftMenu::-webkit-scrollbar-thumb {
    background: rgba(0, 168, 255, .26);
    border-radius: 3px;
}

.layout-container-leftMenu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 168, 255, .48);
}


/* ==========================================================================
   9. 可选 · 更强动感（默认关闭）
   启用方式：给 .layout-container-leftMenu 追加 xm-boost 类，
             即 <div class="layout-container-leftMenu xm-boost">
   效果：选中项带一条缓慢「呼吸」的光晕，存在感更强。
   ========================================================================== */
.layout-container-leftMenu.xm-boost .dx-menu .dx-menu-item.dx-menu-item-selected,
.layout-container-leftMenu.xm-boost .dx-menu .dx-menu-item.dx-state-selected {
    animation: xm-breath 2.6s ease-in-out infinite;
}

@keyframes xm-breath {
    0%, 100% {
        box-shadow: inset -3px 0 0 0 var(--xm-accent),
                    inset -18px 0 14px -13px var(--xm-glow);
    }
    50% {
        box-shadow: inset -3px 0 0 0 var(--xm-accent),
                    inset -28px 0 18px -12px var(--xm-glow);
    }
}

/* 无障碍：系统开启「减少动态效果」时，把动效全部关掉，只保留配色 */
@media (prefers-reduced-motion: reduce) {
    .layout-container-leftMenu .first_todoList::before,
    .layout-container-leftMenu .dx-menu .dx-menu-item,
    .layout-container-leftMenu .dx-menu .dx-menu-item .dx-icon,
    .layout-container-leftMenu .dx-menu .dx-menu-item .dx-menu-item-content,
    .layout-container-leftMenu .dx-treeview .dx-treeview-item,
    .layout-container-leftMenu.xm-boost .dx-menu .dx-menu-item.dx-menu-item-selected,
    .dx-overlay-wrapper .dx-overlay-content.dx-context-menu {
        animation: none !important;
        transition: none !important;
    }
}
/* ============================================================
   10. 主题快捷色点（免编译入口，2026-09-18）
   背景：Index.cshtml:340-351 的原生「主题颜色」下拉按钮被 Razor 注释掉，
   而 colorpicker-template / onColorClick / applyXxxColor 等下游逻辑全部健在，
   只是没有任何入口。此处在顶部左侧 logo 旁注入一排 4 色圆点，
   DOM 由 HomeIndex.js 的 xmBuildThemeDots() 动态生成，本文件只负责外观。
   改动只涉及 wwwroot 静态文件，无需 dotnet build。
   ============================================================ */

.layout-nav .xm-theme-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    line-height: 0;
    vertical-align: middle;
}

.layout-nav .xm-theme-dots > i {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    /* 双层描边：外深内浅，保证白/灰/蓝/黑四种导航底色下都看得见 */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .22),
                inset 0 0 0 1px rgba(255, 255, 255, .55);
    transition: transform .18s cubic-bezier(.22, .61, .36, 1),
                box-shadow .18s cubic-bezier(.22, .61, .36, 1);
}

.layout-nav .xm-theme-dots > i:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3),
                inset 0 0 0 1px rgba(255, 255, 255, .75),
                0 0 0 4px rgba(0, 168, 255, .16);
}

/* 当前生效的主题：外白圈 + 深色外环，任何底色上都清晰 */
.layout-nav .xm-theme-dots > i.xm-on {
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 3px rgba(0, 0, 0, .35),
                inset 0 0 0 1px rgba(255, 255, 255, .55);
}

/* 深色导航底（蓝/黑主题）：描边反过来，避免外层深描边糊进深色背景 */
.layout-nav.dx-theme-menuIcon-color-blue .xm-theme-dots > i,
.layout-nav.dx-theme-menuIcon-color-black .xm-theme-dots > i {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45),
                inset 0 0 0 1px rgba(0, 0, 0, .3);
}

.layout-nav.dx-theme-menuIcon-color-blue .xm-theme-dots > i.xm-on,
.layout-nav.dx-theme-menuIcon-color-black .xm-theme-dots > i.xm-on {
    box-shadow: 0 0 0 2px #ffffff,
                0 0 0 3px rgba(0, 0, 0, .5),
                inset 0 0 0 1px rgba(0, 0, 0, .3);
}

/* 小屏（<=1199px）顶部工具栏会折行，色点隐藏，避免挤乱布局 */
@media screen and (max-width: 1199px) {
    .layout-nav .xm-theme-dots {
        display: none;
    }
}

/* 无障碍：系统开启「减少动态效果」时关掉缩放过渡 */
@media (prefers-reduced-motion: reduce) {
    .layout-nav .xm-theme-dots > i {
        transition: none !important;
    }

    .layout-nav .xm-theme-dots > i:hover {
        transform: none;
    }
}
/* ============================================================
   11. 切主题时顶部导航/Tab 与左侧面板同步过渡
   上一节给 .dx-drawer-panel-content 加了 background-color .3s ease，
   但顶部导航 / Tab 是瞬变，切主题时会出现「面板渐变、顶部闪一下」的
   割裂感。这里把同一段过渡补到它们身上，让整屏换色步调一致。
   ============================================================ */

.layout-nav,
.layout-nav .dx-toolbar-after,
.layout-container .dx-drawer .dx-tabs {
    transition: background-color .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .layout-nav,
    .layout-nav .dx-toolbar-after,
    .layout-container .dx-drawer .dx-tabs {
        transition: none !important;
    }
}
/* ============================================================
   12. 主题镜像 · 变量表（2026-09-18）
   ------------------------------------------------------------
   需求原文：「外面是黑色，里面是灰色，这样搭配非常不协调，是否可以把里面
   灰色的区域部分，也能和外围的这 4 个样式一起变化？」

   查证：切主题时只有 4 处会跟着变 ——
     ① 左侧菜单面板 .dx-drawer-panel-content
     ② 顶部导航 #layout-nav_theme / .dx-toolbar-after
     ③ Tab 条 .dx-tabs
     ④ 内容区外壳 .dx-multiview-item-content（applyDrawerBackgroundColor）
   而 ④ 其实从来没生效过，被三层写死的浅色盖住了：
     · LayoutStyle.css:471  .layout-container-right .dx-multiview-item
                            .dx-multiview-item-content { background:#eef5f9 !important }
     · AIDashboard.cshtml:5   body { background-color:#eef5f9 }
     · AIDashboard.cshtml:14  .aiDashboard_container { background-color:#eef5f9 }
   于是黑主题下面板/导航是 #292929、内容区却仍是 #eef5f9。
   另外「二级菜单弹层」被 DevExtreme 挂到 <body> 下，连 .layout-container 都不在
   它里面，原本第 3-6 节的后代选择器写不到它。

   解法：HomeIndex.js 的 xmMirrorTheme() 把主题镜像到根元素
     <html class="xm-home xm-theme-white|gray|blue|black">
   本文件用 html.xm-theme-* 统一驱动「内容区」与「二级菜单弹层」。
   白/灰/蓝保持浅色系（原设计如此），只有黑主题整体转深色。

   ★ 想调色只改这一节 ★ 每套主题一组变量，别处不要再写死颜色。
   弹层的 --xm-pop-bg 取「与左侧面板同色」，这样二级菜单看起来就是
   一级菜单弹出来的一列，而不是一块白色浮层。
   ============================================================ */

:root,
html.xm-theme-white {
    /* 内容区 */
    --xm-canvas:     #eef5f9;   /* 内容区底色（= 现状，保持不变） */
    --xm-card:       #ffffff;   /* 中/大卡片底 */
    --xm-card-bd:    #e5e7eb;
    --xm-card-fg:    #141e31;
    --xm-grid:       #ffffff;   /* 卡片内 dxDataGrid */
    --xm-grid-head:  #ffffff;   /* 表头 */
    --xm-grid-fg:    #333333;   /* 单元格文字 */
    --xm-grid-line:  #e4e4e4;   /* 网格线 */
    --xm-grid-alt:   #fafafa;   /* 隔行底色 */
    /* 二级菜单弹层 */
    --xm-pop-bg:     #ffffff;
    --xm-pop-fg:     #141e31;
    --xm-pop-bd:     rgba(0, 0, 0, .12);
    /* 弹层用的强调色/高亮底色：取值与第 0 节面板那一套一致 */
    --xm-accent:      #00a8ff;
    --xm-accent2:     #14c9d6;
    --xm-accent-mid:  rgba(0, 168, 255, .55);
    --xm-hi:          rgba(0, 168, 255, .13);
    --xm-hi2:         rgba(0, 168, 255, 0);
    --xm-sel:         rgba(0, 168, 255, .10);
    --xm-glow:        rgba(0, 168, 255, .55);
    /* Tab 条（第 17 节）：四个色值都与 applyDrawerTabPanelColor() 写的内联色一致 */
    --xm-tab-strip:   #ffffff;
}

html.xm-theme-gray {
    --xm-canvas:     #e9ecef;
    --xm-card:       #ffffff;
    --xm-card-bd:    #e5e7eb;
    --xm-card-fg:    #141e31;
    --xm-grid:       #ffffff;
    --xm-grid-head:  #ffffff;
    --xm-grid-fg:    #333333;
    --xm-grid-line:  #e4e4e4;
    --xm-grid-alt:   #fafafa;
    --xm-pop-bg:     #f3f5f6;
    --xm-pop-fg:     #768399;
    --xm-pop-bd:     rgba(0, 0, 0, .12);
    --xm-accent:      #5c95c6;
    --xm-accent2:     #8ec3e8;
    --xm-accent-mid:  rgba(92, 149, 198, .55);
    --xm-hi:          rgba(92, 149, 198, .15);
    --xm-hi2:         rgba(92, 149, 198, 0);
    --xm-sel:         rgba(92, 149, 198, .11);
    --xm-glow:        rgba(92, 149, 198, .50);
    --xm-tab-strip:   #f3f5f6;
}

html.xm-theme-blue {
    --xm-canvas:     #e9f0f7;
    --xm-card:       #ffffff;
    --xm-card-bd:    #dde6ef;
    --xm-card-fg:    #141e31;
    --xm-grid:       #ffffff;
    --xm-grid-head:  #ffffff;
    --xm-grid-fg:    #333333;
    --xm-grid-line:  #e0e6ec;
    --xm-grid-alt:   #f7fafd;
    --xm-pop-bg:     #2980b9;   /* 与左侧面板同色 */
    --xm-pop-fg:     #ffffff;
    --xm-pop-bd:     rgba(0, 0, 0, .18);
    --xm-accent:      #7fd0f0;
    --xm-accent2:     #b6ecff;
    --xm-accent-mid:  rgba(127, 208, 240, .55);
    --xm-hi:          rgba(255, 255, 255, .15);
    --xm-hi2:         rgba(255, 255, 255, 0);
    --xm-sel:         rgba(255, 255, 255, .11);
    --xm-glow:        rgba(182, 236, 255, .60);
    --xm-tab-strip:   #2980b9;
}

html.xm-theme-black {
    --xm-canvas:     #1f1f1f;   /* 比左侧面板 #292929 略深，做出层次 */
    --xm-card:       #2a2a2a;
    --xm-card-bd:    #3a3a3a;
    --xm-card-fg:    #e6e6e6;
    --xm-grid:       #262626;
    --xm-grid-head:  #303030;
    --xm-grid-fg:    #d9d9d9;
    --xm-grid-line:  #3d3d3d;
    --xm-grid-alt:   #2c2c2c;
    --xm-pop-bg:     #292929;   /* 与左侧面板同色 */
    --xm-pop-fg:     #c5c5c5;
    --xm-pop-bd:     rgba(255, 255, 255, .14);
    --xm-accent:      #d8d8d8;
    --xm-accent2:     #9a9a9a;
    --xm-accent-mid:  rgba(216, 216, 216, .50);
    --xm-hi:          rgba(255, 255, 255, .10);
    --xm-hi2:         rgba(255, 255, 255, 0);
    --xm-sel:         rgba(255, 255, 255, .08);
    --xm-glow:        rgba(216, 216, 216, .45);
    /* Tab 条与页签（第 17 节）—— 深色主题下这几条才真正起作用 */
    --xm-tab-strip:   #292929;          /* 与左侧面板同色 */
    --xm-tab-line:    #3a3a3a;          /* Tab 条下沿分隔线（原来是 #e0e0e0） */
    --xm-tab-fg:      #a9a9a9;          /* 未选中页签文字 */
    --xm-tab-fg-hi:   #e6e6e6;          /* 悬停/聚焦文字 */
    --xm-tab-hover:   rgba(255, 255, 255, .08);
    --xm-tab-sel-bg:  #3a3a3a;          /* 选中页签底（原来是 #eeeeee） */
    --xm-tab-sel-fg:  #ffffff;
    --xm-tab-sel-line:#d8d8d8;          /* 选中页签底部 2px 指示条 */
    --xm-card-hover:  #333333;          /* 卡片悬停底（原来是 #d1e7ff） */
    --xm-card-hover-bd:#4a4a4a;
}


/* ============================================================
   13. 内容区底色跟随主题
   ------------------------------------------------------------
   权重说明（必须遵守，否则静默不生效）：
   LayoutStyle.css:471 那条是 background-color:#eef5f9 !important，
   权重 (0,3,0) 且带 !important；JS 的 applyDrawerBackgroundColor 写的是
   内联样式。所以这里必须 ① 带 !important，② 权重不低于 (0,3,0)。
   下面 .layout-container-right .dx-multiview-item .dx-multiview-item-content
   配合 html.xm-home 达到 (0,4,1)，稳超。
   作用范围已核对：xm-home 只出现在首页（HomeIndex.js 仅被 Index.cshtml 引入），
   业务页签是 iframe 独立文档。
   ============================================================ */
html.xm-home,
html.xm-home > body,
html.xm-home .layout-container,
html.xm-home .layout-container .dx-drawer-wrapper,
html.xm-home .layout-container .dx-drawer-content,
html.xm-home #layout-container-drawer-scrollview,
html.xm-home .layout-container-right,
html.xm-home .layout-container-right .dx-multiview-item .dx-multiview-item-content,
html.xm-home .aiDashboard_container {
    background-color: var(--xm-canvas) !important;
    transition: background-color .3s ease;
}


/* ============================================================
   14. 黑色主题下的卡片与卡片内报表
   ------------------------------------------------------------
   只作用于 html.xm-theme-black —— 白/灰/蓝三套一行都不碰，
   所以那三套的观感与改动前完全一致（变量值就是现状值）。
   注意：卡片内标题在 AIDashboard.cshtml:610 是 inline 的 color:#333，
   内联权重最高，只能靠 !important 压过去。
   ============================================================ */

/* 卡片壳（小卡片是 inline 彩色底 background:${bgColor}，内联优先，
   天然不受影响；这里只针对中/大卡片，也正是那两块「白板」） */
html.xm-theme-black .aiDashboard_container .middle_card ul li.dashboard-item,
html.xm-theme-black .aiDashboard_container .bigger_card ul li.dashboard-item {
    background-color: var(--xm-card);
    border: 1px solid var(--xm-card-bd);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* 卡片标题：源码是 inline color:#333 */
html.xm-theme-black .aiDashboard_container .card-content h6 {
    color: var(--xm-card-fg) !important;
}

/* 卡片右上角的「⤢」全屏按钮（源码 background:#f0f5ff） */
html.xm-theme-black .aiDashboard_container .middle_card button,
html.xm-theme-black .aiDashboard_container .bigger_card button {
    background: rgba(255, 255, 255, .10);
    color: var(--xm-card-fg);
}

/* 卡片内 dxDataGrid：只换底色/文字/网格线，不碰任何交互逻辑 */
html.xm-theme-black .aiDashboard_container .dx-datagrid,
html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-datagrid-content,
html.xm-theme-black .aiDashboard_container .dx-datagrid-rowsview,
html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-datagrid-table,
html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-datagrid-table .dx-row > td {
    background-color: var(--xm-grid);
    color: var(--xm-grid-fg);
}

html.xm-theme-black .aiDashboard_container .dx-datagrid-headers,
html.xm-theme-black .aiDashboard_container .dx-datagrid-headers .dx-datagrid-table {
    background-color: var(--xm-grid-head);
    color: var(--xm-grid-fg);
}

/* 表头单元格的文字色必须带 !important：
   DevExtreme 自带
     .dx-datagrid .dx-datagrid-table .dx-header-row > td { color:#212529 !important; }
   （实测命中规则里带 important），深色主题下不这样写就压不过它，
   结果是黑底上一行几乎看不见的深灰表头字。背景色它没设，所以不用 !important。 */
html.xm-theme-black .aiDashboard_container .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    background-color: var(--xm-grid-head);
    color: var(--xm-grid-fg) !important;
}

/* 网格线（DevExtreme 用 border-* 画，要一并改，否则深底上仍是浅灰线） */
html.xm-theme-black .aiDashboard_container .dx-datagrid-borders > .dx-datagrid-headers,
html.xm-theme-black .aiDashboard_container .dx-datagrid-borders > .dx-datagrid-rowsview,
html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-datagrid-table .dx-row > td,
html.xm-theme-black .aiDashboard_container .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-color: var(--xm-grid-line) !important;
}

/* 隔行底色 / 悬停行 / 表头排序图标 */
html.xm-theme-black .aiDashboard_container .dx-datagrid-rowsview .dx-row-alt > td {
    background-color: var(--xm-grid-alt);
}

html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-datagrid-table .dx-row.dx-state-hover > td {
    background-color: rgba(255, 255, 255, .06);
}

html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-column-indicators,
html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-column-indicators .dx-sort,
html.xm-theme-black .aiDashboard_container .dx-datagrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor-input {
    color: var(--xm-grid-fg);
}


/* ============================================================
   15. 二级菜单弹层：跟一级菜单同一套样式（2026-09-18）
   ------------------------------------------------------------
   需求原文：「二级菜单 也要跟着一级菜单的样式」。
   为什么原来够不到：弹层是 DevExtreme 的 overlay，DOM 上被挂到 <body> 下，
   而第 3-6 节的样式全部限定在 .layout-container-leftMenu 里。
   范围界定：首页总共只有 2 个 Menu 组件 —— Views/Home/Index.cshtml:501 的
   firstTodoMenu 与 :553 的 menuListId，两个都是左侧菜单的；业务页签是
   <iframe> 独立文档。所以用 html.xm-home 限定，就已经精确等于
   「首页左侧菜单的二级/三级菜单弹层」，不会误伤别处。
   结构（实测）：.dx-overlay-wrapper > .dx-overlay-content.dx-context-menu
                 .dx-menu-base > .dx-submenu > .dx-menu-item
   动效与一级菜单一致：底色自左滑入 + 指示条 + 图标微放大染色 + 文字微位移。
   唯一区别是指示条放在「左缘」：弹层是新开出的一列，左缘才是它的行首，
   也和右缘的「还有下一级」箭头互不打架。
   ============================================================ */

/* 弹层容器：底色 = 左侧面板同色（见第 12 节说明），描边/阴影跟随主题 */
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu {
    background-color: var(--xm-pop-bg);
    border: 1px solid var(--xm-pop-bd);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* 内层别自己铺白底，交给上面的容器统一控色 */
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-submenu,
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-items-container {
    background-color: transparent;
}

/* 弹层里的菜单项：文字色 + 两层底色（悬停推第一层、选中两层都推满） */
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item {
    color: var(--xm-pop-fg);
    background-image: linear-gradient(90deg, var(--xm-hi) 0%, var(--xm-hi2) 100%),
                      linear-gradient(90deg, var(--xm-sel) 0%, rgba(0, 0, 0, 0) 100%);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%, 0% 100%;
    box-shadow: inset 3px 0 0 0 rgba(0, 0, 0, 0);
    transition: background-size var(--xm-dur) var(--xm-ease),
                box-shadow    var(--xm-dur) var(--xm-ease),
                color         var(--xm-dur) var(--xm-ease);
}

html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-state-hover,
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-menu-item-expanded {
    background-size: 100% 100%, 0% 100%;
    background-color: transparent !important;
    box-shadow: inset 3px 0 0 0 var(--xm-accent-mid),
                inset 16px 0 12px -12px var(--xm-glow);
    color: var(--xm-pop-fg);
}

html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-menu-item-selected,
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-state-selected {
    background-size: 100% 100%, 100% 100%;
    background-color: transparent !important;
    box-shadow: inset 3px 0 0 0 var(--xm-accent),
                inset 18px 0 14px -13px var(--xm-glow);
}

/* 图标：悬停/选中微放大并染强调色 */
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item .dx-icon {
    transform-origin: left center;
    transition: transform var(--xm-dur) var(--xm-ease),
                color     var(--xm-dur) var(--xm-ease);
}

html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-state-hover .dx-icon,
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-menu-item-expanded .dx-icon,
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-menu-item-selected .dx-icon {
    transform: scale(1.14);
    color: var(--xm-accent) !important;
}

/* 文字微位移 */
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item .dx-menu-item-content {
    transition: transform var(--xm-dur) var(--xm-ease);
}

html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-state-hover .dx-menu-item-content,
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-menu-item-expanded .dx-menu-item-content {
    transform: translateX(2px);
}

/* 「还有下一级」的右向箭头：只染颜色 + 悬停右移，不写 content，
   避免和 DevExtreme 自带的箭头叠成两个（LayoutStyle.css:361 那条是给
   一级菜单用的，作用域在 .layout-container-leftMenu 里，够不到弹层）。 */
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item-has-submenu .dx-item-content.dx-menu-item-content::after {
    color: var(--xm-pop-fg);
    transition: transform var(--xm-dur) var(--xm-ease),
                color     var(--xm-dur) var(--xm-ease);
}

html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item-has-submenu.dx-state-hover .dx-item-content.dx-menu-item-content::after,
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item-has-submenu.dx-menu-item-expanded .dx-item-content.dx-menu-item-content::after {
    transform: translateX(2px);
    color: var(--xm-accent);
}

/* 弹层滚动条（子项多时出现） */
html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-submenu::-webkit-scrollbar {
    width: 6px;
}

html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-submenu::-webkit-scrollbar-track {
    background: transparent;
}

html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-submenu::-webkit-scrollbar-thumb {
    background: var(--xm-accent-mid);
    border-radius: 3px;
}


/* ============================================================
   16. 首页卡片的右键菜单（.dashboard-context-menu）跟随主题
   ------------------------------------------------------------
   它也是「里面那块」，原来写死白底/深字，深色主题下会跳出来。
   放在最后、用 :not(.delete) 保住「删除」那行的红色。
   ============================================================ */
html.xm-home .dashboard-context-menu {
    background: var(--xm-pop-bg);
    border-color: var(--xm-pop-bd);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

html.xm-home .dashboard-context-menu div:not(.delete) {
    color: var(--xm-pop-fg);
}

html.xm-home .dashboard-context-menu div:not(.delete):hover {
    background: var(--xm-hi);
}


/* ============================================================
   17. Tab 条与「页签」跟随主题（含菜单新开出来的页签）（2026-09-19）
   ------------------------------------------------------------
   用户反馈原文：
     「1、打开菜单的这个tab没变样式
       2、菜单新打开的也没变样式」

   查证（截图像素采样 + DevExtreme 样式表逐条核对）：第 12-16 节管住了
   「内容区」与「二级菜单弹层」，但页签是另一条独立链路，它身上有三处
   跟主题无关的写死浅色 ——

     ① DevExtreme 自带 `.dx-tabpanel .dx-tabs { border-bottom:1px solid #e0e0e0 }`
        权重 (0,2,0)。深色主题下这是横贯整条 Tab 的一条亮线（实测 #e0e0e0）。
     ② DevExtreme 自带 `.dx-tab { background-color:#fff; color:rgba(0,0,0,.54) }`
        权重 (0,1,0)。★ **未选中的页签是纯白底** —— 「菜单新打开的那个页签」
        以及它旁边那个变成未选中的「首页」，深色主题下一律还是白的。
        这就是「菜单新打开的也没变样式」。
     ③ LayoutStyle.css:565 `.dx-theme-drawerTabPanel-color-black .dx-tab.dx-tab-selected`
        给了 `background-color:#eeeeee !important`（权重 (0,3,0)）—— 浅灰底。
        深色主题下就是用户截图里箭头指的那块亮板。

   ★ 这一节只用 CSS，不加任何 JS 钩子：主题类挂在 `.dx-tabs` 这个**祖先**上，
     新开出来的页签作为它的后代天然命中。DevExtreme 重新渲染 Tab 条也不会
     失效 —— 这正是「菜单新打开的」那条能被一次覆盖的原因。
   ★ 顺带把 Tab 条自身底色也写进 CSS（各主题取 --xm-tab-strip，值与原
     applyDrawerTabPanelColor() 写的内联色完全一致）。这样即便 DevExtreme
     在增删页签时把 .dx-tabs 元素换掉、内联样式丢失，整条 Tab 依然是主题色，
     白/灰/蓝/黑四套都不会退回浅色。
   ★ 页签文字配色只对黑色主题重写（白/灰/蓝三套的页签配色本来就协调），
     选择器权重写到 (0,5,1)+!important，压过上面 ①②③ 三条。
   ============================================================ */

/* 17.1 Tab 条自身底色：与 applyDrawerTabPanelColor() 写的内联色同一个值，
        纯粹是为了「重渲染也不丢」。四套主题都写，值都跟原内联色一致。 */
html.xm-theme-white .layout-container-right .dx-tabpanel .dx-tabs {
    background-color: var(--xm-tab-strip) !important;
}

html.xm-theme-gray .layout-container-right .dx-tabpanel .dx-tabs {
    background-color: var(--xm-tab-strip) !important;
}

html.xm-theme-blue .layout-container-right .dx-tabpanel .dx-tabs {
    background-color: var(--xm-tab-strip) !important;
}

html.xm-theme-black .layout-container-right .dx-tabpanel .dx-tabs {
    background-color: var(--xm-tab-strip) !important;
}

/* 17.2 Tab 条下沿那条 1px 亮线（DevExtreme 默认 #e0e0e0） */
html.xm-theme-black .layout-container-right .dx-tabpanel .dx-tabs {
    border-bottom-color: var(--xm-tab-line) !important;
}

/* 17.3 未选中的页签：DevExtreme 默认「白底 + 半透明黑字」，
        深色底上是一块白板，且字几乎看不见。
        ★ 新开出来的页签就走这条规则。 */
html.xm-theme-black .layout-container-right .dx-tabs .dx-tab {
    background-color: transparent !important;
    color: var(--xm-tab-fg) !important;
    transition: background-color .18s ease, color .18s ease;
}

    html.xm-theme-black .layout-container-right .dx-tabs .dx-tab .dx-icon {
        color: var(--xm-tab-fg) !important;
    }

/* 17.4 悬停 / 键盘聚焦 */
html.xm-theme-black .layout-container-right .dx-tabs .dx-tab.dx-state-hover,
html.xm-theme-black .layout-container-right .dx-tabs .dx-tab.dx-state-focused {
    background-color: var(--xm-tab-hover) !important;
    color: var(--xm-tab-fg-hi) !important;
}

/* 17.5 选中页签：压过 LayoutStyle.css:565 的 #eeeeee !important */
html.xm-theme-black .layout-container-right .dx-tabs .dx-tab.dx-tab-selected,
html.xm-theme-black .layout-container-right .dx-tabs .dx-tab.dx-tab-selected .dx-icon {
    background-color: var(--xm-tab-sel-bg) !important;
    color: var(--xm-tab-sel-fg) !important;
}

    /* 选中页签底部那条 2px 指示条（DevExtreme 用 ::before 画） */
    html.xm-theme-black .layout-container-right .dx-tabs .dx-tab.dx-tab-selected::before {
        background-color: var(--xm-tab-sel-line) !important;
    }

/* 17.6 页签上的关闭/刷新小图标，以及页签溢出时的左右翻页按钮
        （TabPanel 配了 ShowNavButtons(true)，页签多了才出现） */
html.xm-theme-black .layout-container-right .dx-tabs .dx-icon-close,
html.xm-theme-black .layout-container-right .dx-tabs .dx-icon-refresh,
html.xm-theme-black .layout-container-right .dx-tabs-nav-button {
    color: var(--xm-tab-fg) !important;
}

    html.xm-theme-black .layout-container-right .dx-tabs .dx-icon-close:hover,
    html.xm-theme-black .layout-container-right .dx-tabs .dx-icon-refresh:hover,
    html.xm-theme-black .layout-container-right .dx-tabs-nav-button:hover {
        background-color: var(--xm-tab-hover) !important;
        color: var(--xm-tab-fg-hi) !important;
    }

/* 17.7 深色主题下首页卡片的悬停态
        AIDashboard.cshtml:81 的 :hover 是「#d1e7ff 浅蓝底 !important +
        opacity:.8」。压在 #1f1f1f 上会算成 #adbfd2 一块发白的淡紫蓝，
        卡片标题几乎看不清（用户截图里左侧那张"亮"卡片就是它，不是缺陷，
        是鼠标正停在上面）。深色主题改成「深一档 + 不透明」。
        权重：(0,6,2) > AIDashboard 的 (0,3,2)。 */
html.xm-theme-black .aiDashboard_container ul li.dashboard-item:hover {
    background-color: var(--xm-card-hover) !important;
    border-color: var(--xm-card-hover-bd) !important;
    opacity: 1 !important;
}

/* 无障碍：减少动态效果时，本节新增的过渡一并关掉 */
@media (prefers-reduced-motion: reduce) {
    html.xm-theme-black .layout-container-right .dx-tabs .dx-tab,
    html.xm-theme-black .aiDashboard_container ul li.dashboard-item {
        transition: none !important;
    }
}

/* 无障碍：系统开启「减少动态效果」时，第 12-17 节新增的动效同样全关 */
@media (prefers-reduced-motion: reduce) {
    html.xm-home,
    html.xm-home > body,
    html.xm-home .layout-container,
    html.xm-home .layout-container .dx-drawer-wrapper,
    html.xm-home .layout-container .dx-drawer-content,
    html.xm-home #layout-container-drawer-scrollview,
    html.xm-home .layout-container-right,
    html.xm-home .layout-container-right .dx-multiview-item .dx-multiview-item-content,
    html.xm-home .aiDashboard_container,
    html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item,
    html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item .dx-icon,
    html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item .dx-menu-item-content {
        transition: none !important;
    }

    html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-state-hover .dx-menu-item-content,
    html.xm-home .dx-overlay-wrapper .dx-overlay-content.dx-context-menu .dx-menu-item.dx-state-hover .dx-icon {
        transform: none;
    }
}

/* ==========================================================================
   18. 业务页（页签里的 iframe）跟随主题
   --------------------------------------------------------------------------
   现象：按黑色样式时，外壳（顶部导航 / 左侧菜单 / 页签条）都变黑了，但点菜单
         新开出来的业务界面（锁价合同、质检出货……）整页还是白的 —— 内外两截色。

   根因：业务页是 <iframe class="XC_iframe"> 的**独立文档**，外壳的 CSS 够不到它；
         而本文件第 12-17 节的规则全部限定在 html.xm-home 上，业务页的 <html>
         上没有这个类，一条都不命中。所以它一直保持出厂浅色。

   做法：由外壳（HomeIndex.js 的 xmApplyThemeToBusinessPages）给每个业务 iframe 的
         <html> 挂上 xm-embed + xm-theme-{white|gray|blue|black}；样式写在本节。
         业务页本来就会加载本文件（_Layout.cshtml 第 51 行已有 <link>），
         所以不需要往 iframe 里注入 <style>，也不动任何 .cshtml。

   范围：本节所有规则都以 html.xm-embed 打头。业务页单独打开（不在外壳里）时没有
         这个类，一行都不会命中 —— 对直接访问业务页、打印页零影响。

   回退：把 HomeIndex.js 里 onColorClick() 末尾那句 xmApplyThemeToBusinessPages()
         注释掉，业务页立刻恢复原样（本节规则随之全部失效）。
   ========================================================================== */

/* 18.1 调色板
       画布色与第 12 节的 --xm-canvas 逐值对齐，业务页与外壳内容区就是同一个底色，
       不会出现"外面深灰、里面浅灰"的分界。四套主题各一组，下面的规则只引用变量。 */
html.xm-embed {
    --xb-canvas: #eef5f9;
    --xb-surface: #ffffff;
    --xb-surface-2: #fafafa;
    --xb-toolbar: #ffffff;
    --xb-fg: #212529;
    --xb-fg-strong: #141e31;
    --xb-fg-dim: #757575;
    /* 浮层底部「好 / 取消」这类纯文字按钮用的强调色（第3批需求5）。
       DevExtreme 原本给 #03A9F4，压在 #fafafa 上对比只有 2.5:1，偏淡；
       浅色主题改用深一档的蓝，深色主题见 xm-theme-black 的 #4fc3f7。 */
    --xb-accent: #1565c0;
    --xb-line: #e0e0e0;
    --xb-line-soft: #ededed;
    --xb-input-bg: #ffffff;
    --xb-input-line: #dddddd;
    --xb-alt-row: #f5f5f5;
    --xb-filter-row: #fafafa;
    --xb-row-hover: #eef4ff;
    --xb-row-selected: #dcefff;
    --xb-hover-veil: rgba(0, 0, 0, .04);
    --xb-scroll-thumb: #c1c1c1;
    --xb-scroll-track: #f9f9fd;
}

html.xm-embed.xm-theme-white {
    --xb-canvas: #eef5f9;
}

html.xm-embed.xm-theme-gray {
    --xb-canvas: #e9ecef;
    --xb-surface-2: #f7f8f9;
    --xb-line: #d8dcdf;
    --xb-line-soft: #e9ecef;
    --xb-input-line: #d5dade;
    --xb-alt-row: #f4f5f6;
    --xb-filter-row: #f7f8f9;
    --xb-row-hover: #e6ecf2;
    --xb-row-selected: #d7e6f5;
}

html.xm-embed.xm-theme-blue {
    --xb-canvas: #e9f0f7;
    --xb-surface-2: #f4f8fb;
    --xb-toolbar: #f4f8fb;
    --xb-line: #d3dfea;
    --xb-line-soft: #e6eef6;
    --xb-input-line: #cfdae6;
    --xb-alt-row: #f2f7fb;
    --xb-filter-row: #f4f8fb;
    --xb-row-hover: #e3eefb;
    --xb-row-selected: #d3e5f8;
}

html.xm-embed.xm-theme-black {
    --xb-canvas: #1f1f1f;
    --xb-surface: #2a2a2a;
    --xb-surface-2: #303030;
    --xb-toolbar: #2a2a2a;
    --xb-fg: #e6e6e6;
    --xb-fg-strong: #dcdcdc;
    --xb-fg-dim: #a9a9a9;
    --xb-accent: #4fc3f7;
    --xb-line: #3d3d3d;
    --xb-line-soft: #383838;
    --xb-input-bg: #333333;
    --xb-input-line: #4a4a4a;
    --xb-alt-row: #262626;
    --xb-filter-row: #303030;
    --xb-row-hover: #333333;
    --xb-row-selected: #2f4c6b;
    --xb-hover-veil: rgba(255, 255, 255, .06);
    --xb-scroll-thumb: #5a5a5a;
    --xb-scroll-track: #232323;
}

/* 18.2 画布与页面根
       body 是 DevExtreme 之外的最大一块白底（业务页 _Layout 里没有 <body>，
       浏览器解析时自动包一层），不压住它，其余元素再深也是白板。 */
html.xm-embed,
html.xm-embed > body,
html.xm-embed .iframe_container,
html.xm-embed .iframe_container-table,
html.xm-embed .iframe_container .bottom-section {
    background-color: var(--xb-canvas) !important;
}

html.xm-embed > body,
html.xm-embed .iframe_container {
    color: var(--xb-fg);
}

/* 18.3 公共工具栏（新增/删除/修改/打印……那一条）
       它有一份内联样式在 Views/Shared/PublicToolbar.cshtml 里写死了
       「按钮文字/图标 #141e31」「搜索框底 #eef5f9」「total_result 灰」，
       这里用 (0,3,0) 及以上权重反超；搜索框那条原样式带 !important。 */
html.xm-embed .layout-container-toolbar,
html.xm-embed .layout-container-toolbar-iconbar,
html.xm-embed .layout-container-toolbar .dx-toolbar,
html.xm-embed .layout-container-toolbar .dx-toolbar-items-container,
html.xm-embed .layout-container-toolbar-search_box {
    background-color: var(--xb-toolbar) !important;
}

html.xm-embed .layout-container-toolbar {
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .layout-container-toolbar-iconbar .dx-button-text,
html.xm-embed .layout-container-toolbar-iconbar .dx-button-mode-text .dx-icon,
html.xm-embed .layout-container-toolbar-iconbar .total_result {
    color: var(--xb-fg) !important;
}

html.xm-embed .layout-container-toolbar-iconbar .total_result {
    color: var(--xb-fg-dim) !important;
}

/* 搜索框：原样式是 .layout-container-toolbar-search_box .dx-button-has-text .dx-button-content
   { background:#fff !important; color: rgb(117 117 117 / 87%) !important } */
html.xm-embed .layout-container-toolbar-search_box .dx-button-has-text .dx-button-content {
    background-color: var(--xb-input-bg) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .layout-container-toolbar-search_box .dx-texteditor,
html.xm-embed .layout-container-toolbar-search_box .dx-placeholder {
    color: var(--xb-fg) !important;
}

/* 有色按钮（默认蓝 / 危险红 / 成功绿）的文字保持原样，别被上面的 fg 冲掉。
   ★ 2026-09-20（第3批）需求5：白字只能给「实心底」按钮（dx-button-mode-contained）。
   原来这条不区分按钮模式，把 dx-button-mode-text（透明底、靠文字色表达）的按钮
   文字也一起刷成纯白 —— 表头筛选下拉底部的「好 / 取消」正是 dx-button-mode-text，
   于是白字 + #fafafa 底 = 完全看不见（CDP 实测：.dx-button-text color = rgb(255,255,255)，
   浮层底部条背景 = rgb(250,250,250)）。
   黑色主题下浮层底部是 #303030，白字反而看得见，所以这个坑只在白 / 灰 / 蓝三套主题暴露。
   去掉模式限制后，mode-text 按钮的文字色回到 DevExtreme 的强调色（见下面 popup-bottom 那条）。 */
html.xm-embed .dx-button.dx-button-default.dx-button-mode-contained .dx-button-text,
html.xm-embed .dx-button.dx-button-danger.dx-button-mode-contained .dx-button-text,
html.xm-embed .dx-button.dx-button-success.dx-button-mode-contained .dx-button-text,
html.xm-embed .dx-button.dx-button-default.dx-button-mode-contained .dx-icon,
html.xm-embed .dx-button.dx-button-danger.dx-button-mode-contained .dx-icon,
html.xm-embed .dx-button.dx-button-success.dx-button-mode-contained .dx-icon {
    color: #ffffff !important;
}

/* 工具条与普通按钮的文字/图标：DevExtreme 默认 rgba(0,0,0,.87)，压在深色底上等于看不见。
   有色按钮（默认蓝 / 危险红 / 成功绿）在上一条里已排除，它们的白字不受影响。 */
html.xm-embed .dx-toolbar,
html.xm-embed .dx-toolbar-items-container,
html.xm-embed .layout-container-toolbar .dx-button,
html.xm-embed .layout-container-toolbar .dx-button-content,
html.xm-embed .layout-container-toolbar .dx-button .dx-icon,
html.xm-embed .dx-button:not(.dx-button-default):not(.dx-button-danger):not(.dx-button-success),
html.xm-embed .dx-button:not(.dx-button-default):not(.dx-button-danger):not(.dx-button-success) .dx-button-content,
html.xm-embed .dx-button:not(.dx-button-default):not(.dx-button-danger):not(.dx-button-success) .dx-icon,
html.xm-embed .dx-button:not(.dx-button-default):not(.dx-button-danger):not(.dx-button-success) .dx-button-text {
    color: var(--xb-fg) !important;
}

/* 有边框的普通按钮（弹窗里的取消按钮等）：浅色底要跟着换成深色输入面 */
html.xm-embed .dx-button-mode-contained:not(.dx-button-default):not(.dx-button-danger):not(.dx-button-success) {
    background-color: var(--xb-input-bg) !important;
    border-color: var(--xb-input-line) !important;
}

/* 工具栏的溢出菜单（layout-container-toolbar-popupBox） */
html.xm-embed .layout-container-toolbar-popupBox .dx-popup-content,
html.xm-embed .layout-container-toolbar-popupBox .dx-toolbar {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

/* 18.4 查询条件区（#List_Head 是一个 dxForm） */
html.xm-embed #List_Head,
html.xm-embed .dx-form,
html.xm-embed .dx-form .dx-field-item-label-text,
html.xm-embed .dx-form .dx-field-item-help-text,
html.xm-embed .dx-form .dx-field-item-content {
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-form .dx-field-item-label-text {
    color: var(--xb-fg-strong) !important;
}

/* 18.5 数据网格 —— 表头 / 行 / 选中 / 悬停 / 隔行 / 汇总 / 分页 / 空数据 / 网格线
       DevExtreme 浅色主题里写死的值（已逐条核对 dx.material.blue.light.css）：
        .dx-datagrid{color:rgba(0,0,0,.87);background-color:#fff}
        .dx-datagrid-headers .dx-datagrid-table .dx-row > td{border-bottom:1px solid #e0e0e0}
        .dx-datagrid .dx-row-alt > td{background-color:#f5f5f5}
        .dx-datagrid-filter-row{background-color:#fafafa}
        .dx-datagrid-rowsview .dx-selection…>td{background-color:rgba(3,169,244,.04)}
        .dx-datagrid-borders > …{border:1px solid #e0e0e0} */
html.xm-embed .dx-datagrid,
html.xm-embed .dx-gridbase-container,
html.xm-embed .dx-datagrid .dx-datagrid-rowsview,
html.xm-embed .dx-datagrid .dx-datagrid-content {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg-strong) !important;
}

html.xm-embed .dx-datagrid .dx-datagrid-headers {
    color: var(--xb-fg-dim) !important;
    border-bottom-color: var(--xb-line) !important;
    background-color: var(--xb-surface-2) !important;
}

/* 表头单元格：DevExtreme 自带 color:#212529 !important，必须同样带 !important 才压得住 */
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td,
html.xm-embed .dx-datagrid .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    background-color: var(--xb-surface-2) !important;
    color: var(--xb-fg-strong) !important;
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort,
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort-indicator,
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-header-filter,
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-column-indicators {
    color: var(--xb-fg-dim) !important;
}

html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover:not(.dx-command-select):not(.dx-command-expand):not(.dx-command-edit) {
    background-color: var(--xb-row-hover) !important;
}

/* 表头 hover 那一列的文字：第三方 bundle 的 td:hover 分支写死了 rgba 黑，暗色下会瞬间变深，这里压回前景色 */
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-datagrid-text-content,
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-sort,
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-sort-indicator,
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-header-filter,
html.xm-embed .dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-column-indicators {
    color: var(--xb-fg-strong) !important;
}

/* 数据行：单元格底色跟 --xb-surface，文字跟 --xb-fg-strong */
html.xm-embed .dx-datagrid .dx-datagrid-table .dx-row > td,
html.xm-embed .dx-datagrid-rowsview .dx-row > td {
    color: var(--xb-fg-strong) !important;
}

html.xm-embed .dx-datagrid .dx-datagrid-rowsview .dx-row > td {
    border-top-color: var(--xb-line-soft) !important;
    border-bottom-color: var(--xb-line-soft) !important;
}

html.xm-embed .dx-datagrid-rowsview {
    border-top-color: var(--xb-line) !important;
}

html.xm-embed .dx-datagrid-borders > .dx-datagrid-headers,
html.xm-embed .dx-datagrid-borders > .dx-datagrid-rowsview,
html.xm-embed .dx-datagrid-borders > .dx-datagrid-total-footer,
html.xm-embed .dx-datagrid-borders > .dx-datagrid-filter-panel {
    border-left-color: var(--xb-line) !important;
    border-right-color: var(--xb-line) !important;
    border-top-color: var(--xb-line) !important;
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .dx-datagrid-borders .dx-datagrid-headers .dx-datagrid-table {
    border-bottom-color: var(--xb-line) !important;
}

/* ★ 2026-09-20（第3批）需求2：去掉隔行变色（斑马纹），全表统一成常规网格底色。

   原来这条给奇数行铺了一层 alt 底色（白主题 #f5f5f5 / 灰 #f4f5f6 / 蓝 #f2f7fb /
   黑 #262626），偶数行却是透明（露出网格容器 --xb-surface），于是隔行有色差。
   CDP 实测（黑主题）：普通行 td = rgba(0,0,0,0) 而 alt 行 td = rgb(38,38,38)；
   PNG 像素实测（白主题）：普通行 #FFFFFF 而 alt 行 #F5F5F5。

   改成 transparent 后 alt 行与普通行完全一致，行底色交给网格容器统一提供，
   同时仍然压住 DevExtreme 自带的隔行底色（thirdparty.bundle.css 里那条
   dx-datagrid 的 dx-row-alt 子元素背景 #f5f5f5）。

   注意：筛选行（dx-datagrid-filter-row）是另一种行，颜色走 --xb-filter-row，
   表头走 --xb-surface-2，都不受这条影响。
   --xb-alt-row 变量保留但已不再被引用，方便以后想还原斑马纹时改回来。 */
html.xm-embed .dx-datagrid .dx-row-alt > td {
    background-color: transparent !important;
}

html.xm-embed .dx-datagrid .dx-row-alt {
    border-top-color: var(--xb-line-soft) !important;
    border-bottom-color: var(--xb-line-soft) !important;
}

html.xm-embed .dx-datagrid-filter-row {
    background-color: var(--xb-filter-row) !important;
}

html.xm-embed .dx-datagrid-filter-row > td,
html.xm-embed .dx-datagrid-filter-row .dx-editor-cell,
html.xm-embed .dx-datagrid-filter-row .dx-texteditor,
html.xm-embed .dx-datagrid-filter-row .dx-texteditor-input,
html.xm-embed .dx-datagrid-filter-row .dx-menu,
html.xm-embed .dx-datagrid-filter-row .dx-menu-horizontal,
html.xm-embed .dx-datagrid-filter-row .dx-menu-item {
    background-color: var(--xb-filter-row) !important;
    color: var(--xb-fg) !important;
}

/* 行悬停 —— 放在选中之前，让选中态在权重相同时靠后胜出 */
html.xm-embed .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td,
html.xm-embed .dx-datagrid-rowsview .dx-data-row.dx-state-hover > tr > td {
    background-color: var(--xb-row-hover) !important;
}

html.xm-embed .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
html.xm-embed .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
html.xm-embed .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-datagrid-group-space {
    background-color: var(--xb-row-selected) !important;
    color: var(--xb-fg-strong) !important;
    border-right-color: var(--xb-row-selected) !important;
}

/* 新增/编辑行（录入态） */
html.xm-embed .dx-datagrid-rowsview .dx-row.dx-edit-row > td,
html.xm-embed .dx-datagrid-rowsview .dx-row.dx-inserted > td {
    background-color: var(--xb-surface) !important;
    border-top-color: var(--xb-line) !important;
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .dx-datagrid-rowsview .dx-row.dx-removed > td {
    color: var(--xb-fg-dim) !important;
}

/* 汇总行 / 合计脚 */
html.xm-embed .dx-datagrid-total-footer,
html.xm-embed .dx-datagrid-total-footer > .dx-datagrid-content,
html.xm-embed .dx-datagrid-summary-item,
html.xm-embed .dx-datagrid .dx-datagrid-total-footer .dx-row > td {
    background-color: var(--xb-surface-2) !important;
    color: var(--xb-fg) !important;
    border-top-color: var(--xb-line) !important;
}

/* 空数据提示 */
html.xm-embed .dx-datagrid-nodata,
html.xm-embed .dx-datagrid .dx-datagrid-nodata {
    color: var(--xb-fg-dim) !important;
}

/* 分页条：IframePublicStyle.css 里有 background-color:#fff !important，
   这里用更高的 (0,3,1) 权重反超 */
html.xm-embed .iframe_container .iframe_container-table .dx-pager,
html.xm-embed .iframe_container .dx-pager,
html.xm-embed .dx-pager {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-pager .dx-pages .dx-page,
html.xm-embed .dx-pager .dx-page-sizes .dx-page-size,
html.xm-embed .dx-pager .dx-info,
html.xm-embed .dx-pager .dx-pages .dx-navigate-button {
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-pager .dx-page-size:hover,
html.xm-embed .dx-pager .dx-page:hover {
    background-color: var(--xb-hover-veil) !important;
}

html.xm-embed .dx-pager .dx-pages .dx-selection,
html.xm-embed .dx-pager .dx-page-sizes .dx-selection {
    color: #ffffff !important;
}

/* 表头筛选面板 / 搜索面板 */
html.xm-embed .dx-datagrid-header-panel,
html.xm-embed .dx-datagrid-header-panel .dx-toolbar,
html.xm-embed .dx-datagrid-filter-panel,
html.xm-embed .dx-datagrid-group-panel {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-datagrid-group-panel .dx-group-panel-message {
    color: var(--xb-fg-dim) !important;
}

/* 分组行 */
html.xm-embed .dx-datagrid-rowsview .dx-row.dx-group-row > td {
    background-color: var(--xb-surface-2) !important;
    color: var(--xb-fg) !important;
}

/* 列拖动指示线 */
html.xm-embed .dx-datagrid .dx-column-indicators .dx-sort,
html.xm-embed .dx-datagrid .dx-column-indicators .dx-header-filter {
    color: var(--xb-fg-dim) !important;
}

/* 单元格内的超链接 / 命令列按钮 */
html.xm-embed .dx-datagrid .dx-link,
html.xm-embed .dx-datagrid-rowsview .dx-link {
    color: #3ea6e8 !important;
}

/* 18.6 输入类控件：文本框 / 下拉 / 日期 / 复选 / 标签 / 校验 */
html.xm-embed .dx-texteditor,
html.xm-embed .dx-texteditor.dx-editor-outlined,
html.xm-embed .dx-texteditor.dx-editor-filled,
html.xm-embed .dx-texteditor.dx-editor-underlined {
    background-color: var(--xb-input-bg) !important;
    border-color: var(--xb-input-line) !important;
}

html.xm-embed .dx-texteditor-input,
html.xm-embed .dx-texteditor-input-container,
html.xm-embed .dx-texteditor-buttons-container {
    color: var(--xb-fg-strong) !important;
}

html.xm-embed .dx-texteditor-input::placeholder {
    color: var(--xb-fg-dim) !important;
}

html.xm-embed .dx-placeholder {
    color: var(--xb-fg-dim) !important;
}

html.xm-embed .dx-texteditor.dx-state-focused,
html.xm-embed .dx-texteditor.dx-state-active {
    border-color: #3ea6e8 !important;
}

/* Site.css:76 单独把输入框元素写成「background-color:#ffffff; border:1px solid #dddddd」，
   光改外层的 .dx-texteditor 压不住它，元素自己这一层也要点名。 */
html.xm-embed .dx-texteditor-input,
html.xm-embed .dx-texteditor-input-container,
html.xm-embed .dx-texteditor-container {
    background-color: var(--xb-input-bg) !important;
    border-color: var(--xb-input-line) !important;
}

html.xm-embed .dx-dropdowneditor-icon,
html.xm-embed .dx-texteditor .dx-icon,
html.xm-embed .dx-clear-button-area .dx-icon {
    color: var(--xb-fg-dim) !important;
}

html.xm-embed .dx-checkbox-icon,
html.xm-embed .dx-radiobutton-icon {
    border-color: var(--xb-input-line) !important;
    background-color: var(--xb-input-bg) !important;
}

html.xm-embed .dx-checkbox-text,
html.xm-embed .dx-radiobutton-label {
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-tag-container .dx-tag-content {
    background-color: var(--xb-input-bg) !important;
    border-color: var(--xb-input-line) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-switch .dx-switch-container,
html.xm-embed .dx-slider .dx-slider-bar {
    background-color: var(--xb-input-bg) !important;
}

html.xm-embed .dx-invalid-message .dx-overlay-content,
html.xm-embed .dx-validationsummary .dx-overlay-content {
    color: #ffffff !important;
}

/* 18.7 浮层：下拉面板 / 日期面板 / 业务页自身的弹窗
       注意 DevExtreme 把浮层挂到 <body> 下，但仍在 <html.xm-embed> 之内，
       所以变量与选择器都够得到。 */
html.xm-embed .dx-overlay-content {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-popup-title,
html.xm-embed .dx-popup-title.dx-toolbar,
html.xm-embed .dx-popup-title .dx-toolbar-items-container,
html.xm-embed .dx-popup-bottom,
html.xm-embed .dx-popup-bottom.dx-toolbar {
    background-color: var(--xb-surface-2) !important;
    color: var(--xb-fg) !important;
    border-color: var(--xb-line) !important;
}

html.xm-embed .dx-popup-content {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-popup-title .dx-toolbar-label {
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-list,
html.xm-embed .dx-list-item {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-list-item.dx-state-hover,
html.xm-embed .dx-list-item.dx-list-item-selected,
html.xm-embed .dx-list-item.dx-state-focused {
    background-color: var(--xb-row-hover) !important;
    color: var(--xb-fg) !important;
}

/* ============================================================
   ★ 2026-09-20：下拉 / 列表条目文字在深色主题下「深底 + 深字」

   现象（截图实测）：黑色主题下，表头筛选下拉（进仓日期那个红框）、
   Lookup / SelectBox / List 等所有浮层里的条目文字都是近黑深色，
   压在 #2a2a2a 的浮层底上几乎看不见；「全选」那颗复选框也只剩灰影。

   根因：LayoutStyle.css「使用同一控件的样式」一节第 641 行有一条
        .dx-list-item-content { color: #141e31 }   ← 无 !important
   它直接命中条目内容元素本身；而本文件上面那条
        html.xm-embed .dx-list-item { color: var(--xb-fg) }
   只改了父级 .dx-list-item —— 子元素自己声明了 color 就轮不到继承，
   于是父级改色对它无效（CDP 实测：.dx-list-item 是 rgba(0,0,0,.87)，
   而里面的 .dx-list-item-content 仍是 rgb(20,30,49)）。

   ★ 写注释的坑（本文件已踩一次，务必注意）：CSS 注释不能嵌套 ——
     在一对斜杠星号注释里再出现一对斜杠星号，外层注释会被提前终止，
     紧随其后的整条规则会被解析器当成非法选择器一并丢掉，且不报错
     （本文件第 1480 行那条 .dx-list-item-content 规则就是这样被吞掉的）。
     所以本节说明里一律不再出现注释符号成对写法的样例。

   修法：点名 .dx-list-item-content 本身。权重 html.xm-embed + 类 = (0,2,1)，
   已高于 LayoutStyle 的 (0,1,0)，再加 !important 双保险。
   同一节里 .dx-menu-base .dx-menu-item（第 613 行）是同一类漏网点，
   一并补齐；浅色主题下 --xb-fg(#212529) 与 #141e31 几乎同色，改完看不出差别。

   作用范围：所有业务页的所有列表 / 下拉 / 浮层，一次修掉「其他单据」的同类问题。
   ============================================================ */
html.xm-embed .dx-list-item-content,
html.xm-embed .dx-list .dx-list-item-content,
html.xm-embed .dx-overlay-content .dx-list-item-content {
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-menu-item,
html.xm-embed .dx-menu-item-content,
html.xm-embed .dx-menu-base .dx-menu-item .dx-menu-item-content {
    color: var(--xb-fg) !important;
}

/* 浮层里的复选框（表头筛选「全选」那颗）：深底上的灰框灰底几乎看不见，
   统一成「深色输入面 + 浅色描边」；勾选态沿用全站绿底白勾口径。 */
html.xm-embed .dx-overlay-content .dx-checkbox .dx-checkbox-icon {
    background-color: var(--xb-input-bg) !important;
    border: 1.5px solid var(--xb-input-line) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-overlay-content .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
    background-color: #2E9E5B !important;
    border-color: #2E9E5B !important;
    color: #ffffff !important;
}

/* ============================================================
   ★ 2026-09-20（第3批）需求4 + 需求5：表头筛选下拉做定点兜底

   这个浮层的包裹类名是
       .dx-overlay-wrapper.dx-popup-wrapper.dx-header-filter-menu
   结构：dx-popup-content > dx-list（含「全选」和各个取值） + dx-popup-bottom（好 / 取消）。

   需求4（黑色主题下看不见）：复测时已是深底浅字 ——
       CDP 计算值：浮层背景 rgb(42,42,42)、条目文字 rgb(230,230,230)；
       PNG 像素实测：浮层区域主色 #2A2A2A，无白块。
   说明上一批对 .dx-list-item-content 的修复已经覆盖到它。这里再点名一次该浮层，
   是为了防止 DevExtreme 内部把某一层单独写死颜色时又漏掉（成本极低、无副作用）。

   需求5（白 / 灰 / 蓝主题下「好 / 取消」看不见）：真凶不是配色，是按钮文字被刷成纯白 ——
   见上文 dx-button-mode-contained 那条。这里把 mode-text 按钮的文字色统一到
   主题强调色 --xb-accent（浅色 #1565c0，深色 #4fc3f7），四套主题都清楚可见。
   ============================================================ */
html.xm-embed .dx-header-filter-menu .dx-popup-content,
html.xm-embed .dx-header-filter-menu .dx-list,
html.xm-embed .dx-header-filter-menu .dx-list-item,
html.xm-embed .dx-header-filter-menu .dx-list-item-content,
html.xm-embed .dx-header-filter-menu .dx-list-group-header {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-header-filter-menu .dx-list-item.dx-state-hover,
html.xm-embed .dx-header-filter-menu .dx-list-item.dx-state-focused,
html.xm-embed .dx-header-filter-menu .dx-list-item.dx-list-item-selected {
    background-color: var(--xb-row-hover) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-popup-bottom .dx-button.dx-button-mode-text .dx-button-text,
html.xm-embed .dx-popup-bottom .dx-button.dx-button-mode-text .dx-icon {
    color: var(--xb-accent) !important;
}

/*「没有要显示的数据」(.dx-empty-message)：DevExtreme 里写死 rgba(0,0,0,.54)，
   压在深色浮层底上对比度只有 1.3:1 —— CDP 实测在黑色主题下完全看不见。
   表头筛选下拉、空列表、空 Lookup 都会出现这句提示，一并修掉。 */
html.xm-embed .dx-empty-message,
html.xm-embed .dx-list .dx-empty-message,
html.xm-embed .dx-overlay-content .dx-empty-message,
html.xm-embed .dx-treeview .dx-empty-message {
    color: var(--xb-fg-dim) !important;
}

html.xm-embed .dx-menu,
html.xm-embed .dx-context-menu .dx-menu-items-container,
html.xm-embed .dx-submenu > .dx-menu-items-container,
html.xm-embed .dx-submenu .dx-menu-item {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-menu-item.dx-state-hover,
html.xm-embed .dx-menu-item.dx-menu-item-expanded {
    background-color: var(--xb-row-hover) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-calendar,
html.xm-embed .dx-calendar .dx-calendar-body,
html.xm-embed .dx-calendar-navigator,
html.xm-embed .dx-calendar-views-wrapper,
html.xm-embed .dx-timeview,
html.xm-embed .dx-dateview {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-calendar-cell,
html.xm-embed .dx-calendar-navigator .dx-button .dx-icon {
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-calendar-cell.dx-calendar-other-view,
html.xm-embed .dx-calendar-cell.dx-calendar-empty-cell {
    color: var(--xb-fg-dim) !important;
}

html.xm-embed .dx-calendar-cell.dx-state-hover {
    background-color: var(--xb-row-hover) !important;
}

html.xm-embed .dx-tooltip .dx-overlay-content,
html.xm-embed .dx-tooltip-wrapper .dx-overlay-content {
    background-color: var(--xb-surface-2) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-tabs {
    background-color: var(--xb-surface) !important;
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .dx-tab {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-tab.dx-tab-selected {
    background-color: var(--xb-surface-2) !important;
    color: var(--xb-fg) !important;
}

/* ============================================================
   ★ 2026-09-20：业务页自定义页签条（汇总 / 明细）在深色主题下「一条白」

   现象（截图实测）：黑色主题下 .tab-nav 整条底色仍是 rgb(249,249,249)，
   而选中的那个页签被下面的 .tab-nav-item.active 规则压成了 rgb(42,42,42)
   —— 深色页签孤零零嵌在一条白底上，非常突兀；未选中页签的文字又继承了
   浅色的 --xb-fg(#e6e6e6)，落在白底上基本看不见。

   根因：.tab-nav / .tab-nav-item 的底色写在 StockDetail.cshtml 的内联 <style>
   （权重 (0,1,0)），本文件原有规则只点名了 .tab-container 与
   .tab-nav-item.active，漏了 .tab-nav 本身和未选中/悬停两态。

   修法：补齐「条 / 未选中 / 悬停」三态（选中态沿用原规则），
   全部改用主题变量 —— 浅色主题下 --xb-surface 就是 #ffffff、
   --xb-fg 就是 #212529，观感与原来一致，不会影响白/灰/蓝三套主题。
   只作用于 .tab-nav 这一自定义类，不碰 DevExtreme 的 .dx-tabs。
   ============================================================ */
html.xm-embed .tab-nav {
    background-color: var(--xb-surface) !important;
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .tab-nav-item {
    color: var(--xb-fg) !important;
    border-right-color: var(--xb-line) !important;
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .tab-nav-item:hover {
    background-color: var(--xb-row-hover) !important;
    color: var(--xb-fg) !important;
}

/* 18.8 打印模板列表 / 审批流面板 / 其它零散浅色面板
       这几块的颜色写在各业务页或 PublicToolbar 的内联 <style> 里，逐个点名压住。 */
html.xm-embed .printTemp_content .dx-list {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}

html.xm-embed .printTemp_content .dx-list-item-content {
    color: var(--xb-fg) !important;
    border-bottom-color: var(--xb-line) !important;
}

html.xm-embed .approval-opinion-panel,
html.xm-embed .qywx-approval-set-body,
html.xm-embed .qywx-approval-set-form,
html.xm-embed .qywx-approval-set-row,
html.xm-embed .approvalProcess_container,
html.xm-embed .node_container,
html.xm-embed .tip_p,
html.xm-embed .update_text {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .tip_p,
html.xm-embed .update_text {
    color: var(--xb-fg-dim) !important;
}

html.xm-embed .file-upload-container,
html.xm-embed .custom-file-upload,
html.xm-embed .file-info,
html.xm-embed .large-textarea {
    background-color: var(--xb-input-bg) !important;
    border-color: var(--xb-input-line) !important;
    color: var(--xb-fg) !important;
}

/* 通用兜底：页面里剩下的 .dx-widget / 面板类浅底 */
html.xm-embed .dx-accordion-item,
html.xm-embed .dx-accordion-item-title,
html.xm-embed .dx-treeview,
html.xm-embed .dx-treeview-item,
html.xm-embed .dx-fieldset,
html.xm-embed .dx-fieldset-header {
    background-color: var(--xb-surface) !important;
    color: var(--xb-fg) !important;
}

html.xm-embed .dx-treeview-item.dx-state-hover,
html.xm-embed .dx-accordion-item-title.dx-state-hover {
    background-color: var(--xb-row-hover) !important;
}

html.xm-embed .dx-treeview-item.dx-state-selected {
    background-color: var(--xb-row-selected) !important;
    color: var(--xb-fg) !important;
}

/* 18.9 滚动条：Site.css 把轨道写死 #f9f9fd、滑块 #c1c1c1，深色下刺眼 */
html.xm-embed ::-webkit-scrollbar-track { background-color: var(--xb-scroll-track) !important; }
html.xm-embed ::-webkit-scrollbar-thumb { background-color: var(--xb-scroll-thumb) !important; }
html.xm-embed ::-webkit-scrollbar-thumb:hover { background-color: var(--xb-scroll-thumb) !important; }

/* 18.10 顺带：外壳底部的备案信息条
        它在 #layout-container-drawer-scrollview 里、是 .layout-container-right 的兄弟，
        第 13 节的规则够不到，黑主题下会留一条白底黑字。 */
html.xm-home .layout-footer,
html.xm-home .layout-footer-content {
    background-color: var(--xm-canvas, #1f1f1f) !important;
    color: var(--xm-fg-dim, #a9a9a9) !important;
}

html.xm-home .layout-footer-content p {
    color: var(--xm-fg-dim, #a9a9a9) !important;
}

/* 无障碍：本节的底色切换不引入过渡，减少动态效果时无需额外处理 */
/* ============================================================
   第 18c 节 18c 业务页内联样式里的白底容器
   背景：各业务页 .cshtml 的内联 style 里写死了 background:#fff，第 18 节够不到。
   做法：只把这些白底容器在黑主题下转深色，白/灰/蓝三套保持原样。
   分组：A 容器型（没写文字色，文字继承 body 的浅色）
         B 写了中性深字色（字色要一起转浅，否则深底深字）
         C 写了有语义的彩字（只换底，保留彩字语义）
   注意：本节每条规则只写一个选择器，避免一个无效选择器连坐整条。
   ============================================================ */

/* 18c.1 容器型白块（A 组，共 75 个） */
html.xm-embed.xm-theme-black .aiDashboard_container ul li.dashboard-item {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .dashboard-context-menu {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .chart-container {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .decision_container > div {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .decision_container .dx-data-row:nth-child(odd) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .dynamic-page {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .dynamic-page .dx-data-row:nth-child(odd) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .schedul_container {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .query-header {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .material-type-radio {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .footer-bar {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .menu-manage-card {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .order-pool-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #unmatchedOrderGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #matchedOrderGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .pp-header-bar {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .pp-filter-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .pp-grid-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .pp-page-container .dx-datagrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .raw-material-psi-card {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #RawMaterialPSIListGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .upload-box {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .pinned-box {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .file-item {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .drawer .content {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .sa-header-bar {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .sa-filter-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .sa-grid-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .stock-query-header {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .view-mode-radio {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .filter-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .action-bar {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .tab-container {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .tab-nav-item.active {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .stock-grid-container .dx-datagrid-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .acceptance-field input {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .acceptance-field select {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .acceptance-overview {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .material-order-detail-drawer {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .material-order-panel {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-order-spreadsheet-gridlike {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-one-card {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-one-panel {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #StripOrderOneOrderGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #StripOrderOneMaterialGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #StripOrderOneKnifeGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #StripOrderOnePlateGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-one-actions {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-one-browse-actions {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-grid-btn {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-grid-input {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strip-grid-select {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #StripOrderOneListGrid .dx-pager {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strips-two-native {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .strips-test-flat-panel {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #material-detail-table tr.strips-test-table-tr td {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #order-detail-table tr.strips-test-table-tr td {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #material-detail-table tr.strips-test-table-tr td:nth-child(9) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #material-detail-table tr.strips-test-table-tr td:nth-child(11) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #material-detail-table tr.strips-test-table-tr td:nth-child(13) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #material-detail-table tr.strips-test-table-tr td:nth-child(15) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #material-detail-table tr.strips-test-table-tr td:nth-child(17) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #material-detail-table tr.strips-test-table-tr td:nth-child(19) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #order-detail-table tr.strips-test-table-tr td:nth-child(9) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #order-detail-table tr.strips-test-table-tr td:nth-child(11) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #order-detail-table tr.strips-test-table-tr td:nth-child(13) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #order-detail-table tr.strips-test-table-tr td:nth-child(15) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #order-detail-table tr.strips-test-table-tr td:nth-child(17) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black #order-detail-table tr.strips-test-table-tr td:nth-child(19) {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .winforms-group {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .wb-header-bar {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .wb-filter-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .wb-grid-section {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .weighing-room-card {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}
html.xm-embed.xm-theme-black .tem-material-card {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
}

/* 18c.2 中性深字色的白块（B 组，共 1 个） */
html.xm-embed.xm-theme-black .layout-container-toolbar-search_box .dx-button-has-text .dx-button-content {
    background-color: var(--xb-surface) !important;
    border-color: var(--xb-line) !important;
    color: var(--xb-fg) !important;
}

/* 18c.3 带语义彩字的白底按钮（C 组，只换底，共 4 个） */
html.xm-embed.xm-theme-black .btn-query .dx-button {
    background-color: var(--xb-surface) !important;
}
html.xm-embed.xm-theme-black .btn-query-wrapper .dx-button {
    background-color: var(--xb-surface) !important;
}
html.xm-embed.xm-theme-black .btn-query-wrapper-inline .dx-button {
    background-color: var(--xb-surface) !important;
}
html.xm-embed.xm-theme-black #strips-tables-container .strips-test-flat-add {
    background-color: var(--xb-surface) !important;
}

/* 18c.4 库存明细页查询头上的浅蓝按钮：底转深色、边框留蓝、字色提亮 */
html.xm-embed.xm-theme-black .query-header .dx-button {
    background-color: var(--xb-input-bg) !important;
    border-color: #337ab7 !important;
    color: #6cb2e0 !important;
}
html.xm-embed.xm-theme-black .query-header .dx-button:hover {
    background-color: #337ab7 !important;
    color: #ffffff !important;
}
html.xm-embed.xm-theme-black .material-type-radio:hover {
    background-color: var(--xb-input-bg) !important;
    border-color: #337ab7 !important;
}
/* ============================================================
   第 18d 节 18d 业务页内联样式里的深字色
   业务页 .cshtml 的内联 style 里把文字写死成 #333 / #666 / #212529 一类的深色，
   黑主题下就是深底深字（对比度约 1.1），这里统一转成 --xb-fg。
   同样只在黑主题下生效；一条规则一个选择器。
   ============================================================ */

/* 18d.1 深字色转浅（共 63 个） */
html.xm-embed.xm-theme-black #采购退货新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #ListDtl tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #采购订单新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .page-title {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .dynamic-page .dx-datagrid .dx-header-row {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #请款科目表格 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #请款明细表格 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #成品采购入仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #入仓拆分明细02 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #出货新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #物料订单明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #出货结算 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #deptEditForm .dx-field-item-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #formTitle {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #生产成品入仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #ClassEditForm .dx-field-item-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #备品备件入仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #备品备件订单新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #备品备件出仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #备品备件请购新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .material-type-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #LockPriceListGrid .dx-datagrid-rowsview tr.lock-price-shipped-row > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #锁定价明细02 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #到货录入新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #SpectroscopicDataGrid_inYL tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #SpectroscopicDataGrid_LossIn_Quality tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #SpectroscopicFileGrid tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #熔铸领料新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black h2 {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .key-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .value-content {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .step {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .pdf_inline_btn {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .query-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .permStaff_summary_section > h3 {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #采退出仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #生产角料回仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #原料转仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .function-title {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .function-item {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .upload-box h3 {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .pinned-box h3 {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .drop-area {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .uploaded-files-container h4 {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #销售退货入仓新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black #角料销售新增明细 tr.dx-row-focused > td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .layout-container-toolbar-search_box .dx-button-has-text .dx-button-content {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .layout-container-toolbar-iconbar .total_result {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .file-info {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .peeling-popup-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .weighing-popup-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .weighing-popup-big-title {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .view-mode-label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .range-separator {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .query-item label {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .strip-mat-sep {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .strip-one-cell-manual {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .strip-one-cell-manual > * {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .material-order-stock-legend {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .material-order-grid .dx-datagrid .dx-header-row td {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .strips-test-flat-tab {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .winforms-group-title {
    color: var(--xb-fg) !important;
}
html.xm-embed.xm-theme-black .tem-material-label {
    color: var(--xb-fg) !important;
}

/* ============================================================
   ★ 2026-09-20（第5批）库存明细页 /Stock/StockDetail：4 项调整
   ------------------------------------------------------------
   为什么写在「静态样式表」而不是 Views/Stock/StockDetail.cshtml：
      站点运行的是 .cshtml 编译进 xcsoft_B24.dll 的产物，
      改 .cshtml 必须「重编译 + 重启」才可见；而本文件是静态资源，
      服务端直接读源目录 → 改完刷新浏览器即生效，无需重编译。

   本轮 CDP 实测（1898 x 982 视口，线上实际结构）：
      .stock-query-header        t=0    h=99    padding 3px 15px
        .view-mode-container     t=4    h=91    display:flex  column  gap:4px
          .header-left           t=4    h=27   ← 查询日期 / 库存类型 / 切换项 / 打印
          .header-center         t=35   h=60   ← 被右侧 60px 高的复选框区撑高
            .action-buttons      t=53   h=25   ← 按钮被 align-items:center 下沉
            .header-right-area   t=35   h=60   ← 6 个复选框（3 列 x 2 行）
              .special-filter-box   383 x 60
              .header-right         36 x 25   （展开查询箭头）
      .group-tag.tag-filter      t=7    h=21
   ============================================================ */

/* ---------- 需求1 + 需求2：6 个复选框上移到第 1 行、与「库存类型」顶部对齐；
              「选择后的功能按钮」与第 1 行的行间距压紧 ----------
   这两条是同一个根因：
     .header-right-area（6 个复选框，3 列 x 2 行 = 60px 高）是 .header-center 的子元素，
     把第 2 行撑到 60px；按钮只有 25px 高，被 align-items:center 垂直居中居中 →
     按钮 top=53，而第 1 行底=31，凭空多出 22px（这就是「行间距太大」）；
     同一个原因让复选框区 top=35，而第 1 行「库存类型」top=7（这就是「没顶部对齐」）。
   修法：把复选框区抽离文档流，绝对定位到 .stock-query-header 内容区的右上角。
     · top:3px 正好等于 header 的 padding-top → 面板与第 1 行完全齐平
       （首个 chip 顶 = 3 + 4 = 7，与「库存类型」标签顶 7 逐像素一致）
     · 抽离后第 2 行只剩按钮(25px) → 按钮 top 回到 35，与第 1 行间距回到容器 gap=4px
   两套父级选择器都写上，新旧结构都能命中（重编译前后表现一致）。
   ------------------------------------------------------------ */
html.xm-embed .stock-query-header {
    position: relative;
    /* 复选框区已绝对定位、不再撑父高，用 min-height 兜住高度防止它压到下面的页签条：
       60(面板) + 3(padding-top) + 3(padding-bottom) + 2(border) = 68 */
    min-height: 68px;
}
html.xm-embed .header-center > .header-right-area,
html.xm-embed .view-mode-container > .header-right-area {
    position: absolute;
    top: 3px;
    right: 15px;
    align-items: flex-start;   /* 内部按顶对齐，不再在两行之间垂直居中 */
    z-index: 2;
}
html.xm-embed .header-right-area > .special-filter-box {
    /* 面板自带 padding:3px 8px + border 1px，会把 chip 顶压到 8px（比同排控件低 4px）。
       把上内边距挪到下边（总高不变，仍是 60px）→ chip 顶回到 5px，
       与左侧那排 25px 胶囊（待出货 / 库存 / 废料 / 不良品 / 待处理）逐像素齐平。 */
    padding-top: 0 !important;
    padding-bottom: 6px !important;
}
html.xm-embed .header-right-area > .header-right {
    margin-top: 1px;           /* 展开箭头与首个 chip 行齐平，不再飘在两行中间 */
}
html.xm-embed .view-mode-container > .header-right-area {
    /* ★ 重编译后的新结构里，模板把「展开查询」箭头移到了第 2 行 .header-center 里，
       右列只剩复选框面板 → 面板会因此右移 44px（箭头 36px + 组内间隔 8px）。
       这条把那段宽度以右内边距补回来，让面板在「重编译前 / 后」落在完全相同的坐标上
       （383 + 44 = 427，与旧结构右列同宽；right:15px → 面板 1455~1838）。
       只在重编译后才命中（旧结构里 .header-right-area 不是 .view-mode-container 的子元素）。 */
    padding-right: 44px;
}
html.xm-embed .header-center {
    /* 需求2：给绝对定位的复选框区（427px 宽 + 间隔）让出位置，
       避免窗口变窄、按钮换行后钻到复选框区下面 */
    padding-right: 445px;
}

/* ---------- 需求3：出货数量 / 出货重量两列去掉「间隔行变色」 ----------
   现象：普通行是浅黄 #fffbe6，间隔行却是白的 → 看上去仍是斑马纹。
   根因：本文件「去斑马纹」那条 (0,3,2) 特异性
           html.xm-embed .dx-datagrid .dx-row-alt > td { background-color: transparent !important }
         压过了页内 .stock-editable-cell 的浅黄 (0,2,1) →
         间隔行的可编辑格被刷成透明，普通行保留浅黄 = 斑马纹。
   修法：用 (0,4,2) 抬特异性，把可编辑列底色统一声明一次。
   ------------------------------------------------------------ */
html.xm-embed .stock-grid-container .dx-datagrid-rowsview td.stock-editable-cell,
html.xm-embed .dx-datagrid .dx-datagrid-rowsview td.stock-editable-cell {
    background-color: #fffbe6 !important;
}
html.xm-embed.xm-theme-black .stock-grid-container .dx-datagrid-rowsview td.stock-editable-cell,
html.xm-embed.xm-theme-black .dx-datagrid .dx-datagrid-rowsview td.stock-editable-cell {
    background-color: #3a3820 !important;   /* 黑主题：深橄榄，不再是刺眼的亮黄块 */
}

/* ---------- 需求4：整体黑色样式下，6 个复选框区跟着变深 ----------
   现象：挂上黑色主题后，框框区仍是浅绿（区底 #f7fcf7、chip #e3f3e4），
         白花花贴在 #1f1f1f/#2a2a2a 深色页面上。
   修法：单给 xm-theme-black 一套深绿灰，保留「绿色 = 筛选开关」的语义；
         选择器特异性 (0,4,1) 以上，高于页内浅色规则的 (0,2,0)。
   ------------------------------------------------------------ */
html.xm-embed.xm-theme-black .special-filter-box {
    background-color: #263327 !important;
    border-color: #3f6b45 !important;
}
html.xm-embed.xm-theme-black .special-filter-box .dx-checkbox {
    background-color: #2c3b2e !important;
    border-color: #4d7d55 !important;
}
html.xm-embed.xm-theme-black .special-filter-box .dx-checkbox:hover {
    background-color: #35473a !important;
    border-color: #5e9668 !important;
}
html.xm-embed.xm-theme-black .special-filter-box .dx-checkbox,
html.xm-embed.xm-theme-black .special-filter-box .dx-checkbox .dx-checkbox-text {
    color: #a5d6a7 !important;
}
html.xm-embed.xm-theme-black .special-filter-box .dx-checkbox:not(.dx-checkbox-checked) .dx-checkbox-icon {
    background-color: #1f1f1f !important;
    border: 1.5px solid #66bb6a !important;
}
html.xm-embed.xm-theme-black .special-filter-box .dx-checkbox-checked .dx-checkbox-icon {
    background-color: #43a047 !important;
    border: 1.5px solid #66bb6a !important;
    color: #ffffff !important;
}

/* ---------- 附带：第 3 批要求去掉的「库存类型」标签，用样式同步兜住 ----------
   页内模板里的 <span class="group-tag tag-filter">库存类型</span> 已删除，
   但要等重编译才消失；这里先用样式隐藏，保证「刷新即可见」与重编译后一致。 */
html.xm-embed .header-left > .group-tag.tag-filter {
    display: none !important;
}
