/*
 * Data tables (M3 has no table spec): surface rows, outline-variant dividers,
 * title-small headers, hover state layer, secondary-container selection.
 * Compact density: ~40px rows.
 */

table.list, .table-list {
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  border-collapse: separate;
  border-spacing: 0;
  margin-block-end: 8px;
}
/* A table that scrolls sideways: the wrapper is the outlined card, so the card edge and
   corners stay visible while the table scrolls inside it */
.autoscroll:has(> table.list) {
  clear: both; /* scrolling makes it narrow beside a float instead of going below it */
  padding: 0;
  margin-block-end: 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
.autoscroll > table.list { margin: 0; border: 0; border-radius: 0; }
table.list th, .table-list-header {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  padding-block: 10px;
  padding-inline: 8px;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
}
table.list th a, table.list th a:link, table.list th a:visited { color: var(--md-sys-color-on-surface-variant); }
table.list td {
  block-size: 40px;
  padding-block: 4px;
  padding-inline: 8px;
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
  background-color: transparent;
}
table.list tbody tr:first-child td, table.list tbody tr.group + tr td { border-block-start: 0; }

/* No striping: M3 separates rows with dividers */
table.list:not(.odd-even) tbody tr:nth-child(odd), table.list:not(.odd-even) tbody tr:nth-child(even),
.odd, .even, .box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even {
  background-color: transparent;
}
table.list:not(.odd-even) tbody tr:nth-child(odd):hover, table.list:not(.odd-even) tbody tr:nth-child(even):hover,
.odd:hover, .even:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}

/* Status names in the workflow header are td cells: same band as the th row above */
table.workflows thead td {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
}
/* Role names in permission group rows sit on the group name's line */
table.permissions tr.group td { vertical-align: middle; }
/* Field permissions: the "»" copy link stays next to its select */
table.fields_permissions td { white-space: nowrap; }
/* An empty table: no divider under the header, the table border closes it */
table.list:not(:has(tbody tr)) th { border-block-end: 0; }
/* Child projects: chevron in the theme's colour, one file per mode */
tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-right-idnt.svg); }
[dir="rtl"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-left-idnt.svg); }
:root[data-mode="dark"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-right-idnt-dark.svg); }
:root[data-mode="dark"][dir="rtl"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-left-idnt-dark.svg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-right-idnt-dark.svg); }
  :root:not([data-mode="light"])[dir="rtl"] tr.idnt :is(td.subject, td.name) { background-image: url(../images/chevron-left-idnt-dark.svg); }
}

/* Repository file, annotate and diff views: outlined like table.list, line numbers
   separated by one divider instead of a grid (scm.css loads after the theme, hence html) */
html table.filecontent {
  inline-size: 100%;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-sys-color-surface-container-lowest);
}
html table.filecontent th, html table.filecontent th.line-num {
  border: 0;
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container);
}
html table.filecontent th.filename {
  padding-block: 10px;
  padding-inline: 12px;
  border-inline-end: 0;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-title-small);
}
/* CSV import preview */
.sample-data {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: transparent;
}
.sample-data td { padding-block: 8px; padding-inline: 12px; border: 0; border-block-start: 1px solid var(--md-sys-color-outline-variant); }
.sample-data tr:first-child td { border-block-start: 0; background-color: var(--md-sys-color-surface-container); }

tr.group td {
  padding-block: 12px 8px;
  padding-inline: 8px;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}
tr.group span.name { font-weight: 500; }
tr.group span.totals, tr.group a.toggle-all { color: var(--md-sys-color-on-surface-variant); }
tr.group span.totals .value { color: var(--md-sys-color-on-surface); font-weight: 500; }
table.list tbody tr.group:hover { background-color: transparent; }

/* Selected rows (context menu); core uses !important */
html .context-menu-selection, html .context-menu-selection:hover {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
}
html .context-menu-selection a, html .context-menu-selection a:hover { color: var(--md-sys-color-on-secondary-container) !important; }
html .context-menu-selection svg.icon-svg { stroke: var(--md-sys-color-on-secondary-container) !important; }

table.list tr.overdue:not(.context-menu-selection) td.due_date { color: var(--md-sys-color-error); }
a.issue.closed, a.issue.closed:link, a.issue.closed:visited { color: var(--md-sys-color-on-surface-variant); }

.query-totals { color: var(--md-sys-color-on-surface-variant); }
.query-totals .value { color: var(--md-sys-color-on-surface); font-weight: 500; }
#query_form_content { font-size: inherit; }
#query_form_with_buttons > p.contextual { font: var(--md-sys-typescale-label-large); }

/* Query filters: checkbox + label sit level with the 40px operator/value fields. The field cell is
   40px high and centers its content; the row stays top-aligned so an expanded multi-select grows
   downwards without dragging the label to its middle. */
#filters-table .filter { align-items: flex-start; margin-block: 4px 0; }
#filters-table .filter .field { display: flex; align-items: center; gap: 8px; min-block-size: 40px; }
#filters-table .filter .field input[type="checkbox"] { margin: 0; }
#filters-table .filter .values { display: flex; align-items: center; min-block-size: 40px; flex-wrap: wrap; gap: 4px 8px; }
.add-filter { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Core fixes the operator at 120px, too narrow for "has never been" with M3 field padding */
#filters-table .filter .operator select { inline-size: 180px; }
/* All value fields share one width so the filter rows form a clean second column.
   "between" filters show two fields (both spans visible): each takes half. */
#filters-table .filter .values select.value,
#filters-table .filter .values input.value:not([size="3"]) { inline-size: 260px; }
#filters-table .filter .values:has(> span:first-child + span:not([style*="none"])) input.value { inline-size: 126px; padding-inline: 8px; }