/* Invoice Format Specific Styles */

/* ===== COMMERCIAL FORMAT - Traditional Commercial Invoice Layout ===== */
.format-commercial {
    background: #ffffff !important; /* WHITE BACKGROUND */
    background-color: #ffffff !important; /* WHITE BACKGROUND */
    border: 2px solid #dc3545 !important; /* RED BORDER */
    border-radius: 8px;
    padding: 30px;
    font-family: 'Times New Roman', serif;
    overflow: hidden; /* Prevent content overflow */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    color: #000000 !important; /* BLACK TEXT */
}

/* Additional override for any conflicting styles */
.preview-invoice.format-commercial,
.invoice-preview.format-commercial {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Maximum specificity override - should override everything */
div.preview-invoice.format-commercial,
div.invoice-preview.format-commercial,
div.format-commercial {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Ensure white background is applied */
.format-commercial {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.commercial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #dc3545;
}

.commercial-logo-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.commercial-logo-placeholder {
    width: 60px;
    height: 60px;
    background: #dc3545;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 8px;
}

.commercial-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #dc3545;
    text-transform: uppercase;
}

.commercial-company-info {
    text-align: right;
}

.commercial-company-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1a202c;
    margin-bottom: 5px;
}

.commercial-company-address {
    font-size: 0.9rem;
    color: #1a202c;
}

.commercial-meta-section {
    margin-bottom: 30px;
}

.commercial-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.commercial-meta-item {
    text-align: center;
    padding: 15px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.meta-label {
    display: block;
    font-size: 0.8rem;
    color: #1a202c;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.meta-value {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #1a202c;
    text-decoration: underline;
}

.commercial-parties-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.commercial-exporter, .commercial-consignee {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

.commercial-exporter h4, .commercial-consignee h4 {
    color: #dc3545;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.party-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.party-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.field-label {
    font-weight: bold;
    color: #1a202c;
    min-width: 120px;
}

.field-value {
    color: #1a202c;
    text-decoration: underline;
    font-weight: 500;
}

.commercial-items-section {
    margin-bottom: 30px;
    width: 100%;
    overflow: hidden;
}

.commercial-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed; /* Fixed layout for better column control */
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

.commercial-items-table th {
    background: #dc3545;
    color: white;
    padding: 15px 8px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-items-table td {
    padding: 12px 8px;
    border: 1px solid #dee2e6;
    text-align: center;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Commercial table column widths */
.commercial-items-table th:nth-child(1),
.commercial-items-table td:nth-child(1) {
    width: 40%; /* Product/Description */
}

.commercial-items-table th:nth-child(2),
.commercial-items-table td:nth-child(2) {
    width: 20%; /* Qty */
}

.commercial-items-table th:nth-child(3),
.commercial-items-table td:nth-child(3) {
    width: 20%; /* Unit Price */
}

.commercial-items-table th:nth-child(4),
.commercial-items-table td:nth-child(4) {
    width: 20%; /* Total */
}

.commercial-summary-section {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.commercial-summary-right {
    width: 300px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
}

.summary-row.total-row {
    border-top: 2px solid #dc3545;
    border-bottom: 2px solid #dc3545;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 12px 0;
}

.commercial-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 20px;
    border-bottom: 2px solid #dc3545;
    margin-bottom: 0;
}

.commercial-footer-left {
    display: flex;
    gap: 30px;
}

.footer-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-label {
    font-weight: bold;
    color: #1a202c;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.footer-value {
    color: #1a202c;
    font-size: 1.1rem;
}

.signature-section {
    text-align: center;
}

.signature-label {
    font-weight: bold;
    color: #1a202c;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.signature-placeholder {
    width: 150px;
    height: 60px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a202c;
    font-style: italic;
    background: #ffffff;
}

/* ===== MODERN FORMAT - Light Teal Header Layout ===== */
.format-modern {
    background: #ffffff;
    border: 2px solid #20c997;
    border-radius: 8px;
    padding: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    color: #1a202c;
}

.modern-teal-header {
    background: #ffffff;
    color: #1a202c;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border: 2px solid #20c997;
}

.modern-logo-section {
    flex: 1;
}

.modern-logo-text {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.modern-company-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

.modern-invoice-number {
    text-align: right;
}

.modern-invoice-label {
    font-size: 1.1rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.modern-invoice-line {
    width: 200px;
    height: 3px;
    background: #20c997;
    border-radius: 2px;
}

.modern-body-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

.modern-customer-billing, .modern-invoice-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modern-customer-section, .modern-detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modern-customer-section h4, .modern-detail-section h4 {
    color: #20c997;
    font-size: 1rem;
    margin: 0;
}

.modern-customer-line, .modern-detail-line {
    height: 2px;
    background: #20c997;
    border-radius: 1px;
}

.modern-customer-line-long {
    height: 2px;
    background: #20c997;
    border-radius: 1px;
    width: 100%;
}

.modern-items-table {
    margin-bottom: 30px;
    width: 100%;
    overflow: hidden;
}

.modern-items {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

.modern-items th {
    background: #20c997;
    color: white;
    padding: 15px 8px;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-items td {
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Modern table column widths */
.modern-items th:nth-child(1),
.modern-items td:nth-child(1) {
    width: 15%; /* Item # */
}

.modern-items th:nth-child(2),
.modern-items td:nth-child(2) {
    width: 35%; /* Description */
}

.modern-items th:nth-child(3),
.modern-items td:nth-child(3) {
    width: 15%; /* Qty */
    text-align: center;
}

.modern-items th:nth-child(4),
.modern-items td:nth-child(4) {
    width: 20%; /* Unit Price */
    text-align: right;
}

.modern-items th:nth-child(5),
.modern-items td:nth-child(5) {
    width: 15%; /* Total */
    text-align: right;
}

.modern-footer-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #20c997;
    margin-bottom: 0;
}

.modern-notes-section h4 {
    color: #20c997;
    margin-bottom: 15px;
}

.modern-notes-area {
    width: 100%;
    height: 80px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.modern-summary-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modern-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.modern-summary-total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 2px solid #20c997;
    border-bottom: 2px solid #20c997;
    font-weight: bold;
    font-size: 1.2rem;
}

/* ===== ACCENT FORMAT - Yellow Accent Layout ===== */
.format-accent {
    background: #ffffff;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 30px;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    color: #1a202c;
}

.accent-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    position: relative;
}

.accent-brand-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.accent-logo-placeholder {
    width: 50px;
    height: 50px;
    background: #ffc107;
    border-radius: 8px;
    position: relative;
}

.accent-logo-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #333;
    border-radius: 4px;
}

.accent-brand-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.accent-brand-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1a202c;
}

.accent-tagline {
    font-size: 0.9rem;
    color: #1a202c;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.accent-invoice-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accent-yellow-bar {
    width: 200px;
    height: 40px;
    background: #ffc107;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.accent-invoice-text {
    font-size: 3rem;
    font-weight: bold;
    color: #1a202c;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    text-align: center;
}

.accent-customer-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

.accent-invoice-to h4 {
    color: #1a202c;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.accent-customer-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accent-customer-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1a202c;
}

.accent-customer-address {
    color: #1a202c;
    line-height: 1.4;
}

.accent-customer-code {
    color: #1a202c;
    font-size: 0.9rem;
}

.accent-detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.accent-detail-label {
    font-size: 0.9rem;
    color: #1a202c;
    text-transform: uppercase;
}

.accent-detail-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #1a202c;
}

.accent-items-section {
    margin-bottom: 30px;
    width: 100%;
    overflow: hidden;
}

.accent-items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

.accent-items-table th {
    background: #ffc107;
    color: #1a202c;
    padding: 15px 8px;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accent-items-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Accent table column widths */
.accent-items-table th:nth-child(1),
.accent-items-table td:nth-child(1) {
    width: 15%; /* Item # */
}

.accent-items-table th:nth-child(2),
.accent-items-table td:nth-child(2) {
    width: 35%; /* Description */
}

.accent-items-table th:nth-child(3),
.accent-items-table td:nth-child(3) {
    width: 15%; /* Qty */
    text-align: center;
}

.accent-items-table th:nth-child(4),
.accent-items-table td:nth-child(4) {
    width: 20%; /* Unit Price */
    text-align: right;
}

.accent-items-table th:nth-child(5),
.accent-items-table td:nth-child(5) {
    width: 15%; /* Total */
    text-align: right;
}

.accent-footer-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #ffc107;
}

.accent-left-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accent-thanks {
    font-size: 1.1rem;
    color: #1a202c;
    font-style: italic;
}

.accent-terms h4 {
    color: #1a202c;
    margin-bottom: 10px;
}

.accent-terms p {
    color: #1a202c;
    line-height: 1.4;
}

.accent-payment-info h4 {
    color: #1a202c;
    margin-bottom: 10px;
}

.accent-payment-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #1a202c;
}

.accent-right-section {
    display: flex;
    justify-content: flex-end;
}

.accent-summary {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accent-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.accent-summary-total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 2px solid #ffc107;
    border-bottom: 2px solid #ffc107;
    font-weight: bold;
    font-size: 1.2rem;
    background: #ffc107;
    color: #1a202c;
    padding: 15px;
    border-radius: 4px;
}

.accent-bottom-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.accent-contact-info {
    color: #1a202c;
    font-size: 0.9rem;
}

.accent-signature {
    color: #1a202c;
    font-size: 0.9rem;
    font-style: italic;
}

/* ===== STRUCTURED FORMAT - Blank Sales Invoice Layout ===== */
.format-structured {
    background: #ffffff;
    border: 2px solid #6f42c1;
    border-radius: 8px;
    padding: 30px;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    color: #1a202c;
}

.structured-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #6f42c1;
}

.structured-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #6f42c1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.structured-meta {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.structured-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.structured-meta-label {
    font-size: 0.9rem;
    color: #1a202c;
    text-transform: uppercase;
    font-weight: bold;
}

.structured-meta-line {
    width: 150px;
    height: 2px;
    background: #6f42c1;
    border-radius: 1px;
}

.structured-company-section {
    margin-bottom: 30px;
}

.structured-company-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.structured-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.structured-field-label {
    font-size: 0.9rem;
    color: #1a202c;
    font-weight: bold;
    text-transform: uppercase;
}

.structured-field-line {
    height: 2px;
    background: #6f42c1;
    border-radius: 1px;
}

.structured-addresses-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

.structured-billing-section h4, .structured-shipping-section h4 {
    color: #6f42c1;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.structured-address-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.structured-comments-section {
    margin-bottom: 30px;
}

.structured-comments-section h4 {
    color: #6f42c1;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.structured-comments-area {
    width: 100%;
    height: 60px;
    background: #ffffff;
    border: 1px solid #6f42c1;
    border-radius: 4px;
}

.structured-details-section {
    margin-bottom: 30px;
}

.structured-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.structured-detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.structured-detail-label {
    font-size: 0.9rem;
    color: #1a202c;
    font-weight: bold;
    text-transform: uppercase;
}

.structured-detail-line {
    height: 2px;
    background: #6f42c1;
    border-radius: 1px;
}

.structured-items-section {
    margin-bottom: 30px;
    width: 100%;
    overflow: hidden;
}

.structured-items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

.structured-items-table th {
    background: #6f42c1;
    color: white;
    padding: 15px 8px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.structured-items-table td {
    padding: 12px 8px;
    border: 1px solid #6f42c1;
    text-align: center;
    min-height: 40px;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Structured table column widths */
.structured-items-table th:nth-child(1),
.structured-items-table td:nth-child(1) {
    width: 15%; /* Item # */
}

.structured-items-table th:nth-child(2),
.structured-items-table td:nth-child(2) {
    width: 35%; /* Description */
}

.structured-items-table th:nth-child(3),
.structured-items-table td:nth-child(3) {
    width: 15%; /* Qty */
}

.structured-items-table th:nth-child(4),
.structured-items-table td:nth-child(4) {
    width: 20%; /* Unit Price */
}

.structured-items-table th:nth-child(5),
.structured-items-table td:nth-child(5) {
    width: 15%; /* Total */
}

.structured-summary-section {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #6f42c1;
}

.structured-summary-right {
    width: 300px;
}

.structured-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.structured-summary-line {
    width: 120px;
    height: 2px;
    background: #6f42c1;
    border-radius: 1px;
}

.structured-summary-total {
    border-top: 2px solid #6f42c1;
    border-bottom: 2px solid #6f42c1;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 0;
}

.structured-payment-section {
    text-align: center;
}

.structured-payment-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #1a202c;
    font-size: 1.1rem;
}

.structured-payment-line {
    width: 200px;
    height: 2px;
    background: #6f42c1;
    border-radius: 1px;
}

/* ===== GRID FORMAT - Computer Sales Invoice Layout ===== */
.format-grid {
    background: #ffffff;
    border: 2px solid #fd7e14;
    border-radius: 8px;
    padding: 30px;
    font-family: 'Verdana', Geneva, sans-serif;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    color: #1a202c;
}

.grid-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #fd7e14;
}

.grid-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fd7e14;
    text-transform: uppercase;
}

.grid-top-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.grid-from-section, .grid-details-section, .grid-bill-to-section, .grid-shipping-section {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    border-left: 4px solid #fd7e14;
}

.grid-from-section h4, .grid-details-section h4, .grid-bill-to-section h4, .grid-shipping-section h4 {
    color: #fd7e14;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.grid-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.grid-field-label {
    font-size: 0.9rem;
    color: #1a202c;
    font-weight: bold;
    text-transform: uppercase;
}

.grid-field-line {
    height: 2px;
    background: #fd7e14;
    border-radius: 1px;
}

.grid-items-section {
    margin-bottom: 30px;
    width: 100%;
    overflow: hidden;
}

.grid-items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

.grid-items-table th {
    background: #fd7e14;
    color: white;
    padding: 15px 8px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-items-table td {
    padding: 12px 8px;
    border: 1px solid #fd7e14;
    text-align: center;
    min-height: 40px;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid table column widths */
.grid-items-table th:nth-child(1),
.grid-items-table td:nth-child(1) {
    width: 15%; /* Item # */
}

.grid-items-table th:nth-child(2),
.grid-items-table td:nth-child(2) {
    width: 35%; /* Description */
}

.grid-items-table th:nth-child(3),
.grid-items-table td:nth-child(3) {
    width: 15%; /* Qty */
}

.grid-items-table th:nth-child(4),
.grid-items-table td:nth-child(4) {
    width: 20%; /* Unit Price */
}

.grid-items-table th:nth-child(5),
.grid-items-table td:nth-child(5) {
    width: 15%; /* Total */
}

.grid-footer-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #fd7e14;
}

.grid-notes-section h4 {
    color: #fd7e14;
    margin-bottom: 15px;
}

.grid-notes-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grid-notes-line {
    width: 100%;
    height: 20px;
    background: #ffffff;
    border: 1px solid #fd7e14;
    border-radius: 4px;
}

.grid-summary-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.grid-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.grid-summary-line {
    width: 120px;
    height: 2px;
    background: #fd7e14;
    border-radius: 1px;
}

.grid-summary-total {
    border-top: 2px solid #fd7e14;
    border-bottom: 2px solid #fd7e14;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 15px 0;
}

.grid-bottom-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.grid-thanks {
    font-size: 1.2rem;
    color: #fd7e14;
    font-weight: bold;
    text-transform: uppercase;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .commercial-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .commercial-parties-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .modern-body-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .modern-footer-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .accent-customer-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .accent-footer-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .structured-company-fields {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .structured-addresses-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .structured-details-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .grid-top-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .grid-footer-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Adjust table column widths for mobile */
    .commercial-items-table th,
    .commercial-items-table td,
    .modern-items th,
    .modern-items td,
    .accent-items-table th,
    .accent-items-table td,
    .structured-items-table th,
    .structured-items-table td,
    .grid-items-table th,
    .grid-items-table td {
        padding: 8px 4px;
        font-size: 0.7rem;
    }
    
    /* Mobile table column widths */
    .commercial-items-table th:nth-child(1),
    .commercial-items-table td:nth-child(1) {
        width: 35%;
    }
    
    .commercial-items-table th:nth-child(2),
    .commercial-items-table td:nth-child(2) {
        width: 25%;
    }
    
    .commercial-items-table th:nth-child(3),
    .commercial-items-table td:nth-child(3) {
        width: 20%;
    }
    
    .commercial-items-table th:nth-child(4),
    .commercial-items-table td:nth-child(4) {
        width: 20%;
    }
}

@media (max-width: 480px) {
    .commercial-meta-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .commercial-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .modern-teal-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .accent-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .accent-invoice-text {
        font-size: 2rem;
    }
    
    .structured-meta {
        flex-direction: column;
        gap: 15px;
    }
    
    .grid-header {
        text-align: left;
    }
    
    /* Extra small screen table adjustments */
    .commercial-items-table th,
    .commercial-items-table td,
    .modern-items th,
    .modern-items td,
    .accent-items-table th,
    .accent-items-table td,
    .structured-items-table th,
    .structured-items-table td,
    .grid-items-table th,
    .grid-items-table td {
        padding: 6px 2px;
        font-size: 0.6rem;
    }
    
    /* Ensure all invoice formats have proper overflow handling */
    .format-commercial,
    .format-modern,
    .format-accent,
    .format-structured,
    .format-grid {
        padding: 20px;
        overflow: hidden;
    }
    
    /* Adjust summary sections for small screens */
    .commercial-summary-right,
    .modern-summary-section,
    .accent-summary,
    .structured-summary-right,
    .grid-summary-section {
        width: 100%;
        max-width: 100%;
    }
    
    .summary-row,
    .modern-summary-item,
    .accent-summary-item,
    .structured-summary-item,
    .grid-summary-item {
        font-size: 0.7rem;
        padding: 6px 0;
    }
    
    .total-row,
    .modern-summary-total,
    .accent-summary-total,
    .structured-summary-total,
    .grid-summary-total {
        font-size: 0.9rem;
        padding: 10px 0;
    }
}

/* Additional overflow prevention for all invoice formats */
.format-commercial *,
.format-modern *,
.format-accent *,
.format-structured *,
.format-grid * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure tables don't break the layout */
.format-commercial table,
.format-modern table,
.format-accent table,
.format-structured table,
.format-grid table {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* Summary section overflow prevention */
.commercial-summary-section,
.modern-footer-section,
.accent-footer-section,
.structured-summary-section,
.grid-footer-section {
    overflow: hidden;
    word-wrap: break-word;
}

/* Field overflow prevention */
.party-field,
.modern-customer-section,
.accent-detail-item,
.structured-field,
.grid-field {
    overflow: hidden;
    word-wrap: break-word;
}

.field-label,
.field-value,
.modern-customer-section h4,
.accent-detail-label,
.accent-detail-value,
.structured-field-label,
.grid-field-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ===== FINAL OVERRIDE - MAXIMUM PRIORITY ===== */
/* This should override ANY other CSS rule */
html body div.format-commercial,
html body div.preview-invoice.format-commercial,
html body div.invoice-preview.format-commercial {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #dc3545 !important; /* Original red border */
}

/* NUCLEAR OPTION: Make ALL elements inside format-commercial transparent */
.format-commercial *,
.format-commercial *:before,
.format-commercial *:after,
.format-commercial div,
.format-commercial section,
.format-commercial article,
.format-commercial header,
.format-commercial footer,
.format-commercial main,
.format-commercial aside,
.format-commercial nav {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Specifically target ALL commercial child elements */
.format-commercial .commercial-meta-item,
.format-commercial .commercial-exporter,
.format-commercial .commercial-consignee,
.format-commercial .commercial-header,
.format-commercial .commercial-logo-placeholder,
.format-commercial .commercial-meta-section,
.format-commercial .commercial-meta-grid,
.format-commercial .commercial-parties-section,
.format-commercial .commercial-items-section,
.format-commercial .commercial-items-table,
.format-commercial .commercial-summary-section,
.format-commercial .commercial-footer,
.format-commercial .commercial-logo-section,
.format-commercial .commercial-company-info,
.format-commercial .commercial-title,
.format-commercial .commercial-company-name,
.format-commercial .commercial-company-address {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ===== FINAL OVERRIDE - WHITE BACKGROUND ===== */
/* This should override ANY CSS rule, no matter what */
html[lang] body[class] div[class*="format-commercial"],
html[lang] body[class] div[class*="preview-invoice"][class*="format-commercial"],
html[lang] body[class] div[class*="invoice-preview"][class*="format-commercial"],
div.format-commercial[style],
div.preview-invoice.format-commercial[style],
div.invoice-preview.format-commercial[style] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-attachment: initial !important;
    background-clip: initial !important;
    background-origin: initial !important;
    background-position: initial !important;
    background-repeat: initial !important;
    background-size: initial !important;
    border: 2px solid #dc3545 !important; /* Original red border */
}

/* Ensure white background is applied */
.format-commercial {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Override any potential CSS variables */
.format-commercial {
    --background-color: #ffffff !important;
    --bg-color: #ffffff !important;
    --color: #ffffff !important;
}

/* FINAL NUCLEAR OPTION - Override everything including parent elements */
body .main-content .format-commercial,
body .main-content .preview-invoice.format-commercial,
body .main-content .invoice-preview.format-commercial,
html body .main-content div.format-commercial {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-attachment: initial !important;
    background-clip: initial !important;
    background-origin: initial !important;
    background-position: initial !important;
    background-repeat: initial !important;
    background-size: initial !important;
    border: 2px solid #dc3545 !important;
}

/* Make sure parent elements don't interfere */
.main-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override any potential dark backgrounds from other CSS files */
.format-commercial,
.preview-invoice.format-commercial,
.invoice-preview.format-commercial {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}