:root{--ink:#17202b;--muted:#667085;--line:#e6e9ee;--soft:#f6f7f9;--paper:#fff;--accent:#111827;--gold:#b8965a}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#f4f5f7;color:var(--ink)}.top{height:66px;background:#111318;color:#fff;padding:0 26px;display:flex;align-items:center;justify-content:space-between;letter-spacing:.2px}.top b{font-size:16px}.top small{font-weight:400;color:#aeb5c0}.wrap{display:flex;min-height:calc(100vh - 66px)}.side{width:238px;background:#fff;padding:18px 12px;border-right:1px solid var(--line)}.side a{display:block;padding:11px 14px;color:#475467;text-decoration:none;border-radius:9px;margin:3px 0;font-size:14px}.side a:hover{background:#f2f4f7;color:#101828}.main{flex:1;padding:28px;max-width:1500px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;box-shadow:0 1px 3px #1018280d}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px}.grid .card small{color:var(--muted);font-weight:600}.big{font-size:25px;font-weight:750;margin-top:8px}.btn{display:inline-block;background:#15171c;color:#fff;padding:10px 15px;border-radius:8px;text-decoration:none;border:1px solid #15171c;cursor:pointer;font-weight:650;font-size:14px}.btn2{background:#fff;color:#15171c;border-color:#d0d5dd}.danger{background:#b42318;border-color:#b42318}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:11px 10px;border-bottom:1px solid #eaecf0;text-align:left;font-size:14px}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#667085;background:#fafafa}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #d0d5dd;border-radius:8px;margin:4px 0 12px;background:#fff}label{font-weight:650;font-size:14px}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.badge{padding:4px 9px;border-radius:20px;background:#f2f4f7;font-size:12px}.green{background:#dcfae6}.orange{background:#fef0c7}.red{background:#fee4e2}.doc-actions{max-width:210mm;margin:0 auto 12px}.document{width:min(210mm,100%);min-height:270mm;margin:0 auto;background:#fff;border:1px solid #e4e7ec;border-radius:2px;padding:18mm 16mm 16mm;box-shadow:0 10px 35px #10182812}.doc-head{display:flex;justify-content:space-between;gap:25px;align-items:flex-start;border-bottom:2px solid #1d2939;padding-bottom:14px;margin-bottom:22px}.brand-title{font-size:29px;line-height:1;font-weight:900;letter-spacing:1.5px}.brand-sub{margin-top:5px;font-size:11px;letter-spacing:3.2px;text-transform:uppercase;color:#667085}.doc-kind{text-align:right}.doc-kind h1{margin:0;font-size:27px;letter-spacing:2px}.doc-kind .doc-no{font-size:12px;color:#667085;margin-top:7px}.doc-meta{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;margin:20px 0 22px;font-size:13px}.doc-meta .label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#98a2b3;font-weight:700;margin-bottom:5px}.doc-meta .right{text-align:right}.doc-table{border:1px solid #d0d5dd}.doc-table th{background:#1f2937;color:#fff;border:0;padding:9px 8px}.doc-table td{border-bottom:1px solid #e4e7ec;padding:10px 8px}.doc-table tr:last-child td{border-bottom:0}.money{text-align:right;white-space:nowrap}.doc-summary{margin-left:auto;width:min(340px,100%);margin-top:17px}.sum-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}.sum-row.total{border-top:2px solid #1f2937;margin-top:4px;padding-top:10px;font-size:16px;font-weight:800}.sum-row.due{font-weight:800}.doc-note{margin-top:28px;border-top:1px solid #d0d5dd;padding-top:16px;font-size:12px;line-height:1.7}.doc-note strong{color:#101828}.doc-sign{display:flex;justify-content:flex-end;margin-top:36px}.signature{text-align:center;min-width:170px;font-size:12px}.signature-space{height:55px}.signature-name{font-weight:800;border-top:1px solid #344054;padding-top:5px}.doc-footer{margin-top:34px;padding-top:9px;border-top:1px solid #eaecf0;color:#98a2b3;font-size:9px;text-align:center;letter-spacing:.03em}@media(max-width:800px){.side{width:72px}.side span{display:none}.main{padding:12px}.row,.doc-meta{grid-template-columns:1fr}.document{padding:22px 16px;min-height:auto}.doc-head{gap:12px}.brand-title{font-size:21px}.doc-kind h1{font-size:21px}.doc-meta .right{text-align:left}}@media print{@page{size:A4;margin:0}.top,.side,.no-print{display:none!important}body{background:#fff}.wrap{display:block}.main{padding:0;max-width:none}.document{width:210mm;min-height:297mm;border:0;box-shadow:none;margin:0;padding:16mm 15mm;border-radius:0}.doc-table th{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#1f2937!important;color:#fff!important}}

.page-title{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.page-title h1{margin:0 0 5px}.page-title p,.muted{margin:0;color:#667085}.quote-item{display:grid;grid-template-columns:2fr 1fr;gap:18px;padding:18px;border:1px solid #e4e7ec;border-radius:12px;margin:12px 0;background:#fcfcfd}.quote-item textarea{resize:vertical}.doc-table{table-layout:fixed;border-collapse:collapse}.doc-table th,.doc-table td{border-right:1px solid #d0d5dd;vertical-align:top}.doc-table th:last-child,.doc-table td:last-child{border-right:0}.doc-table .no-col{width:38px}.doc-table .price-col{width:112px}.doc-table .qty-col{width:54px}.doc-table .unit-col{width:70px}.doc-table .total-col{width:112px}.center{text-align:center}.work-cell{overflow-wrap:anywhere}.item-desc{color:#667085;font-size:12px;line-height:1.5;margin-top:4px}.quote-photo{display:block;max-width:220px;max-height:145px;object-fit:contain;margin-top:10px;border:1px solid #e4e7ec;border-radius:6px;padding:3px}.doc-logo{max-width:210px;max-height:72px;object-fit:contain}.signature-art{height:70px;position:relative;display:flex;align-items:center;justify-content:center}.stamp-img{max-width:92px;max-height:68px;object-fit:contain;opacity:.82}.sign-img{position:absolute;max-width:110px;max-height:60px;object-fit:contain}.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.setting-preview{max-width:150px;max-height:75px;object-fit:contain;border:1px solid #eaecf0;border-radius:8px;padding:6px;margin:6px 0}.info-box{background:#f8fafc;border:1px solid #e4e7ec;padding:12px;border-radius:9px;font-size:13px;line-height:1.6}.finance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.metric{background:#fff;border:1px solid #e4e7ec;border-radius:14px;padding:18px;box-shadow:0 1px 3px #1018280d}.metric span{display:block;color:#667085;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.metric strong{display:block;font-size:23px;margin-top:8px}.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.filter-bar{display:flex;gap:8px;align-items:end;margin-bottom:14px}.filter-bar input,.filter-bar select{margin:0;max-width:190px}.table-wrap{overflow-x:auto}.cash-badge{display:inline-block;font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px}.cash-in{background:#dcfae6;color:#067647}.cash-out{background:#fee4e2;color:#b42318}.text-danger{color:#b42318;text-decoration:none;font-size:12px}@media(max-width:1000px){.settings-grid,.finance-grid{grid-template-columns:repeat(2,1fr)}.form-grid-3{grid-template-columns:1fr 1fr}}@media(max-width:700px){.page-title{align-items:flex-start;flex-direction:column}.quote-item,.settings-grid,.finance-grid,.form-grid-3{grid-template-columns:1fr}.filter-bar{flex-wrap:wrap}.doc-table{font-size:10px}.doc-table th,.doc-table td{padding:6px 4px}.doc-table .price-col,.doc-table .total-col{width:90px}.quote-photo{max-width:150px}}@media print{.quote-photo{max-width:190px;max-height:120px}.stamp-img,.sign-img,.doc-logo{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* RUANG PROJECT blue-gold document identity */
:root{--rp-blue:#0f4c81;--rp-blue2:#17659f;--rp-gold:#c58b32;--rp-gold-light:#e5c36d}
.top{background:linear-gradient(90deg,#0c3358,#0f4c81)}
.panel-brand{display:flex;align-items:center;gap:10px}.panel-logo{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}.side a.active{background:#fff7e8;color:#8b5d13;font-weight:800;border-left:3px solid var(--rp-gold)}
.document{position:relative;overflow:hidden}.document:before,.document:after{content:"";position:absolute;width:180px;height:32px;background:linear-gradient(90deg,var(--rp-blue),var(--rp-gold-light));transform:rotate(-38deg);z-index:0}.document:before{left:-72px;top:18px}.document:after{right:-72px;bottom:24px}.document>*{position:relative;z-index:1}
.doc-head{border-bottom:3px solid var(--rp-blue);align-items:center}.doc-logo{max-width:285px;max-height:95px}.doc-kind h1{color:#111;font-size:31px}.doc-kind .doc-no{color:#555;font-weight:700}.doc-meta{margin-top:28px}.doc-meta .label{color:#8a6b32}.doc-table{border:1.3px solid #222}.doc-table th{background:var(--rp-gold)!important;color:#111!important;text-transform:none;font-size:13px;letter-spacing:0;border-right:1px solid #222!important;text-align:center}.doc-table td{border-right:1px solid #222!important;border-bottom:1px solid #222!important;vertical-align:middle}.doc-table td.work-cell,.doc-table td:nth-child(2){vertical-align:top}.doc-table th:last-child,.doc-table td:last-child{border-right:0!important}.doc-summary{margin-top:0;border:1px solid #222;border-top:0}.sum-row{padding:9px 12px}.sum-row.total{border-top:0;font-size:15px}.doc-note{border-top:0;margin-top:36px}.doc-sign{justify-content:flex-start;margin-top:62px}.signature{min-width:190px}.signature-name{border-top:0;padding-top:2px;font-size:14px}.signature-art{height:74px}.stamp-img{max-width:125px;max-height:72px;opacity:1}.doc-footer{border-top:0;color:#8a6b32}.quote-photo{max-width:240px;max-height:160px;border:0;padding:0;border-radius:2px}.item-desc{color:#333}.rp-contact{font-size:10px;line-height:1.5;color:#555;margin-top:5px}.rp-contact span{margin-right:12px}.doc-table .qty-combined{width:86px;text-align:center}
@media print{.document:before,.document:after,.doc-table th{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.doc-actions{display:none!important}}
/* FINAL document layout fix — based on RUANG PROJECT blue/gold invoice reference */
.document{overflow:hidden;padding:16mm 14mm 15mm;background:#fff}
.document:before{width:150px;height:24px;left:-58px;top:13px;transform:rotate(-38deg)}
.document:after{width:150px;height:24px;right:-58px;bottom:17px;transform:rotate(-38deg)}
.doc-head{min-height:34mm;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:2px solid var(--rp-blue);padding:0 0 9px;margin:0 0 18px;gap:20px}
.brand-block{width:58%;min-width:0}
.doc-logo{display:block;width:auto!important;height:auto!important;max-width:270px!important;max-height:74px!important;object-fit:contain!important;object-position:left top!important;margin:0 0 5px!important}
.rp-contact{font-size:9.5px;line-height:1.55;color:#4b5563;margin-top:4px;overflow-wrap:anywhere}
.rp-contact span{margin-right:10px}
.doc-kind{width:40%;text-align:right;padding-top:5px}
.doc-kind h1{font-size:29px;line-height:1;margin:0 0 8px;letter-spacing:1.5px;color:#111827}
.doc-kind .doc-no{font-size:12px;color:#344054;font-weight:700}
.doc-meta{grid-template-columns:1fr 1fr;margin:19px 0 20px;gap:30px;min-height:56px;font-size:12px}
.doc-meta .label{font-size:9px;color:#8b6a2d;letter-spacing:.11em}
.doc-table{table-layout:fixed;width:100%;border:1px solid #202020}
.doc-table th{background:#c58b32!important;color:#111!important;font-size:11px;padding:8px 6px;border:1px solid #202020!important}
.doc-table td{font-size:11px;line-height:1.4;padding:9px 7px;border:1px solid #202020!important;vertical-align:middle}
.doc-table .no-col{width:42px}.doc-table .price-col{width:112px}.doc-table .qty-combined{width:76px}.doc-table .total-col{width:112px}
.work-cell{vertical-align:top!important}.item-desc{font-size:10.5px;line-height:1.45;margin-top:3px;color:#333}
.quote-photo{display:block;width:auto;height:auto;max-width:190px;max-height:125px;object-fit:contain;margin:8px 0 1px;border:0;padding:0}
.doc-summary{width:51%;margin:0 0 0 auto;border:1px solid #202020;border-top:0}
.sum-row.total{font-size:13px;padding:9px 11px;margin:0;border:0}
.doc-note{margin-top:35px;padding:0;border:0;font-size:10.5px;line-height:1.55;min-height:55px}
.doc-sign{justify-content:flex-start;margin-top:34px;min-height:100px}
.signature{min-width:155px;text-align:center;font-size:10px}
.signature-art{height:55px;margin:2px 0;position:relative;display:flex;align-items:center;justify-content:center}
.stamp-img{display:block!important;width:auto!important;height:auto!important;max-width:92px!important;max-height:50px!important;object-fit:contain!important;opacity:1!important}
.sign-img{position:absolute;width:auto!important;height:auto!important;max-width:92px!important;max-height:48px!important;object-fit:contain!important}
.signature-name{font-size:12px;font-weight:800;border:0;padding:0;margin-top:0}.doc-footer{font-size:8px;margin-top:12px}
@media print{.document{padding:16mm 14mm 14mm}.doc-logo{max-width:270px!important;max-height:74px!important}.stamp-img{max-width:92px!important;max-height:50px!important}.quote-photo{max-width:190px!important;max-height:125px!important}}
/* Payment + shipping upgrade */
.payment-summary{width:48%;margin:0 0 0 auto;border:1px solid #202020;border-top:0;background:#fff}.payment-summary>div{display:flex;justify-content:space-between;gap:18px;padding:8px 11px;font-size:11px;border-bottom:1px solid #e5e7eb}.payment-summary>div:last-child{border-bottom:0}.payment-summary strong{white-space:nowrap}.payment-summary .balance{background:#fff8e9;font-size:12px}.doc-note ul{margin:5px 0 0;padding-left:17px}.doc-note li{margin:3px 0}.paid-stamp{position:absolute;right:17mm;top:52mm;z-index:4;border:4px double #16803a;color:#16803a;font-size:28px;font-weight:900;letter-spacing:2px;padding:8px 13px;transform:rotate(-9deg);opacity:.72;border-radius:7px;text-align:center}.paid-stamp small{display:block;font-size:7px;letter-spacing:0;margin-top:2px}.paid-admin{margin-top:18px;padding:12px;border-radius:9px;background:#dcfae6;color:#067647;font-weight:800}.shipping-label{background:#fff;border:1px solid #ddd;margin:0 auto;padding:9mm;color:#111;box-shadow:0 5px 25px #00000012}.shipping-label.size-100x150{width:100mm;min-height:150mm}.shipping-label.size-100x100{width:100mm;min-height:100mm}.shipping-label.size-A5{width:148mm;min-height:210mm}.ship-brand{display:flex;gap:8px;align-items:center;border-bottom:2px solid #111;padding-bottom:7px}.ship-brand img{width:48px;height:34px;object-fit:contain}.ship-brand b{font-size:17px}.ship-brand small,.shipping-label small{display:block;font-size:8px;letter-spacing:.08em;color:#666}.ship-from{font-size:9px;line-height:1.45;margin-top:7px}.ship-divider{border-top:2px dashed #111;margin:10px 0}.shipping-label h2{font-size:22px;line-height:1.05;margin:3px 0}.ship-phone{font-size:14px;font-weight:800}.ship-address{font-size:12px;line-height:1.45;margin-top:5px}.ship-grid{display:grid;grid-template-columns:2fr .7fr .8fr;gap:5px;margin-top:12px}.ship-grid>div{border:1px solid #111;padding:6px}.ship-grid b{display:block;font-size:11px;margin-top:2px}.ship-track{border:2px solid #111;margin-top:10px;padding:7px;display:flex;justify-content:space-between;gap:8px}.ship-track span{font-weight:800}.ship-track strong{font-size:11px}.ship-note{margin-top:8px;font-size:9px;border-top:1px solid #aaa;padding-top:6px}@media print{.invoice-document{min-height:auto!important}.invoice-document .doc-sign{break-inside:avoid;page-break-inside:avoid}.invoice-document .doc-note{break-inside:avoid;page-break-inside:avoid}.doc-table thead{display:table-header-group}.doc-table tr{break-inside:avoid;page-break-inside:avoid}.paid-stamp{-webkit-print-color-adjust:exact;print-color-adjust:exact}.shipping-label{border:0;box-shadow:none;margin:0;padding:7mm}.shipping-label.size-100x150{width:100mm;min-height:150mm}.shipping-label.size-100x100{width:100mm;min-height:100mm}.shipping-label.size-A5{width:148mm;min-height:210mm}body:has(.shipping-label) .main{padding:0}@page{margin:0}}
.attachment-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.attachment-card{display:flex;flex-direction:column;min-width:150px;padding:12px;border:1px solid #ddd;border-radius:8px;text-decoration:none;background:#fafafa}.attachment-card small{margin-top:4px;color:#777;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}