/* DataTables Styling Fix for Updated Version */
/* This file fixes styling conflicts between Bootstrap, custom CSS, and DataTables */

/* Override the global table reset from common_ui.css for DataTables */
table.dataTable,
table.display {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Fix header styling */
table.dataTable thead th,
table.display thead th {
  background-color: #1c75bc !important;
  color: white !important;
  padding: 8px !important;
  border: 1px solid #155990 !important;
  font-weight: bold !important;
  font-size: 14px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Fix body cell styling */
table.dataTable tbody td,
table.display tbody td {
  background-color: white !important;
  padding: 8px !important;
  border: 1px solid #ddd !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Zebra striping for rows */
table.dataTable tbody tr:nth-child(odd),
table.display tbody tr:nth-child(odd) {
  background-color: #FFFFFF !important;
}

table.dataTable tbody tr:nth-child(even),
table.display tbody tr:nth-child(even) {
  background-color: #DFE0E2 !important;
}

/* Hover effect */
table.dataTable tbody tr:hover,
table.display tbody tr:hover {
  background-color: #E0F5FC !important;
}

/* Fix sorting icons - make them white and visible */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
  background-color: #1c75bc !important;
  color: white !important;
}

/* Sorting arrow styling for newer DataTables */
table.dataTable thead .dt-orderable-asc span.dt-column-order,
table.dataTable thead .dt-orderable-desc span.dt-column-order,
table.dataTable thead .dt-ordering-asc span.dt-column-order,
table.dataTable thead .dt-ordering-desc span.dt-column-order {
  color: white !important;
}

/* Fix DataTables wrapper elements */
.dataTables_wrapper {
  padding: 10px;
}

.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
  padding: 10px 0;
}

/* Fix pagination styling */
.dataTables_paginate .paginate_button {
  padding: 5px 10px !important;
  margin: 0 2px !important;
  border: 1px solid #ddd !important;
  background-color: white !important;
  color: #1c75bc !important;
}

.dataTables_paginate .paginate_button:hover {
  background-color: #1c75bc !important;
  color: white !important;
  border-color: #1c75bc !important;
}

.dataTables_paginate .paginate_button.current {
  background-color: #1c75bc !important;
  color: white !important;
  border-color: #1c75bc !important;
}

.dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

/* Fix search box styling */
.dataTables_filter input {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  margin-left: 5px;
}

/* Fix length selector */
.dataTables_length select {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  margin: 0 5px;
}

/* Ensure table takes full width */
table.dataTable,
table.display {
  width: 100% !important;
  margin: 0 !important;
}

/* Fix for table-responsive wrapper */
.table-responsive table.dataTable,
.table-responsive table.display {
  margin-bottom: 0 !important;
}


/* Sorting indicators - white arrows on blue background */
table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead th.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
  color: white !important;
  opacity: 0.7;
}

/* Active sort column - full opacity */
table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
  opacity: 1 !important;
}




/* add a gap for the label after select box 'entries per page' */
.dt-length label { padding-left: 6px; }