/* =====================================================
   EXECUTIVE BLUE INVOICE
   Invoice Create Free
   Version : 1.0.0

   Design:
   Clean Corporate Blue
   A4 Print Ready
   Signature instead of QR
   ===================================================== */


/* =====================================================
   ROOT
   ===================================================== */

.executive-blue-invoice {

    width: 210mm;

    min-height: 297mm;

    box-sizing: border-box;

    margin: 0 auto;

    padding: 9mm 10mm 8mm 10mm;

    background: #ffffff;

    color: #202020;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    line-height: 1.4;

    position: relative;

}


/* =====================================================
   PAGE BORDERS
   ===================================================== */

.executive-blue-top-border {

    width: 100%;

    height: 1px;

    background: #1769aa;

    margin-bottom: 5mm;

}


.executive-blue-bottom-border {

    height: 3px;

    width: 100%;

    background: #1769aa;

    margin-top: 4mm;

    page-break-before: avoid;

    break-before: avoid;


}

/* =====================================================
   HEADER
   Locked Executive Blue Layout
   ===================================================== */

.executive-blue-header {

    width: 100%;

    margin: 0 0 4mm 0;

}


.executive-blue-header-inner {

    width: 100%;

    display: grid;

    grid-template-columns: 45mm 1fr 55mm;

    column-gap: 5mm;

    align-items: start;

}


/* =====================================================
   LEFT — COMPANY BRAND
   ===================================================== */

.executive-blue-brand {

    width: 45mm;

    grid-column: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

}


/* =====================================================
   LOGO
   ===================================================== */

.executive-blue-brand-logo {

    width: 20mm;

    height: 15mm;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1mm;

}


.executive-blue-logo {

    display: block;

    width: auto;

    height: auto;

    max-width: 16mm;

    max-height: 13mm;

    object-fit: contain;

}


.executive-blue-logo-placeholder {

    width: 14mm;

    height: 14mm;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #1769aa;

    color: #1769aa;

    font-size: 15px;

    font-weight: 700;

}


/* =====================================================
   COMPANY NAME
   ===================================================== */

.executive-blue-brand-text {

    width: 100%;

    text-align: center;

}


.executive-blue-company-name {

    color: #1769aa;

    font-size: 9px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0.35px;

    text-transform: uppercase;

}


.executive-blue-company-tagline {

    margin-top: 0.8mm;

    color: #777777;

    font-size: 5px;

    line-height: 1.1;

    letter-spacing: 0.4px;

    text-transform: uppercase;

}


/* =====================================================
   RIGHT — COMPANY CONTACT
   ===================================================== */

.executive-blue-contact {

    width: 55mm;

    grid-column: 3;

    justify-self: end;

    align-self: start;

    padding-top: 1mm;

    font-size: 9px;

    line-height: 1.5;

    color: #444444;

}

/* =====================================================
   CONTACT ROWS
   Icon + Detail Same Line
   ===================================================== */

.executive-blue-contact-row {

    display: grid;

    grid-template-columns: 5mm 1fr;

    align-items: start;

    column-gap: 2mm;

    width: 100%;

    margin-bottom: 2mm;

    line-height: 1.5;

}


.executive-blue-contact-row:last-child {

    margin-bottom: 0;

}


.executive-blue-contact-icon {

    width: 5mm;

    min-width: 5mm;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding: 0;

    margin: 0;

    color: #1769aa;

    font-size: 9px;

    line-height: 1.5;

}


.executive-blue-contact-row > div {

    min-width: 0;

    margin: 0;

    padding: 0;

    line-height: 1.5;

    word-break: break-word;

}



/* =====================================================
   INVOICE / PARTIES
   ===================================================== */

.executive-blue-invoice-info {

    width: 100%;

    margin-bottom: 6mm;

}


.executive-blue-parties {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    column-gap: 12mm;

    align-items: start;

    width: 100%;

}


/* =====================================================
   INVOICE DETAILS
   ===================================================== */

.executive-blue-invoice-details {

    min-width: 0;

}


.executive-blue-invoice-title {

    font-size: 20px;

    font-weight: 700;

    color: #1769aa;

    letter-spacing: 1.4px;

    margin-bottom: 3mm;

}


.executive-blue-invoice-meta {

    width: 100%;

}


.executive-blue-meta-row {

    display: grid;

    grid-template-columns: 30mm 1fr;

    column-gap: 2mm;

    margin-bottom: 1.4mm;

    font-size: 8.5px;

}


.executive-blue-meta-row span {

    color: #666666;

    font-weight: 600;

    text-transform: uppercase;

}


.executive-blue-meta-row strong {

    color: #222222;

    font-weight: 600;

}


.executive-blue-due-total {

    margin-top: 4mm;

    padding-top: 2.5mm;

    border-top: 1px solid #d7e4ef;

    width: 54mm;

}


.executive-blue-due-label {

    color: #666666;

    font-size: 7.5px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}


.executive-blue-due-value {

    margin-top: 0.8mm;

    color: #1769aa;

    font-size: 17px;

    font-weight: 700;

}


/* =====================================================
   INVOICE TO
   ===================================================== */

.executive-blue-invoice-to {

    border-left: 2px solid #1769aa;

    padding-left: 5mm;

    min-height: 30mm;

}


.executive-blue-invoice-to-title {

    color: #1769aa;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 2.5mm;

}


.executive-blue-customer-name {

    color: #222222;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 1mm;

}


.executive-blue-customer-company {

    color: #444444;

    font-size: 9px;

    margin-bottom: 1.5mm;

}


.executive-blue-customer-address {

    color: #555555;

    font-size: 8.5px;

    line-height: 1.45;

}


.executive-blue-customer-contact {

    color: #555555;

    font-size: 8px;

    margin-top: 1mm;

}


/* =====================================================
   PRODUCTS
   ===================================================== */

.executive-blue-products-section {

    width: 100%;

    margin-top: 2mm;

    margin-bottom: 7mm;

}


.executive-blue-products-table-wrap {

    width: 100%;

    overflow: hidden;

}


.executive-blue-products-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    font-size: 8.5px;

}


.executive-blue-products-table thead tr {

    background: #1769aa;

    color: #ffffff;

}


.executive-blue-products-table thead th {

    padding: 3mm 2.5mm;

    background: #1769aa;

    color: #ffffff;

    font-size: 7px;

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;

    vertical-align: middle;

    white-space: nowrap;

    text-align: left;

}


.executive-blue-products-table td {

    padding: 2.5mm 2.5mm;

    border-bottom: 1px solid #dce5ec;

    vertical-align: top;

    color: #333333;

}


.executive-blue-col-description {

    width: 52%;

}


.executive-blue-col-price {

    width: 16%;

    text-align: right !important;

}


.executive-blue-col-quantity {

    width: 14%;

    text-align: center !important;

}


.executive-blue-col-total {

    width: 18%;

    text-align: right !important;

}


.executive-blue-product-name {

    font-weight: 700;

    color: #222222;

}


.executive-blue-product-description-text {

    margin-top: 0.8mm;

    color: #777777;

    font-size: 7.5px;

    line-height: 1.35;

}


.executive-blue-product-price {

    text-align: right;

    white-space: nowrap;

}


.executive-blue-product-quantity {

    text-align: center;

}


.executive-blue-product-total {

    text-align: right;

    font-weight: 700;

    color: #1769aa;

    white-space: nowrap;

}


.executive-blue-product-empty td {

    text-align: center;

    color: #777777;

    padding: 7mm 3mm;

}


/* =====================================================
   FINANCIAL SECTION
   Payment + Totals
   ===================================================== */

.executive-blue-financial-section {

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    column-gap: 12mm;

    align-items: start;

    width: 100%;

    margin-bottom: 7mm;

}


.executive-blue-payment-column,
.executive-blue-totals-column {

    min-width: 0;

}


/* =====================================================
   SECTION TITLES
   ===================================================== */

.executive-blue-section-title {

    color: #1769aa;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 2.5mm;

}


/* =====================================================
   PAYMENT
   ===================================================== */

.executive-blue-payment {

    width: 100%;

}


.executive-blue-payment-card {

    border: 1px solid #d7e4ef;

    background: #f8fbfd;

    padding: 3mm 4mm;

}


.executive-blue-payment-row {

    display: grid;

    grid-template-columns: 35mm 1fr;

    column-gap: 3mm;

    padding: 1.3mm 0;

    border-bottom: 1px solid #e4edf3;

    font-size: 8px;

}


.executive-blue-payment-row:last-child {

    border-bottom: none;

}


.executive-blue-payment-row span {

    color: #666666;

    font-weight: 600;

}


.executive-blue-payment-row strong {

    color: #222222;

    font-weight: 600;

    word-break: break-word;

}


.executive-blue-payment-terms {

    margin-top: 2.5mm;

    font-size: 8px;

}


.executive-blue-payment-terms-label {

    color: #1769aa;

    font-weight: 700;

    margin-bottom: 0.8mm;

}


.executive-blue-payment-terms-value {

    color: #555555;

    line-height: 1.4;

}


/* =====================================================
   TOTALS
   ===================================================== */

.executive-blue-totals {

    width: 100%;

    margin-left: auto;

    max-width: 78mm;

}


.executive-blue-total-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 5mm;

    min-height: 6mm;

    padding: 1.2mm 0;

    border-bottom: 1px solid #e5edf3;

    font-size: 8.5px;

}


.executive-blue-total-row span {

    color: #666666;

}


.executive-blue-total-row strong {

    color: #222222;

    font-weight: 600;

    white-space: nowrap;

}


.executive-blue-grand-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 5mm;

    margin-top: 2mm;

    padding: 3mm 3mm;

    background: #1769aa;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

}


.executive-blue-grand-total strong {

    font-size: 13px;

    white-space: nowrap;

}


/* =====================================================
   NOTES
   ===================================================== */

.executive-blue-notes {

    margin-bottom: 4mm;

}


.executive-blue-notes-content-box {

    color: #555555;

    font-size: 8px;

    line-height: 1.45;

    padding: 2.5mm 3mm;

    border-left: 2px solid #1769aa;

    background: #f8fbfd;

}


/* =====================================================
   TERMS
   ===================================================== */

.executive-blue-terms {

    margin-top: 2mm;

}


.executive-blue-terms-content {

    color: #666666;

    font-size: 7.5px;

    line-height: 1.45;

}


/* =====================================================
   SIGNATURE
   ===================================================== */

.executive-blue-signature {

    width: 55mm;

    text-align: center;

}


.executive-blue-signature-line {

    width: 100%;

    border-top: 1px solid #555555;

    margin-bottom: 2mm;

}


.executive-blue-signature-content {

    min-height: 12mm;

    display: flex;

    justify-content: center;

    align-items: center;

}


.executive-blue-signature-image {

    max-width: 45mm;

    max-height: 14mm;

    object-fit: contain;

}


.executive-blue-signature-text {

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 16px;

    color: #222222;

}


.executive-blue-signature-label {

    margin-top: 1mm;

    font-size: 7.5px;

    font-weight: 700;

    color: #555555;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}


/* =====================================================
   PRINT
   ===================================================== */

@media print {

    .executive-blue-invoice {

        width: 210mm;

        min-height: 297mm;

        margin: 0;

        padding: 8mm 9mm 7mm 9mm;

        box-shadow: none;

    }


    .executive-blue-products-table {

        break-inside: auto;

        page-break-inside: auto;

    }


    .executive-blue-product-row {

        break-inside: avoid;

        page-break-inside: avoid;

    }


    .executive-blue-financial-section,
    .executive-blue-bottom-section {

        break-inside: avoid;

        page-break-inside: avoid;

    }


    .executive-blue-payment,
    .executive-blue-totals,
    .executive-blue-signature {

        break-inside: avoid;

        page-break-inside: avoid;

    }

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media screen and (max-width: 800px) {

    .executive-blue-invoice {

        width: 100%;

        min-height: auto;

        padding: 24px;

    }


    .executive-blue-header-inner {

        flex-direction: column;

        gap: 20px;

    }


    .executive-blue-contact {

        width: 100%;

    }


    .executive-blue-parties {

        grid-template-columns: 1fr;

        row-gap: 25px;

    }


    .executive-blue-financial-section {

        grid-template-columns: 1fr;

        row-gap: 25px;

    }


    .executive-blue-totals {

        max-width: none;

    }


    .executive-blue-bottom-section {

        grid-template-columns: 1fr;

        row-gap: 30px;

    }


    .executive-blue-signature-column {

        justify-content: flex-start;

    }

}
/* =====================================================
   PARTIES / INVOICE INFORMATION
   Locked Reference Layout
   ===================================================== */

.executive-blue-parties {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 15mm;

    align-items: start;

    margin-top: 3mm;

    margin-bottom: 8mm;

}


/* =====================================================
   LEFT — INVOICE DETAILS
   ===================================================== */

.executive-blue-invoice-details {

    min-width: 0;

}


.executive-blue-invoice-title {

    margin-bottom: 8mm;

    color: #1769aa;

    font-size: 20px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.5px;

}


.executive-blue-invoice-meta {

    display: flex;

    flex-direction: column;

    gap: 2.2mm;

}


.executive-blue-meta-row {

    display: grid;

    grid-template-columns: 23mm 1fr;

    column-gap: 3mm;

    align-items: baseline;

    font-size: 7.5px;

    line-height: 1.3;

}


.executive-blue-meta-row span {

    font-weight: 700;

    color: #333333;

    white-space: nowrap;

}


.executive-blue-meta-row strong {

    font-weight: 500;

    color: #333333;

}


/* =====================================================
   DUE TOTAL
   ===================================================== */

.executive-blue-due-total {

    margin-top: 5mm;

}


.executive-blue-due-label {

    margin-bottom: 1.5mm;

    font-size: 7px;

    font-weight: 700;

    color: #333333;

}


.executive-blue-due-value {

    display: inline-block;

    min-width: 42mm;

    padding: 3mm 5mm;

    background: #1769aa;

    color: #ffffff;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

}


/* =====================================================
   RIGHT — INVOICE TO
   ===================================================== */

.executive-blue-invoice-to {

    min-width: 0;

    margin-top: 7mm;

    padding-left: 4mm;

    border-left: 1px solid #1769aa;

}


.executive-blue-invoice-to-title {

    margin-bottom: 4mm;

    color: #1769aa;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;

}


.executive-blue-customer {

    font-size: 7.5px;

    line-height: 1.45;

    color: #444444;

}


.executive-blue-customer-name {

    margin-bottom: 1mm;

    font-size: 9px;

    font-weight: 700;

    color: #222222;

}


.executive-blue-customer-company {

    margin-bottom: 1mm;

    font-weight: 600;

}


.executive-blue-customer-address {

    margin-bottom: 1mm;

}


.executive-blue-customer-contact {

    margin-top: 0.8mm;

}
/* =====================================================
   PRODUCTS TABLE
   Executive Blue — Locked Layout
   ===================================================== */

.executive-blue-products {

    width: 100%;

    margin-top: 2mm;

    margin-bottom: 7mm;

}


.executive-blue-products-table-wrap {

    width: 100%;

    overflow: visible;

}


.executive-blue-products-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    font-size: 7px;

}


/* =====================================================
   COLUMN WIDTHS
   ===================================================== */

.executive-blue-col-description {

    width: 58%;

    text-align: left;

}


.executive-blue-col-price {

    width: 14%;

    text-align: center;

}


.executive-blue-col-quantity {

    width: 12%;

    text-align: center;

}


.executive-blue-col-total {

    width: 16%;

    text-align: right;

}


/* =====================================================
   HEADER
   ===================================================== */

.executive-blue-products-table thead th {

    padding: 3mm 2.5mm;

    background: #1769aa;

    color: #ffffff;

    font-size: 7px;

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;

}

.executive-blue-products-table
.executive-blue-col-description {

    text-align: left;
}


.executive-blue-products-table
.executive-blue-col-price {

    text-align: center;

}


.executive-blue-products-table
.executive-blue-col-quantity {

    text-align: center;

}


.executive-blue-products-table
.executive-blue-col-total {

    text-align: right;

}

/* =====================================================
   PRODUCT ROW
   ===================================================== */

.executive-blue-product-row {

    page-break-inside: avoid;

    break-inside: avoid;

}


.executive-blue-product-row td {

    padding: 3mm 2.5mm;

    border-bottom: 1px solid #dddddd;

    vertical-align: top;

    line-height: 1.35;

}


/* =====================================================
   SKU
   ===================================================== */

.executive-blue-product-sku {

    margin-bottom: 0.8mm;

    font-size: 7.2px;

    font-weight: 700;

    color: #222222;

}



/* =====================================================
   PRODUCT NAME
   ===================================================== */

.executive-blue-product-name {

    font-size: 8px;

    font-weight: 500;

    color: #222222;

    line-height: 1.35;

}


/* =====================================================
   DESCRIPTION
   ===================================================== */

.executive-blue-product-description-text {

    margin-top: 0.7mm;

    font-size: 7px;

    line-height: 1.35;

    color: #777777;

    overflow-wrap: anywhere;

    word-break: normal;

}


/* =====================================================
   PRICE
   ===================================================== */

.executive-blue-product-price {

    text-align: center;

    white-space: nowrap;

}


/* =====================================================
   QUANTITY
   ===================================================== */

.executive-blue-product-quantity {

    text-align: center;

    white-space: nowrap;

}


/* =====================================================
   TOTAL
   ===================================================== */

.executive-blue-product-total {

    text-align: right;

    font-weight: 600;

    white-space: nowrap;

}


/* =====================================================
   EMPTY STATE
   ===================================================== */

.executive-blue-product-empty td {

    padding: 8mm;

    text-align: center;

    color: #777777;

}
/* =====================================================
   PRODUCTS — FINAL COLUMN ALIGNMENT
   ===================================================== */

.executive-blue-products-table {

    table-layout: fixed;

}


/* DESCRIPTION */

.executive-blue-products-table
.executive-blue-col-description {

    width: 58%;

    text-align: left !important;

}


/* PRICE */

.executive-blue-products-table
.executive-blue-col-price {

    width: 14%;

    text-align: right !important;

}


/* QUANTITY */

.executive-blue-products-table
.executive-blue-col-quantity {

    width: 12%;

    text-align: center !important;

}


/* TOTAL */

.executive-blue-products-table
.executive-blue-col-total {

    width: 16%;

    text-align: right !important;

}


/* BODY — PRICE */

.executive-blue-product-price {

    text-align: right !important;

    white-space: nowrap;

}


/* BODY — QUANTITY */

.executive-blue-product-quantity {

    text-align: center !important;

    white-space: nowrap;

}


/* BODY — TOTAL */

.executive-blue-product-total {

    text-align: right !important;

    white-space: nowrap;

}
/* =====================================================
   EXECUTIVE BLUE
   PAYMENT + TOTALS — FINAL SIDE BY SIDE
   ===================================================== */

.executive-blue-financial-section {

    display: grid !important;

    grid-template-columns: minmax(0, 1.25fr) minmax(70mm, 0.75fr) !important;

    gap: 10mm !important;

    width: 100%;

    align-items: start;

    margin-top: 5mm;

    margin-bottom: 7mm;

}


/* LEFT */

.executive-blue-payment-column {

    min-width: 0;

    width: 100%;

}


/* RIGHT */

.executive-blue-totals-column {

    min-width: 0;

    width: 100%;

}


/* Payment card */

.executive-blue-payment-card {

    width: 100%;

    box-sizing: border-box;

}


/* Totals stay compact on right */

.executive-blue-totals {

    width: 100%;

    max-width: none;

    margin-left: 0;

}


/* Payment rows */

.executive-blue-payment-row {

    display: grid;

    grid-template-columns: 34mm 1fr;

    gap: 4mm;

    align-items: center;

}


/* Totals rows */

.executive-blue-total-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 5mm;

}


/* Grand total */

.executive-blue-grand-total {

    width: 100%;

    box-sizing: border-box;

}
/* =====================================================
   SIGNATURE — UNDER TOTALS
   ===================================================== */

.executive-blue-totals-column
.executive-blue-signature-content {

    margin-top: 7mm;

    text-align: center;

}


.executive-blue-signature {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}


.executive-blue-signature-line {

    width: 42mm;

    border-top: 1px solid #777;

    margin-bottom: 2mm;

}


.executive-blue-signature-image {

    display: block;

    max-width: 32mm;

    max-height: 16mm;

    object-fit: contain;

    margin: 0 auto 1mm;

}


.executive-blue-signature-text {

    font-size: 8px;

    font-weight: 600;

    margin-bottom: 1mm;

}


.executive-blue-signature-label {

    font-size: 7px;

    font-weight: 700;

    text-transform: uppercase;

    color: #555;

}
/* =====================================================
   EXECUTIVE BLUE — BOTTOM AREA
   NOTES LEFT + SIGNATURE RIGHT
   ===================================================== */

.executive-blue-bottom-section {

    width: 100%;

    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    column-gap: 10mm;

    align-items: end;

    margin-top: 8mm;

    padding-top: 0;

    margin-bottom: 4mm;

    page-break-inside: avoid;

    break-inside: avoid;

}


.executive-blue-terms-column {

    min-width: 0;

    width: 100%;

    align-self: end;

}


.executive-blue-signature-column {

    min-width: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    align-self: end;

}


.executive-blue-signature-column
.executive-blue-signature {

    width: 100%;

    margin: 0;

}


.executive-blue-bottom-border {

    width: 100%;

    height: 3px;

    background: #1769aa;

    margin-top: 0;

    flex-shrink: 0;

    page-break-before: avoid;

    break-before: avoid;

}