/**
 * customer_statement.css
 * Author: Jibe Ibe
 * Created: 2023-05-15
 * Modified Date: 2025-06-30
 * Version: 1.2.0
 * Description: CSS for customer and supplier statements in TeliCRM
 */

@media screen {
    .print-format-gutter {
        background-color: #d1d8dd;
        padding: 30px 0px;
    }
    .print-format {
        background-color: white;
        box-shadow: 0px 0px 9px rgba(0,0,0,0.5);
        max-width: 8.3in;
        min-height: 11.69in;
        padding: 0.25in;
        margin: auto;
    }
    .print-format.landscape {
        max-width: 11.69in;
        padding: 0.2in;
    }
    .page-break {
        padding: 30px 0px;
        border-bottom: 1px dashed #888;
    }
    .page-break:first-child {
        padding-top: 0px;
    }
    .page-break:last-child {
        border-bottom: 0px;
    }
    /* mozilla hack for images in table */
    body:last-child .print-format td img {
        width: 100% !important;
    }
    @media(max-width: 767px) {
        .print-format {
            padding: 0.2in;
        }
    }
}

@media print {
    .print-format p {
        margin-left: 1px;
        margin-right: 1px;
    }
}

.disabled-check {
    color: #eee;
}

.data-field {
    margin-top: 5px;
    margin-bottom: 5px;
}

.data-field .value {
    word-wrap: break-word;
}

.important .value {
    font-size: 120%;
    font-weight: bold;
}

.important label {
    line-height: 1.8;
    margin: 0px;
}

.table {
    margin: 20px 0px;
    border-collapse: collapse;
    width: 100%;
}

/* Zebra striping for table rows */
.table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Hover effect for better user experience */
.table tbody tr:hover {
    background-color: #f0f4f7;
}

.square-image {
    width: 100%;
    height: 0;
    padding: 50% 0;
    background-size: contain;
    /*background-size: cover;*/
    background-repeat: no-repeat !important;
    background-position: center center;
    border-radius: 4px;
}

.print-item-image {
    object-fit: contain;
}

.pdf-variables, .pdf-variable, .visible-pdf {
    display: none !important;
}

.print-format {
    font-size: 9pt;
    font-family: "Helvetica Neue", Helvetica, Arial, "Open Sans", sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    line-height: 1.5;
}

.print-format table {
    font-size: 9pt;
    font-family: "Helvetica Neue", Helvetica, Arial, "Open Sans", sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.page-break {
    page-break-after: always;
}

.print-heading {
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
}

.print-heading h2 {
    margin: 0px;
}

.print-heading h4 {
    margin-top: 5px;
}

table.no-border, table.no-border td {
    border: 0px;
}

.print-format label {
    /* wkhtmltopdf breaks label into multiple lines when it is inline-block */
    display: block;
}

.print-format img {
    max-width: 100%;
}

.print-format table td > .primary:first-child {
    font-weight: bold;
}

.print-format td, .print-format th {
    vertical-align: top !important;
    padding: 8px !important;
}

.print-format p {
    margin: 3px 0px 3px;
}

table td div {
    /* needed to avoid partial cutting of text between page break in wkhtmltopdf */
    page-break-inside: avoid !important;
}

/* hack for webkit specific browser */
@media (-webkit-min-device-pixel-ratio:0) {
    thead, tfoot {
        display: table-header-group;
    }
}

[document-status] {
    margin-bottom: 5mm;
}

.signature-img {
    background: #fff;
    border-radius: 3px;
    margin-top: 5px;
    max-height: 150px;
}

.print-preview [data-fieldtype="Table"] {
    overflow: auto;
}

.print-heading {
    text-align: right;
    text-transform: uppercase;
    color: #666;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d1d8dd;
}

/* Improved spacing for headings */
h2, h4, h5, h6 {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Better spacing for paragraphs in the footer section */
.print-format p {
    margin: 8px 0;
    line-height: 1.5;
}

/* Format the thank you and payment instructions section */
.print-format p b {
    color: #1a3f77;
}

/* Footer message styling */
.footer-message {
    margin-top: 20px;
    padding: 15px;
    border-top: 1px solid #eee;
}

.footer-message p {
    margin: 5px 0;
}

.footer-message p i {
    color: #777;
    font-size: 0.95em;
}

.print-heading h2 {
    font-size: 24px;
}

.print-format th {
    background-color: #f1f5f9 !important;
    border-bottom: 1px solid #e6e9ef !important;
    color: #1a3f77;
    font-weight: 600;
    padding: 10px 8px !important;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Statement header styling */
.statement-header {
    margin-bottom: 25px;
}

.statement-header h2 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #1a3f77;
    font-weight: 600;
}

.statement-header .company-name {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 500;
}

.statement-header .address-block {
    margin: 15px 0;
    line-height: 1.4;
    display: flex;
    justify-content: center;
}

.statement-header .address-container {
    text-align: left;
    display: inline-block;
}

.statement-header .address-line {
    font-weight: 500;
}

.statement-header .statement-period {
    margin: 20px 0 15px;
    font-weight: normal;
}

.statement-header .date-range {
    font-weight: 500;
    display: inline-block;
    margin-left: 5px;
}

/* Aging Summary Table Styling */
.mt-4 {
    margin-top: 1.5rem;
    font-size: 1.1em;
    color: #1a3f77;
    font-weight: 600;
}

/* Aging columns with progressive color intensity */
/* Current (0-30 days) */
.table thead tr th:nth-child(1) {
    background-color: #f1f5f9 !important;
}

/* 31-60 days */
.table thead tr th:nth-child(2) {
    background-color: #e5edf5 !important;
}

/* 61-90 days */
.table thead tr th:nth-child(3) {
    background-color: #d9e5f1 !important;
}

/* 91-120 days */
.table thead tr th:nth-child(4) {
    background-color: #cddded !important;
}

/* 121+ days */
.table thead tr th:nth-child(5) {
    background-color: #c1d5e9 !important;
}

/* Ensure all amount values are right-aligned */
.text-right {
    text-align: right !important;
    padding-right: 10px !important;
}

/* Add a specific class for the aging summary table */
table.table-bordered[style="width:100%;"] {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

/* Make the aging summary table stand out a bit */
table.table-bordered[style="width:100%;"] tbody td {
    padding: 8px 10px !important;
    font-weight: 500;
}

/* Aging Summary header styling with color coding (no borders) */
.aging-summary-section table thead th[data-days="0-30"] {
    background-color: #e6f7ff !important; /* Light blue */
}

.aging-summary-section table thead th[data-days="31-60"] {
    background-color: #fff8e6 !important; /* Light yellow */
}

.aging-summary-section table thead th[data-days="61-90"] {
    background-color: #ffebee !important; /* Light red */
}

.aging-summary-section table thead th[data-days="91-120"] {
    background-color: #ffcdd2 !important; /* Medium red */
}

.aging-summary-section table thead th[data-days="121+"] {
    background-color: #ef9a9a !important; /* Darker red */
}

/* Ensure colors print correctly */
@media print {
    .aging-summary-section table thead th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Bottom margin spacer to ensure the total line is not too close to the edge */
.bottom-margin-spacer {
    height: 40px; /* Add 40px space at the bottom */
    width: 100%;
    margin-bottom: 20px;
    clear: both;
}

/* Ensure proper page breaking behavior */
@media print {
    .bottom-margin-spacer {
        display: block;
        page-break-after: avoid;
    }
}