/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Document Styles */
body {
    font-family: DejaVuSans, Arial, sans-serif;
    font-size: 10pt;
    line-height: 1.5;
    color: #333333;
    background-color: #ffffff;
    padding: 11px; /* 3mm ≈ 11px at 96 DPI */
}

/* Invoice Container */
.invoice-container {
    max-width: 794px; /* 210mm ≈ 794px at 96 DPI */
    margin: 0 auto;
    background-color: #ffffff;
    padding: 19px; /* 5mm ≈ 19px */
    border: 1px solid #e0e0e0;
}

/* Header Styles */
.invoice-header {
    margin-bottom: 11px; /* 3mm */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px; /* 2mm */
}

.invoice-title {
    text-align: center;
    margin-bottom: 4px; /* 1mm */
}

.invoice-title h1 {
    font-size: 24pt;
    color: #333333;
    font-weight: bold;
}

.company-details {
    display: block;
}

.company-left {
    display: block;
}

.company-details .logo {
    border: 1px solid #e0e0e0;
    padding: 4px; /* 1mm */
    margin-bottom: 4px; /* 1mm */
}

.company-details .address {
    font-size: 10pt;
    color: #777777;
    margin-bottom: 4px; /* 1mm */
}

/* Client and Invoice Info */
.invoice-info {
    margin-bottom: 11px; /* 3mm */
}

.invoice-info-table {
    width: 100%;
    border-collapse: collapse;
}

.client-info {
    width: 50%;
    vertical-align: top;
    padding-right: 8px; /* 2mm */
}

.client-info h2 {
    font-size: 14pt;
    margin-bottom: 8px; /* 2mm */
    color: #555555;
    font-weight: bold;
}

.client-info div {
    font-size: 10pt;
    margin-bottom: 2px; /* 0.5mm */
}

.invoice-details {
    width: 50%;
    vertical-align: top;
    padding-left: 8px; /* 2mm */
    text-align: right;
}

.invoice-details-table {
    width: 100%;
    margin-left: auto;
}

.invoice-details-row td {
    font-size: 10pt;
    padding: 2px 0; /* 0.5mm */
}

.invoice-details-label {
    font-weight: bold;
    width: 132px; /* 35mm ≈ 132px */
    text-align: left;
}

/* Table Styles */
.invoice-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 11px; /* 3mm */
}

.invoice-items th {
    background-color: #f3f3f3;
    padding: 8px; /* 2mm */
    text-align: left;
    font-size: 10pt;
    font-weight: bold;
}

.invoice-items th:nth-child(3),
.invoice-items th:nth-child(4),
.invoice-items th:nth-child(5) {
    text-align: right;
}

.invoice-items td {
    padding: 8px; /* 2mm */
    font-size: 10pt;
}

.invoice-items td:nth-child(3),
.invoice-items td:nth-child(4),
.invoice-items td:nth-child(5) {
    text-align: right;
}

/* Summary Styles */
.invoice-summary {
    margin-bottom: 11px; /* 3mm */
}

.summary-content {
    margin-left: auto;
    width: 265px; /* 70mm ≈ 265px */
    background-color: #f9f9f9;
    padding: 8px; /* 2mm */
}

.summary-content table {
    width: 100%;
}

.summary-row td {
    font-size: 10pt;
    padding: 2px 0; /* 0.5mm */
    vertical-align: middle;
}

.summary-label {
    font-weight: bold;
    width: 132px; /* 35mm ≈ 132px */
}

.summary-value {
    text-align: right;
    width: 113px; /* 30mm ≈ 113px */
}

.total-row td {
    font-weight: bold;
    font-size: 12pt;
    padding-top: 4px; /* 1mm */
}

/* Payment Info and Notes */
.payment-info, .notes-section {
    margin-bottom: 11px; /* 3mm */
}

.payment-info h2, .notes-section h2 {
    font-size: 14pt;
    margin-bottom: 8px; /* 2mm */
    color: #555555;
    font-weight: bold;
}

.payment-info p, .notes-section p {
    font-size: 10pt;
}

/* Footer */
.invoice-footer {
    border-top: 2px solid #e0e0e0;
    padding-top: 8px; /* 2mm */
    text-align: center;
}

.invoice-footer p {
    font-size: 9pt;
    color: #777777;
    margin-bottom: 4px; /* 1mm */
}

/* Debug Fallback */
.logo-fallback {
    font-size: 9pt;
    color: #ff0000;
    display: none;
}

/* Print Styles */
@media print {
    body {
        padding: 0;
    }
    .invoice-container {
        border: none;
    }
}