:root{--blue:#0759ee;--navy:#020d2f;--line:#4d86f8;--paper:#fff;--bg:#edf2f9;--muted:#62708a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--navy);font-family:Arial,Helvetica,sans-serif}.app-shell{display:grid;grid-template-columns:390px minmax(800px,1fr);min-height:100vh}.editor{background:#fff;border-right:1px solid #dfe6f0;padding:24px;overflow:auto;height:100vh;position:sticky;top:0}.editor-head,.section-title{display:flex;align-items:center;justify-content:space-between}.editor-head h1{margin:3px 0 0;font-size:26px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--blue)}.saved{font-size:11px;color:#16834a;background:#e9f8ef;padding:6px 9px;border-radius:99px}.form-section{padding:20px 0;border-bottom:1px solid #e7ebf1}.form-section h2{font-size:14px;margin:0 0 14px}.field{display:flex;flex-direction:column;gap:6px;margin-top:11px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{font-size:11px;font-weight:700;color:#536078}input,textarea{width:100%;border:1px solid #ccd5e2;border-radius:8px;padding:10px 11px;font:inherit;font-size:13px;color:var(--navy);background:#fbfcfe}input:focus,textarea:focus{outline:2px solid #b8d0ff;border-color:var(--blue)}textarea{resize:vertical}.small-btn,.remove-btn{border:0;background:#eaf1ff;color:var(--blue);border-radius:7px;padding:7px 10px;font-size:11px;font-weight:700;cursor:pointer}.item-card{border:1px solid #dfe5ee;border-radius:10px;padding:11px;margin-top:10px;background:#fafcff}.item-card-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800}.remove-btn{background:#fff0f0;color:#c92d2d;padding:5px 8px}.item-numbers{display:grid;grid-template-columns:70px 1fr;gap:8px}.editor-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;padding-top:20px;position:sticky;bottom:0;background:#fff}.editor-actions button{border:0;border-radius:9px;padding:13px;font-weight:800;cursor:pointer}.primary{background:var(--blue);color:#fff}.secondary{background:#e9eef6;color:var(--navy)}.preview-wrap{padding:34px;overflow:auto}.preview-label{font-size:11px;font-weight:800;letter-spacing:1.4px;color:#6d7890;width:794px;margin:0 auto 8px}.invoice{width:794px;min-height:1123px;margin:auto;background:var(--paper);box-shadow:0 14px 45px #24385822;padding:45px 43px 0;position:relative;overflow:hidden}.invoice-header{display:grid;grid-template-columns:56% 44%;border-bottom:1px solid var(--line);padding-bottom:18px}.company-side{padding-right:30px}.brand{display:block;width:330px;height:126px;object-fit:cover;object-position:left top;margin:-20px 0 4px -12px}.company-side h3,.blue-label{color:var(--blue);font-size:14px;font-weight:800}.company-side h3{margin:0 0 14px}.contact-line{display:grid;grid-template-columns:23px 1fr;font-size:12px;line-height:1.45;margin:3px 0}.icon,.pin{color:var(--blue);font-size:11px}.company-note{font-size:11px;line-height:1.5;margin:14px 0 0}.invoice-meta{border-left:2px solid var(--blue);padding-left:36px}.invoice-meta h1{font-size:43px;letter-spacing:-1px;margin:18px 0 20px}.meta-block{display:flex;flex-direction:column;gap:6px;margin:0 0 26px;font-size:13px}.meta-block strong{color:var(--blue);font-size:13px}.bill-to{padding:23px 0 18px}.bill-to h2{font-size:18px;margin:14px 0}.address{display:flex;gap:12px;align-items:flex-start}.address p{white-space:pre-line;font-size:12px;line-height:1.45;margin:0}.items-section table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}.items-section thead{background:linear-gradient(90deg,#064fdc,#0865f3);color:#fff}.items-section th{padding:12px 10px;text-align:center}.items-section th:first-child{width:8%}.items-section th:nth-child(2){width:47%}.items-section th:nth-child(3){width:12%}.items-section th:nth-child(4){width:17%}.items-section th:nth-child(5){width:16%}.items-section td{padding:16px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:center}.items-section td:nth-child(2){text-align:left}.item-title{display:block;font-weight:800;margin-bottom:6px}.item-desc{font-style:italic;line-height:1.5;white-space:pre-line}.invoice-bottom{display:grid;grid-template-columns:54% 46%;gap:28px;margin-top:18px}.notes-box{padding-top:76px}.notes-box p{white-space:pre-line;font-size:11px;line-height:1.55}.totals>div{display:flex;justify-content:space-between;padding:8px 19px;border-top:1px solid var(--line);font-size:12px}.totals .grand{background:linear-gradient(90deg,#074fd9,#0963ef);color:#fff;border:0;font-size:15px;padding:11px 19px}.payment{padding:15px 18px 0;font-size:10px;line-height:1.4}.payment p{margin:8px 0}.confirmation{margin-top:15px!important}.invoice-footer{height:76px;margin:12px -43px 0;position:relative;background:linear-gradient(151deg,transparent 0 49%,var(--navy) 49.4% 63%,transparent 63.4%),linear-gradient(138deg,transparent 0 72%,var(--blue) 72.4%);display:flex;justify-content:center;align-items:center;text-align:center}.invoice-footer>div{position:absolute;top:12px;display:flex;flex-direction:column;gap:3px;font-size:12px}.thank-you{font-family:cursive;color:var(--blue);font-size:21px;font-style:italic}.invoice-footer strong{font-size:12px}@media(max-width:1100px){.app-shell{grid-template-columns:340px minmax(794px,1fr)}.preview-wrap{padding:25px 16px}}@media print{@page{size:A4;margin:0}body{background:#fff}.no-print,.editor{display:none!important}.app-shell,.preview-wrap{display:block;padding:0;margin:0}.invoice{width:210mm;height:297mm;min-height:297mm;box-shadow:none;margin:0;padding:11.5mm 11.4mm 0}.invoice-footer{margin-left:-11.4mm;margin-right:-11.4mm}.brand{print-color-adjust:exact;-webkit-print-color-adjust:exact}*{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
/* Footer polos agar ucapan tetap terbaca pada layar dan hasil cetak. */
.invoice-footer{background:#fff!important;border-top:1px solid #dbe7ff;}
.invoice-footer>div{position:static!important;top:auto!important;}

@media print{
  @page{size:A4 portrait;margin:0;}
  html,body{width:210mm;height:297mm;margin:0;}
  .invoice{
    width:200mm;
    height:287mm;
    min-height:287mm;
    margin:5mm auto;
    padding:7mm 8mm 4mm;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .invoice-header{padding-bottom:3mm;}
  .brand{width:82mm;height:30mm;margin:-4mm 0 1mm -2mm;}
  .company-side h3{margin-bottom:2.5mm;}
  .company-note{margin-top:2.5mm;}
  .invoice-meta{padding-left:8mm;}
  .invoice-meta h1{font-size:38px;margin:3mm 0 4mm;}
  .meta-block{margin-bottom:5mm;}
  .bill-to{padding:4mm 0 3mm;}
  .bill-to h2{margin:2.5mm 0;}
  .items-section th{padding:2.5mm 2mm;}
  .items-section td{padding:3mm 2mm;}
  .invoice-bottom{margin-top:3mm;gap:6mm;}
  .notes-box{padding-top:12mm;}
  .totals>div{padding:1.5mm 4mm;}
  .totals .grand{padding:2mm 4mm;}
  .payment{padding:2.5mm 4mm 0;line-height:1.3;}
  .payment p{margin:1.5mm 0;}
  .confirmation{margin-top:2.5mm!important;}
  .invoice-footer{
    flex:0 0 13mm;
    height:13mm;
    margin:auto -8mm -4mm;
    border-top:1px solid #dbe7ff;
  }
  .thank-you{font-size:19px;}
}