/* ============================================================================
 * DataTables layout corrections — loaded globally from
 * usersc/templates/customizer/header.php.
 *
 * Goal: search box on the LEFT, rows-per-page on the RIGHT, and a length select
 * whose dropdown chevron never sits on top of the number.
 *
 * TWO stylesheets fight us, and they load at different points:
 *
 *  1. users/css/datatables.css — the Bootstrap 4-era DataTables sheet, loaded
 *     globally from header.php just before this one. It forces
 *         div.dataTables_wrapper div.dataTables_length select { width: 75px }
 *     A Bootstrap 5 .form-select draws its chevron as a background image and
 *     reserves 2.25rem of right padding for it; flattening the control to 75px
 *     leaves too little content box, so the chevron overlaps the value. Pages
 *     that do NOT also pull the CDN sheet below are stuck with this.
 *
 *  2. cdn.datatables.net/1.x/css/dataTables.bootstrap5.min.css — pulled in by
 *     individual pages, i.e. AFTER this file in document order. It re-asserts
 *         div.dataTables_wrapper div.dataTables_filter { text-align: right }
 *     at the same specificity as a plain override, so load order alone would
 *     let it win.
 *
 * Hence every rule here is deliberately prefixed with `body` to raise
 * specificity above both sheets, so this file wins regardless of load order.
 * That is preferred over !important, which would be harder to override later.
 *
 * All DataTables usage on this site is 1.x (1.11.5 - 1.13.8), so only the
 * dataTables_* class names are needed. DT 2.x uses dt-length / dt-search and is
 * not in play; if a page is ever upgraded, add the equivalent selectors.
 * ==========================================================================*/

/* ── Order: search left, rows-per-page right ──────────────────────────────
 * The Bootstrap 5 integration renders the top row as
 *   .row > [col] > .dataTables_length  +  [col] > .dataTables_filter
 * Bootstrap's .row is already display:flex, so `order` alone does it — no
 * markup changes and no per-page `dom` string edits, which is what makes this
 * work across every table on the site.
 */
body div.dataTables_wrapper div.row > [class*="col-"]:has(div.dataTables_length) { order: 1; }
body div.dataTables_wrapper div.row > [class*="col-"]:has(div.dataTables_filter) { order: 0; }

/* Fallback for browsers without :has(). Relies on the standard DT/BS5 markup,
 * where length is the first cell of the first row and filter is the second. */
@supports not selector(:has(*)) {
  body div.dataTables_wrapper div.row:first-child > [class*="col-"]:first-child  { order: 1; }
  body div.dataTables_wrapper div.row:first-child > [class*="col-"]:nth-child(2) { order: 0; }
}

/* Alignment follows the new order. Keyed on the control itself rather than its
 * position, so a table rendering only one of the two still lands correctly. */
body div.dataTables_wrapper div.dataTables_filter { text-align: left; }
body div.dataTables_wrapper div.dataTables_length { text-align: right; }

/* ── The length select ─────────────────────────────────────────────────────
 * Size to content rather than a fixed 75px, and guarantee the chevron gutter so
 * it can never overlap the value.
 */
body div.dataTables_wrapper div.dataTables_length select {
  width: auto;
  min-width: 4.5rem;          /* comfortably fits "100" / "All" */
  padding-right: 2.25rem;     /* Bootstrap 5's reserved chevron gutter */
  background-position: right 0.75rem center;
}

/* Keep the two controls from touching once they sit side by side. */
body div.dataTables_wrapper div.dataTables_filter label,
body div.dataTables_wrapper div.dataTables_length label { margin-bottom: 0; }
body div.dataTables_wrapper div.dataTables_filter input { margin-left: 0.5rem; }
body div.dataTables_wrapper div.dataTables_length select { margin: 0 0.375rem; }

/* ── Stacked (mobile) ──────────────────────────────────────────────────────
 * Both sheets centre these controls below 768px. Once stacked there is no
 * left/right relationship left to express, so left-align them for a cleaner
 * column. Needs the same specificity bump — the CDN rule is inside a media
 * query of its own.
 */
@media screen and (max-width: 767.98px) {
  body div.dataTables_wrapper div.dataTables_filter,
  body div.dataTables_wrapper div.dataTables_length {
    text-align: left;
  }
  body div.dataTables_wrapper div.dataTables_length { margin-top: 0.5rem; }
}