/* Shared layout rules for every List operation table.

   Loaded globally via the "styles" array in config/backpack/ui.php. The selectors
   are keyed off .crud-table so nothing here reaches the tables Backpack renders
   inside modals, widgets or the Show operation. */

/* Centres the columns, header, body and footer together.

   DataTables aligns headers left, and both header and body right for any column
   it types as numeric or date. Centring only the headers lines them up with
   nothing: the title sits mid-column while the values underneath stay flush left
   or flush right, which reads as a worse misalignment than leaving it alone. So
   the header and the cells under it are centred by one rule.

   The selector carries .dataTable on purpose. DataTables' own
   "table.dataTable td.dt-type-numeric" is two classes deep, so a plain
   "table.crud-table td" would lose to it and every numeric column would stay
   right-aligned. Responsive child rows are excluded; their details list is a
   flowing definition list, not a set of columns. */
table.crud-table.dataTable > thead > tr > th,
table.crud-table.dataTable > tbody > tr:not(.child) > td,
table.crud-table.dataTable > tfoot > tr > th {
    text-align: center;
}

/* Squares up the sortable headers.

   A sortable header keeps 30px of padding on its right for the sort arrow, which
   is absolutely positioned and does not follow the text. The left side gets far
   less, so centring alone lands the title about 9px left of the real centre while
   a non-sortable header like Actions, whose padding is even, sits dead centre.

   Widening the left padding to match cannot win: Backpack's bundle.css sets
   "#crudTable_wrapper table.dataTable tr th:first-child { padding-left: 0.6rem
   !important }", and an ID plus !important outranks anything selectable here. So
   the title is nudged visually instead. transform does not participate in layout,
   so no column grows and the Responsive extension keeps hiding the same columns
   it did before; inline-block is required because transforms do not apply to
   inline elements. */
table.crud-table.dataTable > thead > tr > th.dt-orderable-asc > .dt-column-title,
table.crud-table.dataTable > thead > tr > th.dt-orderable-desc > .dt-column-title {
    display: inline-block;
    transform: translateX(9px);
}

/* Centres the header text vertically.

   Body cells already sit middle thanks to the "table-vcenter" class Backpack puts
   on the table, but DataTables aligns header cells to the bottom. That only shows
   once a title wraps: "Display order" drops to two lines and every single-line
   title beside it sinks to the last line's baseline. */
table.crud-table.dataTable > thead > tr > th {
    vertical-align: middle;
}

/* Pushes the sort arrow against the right edge of its column.

   DataTables insets it by 12px via "table.dataTable thead > tr >
   th.dt-orderable-asc span.dt-column-order", which is three classes and five
   elements deep, so the column class has to be named here to outrank it - the
   same three classes over four elements loses the tie on element count.

   The arrow is absolutely positioned, so moving it changes no widths and the
   title's own centring is unaffected. */
table.crud-table.dataTable > thead > tr > th.dt-orderable-asc > span.dt-column-order,
table.crud-table.dataTable > thead > tr > th.dt-orderable-desc > span.dt-column-order {
    right: 0;
}

/* Keeps the action buttons on one line.

   Backpack's default table class includes "nowrap", but it is omitted in
   config/backpack/ui.php so long text wraps and the table stays inside its
   container. The side effect is that the Actions cell wraps too, stacking
   Preview/Edit/Delete onto three lines. Scoping nowrap to that one cell keeps the
   buttons inline without making every other column refuse to wrap, which would
   widen the table enough for the Responsive extension to push real columns into
   the details modal.

   The cell is matched by content rather than by position, so a list whose last
   column holds data instead of buttons keeps wrapping normally. */
table.crud-table > thead > tr > th:last-child {
    white-space: nowrap;
}

table.crud-table > tbody > tr:not(.child) > td:last-child:has(> a.btn) {
    white-space: nowrap;
}

/* Highlights the shown columns in the column-visibility dropdown, in the theme's own
   .dropdown-item.active purple. Backpack's common.css has its own rule for this, but its
   selectors expect the Buttons 1.x markup and 3.x renamed the class to dt-button-active,
   so every entry rendered identically. */
.dt-button-collection .dt-button.dt-button-active.dropdown-item {
    background: #7c69ef;
    color: #fff;
}

.dt-button-collection .dt-button.dt-button-active.dropdown-item:hover {
    background: #705fd7;
    color: #fff;
}