/* Layout dokumen cetak. Ukuran kertas Letter (sama seperti ST/MAR Excel). */
@page { size: letter portrait; margin: 7mm 8mm; }
@page mar { size: letter landscape; margin: 6mm 7mm; }

.doc { font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; color: #000; background: #fff; }
.doc .page { background: #fff; box-sizing: border-box; position: relative; overflow: hidden; }
.doc .page.st { width: 199.9mm; height: 265mm; font-size: 8.6pt; display: flex; flex-direction: column; }
.doc .page.mar { page: mar; width: 265.4mm; height: 203mm; font-size: 6.6pt; display: flex; flex-direction: column; }
.doc table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.doc td, .doc th { padding: 0 2px; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.doc .c { text-align: center; }
.doc .r { text-align: right; }
.doc .sig { position: absolute; max-height: 15mm; max-width: 45mm; left: 4mm; bottom: 8mm; mix-blend-mode: multiply; }

/* ---------- SERVICE TICKET ---------- */
.st-top { display: flex; align-items: flex-start; justify-content: space-between; height: 15mm; }
.st-top .logo { height: 12mm; }
.st-title { text-align: center; font-weight: 700; font-size: 9pt; line-height: 1.35; padding-top: 1.5mm; }
.st-page { font-weight: 700; font-size: 8.5pt; width: 30mm; text-align: right; padding-top: 1.5mm; }
.st-head { border: 1px solid #000; }
.st-head td { height: 3.95mm; }
.st-head td.l { font-weight: 700; text-align: right; width: 12%; }
.st-head td.v { width: 21.3%; }
.st-head td:nth-child(2), .st-head td:nth-child(4) { border-right: 1px solid #000; }
.st-head td:nth-child(3) { width: 13%; }
.st-head td:nth-child(5) { width: 9%; }
.st-head .dt { margin-left: 8mm; font-weight: 700; }
.sect { font-weight: 700; margin-top: .6mm; }
.rm { border: 1px solid #000; }
.rm-line { height: 3.9mm; line-height: 3.9mm; padding: 0 2px; border-bottom: 1px solid #000; white-space: nowrap; overflow: hidden; }
.rm-line:last-child { border-bottom: 0; }
.st-items { margin-top: 3.5mm; }
.st-items th, .st-items td { border: 1px solid #000; }
.st-items th { height: 7.5mm; font-weight: 700; }
.st-items tbody td { height: 7.6mm; white-space: normal; line-height: 1.05; }
.st-items td.money { white-space: nowrap; text-align: right; position: relative; padding-right: 2mm; }
.st-items td.money span { position: absolute; left: 2mm; }
.st-items tfoot td { height: 7.5mm; font-weight: 700; }
.st-items tfoot .nob { border: 0; border-left: 1px solid #000; border-bottom: 1px solid #000; }
.st-items .tot-l { text-align: center; border-left: 1px solid #000; }
.op { border: 1px solid #000; }
.op td { height: 3.9mm; border-top: 1px solid #000; }
.op td:nth-child(3), .op td:nth-child(6), .op td:nth-child(9) { border-right: 1px solid #000; padding-right: 1mm; }
.op td.k { width: 3mm; }
.op col { }
.op td:nth-child(1) { width: 15%; } .op td:nth-child(3) { width: 6%; }
.op td:nth-child(4) { width: 14%; } .op td:nth-child(6) { width: 7%; }
.op td:nth-child(7) { width: 15%; } .op td:nth-child(9) { width: 6%; }
.op td:nth-child(10) { width: 10%; }
.st-log { margin-top: 3.5mm; }
.st-log th, .st-log td { border: 1px solid #000; }
.st-log th { height: 3.8mm; }
.st-log td { height: 3.72mm; line-height: 1; }
.st-foot { margin-top: auto; border: 1px solid #000; border-top: 0; }
.st-ack { text-align: center; font-weight: 700; padding: .6mm 0 0; }
.st-sigs { display: flex; height: 37mm; }
.st-sigs .sg { flex: 2; display: flex; flex-direction: column; }
.st-sigs .sg.eng { flex: 1; padding-left: 4mm; }
.sg-t { font-weight: 700; padding: 2.5mm 0 0 14mm; }
.sg.eng .sg-t { padding-left: 0; }
.sg-row { display: flex; flex: 1; }
.sg-box { flex: 1; position: relative; }
.sg-n { position: absolute; bottom: 7mm; left: 1mm; right: 1mm; }
.sg-n b { font-weight: 400; display: block; }
.sg-d { position: absolute; bottom: 1mm; left: 1mm; }
.sg-d span { margin-left: 8mm; }
.sg.eng .sig { left: 14mm; bottom: 11mm; }
.sg.eng .sg-n { bottom: 5mm; }
.sg.eng .sg-d { bottom: .5mm; }
.st-conf { text-align: center; font-size: 8.5pt; padding-top: 4mm; }

/* ---------- MAR ---------- */
.mar-top { position: relative; height: 13mm; }
.mar-top .logo { height: 10mm; position: absolute; left: 0; top: 0; }
.mar-title { text-align: center; font-weight: 700; font-size: 10pt; text-decoration: underline; padding-top: 4mm; }
.mar-info { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 2mm; }
.mar-info table { width: auto; }
.mar-info td { height: 3.2mm; }
.mar-info td.l { text-align: right; padding-right: 1.5mm; }
.mar-info table:first-child { margin-left: 22mm; }
.mar-info table:last-child { margin-right: 25mm; }
.mar-grid col.lblc { width: 30mm; }
.mar-grid th, .mar-grid td { border: 1px solid #555; height: 3.2mm; padding: 0 1px; font-size: 6.2pt; }
.mar-grid tr.hd th { background: #f8cbad; font-weight: 700; height: 5mm; font-size: 5.6pt; white-space: normal; line-height: 1.05; }
.mar-grid td.lbl { font-weight: 400; }
.mar-grid th.lbl { text-align: center; font-size: 6.4pt; }
.mar-rm { border: 1px solid #555; border-top: 0; margin-left: 30mm; }
.mar-rm-h { background: #f8cbad; text-align: center; font-weight: 700; height: 3.2mm; border-bottom: 1px solid #555; }
.mar-rm-b { min-height: 14mm; padding: 1mm; white-space: pre-wrap; }
.mar-sigs { display: flex; justify-content: space-between; padding: 3mm 8mm 0 12mm; margin-top: auto; }
.ms { width: 62mm; border: 1px solid #555; text-align: center; font-weight: 700; }
.ms-h { border-bottom: 1px solid #555; height: 3.6mm; }
.ms-b { height: 17mm; position: relative; }
.ms-b .sig { left: 50%; transform: translateX(-50%); bottom: 1mm; max-height: 16mm; }
.ms-n { border-top: 1px solid #555; height: 3.4mm; }
.ms-r { border-top: 1px solid #555; height: 3.4mm; font-weight: 400; }

/* ---------- Preview di layar ---------- */
.preview { background: #64748b; padding: 12px 0; overflow-x: hidden; }
.preview .doc { transform-origin: top left; }
.preview .page { margin: 0 auto 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }

@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing { background: #fff !important; }
  #print-root { display: block !important; }
  #print-root .page { break-after: page; margin: 0; box-shadow: none; }
  #print-root .page:last-child { break-after: auto; }
}
#print-root { display: none; }