/* ============================================================
   style/invoice-generator.css
   Page-scoped styles for frontend/invoice-generator.html.

   The page frame (.pagebox / .tool-area / .sidebar-ads), the download
   button and the toasts all come from main.css. Everything below is
   prefixed .inv- or scoped under body.inv-page, so nothing can reach
   another tool. The .inv-doc block styles the invoice document itself —
   it is the only place the accent colour is used, and it never touches
   the Utiloot interface around it.
   ============================================================ */

body.inv-page .backtohome {
    position: relative;
    margin: 0 0 18px;
}

body.inv-page .tool-area {
    padding-top: 12px;
    min-width: 0;
}

/* ── Header ────────────────────────────────────────────── */
.inv-header { margin-bottom: 22px; }

.inv-title {
    font-size: 34px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 12px;
}

.inv-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff7a1a, #ff6600);
}

.inv-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #64748b;
    max-width: 760px;
}

.inv-error {
    margin-bottom: 18px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}

/* Paired with the icon so an error never depends on colour alone. */
.inv-error::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    margin-right: 8px;
}

/* ── Workspace ─────────────────────────────────────────── */
.inv-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 46%);
    gap: 22px;
    align-items: start;
}

.inv-editor { min-width: 0; }

/* ── Editor sections ───────────────────────────────────── */
.inv-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

.inv-section-title {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 9px;
    user-select: none;
}

.inv-section-title::-webkit-details-marker { display: none; }

.inv-section-title::before {
    content: '\f078';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-weight: 900;
    font-size: 10px;
    color: #cbd5e1;
    transition: transform 0.2s ease;
}

.inv-section:not([open]) .inv-section-title::before { transform: rotate(-90deg); }
.inv-section[open] .inv-section-title { margin-bottom: 14px; }
.inv-section-title:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 3px; border-radius: 6px; }

.inv-subhead {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 16px 0 10px;
}

/* ── Fields ────────────────────────────────────────────── */
.inv-field { margin-bottom: 12px; }
.inv-field:last-child { margin-bottom: 0; }

.inv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.inv-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 5px;
}

.inv-input,
.inv-select,
.inv-textarea {
    width: 100%;
    box-sizing: border-box;      /* main.css resets padding but not box-sizing */
    padding: 9px 11px;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-textarea { resize: vertical; line-height: 1.5; }
.inv-select { cursor: pointer; }
.inv-currency { margin-top: 8px; }

.inv-input:focus,
.inv-select:focus,
.inv-textarea:focus,
.inv-color:focus-visible,
.inv-file:focus-visible {
    outline: none;
    border-color: #ff7a1a;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

.inv-input.is-invalid { border-color: #dc2626; background: #fef2f2; }

.inv-hint {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

.inv-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    margin-top: 8px;
}

.inv-check input { width: 16px; height: 16px; accent-color: #ff6600; cursor: pointer; }
.inv-check-inline { margin: 0 0 0 12px; white-space: nowrap; }
.inv-field-check { display: flex; align-items: flex-end; }

.inv-color {
    width: 100%;
    height: 46px;   /* was 38px — 3px padding + 1px border */
    padding: 3px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.inv-file {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    color: #475569;
    padding: 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
}

.inv-logo-state {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.inv-logo-thumb {
    width: 42px;   /* was 40px — 1px border */ height: 42px;   /* was 40px — 1px border */
    object-fit: contain;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.inv-logo-name {
    flex: 1; min-width: 0;
    font-size: 12.5px; font-weight: 600; color: #475569;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Repeating rows ────────────────────────────────────── */
.inv-item,
.inv-payment {
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    padding: 13px;
    margin-bottom: 11px;
    background: #fcfdff;
}

.inv-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.inv-item-index {
    font-size: 12px; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: #64748b;
}

.inv-item-controls { display: flex; gap: 5px; }

.inv-icon-btn {
    width: 31px;   /* was 29px — 1px border */ height: 31px;   /* was 29px — 1px border */
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: #475569;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inv-icon-btn:hover:not(:disabled) { background: #e0f2fe; border-color: #38bdf8; color: #0369a1; }
.inv-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.inv-icon-danger:hover:not(:disabled) { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }

.inv-item-total {
    margin-top: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-align: right;
}

.inv-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}

.inv-row .inv-field { margin-bottom: 0; }
.inv-row-action { display: flex; align-items: center; padding-bottom: 4px; }

.inv-add {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 4px; padding: 9px 14px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: #0369a1; background: #f0f9ff;
    border: 1px dashed #7dd3fc; border-radius: 9px; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.inv-add:hover:not(:disabled) { background: #e0f2fe; border-color: #38bdf8; }
.inv-add:disabled { opacity: 0.5; cursor: not-allowed; }

.inv-add-row { display: flex; gap: 10px; align-items: center; }
.inv-add-row .inv-select { flex: 1; min-width: 0; }
.inv-add-inline { margin-top: 0; white-space: nowrap; }

/* ── Preview panel ─────────────────────────────────────── */
.inv-preview-panel { position: sticky; top: 92px; min-width: 0; }

.inv-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

.inv-summary-cell { display: flex; flex-direction: column; gap: 2px; }
.inv-summary-key { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
.inv-summary-value { font-size: 19px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }

.inv-summary-status {
    margin-left: auto;
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
    padding: 5px 11px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
}

.inv-status-paid { background: #dcfce7; color: #15803d; }
.inv-status-partial { background: #fef3c7; color: #92400e; }
.inv-status-unpaid { background: #fee2e2; color: #b91c1c; }
.inv-status-overpaid { background: #e0e7ff; color: #3730a3; }
.inv-status-draft { background: #f1f5f9; color: #475569; }

.inv-actions {
    margin: 12px 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

/* main.css ships .utl-download-btn as display:none for tools that reveal
   it after processing; here it is present from the start. */
.inv-download-btn { display: inline-flex !important; width: 100%; margin-top: 0; }

.inv-action-row { display: flex; gap: 9px; margin-top: 9px; }

.inv-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 12px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: #334155; background: #fff;
    border: 1px solid #cbd5e1; border-radius: 9px; cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inv-btn:hover:not(:disabled) { background: #e0f2fe; border-color: #38bdf8; color: #0369a1; }
.inv-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.inv-btn-reset:hover:not(:disabled) { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }
.inv-btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.inv-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.inv-image-format { flex: 0 0 88px; width: 88px; }

.inv-mini-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px;
    font-family: inherit; font-size: 12px; font-weight: 700;
    color: #dc2626; background: #fff;
    border: 1px solid #fca5a5; border-radius: 7px; cursor: pointer;
}

.inv-mini-btn:hover { background: #fee2e2; }

.inv-btn:focus-visible,
.inv-add:focus-visible,
.inv-icon-btn:focus-visible,
.inv-mini-btn:focus-visible,
.inv-download-btn:focus-visible {
    outline: 2px solid #ff7a1a;
    outline-offset: 2px;
}

.inv-status { margin-top: 10px; font-size: 13px; color: #0369a1; text-align: center; min-height: 18px; }

.inv-preview-scroll {
    max-height: calc(100vh - 260px);
    overflow: auto;
    padding: 14px;
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

/* ══════════════════════════════════════════════════════════
   THE INVOICE DOCUMENT
   Scoped entirely to .inv-doc. --inv-accent is set per document by
   the script and is used nowhere else on the site.
   ══════════════════════════════════════════════════════════ */
.inv-doc-stage {
    /* Holds the height of the scaled document; the script sets it. */
    overflow: hidden;
}

.inv-doc {
    --inv-accent: #0f766e;
    /* A fixed natural width keeps the document's proportions equal to the
       printed page; narrow screens scale the whole thing down (see
       fitPreview) instead of reflowing it into something that no longer
       resembles the PDF. */
    width: 780px;
    box-sizing: border-box;      /* the padding is inside that width */
    transform-origin: top left;
    margin: 0 auto;
    padding: 26px 28px;
    background: #fff;
    color: #1f2937;
    font-size: 11px;
    line-height: 1.5;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
    border-radius: 4px;
}

.inv-doc p { margin: 0 0 2px; }

.inv-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
}

.inv-doc-logo { max-width: 190px; max-height: 78px; object-fit: contain; }
.inv-doc-brandname { font-size: 19px; font-weight: 800; color: #0f172a; }

.inv-doc-titlebox { text-align: right; }
.inv-doc-title { font-size: 27px; font-weight: 800; letter-spacing: 0.02em; color: var(--inv-accent); }
.inv-doc-number { font-size: 12.5px; color: #334155; }

.inv-doc-status {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 999px;
}

.inv-doc-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.inv-doc-h2 {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inv-accent);
    margin-bottom: 4px;
}

.inv-doc-strong { font-weight: 700; color: #0f172a; }
.inv-doc-party p { word-break: break-word; }
.inv-doc-metarow { display: flex; justify-content: space-between; gap: 10px; }
.inv-doc-metakey { color: #64748b; }
.inv-doc-metaval { font-weight: 700; color: #0f172a; text-align: right; }

.inv-doc-table { width: 100%; border-collapse: collapse; margin: 14px 0 10px; }

.inv-doc-table th {
    padding: 7px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    color: #fff;
    background: var(--inv-accent);
}

.inv-doc-table td {
    padding: 7px 8px;
    font-size: 10.5px;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
    word-break: break-word;
}

.inv-col-num { text-align: right; white-space: nowrap; }
.inv-col-desc { width: 34%; }
.inv-col-total { font-weight: 700; color: #0f172a; }

.inv-doc-totals {
    width: 62%;
    margin-left: auto;
    margin-bottom: 12px;
}

.inv-doc-total {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
    font-size: 11px;
}

.inv-doc-total-label { color: #64748b; }
.inv-doc-total-value { font-variant-numeric: tabular-nums; color: #0f172a; }

.inv-doc-grand {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #94a3b8;
    font-size: 13px;
    font-weight: 800;
}

.inv-doc-grand .inv-doc-total-label { color: #0f172a; }

.inv-doc-balance {
    margin-top: 3px;
    padding: 6px 8px;
    background: #f1f5f9;
    border-top: 2px solid var(--inv-accent);
    font-size: 13px;
    font-weight: 800;
}

.inv-doc-balance .inv-doc-total-label { color: #0f172a; }

.inv-doc-section { margin-top: 14px; }
.inv-doc-paygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.inv-doc-pay p { word-break: break-word; }
.inv-doc-footer { margin-top: 16px; padding-top: 10px; border-top: 1px solid #e2e8f0; color: #64748b; }

/* ══════════════════════════════════════════════════════════
   LOGO PLACEMENT
   The header holds the brand and the identity block (title + your
   details). Where the logo goes decides which side each takes.
   ══════════════════════════════════════════════════════════ */
.inv-logo-left .inv-doc-head { flex-direction: row; }
.inv-logo-left .inv-doc-titlebox { text-align: right; }

.inv-logo-right .inv-doc-head { flex-direction: row-reverse; }
.inv-logo-right .inv-doc-titlebox { text-align: left; }
.inv-logo-right .inv-doc-brand { text-align: right; }

.inv-logo-center .inv-doc-head { flex-direction: column; align-items: center; text-align: center; }
.inv-logo-center .inv-doc-titlebox { text-align: center; }
.inv-logo-center .inv-doc-brand { text-align: center; }
.inv-logo-center .inv-doc-status { margin-left: auto; margin-right: auto; }

/* Logo size */
.inv-logosize-small .inv-doc-logo { max-width: 130px; max-height: 54px; }
.inv-logosize-medium .inv-doc-logo { max-width: 190px; max-height: 78px; }
.inv-logosize-large .inv-doc-logo { max-width: 260px; max-height: 104px; }

/* ══════════════════════════════════════════════════════════
   TEMPLATES — each is a different arrangement of the document,
   not a different colour. The accent colour is chosen separately
   and applies to whichever of these is selected.
   ══════════════════════════════════════════════════════════ */

/* Professional: split header under an accent rule, banded table,
   totals aligned right. (The base styles above.) */
.inv-tpl-professional .inv-doc-head {
    padding-bottom: 12px;
    border-bottom: 3px solid var(--inv-accent);
}

/* Minimal: the identity stacks under the brand on the same side, the
   table is ruled with hairlines only, and nothing is filled. */
.inv-tpl-minimal .inv-doc-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.inv-tpl-minimal.inv-logo-right .inv-doc-head { align-items: flex-end; }
.inv-tpl-minimal.inv-logo-center .inv-doc-head { align-items: center; }
.inv-tpl-minimal .inv-doc-titlebox { text-align: inherit; }
.inv-tpl-minimal .inv-doc-title { font-weight: 400; letter-spacing: 0.16em; font-size: 22px; }
.inv-tpl-minimal .inv-doc-table th {
    background: transparent;
    color: #0f172a;
    border-top: 1px solid #94a3b8;
    border-bottom: 1px solid #94a3b8;
}
.inv-tpl-minimal .inv-doc-table td { border-bottom: none; }
.inv-tpl-minimal .inv-doc-table tbody tr:last-child td { border-bottom: 1px solid #cbd5e1; }
.inv-tpl-minimal .inv-doc-totals { width: 46%; }
.inv-tpl-minimal .inv-doc-balance { background: transparent; border-top: 1px solid #0f172a; }
.inv-tpl-minimal .inv-doc-parties { gap: 22px; }

/* Modern: the title spans the page as a filled banner, the details sit
   in three columns beneath it, and the totals live in a panel. */
.inv-tpl-modern .inv-doc-head { flex-direction: column; align-items: stretch; gap: 12px; }
.inv-tpl-modern .inv-doc-brand { text-align: left; }
.inv-tpl-modern.inv-logo-center .inv-doc-brand { text-align: center; }
.inv-tpl-modern.inv-logo-right .inv-doc-brand { text-align: right; }
.inv-tpl-modern .inv-doc-titlebox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: var(--inv-accent);
    border-radius: 6px;
    text-align: left;
}
.inv-tpl-modern .inv-doc-titlebox > * { color: #fff; }
.inv-tpl-modern .inv-doc-title { color: #fff; font-size: 24px; flex: 0 0 auto; }
.inv-tpl-modern .inv-doc-titlebox p { text-align: right; margin-left: auto; }
.inv-tpl-modern .inv-doc-status { background: rgba(255, 255, 255, 0.22); color: #fff; }
.inv-tpl-modern .inv-doc-table th { border-radius: 0; }
.inv-tpl-modern .inv-doc-table tbody tr:nth-child(even) { background: #f8fafc; }
.inv-tpl-modern .inv-doc-totals {
    width: 56%;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.inv-tpl-modern .inv-doc-balance { background: transparent; }

/* Classic: everything centred at the top, framed party blocks, a fully
   ruled table and boxed totals, set in a serif face. */
.inv-tpl-classic .inv-doc { font-family: Georgia, 'Times New Roman', serif; }
.inv-tpl-classic .inv-doc-head { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.inv-tpl-classic .inv-doc-brand,
.inv-tpl-classic .inv-doc-titlebox { text-align: center; }
.inv-tpl-classic .inv-doc-title {
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 0.2em;
    border-bottom: 3px double var(--inv-accent);
    padding-bottom: 6px;
    margin-bottom: 6px;
}
.inv-tpl-classic .inv-doc-status { margin-left: auto; margin-right: auto; }
.inv-tpl-classic .inv-doc-party {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}
.inv-tpl-classic .inv-doc-table { border: 1px solid #94a3b8; }
.inv-tpl-classic .inv-doc-table th {
    background: transparent;
    color: #0f172a;
    border-bottom: 1px solid #94a3b8;
    border-right: 1px solid #cbd5e1;
}
.inv-tpl-classic .inv-doc-table td { border-right: 1px solid #e2e8f0; }
.inv-tpl-classic .inv-doc-table th:last-child,
.inv-tpl-classic .inv-doc-table td:last-child { border-right: none; }
.inv-tpl-classic .inv-doc-totals {
    width: 52%;
    padding: 10px 12px;
    border: 1px solid #94a3b8;
    border-radius: 4px;
}
.inv-tpl-classic .inv-doc-balance { background: transparent; border-top: 3px double var(--inv-accent); }
.inv-tpl-classic .inv-doc-section { padding-top: 8px; border-top: 1px solid #e2e8f0; }

/* ── Confirmation dialog ───────────────────────────────── */
.inv-confirm {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
}

.inv-confirm[hidden] { display: none; }

.inv-confirm-box {
    width: 100%;
    max-width: 464px;   /* was 420px — 22px side padding */
    padding: 22px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
}

.inv-confirm-title { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 8px; }
.inv-confirm-body { font-size: 14px; line-height: 1.6; color: #64748b; margin-bottom: 18px; }
.inv-confirm-actions { display: flex; gap: 10px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1400px) {
    body.inv-page .sidebar-ads { display: none; }
}

@media (max-width: 1080px) {
    /* Editor first, then the preview, then the actions stay with it. */
    .inv-workspace { grid-template-columns: minmax(0, 1fr); }
    .inv-preview-panel { position: static; }
    .inv-preview-scroll { max-height: none; }
    body.inv-page .pagebox { padding: 20px 24px; }
}

@media (max-width: 720px) {
    .inv-grid-4 { grid-template-columns: 1fr 1fr; }
    .inv-row { grid-template-columns: 1fr 1fr; }
    .inv-row-action { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 560px) {
    body.inv-page .pagebox { padding: 16px 12px; }
    .inv-title { font-size: 27px; }
    .inv-section { padding: 14px; }
    .inv-grid-2, .inv-grid-4 { grid-template-columns: 1fr; }
    .inv-action-row { flex-wrap: wrap; }
    .inv-image-format { flex: 1 1 100%; width: 100%; }
    .inv-check-inline { margin: 8px 0 0; }
    .inv-preview-scroll { padding: 8px; }
}

/* ── Print: the document only ──────────────────────────── */
@media print {
    body.inv-page .nav,
    body.inv-page .backtohome,
    body.inv-page .inv-header,
    body.inv-page .inv-editor,
    body.inv-page .inv-summary,
    body.inv-page .inv-actions,
    body.inv-page .inv-error,
    body.inv-page .sidebar-ads,
    body.inv-page .ad-horizontal,
    body.inv-page footer,
    body.inv-page .tt-toasts,
    body.inv-page .inv-confirm {
        display: none !important;
    }

    body.inv-page,
    body.inv-page .pagebox,
    body.inv-page .tool-area,
    body.inv-page .inv-workspace,
    body.inv-page .inv-preview-panel,
    body.inv-page .inv-preview-scroll {
        display: block;
        margin: 0;
        padding: 0;
        background: #fff;
        box-shadow: none;
        border: none;
        max-height: none;
        overflow: visible;
    }

    .inv-doc-stage {
        height: auto !important;
        overflow: visible;
    }

    .inv-doc {
        width: auto !important;
        max-width: none;
        transform: none !important;   /* the screen scale must not reach paper */
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        font-size: 10.5px;
    }

    /* Keep the table and the totals from splitting awkwardly. */
    .inv-doc-table tr { page-break-inside: avoid; }
    .inv-doc-table thead { display: table-header-group; }
    .inv-doc-totals,
    .inv-doc-section { page-break-inside: avoid; }

    @page { margin: 14mm; }
}

/* ------------------------------------------------------------------
   MOBILE

   These live here rather than in main.css because .inv-select and
   .inv-textarea are class selectors and main.css can only reach them
   with a bare `select` / `textarea`, which loses on specificity no
   matter what order the files load in. The stylesheet that owns the
   class is the one that can set it.

   16px is the threshold below which iOS Safari zooms the page when a
   field takes focus and never zooms back — on a dense form like this
   one that leaves the user magnified and scrolling sideways.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {

    .inv-input,
    .inv-select,
    .inv-textarea {
        font-size: 16px;
    }

    .inv-input,
    .inv-select {
        min-height: 44px;
    }

    .inv-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .inv-section-title {
        min-height: 44px;
    }

    /* The preview is a picture of an A4 page at a fixed width, so it
       cannot reflow with the column. It scrolls inside its own frame
       instead, which keeps the page itself from moving sideways. */
    .inv-preview,
    .inv-preview-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}