.dataTables_length {
  display: block !important;
  padding-bottom: 10px;
}
.dt-clear-btn, .dt-apply-btn {
    width: 20px !important;
}
.table-container th, .table-container td {
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-container .action-col {
    max-width: 1000px!important;
}

div.dt-datetime {
    width: auto !important;
}

.dtsb-logic, .dtsb-clearGroup {
    height: 50px !important;
    max-height: 50px !important;
    width: 50px !important;
    max-width: 50px !important;
}

/* Freeze first column when horizontally scrolling inside .table-responsive.
   Selectors use descendant combinator (not >) because DataTables wraps the
   table in .dataTables_wrapper > .row > .col-sm-12 — the <table> is no longer
   a direct child of .table-responsive after init. */
.table-responsive table.dataTable > thead > tr > th:first-child,
.table-responsive table.dataTable > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #ffffff;
}
.table-responsive table.dataTable > thead > tr > th:first-child {
    z-index: 2;
    background-color: #f1f3f5;  /* match Bootstrap .table-light */
}
/* Bootstrap 5 paints striped rows via inset box-shadow on top of a
   transparent background. Re-assert the stripe color on the sticky cell so
   scrolling content underneath doesn't show through. */
.table-responsive table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > td:first-child {
    background-color: #fff;
}

/* Force the DataTable to overflow horizontally so .table-responsive actually
   scrolls — Bootstrap's .table sets width:100% which would otherwise compress
   columns to fit and never trigger horizontal scroll (so sticky has nothing
   to stick against). */
.table-responsive table.dataTable > thead > tr > th,
.table-responsive table.dataTable > tbody > tr > td {
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-responsive table.dataTable .action-col {
    max-width: 1000px !important;
    white-space: normal;
}