﻿/* ============================================================
   单据仿真版式（A4 打印样式）
   超级仿真：标准信纸抬头、双线边框、水印、金额大写、签署区
   ============================================================ */
.doc-page{
  position:relative;
  background:#fff;
  color:#000;
  font-family:"Times New Roman","SimSun",serif;
  font-size:12pt;
  line-height:1.45;
  width:210mm;
  min-height:297mm;
  margin:0 auto;
  padding:14mm 16mm;
  border:1px solid #ddd;
}

/* 水印 */
.watermark{
  position:absolute;
  top:42%;left:50%;
  transform:translate(-50%,-50%) rotate(-30deg);
  font-size:58pt;
  font-weight:bold;
  color:rgba(180,180,180,.14);
  letter-spacing:10px;
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.doc-page > *{position:relative;z-index:1}

/* 双语标签 */
.fl{font-weight:bold}
.fl-zh{font-size:.85em;color:#555;font-weight:normal;margin-left:4px}

/* 信纸抬头 */
.doc-letterhead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px;gap:12px}
.doc-logo{max-height:56px;max-width:200px;object-fit:contain}
.doc-seller-info{text-align:right}
.doc-company{font-size:15pt;font-weight:bold;letter-spacing:.5px}
.doc-address{font-size:10pt;color:#222}
.doc-contact{font-size:10pt;color:#222;margin-top:2px}

/* 标题 */
.doc-title{
  text-align:center;font-size:18pt;font-weight:bold;letter-spacing:3px;
  text-transform:uppercase;margin:6px 0 12px;padding-bottom:6px;
}

/* 元信息表 */
.doc-meta{width:100%;border-collapse:collapse;margin-bottom:12px;border:1.2px solid #000}
.doc-meta td{border:1px solid #000;padding:5px 8px;font-size:11pt}
.doc-meta .meta-label{width:24%;background:#F2F2F2}
.doc-meta .meta-value{width:26%}

/* 买卖双方 */
.doc-parties{display:flex;gap:14px;margin-bottom:12px}
.doc-parties .party{flex:1;border:1.2px solid #000;padding:8px 10px;min-height:88px}
.party-name{font-size:11.5pt;font-weight:bold;margin-top:3px}
.party-lines{font-size:10pt;color:#111;margin-top:2px}

/* 明细表 */
.doc-items{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:11pt}
.doc-items th{
  border:1px solid #000;background:#E8E8E8;padding:6px 6px;text-align:center;font-size:10pt;
}
.doc-items td{border:1px solid #000;padding:5px 6px;font-size:10.5pt;vertical-align:top}
.doc-items .c{text-align:center}
.doc-items .l{text-align:left}
.doc-items .r{text-align:right}
.doc-items .empty{text-align:center;color:#888}

/* 合计 */
.doc-total{width:60%;margin:0 0 12px auto;border-collapse:collapse}
.doc-total td{border:1px solid #000;padding:6px 8px;font-size:11pt}
.doc-total .total-label{background:#F2F2F2;width:46%}
.doc-total .total-value{font-weight:bold;text-align:right;font-size:12.5pt}
.doc-total .total-words{text-align:right;font-style:italic}

/* 条款表 / 运输信息表 */
.doc-terms{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:10.5pt}
.doc-terms td{border:1px solid #999;padding:5px 8px}
.doc-terms .term-label{width:30%;background:#F7F7F7}
.doc-terms .term-value{}

/* 签署区 */
.doc-sign{width:100%;border-collapse:collapse;margin-top:14px}
.doc-sign td{border:1px solid #000;padding:10px 12px;height:96px;vertical-align:top;width:50%}
.sign-line{height:36px}
.sign-imgs{display:flex;gap:8px;margin-top:6px}
.sign-imgs img{max-height:52px;max-width:120px;object-fit:contain}
.sign-stamp{max-height:64px;max-width:130px;object-fit:contain}
.sign-date{margin-top:8px;font-size:10pt;color:#333}

/* 小节标题 / 条款 */
.doc-section{margin:12px 0 6px;font-size:11.5pt;border-bottom:1px solid #000;padding-bottom:2px}
.doc-clause{font-size:10.5pt;margin:6px 0 10px;white-space:pre-wrap}
.doc-declaration{border:1px solid #000;padding:10px 12px;margin:12px 0;font-size:10.5pt;background:#FBFBFB}
.doc-declaration p{margin:4px 0}
.doc-declaration-zh{color:#555;font-size:10pt}

/* 原产地证专用 */
.doc-co-head{text-align:center;margin-bottom:10px}
.doc-co-title{font-size:16pt;font-weight:bold;letter-spacing:2px;text-transform:uppercase}
.doc-co-no{font-size:11pt;margin-top:2px}
.doc-co-box{width:100%;border-collapse:collapse;margin-bottom:10px}
.doc-co-box td{border:1px solid #000;padding:7px 9px;vertical-align:top;font-size:10.5pt}
.doc-co-box .co-label{width:32%;background:#F2F2F2;font-weight:bold}
.doc-co-items{width:100%;border-collapse:collapse;margin-bottom:8px;font-size:10pt}
.doc-co-items th{border:1px solid #000;background:#E8E8E8;padding:5px;font-size:9pt}
.doc-co-items td{border:1px solid #000;padding:5px;vertical-align:top}
.doc-co-items .c{text-align:center}.doc-co-items .l{text-align:left}
.doc-co-sign{display:flex;justify-content:space-between;margin-top:16px;gap:20px}
.doc-co-sign > div{flex:1;font-size:10.5pt;min-height:80px}

/* 提单专用 */
.doc-bol-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:10px}
.doc-bol-title{font-size:16pt;font-weight:bold;text-transform:uppercase}
.doc-bol-no{font-size:11pt}
.doc-bol-top,.doc-bol-mid,.doc-bol-items,.doc-bol-foot{width:100%;border-collapse:collapse;margin-bottom:8px}
.doc-bol-top td,.doc-bol-mid td,.doc-bol-foot td{border:1px solid #000;padding:6px 8px;vertical-align:top;font-size:10.5pt;width:50%}
.doc-bol-items th{border:1px solid #000;background:#E8E8E8;padding:5px;font-size:9.5pt}
.doc-bol-items td{border:1px solid #000;padding:5px;font-size:10pt;vertical-align:top}
.doc-bol-items .c{text-align:center}.doc-bol-items .l{text-align:left}
.bol-cell{font-size:10.5pt}

/* 打印时隐藏网页元素 */
@media print {
  @page{size:A4;margin:0}
  body{background:#fff !important}
  .no-print,.toolbar,.doc-info{display:none !important}
  .doc-page{
    border:none;box-shadow:none;margin:0;
    width:210mm;min-height:297mm;
    overflow:hidden;            /* 让 JS 缩放后的内容能裁掉溢出 */
  }
  .watermark{color:rgba(160,160,160,.16) !important}
}


/* ============================================================
   文档类型彩条（一眼区分 PI/CI/PO/Contract/BOL/CO 等）
   ============================================================ */
.doc-badge{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 14px;border-radius:3px;margin-bottom:10px;
  font-weight:700;letter-spacing:1.2px;border-left:5px solid #888;
  background:#F5F5F5;color:#333;
}
.doc-badge .en{font-size:13pt;text-transform:uppercase}
.doc-badge .zh{font-size:11pt;font-weight:600;opacity:.85}
.doc-badge.badge-pi       {background:#E3F2FD;color:#0D47A1;border-left-color:#1565C0}
.doc-badge.badge-ci       {background:#E8F5E9;color:#1B5E20;border-left-color:#2E7D32}
.doc-badge.badge-quote    {background:#FFF3E0;color:#E65100;border-left-color:#EF6C00}
.doc-badge.badge-po       {background:#F3E5F5;color:#4A148C;border-left-color:#6A1B9A}
.doc-badge.badge-contract {background:#FFEBEE;color:#B71C1C;border-left-color:#C62828}
.doc-badge.badge-bol      {background:#E0F7FA;color:#004D40;border-left-color:#00695C}
.doc-badge.badge-co       {background:#FFF8E1;color:#E65100;border-left-color:#F57F17}
.doc-badge.badge-pl       {background:#ECEFF1;color:#263238;border-left-color:#37474F}
.doc-badge.badge-inspect  {background:#F1F8E9;color:#33691E;border-left-color:#558B2F}
.doc-badge.badge-insure   {background:#E8EAF6;color:#1A237E;border-left-color:#283593}
.doc-badge.badge-bank     {background:#EDE7F6;color:#311B92;border-left-color:#4527A0}
.doc-badge.badge-customs  {background:#FBE9E7;color:#BF360C;border-left-color:#D84315}
.doc-badge.badge-default  {background:#F5F5F5;color:#424242;border-left-color:#757575}

/* 文档类型说明（PI/CI/Quotation/PO 的法律提示） */
.doc-type-note{
  text-align:center;font-size:10pt;color:#555;font-style:italic;
  margin-bottom:10px;padding:6px 10px;background:#FAFAFA;
  border:1px dashed #DDD;border-radius:3px;line-height:1.5;
}

/* ============================================================
   采购订单（PO）专用布局
   ============================================================ */
.doc-po-header{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;
}
.po-issuer,.po-vendor,.po-ship-to{
  border:1.2px solid #000;padding:8px 12px;background:#FFF;
}
.po-ship-to{grid-column:span 2;background:#FAFAFA}
.po-card-label{
  font-size:10pt;font-weight:700;letter-spacing:1px;
  border-bottom:1px solid #999;padding-bottom:3px;margin-bottom:5px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.po-card-label .fl{color:#000;text-transform:uppercase}
.po-card-label .fl-zh{font-size:9pt;color:#666;font-weight:500}
.po-company-name{font-size:13pt;font-weight:700;margin:2px 0 4px;letter-spacing:.3px}
.po-company-info,.po-ship-content{font-size:10pt;line-height:1.5;color:#222}
.po-ship-content{white-space:pre-wrap;min-height:42px}

/* ============================================================
   5 档密度样式（内容越多越紧凑）
   tier-2 是 .doc-page 的默认状态，下面只覆写其它 4 档
   ============================================================ */
.doc-page.density-1{font-size:13pt;line-height:1.55;padding:18mm 18mm}
.doc-page.density-1 .doc-badge{margin-bottom:14px}
.doc-page.density-1 .doc-badge .en{font-size:15pt}
.doc-page.density-1 .doc-title{font-size:22pt;margin:10px 0 16px;padding-bottom:8px}
.doc-page.density-1 .doc-company{font-size:18pt}
.doc-page.density-1 .doc-address,.doc-page.density-1 .doc-contact{font-size:11pt}
.doc-page.density-1 .doc-meta td{font-size:12pt;padding:7px 10px}
.doc-page.density-1 .doc-items th{font-size:11pt;padding:8px}
.doc-page.density-1 .doc-items td{font-size:12pt;padding:8px}
.doc-page.density-1 .doc-parties .party{padding:10px 12px;min-height:100px}
.doc-page.density-1 .party-name{font-size:13pt}
.doc-page.density-1 .party-lines{font-size:11pt}
.doc-page.density-1 .doc-total td{font-size:12pt;padding:8px 10px}
.doc-page.density-1 .doc-total .total-value{font-size:14pt}
.doc-page.density-1 .doc-terms td{font-size:11.5pt;padding:7px 10px}
.doc-page.density-1 .doc-sign td{padding:14px 16px;height:110px}
.doc-page.density-1 .doc-clause{font-size:11.5pt;margin:8px 0 14px}
.doc-page.density-1 .doc-section{font-size:13pt;margin:14px 0 8px}
.doc-page.density-1 .doc-declaration{font-size:11.5pt;padding:12px 14px}
.doc-page.density-1 .doc-letterhead{padding-bottom:10px;margin-bottom:16px}
.doc-page.density-1 .po-company-name{font-size:15pt}
.doc-page.density-1 .po-card-label{font-size:11pt}

.doc-page.density-3{font-size:11pt;line-height:1.4;padding:12mm 14mm}
.doc-page.density-3 .doc-title{font-size:16pt;margin:4px 0 10px;padding-bottom:5px}
.doc-page.density-3 .doc-company{font-size:13.5pt}
.doc-page.density-3 .doc-address,.doc-page.density-3 .doc-contact{font-size:9.5pt}
.doc-page.density-3 .doc-meta td{font-size:10.5pt;padding:4px 7px}
.doc-page.density-3 .doc-items th{font-size:9.5pt;padding:4px 5px}
.doc-page.density-3 .doc-items td{font-size:10pt;padding:4px 5px}
.doc-page.density-3 .doc-parties .party{padding:6px 8px;min-height:70px}
.doc-page.density-3 .party-name{font-size:11pt}
.doc-page.density-3 .party-lines{font-size:9.5pt}
.doc-page.density-3 .doc-total td{font-size:10.5pt;padding:5px 7px}
.doc-page.density-3 .doc-total .total-value{font-size:11.5pt}
.doc-page.density-3 .doc-terms td{font-size:10pt;padding:4px 7px}
.doc-page.density-3 .doc-sign td{padding:8px 10px;height:80px}
.doc-page.density-3 .doc-clause{font-size:10pt;margin:5px 0 8px}
.doc-page.density-3 .doc-section{font-size:11pt;margin:10px 0 5px}
.doc-page.density-3 .doc-declaration{font-size:10pt;padding:8px 10px}
.doc-page.density-3 .doc-letterhead{padding-bottom:6px;margin-bottom:10px}
.doc-page.density-3 .po-company-name{font-size:12pt}
.doc-page.density-3 .po-card-label{font-size:9.5pt}

.doc-page.density-4{font-size:10pt;line-height:1.35;padding:10mm 12mm}
.doc-page.density-4 .doc-title{font-size:15pt;margin:3px 0 8px;padding-bottom:4px}
.doc-page.density-4 .doc-company{font-size:12.5pt}
.doc-page.density-4 .doc-address,.doc-page.density-4 .doc-contact{font-size:9pt}
.doc-page.density-4 .doc-meta td{font-size:10pt;padding:3px 6px}
.doc-page.density-4 .doc-items th{font-size:9pt;padding:3px 4px}
.doc-page.density-4 .doc-items td{font-size:9.5pt;padding:3px 4px}
.doc-page.density-4 .doc-parties .party{padding:5px 7px;min-height:60px;margin-bottom:8px}
.doc-page.density-4 .party-name{font-size:10.5pt}
.doc-page.density-4 .party-lines{font-size:9pt}
.doc-page.density-4 .doc-total td{font-size:10pt;padding:4px 6px}
.doc-page.density-4 .doc-total .total-value{font-size:11pt}
.doc-page.density-4 .doc-terms td{font-size:9.5pt;padding:3px 6px}
.doc-page.density-4 .doc-sign td{padding:6px 8px;height:70px}
.doc-page.density-4 .doc-clause{font-size:9.5pt;margin:4px 0 6px}
.doc-page.density-4 .doc-section{font-size:10.5pt;margin:8px 0 4px}
.doc-page.density-4 .doc-declaration{font-size:9.5pt;padding:6px 8px}
.doc-page.density-4 .doc-letterhead{padding-bottom:5px;margin-bottom:9px}
.doc-page.density-4 .po-company-name{font-size:11.5pt}
.doc-page.density-4 .po-card-label{font-size:9pt}

.doc-page.density-5{font-size:9pt;line-height:1.3;padding:8mm 10mm}
.doc-page.density-5 .doc-badge{margin-bottom:6px;padding:4px 10px}
.doc-page.density-5 .doc-badge .en{font-size:11pt}
.doc-page.density-5 .doc-badge .zh{font-size:10pt}
.doc-page.density-5 .doc-type-note{font-size:9pt;padding:3px 8px;margin-bottom:6px}
.doc-page.density-5 .doc-title{font-size:14pt;margin:2px 0 6px;padding-bottom:3px}
.doc-page.density-5 .doc-company{font-size:12pt}
.doc-page.density-5 .doc-address,.doc-page.density-5 .doc-contact{font-size:8.5pt}
.doc-page.density-5 .doc-meta{margin-bottom:8px}
.doc-page.density-5 .doc-meta td{font-size:9pt;padding:2px 5px}
.doc-page.density-5 .doc-items{margin-bottom:8px}
.doc-page.density-5 .doc-items th{font-size:8.5pt;padding:2px 3px}
.doc-page.density-5 .doc-items td{font-size:8.5pt;padding:2px 3px}
.doc-page.density-5 .doc-parties{gap:10px;margin-bottom:8px}
.doc-page.density-5 .doc-parties .party{padding:4px 6px;min-height:50px}
.doc-page.density-5 .party-name{font-size:10pt}
.doc-page.density-5 .party-lines{font-size:8.5pt}
.doc-page.density-5 .doc-total td{font-size:9pt;padding:3px 5px}
.doc-page.density-5 .doc-total .total-value{font-size:10pt}
.doc-page.density-5 .doc-terms{margin-bottom:6px}
.doc-page.density-5 .doc-terms td{font-size:9pt;padding:2px 5px}
.doc-page.density-5 .doc-sign{margin-top:8px}
.doc-page.density-5 .doc-sign td{padding:4px 6px;height:60px}
.doc-page.density-5 .doc-clause{font-size:9pt;margin:3px 0 5px}
.doc-page.density-5 .doc-section{font-size:10pt;margin:6px 0 3px}
.doc-page.density-5 .doc-declaration{font-size:9pt;padding:5px 7px}
.doc-page.density-5 .doc-letterhead{padding-bottom:4px;margin-bottom:7px;gap:8px}
.doc-page.density-5 .doc-logo{max-height:40px}
.doc-page.density-5 .po-company-name{font-size:10.5pt}
.doc-page.density-5 .po-card-label{font-size:8.5pt;padding-bottom:2px;margin-bottom:3px}
.doc-page.density-5 .po-company-info,.doc-page.density-5 .po-ship-content{font-size:8.5pt}
.doc-page.density-5 .po-ship-content{min-height:30px}