/* ==========================================================================
   现代 SaaS 风主题（翟总 2026-10-20「换排版风格 → 现代 SaaS 风 + 主色绿」）
   —— 独立叠加层，加载在 style.css 之后，靠层叠覆盖，不改 style.css 内部规则。
   要点：白色浅侧栏 + 品牌绿实心选中 + 白卡片大留白（翟总选定「浅色侧栏」方案）
   想整体调色只改下面 :root 里的几个值即可。
   ========================================================================== */

:root {
  --saas-nav-bg: #FFFFFF;          /* 侧边栏底色（白） */
  --saas-nav-text: #5B6B80;        /* 菜单文字 */
  --saas-nav-text-dim: #93A1B3;    /* 分组标题 */
  --saas-nav-hover: #E6F7EF;       /* 悬停淡绿底 */
  --saas-nav-hover-text: #008A49;
  --saas-nav-active: #00A859;      /* 选中：品牌绿实心 */

  --bg: #F6F8FB;
  --text: #16202E;
  --text-2: #5B6B80;
  --text-3: #93A1B3;
  --border: #E8EDF4;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
}

body { background: var(--bg); color: var(--text); }

/* ---------- 侧边栏：白色浅底 + 右侧细线与柔和投影 ---------- */
.sidebar {
  background: var(--saas-nav-bg);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 18px -14px rgba(16, 24, 40, .4);
}
.sidebar .logo-title { color: var(--text); }
.sidebar .logo-icon { box-shadow: 0 6px 16px rgba(0, 168, 89, .28); }

/* 分组标题 / 子组标题 */
.sidebar .nav-label,
.sidebar .nav-subtitle { color: var(--saas-nav-text-dim); }

/* 所有菜单项基础色 */
.sidebar .nav-group > a,
.sidebar .nav-items a,
.sidebar .nav > a.nav-home { color: var(--saas-nav-text); }

/* 悬停：淡绿底 + 深绿字 */
.sidebar .nav-group > a:hover,
.sidebar .nav-items a:hover,
.sidebar .nav > a.nav-home:hover,
.sidebar .nav-group.active > a:hover {
  background: var(--saas-nav-hover);
  color: var(--saas-nav-hover-text);
}

/* 选中：品牌绿实心 + 白字（浅底上实心块最清楚，不用竖条） */
.sidebar .nav-items a.active,
.sidebar .nav-group > a.active,
.sidebar .nav > a.nav-home.active {
  background: var(--saas-nav-active);
  color: #FFFFFF;
  box-shadow: 0 4px 12px -4px rgba(0, 168, 89, .45);
  font-weight: 600;
}
.sidebar .nav-items a.active .ico { color: #FFFFFF; }
.sidebar .nav > a.nav-home.active .ico { color: #FFFFFF; }

/* 展开中的分组：标题绿、竖线绿 */
.sidebar .nav-group.active > .nav-label { color: var(--primary); }
.sidebar .nav-group.active > .nav-items { border-left-color: var(--primary); }
.sidebar .nav-subgroup .nav-items { border-left-color: var(--border); }

/* 侧栏滚动条（浅底） */
.sidebar .nav::-webkit-scrollbar { width: 6px; }
.sidebar .nav::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .16); border-radius: 3px; }
.sidebar .nav::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .3); }
.sidebar .nav::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏：白底 + 细线 + 轻阴影 ---------- */
.topbar {
  background: #FFFFFF;
  border-bottom: 1px solid #EDF1F7;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.brand .logo-title,
.brand-text { color: var(--text); }

/* ---------- 内容区：放宽留白 ---------- */
.content { padding: 18px 22px 12px; background: var(--bg); }

/* ---------- 卡片：大圆角 + 柔和阴影 ---------- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.card-title { font-weight: 700; letter-spacing: -.1px; }

/* ---------- 按钮：统一圆角，绿系保持品牌 ---------- */
.btn { border-radius: 9px; }
.btn.ghost, .btn-link { border-radius: 8px; }

/* ---------- 表格：浅灰表头 + 淡绿悬停 ---------- */
/* 🔄 v11（2026-10-21 翟总截图「红框颜色」）：冻结的「操作」列表头原是品牌绿
   （style.css v442 拍板），主题版式下与其它浅灰表头突兀，统一成浅灰。
   同特异性下本文件后加载胜出，无需改 style.css。 */
.tbl th.col-ops { background: #F7F9FC; }
.card table th,
.tt table th {
  background: #F7F9FC;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-2);
}
.card table td,
.tt table td { border-bottom: 1px solid #F0F3F8; }
.card table tbody tr:hover,
.tt table tbody tr:hover { background: #F6FCF9; }
.card table tbody tr:nth-child(even) { background: #FCFDFE; }
.card table tbody tr:nth-child(even):hover { background: #F6FCF9; }

/* ---------- 筛选栏 / 分页 / 输入框 ---------- */
.filter-bar { border-radius: 12px; }
.pagination button { border-radius: 8px; }
.ipt, input.ipt, select.ipt, textarea.ipt { border-radius: 8px; }

/* ---------- 标签页 / 徽章微调 ---------- */
.tab-btn, .tab { border-radius: 8px; }

/* ---------- 登录浮层：轻雾白遮罩（浅色侧栏下不用深色毛玻璃） ---------- */
#loginMask {
  background: rgba(16, 24, 40, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ==========================================================================
   v491 内容版调整（翟总 2026-10-20 截图「这个版，内容版调整」）
   ① 表格列宽/裁切 ② 页头按钮区 ③ 密度与留白 ④ 分页与页签
   ========================================================================== */

/* ① 表格：单元格限宽省略 —— 长地址/备注不再把表格撑出横向滚动；
      短列（省市/数字/日期）不受影响；详细地址与备注悬停可看全（wms_dlvorder.js 加 title） */
.tbl td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* 🔄 v532f（2026-10-23 翟总「系统操作变短一半」+ 四实心按钮溢出根治）：
   上面这行 max-width:200px 同时把 sticky 操作列钉死在 200px —— 四实心按钮
   （编辑/查看/打印派车单/打印合同 内容 ~264px）被压溢出 61px、按钮少的页
   又被 150px 下限撑太宽。操作列解除限宽：按钮多宽列多宽（auto 布局 +
   75px 下限），压缩时其他数据列有 ellipsis 兜底不受影响。 */
.tbl td.col-ops { max-width: none; overflow: visible; }

/* ② 页头按钮区：按钮略收紧，说明文字再弱一档，与按钮拉开间距 */
.page-actions .pa-btns button { height: 30px; padding: 0 13px; }
.page-actions .pa-hint { font-size: calc(11px - var(--fs-step)); color: var(--text-3); margin-left: 12px; }

/* ③ 密度与留白：行距收紧一档，内容区四周留白收敛 */
.content { padding: 14px 18px 10px; }
.tbl th { padding: 7px 9px; }
.tbl td { padding: 5px 9px; }

/* ④ 分页贴近表格；页签胶囊改「浅底描边」更轻 */
.pager { margin-top: 10px; }
.tab { background: transparent; border: 1px solid transparent; }
.tab:hover { background: #EEF2F6; }
.tab.on { background: var(--primary-light); border-color: rgba(0, 168, 89, .28); box-shadow: none; }

/* ==========================================================================
   v492 弹窗内部编辑排版统一（翟总 2026-10-20「内部编辑的排版」）
   遮罩聚焦 + 分段标题成条 + 字段紧凑 + 头尾与浅色主题统一
   ========================================================================== */

/* 遮罩加深一档：编辑时背后列表不再抢视线 */
.modal-mask { background: rgba(16, 24, 40, .45) !important; }

/* 弹窗壳：圆角统一 16px，头/体/底全部纯白（与浅色侧栏一个体系） */
.modal { border-radius: 16px; }
.modal-head { background: #FFFFFF; border-bottom: 1px solid var(--border); }
.modal-body { background: #FFFFFF; padding: 16px 20px; }
.modal-foot { background: #FFFFFF; border-top: 1px solid var(--border); }

/* 分段标题（① 订单主体 / ② 配送货物…）：由「细竖线+下划线」升级为整条浅绿底，
   分区一眼可辨 */
.form-sec {
  margin: 12px 0 6px; padding: 6px 10px;
  background: var(--primary-light); border-radius: 8px; border-bottom: none;
  color: var(--primary-dark);
}
.form-sec::before { width: 4px; height: 14px; }

/* 字段：行距与标签更紧凑，输入框统一高度 */
.form-row { gap: 12px 14px; margin-bottom: 12px; }
.form-item { gap: 4px; }
.form-item label { color: var(--text-2); }
input.ipt, select.ipt, textarea.ipt { padding: 7px 10px; }

/* 弹窗内表格里的编辑框（审核弹窗 11 列等）：再紧凑一档 */
.modal-body table.tbl td .ipt, .modal-body .voucher-table td .ipt { padding: 5px 8px; }

/* ==========================================================================
   v493 引用主流后台表单规范（翟总 2026-10-20「引用最流行模版格式」）
   对标 Ant Design 5 / Element Plus 的 Form 垂直布局 token：
   标签 13px/#1F2D3D、字段纵向 6px、输入框统一 32px 高/6px 圆角、
   分组标题 14px/600、聚焦 2px 主色光圈、弹窗头尾 24px 内边距。
   ========================================================================== */

/* 弹窗头：16/24 内边距，标题 15px 600 */
.modal-head {
  padding: 16px 24px;
  font-size: calc(15px - var(--fs-step));
  font-weight: 600;
  letter-spacing: -.1px;
}
.modal-body { padding: 20px 24px; }
.modal-foot { padding: 12px 24px; gap: 8px; }

/* 字段：主流「标签在上」节奏 —— 标签与控件 6px，行间 16px，列间 24px */
.form-row { gap: 0 24px; margin-bottom: 16px; }
.form-item { gap: 6px; }
.form-item label {
  font-size: calc(13px - var(--fs-step));
  color: #1F2D3D;
  font-weight: 400;
  line-height: 20px;
}

/* 输入框：统一 32px 高、6px 圆角、11px 横向内边距（Ant/Element 通用尺寸） */
.modal-body input.ipt,
.modal-body select.ipt {
  height: 32px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: calc(13px - var(--fs-step));
}
.modal-body textarea.ipt {
  padding: 6px 11px;
  border-radius: 6px;
  font-size: calc(13px - var(--fs-step));
  line-height: 1.55;
}
.modal-body input.ipt:focus,
.modal-body select.ipt:focus,
.modal-body textarea.ipt:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 168, 89, .15);
}

/* 分组标题：主流 Divider 式分区，14px/600，与上方字段拉开 20px */
.form-sec {
  margin: 20px 0 12px;
  padding: 7px 12px;
  font-size: calc(14px - var(--fs-step));
  font-weight: 600;
  letter-spacing: 0;
}
.form-sec:first-child { margin-top: 0; }

/* 弹窗底部按钮：主流 32px 高、8px 间距 */
.modal-foot .btn { height: 32px; padding: 0 16px; border-radius: 6px; }

/* ==========================================================================
   v494 弹窗表单改「横排」：标签在左、输入框在右，同一行平行（翟总 2026-10-21）
   对标 Ant Design horizontal Form：标签固定宽右对齐（冒号对齐），控件占余宽。
   ========================================================================== */

.modal-body .form-item { flex-direction: row; align-items: center; gap: 10px; }

/* 标签固定宽 100px 右对齐：所有行的冒号/星号自然对齐（主流 labelCol 做法） */
.modal-body .form-item > label {
  flex: 0 0 100px;
  width: 100px;
  text-align: right;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 横排下标签空间有限：隐藏 label 里的灰色长注释（如「（客户档案，配送客户）」） */
.modal-body .form-item > label .fz12 { display: none; }

/* 控件吃掉剩余宽度 */
.modal-body .form-item > input,
.modal-body .form-item > select,
.modal-body .form-item > .ipt {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* 多行文本：横排下给两行高，label 顶部对齐 */
.modal-body .form-item:has(> textarea) { align-items: flex-start; }
.modal-body .form-item > textarea.ipt { height: 60px; }

/* 横排下行距可以更密（一行一个字段，纵向 12px 足够） */
.modal-body .form-row { margin-bottom: 12px; }

/* ==========================================================================
   v496 inb 系弹窗（添加出库/入库订单等）字段改横排（翟总 2026-10-21「排版修改，同行」）
   label 嵌套 input 的上下排 → 文字在左、控件在右，同一行。
   表头段 7 列改 3 列、其它信息 4 列改 3 列（横排后一行放不下更多）。
   ========================================================================== */

/* 表头段（订单日期/客户简称/订单类型…） */
.inb-head-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow-x: visible;
}
.inb-head-row > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.inb-head-row > label .ipt {
  display: block;
  margin-top: 0;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* 其它信息段（inline grid repeat(4,1fr) → 3 列）+ label 横排 */
.modal-body div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
.modal-body div[style*="repeat(4,1fr)"] > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.modal-body div[style*="repeat(4,1fr)"] > label > .ipt {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* ==========================================================================
   v497 筛选栏（msBar 一字段一搜索框）改横排（翟总 2026-10-21 波次池截图「同行」）
   全站 10+ 页的筛选栏统一：标签在左、输入框在右，同一行。
   注意：enhanceOneTable 归一化后 msBar 字段被包进 .fl-actions，用后代选择器。
   ========================================================================== */

.filter-bar div[style*="flex-direction:column"] {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.filter-bar div[style*="flex-direction:column"] > .ipt {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
}
/* 字段变宽后允许换行，不撑破筛选栏 */
.filter-bar .fl-actions { flex-wrap: wrap; }
/* 日期区间「起 至 止」不换行挤在一起 */
.filter-bar > span { white-space: nowrap; flex: none; }

/* ==========================================================================
   v498 横排补漏（翟总 2026-10-21「整个系统排版同行」+ 全站 107 页扫描）
   扫描发现三类残留：
   ① 移库工单/库存调整/出库下架 等 12 个弹窗 openModal 不包 .modal-body，
      v494 的 .modal-body .form-item 打不中 → 作用域放宽到 .modal；
   ② 客户类型/温层多选胶囊（.ms-chk）在窄列里被压竖 → 明确锁横排；
   ③ label 直接包裹输入框的结构（inb 系网格）→ 通用化 :has 规则。
   ========================================================================== */

/* ① 弹窗内所有 .form-item 一律横排（不限于 .modal-body 包裹的弹窗） */
.modal .form-item { flex-direction: row; align-items: center; gap: 10px; }
.modal .form-item > label {
  flex: 0 0 100px;
  width: 100px;
  text-align: right;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal .form-item > label .fz12 { display: none; }
.modal .form-item > input,
.modal .form-item > select,
.modal .form-item > .ipt { flex: 1 1 auto; width: auto; min-width: 0; }
/* 不包 .modal-body 的弹窗（内容是 padding:20px 24px 的裸 div）：输入框同套 32px 规范 */
.modal div[style*="padding:20px 24px"] input.ipt,
.modal div[style*="padding:20px 24px"] select.ipt { height: 32px; padding: 0 11px; border-radius: 6px; }
.modal div[style*="padding:20px 24px"] textarea.ipt { padding: 6px 11px; border-radius: 6px; }
.modal div[style*="padding:20px 24px"] input.ipt:focus,
.modal div[style*="padding:20px 24px"] select.ipt:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 168, 89, .15); }
.modal div[style*="padding:20px 24px"] .form-row { margin-bottom: 12px; }

/* ② 多选胶囊：锁横排（客户类型/温层等勾选组，窄列下不再被压成上下排） */
.modal .ms-chk { display: inline-flex !important; flex-direction: row !important; align-items: center; }
.modal .ms-row { flex: 1 1 auto; min-width: 0; }
/* 含多选组的字段独占整行：三列平分时 116px 放不下 label+胶囊组（v498 真机复测）
   🔴 必须 !important —— openCustomerForm 等处 form-item 带内联 style="flex:1"，会压过样式表 */
.modal .form-item:has(> .ms-row) { flex: 1 1 100% !important; }

/* ③ label 直接包裹输入框（非 inb-head-row 的其它网格）：通用横排 */
.modal label:has(> input.ipt),
.modal label:has(> select.ipt) {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
}
.modal label:has(> input.ipt) > .ipt,
.modal label:has(> select.ipt) > .ipt { flex: 1 1 auto; width: auto; min-width: 0; }
/* 开关（.switch）里隐藏的 checkbox 不参与横排 */
.modal label.switch { display: inline-flex; flex-direction: row; align-items: center; }

/* ==========================================================================
   v499 label 不被截断（2026-10-21 全站 57 弹窗扫描：13 个弹窗 8 类字段名被 100px 截断）
   ① 普通字段：标签宽 100~180px 自适应，超宽折行（不再显示省略号）
   ② 段落级说明（label 后跟整张表格，如合同「价格明细…」）：整行改上下结构、标签左对齐全宽
   ========================================================================== */

/* ① 自适应宽度：短标签仍 100px 保持冒号对齐，长标签撑到 180px 或折行 */
.modal .form-item > label {
  flex: 0 0 auto;
  width: auto;
  min-width: 100px;
  max-width: 180px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

/* ② 段落级说明标签：独占整行、左对齐、不截断（合同价格明细 / 服务项目等） */
.modal .form-item:has(> .table-wrap) {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.modal .form-item:has(> .table-wrap) > label {
  flex: none;
  width: auto;
  max-width: none;
  text-align: left;
  justify-content: flex-start;
  white-space: normal;
  color: var(--primary-dark);
  font-weight: 600;
}

/* ==========================================================================
   v500 状态徽章语义色补齐（2026-10-21 全站 103 页扫描发现的真缺陷）
   ① .badge.purple / .badge.warn 从未定义 → 「拣货中/已生成波次/订单来源」「待审核/待下发」
      全部落回默认灰底，与「已通过」这类状态无法区分；
   ② .badge.blue 原映射 var(--primary-light)，绿色主色下与 .badge.green 完全同色；
   ③ 因此徽章改「固定语义色」，不随主色主题（蓝/紫/橙）漂移 —— 状态色属于信息层，不属于品牌层。
   ========================================================================== */
.badge { white-space: nowrap; font-weight: 500; line-height: 18px; }

.badge.green   { background: #E6F7EF; color: #008A49; }   /* 成功 / 已通过 / 已办结 */
.badge.blue    { background: #E8F1FF; color: #1D6FD0; }   /* 已审核 / 处理中 / 已下发 */
.badge.purple  { background: #F4EBFF; color: #7A3DD0; }   /* 拣货中 / 已生成波次 / 订单来源 */
.badge.orange  { background: #FFF3E6; color: #E67200; }   /* 待处理 / 提醒 */
.badge.warn,
.badge.yellow  { background: #FEF6E7; color: #B97A00; }   /* 待审核 / 待下发 / 部分核销 */
.badge.red,
.badge.danger  { background: #FDECEC; color: #E5484D; }   /* 驳回 / 缺卡 / 终止 */
.badge.gray    { background: #F0F2F5; color: #64748B; }   /* 已取消 / 无期限 / 中性 */

/* ==========================================================================
   v504 筛选栏再排版（翟总 2026-10-21 波次池截图「排版问题，重新排版」）
   病根三处：
   ① 日期区间选择器接管后，原 .fl-item 只剩可见标签+隐藏输入 → 「订单日期」「日期」
      两个空标签悬在网格里；
   ② v497 给 msBar 输入框设了 flex:1 1 auto —— 在 fl-actions 一行流里各字段抢宽，
      120/130/140px 全被拉花；
   ③ .fl-actions 原是 justify-content:flex-end（按钮靠右），现在塞了字段+按钮挤作一团。
   方案：空标签隐藏、字段流式左起、输入框统一定宽、控件统一 32px。
   ========================================================================== */

/* ① 空标签格隐藏（输入被区间选择器藏掉的 .fl-item 整格不占位） */
.filter-bar .fl-item:has(> input[style*="display: none"]),
.filter-bar .fl-item:has(> input[style*="display:none"]) { display: none !important; }

/* ② fl-actions：字段+按钮 一行流式左起、可换行，行距列距统一 */
.filter-bar .fl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 14px;
}

/* ③ msBar 字段：标签左、输入框右，标签不换行、颜色统一 */
.filter-bar .fl-actions div[style*="flex-direction:column"] {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}
.filter-bar .fl-actions div[style*="flex-direction:column"] > .fz12 {
  font-size: 13px;
  color: #5B6B80;
  white-space: nowrap;
}
/* 输入框不再抢宽：统一 140px 定宽（覆盖 v497 的 flex:1/width:auto） */
.filter-bar .fl-actions div[style*="flex-direction:column"] > .ipt {
  flex: 0 0 auto !important;
  width: 140px !important;
  min-width: 0;
}

/* ④ 日期区间框：定宽不随 flex 拉伸 */
.filter-bar .fl-actions span > input.ipt[readonly] {
  flex: 0 0 auto !important;
  width: 190px !important;
  min-width: 190px !important;
}

/* ⑤ 控件统一 32px 高，按钮与输入框同线 */
.filter-bar .fl-actions .ipt { height: 32px; }
.filter-bar .fl-actions .btn { height: 32px; padding: 0 14px; }