/* Invoice account mapping stays within the content area, including archive previews. */
.invoice-mapping-layout,
.invoice-mapping-layout form,
.invoice-mapping-layout .archive-company-list,
.invoice-mapping-layout .archive-company-card,
.invoice-mapping-layout .archive-company-head > *,
.invoice-mapping-layout .archive-company-details,
.invoice-mapping-layout .archive-invoice-card,
.invoice-mapping-layout .archive-invoice-lines,
.invoice-mapping-layout .bulk-line-invoice-card,
.invoice-mapping-layout .form-group {
    min-width: 0;
    max-width: 100%;
}
.invoice-mapping-layout .invoice-fit-wrap {
    container: invoice-lines / inline-size;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}
.invoice-mapping-layout .invoice-fit-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.invoice-mapping-layout .invoice-fit-table th,
.invoice-mapping-layout .invoice-fit-table td {
    min-width: 0;
    padding: 11px 7px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.45;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.invoice-mapping-layout .invoice-fit-table th { font-size: 12px; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(1) { width: 24%; text-align: left; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(2) { width: 30%; text-align: left; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(3) { width: 7%; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(4) { width: 5%; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(5) { width: 7%; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(6) { width: 8%; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(7) { width: 11%; }
.invoice-mapping-layout .invoice-fit-table :is(th, td):nth-child(8) { width: 8%; }
.invoice-mapping-layout .invoice-account-edit-table :is(th, td):nth-child(1) { width: 34%; }
.invoice-mapping-layout .invoice-account-edit-table :is(th, td):nth-child(2) { width: 38%; }
.invoice-mapping-layout .invoice-account-edit-table :is(th, td):nth-child(3) { width: 12%; }
.invoice-mapping-layout .invoice-account-edit-table :is(th, td):nth-child(4) { width: 16%; }
.invoice-mapping-layout :is(select, input, .account-select-search, .account-select-query) {
    min-width: 0;
    max-width: 100%;
}
.invoice-mapping-layout .invoice-account-cell :is(select, .account-select-search, .account-select-query) { width: 100%; }
.invoice-mapping-layout .invoice-account-cell .form-group { margin: 0; }
.invoice-mapping-layout .archive-company-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
}
.invoice-mapping-layout :is(.archive-company-title, .archive-invoice-head > div, .bulk-line-invoice-head > div) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.invoice-mapping-layout .bulk-line-invoice-head { flex-wrap: wrap; }
.invoice-mapping-layout .bulk-line-invoice-head :is(strong, em) {
    white-space: normal;
    overflow-wrap: anywhere;
}
.invoice-mapping-layout .archive-invoice-head .tiny-btn { flex-shrink: 0; }
.invoice-mapping-layout .form-actions { flex-wrap: wrap; }

/* The actual table width matters: a sidebar or nested archive card reduces it. */
@container invoice-lines (max-width: 780px) {
    .invoice-mapping-layout .invoice-fit-table { display: block; background: transparent; }
    .invoice-mapping-layout .invoice-fit-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .invoice-mapping-layout .invoice-fit-table tbody { display: grid; gap: 12px; padding: 10px; }
    .invoice-mapping-layout .invoice-fit-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
        border: 1px solid #dfe7f1;
        border-radius: 12px;
        background: #fff;
    }
    .invoice-mapping-layout .invoice-fit-table tbody td:nth-child(n) {
        display: block;
        width: auto;
        min-width: 0;
        padding: 9px 10px;
        border: 0;
        text-align: left;
    }
    .invoice-mapping-layout .invoice-fit-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #64748b;
        font-size: 11px;
        font-weight: 600;
        font-variant-numeric: normal;
    }
    .invoice-mapping-layout .invoice-fit-table .invoice-product-cell,
    .invoice-mapping-layout .invoice-fit-table .invoice-account-cell { grid-column: 1 / -1; }
    .invoice-mapping-layout .invoice-product-cell { font-weight: 600; }
}
@container invoice-lines (max-width: 400px) {
    .invoice-mapping-layout .invoice-fit-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .invoice-mapping-layout .archive-company-head { grid-template-columns: minmax(0, 1fr); }
    .invoice-mapping-layout .archive-invoice-head { align-items: flex-start; }
}
/* Older browsers without container queries still receive a readable compact layout. */
@supports not (container-type: inline-size) {
    @media (max-width: 1200px) {
        .invoice-mapping-layout .invoice-fit-table { display: block; }
        .invoice-mapping-layout .invoice-fit-table thead { display: none; }
        .invoice-mapping-layout .invoice-fit-table tbody { display: grid; gap: 12px; padding: 10px; }
        .invoice-mapping-layout .invoice-fit-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #dfe7f1; border-radius: 12px; }
        .invoice-mapping-layout .invoice-fit-table tbody td:nth-child(n) { display: block; width: auto; min-width: 0; padding: 9px 10px; border: 0; text-align: left; }
        .invoice-mapping-layout .invoice-fit-table td::before { content: attr(data-label); display: block; color: #64748b; font-size: 11px; margin-bottom: 4px; }
        .invoice-mapping-layout .invoice-fit-table .invoice-product-cell,
        .invoice-mapping-layout .invoice-fit-table .invoice-account-cell { grid-column: 1 / -1; }
    }
}