/* ============================================================
   THW Works Hub — document / PDF stylesheet
   Rebuilt to match the company's own stationery exactly:

     Tax Invoice / Proforma  — navy blue   #0b2b52 (from the company logo)
     Purchase Order          — navy        #1f3864
     Quotation               — silver-framed letterhead sheet

   Page size is US Letter (612 x 792 pt), which is what the
   original Excel/Word templates use.
   ============================================================ */
@import url("fonts.css");

@page { size: letter; margin: 0; }

@media print {
  html, body { height:auto!important; overflow:visible!important; background:#fff!important; }
  #gate, #shell, #modalWrap, #toasts { display:none!important; }
  .print-area { position:static!important; left:0!important; width:auto!important; display:block!important; }
}

/* ============================================================
   shared
   ============================================================ */
.doc{
  --ink:#000;
  width:612pt; min-height:792pt; margin:0 auto; background:#fff; color:#000;
  font-family:'Roboto',Arial,Helvetica,sans-serif; font-size:9pt; line-height:1.25;
  position:relative; box-sizing:border-box;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.doc + .doc{ page-break-before:always; }
.doc *{ box-sizing:border-box; }
.doc table{ border-collapse:collapse; width:100%; }
.doc td,.doc th{ vertical-align:top; }
.doc .r{ text-align:right }  .doc .c{ text-align:center }
.doc .b{ font-weight:700 }   .doc .i{ font-style:italic }
.doc .u{ text-decoration:underline }
.doc .num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.avoid{ page-break-inside:avoid }
.pgbrk{ page-break-before:always }

/* ============================================================
   GST DOCUMENTS — tax invoice, proforma, purchase order
   Same skeleton; the accent colour and a few blocks differ.
   ============================================================ */
.gstdoc{ --acc:#0b2b52; --acc2:#1d4d85; padding:0 18pt; }
.gstdoc.po{ --acc:#1f3864; --acc2:#1f3864; }

.gstdoc .bar{ height:11pt; background:var(--acc); margin:18pt 0 0; }
.gstdoc .bar.bot{ position:absolute; left:18pt; right:18pt; bottom:20pt; margin:0; }
.gstdoc .juris{ text-align:center; font-size:9.5pt; padding:5pt 0 2pt; font-family:Arial,Helvetica,sans-serif; }

/* ---- masthead ---- */
.gstdoc .mast{ table-layout:fixed; }
.gstdoc .mast .lft{ width:55%; padding-right:8pt; }
.gstdoc .mast .rgt{ width:45%; }
/* Tax Invoice and Proforma Invoice share this exact title style and size —
   "PROFORMA INVOICE" is the longer of the two strings, so the size is set to
   fit it inside the masthead column without overflowing; Tax Invoice uses the
   identical rule, it just doesn't fill the same width since it's shorter. */
.gstdoc .dtitle{
  font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:34pt; line-height:1;
  color:#808080; letter-spacing:-.5pt; white-space:nowrap; margin:0 0 3pt;
}
.gstdoc.po .dtitle{ font-size:32pt; text-decoration:underline; text-underline-offset:2pt; }
.gstdoc .cobox{
  display:inline-block; background:var(--acc); color:#fff; padding:2.5pt 7pt 3.5pt;
  font-family:'Lora',Georgia,'Times New Roman',serif; font-weight:700; font-size:16.5pt;
  line-height:1; letter-spacing:.2pt; margin-bottom:3pt;
}
.gstdoc .coaddr{ font-size:10pt; font-weight:700; line-height:1.55; }
.gstdoc.po .coaddr{ font-weight:400; }
.gstdoc .comail{ font-size:9.5pt; font-weight:700; line-height:1.5; margin-top:1pt; }
.gstdoc.po .comail{ font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:10pt; }
.gstdoc .gstbox{
  display:inline-block; background:var(--acc); color:#fff; padding:2pt 7pt 2.5pt; margin-top:2.5pt;
  font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:700; font-size:9.5pt;
}
/* right side of the masthead */
.gstdoc .mark{ display:block; height:64pt; width:auto; margin:0 0 5pt auto; }
.gstdoc .dlab{ text-align:right; font-weight:700; font-size:10pt; color:var(--acc); }
.gstdoc .drule{ border-bottom:.8pt solid #b7b7b7; margin:1pt 0 2pt; }
.gstdoc .dval{ text-align:right; font-weight:700; font-size:12.5pt; margin-bottom:3pt; }
.gstdoc .numbox{
  background:var(--acc); color:#fff; text-align:right; font-weight:700; font-size:11pt;
  padding:2.5pt 8pt 3pt; margin-top:2.5pt;
}
.gstdoc.po .numbox{ background:none; color:#000; padding:0; text-align:right; font-size:11pt; }
.gstdoc.po .dval{ font-weight:400; font-size:11pt; }

/* ---- party boxes (one table, so both columns share row heights) ---- */
.gstdoc .parties{ table-layout:fixed; }
.gstdoc .parties td{ width:50%; }
.gstdoc .parties tr.plabrow td{ font-weight:700; font-size:10pt; padding:4pt 0 1.5pt; border:0; }
.gstdoc .parties tr.pohdr td{ background:var(--acc); color:#fff; font-weight:700; font-size:10.5pt;
  padding:3pt 8pt; border:1pt solid var(--acc); }
.gstdoc .parties tr.pohdr td + td{ border-left:2pt solid #fff; }
.gstdoc .parties td.pbox{ border:1pt solid var(--acc2); padding:3pt 6pt; }
.gstdoc .parties td.pbox .nm{ font-weight:700; font-size:12.5pt; line-height:1.2; margin-bottom:1.5pt; }
.gstdoc .parties td.pbox .ad{ font-weight:700; font-size:10.5pt; line-height:1.35; }
.gstdoc .parties td.pgst{ border:1pt solid var(--acc2); border-top:0; padding:2.5pt 6pt;
  font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:700; font-size:10.5pt; }
.gstdoc .parties td.pstate{ border:1pt solid var(--acc2); border-top:0; padding:2.5pt 6pt;
  font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:700; font-size:10pt; }
.gstdoc .parties td.pstate .sr{ display:flex; justify-content:space-between; gap:6pt; }
.gstdoc .vrow{ display:flex; justify-content:space-between; gap:8pt; font-weight:700; font-size:10.5pt; line-height:1.45; }
.gstdoc .vrow .vv{ text-align:right; }

/* Document tables must stay tables even though app.css defines layout
   utilities with similar names — printing loads both stylesheets. */
.doc table, .quo table{ display:table!important }
.doc thead, .quo thead{ display:table-header-group!important }
.doc tbody, .quo tbody{ display:table-row-group!important }
.doc tr, .quo tr{ display:table-row!important }
.doc td, .doc th, .quo td, .quo th{ display:table-cell!important }

/* ---- item grid + totals ---- */
/* faded company logo watermark behind the item grid — table cells have no
   background of their own, so it shows through the blank/empty area of the sheet */
.gstdoc .itemwrap{ position:relative; }
.gstdoc .itemwm{ position:absolute; left:50%; top:50%; width:190pt; height:auto;
  transform:translate(-50%,-50%); opacity:.08; z-index:0; pointer-events:none; }
.gstdoc .dgrid{ table-layout:fixed; margin-top:0; width:100%; position:relative; z-index:1; }
/* column widths are driven off the header row — reliable under table-layout:fixed */
.gstdoc .dgrid thead th:nth-child(1){ width:44% }
.gstdoc .dgrid thead th:nth-child(2){ width:10% }
.gstdoc .dgrid thead th:nth-child(3){ width:11% }
.gstdoc .dgrid thead th:nth-child(4){ width:16% }
.gstdoc .dgrid thead th:nth-child(5){ width:19% }
.gstdoc .dgrid thead th{
  background:var(--acc); color:#fff; font-weight:700; font-size:11pt; text-align:center;
  padding:3pt 6pt; border:.8pt solid var(--acc);
}
.gstdoc .dgrid tbody td{ border:.7pt solid var(--acc2); padding:2.5pt 6pt; height:16.5pt; font-size:11pt; font-weight:700; }
.gstdoc .dgrid td.qty{ text-align:right } .gstdoc .dgrid td.rate{ text-align:right } .gstdoc .dgrid td.tot{ text-align:right }
.gstdoc.po .dgrid tbody td{ font-size:10.5pt; }
.gstdoc.po .dgrid tbody tr.shade td{ background:#f3f3f3; }
.gstdoc.po .dgrid td.qty{ text-align:center }
.gstdoc .dgrid td.free{ border-left:.7pt solid var(--acc2); border-right:0; border-top:0; border-bottom:0; }
.gstdoc .dgrid td.hsn{ font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:700; font-size:10.5pt; }
/* totals column pair */
.gstdoc .dgrid td.tl{ border:0; text-align:right; font-weight:700; font-size:10.5pt; padding-right:8pt;
  white-space:nowrap; border-bottom:.7pt solid #d6d6d6; }
.gstdoc .dgrid td.tv{ border:0; text-align:right; font-weight:700; font-size:13pt;
  border-bottom:.7pt solid #d6d6d6; padding-right:2pt; }
.gstdoc .dgrid tr.grand td.tl{ font-size:11pt; border-bottom:0 }
.gstdoc .dgrid tr.grand td.tv{ font-size:15pt; border-bottom:0 }
.gstdoc .dgrid td.blank{ border:0 }

/* ---- words + footer ---- */
.gstdoc .amtwords{ font-weight:700; font-style:italic; font-size:12pt; text-decoration:underline;
  text-underline-offset:2.5pt; padding:5pt 0 0; display:block; }
.gstdoc .forco{ text-align:right; font-weight:700; font-size:11pt; padding-top:10pt; }
.gstdoc .dfoot{ table-layout:fixed; margin-top:2pt; }
.gstdoc .dfoot .bank{ width:55%; font-weight:700; font-size:10.5pt; line-height:1.55; }
.gstdoc .dfoot .sign{ width:45%; text-align:right; position:relative; }
.gstdoc .stamp{ width:96pt; display:block; margin:0 0 -14pt auto; mix-blend-mode:multiply; }
.gstdoc .propr{ font-weight:700; font-size:11pt; }
.gstdoc .poterms{ font-weight:700; font-size:10.5pt; line-height:1.6; padding-top:6pt; }
.gstdoc .pocontact{ font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:700;
  font-size:10.5pt; line-height:1.7; }
.gstdoc .thanks{ text-align:right; font-weight:700; font-size:10.5pt; }

/* ============================================================
   QUOTATION
   ============================================================ */
.quo{
  width:612pt; min-height:792pt; margin:0 auto; background:#fff; color:#000;
  font-family:Arial,Helvetica,sans-serif; font-size:11pt; line-height:1.3;
  padding:26pt 30pt 30pt; position:relative; box-sizing:border-box;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.quo + .quo{ page-break-before:always }
.quo *{ box-sizing:border-box }
/* silver 3-D page frame */
.quo::before{
  content:''; position:absolute; left:14pt; top:14pt; right:14pt; bottom:14pt;
  border:5pt solid #bfbfbf; pointer-events:none;
}
.quo::after{
  content:''; position:absolute; left:20pt; top:20pt; right:20pt; bottom:20pt;
  border:.8pt solid #7f7f7f; pointer-events:none;
}
.quo .inner{ position:relative; z-index:1 }
.quo .lh{ width:100%; display:block; margin:0 0 4pt }
.quo table{ border-collapse:collapse; width:100% }

.quo .qmeta{ text-align:right; color:#1f3864; font-weight:700; font-size:12pt; line-height:1.45; margin-bottom:2pt }
.quo .to{ font-weight:700; font-size:12pt; margin-top:4pt }
.quo .cname{ font-weight:700; font-size:26pt; line-height:1.12; text-decoration:underline;
  text-underline-offset:3pt; display:inline-block; }
.quo .ccity{ font-weight:700; font-style:italic; font-size:15pt; text-decoration:underline;
  text-underline-offset:2pt; display:inline-block; margin-top:1pt }
.quo .subject{ font-weight:700; font-size:14.5pt; line-height:1.28; margin:7pt 0 5pt }
.quo .intro{ font-weight:700; font-size:12.5pt; line-height:1.32; margin-bottom:4pt }
.quo .sec{
  font-family:'Cinzel',Copperplate,'Playfair Display',Georgia,serif;
  color:#c00000; font-weight:700; font-size:12.5pt; letter-spacing:.2pt;
  text-decoration:underline; text-underline-offset:2pt; margin:9pt 0 3pt;
}
.quo .sec.mid{ text-align:center; display:block }

/* specification / accessory / makes tables */
.quo .st{ font-size:11pt }
.quo .st td,.quo .st th{ border:.8pt solid #7f7f7f; padding:2.2pt 5pt; font-weight:700; line-height:1.22 }
.quo .st td.p{ width:35%; }
.quo .st .sn{ display:inline-block; width:20pt; text-align:right; padding-right:6pt }
.quo .st td.v{ text-align:center }
.quo .st tr.hl td{ background:#ffff00 }
.quo .st tr.price td{ background:#00ffff; font-style:italic; font-weight:700; font-size:19pt;
  text-align:center; padding:1pt 5pt }
.quo .st thead td,.quo .st thead th{
  font-family:'Lora',Georgia,serif; font-weight:700; font-size:11.5pt; text-align:center; border:0;
  border-bottom:.8pt solid #7f7f7f; }
.quo .st.acc td:first-child{ width:48% }
.quo .st.acc td:last-child{ text-align:center }
.quo .st.mk td:nth-child(1){ width:33% } .quo .st.mk td:nth-child(2){ width:38%; text-align:center }
.quo .st.mk td:nth-child(3){ text-align:center; font-family:'Lora',Georgia,serif }

.quo .terms{ font-size:12pt; font-weight:700; line-height:1.34; margin:0; padding-left:22pt }
.quo .terms li{ margin-bottom:7pt }
.quo .terms .sub{ display:block; font-style:italic; padding-left:38pt }
.quo .imgref{ width:100%; border:2.5pt solid #1f3864; margin-top:5pt }
.quo .qsign{ font-weight:700; font-size:12pt; line-height:1.6; margin-top:14pt }

/* ============================================================
   PAYMENT RECEIPT — same letterhead image as the quotation, but a
   single plain page (no 3-D frame) matching the company's own
   printed receipt exactly.
   ============================================================ */
.receipt{
  width:612pt; min-height:792pt; margin:0 auto; background:#fff; color:#000;
  font-family:Arial,Helvetica,sans-serif; font-size:11pt; line-height:1.4;
  padding:0 36pt 30pt; position:relative; box-sizing:border-box;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.receipt .inner{ position:relative; z-index:1 }
.receipt .lh{ width:100%; display:block; margin:0 0 6pt }
.receipt .rmeta{ text-align:right; font-size:10.5pt; font-weight:700; line-height:1.5; margin-bottom:16pt }
.receipt .rto{ font-size:12pt; font-weight:700; margin-bottom:8pt }
.receipt .rcname{ font-weight:700; font-size:20pt; line-height:1.3 }
.receipt .rcaddr{ font-weight:700; font-size:12pt }
.receipt .rtitle{ text-align:center; font-weight:700; font-size:19pt; margin:8pt 0 18pt }
.receipt .rrow{ display:flex; justify-content:space-between; gap:10pt; padding:3pt 0; font-weight:700; font-size:11.5pt }
.receipt .rrow .rmark{ width:20pt; flex:none }
.receipt .rrow .rdesc{ flex:1 }
.receipt .rrow .ramt{ text-align:right; white-space:nowrap }
.receipt .rline{ border-bottom:1pt solid #000; margin:3pt 0 7pt }
.receipt .rpayments{ margin-top:16pt }
.receipt .rrow.pending{ background:#ffff00; padding:5pt 8pt; margin-top:4pt }
.receipt .rsign{ font-weight:700; font-size:11.5pt; margin-top:70pt }
.receipt .rstamp{ width:110pt; margin-top:10pt; opacity:.9; mix-blend-mode:multiply }