/* ==========================================================================
   Data Table — card-contained table with hairline dividers
   Bare th/td tags inside `.table-container` are styled deliberately so
   content markup stays lean; named cells use table-* modifier classes.
   ========================================================================== */
.table-container {
  width: 100%;
  overflow-y: auto;
  margin-bottom: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.table-container--small {
  width: 50%;
}

.table-container__header {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-medium);
}

.table-container thead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface);
}

/* `border-collapse: collapse` drops the header's own bottom border once the
   thead is lifted out of flow, so the divider is redrawn as a shadow. */
.table-container thead::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  border-bottom: 1px solid var(--color-border);
}

/* A summary footer (the time log's "Total Time") pins to the bottom of the
   scroller, the way the column headers pin to the top. */
.table-container tfoot {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface);
}

.table-container th {
  color: var(--color-text-muted);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table-header--center {
  text-align: center !important;
}

.table-header--right {
  text-align: right !important;
}

.table-container tbody tr {
  transition: background-color var(--transition-fast);
}

.table-container tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-border);
}

.table-container tbody tr:hover {
  background-color: var(--tint-navy-04);
}

.table-container tbody tr[data-controller~="clickable-row"] {
  cursor: pointer;
}

.table-row--warning {
  box-shadow: inset 3px 0 0 var(--color-warning);
  background-color: rgba(245, 158, 11, 0.07);
}

.table-row--warning:hover {
  background-color: rgba(245, 158, 11, 0.13);
}

.table-row--danger {
  box-shadow: inset 3px 0 0 var(--color-danger);
  background-color: var(--tint-danger-10);
}

.table-row--danger:hover {
  background-color: var(--tint-danger-16);
}

/* A record added in the last 48 hours (see Case#recently_added?). Deliberately
   the faintest of these: it says "this one is new", not "do something about
   this one", so it is a tint with no edge marker to compete with the states
   above that do. */
.table-row--new {
  background-color: rgba(59, 130, 246, 0.06);
}

.table-row--new:hover {
  background-color: rgba(59, 130, 246, 0.12);
}

/* Cases with no assigned checklist ("No Recommendation"). Defined last so the
   data-quality flag stays visible even when a due-date state also applies. */
.table-row--no-checklist {
  box-shadow: inset 3px 0 0 #6366f1;
  background-color: rgba(99, 102, 241, 0.07);
}

.table-row--no-checklist:hover {
  background-color: rgba(99, 102, 241, 0.13);
}

.table-container td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  vertical-align: middle;
}

.table-cell--danger {
  color: var(--color-danger);
  font-family: var(--font-family-bold);
}

/* Emphasised name cell — the row's primary identifier. */
.table-cell--primary {
  color: var(--color-primary-dark);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

/* Row count under a table, e.g. "Showing 25 of 137 clients". */
.table-summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* --- Pagination footer --------------------------------------------------- */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.table-pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.table-pagination__page {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* A paging control with nowhere to go renders as a span, not a link. */
.table-pagination__controls span.button {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ==========================================================================
   Index page shell — header/filters pinned, only the rows scroll
   Mirrors the firm directory: the breadcrumb, page header, search, filter and
   action buttons stay put while the table body scrolls under its sticky column
   headers. The page itself never scrolls, so the scroller has to be handed a
   bounded height: each ancestor from the main-content frame down to the table
   is a flex column that passes its height on (min-height: 0 lets it shrink
   below the intrinsic height of a long table instead of overflowing).
   ========================================================================== */
turbo-frame#main_content:has(> .index-page) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.index-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Wrappers sitting between the page shell and the table scroller: the turbo
   frame when the page header lives outside it, and the bulk-select form every
   soft-deleting table is wrapped in — inside that frame on most of them, a
   direct child of the page on the case list, hence the descendant selector.
   They pass the height through instead of absorbing it. Forms that hold no
   table (the notifications bulk form is an empty element the checkboxes attach
   to by id) must not claim any, hence the :has().

   `min-height: 0` is what lets them shrink below the intrinsic height of a long
   table. That is also why the pagination goes inside the bulk form rather than
   beside it: a squeezed form overflows, and its footer has to overflow with the
   rows rather than be sat on by them. */
.index-page__body,
.index-page form:has(.table-container) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Breadcrumbs, page header, filters and toolbars keep their natural size; the
   scroller takes whatever is left, down to a floor of a few rows. */
.index-page .table-container {
  flex: 1 1 auto;
  min-height: 180px;
  margin-bottom: 0;
}

.index-page .table-pagination {
  flex: 0 0 auto;
  padding-bottom: var(--space-1);
}

/* Yes / No flags (e.g. Bespoke DFM): affirmative reads green, negative muted. */
.table-flag--yes {
  color: #1e8e63;
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.table-flag--no {
  color: var(--color-text-muted);
}

/* A listing with more columns than the shell has room for — the QA tracker's
   thirteen — given a floor to lay them out against so the cells stop cramming and
   the scroller does its job instead. Without it every name in every row wraps onto
   three lines and the table reads as a wall. */
.table-container table.table--wide {
  min-width: 1500px;
}

/* A value that is legitimately not set yet — an unowned applicant on the
   recruitment pipeline — as against missing data, which gets the louder alert
   (see ApplicationHelper#display_or_alert). */
.table-data--unset {
  color: var(--color-text-muted);
}

/* The cell that names the row — the applicant on the recruitment pipeline — set
   apart from the columns describing it. */
.table-data--strong {
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.table-data--center {
  text-align: center;
}

.table-data--right {
  text-align: right;
}

.table-empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4) !important;
  color: var(--color-text-muted);
}

/* Closing row of a populated table — see shared/_table_end_row. */
.table-end-row:hover {
  background-color: transparent;
}

.table-end-row__cell {
  text-align: center;
  color: var(--color-text-faint);
  font-size: var(--font-size-small);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  background-color: var(--color-surface-sunken);
}

/* --- Sortable headers --- */
.table-header__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.table-header--center .table-header__content {
  justify-content: center;
}

.table-header__sort-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

.table-header__sort-link:hover,
.table-header__sort-link--active {
  color: var(--color-primary-dark);
}

.table-header__sort-icon {
  font-size: 0.625rem;
  margin-left: var(--space-1);
  color: var(--color-text-faint);
}

.table-header__clear-sort {
  color: var(--color-text-faint);
  display: flex;
  align-items: center;
  transition: color var(--transition-base);
}

.table-header__clear-sort:hover {
  color: var(--color-danger);
}

.table-header__clear-icon {
  width: 1rem;
  height: 1rem;
}

/* --- Missing data alert --- */
.missing-data-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-danger);
}

.missing-data-alert svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* --- Table actions --- */
.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}


/* --- Bulk selection --- */
.table-bulk {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.table-bulk__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  font-family: var(--font-family-bold);
}

.table-select-column {
  width: 48px;
}

.table-select-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-green);
  cursor: pointer;
}

/* --- Deleted records --- */

/* The Active / Deleted switch. The same tab bar the listings already use (see
   .cases-index-tabs), a size down: it is a way back to something deleted by
   mistake, not a second half of the page (see shared/_deletion_tabs). */
.deletion-tabs {
  display: inline-flex;
  align-self: flex-start;
  flex: 0 0 auto;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: 3px;
  background-color: var(--tint-navy-06);
  border-radius: var(--radius-md);
}

.deletion-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.deletion-tabs__tab:hover {
  color: var(--color-primary-dark);
}

.deletion-tabs__tab--current {
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--color-primary-green);
}

.deletion-tabs__count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--tint-navy-10);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}


/* When it was deleted and when it stops being recoverable, stacked so the
   deadline reads as a footnote to the date rather than a second fact. */
.table-deleted-cell {
  white-space: nowrap;
}

.table-deleted-cell__when {
  display: block;
  color: var(--color-text-muted);
}

.table-deleted-cell__until {
  display: block;
  color: var(--color-text-faint);
  font-size: var(--font-size-small);
}

/* A select-all that has no header row to sit in — the firm directory's cards.
   It groups with the count and the button on the right rather than being pushed
   to the far side of a very wide bar, so the three read as one control. */
.table-bulk--cards {
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.table-bulk__select-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  cursor: pointer;
}

/* A cell that names another record and opens it (see RecordLinksHelper). The row
   underneath already opens the record the table is of, so these are underlined
   on hover to say they go somewhere else. */
.record-link {
  color: inherit;
  text-decoration: none;
}

.record-link:hover {
  text-decoration: underline;
  color: var(--color-primary-green);
}

/* ==========================================================================
   Row colour key — what a table's tinted rows mean (see shared/_row_highlight_key)
   ========================================================================== */
.row-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.row-key__title {
  font-family: var(--font-family-bold);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
}

.row-key__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The swatch carries the row's own class, so it is tinted by the same rule the
   row is. The border is what makes the faintest of them (the "just added" tint)
   visible at 14px square. */
.row-key__swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-small, 3px);
  border: 1px solid var(--color-border, #d6dbe0);
  flex-shrink: 0;
}