/* ===== 魔笛手售后管理平台 - PC 后台样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f0f2f5;
  color: #333;
  font-size: 14px;
}

/* ===== 登录页 ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a2e1f 0%, #07C160 120%);
}
.login-card {
  width: 380px;
  background: #fff;
  border-radius: 0;
  padding: 48px 40px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  text-align: center;
}
.login-logo { font-size: 48px; margin-bottom: 8px; }
.login-title { font-size: 20px; color: #1a1a1a; margin-bottom: 6px; }
.login-sub { font-size: 13px; color: #999; margin-bottom: 32px; }
.login-form { text-align: left; }
.login-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid #ddd;
  border-radius: 0;
  font-size: 15px;
  margin-bottom: 16px;
  outline: none;
  background: #fafafa;
}
.login-input:focus { border-color: #07C160; background: #fff; }
.login-error { color: #e64340; font-size: 13px; margin-top: 12px; min-height: 18px; text-align: center; }

/* ===== 按钮 ===== */
.btn {
  border: none;
  border-radius: 0;
  padding: 0 20px;
  height: 38px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .15s;
  display: inline-flex;          /* 让 <label class="btn"> 也能撑起 38px 高度（原 <button>/<a> 默认 inline-block，<label> 默认 inline 会坍塌）*/
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #07C160; color: #fff; }
.btn-danger { background: #e64340; color: #fff; }
.btn-light { background: #f0f0f0; color: #555; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 0; }
.btn-block { width: 100%; height: 46px; font-size: 16px; }

/* ===== 顶栏 ===== */
.app-page { min-height: 100vh; }
.topbar {
  height: 56px;
  background: #0a2e1f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-left { font-size: 16px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-badge {
  background: rgba(7, 193, 96, .25);
  color: #6fe3a5;
  border: 1px solid rgba(7, 193, 96, .5);
  border-radius: 0;
  padding: 4px 14px;
  font-size: 13px;
}

/* ===== Tab ===== */
.tabs {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.tab {
  padding: 14px 18px;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.tab:hover { color: #07C160; }
.tab.active { color: #07C160; border-bottom-color: #07C160; }
.tab .cnt {
  display: inline-block;
  min-width: 20px;
  background: #e64340;
  color: #fff;
  border-radius: 0;
  font-size: 12px;
  padding: 1px 6px;
  margin-left: 6px;
}

/* ===== 售后工单类型便签（全部/维修/退货/上门，带数量） ===== */
.type-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}

/* ===== 销售订单类型便签（全部/整机/配件，颜色与列表标签一致） ===== */
.sales-type-chips { padding-top: 8px; padding-bottom: 8px; }

/* 售后与销售订单的类型便签共用同一套扁平矩形造型 */
.type-chip,
.sales-type-chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.type-chip .n,
.sales-type-chip .n { margin-left: 3px; font-size: 12px; font-weight: 500; }
.type-chip:not(.active) .n,
.sales-type-chip:not(.active) .n { color: inherit; opacity: .82; }
.type-chip:hover,
.sales-type-chip:hover { filter: brightness(.96); }

/* ===== 状态胶囊行（2026-09-29）=====
   售后工单的状态档从「下划线文字 Tab」改为胶囊，与下方类型行视觉统一：
   选中＝实心底白字，未选中＝白底彩字彩框（颜色由 JS 注入 inline style，与 .type-chip 同一套语言）。
   销售订单 / 操作记录仍走原来的下划线 Tab（.tab），不受影响。
   数字角标：所有状态档都带（原「全部 / 已完成」被 noCount 关掉，但 counts 里有值）。 */
.tabs.chip-row {
  padding: 12px 24px 10px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: visible;
}
.chip-row-label {
  flex: none;
  font-size: 12px;
  line-height: 1.4;
  color: #94a3b8;
  user-select: none;
}
/* 类型行（#after-type-chips / #sales-type-chips）也要带行首小标签，纵向居中 */
.type-chips { align-items: center; }
.status-chip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.status-chip .n { margin-left: 4px; font-size: 13px; font-weight: 500; }
.status-chip:not(.active) .n { color: inherit; opacity: .82; }

/* ===== 内容区 ===== */
.content { padding: 20px 24px 40px; max-width: 1200px; margin: 0 auto; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.total-tip { color: #888; font-size: 13px; }
.search-input {
  width: 240px;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid #ddd;
  border-radius: 0;
  font-size: 14px;
  outline: none;
  background: #fff;
  margin-right: 12px;
}
.search-input:focus { border-color: #07C160; }

.table-wrap {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  overflow-x: auto;
  /* 右侧渐隐阴影，提示「右边还有内容可滚动」 */
  background-image: linear-gradient(to right, transparent 30px, rgba(0, 0, 0, 0.06) 30px, transparent 31px);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 60px 100%;
}
.order-table { width: 100%; border-collapse: collapse; min-width: 900px; table-layout: auto; }
.order-table th {
  text-align: left;
  padding: 10px 12px;
  background: #fafafa;
  color: #888;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.order-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 13.5px;
  line-height: 1.5;
  vertical-align: middle;
}
/* 单行省略：数量/电话/状态/工厂/时间/操作 这些短内容列。
   .desc-cell（商品/备注）和 .contact-cell（买家/收货）除外，
   它们靠内部 div 控宽度和换行，能正确分2排并两行截断。 */
.order-table td:not(.desc-cell):not(.contact-cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-table tr:hover td { background: #f7fbf9; }
.order-no { color: #333; }

/* ⚠️ 表格单元格的两个坑（已踩，别再犯）：
   1) 不要在 td 上写 max-width —— CSS 规范里 max-width 不适用于 display:table-cell，写了完全不生效。
      原先靠 white-space:nowrap 撑住列宽，一旦放开 nowrap 又没有别的宽度约束，列宽会被内容无限撑开。
   2) 不要在 td 上写 display:-webkit-box 做多行省略 —— 会让单元格脱离表格布局流，
      列宽计算与对齐全部失效，表现为整表错位。
   正确做法：td 保持原生 table-cell，宽度 / 换行 / 截断全部下沉到 td 内部那层 div 上。
*/
/* 商品 / 备注：最多两行，超出省略；悬停 title 看全文 */
.desc-cell { color: #666; }
.desc-inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  max-width: 210px;
}
/* 买家昵称 + 收货人 合并列：上排昵称（主），下排收货人（次） */
.cc-main,
.cc-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 118px;
}
.cc-main { font-size: 13.5px; color: #333; }
.cc-sub { font-size: 12px; color: #999; margin-top: 2px; }
/* 备注副行（2026-09-03 起合并进商品列，不再单独占一列）：
   单行省略 + 红色小字，靠颜色字号与商品名区分，不再用 ✚ 前缀。
   ⚠️ 同样遵守上面铁律：宽度/换行/截断写在内层 div 上，不要写到 td 上。 */
.dc-remark {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
  font-size: 12px;
  color: #e64340;
  margin-top: 3px;
}
/* 窄屏（≤1500px，覆盖 1080/1366 笔记本）：压缩内边距与字号，让所有列放得下 */
@media (max-width: 1500px) {
  .content { padding: 16px 16px 32px; }
  .order-table th { padding: 8px 9px; font-size: 12.5px; }
  .order-table td { padding: 8px 9px; font-size: 13px; }
  .desc-inner,
  .dc-remark { max-width: 170px; }
  .cc-main,
  .cc-sub { max-width: 104px; }
}
.empty-tip { padding: 60px 0; text-align: center; color: #aaa; font-size: 14px; }

/* ===== 状态徽标 ===== */
.badge { display: inline-block; padding: 2px 8px;
  border-radius: 0;
  font-size: 12px;
  white-space: nowrap;
}
.badge.pending  { background: #fff7e6; color: #E8682C; }
.badge.assigned { background: #e6f4ff; color: #1677ff; }
.badge.received { background: #f0f5ff; color: #4b6bdf; }
.badge.processing { background: #f9eefc; color: #9b4de0; }
.badge.completed { background: #e8f8ef; color: #07C160; }
.badge.ignored  { background: #f5f5f5; color: #999; }

/* ===== 弹窗 ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  background: #fff;
  border-radius: 0;
  width: 480px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}
.modal-lg { width: 720px; }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
}
.modal-close {
  border: none;
  background: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
  line-height: 1;
}
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ===== 详情字段 ===== */
.d-section { margin-bottom: 20px; }
.d-section h4 {
  font-size: 13px;
  color: #07C160;
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid #07C160;
}
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.d-item { display: flex; font-size: 13.5px; padding: 4px 0; }
.d-label { color: #999; width: 90px; flex-shrink: 0; }
.d-value { color: #333; flex: 1; word-break: break-all; }
.d-full { grid-column: 1 / -1; }
.photo-list { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-list img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid #eee;
  cursor: pointer;
}

/* ===== 表单 ===== */
.form-field { margin-bottom: 16px; }
.form-field > label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.form-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid #ddd;
  border-radius: 0;
  font-size: 14px;
  outline: none;
  background: #fafafa;
}
textarea.form-input { height: auto; padding: 10px 12px; resize: vertical; }
.form-input:focus { border-color: #07C160; background: #fff; }
.req { color: #e64340; font-style: normal; }
.radio-row { display: flex; gap: 20px; }
.radio-item { font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 5px; }

/* 手动录入：订单编号（输入框 + 随机按钮） */
.manual-no-row { display: flex; gap: 8px; align-items: center; }
.manual-no-row .form-input { flex: 1; }
.manual-no-row .btn { flex-shrink: 0; }

/* 手动录入：产品型号多选列表 */
.manual-products {
  max-height: 300px;
  overflow-y: auto;
  border: 1.5px solid #ddd;
  border-radius: 0;
  padding: 8px 12px;
  background: #fafafa;
}
.mp-group { margin-bottom: 4px; }
.mp-cat {
  font-size: 12px;
  color: #07C160;
  padding: 6px 0 2px;
}
.mp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
}
.mp-item .mp-check { cursor: pointer; flex-shrink: 0; }
.mp-item .mp-name { flex: 1; font-size: 13px; color: #333; }
.mp-item .mp-qty {
  width: 52px;
  padding: 2px 6px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-size: 13px;
  text-align: center;
  outline: none;
  flex-shrink: 0;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .78);
  color: #fff;
  padding: 10px 26px;
  border-radius: 0;
  font-size: 14px;
  z-index: 200;
}
.toast.err { background: #e64340; }

/* ===== 上传进度条（v80 新增）=====
   任何附件（图片 / PDF）上传时显示真实进度，避免「不知道传完没有」。
   与 .toast 同一套视觉语言（居中浮动、深色、直角），但定位在 toast 之上，
   两者不会重叠；上传期间不弹 toast，所以实际上很少同屏。 */
.upload-progress {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  max-width: 88vw;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  padding: 10px 16px 12px;
  border-radius: 0;
  font-size: 13px;
  z-index: 210;
}
.upload-progress .up-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.upload-progress .up-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-progress .up-pct {
  flex: none;
  font-size: 12px;
  color: #3ddc84;
  font-variant-numeric: tabular-nums;
}
.upload-progress .up-track {
  height: 4px;
  background: rgba(255, 255, 255, .24);
}
.upload-progress .up-fill {
  height: 100%;
  width: 0;
  background: #07C160;
  transition: width .12s linear;
}

/* ===== 模块切换栏 ===== */
.module-bar {
  background: #fff;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #f0f0f0;
}
.module-item {
  padding: 12px 20px;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.module-item:hover { color: #0a2e1f; }
.module-item.active {
  color: #0a2e1f;
  border-bottom-color: #0a2e1f;
}

/* ===== 销售订单状态徽标 ===== */
.badge.shipped { background: #e6fffb; color: #13c2c2; }

/* ===== 导入预览 ===== */
.import-preview {
  border: 1px solid #e8e8e8;
  border-radius: 0;
  padding: 12px;
  background: #fafafa;
  font-size: 13px;
  color: #666;
  max-height: 200px;
  overflow-y: auto;
}
.import-preview .ok { color: #07C160; }
.import-preview .warn { color: #E8682C; }

/* ===== 导入工具栏（模板下载 + 文件上传） ===== */
.import-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-toolbar .btn { margin: 0; }
.import-file-name { color: #888; font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-tip { color: #666; font-size: 13px; line-height: 1.5; }

.toolbar-extra {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ===== 选择列（批量勾选） ===== */
.checkbox-col { width: 36px; text-align: center; }
.sel-checkbox { width: 16px; height: 16px; cursor: pointer; }

/* ===== 图片灯箱：多图上下张切换 ===== */
.lb-nav {
  position: fixed;
  top: calc(50% - 46px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 26px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  z-index: 10001;
  user-select: none;
  padding: 0;
}
.lb-nav:hover { background: rgba(0, 0, 0, .72); }
.lb-nav:active { transform: translateY(-50%) scale(.94); }
#lb-prev { left: 28px; }
#lb-next { right: 28px; }
.lb-counter {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, .45);
  padding: 5px 14px;
  border-radius: 0;
  z-index: 10001;
}
.lb-close {
  position: fixed;
  top: 18px;
  right: 24px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 24px;
  line-height: 36px;
  cursor: pointer;
  z-index: 10001;
  padding: 0;
}
.lb-close:hover { background: rgba(0, 0, 0, .72); }
.lb-thumbs {
  position: fixed;
  bottom: 18px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px;
  z-index: 10001;
}
.lb-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 0;
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.lb-thumb:hover { opacity: .9; }
.lb-thumb.active { opacity: 1; border-color: #fff; }
@media (max-width: 640px) {
  .lb-nav { width: 38px; height: 38px; font-size: 22px; line-height: 36px; }
  #lb-prev { left: 10px; }
  #lb-next { right: 10px; }
  .lb-thumb { width: 44px; height: 44px; }
}

/* ==========================================================
   财务【工厂对账】模块（v10：由「毛利分析」改为「工厂对账」）
   口径：只统计整机 / 单价只用供货价 / 按发货日归集 / 退货按原单发货日扣减
   配色决策：财务是「绝对状态」编码，看单个数字就要能判断：
     应付净额 = 品牌绿强调    退货扣减 = 红字冲销（负数）
     未填/缺失 = 浅灰斜体     缺价提示 = 橙底黄字
   金额一律右对齐 + 等宽数字（tabular-nums），方便竖向比对。
   单元格规则沿用 v8 血泪教训：
     - td 上禁止 max-width（对 display:table-cell 无效）
     - td 上禁止 display:-webkit-box（会脱离表格布局流导致整表错位）
     - 宽度/换行/截断一律下沉到 td 内那层 div
   ========================================================== */

/* ===== 财务工具栏 ===== */
.finance-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 0;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.fin-sep { color: #999; margin: 0 2px; }
.fin-quick { display: flex; gap: 6px; margin: 0 4px; }
.fin-quick button {
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  border-radius: 0;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
}
.fin-quick button:hover { border-color: #07C160; color: #07C160; }
.fin-quick button.active { background: #07C160; border-color: #07C160; color: #fff; }
/* 口径说明：常驻在工具栏上，避免误把配件/零售价算进来 */
.fin-note {
  margin-left: auto;
  font-size: 12px;
  color: #8a8a8a;
  background: #f5f6f7;
  border: 1px solid #ececec;
  border-radius: 0;
  padding: 3px 9px;
  line-height: 1.4;
  cursor: help;
  white-space: nowrap;
}
.fin-range-tip { color: #999; font-size: 12px; margin-left: 4px; }

/* ===== 顶部数字卡片（4 个） ===== */
.fin-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.fin-card {
  background: #fff;
  border-radius: 0;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  min-width: 0;
}
.fin-card.primary { box-shadow: 0 2px 12px rgba(7, 193, 96, .22); border: 1px solid rgba(7, 193, 96, .35); }
.fin-card-label { font-size: 12px; color: #999; margin-bottom: 6px; }
.fin-card-value { font-size: 18px;
  color: #222;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-card-value .unit { font-size: 13px; font-weight: 400; color: #999; margin-left: 2px; }
.fin-card-sub {
  font-size: 12px;
  color: #bbb;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 退货扣减 = 红字冲销 */
.fin-card.tone-minus .fin-card-value { color: #e64340; }
.fin-card.primary .fin-card-value { color: #07C160; }

/* ===== 缺价提示条 ===== */
.fin-warn {
  background: #fff7e6;
  border: 1px solid #ffd591;
  color: #ad6800;
  border-radius: 0;
  padding: 9px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.fin-warn b { color: #d46b08; }

/* ===== 分区块 ===== */
.fin-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  margin-bottom: 16px;
  overflow: hidden;
}
.fin-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}
.fin-section-head > span:first-child { font-size: 15px; color: #222; }
.fin-sub { font-size: 12px; color: #aaa; }
.fin-table-scroll { overflow-x: auto; }

/* ===== 财务表格 ===== */
.fin-table { width: 100%; border-collapse: collapse; min-width: 600px; }
/* 列多 / 文本长的表给个大一点的最小宽，窄屏靠 .fin-table-scroll 横向滚动 */
.fin-table.wide { min-width: 900px; }
.fin-table th {
  text-align: left;
  padding: 9px 12px;
  background: #fafafa;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.fin-table th.num, .fin-table td.num { text-align: right; }
.fin-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 13px;
  color: #333;
}
.fin-table tbody tr:hover { background: #fafcfb; }
.fin-table td.num { font-variant-numeric: tabular-nums; }
.fin-name { color: #222; }
/* 型号/工厂名/标题过长时截断。
   ⚠️ 项目铁律：max-width 写在 td 上对 display:table-cell 无效，
      一律下沉到 td 内那层 div（div 是块级盒，max-width 生效，td 再跟着收缩）。 */
.fin-name-cell > div {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-title-cell > div {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-empty { padding: 26px; text-align: center; color: #bbb; font-size: 13px; }

/* ===== 金额 / 缺失值配色 ===== */
.amt { color: #222; }
.amt-strong { color: #222; }
/* 供货价没填 / 金额为 0：浅灰斜体，一眼能看出「还没算进来」 */
.fin-noval { color: #bbb; font-style: italic; font-weight: 400; }

/* 缺价角标：跟在型号后面，提示这行金额是下限 */
.fin-flag {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  line-height: 1.4;
  padding: 0 5px;
  border-radius: 0;
  color: #ad6800;
  background: #fff7e6;
  border: 1px solid #ffd591;
  cursor: help;
  font-style: normal;
  font-weight: 400;
}

/* 退货单状态标签 */
.fin-state {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  line-height: 1.4;
  padding: 0 5px;
  border-radius: 0;
  font-style: normal;
  font-weight: 400;
}
.fin-state.ok { color: #0a7d4b; background: #eaf7f0; border: 1px solid #b7e3cb; }
.fin-state.warn { color: #ad6800; background: #fff7e6; border: 1px solid #ffd591; }
.fin-state.err { color: #c0392b; background: #fdecea; border: 1px solid #f5c6c2; }

/* ===== 操作列 ===== */
.fin-fix-btn {
  border: 1px solid #07C160;
  background: #fff;
  color: #07C160;
  border-radius: 0;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.fin-fix-btn:hover { background: #07C160; color: #fff; }
.fin-partial { color: #d46b08; font-size: 11px; margin-left: 4px; }

/* ===== 价格库 / 补价弹窗 ===== */
.fin-modal-box { width: 900px; max-width: 94vw; }
.fin-modal-tip { font-size: 12px; color: #999; margin-bottom: 10px; }
.fin-form-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.fin-form-row label { font-size: 13px; color: #666; min-width: 68px; }
.fin-form-row input, .fin-form-row select {
  height: 34px;
  border: 1.5px solid #ddd;
  border-radius: 0;
  padding: 0 10px;
  font-size: 13px;
  outline: none;
  background: #fff;
}
.fin-form-row input:focus, .fin-form-row select:focus { border-color: #07C160; }
.fin-form-row input[readonly] { background: #f7f7f7; color: #888; }
.fin-price-table { width: 100%; border-collapse: collapse; }
.fin-price-table th {
  text-align: left;
  padding: 7px 8px;
  background: #fafafa;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.fin-price-table td { padding: 5px 8px; border-bottom: 1px solid #f4f4f4; font-size: 13px; }
/* 宽度 / 截断下沉到 td 内的 div —— td 上写 max-width 对 display:table-cell 无效（项目铁律） */
.fin-price-table .fin-pname {
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-price-table .fin-psku {
  max-width: 150px;
  color: #999;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-price-table td:last-child { white-space: nowrap; }
.fin-price-table input {
  width: 100%;
  height: 30px;
  border: 1.5px solid #ddd;
  border-radius: 0;
  padding: 0 8px;
  font-size: 13px;
  outline: none;
  text-align: right;
}
.fin-price-table input:focus { border-color: #07C160; }
.fin-price-scroll { max-height: 52vh; overflow-y: auto; border: 1px solid #f0f0f0; border-radius: 0; }
.fin-tag {
  display: inline-block;
  font-size: 11px;
  padding: 0 5px;
  border-radius: 0;
  line-height: 1.5;
}
.fin-tag.machine { background: #e8f3fd; color: #1a6fb0; }
.fin-tag.part { background: #fdf0e8; color: #b8622e; }

/* 未关联原单：整行淡底 + 灰标签，一眼看出「这张还没扣钱」 */
.fin-state.idle { color: #8a8a8a; background: #f2f2f2; border: 1px solid #e2e2e2; }
.fin-row-idle { background: #fffdf5; }
.fin-row-idle:hover { background: #fffaea; }

@media (max-width: 1400px) {
  .fin-name-cell > div { max-width: 160px; }
  .fin-title-cell > div { max-width: 240px; }
}
@media (max-width: 1100px) {
  .fin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-note { margin-left: 0; }
}

/* ============================================================
   视觉增强（2026-09-03 追加，基于 style.v13.css）
   ① 财务数字卡片：语义色左边条 + 右上角 SVG 图标 + hover 抬升
   ② 卡片等高：统一 1px 透明边框占位（原 primary 有边框导致高 2px）
   ③ 数字等宽对齐 tabular-nums
   ④ 表格行 hover：过渡 + 左侧主色指示条（inset box-shadow，不改盒模型）
   ⑤ 销售订单：状态徽标同色描边 / 备注副行红色竖条 / 类型便签选中投影
   ⑥ 按钮 hover 抬升 + 点击收缩
   ⑦ focus-visible 焦点环（原 6 处 outline:none 导致键盘焦点不可见）
   ⚠️ 全部用 inset box-shadow 而非 border，遵守表格三大铁律
   ============================================================ */
/* ============================================================
   视觉增强补丁（预览版）— 全部包在 下，可一键开关对比
   原则：只追加、不修改现有规则；不碰布局盒模型；遵守表格三大铁律
   ============================================================ */
:root {
  --mds-brand: #07C160;
  --mds-brand-dark: #06ad56;
  --mds-info: #3498db;
  --mds-danger: #e64340;
  --mds-shadow-sm: 0 2px 10px rgba(0, 0, 0, .04);
  --mds-shadow-md: 0 8px 22px rgba(0, 0, 0, .10);
  --mds-ease: cubic-bezier(.2, .8, .3, 1);
}

/* ===== 1. 财务数字卡片：语义色左边条 + 右上角图标 + hover 抬升 ===== */
.fin-card {
  position: relative;
  transition: transform .22s var(--mds-ease), box-shadow .22s var(--mds-ease);
  box-shadow: inset 3px 0 0 var(--accent), var(--mds-shadow-sm);
  --accent: #9aa0a6;
  /* 原版只有 .primary 带 1px border，导致它比同排卡片高 2px、整行被撑高。
     这里给所有卡片统一 1px 透明边框占位，四张卡等高（box-sizing 已是 border-box，不影响宽度） */
  border: 1px solid transparent;
}
/* 保持 primary 的绿色描边，但不额外增高 */
.fin-card.primary { border-color: rgba(7, 193, 96, .35); }
.fin-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 3px 0 0 var(--accent), var(--mds-shadow-md);
}

/* 4 张卡片各自的语义色 + 图标（顺序：整机发货 / 发货对账金额 / 退货扣减 / 应付净额） */
.fin-card:nth-child(1) {
  --accent: #3498db;
  --icon-bg: #eaf2fb;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 5.2 8 2.2l6 3v5.6L8 13.8 2 10.8V5.2Z' stroke='%233498db' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M2 5.2 8 8.3l6-3.1M8 8.3v5.5' stroke='%233498db' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fin-card:nth-child(2) {
  --accent: #07C160;
  --icon-bg: #e8f8ef;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.8' stroke='%2307C160' stroke-width='1.3'/%3E%3Cpath d='M5.6 5.2 8 8.1l2.4-2.9M8 8.1v3.6M6.4 8.9h3.2M6.4 10.4h3.2' stroke='%2307C160' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fin-card:nth-child(3) {
  --accent: #e64340;
  --icon-bg: #fdeceb;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.6 8h-7m0 0 2.6-2.6M5.6 8l2.6 2.6' stroke='%23e64340' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.4 3.6v8.8' stroke='%23e64340' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fin-card:nth-child(4) {
  --accent: #07C160;
  --icon-bg: #e8f8ef;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.6 6.2 11.6 12.8 4.8' stroke='%2307C160' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 图标挂在右上角；只给 label 行留白，不动 value / sub 的宽度 */
.fin-card::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--icon-bg) var(--icon) no-repeat center / 12px 12px;
  opacity: .85;
}
.fin-card-label { padding-right: 34px; }

/* 卡片文字层级收紧 */
.fin-card-label { color: #8a8a8a; letter-spacing: .2px; }
.fin-card-value { color: #111; letter-spacing: -.3px; }
.fin-card-sub { color: #9a9a9a; }

/* ===== 2. 数字等宽对齐：金额 / 数量纵向不再参差 =====
   ⚠️ 销售订单与售后工单共用同一张 .order-table，没有 .sales-table 这个类 */
.fin-card-value,
.fin-table .num,
.fin-table .amt-strong,
.order-table .num {
  font-variant-numeric: tabular-nums;
}

/* ===== 3. 表格行悬停：过渡 + 左侧主色指示条 =====
   ⚠️ 用 inset box-shadow 而非 border / padding，不改变盒模型
      td 仍是原生 display: table-cell（表格三大铁律） */
.fin-table tbody tr,
.order-table tbody tr {
  transition: background-color .16s var(--mds-ease);
}
.fin-table tbody tr:hover > td:first-child,
.order-table tbody tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--mds-brand);
}

/* 表头：轻微底色 + 字重，强化层级 */
.fin-table thead th,
.order-table thead th {
  color: #5c5c5c;
  letter-spacing: .2px;
}

/* ===== 3b. 销售订单页专属 ===== */

/* 状态徽标：加一圈同色描边（inset 不占位），浅底色不再发飘 */
.badge {
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: .95;
}
.badge:hover { opacity: 1; }

/* 备注副行：左侧竖条强化「这是备注不是商品名」，竖条用 inset 不挤压 210px 宽度 */
.dc-remark {
  box-shadow: inset 2px 0 0 rgba(230, 67, 64, .55);
  padding-left: 7px;
}

/* 类型便签：选中态加一点厚度，未选中保持扁平 */
.sales-type-chip,
.type-chip { border-width: 1px; }
.type-chip.active,
.sales-type-chip.active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* ===== 4. 按钮：hover 抬升 + 阴影，点击收缩 ===== */
.btn {
  transition: transform .2s var(--mds-ease), box-shadow .2s var(--mds-ease), background-color .2s;
}
.btn:not(:disabled):hover { opacity: 1; transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0) scale(.97); }
.btn-primary:not(:disabled):hover {
  background: var(--mds-brand-dark);
  box-shadow: 0 4px 12px rgba(7, 193, 96, .30);
}
.btn-danger:not(:disabled):hover { box-shadow: 0 4px 12px rgba(230, 67, 64, .28); }
.btn-light:not(:disabled):hover {
  background: #e9eaec;
  color: #2b2b2b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

/* ===== 5. 分区块与筛选胶囊：hover 反馈 ===== */
.type-chip,
.sales-type-chip,
.status-chip {
  transition: transform .18s var(--mds-ease), background-color .18s, border-color .18s, color .18s;
}
.type-chip:hover,
.sales-type-chip:hover,
.status-chip:hover { transform: translateY(-1px); filter: none; }

.fin-section { transition: box-shadow .22s var(--mds-ease); }
.fin-section:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .07); }

/* ===== 6. 键盘焦点可见（无障碍，不干扰鼠标操作） ===== */
.btn:focus-visible,
.tab:focus-visible,
.type-chip:focus-visible,
.sales-type-chip:focus-visible,
.status-chip:focus-visible,
.search-input:focus-visible,
.form-input:focus-visible,
.login-input:focus-visible {
  outline: 2px solid var(--mds-brand);
  outline-offset: 2px;
}

/* ==========================================================================
   v15 —— 补齐 v14 遗漏的 3 处键盘焦点环
   v14 只覆盖了 .login-input / .search-input / .form-input，
   这 3 处同样带 outline:none 却漏了，其中 .mp-item .mp-qty 连 :focus 规则都没有，
   键盘聚焦时完全无指示。outline 不参与布局，零副作用。
   ========================================================================== */
.mp-item .mp-qty:focus-visible,
.fin-form-row input:focus-visible,
.fin-form-row select:focus-visible,
.fin-price-table input:focus-visible {
  outline: 2px solid var(--mds-brand);
  outline-offset: 2px;
}

/* ==========================================================================
   v16 —— 操作记录模块（仅船长可见）专属样式
   涉及页面：一级模块「操作记录」列表 + 删除快照弹窗。
   全部为 .audit-* 前缀的新增类，不改动任何既有规则。

   删除是物理删除，快照是唯一的后悔药，所以这里把「可读性」放在第一位：
   字段全列、值允许换行截断、原始 JSON 可展开复制、支持一键下载。
   ========================================================================== */

/* ---- 列表「摘要」列：上排摘要（主），下排筛选条件（次） ----
   ⚠️ 表格三铁律：宽度 / 换行 / 截断一律写在 td 内部的 div 上，
      td 上写 max-width 不生效，写 display:-webkit-box 会破坏表格布局。 */
.audit-summary,
.audit-filters {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.audit-summary { color: #333; }
/* 筛选条件副行：灰色小字 + 左侧竖条（inset 不占位，不挤压 260px 宽度） */
.audit-filters {
  margin-top: 3px;
  font-size: 12px;
  color: #8a8a8a;
  box-shadow: inset 2px 0 0 rgba(0, 0, 0, .12);
  padding-left: 7px;
}
/* 窄屏（≤1500px，覆盖 1080/1366 笔记本）：和 .desc-inner 同步收窄 */
@media (max-width: 1500px) {
  .audit-summary,
  .audit-filters { max-width: 200px; }
}

/* ---- 快照弹窗：顶部操作信息 ---- */
.audit-snap-head {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 0;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.audit-snap-row { font-size: 13.5px; color: #333; line-height: 1.9; }
.audit-k {
  display: inline-block;
  min-width: 68px;
  margin-right: 8px;
  color: #999;
  font-size: 12.5px;
}

/* ---- 快照弹窗：每条订单一张卡 ---- */
.audit-snap-card {
  border: 1px solid #eee;
  border-radius: 0;
  margin-bottom: 12px;
  overflow: hidden;
}
.audit-snap-title {
  background: #f7f9f8;
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #eee;
}
/* 字段表：字段名列固定 130px，值列自适应。
   值可能很长（照片 fileID、地址、JSON 数组），必须允许换行截断，不能 nowrap。 */
.audit-kv { width: 100%; border-collapse: collapse; table-layout: fixed; }
.audit-kv th {
  width: 130px;
  text-align: left;
  vertical-align: top;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #999;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  word-break: break-all;
}
.audit-kv td {
  padding: 7px 12px;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  word-break: break-all;
  line-height: 1.6;
}
.audit-kv tr:last-child th,
.audit-kv tr:last-child td { border-bottom: none; }

/* ---- 快照弹窗：原始 JSON 折叠块 ---- */
.audit-raw { margin-top: 4px; }
.audit-raw > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--mds-brand);
  padding: 6px 0;
  user-select: none;
}
.audit-raw > summary:focus-visible {
  outline: 2px solid var(--mds-brand);
  outline-offset: 2px;
  border-radius: 0;
}
.audit-raw > pre {
  max-height: 320px;
  overflow: auto;
  background: #fbfbfb;
  border: 1px solid #f0f0f0;
  border-radius: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: #555;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  white-space: pre-wrap;
  word-break: break-all;
}