/* ============================================================
   织布 ERP — v51 redesign legacy bridge
   --------------------------------------------------------------
   目的:让 ds.css / app.css 全局接管后,**旧 PAGES 页面**不至于
        layout 立即崩溃(form 强制 2 列、badge 没子 class 等)。

   原则:
     - 不修改 ds.css / app.css(让设计师后续 sync 容易)
     - 用 .module-page 作为"旧页面"namespace(现有 PAGES 普遍用)
     - override 仅针对真的会让 UI 崩坏的 class
     - 视觉变化(.btn 变高、字体变 IBM Plex 等)接受,不 override
   ============================================================ */

/* ---- form-grid:旧页面用 5/6 列,ds.css 强制 2 列会崩 ---- */
.module-page .form-grid,
.modal-body .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3, 12px);
}
.module-page .form-grid .form-full,
.modal-body .form-grid .form-full {
  grid-column: 1 / -1;
}

/* ---- badge 兼容:旧裸 .badge(没 .badge-ok 等)仍显示成 box ---- */
.module-page .badge:not([class*="badge-"]),
.modal-body .badge:not([class*="badge-"]) {
  background: var(--surface-3, #f1f5f9);
  color: var(--ink-2, #475569);
}
.module-page .badge::before,
.modal-body .badge::before {
  display: none;   /* 旧 badge 没有彩色 dot,加了会变奇怪 */
}

/* ---- 旧 modal-backdrop:跟 ds.css 的 .scrim 模型不同,保留旧的 ---- */
.modal-backdrop {
  /* ds.css 没有 .modal-backdrop,这里只是保险:不让 .modal 内的样式被新设计覆盖太多 */
}
.modal-backdrop .modal {
  /* 旧 .modal 是 modal-backdrop 的子元素,跟设计稿 .scrim > .modal 用法不同
     ds.css 把 .modal 当 surface 卡片来设,我们保留旧的位置/大小/动画 */
  max-width: none;   /* 旧 .modal 通常自带 width 内联,不要强制 max-width:640px */
}

/* ---- 旧 .notice-bar:ds.css 没定义,保留旧的视觉(它就是个提示 div)---- */
/* 不 override,因为没冲突 */

/* ---- 旧 stat-card:ds.css 没定义,保留 ---- */

/* ---- 旧 data-table:旧 PAGES 大量用,ds.css 没 hit(用 .dt),保留 ---- */
/* 旧 .data-table 的 table-layout:fixed 仍生效;只是 row 内 .btn 会变高 32px */
.module-page .data-table th,
.module-page .data-table td {
  vertical-align: middle;   /* 32px 高的 .btn 在 td 里垂直居中,避免裂开 */
}

/* ---- 旧 .form-group label 跟 ds.css .field label 不冲突,保留 ---- */
/* 旧 form-group 内 input/select 高度可能跟 ds.css 的 32px 不一致 — 接受变高 */

/* ---- topbar .seg 按钮 active 状态视觉(密度切换器)---- */
.tb-right .seg button[data-density].active {
  background: var(--surface);
  color: var(--ink-1);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   字号整体放大(v51e)
   ds.css 默认对 ERP 数据密集场景偏小(--fs-base:13px)。这里
   整体往上推一档(标准密度时),sidebar 再额外加大。
   data-density 切到 compact/cozy 时 ds.css 自带的特殊值仍生效。
   ============================================================ */
:root {
  --fs-display: 28px;  --lh-display: 36px;
  --fs-h1:      22px;  --lh-h1:      30px;
  --fs-h2:      17px;  --lh-h2:      25px;
  --fs-base:    15px;  --lh-base:    22px;
  --fs-sm:      14px;  --lh-sm:      20px;
  --fs-xs:      13px;  --lh-xs:      18px;
  --fs-2xs:     11px;  --lh-2xs:     15px;
  --row-h:      40px;
  --cell-px:    13px;
}

/* ============================================================
   sidebar — 强哥风格:宽 + 深 + chevron 右置 + 子项左轨缩进
   (用 .sb 前缀提高 specificity 压住 app.css 的旧规则)
   ============================================================ */
.sb {
  width: 272px;                      /* app.css 228px → 272px,加宽 */
}

.sb .sb-brandtext b { font-size: 18px; color: var(--ink-1); font-weight: 700; }
.sb .sb-brandtext span { font-size: 13px; color: var(--ink-2); }

/* ── 分组头(抽屉头) ── */
.sb .sb-glabel,
.sb .sb-glabel.sb-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-1);
  padding: 12px 14px;
  cursor: pointer;
  border-radius: var(--r-sm, 6px);
  text-align: left;
  transition: background .12s, color .12s;
}
.sb .sb-glabel.sb-group-h:hover {
  background: var(--surface-3);
  color: var(--accent-ink);
}
.sb .sb-glabel.sb-group-h.has-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.sb .sb-glabel-text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  order: 1;
}
.sb .sb-glabel-count { display: none !important; }

/* chevron 推到最右 */
.sb .sb-chev {
  order: 99;
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s, color .12s;
  flex-shrink: 0;
}
.sb .sb-chev svg {
  width: 14px;
  height: 14px;
  display: block;
}
.sb .sb-group[data-collapsed="true"] .sb-chev {
  transform: rotate(-90deg);
}
.sb .sb-glabel.sb-group-h:hover .sb-chev,
.sb .sb-glabel.sb-group-h.has-active .sb-chev {
  color: var(--accent);
}

/* ── 子项 ── 左轨道 + 大字 + 深色 ── */
.sb .sb-link {
  position: relative;
  height: 42px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
  padding: 0 14px 0 36px;
  gap: 10px;
  border-radius: var(--r-sm, 6px);
}
.sb .sb-link::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  transition: background .12s;
}
.sb .sb-link:hover {
  background: var(--surface-3);
  color: var(--accent-ink);
}
.sb .sb-link:hover::before {
  background: var(--line-strong);
}
.sb .sb-link.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.sb .sb-link.active::before {
  background: var(--accent);
}
.sb .sb-link .sb-ic { display: none; }

/* topbar */
.tb { font-size: 14px; }

/* ============================================================
   旧 .data-table 全局适配新风格(v51m)
   --------------------------------------------------------------
   全项目 123+ 处用 `.data-table`(旧表格 class)。挨个改 class
   到 `.dt` 风险太高,这里给一组全局 override,让旧 `.data-table`
   视觉等同 `.dt`:
     - 整表 surface 卡片(border + radius)
     - thead var(--surface-2) + var(--ink-3) uppercase 表头
     - tbody row 44px 高 + 14px padding + var(--line-2) 分隔
     - hover var(--surface-3)
     - num 列右对齐 tabular-nums
   不动:table-layout / colgroup width / sticky thead(沿用 inline)
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 10px);
  overflow: hidden;
  color: var(--ink-1);
}
.data-table thead th {
  padding: 11px 14px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.data-table tbody td {
  padding: 0 14px;
  height: 42px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-1);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:not(.no-hover):hover td { background: var(--surface-3); }
.data-table tbody tr.selected td,
.data-table tbody tr.is-selected td { background: var(--accent-soft); }
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tfoot td {
  padding: 10px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink-1);
}
/* 旧的 .notice-bar 系列 — 跟新设计 token 对齐 */
.notice-bar {
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 10px 14px;
  border-radius: var(--r-md, 8px);
  border: 0;
  font-size: var(--fs-sm);
  margin-bottom: 12px;
}
.notice-bar.notice-warn {
  background: var(--warn-soft, #fff7ec);
  color: var(--warn-ink, #92400e);
}
.notice-bar.notice-danger,
.notice-bar.notice-error {
  background: var(--danger-soft, #fef2f2);
  color: var(--danger-ink, #b91c1c);
}
.notice-bar.notice-success {
  background: var(--ok-soft, #ecfdf5);
  color: var(--ok-ink, #065f46);
}

/* 旧 .stat-card 系列(顶部 KPI 区) */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.grid-4 .stat-card {
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.stat-card .stat-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat-card .stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-card .stat-unit {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* 旧 .search-row(filter bar)— 包成 card 风格 */
.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
}
.search-row > input,
.search-row > select {
  height: 32px;
  padding: 0 11px;
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  background: var(--surface);
  color: var(--ink-1);
  font-family: inherit;
}
.search-row > input:focus,
.search-row > select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* 旧 .tabs / .tab-item — 跟新 .tab 对齐 */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.tabs .tab-item {
  position: relative;
  padding: 9px 13px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
.tabs .tab-item:hover { color: var(--ink-1); }
.tabs .tab-item.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* 旧 .section-title 大标题 */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--ink-1);
  margin: 14px 0 12px;
  padding-left: 9px;
  border-left: 3px solid var(--accent);
  line-height: 1.3;
}

/* 旧 .empty-state */
.empty-state {
  padding: 32px;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

/* ============================================================
   .page 撑满 .main(v51d hotfix)
   ds.css 默认 .page{max-width:1480px} 在 ≥2K 屏右侧大片空白。
   ERP 是数据密集应用,表格/KPI/卡片宽点更可读,直接撑满。
   ============================================================ */
section.page,
.main > .page,
.main > section.page {
  max-width: none;
  width: 100%;
}

/* ============================================================
   sidebar group accordion(v51c)
   - 每个 .sb-group 是一个 collapsible 抽屉
   - .sb-glabel.sb-group-h 是分组的 head(button)
   - 折叠用 [data-collapsed="true"] 标记,子菜单 display:none
   - .sb-chev 旋转 -90deg 表示折叠
   ============================================================ */
.sb-group { margin-top: 4px; }
.sb-glabel.sb-group-h {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 8px 10px 7px;
  cursor: pointer;
  border-radius: var(--r-xs, 4px);
  transition: color .12s, background .12s;
  text-align: left;
}
.sb-glabel.sb-group-h:hover {
  background: var(--surface-3);
  color: var(--ink-2);
}
.sb-glabel.sb-group-h.has-active {
  color: var(--ink-2);
}
.sb-glabel-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-glabel-count {
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-4);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.sb-chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ink-4);
  display: grid;
  place-items: center;
  transition: transform .15s;
}
.sb-chev svg {
  width: 10px;
  height: 10px;
  display: block;
}
.sb-group[data-collapsed="true"] .sb-chev {
  transform: rotate(-90deg);
}
.sb-group[data-collapsed="true"] .sb-group-items {
  display: none;
}
.sb-group-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 1px;
  padding-bottom: 4px;
}
/* 当一个 group 含有 active 页面时,在头部加一条 accent 强调 */
.sb-glabel.sb-group-h.has-active .sb-glabel-text {
  color: var(--ink-1);
}

/* ============================================================
   窄屏适配 (v54a 2026-06-03)
   --------------------------------------------------------------
   v51 redesign 后 markup 由 .sidebar/.topbar/.main-content/.content-area
   改成了 .sb/.tb/.main/.content,但 HTML 里 inline 写的 @media (max-width:980px)
   还在指向旧 class,在新结构下全部失效 → 手机端 sidebar 不收起、顶栏溢出。
   这里给新 markup 写一份完整的窄屏适配:
     - sb 变左侧抽屉(transform translateX -100%),汉堡按钮触发
     - sb-scrim 蒙层(点击关闭)
     - tb 顶栏紧凑 + tb-right 可横滚 + 隐藏密度切换
     - main padding 收紧,kpi/表单 单/双列
     - 表格在 .table-wrap / .erp-mobile-table-scroll 里的横滚保持
   PC 端通过 .tb-burger / .sb-scrim default display:none 隐藏移动 UI。
   ============================================================ */
.tb-burger,
.sb-scrim {
  display: none;
}

/* v54g 2026-06-03 PC 端隐藏顶栏 .tb(用户要求,顶栏无用)
   - mobile 端 .tb 保留(汉堡按钮 + 标题在内)
   - .content 是 flex column,.tb display:none 后 .main 自动撑满 */
@media (min-width: 769px) {
  .tb {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .app {
    display: block;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* ---- 侧栏抽屉化 ---- */
  .sb {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(280px, 82vw);
    max-width: 280px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1200;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .14);
    border-right: 1px solid var(--line);
    overflow: hidden;   /* 防 sb-nav 内部 max-content 撑破 */
  }
  .sb.is-open {
    transform: translateX(0);
  }

  /* HTML 内联旧 @media 里有 `#nav-drawer-root{display:flex;flex-direction:row;width:max-content}`
     (当年给底部 tab 式 sidebar 写的),v51 改了 markup 但 ID 没变,所以仍命中,
     把 <nav class="sb-nav"> 强制横排了。这里强制改回 column + auto 宽度。 */
  .sb .sb-nav,
  .sb #nav-drawer-root,
  nav#nav-drawer-root {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ---- 蒙层 ---- */
  .sb-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    z-index: 1100;
    -webkit-tap-highlight-color: transparent;
  }
  .sb-scrim.is-show {
    display: block;
  }

  /* ---- content 占满 ---- */
  .content {
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* ---- 顶栏 ---- */
  .tb {
    height: 52px;
    padding: 0 10px;
    gap: 8px;
    display: flex;
    align-items: center;
  }
  .tb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm, 6px);
    color: var(--ink-1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tb-burger:active {
    background: var(--surface-3);
  }
  .tb-burger svg {
    width: 22px;
    height: 22px;
    display: block;
  }
  .tb-left {
    flex: 1;
    min-width: 0;
    gap: 6px;
  }
  /* v54i 2026-06-03 mobile 上边栏不显示页面标题(用户要求空白) */
  .tb-left .t-h1,
  .tb-left #page-title,
  .tb #page-title {
    display: none !important;
  }
  .tb-right {
    flex-shrink: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 55%;
  }
  .tb-right::-webkit-scrollbar {
    display: none;
  }
  .tb-right > .seg {
    display: none;   /* 密度切换在窄屏没意义 */
  }
  .tb-right > .btn,
  .tb-right > button {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    height: 32px;
  }

  #workspace-tabs {
    display: none !important;
  }

  /* ---- main 滚动区 ---- */
  .main {
    flex: 1;
    min-height: 0;
    padding: 12px 12px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: auto;
  }

  /* ---- 多列 grid 全部塌成单列(v54c 通用兜底) ----
     1. 凡 inline style 含 grid-template-columns 的 → 塌
     2. 凡 class 含 "grid" 的 → 塌(白名单:kpi-grid 走 2 列;color-grid 走自己规则;
        ww-grid-wrap / ww-main-grid / ww-detail-grid 是表格 wrap 不是 css grid 跳过)
     3. 列出已知具名 grid class 兜底(防 attribute selector 优先级低被覆盖)
  */
  #main-content [style*="grid-template-columns"]:not(.erp-mobile-table-scroll *),
  .modal-body [style*="grid-template-columns"]:not(.erp-mobile-table-scroll *),
  #main-content [class*="-grid"]:not(.kpi-grid):not(.color-grid):not([class*="ww-grid"]):not([class*="ww-main-grid"]):not([class*="ww-detail-grid"]):not(.color-card-grid),
  #main-content [class*="grid-"]:not(.kpi-grid):not(.color-grid):not(.color-card-grid),
  .modal-body [class*="-grid"]:not(.kpi-grid):not(.color-grid):not([class*="ww-grid"]):not(.color-card-grid),
  .modal-body [class*="grid-"]:not(.kpi-grid):not(.color-grid):not(.color-card-grid),
  #main-content .form-grid,
  #main-content .fsm-grid,
  #main-content .ow-grid,
  #main-content .ow-grid-2,
  #main-content .module-card-row,
  #main-content .product-grid,
  #main-content .customer-grid,
  #main-content .module-data-matrix,
  #main-content .migration-board,
  #main-content .migration-steps,
  #main-content .migration-import,
  .modal-body .form-grid,
  .modal-body .fsm-grid,
  .modal-body .ow-grid,
  .modal-body .ow-grid-2,
  .modal-body .module-data-matrix {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  /* KPI 2 列(单列太空) */
  #main-content .kpi-grid,
  .modal-body .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* grid-column:span 2 / 3 等 inline 在窄屏单列模式下,跨列还是 1 列 */
  #main-content [style*="grid-column"]:not(.erp-mobile-table-scroll *),
  .modal-body [style*="grid-column"]:not(.erp-mobile-table-scroll *) {
    grid-column: 1 / -1 !important;
  }

  /* ---- 表单控件触控友好 + 不允许溢出(v54c 加 width:100% 兜底) ---- */
  #main-content input:not([type=checkbox]):not([type=radio]):not(.erp-mobile-table-scroll *),
  #main-content select:not(.erp-mobile-table-scroll *),
  #main-content textarea:not(.erp-mobile-table-scroll *),
  .modal-body input:not([type=checkbox]):not([type=radio]):not(.erp-mobile-table-scroll *),
  .modal-body select:not(.erp-mobile-table-scroll *),
  .modal-body textarea:not(.erp-mobile-table-scroll *) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px;
    font-size: 14px;
    box-sizing: border-box;
  }

  /* form-group 容器 min-width:0 让 flex/grid 子项可缩 */
  #main-content .form-group,
  #main-content .fsm-fg,
  #main-content .ow-fg,
  .modal-body .form-group,
  .modal-body .fsm-fg,
  .modal-body .ow-fg {
    min-width: 0 !important;
  }

  /* ---- search-row wrap ---- */
  .search-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
  }
  .search-row > input,
  .search-row > select {
    flex: 1 1 140px;
    min-width: 0;
  }

  /* ============================================================
     v54e mobile table → stacked cards
     --------------------------------------------------------------
     JS (stackifyTableForMobile) 给每个 <table> 加 .mobile-stacked 类,
     给每个 td 加 data-label="对应 th 文本"。这里 CSS 让 table 渲染成
     "每行一张卡片,左 label 右 value" 的形式。空 td(.is-empty)不显示。
     PC 端 不命中(class .mobile-stacked 只在 @media 768 内有规则)。
     ============================================================ */
  .mobile-stacked {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .mobile-stacked > colgroup,
  .mobile-stacked > thead {
    display: none !important;
  }
  .mobile-stacked > tbody,
  .mobile-stacked > tfoot {
    display: block !important;
  }
  .mobile-stacked > tbody > tr,
  .mobile-stacked > tfoot > tr {
    display: block !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md, 8px) !important;
    padding: 6px 12px !important;
    margin: 0 0 8px !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
  }
  .mobile-stacked > tbody > tr.is-selected,
  .mobile-stacked > tbody > tr.selected {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
  }
  .mobile-stacked > tbody > tr > td,
  .mobile-stacked > tfoot > tr > td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 14px !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line-2, #f1f5f9) !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: baseline !important;
    text-align: right !important;
    position: static !important;   /* 取消 sticky 右列 */
    background: transparent !important;
    box-shadow: none !important;
  }
  .mobile-stacked > tbody > tr > td:last-child,
  .mobile-stacked > tfoot > tr > td:last-child {
    border-bottom: 0 !important;
  }
  .mobile-stacked > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-stacked > tbody > tr > td.col-actions::before,
  .mobile-stacked > tbody > tr > td:first-child::before {
    color: var(--ink-2);
    font-weight: 600;
  }
  /* 空 td 不显示 — 减少视觉噪音 */
  .mobile-stacked > tbody > tr > td.is-empty {
    display: none !important;
  }
  /* td 内 行内按钮组横排 */
  .mobile-stacked > tbody > tr > td .row-actions,
  .mobile-stacked > tbody > tr > td.col-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  /* 操作列首字 label 强调 */
  .mobile-stacked > tbody > tr > td.col-actions {
    border-top: 1px solid var(--line) !important;
    margin-top: 4px !important;
    padding-top: 8px !important;
  }
  /* td 内嵌 div / strong / span 不强制 inline,允许换行(但避免每个独占行)*/
  .mobile-stacked > tbody > tr > td > * {
    max-width: 100%;
  }
  .mobile-stacked > tbody > tr > td > div,
  .mobile-stacked > tbody > tr > td > span {
    display: inline;
  }
  .mobile-stacked > tbody > tr > td > br + span,
  .mobile-stacked > tbody > tr > td > br + div {
    display: block;
  }

  /* ---- 表格横滚兜底(v54c) ----
     - .erp-mobile-table-scroll wrapper 横滚
     - 内部 table 自然宽 + table-layout:auto(防 PC 端 fixed layout colgroup 把列压成 0)
     - tbody td 默认 nowrap(数据不换行,横滚看)
     - 行高紧凑 + 字号 13px
  */
  .erp-mobile-table-scroll {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-md, 8px);
    background: var(--surface);
  }
  .erp-mobile-table-scroll > .data-table,
  .erp-mobile-table-scroll > .dt,
  .erp-mobile-table-scroll > table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  .erp-mobile-table-scroll th,
  .erp-mobile-table-scroll td {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* 裸 .data-table(JS 没赶上 wrap 的兜底):至少别被 fixed layout 压崩 */
  #main-content > .data-table,
  #main-content .module-page > .data-table,
  #main-content .page > .data-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    table-layout: auto !important;
  }

  /* ---- 模块自有 modal 宽度 + mask padding 兜底 ----
     - .fsm-mask / .ow-form-modal-mask 都是 position:fixed inset:0 padding:18px
     - 窄屏 mask padding 收紧到 8px,modal 撑到 viewport
  */
  .fsm-mask,
  .ow-form-modal-mask,
  [class*="-mask"]:not(.scrim) {
    padding: 8px !important;
  }
  .fsm-modal,
  .ow-modal,
  [class*="-modal"]:not(.modal-backdrop):not(.ai-chat-panel) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .fsm-body,
  .ow-body {
    max-height: none !important;
  }

  /* ---- tab 按钮条 wrap ---- */
  #main-content .tabs,
  #main-content .tab-list,
  #main-content .opp-tabs,
  #main-content [class*="-tabs"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #main-content .tabs > *,
  #main-content [class*="-tabs"] > * {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---- 内联 KPI 横排("产品 3 物理 770 ...")允许 wrap ---- */
  #uiw-stats,
  .module-page .stat-bar {
    white-space: normal;
    line-height: 1.7;
  }

  /* ---- modal 接近全屏 ---- */
  .modal-backdrop {
    padding: 8px;
  }
  .modal-backdrop .modal {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px);
  }
  .modal-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- AI 浮按钮 ---- */
  .ai-chat-fab {
    right: 12px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: 52px !important;
    height: 52px !important;
  }

  /* ---- sidebar 内边距 ---- */
  .sb-brand {
    padding: 14px 14px 12px;
  }
}

/* 超窄屏(<420px)再砍 padding */
@media (max-width: 420px) {
  .main { padding: 10px 10px 20px; }
  .tb { padding: 0 8px; }
  .tb-burger { width: 34px; height: 34px; }
  #main-content .kpi-grid,
  .modal-body .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}