/* Global Styles */
body {
    font-family: DejaVuSans, Arial, sans-serif;
    font-size: 10pt;
    color: #333333;
    line-height: 1.3;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

.invoice-container {
    width: 100%;
    max-width: 794px; /* 210mm ≈ 794px at 96 DPI */
    margin: 0 auto;
    padding: 19px; /* 5mm ≈ 19px */
    box-sizing: border-box;
}

/* Header Styles */
.invoice-header {
    background-color: #ff6f61;
    padding: 19px; /* 5mm ≈ 19px */
    border-radius: 8px; /* 2mm ≈ 8px */
    margin-bottom: 19px; /* 5mm ≈ 19px */
    color: #ffffff;
}

.header-table {
    width: 100%;
    border-collapse: collapse;
}

.header-table td {
    vertical-align: top;
    padding: 8px; /* 2mm ≈ 8px */
}

.company-details {
    width: 50%;
}

.invoice-details {
    width: 50%;
    text-align: right;
    color: #f0f0f0;
}

.company-logo {
    max-width: 76px; /* 20mm ≈ 76px */
    max-height: 76px; /* 20mm ≈ 76px */
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 1mm ≈ 4px, 2mm ≈ 8px */
    margin-bottom: 8px; /* 2mm ≈ 8px */
}

.company-name {
    font-size: 14pt;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8px; /* 2mm ≈ 8px */
}

.company-address {
    font-size: 9pt;
    color: #f0f0f0;
}

.invoice-title {
    font-size: 18pt;
    font-weight: bold;
    margin-bottom: 8px; /* 2mm ≈ 8px */
    text-transform: uppercase;
}

.invoice-details div {
    font-size: 9pt;
    margin-bottom: 4px; /* 1mm ≈ 4px */
    color: #f0f0f0;
}

/* Section Styles */
.section {
    background-color: #ffffff;
    padding: 15px; /* 4mm ≈ 15px */
    border-radius: 8px; /* 2mm ≈ 8px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 1mm ≈ 4px, 2mm ≈ 8px */
    margin-bottom: 19px; /* 5mm ≈ 19px */
    width: 100%;
}

.section-title {
    font-size: 12pt;
    font-weight: bold;
    color: #00c4b4;
    margin-bottom: 11px; /* 3mm ≈ 11px */
    border-bottom: 2px solid #00c4b4; /* 0.5mm ≈ 2px */
    padding-bottom: 4px; /* 1mm ≈ 4px */
}

/* Billing/Shipping Details */
.billing-shipping-table {
    width: 100%;
    border-collapse: collapse;
}

.billing-info, .shipping-info {
    width: 50%;
    vertical-align: top;
    padding: 8px; /* 2mm ≈ 8px */
    font-size: 9pt;
}

.billing-info div, .shipping-info div {
    margin-bottom: 4px; /* 1mm ≈ 4px */
}

/* Items Table */
.items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
}

.items-table th {
    background-color: #6a1b9a;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    padding: 8px; /* 2mm ≈ 8px */
    border-bottom: 2px solid #dddddd; /* 0.5mm ≈ 2px */
}

.items-table td {
    padding: 8px; /* 2mm ≈ 8px */
    border-bottom: 1px solid #eeeeee; /* 0.3mm ≈ 1px */
}

.items-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Totals Table */
.totals-table {
    width: 40%;
    float: right;
    font-size: 9pt;
    border-collapse: collapse;
}

.totals-table td {
    padding: 4px; /* 1mm ≈ 4px */
}

.totals-table .total-row {
    font-weight: bold;
    color: #ff3e7d;
    font-size: 10pt;
}

.totals-label {
    text-align: right;
}

.totals-value {
    text-align: right;
    width: 95px; /* 25mm ≈ 95px */
}

/* Notes Section */
.notes-section {
    background-color: #e3f2fd;
    padding: 15px; /* 4mm ≈ 15px */
    border-left: 4px solid #ff6f61; /* 1mm ≈ 4px */
    border-radius: 8px; /* 2mm ≈ 8px */
    margin-bottom: 19px; /* 5mm ≈ 19px */
}

.notes-title {
    font-weight: bold;
    color: #ff6f61;
    margin-bottom: 8px; /* 2mm ≈ 8px */
}

/* Footer Styles */
.invoice-footer {
    text-align: center;
    font-size: 8pt;
    color: #777777;
    border-top: 2px solid #00c4b4; /* 0.5mm ≈ 2px */
    padding-top: 11px; /* 3mm ≈ 11px */
    clear: both;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Debug Fallback */
.logo-fallback {
    font-size: 8pt;
    color: #ff0000;
    display: none;
}