:root{--navy:#0d2b5b;--teal:#0b5260;--yellow:#f4b400;--bg:#f4f7fb;--line:#d9e1ec;--danger:#c62828;--green:#15803d}
.opa-app{font-family:Arial,Helvetica,sans-serif;background:var(--bg);min-height:75vh;padding:18px;color:#172033}.opa-loading{text-align:center;padding:50px}.opa-shell{max-width:1280px;margin:auto}.opa-login{max-width:430px;margin:70px auto;background:#fff;border-radius:18px;padding:28px;box-shadow:0 15px 45px rgba(13,43,91,.12);text-align:center}.opa-login img{max-width:260px;max-height:100px;object-fit:contain}.opa-pin{font-size:30px;letter-spacing:14px;text-align:center;width:180px;padding:12px;border:2px solid var(--navy);border-radius:12px}.opa-btn{border:0;border-radius:9px;padding:10px 16px;font-weight:700;cursor:pointer;background:var(--navy);color:#fff}.opa-btn.yellow{background:var(--yellow);color:#172033}.opa-btn.light{background:#e8eef7;color:var(--navy)}.opa-btn.red{background:#c62828}.opa-top{display:flex;gap:15px;justify-content:space-between;align-items:center;background:#fff;padding:14px 18px;border-radius:14px;margin-bottom:14px}.opa-brand{display:flex;align-items:center;gap:12px}.opa-brand img{width:180px;max-height:65px;object-fit:contain}.opa-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.opa-tab{padding:10px 14px;border-radius:9px;background:#fff;color:var(--navy);font-weight:700;cursor:pointer;border:1px solid var(--line)}.opa-tab.active{background:var(--navy);color:#fff}.opa-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.opa-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 6px 18px rgba(13,43,91,.06);margin-bottom:14px}.opa-card h2,.opa-card h3{margin-top:0;color:var(--navy)}.opa-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.opa-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}.opa-field{margin-bottom:12px}.opa-field label{display:block;font-weight:700;margin-bottom:6px}.opa-field input,.opa-field select,.opa-field textarea{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid #c9d3e0;border-radius:8px;background:#fff}.opa-field textarea{min-height:80px;resize:vertical}.opa-items{display:flex;flex-direction:column;gap:12px}.opa-item{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfdff}.opa-item-head{display:flex;justify-content:space-between;align-items:center}.opa-facilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.opa-check{display:flex;gap:8px;align-items:flex-start;padding:5px}.opa-summary{background:#fff8dc;border:1px solid #f1cf66;border-radius:10px;padding:13px}.opa-summary-line{display:flex;justify-content:space-between;padding:6px 0}.opa-summary-line.total{font-size:20px;font-weight:800;border-top:2px solid var(--navy);margin-top:5px}.opa-table{width:100%;border-collapse:collapse;font-size:14px}.opa-table th,.opa-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.opa-actions{display:flex;gap:6px;flex-wrap:wrap}.opa-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#e8eef7;color:var(--navy);font-size:12px;font-weight:700}.opa-badge.lunas,.opa-badge.approved{background:#dcfce7;color:#166534}.opa-badge.sent{background:#dbeafe;color:#1d4ed8}.opa-badge.draft{background:#f3f4f6;color:#4b5563}.opa-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px}.opa-modal-box{background:#fff;max-width:1200px;width:100%;max-height:92vh;overflow:auto;border-radius:14px}.opa-modal-bar{position:sticky;top:0;background:#fff;padding:10px;display:flex;justify-content:flex-end;gap:8px;border-bottom:1px solid var(--line);z-index:2}.opa-preview{background:#bbb;padding:20px}.opa-doc{width:210mm;min-height:297mm;background:#fff;margin:auto;padding:12mm;box-sizing:border-box;position:relative;color:#111;font-size:11px}.opa-doc-header{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-bottom:6px solid var(--navy);padding-bottom:10px;position:relative}.opa-doc-header:after{content:"";position:absolute;bottom:-6px;left:43%;width:14%;height:6px;background:var(--yellow)}.opa-doc-logo img{max-width:300px;max-height:95px;object-fit:contain}.opa-doc-company{font-weight:700;margin-top:4px}.opa-contact{line-height:1.55}.opa-doc-title{font-size:30px;font-weight:900;color:var(--navy);margin:20px 0 12px}.opa-doc-box{border:1.5px solid var(--navy);border-radius:8px;padding:10px;margin:10px 0}.opa-doc-box-title{display:inline-block;background:var(--navy);color:#fff;padding:6px 12px;border-radius:7px 7px 0 0;font-weight:800;margin:-11px 0 8px -11px}.opa-doc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.opa-doc-table{width:100%;border-collapse:collapse}.opa-doc-table th{background:var(--navy);color:#fff}.opa-doc-table th,.opa-doc-table td{border:1px solid #8da0b8;padding:7px;vertical-align:top}.opa-doc-total{font-size:20px;font-weight:900;background:#fff4c7}.opa-bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.opa-qris img{max-width:230px;display:block;margin:auto}.opa-sign{display:flex;justify-content:flex-end;margin-top:15px}.opa-sign-inner{width:270px;text-align:center}.opa-sign-inner img{max-height:85px;max-width:210px}.opa-stamp{display:inline-block;border:4px double #d71920;color:#d71920;font-weight:900;font-size:28px;padding:8px 18px;transform:rotate(-5deg);margin-left:-35px}.opa-footer{position:absolute;left:12mm;right:12mm;bottom:8mm;border-top:2px solid var(--navy);padding-top:5px;display:flex;justify-content:space-between;font-size:8px}.opa-hidden{display:none!important}.opa-note{font-size:12px;color:#53657d}.opa-alert{padding:10px;border-radius:8px;background:#fee2e2;color:#991b1b;margin-bottom:10px}
@media(max-width:850px){.opa-grid,.opa-row,.opa-row.three,.opa-doc-two,.opa-bank-grid{grid-template-columns:1fr}.opa-doc{width:100%;min-height:auto}.opa-facilities{grid-template-columns:1fr}.opa-top{align-items:flex-start;flex-direction:column}.opa-table{font-size:12px}.opa-preview{padding:4px}}
@media print{body *{visibility:hidden!important}.opa-doc,.opa-doc *{visibility:visible!important}.opa-doc{position:absolute;left:0;top:0;width:210mm;min-height:297mm;margin:0;padding:12mm}.opa-modal-bar{display:none!important}.opa-preview{padding:0;background:#fff}.opa-modal{position:static;background:#fff;padding:0}.opa-modal-box{max-height:none;overflow:visible}.opa-footer{position:absolute}}
/* v1.1.0: preview uses fixed A4 pages and a dedicated print window */
.opa-preview{background:#c8cdd4;padding:20px;overflow:auto}
.opa-preview .opa-page{width:210mm;height:297mm;background:#fff;margin:0 auto 18px;padding:11mm 13mm 15mm;box-sizing:border-box;position:relative;overflow:hidden;box-shadow:0 3px 18px rgba(0,0,0,.2);font-family:Arial,Helvetica,sans-serif;color:#101827;font-size:11px}
.opa-preview .opa-page:last-child{margin-bottom:0}
.opa-preview .opa-doc-header{height:45mm;display:grid;grid-template-columns:1.05fr .95fr;gap:12mm;align-items:center;border-bottom:6px solid #0d1b3d;padding-bottom:10px;position:relative}
.opa-preview .opa-doc-header:after{content:"";position:absolute;left:43%;bottom:-6px;width:14%;height:6px;background:#f4b400}
.opa-preview .opa-doc-logo img{width:78mm;height:25mm;object-fit:contain;object-position:left center}
.opa-preview .opa-doc-company{font-size:14px;font-weight:800;margin-top:4px}.opa-preview .opa-doc-ahu{font-size:11px}
.opa-preview .opa-contact{border-left:1px solid #0d1b3d;padding-left:20px;font-size:11px;line-height:1.55}.opa-preview .opa-contact-row{display:grid;grid-template-columns:110px 1fr;gap:6px}
.opa-preview .opa-doc-title{font-size:31px;line-height:1;font-weight:900;color:#0d1b3d;margin:24px 0 12px}.opa-preview .opa-subtitle{font-size:13px;color:#0d1b3d;margin-top:-6px;margin-bottom:12px;font-weight:700}
.opa-preview .opa-doc-two{display:grid;grid-template-columns:1fr 1.25fr;gap:14px}.opa-preview .opa-doc-box{border:1px solid #0d1b3d;border-radius:8px;padding:12px;margin:10px 0;font-size:11px;line-height:1.45}
.opa-preview .opa-doc-box-title{display:inline-block;background:#0d1b3d;color:#fff;padding:6px 12px;border-radius:7px 7px 0 0;font-weight:800;margin:-13px 0 8px -13px}.opa-preview .doc-line{display:grid;grid-template-columns:128px 1fr;gap:8px;margin:4px 0}.opa-preview .doc-line span{font-weight:700;color:#20324f}.opa-preview .doc-line b{font-weight:500}.opa-preview .doc-line b.strong{font-weight:800}
.opa-preview .opa-doc-table{width:100%;border-collapse:collapse;font-size:10px}.opa-preview .opa-doc-table th{background:#0d1b3d;color:#fff}.opa-preview .opa-doc-table th,.opa-preview .opa-doc-table td{border:1px solid #8fa0b6;padding:6px;vertical-align:top}.opa-preview .opa-doc-total{font-size:15px;font-weight:900;background:#fff5cf}.opa-preview .money{text-align:right;white-space:nowrap}
.opa-preview .opa-facility-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}.opa-preview .opa-bank-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:14px}.opa-preview .opa-qris img{width:180px;height:180px;object-fit:contain;display:block;margin:auto}.opa-preview .bank-row{display:grid;grid-template-columns:95px 1fr;align-items:center;border-bottom:1px dashed #8292a8;padding:7px 0}.opa-preview .bank-name{font-size:16px;font-weight:900;color:#0d1b3d}.opa-preview .bank-no{font-size:16px;font-weight:900}
.opa-preview .opa-terms{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}.opa-preview .opa-signature-block{display:grid;grid-template-columns:1fr 235px;gap:24px;margin-top:12px}.opa-preview .opa-closing{font-size:11px;line-height:1.5}.opa-preview .opa-sign{text-align:center;font-size:11px}.opa-preview .opa-sign img{height:105px;max-width:195px;object-fit:contain;margin:-8px 0 -10px}.opa-preview .signature-wrap{position:relative}.opa-preview .opa-stamp{position:absolute;border:4px double #d71920;color:#d71920;font-weight:900;font-size:27px;padding:8px 20px;transform:rotate(-6deg);right:30px;top:75px;background:rgba(255,255,255,.65)}
.opa-preview .opa-footer{position:absolute;left:13mm;right:13mm;bottom:6mm;border-top:1.5px solid #0d1b3d;padding-top:6px;display:flex;justify-content:space-between;align-items:flex-end;font-size:9px;color:#0d1b3d}.opa-preview .receipt-amount{font-size:36px;font-weight:900;color:#0d1b3d;text-align:center;padding:16px;background:#fff5cf;border:1px solid #0d1b3d;border-radius:8px}.opa-preview .terbilang{font-size:12px;font-style:italic;font-weight:700;color:#0d1b3d;margin-top:8px}
@media(max-width:850px){.opa-preview{padding:8px 4px 24px}.opa-preview .opa-page{zoom:1;margin:0}.opa-preview .opa-doc-two,.opa-preview .opa-bank-grid{grid-template-columns:1fr 1.25fr}}


/* v1.1.2 — footer aman dan layout dokumen lebih padat */
.opa-preview .opa-page{padding-bottom:20mm}
.opa-preview .opa-footer{height:10mm;bottom:4mm;padding-top:1.8mm;background:#fff;z-index:30;line-height:1.25}
.opa-preview .opa-footer>div:last-child{white-space:nowrap;text-align:right}
.opa-preview .invoice-page .opa-doc-header,.opa-preview .receipt-page .opa-doc-header{height:38mm}
.opa-preview .invoice-page .opa-doc-title{font-size:28px;margin:18px 0 10px}
.opa-preview .invoice-page .opa-doc-box{margin:8px 0;padding:11px;font-size:10.5px;line-height:1.35}
.opa-preview .invoice-page .opa-doc-box-title{margin:-12px 0 7px -12px;padding:5px 11px}
.opa-preview .invoice-page .doc-line{margin:3px 0;grid-template-columns:117px 1fr}
.opa-preview .invoice-page .opa-doc-table th,.opa-preview .invoice-page .opa-doc-table td{padding:5px}
.opa-preview .invoice-page .opa-bank-grid{gap:13px}
.opa-preview .invoice-page .opa-qris img{width:132px;height:132px}
.opa-preview .invoice-page .bank-row{padding:5px 0}
.opa-preview .invoice-page .bank-name,.opa-preview .invoice-page .bank-no{font-size:14px}
.opa-preview .invoice-page .opa-terms{font-size:9.6px;gap:3px 18px}
.opa-preview .invoice-page .opa-signature-block{margin-top:7px;grid-template-columns:1fr 205px;gap:18px}
.opa-preview .invoice-page .opa-sign{font-size:10px}
.opa-preview .invoice-page .opa-sign img{height:76px;max-width:170px;margin:-4px 0 -7px}
.opa-preview .invoice-page .opa-closing{font-size:10px}
.opa-preview .receipt-page{padding-bottom:20mm}
.opa-preview .receipt-page .opa-doc-title{font-size:29px;margin:18px 0 10px}
.opa-preview .receipt-page .opa-doc-box{margin:8px 0;padding:11px}
.opa-preview .receipt-page .receipt-amount{font-size:31px;padding:13px}
.opa-preview .receipt-page .opa-signature-block{margin-top:7px}
.opa-preview .receipt-page .opa-sign img{height:87px}
.opa-btn:disabled{opacity:.65;cursor:wait}

/* v1.1.3: header teks dan QRIS ringan */
.opa-doc-header{height:36mm;grid-template-columns:1.08fr .92fr;gap:9mm;padding-bottom:3mm}
.opa-doc-brandtext{align-self:center;padding-left:1.8mm;border-left:1.5mm solid #f4b400}
.opa-doc-brandname{font-size:18pt;line-height:1.05;font-weight:900;letter-spacing:.15mm;color:#0d1b3d}
.opa-doc-tagline{font-size:7.6pt;font-weight:700;color:#0d1b3d;margin-top:1.5mm}
.opa-doc-ahu{font-size:7.4pt;margin-top:1.1mm}
.opa-contact{font-size:7.7pt;line-height:1.42;padding-left:5mm}
.opa-contact-row{grid-template-columns:27mm 1fr}
.invoice-page .opa-doc-header,.receipt-page .opa-doc-header,.quote-p2 .opa-doc-header{height:34mm}
.opa-qris img{width:31mm!important;height:31mm!important;image-rendering:auto}
.qris-label{text-align:center;font-size:6.4pt;line-height:1.25;margin-top:1mm;color:#0d1b3d}
.qris-label span{font-size:6pt}
.invoice-page .opa-bank-grid{align-items:stretch}
.invoice-page .opa-qris{display:flex;flex-direction:column;justify-content:center;align-items:center}
.opa-footer{font-size:6.2pt}
.opa-footer strong{font-size:6.7pt}
/* v1.2.0: ruang footer dan tanda tangan terkunci */
.opa-preview .invoice-page,.opa-preview .receipt-page{padding-bottom:24mm}
.opa-preview .invoice-page .opa-signature-block{margin-top:10px;align-items:start;grid-template-columns:1fr 220px}
.opa-preview .invoice-page .opa-sign{padding-bottom:8px;line-height:1.28}
.opa-preview .invoice-page .opa-sign img{height:66px;max-width:155px;margin:-2px 0 -4px}
.opa-preview .invoice-page .opa-sign-name{margin-top:2px;white-space:nowrap;font-size:9px}
.opa-preview .invoice-page .opa-footer{bottom:4mm;height:10mm;background:#fff;z-index:50}
.opa-preview .invoice-page .opa-closing{padding-top:5px}
.opa-preview .receipt-page .opa-footer{bottom:4mm;height:10mm;background:#fff;z-index:50}
.opa-preview .opa-doc-brandname{font-size:24px;line-height:1.02;letter-spacing:.2px}
.opa-preview .opa-doc-tagline{font-size:10px;margin-top:5px}
.opa-preview .opa-doc-ahu{font-size:9px;margin-top:5px}
.opa-pdf-stage .opa-page{margin:0!important;box-shadow:none!important}


/* v1.2.2: classic one-page receipt */
.receipt-classic{padding-bottom:22mm}.receipt-classic .opa-doc-header{height:34mm}.receipt-title-row{display:flex;justify-content:space-between;align-items:flex-end;margin:5mm 0 2.5mm}.receipt-title-row .opa-doc-title{margin:0;font-size:25pt}.receipt-subtitle{font-size:7.5pt;color:#52627a;margin-top:1mm}.receipt-number{border-collapse:collapse;font-size:8.3pt;min-width:75mm}.receipt-number th{text-align:left;color:#20324f;width:22mm}.receipt-number td{padding:.8mm 0}.receipt-number td:last-child{padding-left:2mm}.receipt-rule{border-top:.35mm solid #0d1b3d;margin:2mm 0 5mm}.receipt-details{width:100%;border-collapse:collapse;font-size:10pt;table-layout:fixed;margin-bottom:5mm}.receipt-details th{width:42mm;text-align:left;color:#20324f;padding:1.7mm 2mm;font-weight:700;vertical-align:top}.receipt-details .receipt-colon{width:5mm;text-align:center;padding:1.7mm 0;vertical-align:top}.receipt-details td:last-child{padding:1.7mm 2mm;vertical-align:top;line-height:1.35;word-break:normal;overflow-wrap:break-word}.receipt-payments{width:100%;border-collapse:collapse;font-size:8.4pt;margin:2mm 0 4mm;table-layout:fixed}.receipt-payments td{border-bottom:.2mm solid #c5ceda;padding:2mm 3mm}.receipt-payments td:nth-child(1){width:28%}.receipt-payments td:nth-child(2){width:20%}.receipt-payments td:nth-child(3){width:27%}.receipt-payments td:last-child{text-align:right;white-space:nowrap}.receipt-payments-total{background:#fff5cf;font-weight:900;font-size:10pt}.receipt-total-box{border:.45mm solid #0d1b3d;background:#fff5cf;border-radius:1.5mm;padding:4mm 5mm;display:flex;align-items:center;justify-content:space-between;color:#0d1b3d;margin:3mm 0 2.5mm}.receipt-total-box span{font-size:10pt;font-weight:800}.receipt-total-box strong{font-size:25pt;white-space:nowrap}.receipt-legal-note{text-align:center;font-size:8.3pt;margin:2mm 0 3mm}.receipt-bottom{display:grid;grid-template-columns:1fr 65mm;gap:10mm;align-items:start;margin-top:2mm;min-height:48mm}.receipt-bottom-note{font-size:7.8pt;color:#52627a;padding-top:3mm}.receipt-approval-classic{text-align:center;font-size:8pt;position:relative;min-height:47mm}.receipt-approval-classic>b{display:block;margin-top:1mm}.receipt-sign-area{height:27mm;position:relative;margin-top:-1mm}.receipt-sign-area img{height:25mm;max-width:47mm;object-fit:contain}.receipt-stamp{position:absolute;right:-2mm;top:8mm;border:1mm double #d71920;color:#d71920;background:rgba(255,255,255,.83);font-size:15pt;font-weight:900;padding:1.6mm 4.5mm;transform:rotate(-5deg)}.receipt-director{font-weight:800;text-decoration:underline;font-size:7.8pt;white-space:nowrap}.receipt-classic .opa-footer{bottom:4mm}



/* v1.2.4: header dan footer mengikuti referensi H&F.html */
.opa-preview .opa-page{padding-top:12mm;padding-left:12mm;padding-right:12mm}
.opa-preview .opa-doc-header,.opa-preview .invoice-page .opa-doc-header,.opa-preview .receipt-page .opa-doc-header,.opa-preview .quote-p2 .opa-doc-header{height:auto;min-height:31mm;display:grid;grid-template-columns:.9fr 1.1fr;gap:5.3mm;align-items:center;border-bottom:.8mm solid #0d1b3d;padding-bottom:3.2mm;position:relative}
.opa-preview .opa-doc-header:after{content:"";position:absolute;left:42%;bottom:-.8mm;width:15%;height:.8mm;background:#f4b400}
.opa-preview .opa-doc-brandtext{align-self:center;padding-left:3.2mm;border-left:1.3mm solid #f4b400}
.opa-preview .opa-doc-brandname{font-size:22px;line-height:1.1;font-weight:900;letter-spacing:0;color:#0d1b3d}
.opa-preview .opa-doc-tagline{font-size:11px;font-weight:700;color:#0d1b3d;margin-top:5px}
.opa-preview .opa-doc-ahu{font-size:10px;color:#666;margin-top:4px}
.opa-preview .opa-contact{font-size:11px;line-height:1.5;padding-left:15px;border-left:1px solid #ddd}
.opa-preview .opa-contact-row{display:grid;grid-template-columns:100px 1fr;gap:5px}
.opa-preview .opa-footer,.opa-preview .invoice-page .opa-footer,.opa-preview .receipt-page .opa-footer,.opa-preview .receipt-classic .opa-footer{position:absolute;left:12mm;right:12mm;bottom:12mm;height:auto;border-top:2px solid #0d1b3d;padding-top:10px;display:flex;justify-content:space-between;align-items:flex-end;font-size:11px;line-height:1.2;color:#0d1b3d;font-weight:bold;background:#fff;z-index:50}
.opa-preview .opa-footer>div:last-child{white-space:nowrap;text-align:right}


/* v1.2.5: preview mobile responsif tanpa mengubah layout A4/PDF */
.opa-modal-open{overflow:hidden!important}
.opa-preview{display:flex;flex-direction:column;align-items:stretch;gap:18px;scrollbar-gutter:stable both-edges}
.opa-page-frame{position:relative;width:100%;flex:0 0 auto;overflow:visible}
.opa-page-frame>.opa-page{position:absolute!important;top:0;left:50%;margin:0!important;transform-origin:top center!important;transform:translateX(-50%) scale(var(--woa-preview-scale,1))!important;will-change:transform}
.opa-preview-fit-note{display:none}
@media(max-width:850px){
  .opa-app{padding:10px}
  .opa-modal{padding:0;align-items:stretch;justify-content:stretch}
  .opa-modal-box{max-width:none;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
  .opa-modal-bar{position:relative;top:auto;flex:0 0 auto;justify-content:stretch;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;box-shadow:0 2px 9px rgba(13,43,91,.13)}
  .opa-modal-bar .opa-btn{flex:1;min-height:44px;padding:10px 9px;font-size:13px}
  .opa-preview{flex:1;min-height:0;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 4px calc(24px + env(safe-area-inset-bottom));gap:10px}
  .opa-page-frame>.opa-page{box-shadow:0 2px 10px rgba(0,0,0,.22)}
  .opa-preview-fit-note{display:block;position:sticky;top:0;z-index:1;align-self:center;background:rgba(13,43,91,.88);color:#fff;border-radius:999px;padding:5px 10px;font-size:11px;line-height:1.2;pointer-events:none;margin-bottom:-4px}
  .opa-card{padding:14px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .opa-table{display:block;min-width:620px;overflow-x:auto}
  .opa-brand img{max-width:160px}
  .opa-actions .opa-btn{min-height:40px}
}
@media(max-width:380px){
  .opa-modal-bar{gap:6px}
  .opa-modal-bar .opa-btn{font-size:12px;padding:9px 6px}
  .opa-preview{padding-left:2px;padding-right:2px}
  .opa-tab{padding:9px 10px;font-size:12px}
}
.opa-field input[data-money]{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.opa-badge.penawaran{background:#fff3cd;color:#7a5200}

.opa-field input[data-auto-total]{background:#eef3f8;color:#0d1b3d;border-style:dashed;cursor:not-allowed}.opa-auto-hint{display:block;margin-top:4px;color:#64748b;font-size:11px}

/* v1.3.0 — antarmuka mobile-first */
:root{--woa-navy:#082b61;--woa-navy-2:#031b3f;--woa-blue:#1667d9;--woa-gold:#f7b500;--woa-bg:#f5f7fb;--woa-card:#fff;--woa-text:#162238;--woa-muted:#6b778c;--woa-border:#e2e8f0;--woa-green:#0ca66c;--woa-red:#e64646;--woa-shadow:0 8px 28px rgba(8,43,97,.08)}
.opa-app{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--woa-bg);min-height:100vh;padding:0;color:var(--woa-text);line-height:1.45}
.opa-app *{box-sizing:border-box}
.opa-app button,.opa-app input,.opa-app select,.opa-app textarea{font:inherit}
.opa-app svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.opa-mobile-shell{width:100%;max-width:1240px;min-height:100vh;margin:0 auto;padding-bottom:94px;position:relative}
.opa-mobile-header{position:sticky;top:0;z-index:80;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;min-height:76px;padding:12px 14px;background:linear-gradient(135deg,var(--woa-navy-2),var(--woa-navy));color:#fff;box-shadow:0 5px 18px rgba(3,27,63,.18)}
.opa-mobile-heading{min-width:0}.opa-mobile-heading strong{display:block;font-size:21px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opa-mobile-heading small{display:block;margin-top:4px;color:#cbd8ec;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opa-icon-btn{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}.opa-icon-btn:active{transform:scale(.97)}
.opa-main-content{padding:18px 14px 28px;max-width:1160px;margin:0 auto}
.opa-bottom-nav{position:fixed;z-index:90;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,1240px);height:76px;padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(6,1fr);gap:4px;background:linear-gradient(135deg,var(--woa-navy-2),var(--woa-navy));box-shadow:0 -8px 28px rgba(3,27,63,.18)}
.opa-bottom-nav button{border:0;border-radius:13px;background:transparent;color:#dce6f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;cursor:pointer;min-width:0}.opa-bottom-nav button svg{width:22px;height:22px}.opa-bottom-nav button.active{background:linear-gradient(145deg,#174fa5,#0b3d87);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.opa-drawer-wrap{position:fixed;inset:0;z-index:110;pointer-events:none}.opa-drawer-wrap.open{pointer-events:auto}.opa-drawer-backdrop{position:absolute;inset:0;background:rgba(2,14,34,.48);opacity:0;transition:.2s}.opa-drawer{position:absolute;left:0;top:0;bottom:0;width:min(84vw,320px);padding:22px 14px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;background:linear-gradient(180deg,#062552,#031a3c);color:#fff;transform:translateX(-105%);transition:.24s ease;box-shadow:18px 0 40px rgba(0,0,0,.24)}
.opa-drawer-wrap.open .opa-drawer-backdrop{opacity:1}.opa-drawer-wrap.open .opa-drawer{transform:translateX(0)}
.opa-drawer-brand{padding:12px 12px 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px}.opa-drawer-brand strong{font-size:18px;line-height:1.25}.opa-drawer-brand small{display:block;color:#aebfda;margin-top:6px}
.opa-drawer-link{width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:11px;background:transparent;color:#e3ebf7;padding:12px 13px;text-align:left;cursor:pointer}.opa-drawer-link.active{background:#12458f;color:#fff}.opa-drawer-link.danger{color:#ffb8b8}.opa-drawer-spacer{flex:1}
.opa-page-head{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-bottom:16px}.opa-page-head.compact{margin-bottom:14px}.opa-page-head h1{font-size:24px;line-height:1.15;color:var(--woa-navy);margin:0}.opa-page-head p{margin:5px 0 0;color:var(--woa-muted);font-size:13px}
.opa-btn{min-height:42px;border:0;border-radius:11px;padding:10px 15px;font-weight:750;cursor:pointer;background:var(--woa-navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.15s}.opa-btn:hover{filter:brightness(1.04)}.opa-btn:active{transform:translateY(1px)}.opa-btn svg{width:18px;height:18px}.opa-btn.yellow{background:var(--woa-gold);color:#14213a}.opa-btn.light{background:#eaf0f8;color:var(--woa-navy)}.opa-btn.red{background:var(--woa-red)}.opa-primary-action{width:100%;background:linear-gradient(135deg,#0c397d,#052557);box-shadow:0 7px 18px rgba(8,43,97,.18)}
.opa-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}.opa-stat-card{display:flex;align-items:center;gap:10px;min-height:92px;padding:13px;border-radius:15px;background:#fff;border:1px solid var(--woa-border);box-shadow:var(--woa-shadow)}.opa-stat-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;background:#e8eef8;color:var(--woa-navy)}.opa-stat-card small{display:block;color:var(--woa-muted);font-size:11px}.opa-stat-card strong{display:block;color:var(--woa-text);font-size:24px;line-height:1.1;margin-top:3px}.opa-stat-card.amber .opa-stat-icon{background:#fff2c9;color:#b17600}.opa-stat-card.blue .opa-stat-icon{background:#e2efff;color:#1767d3}.opa-stat-card.green .opa-stat-icon{background:#dcf8eb;color:#078a59}.opa-stat-card.red .opa-stat-icon{background:#ffe6e6;color:#d73535}
.opa-section{margin-top:18px}.opa-section-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:10px}.opa-section-title h2{font-size:18px;color:var(--woa-navy);margin:0}.opa-section-title span{font-size:11px;color:var(--woa-muted)}
.opa-list-tools{display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:9px;margin-bottom:12px}.opa-search{height:48px;display:flex;align-items:center;gap:9px;padding:0 13px;background:#fff;border:1px solid var(--woa-border);border-radius:13px;box-shadow:0 3px 14px rgba(8,43,97,.04);color:#65758e}.opa-search svg{flex:0 0 20px}.opa-search input{min-width:0;width:100%;border:0!important;outline:0;background:transparent!important;padding:0!important;box-shadow:none!important;color:var(--woa-text)}.opa-list-tools select{width:100%;border:1px solid var(--woa-border);border-radius:13px;background:#fff;color:var(--woa-text);padding:0 10px}
.opa-mini-stats{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 10px;scrollbar-width:none}.opa-mini-stats::-webkit-scrollbar{display:none}.opa-mini-stats button{flex:0 0 auto;min-width:92px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--woa-border);border-radius:11px;background:#fff;color:#445269;padding:9px 11px;cursor:pointer}.opa-mini-stats button.active{background:var(--woa-navy);border-color:var(--woa-navy);color:#fff}.opa-mini-stats b{font-size:15px}
.opa-mobile-list{display:flex;flex-direction:column;gap:11px}.opa-doc-card{background:#fff;border:1px solid var(--woa-border);border-radius:16px;padding:15px;box-shadow:var(--woa-shadow)}.opa-doc-card[hidden]{display:none}.opa-doc-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.opa-doc-card-top>div{min-width:0}.opa-doc-card-top strong{display:block;color:#0b2450;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opa-doc-card-top small{display:block;color:#4e5b70;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opa-doc-card-activity{display:flex;align-items:flex-start;gap:8px;margin:13px 0;color:#334258}.opa-doc-card-activity svg{width:18px;height:18px;color:#42618d;flex:0 0 18px;margin-top:1px}.opa-doc-card-meta{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding-top:11px;border-top:1px dashed #dce3ed;font-size:12px;color:#68758a}.opa-doc-card-meta b{color:#15233a;font-size:13px;text-align:right}.opa-card-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:13px}.opa-card-actions:has(.duplicate){grid-template-columns:repeat(5,minmax(0,1fr))}.opa-card-actions button{min-width:0;min-height:54px;border:1px solid var(--woa-border);border-radius:11px;background:#f9fbfe;color:#173869;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;font-size:10px;cursor:pointer}.opa-card-actions button svg{width:18px;height:18px}.opa-card-actions button.danger{color:#dc3434}.opa-card-actions button:disabled{opacity:.5}
.opa-compact-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;background:#fff;border:1px solid var(--woa-border);border-radius:13px;box-shadow:0 3px 14px rgba(8,43,97,.05);cursor:pointer}.opa-compact-icon{width:42px;height:42px;border-radius:12px;background:#e8eef8;color:var(--woa-navy);display:grid;place-items:center}.opa-compact-card strong,.opa-compact-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opa-compact-card small{font-size:11px;color:var(--woa-muted);margin-top:3px}
.opa-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;background:#e8eef7;color:var(--woa-navy)}.opa-badge.draft{background:#fff0c6;color:#9a6500}.opa-badge.sent{background:#e3efff;color:#1760c2}.opa-badge.approved,.opa-badge.lunas{background:#dff8eb;color:#087a50}.opa-badge.expired,.opa-badge.jatuh_tempo,.opa-badge.dibatalkan{background:#ffe5e5;color:#c52e2e}.opa-badge.belum_dibayar{background:#fff0c6;color:#9a6500}.opa-badge.dibayar_sebagian{background:#e9e5ff;color:#5b3fc0}
.opa-subtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;background:#e5eaf2;border-radius:13px;margin-bottom:12px}.opa-subtabs button{border:0;border-radius:9px;background:transparent;color:#536176;padding:10px 5px;font-size:12px;font-weight:750;cursor:pointer}.opa-subtabs button.active{background:#fff;color:var(--woa-navy);box-shadow:0 3px 10px rgba(8,43,97,.08)}
.opa-client-search{margin-bottom:12px}.opa-client-grid{display:flex;flex-direction:column;gap:10px}.opa-client-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;background:#fff;border:1px solid var(--woa-border);border-radius:15px;box-shadow:var(--woa-shadow)}.opa-client-card[hidden]{display:none}.opa-client-avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#0d4b9c,#06295d);color:#fff;font-size:18px;font-weight:850}.opa-client-info{min-width:0}.opa-client-info strong,.opa-client-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opa-client-info small{font-size:11px;color:var(--woa-muted);margin-top:2px}.opa-client-info>div{display:flex;gap:10px;align-items:center;margin-top:7px;font-size:11px}.opa-client-info>div span{color:#607087}.opa-client-info>div b{color:var(--woa-navy)}.opa-client-actions{display:flex;gap:5px}.opa-client-actions button,.opa-client-actions a{width:34px;height:34px;border:1px solid var(--woa-border);border-radius:9px;background:#f7faff;color:var(--woa-navy);display:grid;place-items:center;cursor:pointer}.opa-client-actions svg{width:16px;height:16px}
.opa-empty{padding:30px 16px;border:1px dashed #c9d3e2;border-radius:14px;background:rgba(255,255,255,.7);text-align:center;color:var(--woa-muted)}
.opa-card{background:#fff;border:1px solid var(--woa-border);border-radius:15px;padding:15px;box-shadow:var(--woa-shadow);margin-bottom:12px;overflow:visible}.opa-card h2,.opa-card h3{color:var(--woa-navy);margin:0 0 14px}.opa-card h3{font-size:17px}.opa-grid{display:grid;grid-template-columns:1fr;gap:0}.opa-row,.opa-row.three{display:grid;grid-template-columns:1fr;gap:0}.opa-field{margin-bottom:13px}.opa-field label{display:block;font-weight:750;font-size:12px;margin-bottom:6px;color:#32445f}.opa-field input,.opa-field select,.opa-field textarea{width:100%;min-height:45px;padding:10px 11px;border:1px solid #cdd7e5;border-radius:10px;background:#fff;color:#17233a;outline:none}.opa-field input:focus,.opa-field select:focus,.opa-field textarea:focus{border-color:#2d65af;box-shadow:0 0 0 3px rgba(45,101,175,.11)}.opa-field textarea{min-height:86px;resize:vertical}.opa-items{display:flex;flex-direction:column;gap:12px}.opa-item{border:1px solid #dbe3ee;border-radius:13px;padding:13px;background:#f9fbfe}.opa-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.opa-facilities{display:grid;grid-template-columns:1fr;gap:6px}.opa-check{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:9px;background:#f7f9fc;font-size:12px}.opa-check input{margin-top:2px}.opa-summary{background:#fff7d9;border:1px solid #efce65;border-radius:11px;padding:13px}.opa-summary-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0}.opa-summary-line.total{font-size:18px;font-weight:850;border-top:2px solid var(--woa-navy);margin-top:5px;padding-top:10px}.opa-form-top{display:flex;align-items:center;gap:12px;margin-bottom:15px}.opa-form-top h2{margin:0;color:var(--woa-navy);font-size:21px}.opa-form-top small{display:block;color:var(--woa-muted);margin-top:3px}.opa-back-btn{width:42px;height:42px;border:1px solid var(--woa-border);border-radius:12px;background:#fff;color:var(--woa-navy);font-size:28px;line-height:1;cursor:pointer}.opa-form-actions,.opa-settings-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}.opa-field input[data-auto-total]{background:#edf2f8}.opa-auto-hint{display:block;margin-top:4px;color:#6d7a8c;font-size:10px}
.opa-login-modern{max-width:420px;margin:10vh auto;padding:28px 22px;border:1px solid var(--woa-border);border-radius:20px;background:#fff;box-shadow:0 20px 55px rgba(8,43,97,.15);text-align:center}.opa-login-mark{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin:0 auto 15px;background:linear-gradient(145deg,#0d4eaa,#04275c);color:#fff;font-size:21px;font-weight:900;box-shadow:0 10px 25px rgba(8,43,97,.24)}.opa-login-modern h2{margin:0;color:var(--woa-navy)}.opa-login-modern p{color:var(--woa-muted);margin:7px 0 22px}.opa-login-label{display:block;text-align:left;font-size:12px;font-weight:750;margin:0 auto 7px;max-width:220px}.opa-login-modern .opa-pin{display:block;width:220px;max-width:100%;height:58px;margin:0 auto 13px;border:2px solid #b8c5d8;border-radius:13px;font-size:27px;letter-spacing:11px;padding-left:20px}.opa-login-btn{width:220px;max-width:100%;margin-bottom:12px}.opa-alert{margin-top:10px}
.opa-settings-actions{position:sticky;bottom:84px;padding:10px;background:rgba(245,247,251,.94);backdrop-filter:blur(8px);border-radius:13px;z-index:10}
@media(min-width:640px){.opa-main-content{padding:24px 22px 34px}.opa-page-head{flex-direction:row;align-items:center;justify-content:space-between}.opa-primary-action{width:auto}.opa-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.opa-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.opa-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}.opa-field-wide{grid-column:1/-1}.opa-facilities{grid-template-columns:repeat(2,minmax(0,1fr))}.opa-form-actions,.opa-settings-actions{grid-template-columns:repeat(3,max-content);justify-content:flex-start}.opa-card-actions button{font-size:11px}.opa-client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.opa-mobile-shell{padding-bottom:102px}.opa-mobile-header{border-radius:0 0 18px 18px;padding-left:24px;padding-right:24px}.opa-stat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.opa-stat-card{min-height:102px;flex-direction:column;align-items:flex-start}.opa-grid{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px}.opa-sticky-card{position:sticky;top:94px}.opa-doc-card{padding:17px 19px}.opa-doc-card-top strong{font-size:17px}.opa-card-actions{max-width:560px;margin-left:auto}.opa-client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.opa-settings-actions{bottom:92px}}
@media(max-width:430px){.opa-list-tools{grid-template-columns:minmax(0,1fr) 112px}.opa-card-actions:has(.duplicate){grid-template-columns:repeat(5,minmax(46px,1fr));overflow-x:auto}.opa-card-actions button span{font-size:9px}.opa-doc-card-meta{grid-template-columns:1fr auto}.opa-doc-card-meta b{grid-column:1/-1;text-align:left;font-size:14px}.opa-mobile-heading strong{font-size:19px}.opa-bottom-nav button span{font-size:9px}}

/* v1.3.2 — quotation & PDF settings */
.opa-excluded-check{position:relative;padding-right:40px}.opa-excluded-check span{flex:1}.opa-excluded-check .removeExcluded{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:8px;background:#fee2e2;color:#b91c1c;font-size:18px;line-height:1;cursor:pointer}
.opa-signature-setting{margin-top:16px;padding:14px;border:1px solid var(--woa-border);border-radius:13px;background:#f8fafc;display:grid;grid-template-columns:1fr;gap:12px;align-items:end}.opa-signature-setting label{display:block;font-weight:750;font-size:12px;color:#32445f;margin-bottom:6px}.opa-signature-setting input[type=file]{width:100%;padding:9px;border:1px solid #cdd7e5;border-radius:10px;background:#fff}.opa-signature-setting small{display:block;margin-top:5px;color:var(--woa-muted);font-size:11px}.opa-signature-preview{min-height:82px;border:1px dashed #c8d2e0;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;color:var(--woa-muted);font-size:12px}.opa-signature-preview img{max-width:190px;max-height:75px;object-fit:contain}
.opa-package-discount{display:inline-block;margin-top:2px;color:#a11212;font-weight:700}
.opa-invoice-signature{display:flex;justify-content:flex-end;margin-top:2mm}.opa-invoice-signature .opa-sign{width:54mm;text-align:center;font-size:7.8pt}.opa-invoice-signature .opa-sign img{height:20mm;max-width:45mm;object-fit:contain;margin:-1mm 0 -2mm}
@media(min-width:640px){.opa-signature-setting{grid-template-columns:minmax(0,1.4fr) minmax(200px,.8fr) auto}.opa-signature-setting .opa-btn{align-self:center}}
/* Ringkasan harga quotation tidak lagi mengikuti scroll pada desktop. */
@media(min-width:900px){#docForm .opa-sticky-card{position:static;top:auto}}
.opa-excluded-label{display:flex;align-items:flex-start;gap:8px;flex:1;cursor:pointer}.opa-excluded-label input{margin-top:2px}


/* v1.4.0 — Kalkulator Laba Rugi */
.opa-calc-layout{display:grid;grid-template-columns:1fr;gap:14px}.opa-calc-sale-grid,.opa-calc-adjust-grid{display:grid;grid-template-columns:1fr;gap:12px}.opa-calc-sale-grid label,.opa-calc-hpp-row label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:750;color:#32445f}.opa-calc-sale-grid input,.opa-calc-sale-grid select,.opa-calc-adjust input,.opa-calc-adjust select,.opa-calc-hpp-row input{width:100%;box-sizing:border-box;min-height:43px;border:1px solid #cdd7e5;border-radius:10px;padding:9px 10px;background:#fff;color:#17233a}.opa-calc-wide{grid-column:1/-1}.opa-calc-formula{margin-top:10px;padding:10px 12px;border-radius:10px;background:#eef4fb;color:#24466f;font-size:12px;font-weight:700}.opa-calc-adjust{padding:13px;border:1px solid #dbe3ee;border-radius:12px;background:#f9fbfe}.opa-calc-adjust strong{display:block;margin-bottom:9px;color:var(--woa-navy)}.opa-calc-adjust select{margin-bottom:8px}.opa-calc-adjust small{display:block;margin-top:6px;color:#6d7a8c;font-size:10px}.opa-calc-card-head{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.opa-calc-card-head h3{margin-bottom:4px}.opa-calc-card-head p{margin:0;color:#68768a;font-size:12px}.opa-calc-hpp-list{display:flex;flex-direction:column;gap:9px}.opa-calc-hpp-row{display:grid;grid-template-columns:62px minmax(150px,1.2fr) minmax(120px,.8fr) 86px minmax(120px,.75fr) 34px;gap:8px;align-items:end;padding:10px;border:1px solid #dbe3ee;border-radius:12px;background:#fbfdff}.opa-calc-active{align-self:center;display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important}.opa-calc-active input{width:16px!important;min-height:auto!important}.opa-calc-component{align-self:end}.opa-calc-component input[readonly]{background:#f0f4f8;font-weight:800;color:#17355d}.opa-calc-optional{display:inline-block;margin-top:4px;padding:3px 7px;border-radius:999px;background:#fff2cc;color:#8a6100;font-size:9px;font-weight:800}.opa-calc-row-total{min-height:43px;display:flex;flex-direction:column;justify-content:center;padding:7px 9px;border-radius:9px;background:#eef4fb}.opa-calc-row-total span{font-size:10px;color:#68768a}.opa-calc-row-total b{font-size:12px;color:var(--woa-navy);white-space:nowrap}.opa-calc-remove{width:34px;height:34px;border:0;border-radius:9px;background:#fee2e2;color:#b91c1c;font-size:20px;cursor:pointer}.opa-calc-remove-placeholder{width:34px}.opa-calc-summary-card{position:sticky;top:94px}.opa-calc-summary-line{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #e7edf5}.opa-calc-summary-line span{color:#526176}.opa-calc-summary-line b{color:#17355d;text-align:right}.opa-calc-summary-line.discount b{color:#b42318}.opa-calc-summary-line.net{padding-top:13px;font-weight:800}.opa-calc-summary-line.profit{margin-top:8px;padding:14px 12px;border:0;border-radius:11px;background:#e7f7ed}.opa-calc-summary-line.profit span,.opa-calc-summary-line.profit b{color:#087a50;font-size:17px;font-weight:900}.opa-calc-summary-line.profit.loss{background:#fee7e7}.opa-calc-summary-line.profit.loss span,.opa-calc-summary-line.profit.loss b{color:#b42318}.opa-calc-summary-line.margin{border-bottom:0;font-weight:850}.opa-calc-note{margin-top:12px;padding:10px;border-radius:10px;background:#f6f8fb;color:#667085;font-size:10px;line-height:1.5}
@media(min-width:640px){.opa-calc-sale-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.opa-calc-adjust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.opa-calc-card-head{flex-direction:row;align-items:center;justify-content:space-between}}
@media(min-width:900px){.opa-calc-layout{grid-template-columns:minmax(0,1.55fr) minmax(310px,.65fr)}}
@media(max-width:760px){.opa-calc-hpp-row{grid-template-columns:52px minmax(0,1fr) 84px}.opa-calc-component{grid-column:2/4}.opa-calc-hpp-row label:has([data-hpp-price]){grid-column:1/3}.opa-calc-hpp-row label:has([data-hpp-qty]){grid-column:3}.opa-calc-row-total{grid-column:1/3}.opa-calc-remove,.opa-calc-remove-placeholder{grid-column:3;align-self:center;justify-self:end}}
@media(max-width:430px){.opa-bottom-nav{gap:1px}.opa-bottom-nav button{font-size:9px}.opa-bottom-nav button svg{width:20px;height:20px}.opa-bottom-nav button span{font-size:8px}}