/* D-tech Lab data table */
.dtl-members-list { scroll-margin-top: 120px; } /* dashboard links land below the fixed header */
/* Scoped to the list so it doesn't change the dashboard headings (stats.css) */
.dtl-members-list > .dtl-heading { font-size: 1rem; font-weight: 700; color: inherit; margin: 0 0 1.25rem; text-align: left; }
.dtl-filters { margin-bottom: 15px; }
.dtl-filters label { display: inline-block; margin: 0 12px 8px 0; }
.dtl-filters select { max-width: 220px; }
.dtl-filter-reset { cursor: pointer; }
.dtl-empty { margin: 1em 0; }

/* Top bar above the table: search on the left, Export / Reset button group on the right */
.dtl-members-list .dataTables_wrapper .dtl-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.dtl-members-list .dataTables_wrapper .dtl-top .dataTables_filter,
.dtl-members-list .dataTables_wrapper .dtl-top .dataTables_length { float: none; margin: 0; text-align: left; }
.dtl-members-list .dataTables_wrapper .dtl-top .dataTables_filter { flex: 1 1 260px; }
.dtl-members-list .dtl-actions { margin-left: auto; }

/* Button group: Export CSV + Reset joined together */
.dtl-btn-group { display: inline-flex; align-items: stretch; position: relative; }
.dtl-btn-group .dtl-export { position: relative; display: inline-flex; }
/* Same height as the search box next to it (theme input height, 47px fallback) */
.dtl-btn-group .dtl-export-btn,
.dtl-btn-group .dtl-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--inputs-height, 47px);
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  cursor: pointer;
}
.dtl-btn-group .dtl-export:not(:last-child) .dtl-export-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dtl-btn-group .dtl-export + .dtl-filter-reset {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.45); /* divider between the two buttons */
}
.dtl-btn-group svg { flex: 0 0 auto; }

/* Export menu: Filtered rows / All rows */
.dtl-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.dtl-export-menu[hidden] { display: none; }
.dtl-export-menu button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dtl-export-menu button:hover,
.dtl-export-menu button:focus-visible { background: var(--dtl-row-hover, #fff8ec); outline: none; }
.dtl-export-menu .dtl-n { opacity: 0.6; font-variant-numeric: tabular-nums; }

/* Compact rows without the modern style (DataTables padding is 8px 10px) */
.dtl-members-list.dtl-compact:not(.dtl-modern) table.dataTable.dtl-table > tbody > tr > td { padding-top: 5px; padding-bottom: 5px; }

/* A filter with a value chosen is highlighted (Reset clears it) */
.dtl-members-list .dtl-filters select.is-active {
  border-color: var(--dtl-accent, #f4a322);
  background-color: var(--dtl-row-hover, #fff8ec);
  box-shadow: 0 0 0 1px var(--dtl-accent, #f4a322);
}
.dtl-members-list .dtl-filters label.is-active { font-weight: 600; }
.dtl-members-list .dtl-filters label.is-active select { font-weight: 600; }

/* Name column: fixed width, one line with "...", full name in the tooltip (title) on hover.
   Width: Settings > Data Table > Name column width (--dtl-name-width). */
.dtl-members-list.dtl-name-fixed table.dtl-table td.dtl-col-name { white-space: nowrap; }
.dtl-members-list.dtl-name-fixed table.dtl-table .dtl-ellipsis {
  display: block;
  max-width: var(--dtl-name-width, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Modern style (Settings > Data Table > Modern table style)
 * Font family and text colours always come from the theme; only shape,
 * spacing and backgrounds change. Colours are set in Settings and arrive
 * here as CSS variables on .dtl-members-list.
 * ------------------------------------------------------------------ */
.dtl-modern {
  --dtl-head-bg: #fff3dc;
  --dtl-row-odd: #f9f9f9;
  --dtl-row-even: #ffffff;
  --dtl-row-hover: #fff8ec;
  --dtl-accent: #f4a322;
  --dtl-line: rgba(0, 0, 0, 0.07);
  --dtl-radius: 10px;
  --dtl-cell-y: 14px;  /* row height: Comfortable */
  --dtl-cell-x: 16px;
  --dtl-head-y: 15px;
}
.dtl-members-list.dtl-compact {
  --dtl-cell-y: 7px;   /* row height: Compact */
  --dtl-cell-x: 14px;
  --dtl-head-y: 10px;
}

/* Filter bar: label above each dropdown, wraps on small screens */
.dtl-members-list.dtl-modern .dtl-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 16px;
  margin-bottom: 20px;
}
.dtl-members-list.dtl-modern .dtl-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 170px;
  max-width: 240px;
  margin: 0;
}
.dtl-members-list.dtl-modern .dtl-filters select {
  width: 100%;
  max-width: none;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Search box: full width with a search icon */
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_filter {
  float: none;
  text-align: left;
  margin: 0; /* spacing comes from the top bar */
}
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_filter label { display: block; }
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_filter input {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding-left: 42px;
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus ring in the accent colour */
.dtl-members-list.dtl-modern .dtl-filters select:focus,
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--dtl-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 163, 34, 0.2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dtl-accent) 22%, transparent);
}

/* Table: rounded card with a soft shadow (scrolls sideways on phones, see below) */
.dtl-members-list.dtl-modern table.dataTable.dtl-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--dtl-line);
  border-radius: var(--dtl-radius);
  overflow: hidden;
  background-color: var(--dtl-row-even);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}
.dtl-members-list.dtl-modern table.dataTable.dtl-table > thead > tr > th {
  padding: var(--dtl-head-y) 28px var(--dtl-head-y) var(--dtl-cell-x);
  background-color: var(--dtl-head-bg);
  border-bottom: 1px solid var(--dtl-line);
  white-space: nowrap;
}
.dtl-members-list.dtl-modern table.dataTable.dtl-table > thead > tr > th:first-child { border-top-left-radius: var(--dtl-radius); }
.dtl-members-list.dtl-modern table.dataTable.dtl-table > thead > tr > th:last-child { border-top-right-radius: var(--dtl-radius); }

/* Rows: odd / even / hover backgrounds (replace the DataTables shading) */
.dtl-members-list.dtl-modern table.dataTable.dtl-table > tbody > tr > td {
  padding: var(--dtl-cell-y) var(--dtl-cell-x);
  border-top: 1px solid var(--dtl-line);
  box-shadow: none;
  vertical-align: middle;
  transition: background-color 0.15s ease;
}
.dtl-members-list.dtl-modern table.dataTable.dtl-table > tbody > tr:first-child > td { border-top: 0; }
.dtl-members-list.dtl-modern table.dataTable.dtl-table > tbody > tr:nth-child(odd) > td { background-color: var(--dtl-row-odd); }
.dtl-members-list.dtl-modern table.dataTable.dtl-table > tbody > tr:nth-child(even) > td { background-color: var(--dtl-row-even); }
.dtl-members-list.dtl-modern table.dataTable.dtl-table > tbody > tr:hover > td { background-color: var(--dtl-row-hover); }
.dtl-members-list.dtl-modern table.dataTable.dtl-table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--dtl-radius); }
.dtl-members-list.dtl-modern table.dataTable.dtl-table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--dtl-radius); }
.dtl-members-list.dtl-modern table.dataTable.dtl-table.no-footer { border-bottom: 1px solid var(--dtl-line); }
.dtl-members-list.dtl-modern table.dataTable.dtl-table td.dataTables_empty { padding: 32px 16px; text-align: center; }

/* Info + pagination */
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_info { padding-top: 18px; opacity: 0.75; }
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  margin: 0 3px;
  padding: 0 12px;
  border: 1px solid var(--dtl-line);
  border-radius: 8px;
  background: transparent;
  color: inherit !important;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--dtl-accent);
  background: var(--dtl-row-hover);
  color: inherit !important;
}
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: var(--dtl-accent);
  background: var(--dtl-accent);
  color: #fff !important; /* like the orange View buttons */
}
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dtl-members-list.dtl-modern .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  border-color: transparent;
  background: transparent;
  opacity: 0.45;
}

/* Tablets (iPad portrait 768-834, iPad Pro 1024): the table scrolls sideways instead of
   overflowing the page; filters three per row; narrower Name column */
@media (max-width: 1024px) {
  .dtl-members-list .dtl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* table only, menus stay visible */
  /* Rows stay one line (compact); swipe sideways for the remaining columns */
  .dtl-members-list table.dtl-table > thead > tr > th,
  .dtl-members-list table.dtl-table > tbody > tr > td { white-space: nowrap; }
  /* Filters in an even grid: as many per row as fit, the last row is not stretched */
  .dtl-members-list.dtl-modern .dtl-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .dtl-members-list.dtl-modern .dtl-filters label { max-width: none; }
  .dtl-members-list.dtl-name-fixed table.dtl-table .dtl-ellipsis { max-width: min(var(--dtl-name-width, 260px), 200px); }
}
/* Phones: two filters per row */
@media (max-width: 767px) {
  .dtl-members-list.dtl-modern .dtl-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dtl-members-list.dtl-modern { --dtl-cell-x: 12px; }
  .dtl-members-list.dtl-name-fixed table.dtl-table .dtl-ellipsis { max-width: min(var(--dtl-name-width, 260px), 160px); }
}
@media (max-width: 340px) {
  .dtl-members-list.dtl-modern .dtl-filters { grid-template-columns: 1fr; }
}