/**
 * Shared dark-mode overrides for vendor DataTables/select2 chrome.
 *
 * The vendor jquery.dataTables.min.css / select2 stylesheets hardcode white
 * backgrounds and dark text with no theming hooks, so they can't respond to
 * this site's --card-bg/--text-color/etc. tokens on their own. Link this
 * file (after the vendor stylesheet, so it wins the cascade) on any
 * dark_mode_ready page that renders a DataTable or a select2 dropdown, and
 * these rules pick up automatically once <html data-theme="dark"> is set or
 * the OS is in dark mode -- no per-page DataTables CSS needed.
 *
 * Uses literal hex values (not var()) matching the dark palette established
 * in header_gdp.php / homepage.php, since pages define their own local
 * --card-bg/--border-color etc. under different value sets and this file
 * needs to work the same regardless of which page includes it.
 */

:root[data-theme="dark"] table.dataTable,
:root[data-theme="dark"] table.dataTable thead th,
:root[data-theme="dark"] table.dataTable thead td,
:root[data-theme="dark"] table.dataTable tbody th,
:root[data-theme="dark"] table.dataTable tbody td {
  color: #E2E8F0;
  border-color: #334155;
}
:root[data-theme="dark"] table.dataTable thead th,
:root[data-theme="dark"] table.dataTable thead td {
  /* background-color, not the background shorthand: the shorthand also
     resets background-repeat/position, which made DataTables' sort-arrow
     image tile across the whole header of a sorted column. */
  background-color: #1E293B;
}
:root[data-theme="dark"] table.dataTable tbody tr {
  background: #131C2E;
}
:root[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
:root[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background: #16213A;
}
:root[data-theme="dark"] table.dataTable.hover tbody tr:hover,
:root[data-theme="dark"] table.dataTable.display tbody tr:hover {
  background: #1E293B !important;
}
:root[data-theme="dark"] table.dataTable tbody tr.selected {
  background: #10333A;
}
/* DataTables shades the currently-sorted column's cells (both header and
   body) with its own light gray via .sorting_1/_2/_3, on top of separate
   rules per row state (base/odd/even/hover/selected) each combined with
   .display or .order-column -- those vendor selectors carry MORE classes
   than a same-length override here (e.g. "table.dataTable.display tbody
   tr>.sorting_1" beats "table.dataTable tbody tr>.sorting_1" on specificity
   regardless of source order), so !important is used rather than trying to
   out-specify every vendor combination. */
:root[data-theme="dark"] table.dataTable tbody tr > .sorting_1,
:root[data-theme="dark"] table.dataTable tbody tr > .sorting_2,
:root[data-theme="dark"] table.dataTable tbody tr > .sorting_3 {
  background: #131C2E !important;
}
:root[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_1,
:root[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_2,
:root[data-theme="dark"] table.dataTable tbody tr.odd > .sorting_3 {
  background: #16213A !important;
}
:root[data-theme="dark"] table.dataTable tbody tr:hover > .sorting_1,
:root[data-theme="dark"] table.dataTable tbody tr:hover > .sorting_2,
:root[data-theme="dark"] table.dataTable tbody tr:hover > .sorting_3 {
  background: #1E293B !important;
}
:root[data-theme="dark"] table.dataTable tbody tr.selected > .sorting_1,
:root[data-theme="dark"] table.dataTable tbody tr.selected > .sorting_2,
:root[data-theme="dark"] table.dataTable tbody tr.selected > .sorting_3 {
  background: #10333A !important;
}
:root[data-theme="dark"] table.dataTable thead .sorting_1,
:root[data-theme="dark"] table.dataTable thead .sorting_2,
:root[data-theme="dark"] table.dataTable thead .sorting_3 {
  background-color: #1E293B !important;
}
:root[data-theme="dark"] table.dataTable thead .sorting:before,
:root[data-theme="dark"] table.dataTable thead .sorting:after,
:root[data-theme="dark"] table.dataTable thead .sorting_asc:before,
:root[data-theme="dark"] table.dataTable thead .sorting_asc:after,
:root[data-theme="dark"] table.dataTable thead .sorting_desc:before,
:root[data-theme="dark"] table.dataTable thead .sorting_desc:after {
  color: #64748B;
}

/* Wrapper controls: length/filter/info/pagination */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: #131C2E;
  color: #E2E8F0;
  border-color: #334155;
}
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #131C2E !important;
  color: #E2E8F0 !important;
  border-color: #334155;
}
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #131C2E !important;
  color: #64748B !important;
}

/* select2 dropdowns */
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background: #131C2E;
  border-color: #334155;
}
:root[data-theme="dark"] .select2-container--default .select2-selection__rendered {
  color: #E2E8F0;
}
:root[data-theme="dark"] .select2-dropdown {
  background: #131C2E;
  border-color: #334155;
}
:root[data-theme="dark"] .select2-container--default .select2-results__option {
  color: #E2E8F0;
}
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #22D3D9;
  color: #0B1220;
}
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background: #0B1220;
  color: #E2E8F0;
  border-color: #334155;
}
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #1E293B;
  border-color: #334155;
  color: #E2E8F0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.dataTable,
  :root:not([data-theme="light"]) table.dataTable thead th,
  :root:not([data-theme="light"]) table.dataTable thead td,
  :root:not([data-theme="light"]) table.dataTable tbody th,
  :root:not([data-theme="light"]) table.dataTable tbody td {
    color: #E2E8F0;
    border-color: #334155;
  }
  :root:not([data-theme="light"]) table.dataTable thead th,
  :root:not([data-theme="light"]) table.dataTable thead td {
    background-color: #1E293B;   /* not the shorthand -- see the same rule above */
  }
  :root:not([data-theme="light"]) table.dataTable tbody tr {
    background: #131C2E;
  }
  :root:not([data-theme="light"]) table.dataTable.stripe tbody tr.odd,
  :root:not([data-theme="light"]) table.dataTable.display tbody tr.odd {
    background: #16213A;
  }
  :root:not([data-theme="light"]) table.dataTable.hover tbody tr:hover,
  :root:not([data-theme="light"]) table.dataTable.display tbody tr:hover {
    background: #1E293B !important;
  }
  :root:not([data-theme="light"]) table.dataTable tbody tr.selected {
    background: #10333A;
  }
  :root:not([data-theme="light"]) table.dataTable tbody tr > .sorting_1,
  :root:not([data-theme="light"]) table.dataTable tbody tr > .sorting_2,
  :root:not([data-theme="light"]) table.dataTable tbody tr > .sorting_3 {
    background: #131C2E !important;
  }
  :root:not([data-theme="light"]) table.dataTable tbody tr.odd > .sorting_1,
  :root:not([data-theme="light"]) table.dataTable tbody tr.odd > .sorting_2,
  :root:not([data-theme="light"]) table.dataTable tbody tr.odd > .sorting_3 {
    background: #16213A !important;
  }
  :root:not([data-theme="light"]) table.dataTable tbody tr:hover > .sorting_1,
  :root:not([data-theme="light"]) table.dataTable tbody tr:hover > .sorting_2,
  :root:not([data-theme="light"]) table.dataTable tbody tr:hover > .sorting_3 {
    background: #1E293B !important;
  }
  :root:not([data-theme="light"]) table.dataTable tbody tr.selected > .sorting_1,
  :root:not([data-theme="light"]) table.dataTable tbody tr.selected > .sorting_2,
  :root:not([data-theme="light"]) table.dataTable tbody tr.selected > .sorting_3 {
    background: #10333A !important;
  }
  :root:not([data-theme="light"]) table.dataTable thead .sorting_1,
  :root:not([data-theme="light"]) table.dataTable thead .sorting_2,
  :root:not([data-theme="light"]) table.dataTable thead .sorting_3 {
    background-color: #1E293B !important;
  }
  :root:not([data-theme="light"]) table.dataTable thead .sorting:before,
  :root:not([data-theme="light"]) table.dataTable thead .sorting:after,
  :root:not([data-theme="light"]) table.dataTable thead .sorting_asc:before,
  :root:not([data-theme="light"]) table.dataTable thead .sorting_asc:after,
  :root:not([data-theme="light"]) table.dataTable thead .sorting_desc:before,
  :root:not([data-theme="light"]) table.dataTable thead .sorting_desc:after {
    color: #64748B;
  }
  :root:not([data-theme="light"]) .dataTables_wrapper .dataTables_length select,
  :root:not([data-theme="light"]) .dataTables_wrapper .dataTables_filter input {
    background: #131C2E;
    color: #E2E8F0;
    border-color: #334155;
  }
  :root:not([data-theme="light"]) .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #131C2E !important;
    color: #E2E8F0 !important;
    border-color: #334155;
  }
  :root:not([data-theme="light"]) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  :root:not([data-theme="light"]) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #131C2E !important;
    color: #64748B !important;
  }
  :root:not([data-theme="light"]) .select2-container--default .select2-selection--single,
  :root:not([data-theme="light"]) .select2-container--default .select2-selection--multiple {
    background: #131C2E;
    border-color: #334155;
  }
  :root:not([data-theme="light"]) .select2-container--default .select2-selection__rendered {
    color: #E2E8F0;
  }
  :root:not([data-theme="light"]) .select2-dropdown {
    background: #131C2E;
    border-color: #334155;
  }
  :root:not([data-theme="light"]) .select2-container--default .select2-results__option {
    color: #E2E8F0;
  }
  :root:not([data-theme="light"]) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #22D3D9;
    color: #0B1220;
  }
  :root:not([data-theme="light"]) .select2-search--dropdown .select2-search__field {
    background: #0B1220;
    color: #E2E8F0;
    border-color: #334155;
  }
  :root:not([data-theme="light"]) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #1E293B;
    border-color: #334155;
    color: #E2E8F0;
  }
}