/* FN-CRM — FINAL-TEMPLATE-INVOICE — APPROVED & LOCKED */

:root{
  --fn-invoice-accent:#91D9F8;
  --fn-invoice-pattern:#A7C4D3;
  --fn-invoice-ink:#101a3d;
  --fn-invoice-muted:#64708a;
  --fn-invoice-line:#80d8ff;
}

/* OVERLAY */
#fnFinalInvoiceOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(6,15,31,.78);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px;
  overflow:auto;
}
#fnFinalInvoiceOverlay[hidden]{display:none!important}

.fn-invoice-toolbar{
  position:sticky;
  top:10px;
  z-index:5;
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin:0 auto 12px;
  max-width:900px;
}
.fn-invoice-toolbar button{
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(12,28,55,.9);
  color:#fff;
  border-radius:10px;
  padding:9px 14px;
  font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}

/* MASTER A4 */
.fn-invoice-sheet{
  position:relative;
  width:794px;
  height:1123px;
  min-height:1123px;
  max-height:1123px;
  margin:auto;
  background:#fff;
  color:var(--fn-invoice-ink);
  box-shadow:0 20px 70px rgba(0,0,0,.28);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow:hidden;
  padding:38px 38px 24px;
  box-sizing:border-box;
}

/* APPROVED GEOMETRIC PATTERN */
.fn-invoice-pattern{
  position:absolute;
  pointer-events:none;
  opacity:.16;
  z-index:0;
}
.fn-invoice-pattern.top{
  width:470px;
  height:345px;
  right:-66px;
  top:-18px;
}
.fn-invoice-pattern.bottom{
  width:360px;
  height:360px;
  left:-160px;
  bottom:70px;
}
.fn-invoice-sheet>*:not(.fn-invoice-pattern){
  position:relative;
  z-index:1;
}

/* HEADER */
.fn-inv-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-height:175px;
}
.fn-inv-logo{
  width:150px;
  height:150px;
  object-fit:contain;
  display:block;
  margin-left:36px;
  margin-top:0;
  border-radius:50%;
}
.fn-inv-title{
  margin-top:86px;
  text-align:right;
  padding-right:8px;
}
.fn-inv-title h1{
  margin:0;
  font-weight:300;
  letter-spacing:10px;
  font-size:38px;
  line-height:1;
  color:#0f163a;
}
.fn-inv-title .num{
  margin-top:10px;
  letter-spacing:5px;
  font-size:17px;
  color:#283457;
}

/* BILLING / DETAILS */
.fn-inv-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:2px;
}
.fn-inv-card{
  border:1px solid var(--fn-invoice-line);
  border-radius:9px;
  padding:14px 18px;
  background:rgba(255,255,255,.95);
  min-height:132px;
  box-sizing:border-box;
}
.fn-inv-card .label{
  font-size:14px;
  color:#34415f;
  margin-bottom:5px;
}
.fn-inv-card .client-name{
  font-size:22px;
  font-weight:800;
  color:#111b42;
  margin-bottom:6px;
}
.fn-inv-card .client-line{
  font-size:15px;
  line-height:1.45;
  color:#24304f;
}
.fn-inv-meta{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.fn-inv-meta td{
  padding:7px 0;
  border-bottom:1px solid #d7deea;
}
.fn-inv-meta tr:last-child td{border-bottom:0}
.fn-inv-meta td:first-child{
  width:45%;
  color:#34415f;
}
.fn-inv-meta td:last-child{color:#24304f}

/* LINE ITEMS */
.fn-inv-items{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:12px;
  font-size:13px;
  border:1px solid var(--fn-invoice-line);
  border-radius:8px;
  overflow:hidden;
  table-layout:fixed;
}
.fn-inv-items th{
  background:var(--fn-invoice-accent);
  color:#12233c;
  font-weight:500;
  padding:11px 12px;
  border-right:1px solid rgba(255,255,255,.75);
  text-align:left;
}
.fn-inv-items th:first-child,
.fn-inv-items td:first-child{
  width:34px;
  text-align:center;
}
.fn-inv-items th:nth-child(2){width:51%}
.fn-inv-items th:nth-child(3){width:10%}
.fn-inv-items th:nth-child(4){width:15%}
.fn-inv-items th:nth-child(5){width:19%}
.fn-inv-items th:nth-child(3),
.fn-inv-items th:nth-child(4),
.fn-inv-items th:nth-child(5),
.fn-inv-items td:nth-child(3),
.fn-inv-items td:nth-child(4),
.fn-inv-items td:nth-child(5){
  text-align:right;
}
.fn-inv-items td{
  padding:10px 12px;
  border-top:1px solid #d8e7ef;
  border-right:1px solid #ccecf9;
  color:#25304f;
  vertical-align:top;
}
.fn-inv-items tr:nth-child(even) td{
  background:rgba(145,217,248,.16);
}
.fn-inv-items td:last-child,
.fn-inv-items th:last-child{border-right:0}
.fn-inv-desc{font-weight:500}
.fn-inv-subdesc{
  display:block;
  margin-top:4px;
  color:#7c86a2;
  font-size:11.5px;
}

/* PRICE CALCULATION */
.fn-inv-calc-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}
.fn-inv-calc{
  width:335px;
  border:1px solid var(--fn-invoice-line);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}
.fn-inv-calc .head{
  background:var(--fn-invoice-accent);
  padding:8px 14px;
  font-size:14px;
  color:#15324a;
}
.fn-inv-calc-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:6px 14px;
  border-top:1px solid #d7deea;
  font-size:12.5px;
}
.fn-inv-calc-row.strong{
  font-size:19px;
  font-weight:800;
  background:rgba(145,217,248,.48);
  padding-top:9px;
  padding-bottom:9px;
}

/* SIGNATURE */
.fn-inv-sign{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding-right:8px;
  color:#283457;
  font-size:14px;
}
.fn-inv-sign .sig{
  font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
  font-size:40px;
  line-height:1;
  color:#000;
  transform:skew(-8deg);
}

/* NOTES / PAYMENT */
.fn-inv-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.fn-inv-bottom-card{
  min-width:0;
  border:1px solid var(--fn-invoice-line);
  border-radius:8px;
  min-height:138px;
  padding:14px 16px;
  box-sizing:border-box;
  background:rgba(255,255,255,.96);
}
.fn-inv-bottom-title{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:14px;
  margin-bottom:18px;
  color:#131d42;
}
.fn-inv-icon{
  font-size:18px;
  color:#000;
  background:none!important;
  border:0!important;
  width:auto;
  height:auto;
  padding:0;
}
.fn-inv-note{
  width:100%;
  font-size:12.5px;
  line-height:1.55;
  color:#3a4768;
  word-break:normal;
  overflow-wrap:normal;
}
.fn-inv-pay{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:11.8px;
  color:#273354;
}
.fn-inv-pay td{
  padding:2px 0;
  vertical-align:top;
}
.fn-inv-pay td:first-child{width:29%}
.fn-inv-pay td:last-child{
  width:71%;
  padding-left:8px;
  overflow-wrap:anywhere;
}
.fn-inv-pay .pay-note{
  font-style:italic;
  color:#6f7992;
  border-top:1px solid #ccd7e5;
  padding-top:8px;
  margin-top:6px;
  display:block;
  font-size:10px;
}

/* FOOTER */
.fn-inv-footer{
  margin-top:18px;
  border-top:1px solid #1f2c50;
  padding-top:10px;
}
.fn-inv-footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fn-inv-tagline{
  font-size:9.8px;
  letter-spacing:2.6px;
  white-space:nowrap;
  color:#233054;
}
.fn-cert{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:7.5px;
  color:#20304e;
  background:transparent!important;
}
.fn-cert-mew{
  display:flex;
  gap:3px;
  align-items:center;
}
.fn-cert-mew span{
  width:21px;
  height:21px;
  border:1px solid #8591a8;
  border-radius:6px;
  display:grid;
  place-items:center;
  font-size:9px;
}
.fn-cert-copy{
  border-left:1px solid #9aa6b7;
  padding-left:8px;
  line-height:1.35;
  white-space:nowrap;
}
.fn-cert-icons{
  display:flex;
  gap:3px;
  align-items:center;
}
.fn-cert-icons span{
  min-width:22px;
  height:22px;
  padding:0 3px;
  border:1px solid #8a96aa;
  border-radius:6px;
  display:grid;
  place-items:center;
  font-size:9px;
}
.fn-cert-icons .shield{color:#16a34a}
.fn-inv-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:12px;
  font-size:11.5px;
  color:#213052;
}
.fn-inv-email{font-weight:700}
.fn-inv-email .mail-ico{
  font-size:13px;
  color:#000;
  margin-right:7px;
}
.fn-inv-generated{
  border-left:1px solid #53607c;
  padding-left:22px;
}
.fn-inv-generated b{font-weight:800}

/* PRINT: SCALE THE APPROVED 794x1123 MASTER TO ONE A4 PAGE
   WITHOUT RE-LAYING OUT INDIVIDUAL SECTIONS */
@media print{
  html,body{
    margin:0!important;
    padding:0!important;
    width:210mm!important;
    height:297mm!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  body>*:not(#fnFinalInvoiceOverlay){
    display:none!important;
  }

  #fnFinalInvoiceOverlay{
    position:fixed!important;
    inset:0!important;
    display:block!important;
    width:210mm!important;
    height:297mm!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
    backdrop-filter:none!important;
  }

  #fnFinalInvoiceOverlay .fn-invoice-toolbar{
    display:none!important;
  }

  #fnFinalInvoiceOverlay>div,
  #fnFinalInvoiceOverlay [data-final-host]{
    width:210mm!important;
    height:297mm!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .fn-invoice-sheet{
    width:794px!important;
    height:1123px!important;
    min-height:1123px!important;
    max-height:1123px!important;
    margin:0!important;
    padding:38px 38px 24px!important;
    box-sizing:border-box!important;
    box-shadow:none!important;
    transform-origin:top left!important;
    transform:scale(.999)!important;
  }

  .fn-invoice-pattern,
  .fn-inv-items th,
  .fn-inv-calc .head,
  .fn-inv-calc-row.strong{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}

@page{
  size:A4 portrait;
  margin:0;
}