/*
 * Tables — theme borders/text; framed scrollers; headers aligned with surface tokens.
 */

.table {
  color: var(--text-primary);
  /* Slightly lifted vs page; subtle top edge reads on light theme (no white hairline). */
  background-color: var(--bg-surface);
  box-shadow: inset 0 1px 0 rgba(var(--shadow-key), 0.1);
  /* Framed tables (.table-responsive) own outer corners — local md radius reads as a tighter inner band. */
  border-radius: 0;
}

/* Force all table borders to theme color (Bootstrap defaults to light gray) */
.table,
.table th,
.table td,
.table thead th,
.table tbody td,
.table tbody tr {
  border-color: var(--border-primary) !important;
}

.table thead th {
  /* Elevated band — neutral in dark (avoids heavy green strip on data tables) */
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border-primary);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-ui-sm);
}

.table tbody th,
.table tbody td {
  padding: var(--space-3) var(--space-6);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  vertical-align: middle;
}

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

/* Do not tint generic row hover on section banners — avoids stacking with rgba section fills */
.table tbody tr:hover:not(.requirement-section-row) > th,
.table tbody tr:hover:not(.requirement-section-row) > td {
  background-color: var(--list-row-hover-bg);
}

/*
 * Section rows: opaque fills so scrolling requirement rows never show “double opacity” behind them.
 * Fallback is a solid surface; color-mix keeps the green tint without alpha stacking.
 */
.table .requirement-section-row > th,
.table .requirement-section-row > td {
  color: var(--text-primary) !important;
  border-top: 1px solid var(--border-primary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
  font-weight: 600;
  background: var(--bg-surface) !important;
  background: color-mix(in srgb, var(--bg-surface) 72%, rgb(var(--accent-primary-rgb)) 28%) !important;
}

.table tbody tr.requirement-section-row:hover > th,
.table tbody tr.requirement-section-row:hover > td {
  background: var(--bg-surface) !important;
  background: color-mix(in srgb, var(--bg-surface) 62%, rgb(var(--accent-primary-rgb)) 38%) !important;
}

.table-responsive {
  --table-frame-radius: var(--radius-lg);
  /* Below this width the table scrolls horizontally instead of squeezing columns. */
  --table-scroll-min-width: 36rem;
  border-radius: var(--table-frame-radius);
  /*
   * overflow-x: auto alone promotes overflow-y to auto, which stops border-radius from clipping
   * thead fills on framed tables (e.g. table-responsive.card on the users index).
   */
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) {
  min-width: var(--table-scroll-min-width);
}

/* Same element as .card — match card corner token so thead fill aligns with the frame. */
.table-responsive.card {
  --table-frame-radius: var(--bs-card-border-radius, var(--radius-lg));
  border-radius: var(--table-frame-radius);
}

/*
 * Square <th> backgrounds ignore the scroller’s curve while border-collapse is collapse.
 * Separate + corner radius on corner cells (distribution / RT grids opt out).
 */
.table-responsive > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) {
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

.table-responsive > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) > thead > tr:first-child > :is(th, td) {
  background: var(--bg-elevated);
}

.table-responsive > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) > thead > tr:first-child > :first-child {
  border-top-left-radius: var(--table-frame-radius);
}

.table-responsive > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) > thead > tr:first-child > :last-child {
  border-top-right-radius: var(--table-frame-radius);
}

.table-responsive:not(.card) > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) > tbody > tr:last-child > :first-child {
  border-bottom-left-radius: var(--table-frame-radius);
}

.table-responsive:not(.card) > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) > tbody > tr:last-child > :last-child {
  border-bottom-right-radius: var(--table-frame-radius);
}

.card > .card-body > .table-responsive:last-child > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) > tbody > tr:last-child > :first-child {
  border-bottom-left-radius: var(--table-frame-radius);
}

.card > .card-body > .table-responsive:last-child > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid) > tbody > tr:last-child > :last-child {
  border-bottom-right-radius: var(--table-frame-radius);
}

/* Framed scroller when not using Bootstrap .card on the same element */
.table-responsive:not(.card) {
  border: 1px solid var(--border-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

/* Nested in a card: outer card owns the chrome */
.card .table-responsive {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Tables inside cards — extra horizontal inset vs bare tables */
.card .table thead th,
.card .table tbody th,
.card .table tbody td {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.tabir-distribution-grid th,
.tabir-distribution-grid td {
  min-width: 8rem;
}

/* Partial vmilosti distribution: align type scale / surface with requirement-tracking grids. */
.tabir-distribution-partial-card.card {
  background: var(--bg-elevated);
  min-width: 0;
  font-size: var(--font-base);
  line-height: 1.45;
  overflow-anchor: none;
}

.tabir-distribution-table-shell {
  position: relative;
}

.tabir-distribution-head-inner {
  /* Allow taps on cloned column headers (req ref buttons) while the shell uses pointer-events: none. */
  pointer-events: auto;
}

.tabir-distribution-head-wrap {
  display: none;
  position: fixed;
  z-index: 1020;
  overflow: hidden;
  pointer-events: none;
}

.tabir-distribution-head-wrap.is-pinned {
  display: block;
  filter: drop-shadow(0 0.35rem 0.65rem rgba(var(--shadow-key), 0.18));
}

.tabir-distribution-head-inner {
  will-change: transform;
}

.tabir-distribution-head-wrap .tabir-distribution-grid {
  background: var(--bg-surface);
}

.tabir-distribution-head-wrap .tabir-distribution-grid thead th {
  position: static;
  top: auto;
}

.tabir-distribution-grid .tabir-distribution-sticky-column {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 14rem;
  background: var(--bg-surface);
  box-shadow: 1px 0 0 var(--border-primary);
}

.tabir-distribution-grid thead .tabir-distribution-sticky-column {
  z-index: 3;
}

.tabir-distribution-head-wrap .tabir-distribution-grid thead .tabir-distribution-sticky-column {
  position: sticky;
  left: 0;
  z-index: 4;
}

/* Roster spreadsheet: two name columns stick to the left; second uses measured width of the first */
.tabir-distribution-grid--spreadsheet-roster .tabir-distribution-sticky-column--tier-1 {
  left: 0;
}

.tabir-distribution-grid--spreadsheet-roster .tabir-distribution-sticky-column--tier-2 {
  left: var(--spreadsheet-sticky-name-1-width, 7.5rem);
  z-index: 3;
  box-shadow: 1px 0 0 var(--border-primary);
}

.tabir-distribution-grid--spreadsheet-roster thead .tabir-distribution-sticky-column--tier-2 {
  z-index: 4;
}

.tabir-distribution-head-wrap .tabir-distribution-grid--spreadsheet-roster thead .tabir-distribution-sticky-column--tier-1 {
  left: 0;
  z-index: 4;
}

.tabir-distribution-head-wrap .tabir-distribution-grid--spreadsheet-roster thead .tabir-distribution-sticky-column--tier-2 {
  left: var(--spreadsheet-sticky-name-1-width, 7.5rem);
  z-index: 5;
}

.tabir-distribution-head-wrap .tabir-distribution-grid thead th {
  box-shadow: inset 0 -1px 0 var(--border-primary);
}

/* Top column header: darker accent than tbody group rows so hierarchy reads clearly */
.tabir-distribution-grid > thead > tr > th {
  --tabir-dist-thead-bg: color-mix(in srgb, var(--bg-elevated) 14%, rgb(var(--accent-primary-rgb)) 56%);
  background: var(--tabir-dist-thead-bg) !important;
  color: var(--text-primary);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.tabir-distribution-grid > thead > tr > th:hover {
  background: color-mix(in srgb, var(--bg-elevated) 8%, rgb(var(--accent-primary-rgb)) 62%) !important;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--border-primary) 52%, rgb(var(--accent-primary-rgb)) 48%);
}

.tabir-distribution-grid > thead > tr > th.tabir-distribution-definition-header--ref:hover {
  /* Req-ref cells: avoid stacking <th> hover + <button> hover; keep column tint stable */
  background: var(--tabir-dist-thead-bg) !important;
  box-shadow: inset 0 -1px 0 var(--border-primary);
}

.tabir-distribution-head-wrap .tabir-distribution-grid > thead > tr > th:hover {
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, var(--border-primary) 52%, rgb(var(--accent-primary-rgb)) 48%),
    inset 0 -1px 0 var(--border-primary);
}

.tabir-distribution-head-wrap .tabir-distribution-grid > thead > tr > th.tabir-distribution-definition-header--ref:hover {
  background: var(--tabir-dist-thead-bg) !important;
  box-shadow: inset 0 -1px 0 var(--border-primary);
}

.tabir-distribution-grid .tabir-distribution-definition-header {
  min-width: 7.5rem;
}

.tabir-distribution-grid .tabir-distribution-definition-header-meta {
  padding: 0 var(--space-2) var(--space-2);
  line-height: 1.25;
}

button.tabir-distribution-req-ref-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  margin: 0;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
  background: color-mix(in srgb, transparent 78%, var(--bg-surface) 22%);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

button.tabir-distribution-req-ref-btn .tabir-distribution-req-ref-btn__label {
  text-decoration: none;
}

button.tabir-distribution-req-ref-btn:hover {
  background: color-mix(in srgb, transparent 55%, var(--bg-surface) 45%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-primary) 55%, rgb(var(--accent-primary-rgb)) 45%);
}

button.tabir-distribution-req-ref-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-primary-rgb));
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

/* Req-ref sits on a tinted thead: default button hover mixes in bg-surface (often near-white), which
   flashes during background transition. Keep hover in the same hue lane as --tabir-dist-thead-bg. */
.tabir-distribution-grid thead th.tabir-distribution-definition-header--ref button.tabir-distribution-req-ref-btn {
  background: transparent;
  transition: box-shadow var(--transition-fast);
}

.tabir-distribution-grid thead th.tabir-distribution-definition-header--ref button.tabir-distribution-req-ref-btn:hover {
  background: color-mix(in srgb, var(--tabir-dist-thead-bg) 72%, rgb(var(--shadow-key)) 28%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-primary) 55%, rgb(var(--accent-primary-rgb)) 45%);
}

.tabir-distribution-grid thead th.tabir-distribution-definition-header--ref button.tabir-distribution-req-ref-btn:focus-visible {
  outline-color: rgb(var(--accent-primary-rgb));
}

.tabir-req-detail-dialog::backdrop {
  background: rgba(0, 0, 0, 0.38);
}

.tabir-req-detail-dialog .card {
  min-width: min(36rem, calc(100vw - 2rem));
  max-width: min(40rem, calc(100vw - 2rem));
}

.tabir-distribution-grid th,
.tabir-distribution-grid td {
  min-width: 5rem;
}

.tabir-distribution-grid thead th,
.tabir-distribution-grid tbody th,
.tabir-distribution-grid tbody td {
  padding: var(--space-2) var(--space-3) !important;
}

.tabir-distribution-grid thead th.tabir-distribution-definition-header--ref {
  padding: 0 !important;
  vertical-align: top;
}

.tabir-distribution-grid--compact thead th,
.tabir-distribution-grid--compact tbody th,
.tabir-distribution-grid--compact tbody td {
  padding: var(--space-1) var(--space-2) !important;
}

.tabir-distribution-grid--compact th,
.tabir-distribution-grid--compact td {
  min-width: 4.5rem;
}

.tabir-distribution-grid--compact .tabir-distribution-sticky-column {
  min-width: 11.5rem;
}

.tabir-distribution-grid--compact .tabir-distribution-definition-header {
  min-width: 6.5rem;
}

/* Hurtok group: entire first cell toggles expand/collapse (no nested <button>) */
.tabir-distribution-grid th.tabir-distribution-group-heading-cell {
  cursor: pointer;
  user-select: none;
  text-align: left;
  vertical-align: middle;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.tabir-distribution-grid th.tabir-distribution-group-heading-cell:hover {
  background: color-mix(in srgb, var(--bg-surface) 64%, rgb(var(--accent-primary-rgb)) 36%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-primary) 70%, rgb(var(--accent-primary-rgb)) 30%);
}

.tabir-distribution-grid th.tabir-distribution-group-heading-cell:focus-visible {
  outline: 2px solid rgb(var(--accent-primary-rgb));
  outline-offset: -2px;
}

.tabir-distribution-grid .tabir-distribution-group-heading-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.tabir-distribution-grid .tabir-distribution-group-heading-chevron {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  font-size: 0.7rem;
  line-height: 1.25rem;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
}

.tabir-distribution-grid th.tabir-distribution-group-heading-cell .tabir-distribution-group-meta {
  padding-left: calc(1.25rem + var(--space-2));
  line-height: 1.25;
}

.tabir-distribution-grid--compact .tabir-distribution-group-heading-main {
  margin-bottom: 0.125rem;
}

.tabir-distribution-grid--compact .tabir-distribution-cell-label {
  gap: 0.2rem !important;
  line-height: 1.1;
}

.tabir-distribution-cell-label--partial {
  padding: 0.15rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-surface) 94%, rgb(var(--accent-primary-rgb)) 6%);
  outline: 1px dashed color-mix(in srgb, var(--border-subtle) 80%, rgb(var(--accent-primary-rgb)) 20%);
}

.tabir-distribution-cell[data-completion-state="partial"] {
  opacity: 0.72;
}

.tabir-distribution-grid .tabir-distribution-group-row > th,
.tabir-distribution-grid .tabir-distribution-group-row > td {
  background: color-mix(in srgb, var(--bg-surface) 76%, rgb(var(--accent-primary-rgb)) 24%) !important;
  font-weight: 600;
}

/* Striped tables — stay on-token if used */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: color-mix(in srgb, var(--bg-surface) 88%, var(--bg-elevated) 12%);
  color: var(--text-primary);
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: color-mix(in srgb, var(--bg-surface) 82%, var(--bg-elevated) 18%);
}

/* One primary stretched-link per cell — full tap target (e.g. people directory names). */
.table td.table-cell--cover-link {
  position: relative;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
}

.table td.table-cell--cover-link .table-cell-cover-link__label {
  display: block;
  padding: var(--space-3) var(--space-6);
  color: var(--link-content-color);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.card .table td.table-cell--cover-link .table-cell-cover-link__label {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.table tbody tr:hover > td.table-cell--cover-link .table-cell-cover-link__label,
.table td.table-cell--cover-link:focus-within .table-cell-cover-link__label {
  color: var(--list-row-link-hover-fg);
}

/* Mobile tables */
@media (max-width: 768px) {
  .table {
    font-size: 0.875rem;
  }

  .table thead th,
  .table tbody th,
  .table tbody td {
    padding: var(--space-2) var(--space-3);
  }

  .card .table thead th,
  .card .table tbody th,
  .card .table tbody td {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .card .table td.table-cell--cover-link .table-cell-cover-link__label {
    padding: var(--space-2) var(--space-3);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}