/* DataTable search container styling */
div.dt-search {
  float: left !important;
  text-align: left !important;
  background: var(--color-gold-tint);
  position: relative;
  padding: 15px;
  width: 100% !important;
  margin-bottom: 1rem;
}

div.dt-search input {
  height: 40px !important;
  border: 0 !important;
  background: var(--color-white) !important;
  width: calc(100% - 60px) !important;
  display: inline-block;
  margin-left: 0 !important;
  padding: 0.5rem 0.75rem;
}

/* Search icon styling within DataTable search */
div.dt-search i.fa-search {
  position: absolute;
  right: 15px;
  top: 20px;
  font-size: 25px;
  pointer-events: none;
}

/* DataTable layout adjustments */
.datatables.ui-tabs-panel table,
.datatables table.dataTable {
  width: 100% !important;
  table-layout: auto !important;
}

/* Keep DataTables readable */
.datatables table.dataTable th,
.datatables table.dataTable td {
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Prevent headings from breaking letter by letter */
.datatables table.dataTable th {
  white-space: nowrap;
}

/* Long links and emails can wrap */
.datatables table.dataTable td a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* DataTables horizontal scroll wrappers */
.datatables .dt-scroll,
.datatables .dt-scroll-head,
.datatables .dt-scroll-body,
.datatables .dt-scroll-foot {
  width: 100%;
}

.datatables .dt-scroll-body {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Fallback for normal DataTables markup */
.datatables .dt-container {
  width: 100%;
  max-width: 100%;
}

.datatables .dt-container .row > .col-sm-12 {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep Drupal lazy-loaded media/images stable inside DataTables */
.datatables table.dataTable img[data-src],
.datatables table.dataTable img.b-lazy,
.datatables table.dataTable .media__element {
  min-width: 120px;
  min-height: 120px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Keep Blazy/media wrappers stable while images are loading */
.datatables table.dataTable .media,
.datatables table.dataTable .media--blazy {
  min-width: 120px;
  min-height: 120px;
  max-width: 100%;
  overflow: hidden;
}

/* Make sure the blank placeholder does not collapse */
.datatables table.dataTable img[src$="blank.svg"],
.datatables table.dataTable img[src*="/blank.svg"] {
  min-width: 120px;
  min-height: 120px;
  object-fit: cover;
}

/* Avoid DataTables border duplication */
.table-flex table.dataTable.no-footer,
.datatables table.dataTable.no-footer {
  border-bottom: none;
}

/* Flex table adjustments for non-DataTables tables */
.table-flex:not(.datatables) .table > thead {
  display: none;
}

.table-flex:not(.datatables) .table > tbody {
  border-top: none;
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
}

.table-flex:not(.datatables) .table td {
  border-bottom: none;
}

/*
  Optional card/grid DataTable layout.
  Only use this if a specific table is designed to behave like cards.
  Example wrapper:
  <div class="datatables datatables-card-grid">
*/
.datatables-card-grid table.dataTable > thead {
  display: none;
}

.datatables-card-grid table.dataTable > tbody {
  border-top: none;
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
}

.datatables-card-grid table.dataTable td {
  border-bottom: none;
}

/* Hover effect styling */
.table-flex .table-hover tbody tr:hover,
.datatables-card-grid .table-hover tbody tr:hover {
  background: none !important;
}

/* Mark element styling */
.mark,
mark {
  padding: 0;
}

/* Centre pagination */
.datatables .dt-paging,
.datatables div.dt-container .dt-paging {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
  margin-top: 1.5rem;
}

.datatables .dt-paging nav,
.datatables .dt-paging .pagination,
.datatables div.dt-container .dt-paging .pagination {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile table scrolling */
@media (max-width: 767.98px) {
  .datatables {
    width: 100%;
    overflow-x: hidden;
  }

  .datatables table.dataTable {
    min-width: max-content;
    table-layout: auto !important;
  }

  .datatables table.dataTable th,
  .datatables table.dataTable td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .datatables table.dataTable th {
    white-space: nowrap;
  }
}

/* Responsive flex layout adjustments for non-DataTables flex tables */
@media (min-width: 992px) {
  .table-flex:not(.datatables) .table tr,
  .datatables-card-grid table.dataTable tr {
    flex: 0 0 auto;
    width: 33.333%;
  }

  .table-flex:not(.datatables) .table tr:nth-child(3n) td,
  .datatables-card-grid table.dataTable tr:nth-child(3n) td {
    padding-right: 0;
  }

  .table-flex:not(.datatables) .table tr:nth-child(3n+1) td,
  .datatables-card-grid table.dataTable tr:nth-child(3n+1) td {
    padding-left: 0;
  }
}