/* Data tables (table.html.twig). */

.sv-table-wrap {
  position: relative;
  min-width: 0;
  border: 1px solid var(--sv-color-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-color-surface);
  box-shadow: var(--sv-shadow-sm);
}
/* Wide dense tables (overview, worklist) scroll sideways only: no height limit, so the page
   scrolls vertically like every other list (no nested scroll area). The wrapper is a scroll
   container, so the header is not sticky against the page (top 0 keeps it in place). */
.sv-table-wrap--scroll {
  --sv-sticky-top: 0px;
  overflow-x: auto;
}
.sv-table-wrap--x { overflow-x: auto; }

.sv-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--sv-text-sm);
  font-variant-numeric: tabular-nums;
}
.sv-table caption:not(.visually-hidden) {
  padding: var(--sv-space-3) var(--sv-space-4);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
  text-align: start;
  caption-side: bottom;
}

.sv-table th,
.sv-table td {
  padding: var(--sv-space-3) var(--sv-space-4);
  border-bottom: 1px solid var(--sv-color-border);
  text-align: start;
  vertical-align: top;
}
.sv-table tbody tr:last-child > * { border-bottom: 0; }
.sv-table thead th {
  position: sticky;
  top: var(--sv-sticky-top, var(--sv-topbar-height));
  z-index: var(--sv-z-sticky);
  padding-block: var(--sv-space-2);
  border-bottom: 1px solid var(--sv-color-border-strong);
  background: var(--sv-color-surface-muted);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
  font-weight: var(--sv-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: bottom;
}
.sv-table thead th:first-child { border-start-start-radius: var(--sv-radius-lg); }
.sv-table thead th:last-child { border-start-end-radius: var(--sv-radius-lg); }
.sv-table-wrap--scroll .sv-table thead th { border-radius: 0; }
.sv-table tbody tr:hover > td { background: var(--sv-color-row-hover); }
.sv-table tr.is-selected > td,
.sv-table tr:has(> td > input[type="checkbox"]:checked) > td { background: var(--sv-color-selected); }
.sv-table tfoot td,
.sv-table tfoot th {
  border-top: 1px solid var(--sv-color-border-strong);
  border-bottom: 0;
  background: var(--sv-color-surface-muted);
  font-weight: var(--sv-weight-semibold);
}
.sv-table td > a:only-child { font-weight: var(--sv-weight-medium); }
.sv-table a { text-decoration: none; }
.sv-table a:hover,
.sv-table a:focus-visible { text-decoration: underline; }
.sv-table .sv-num { text-align: end; }
.sv-table .sv-col-actions { width: 1%; text-align: end; white-space: nowrap; }
.sv-table .sv-col-select { width: 1%; }
.sv-table td.sv-col-actions > * { justify-content: flex-end; }

/* Sortable headers: links with aria-sort on the th. */
.sv-table th a {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  color: inherit;
  text-decoration: none;
}
.sv-table th a:hover { color: var(--sv-color-text); }
.sv-table th[aria-sort] { color: var(--sv-color-text); }
.sv-table th[aria-sort] .sv-icon,
.sv-table th .tablesort { width: 0.9rem; height: 0.9rem; }

/* Row groups (worklist: one tbody per sample). */
.sv-rowgroup + .sv-rowgroup > tr:first-child > * { border-top: 2px solid var(--sv-color-border-strong); }
.sv-rowgroup th[scope="rowgroup"] {
  background: var(--sv-color-surface-muted);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-semibold);
}

/* Dense variant (worklist, overview). */
.sv-table--dense { font-size: var(--sv-text-dense); }
.sv-table--dense th,
.sv-table--dense td { padding: var(--sv-space-2) var(--sv-space-3); }
.sv-table--dense thead th { padding-block: var(--sv-space-2); }

.sv-table--striped tbody tr:nth-child(even) > td { background: var(--sv-color-surface-muted); }
.sv-table--fixed { table-layout: fixed; }
.sv-table--borderless th,
.sv-table--borderless td { border-bottom: 0; }

/* Empty row of core tables. */
.sv-table td.sv-table__empty {
  padding: var(--sv-space-8) var(--sv-space-4);
  color: var(--sv-color-text-muted);
  text-align: center;
}

/* --stack: rows become labeled cards below 48em. */
@media (max-width: 47.99em) {
  .sv-table-wrap:has(> .sv-table--stack) {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .sv-table--stack,
  .sv-table--stack tbody,
  .sv-table--stack tr,
  .sv-table--stack td { display: block; width: 100%; }
  .sv-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sv-table--stack tbody { display: grid; gap: var(--sv-space-3); }
  .sv-table--stack tr {
    padding: var(--sv-space-2) 0;
    border: 1px solid var(--sv-color-border);
    border-radius: var(--sv-radius-lg);
    background: var(--sv-color-surface);
    box-shadow: var(--sv-shadow-sm);
  }
  .sv-table--stack tbody tr:hover > td { background: transparent; }
  .sv-table--stack td {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    align-items: baseline;
    justify-items: start;
    gap: var(--sv-space-3);
    padding: var(--sv-space-2) var(--sv-space-4);
    border: 0;
    text-align: start;
  }
  .sv-table--stack td::before {
    content: attr(data-label);
    color: var(--sv-color-text-muted);
    font-size: var(--sv-text-xs);
    font-weight: var(--sv-weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .sv-table--stack td:not([data-label])::before,
  .sv-table--stack td[data-label=""]::before { content: none; }
  .sv-table--stack td:not([data-label]),
  .sv-table--stack td[data-label=""] { grid-template-columns: 1fr; }
  .sv-table--stack td:first-child {
    padding-bottom: var(--sv-space-3);
    border-bottom: 1px solid var(--sv-color-border);
    font-size: var(--sv-text-md);
    font-weight: var(--sv-weight-semibold);
  }
  .sv-table--stack td.sv-num { text-align: start; }
  .sv-table--stack td.sv-col-actions { width: 100%; }
  .sv-table--stack td.sv-col-actions > * { justify-content: flex-start; }
}

/* Client-side table filter box. */
.sv-table-filter {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  max-width: 24rem;
  margin-bottom: var(--sv-space-3);
}
