/* Dokumen nota & tanda terima */
.doc-wrap{max-width:820px;margin:0 auto}
.doc{position:relative;background:#fff;color:#111;width:100%;max-width:800px;margin:0 auto;padding:28px 30px 22px;
  font:13px/1.45 "Helvetica Neue",Arial,sans-serif;box-shadow:0 2px 18px rgba(0,0,0,.08);border-radius:6px;overflow:hidden}
body.exporting .doc{width:800px;max-width:none;box-shadow:none;border-radius:0}
body.exporting .doc-wrap{max-width:none;overflow:visible}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:3px solid #111;padding-bottom:12px}
.doc-brand img{height:52px;display:block;margin-bottom:4px}
.doc-slogan{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#1f4fd6;margin-bottom:4px}
.doc-addr{font-size:12px;color:#333}
.doc-title{font-size:20px;font-weight:800;letter-spacing:.04em;text-align:right;padding-top:8px;border-bottom:4px solid #a7c520;align-self:flex-start}
.doc-meta{display:flex;justify-content:space-between;gap:18px;margin:14px 0 12px}
.doc-meta table{border-collapse:collapse}
.doc-meta td{padding:2px 6px 2px 0;vertical-align:top}
.doc-meta td:first-child{color:#555;white-space:nowrap}
.doc-items{width:100%;border-collapse:collapse;margin-top:4px}
.doc-items th,.doc-items td{border:1px solid #222;padding:6px 8px}
.doc-items th{background:#111;color:#fff;font-weight:700;text-transform:uppercase;font-size:12px}
.doc-items tr.blank td{height:26px}
.doc-items .r{text-align:right;white-space:nowrap}.doc-items .c{text-align:center;width:44px}
.doc-items tfoot td{font-weight:600}
.doc-items tr.gt td{background:#eef5cf;font-size:15px;font-weight:800}
.tag{display:inline-block;font-size:10px;background:#e7edff;color:#1f4fd6;border-radius:3px;padding:0 5px;margin-left:4px}
.doc-words{border:1px solid #222;border-top:0;padding:6px 8px;background:#fafafa}
.doc-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:14px}
.doc-left{flex:1;display:flex;flex-direction:column;gap:4px}
.banks{margin-top:4px}
.qr-wrap{display:flex;align-items:center;gap:10px;margin-top:6px}
.qr-wrap small{color:#555;max-width:150px}
.qr img,.qr canvas{width:104px!important;height:104px!important;display:block}
.doc-sign{display:flex;gap:26px;text-align:center}
.doc-sign>div{min-width:150px;display:flex;flex-direction:column;justify-content:space-between;height:118px}
.sig-img{height:74px;display:flex;align-items:flex-end;justify-content:center}
.sig-img img{max-height:74px;max-width:170px;display:block}
.sig-line{border-top:1px solid #111;padding-top:3px;font-weight:600}
.doc-notes{margin-top:14px;border:1px solid #222;padding:8px 10px;font-size:11.5px}
.doc-notes ul{margin:3px 0 0 18px;padding:0}
.stamp-mini{font-weight:800;font-size:11px;padding:1px 7px;border:2px solid;border-radius:4px}
.stamp-mini.lunas{color:#12813a}.stamp-mini.belum{color:#c62828}.stamp-mini.dp{color:#c77700}
.box{border:1px solid #222;padding:6px 9px;margin-top:8px;min-height:40px}
.box label{font-weight:700;display:block;margin-bottom:2px}
.acc{margin-top:8px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.chk{display:inline-flex;align-items:center;gap:5px}
.chk i{display:inline-flex;width:15px;height:15px;border:1.5px solid #222;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:11px}
.chk.on i{background:#111;color:#fff}
.status-bar{display:flex;gap:6px;margin:12px 0 2px}
.status-bar .step{flex:1;display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:6px;background:#f1f1f1;color:#777}
.status-bar .step span{width:24px;height:24px;border-radius:50%;background:#ccc;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.status-bar .step b{display:block;font-size:12px}.status-bar .step small{font-size:10.5px}
.status-bar .step.done{background:#eef3ff;color:#1f3c88}.status-bar .step.done span{background:#1f4fd6}
.status-bar .step.cur{background:#1f4fd6;color:#fff}.status-bar .step.cur span{background:#a7c520;color:#111}
.status-stamp{position:absolute;right:26px;top:128px;transform:rotate(-12deg);border:3px solid;border-radius:8px;padding:3px 12px;font-weight:900;font-size:18px;opacity:.28;letter-spacing:.06em;pointer-events:none}
.status-stamp.terima{color:#1f4fd6}.status-stamp.proses{color:#c77700}.status-stamp.selesai{color:#12813a}
.doc-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 16px;max-width:820px}
@media (max-width:640px){
  .doc{padding:16px 14px;font-size:12px}
  .doc-head,.doc-meta,.doc-bottom{flex-direction:column}
  .doc-title{text-align:left;font-size:17px}
  .doc-sign{justify-content:space-between}.doc-sign>div{min-width:0;flex:1}
  .status-bar{flex-direction:column}
  .status-stamp{display:none}
  body.exporting .doc-head,body.exporting .doc-meta,body.exporting .doc-bottom{flex-direction:row}
  body.exporting .doc{padding:28px 30px 22px;font-size:13px}
  body.exporting .status-bar{flex-direction:row}
  body.exporting .status-stamp{display:block}
  body.exporting .doc-title{text-align:right;font-size:20px}
}
@media print{
  body{background:#fff!important}
  .no-print,.sidebar,.topbar,.site-nav,.site-footer,.wa-float{display:none!important}
  .main{margin:0!important;padding:0!important}
  .doc{box-shadow:none;max-width:none;width:100%;padding:0}
  @page{size:A4;margin:12mm}
}

/* Tanda tangan di layar */
.sign-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:-6px auto 14px;max-width:820px}
.sign-bar .btn{border-style:dashed}
.sign-bar .btn.done{border-style:solid;background:#e3f6e9;border-color:#9fd8b1;color:#0f5f2c}
.sign-bar .x{border:0;background:#fde8e8;color:#c62828;border-radius:6px;padding:0 8px;cursor:pointer;font-weight:800}
.sp-back{position:fixed;inset:0;background:rgba(10,15,30,.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:12px}
.sp-box{background:#fff;border-radius:16px;width:100%;max-width:640px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#111}
.sp-box h3{margin:0 0 4px;font-size:18px}.sp-box p{margin:0 0 10px;color:#666;font-size:13px}
.sp-canvas{width:100%;height:240px;border:2px dashed #b9c3dd;border-radius:12px;background:#fbfcff;touch-action:none;display:block;cursor:crosshair}
.sp-name{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font:inherit;margin:10px 0 0}
.sp-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-top:12px}
.sp-row label{display:flex;gap:6px;align-items:center;font-size:13px;margin:0;font-weight:500}
.sp-row label input{width:auto;margin:0}
.sp-btn{padding:10px 16px;border-radius:9px;border:1px solid #d1d5db;background:#fff;font:inherit;font-weight:700;cursor:pointer}
.sp-btn.pri{background:#1f4fd6;border-color:#1f4fd6;color:#fff}
.sp-btn:disabled{opacity:.5}
@media (max-width:640px){.sp-canvas{height:200px}.sp-box{padding:14px}}
@media print{.sign-bar{display:none!important}}