*{box-sizing:border-box}body{margin:0;background:#dfe4e9;font-family:Arial,Helvetica,sans-serif;color:#111}header{position:sticky;top:0;z-index:99;background:#0d1520;color:#fff;padding:12px 18px;display:flex;gap:20px;align-items:center;justify-content:space-between;box-shadow:0 2px 8px #0005}header b{font-size:20px}header small{display:block;color:#c8d0d8}.tools{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.tools button,.btn{border:1px solid #58687b;background:#172231;color:#fff;padding:9px 12px;border-radius:7px;font-weight:700;cursor:pointer}.tools .primary{background:#1677ed}.page{position:relative;width:794px;height:1123px;margin:22px auto;background:white;box-shadow:0 4px 18px #0003;overflow:hidden}.page .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.edit{position:absolute;z-index:3;background:transparent;border:1px dashed transparent;outline:0;padding:0 2px;font-size:10.65px;line-height:1.05;white-space:pre-wrap;overflow:hidden;color:transparent;cursor:text}.edit:focus,.edit.changed{color:#111;background:#fff}.edit:hover{border-color:#2684ff;background:#ffffff18}.edit:focus{border-color:#2684ff}.strong{font-weight:700}.right{text-align:right}.charges{display:none;position:absolute;z-index:4;background:#fff;left:74px;top:446px;width:646px;border-collapse:collapse;table-layout:fixed;font-size:10.4px}.charges th,.charges td{height:29px;padding:5px 7px;border:0;background:transparent}.charges th{color:#fff;font-weight:700;text-align:left;height:35px}.charges th:nth-child(n+2),.charges td:nth-child(n+2){text-align:right}.charges col:nth-child(1){width:42%}.charges col:nth-child(2){width:9%}.charges col:nth-child(3){width:22%}.charges col:nth-child(4){width:9%}.charges col:nth-child(5){width:18%}.charges [contenteditable]{outline:0}.charges [contenteditable]:focus{box-shadow:inset 0 0 0 1px #2684ff;background:#ffffff33}.pageNo{position:absolute;right:70px;bottom:38px;font-size:8px;color:#666}.extra-note{position:absolute;left:77px;top:160px;width:640px;min-height:24px;font-size:10px;background:transparent;z-index:3;outline:0}.extra-page .stamp{position:absolute;right:70px;top:190px;width:230px;opacity:1}.extra-page .wm{position:absolute;left:215px;top:300px;width:365px;opacity:.17}.extra-page .footer{position:absolute;left:70px;right:70px;bottom:38px;border-top:1px solid #ddd;padding-top:10px;font-size:8px;color:#666}.extra-page .content{position:absolute;left:77px;right:77px;top:70px;bottom:90px;z-index:2;font-size:10.5px;outline:0;background:transparent}
@media(max-width:850px){.page{transform-origin:top left;margin:12px 0}.tools{gap:4px}.tools button,.btn{padding:7px 8px;font-size:12px}}
@media print{body{background:#fff}header{display:none}.page{margin:0;box-shadow:none;page-break-after:always;width:210mm;height:297mm}.edit{border-color:transparent!important}.page:last-child{page-break-after:auto}}

.page.table-edit .charges{display:table}.page.table-edit .bg{filter:none}.table-toggle{position:absolute;z-index:8;left:74px;top:420px;font-size:9px;padding:4px 7px;border:1px solid #6b7b8d;border-radius:4px;background:#fff;color:#17304e;opacity:0}.page:hover .table-toggle{opacity:.9}@media print{.table-toggle{display:none!important}.charges{display:none!important}.page.table-edit .charges{display:table!important}}
/* Editing without shifting or duplicating the PDF model */
.edit{display:flex;align-items:center;padding:0 7px!important;line-height:1.15!important}
.edit.right{justify-content:flex-end}
.edit:focus,.edit.changed{background:#fff!important;color:#111!important;border:1px solid #2684ff!important;box-shadow:none!important}
.edit.changed:not(:focus){border-color:transparent!important}
.edit:focus{z-index:20}
/* Hide the model text completely underneath a field while it is being edited. */
.edit:focus::selection,.edit.changed::selection{background:#b9d8ff}

/* Transparent editor: never cover the watermark */
.edit, .edit:focus, .edit.changed, .edit.changed:not(:focus){background:transparent!important;box-shadow:none!important;}
.edit:focus{border:1px dashed rgba(38,132,255,.65)!important;}
.edit.changed:not(:focus){border-color:transparent!important;}
.edit:hover:not(:focus){background:transparent!important;}
.charges, .charges th, .charges td, .charges [contenteditable], .charges [contenteditable]:focus{background:transparent!important;box-shadow:none!important;}
@media print{.edit,.edit:focus,.edit.changed,.charges,.charges th,.charges td{background:transparent!important;border-color:transparent!important;}}
/* v6: editable values are painted once over a cleaned model background. */
.edit{color:#111!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;}
.edit:focus{color:#111!important;background:transparent!important;border:1px dashed rgba(38,132,255,.65)!important;box-shadow:none!important;}
.edit.changed,.edit.changed:not(:focus){color:#111!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;}

/* v7: table editing happens in a separate modal, never on top of the PDF. */
.page.table-edit .charges,.charges{display:none!important}
.table-modal{position:fixed;inset:0;z-index:9999;background:rgba(10,18,28,.68);display:none;align-items:center;justify-content:center;padding:24px}
.table-dialog{width:min(1050px,96vw);max-height:88vh;overflow:auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0008;padding:18px}
.table-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:18px;color:#102944}
.close-table{border:0;background:#eef2f6;border-radius:7px;font-size:26px;line-height:1;padding:4px 10px;cursor:pointer}
.table-editor-host .charges.editor-copy{position:static!important;display:table!important;width:100%!important;background:#fff!important;font-size:14px!important}
.table-editor-host .charges.editor-copy th{background:#102944!important;color:#fff!important;height:42px}
.table-editor-host .charges.editor-copy td{background:#fff!important;color:#111!important;border:1px solid #d7dde4!important;height:42px}
.table-editor-host .charges.editor-copy [contenteditable]:focus{outline:2px solid #2684ff!important;background:#f7fbff!important}
.table-help{margin-top:12px;color:#667085;font-size:13px}
@media print{.table-modal{display:none!important}}
/* v8: validated table replaces the model table once, without duplication. */
.table-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.table-actions button{border:1px solid #c7d0db;border-radius:7px;padding:9px 14px;font-weight:700;cursor:pointer;background:#f5f7fa;color:#172231}
.table-actions .apply-table{background:#1677ed;color:#fff;border-color:#1677ed}
.page.table-applied::before{content:"";position:absolute;z-index:3;left:74px;top:446px;width:646px;height:129px;background:rgba(255,255,255,.72);pointer-events:none}
.page.table-applied .charges{display:table!important;z-index:4;background:transparent!important}
.page.table-applied .charges th{background:#102944!important;color:#fff!important}
.page.table-applied .charges td{background:transparent!important;color:#111!important}
.page.table-applied .charges [contenteditable]{background:transparent!important}
@media print{.page.table-applied::before{background:rgba(255,255,255,.72)!important}.page.table-applied .charges{display:table!important}}
/* v9: when the table is validated, erase the ORIGINAL table pixels completely,
   then redraw the watermark and the edited table exactly once. */
.page.table-applied::before{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  left:74px!important;
  top:446px!important;
  width:646px!important;
  height:132px!important;
  background-color:#fff!important;
  background-image:url('assets/watermark_clean.png')!important;
  background-repeat:no-repeat!important;
  background-size:390px auto!important;
  background-position:center -116px!important;
  opacity:1!important;
  pointer-events:none!important;
}
.page.table-applied .charges{
  display:table!important;
  z-index:4!important;
  background:transparent!important;
  left:74px!important;top:446px!important;width:646px!important;
}
.page.table-applied .charges th{background:#102944!important;color:#fff!important;}
.page.table-applied .charges td{background:transparent!important;color:#111!important;}
.page.table-applied .charges th,.page.table-applied .charges td{border-color:transparent!important;}
.page.table-applied .charges tbody tr:first-child td{border:1px solid #d7dde4!important;}
@media print{
 .page.table-applied::before{background-color:#fff!important;background-image:url('assets/watermark_clean.png')!important;}
}