/* ==========================================================================
   core-overrides.css
   Purpose: Safe overrides for 3rd-party vendor CSS (DataTables + Select)
   Load this AFTER:
     - dataTables*.css
     - select.dataTables*.css
   ========================================================================== */

/* -----------------------------
   Theme variables (tweak these)
   ----------------------------- */
:root {
  /* Base selected background (make lighter/darker here) */
  --dt-select-bg: #d7e3f7;

  /* Selected background for odd rows (stripe/display odd) */
  --dt-select-bg-odd: #cfddf5;

  /* Selected background when hovering selected rows */
  --dt-select-bg-hover: #c5d6f3;

  /* Selected background for ordered columns (sorting_1/_2/_3 cells) */
  --dt-select-bg-order: #cfddf6;

  /* Hover background for ordered columns inside a selected row */
  --dt-select-bg-order-hover: #bdd1f1;

  /* If you want selected rows to force a text color (usually not needed) */
  --dt-select-text: inherit;
}

/* --------------------------------------------
   Core selected row + selected cell background
   (matches vendor selectors, but wins by order)
   -------------------------------------------- */
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background-color: var(--dt-select-bg) !important;
  color: var(--dt-select-text) !important;
}

/* Stripe/display "odd selected" backgrounds */
table.dataTable.stripe tbody > tr.odd.selected,
table.dataTable.stripe tbody > tr.odd > .selected,
table.dataTable.display tbody > tr.odd.selected,
table.dataTable.display tbody > tr.odd > .selected {
  background-color: var(--dt-select-bg-odd) !important;
}

/* --------------------------------------------
   Hover colours when row is selected
   -------------------------------------------- */
table.dataTable.hover tbody > tr.selected:hover,
table.dataTable.hover tbody > tr > .selected:hover,
table.dataTable.display tbody > tr.selected:hover,
table.dataTable.display tbody > tr > .selected:hover {
  background-color: var(--dt-select-bg-hover) !important;
}

/* --------------------------------------------
   Order column colouring (sorting_1/_2/_3)
   inside selected rows
   -------------------------------------------- */
table.dataTable.order-column tbody > tr.selected > .sorting_1,
table.dataTable.order-column tbody > tr.selected > .sorting_2,
table.dataTable.order-column tbody > tr.selected > .sorting_3,
table.dataTable.order-column tbody > tr > .selected,
table.dataTable.display tbody > tr.selected > .sorting_1,
table.dataTable.display tbody > tr.selected > .sorting_2,
table.dataTable.display tbody > tr.selected > .sorting_3,
table.dataTable.display tbody > tr > .selected {
  background-color: var(--dt-select-bg-order) !important;
}

/* Stripe odd selected sorting cell backgrounds */
table.dataTable.display tbody > tr.odd.selected > .sorting_1,
table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1,
table.dataTable.display tbody > tr.odd.selected > .sorting_2,
table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_2,
table.dataTable.display tbody > tr.odd.selected > .sorting_3,
table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_3 {
  background-color: var(--dt-select-bg-order) !important;
}

/* Stripe even selected sorting cell backgrounds */
table.dataTable.display tbody > tr.even.selected > .sorting_1,
table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1,
table.dataTable.display tbody > tr.even.selected > .sorting_2,
table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_2,
table.dataTable.display tbody > tr.even.selected > .sorting_3,
table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_3 {
  background-color: var(--dt-select-bg-order) !important;
}

/* --------------------------------------------
   Hover colours for sorting_1/_2/_3 in selected row
   -------------------------------------------- */
table.dataTable.display tbody > tr.selected:hover > .sorting_1,
table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1,
table.dataTable.display tbody > tr.selected:hover > .sorting_2,
table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_2,
table.dataTable.display tbody > tr.selected:hover > .sorting_3,
table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_3 {
  background-color: var(--dt-select-bg-order-hover) !important;
}

/* --------------------------------------------
   Hovering a row and the selected cell(s) inside it
   (matches vendor: tr:hover > .selected etc.)
   -------------------------------------------- */
table.dataTable.display tbody > tr:hover > .selected,
table.dataTable.display tbody > tr > .selected:hover,
table.dataTable.order-column.hover tbody > tr:hover > .selected,
table.dataTable.order-column.hover tbody > tr > .selected:hover {
  background-color: var(--dt-select-bg-order-hover) !important;
}

/* --------------------------------------------
   Checkbox tick shadow colour (optional)
   The vendor uses #B0BED9 in the shadow. If you
   lighten selection background, this can look a bit dark.
   Uncomment if you want it aligned.
   -------------------------------------------- */
/*
table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
  text-shadow:
    1px  1px var(--dt-select-bg),
   -1px -1px var(--dt-select-bg),
    1px -1px var(--dt-select-bg),
   -1px  1px var(--dt-select-bg) !important;
}
*/