:root {
  --table-header-background: lightgray;
}

.table-content {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}

.table-scroll {
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
}

table.data-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

table.data-table thead th {
  border-top: var(--standard-border);
  position: sticky;
  top: 0;
  background: var(--table-header-background);
  z-index: 1;
}

table.data-table thead th:first-of-type {
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--table-header-background);
  z-index: 2;
}

table.data-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  background-color: var(--table-header-background);
  z-index: 1;
}

table.data-table th, td {
  padding: 0.6em;
  border: var(--standard-border);
  border-top: none;
  border-left: none;
}

/* restore the outer edges that border-top/left: none removed */
table.data-table th:first-child, td:first-child {
  border-left: var(--standard-border);
}

table.data-table thead th {
  border-top: var(--standard-border);
}

table.data-table thead tr {
  text-align: left;
  border-bottom: var(--standard-border);
}

table.data-table tbody th {
  text-align: left;
  background-color: var(--table-header-background);
}

table.data-table th.sort-asc::after {
  content: " ▲";
}

table.data-table th.sort-desc::after {
  content: " ▼";
}

#filter-container {
  display: flex;
  flex-direction: row;
  justify-content: right;
  margin-bottom: 1em;
  margin-right: 0.2em;
}

#filter-container input {
  font-size: calc(1em + 1px);
}

.estimate {
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  :root {
    --table-header-background: #222222;
  }
}