/* Printable A4 document */
@import url('/vendor/fonts/sarabun/thai-400.css');
@import url('/vendor/fonts/sarabun/latin-400.css');
@import url('/vendor/fonts/sarabun/thai-600.css');
@import url('/vendor/fonts/sarabun/latin-600.css');
@import url('/vendor/fonts/sarabun/thai-700.css');
@import url('/vendor/fonts/sarabun/latin-700.css');

.paper {
  --doc-accent: #3730a3;
  --doc-accent-soft: #eef0ff;
  --doc-line: #c9cdd8;
  --doc-ink: #1d2230;
  --doc-muted: #5b6275;
  position: relative;
  width: 210mm;
  min-height: 297mm;
  padding: 12mm 12mm 10mm;
  box-sizing: border-box;
  background: #fff;
  color: var(--doc-ink);
  font-family: 'Sarabun', 'Tahoma', sans-serif;
  font-size: 10.5pt;
  line-height: 1.38;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.paper * { box-sizing: border-box; }
.paper small { display: block; font-size: 7.5pt; color: var(--doc-muted); font-weight: 400; line-height: 1.1; }

.paper .watermark {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  font-size: 110pt;
  font-weight: 700;
  color: rgba(200, 30, 30, 0.12);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.paper .watermark.draft { color: rgba(80, 80, 120, 0.09); }

.doc-head { display: flex; justify-content: space-between; gap: 8mm; padding-bottom: 4mm; border-bottom: 2px solid var(--doc-accent); }
.seller { display: flex; gap: 4mm; font-size: 9.5pt; color: var(--doc-muted); }
.seller .logo { width: 24mm; height: 24mm; object-fit: contain; flex: none; }
.seller-name { font-size: 13pt; font-weight: 700; color: var(--doc-ink); }
.seller-name .branch { font-size: 10pt; font-weight: 400; color: var(--doc-muted); }
.seller-en { font-weight: 600; color: var(--doc-ink); }

.doc-title { text-align: right; flex: none; min-width: 52mm; }
.doc-title h1 { margin: 0; font-size: 19pt; line-height: 1.15; color: var(--doc-accent); font-weight: 700; }
.doc-title .en { font-size: 10pt; color: var(--doc-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.doc-title .copy-tag {
  display: inline-block;
  margin-top: 2mm;
  padding: 0.6mm 3mm;
  border: 1px solid var(--doc-accent);
  border-radius: 1.2mm;
  font-size: 9pt;
  color: var(--doc-accent);
  font-weight: 600;
}

.parties { display: grid; grid-template-columns: 1fr 80mm; gap: 3mm; margin: 4mm 0 3.5mm; }
.paper .box { border: 1px solid var(--doc-line); border-radius: 1.6mm; padding: 2.5mm 3.5mm; }
.box-label { font-size: 8.5pt; color: var(--doc-muted); }
.buyer-name { font-weight: 700; font-size: 11pt; }
.meta table { width: 100%; border-collapse: collapse; }
.meta th { text-align: left; font-weight: 600; padding: 0.6mm 2mm 0.6mm 0; white-space: nowrap; vertical-align: top; width: 1%; }
.meta td { padding: 0.6mm 0; vertical-align: top; overflow-wrap: anywhere; }
.meta th small { display: inline; margin-left: 1mm; }

.paper table.items { width: 100%; border-collapse: collapse; position: relative; z-index: 1; }
.paper table.items thead th {
  background: var(--doc-accent-soft);
  color: var(--doc-ink);
  font-weight: 600;
  font-size: 9.5pt;
  padding: 1.6mm 1.8mm;
  border-top: 1px solid var(--doc-accent);
  border-bottom: 1px solid var(--doc-accent);
  text-align: left;
  vertical-align: bottom;
}
.paper table.items td { padding: 1.6mm 1.8mm; border-bottom: 1px solid #e6e8ef; vertical-align: top; }
.paper table.items tr { break-inside: avoid; }
/* Narrow columns shrink to their content so the description gets the remaining width. */
.paper .c-no { width: 1%; white-space: nowrap; text-align: center !important; }
.paper .c-code { width: 1%; white-space: nowrap; }
.paper .c-unit { width: 1%; white-space: nowrap; text-align: center !important; }
.paper .c-date { width: 1%; text-align: center !important; white-space: nowrap; }
.paper .c-num { text-align: right !important; white-space: nowrap; width: 1%; }
.paper .it-name { font-weight: 600; }
.paper .it-desc { color: var(--doc-muted); font-size: 9.5pt; }

.summary { display: grid; grid-template-columns: 1fr 78mm; gap: 6mm; margin-top: 3mm; break-inside: avoid; }
.baht-text {
  background: var(--doc-accent-soft);
  border-radius: 1.4mm;
  padding: 1.8mm 3mm;
  font-weight: 600;
  text-align: center;
}
.paper .notes { margin-top: 2.5mm; font-size: 9.5pt; }
.paper .notes b { font-weight: 600; }
.t-row { display: flex; justify-content: space-between; gap: 4mm; padding: 1mm 0; border-bottom: 1px dotted #d9dce5; }
.t-row small { display: inline; margin-left: 1mm; }
.t-row span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-row.grand { font-weight: 700; border-bottom: 1px solid var(--doc-accent); border-top: 1px solid var(--doc-accent); font-size: 11pt; }

.signs { display: grid; gap: 6mm; margin-top: auto; padding-top: 8mm; break-inside: avoid; }
.signs-2 { grid-template-columns: 1fr 1fr; }
.signs-3 { grid-template-columns: 1fr 1fr 1fr; }
.sign { text-align: center; font-size: 9.5pt; border: 1px solid var(--doc-line); border-radius: 1.6mm; padding: 2.5mm 3mm 2mm; }
.sign-on { font-weight: 600; min-height: 5mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sign-space { height: 16mm; position: relative; display: flex; align-items: center; justify-content: center; }
.sign-space .stamp { max-height: 18mm; max-width: 40mm; object-fit: contain; }
.sign-line { border-top: 1px dotted #888; padding-top: 1mm; margin: 0 4mm; }
.sign-caption { color: var(--doc-muted); }
.sign-date { margin-top: 1.5mm; color: var(--doc-muted); font-size: 8.5pt; }

/* Page margins come from @page so continuation pages also get a top/bottom margin. */
@page { size: A4; margin: 10mm 0 9mm; }
@media print {
  .paper { box-shadow: none !important; margin: 0 !important; break-after: page; min-height: 277.5mm; padding-top: 2mm; padding-bottom: 0; }
  .paper:last-child { break-after: auto; }
  .paper table.items thead { display: table-header-group; }
}