:root{
  --blue:#1f4e79;
  --blue-dark:#163a5c;
  --orange:#ed7d31;
  --ink:#1a1a1a;
  --grey:#595959;
  --line:#c9ccd1;
  --paper:#ffffff;
  --canvas:#eef1f4;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  background:var(--canvas);
  font-family:'Segoe UI', Arial, sans-serif;
  color:var(--ink);
  padding:32px 16px 80px;
  width:100%;
  overflow-x:hidden;
}
.toolbar{
  max-width:850px;
  margin:0 auto 18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.toolbar button{
  border:none;
  padding:10px 18px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease;
}
.toolbar button:active{transform:translateY(1px);}
#printBtn{background:var(--blue);color:#fff;}
#printBtn:hover{background:var(--blue-dark);}
#addRowBtn{background:#fff;color:var(--blue);border:1.5px solid var(--blue) !important;}
#resetBtn{background:#fff;color:var(--grey);border:1.5px solid var(--line) !important;}

.sheet{
  max-width:850px;
  width:100%;
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 4px 24px rgba(0,0,0,0.12);
  border-radius:4px;
  overflow:hidden;
}

/* Screen styles for images */
.print-fixed-top {
  display:block;
  width:100%;
  margin:0 auto;
}
.print-fixed-bottom {
  display:block;
  width:100%;
  margin:10px auto 0;
}
/* Hide spacers on screen */
.header-spacer, .footer-spacer {
  display: none;
}

.body-content{
  padding:8px 48px 0;
  position:relative;
  width:100%;
}

.watermark{
  position:absolute;
  top:120px;
  left:50%;
  transform:translateX(-50%);
  width:420px;
  max-width:65%;
  opacity:0.16;
  pointer-events:none;
  z-index:0;
}

.body-content > *:not(.watermark){
  position:relative;
  z-index:1;
}

h1.title{
  text-align:center;
  font-size:26px;
  letter-spacing:1px;
  margin:22px 0 18px;
  color:var(--ink);
}

.meta-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  font-weight:700;
  margin-bottom:22px;
}
.meta-row span.label{font-weight:700;}
.meta-row [contenteditable]{
  outline:none;
  border-bottom:1px dashed transparent;
  padding:0 2px;
}
.meta-row [contenteditable]:hover,
.meta-row [contenteditable]:focus{
  border-bottom:1px dashed var(--blue);
  background:#f5f9fd;
}

.to-block{margin-bottom:16px;font-size:14px;}
.to-block .lbl{font-weight:700;margin-bottom:4px;}
.to-block [contenteditable]{
  outline:none;
  padding:2px 3px;
  border-radius:3px;
  margin-bottom:2px;
}
.to-block [contenteditable]:hover,
.to-block [contenteditable]:focus{background:#f5f9fd;}
.to-block .company-name{font-weight:700;font-size:15px;}

.para{font-size:13.5px;line-height:1.55;margin:14px 0;text-align:justify;}
.para[contenteditable]{outline:none;padding:2px 3px;border-radius:3px;}
.para[contenteditable]:hover,.para[contenteditable]:focus{background:#f5f9fd;}

table.items{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 4px;
  font-size:13px;
}
table.items th{
  background:var(--blue);
  color:#fff;
  font-size:12px;
  letter-spacing:.4px;
  padding:9px 8px;
  text-align:center;
  border:1px solid var(--blue-dark);
}
table.items td{
  border:1px solid var(--line);
  padding:8px;
  vertical-align:top;
}
table.items td[contenteditable]{outline:none;}
table.items td[contenteditable]:hover,
table.items td[contenteditable]:focus{background:#f5f9fd;}
.col-sl{width:6%;text-align:center;}
.col-desc{width:42%;}
.col-qty{width:9%;text-align:center;}
.col-unit{width:11%;text-align:center;}
.col-rate{width:16%;text-align:right;}
.col-amt{width:16%;text-align:right;font-weight:600;}
.del-row{
  width:22px;height:22px;border-radius:50%;
  border:1px solid #d99;
  background:#fff5f5;color:#c0392b;
  font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;
}
.del-row:hover{background:#ffe0e0;}

.totals-row td{font-weight:700;background:#f7f9fb;}
#gstRate{
  outline:none;
  border-bottom:1px dashed var(--orange);
  padding:0 3px;
  border-radius:2px;
  background:#fff6ee;
}
#gstRate:hover,#gstRate:focus{
  background:#ffe9d4;
}

.gst-control{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 4px;
  padding:10px 14px;
  background:#f5f9fd;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13px;
}
.gst-control-group{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.gst-control-lbl{
  font-weight:700;
  color:var(--blue);
}
.radio-lbl{
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  font-weight:500;
}
.radio-lbl input{
  cursor:pointer;
  accent-color:var(--blue);
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:4px;
  font-size:12.5px;
}
.footer-grid .box{
  border:1px solid var(--line);
  padding:9px 10px;
  min-height:44px;
}
.footer-grid [contenteditable]{outline:none;}
.footer-grid [contenteditable]:hover,
.footer-grid [contenteditable]:focus{background:#f5f9fd;}
.footer-grid .lbl{font-weight:700;display:block;margin-bottom:2px;}

.sign-block{
  margin-top:34px;
  font-size:13.5px;
}
.sign-block .thank{margin-bottom:28px;}
.sign-block .right{
  text-align:right;
}
.sign-block .right div{margin-bottom:4px;}
.sign-block [contenteditable]{outline:none;padding:2px 3px;border-radius:3px;}
.sign-block [contenteditable]:hover,
.sign-block [contenteditable]:focus{background:#f5f9fd;}
.sign-block .company-sign{font-weight:700;margin-top:16px;}
.sign-block .person-sign{font-weight:700;margin-top:36px;}

.hint{
  max-width:850px;
  margin:14px auto 0;
  text-align:center;
  font-size:12px;
  color:#8a8f98;
}

/* ---------- Responsive / device-independent adjustments ---------- */
@media (max-width:700px){
  body{padding:16px 8px 60px;}
  .body-content{padding:8px 18px 0;}
  h1.title{font-size:20px;margin:16px 0 14px;}
  .meta-row{flex-direction:column;gap:4px;font-size:13px;margin-bottom:16px;}
  .to-block{font-size:13px;}
  .para{font-size:12.5px;}
  table.items{font-size:11.5px;}
  table.items th{padding:6px 4px;font-size:10px;}
  table.items td{padding:5px;}
  .gst-control{flex-direction:column;align-items:flex-start;font-size:12px;}
  .footer-grid{grid-template-columns:1fr;font-size:12px;}
  .sign-block{font-size:12.5px;}
}

@media (max-width:420px){
  table.items{font-size:10.5px;}
  .col-desc{width:34%;}
}

/* ---------- PRINT STYLES ---------- */
@media print{
  html,body{background:#fff;padding:0;margin:0;width:auto;}
  .toolbar,.hint{display:none;}
  .del-row{display:none;}
  .gst-control{background:#fff;border:1px solid #999;}

  /* Adjusted page margin to prevent native browser header/footer overlap */
  @page{size:A4 portrait;margin: 10mm;}

  .sheet{
    box-shadow:none;
    border-radius:0;
    max-width:100%;
    width:100%;
    overflow:visible !important; 
  }

  .print-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }
  .print-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  /* INCREASED spacer heights to safely clear the fixed images */
  .header-spacer { display: block; height: 130px; }
  .footer-spacer { display: block; height: 170px; }

  .body-content{padding:0 22px 0;}
  /* Added margin-top to h1 to ensure it clears the header image */
  h1.title{font-size:20px;margin:15px 0 10px;}
  .meta-row{margin-bottom:12px;font-size:12.5px;}
  .to-block{margin-bottom:10px;font-size:12.5px;}
  .para{margin:8px 0;font-size:12px;}
  .gst-control{margin:10px 0 4px;padding:6px 10px;font-size:11.5px;}
  table.items{font-size:11.5px;margin:10px 0 4px;}
  table.items th{padding:5px 6px;}
  table.items td{padding:5px 6px;}
  
  table.items thead { display: table-row-group; } 
  
  /* CRITICAL: Force the browser to push long rows to the next page entirely instead of slicing them */
  table.items tr { page-break-inside: avoid; break-inside: avoid; }
  table.items td { page-break-inside: avoid; break-inside: avoid; }

  .footer-grid{font-size:11px;}
  .footer-grid .box{padding:6px 8px;min-height:0;}
  .sign-block{margin-top:16px;font-size:12px;}
  .sign-block .thank{margin-bottom:14px;}
  .sign-block .person-sign{margin-top:20px;}
  
  .footer-grid, .sign-block{page-break-inside:avoid; break-inside: avoid;}
}