/* Shared table styles (used across pages) */

/* let tables show their overlay border */
.tab-section {
  position: relative;
  overflow: visible;
}

:where(table),
:where(.tab-section table) {
  width: 100%;
  background: var(--surface);
  border: none;              /* border is drawn above */
  border-radius: .5rem;
  border-collapse: separate;
  border-spacing: 0;
  margin: .5rem 0 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  position: relative;        /* for ::after */
  z-index: 1;
  overflow: visible;         /* keep shadow visible */
}

/* header cells */
:where(table) thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  text-align: left;
  font-weight: 600;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--table-border);
  border-right: 1px solid var(--table-col-border);
  font-size: .875rem;
}
:where(table) thead th:last-child {
  border-right: none;
}

/* body cells */
:where(table) tbody tr:nth-child(even) {
  background: var(--table-row-alt);
}
:where(table) tbody td {
  padding: .55rem .75rem;
  color: var(--text-900);
  border-right: 1px solid var(--table-col-border);
  border-bottom: 1px solid var(--table-border);
  font-size: .875rem;
}
:where(table) tbody td:last-child {
  border-right: none;
}
:where(table) tbody tr:last-child td {
  border-bottom: none;
}

/* tfoot cells */
:where(table) tfoot td {
  background: var(--muted);
  border-top: 1px solid var(--table-border);
  border-right: 1px solid var(--table-col-border);
  padding: .6rem .75rem;
}
:where(table) tfoot td:last-child {
  border-right: none;
}

/* rounded corners for normal (thead + tbody) tables */
:where(table) thead tr:first-child th:first-child {
  border-top-left-radius: .5rem;
}
:where(table) thead tr:first-child th:last-child {
  border-top-right-radius: .5rem;
}
:where(table) tbody tr:last-child td:first-child {
  border-bottom-left-radius: .5rem;
}
:where(table) tbody tr:last-child td:last-child {
  border-bottom-right-radius: .5rem;
}

/* table with only thead: round bottom too */
:where(table:not(:has(tbody tr))) thead tr:first-child th:first-child {
  border-bottom-left-radius: .5rem;
}
:where(table:not(:has(tbody tr))) thead tr:first-child th:last-child {
  border-bottom-right-radius: .5rem;
}

/* overlay border on top of the table (matches corners) */
:where(table)::after,
:where(.tab-section table)::after {
  content: "";
  position: absolute;
  inset: 0;                  /* exact same box, so corners align */
  pointer-events: none;
  border: 1.5px solid var(--table-outline);
  border-radius: inherit;
  z-index: 5;
}

/* light = black */
html[data-theme="light"] table::after,
html[data-theme="light"] .tab-section table::after,
html:not([data-theme]) table::after,
html:not([data-theme]) .tab-section table::after {
  border-color: #000;
}

/* dark = white + stronger shadow */
html[data-theme="dark"] table::after,
html[data-theme="dark"] .tab-section table::after {
  border-color: #fff;
}
html[data-theme="dark"] table,
html[data-theme="dark"] .tab-section table {
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* gap when two tables follow */
.tab-section table + table {
  margin-top: 1rem;
}