/****** iframe页面 公共样式 *******/
.iframe_container {
    padding: 7px;
    height: calc(100% - 27px);
}

/* =====================================================================
   lyh 2026-09-20：查询区「列宽 / 排序 / 对齐」统一规则
   ---------------------------------------------------------------------
   ★ 第四版核心变更：按 ColSpan 精确占列（解决「排列错位、杂乱、没对齐」）
     ------------------------------------------------------------------
     第三版把字段项设为 flex:0 0 auto（按内容宽）以救活 ColSpan(2)，
     但副作用是字段宽度脱离 4 列网格基准 —— 多个字段挤同一行时各自按
     内容宽显示，实测列宽参差到 0.60~1.32 列、dx-col-N 序号失序
     （0,1,3,0,1），视觉上就是「排列错位、杂乱、没对齐」。

     修复：后端 PublicDeal.构建列表头 在产出字段时按 ColSpan 写上
     CssClass（cs1 / cs2 / cs4），CSS 第 4 条据此用 flex-basis 精确
     占列 —— 每个字段严格占满整数列，恢复整齐的 4 列网格。
     （CSS 无法自行反推 ColSpan，故必须由后端下发类名。）

     实测（/Buyin/BuyinOrder，boxW=1564）：
       改前：组织 0.68列 / 操作日期 1.32列 / 采购单号 0.60列 …（参差）
             dx-col-N = 0,1,3,0,1（失序）
       改后：组织 0.249列 / 操作日期 0.499列 / 采购单号 0.249列（精确）
             采购类型·简称·全称 全部 0.249列；contX 对齐 69/478/867/1258
     12 页回归：noCs=0（每字段都有类）、越界=0（无字段超出所在列）

   ★ 第三版：作用域不再依赖 .iframe_container
     ------------------------------------------------------------------
     第二版的规则全部写成 `.iframe_container .dx-form:has(.form_button) ...`，
     实测发现全站 46 个带 form_button 的页面里有 6 个【没有 .iframe_container
     包裹层】，各自使用自己的页面级 class，导致这些页面的查询区规则完全失效：
       /LockPrice/LockPriceIndex         → .lock-price-page / .lock-price-query
       /BasicInformation/BasicInfo       → .basic-info-container
       /MenuManagement/MenuManagementIndex → .menu-manage-page
       /RawMaterialPSI/RawMaterialPSIIndex → .raw-material-psi-page
       /StripOrderOne/StripOrderOneIndex  → .strip-one-page
       /WeighingRoom/WeighingRoomIndex    → .weighing-room-page

     修复思路：form_button 这个类【只由各页面查询区的 AddButton() 产出】，
     本身就是最精准的判据，无需再叠加容器前缀。因此统一去掉
     `.iframe_container`，改为 `.dx-form:has(.form_button) ...` 全局生效。
     弹窗按钮走 popup 底部 toolbar，不带 form_button，天然不受影响
     （弹窗隔离实测：wrap:nowrap / rowGap:normal / 富文本仍 94px 多行）。
   ===================================================================== */

/* 1) 所有 collection：横向排列 + 允许换行 + 底部对齐 + 行间 4px */
.dx-form:has(.form_button) .dx-box-flex.dx-box.dx-collection {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    row-gap: 4px !important;
}

/* 2) 中间包裹层全部透明：嵌在 item 里的 collection / 各种 group+layout 层
      —— 让字段与按钮上浮到同一个 flex 上下文（第一版保留） */
.dx-form:has(.form_button) .dx-box-item > .dx-box.dx-collection,
.dx-form:has(.form_button) .dx-box-item > .dx-box-item-content,
.dx-form:has(.form_button) .dx-box-item-content > .dx-box.dx-collection,
.dx-form:has(.form_button) .dx-box-item-content > .dx-form-group,
.dx-form:has(.form_button) .dx-box-item-content > .dx-form-group-content,
.dx-form:has(.form_button) .dx-box-item-content > .dx-layout-manager,
.dx-form:has(.form_button) .dx-box-item-content > .dx-responsivebox,
.dx-form:has(.form_button) .dx-item-content > .dx-box.dx.collection,
/* group 外壳（DevExtreme 给含 colSpan / 组字段套的 .dx-field-item 包装） */
.dx-form:has(.form_button) .dx-field-item.dx-field-item-has-group,
.dx-form:has(.form_button) .dx-item.dx-box-item {
    display: contents !important;
}

/* 3) ★ 解开宽度锁：组壳那层原本只有 1057px（外层容器 1580px），
      右侧 523px 被空置 —— 一律撑满，查询区用足整行宽度 */
.dx-form:has(.form_button) .dx-form-group,
.dx-form:has(.form_button) .dx-form-group-content,
.dx-form:has(.form_button) .dx-layout-manager,
.dx-form:has(.form_button) .dx-responsivebox,
.dx-form:has(.form_button) .dx-field-item-content {
    width: 100% !important;
}

/* 4) ★★ 字段项：按 ColSpan 精确占列（第四版核心修复）
      ------------------------------------------------------------------
      问题：第三版把字段项设为 flex:0 0 auto（按内容宽），虽让 ColSpan(2) 生效，
            却让字段宽度脱离 4 列网格基准 —— 多个字段挤同一行时各自按内容宽显示，
            实测列宽参差到 0.60~1.32 列、dx-col-N 序号失序（0,1,3,0,1），
            视觉上就是「排列错位、杂乱、没对齐」。
      修复：后端在「构建列表头」产出字段时按 ColSpan 写入 CssClass（cs1/cs2/cs4），
            此处按类名用 flex-basis 精确占列 —— 每个字段严格占满整数列，
            恢复整齐的 4 列网格；跨列字段（日期区间/富文本/超宽字段）仍占 2 列。

      ★ 第五版：为按钮预留空间，解决「4 个字段正好占满一行时按钮被挤到第 2 行」
        实测（/Vendors/Vendors，boxW=1558）：4 个单列字段各 387.5px，合计 1550px，
        只剩 8px，而查询按钮宽 90px + 6px padding = 96px → 必然换行，白白多占一行。
        改法：单列宽度从 `25% - 2px` 收窄到 `calc(25% - 26px)`，
        4 列共让出 104px ≈ 刚好容纳一个按钮；按钮装得下就不再换行。
        收窄量取 26px 的依据：常见按钮宽 70~96px（含 6px 左内边距），
        4 列均摊每列让 26px（共 104px）可覆盖「单个查询按钮」的绝大多数情形。
        （按钮本身 flex:0 0 auto，宽度自适应，不需要预设大小）

      间隙：单行最多 4 个字段，字段间实际留出的空隙由 row-gap/gap 承担，
            这里用负 px 抵消是为了避免 4×(25%) 恰好等于 100% 导致换行。
      ------------------------------------------------------------------ */
.dx-form:has(.form_button) .dx-field-item:not(.dx-field-button-item) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* 4a) 单列：占 1/4 行宽，并让出 26px 给查询按钮 */
.dx-form:has(.form_button) .dx-field-item.cs1 {
    flex-basis: calc(25% - 26px) !important;
    width: calc(25% - 26px) !important;
    max-width: calc(25% - 26px) !important;
}

/* 4b) 跨 2 列：日期区间 / 富文本 / 数据库宽度超 1 列的字段 */
.dx-form:has(.form_button) .dx-field-item.cs2 {
    flex-basis: calc(50% - 26px) !important;
    width: calc(50% - 26px) !important;
    max-width: calc(50% - 26px) !important;
}

/* 4c) 占满整行（保留为兜底）：后端第五版已不再产出 cs4 ——
      「末行独占 4 列」规则已移除（用户要求日期区间始终只占 2 列）。
      此处保留以免历史缓存页面出现无类名而退回按内容宽。 */
.dx-form:has(.form_button) .dx-field-item.cs4 {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 5) ★ 按钮项：不撑满高度（改前 62px 导致独占一行、字段被挤到下一行），
      压到与字段同高并垂直居中；order 让多个按钮统一排到最后连续排列 */
.dx-form:has(.form_button) .dx-field-button-item {
    order: 999 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 27px !important;
    align-self: center !important;
    padding-left: 6px !important;
}

/* 6) 按钮本体：宽度自适应、文字不折行，且不被压成细条，与字段同高 */
.dx-form:has(.form_button) .dx-field-button-item .dx-button {
    width: auto !important;
    min-width: 64px !important;
    height: 27px !important;
    white-space: nowrap;
}

/* 7) ★ 行距压紧：DevExtreme 给 field-item / box-item 带 13px 纵向 margin，
      多行时 53 = 13 + 27 + 13，纵向空间被浪费 —— 清零，行间只留 row-gap */
.dx-form:has(.form_button) .dx-field-item,
.dx-form:has(.form_button) .dx-box-item,
.dx-form:has(.form_button) .dx-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 8) ★★ 标签宽度统一 62px —— 解决「第 1 行与第 2 行输入框左边界不对齐」。
      lyh 2026-09-20：根因是 DevExtreme 按「每行最长标签」逐行算标签宽，
      把结果写进 .dx-field-item-label-content 的内联 style：
        第一行最长是「操作日期」(4 字) → 全行 width:62px；
        第二行最长只有「全称」(2 字)   → 全行 width:36px。
      于是第二行输入框起点比第一行左偏 26px，视觉上「乱」。
      实测三页（BuyinOrder / InStock / MaterialArrive）：
        改前 labelW 有 2~3 种：[36,62] / [36,62] / [49,62]；
        改后一律 [62]，首列输入框起点全部收敛到 69，
        后续列以 287px 等步进（356 / 643 / 930 …）整齐排列。
      取值 62px 的理由：最长标签「操作日期」实测 62px（4 字 × 15px + 内边距），
        低于此值（如 52px）DevExtreme 会对长标签做补偿，反而在同一行内产生
        59/79 两种起点；62px 恰好容纳全部 4 字标签，无需补偿。
      注：后端 FormItemLabelBuilder 无 Width 方法（仅 Alignment/Location/
        Option/ShowColon/Template/Text/Visible），故只能走 CSS。
      弹窗标签不受影响（弹窗无 form_button，见文首第三版说明）。 */
.dx-form:has(.form_button) .dx-field-item-label {
    width: 62px !important;
    flex: 0 0 62px !important;
}

.dx-form:has(.form_button) .dx-field-item-label-content {
    width: 62px !important;
}

.dx-form:has(.form_button) .dx-field-item-label-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 9) ★★ 弹窗（新建/修改/双击浏览）行距压紧 —— 对齐查询区
      ------------------------------------------------------------------
      问题（lyh 2026-09-20）：「新建、修改、双击浏览弹窗的，每行之间的间距太大，
        要调整和刚刚查询那边一样的间距」。

      根因：DevExtreme 自带样式（dx.material.blue.light.css）里有
        .dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs)
                   :not(.dx-first-row):not(.dx-label-v-align) { padding-top: 26px; }
        → 凡是「不在第一行」的字段项都被塞 26px 上内边距，这是 DevExtreme
          内置的纵向行距方案。实测「新增备品备件订单」弹窗（/InventoryOrder/PurchaseOrder）：
            第 1 行 订单单号 …  y=55  h=27  pt=0
            第 2 行 仓库     …  y=82  h=53  pt=26px  ← 27 + 26
            第 3 行 采购类型 …  y=135 h=90  pt=26px
          行与行之间视觉上就是 26px，明显比查询区的 4px 松散。

      查询区之所以没这个问题：第 7 条规则的 `.dx-form:has(.form_button) .dx-field-item`
        已把 padding-top 清零。而弹窗【没有 form_button】（按钮走 popup 底部 toolbar），
        所以第 7 条天然不命中，弹窗就一直沿用 DevExtreme 的 26px。

      作用域为什么用 .dx-popup-wrapper：
        实测该弹窗内容容器的祖先链是
          div.dx-overlay-content.dx-popup-normal
            → div.dx-overlay-wrapper.dx-popup-wrapper   ← 挂在 body 下
              → body
        .dx-popup-wrapper 由 DevExtreme 动态创建并 append 到 body，
        与查询区所在的 .iframe_container / 页面级容器完全不相交：
          实测 当前文档
            .dx-popup-wrapper .dx-form      → 1（弹窗表单）
            .dx-form:has(.form_button)      → 1（查询区表单）
            .use_popup_container .dx-form   → 0（这个类不可靠，不用）
        故用 .dx-popup-wrapper 前缀既精准命中弹窗、又绝不外溢到查询区。

      ★ 只改纵向间距，不碰宽度/占列 —— 弹窗有自己的 ColCount，不能被查询区的
        cs1/cs2 flex-basis 规则污染，所以这里不写任何 width / flex-basis。
      ------------------------------------------------------------------ */
.dx-popup-wrapper .dx-form .dx-field-item,
.dx-popup-wrapper .dx-form .dx-box-item,
.dx-popup-wrapper .dx-form .dx-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 9a) 行间只留 4px，与查询区的 row-gap:4px 一致 */
.dx-popup-wrapper .dx-form .dx-box-flex.dx-box.dx-collection {
    row-gap: 4px !important;
}

/* 9b) 富文本/多行控件在弹窗里保持自身高度，不被 9a 的行距影响 */
.dx-popup-wrapper .dx-form .dx-field-item-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 9c) 弹窗标签宽度对齐查询区（DevExtreme 按行算宽会导致跨行输入框左边界不齐） */
.dx-popup-wrapper .dx-form .dx-field-item-label {
    width: 62px !important;
    flex: 0 0 62px !important;
}

.dx-popup-wrapper .dx-form .dx-field-item-label-content {
    width: 62px !important;
}

.dx-popup-wrapper .dx-form .dx-field-item-label-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

    .iframe_container .iframe_container-table .dx-gridbase-container > .dx-datagrid-rowsview.dx-scrollable {
        /*        margin-bottom: 35px;*/
    }

    /*    .iframe_container .form_button .dx-button {
        height: 26px !important;
    }*/


    .iframe_container .iframe_container-table {
        margin: 10px 0px 0px;
        height: calc(100% - 37px);
        overflow: auto;
        will-change: tranforms;
    }

        .iframe_container .iframe_container-table > .dx-widget {
            height: calc(100% - 36px);
        }

        .iframe_container .iframe_container-table .dx-datagrid {
            /*height: calc(100vh - 92px);*/
            overflow: auto;
            will-change: tranforms;
        }

        /* 设置网格的行高度 - 已由 globalFontSize.js 统一控制 */
        /* .iframe_container .iframe_container-table .dx-datagrid-rowsview table tbody tr td {
            line-height: 0px !important;
        } */

        /*       .iframe_container .iframe_container-table .dx-button {
            height: 24px !important;
            min-width: 24px !important;
        }*/

        .iframe_container .iframe_container-table .dx-pager {
            position: fixed !important;
            bottom: 0 !important;
            left: 7px;
            right: 7px;
            height: 34px !important;
            padding: 5px 20px !important;
            width: auto;
            box-sizing: border-box;
            background-color: #fff !important;
        }

            .iframe_container .iframe_container-table .dx-pager .dx-page-sizes .dx-page-size,
            .iframe_container .iframe_container-table .dx-pager .dx-pages .dx-page,
            .iframe_container .bottom-section .dx-pager .dx-page-sizes .dx-page-size,
            .iframe_container .bottom-section .dx-pager .dx-pages .dx-page {
                line-height: 5px !important;
            }

    .iframe_container .bottom-section > div {
        height: calc(100% - 34px) !important;
        overflow: hidden;
    }

    .iframe_container .iframe_container-table .dx-pager .dx-pages .dx-next-button,
    .iframe_container .iframe_container-table .dx-pager .dx-pages .dx-prev-button {
        line-height: 17px !important;
    }

    .iframe_container .dx-pager {
        position: fixed !important;
        bottom: 0 !important;
        left: 7px;
        right: 7px;
        height: 34px !important;
        padding: 5px 20px !important;
        width: auto;
        box-sizing: border-box;
        background-color: #fff !important;
    }

        .iframe_container .dx-pager .dx-pages .dx-navigate-button {
            height: 5px;
        }

    .iframe_container .iframe_container-table .dx-button.dx-dialog-button {
        height: 28px !important;
        min-width: 60px !important;
    }


@media screen and (max-width:767px) {
    .iframe_container .iframe_container-table {
        /*padding-bottom: 27px;*/
    }
}

/** popup弹框 公共样式 */
.dx-popup-wrapper > .dx-overlay-content {
    margin: 10px !important;
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
    height: 38px !important;
    line-height: 38px !important;
}

.dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button {
    height: 25px !important;
}

.dx-popup-title.dx-toolbar .dx-toolbar-label {
    font-size: 16px !important;
}

.dx-popup-content.dx-dialog-content {
    text-align: center !important;
}

.dx-popup-content {
    padding: 5px 24px;
    /*overflow: visible;*/
}

.dx-popup-bottom.dx-toolbar {
    /*margin-top: 22px !important;*/
    margin-top: 0px !important;
    padding: 0 25px;
}

.dx-popup-content.dx-dialog-content {
    padding: 24px 24px 0 24px;
}

.dx-button.dx-closebutton {
    min-width: 25px !important;
    height: 25px !important;
}

.dx-button.dx-dialog-button {
    height: 25px !important;
}