/* =============================================================================
   DataTables dark-theme overrides for ckanext-lccc-theme
   Loaded after datatables.css via the body_extras block in base.html.
   ============================================================================= */
:root {
  --bs-tertiary-bg: #343434;
  --bs-emphasis-color: #FFFFFF;
  --lccc-dark-green: #104501;
}
/* ---------------------------------------------------------------------------
   1. Suppress the second horizontal scrollbar.

   DataTables creates two containers when scrollX is enabled:
     - dataTables_scrollHead  (column headers, overflow: hidden set by JS)
     - dataTables_scrollBody  (data rows,       overflow: auto  set by JS)

   Bootstrap's table CSS can force a reflow that makes scrollHead show its own
   scrollbar, producing two horizontal bars. This rule ensures the head is
   always non-scrollable; JS synchronisation (scrollLeft) still works fine.
   --------------------------------------------------------------------------- */
div.dataTables_scrollHead {
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   2. Style the single remaining scrollbar (dataTables_scrollBody) to match
   the dark theme.

   Standard API  – Firefox and Chromium 121+
   Legacy WebKit – Safari, older Chrome/Edge
   --------------------------------------------------------------------------- */
div.dataTables_scrollBody {
  /* Firefox / Chromium 121+ */
  scrollbar-color: var(--bs-border-color) var(--bs-body-bg);
  scrollbar-width: thin;
}

/* Legacy WebKit (Safari, older Chrome/Edge) */
div.dataTables_scrollBody::-webkit-scrollbar {
  height: 6px;
  width:  6px;
}

div.dataTables_scrollBody::-webkit-scrollbar-track {
  background: var(--bs-body-bg);
  border-radius: 3px;
}

div.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 3px;
}

div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-primary);
}

#resize_wrapper {
  background-color: var(--bs-body-bg) !important;
  padding: 1rem;
}

tbody tr > .dtfc-fixed-left, table.dataTable tbody tr > .dtfc-fixed-right {
  background-color: unset;
}

table.dataTable thead tr > .dtfc-fixed-left, table.dataTable thead tr > .dtfc-fixed-right {
  background-color: var(--bs-dark-bg-subtle);
}

div.dataTables_scrollBody {
  border-left: none !important;
}

table.dataTable tbody tr > .dtfc-fixed-left, table.dataTable tbody tr > .dtfc-fixed-right {
  background-color: var(--bs-body-bg);
}

table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child, table.table-bordered.dataTable td:first-child {
  border-left: 1px solid var(--bs-border-color) !important;
}

div.dataTables_scrollFootInner table.table-bordered tr th:first-child, div.dataTables_scrollHeadInner table.table-bordered tr th:first-child {
  border-left: 1px solid var(--bs-border-color) !important;
}

.search-label:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(23, 23, 23, 0.8);
  z-index: -1;
}
.search-run-btn {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.js .table-toggle-more .toggle-seperator td {
    background: unset;
    background-color: var(--bs-dark-bg-subtle);
}

.resetButton {
  color: var(--bs-emphasis-color) !important;
}

.dt-buttons .btn-secondary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.dt-button-collection {
  background-color: var(--bs-body-bg) !important;
}

.dt-button-collection.fixed {
  width: auto !important;
  height: auto !important;
  margin-top: 0px !important;
  margin-left: 0px !important;
  transform: translate(-50%, -50%) !important;
}

.dt-button.dropdown-item.buttons-columnVisibility{
  margin-bottom: 2px !important;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.dt-button.dropdown-item.buttons-columnVisibility.active::after {
  content: '✓';
  float: right;
  color: var(---bs-tertiary-bg) !important;
}

.dt-button.dropdown-item.buttons-columnVisibility.active:hover {
  color: var(--bs-tertiary-bg) !important;
  background-color: var(--bs-white) !important;
}

#datatables_buttons_info {
  background-color: var(--bs-dark) !important;
  border: 1px solid white !important;
  color: var(--bs-body-color) !important;
}

#datatables_buttons_info h2 {
  background-color: var(--bs-dark) !important;
  color: var(--bs-body-color);
}

i.fa-info-circle {
  color: var(--bs-body-color) !important;
}

.actions .btn.btn-primary.dropdown-toggle {
  padding-left: 0 !important;
}
.btn-light:hover, .btn-default:hover {
  background-color: var(--bs-dark-bg-subtle) !important;
  border-color: var(--bs-dark-bg-subtle) !important;
}

.sort-column-name{
  color: var(--bs-primary-text-emphasis) !important;
}

.data-viewer-error {
  background: var(--bs-body-bg);
  padding: 2rem;
}

.data-viewer-error .text-danger {
  color: var(--bs-white) !important;
}

.text-danger a, .text-danger i {
  color: inherit !important;
}
.module-content p a:link {
  text-decoration: none;
}

table.dataTable tbody th.focus, table.dataTable tbody td.focus {
  outline: 1px solid var(--bs-primary)
}
table.dataTable.table-striped > tbody > tr.odd.selected > *,
.table-striped > tbody > tr.selected > td, .table-striped > tbody > tr.selected > th,
table.dataTable.table-hover > tbody > tr.selected:hover > * 
table.dataTable > tbody > tr.selected > *,
table.dataTable.table-hover > tbody > tr.selected:hover > * {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%), var(--bs-primary);
  box-shadow: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--lccc-dark-green) !important;
  border-color: var(--lccc-dark-green);
}

/* =============================================================================
   Print / dt-print-view overrides
   DataTables' print button opens a new window with body.dt-print-view and
   copies the page stylesheets into it. We target that class directly (screen)
   so the new window looks correct, and also provide @media print rules for
   when the browser actually sends the page to the printer.
   ============================================================================= */

/* Fixes the new window that DataTables opens when Print is clicked */
body.dt-print-view {
  --bs-body-color: #000;
  --bs-body-bg: #fff;
  --bs-emphasis-color: #000;
  --bs-tertiary-bg: #f5f5f5;
  background: #fff !important;
  color: #000 !important;
}

body.dt-print-view h1,
body.dt-print-view h2,
body.dt-print-view h3,
body.dt-print-view h4 {
  color: #000 !important;
}

body.dt-print-view *,
body.dt-print-view table.dataTable,
body.dt-print-view .dataTables_wrapper,
body.dt-print-view .dataTables_info,
body.dt-print-view .sorting,
body.dt-print-view .sorting_asc,
body.dt-print-view .sorting_desc,
body.dt-print-view .sort-column-name {
  color: #000 !important;
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-color: #ccc !important;
}

/* Fixes the actual browser print output */
@media print {
  :root {
    --bs-body-color: #000;
    --bs-body-bg: #fff;
    --bs-emphasis-color: #000;
    --bs-tertiary-bg: #f5f5f5;
  }

  h1, h2, h3, h4,
  .dt-print-view h1,
  table.dataTable,
  table.dataTable thead th,
  table.dataTable thead td,
  table.dataTable tbody tr,
  table.dataTable tbody td,
  table.dataTable tbody th,
  table.dataTable tfoot th,
  table.dataTable tfoot td,
  .dataTables_wrapper,
  .dataTables_wrapper *,
  .dataTables_info,
  .dataTables_length,
  .dataTables_filter,
  .dataTables_paginate,
  .dataTables_paginate *,
  .dt-buttons,
  .dt-buttons *,
  .sorting, .sorting_asc, .sorting_desc,
  .sort-column-name,
  .resetButton,
  #resize_wrapper,
  #resize_wrapper * {
    color: #000 !important;
    background-color: #fff !important;
    background: #fff !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}