/* Production hardening fixes: responsive containment and mobile controls. */

.dataTables_wrapper .dataTables_scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollFoot {
    max-width: 100%;
}

#product_table tfoot > tr > td > div[style*="display: flex"] {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

#product_table tfoot form {
    margin: 0;
}

#product_table tfoot #delete-selected,
#product_table tfoot #edit-selected,
#product_table tfoot #deactivate-selected,
#product_table tfoot .update_product_location {
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 639px) {
    details.tw-dw-dropdown {
        position: relative;
    }

    details.tw-dw-dropdown > .tw-dw-dropdown-content {
        left: auto !important;
        right: 0 !important;
        max-width: calc(100vw - 1rem);
    }

    .dataTables_wrapper,
    .table-responsive {
        max-width: 100%;
    }
}


/* Keep cloned DataTables product bulk actions reachable at narrow widths. */
#product_table_wrapper .dataTables_scrollFoot,
#product_table_wrapper .dataTables_scrollFootInner,
#product_table_wrapper .dataTables_scrollFoot table {
    width: 100% !important;
    max-width: 100% !important;
}

#product_table_wrapper .product-bulk-actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0.375rem;
}

#product_table_wrapper .product-bulk-actions form {
    margin: 0 !important;
    min-width: 0;
}

#product_table_wrapper .product-bulk-actions button,
#product_table_wrapper .product-bulk-actions input[type="submit"] {
    max-width: 100%;
    white-space: normal;
}


/* Keep product bulk actions reachable on narrow screens even though the
   DataTable itself is horizontally scrollable. */
#product_table tfoot .product-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    position: sticky;
    left: 0;
    width: min(100%, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

#product_table tfoot .product-bulk-actions form {
    margin: 0;
    flex: 0 1 auto;
}

#product_table tfoot .product-bulk-actions button,
#product_table tfoot .product-bulk-actions input[type="submit"] {
    max-width: 100%;
    white-space: normal;
}


/* Keep product bulk actions usable even when DataTables gives the footer
   the full desktop table width on very narrow screens. */
.product-bulk-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0.375rem;
    white-space: normal !important;
}

.product-bulk-actions form {
    display: inline-flex;
    margin: 0 !important;
}

@media (max-width: 639px) {
    .dataTables_scrollFoot .product-bulk-actions,
    #product_table .product-bulk-actions {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
    }

    .product-bulk-actions > button,
    .product-bulk-actions > form > button,
    .product-bulk-actions > form > input[type="submit"] {
        max-width: 100%;
        white-space: normal;
    }
}