/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-semantic-classes/table-base.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/* =============================================================================
   TABLE BASE
   - Consumes density tokens (from density.css)
   - Table rendering & patterns
   ============================================================================= */

/* Base table element */
.table {
  display: table;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
  width: var(--size-100pct);
  min-width: 0;
}

/* Column width fallback - prevent 0-width columns */
.table__col {
  min-width: var(--width-4ch);
}

/* Natural width - table sizes to content, not container */
.table--natural-width {
  width: var(--size-2px); /* Force shrink-to-fit */
  white-space: nowrap;
}

.table__body {
  width: max-content;
  min-width: 0;
  box-sizing: border-box;
  table-layout: fixed;
  /* Canonical table chrome: always-on body grid lines. */
  --gl-side: var(--input-border-thin) solid var(--input-border);
  --gl-bottom: var(--input-border-thin) solid var(--input-border);
}

.table__body--scrollable {
  width: var(--size-100pct);
  min-width: 0;
  box-sizing: border-box;
  /* Canonical table chrome: always-on body grid lines. */
  --gl-side: var(--input-border-thin) solid var(--input-border);
  --gl-bottom: var(--input-border-thin) solid var(--input-border);
}

.table__body--scrollable {
  display: flex;
  flex-direction: column;
  gap: var(--space-9px);
  flex: 0 0 auto;
  min-height: 0;
}

.table__body--scrollable-full {
  flex: 1 1 auto;
  min-height: 0;
}

.table__cell--natural-width {
  white-space: var(--col-white-space);
}

.table__header--natural-width {
  white-space: var(--col-white-space);
}

/* ALL table cells - universal density control is applied via .table__cell and .table__header */

/* Reset margins on content inside cells */
.table__cell-content {
  margin: 0;
}

/* Body cells */
.table__cell {
  padding: var(--table-cell-padding);
  font-size: var(--table-cell-font-size);
  line-height: var(--table-cell-line-height);
  vertical-align: middle;
  /* Column-level <path> control via CSS vars (overridden in field-and-cell-widths.css) */
  overflow: hidden;
  text-overflow: var(--col-text-overflow);
  white-space: var(--col-white-space);
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-left: var(--gl-side, var(--input-border-thin) solid transparent);
  border-bottom: none;
}

/* Editing state marker - portaled dropdowns don't need overflow changes */
.table__cell--editing {
  position: relative;
  z-index: 100;
}

/* Inline-edit label: keep row height stable between view ↔ edit modes. */
.table__editable-label {
  display: flex;
  align-items: center;
  width: var(--size-100pct);
  min-width: 0;
  min-height: var(--input-height);
  box-sizing: border-box;
}

/* Virtual scrolling spacer row cell: no <path>, zero intrinsic size. */
.table__cell--virtual-spacer {
  padding: 0;
  margin: 0;
  border: none;
  width: 0;
  height: 0;
}

.table__cell--truncate {
  max-width: var(--width-300px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header cells */
.table__header {
  padding: var(--table-cell-padding);
  font-size: var(--table-cell-font-size);
  line-height: var(--table-cell-line-height);
  vertical-align: middle;
  font-weight: var(--weight-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  border-left: var(--gl-side, var(--input-border-thin) solid var(--input-border));
  border-top: none;
  border-bottom: none;
}

/* Sort indicator container */
.table__header-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1px);
  margin-left: var(--space-1-5px);
  opacity: 0.7;
  font-size: var(--font-size-20);
  vertical-align: middle;
  line-height: var(--line-height-110pct);
}

.table__header-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1px);
  width: var(--size-100pct);
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.table__header-sort-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  font-size: var(--font-size-20);
  line-height: var(--line-height-110pct);
}

.table__cell--checkbox {
  width: var(--size-40px);
  min-width: var(--size-40px);
  max-width: var(--size-40px);
  text-align: center;
}


.table__cell--expand {
  width: var(--size-40px);
  min-width: var(--size-40px);
  max-width: var(--size-40px);
  text-align: center;
}

/* Header cells */
.table__header--checkbox {
  width: var(--size-40px);
  min-width: var(--size-40px);
  max-width: var(--size-40px);
}
.table__header--expand {
  width: var(--size-40px);
  min-width: var(--size-40px);
  max-width: var(--size-40px);
}

.table__expand-toggle {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-16);
  line-height: 1;
  padding: 0;
}

.table__expand-toggle:hover {
  color: var(--text-primary);
}

/* Sort priority number (shown when multiple columns sorted) */
.table__header-sort-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-16px);
  height: var(--size-16px);
  padding: 0 var(--space-0-5px);
  border-radius: var(--radius-pill);
  background: var(--vibrant-teal);
  color: var(--white);
  font-size: var(--font-size-12);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-110pct);
}

/* =============================================================================
   CELL CONTENT CONSTRAINTS
   ============================================================================= */


/* Inline truncation helpers */
.table__cell-text {
  display: inline-block;
  max-width: var(--size-100pct);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
}

.table__cell-text--primary {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.table__cell-text--caption {
  font-size: var(--font-size-12);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  margin-top: var(--space-0-5px);
  font-style: italic;
}

/* Caption links: apply .table__cell-text--caption-link on <a> elements inside captions. */
.table__cell-text--caption-link {
  color: currentColor;
  text-decoration: none;
}

.table__cell-text--caption-link:hover {
  color: var(--text-primary);
}

.table__cell-text--caption-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--ring-offset-sm);
  border-radius: var(--radius-standard);
}

.table__cell-text--flex {
  flex: var(--flex-grow-standard) var(--flex-shrink-standard) var(--size-auto);
}

.table__cell-text--multiselect {
  max-width: var(--width-200px);
  margin-right: var(--space-1px);
}

/* =============================================================================
   TABLE RENDERER LAYOUT BLOCKS
   Shared BEM layout blocks for CommonRenderers and nested child-table chrome.
   ============================================================================= */

.child-row-mini-table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3px);
  width: auto;
  min-width: 0;
  max-width: var(--size-100pct);
  box-sizing: border-box;
}

.table-renderer__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-9px);
  min-width: 0;
  max-width: var(--size-100pct);
  box-sizing: border-box;
}

.child-row-mini-table__archive-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-9px);
  min-width: 0;
  max-width: var(--size-100pct);
  box-sizing: border-box;
}

.table-renderer__row--align-start {
  align-items: flex-start;
}

.table-renderer__row--center {
  justify-content: center;
}

.table-renderer__row--wrap {
  flex-wrap: wrap;
}

.table-renderer__row--actions {
  flex-wrap: wrap;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
}

.child-row-mini-table__archive-toggle {
  justify-content: space-between;
  width: var(--size-100pct);
}

/* =============================================================================
   TABLE HEAD (thead)
   ============================================================================= */

.table__head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--sidebar-background-gradient);
  box-shadow: var(--shadow-section-tab-highlight);
  color: var(--text-on-dark);
  font-size: var(--font-size-12);
  font-weight: var(--weight-normal);
  opacity: 1;
}

.table__header:first-child {
  border-left: none;
}

.table__head::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--overlay-tab-shine);
  opacity: var(--table-header-shine-opacity);
}

.table__row--faux-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--overlay-tab-shine);
  opacity: var(--table-header-shine-opacity);
}

.table__row--child-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--overlay-tab-shine);
  opacity: var(--table-header-shine-opacity);
}

/* General header cells: keep horizontal text and safe truncation is handled by .table__header */

/* Sticky header support in scroll container */
.table__head--in-scroll-container {
  position: sticky;
  top: var(--inset-0);
  z-index: var(--z-sticky);
  background: var(--sidebar-background-gradient);
}

/* Dense muted header for <path> tables (invoice line items, etc.) */
.table__head--child-dense {
  background: var(--light-cool-gray);
  font-size: var(--font-size-12);
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

.table__header--child-dense {
  padding-block: var(--space-1px);
  padding-inline: var(--space-1-5px);
}

.table__head--child-dense::before {
  opacity: 0.5;
}

/* =============================================================================
   COLUMN HEADER (alternative header style)
   ============================================================================= */

.table__column-header {
  display: table-cell;
  padding: var(--space-1px) var(--space-1-5px);
  font-size: var(--font-size-12);
  font-weight: var(--weight-normal);
  text-align: left;
  border-bottom: var(--input-border-width-thin) solid var(--card-border);
  background: var(--table-header-background);
  /* Allow natural wrapping without per-letter splits */
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  word-break: keep-all; /* keep words intact */
  overflow-wrap: break-word; /* prefer word-level wrapping */
  text-wrap: balance; /* nicer multi-line distribution */
}

.table__column-header--sortable { cursor: pointer; }
.table__column-header--sorted { font-weight: var(--weight-medium); }

/* =============================================================================
   ROWS
   ============================================================================= */

.table__row {
  border-bottom: var(--gl-bottom, var(--input-border-thin) solid transparent);
}

.table__row:last-child > .table__cell {
  border-bottom: var(--input-border-width-thin) solid var(--input-border);
}

.table__row:last-child {
  border-bottom: none;
}

.table__cell {
  background: var(--card-surface);
}

/* Zebra striping stays row-owned; the first physical column is marked by a
  shared data attribute so header, utility cells, and data cells all use the
  same physical-column plan. The renderer sets the marker on the first actual
  cell in the row, not on a logical data index that can drift behind utility
  columns. */
.table__cell--first-in-row,
.table__header[data-first-physical-column="true"],
.table__cell[data-first-physical-column="true"] {
  border-left: none;
}

.table__row[data-row-even="true"] > .table__cell:not(.table__cell--in-child-row) {
  background-color: var(--table-row-alt-background);
}

.table__row--empty {
  background: var(--pale-off-white);
  /* When the table is flex-filled, let the empty row expand so State can center. */
  height: var(--size-100pct);
  /* Add subtle top border to create visual separation from data */
  border-top: var(--input-border-width-thin) solid var(--input-border);
}

.table__cell--in-empty-row {
  padding: var(--space-0);
  width: var(--size-100pct-percent);
  background: var(--pale-off-white);
}

/* Empty state cell - DEPRECATED: State now rendered as overlay outside table structure
 * This cell is kept minimal as a spacer only. State rendering moved to .table__state-overlay. */
.table__cell--empty-state {
  padding: 0;
  height: var(--size-100pct);
  min-height: var(--size-360px);
  /* Just a spacer - State is rendered as overlay in .table__scroll-container */
}

/* State overlay wrapper - absolutely covers the scroll viewport inside the
 * table body. Children stretch to fill the full visible area so the State
 * card always spans the exact row region. */
.table__state-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Stretch children to fill the full overlay width — .table__state has no
     explicit width and sizes from this container. Inner .state--table handles
     centering of content within that full-width card. */
  align-items: stretch;
  /* Keep the viewport owned by the table body; the State primitive itself
     centers its own content. */
  justify-content: flex-start;
  z-index: 2;
  pointer-events: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

/* <path> State component - rendered inside .table__state-overlay.
 * No explicit width — the overlay uses align-items: stretch so this element
 * fills the container width automatically. */
.table__state {
  display: flex;
  flex: 1 1 auto;
  height: var(--size-100pct);
  min-height: 100%;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Purely container-relative: never taller than the visible overlay region
     inside the table body scroll viewport. */
  max-height: var(--size-100pct);
  padding: var(--space-9px);
  overflow-x: hidden;
  overflow-y: hidden;
  word-wrap: break-word;
  box-sizing: border-box;
  background: var(--card-surface);

  /* ⚠️ ARCHITECTURE: State is now rendered as overlay outside table structure.
   *     Positioned relative to .table__scroll-container (not table cells).
   *     CONTAINER-RELATIVE, completely independent of table columns.
   *     Parent .table__state-overlay (align-items: stretch) drives the width.
   * Updated: 2026-02-13 */
}

.table__state > .state {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* Loading state has no special sizing — same stretch behavior as other states. */
.table__state--loading {}

/* <path> rows: structurally part of table, conceptually different content */
.table__row--child {
  background: transparent;
}

/* Cell wrapper for child content - handles table structure only */
.table__cell--child-content {
  padding: var(--space-9px);
  border: none;
}

/* Panel container for child content - this is where the visual styling lives */
.table__child-panel {
  padding: var(--space-9px);
  background: var(--black-glass-faint-10);
  border-radius: var(--radius-standard);
}

.table__child-panel--alt {
  background: var(--black-glass-visible-15);
}

.table__row--faux-header {
  /* Match main thead exactly - for Tide Tracker and similar faux headers */
  position: relative;
  background: var(--sidebar-background-gradient);
  box-shadow: var(--shadow-section-tab-highlight);
  color: var(--text-on-dark);
  font-size: var(--font-size-12);
  font-weight: var(--weight-normal);
}

.table__row--faux-header--child {
  padding: var(--space-1px) var(--space-9px);
  margin-bottom: var(--space-0-5px);
}

.table__row--child-header {
  /* Child row headers use <path> gradient */
  position: relative;
  background: var(--secondary-surface-gradient);
  box-shadow: var(--secondary-surface-shadow);
  color: var(--text-on-dark);
  font-size: var(--font-size-12);
  font-weight: var(--weight-normal);
}

/* Remove inner gridlines for faux header row while keeping outer edge clean */
.table__header--in-faux-row {
  border-top: none;
  border-bottom: none;
}

.table__header--in-faux-row-first {
  border-left: none;
}

.table__header--in-faux-row-last {
  border-right: none;
}

/* Indented row: for line items under event headers — apply .table__cell--indented-first on the first td */
.table__cell--indented-first {
  padding-left: var(--space-18px);
}

/* Nested child cell: indent variants */
.table__cell--nested-indent-0 { padding-left: 0; }
.table__cell--nested-indent-1 { padding-left: var(--width-4ch); }
.table__cell--nested-indent-2 { padding-left: calc(var(--width-4ch) * 2); }

.invoice-line-items__status {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
  max-width: var(--width-120px);
  min-width: 0;
}

/* Tide Tracker faux header band – mimic main table header */
.tide-tracker-faux-header {
  background: var(--sidebar-background-gradient);
  box-shadow: var(--shadow-section-tab-highlight);
  border-bottom: var(--input-border-width-thin) solid var(--deep-teal);
  color: var(--text-on-primary);
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  padding: var(--space-1px) var(--space-12px);
}

.tide-tracker-faux-header__label {
  white-space: nowrap;
}

/* Clickable row — cursor affordance when onRowClick is set */
.table__row--clickable {
  cursor: pointer;
}

/* Muted danger tint — used for late BAs in live punch tracking */
.table__row--late {
  background: var(--pale-red);
}

/* <path> row — single-highlight selection (distinct from checkbox selection) */
.table__row--active {
  background: var(--surface-secondary);
}

.table__row[data-row-selected="true"] {
  background: var(--teal-glass-light-20);
}

.table__row[data-row-selected="true"] > .table__cell {
  background: var(--teal-glass-light-20);
}

.table__row[data-row-expanded="true"] {
  background: var(--teal-glass-whisper-05);
}

.table__row[data-row-expanded="true"] > .table__cell,
.table__row[data-row-expanded-detail="true"] > .table__cell {
  background: var(--teal-glass-whisper-05);
}

.table__row:focus {
  outline: none;
  background: var(--teal-glass-whisper-05);
}

.table__row:focus-visible {
  background: var(--teal-light-glass-soft-12);
  box-shadow: inset var(--shadow-offset-md) var(--shadow-offset-reset) var(--shadow-offset-reset) var(--accent-teal);
}

.table__row:focus-within {
  outline: none;
  background: inherit;
}

.table__cell--hover {
  background-color: var(--table-row-hover-background);
  cursor: pointer;
}

/* Last row rounding */
.table__cell--last-row { border-bottom: none; }
.table__cell--last-row-first { border-bottom-left-radius: var(--radius-standard); }
.table__cell--last-row-last { border-bottom-right-radius: var(--radius-standard); }

/* =============================================================================
   LOADING
   ============================================================================= */

.table__body--loading {
  cursor: progress;
  position: relative;
}

.table__loading {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-18px);
  width: var(--size-100pct);
  max-width: var(--size-100pct);
  margin: 0;
}

.table__loading--bird {
  width: var(--size-100pct);
  max-width: var(--size-100pct);
  padding: var(--space-24px) var(--space-18px);
  height: var(--size-100pct);
  background: transparent;
  border-radius: var(--radius-standard);
  box-shadow: none;
}

.bird--in-table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-100pct);
  min-height: var(--height-200px);
  position: relative;
  margin-inline: auto;
  left: var(--inset-0);
  transform: none;
}

/* Busy-state visuals are handled by explicit <path>.
   Do not globally dim table rows. */

/* Table loading overlay (for operations that fetch new data like select-all) */
/*
  DEPRECATED: Fullscreen table overlay
  Policy: Loading must never block table header/toolbar. Disable fullscreen class.
  If present, render nothing and avoid intercepting pointer events.
*/
.table-loading-overlay {
  position: static;
  inset: auto;
  background: transparent;
  backdrop-filter: none;
  z-index: auto;
  display: none; /* disabled: no fullscreen overlays in table contexts */
  align-items: center;
  justify-content: center;
  animation: none;
}

/* Disabled with the overlay; keep as no-op to prevent accidental usage */
.table-loading-overlay__content {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  min-width: 0;
  animation: none;
}

.table-loading-overlay__message {
  font-size: var(--font-size-14);
  font-weight: var(--weight-semibold);
  color: var(--deepest-slate);
  margin-top: 0;
  margin-bottom: 0;
  display: none;
}

.table-loading-overlay__submessage {
  font-size: var(--font-size-12);
  color: var(--medium-slate);
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(var(--space-9px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   DETAIL GRID / CHILD MESSAGES
   ============================================================================= */
.table__details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--width-200px), 1fr));
  gap: var(--space-9px);
  padding: var(--space-9px) 0;
}

.table__child-message {
  padding-left: var(--space-24px);
  font-size: var(--font-size-12);
  color: var(--text-muted);
}

.table__child-message--error {
  color: var(--strong-red);
}

/* Summary field block for <path> rows.
   Dense horizontal fields used in invoice/event/payroll details sections. */

/* =============================================================================
   PAGINATION
   ============================================================================= */

.table__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-9px);
  padding: var(--space-1px) var(--space-1px);
  font-size: var(--font-size-12);
  color: var(--text-secondary);
  background: var(--pale-off-white);
  position: relative;
  z-index: 1;
  border-top: var(--input-border-width-thin) solid var(--input-border-thin);
  width: var(--size-100pct);
}

.table__cell-content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1px);
}

.table__cell-link-content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1px);
}

/* Row count: ALWAYS visible — never suppress this. Users must always see total rows. */
.pagination__left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1px);
  flex: 1 1 0;
  min-width: 0;
}

.pagination__right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1px);
  flex: 1 1 0;
  min-width: 0;
}

.pagination__center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6px);
  flex: 0 0 auto;
  min-width: 0;
}

.pagination__rows {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
  gap: var(--space-9px);
}

.pagination__rows-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .table__pagination {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6px);
    padding-inline: var(--space-9px);
    padding-block: var(--space-6px);
    font-size: var(--font-size-mobile-2xs);
    overflow-x: hidden;
  }

  .pagination__left {
    display: none;
  }

  .pagination__center {
    flex: 1 1 100%;
    justify-content: center;
    order: 1;
    font-size: var(--font-size-mobile-2xs);
    color: var(--text-secondary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pagination__right {
    flex: 1 1 100%;
    justify-content: flex-end;
    order: 2;
  }

  .pagination__rows {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    white-space: nowrap;
    gap: var(--space-3px);
  }

}

.table__controls {
  flex: 1 1 auto;
}

/* NOTE: Bulk action bar styles moved to <path> */

/* =============================================================================
   INLINE CELL CONTROLS
   ============================================================================= */

.table__cell-inline-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: fit-content;
  position: relative;
}

.table__cell-inline-control__overlay {
  position: absolute;
  inset: 0;
  background: var(--medium-white-tint);
  backdrop-filter: var(--backdrop-glass-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-standard);
  z-index: var(--z-popover);
}

/* =============================================================================
   MOBILE STACKED VARIANT (opt-in)
   ============================================================================= */

/* Mobile card wrapper */
.table__mobile-wrapper {
  display: none;
  width: var(--size-100pct);
  max-width: var(--size-100pct);
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  gap: var(--space-1px);
  padding: var(--space-1px) 0;
}

/* Mobile card rows should be content-driven and never clip text in Safari.
   Keep this scoped to table mobile cards so regular Card usage is unchanged. */
.table__mobile-card {
  width: var(--size-100pct);
  min-width: 0;
}

.table__mobile-card-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5px);
  padding: var(--space-9px);
}

.table__mobile-card-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: var(--space-1px) var(--space-1-5px);
  gap: var(--space-1-5px);
  align-items: center;
}

.table__mobile-card-header-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  font-size: clamp(14px, var(--font-size-12), 16px); /* 14px-16px on mobile for readability */
  line-height: var(--line-height-normal);
}

.table__mobile-card-header-main {
  min-width: 0;
  flex: 1 1 auto;
}

.table__mobile-card-header-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1px);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-11);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table__mobile-card-header-kicker-value {
  color: var(--strong-teal);
}

.table__mobile-card-header-avatar {
  flex: 0 0 auto;
}

.table__mobile-card-header-title {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

.table__mobile-card-header-copy {
  font-size: clamp(14px, var(--font-size-12), 16px); /* 14px-16px on mobile for readability */
  line-height: var(--line-height-normal);
}


.table__mobile-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5px);
  align-items: center;
  margin-top: var(--space-1-5px);
}

.table__mobile-card-signals {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-1px);
  min-width: 0;
  flex: 0 0 auto;
}

.table__mobile-card-divider {
  margin: var(--space-1px) 0 0 0;
}

.table__mobile-card-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1px);
  min-width: 0;
}

.table__mobile-card-action-btn {
  line-height: var(--line-height-normal);
}

.table__mobile-card-field-value {
  line-height: var(--line-height-normal);
}

.table__mobile-card-field-label {
  line-height: var(--line-height-normal);
}

.table__mobile-card-header-copy {
  line-height: var(--line-height-normal);
}

.table__mobile-card-action-btn {
  overflow: visible;
}

.table__mobile-card-toggle-hit {
  overflow: visible;
}

/* =============================================================================
   MOBILE ACCESSIBILITY - WCAG 2.5.5 Touch Target Size & Font Readability
   ============================================================================= */

/* Details toggle control hit area - 44×44 CSS pixels minimum (WCAG 2.5.5). */
.table__mobile-card-toggle-hit {
  flex: 0 0 auto;
  width: var(--size-44px);
  height: var(--size-44px);
  min-width: var(--size-44px);
  min-height: var(--size-44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile action buttons - 44×44 CSS pixels minimum (WCAG 2.5.5) */
.table__mobile-card-action-btn {
  min-width: var(--size-44px);
  min-height: var(--size-44px);
  padding: var(--space-1-5px) var(--space-9px);
}

/* Field labels and values in expanded details */
.table__mobile-card-field-label {
  font-size: clamp(13px, var(--font-size-12), 14px); /* Slightly smaller for labels */
  font-weight: var(--weight-semibold);
}

.table__mobile-card-field-value {
  font-size: clamp(13px, var(--font-size-12), 15px);
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

/* Button text within mobile cards - ensure readable sizing */
.table__mobile-card-action-btn {
  font-size: clamp(13px, var(--font-size-12), 14px); /* Minimum 13px for touch-target buttons */
  letter-spacing: var(--tracking-sm);
}

/* Mobile-card details should use the canonical row-details grid contract, not
   ad-hoc stacks, while staying dense on narrow screens. */
.table__mobile-card-field-grid {
  display: grid;
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-1-5px);
}

/* =============================================================================
   SCROLLING
   ============================================================================= */

.table__scroll-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--size-100pct);
  max-width: var(--size-100pct);
  min-width: 0;
  flex: 1 1 auto;
  min-height: var(--height-140px); /* Keep small dashboard/mini tables from clipping loading state + pagination */
  overflow-x: auto;
  overflow-y: visible;
  box-sizing: border-box;
  /* The scroll viewport owns the outer table frame. Left/right edges already
     come from pinned pseudo-elements; bottom edge must live here too so wide
     rows do not visually "stop" at per-cell borders. */
  box-shadow: inset 0 calc(var(--input-border-width-thin) * -1) 0 0 var(--input-border);
}

/* Keep side borders visually pinned to the viewport while horizontal scrolling.
   This preserves the same left/right frame even when wide tables pan underneath. */
.table__scroll-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--input-border-width-thin);
  background: var(--input-border);
  pointer-events: none;
  z-index: 2;
}
.table__scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--input-border-width-thin);
  background: var(--input-border);
  pointer-events: none;
  z-index: 2;
}

.table__scroll-container::before {
  left: 0;
}

.table__scroll-container::after {
  right: 0;
}

/* Tablet and below: the filter band and side panels consume more vertical
   space, so allow the table scroll region to shrink without forcing the
   full-size card to overflow/clamp content. */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) {
  .table__scroll-container {
    min-height: var(--size-120px);
  }
}

.table__scroll-container--full-height {
  /* CRITICAL: Flex-fill parent container */
  flex: 1 1 0;
  height: 100%;
  block-size: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.table__scroll-container--max-height {
  /* Scroll-capped tables should hug their rendered rows instead of reserving
     empty viewport space beneath a short body. */
  min-height: 0;
  max-height: var(--table-max-height-page);
  overflow-y: auto;
}

@media (max-width: 767px) {
  .table--with-mobile-cards .table__scroll-container--mobile-cards {
    display: none;
  }

  .table--with-mobile-cards .table__mobile-wrapper--mobile-cards {
    display: flex;
  }
}

.table__scroll-content {
  flex: 1 1 auto;
  /* Allow inner table element to grow wider than the viewport so horizontal
     scrolling can reveal additional columns. The outer
     .table__scroll-container owns overflow-x. */
  box-sizing: border-box;
  position: relative;
  min-height: 0;
  height: 100%;
  block-size: 100%;
  min-height: 100%;
  overflow-y: visible;
  overflow-x: visible;
  display: flex;
  flex-direction: column;
}

.table__scroll-content::after {
  content: '';
  flex: 1 1 auto;
  min-height: var(--space-24px);
  width: var(--size-100pct);
  align-self: stretch;
  background: var(--inactive-surface-gradient);
  border-top: var(--input-border-width-thin) solid var(--input-border);
  pointer-events: none;
}

/* <path> State renders in .table__state-overlay so it is sized to
   the visible scroll viewport, independent of intrinsic table column width. */

.table--in-scroll-container {
  display: table;
  /* Default: let the table size to its contents so a single data row never
     stretches to fill the full-height viewport. Extra space remains blank. */
  flex: 0 0 auto;
  height: auto;
  width: auto;
  table-layout: auto;
  box-sizing: border-box;
}

.table--in-scroll-container--full-surface {
  width: max-content;
  min-width: var(--size-100pct);
}

.table--state-only-fills-scroll {
  /* Keep the empty table structure filling the scroll viewport while the
     viewport-sized State overlay owns the visible status UI. */
  flex: 1 1 auto;
  height: var(--size-100pct);
}

.table__row {
  height: auto;
}

.table__body--in-scroll-container {
  display: table-row-group;
  overflow: visible;
  height: auto;
}

.table__scroll-gutter {
  position: absolute;
  top: var(--inset-0);
  right: var(--inset-0);
  width: var(--space-1-5px);
  height: var(--size-100pct-percent);
  pointer-events: none;
  z-index: var(--z-overlay);
}

/* Subtle scrollbars for dense card tables (mini UTStack widgets) */
.table-row-scroll--mini {
  scrollbar-width: thin;
  scrollbar-color: var(--teal-glass-strong-40) transparent;
}

.table-row-scroll--mini::-webkit-scrollbar {
  width: var(--space-0-5px);
  height: var(--space-0-5px);
}

.table-row-scroll--mini::-webkit-scrollbar-track {
  background: transparent;
}

.table-row-scroll--mini::-webkit-scrollbar-thumb {
  background-color: var(--teal-glass-strong-40);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.table-row-scroll--mini:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* =============================================================================
   VIRTUAL SCROLLING
   ============================================================================= */

.table__scroll-body { display: block; }
.table__scroll-row { display: block; }
.table__scroll-cell { display: block; padding: var(--space-0); border: none; }

.table__scroll-nested {
  width: var(--size-100pct);
  border-collapse: inherit;
}

.table__scroll-nested-body {
  display: table-row-group;
}

/* =============================================================================
   TABLE DATE CELL
   ============================================================================= */

.table__cell-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1px);
  padding: var(--space-1px) var(--space-1-5px);
  border: none;
  background: transparent;
  border-radius: var(--radius-standard);
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--animation-quick) var(--easing-smooth);
}

.table__cell-date:hover {
  background: var(--teal-glass-whisper-05);
}

.table__cell-date:focus-visible {
  outline: var(--size-2px) solid var(--accent-teal);
  outline-offset: var(--space-0-5px);
}

.table__cell-date__text {
  flex: var(--flex-grow-standard) var(--flex-shrink-standard) var(--size-auto);
}

.table__cell-date__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: var(--flex-shrink-none);
}

.table__cell-content__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: var(--flex-shrink-none);
}

/* =============================================================================
   CELL CONTENT PATTERNS
   ============================================================================= */

.table__cell-content__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5px);
}

.table__cell-datetime {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5px);
}

.table__cell-content__text-main {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.table__cell-content__text-sub {
  font-size: var(--font-size-12);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--width-240px);
}

/* Datetime block */

.table__cell-datetime__date {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.table__cell-datetime__time {
  font-size: var(--font-size-12);
  white-space: nowrap;
}

.table__cell-datetime__range-to {
  font-size: var(--font-size-12);
  white-space: nowrap;
}

.table__cell-datetime__time {
  color: var(--text-secondary);
}

.table__cell-datetime__range-to {
  color: var(--text-muted);
  margin-top: var(--space-0-5px);
  font-weight: var(--weight-medium);
}

.table__cell-datetime__one-line {
  white-space: nowrap;
}


.table__cell-phone-link {
  color: var(--text-primary);
  text-decoration: none;
}


.table__cell-phone-link:link {
  color: var(--text-primary);
  text-decoration: none;
}


.table__cell-phone-link:visited {
  color: var(--text-primary);
  text-decoration: none;
}


.table__cell-phone-link:hover {
  color: var(--text-primary);
  text-decoration: none;
}


.table__cell-phone-link:active {
  color: var(--text-primary);
  text-decoration: none;
}


.cell-hover-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5px);
}

.cell-hover-actions__content {
  min-width: 0;
}

.cell-hover-actions__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.cell-hover-actions__actions--visible {
  opacity: 1;
  pointer-events: auto;
}

.actions-row--hover-only--visible {
  opacity: 1;
  pointer-events: auto;
}

.actions-row--hover-only:hover {
  opacity: 1;
  pointer-events: auto;
}

.actions-row--hover-only:focus-within {
  opacity: 1;
  pointer-events: auto;
}

/* ID columns: reserve equal <path> action slots so numeric content stays centered. */
.cell-hover-actions--id-link {
  --id-hover-slot-size: var(--size-20px);
  display: grid;
  grid-template-columns: var(--id-hover-slot-size) minmax(0, auto) var(--id-hover-slot-size);
  align-items: center;
  justify-content: center;
  width: var(--size-100pct);
  column-gap: var(--size-2px);
}

.cell-hover-actions__content--id-link {
  grid-column: 2;
  justify-self: center;
}

.cell-hover-actions__actions--id-link {
  grid-column: 3;
  justify-self: end;
  min-width: var(--id-hover-slot-size);
  gap: 0;
}

.table__cell-id-text {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  line-height: 1.1;
}

.table__cell-id-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.table__cell-id-subtext {
  font-size: var(--font-size-12);
  color: var(--text-muted);
  margin-top: var(--size-1px);
  white-space: nowrap;
}

.table__receipt-thumb-link {
  display: inline-flex;
}

.actions-row--hover-only {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* Currency block */
.table__cell-currency {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1px);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

.table__cell-currency__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  flex-shrink: var(--flex-shrink-none);
}

/* =============================================================================
   COLUMN WIDTH MODIFIERS
   Column widths are defined in field-and-cell-widths.css
   ============================================================================= */

/* ==========================================================================
   In-cell grid: reusable stacked grid row layout
   ========================================================================== */

.in-cell-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--size-6px);
}

.in-cell-grid__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(calc(var(--size-3px) * 3));
  row-gap: var(--size-3px);
}

.in-cell-grid__cell {
  min-width: 0;
}

.in-cell-grid__head {
  padding-bottom: var(--size-3px);
  border-bottom: var(--size-1px) solid var(--card-border);
}

.in-cell-grid__label {
  word-break: keep-all;
  overflow-wrap: normal;
}

.in-cell-grid__value {
  word-break: normal;
  overflow-wrap: break-word;
}

.in-cell-grid__sub {
  margin-top: var(--size-3px);
}

.in-cell-grid__full {
  /* Form-like <path> layout with a real label column width. */
  grid-template-columns: minmax(14ch, 16ch) minmax(16ch, 1fr);
}

.in-cell-grid__products {
  display: grid;
  gap: var(--size-2px);
}

.in-cell-grid__product {
  white-space: pre-wrap;
}

.in-cell-grid__byline {
  border-top: var(--size-1px) dashed var(--card-border);
  padding-top: var(--size-6px);
  margin-top: var(--size-3px);
}
/* Three-column audit grid container (Event vs OCR vs Flags) */
.audit-grid-container {
  display: grid;
  /* Prevent extreme squish; allow horizontal scroll in tight containers (wizard pane). */
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: var(--size-12px);
}

.audit-grid-column {
  min-width: 0;
}

/* Name cell — avatar + text stack inside a table name column */
.name-cell__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-0-5px);
  min-width: 0;
  line-height: var(--line-height-tight);
}

/* Staffing cell hierarchy */
.table__staffing-line {
  display: flex;
  align-items: center;
  gap: var(--space-1px);
}

.table__staffing-line--service {
  margin-top: var(--space-1px);
}

.table__staffing-line--role {
  margin-top: var(--space-1px);
}

.table__staffing-line--indent-1 {
  padding-left: var(--space-12px);
}

.table__staffing-line--indent-2 {
  padding-left: var(--space-24px);
}

.table__staffing-line--person {
  gap: var(--space-4px);
}

.table__staffing-line--with-actions {
  gap: var(--space-6px);
}

.table__staffing-name-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}