/* Dokumen invoice A4 — meniru desain Putera Priangan (hijau, daun, ombak) */
.doc {
  --g1: #1f5c34; --g2: #2f7a43; --g3: #4c9c57; --gl: #eef5ee; --gb: #d6e6d6; --ink: #1d2a20;
  position: relative; width: 794px; min-height: 1123px; padding: 24px 30px 0; overflow: hidden;
  background: #f8faf6; color: var(--ink); font: 13px/1.45 "Nunito Sans", Arial, sans-serif;
  transform-origin: top left; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  display: flex; flex-direction: column;
}
.doc .blob { position: absolute; right: -40px; top: -40px; width: 270px; height: 175px; background: #e3eee1; border-radius: 0 0 0 180px / 0 0 0 140px; }
.doc .slogan { position: absolute; right: 18px; top: 18px; width: 190px; transform: rotate(-7deg); text-align: center; font: 700 23px/1.05 Caveat, "Segoe Script", cursive; color: var(--g1); white-space: pre-line; }
.doc .slogan::after { content: ""; display: block; width: 110px; height: 3px; margin: 6px auto 0; border-radius: 3px; background: var(--g2); transform: rotate(-3deg); }
.doc .slogan .lf { position: absolute; width: 26px; height: 26px; fill: var(--g3); }
.doc header.h { position: relative; display: flex; gap: 12px; align-items: center; min-height: 112px; padding-right: 200px; }
.doc header.h img { width: 108px; flex: none; }
.doc .name { margin: 0; font: 800 37px/1 Cinzel, "Times New Roman", serif; color: var(--g1); letter-spacing: .5px; }
.doc .sub { margin: 5px 0 0; font-weight: 800; font-size: 16px; letter-spacing: 3.4px; color: var(--g1); }
.doc .tag { margin: 2px 0 0; font: 700 26px/1 Caveat, "Segoe Script", cursive; color: var(--g1); }
.doc .tag::after { content: ""; display: block; width: 240px; height: 3px; margin: 3px 0 0 16px; border-radius: 3px; background: var(--g2); transform: rotate(-1deg); }

.doc .info { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding: 9px 0; border-radius: 12px; background: var(--gl); }
.doc .info > div { display: flex; gap: 10px; padding: 0 18px; }
.doc .info > div + div { border-left: 1px solid #b9cdb9; }
.doc .info svg { flex: none; width: 26px; height: 26px; fill: var(--g1); }
.doc .info b { display: block; font-size: 13px; }
.doc .info span { white-space: pre-line; font-size: 13px; }

.doc .head2 { display: grid; grid-template-columns: 352px 1fr; gap: 0; margin-top: 10px; border-radius: 12px; background: var(--gl); }
.doc .inv { padding: 13px 20px 11px; border-radius: 12px; background: var(--g1); color: #fff; }
.doc .inv h2 { margin: 0; font: 800 40px/1 "Nunito Sans", Arial, sans-serif; letter-spacing: 3px; }
.doc .inv h2 i { font-style: normal; color: #8fd18f; }
.doc .inv p { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.35); font-weight: 700; font-size: 15px; letter-spacing: 1.4px; }
.doc .meta { display: grid; grid-template-columns: auto 14px 1fr; align-content: center; row-gap: 2px; padding: 8px 16px 8px 26px; font-size: 13.5px; white-space: nowrap; }
.doc .meta span:nth-child(3n) { font-weight: 600; }

.doc .to { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0 0; padding: 10px 18px 0; border-top: 1px solid var(--gb); }
.doc .to > div + div { display: flex; gap: 12px; padding-left: 40px; border-left: 1px solid #b9cdb9; }
.doc .to h4 { margin: 0; font-size: 14px; font-weight: 600; }
.doc .to .cust { margin: 1px 0; font-size: 17px; font-weight: 800; color: var(--g1); text-transform: uppercase; }
.doc .to p { margin: 0; font-size: 14px; white-space: pre-line; }
.doc .to svg { flex: none; width: 34px; height: 34px; fill: var(--g1); }
.doc .to b { font-size: 14px; }

.doc table.t { width: 100%; margin-top: 12px; border-collapse: separate; border-spacing: 0; border: 1px solid #b9cdb9; border-radius: 10px; overflow: hidden; background: #fff; }
.doc .t th { padding: 6px 6px; background: var(--g2); color: #fff; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; }
.doc .t th + th, .doc .t td + td { border-left: 1px solid #c9dac9; }
.doc .t th + th { border-left-color: rgba(255,255,255,.35); }
.doc .t td { padding: 3px 10px; font-size: 13.5px; border-top: 1px solid #dfe9df; }
.doc .t tbody tr:nth-child(even) td { background: #f3f8f2; }
.doc .t td.c { text-align: center; }
.doc .t td.r { text-align: right; font-variant-numeric: tabular-nums; }
.doc .t td.nm { padding-left: 18px; }

.doc .bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.doc .notes { padding: 11px 18px; border-radius: 12px; background: var(--gl); }
.doc .notes h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--g1); }
.doc .notes svg { width: 24px; height: 24px; fill: var(--g1); }
.doc .notes ul { margin: 0; padding-left: 16px; font-size: 13.5px; }
.doc .total { padding: 10px 16px; border: 1px solid #b9cdb9; border-radius: 12px; background: var(--gl); }
.doc .total .tt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc .total .tt span { white-space: nowrap; font-size: 17px; font-weight: 600; }
.doc .total .tt b { min-width: 210px; padding: 6px 16px; border-radius: 8px; background: var(--g1); color: #fff; font-size: 21px; text-align: center; font-variant-numeric: tabular-nums; }
.doc .total p { margin: 8px 0 0; font-size: 13.5px; font-style: italic; }

.doc .sign { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; text-align: center; font-size: 14px; }
.doc .sign b { display: block; }
.doc .sign .line { margin-top: 46px; color: #444; letter-spacing: 1px; }
.doc .sign .who { margin-top: 4px; font-weight: 800; }

.doc .foot { position: relative; height: 150px; margin: auto -30px 0; }
.doc .foot svg.wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 118px; }
.doc .foot .say { position: absolute; left: 40px; bottom: 22px; transform: rotate(-6deg); font: 700 23px/1.05 Caveat, "Segoe Script", cursive; color: #fff; white-space: pre-line; }
.doc .foot .say::after { content: ""; display: block; width: 150px; height: 2px; margin: 6px 0 0 40px; background: rgba(255,255,255,.8); border-radius: 2px; }
.doc .foot svg.veg { position: absolute; right: 0; bottom: 0; width: 270px; height: 155px; }
.doc .spacer { flex: 1; min-height: 10px; }

@media print {
  @page { size: A4; margin: 0; }
  .doc .t tr { break-inside: avoid; }
  .doc .bottom, .doc .sign { break-inside: avoid; }
}