/* Shared screen-table appearance. Column widths, sticky cells, scrolling and
   mobile card layouts remain the responsibility of their individual pages. */
:is(main#main, #content) {
  --table-heading: #f3f5ef;
  --table-line: #dce2d5;
  --table-heading-text: #485c33;
  --table-text: #343a30;
}

:is(main#main, #content) table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:is(main#main, #content) :is(.table-wrap, .budget-table-wrap, .payroll-scroll, .availability-wrap) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:is(main#main, #content) table > thead > tr > :is(th, td) {
  background: var(--table-heading);
  color: var(--table-heading-text);
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid var(--table-line);
}
:is(main#main, #content) table > tbody > tr > th {
  /* Frozen row headings stay opaque and match the current page surface while scrolling. */
  background: var(--page-surface, #fff);
  color: var(--table-text);
  font-weight: 400;
}
:is(main#main, #content) table > thead > tr > th[scope="colgroup"] {
  font-weight: 600;
}
/* Keep meaningful selection and total highlights. */
main#main .availability-matrix > tbody > tr > th.selected-person,
main#main table > tbody > tr.personal-own-row > th,
main#main table > tbody > tr.profit-total > th {
  background: var(--table-heading);
}
main#main table > tbody > tr.profit-total > th { font-weight: 700; }
main#main .payroll-person { border-bottom: 1px solid var(--table-line); }
main#main .payroll-detail-cell { background: #fafbf7; }

/* Recommendations use a responsive grid instead of a table element. */
main#main .provider-list { border: 0; border-radius: 0; }
main#main .provider-head,
main#main .provider-row { padding: 12px; border-bottom: 1px solid var(--table-line); }
main#main .provider-head {
  background: var(--table-heading);
  color: var(--table-heading-text);
  font-size: 13px;
  font-weight: 400;
}
main#main .provider-row { font-size: 14px; }
main#main .provider-row + .provider-row { border-top: 0; }
main#main .provider-row h3 { font: inherit; font-weight: 500; }

/* The budget keeps its compact rows; inset the header and values equally. */
@media (min-width: 701px) {
  main#main .budget-table tr > :first-child { padding-left: 12px; }
  main#main .budget-table tr > :last-child { padding-right: 12px; }
}

/* Django's data lists share the theme without changing sidebar navigation,
   sorting controls, bulk selection or editable fields. */
#content #changelist { border: 0; box-shadow: none; }
#content table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  padding: 12px;
  border-bottom: 1px solid var(--table-line);
}
#content table > thead > tr > th :is(a, .text) { color: var(--table-heading-text); }
#content table > thead > tr > th a:hover { background: #eaf0e2; }
#content #result_list > tbody > tr:not(.selected) > :is(th, td) { background: var(--page-surface, #fff); }
#content #result_list > tbody > tr.selected > :is(th, td) { background: var(--selected-row, #f0f3e9); }
#content table caption,
#content table > tbody > tr.content-section > th {
  background: var(--table-heading);
  color: var(--table-heading-text);
}
#content table caption a { color: var(--table-heading-text); }
/* Keep data and editable cells readable when the backend uses dark mode. */
#content table {
  background: var(--page-surface, #fff);
  color: var(--table-text);
  --body-fg: #343a30;
  --body-bg: var(--page-surface, #fff);
  --link-fg: #485c33;
  --link-hover-color: #2e4021;
  --border-color: #dce2d5;
  --darkened-bg: #f3f5ef;
  --selected-bg: #f3f5ef;
  --selected-row: #edf2e6;
}
#content table > tbody > tr > td { color: var(--table-text); }
#content table a { color: var(--table-heading-text); }
#content table > thead > tr > th { text-transform: none; }