/* Force the table to behave on small screens */
@media screen and (max-width: 767px) {
    /* Make the Customer name look like a link so users know to click it */
    #orders-table tbody td.dtr-control {
        color: #0d6efd;
        font-weight: bold;
        cursor: pointer;
        text-decoration: underline;
    }

    /* Style the expanded child row to look like a clean list */
    table.dataTable > tbody > tr.child ul.dtr-details {
        width: 100%;
        display: table; /* Makes it look like a mini-table inside the row */
        padding: 10px;
        background: #f8f9fa;
    }
    
    table.dataTable > tbody > tr.child li {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid #dee2e6;
    }
}