:root{--navy:#071a4d;--blue:#0ea5e9;--gold:#d39a22;--ink:#101827;--muted:#667085;--line:#e6eaf2;--soft:#f7faff;--danger:#d92d20;--ok:#067647;--shadow:0 18px 60px rgba(7,26,77,.10)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#f3f6fb}button,input,textarea,select{font:inherit}button,.button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;text-decoration:none;color:var(--ink);display:inline-block}button:hover,.button:hover{box-shadow:0 6px 18px rgba(7,26,77,.08)}.primary{background:linear-gradient(135deg,var(--navy),#0a2463);color:#fff!important;border-color:var(--navy)}aside{position:fixed;inset:0 auto 0 0;width:286px;background:#fff;border-right:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:18px}.brand{display:flex;align-items:center;gap:12px}.brand img{width:48px;height:48px;object-fit:contain}.brand b{display:block;color:var(--navy);font-size:18px}.brand span{display:block;color:var(--muted);font-size:12px}nav{display:grid;gap:8px}nav button{text-align:left;border:0;background:transparent}nav button.active{background:#eef6ff;color:var(--navy);font-weight:700}.login{margin-top:auto;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px;color:var(--muted);font-size:13px;display:grid;gap:8px}label{display:grid;gap:6px;color:var(--muted);font-size:13px}main{margin-left:286px;min-height:100vh;padding:28px}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.top h1{margin:0;color:var(--navy)}.top p{margin:6px 0 0;color:var(--muted)}.top-actions,.actions,.export-actions{display:flex;flex-wrap:wrap;gap:10px}.view{display:none}.view.active{display:block}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}.cards.compact{grid-template-columns:repeat(4,1fr)}.cards div,.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.cards span{display:block;color:var(--muted);font-size:13px}.cards b{display:block;color:var(--navy);font-size:22px;margin-top:10px}.cards .danger b{color:var(--danger)}.panel{margin-bottom:20px}.panel h2,.builder h3{color:var(--navy);margin-top:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wide{grid-column:1/-1}input,textarea,select{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);width:100%}textarea{min-height:72px;resize:vertical}.item-form{display:grid;grid-template-columns:1.2fr 2fr .5fr .7fr .7fr .5fr .5fr;gap:10px;margin-bottom:12px}.product-form{display:grid;grid-template-columns:1.2fr 2fr .8fr .7fr .7fr .5fr .8fr;gap:10px;margin-bottom:12px}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);background:#f8fbff}.hint{margin-top:14px;background:#f8fbff;border-left:4px solid var(--blue);padding:14px;border-radius:10px;color:#344054}.invoice-sheet{width:210mm;min-height:297mm;margin:24px auto;background:white;box-shadow:0 20px 80px rgba(7,26,77,.18);position:relative;overflow:hidden}.inv{padding:24mm 18mm 18mm}.inv:before{content:"";position:absolute;left:0;top:0;width:10mm;height:58mm;background:linear-gradient(180deg,var(--blue),var(--navy));border-bottom-right-radius:36px}.inv-top{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:start}.inv-logo{width:86mm;max-height:35mm;object-fit:contain;object-position:left center;margin-bottom:6px}.company-name{font-size:18px;font-weight:800;color:var(--navy);margin:0}.company-meta{font-size:11px;color:var(--muted);line-height:1.55;margin-top:8px}.invoice-title{text-align:right}.invoice-title h2{font-size:34px;letter-spacing:.16em;margin:4px 0 12px;color:var(--navy)}.title-line{height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--navy));margin-bottom:18px}.inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:13px;align-items:center}.inv-meta span{color:var(--muted)}.badge{background:var(--navy);color:#fff;border-radius:8px;padding:8px 10px;text-align:center;font-weight:800;letter-spacing:.04em}.status-badge{display:inline-block;border:1px solid #fecdca;color:var(--danger);border-radius:20px;padding:6px 14px;font-weight:800;text-transform:uppercase;text-align:center}.status-badge.Paid{color:var(--ok);border-color:#abefc6}.inv-card{border:1px solid var(--line);border-radius:16px;padding:16px;margin:22px 0}.bill-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:start}.section-label{font-weight:900;color:var(--navy);text-transform:uppercase;letter-spacing:.06em;font-size:12px;margin-bottom:10px}.customer-box{font-size:13px;line-height:1.6}.customer-box b{font-size:15px;color:var(--navy)}.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #cfe3ff;border-radius:12px;overflow:hidden;background:#f8fbff}.summary-strip div{padding:14px;border-right:1px solid #dce9fa;text-align:center}.summary-strip div:last-child{border-right:0}.summary-strip span{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}.summary-strip b{display:block;color:var(--navy);font-size:17px;margin-top:6px}.inv-table{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.inv-table th{background:var(--navy);color:#fff}.inv-table td,.inv-table th{font-size:12px}.inv-table td:nth-child(n+3),.inv-table th:nth-child(n+3){text-align:right}.inv-bottom{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}.pay-box,.totals-box,.terms-box,.sign-box{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}.pay-box h3,.terms-box h3,.sign-box h3{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}.bank-row{display:grid;grid-template-columns:90px 1fr;font-size:12px;margin:5px 0}.bank-row span{color:var(--muted)}.total-line{display:grid;grid-template-columns:1fr auto;gap:10px;border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}.grand{background:var(--navy);color:#fff;margin:10px -14px -14px;padding:12px 14px;font-weight:900;font-size:17px;display:grid;grid-template-columns:1fr auto}.words{font-size:12px;line-height:1.5;color:var(--navy);font-weight:700;margin-top:12px}.terms-box ul{margin:0;padding-left:18px;font-size:12px;line-height:1.8;color:#344054}.signature{font-family:"Segoe Script","Brush Script MT",cursive;font-size:24px;color:var(--navy);margin:18px 0 8px}.inv-footer{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:#fff;padding:12px 18mm;display:flex;gap:22px;align-items:center;font-size:12px}.inv-footer b{margin-left:auto;color:#fff}.watermark{position:absolute;right:16mm;bottom:38mm;font-size:38px;font-weight:900;color:rgba(7,26,77,.035);letter-spacing:.12em;transform:rotate(-6deg)}@media(max-width:1150px){aside{position:static;width:auto}main{margin-left:0;padding:16px}.cards,.cards.compact{grid-template-columns:repeat(2,1fr)}.grid,.item-form,.product-form,.inv-top,.bill-grid,.inv-bottom{grid-template-columns:1fr}.invoice-sheet{width:100%;min-height:auto}.inv-footer{position:static}}@media print{body{background:#fff}.no-print,aside,.top,.builder{display:none!important}main{margin:0;padding:0}.view{display:block}.view:not(#invoice){display:none}.invoice-sheet{box-shadow:none;margin:0;width:210mm;min-height:297mm}@page{size:A4;margin:0}}

/* v1.1 compact A4 invoice fix: keeps normal invoices on one page; multi-item invoices can continue naturally */
.invoice-sheet{
  width:210mm;
  min-height:auto;
}
.inv{
  padding:12mm 12mm 10mm;
}
.inv:before{
  width:6mm;
  height:38mm;
  border-bottom-right-radius:22px;
}
.inv-logo{
  width:62mm;
  max-height:22mm;
}
.company-name{
  font-size:15px;
}
.company-meta{
  font-size:9.5px;
  line-height:1.35;
}
.invoice-title h2{
  font-size:25px;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.title-line{
  margin-bottom:10px;
}
.inv-meta{
  font-size:10.5px;
  gap:5px 9px;
}
.badge{
  padding:5px 8px;
  border-radius:6px;
}
.status-badge{
  padding:4px 10px;
}
.inv-card{
  margin:10px 0;
  padding:10px;
  border-radius:12px;
}
.bill-grid{
  gap:14px;
}
.customer-box{
  font-size:10.5px;
  line-height:1.38;
}
.customer-box b{
  font-size:12.5px;
}
.section-label{
  font-size:10.5px;
  margin-bottom:6px;
}
.summary-strip div{
  padding:8px 6px;
}
.summary-strip span{
  font-size:8.5px;
}
.summary-strip b{
  font-size:12px;
  margin-top:4px;
}
.inv-table{
  margin-top:8px;
}
.inv-table td,.inv-table th{
  font-size:9.5px;
  padding:6px 7px;
}
.inv-bottom{
  gap:12px;
  margin-top:10px;
}
.pay-box,.totals-box,.terms-box,.sign-box{
  padding:9px;
  border-radius:10px;
}
.pay-box h3,.terms-box h3,.sign-box h3{
  font-size:10.5px;
  margin-bottom:6px;
}
.bank-row{
  grid-template-columns:70px 1fr;
  font-size:9.5px;
  margin:3px 0;
}
.terms-box ul{
  font-size:9.5px;
  line-height:1.35;
}
.total-line{
  padding:5px 0;
  font-size:10.5px;
}
.grand{
  margin:7px -9px -9px;
  padding:8px 9px;
  font-size:13px;
}
.words{
  font-size:10px;
  margin-top:8px;
}
.signature{
  font-size:18px;
  margin:10px 0 4px;
}
.sign-box{
  margin-top:10px!important;
}
.watermark{
  display:none;
}
.inv-footer{
  position:static;
  margin:10px -12mm -10mm;
  padding:8px 12mm;
  font-size:9.5px;
  gap:10px;
  flex-wrap:wrap;
}

@media print{
  html, body{
    width:210mm;
    min-height:297mm;
  }
  .invoice-sheet{
    width:210mm!important;
    min-height:auto!important;
    height:auto!important;
    margin:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    page-break-after:auto;
  }
  .inv{
    padding:10mm 10mm 8mm!important;
  }
  .inv-top{
    gap:12mm!important;
  }
  .inv-card{
    margin:8px 0!important;
  }
  .inv-footer{
    position:static!important;
    margin:8px -10mm -8mm!important;
    padding:7px 10mm!important;
  }
  @page{
    size:A4;
    margin:0;
  }
}


/* v1.2 print hardening: force normal invoices into one printed A4 page */
.invoice-title h2{font-size:22px!important;letter-spacing:.10em!important}
.inv-logo{width:52mm!important;max-height:18mm!important}
.company-name{font-size:13px!important}
.company-meta{font-size:8.2px!important;line-height:1.22!important}
.inv{padding:8mm 9mm 6mm!important}
.inv:before{width:5mm!important;height:31mm!important}
.inv-top{grid-template-columns:1.1fr .82fr!important;gap:10mm!important}
.inv-meta{font-size:9px!important;gap:3px 7px!important}
.badge{padding:4px 6px!important}
.status-badge{padding:3px 8px!important}
.inv-card{margin:7px 0!important;padding:8px!important}
.customer-box{font-size:9px!important;line-height:1.22!important}
.customer-box b{font-size:11px!important}
.summary-strip div{padding:6px 4px!important}
.summary-strip span{font-size:7.5px!important}
.summary-strip b{font-size:10.5px!important}
.inv-table{margin-top:7px!important}
.inv-table td,.inv-table th{font-size:8.4px!important;padding:5px 5px!important}
.inv-bottom{grid-template-columns:.9fr 1.1fr!important;gap:9px!important;margin-top:8px!important}
.pay-box,.totals-box,.terms-box,.sign-box{padding:7px!important;border-radius:8px!important}
.pay-box h3,.terms-box h3,.sign-box h3{font-size:9px!important;margin-bottom:4px!important}
.bank-row{grid-template-columns:62px 1fr!important;font-size:8.4px!important;margin:2px 0!important}
.terms-box ul{font-size:8.4px!important;line-height:1.25!important}
.total-line{font-size:9px!important;padding:4px 0!important}
.grand{font-size:12px!important;margin:6px -7px -7px!important;padding:7px!important}
.words{font-size:8.8px!important;line-height:1.25!important;margin-top:6px!important}
.signature{font-size:15px!important;margin:7px 0 3px!important}
.inv-footer{
  display:grid!important;
  grid-template-columns:auto auto auto 1fr!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:0!important;
  white-space:nowrap!important;
  margin:6px -9mm -6mm!important;
  padding:5px 9mm!important;
  font-size:7.8px!important;
}
.inv-footer b{text-align:right!important;margin-left:0!important}
.watermark{display:none!important}

@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  html,body{margin:0!important;padding:0!important;background:#fff!important}
  .invoice-sheet{
    width:210mm!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    page-break-after:auto!important;
  }
  .inv{
    /* Chromium/Edge print respects zoom and it prevents the 2nd blank/overflow page */
    zoom:.92!important;
    padding:7mm 8mm 5mm!important;
  }
  .invoice-title h2{font-size:20px!important}
  .inv-table td,.inv-table th{font-size:8px!important;padding:4px 5px!important}
  .inv-card{margin:6px 0!important}
  .inv-bottom{margin-top:6px!important}
  .inv-footer{
    position:static!important;
    margin:5px -8mm -5mm!important;
    padding:5px 8mm!important;
    font-size:7.5px!important;
  }
  @page{size:A4;margin:0}
}


/* v1.3 delete test invoice button */
.danger-btn{
  color:#b42318!important;
  border-color:#fecdca!important;
  background:#fff5f5!important;
}
.danger-btn:hover{
  box-shadow:0 6px 18px rgba(217,45,32,.12)!important;
}
