/* --- Fonts & Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');
:root {
    --primary-font: 'Roboto', sans-serif; --heading-font: 'Orbitron', sans-serif;
    --bg-color: #1a1a2e; --panel-bg: #16213e; --text-color: #e0e0e0; /* Light text for controls/date */
    --accent-color: #00f5ff; --accent-hover: #6dffff; --border-color: #4a4a6a;
    --heading-color: #ffffff; /* Control Panel Headings */
    --placeholder-color: #8a8a9e; --danger-color: #ff4d6d;
    --success-color: #3bff86; --input-bg: #2a2a4a; --input-border: #4a4a6a;
    --shadow-color: rgba(0, 245, 255, 0.1);
    --invoice-bg: #ffffff; --invoice-text: #343a40;
    --invoice-text-light: #6c757d; /* Default Dark Grey for inputs */
    --invoice-heading: #000000; /* Black for typed text & invoice headings */
    --invoice-border-light: #e9ecef; --invoice-border-dark: #dee2e6;
    --invoice-header-bg: #f8f9fa; --invoice-accent: var(--accent-color); --invoice-total-bg: #f1f3f5;
    --table-header-bg: #343a40; --table-header-text: #ffffff;
}

/* --- General & Reset --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--primary-font); background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; padding: 15px; font-size: 14px; }

/* --- Layout Container --- */
.invoice-generator-container { display: flex; flex-direction: column; gap: 25px; max-width: 1200px; margin: 0 auto; }

/* --- Controls Section Styles --- */
.invoice-generator-controls { background-color: var(--panel-bg); padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); width: 100%; }
.invoice-generator-controls h2, .invoice-generator-controls h3 { font-family: var(--heading-font); color: var(--heading-color) !important; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.invoice-generator-controls h3 { font-size: 1.1em; border-bottom: 1px solid var(--accent-color); padding-bottom: 5px; }
.control-section { margin-bottom: 20px; }
.control-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 0.9em; color: var(--accent-color); }

/* General Input Styles */
.invoice-generator-controls input[type="text"],
.invoice-generator-controls input[type="email"],
.invoice-generator-controls input[type="number"],
/* Exclude date inputs from the default dark grey text rule */
/* .invoice-generator-controls input[type="date"], */
.invoice-generator-controls textarea,
.invoice-generator-controls select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--input-border); background-color: var(--input-bg);
    color: var(--invoice-text-light); /* <<< DEFAULT: Dark Grey text */
    border-radius: 4px; font-family: var(--primary-font); font-size: 1em; margin-bottom: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Style for typed text in inputs/textarea (excluding date) */
.invoice-generator-controls input[type="text"]:not(:placeholder-shown),
.invoice-generator-controls input[type="email"]:not(:placeholder-shown),
.invoice-generator-controls input[type="number"]:not(:placeholder-shown),
.invoice-generator-controls textarea:not(:placeholder-shown) {
     color: var(--invoice-heading); /* <<< Black text when typing/filled */
}
/* Style for Select (always has a value) */
.invoice-generator-controls select {
    color: var(--invoice-heading); /* <<< Black text for selected option */
}

/* --- Specific Styles for Date Inputs --- */
.invoice-generator-controls input[type="date"] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--input-border); background-color: var(--input-bg);
    color: var(--text-color); /* <<< DEFAULT: White/Light text for date */
    border-radius: 4px; font-family: var(--primary-font); font-size: 1em; margin-bottom: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Style the date picker indicator (calendar icon) - WebKit */
.invoice-generator-controls input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Invert colors to make it white/light */
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.invoice-generator-controls input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
/* Style the date picker indicator (Firefox - less reliable) */
/* Note: Firefox styling for date input parts is limited */
/* You might not get the icon white, but text should be okay */

/* Style placeholder text */
.invoice-generator-controls input::placeholder,
.invoice-generator-controls textarea::placeholder { color: var(--placeholder-color); opacity: 1; }
/* Focus styles */
.invoice-generator-controls input:focus,
.invoice-generator-controls textarea:focus,
.invoice-generator-controls select:focus {
    outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--shadow-color);
}

/* Other Control Styles */
.invoice-generator-controls select { appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px auto; padding-right: 30px; }
.invoice-generator-controls select option { background-color: var(--input-bg); color: var(--text-color); }
.invoice-generator-controls input[type="file"] { color: var(--text-color); font-size: 0.9em; padding: 5px 0; margin-bottom: 10px; }
.invoice-generator-controls input[type="file"]::file-selector-button { padding: 8px 15px; margin-right: 10px; border: none; background-color: var(--accent-color); color: var(--bg-color); border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; font-weight: bold; }
.invoice-generator-controls input[type="file"]::file-selector-button:hover { background-color: var(--accent-hover); }
.invoice-generator-controls textarea { resize: vertical; min-height: 60px; }
.invoice-generator-controls button { padding: 10px 18px; border: none; border-radius: 4px; background-color: var(--accent-color); color: var(--bg-color); font-family: var(--heading-font); font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9em; }
.invoice-generator-controls button:hover { background-color: var(--accent-hover); } button:active { transform: scale(0.98); }
.invoice-generator-controls .inline-controls { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }
.invoice-generator-controls .inline-controls > div { flex: 1; min-width: 120px; }
.invoice-generator-controls .inline-controls input, .invoice-generator-controls .inline-controls select { flex-grow: 1; margin-bottom: 0; }
.invoice-generator-controls .inline-controls label { margin-bottom: 5px; }
.invoice-generator-controls .tax-input-group input { max-width: 100px; }
.invoice-generator-controls .invoice-meta-inputs input { min-width: 100px; }
.invoice-generator-controls #item-entry-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.invoice-generator-controls #item-entry-fields .item-desc { flex: 3 1 180px; min-width: 150px;} #item-entry-fields .item-qty { flex: 1 1 60px; min-width: 50px; }
.invoice-generator-controls #item-entry-fields .item-price { flex: 1 1 80px; min-width: 70px; } #item-entry-fields button { align-self: center; height: 40px; flex-shrink: 0; }
.invoice-generator-controls #item-entry-fields textarea.item-desc { min-height: 40px; height: 40px; }
.invoice-generator-controls .items-added-note { font-size: 0.85em; color: var(--placeholder-color); margin-top: 5px; }
.invoice-generator-controls .qr-section { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.invoice-generator-controls .qr-section input[type="text"] { flex-grow: 1; margin-bottom: 0; }
.invoice-generator-controls .qr-section button { margin-bottom: 0; }
.invoice-generator-controls #remove-qr-btn { background-color: var(--danger-color); color: #fff; } #remove-qr-btn:hover { background-color: #ff7895; }
.invoice-generator-controls #print-invoice-btn { background-color: var(--success-color); color: var(--bg-color); display: block; width: 100%; padding: 12px; font-size: 1em; }
.invoice-generator-controls #print-invoice-btn:hover { background-color: #7cffae; }

/* --- Invoice Preview Section --- */
.invoice-box { background-color: var(--invoice-bg); color: var(--invoice-text); padding: 25px; border: 1px solid var(--invoice-border-light); box-shadow: 0 3px 10px rgba(0,0,0,0.05); border-radius: 6px; flex-grow: 1; width: 100%; font-size: 14px; border-top: 8px solid var(--invoice-accent); }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; background-color: var(--invoice-header-bg); padding: 25px; margin-left: -25px; margin-right: -25px; margin-top: -25px; border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--invoice-border-light); }
.logo-container { max-width: 160px; max-height: 80px; flex-shrink: 0; }
.logo-container img { max-width: 100%; max-height: 80px; display: block; }
.logo-placeholder { width: 150px; height: 75px; border: 2px dashed var(--invoice-border-dark); display: flex; align-items: center; justify-content: center; color: var(--invoice-text-light); font-size: 0.9em; text-align: center; border-radius: 4px; }
.company-details { text-align: right; flex-grow: 1; }
.invoice-box .company-details h2 { margin: 0 0 8px 0; font-size: 1.6em; color: var(--invoice-heading); font-family: var(--heading-font); font-weight: 700; }
.company-details p { margin: 3px 0; font-size: 0.95em; line-height: 1.5; color: var(--invoice-text-light); }
.company-details p#displayCompanyEmail, .company-details p#displayCompanyWebsite { font-size: 0.9em; }
.meta-client-info { display: flex; flex-direction: column; gap: 20px; margin-bottom: 35px; }
.client-details, .invoice-meta { width: 100%; text-align: left; }
.invoice-box .meta-client-info h3 { font-size: 0.8em; color: var(--invoice-text-light); margin-bottom: 10px; border-bottom: 1px solid var(--invoice-border-light); padding-bottom: 6px; font-family: var(--primary-font); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; text-align: left; display: inline-block; width: auto; }
.meta-client-info p { margin: 4px 0; font-size: 0.95em; line-height: 1.5; }
.meta-client-info strong { font-weight: 500; color: var(--invoice-heading); }
#displayClientContactName { font-style: italic; color: var(--invoice-text-light); }

/* Invoice Table */
.invoice-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 35px; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); table-layout: fixed; }
.invoice-table thead { display: none; }
.invoice-table thead th { background-color: var(--table-header-bg); color: var(--table-header-text); padding: 14px 15px; text-align: left; font-weight: 500; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.7px; border: none; }
.invoice-table thead .th-desc { width: 45%; } .invoice-table thead .th-qty { width: 10%; text-align: right; }
.invoice-table thead .th-price { width: 18%; text-align: right; } .invoice-table thead .th-total { width: 18%; text-align: right; }
.invoice-table thead .th-action { width: 9%; text-align: center; }
.invoice-table thead th:first-child { padding-left: 15px; } .invoice-table thead th:last-child { padding-right: 15px; }
.invoice-table tbody tr { display: block; margin-bottom: 10px; border: 1px solid var(--invoice-border-light); border-radius: 4px; padding: 12px; background-color: #fff; }
.invoice-table tbody td { display: flex; justify-content: space-between; text-align: right; padding: 9px 5px; border-bottom: 1px dotted var(--invoice-border-light); font-size: 0.95em; word-break: break-word; overflow-wrap: break-word; }
.invoice-table tbody tr td:last-child { border-bottom: none; }
.invoice-table tbody td::before { content: attr(data-label); font-weight: 500; text-align: left; margin-right: 15px; color: var(--invoice-text-light); white-space: nowrap; flex-shrink: 0; }
.invoice-table .item-action { justify-content: center; } .invoice-table .item-action::before { display: none; }
.remove-item-btn { background: none; border: none; color: var(--danger-color); font-weight: bold; cursor: pointer; padding: 2px 5px; font-size: 1.2em; line-height: 1; transition: color 0.2s ease; }
.remove-item-btn:hover { color: #e63946; }

/* Totals Section */
.invoice-summary { margin-top: 0; margin-bottom: 25px; }
.invoice-totals { text-align: right; width: 100%; }
.invoice-totals table { width: 100%; border-collapse: collapse; background-color: var(--invoice-header-bg); border-radius: 4px; padding: 10px; }
.invoice-totals td {
    padding: 10px 10px; /* Add padding to cells */
    border-bottom: 1px solid var(--invoice-border-light);
    font-size: 1em;
}
.invoice-totals tr:last-child td { border-bottom: none; }
.invoice-totals .label { text-align: left; font-weight: normal; color: var(--invoice-text-light); padding-right: 15px; }
.invoice-totals .amount { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--invoice-text); }
.invoice-totals tr.total-row td {
    font-weight: 700; font-size: 1.3em; color: var(--invoice-heading);
    border-top: 2px solid var(--invoice-heading); padding-top: 12px;
    background-color: var(--invoice-total-bg);
    /* Padding already added to general TD rule */
    /* padding-left: 10px; padding-right: 10px; */
}
.invoice-totals tr.total-row .label, .invoice-totals tr.total-row .amount { background-color: var(--invoice-total-bg); }

/* Notes and QR Section */
.invoice-notes-qr-footer { display: flex; flex-direction: column; gap: 20px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--invoice-border-light); }
.invoice-box .invoice-notes h4 { margin-bottom: 8px; font-size: 0.95em; color: var(--invoice-heading); font-family: var(--primary-font); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.invoice-notes p { white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; }
.qr-code-area { text-align: left; width: 100%; }
#qrCodeContainer { width: 80px; height: 80px; border: 1px solid var(--invoice-border-light); padding: 4px; margin-bottom: 5px; background-color: #fff; display: inline-block; vertical-align: top; }
#qrCodeContainer img { display: block; width: 100%; height: 100%; }
#qrCodeHelpText { font-size: 0.8em; color: #aaa; margin-top: 5px; display: inline-block; margin-left: 10px; vertical-align: bottom; }
.invoice-footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid var(--invoice-border-light); text-align: center; font-size: 0.85em; color: var(--invoice-text-light); }


/* ============================= ADDED RULE ============================= */
/* --- Ensure Template Row is ALWAYS Hidden (Screen & Print) --- */
.item-row-template {
    display: none !important;
}
/* ====================================================================== */


/* --- Medium Screens --- */
@media (min-width: 768px) {
    body { padding: 25px; font-size: 15px; }
    .invoice-generator-container { gap: 30px; }
    .invoice-generator-controls { padding: 25px; }
    .control-grid { grid-template-columns: 1fr 1fr; }
    .invoice-box { padding: 35px; }
    .invoice-header { padding: 25px; margin-left: -35px; margin-right: -35px; margin-top: -35px; }
    .meta-client-info { flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; border-top: none; padding-top: 0; }
    .client-details { width: 55%; order: 1; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    .invoice-meta { width: 40%; order: 2; text-align: right; border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    .invoice-box .meta-client-info h3 { border-bottom: none; padding-bottom: 0; display: block; width: 100%; margin-bottom: 10px; }
    .invoice-meta h3 { text-align: right; } .client-details h3 { text-align: left; }
    .invoice-table thead { display: table-header-group; }
    .invoice-table tbody tr { display: table-row; margin-bottom: 0; border: none; border-radius: 0; padding: 0; background: none; transition: background-color 0.2s ease; border-bottom: 1px solid var(--invoice-border-light); }
    .invoice-table tbody tr:last-child { border-bottom: none; }
    .invoice-table tbody tr:nth-child(even) { background-color: var(--invoice-header-bg); }
    .invoice-table tbody tr:hover { background-color: var(--invoice-border-light); }
    .invoice-table tbody td { display: table-cell; text-align: left; padding: 14px 15px; border-bottom: none; vertical-align: top; font-size: 1em; word-break: break-word; overflow-wrap: break-word; }
    .invoice-table tbody .item-description { width: 45%; } .invoice-table tbody .item-quantity { width: 10%; text-align: right; }
    .invoice-table tbody .item-price { width: 18%; text-align: right; } .invoice-table tbody .item-line-total { width: 18%; text-align: right; }
    .invoice-table tbody .item-action { width: 9%; text-align: center; }
    .invoice-table tbody td::before { display: none; }
    .invoice-table .item-quantity, .invoice-table .item-unit-price, .invoice-table .item-line-total { text-align: right; font-variant-numeric: tabular-nums; }
    .invoice-table .item-action { text-align: center; padding: 10px 15px; }
    .invoice-table .item-description { color: var(--invoice-heading); font-weight: 500; }
    .invoice-summary { display: flex; justify-content: flex-end; margin-bottom: 0; }
    .invoice-totals { width: 40%; max-width: 320px; flex-shrink: 0; }
    .invoice-totals table { padding: 0; background: none; border-radius: 0; }
    .invoice-totals td { padding: 8px 10px; /* Add padding on desktop */ }
    .invoice-totals .label { padding-right: 20px; }
    .invoice-totals tr.total-row td { background-color: var(--invoice-total-bg); padding-left: 10px; padding-right: 10px; }
    .invoice-totals tr.total-row .label, .invoice-totals tr.total-row .amount { background-color: var(--invoice-total-bg); }
    .invoice-notes-qr-footer { flex-direction: row; justify-content: space-between; align-items: flex-start; margin-top: 30px; padding-top: 25px; }
    .invoice-notes { width: 65%; order: 1; } .qr-code-area { width: auto; text-align: right; order: 2; }
    #qrCodeContainer { margin-bottom: 0; }
}

/* --- Large Screens --- */
@media (min-width: 992px) {
    .invoice-generator-container { flex-direction: row; }
    .invoice-generator-controls { flex: 0 0 380px; max-width: 380px; height: fit-content; position: sticky; top: 20px; }
    .control-grid { grid-template-columns: 1fr; }
    .invoice-box { flex-grow: 1; }
    .invoice-totals { width: 35%; max-width: 300px; }
    .client-details { width: 60%; } .invoice-meta { width: 35%; }
}

/* --- ================================= --- */
/* ---       SIMPLIFIED PRINT STYLES     --- */
/* ---         (REVISED V5)            --- */
/* --- ================================= --- */
@media print {
    /* --- Basic page setup --- */
    @page {
        size: A4;
        margin: 10mm;
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 9.5pt !important;
        height: auto !important;
        width: 100% !important;
        line-height: 1.4 !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* --- Hide unwanted elements --- */
    #wpadminbar, body > header, .site-header, #masthead,
    body > footer, .site-footer, #colophon,
    nav, .navigation, aside, #secondary, .widget-area,
    .cookie-notice,
    .invoice-generator-controls,
    .no-print,
    /* .invoice-table .remove-item-btn, */ /* Button itself is inside .item-action, already hidden */
    body > #page > *:not(#primary):not(#content),
    body > #content > *:not(main):not(.entry-content),
    body > #primary > *:not(main):not(.entry-content),
    body > main > *:not(.invoice-generator-container)
    {
        display: none !important; visibility: hidden !important;
        height: 0 !important; width: 0 !important;
        overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important;
    }

    /* --- Ensure Invoice Area is Visible and Positioned --- */
    .invoice-generator-container, .invoice-box {
        display: block !important; visibility: visible !important;
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 0 !important;
        box-shadow: none !important; border: none !important;
        float: none !important; position: static !important;
        background: #fff !important;
    }
    .invoice-box {
        border-top: 6px solid var(--invoice-accent) !important;
        page-break-inside: avoid !important;
    }
    .invoice-box > * { visibility: visible !important; }

    /* --- Internal Invoice Styles for Print --- */
    .meta-client-info,
    .invoice-notes-qr-footer,
    .invoice-footer {
        padding: 10px 15px !important;
        margin-bottom: 15px !important;
    }
    .invoice-header {
        display: flex !important; flex-direction: row !important;
        justify-content: space-between !important; align-items: flex-start !important;
        padding: 10px 15px !important;
        background: var(--invoice-header-bg) !important;
        margin: 0 0 15px 0 !important; border-radius: 0 !important;
        border-bottom: 1px solid #ccc !important; width: 100% !important;
        page-break-after: avoid !important;
    }
    .logo-container { max-width: 150px !important; max-height: 70px !important; flex-shrink: 0 !important; }
    .logo-container img { max-width: 100% !important; max-height: 100% !important; }
    .company-details { text-align: right !important; }
    .invoice-box .company-details h2 { color: var(--invoice-heading) !important; font-size: 1.3em !important; margin-bottom: 4px !important; }
    .company-details p,
    .meta-client-info p { margin: 0 0 4px 0 !important; padding: 0 !important; }
    .meta-client-info {
        /* Padding set above */
        display: flex !important; flex-direction: row !important;
        justify-content: space-between !important; align-items: flex-start !important;
        border: none !important; width: 100% !important;
        page-break-after: avoid !important;
    }
    .client-details { width: 55% !important; padding: 0 !important; margin: 0 !important;}
    .invoice-meta { width: 40% !important; text-align: right !important; padding: 0 !important; margin: 0 !important;}
    .invoice-box .meta-client-info h3 {
        text-align: inherit !important; border: none !important;
        margin-bottom: 4px !important; padding-bottom: 0 !important;
        font-size: 8pt !important; color: var(--invoice-text-light) !important;
    }
    .invoice-meta h3 { text-align: right !important; }
    .client-details h3 { text-align: left !important; }

    /* --- Invoice Table Modifications for Print --- */
    .invoice-table {
        border-radius: 0 !important; box-shadow: none !important;
        border-spacing: 0 !important; margin: 0 0 15px 0 !important;
        table-layout: fixed !important;
        width: 100% !important; page-break-inside: avoid !important;
        border: 1px solid #bbb !important;
    }
    .invoice-table thead { display: table-header-group !important; }

    /* --- HIDE THE ACTION COLUMN --- */
    .invoice-table thead .th-action,
    .invoice-table tbody .item-action {
        display: none !important; width: 0 !important;
        padding: 0 !important; margin: 0 !important; border: none !important;
    }

    /* --- Styles for VISIBLE Header Cells --- */
    .invoice-table thead th {
        /* --- MODIFICATION: Black background, white text --- */
        background-color: #000 !important;
        color: #fff !important;
        padding: 4px !important;
        font-size: 8pt !important;
        /* --- MODIFICATION: Lighter borders for visibility on black bg --- */
        border-bottom: 1px solid #555 !important;
        border-left: 1px solid #555 !important;
        overflow: hidden !important; white-space: nowrap !important;
        font-weight: bold !important; text-align: left !important;
        vertical-align: middle !important;
    }
    .invoice-table thead th:first-child { border-left: none !important; }
    .invoice-table thead .th-qty,
    .invoice-table thead .th-price { text-align: center !important; }
    .invoice-table thead .th-total { text-align: right !important; }

    /* --- ADJUST WIDTHS of VISIBLE Columns (to total 100%) --- */
    .invoice-table thead .th-desc,
    .invoice-table tbody .item-description { width: 54% !important; }
    .invoice-table thead .th-qty,
    .invoice-table tbody .item-quantity { width: 10% !important; }
    .invoice-table thead .th-price,
    .invoice-table tbody .item-price { width: 18% !important; }
    .invoice-table thead .th-total,
    .invoice-table tbody .item-line-total { width: 18% !important; }

    /* --- Styles for VISIBLE Body Rows and Cells --- */
    .invoice-table tbody tr {
        /* This rule was making the template visible, but the global .item-row-template rule now overrides it */
        display: table-row !important; border: none !important; padding: 0 !important;
        background: none !important; /* Background applied to TD */
        /* --- MODIFICATION: Darker border for visibility between white rows --- */
        border-bottom: 1px solid #ccc !important;
        page-break-inside: avoid !important;
    }
    .invoice-table tbody tr:last-child { border-bottom: none !important; }
    .invoice-table tbody td {
        display: table-cell !important; border: none !important; font-size: 9pt !important;
        /* --- MODIFICATION: White background, black text --- */
        background-color: #fff !important;
        color: #000 !important;
        padding: 4px !important;
        vertical-align: top !important;
        word-break: break-word !important; overflow-wrap: break-word !important;
        /* --- MODIFICATION: Darker border for visibility on white bg --- */
        border-left: 1px solid #eee !important; /* Lighter grey between cells */
    }
    .invoice-table tbody td:first-child { border-left: none !important; }
    .invoice-table tbody td::before { display: none !important; }
    /* Text alignment for body cells */
    .invoice-table tbody .item-description { text-align: left !important; }
    .invoice-table .item-quantity,
    .invoice-table .item-price { text-align: center !important; }
    .invoice-table .item-line-total { text-align: right !important; }

    /* --- Totals Section --- */
    .invoice-summary {
        display: flex !important; justify-content: flex-end !important;
        margin: 0 !important; width: 100% !important;
        page-break-inside: avoid !important;
        padding: 0 1px !important;
    }
    .invoice-totals { width: 45% !important; max-width: 300px !important; }
    .invoice-totals table {
        background: none !important; padding: 0 !important;
        width: 100% !important; border-collapse: collapse !important;
    }
    .invoice-totals td { padding: 4px !important; font-size: 9pt !important; border: none !important; }
    .invoice-totals .label { text-align: left !important; }
    .invoice-totals .amount { text-align: right !important; }
    /* Style the final total row (Kept light grey bg for distinction) */
    .invoice-totals tr.total-row td {
        background-color: #eee !important;
        color: #000 !important;
        font-size: 10.5pt !important;
        font-weight: bold !important;
        padding: 4px !important;
        border-top: 2px solid #999 !important;
    }

    /* --- Notes and QR Section --- */
    .invoice-notes-qr-footer {
        /* Padding set above */
        display: flex !important; flex-direction: row !important;
        justify-content: space-between !important; align-items: flex-start !important;
        margin-top: 15px !important;
        border-top: 1px solid #ccc !important; page-break-inside: avoid !important;
        width: 100% !important;
    }
    .invoice-notes { width: 70% !important; }
    .invoice-box .invoice-notes h4 { color: var(--invoice-heading) !important; margin-bottom: 4px !important; }
    .invoice-notes p { margin: 0 0 4px 0 !important; padding: 0 !important; white-space: pre-wrap !important; word-wrap: break-word !important; }
    .qr-code-area { text-align: right !important; }
    #qrCodeContainer { width: 50px !important; height: 50px !important; }
    #qrCodeHelpText { display: none !important; }

    /* --- Footer --- */
    .invoice-footer {
        /* Padding set above */
        margin-top: 15px !important;
        border-top: 1px solid #ccc !important; text-align: center !important;
        font-size: 8pt !important; color: #555 !important;
        width: 100% !important;
    }

    /* --- General Page Break Control --- */
    h1, h2, h3, h4, h5, h6, p, blockquote, table, pre, ul, ol, dl { page-break-inside: avoid !important; }
    h1, h2, h3 { page-break-after: avoid !important; }
    ul, ol, dl { page-break-before: avoid !important; }

}
/* --- END OF PRINT STYLES --- */