/* The printable document shared by Invois & Pembayaran (Customer) and
   Invois & DO (Bean Owner). One stylesheet on purpose: the Customer's invoice
   and the Owner's copy are the same document, and two copies of this CSS
   would be two chances for them to drift apart on paper.

   Colours come from the page's own :root tokens, so this file states none. */
.sheet{background:var(--panel); border:1px solid var(--line); border-radius:4px;
  padding:20px 18px; margin-top:6px}
.sheet .rb-letterhead{display:block; width:calc(100% + 36px); max-width:none; height:auto;
  margin:-20px -18px 16px; border-radius:4px 4px 0 0}
.sheet .lh{display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; border-bottom:2px solid var(--steel); padding-bottom:14px; margin-bottom:16px}
.sheet .lh h2{font-family:var(--disp); font-weight:700; font-size:22px;
  letter-spacing:.05em; text-transform:uppercase; margin:0}
.sheet .lh .meta{text-align:right; font-size:13px; color:var(--ink-soft); line-height:1.6}
.sheet .lh .meta b{color:var(--ink); font-family:var(--mono)}
.sheet .blk{margin-bottom:16px}
.sheet .blk h3{font-family:var(--disp); font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px}
.sheet .blk p{margin:0; font-size:14.5px; line-height:1.55; overflow-wrap:anywhere}
.sheet .blk p.small{font-size:13px; color:var(--ink-soft); margin-top:6px}
.sheet .period{border:1px solid var(--line); border-left:4px solid var(--steel);
  border-radius:4px; padding:10px 12px; margin-bottom:16px; background:var(--panel-alt)}
.sheet .period .pd{font-family:var(--mono); font-size:14px; font-weight:600}
.sheet .period .why{font-size:13px; color:var(--ink-soft); line-height:1.55; margin-top:6px}
table.lines{width:100%; border-collapse:collapse; margin-bottom:8px}
table.lines th{text-align:left; font-family:var(--disp); font-weight:600; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  padding:0 0 6px; border-bottom:1px solid var(--line)}
table.lines th:last-child, table.lines td:last-child{text-align:right}
table.lines td{padding:7px 0; font-size:14.5px; border-bottom:1px solid var(--panel-alt); vertical-align:top}
table.lines td.a{font-family:var(--mono); white-space:nowrap; padding-left:10px}
.totalrow{display:flex; justify-content:space-between; align-items:baseline;
  padding-top:10px; margin-top:2px; border-top:2px solid var(--steel)}
.totalrow .l{font-family:var(--disp); font-weight:700; font-size:14px;
  letter-spacing:.05em; text-transform:uppercase}
.totalrow .v{font-family:var(--mono); font-size:20px; font-weight:700}
.sheet .notebox{border:1px solid var(--hivis-deep); background:var(--hivis-wash);
  border-radius:4px; padding:10px 12px; margin-bottom:16px; font-size:14px; line-height:1.55}
.sheet .notebox b{display:block; font-family:var(--disp); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px}
.sheet .sigs{display:flex; gap:16px; margin-top:22px}
.sheet .sigs > div{flex:1 1 0; min-width:0}
.sheet .sigs h3{font-family:var(--disp); font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 4px}
.sheet .sigs .ln{height:30px; border-bottom:1px solid var(--ink-faint); margin-bottom:2px}
.sheet .sigs .cap{font-size:11.5px; color:var(--ink-faint); margin-bottom:8px}
.sheet .sfoot{margin-top:18px; padding-top:12px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-faint); line-height:1.6}
.sheetacts{display:flex; gap:8px; margin-top:14px}
.sheetacts button{flex:1 1 0; appearance:none; border:1px solid var(--line);
  background:var(--panel-alt); color:var(--ink); border-radius:4px; padding:12px;
  cursor:pointer; font-family:var(--disp); font-weight:700; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase}
.sheetacts button.go{background:var(--hivis); border-color:var(--hivis); color:var(--steel)}

/* On paper: only the document -- the page hides its own header, list and
   buttons; this hides the buttons that belong to the sheet. */
@media print{
  .sheetacts{display:none !important}
  .sheet{border:0; padding:0; margin:0; background:#fff; color:#000}
  .sheet .rb-letterhead{width:100%; margin:0 0 4mm; border-radius:0; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .sheet .sigs > div{break-inside:avoid}
}

/* The final footnote under every invoice / delivery order (English, three lines). */
.sheet .sfoot2{margin-top:10px; padding-top:8px; border-top:1px solid var(--line); text-align:center;
  font-size:11px; line-height:1.6; color:var(--ink-soft,#5C6469)}