/* ==========================================================================
   汇舟物流数字化平台 · 主界面皮肤（方案 A）
   --------------------------------------------------------------------------
   加载方式：平台模板 templates/logwire/web/index.ftl 会自动引入租户目录下的
   assets/css/logwire.css（`<#if existsLogwireCss>`），且在 bundle.css 之后，
   因此本文件优先级最高，**对所有页面全局生效**（列表、表单、弹窗、报表）。
   不覆盖的范围：登录页（独立 iframe，样式在 assets/login/）、移动端、设计器。

   实现思路：
   平台本身是 token 驱动的（bundle.css 里大量使用 var(--theme-N) / var(--gray-N)），
   默认 --theme-* 本来就是蓝色阶（--theme-6: #2e75e6）。上一版皮肤把 --theme-*
   整体覆盖成了金色阶，才导致顶栏、按钮、菜单、链接、分页全部变金变橙。
   所以本皮肤的做法是：
     1) 把 --theme-* 换成与品牌蓝 #2F78F8 对齐的蓝阶 —— 一处改动，全局生效；
     2) 删掉原先逐条硬编码的金色/橙色覆盖，交还给平台默认的 token 规则；
     3) 只对设计稿里明确不同的地方（顶栏改白、内容区灰底、卡片化、表格、
        工具栏）做显式覆盖。
   4) 【重要】平台的组件样式是 webpack style-loader 在【运行时注入】到 <head> 的，
      注入位置在本文件之后。所以凡是与平台规则优先级【打平】的覆盖都会输给平台。
      本文件所有覆盖统一加 `html` 前缀多一层优先级（如 `html body.lightStyle .xxx`），
      不要依赖加载顺序。
   品牌金 --gold 仅用于 logo 与极少量点缀，不再做大面积背景。
   ========================================================================== */

:root {
    /* ---- 品牌蓝阶（替换原金色阶，对齐登录页主色 #2F78F8） ---- */
    --theme-1: #F5F9FF;
    --theme-2: #EAF2FF;
    --theme-3: #D8E8FF;
    --theme-4: #BBD3F8;
    --theme-5: #4C8BFF;
    --theme-6: #2F78F8;
    --theme-7: #1B54CC;
    --theme-8: #1543A3;
    --theme-9: #10347D;
    --theme-10: #0B2457;

    /* ---- 中性阶（保留原有偏冷灰，与蓝色主色更协调） ---- */
    --gray-1: #FFFFFF;
    --gray-2: #FAFBFC;
    --gray-3: #F2F3F6;
    --gray-4: #E7E9ED;
    --gray-5: #DADEE4;
    --gray-6: #CED3DB;
    --gray-7: #B6BDCA;
    --gray-8: #8592A6;
    --gray-9: #5D6D86;
    --gray-10: #23324A;
    --gray-11: #152339;
    --gray-12: #050E1C;
    --gray-13: #020A16;
    --gray-14: #060707;

    /* ---- 语义 token ---- */
    --brand: #2F78F8;
    --brand-d: #1B54CC;
    --brand-l: #5B95FF;
    --gold: #C8A44D;
    --gold-l: #E2C179;

    --ink: #0F1B33;
    --ink-2: #41546F;
    --ink-3: #5B6B85;
    --muted: #7C8AA3;
    --hint: #A3AFC2;

    --line: #E8EDF5;
    --line-2: #F1F5FA;
    --page-bg: #F4F7FC;
    --nav-bg: #101B33;

    --radius-sm: 7px;
    --radius: 9px;
    --radius-lg: 12px;
}

/* ==========================================================================
   1. 顶栏
   ========================================================================== */

/* 顶栏由金色改为白色；品牌金退到 logo 本身，不再做大面积背景 */
.lw-header.moder_header {
    background-color: var(--gray-1);
    background-image: none;
    color: var(--ink);
    font-size: 13px;
    border-bottom: 1px solid var(--line);
}

.lw-header .lw-header-title {
    padding: 0 15px;
    overflow: hidden;
}

.lw-header .lw-header-title .lw-title {
    color: var(--ink-2);
}

/* 汉堡按钮 */
.lw-header .header-menu-icon-wrapper {
    background: transparent;
    color: var(--ink-3);
    border-radius: var(--radius);
    transition: background .16s, color .16s;
}

.lw-header .header-menu-icon-wrapper:hover {
    background: var(--gray-3);
    color: var(--brand);
}

/* 顶栏右侧图标按钮 */
.lw-header .pop-btn {
    color: var(--ink-3);
    border-radius: var(--radius);
    transition: background .16s, color .16s;
}

/* 注意：原文件这里的选择器漏了开头的点（lw-header ...），规则从未生效，这里补上 */
.lw-header .pop-btn.active,
.lw-header .pop-btn:hover {
    background: var(--gray-3);
    color: var(--brand);
}

.lw-header .pop-btn i {
    font-size: 16px;
}

/* ==========================================================================
   2. 展板菜单（渲染在顶栏内，用户首选项 client.menu.style = board 时使用）
   皮肤对两种菜单形态都做了适配，用户切不切菜单都能看
   ========================================================================== */

.lw-header .board-menu .top-menu__outer {
    background: transparent;
}

body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home {
    color: var(--ink-2);
    background: transparent;
    font-size: 14px !important;
}

body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div {
    color: var(--ink-2) !important;
    transition: background .16s, color .16s;
}

body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home:hover,
body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div:hover {
    background: var(--theme-1) !important;
    color: var(--theme-6) !important;
}

body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div.active {
    background: var(--theme-1) !important;
    color: var(--theme-6) !important;
    font-weight: 500;
}

.moder_header .top-menu > div {
    font-size: 14px !important;
}

.moder_header .board-menu .top-menu__outer .menu-home,
.moder_header .board-menu .top-menu__outer .top-menu > div {
    padding-left: 20px;
}

/* 一级菜单搜索框（展板头部的搜索条）
   注：这里的 height:48px 是早期按金色皮肤调的，偏高，
   会挤压/遮挡下面的展板菜单 —— 已收敛到 36px。 */
.large-screen-menu .query-input-wrapper {
    height: 36px !important;
    background: var(--gray-2);
    border-bottom-color: var(--line);
    box-shadow: none;
    font-size: 13.5px;
}

.large-screen-menu .query-input-wrapper i {
    color: var(--hint);
}

.large-screen-menu .query-input-wrapper .menu-close__icon {
    top: 8px;
    opacity: 1;
}

.large-screen-menu .query-input-wrapper input {
    color: var(--ink) !important;
}

.large-screen-menu .query-input-wrapper input::placeholder {
    color: var(--hint);
}

.large-screen-menu .query-input-wrapper .el-icon-search {
    line-height: 36px;
}

/* 二级菜单面板 */
.lw-header .board-menu .second-menu__outer,
.lw-header .board-menu .top-menu__outer .top-menu > div.active {
    background: #fff;
}

.lw-header .board-menu .second-menu__outer .second-menu-each__outer.scrollbar {
    padding-top: 24px;
}

.lw-header .board-menu .second-menu__inner > span {
    line-height: 36px;
}

.lw-header .board-menu .second-menu__inner > div {
    margin-top: 4px;
}

.lw-header .board-menu .second-menu__inner .no-forth-menu:hover,
.lw-header .board-menu .second-menu__inner .no-fifth-menu:hover,
.lw-header .board-menu .second-menu__inner.no-third-menu:hover {
    background: linear-gradient(270deg, rgba(47, 120, 248, 0) 0%, var(--theme-1) 100%);
    border-radius: 4px;
}

.lw-header .board-menu .second-menu__inner span.unclick {
    background: linear-gradient(270deg, #FFFFFF 0%, #F2F2F2 100%);
    border-radius: 4px;
    padding-left: 12px;
    font-weight: 500;
    color: var(--muted);
}

.lw-header .board-menu .second-menu__inner .forth-menu span.unclick,
.lw-header .board-menu .second-menu__inner .third-menu span.unclick {
    background: #fff;
    padding-left: 12px;
}

.lw-header .board-menu .second-menu__inner .third-menu span::before,
.lw-header .board-menu .second-menu__inner .forth-menu span::before,
.lw-header .board-menu .second-menu__inner .fifth-menu span::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--brand);
    padding-left: 12px;
}

.lw-header .board-menu .second-menu__inner .third-menu span,
.lw-header .board-menu .second-menu__inner .forth-menu span,
.lw-header .board-menu .second-menu__inner .fifth-menu span {
    padding-left: 12px;
}

.lw-header .board-menu .second-menu__inner .forth-menu span.unclick::before,
.lw-header .board-menu .second-menu__inner .third-menu span.unclick::before,
.lw-header .board-menu .second-menu__inner .fifth-menu span.unclick::before {
    color: var(--hint);
}

.lw-header .board-menu .second-menu__inner .third-menu span {
    font-size: 12px;
}

.lw-header .board-menu .second-menu__inner .third-menu span::before,
.lw-header .board-menu .second-menu__inner .forth-menu span::before,
.lw-header .board-menu .second-menu__inner .fifth-menu span::before {
    color: var(--hint);
    font-size: 10px;
}

.lw-imenu i.favor-icon.fa,
.lw-header .board-menu .second-menu__outer i.favor-icon.fa,
.top-menu__outer .top-menu-item i.favor-icon.fa,
.lw-favorites .menu-link i.favor-icon.fa {
    color: var(--gold) !important;
}

/* 展板菜单底部提示 */
.menu-bottom-tip span {
    color: var(--gray-1);
}

body.lightStyle .moder_header .board-menu .top-menu__outer .menu-bottom-tip {
    background: radial-gradient(circle, rgba(16, 27, 51, .88), rgba(255, 255, 255, .2));
}

/* ==========================================================================
   3. 顶栏页签（已打开的页面）
   ========================================================================== */

.menu-in-header .favorite-menu:not(.active, .more-item) {
    background: transparent;
    border: 0;
    color: var(--ink-2);
}

.menu-in-header .favorite-menu .menu-title,
.menu-in-header .more span {
    font-size: 13px;
}

.favorite-menu.active {
    color: var(--brand) !important;
    font-weight: 500;
}

.favorite-menu.active .icon-close {
    color: var(--brand) !important;
}

/* ==========================================================================
   4. 左侧树形菜单（用户首选项 client.menu.style ≠ board 时使用）
   ========================================================================== */

body.lightStyle .lw-imenu,
body.lightStyle .lw-infinite-menu,
body.lightStyle .lw-imenu .modern-menu,
body.lightStyle .lw-imenu .modern-menu .el-menu,
body.lightStyle .lw-imenu .modern-menu .el-submenu .el-menu,
body.lightStyle .lw-infinite-menu .lw-menu.standard,
body.lightStyle .lw-infinite-menu .lw-menu.standard .el-menu {
    background-color: var(--nav-bg) !important;
}

/* 折叠态二级弹出菜单（渲染在 body 层） */
body.lightStyle .el-menu--vertical.modern-menu,
body.lightStyle .el-menu--popup,
body.lightStyle .el-menu--popup .el-menu,
body.lightStyle .el-menu--popup .el-submenu .el-menu {
    background-color: var(--nav-bg) !important;
}

/* 文字与图标 */
body.lightStyle .lw-imenu .modern-menu .el-menu-item,
body.lightStyle .lw-imenu .modern-menu .el-submenu__title,
body.lightStyle .lw-imenu .modern-menu .el-menu-item i,
body.lightStyle .lw-imenu .modern-menu .el-submenu__title i,
body.lightStyle .lw-imenu .modern-menu .el-submenu__icon-arrow,
body.lightStyle .lw-infinite-menu .lw-menu.standard .menu-home,
body.lightStyle .lw-infinite-menu .lw-menu.standard .menu-home i,
body.lightStyle .el-menu--popup .el-menu-item,
body.lightStyle .el-menu--popup .el-submenu__title,
body.lightStyle .el-menu--popup .el-menu-item i,
body.lightStyle .el-menu--popup .el-submenu__title i {
    color: rgba(255, 255, 255, .72) !important;
}

/* hover / 选中态：蓝色半透明底 + 白字 */
body.lightStyle .lw-imenu .modern-menu .el-menu-item:hover,
body.lightStyle .lw-imenu .modern-menu .el-submenu__title:hover,
body.lightStyle .lw-imenu .modern-menu .el-menu-item.is-active,
body.lightStyle .lw-imenu .modern-menu .el-submenu.is-active > .el-submenu__title,
body.lightStyle .el-menu--popup .el-menu-item:hover,
body.lightStyle .el-menu--popup .el-submenu__title:hover,
body.lightStyle .el-menu--popup .el-menu-item.is-active {
    background-color: rgba(47, 120, 248, .18) !important;
    color: #fff !important;
}

body.lightStyle .lw-imenu .modern-menu .el-menu-item.is-active i,
body.lightStyle .lw-imenu .modern-menu .el-menu-item:hover i,
body.lightStyle .lw-imenu .modern-menu .el-submenu__title:hover i,
body.lightStyle .el-menu--popup .el-menu-item.is-active i,
body.lightStyle .el-menu--popup .el-menu-item:hover i,
body.lightStyle .el-menu--popup .el-submenu__title:hover i {
    color: #fff !important;
}

/* 收藏区（独立的 .lw-favorites 组件，不在 .lw-imenu 内） */
body.lightStyle .lw-infinite-menu .lw-favorites .lw-favor-title,
body.lightStyle .lw-infinite-menu .lw-favorites .menu-link,
body.lightStyle .lw-infinite-menu .lw-favorites .favor-label,
body.lightStyle .lw-infinite-menu .lw-favorites .lw-favor-title i:not(.favor-icon),
body.lightStyle .lw-infinite-menu .lw-favorites .menu-link i:not(.favor-icon) {
    color: rgba(255, 255, 255, .72) !important;
}

body.lightStyle .lw-infinite-menu .lw-favorites .lw-favor-title:hover,
body.lightStyle .lw-infinite-menu .lw-favorites .menu-link:hover,
body.lightStyle .lw-infinite-menu .lw-favorites .menu-link.is-active {
    background: rgba(47, 120, 248, .18) !important;
    color: #fff !important;
}

body.lightStyle .lw-infinite-menu .lw-favorites .lw-favor-title:hover i:not(.favor-icon),
body.lightStyle .lw-infinite-menu .lw-favorites .menu-link:hover .favor-label,
body.lightStyle .lw-infinite-menu .lw-favorites .menu-link:hover i:not(.favor-icon),
body.lightStyle .lw-infinite-menu .lw-favorites .menu-link.is-active .favor-label {
    color: #fff !important;
}

/* 菜单定位按钮 */
body.lightStyle .lw-infinite-menu .lw-menu-position,
body.lightStyle .lw-infinite-menu .lw-menu-keyword-prepend {
    color: rgba(255, 255, 255, .72) !important;
}

/* 菜单搜索框：平台默认是白底 input，放在深色侧边栏上会变成一块白板 */
html body.lightStyle .lw-infinite-menu .lw-search-keyword .el-input__inner {
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

html body.lightStyle .lw-infinite-menu .lw-search-keyword .el-input__inner::placeholder {
    color: rgba(255, 255, 255, .45) !important;
}

html body.lightStyle .lw-infinite-menu .lw-search-keyword .el-input__inner:hover,
html body.lightStyle .lw-infinite-menu .lw-search-keyword .el-input__inner:focus {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: rgba(47, 120, 248, .8) !important;
}

/* 选中态：平台的默认规则在深色菜单底上会渲染成「白底白字」，必须整组覆盖。
   涉及的平台规则（注意第一条的优先级是 0,6,1，比一般的覆盖都高）：
     body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item.is-active
         {background-color:var(--theme-1)!important}   <- --theme-1 是接近白的浅蓝，实际渲染出来就是白底
     .lw-infinite-menu .lw-menu.standard .menu-home.is-active
         {background:hsla(0,0%,100%,.35)!important}
     .lw-imenu .el-submenu .el-menu-item.is-active:hover{background-color:#c5ccd4}
     .el-menu-item.is-active span{color:var(--theme-6)}  <- 文字会被染成主色
   所以这里必须把 .lw-infinite-menu / .lw-imenu / .modern-menu 全部写进选择器，
   再用 html 前缀多压一层，才能稳定赢过平台。 */
html body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item.is-active,
html body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item.is-current,
html body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item:hover,
html body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-submenu__title:hover,
html body.lightStyle .lw-infinite-menu .lw-imenu .el-submenu .el-menu-item.is-active:hover,
html body.lightStyle .lw-infinite-menu .lw-menu.standard .menu-home.is-active,
html body.lightStyle .lw-infinite-menu .lw-menu.standard .menu-home:hover,
html body.lightStyle .lw-infinite-menu .el-menu-item.is-active,
html body.lightStyle .lw-infinite-menu .el-submenu__title.is-active,
html body.lightStyle .el-menu--popup .el-menu-item.is-active,
html body.lightStyle .el-menu--popup .el-menu-item:hover,
html body.lightStyle .el-menu--popup .el-submenu__title:hover {
    background-color: rgba(47, 120, 248, .20) !important;
    background-image: none !important;
    color: #fff !important;
}

html body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item.is-active span,
html body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item.is-active i,
html body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item.is-active .menu-item-title,
html body.lightStyle .lw-infinite-menu .el-menu-item.is-active span,
html body.lightStyle .lw-infinite-menu .el-menu-item.is-active i,
html body.lightStyle .lw-infinite-menu .el-menu-item.is-active .menu-item-title,
html body.lightStyle .lw-infinite-menu .lw-menu.standard .menu-home.is-active span,
html body.lightStyle .el-menu--popup .el-menu-item.is-active span,
html body.lightStyle .el-menu--popup .el-menu-item.is-active i {
    color: #fff !important;
}

/* 去掉缩放时右侧出现的白色滚动条竖条。
   仅隐藏自定义滚动条（position:absolute，不影响布局）。
   注意：不要给 .lw-menu-wrap 的原生 ::-webkit-scrollbar 设 width:0 —
   该容器是 overflow:scroll + margin-right:-15px，置 0 会把内容盒撑宽 15px，导致菜单文字/图标贴左。 */
body.lightStyle .lw-infinite-menu > .scrollbar__bar {
    display: none !important;
}

/* 字号 / 行高 / 图标大小统一为展板菜单 */
body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu-item,
body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-submenu__title,
body.lightStyle .lw-infinite-menu .el-menu-item.menu-home,
body.lightStyle .el-menu--popup .el-menu-item,
body.lightStyle .el-menu--popup .el-submenu__title {
    height: 36px !important;
    line-height: 36px !important;
}

body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-submenu__title .menu-item-title,
body.lightStyle .lw-infinite-menu .el-menu-item.menu-home .menu-item,
body.lightStyle .el-menu--popup .el-submenu__title .menu-item-title {
    font-size: 14px !important;
}

body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .el-menu .el-menu-item .menu-item-title,
body.lightStyle .el-menu--popup .el-menu .el-menu-item .menu-item-title {
    font-size: 12px !important;
}

body.lightStyle .lw-infinite-menu .lw-favorites .lw-favor-title {
    font-size: 14px !important;
    line-height: 36px !important;
}

body.lightStyle .lw-infinite-menu .lw-favorites .menu-link {
    height: 36px !important;
    line-height: 36px !important;
    font-size: 12px !important;
}

body.lightStyle .lw-infinite-menu .menu-icon,
body.lightStyle .el-menu--popup .menu-icon {
    font-size: 14px !important;
}

body.lightStyle .lw-infinite-menu .el-submenu__icon-arrow,
body.lightStyle .lw-infinite-menu .lw-imenu .modern-menu .lw-menu-icon,
body.lightStyle .el-menu--popup .el-submenu__icon-arrow {
    font-size: 10px !important;
}

/* 底部“技术支持”始终保持毛玻璃效果。
   backdrop-filter 只模糊“身后”的内容，菜单未滚动到其下方时就没有效果；
   改用与展板一致的半透明渐变底色，使其始终呈现毛玻璃质感。 */
body.lightStyle .lw-infinite-menu .menu-bottom-tip {
    background: radial-gradient(circle, rgba(16, 27, 51, .88), rgba(255, 255, 255, .2)) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

/* ==========================================================================
   5. 内容区与卡片
   ========================================================================== */

body.lightStyle .lw-content.moder_concent,
html body.lightStyle .lw-content.moder_concent {
    background: var(--page-bg);
}

/* 注意：平台 .lw-content_main.standard 自带 height:100%。
   原项目在这里加过 min-height: calc(100vh - 56px)，但它忽略了同级的标题栏高度，
   会把内容区顶出容器、把底部内边距挤出视口 —— 表现就是"内容底部没有留白和圆角"。
   这里去掉 min-height，高度交给 .lw-content_inner 的 flex 计算。 */
html body.lightStyle .lw-content_main.standard {
    padding: 16px 18px 18px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

html body.lightStyle .lw-content_main.standard > div {
    flex: 1;
    min-height: 0;
}

/* 卡片：原先是无圆角无阴影的贴边块，改为白底圆角卡片 */
html body.lightStyle .lw-region {
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(16, 29, 51, .04);
    border: 1px solid var(--line);
    background: var(--gray-1);
}

/* ---- 标题栏（页面标题 + 工具栏） ----
   设计稿要的是：标题和操作区在【同一张白卡】里，且这张卡与下面的表格卡同宽、上下间距一致。
   做法是把整个 .lw-content_header 本身做成那张卡，左右外边距对齐 .lw-content_main 的
   左右内边距（18px），上间距 16px 与内容区自身的内边距一致。

   flex-wrap:wrap 必须加：按钮多到一排放不下时，强制不换行会让工具栏溢出卡片、
   把内容区撑出横向滚动条，滚动条出现/消失又反过来改变可用宽度 ——
   表现就是"按钮一直在动"。允许换行后布局是稳定的。 */
html body.lightStyle .lw-content_header,
html body.lightStyle .lw-content_header.standard {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    box-sizing: border-box;
    min-width: 0;
    margin: 16px 18px 0;
    padding: 10px 16px;
    background-color: var(--gray-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(16, 29, 51, .04);
}

/* 标题：固定靠左。
   平台把标题放在哪一层因页面而异（.lw-content_header 的直接子节点 /
   .lw-toolbar 内部 / .lw-content_title-region 内部），所以这里**不再依赖父级**，
   直接作用于 .lw-page-title 本身，避免"换个页面就失效"。
   `margin-right:auto` 的优先级高于容器的 justify-content，三种挂载方式都能贴左。 */
html body.lightStyle .lw-page-title {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    color: var(--ink);
    font-size: 17px;
    white-space: nowrap;
}

/* 标题/工具栏所在的横向容器。
   【实测 DOM（浏览器 Elements 层级）】
     .lw-content_title-region (flex)
       └ .lw-region.layout-title-region (flex)      ← 整行容器（标题+工具栏都在里面）
           └ .lw-layout-title (flex)
               ├ div[style="margin-right:40px"]     标题文字
               └ div:nth-child(2)                   工具栏容器（见下方定稿段）
   注意：不能给 .lw-content_title-region 设 justify-content:flex-end ——
   会把整行内容推到右边（"标题没靠左"的根因）。 */
/* ⚠ 这里【绝对不要】设 display:flex —— 已由需求方实测确认：
   在 md_division_search 页把 .lw-content_title-region 的 display:flex 注释掉，
   "按钮一直在动"立刻消失。这一层加 flex 会让它按内容宽度参与 flex 计算，
   与内部工具栏的宽度互相牵制，形成重排循环。
   平台默认就是 display:block，保持默认即可；横向排布交给内部的
   .layout-title-region / .lw-layout-title（那两层我设了 flex）。 */
html body.lightStyle .lw-content_title-region {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* 标题文字：固定靠左、不参与压缩、不换行。
   ⚠ 注意作用对象：`.lw-content_title-region > *:first-child` 是【整行】容器
   （.lw-region.layout-title-region，标题和工具栏都在里面），
   给它设 white-space:nowrap 会被工具栏继承 → 按钮永远不换行。
   所以 nowrap 只能加在标题文字这一层（.lw-layout-title 的第一个子节点）。 */
html body.lightStyle .lw-content_title-region .lw-layout-title > div:first-child {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-right: 40px;
}

/* 工具栏本体：占满剩余宽度，内部排布不动（搜索在左、按钮在右由平台决定）。
   **不要写 width:100%，也不要设 justify-content:flex-end** ——
   前者会把按钮挤出卡片引发横向滚动条抖动，后者会把搜索框也推到右边。 */
html body.lightStyle .lw-content_header .lw-toolbar,
html body.lightStyle .lw-content_header .lw-search-form.standard,
html body.lightStyle .lw-content_title-region .lw-toolbar,
html body.lightStyle .lw-content_title-region .lw-search-form.standard,
html body.lightStyle .lw-content_title-region .lw-items-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html body.lightStyle .lw-content_header .lw-search-item,
html body.lightStyle .lw-content_title-region .lw-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

/* 标题传送区内的【所有】元素（不限层级）：
   ① 清掉上/下外边距 —— 平台 `.lw-items-wrapper` 默认 margin-bottom:12px，
      而 align-items:center 对齐的是含 margin 的盒子，会把整行内容整体顶高。
      实测：标题正好居中，而输入框/按钮比卡片中心偏上约 7px（≈ 15px 下外边距的一半）。
      元素间距统一交给 flex 容器的 gap，不再依赖 margin。
   ② 允许换行 —— 按钮一排放不下时换行，而不是溢出卡片右边界
      （实测"取消确认"会超出卡片圆角）。
      `flex-wrap` 对非 flex 元素是无效声明，所以可以放心地对所有后代统一设置。
   注意不要连 .lw-content_header 自己一起清零，它的 margin 是卡片的定位依据。 */
html body.lightStyle .lw-content_title-region * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap;
    min-width: 0;
}

/* 兜底（应对"容器其实不是 flex"的情形）：
   ① 若 .lw-content_title-region 实际是块级容器，align-items 不起作用，
      此时靠 vertical-align:middle 让 inline-block 的按钮/输入框垂直对齐；
   ② 若按钮不换行是因为祖先带 white-space:nowrap（平台 .lw-page-title 就是 nowrap），
      则用 white-space:normal 打开换行 —— 只作用于容器，不影响按钮文字本身。 */
html body.lightStyle .lw-content_title-region > * {
    align-self: center !important;
    vertical-align: middle !important;
}

html body.lightStyle .lw-content_title-region .lw-items-wrapper {
    align-self: center !important;
    white-space: normal !important;
}

html body.lightStyle .lw-content_title-region .lw-items-wrapper > * {
    align-self: center !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

html body.lightStyle .lw-content_title-region .el-button,
html body.lightStyle .lw-content_title-region .el-input,
html body.lightStyle .lw-content_title-region .el-select {
    align-self: center !important;
    vertical-align: middle !important;
}

/* ---- 定稿：按浏览器 Elements 里的真实层级写 ----
   实测 DOM（客户页）：
     .lw-content_title-region (flex)
       └ .lw-region.layout-title-region.modern-search-item.modern-layout-item (flex)
           └ .lw-layout-title (flex)                                  ← 横向排布容器
               ├ div[style="margin-right:40px"]                       标题文字
               └ div:nth-child(2)  flex:1; overflow:hidden; display:block   ← 工具栏容器
                   └ .lw-search-form.standard > .lw-items-wrapper.full > 按钮…

   两个症结（都在我此前没管的这两层上）：
   ① **垂直不居中**：`.lw-layout-title` 和 `div:nth-child(2)` 都不是垂直居中的容器，
      `div:nth-child(2)` 甚至只是 UA 默认的 `display:block` ——
      所以它上面的 `align-items / flex-wrap` 全是无效声明，标题和工具栏各自贴顶。
   ② **按钮不换行**：容器链上带 `white-space:nowrap`，而 `div:nth-child(2)` 的
      `overflow:hidden` 会把放不下的按钮**直接裁掉**（看起来就是"超出右侧边"）。

   做法：把这两层都改成 flex + align-items:center + min-width:0；
   white-space 在容器层放开、在按钮/输入框层还回 nowrap（避免按钮文字被拆行）。 */
html body.lightStyle .lw-content_title-region .lw-layout-title {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100%;
}

html body.lightStyle .lw-content_title-region .lw-layout-title > div:nth-child(2) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* 工具栏链路：占满剩余宽度、可收缩、可换行 */
html body.lightStyle .lw-content_title-region .lw-search-form.standard,
html body.lightStyle .lw-content_title-region .lw-items-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 容器层统一放开 white-space，让 inline-block 的按钮能换行 */
html body.lightStyle .lw-content_title-region .lw-layout-title > div:nth-child(2) * {
    white-space: normal !important;
}

/* 按钮与输入框自身保持单行，避免文字被拆行（优先级要高于上一条） */
html body.lightStyle .lw-content_title-region .lw-layout-title > div:nth-child(2) .el-button,
html body.lightStyle .lw-content_title-region .lw-layout-title > div:nth-child(2) .el-button span,
html body.lightStyle .lw-content_title-region .lw-layout-title > div:nth-child(2) .el-input__inner,
html body.lightStyle .lw-content_title-region .lw-layout-title > div:nth-child(2) .el-select {
    white-space: nowrap !important;
}

/* 补充：容器上也压一次 align-content，避免多行 flex 的 align-content 影响行位置 */
html body.lightStyle .lw-content_header,
html body.lightStyle .lw-content_title-region {
    align-content: center !important;
}

html body.lightStyle .lw-content_header > *,
html body.lightStyle .lw-content_title-region > *,
html body.lightStyle .lw-content_title-region .lw-region,
html body.lightStyle .lw-content_title-region .lw-items-wrapper,
html body.lightStyle .lw-content_header .lw-items-wrapper {
    align-self: center !important;
}

/* 标题块（.layout-title-region）：不要卡片外观，也不要 nowrap 影响同行元素 */
html body.lightStyle .lw-content_title-region .lw-region.layout-title-region {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: normal !important;
}

/* 工具栏容器：允许换行、允许收缩，且不被 nowrap 影响（平台给的是 nowrap） */
html body.lightStyle .lw-content_title-region .lw-items-wrapper,
html body.lightStyle .lw-content_header .lw-items-wrapper {
    white-space: normal !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100%;
}

html body.lightStyle .lw-content_title-region .lw-region,
html body.lightStyle .lw-content_title-region .lw-region-title {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html body.lightStyle .lw-content_title-region .lw-toolbar,
html body.lightStyle .lw-content_title-region .lw-search-form.standard {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 !important;
}

/* 没有内容被传送进来时不要留空白 */
html body.lightStyle .lw-content_header .lw-content_title-region:empty {
    display: none;
}

/* ==========================================================================
   6. 查询区 / 工具栏 / 按钮
   ========================================================================== */

.lw-items-wrapper {
    margin-bottom: 12px;
}

.lw-search-keyword-container .lw-search-keyword-prepend {
    height: 30px;
    line-height: 30px;
}

.lw-search-keyword-container .lw-search-keyword .el-input__inner {
    border-color: var(--line) !important;
}

.lw-search-keyword-container .lw-search-keyword .el-input__inner:focus,
.lw-search-keyword-container .lw-search-keyword .el-input__inner:hover {
    border-color: var(--brand) !important;
}

.el-input__inner {
    border: 1px solid var(--line);
}

.el-button {
    font-size: 12px;
    border-radius: var(--radius);
}

/* 按钮分三层配色：主操作(蓝底白字) / 品牌操作(金底金字) / 常规操作(浅蓝底蓝字)。
   注意两件事：
   1) 优先级：平台的 .lw-content.moder_concent .el-button（0,3,0）比 .el-button--primary（0,1,0）高，
      会把主按钮也压成描边样式，所以必须用更高的选择器显式分层。
   2) **工具栏是被 portal 到 .lw-content_header 下的**（asLayoutTitle / title-in-toolbar），
      已经不在 .lw-content.moder_concent 里面 —— 只写 moder_concent 上下文会导致
      工具栏按钮全部退回 Element 默认白底，这就是"全是白色不好区分"的原因。
      下面每条规则都同时覆盖 4 个上下文：header / title-region / moder_concent / dialog。 */

/* ---- 常规操作按钮：浅蓝底 + 蓝字，与纯白卡片区分开 ---- */
html body.lightStyle .lw-content_header .el-button,
html body.lightStyle .lw-content_title-region .el-button,
html body.lightStyle .lw-content.moder_concent .el-button,
html body.lightStyle .panel-dialog.standard .el-button {
    background: var(--theme-1);
    border-color: var(--theme-3);
    color: var(--theme-7);
}

html body.lightStyle .lw-content_header .el-button:hover,
html body.lightStyle .lw-content_title-region .el-button:hover,
html body.lightStyle .lw-content.moder_concent .el-button:hover,
html body.lightStyle .panel-dialog.standard .el-button:hover {
    background: var(--theme-2);
    border-color: var(--theme-5);
    color: var(--theme-7);
}

html body.lightStyle .lw-content_header .el-button:active,
html body.lightStyle .lw-content_title-region .el-button:active,
html body.lightStyle .lw-content.moder_concent .el-button:active,
html body.lightStyle .panel-dialog.standard .el-button:active {
    background: var(--theme-3);
    border-color: var(--theme-6);
    color: var(--theme-7);
}

/* ---- 品牌色操作按钮（导出这类 is-plain）：品牌金浅底 + 深金字 ---- */
html body.lightStyle .lw-content_header .el-button.is-plain,
html body.lightStyle .lw-content_title-region .el-button.is-plain,
html body.lightStyle .lw-content.moder_concent .el-button.is-plain,
html body.lightStyle .panel-dialog.standard .el-button.is-plain {
    background: #FBF6E9;
    border-color: #E7D6AE;
    color: #8A6A1F;
}

html body.lightStyle .lw-content_header .el-button.is-plain:hover,
html body.lightStyle .lw-content_title-region .el-button.is-plain:hover,
html body.lightStyle .lw-content.moder_concent .el-button.is-plain:hover,
html body.lightStyle .panel-dialog.standard .el-button.is-plain:hover {
    background: #F7EFDB;
    border-color: var(--gold);
    color: #6F5314;
}

/* ---- 主按钮（新增）：蓝底白字。放在 is-plain 之后并用 !important，
        保证即使它同时带 is-plain 类也仍然是蓝色 ---- */
html body.lightStyle .lw-content_header .el-button--primary,
html body.lightStyle .lw-content_title-region .el-button--primary,
html body.lightStyle .lw-content.moder_concent .el-button--primary,
html body.lightStyle .panel-dialog.standard .el-button--primary,
.el-button--primary {
    color: #fff !important;
    background-color: var(--theme-6) !important;
    border-color: var(--theme-6) !important;
}

html body.lightStyle .lw-content_header .el-button--primary:hover,
html body.lightStyle .lw-content_title-region .el-button--primary:hover,
html body.lightStyle .lw-content.moder_concent .el-button--primary:hover,
html body.lightStyle .panel-dialog.standard .el-button--primary:hover,
.el-button--primary:hover,
.el-button--primary:focus {
    color: #fff !important;
    background-color: var(--theme-5) !important;
    border-color: var(--theme-5) !important;
}

html body.lightStyle .lw-content_header .el-button--primary:active,
html body.lightStyle .lw-content_title-region .el-button--primary:active,
html body.lightStyle .lw-content.moder_concent .el-button--primary:active,
html body.lightStyle .panel-dialog.standard .el-button--primary:active,
.el-button--primary:active {
    color: #fff !important;
    background-color: var(--theme-7) !important;
    border-color: var(--theme-7) !important;
}

/* ---- 禁用态 ---- */
html body.lightStyle .lw-content_header .el-button.is-disabled,
html body.lightStyle .lw-content_header .el-button.is-disabled:focus,
html body.lightStyle .lw-content_header .el-button.is-disabled:hover,
html body.lightStyle .lw-content_title-region .el-button.is-disabled,
html body.lightStyle .lw-content_title-region .el-button.is-disabled:focus,
html body.lightStyle .lw-content_title-region .el-button.is-disabled:hover,
html body.lightStyle .lw-content.moder_concent .el-button.is-disabled,
html body.lightStyle .lw-content.moder_concent .el-button.is-disabled:focus,
html body.lightStyle .lw-content.moder_concent .el-button.is-disabled:hover,
html body.lightStyle .panel-dialog.standard .el-button.is-disabled,
html body.lightStyle .panel-dialog.standard .el-button.is-disabled:focus,
html body.lightStyle .panel-dialog.standard .el-button.is-disabled:hover {
    color: var(--gray-8) !important;
    background: #ECEEF1 !important;
    border-color: var(--gray-6) !important;
}

.el-button--text span {
    color: var(--theme-6);
}

.search-filter-selector .el-select-dropdown__item.hover .search-filter-name {
    color: var(--theme-6) !important;
}

html body.lightStyle .el-tag--primary {
    background-color: var(--theme-2);
    border-color: var(--theme-3);
    color: var(--theme-7);
}

/* ==========================================================================
   7. 表格
   ========================================================================== */

html body.lightStyle .el-table-modern .el-table__fixed-header-wrapper .cell,
html body.lightStyle .el-table-modern .el-table__header-wrapper .cell {
    background: #F7F9FC;
    color: var(--ink-3);
    font-weight: 600;
}

.el-table-modern {
    border-color: var(--line);
}

.el-table-modern .el-table__row:hover > td {
    background: #F6FAFF !important;
}

/* 当前行 */
html body.lightStyle .lw-isCurrent > td {
    background: var(--theme-2) !important;
}

/* 表格内链接 */
html body.lightStyle .lw-link,
html body.lightStyle .inner-link,
html body.lightStyle .lw-link-wrap {
    color: var(--theme-6) !important;
}

/* 竖向网格线：需求方明确要求【保留】（数据密度高的台账表需要竖线辅助对齐）。
   平台机制：容器带 .table-vertical-lines 时
   `.lw-list.standard.table-vertical-lines .el-table--border td/th{border-right:1px solid var(--gray-5)}`；
   表头另有一条 `... .el-table__header-wrapper thead th{border-right-color:var(--gray-5)}`。
   这里【不做任何覆盖】，交回平台默认，保证与改版前表现一致。
   如需以后统一关掉竖线，再加 `border-right:0` 的覆盖即可。 */

/* 固定列（左右冻结）是不透明的独立表格，覆盖在主表之上。
   平台把斑马纹打在 tr 上、td 为 transparent：
     `.lw-list.standard .el-table--striped .el-table__body tr:nth-child(2n){background:var(--gray-2)}`
     `... tr:nth-child(2n) td{background:transparent}`
   一旦固定列容器/单元格变透明，横向滚动时主表内容就会透出来（表现为"内容重叠"、
   固定列上的斑马纹也看不见）。这里显式给固定列容器补不透明底色，并把斑马纹重打在固定列上，
   颜色沿用平台同一个 token --gray-2，避免两处深浅不一致。 */
html body.lightStyle .el-table-modern .el-table__fixed,
html body.lightStyle .el-table-modern .el-table__fixed-right {
    background-color: var(--gray-1);
}

html body.lightStyle .el-table-modern .el-table__fixed .el-table__body tr,
html body.lightStyle .el-table-modern .el-table__fixed-right .el-table__body tr {
    background-color: var(--gray-1);
}

html body.lightStyle .el-table-modern .el-table__fixed .el-table__body tr:nth-child(2n),
html body.lightStyle .el-table-modern .el-table__fixed-right .el-table__body tr:nth-child(2n) {
    background-color: var(--gray-2);
}

/* 固定列（左右冻结）是不透明的独立表格，覆盖在主表之上。
   平台把斑马纹打在 tr 上、td 为 transparent：
     `.lw-list.standard .el-table--striped .el-table__body tr:nth-child(2n){background:var(--gray-2)}`
     `... tr:nth-child(2n) td{background:transparent}`
   一旦固定列容器/单元格变透明，横向滚动时主表内容就会透出来（表现为"内容重叠"、
   固定列上的斑马纹也看不见）。这里显式给固定列容器补不透明底色，并把斑马纹重打在固定列上，
   颜色沿用平台同一个 token --gray-2，避免两处深浅不一致。 */
html body.lightStyle .el-table-modern .el-table__fixed,
html body.lightStyle .el-table-modern .el-table__fixed-right {
    background-color: var(--gray-1);
}

html body.lightStyle .el-table-modern .el-table__fixed .el-table__body tr,
html body.lightStyle .el-table-modern .el-table__fixed-right .el-table__body tr {
    background-color: var(--gray-1);
}

html body.lightStyle .el-table-modern .el-table__fixed .el-table__body tr:nth-child(2n),
html body.lightStyle .el-table-modern .el-table__fixed-right .el-table__body tr:nth-child(2n) {
    background-color: var(--gray-2);
}

/* 行高：平台默认偏挤，按设计稿放宽（Element 用 td 的 padding 控制行高） */
html body.lightStyle .el-table-modern td {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* 操作列：把文字「操作」做成小胶囊按钮，比裸文字更明确可点。
   平台的操作列单元格里有现成的 .operation-btn 容器。 */
html body.lightStyle .el-table-modern .operation-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--theme-1);
    color: var(--brand) !important;
    font-weight: 500;
    transition: background .16s, color .16s;
}

html body.lightStyle .el-table-modern .operation-btn:hover span {
    background: var(--theme-2);
    color: var(--brand-d) !important;
}

/* ==========================================================================
   8. 分页
   ========================================================================== */

html body.lightStyle .el-pager li.active {
    border-color: var(--theme-6);
    color: var(--theme-6);
}

html body.lightStyle .el-pager li:hover {
    color: var(--theme-6);
}

/* 列表底部（汇总 + 分页）：平台默认 .lw-list-footer.standard 是 row-reverse 的 flex 行、
   margin-bottom:12px，且分页按钮本身无边框无底色。这里补一条上分隔线让它与表格分开，
   并统一字号，避免汇总文字和分页挤在一起。 */
html body.lightStyle .lw-list-footer.standard {
    margin-bottom: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
}

html body.lightStyle .lw-list-footer.standard .el-pagination {
    font-size: 12.5px;
    color: var(--muted);
}

html body.lightStyle .lw-list-footer.standard .el-pagination .el-pager li {
    border-radius: var(--radius-sm);
    transition: background .16s, color .16s;
}

html body.lightStyle .lw-list-footer.standard .el-pagination .el-pager li.active {
    background: var(--theme-6);
    color: #fff;
}

html body.lightStyle .lw-list-footer.standard .el-pagination .el-pager li:hover {
    background: var(--theme-1);
    color: var(--theme-6);
}

/* ==========================================================================
   8.5 全屏 loading 遮罩（2026-10-10）
   --------------------------------------------------------------------------
   平台的全屏遮罩（v-loading.fullscreen）是 90% 不透明的白色、覆盖整个视口：
     .el-loading-mask{position:absolute;z-index:10000;background-color:#FEFFFEE5}
   它对「长耗时操作」（提交 / 导出）是需要的，但「切页面」时一闪而过 ——
   观感就是整页白闪一下。
   这里不动它的颜色，只让它【延迟 350ms 再淡入】：
     · 切页面：遮罩通常活不过 350ms，延迟期内它完全透明 → 看不到，不闪；
     · 提交 / 导出：遮罩持续更久 → 350ms 后淡入 → 完整显示成整页白遮罩。
   注意：延迟期间遮罩虽然看不见，但仍然在拦截点击（防重复提交），这正是想要的。
   纯 CSS，不需要任何脚本。
   ⚠ 只动 .is-fullscreen，不要动 .el-loading-mask 本身，
     否则表格 / 卡片内的局部 loading（v-loading="xxx"）也会被一起延迟。 */
html body .el-loading-mask.is-fullscreen {
    opacity: 0;
    animation: lw-mask-in .3s ease-in .35s forwards;
}

@keyframes lw-mask-in {
    to { opacity: 1; }
}
/* ==========================================================================
   9. 弹窗
   ========================================================================== */

.el-dialog,
.el-images {
    border-radius: var(--radius-lg);
}

/* ---- 弹窗遮罩（2026-09-29）----
   现象：全系统弹窗都没有遮罩，弹窗与父页面没有隔绝感。
   根因：平台弹窗模板是
     <div class="lw-panel"><el-dialog class="panel-dialog" :append-to-body="true" ...>
   而平台定制版 element 的 Popup.doOpen 去掉了标准版的 `modalAppendToBody ? undefined : dom`
   判断（Popup mixin 里也没有这个 prop），直接 openModal(..., this.$el, ...)，
   于是 openModal 内部 `i.parentNode.appendChild(modalDom)` 把 .v-modal 挂进了 .lw-panel；
   而 `appendToBody`（document.body.appendChild(this.$el)）挂在 watch.visible 里，
   Vue 2 的 watcher 是 nextTick 异步的 —— 等它执行时 .v-modal 已经留在 .lw-panel 了。
   结果：弹窗本体在 <body> 正常显示，遮罩却留在页面容器内，脱离顶层上下文而不可见。
   做法：不再依赖 .v-modal。.el-dialog__wrapper 本身就是
   position:fixed + 四边 0 的全屏层，且已 append-to-body 到 <body>，
   直接给它上背景即等于自带遮罩（层级、尺寸天然正确）。
   注意：加 html 前缀提优先级（平台样式运行时注入在本文件之后，见文件头说明）；
   本规则只在该弹窗打开时存在（v-show 控制），不影响普通页面。 */
html body .el-dialog__wrapper {
    background-color: rgba(0, 0, 0, .45);
}

.panel-dialog.standard .el-dialog__header {
    background-color: var(--gray-2);
    border-bottom: 1px solid var(--line);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.el-dialog__close {
    color: var(--ink-3);
}

.about-dialog .el-dialog__header {
    background-color: var(--gray-2);
    border-bottom: 1px solid var(--line);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.about-dialog .el-dialog__header .el-dialog__title {
    color: var(--gray-11);
}

/* ==========================================================================
   10. 表单控件
   ========================================================================== */

body.lightStyle .table-border-bottom .el-input__inner,
body.lightStyle .table-border-bottom .el-textarea__inner {
    border: 1px solid var(--gray-6) !important;
}

body.lightStyle .table-border-bottom .el-input.is-disabled .el-input__inner,
body.lightStyle .table-border-bottom .el-textarea.is-disabled .el-textarea__inner,
body.lightStyle .table-border-bottom .el-input.is-disabled .el-input-group__append {
    color: var(--gray-8);
    background: #ECEEF1;
    border-color: var(--gray-6);
}

html body.lightStyle .el-checkbox__inner.is-checked {
    background-color: var(--theme-6);
    border-color: var(--theme-6);
}

.el-checkbox__inner:not(.is-disabled):hover {
    border-color: var(--theme-6);
}

.el-form-item.is-required .el-form-item__label .form-label:after {
    color: #EB2F48;
}

body.lightStyle .table-border-bottom.is-required .el-form-item__label {
    color: #EB2F48;
}

/* Tabs 组件 */
html body.lightStyle .lw-tabs.standard .el-tabs__item.is-active,
body.lightStyle .lw-tabs.standard .el-tabs__item:hover {
    color: var(--theme-6);
}

html body.lightStyle .lw-tabs.standard .el-tabs__active-bar {
    background-color: var(--theme-6);
}

/* ==========================================================================
   11. 保留的历史修正
   ========================================================================== */

.el-icon-arrow-right:before {
    font-size: 10px;
}

span::before,
.lw-header .board-menu .second-menu__inner .forth-menu span::before,
.lw-header .board-menu .second-menu__inner .fifth-menu span::before {
    padding-left: 16px;
}

.lw-header .board-menu .second-menu__inner .third-menu span,
.lw-header .board-menu .second-menu__inner .forth-menu span,
.lw-header .board-menu .second-menu__inner .fifth-menu span {
    padding-left: 16px;
}

/* ==========================================================================
   12. 弹窗 / 页签 / 滚动条抖动（2026-09-21 补充）
   ========================================================================== */

/* ---- ① 按钮"一直在动"：根因已由需求方实测定位 ----
   把 `.lw-content_title-region` 的 `display:flex` 注释掉后抖动立刻消失 ——
   根因就是那一层（已改为 display:block，见上方该元素的注释）。
   所以工具栏这里**恢复成换行**，按钮放不下时正常折行，不再用横向滚动。
   保留 flex-shrink:0：避免按钮被压扁成一条细线。 */
html body.lightStyle .lw-content_header .lw-search-form.standard,
html body.lightStyle .lw-content_header .lw-items-wrapper {
    flex-wrap: wrap !important;
    overflow: visible !important;
}

html body.lightStyle .lw-content_header .lw-search-form.standard > *,
html body.lightStyle .lw-content_header .lw-items-wrapper > *,
html body.lightStyle .lw-content_header .lw-search-form.standard .el-button,
html body.lightStyle .lw-content_header .lw-items-wrapper .el-button {
    flex-shrink: 0 !important;
}

/* ---- ② 弹窗 ---- */

/* 内容外那一圈灰色细线：来自我给 .lw-region 加的卡片边框。
   平台在弹窗里只把 .lw-region 的 box-shadow/padding/background 置空，没管 border，
   所以边框漏了出来。这里在弹窗作用域内把卡片外观整体去掉。 */
html body.lightStyle .panel-dialog .lw-region,
html body.lightStyle .el-dialog .lw-region,
html body.lightStyle .el-dialog__wrapper .lw-region {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 右上角"确认"按钮与关闭 X 重叠：
   平台的关闭按钮是 .el-dialog__headerbtn{position:absolute;top:12px;right:20px}，
   而 has-title-region 时只给标题区留了 32px 右边距 —— 装不下关闭按钮，
   于是头部按钮被压到 X 下面。这里把预留空间加到 48px，并把 X 垂直居中、提到最上层。 */
html body.lightStyle .panel-dialog.standard .el-dialog__header .el-dialog__headerbtn {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 16px !important;
    line-height: 1 !important;
    font-size: 16px !important;
    z-index: 5;
}

html body.lightStyle .panel-dialog.standard.has-title-region .lw-content_title-region {
    margin-right: 48px !important;
}

/* ---- ③ 多标签页（页签）风格重做 ----
   实测结构：
     .menu-in-header (h36, flex)
       └ .contents > .contents-nav > .contents-container > .contents-container-wrapper
           └ .favorite-menu (flex:0 1 116px; h36; padding:0 8px; margin:0 2px)
               ├ 标题文字
               └ .icon-close (font-size:10px; padding:6px; transform:scale(.7))
   平台默认是纯文字 + 一条下划线，选中态只变字色，挤在一起很难看。
   改成"胶囊标签"：未选中浅灰底、hover 浅蓝、选中蓝底描边 + 蓝字。 */
html body.lightStyle .menu-in-header {
    height: 100% !important;
}

html body.lightStyle .menu-in-header .contents,
html body.lightStyle .menu-in-header .contents-container,
html body.lightStyle .menu-in-header .contents-container-wrapper {
    align-items: center !important;
    height: 100% !important;
}

html body.lightStyle .menu-in-header .favorite-menu {
    flex: 0 1 auto !important;
    height: 30px !important;
    line-height: 30px !important;
    min-width: 0;
    max-width: 150px;
    padding: 0 10px !important;
    margin: 0 4px 0 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: var(--gray-3) !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}

html body.lightStyle .menu-in-header .favorite-menu:hover {
    background: var(--theme-1) !important;
    color: var(--brand) !important;
}

html body.lightStyle .menu-in-header .favorite-menu.active {
    background: var(--theme-1) !important;
    border-color: var(--theme-3) !important;
    color: var(--brand) !important;
    font-weight: 500 !important;
    padding-right: 10px !important;
}

/* 页签文字超长时省略，不再把标签挤成"客户订单（简…" */
html body.lightStyle .menu-in-header .favorite-menu .menu-title,
html body.lightStyle .menu-in-header .favorite-menu > span:not([class]) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0;
}

/* 关闭图标：做成小圆角方块，hover 才明显 */
html body.lightStyle .menu-in-header .favorite-menu .icon-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0 !important;
    border-radius: 4px;
    font-size: 12px !important;
    transform: none !important;
    color: var(--hint) !important;
    transition: background .16s, color .16s;
}

html body.lightStyle .menu-in-header .favorite-menu .icon-close:hover {
    background: var(--theme-3) !important;
    color: var(--brand-d) !important;
}

html body.lightStyle .menu-in-header .favorite-menu.active .icon-close {
    color: var(--brand) !important;
}

/* 左右滚动箭头也统一成浅色圆角 */
html body.lightStyle .menu-in-header .contents .scroller {
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 8px;
    background: var(--gray-3);
    color: var(--ink-3);
    padding: 0 6px !important;
}

html body.lightStyle .menu-in-header .contents .scroller:hover {
    background: var(--theme-1);
    color: var(--brand);
}

/* ==========================================================================
   13. 展板菜单风格（首选项「菜单风格 = 展板」时生效）
   ==========================================================================
   结构（来自平台模板与既有覆盖）：
     .lw-header .board-menu
       ├ .top-menu__outer                  ← 一级菜单条
       │   └ .top-menu > div               ← 一级菜单项
       └ .second-menu__outer               ← 二级面板（下拉）
           └ .second-menu-each__outer.scrollbar
               └ .second-menu__inner       ← 一个分组
                   ├ span.unclick / >span  ← 分组标题
                   └ .third-menu/.forth-menu/.fifth-menu > span   ← 各级菜单项
   目标：与树形侧边栏保持同一套语言 —— 浅色、蓝色强调、圆角、无重底色。
   ========================================================================== */

/* 一级菜单条（展板模式下是【左侧竖排列表】，不是顶栏横排 —— 由需求方标注确认） */
html body.lightStyle .lw-header .board-menu .top-menu__outer {
    background: var(--gray-1) !important;
    border-right: 1px solid var(--line);
}

/* ⚠ 之前这里写的是 height:100%（按"顶栏横排"的假设），
   但一级菜单实际是竖排列表 —— 100% 会让每一项撑满整条、互相挤压，
   这就是需求方说的"一级这边看不清"。
   改成固定行高 + 圆角，竖排/横排两种情形都不会出问题。 */
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home {
    height: 36px !important;
    line-height: 36px;
    padding: 0 12px !important;
    margin: 2px 8px;
    border-radius: 8px;
    font-size: 13.5px !important;
    color: var(--ink-2) !important;
    position: relative;
    box-sizing: border-box;
    transition: background .16s, color .16s;
}

html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div:hover,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home:hover {
    background: var(--theme-1) !important;
    color: var(--brand) !important;
}

/* 选中态：浅蓝底 + 蓝字 + 左侧 3px 蓝条（与树形侧边栏同一套语言） */
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div.active,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home.is-active {
    background: var(--theme-1) !important;
    color: var(--brand) !important;
    font-weight: 500 !important;
}

/* 竖排列表不用底部横条，改成左侧竖条 */
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div.active::after {
    content: none !important;
}

html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div.active::before,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home.is-active::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
}

/* 二级面板：白底圆角卡片 + 轻阴影 */
html body.lightStyle .lw-header .board-menu .second-menu__outer {
    background: var(--gray-1) !important;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 12px 28px -12px rgba(16, 29, 51, .18);
}

html body.lightStyle .lw-header .board-menu .second-menu__outer .second-menu-each__outer.scrollbar {
    padding: 16px 20px 20px !important;
}

/* 分组标题（展板里的"一级菜单"）：
   上一版设成了 color:--muted + 12px，太淡 —— 需求方反馈"灰灰的看不清、没层次感"。
   改成：加深到 --ink、14px/600、左侧 3px 蓝色短条 + 一条底部分隔线。
   ⚠ 必须限定为【直接子元素】：`span.unclick` 在深层菜单项上也会出现
   （平台里 `.third-menu span.unclick` 是条目样式），不加 `>` 会把条目也染成标题样式。 */
html body.lightStyle .lw-header .board-menu .second-menu__inner > span,
html body.lightStyle .lw-header .board-menu .second-menu__inner > span.unclick {
    position: relative;
    display: block;
    background: none !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    padding-left: 12px !important;
    line-height: 34px !important;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 8px;
}

html body.lightStyle .lw-header .board-menu .second-menu__inner > span::before,
html body.lightStyle .lw-header .board-menu .second-menu__inner > span.unclick::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--brand);
    padding: 0 !important;
}

/* 各级菜单项 */
html body.lightStyle .lw-header .board-menu .second-menu__inner .third-menu span,
html body.lightStyle .lw-header .board-menu .second-menu__inner .forth-menu span,
html body.lightStyle .lw-header .board-menu .second-menu__inner .fifth-menu span {
    display: block;
    padding: 0 10px 0 12px !important;
    border-radius: 7px;
    font-size: 13px !important;
    color: var(--ink-2) !important;
    line-height: 30px;
    transition: background .16s, color .16s;
}

html body.lightStyle .lw-header .board-menu .second-menu__inner .third-menu span::before,
html body.lightStyle .lw-header .board-menu .second-menu__inner .forth-menu span::before,
html body.lightStyle .lw-header .board-menu .second-menu__inner .fifth-menu span::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--hint);
    padding: 0 !important;
}

html body.lightStyle .lw-header .board-menu .second-menu__inner .third-menu span:hover,
html body.lightStyle .lw-header .board-menu .second-menu__inner .forth-menu span:hover,
html body.lightStyle .lw-header .board-menu .second-menu__inner .fifth-menu span:hover,
html body.lightStyle .lw-header .board-menu .second-menu__inner .no-forth-menu:hover,
html body.lightStyle .lw-header .board-menu .second-menu__inner .no-fifth-menu:hover {
    background: var(--theme-1) !important;
    color: var(--brand) !important;
}

/* 二级面板里的收藏星标 */
html body.lightStyle .lw-header .board-menu .second-menu__outer i.favor-icon.fa {
    color: var(--gold) !important;
}

/* ---- 展板菜单：搜索框 + 一级菜单图标（第二版，按需求方反馈收敛）----
   第一版做过头了，三个问题：
   ① 给 .query-input-wrapper 加了 display:flex → 由收缩宽度变成块级全宽，
      横跨整个展板（不再等于左栏宽度）；
   ② 图标块加了灰底 —— 需求方反馈后面一圈灰底不好看；
   ③ 给 .query-input-wrapper 加了圆角/外边距，无法嵌入顶部与展板之间的那条缝。
   本版原则：**不改几何形状**，只调颜色。 */

/* ---- 搜索条（已由 Elements 确认结构）----
   div.board-menu > div.large-screen-menu (flex) > div.query-input-wrapper (flex)
       ├ i.el-icon-search / input[placeholder="查找"] / div.menu-close__icon
   它是一条【通铺的带子】，位于顶栏与展板之间的缝里 ——
   所以不能做成圆角卡片（会嵌不进去），也不该改宽度（会横跨整块展板）。
   做法：把 .large-screen-menu 当作展板的「头部」——浅灰底 + 底部分隔线，
   与下面白色菜单区形成清晰衔接；聚焦时用蓝色下划线，不用圆角。 */
html body.lightStyle .board-menu .large-screen-menu {
    background: var(--gray-2) !important;
    border-bottom: 1px solid var(--line);
}

html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background .16s, box-shadow .16s;
}

html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper:focus-within {
    background: var(--gray-1) !important;
    box-shadow: inset 0 -2px 0 0 var(--brand) !important;
}

html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper > i,
html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper .el-icon-search {
    color: var(--ink-3) !important;
    font-size: 15px !important;
}

html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper input {
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 13.5px !important;
}

html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper input::placeholder {
    color: var(--muted) !important;
}

html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper .menu-close__icon {
    color: var(--hint) !important;
    cursor: pointer;
}

html body.lightStyle .board-menu .large-screen-menu .query-input-wrapper .menu-close__icon:hover {
    color: var(--brand) !important;
}

/* 一级菜单项：flex 行（图标/文字/箭头），箭头靠右 */
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home {
    display: flex !important;
    align-items: center;
}

html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div .el-submenu__icon-arrow,
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div .el-icon-arrow-right,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home .el-submenu__icon-arrow,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home .el-icon-arrow-right {
    margin-left: auto !important;
    color: var(--hint) !important;
    font-size: 12px !important;
}

/* 图标：**不要底色块**（需求方反馈灰底不好看），只做颜色 ——
   默认中灰、悬停/选中跟随变蓝。 */
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div i:not(.el-submenu__icon-arrow):not(.el-icon-arrow-right),
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home i:not(.el-submenu__icon-arrow):not(.el-icon-arrow-right) {
    background: none !important;
    width: auto !important;
    height: auto !important;
    margin-right: 8px !important;
    color: var(--ink-3) !important;
    font-size: 15px !important;
    transition: color .16s;
}

html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div:hover i:not(.el-submenu__icon-arrow):not(.el-icon-arrow-right),
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div.active i:not(.el-submenu__icon-arrow):not(.el-icon-arrow-right),
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home:hover i:not(.el-submenu__icon-arrow):not(.el-icon-arrow-right),
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home.is-active i:not(.el-submenu__icon-arrow):not(.el-icon-arrow-right) {
    color: var(--brand) !important;
}

/* 隐藏一级菜单上多余的收藏星标（需求方反馈我的收藏后面还多一个五角星） */
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu > div i.favor-icon.fa,
html body.lightStyle .moder_header .board-menu .top-menu__outer .menu-home i.favor-icon.fa,
html body.lightStyle .moder_header .board-menu .top-menu__outer .top-menu-item i.favor-icon.fa {
    display: none !important;
}

/* ==========================================================================
   14. 主操作按钮突出（用 data-testid 精确命中）
   ==========================================================================
   背景：平台在 modern appearance 下渲染工具栏按钮时，
     buttonType  = attributes.type || (useModernAppearance && plain!==false ? "" : "primary")
     buttonPlain = attributes.plain ?? useModernAppearance
   本项目 useModernAppearance=true → type 恒为 ""、plain 恒为 true，
   **所有工具栏按钮都是 .el-button.is-plain，没有任何一个是 --primary**
   → 按类名分不出主次，「新增」和「导出」在 CSS 看来完全一样。

   实测各按钮的实际属性（2026-09-21 需求方提供）：
     class=el-button is-plain modern-btn-margin | testid=新增 | style=- | 新增
     class=el-button is-plain modern-btn-margin | testid=AI录单 | style=- | AI录单
   所以改用 data-testid（值 = 按钮标题）定位主操作 —— 纯 CSS、全局生效、无需改视图配置。
   用属性「包含」匹配（*=）而不是精确匹配（=），这样「新增」「复制新增」「新增订单」等变体都能覆盖到。

   配色沿用方案 1：其余按钮保持浅金描边，只让主操作变金色实心。
   填充色用设计稿的品牌金 #C8A44D，文字用白色。
   注意：白字在金底上对比度约 2.3:1（低于 4.5:1 的正文标准），是需求方确认过的取舍 ——
   要提升可读性可把填充色压到 #B8892F（约 3.1:1），但会偏离设计稿的观感。
   不加任何阴影，保持纯平。
   ========================================================================== */

html body.lightStyle .lw-content_header .el-button[data-testid*="新增"]:not(.is-disabled),
html body.lightStyle .lw-content_title-region .el-button[data-testid*="新增"]:not(.is-disabled),
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="新增"]:not(.is-disabled),
html body.lightStyle .panel-dialog.standard .el-button[data-testid*="新增"]:not(.is-disabled) {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #fff !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

html body.lightStyle .lw-content_header .el-button[data-testid*="新增"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_title-region .el-button[data-testid*="新增"]:not(.is-disabled):hover,
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="新增"]:not(.is-disabled):hover,
html body.lightStyle .panel-dialog.standard .el-button[data-testid*="新增"]:not(.is-disabled):hover {
    background: #B8892F !important;
    border-color: #B8892F !important;
    color: #fff !important;
    box-shadow: none !important;
}

html body.lightStyle .lw-content_header .el-button[data-testid*="新增"]:not(.is-disabled):active,
html body.lightStyle .lw-content_title-region .el-button[data-testid*="新增"]:not(.is-disabled):active,
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="新增"]:not(.is-disabled):active,
html body.lightStyle .panel-dialog.standard .el-button[data-testid*="新增"]:not(.is-disabled):active {
    background: var(--gold-d) !important;
    border-color: var(--gold-d) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ==========================================================================
   15. 收口：页签下拉 / 行操作按钮 / 固定列空白 / 弹窗标题 / 危险操作 / Toast
   ========================================================================== */

/* ---- ① 页签右侧的「全部页签」下拉离得太远 ----
   平台 .menu-in-header 是 justify-content:space-between，把下拉推到了最右边。
   改成靠左排列，并让 .contents 收缩到内容宽度，下拉就紧跟页签了。 */
html body.lightStyle .menu-in-header {
    justify-content: flex-start !important;
}

html body.lightStyle .menu-in-header .contents {
    flex: 0 1 auto !important;
}

html body.lightStyle .menu-in-header .more {
    margin-left: 6px !important;
}

/* ---- ② 行内操作按钮的灰蓝底色去掉 ----
   （之前把 .operation-btn 做成了浅蓝胶囊，需求方要求去掉底色） */
html body.lightStyle .el-table-modern .operation-btn span {
    background: none !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    color: var(--brand) !important;
}

html body.lightStyle .el-table-modern .operation-btn:hover span {
    background: none !important;
    color: var(--brand-d) !important;
    text-decoration: underline;
}

/* ---- ③ 固定列：只给「有数据的单元格」上底色 ----
   固定列是不透明的独立表格、覆盖在主表之上；平台把斑马纹打在 tr 上、
   td 是 transparent，所以必须显式给固定列的单元格补底色，
   否则横向滚动时主表内容会透出来（表现为"内容重叠"）。
   容器的底色与分隔投影保持平台原样（方案 A），不再动。 */
html body.lightStyle .el-table-modern .el-table__fixed .el-table__body tr > td,
html body.lightStyle .el-table-modern .el-table__fixed-right .el-table__body tr > td {
    background-color: var(--gray-1);
}

html body.lightStyle .el-table-modern .el-table__fixed .el-table__body tr:nth-child(2n) > td,
html body.lightStyle .el-table-modern .el-table__fixed-right .el-table__body tr:nth-child(2n) > td {
    background-color: var(--gray-2);
}

/* ---- ④ 弹窗标题行区分度不够 ----
   （此处的灰底方案已被第 22 节的「蓝白渐变 + 品牌蓝短条」取代，见文件末尾，
     这里不再保留旧规则，避免同一元素出现两套互相覆盖的写法。） */

/* ---- ⑤ 危险 / 逆向操作标红（删除、取消、撤销、作废）----
   同样用 data-testid 命中（值 = 按钮标题），做"红字 + 浅红描边"的克制品红，
   不用实心红 —— 避免整屏红色警报感。仅作用于内容区/工具栏，不含弹窗（弹窗里的
   "取消"是常规按钮，标红反而误导）。 */
html body.lightStyle .lw-content_header .el-button[data-testid*="删除"]:not(.is-disabled),
html body.lightStyle .lw-content_header .el-button[data-testid*="取消"]:not(.is-disabled),
html body.lightStyle .lw-content_header .el-button[data-testid*="撤销"]:not(.is-disabled),
html body.lightStyle .lw-content_header .el-button[data-testid*="作废"]:not(.is-disabled),
html body.lightStyle .lw-content_title-region .el-button[data-testid*="删除"]:not(.is-disabled),
html body.lightStyle .lw-content_title-region .el-button[data-testid*="取消"]:not(.is-disabled),
html body.lightStyle .lw-content_title-region .el-button[data-testid*="撤销"]:not(.is-disabled),
html body.lightStyle .lw-content_title-region .el-button[data-testid*="作废"]:not(.is-disabled),
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="删除"]:not(.is-disabled),
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="取消"]:not(.is-disabled),
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="撤销"]:not(.is-disabled),
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="作废"]:not(.is-disabled) {
    background: #FEF6F6 !important;
    border-color: #F3C9C7 !important;
    color: #C0392B !important;
}

html body.lightStyle .lw-content_header .el-button[data-testid*="删除"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_header .el-button[data-testid*="取消"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_header .el-button[data-testid*="撤销"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_header .el-button[data-testid*="作废"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_title-region .el-button[data-testid*="删除"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_title-region .el-button[data-testid*="取消"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_title-region .el-button[data-testid*="撤销"]:not(.is-disabled):hover,
html body.lightStyle .lw-content_title-region .el-button[data-testid*="作废"]:not(.is-disabled):hover,
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="删除"]:not(.is-disabled):hover,
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="取消"]:not(.is-disabled):hover,
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="撤销"]:not(.is-disabled):hover,
html body.lightStyle .lw-content.moder_concent .el-button[data-testid*="作废"]:not(.is-disabled):hover {
    background: #FCEBEB !important;
    border-color: #E8908C !important;
    color: #A32D2D !important;
}

/* ---- ⑥ Toast / 通知样式 ----
   Element 的 .el-message 默认是白底 + 彩色图标文字，圆角和阴影都比较生硬。
   统一成：白底 + 圆角 10px + 极轻投影 + 左侧 3px 彩色条，四种语义色与皮肤对齐。 */
html body.lightStyle .el-message,
html body.lightStyle .el-notification {
    border-radius: 10px !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 12px 28px -14px rgba(16, 29, 51, .30) !important;
    padding: 12px 16px !important;
    background: var(--gray-1) !important;
    min-width: 300px;
    overflow: hidden;
}

html body.lightStyle .el-message__content,
html body.lightStyle .el-notification__content,
html body.lightStyle .el-notification__title {
    font-size: 13px !important;
    color: var(--ink) !important;
    line-height: 1.6 !important;
}

html body.lightStyle .el-message__icon,
html body.lightStyle .el-notification__icon {
    font-size: 16px !important;
    margin-right: 10px !important;
}

html body.lightStyle .el-message .el-icon-success,
html body.lightStyle .el-notification .el-icon-success {
    color: #1D9E75 !important;
}

html body.lightStyle .el-message .el-icon-warning,
html body.lightStyle .el-notification .el-icon-warning {
    color: #B07213 !important;
}

html body.lightStyle .el-message .el-icon-error,
html body.lightStyle .el-notification .el-icon-error {
    color: #E2453F !important;
}

html body.lightStyle .el-message .el-icon-info,
html body.lightStyle .el-notification .el-icon-info {
    color: var(--brand) !important;
}

/* 左侧语义色条 */
html body.lightStyle .el-message--success {
    border-left: 3px solid #1D9E75 !important;
}

html body.lightStyle .el-message--warning {
    border-left: 3px solid #EF9F27 !important;
}

html body.lightStyle .el-message--error {
    border-left: 3px solid #E2453F !important;
}

html body.lightStyle .el-message--info {
    border-left: 3px solid var(--brand) !important;
}

html body.lightStyle .el-message__closeBtn,
html body.lightStyle .el-notification__closeBtn {
    color: var(--hint) !important;
}

html body.lightStyle .el-message__closeBtn:hover,
html body.lightStyle .el-notification__closeBtn:hover {
    color: var(--ink-2) !important;
}

/* ==========================================================================
   16. 修正 ① 页签下拉位置、③ 固定列空白区（按 Elements 实测结构重做）
   ==========================================================================
   ① 实测结构：
        .menu-in-header (flex)
          ├ .contents        style="width: 1061px;"   ← 平台把可用宽度【内联】写死
          └ .more            ← 下拉（含 span[data-testid="图标_展开更多页面"] > i.icon-more）
      上一版改 justify-content 无效 —— 因为 .contents 是内联宽度，
      等于把下拉硬推到了 1061px 之后。必须用 !important 覆盖内联宽度：
      改成 width:auto（收缩到页签实际宽度）+ max-width:100%（页签过多时仍能裁剪滚动）。
   ========================================================================== */

html body.lightStyle .menu-in-header .contents {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

html body.lightStyle .menu-in-header .more {
    flex: 0 0 auto !important;
    margin-left: 6px !important;
}

/* ==========================================================================
   ③ 实测结构：
        .el-table__fixed-right  style="width:60px; height:274px;"   ← 整表高度
          ├ .el-table__fixed-header-wrapper
          ├ .el-table__fixed-body-wrapper  style="top:34px; height:215px;"  ← 只有数据行
          └ .el-table__fixed-summary-wrapper
      固定列容器的高度是「整表高度」，比数据区高 —— 所以行下方空白区也带着它的底色/边线，
      看起来就是"空白处还有一层"。做法：容器底色与表格空白区保持一致（白），
      并去掉固定列自带的分隔投影与 ::before 细线，让空白区完全连成一片。
      （单元格底色仍由上面的规则单独控制，横向滚动时不会透出主表内容。）
   ========================================================================== */

/* 固定列容器：只补不透明底色（解决横向滚动时主表内容透出），
   分隔投影保持平台原样（方案 A）。 */
html body.lightStyle .el-table-modern .el-table__fixed,
html body.lightStyle .el-table-modern .el-table__fixed-right {
    background-color: var(--gray-1) !important;
}


/* ==========================================================================
   18. 页签下拉位置：从【内层】收缩（诊断后修正）
   ==========================================================================
   诊断结果：inlineW=1061px、inlinePriority=(空)、computedW=1061px。
   内联宽度不是 important，我的 width:auto!important 却没让它变小 ——
   说明 .contents 的 **max-content 本身就是 1061**：内层的
     .contents-nav > .contents-container > .contents-container-wrapper
   都是 flex:1（会撑满），于是父级的 max-content 被撑到可用宽度，
   外层的 width:auto 只是"回到 max-content"，自然还是 1061。
   平台 CSS 里没有给 .contents 设宽度 → 1061 是 JS 写的内联值。

   做法：把内层这三层的 flex 增长关掉、改成收缩到内容宽度，
   这样 .contents 的 max-content 就等于页签的实际总宽，下拉自然跟上。
   ========================================================================== */

html body.lightStyle .menu-in-header .contents-nav,
html body.lightStyle .menu-in-header .contents-container,
html body.lightStyle .menu-in-header .contents-container-wrapper {
    flex: 0 1 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
}


/* ==========================================================================
   22. 弹窗标题栏重做（不再靠灰度差，改用色彩 + 结构）
   ==========================================================================
   需求方反馈：上一版只是把灰色加深，整个弹窗仍是灰白色调 —— 既没区分度也不好看。
   根因是思路错了：**区分度靠"灰度差"做不出来**（灰底和白底天然接近），
   应该靠【色彩 + 结构】。

   本版按皮肤已有的设计语言来（蓝色强调 + 左侧短条，与菜单选中态、展板分组标题一致）：
     - 标题栏：极浅的蓝白渐变底（不是灰）—— 一眼能看出"这是标题区"
     - 标题左侧 3px 品牌蓝短条 —— 与菜单/展板同一套视觉语言
     - 底边框改用浅蓝 --theme-3，而不是灰色分隔线
     - 关闭按钮做成 28px 圆角方块，hover 才有底色，比裸 ✕ 更精致
     - 底部按钮区补上边框与浅底，与内容区拉开
   ========================================================================== */

html body.lightStyle .panel-dialog.standard .el-dialog__header {
    background: linear-gradient(180deg, #F7FAFF 0%, #F1F7FF 100%) !important;
    border-bottom: 1px solid var(--theme-3) !important;
    padding: 14px 52px 14px 22px !important;
    position: relative;
}

/* 标题左侧的品牌蓝短条 */
html body.lightStyle .panel-dialog.standard .el-dialog__header::before {
    content: "" !important;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--brand);
}

html body.lightStyle .panel-dialog.standard .el-dialog__header .el-dialog__title {
    color: var(--ink) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 22px !important;
}

/* 关闭按钮：28px 圆角方块，hover 才显底色 */
html body.lightStyle .panel-dialog.standard .el-dialog__headerbtn {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .16s, color .16s;
}

html body.lightStyle .panel-dialog.standard .el-dialog__headerbtn:hover {
    background: var(--theme-2) !important;
}

html body.lightStyle .panel-dialog.standard .el-dialog__headerbtn .el-dialog__close {
    color: var(--ink-3) !important;
    font-size: 15px !important;
}

html body.lightStyle .panel-dialog.standard .el-dialog__headerbtn:hover .el-dialog__close {
    color: var(--brand) !important;
}

/* 底部按钮区：补边框与浅底，和内容区拉开 */
html body.lightStyle .panel-dialog.standard .el-dialog__footer {
    border-top: 1px solid var(--line);
    background: var(--gray-2);
    padding: 12px 16px !important;
}

/* ==========================================================================
   版本更新记录 · 详情页卡片（方案 A：分组卡片式）
   --------------------------------------------------------------------------
   用途：配合页面 jshz_releasenote_view 里的 lw-free-div / tmplJs 使用。
   落位：已追加到 biz-jshz/src/main/resources/projects/biz-jshz/assets/css/logwire.css 末尾；
        本文件是源头，改样式请两边同步。
   作用域：.rn-view（tmplJs 输出的最外层容器），不会影响其它页面。

   注意：平台组件样式是运行时注入到 <head> 的，注入位置在 logwire.css 之后，
   所以这里统一加 `html` 前缀多一层优先级（与 logwire.css 既有做法一致）。
   ========================================================================== */

html .rn-view {
    padding: 4px 2px 10px;
}

/* ---- 版本头 ---- */
html .rn-view .rn-head {
    padding-bottom: 2px;
}

/* ---- 版本头：第一行 版本号+版本标题，第二行 发布日期 ---- */
html .rn-view .rn-line1 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

html .rn-view .rn-vno {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .4px;
    color: var(--ink, #0F1B33);
}

html .rn-view .rn-vtitle {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .4px;
    color: var(--ink-2, #41546F);
}

html .rn-view .rn-line2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    flex-wrap: wrap;
}

html .rn-view .rn-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    flex-wrap: wrap;
}

html .rn-view .rn-type {
    font-size: 11.5px;
    font-weight: 500;
    padding: 2.5px 9px;
    border-radius: 20px;
    background: var(--theme-2, #EAF2FF);
    color: var(--theme-7, #1B54CC);
}

html .rn-view .rn-date {
    font-size: 12.5px;
    color: var(--muted, #7C8AA3);
}

html .rn-view .rn-sum {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--ink-2, #41546F);
    white-space: pre-line;
}

/* ---- 隐藏滚动条（保留滚动能力）----
   滚动条会占掉十几像素宽度，让内容区比顶部标题栏窄一点点，看起来两块没对齐。
   锚在 :has(.rn-view) 上按需生效 —— 离开这个页面后选择器自动失配，滚动条恢复，
   不影响系统里其它页面。
   ::-webkit-scrollbar 管 Chrome/Edge/Safari，scrollbar-width 管 Firefox。 */
html:has(.rn-view)::-webkit-scrollbar,
html:has(.rn-view) *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

html:has(.rn-view),
html:has(.rn-view) * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ---- 版本块：做成独立卡片，块与块之间界限清楚 ---- */
html .rn-view .rn-ver {
    background: #fff;
    border: 1px solid var(--line, #E8EDF5);
    border-left: 3px solid var(--brand, #2F78F8);
    border-radius: 10px;
    padding: 16px 20px 18px;
    box-shadow: 0 1px 6px rgba(21, 52, 125, .06);
}

html .rn-view .rn-ver + .rn-ver {
    margin-top: 16px;
}

/* ---- 分类分组 ---- */
html .rn-view .rn-grp {
    margin-top: 20px;
}

html .rn-view .rn-grph {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

html .rn-view .rn-gtag {
    font-size: 12.5px;
    font-weight: 600;
    padding: 3.5px 11px;
    border-radius: 7px;
    white-space: nowrap;
}

html .rn-view .rn-gcnt {
    font-size: 12px;
    color: var(--hint, #A3AFC2);
}

html .rn-view .rn-gline {
    flex: 1;
    height: 1px;
    background: var(--line-2, #F1F5FA);
}

/* ---- 条目 ---- */
html .rn-view .rn-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--gray-2, #FAFBFC);
    margin-bottom: 7px;
}

html .rn-view .rn-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 8px;
    flex: none;
}

html .rn-view .rn-txt {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-10, #23324A);
    word-break: break-word;
    white-space: pre-line;
}

html .rn-view .rn-mod {
    flex: none;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--gray-8, #8592A6);
    background: #fff;
    border: 1px solid var(--line, #E8EDF5);
    border-radius: 6px;
    padding: 1.5px 7px;
    white-space: nowrap;
}

html .rn-view .rn-no {
    flex: none;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--hint, #A3AFC2);
    white-space: nowrap;
}

html .rn-view .rn-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 13px;
    color: var(--hint, #A3AFC2);
}

/* 诊断信息（只在取不到数据时出现，正常看不到） */
html .rn-view .rn-diag {
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px dashed #E4C58A;
    border-radius: 7px;
    background: #FDF8EE;
    font-family: Consolas, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.7;
    color: #8A6420;
    word-break: break-all;
}

/* ---- 分类配色 ---- */
html .rn-view .rn-c-feat { background: #E1F5EE; color: #0F6E56; }
html .rn-view .rn-c-bug  { background: #FAEEDA; color: #854F0B; }
html .rn-view .rn-c-imp  { background: #E6F1FB; color: #185FA5; }
html .rn-view .rn-c-oth  { background: #F1EFE8; color: #5F5E5A; }

html .rn-view .rn-d-feat { background: #1D9E75; }
html .rn-view .rn-d-bug  { background: #EF9F27; }
html .rn-view .rn-d-imp  { background: #378ADD; }
html .rn-view .rn-d-oth  { background: #888780; }

/* ---- 隐藏平台自动生成的「更新条目」明细网格 ----
   <Item> 声明必然渲染出「网格 + 工具条」，配置项关不掉（itemLayout 只有 tabs / grid 两种取值），
   所以只能 CSS 藏。选择器锚在 .rn-view 上：
     - 卡片渲染出来时才生效（:has(> .rn-view) 或兄弟关系）
     - 弹窗关闭后 .rn-view 不存在，选择器失配 → 不会误伤其它有选项卡的页面
   实测：选项卡的 DOM 是 .el-tabs[data-testid="选项卡"]，data-testid 不带标题，
   所以不能按标题匹配；平台也没有给这个 wrapper 生成可用的 testid。 */
html body.lightStyle :has(> .rn-view) .el-tabs,
html body.lightStyle .rn-view ~ .el-tabs,
html body.lightStyle :has(> .rn-view) > .el-tabs {
    display: none !important;
}

/* ---- 入口页（jshz_releasenoteitem_view_search）：只保留卡片流 ----
   注意：**不要用 `:has(.rn-view) ~ *` 去隐藏整个列表 region** —— 实测那样做会让平台
   的列表组件不加载数据，卡片流拿不到 $$.rows（页面变成"暂无版本更新记录"）。
   现在的做法是**在页面配置层面**让表格没有可见列（<fields> 全部 mode="hide"），
   CSS 只做兜底，且只针对表格/分页本身、不碰容器。
   锚在 .rn-view 上：只有卡片渲染出来时才生效，不影响其它页面。 */
html body.lightStyle :has(> .rn-view) .el-table,
html body.lightStyle :has(> .rn-view) .el-pagination,
html body.lightStyle .rn-view ~ .el-table,
html body.lightStyle .rn-view ~ .el-pagination {
    display: none !important;
}