/* =====================================================
   INVOICE SIMPLE — TEMPLATE 12
   Clean Premium Minimal Invoice
   Version : 2.0.0
   Invoice Create Free

   IMPORTANT:
   - Template 12 ONLY
   - No shared engine changes
   - No duplicate override blocks
   - Final Notes + Footer stay fixed at bottom of A4
   ===================================================== */


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

.invoice-simple {
    --is-primary: #183b5b;
    --is-primary-dark: #102d46;
    --is-text: #1f2933;
    --is-muted: #6b7280;
    --is-border: #d9e0e6;
    --is-soft: #f5f7f9;
    --is-white: #ffffff;

    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--is-text);
    background: #ffffff;
}


/* =====================================================
   A4 PAGE
   ===================================================== */

.invoice-simple-page {
    position: relative;

    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;

    /*
     * Bottom space is reserved for the fixed
     * Notes + Footer area.
     */
    padding: 7mm 16mm 43mm;

    box-sizing: border-box;
    background: var(--is-white);
}


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

.invoice-simple-header {
    width: 100%;
    margin: 0;
    padding: 0;
}

.invoice-simple-header-inner {
    position: relative;

    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10mm;
    align-items: start;
}


/* =====================================================
   LEFT — INVOICE INFORMATION
   ===================================================== */

.invoice-simple-invoice-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: 6mm;
}

.invoice-simple-title {
    position: relative;

    margin: 0;
    padding-left: 6mm;

    font-size: 23px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: var(--is-primary-dark);
}

.invoice-simple-title::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 2mm;
    height: 9mm;

    background: var(--is-primary-dark);
}

.invoice-simple-title::after {
    content: "";

    display: block;
    width: 18mm;
    height: 1px;

    margin-top: 3mm;

    background: var(--is-primary-dark);
}

.invoice-simple-invoice-details {
    width: 100%;
    max-width: 82mm;
    margin-top: 2.5mm;
}

.invoice-simple-detail-row {
    display: grid;
    grid-template-columns: 31mm 1fr;
    gap: 4mm;

    padding: 1.2mm 0;

    border-bottom: 1px solid var(--is-border);
}

.invoice-simple-detail-label {
    font-size: 8.5px;
    line-height: 1.3;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--is-muted);
}

.invoice-simple-detail-value {
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--is-text);
}


/* =====================================================
   HEADER CENTER DIVIDER
   ===================================================== */

.invoice-simple-header-inner::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background: var(--is-border);
    transform: translateX(-5mm);
}


/* =====================================================
   RIGHT — COMPANY / SUPPLIER INFORMATION
   ===================================================== */

.invoice-simple-company-area {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    padding-left: 6mm;
}

.invoice-simple-company-brand {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 3mm;
}

.invoice-simple-logo {
    width: 13mm;
    height: 13mm;
    flex: 0 0 13mm;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.invoice-simple-logo img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}

.invoice-simple-company-name {
    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--is-primary-dark);
}

.invoice-simple-company-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.invoice-simple-company-details {
    margin-top: 1.5mm;

    font-size: 8px;
    line-height: 1.35;

    color: var(--is-muted);
}

.invoice-simple-company-line {
    margin: 0;
}


/* =====================================================
   SUPPLIER HEADING
   ===================================================== */

.invoice-simple-supplier-heading {
    margin: 0 0 1.5mm 0;

    font-size: 7px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .8px;

    color: var(--is-primary);
}


/* =====================================================
   ADDRESS / CONTACT ROWS
   ===================================================== */

.invoice-simple-address-heading {
    margin: 0 0 1mm 0;

    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .8px;

    color: var(--is-primary);
}

.invoice-simple-company-detail-row {
    display: flex;
    align-items: flex-start;

    gap: 2.5mm;
    margin: 0;
}

.invoice-simple-company-address {
    min-width: 0;
    flex: 1;
}

.invoice-simple-contact-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;

    gap: 2.5mm;
}

.invoice-simple-contact-label {
    min-width: 11mm;

    font-weight: 700;
    color: var(--is-text);
}

.invoice-simple-company-detail-row .invoice-simple-contact-label {
    min-width: 11mm;

    font-weight: 700;
    color: var(--is-text);
}


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

.invoice-simple-header-divider {
    width: 100%;
    height: 1px;

    margin-top: 3mm;

    background: var(--is-primary);
}


/* =====================================================
   HIDDEN SUPPLIER TARGET
   ===================================================== */

.invoice-simple-supplier-target {
    display: none !important;
}


/* =====================================================
   BILL TO / SHIP TO
   ===================================================== */

.invoice-simple-parties {
    width: 100%;
    margin-top: 4mm;
}

.invoice-simple-parties-inner {
    display: grid;

    grid-template-columns: 1fr 1fr;
    gap: 7mm;
}

.invoice-simple-party-block {
    min-width: 0;

    padding: 2.5mm 3mm;

    box-sizing: border-box;

    background: var(--is-soft);

    border-left: 2px solid var(--is-primary);
}

.invoice-simple-party-heading {
    margin: 0 0 1.8mm 0;

    font-size: 7.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .8px;

    color: var(--is-primary);
}

.invoice-simple-party-content {
    font-size: 7.5px;
    line-height: 1.3;
    color: var(--is-muted);
}

.invoice-simple-party-name {
    margin-bottom: .4mm;

    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;

    color: var(--is-text);
}

.invoice-simple-party-person {
    margin-bottom: .5mm;

    font-weight: 600;
    color: var(--is-text);
}

.invoice-simple-party-line {
    margin: 0;
}

.invoice-simple-party-contact {
    display: flex;
    align-items: baseline;

    gap: 2.5mm;
    margin-top: .2mm;
}

.invoice-simple-party-contact-label {
    min-width: 11mm;

    font-weight: 700;
    color: var(--is-text);
}


/* =====================================================
   PARTY COMPACT SUPPORT
   ===================================================== */

.invoice-simple-party-row {
    width: 100%;

    display: grid;
    grid-template-columns: 18mm 1fr;
    gap: 4mm;

    align-items: start;
}

.invoice-simple-party-content-wrap {
    min-width: 0;
}


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

.invoice-simple-products-section {
    width: 100%;
    margin-top: 5mm;
}

.invoice-simple-products-heading {
    margin-bottom: 2mm;
}

.invoice-simple-products-title {
    font-size: 8.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 1px;

    color: var(--is-primary);
}

.invoice-simple-products-list {
    width: 100%;
}


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

.invoice-simple-product {
    width: 100%;

    display: grid;
    grid-template-columns: 6mm 1fr;
    gap: 3mm;

    padding: 2.2mm 0;

    box-sizing: border-box;

    border-bottom: 1px solid var(--is-border);

    break-inside: avoid;
    page-break-inside: avoid;
}

.invoice-simple-product:first-child {
    border-top: 1px solid var(--is-border);
}

.invoice-simple-product-number {
    width: 5.5mm;
    height: 5.5mm;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--is-primary);
    color: #ffffff;

    font-size: 6.5px;
    font-weight: 800;
}

.invoice-simple-product-main {
    min-width: 0;
}

.invoice-simple-product-name {
    font-size: 8.5px;
    line-height: 1.15;
    font-weight: 800;

    color: var(--is-text);
}

.invoice-simple-product-description {
    max-width: 140mm;

    margin-top: .5mm;

    font-size: 7px;
    line-height: 1.15;

    color: var(--is-muted);
}

.invoice-simple-product-sku {
    display: flex;
    gap: 2mm;

    margin-top: .5mm;

    font-size: 6.5px;
    color: var(--is-muted);
}

.invoice-simple-product-label {
    font-size: 6.5px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: .6px;

    color: var(--is-muted);
}


/* =====================================================
   PRODUCT VALUES
   ===================================================== */

.invoice-simple-product-details {
    margin-top: 1mm;

    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;

    gap: 2mm;
}

.invoice-simple-product-detail {
    display: flex;
    flex-direction: column;

    gap: .5mm;
}

.invoice-simple-product-value {
    font-size: 7.5px;
    line-height: 1.1;

    font-weight: 700;
    color: var(--is-text);
}

.invoice-simple-product-detail-total {
    text-align: right;
    align-items: flex-end;
}

.invoice-simple-products-empty {
    padding: 5mm 0;

    text-align: center;

    font-size: 8px;
    color: var(--is-muted);

    border-top: 1px solid var(--is-border);
    border-bottom: 1px solid var(--is-border);
}


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

.invoice-simple-summary {
    width: 100%;

    margin-top: 3.5mm;

    display: grid;
    grid-template-columns: 1fr 70mm;
    gap: 8mm;

    align-items: start;
}

.invoice-simple-summary-spacer {
    min-height: 1px;
}

.invoice-simple-totals-area {
    width: 100%;
}

.invoice-simple-totals {
    width: 100%;
}

.invoice-simple-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8mm;

    padding: 1.2mm 0;

    border-bottom: 1px solid var(--is-border);
}

.invoice-simple-total-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--is-muted);
}

.invoice-simple-total-value {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--is-text);
}

.invoice-simple-grand-total {
    margin-top: 1.5mm;

    padding: 2.5mm 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8mm;

    border-top: 2px solid var(--is-primary);
    border-bottom: 2px solid var(--is-primary);
}

.invoice-simple-grand-total-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;

    color: var(--is-primary-dark);
}

.invoice-simple-grand-total-value {
    font-size: 13px;
    line-height: 1;

    font-weight: 800;

    color: var(--is-primary-dark);
}


/* =====================================================
   FINAL AREA — LOCKED FOOTER ZONE
   Template 12 — Invoice Simple
   ===================================================== */

.invoice-simple-final {
    position: absolute;

    left: 16mm;
    right: 16mm;
    bottom: 10mm;

    width: auto;
    height: 27mm;

    margin: 0 !important;
    padding: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 58mm;
    column-gap: 14mm;

    align-items: end;

    box-sizing: border-box;

    break-inside: avoid;
    page-break-inside: avoid;

    z-index: 5;
}


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

.invoice-simple-notes {
    width: 100%;
    margin: 0;
    padding: 0;

    align-self: end;
}

.invoice-simple-notes-heading {
    margin: 0 0 1.5mm 0;

    font-size: 8px;
    line-height: 1.2;

    font-weight: 800;
    letter-spacing: .14em;

    color: var(--is-primary);
}

.invoice-simple-notes-heading::after {
    content: "";

    display: block;

    width: 7mm;
    height: .25mm;

    margin-top: .8mm;

    background: var(--is-primary);
}

.invoice-simple-notes-text {
    max-width: 100mm;

    margin: 0;

    font-size: 7px;
    line-height: 1.35;

    color: #66717c;

    white-space: pre-line;
}


/* =====================================================
   FOOTER
   ===================================================== */

.invoice-simple-footer {
    width: 100%;
    margin: 0;
    padding: 0;

    align-self: end;
}

.invoice-simple-footer-inner {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 1mm;
}


/* =====================================================
   THANK YOU
   ===================================================== */

.invoice-simple-thank-you {
    width: 100%;

    margin: 0;

    text-align: right;
}

.invoice-simple-thank-you-title {
    font-size: 8px;
    line-height: 1.25;

    font-weight: 600;

    color: var(--is-primary-dark);
}

.invoice-simple-thank-you-tagline {
    margin-top: .4mm;

    font-size: 6.5px;
    line-height: 1.2;

    color: var(--is-muted);
}


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

.invoice-simple-signature {
    width: 100%;
    margin: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    text-align: right;
}

.invoice-simple-signature-image-wrap {
    width: 34mm;
    height: 5mm;

    margin: 0 0 .4mm 0;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    overflow: hidden;
}

.invoice-simple-signature-image {
    display: block;

    max-width: 30mm;
    max-height: 4.5mm;

    object-fit: contain;
    object-position: right bottom;
}

.invoice-simple-signature-line {
    width: 34mm;
    height: .25mm;

    margin: 0;

    background: var(--is-primary);
}

.invoice-simple-signature-label {
    margin-top: .8mm;

    font-size: 6.3px;
    line-height: 1.15;

    font-weight: 800;
    letter-spacing: .1em;

    color: #536170;

    text-align: right;
}

.invoice-simple-signature-name {
    margin-top: .4mm;

    font-size: 7px;
    line-height: 1.15;

    font-weight: 600;

    color: var(--is-primary-dark);
}

.invoice-simple-signature-title {
    margin-top: .15mm;

    font-size: 6.3px;
    line-height: 1.15;

    color: var(--is-muted);
}


/* =====================================================
   PRINT — KEEP FOOTER LOCKED
   ===================================================== */

@media print {

    .invoice-simple-final {
        position: absolute;

        left: 16mm;
        right: 16mm;
        bottom: 10mm;

        width: auto;
        height: 27mm;

        margin: 0 !important;
        padding: 0;

        display: grid;
        grid-template-columns: minmax(0, 1fr) 58mm;
        column-gap: 14mm;

        align-items: end;

        break-inside: avoid;
        page-break-inside: avoid;
    }

}


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

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

    .invoice-simple-page {
        width: 100%;
        min-height: auto;

        padding: 28px;
    }

    .invoice-simple-header-inner {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .invoice-simple-header-inner::after {
        display: none;
    }

    .invoice-simple-company-area {
        padding-left: 0;

        text-align: left;
        align-items: flex-start;
    }

    .invoice-simple-company-brand {
        justify-content: flex-start;
    }

    .invoice-simple-contact-row {
        justify-content: flex-start;
    }

    .invoice-simple-parties-inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .invoice-simple-summary {
        grid-template-columns: 1fr;
    }

    /*
     * On small screens the fixed A4 footer becomes
     * normal flow so it does not overlap content.
     */
    .invoice-simple-page {
        padding-bottom: 28px;
    }

    .invoice-simple-final {
        position: static;

        width: 100%;

        margin-top: 24px !important;

        grid-template-columns: 1fr;
        gap: 18px;
    }

    .invoice-simple-thank-you {
        text-align: left;
    }

    .invoice-simple-signature {
        align-items: flex-start;
        text-align: left;
    }

    .invoice-simple-signature-line {
        margin-left: 0;
        margin-right: auto;
    }

    .invoice-simple-signature-image-wrap {
        justify-content: flex-start;
    }
}