/* Important layered rules override legacy page-specific pixel widths, not data. */
@layer app-item-fit {
    .app-item-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    .app-item-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-overflow: unset !important;
        vertical-align: top !important;
        padding: .45rem .25rem !important;
    }

    /* RIS creation keeps the lot binding for source identity, but never shows
       its column. Match the binding too so older rendered rows stay hidden. */
    .ris-items-attached .app-item-table th.lot,
    .ris-items-attached .app-item-table td:has(> input[name$=".ProcUnitGroup"]) {
        display: none !important;
    }

    .ris-items-attached .app-item-table .item-row-actions .bi-trash {
        font-size: .85rem !important;
    }

    /* Leave room for the selected unit as well as its dropdown arrow. */
    .ris-items-attached .app-item-table select[name$=".Uom"] {
        padding-left: .25rem !important;
        padding-right: 1.25rem !important;
        background-position: right .25rem center !important;
    }

    /* Table thumbnails normally double their base size; RIS uses half that. */
    .ris-items-attached .app-item-table .item-avatar {
        --item-avatar-table-size: var(--item-avatar-size);
    }

    .app-item-table :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, .input-group) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .app-item-table :is(p, small, a, .badge, .btn) {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .app-item-table > :is(thead, tbody, tfoot) > tr > :is(th, td) > :is(div, span, a) {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .app-item-table .d-flex {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .app-item-table .app-item-description :is(div, p, small):not(.item-avatar, .item-image-fallback, .item-avatar-fallback, .js-img-fallback) {
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
    }

    /* Only the item copy grows; media must keep its photo/avatar dimensions. */
    .app-item-table .app-item-description .d-flex > div:not(.item-avatar, .item-image-fallback, .item-avatar-fallback, .js-img-fallback) {
        flex: 1 1 10rem !important;
        margin-inline: 0 !important;
    }

    .app-item-table .item-avatar {
        flex: 0 0 var(--item-avatar-display-size) !important;
        width: var(--item-avatar-display-size) !important;
        height: var(--item-avatar-display-size) !important;
    }

    .app-item-table .app-item-description :is(p, small, .text-muted) {
        white-space: pre-line !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .app-item-table :is(.external-pr-decision-actions, .transaction-record-item-summary, .process-tie-result-list, .tie-result-list) {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .app-item-table .transaction-record-item-copy {
        flex: 1 1 10rem !important;
        min-width: 0 !important;
    }

    .app-item-table .iar-detail-row > td {
        padding: 0 !important;
    }

    .app-item-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }

    /* Keep all fields readable on a phone instead of squeezing editable numbers
       into tiny columns. The original table and every value remain in the DOM. */
    @media screen and (max-width: 767.98px) {
        .app-item-table[data-item-responsive] > thead {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            margin: -1px !important;
            padding: 0 !important;
            overflow: hidden !important;
            clip-path: inset(50%) !important;
        }

        .app-item-table[data-item-responsive]:not([hidden]):not(.d-none),
        .app-item-table[data-item-responsive] > :is(tbody, tfoot):not([hidden]):not(.d-none) {
            display: block !important;
        }

        .app-item-table[data-item-responsive] > :is(tbody, tfoot) > tr:not([hidden]):not(.d-none) {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        .app-item-table[data-item-responsive] > tbody > tr + tr {
            margin-top: .5rem;
        }

        .app-item-table[data-item-responsive] > :is(tbody, tfoot) > tr > .app-item-description,
        .app-item-table[data-item-responsive] > :is(tbody, tfoot) > tr > [colspan]:not([colspan="1"]) {
            grid-column: 1 / -1 !important;
        }

        .app-item-table[data-item-responsive] > tbody > tr > [data-item-label]::before {
            content: attr(data-item-label);
            display: block;
            margin-bottom: .2rem;
            color: #64748b;
            font-size: .72rem;
            font-weight: 400;
            text-align: left;
        }

        /* RFQ bulk-quote menus live in their column header. Keep these real
           controls accessible above the labeled rows; never clone their IDs. */
        .app-item-table[data-item-responsive][data-item-header-actions] > thead {
            position: static !important;
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
            overflow: visible !important;
            clip-path: none !important;
        }

        .app-item-table[data-item-responsive][data-item-header-actions] > thead > tr {
            display: flex !important;
            flex-wrap: wrap !important;
        }

        .app-item-table[data-item-responsive][data-item-header-actions] > thead > tr > th:not([data-item-header-action]) {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            overflow: hidden !important;
            clip-path: inset(50%) !important;
        }
    }
}