/* ═══════════════════════════════════════════════════════════════════ mobile_invoice.css — Invoice template mobile layout Targets: classes injected by renderInvoiceHTML() in template_settings.js Classes: .inv-mob-table .inv-pad-h .inv-mob-totals .inv-totals-wrap .inv-hdr-flex IMPORTANT: This file requires the following tag in : Without it, the @media max-width query will NOT fire on real phones. ═══════════════════════════════════════════════════════════════════ */ /* Use both max-width AND max-device-width so rules fire whether or not the viewport meta tag is correct (belt-and-suspenders for real phones) */ @media (max-width: 640px), (max-device-width: 640px) { /* ── Header: keep company name LEFT, invoice number RIGHT (row layout) ── */ .inv-hdr-flex { flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; } .inv-hdr-flex > div:first-child { flex: 1 1 0 !important; min-width: 0 !important; word-break: break-word !important; } .inv-hdr-flex > div:first-child > div:first-child { font-size: 18px !important; font-weight: 800 !important; } .inv-hdr-flex > div:last-child { text-align: right !important; flex-shrink: 0 !important; } .inv-hdr-flex > div:last-child > div:nth-child(1) { font-size: 9px !important; /* FIX: cap ESTIMATE/TAX INVOICE label size */ opacity: .8 !important; } .inv-hdr-flex > div:last-child > div:nth-child(2) { font-size: 14px !important; /* scale down invoice number to fit */ } /* ── Reduce 28px side padding to 14px on all padded sections ── */ .inv-pad-h { padding-left: 14px !important; padding-right: 14px !important; } /* ── Items table: fixed layout, full-width ── */ .inv-mob-table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; } .inv-mob-table th, .inv-mob-table td { font-size: 12px !important; padding: 9px 6px !important; word-break: break-word !important; } /* # column - wide enough for 2-digit numbers */ .inv-mob-table th:nth-child(1), .inv-mob-table td:nth-child(1) { width: 36px !important; padding-left: 10px !important; } /* Qty */ .inv-mob-table th:nth-child(3), .inv-mob-table td:nth-child(3) { width: 60px !important; text-align: right !important; white-space: nowrap !important; } /* Rate */ .inv-mob-table th:nth-child(4), .inv-mob-table td:nth-child(4) { width: 68px !important; text-align: right !important; white-space: nowrap !important; } /* Amount */ .inv-mob-table th:nth-child(5), .inv-mob-table td:nth-child(5) { width: 76px !important; text-align: right !important; white-space: nowrap !important; } /* Amount when item-tax on (6th col) */ .inv-mob-table th:nth-child(6), .inv-mob-table td:nth-child(6) { width: 76px !important; text-align: right !important; white-space: nowrap !important; } /* ── 6-column (item-tax) mode: compress numeric cols → Item gets ≥120px ── */ .inv-mob-6col th, .inv-mob-6col td { font-size: 11px !important; padding: 8px 4px !important; } .inv-mob-6col th:nth-child(1), .inv-mob-6col td:nth-child(1) { width: 28px !important; padding-left: 8px !important; } .inv-mob-6col th:nth-child(3), .inv-mob-6col td:nth-child(3) { width: 44px !important; text-align: right !important; white-space: nowrap !important; } .inv-mob-6col th:nth-child(4), .inv-mob-6col td:nth-child(4) { width: 56px !important; text-align: right !important; white-space: nowrap !important; } .inv-mob-6col th:nth-child(5), .inv-mob-6col td:nth-child(5) { width: 56px !important; text-align: right !important; } .inv-mob-6col th:nth-child(6), .inv-mob-6col td:nth-child(6) { width: 66px !important; text-align: right !important; white-space: nowrap !important; } /* ── Totals wrapper: stretch full width ── */ .inv-totals-wrap { justify-content: stretch !important; } .inv-mob-totals { width: 100% !important; min-width: unset !important; } .inv-mob-totals td { padding: 6px 14px !important; } } @media (max-width: 640px) { .inv-hdr-flex { display: flex; flex-direction: column; } .inv-company-name { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; white-space: normal; word-break: normal; } }