/* ============================================================
   DataTables control fixes — shared by the admin layout and the
   customer portal layout, so every list view behaves the same.
   ============================================================ */

/* --- "Show N entries" select.
       DataTables sizes this with width:auto, which measures the widest OPTION
       text but not the room Bootstrap's .form-select reserves for its caret
       (drawn as a background-image). The caret therefore painted on top of the
       number. Give it an explicit floor plus real caret room. --- */
.dataTables_length select,
.dataTables_length select.form-select {
    width: auto !important;
    min-width: 4.75rem;
    padding-left: .65rem;
    padding-right: 2.1rem !important;
    background-position: right .6rem center;
    text-align: left;
    text-indent: 0;
}

/* Keep label text and control on one baseline instead of colliding. */
.dataTables_length label,
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 0;
}
/* display:flex made the label a full-width block, which killed DataTables'
   default right-alignment and stranded the search box in the middle of the
   page. Push its content back to the right edge on desktop. */
.dataTables_filter label { justify-content: flex-end; }
.dataTables_filter input { min-width: 15rem; }

/* --- Wide tables scroll inside their own box, never pushing the page sideways.
       admin.js tags the box only when the table genuinely overflows, so narrow
       tables get no scrollbar and keep a working sticky header (an overflow-x
       box computes overflow-y:auto, which breaks position:sticky). --- */
.dt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-table-box:not(.dt-scroll-x) .table > thead th { position: sticky; top: 0; z-index: 2; }
.modal-body .table > thead th { position: static; }

/* Empty state reads as a state, not a broken table. */
table.dataTable td.dataTables_empty { padding: 2rem 1rem; color: #64748b; font-style: normal; }

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: .5rem; }
    .dataTables_length label,
    .dataTables_filter label { width: 100%; justify-content: flex-start; }
    .dataTables_filter input { min-width: 0; flex: 1; }
}