/** Shared table typography for both native tables and DataTables. */
/* Shared table text. Status badges retain their semantic colours. */
body:not(.home) .main-content table > thead > tr > th {
  text-transform: none !important;
  letter-spacing: normal;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #171717);
  text-align: left;
}
body:not(.home) .main-content table > tbody > tr > td {
  font-size: 16px;
}

/* Keep long template names from consuming the scrolling metadata area. */
@media (min-width: 768px) {
  #templates-table_wrapper .dt-scroll-head th:first-child,
  #templates-table_wrapper #templates-table tbody td:first-child {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    white-space: normal;
  }

  #templates-table_wrapper #templates-table tbody td:first-child .hrc-branded-title,
  #templates-table_wrapper #templates-table tbody td:first-child > a {
    display: inline-flex;
    max-width: 272px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #templates-table_wrapper #templates-table tbody td:first-child .hrc-branded-title > a {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Long addresses must not force Email underneath the pinned Documents cells. */
@media (min-width: 768px) {
  #employees-table-status_wrapper .dt-scroll-head th:nth-child(5),
  #archived-employees-table-status_wrapper .dt-scroll-head th:nth-child(5),
  #employees-table-status tbody td:nth-child(5),
  #archived-employees-table-status tbody td:nth-child(5) {
    width: 252px;
    min-width: 220px;
    max-width: 252px;
    white-space: normal;
  }

  #employees-table-status tbody td:nth-child(5) .user_name_txt,
  #archived-employees-table-status tbody td:nth-child(5) .user_name_txt {
    display: inline-block;
    max-width: 220px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Review tables also use Bootstrap, whose cell backgrounds do not inherit
 * the row colour. Scope the palette to this table and its summary/filter UI. */
.dark-mode .review-overview-page .summary-card-value {
  color: var(--dark-text-primary);
}
.dark-mode .review-overview-page :is(.summary-card-label, .form-label, .text-muted) {
  color: var(--dark-text-secondary) !important;
}
.dark-mode #reviewsTable {
  --bs-table-color: var(--dark-text-primary);
  --bs-table-bg: var(--dark-bg-secondary);
  --bs-table-border-color: var(--dark-border);
  --bs-table-striped-bg: var(--dark-bg-primary);
  --bs-table-hover-bg: var(--dark-bg-tertiary);
}
.dark-mode #reviewsTable > thead > tr > th {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}
.dark-mode #reviewsTable > tbody > tr > td {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}
.dark-mode #reviewsTable > tbody > tr:hover > td {
  background-color: var(--dark-bg-tertiary);
}
.dark-mode #reviewsTable .v-badge--muted,
.dark-mode #reviewsTable > tbody > tr:hover .text-muted {
  color: var(--dark-text-primary) !important;
}