/* CSS from original HTML, unchanged */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 20px 10px;
}

/* A4 and Mobile Layout */
.invoice-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Print styles */
@media print {
    body { background-color: #fff; }
    .invoice-container { max-width: 100%; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
    .control-panel, .add-item-btn, .mobile-labels, .delete-btn { display: none; }
    /* Adjust BestLead template for print */
    .template-bestlead .header-bg-angle { display: none; }
    .template-bestlead .header-content { position: static; color: #333; }
    .template-bestlead .header-section h1, .template-bestlead .header-section .invoice-details p { color: #333; }
    .template-bestlead .item-table th { background-color: #ccc !important; color: #333 !important; }
    .template-bestlead .totals-box .total-row:last-child { border-bottom-color: #ccc !important; }
    .template-bestlead .header-top-right { background-color: transparent !important; }
    .template-bestlead .header-top-right h2 { color: #333 !important; }
    .template-bestlead .header-top-right textarea { background-color: transparent !important; color: #333 !important; border: none !important; }
    /* Print adjustments for existing templates */
    .template-gradient-flow .header-gradient { background: #fff; border-bottom: 2px solid #2b6cb0; }
    .template-gradient-flow .header-section h1, .template-gradient-flow .invoice-details p { color: #333; }
    .template-gradient-flow .item-table th { background-color: #ccc !important; color: #333 !important; }
    .template-corporate-grid .header-section { border-bottom-color: #333; }
    .template-corporate-grid .item-table th { background-color: #ccc !important; color: #333 !important; }
    .template-bold-accent .header-accent { display: none; }
    .template-bold-accent .header-section h1, .template-bold-accent .invoice-details p { color: #333; }
    .template-sleek-line .header-bar { background-color: #ccc !important; }
    .template-modern-card .header-section { box-shadow: none; background: #fff; }
    .template-modern-card .section-card { box-shadow: none; border: 1px solid #ccc; }
    /* Print adjustments for new templates */
    .template-elegant-minimalist header { background: #fff; border-bottom: 2px solid #4a5568; }
    .template-elegant-minimalist .header-section h1, .template-elegant-minimalist .invoice-details p { color: #333; }
    .template-dynamic-layers .layer-separator { border-color: #ccc !important; }
    .template-dynamic-layers .header-section h1, .template-dynamic-layers .invoice-details p { color: #333; }
}

/* Template styles (unchanged from original HTML) */
.template-blackgold {
    --primary-color: #d4af37;
    --secondary-color: #444;
    --header-bg: #000;
    color: #222;
}
.template-blackgold header {
    background-color: #000;
    color: #d4af37;
    border-bottom: 3px solid #d4af37;
}
.template-blackgold .logo h1 { color: #d4af37; }

/* ... (All other template styles: blush, midnight, forest, royal, terracotta, charcoal, navy, mocha, aqua, teal, gradient-flow, corporate-grid, bold-accent, sleek-line, modern-card, elegant-minimalist, dynamic-layers, bestlead remain unchanged) */

/* Default Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}
.logo {
    display: flex;
    align-items: center;
}
.logo img {
    max-width: 80px;
    max-height: 50px;
    margin-right: 15px;
    vertical-align: middle;
}
.logo h1 {
    color: var(--primary-color);
    margin: 0;
    font-weight: 700;
}
.invoice-details p {
    margin: 2px 0;
    text-align: right;
    font-size: 0.9em;
}

/* Billing Info */
.billing-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.info-box {
    background-color: var(--header-bg);
    padding: 15px;
    border-radius: 5px;
    flex: 1;
    margin-right: 20px;
}
.info-box:last-child { margin-right: 0; }
.info-box h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.1em;
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Item Table */
.item-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.9em;
}
.item-table th {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px;
    text-align: left;
    font-weight: 400;
}
.item-table thead tr, .item-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    width: 100%;
}
.item-table tbody tr { border-bottom: 1px solid #ddd; }
.item-table th, .item-table td { padding: 10px; border: none; }

/* Footer Section */
.invoice-footer {
    margin-top: 30px;
    border-top: 1px solid var(--header-bg);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.bank-details {
    flex: 1;
    max-width: 45%;
    padding-right: 20px;
}
.bank-details h3 {
    color: var(--primary-color);
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
}
.totals-box {
    width: 100%;
    max-width: calc(100% / 6 * 3);
    min-width: 250px;
}
.total-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
}
.total-row span:first-child, .total-row label {
    text-align: right;
    padding-right: 10px;
    font-size: 0.9em;
    font-weight: 700;
}
.total-row span:last-child, .total-row input[type="number"] {
    text-align: right;
    font-weight: 700;
}
.total-row:last-child {
    font-size: 1.1em;
    border-bottom: 3px solid var(--primary-color);
    margin-top: 10px;
}

/* Mobile Specific Styles */
.mobile-labels { display: none; }
@media (max-width: 600px) {
    .billing-info { flex-direction: column; }
    .info-box { margin-right: 0; margin-bottom: 15px; }
    .item-table thead { display: table-header-group; }
    .item-table tbody tr {
        grid-template-columns: 1fr;
        padding: 10px 0;
        display: table-row;
    }
    .invoice-footer { flex-direction: column; }
    .bank-details, .totals-box { max-width: 100%; padding-right: 0; margin-bottom: 20px; }
    .totals-box { min-width: unset; }
    .mobile-labels { display: block; }
    /* Mobile adjustments for templates */
    .template-gradient-flow header, .template-corporate-grid header, .template-bold-accent header, .template-sleek-line header, .template-modern-card header {
        flex-direction: column;
        align-items: center;
    }
    .template-corporate-grid header, .template-corporate-grid .billing-info, .template-corporate-grid .invoice-footer {
        grid-template-columns: 1fr;
    }
    .template-bold-accent .header-accent { width: 100%; clip-path: none; height: 50px; }
    .template-sleek-line .header-bar { height: 5px; }
    .template-elegant-minimalist header { text-align: center; }
    .template-dynamic-layers .billing-info, .template-dynamic-layers .invoice-footer { flex-direction: column; }
    .template-dynamic-layers .layer-separator { margin: 10px 0; }
}