/* ============================================================================
   票据通 全站样式 —— 唯一样式源 (index.html 及以后所有新页面都引用本文件)
   ----------------------------------------------------------------------------
   ◆ 设计规范(新增界面必须遵循, 2026-07 定稿):
   · 字体: Inter + 苹方(PingFang SC) 栈; 正文 14px / 表格 13px / 表头 12px;
     所有数字用等宽数字 tabular-nums (金额对齐)。
   · 颜色只用下方 :root 令牌: 主操作/选中=--brand(蓝) · 收入/正向=--green ·
     支出/警告/未关联=--red · 待复核=--amber · 灰字=--muted。
     单据类型胶囊色(請求/納品/領収=蓝, 国内=紫#7048e8, 输出许可=葡萄#9c36b5,
     网购=琥珀) 在 index.html 的 DTPILL/STYPE_CSS 常量里, 新类型跟着那套配。
   · 表格: table-layout:fixed + <colgroup> 百分比列宽; th 灰底(--slate-soft);
     td 内边距 7px 16px、垂直居中; 行 hover 淡蓝(--brand-soft); 超长省略号,
     需换行的列用 .wrapno, 不裁切的列用 .nocl。
   · 列顺序约定: 序号(勾选框并入同列, 11px 灰字)最左 → 日期 → 金额(加粗,
     收入带+号绿色) → 编号 → 其它 → 操作列(图标按钮 24~26px, 右对齐)。
   · 序号格式: 前缀+YYMMDD+3位日内序号; 前缀 H=日本票据 M=三井 P=PayPay
     L=住信SBI X=销售流水。
   · 控件: 主按钮 .act(品牌蓝实心) / 次按钮 .ghost(白底描边), 高度统一 36px;
     状态胶囊 .pill + .s-*; 卡片 .card 左侧 4px 色条(--card-bar)。
   ========================================================================== */
  :root{
    --bg:#f5f7fa; --panel:#fbfcfe; --card:#fff; --line:#e6eaf0; --line-2:#eef1f6;
    --ink:#0f1c2e; --ink-2:#3d4a5c; --muted:#8a94a6;
    --brand:#3b5bdb; --brand-d:#2f49b3; --brand-soft:#eef2ff; --brand-ring:#dbe3ff;
    --green:#15916b; --green-soft:#e7f4ee;
    --red:#c25b51; --red-d:#a94d44; --red-soft:#f6ebe9; --red-ring:#eccfca;
    --amber:#b07d23; --amber-soft:#fbf2dd; --slate-soft:#f0f3f8;
    --sh-sm:0 1px 2px rgba(15,28,46,.05); --sh:0 1px 3px rgba(15,28,46,.06),0 8px 24px rgba(15,28,46,.05);
    --r:12px;
  }
  *{box-sizing:border-box;}
  /* 始终预留竖向滚动条空间: 切换筛选导致行数变化(如398↔3)时滚动条出现/消失, 否则整页宽度会跳变 */
  html{scrollbar-gutter:stable;overflow-y:scroll;}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Microsoft YaHei","Segoe UI",sans-serif;
    font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-feature-settings:"cv02","cv03","cv04","cv11";letter-spacing:.1px;}
  /* 数字统一用等宽数字, 对账金额更整齐 */
  .num,.card .n,td{font-variant-numeric:tabular-nums;}

  /* 顶栏：白底 + 品牌色块，商务清爽 */
  header{background:var(--card);color:var(--ink);padding:0 28px;height:60px;
    display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-sm);position:sticky;top:0;z-index:30;}
  header h1{font-size:16.5px;margin:0;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:10px;}
  header h1 svg.logo{filter:drop-shadow(0 2px 6px rgba(59,91,219,.35));}
  header .ver{font-size:12px;color:var(--muted);}
  header .sp{flex:1}
  header button{background:#fff;color:var(--ink-2);border:1px solid var(--line);
    border-radius:9px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:500;transition:.15s;}
  header button:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}

  /* 公司标签：分段胶囊 */
  #tabs{display:flex;gap:12px;padding:20px 28px 0;}
  #tabs .tab{flex:1;text-align:center;padding:16px 20px;border:1px solid var(--line);background:var(--card);border-radius:999px;
    cursor:pointer;font-size:20px;font-weight:700;color:var(--ink-2);transition:.15s;box-shadow:var(--sh-sm);white-space:nowrap;}
  #tabs .tab:hover{border-color:var(--brand-ring);color:var(--brand);}
  #tabs .tab.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;
    box-shadow:0 4px 12px rgba(59,91,219,.32);}
  #tabs .tab small{opacity:.75;font-size:15px;font-weight:600;margin-left:4px;}

  .wrap{padding:0 28px 56px;max-width:1320px;margin:0 auto;}

  /* 功能子标签：清爽下划线 */
  .subtabs{display:flex;gap:2px;margin:20px 0 4px;border-bottom:1px solid var(--line);}
  .subtabs .tab{padding:11px 20px;border:0;background:none;cursor:pointer;font-size:14px;color:var(--ink-2);
    border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:.15s;font-weight:600;}
  .subtabs .tab:hover{color:var(--ink);}
  .subtabs .tab.on{color:var(--brand);font-weight:700;border-bottom-color:var(--brand);}
  /* 按公司禁用的子tab(如 香港BABEL 无销售/物流): 明显置灰不可点(与可点的深色拉开对比) */
  .subtabs .tab.disabled{color:#cbd2dc;cursor:not-allowed;pointer-events:none;border-bottom-color:transparent;font-weight:500;}

  /* 概览卡：左侧色条 */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:20px 0;}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;
    box-shadow:var(--sh-sm);position:relative;overflow:hidden;}
  .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--card-bar,var(--brand));opacity:.85;}
  .card.warn::before{background:var(--red);}
  .card .n{font-size:27px;font-weight:800;letter-spacing:.4px;line-height:1.1;}
  .card .l{font-size:12px;color:var(--muted);margin-top:5px;}
  .card.warn .n{color:var(--red);}

  .bar{display:flex;gap:9px;align-items:center;margin:14px 0;flex-wrap:wrap;}
  .bar strong{font-size:14.5px;font-weight:700;color:var(--ink);}
  label,.bar span{font-size:13px;color:var(--ink-2);}
  select,input{padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;
    background:#fff;color:var(--ink);transition:.15s;outline:none;height:36px;}
  select:focus,input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);}
  input[type=file]{padding:6px 8px;background:var(--panel);height:auto;}
  /* 勾选框/单选不应继承文本输入框的 height:36px(否则被撑成 36px 高, 撑高行、窄列里溢出成省略号) */
  input[type=checkbox],input[type=radio]{height:auto;width:auto;padding:0;box-shadow:none;accent-color:var(--brand);}
  input[type=date]{color:var(--ink-2);}
  /* 去掉金额等数字输入框右侧的上下小箭头(spinner), 全站生效 */
  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
  input[type=number]{-moz-appearance:textfield;appearance:textfield;}
  /* 去掉 Safari 的联系人/密码/信用卡自动填充小人图标(Safari 无视 autocomplete 属性, 只认这组伪元素);
     部分版本无视 display:none, 叠加 零尺寸+透明+absolute 确保各版本都藏掉 */
  input::-webkit-contacts-auto-fill-button,
  input::-webkit-credentials-auto-fill-button,
  input::-webkit-credit-card-auto-fill-button{
    visibility:hidden!important;display:none!important;pointer-events:none!important;
    opacity:0!important;width:0!important;height:0!important;margin:0!important;padding:0!important;
    position:absolute!important;right:0;-webkit-appearance:none!important;}
  /* 文本框统一转 type=search 规避 Safari 联系人按钮(搜索框对其免疫); 这里把 search 型外观还原成普通框 */
  input[type=search]{-webkit-appearance:textfield;appearance:textfield;}
  input[type=search]::-webkit-search-decoration,
  input[type=search]::-webkit-search-cancel-button,
  input[type=search]::-webkit-search-results-button,
  input[type=search]::-webkit-search-results-decoration{display:none!important;-webkit-appearance:none!important;}
  button{font-family:inherit;}
  button.act{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:9px 17px;
    cursor:pointer;font-size:13px;font-weight:600;transition:.15s;box-shadow:0 2px 8px rgba(59,91,219,.28);height:36px;}
  button.act:hover{background:var(--brand-d);box-shadow:0 4px 12px rgba(59,91,219,.36);}
  button.ghost{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 14px;
    cursor:pointer;font-size:13px;color:var(--ink-2);transition:.15s;font-weight:500;height:36px;}
  button.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
  button.ghost:disabled{opacity:.45;cursor:not-allowed;}

  /* 表格：通透留白 */
  table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
    border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13px;box-shadow:var(--sh-sm);}
  th,td{padding:7px 16px;border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap;}
  #saleDocsBody td,#saleDocsBody th,#txnModalBody td,#txnModalBody th{vertical-align:middle;}
  th{background:var(--slate-soft);color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.3px;}
  tbody tr{transition:background .12s;}
  tbody tr:hover{background:var(--brand-soft);}
  tr:last-child td{border-bottom:0;}
  td.num{text-align:left;font-variant-numeric:tabular-nums;}
  .row-exc{background:var(--red-soft)!important;}
  /* 固定列宽 + 百分比自适应 + 超长省略号，避免列宽跳动与横向滚动条 */
  #txnTbl,#docTbl,#salesTbl,#logiTbl{table-layout:fixed;}
  #txnTbl th,#txnTbl td,#docTbl th,#docTbl td,#salesTbl th,#salesTbl td,#logiTbl th,#logiTbl td{overflow:hidden;text-overflow:ellipsis;}
  #txnTbl td,#docTbl td,#salesTbl td,#customsTbl td,#logiTbl td{vertical-align:middle;}   /* 各列内容上下居中(避免序号/文字偏高) */
  #salesTbl th:nth-child(n+7),#salesTbl td:nth-child(n+7){padding-left:7px;padding-right:7px;}   /* 流水/票据/大额 三个图标列紧凑 */
  #logiTbl th:nth-child(n+9),#logiTbl td:nth-child(n+9){padding-left:7px;padding-right:7px;}     /* 物流tab 状态/包 两窄列紧凑(避免表头出省略号) */
  td.wrapno{white-space:normal!important;word-break:break-all;overflow:visible!important;text-overflow:clip!important;}
  td.nocl{overflow:visible!important;text-overflow:clip!important;}
  td.num{overflow:visible!important;text-overflow:clip!important;white-space:nowrap;}   /* 金额永不出省略号(数字截断会误读) */

  .pill{padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:600;display:inline-block;line-height:1.6;}
  .s-unmatched{background:var(--red-soft);color:var(--red);}
  .s-matched{background:var(--green-soft);color:var(--green);}
  .s-review{background:var(--amber-soft);color:var(--amber);}
  .s-pending{background:var(--slate-soft);color:var(--ink-2);}
  .s-exception{background:var(--red-soft);color:var(--red);}
  .out{color:var(--red);font-weight:600;} .in{color:var(--green);font-weight:600;}
  .msg{font-size:12px;color:var(--muted);margin-left:4px;}
  /* 上传进度/结果高亮(有内容时才显示底色) */
  #docsMsg:not(:empty){display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:600;font-size:13px;padding:7px 14px;border-radius:8px;box-shadow:0 0 0 3px var(--brand-ring);}
  /* 检索/工具条容器 */
  .bar.tool{background:var(--panel);border:1px solid var(--line);padding:10px 14px;border-radius:var(--r);}
  /* 文件夹拖拽区 */
  #dropZone,.dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:18px;text-align:center;
    color:var(--muted);background:var(--panel);margin:8px 0;transition:.15s;font-size:13px;}
  #dropZone.over,.dropzone.over{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);}