* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #1890ff;
  --success: #52c41a;
  --warning: #faad14;
  --danger: #ff4d4f;
  --bg: #f5f5f5;
  --border: #e8e8e8;
  --text: #333;
  --text-secondary: #666;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

/* 登录页 */
#login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 400px;
}

.login-box h1 {
  text-align: center;
  margin-bottom: 30px;
  color: var(--text);
  font-size: 24px;
}

.login-box .tip {
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 15px;
}

/* 表单 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-row .form-group {
  flex: 1;
  min-width: 150px;
}

/* 按钮 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: #40a9ff;
}

.btn-secondary {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-secondary:hover {
  background: #e6f7ff;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 头部 */
.header {
  background: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.header h2 {
  font-size: 18px;
  color: var(--text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 标签页 */
.tabs {
  background: white;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.tab {
  padding: 15px 20px;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 14px;
  transition: all 0.3s;
}

.tab:hover {
  color: var(--primary);
}

.tab.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

/* 内容区域 */
.content {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* §443eq 2026-08-02: tab-content 默认 display:none, .active 时 block. 采购单需要占满视口 */
.tab-content {
  display: none;
}
.tab-content.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 30px);  /* 视口高度 - 主内容 padding 边距 */
  margin: 0;
  padding: 0;
}
.tab-content.active > .card {
  flex: 1;
  min-height: 0;
}

/* 卡片 */
.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card h3 {
  margin-bottom: 15px;
  font-size: 16px;
  color: var(--text);
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* §443snNEW1 2026-08-29: 老板原话 "KPI 卡片点击点不动" — dashboard 的 dash-* 5个 KPI
     现在是可点击的 (跳转到对应 status 过滤的工单列表), 所以卡片整体加 cursor + hover 阴影 */
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  user-select: none;
}

.stat-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.stat-card:active {
  transform: translateY(0);
}

.stat-card .stat-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s;
}

.stat-card .stat-value:hover {
  color: var(--primary);
  text-decoration: underline;
}

.stat-card .stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 5px;
}

.stat-card.pending .stat-value { color: var(--warning); }
.stat-card.processing .stat-value { color: var(--primary); }
.stat-card.completed .stat-value { color: var(--success); }
.stat-card.output .stat-value { color: #722ed1; }

/* 阶段统计 */
.stage-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stage-stat {
  background: var(--bg);
  padding: 10px 15px;
  border-radius: 4px;
  text-align: center;
  min-width: 80px;
}

.stage-stat .stage-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.stage-stat .stage-count {
  font-size: 20px;
  font-weight: bold;
  color: var(--primary);
}

/* 工具栏 */
.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 120px;
}

/* 表格 */
.table-container {
  overflow-x: scroll;
  width: 100%;
  scrollbar-width: thin;
}

.data-table {
  width: 2000px;
}

/* 冻结完整品名列(data-col="1",表头固定在左侧) — 仅对非商品档案的表格生效 */
.data-table:not(#products-data-table) th[data-col="1"],
.data-table:not(#products-data-table) td[data-col="1"] {
  position: sticky !important;
  left: 0 !important;
  z-index: 1;
  background: #fff !important;
  min-width: 240px;
}
.data-table:not(#products-data-table) th[data-col="1"] {
  z-index: 3;
  background: #f8f9fa !important;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 商品档案表格:列宽优先生效,不走 table-layout 平均分配 */
#products-data-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}
#products-data-table th, #products-data-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table th,
.data-table td {
  padding: 8px;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 列宽可拖动 */
.data-table th {
  position: relative;
  user-select: none;
}

.data-table th .col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  z-index: 2;
}

.data-table th .col-resize-handle:hover,
.data-table th .col-resize-handle.active {
  background: rgba(25, 118, 210, 0.3);
}

.data-table th {
  background: var(--bg);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 13px;
}

.data-table tr:hover {
  background: #fafafa;
}

/* 状态标签 */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-pending {
  background: #fffbe6;
  color: var(--warning);
}

.status-processing {
  background: #e6f7ff;
  color: var(--primary);
}

.status-completed {
  background: #f6ffed;
  color: var(--success);
}

/* 优先级 */
.priority-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
}

.priority-1 {
  background: var(--bg);
  color: var(--text-secondary);
}

.priority-2 {
  background: #fffbe6;
  color: var(--warning);
}

.priority-3 {
  background: #fff2f0;
  color: var(--danger);
}

/* 分页 */
.pagination {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 15px;
}

/* §443snNEW392 2026-11-04 老板拍 B: 工单管理分页条常驻底部 (sticky)
   起因: 老板报"我没看到分页的控件放在哪里" — 实测工单表格 50 行撑到 2732px,
         分页条在文档 2954px 处, 视口只有 900px, 必须滚到底才看得见 → 老板以为没有分页
   修法: #orders-pagination 固定在视口底部 (position:sticky; bottom:0), 滚动时一直可见
   ★ 只作用于工单管理 (#orders-pagination), 别的 tab 分页条位置不动
   ★ 背景色 + 阴影 → 浮在表格上方时能跟表格内容区分开, 不糊在一起 */
#orders-pagination {
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* §443snNEW392: 工单表格底部留白, 免得最后一行被 sticky 分页条盖住
   ★ sticky 分页条高 48px (padding 8px + 控件), 留 56px 保险 */
#tab-orders .table-container {
  padding-bottom: 56px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* 弹窗 */
.modal {
  position: fixed;
  /* §ui-planC-modal 2026-11-06 老板拍方案A: 顶部双层导航改版后让位
     固定栏实测占 126px = 顶部导航 48 + 二级菜单条 42 + 标签页条 36
     旧值 36px/z-index 998 是单层 tab 栏时代的值 → 弹窗上半部分被导航压住 58px */
  top: 126px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
}

.modal-header .close {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
}

.modal-content form {
  padding: 20px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 标签预览 */
.label-preview {
  background: white;
  border: 2px dashed var(--border);
  padding: 20px;
  margin: 15px 0;
  min-height: 200px;
}

.label-item {
  border: 1px solid #333;
  padding: 15px;
  margin-bottom: 10px;
  font-size: 12px;
}

.label-item table {
  width: 100%;
  border-collapse: collapse;
}

.label-item td {
  padding: 4px 8px;
}

.label-item .label-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #333;
  padding: 8px;
}

/* 快速操作 */
.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}

/* 来源统计 */
.source-stats {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.source-item {
  background: var(--bg);
  padding: 15px 25px;
  border-radius: 4px;
  text-align: center;
}

.source-item .source-name {
  font-size: 14px;
  color: var(--text-secondary);
}

.source-item .source-count {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary);
}

/* 操作按钮 */
.action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 5px;
}

.action-btn.edit {
  background: #e6f7ff;
  color: var(--primary);
}

.action-btn.delete {
  background: #fff2f0;
  color: var(--danger);
}

.action-btn.print {
  background: #f6ffed;
  color: var(--success);
}

/* 手机端优化 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  .header {
    flex-direction: column;
    gap: 8px;
    padding: 10px 15px;
  }
  
  .header h2 {
    font-size: 16px;
  }
  
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 5px;
  }
  
  .tab {
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  
  .content {
    padding: 10px;
  }
  
  .card {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .card h3 {
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .search-input,
  .filter-select {
    width: 100%;
    font-size: 14px;
    padding: 8px;
  }
  
  .btn {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .stat-card {
    padding: 12px 8px;
  }
  
  .stat-card .stat-value {
    font-size: 20px;
  }
  
  .stat-card .stat-label {
    font-size: 11px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .form-group {
    margin-bottom: 10px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 14px;
    padding: 8px 10px;
  }
  
  /* 表格手机端优化 */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .data-table {
    font-size: 12px;
    min-width: 600px;
  }
  
  .data-table th,
  .data-table td {
    padding: 6px 8px;
    white-space: nowrap;
  }
  
  /* 弹窗手机端优化 */
  .modal-content {
    width: 95%;
    max-height: 85vh;
    margin: 10px auto;
  }
  
  .modal-header {
    padding: 10px 15px;
  }
  
  .modal-header h3 {
    font-size: 15px;
  }
  
  .modal-content form {
    padding: 15px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .form-actions .btn {
    width: 100%;
  }
  
  /* 分页手机端 */
  .pagination button {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  /* 操作按钮手机端 */
  .action-btn {
    padding: 6px 10px;
    font-size: 12px;
    margin: 2px;
  }
  
  /* 阶段统计手机端 */
  .stage-stats {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .stage-stat {
    min-width: 70px;
    flex-shrink: 0;
  }
  
  /* 快速操作手机端 */
  .quick-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .quick-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  /* 标签预览手机端 */
  .label-preview {
    padding: 10px;
    font-size: 12px;
  }
  
  .label-item {
    padding: 10px;
    font-size: 11px;
  }
  
  /* 提示弹窗手机端 */
  .toast {
    left: 10px;
    right: 10px;
    transform: none;
    font-size: 13px;
    text-align: center;
  }
  
  @keyframes slideDown {
    from {
      top: -50px;
    }
    to {
      top: 10px;
    }
  }
}

/* 加载提示 */
.loading {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

/* 成功/错误提示 */
.toast {
  position: fixed;
  /* §ui-planC-overlay 2026-11-06 老板拍方案A: 顶部三层导航占 126px
     原 top:20px 居中 → 正好浮在导航中间, 挡住 采购/销售/库存/售后/财务/分析/系统 7 个菜单
     改到导航下方 (126 + 8 = 134) 居中显示, 导航永远可点 */
  top: 134px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 2000;
  animation: slideDown 0.3s ease;
}

.toast.success {
  background: var(--success);
  color: white;
}

.toast.error {
  background: var(--danger);
  color: white;
}

@keyframes slideDown {
  from {
    top: -50px;
  }
  to {
    top: 20px;
  }
}

/* 打印样式 */
@media print {
  body * {
    visibility: hidden;
  }
  
  #label-preview,
  #label-preview * {
    visibility: visible;
  }
  
  #label-preview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: white;
    padding: 20px;
  }
  
  .label-item {
    page-break-inside: avoid;
  }
}

/* §443snNEW585 2026-10-18 表格可读性优化 (修复中文按字竖排) */
table th, table td {
  white-space: nowrap !important;
  word-break: keep-all !important;
}
/* §443snNEW235 2026-10-25 老板拍板: 出入库记录「备注」列豁免全局 nowrap
   病根: 上面这条 `table th, table td { white-space: nowrap !important }` 是全局规则,
         优先级高于 td 的内联样式 → 备注列加再多 white-space:normal 都不生效
         → 长备注 (如 §443snNEW234 补录说明) 把整列撑到 1152px, 后面 6 列全被挤出屏幕
   修法: 用更具体的选择器 + !important 单独放开备注列 (只影响这一列, 不动其他表)
   ★ 选择器要同时匹配 th 和 td, 且优先级高于 `table th, table td` */
#rl-table-area table th,
#rl-table-area table td {
  /* 全局 nowrap 的兜底放开, 下面再逐列收紧 */
}
/* 备注列: 允许换行, 但限高 3 行 (老板拍板: 不能拉这么高) + 底部渐隐提示还有内容 */
#rl-table-area table th:nth-child(9),
#rl-table-area table td:nth-child(9) {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4;
  vertical-align: top;
}
/* §443snNEW236 2026-10-25 老板拍板: 备注列限高 (3 行) + 悬浮显示全部内容
   病根: 换行后长备注把行高拉到 8 行 (154px), 一屏放不了几行
   修法: 内层 div .rl-note-clamp 限 3 行 + overflow:hidden + 底部渐隐 (视觉提示"还有更多")
         + 自定义 tooltip 气泡 (data-tip 属性) 鼠标悬浮显示全文
   ★★ PITFALL: max-height 直接写在 td 上【不生效】(td 是 table-cell, 高度由内容撑开)
     → 必须套一层普通 div 才能限高 */
#rl-table-area table td:nth-child(9) {
  vertical-align: top;
  cursor: help;
}
.rl-note-clamp {
  max-height: 60px;
  overflow: hidden;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.4;
  position: relative;
  /* 底部渐隐: 提示下面还有内容 */
  -webkit-mask-image: linear-gradient(to bottom, #000 42px, transparent 60px);
  mask-image: linear-gradient(to bottom, #000 42px, transparent 60px);
}
/* ★ 自定义 tooltip 气泡 (全局, 可复用): 给任意元素加 data-tip="全文" 即生效 */
.koz-tip {
  position: fixed;
  z-index: 99999;
  max-width: 460px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 11px;
  background: #263238;
  color: #fff;
  font-size: 12px;
  line-height: 1.55;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.koz-tip.show { opacity: 1; }
.koz-tip::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
}
/* 其余列保持 nowrap (不换行), 但允许省略号截断, 防止长文本撑破列宽 */
#rl-table-area table th:not(:nth-child(9)),
#rl-table-area table td:not(:nth-child(9)) {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
table thead th {
  white-space: nowrap;
  font-weight: 600;
}
/* 销售单/工单/库存等主表格容器加横向滚动, 防止列被切 */
#so-table-container,
#order-table-container,
#inventory-table-container,
#po-table-container,
table.data-table,
table.report-table {
  overflow-x: auto;
}
/* 主表格给个最小宽度, 触发横向滚动 */
#so-table,
#order-table,
#po-table,
table.data-table {
  min-width: 1400px;
}
#so-table th, #so-table td,
#order-table th, #order-table td {
  padding: 8px 10px;
  vertical-align: top;
}
#so-table th:nth-child(2), #so-table td:nth-child(2),
#order-table th:nth-child(2), #order-table td:nth-child(2) {
  min-width: 140px; /* 单号列 */
}
#so-table th:nth-child(3), #so-table td:nth-child(3),
#order-table th:nth-child(3), #order-table td:nth-child(3) {
  min-width: 200px; /* 客户/产品名列 */
}
#so-table th:nth-child(4), #so-table td:nth-child(4),
#order-table th:nth-child(4), #order-table td:nth-child(4) {
  min-width: 140px; /* 客户名/规格 */
}
#so-table th:nth-child(5), #so-table td:nth-child(5),
#order-table th:nth-child(5), #order-table td:nth-child(5),
#so-table th:nth-child(6), #so-table td:nth-child(6),
#order-table th:nth-child(6), #order-table td:nth-child(6) {
  min-width: 120px; /* 数量/价格/类型 */
}


/* §443snNEW585 2026-10-18 全局 loading spinner (P2-2) */
/* ★§443snNEW293 2026-10-28 老板拍 C: 遮罩从【全屏半透明黑底】改成【右上角小胶囊】
   病根: 全屏遮罩每闪一次 = 整页白闪一下, 批量操作(每个请求一次遮罩)最刺眼
   改法: 不再遮挡整页, 只在右上角显示一个小 spinner, 不挡老板看表格 */
.global-loading {
  position: fixed;
  /* §ui-planC-overlay 2026-11-06 老板拍方案A: 原 top:12px right:12px 会盖住
     顶部导航右侧的「问题反馈」「退出」按钮 (实测坐标 1540,12 - 1668,74)
     挪到导航下方右侧 (126 + 8 = 134), 导航按钮永远可点 */
  top: 134px;
  right: 12px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 20px;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 8px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.global-loading.active { display: flex; }
.global-loading .spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #64b5f6;
  border-radius: 50%;
  animation: global-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.global-loading .text {
  color: white;
  font-size: 13px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
}
@keyframes global-spin {
  to { transform: rotate(360deg); }
}

/* §443snNEW585 骨架屏 (skeleton) */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
  color: transparent !important;
}
.skeleton::after { content: " "; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* §443snNEW585 Toast 容器 (P2-6) */
.toast-container {
  position: fixed;
  /* §ui-planC-overlay 2026-11-06 老板拍方案A: 原 top:70px 压住二级菜单条右侧 (48~90)
     挪到 126px 导航下方 */
  top: 134px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.toast {
  padding: 12px 16px;
  border-radius: 6px;
  background: #323232;
  color: white;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: toast-slide 0.3s ease-out;
}
.toast.success { background: #2e7d32; }
.toast.error   { background: #c62828; }
.toast.warning { background: #ef6c00; }
.toast.info    { background: #1976d2; }
@keyframes toast-slide {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}


/* ★★ fix329 2026-10-29 老板报「外加工标签打印打不出来」
   病根: 上面那段 @media print (body * { visibility:hidden }) 是给【标签页】的老打印用的,
         可见白名单只有 #label-preview → 外加工标签 (#outsource-label-print-area) 不在白名单里
         → 打印预览整页空白
         而且 body * { visibility:hidden } 只隐藏【可见性】不改变【布局】
         → 侧边栏 + 整个 app 页面仍然占 2 页
   修法: 下面这段只针对外加工标签打印生效:
         ① 整体 display:none (真正不占版面 → 只剩 1 页)
         ② 把 #outsource-label-print-area 移到 body 下, position:static, 去掉圆角/边框
         ③ 打印完成后自动还原 (JS 在 printOutsourceLabel 里前后调 _osPrintMode)
   ★ 老标签页 (#label-preview) 的打印规则不动 */
@media print {
  /* 外加工标签打印模式 (由 body.os-print-mode 标记) */
  body.os-print-mode > *:not(#os-print-host) {
    display: none !important;
  }
  body.os-print-mode #os-print-host {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    /* ★ 老 @media print 的 body * { visibility:hidden } 也会命中这里 →
       必须显式把整棵子树 visibility 拉回来, 否则打印出来还是空白 */
    visibility: visible !important;
  }
  body.os-print-mode #os-print-host * {
    visibility: visible !important;
  }
  body.os-print-mode #os-print-host #outsource-label-print-area {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
  }
  body.os-print-mode #os-print-host table {
    page-break-inside: auto;
  }
  body.os-print-mode #os-print-host tr {
    page-break-inside: avoid;
  }
  @page {
    size: A4;
    margin: 10mm;
  }
}

/* ★ fix330 兜底: 即使 JS 没跑 (老板浏览器旧缓存), 只要外加工标签弹窗是打开的,
     打印也只输出标签。
   ★ 关键: #outsource-label-modal 是 #main-content 的【直接子元素】
     → 不能藏整个 #main-content (会把 modal 一起藏掉, 打印还是空白)
     → 改成只藏 #main-content 里除 modal 外的其他子元素 + 清掉 main-content 的边距
   ★ 老标签页 (#label-preview) 不受影响: 它不在 outsource-label-modal 里 */
@media print {
  body:has(#outsource-label-modal[style*="display: block"]) > *:not(#main-content),
  body:has(#outsource-label-modal[style*="display:block"]) > *:not(#main-content) {
    display: none !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #main-content,
  body:has(#outsource-label-modal[style*="display:block"]) #main-content {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #main-content > *:not(#outsource-label-modal),
  body:has(#outsource-label-modal[style*="display:block"]) #main-content > *:not(#outsource-label-modal) {
    display: none !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-modal,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-modal {
    display: block !important;
    position: static !important;
    inset: auto !important;
    background: #fff !important;
    overflow: visible !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-modal *,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-modal * {
    visibility: visible !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-modal > div,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-modal > div {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-print-area,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-print-area {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    font-family: SimSun, serif !important;
  }
  /* ★ 打印时压缩字号/内边距, 保证 1 页 A4 塞得下 */
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-print-area *,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-print-area * {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-print-area table td,
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-print-area table th,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-print-area table td,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-print-area table th {
    padding: 2px 3px !important;
  }
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-print-area div[style*="letter-spacing"],
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-print-area div[style*="letter-spacing"] {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
  /* ★ 藏掉弹窗 UI 控件 (标题行「外加工标签」+ ×, 底部「打印」「关闭」按钮)
     只留真正的标签内容 (#outsource-label-preview-box) */
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-modal > div > div:first-child,
  body:has(#outsource-label-modal[style*="display: block"]) #outsource-label-modal > div > div:last-child,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-modal > div > div:first-child,
  body:has(#outsource-label-modal[style*="display:block"]) #outsource-label-modal > div > div:last-child {
    display: none !important;
  }
}

/* §ui-planC-step2 2026-11-05 老板拍 C
   (1) 右上角空白框: toast 容器无消息时隐藏
   (2) 宽表「操作」列固定在右侧, 不用横向拖动 */
.toast-container:empty { display: none !important; }
#tab-orders table.data-table > thead > tr > th:last-child,
#tab-orders table.data-table > tbody > tr > td:last-child,
#po-main-table > thead > tr > th:last-child,
#po-main-table > tbody > tr > td:last-child,
#tab-sales-orders table > thead > tr > th:last-child,
#tab-sales-orders table > tbody > tr > td:last-child {
  position: sticky !important;
  right: 0;
  z-index: 3;
  background: #fff !important;
  box-shadow: -4px 0 6px -2px rgba(0,0,0,.10);
}
#tab-orders table.data-table > thead > tr > th:last-child,
#po-main-table > thead > tr > th:last-child,
#tab-sales-orders table > thead > tr > th:last-child { z-index: 5; background: #fafafa !important; }

/* §ui-planC-step3 2026-11-05 老板拍 C: 全站最小字号 12px (仅屏幕, 不影响打印)
   来源实测: ~95% 是 JS 生成的内联 style="font-size:11px", 其余是表头 th */
@media screen {
  #main-content [style*="font-size:9px"], #main-content [style*="font-size: 9px"],
  #main-content [style*="font-size:10px"], #main-content [style*="font-size: 10px"],
  #main-content [style*="font-size:11px"], #main-content [style*="font-size: 11px"],
  #main-content [style*="font-size:10.5px"], #main-content [style*="font-size:11.5px"] {
    font-size: 12px !important;
  }
  #main-content table th { font-size: max(12px, 1em) !important; }
}

/* §ui-planC-step3b 2026-11-05 老板拍 C: 采购单顶部按钮主次分明
   只改颜色, 不动位置/功能: 「+ 新建」实心主色; 其余改白底+彩色描边; 超时预警保留红色描边 */
#tab-purchase-orders > .card > div:first-child button.btn:not(.btn-primary) {
  background: #fff !important;
  color: #455a64 !important;
  border: 1px solid #cfd8dc !important;
}
#tab-purchase-orders > .card > div:first-child button.btn:not(.btn-primary):hover { background: #f5f7f8 !important; border-color: #90a4ae !important; }
#tab-purchase-orders > .card > div:first-child button.btn[onclick*="showPurchaseReturnModal"] { color: #7b1fa2 !important; border-color: #ce93d8 !important; }
#tab-purchase-orders > .card > div:first-child button.btn[onclick*="showOverduePOPanel"] { color: #c62828 !important; border-color: #ef9a9a !important; }
#tab-purchase-orders > .card > div:first-child button.btn.btn-primary { background: #1976d2 !important; color: #fff !important; border: 1px solid #1976d2 !important; }

/* §ui-planC2 2026-11-06 老板拍方案C 仪表盘改版: 问候栏 / KPI 涨跌+spark / 柱状图 / 环形图 */
.dash-hero{
  margin-top:16px;padding:16px 20px;border-radius:10px;
  background:linear-gradient(120deg,#3d4a63,#1b2130);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.dash-hero .dh-greet{font-size:17px;font-weight:600;margin-bottom:5px}
.dash-hero .dh-sub{font-size:12.5px;color:#c7cdd6}
.dash-hero .dh-sub b{color:#ffd7a8;font-weight:700}
.dash-hero .dh-acts{display:flex;gap:9px;flex-shrink:0}
.dash-hero .dh-btn{padding:7px 15px;border-radius:7px;font-size:12.5px;border:1px solid transparent;cursor:pointer;font-weight:500}
.dash-hero .dh-danger{background:#ef4444;color:#fff;font-weight:600}
.dash-hero .dh-danger:hover{background:#dc2626}
.dash-hero .dh-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.dash-hero .dh-ghost:hover{background:rgba(255,255,255,.2)}
.dash-hero .dh-btn[hidden]{display:none}

#dash-kpi-grid .stat-card{position:relative;overflow:hidden}
.stat-delta{font-size:11.5px;margin-top:5px;color:#10b981;min-height:16px}
.stat-delta.dn{color:#ef4444}
.stat-delta.flat{color:#6b7280}
#dash-kpi-grid .stat-card{padding-bottom:26px}
.stat-spark{position:absolute;right:8px;bottom:6px;width:52px;height:18px;opacity:.55;pointer-events:none}
#dash-charts .dash-card{background:#fff;border:1px solid #ececec;border-radius:8px;padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dash-card .dc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dash-card .dc-head h3{margin:0;font-size:14px;font-weight:600;color:#0a0a0a}
.dash-card .dc-legend{display:flex;align-items:center;gap:14px;font-size:11.5px;color:#6b7280}
.dash-card .dc-legend span{display:flex;align-items:center;gap:5px}
.dash-card .dc-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.dash-card .dc-legend em{font-style:normal;color:#9ca3af}
.dash-card .dc-hint{font-size:11.5px;color:#9ca3af;margin:3px 0 11px}
.dash-svg{width:100%;height:170px;display:block}
.dash-donut{display:flex;align-items:center;gap:16px}
.dash-donut-list{flex:1;min-width:0}
.dash-donut-list .dd{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px dashed #eef0f2;gap:8px}
.dash-donut-list .dd:last-child{border:0}
.dash-donut-list .dd span{display:flex;align-items:center;gap:6px;color:#4b5563;white-space:nowrap}
.dash-donut-list .dd i{width:8px;height:8px;border-radius:2px;display:inline-block;flex-shrink:0}
.dash-donut-list .dd b{font-variant-numeric:tabular-nums}
.dash-donut-list .dd b{margin-left:auto}
.dash-donut-list .dd em{font-style:normal;color:#9ca3af;font-size:11px;min-width:34px;text-align:right}
@media (max-width:1100px){
  #dash-charts{grid-template-columns:1fr !important}
}

/* §ui-planC2-nav 2026-11-06 老板拍方案C: 侧边栏 → 顶部双层导航 */
/* 做法: 保留原 DOM (.sidebar-tab / details.sidebar-group), 只用 CSS 改成横向条.
   不使用 display:contents —— 会让子项脱离横条容器导致竖排+跑出屏幕.
   方案: details 展开为 flex 容器, .sidebar-group-items 变成 flex row, 内部按钮横向排. */
#top-nav{
  position:fixed;top:0;left:0;right:0;height:48px;z-index:1600;
  background:linear-gradient(180deg,#1b2130,#141926);color:#c7cdd6;
  display:flex;align-items:center;gap:14px;padding:0 16px;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.tn-brand{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-right:12px;border-right:1px solid rgba(255,255,255,.12)}
.tn-logo{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#5e6ad2,#8b5cf6);display:inline-block}
.tn-brand-text{font-size:14.5px;font-weight:700;color:#fff;white-space:nowrap}
.tn-modules{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tn-modules::-webkit-scrollbar{display:none}
.tn-mod{padding:6px 12px;border-radius:7px;font-size:13px;color:#c7cdd6;cursor:pointer;white-space:nowrap;border:none;background:transparent;font-family:inherit;transition:background .12s,color .12s}
.tn-mod:hover{background:rgba(255,255,255,.1);color:#fff}
.tn-mod.on{background:#5e6ad2;color:#fff;font-weight:600}
.tn-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tn-user{font-size:12.5px;color:#d1d5db;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.tn-btn{padding:5px 11px;border-radius:6px;font-size:12px;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#e5e7eb;font-family:inherit;white-space:nowrap}
.tn-btn:hover{background:rgba(255,255,255,.16)}
.tn-feedback{background:#f57c00;border-color:#f57c00;color:#fff;font-weight:600}
.tn-feedback:hover{background:#ef6c00}

/* ---- 第二排: 原侧边栏变横向子菜单条 ---- */
html body aside#main-sidebar.sidebar{
  position:fixed !important;top:48px !important;left:0 !important;right:0 !important;bottom:auto !important;
  width:auto !important;height:42px !important;min-height:0 !important;max-height:42px !important;
  display:flex !important;flex-direction:row !important;align-items:center !important;
  gap:0 !important;overflow-x:auto !important;overflow-y:hidden !important;
  background:#fff !important;border-bottom:1px solid #e6e8eb !important;
  padding:0 16px !important;box-shadow:0 1px 2px rgba(0,0,0,.04) !important;z-index:1550 !important;
}
html body aside#main-sidebar .sidebar-header,
html body aside#main-sidebar .sidebar-footer{display:none !important}
html body aside#main-sidebar .sidebar-dashboard{display:none !important}
/* details 本身作为横排容器 */
html body aside#main-sidebar details.sidebar-group{
  display:flex;flex-direction:row !important;align-items:center !important;
  flex:0 0 auto !important;margin:0 !important;padding:0 !important;
  height:42px !important;width:auto !important;
}
html body aside#main-sidebar details.sidebar-group > summary{display:none !important}
html body aside#main-sidebar .sidebar-group-items{
  display:flex !important;flex-direction:row !important;align-items:center !important;
  gap:2px !important;padding:0 !important;margin:0 !important;height:42px !important;
}
html body aside#main-sidebar .sidebar-tab{
  width:auto !important;margin:0 !important;padding:9px 12px !important;
  border-radius:0 !important;border-left:0 !important;border-bottom:2px solid transparent !important;
  font-size:13px !important;white-space:nowrap !important;background:transparent !important;
  color:#4b5563 !important;display:flex !important;align-items:center !important;gap:6px !important;
  flex:0 0 auto !important;height:42px !important;
}
html body aside#main-sidebar .sidebar-tab:hover{background:#f4f5f7 !important;color:#111827 !important}
html body aside#main-sidebar .sidebar-tab.active{
  background:transparent !important;color:#5e6ad2 !important;font-weight:600 !important;
  border-bottom:2px solid #5e6ad2 !important;
}
html body aside#main-sidebar .sidebar-tab::before{display:none !important}
/* 内容区上移, 让出 顶部导航(48) + 子菜单条(42) + 标签页条(36) */
html body #main-content{margin-left:0 !important;width:auto !important;max-width:none !important;padding-top:126px !important}
html body #inapp-tabs-bar{top:90px !important;left:0 !important;right:0 !important;width:auto !important;z-index:1500 !important}

/* §ui-planC-all 2026-11-06 (2) 仪表盘无子菜单: 隐藏第二排, 内容上提 */
html body.tn-no-sub aside#main-sidebar.sidebar{display:none !important}
html body.tn-no-sub #inapp-tabs-bar{top:48px !important}
html body.tn-no-sub #main-content{padding-top:84px !important}
/* §ui-planC-modal 2026-11-06 方案A: 无二级菜单的页面 (仪表盘) 固定栏只占 84px = 48+36 */
html body.tn-no-sub .modal{top:84px !important}
/* 弹窗内容最大高度按新顶部位置收窄, 避免 90vh 顶出视口底部 */
html body .modal > .modal-content{max-height:calc(100vh - 150px) !important}

/* §ui-planC-modal 2026-11-06 方案A 延伸: 部分弹窗 (智能采购/按工单采购/角色管理等)
   把遮罩层和内容层写成了 JS 内联 style 硬编码 top:36px / top:50% / z-index<1500,
   内联样式优先级高于上面的 .modal 类规则 → 用 !important + 属性选择器强制纠正.
   不改 JS 里的 35 处硬编码, 保持改动面最小. */
html body .modal > div[style*="top:36px"],
html body .modal > div[style*="top: 36px"]{
  top:126px !important;
}
/* 内容层原本 top:50% + translateY(-50%) 相对整个视口居中 → 上沿被导航压住
   改成「让出 126px 后居中」= 中心点下移 63px */
html body .modal > div[style*="top:50%"],
html body .modal > div[style*="top: 50%"]{
  top:calc(50% + 63px) !important;
  max-height:calc(100vh - 150px) !important;
}
/* 角色管理等用 inset:0 + padding 的弹窗 */
html body #role-manager-modal{
  padding-top:146px !important;
  z-index:1500 !important;
}
/* 无二级菜单页面 (仪表盘) 上面三条同样要收一档 */
html body.tn-no-sub .modal > div[style*="top:36px"],
html body.tn-no-sub .modal > div[style*="top: 36px"]{top:84px !important}
html body.tn-no-sub .modal > div[style*="top:50%"],
html body.tn-no-sub .modal > div[style*="top: 50%"]{top:calc(50% + 42px) !important}

/* §ui-planC-modal 2026-11-06 方案A: 这 4 个弹窗用 position:fixed;top:0 全屏遮罩
   但 z-index < 1500 → 内容头部被三层导航压住 (实测 81~91px) */
html body #colorcode-modal,
html body #bom-version-modal,
html body #auto-density-modal,
html body #bom-batch-edit-modal{
  top:126px !important;
  z-index:1500 !important;
}
html body.tn-no-sub #colorcode-modal,
html body.tn-no-sub #bom-version-modal,
html body.tn-no-sub #auto-density-modal,
html body.tn-no-sub #bom-batch-edit-modal{top:84px !important}
/* §ui-planC-overlay 2026-11-06 方案A: 无二级菜单页 (仪表盘) 导航只占 84px, 浮层跟着收一档 */
html body.tn-no-sub .toast,
html body.tn-no-sub .toast-container,
html body.tn-no-sub .global-loading{top:92px !important}
/* (1) 全站宽表「操作」列固定右侧 */
.op-sticky-wrap{overflow-x:auto !important;max-width:100%}
table.op-sticky > thead > tr > th:last-child,
table.op-sticky > tbody > tr > td:last-child{
  position:sticky !important;right:0;z-index:2;
  background:#fff;box-shadow:-6px 0 8px -6px rgba(0,0,0,.18);
}
table.op-sticky > thead > tr > th:last-child{z-index:3;background:#f7f8fa}
table.op-sticky > tbody > tr:hover > td:last-child{background:#f4f6ff}

/* §ui-planC-all (5) 表格美化: 隔行底纹 / 收货进度条 / 状态标签字号 */
.tab-content table > tbody > tr:nth-child(even) > td{background-color:#fafbfc}
.tab-content table > tbody > tr:hover > td{background-color:#f4f6ff}
table.op-sticky > tbody > tr:nth-child(even) > td:last-child{background:#fafbfc}
table.op-sticky > tbody > tr:hover > td:last-child{background:#f4f6ff}
.rcv-bar{display:block;height:4px;border-radius:2px;background:#e5e7eb;margin-top:4px;min-width:60px;overflow:hidden}
.rcv-bar > i{display:block;height:100%;border-radius:2px;background:#5e6ad2}
.rcv-bar.full > i{background:#16a34a}
.rcv-bar.zero > i{background:transparent}
/* 状态标签: 原内联 font-size:11px → 最小 12px (同一 span 只调字号, 颜色不动) */
.tab-content td span[style*="border-radius:10px"][style*="font-size:11px"],
.tab-content td .status-badge{font-size:12px !important}

/* §ui-planC-all fix: 固定「操作」列太宽(254px)挡住中间列 → 按钮折两行, 列宽压到 ~150px */
table.op-sticky > tbody > tr > td:last-child{
  white-space:normal !important;min-width:120px;max-width:160px;width:160px;
  line-height:1.9;
}
table.op-sticky > thead > tr > th:last-child{width:160px;min-width:120px;max-width:160px;white-space:nowrap}
table.op-sticky > tbody > tr > td:last-child > button,
table.op-sticky > tbody > tr > td:last-child > a{display:inline-block;margin:1px 2px !important;white-space:nowrap}

/* §ui-planC-all compact 2026-11-06 老板拍「表格内尽量紧凑一点能看到所有的数据」
   紧凑间距 + 长文字换行(不截断, 不省略号) + 操作按钮变小, 让表格尽量不超出屏幕 */
.tab-content table > thead > tr > th{padding:6px 6px !important;font-size:12.5px !important;line-height:1.3 !important;white-space:nowrap}
.tab-content table > tbody > tr > td{
  padding:5px 6px !important;font-size:12.5px !important;line-height:1.35 !important;
  white-space:normal !important;overflow-wrap:anywhere;word-break:normal;max-width:200px;
  text-overflow:clip !important;overflow:visible;
}
.tab-content table > tbody > tr > td *{text-overflow:clip}
.tab-content table > tbody > tr > td [style*="white-space:nowrap"],
.tab-content table > tbody > tr > td [style*="white-space: nowrap"]{white-space:normal !important}
/* 状态标签不拆字 */
.tab-content td .status-badge,
.tab-content td span[style*="border-radius:10px"]{white-space:nowrap !important;padding:1px 6px !important}
/* 操作列: 按钮变小, 自动换行, 列宽随内容 (最宽 170) */
table.op-sticky > tbody > tr > td:last-child{width:auto !important;min-width:0 !important;max-width:170px !important;line-height:1.5 !important}
table.op-sticky > thead > tr > th:last-child{width:auto !important;min-width:0 !important;max-width:170px !important}
.tab-content table td .action-btn,
.tab-content table td:last-child > button{padding:2px 6px !important;font-size:12px !important;margin:1px !important;min-height:0 !important;line-height:1.4 !important}

/* compact-2: 去掉写死的表格最小宽度/固定列宽, 按内容自动排 (超出时仍可横向滚动, 不截断) */
.tab-content table{min-width:0 !important;table-layout:auto !important}
.tab-content table:not(.op-keep-w){width:100% !important}
.tab-content table > thead > tr > th{width:auto !important;min-width:0 !important;max-width:none}
.tab-content table > thead > tr > th{white-space:normal !important;word-break:keep-all}

/* compact-3: 操作列 2 行按钮; 表头 min-width 由 JS 按内容给 (覆盖 compact-2 的 min-width:0) */
.tab-content table > thead > tr > th[style*="min-width"]{min-width:revert-layer}
table.op-sticky > thead > tr > th:last-child,
table.op-sticky > tbody > tr > td:last-child{min-width:150px !important;max-width:210px !important}