/*
 * 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):not(.tochkuvannya-table):not(.tabir-roster-table):not(.permission-grant-picker__matrix) {
  min-width: var(--table-scroll-min-width);
}

/* Roster/bulava/hurtok accordions: only scroll when columns actually overflow. */
.table-responsive > .tabir-roster-table {
  min-width: 0;
  width: 100%;
}

/* 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):not(.tochkuvannya-table) {
  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):not(.tochkuvannya-table) > thead > tr:first-child > :is(th, td) {
  background: var(--bg-elevated);
}

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

/* Multi-tbody tables (e.g. tabir roster group headings) must not round every section footer. */
.table-responsive:not(.card) > .table:not(.tabir-distribution-grid):not(.requirement-tracking-grid):not(.tochkuvannya-table) > tbody:last-child > 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):not(.tochkuvannya-table) > tbody:last-child > 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):not(.tochkuvannya-table) > tbody:last-child > 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):not(.tochkuvannya-table) > tbody:last-child > 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);
}

/*
 * Bootstrap .rounded on the same node is md; corner cells use --table-frame-radius (lg).
 * Without this, last-row hover highlights look tighter than the outer frame.
 */
.table-responsive.rounded:not(.card) {
  border-radius: var(--table-frame-radius);
}

/* 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;
}

.tabir-distribution-grid {
  border-collapse: separate;
  border-spacing: 0;
  --dist-group-row-bg: color-mix(in srgb, var(--bg-surface) 76%, rgb(var(--accent-primary-rgb)) 24%);
  --dist-group-row-bg-hover: color-mix(in srgb, var(--bg-surface) 70%, rgb(var(--accent-primary-rgb)) 30%);
  --dist-accent-header-bg: color-mix(in srgb, var(--sheet-thead-bg, var(--bg-elevated)) 68%, rgb(var(--accent-primary-rgb)) 32%);
  --dist-accent-column-bg: color-mix(in srgb, var(--bg-surface) 76%, rgb(var(--accent-primary-rgb)) 24%);
  --dist-accent-column-bg-hover: color-mix(in srgb, var(--list-row-hover-bg, var(--bg-surface)) 70%, rgb(var(--accent-primary-rgb)) 30%);
  --dist-recipient-row-bg: color-mix(in srgb, var(--bg-surface) 86%, rgb(var(--accent-primary-rgb)) 14%);
  --dist-recipient-row-bg-hover: color-mix(in srgb, var(--list-row-hover-bg) 82%, rgb(var(--accent-primary-rgb)) 18%);
}

/* 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 {
  /* Percentages must sum to 100% — leftover becomes transparent and sticky headers leak. */
  --sheet-thead-bg: color-mix(in srgb, var(--bg-elevated) 44%, rgb(var(--accent-primary-rgb)) 56%);
  --sheet-sticky-bg: var(--bg-surface);
  --sheet-frame-radius: var(--radius-md);
  --sheet-frame-border: 1px solid var(--border-primary);
  /* Shared sticky name rail (VFV camper + compact requirement matrix). */
  --sheet-name-col-min: 5.5rem;
  --sheet-name-col-max: 8.5rem;
  position: relative;
}

@media (min-width: 992px) {
  .tabir-distribution-table-shell {
    --sheet-name-col-min: 6.5rem;
    --sheet-name-col-max: 11rem;
  }
}

@media (min-width: 1400px) {
  .tabir-distribution-table-shell {
    --sheet-name-col-min: 7rem;
    --sheet-name-col-max: 13rem;
  }
}

/* Shared framed scroller for all sheet_table_shell bodies */
.tabir-distribution-body-scroll {
  overflow-x: auto;
  /* Must be clip (not visible): with overflow-x:auto, visible computes to auto and
     absolutely-positioned cell guts (hidden selects, overlays) create a 1px inner scroll. */
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
  border: var(--sheet-frame-border);
  border-radius: var(--sheet-frame-radius);
  background: var(--bg-surface);
}

.tabir-distribution-body-scroll.table-responsive {
  --table-frame-radius: var(--sheet-frame-radius);
  border-radius: var(--sheet-frame-radius);
  overflow-y: clip;
}

/* Page-tall sheet workspace + sticky bottom action dock */
.sheet-workspace {
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

.sheet-action-dock {
  --sheet-action-dock-bottom: 0px;
  position: sticky;
  bottom: var(--sheet-action-dock-bottom);
  z-index: 1010; /* below .bottom-navbar (1020) so nav stays tappable */
  display: flex;
  justify-content: stretch;
  margin-top: var(--space-3);
  pointer-events: none;
}

/* Match bottom-navbar visibility: clear the tab bar instead of covering it. */
@media (max-width: 991.98px) {
  .sheet-action-dock {
    --sheet-action-dock-bottom: calc(var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px));
  }

  .sheet-workspace {
    padding-bottom: calc(4.25rem + var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px));
  }
}

body.workspace-bottom-nav-active .sheet-action-dock {
  --sheet-action-dock-bottom: calc(var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px));
}

body.workspace-bottom-nav-active .sheet-workspace {
  padding-bottom: calc(4.25rem + var(--bottom-nav-clearance) + env(safe-area-inset-bottom, 0px));
}

.sheet-action-dock__bar {
  pointer-events: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  min-height: 2.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  box-shadow: 0 -4px 18px rgba(var(--shadow-key), 0.18);
  backdrop-filter: blur(8px);
}

.sheet-action-dock--status-only {
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.sheet-action-dock--status-only.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sheet-action-dock--hide-when-primary-visible {
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.sheet-action-dock--hide-when-primary-visible.is-primary-visible {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sheet-action-dock--status-only .sheet-action-dock__bar {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  min-height: 0;
}

.sheet-action-dock__start {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.sheet-action-dock__summary {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sheet-action-dock__status:empty {
  display: none;
}

.sheet-action-dock__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.sheet-action-dock__save-status {
  white-space: nowrap;
  margin-right: var(--space-1);
}

.sheet-action-dock__save-status[hidden] {
  display: none !important;
}

.sheet-action-dock__outbox-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-right: var(--space-1);
  max-width: 14rem;
  line-height: 1.2;
}

.sheet-action-dock__outbox-status[hidden] {
  display: none !important;
}

.sheet-action-dock__outbox-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  white-space: nowrap;
}

.sheet-action-dock__outbox-link:hover,
.sheet-action-dock__outbox-link:focus-visible {
  color: var(--bs-body-color, inherit);
}

.sheet-action-dock__outbox-retry {
  margin-left: 0.25rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Keep dock actions compact even if a caller forgets btn-sm */
.sheet-action-dock__actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.tabir-vfv-action-dock .sheet-action-dock__start {
  flex: 1 1 auto;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-3);
}

.tabir-registration-action-dock .sheet-action-dock__start {
  flex: 1 1 auto;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-3);
}

.tabir-registration-action-dock .sheet-action-dock__summary {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.tabir-registration-action-dock .sheet-action-dock__status {
  flex: 0 0 auto;
  margin-left: auto;
}

.tabir-registration-hide-apply {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  flex: 0 0 auto;
}

.tabir-registration-hide-apply.d-none {
  display: none !important;
}

.tabir-registration-hide-apply__icon {
  display: block;
}

.tabir-vfv-dock-toggles,
.tabir-vfv-display-toggles {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  min-width: 0;
}

.tabir-vfv-action-dock .tabir-vfv-display-toggles {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabir-vfv-action-dock .tabir-vfv-display-toggles::-webkit-scrollbar {
  display: none;
}

.tabir-vfv-action-dock .tabir-vfv-display-toggles .switch-field--compact {
  flex: 0 0 auto;
}

.tabir-vfv-action-dock .tabir-vfv-display-toggles .switch-field--compact .switch-field__label {
  font-size: 0.8125rem;
}

.tabir-vfv-display-toggles--settings {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
}

.tabir-vfv-display-toggles--settings .switch-field {
  width: 100%;
  justify-content: space-between;
  gap: var(--space-3);
}

.tabir-vfv-action-dock .sheet-action-dock__status {
  flex: 0 0 auto;
  margin-left: auto;
}

.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;
  background-color: var(--sheet-thead-bg, var(--bg-surface));
}

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

.tabir-distribution-head-inner {
  will-change: margin-left;
  background-color: var(--bg-surface);
}

.tabir-distribution-head-wrap.is-visual-only .tabir-distribution-head-inner {
  pointer-events: none;
}

/* Ref buttons must stay tappable when the rest of the pinned clone is visual-only. */
.tabir-distribution-head-wrap.is-visual-only .tabir-distribution-req-ref-btn,
.tabir-distribution-head-wrap.is-visual-only .tabir-distribution-vmilist-ref-btn,
.tabir-distribution-head-wrap.is-visual-only .tabir-vfv-standards-ref-btn {
  pointer-events: auto;
}

.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 tbody .tabir-distribution-sticky-column {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 14rem;
  background-color: var(--sheet-sticky-bg, var(--bg-surface)) !important;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 9999px var(--sheet-sticky-bg, var(--bg-surface)),
    1px 0 0 var(--border-primary),
    6px 0 10px -6px color-mix(in srgb, rgb(var(--shadow-key)) 14%, transparent);
}

.tabir-distribution-grid thead .tabir-distribution-sticky-column {
  position: sticky;
  left: 0;
  z-index: 50;
  min-width: 14rem;
  background-color: var(--tabir-dist-thead-bg) !important;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 9999px var(--tabir-dist-thead-bg),
    1px 0 0 var(--border-primary),
    8px 0 0 -4px var(--tabir-dist-thead-bg);
}

.tabir-distribution-grid tbody tr:hover:not(.tabir-distribution-group-row) > .tabir-distribution-sticky-column {
  background-color: var(--list-row-hover-bg) !important;
  box-shadow:
    inset 0 0 0 9999px var(--list-row-hover-bg),
    1px 0 0 var(--border-primary),
    6px 0 10px -6px color-mix(in srgb, rgb(var(--shadow-key)) 14%, transparent);
}

.tabir-distribution-grid tbody tr.completion-matrix-recipient-row > :is(th, td) {
  background: var(--dist-recipient-row-bg) !important;
}

.tabir-distribution-grid tbody tr.completion-matrix-recipient-row > .tabir-distribution-sticky-column {
  background-color: var(--dist-recipient-row-bg) !important;
  box-shadow:
    inset 0 0 0 9999px var(--dist-recipient-row-bg),
    1px 0 0 var(--border-primary),
    6px 0 10px -6px color-mix(in srgb, rgb(var(--shadow-key)) 14%, transparent);
}

.tabir-distribution-grid tbody tr.completion-matrix-recipient-row:hover > :is(th, td) {
  background: var(--dist-recipient-row-bg-hover) !important;
}

.tabir-distribution-grid tbody tr.completion-matrix-recipient-row:hover > .tabir-distribution-sticky-column {
  background-color: var(--dist-recipient-row-bg-hover) !important;
  box-shadow:
    inset 0 0 0 9999px var(--dist-recipient-row-bg-hover),
    1px 0 0 var(--border-primary),
    6px 0 10px -6px color-mix(in srgb, rgb(var(--shadow-key)) 14%, transparent);
}

.tabir-distribution-grid tbody tr.tabir-distribution-group-row > .tabir-distribution-sticky-column {
  /* Sticky paint otherwise covers the group-row tint — keep zaloha/hurtok names highlighted. */
  background-color: var(--dist-group-row-bg) !important;
  box-shadow:
    inset 0 0 0 9999px var(--dist-group-row-bg),
    1px 0 0 var(--border-primary),
    6px 0 10px -6px color-mix(in srgb, rgb(var(--shadow-key)) 14%, transparent);
}

.tabir-distribution-grid tbody tr.tabir-distribution-group-row:hover > .tabir-distribution-sticky-column {
  background: var(--dist-group-row-bg-hover) !important;
  box-shadow:
    inset 0 0 0 9999px var(--dist-group-row-bg-hover),
    1px 0 0 var(--border-primary),
    6px 0 10px -6px color-mix(in srgb, rgb(var(--shadow-key)) 14%, transparent);
}

.tabir-distribution-head-wrap .tabir-distribution-grid thead .tabir-distribution-sticky-column {
  position: sticky;
  left: 0;
  z-index: 52;
  background-color: var(--sheet-thead-bg, var(--tabir-dist-thead-bg)) !important;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 9999px var(--sheet-thead-bg, var(--tabir-dist-thead-bg)),
    1px 0 0 var(--border-primary),
    8px 0 0 -4px var(--sheet-thead-bg, var(--tabir-dist-thead-bg));
}

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

.tabir-distribution-head-wrap .tabir-distribution-grid thead th:not(.tabir-distribution-sticky-column) {
  position: relative;
  z-index: 0;
}

/* Top column header: shared sheet accent across all dense sheets */
.tabir-distribution-grid > thead > tr > th,
.tabir-vfv-grid__table > thead > tr > th,
.tabir-roster-sheet-grid > thead > tr > th,
.tochkuvannya-table > thead > tr > th {
  --tabir-dist-thead-bg: var(--sheet-thead-bg);
  background: var(--sheet-thead-bg) !important;
  color: var(--text-primary);
}

/* Scrolling header cells must paint beneath the sticky corner (Member) column */
.tabir-distribution-grid > thead > tr > th:not(.tabir-distribution-sticky-column) {
  position: relative;
  z-index: 0;
}

.tabir-distribution-grid > thead > tr > th.tabir-distribution-sticky-column[scope="col"] {
  padding: 0 !important;
  vertical-align: middle;
}

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

/* Column headers: shared label block so corner, vmilist, and req-ref cells align on one baseline */
.tabir-distribution-grid > thead > tr > th.tabir-distribution-sticky-column[scope="col"],
.tabir-distribution-grid > thead > tr > th.tabir-distribution-vmilist-column-header,
.tabir-distribution-grid > thead > tr > th.tabir-distribution-section-column-header,
.tabir-distribution-grid > thead > tr > th.tabir-distribution-definition-header--ref {
  padding: 0 !important;
  vertical-align: middle;
}

/* Green accent on section/vmilist/parent headers and matching body columns. */
.tabir-distribution-grid > thead > tr > th.tabir-distribution-accent-column {
  background: var(--dist-accent-header-bg) !important;
}

.tabir-distribution-grid > tbody > tr > td.tabir-distribution-accent-column {
  background: var(--dist-accent-column-bg);
}

.tabir-distribution-grid > tbody > tr:hover:not(.tabir-distribution-group-row) > td.tabir-distribution-accent-column {
  background: var(--dist-accent-column-bg-hover);
}

.tabir-distribution-grid > tbody > tr.tabir-distribution-group-row > td.tabir-distribution-accent-column {
  background: var(--dist-group-row-bg-hover);
}

/* Hairline after the last requirement in a multi-row section (3 … 3.7 │ 4) */
.tabir-distribution-grid > thead > tr > th.tabir-distribution-section-end,
.tabir-distribution-grid > tbody > tr > td.tabir-distribution-section-end {
  box-shadow: inset -2px 0 0 var(--border-secondary);
}

.tabir-distribution-column-header-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  box-sizing: border-box;
  line-height: 1.25;
}

.tabir-distribution-grid > thead > tr > th.tabir-distribution-sticky-column[scope="col"] .tabir-distribution-column-header-label {
  justify-content: flex-start;
}

.tabir-distribution-grid--compact .tabir-distribution-column-header-label {
  min-height: 2rem;
  padding: var(--space-1) var(--space-2);
}

.tabir-distribution-grid--compact thead th.tabir-distribution-definition-header--ref button.tabir-distribution-req-ref-btn {
  min-height: 2rem;
}

.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;
  gap: 0.35rem;
  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;
}

/* Requirement codes stay centered with checkbox columns; (?) sits outside that box. */
button.tabir-distribution-req-ref-btn .tabir-distribution-req-ref-btn__center {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.tabir-distribution-req-ref-btn .tabir-distribution-req-ref-btn__center .field-hint--mark {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 0.4rem;
  transform: translateY(-50%);
}

button.tabir-distribution-req-ref-btn .field-hint--mark {
  opacity: 0.72;
}

button.tabir-distribution-req-ref-btn:hover .field-hint--mark,
button.tabir-distribution-req-ref-btn:focus-visible .field-hint--mark {
  opacity: 1;
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

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 on tinted thead: opaque fill so horizontal scroll does not show through sticky corner */
.tabir-distribution-grid thead th.tabir-distribution-definition-header--ref button.tabir-distribution-req-ref-btn {
  background-color: var(--tabir-dist-thead-bg);
  transition: box-shadow var(--transition-fast);
  min-height: 2.75rem;
  box-sizing: border-box;
}

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

.tabir-distribution-grid--pinned thead th.tabir-distribution-definition-header--ref button.tabir-distribution-req-ref-btn:hover {
  background-color: var(--tabir-dist-thead-bg);
  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));
}

/*
 * Native <dialog> sheets (requirement/vmilist detail, VFV peeks, person report).
 * Prefer % over 100vw so scrollbar gutters don't make the sheet wider than the
 * viewport and invite horizontal scrolling to "see the corners".
 */
.tabir-req-detail-dialog,
.tabir-vfv-sheet-dialog {
  margin: auto;
  width: min(40rem, calc(100% - 2rem));
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
}

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

.tabir-req-detail-dialog .card,
.tabir-vfv-sheet-dialog .card {
  width: 100%;
  max-width: 100%;
  max-height: min(85vh, 40rem);
  overflow: auto;
  box-sizing: border-box;
}

.tabir-req-detail-dialog .card-header > :first-child,
.tabir-vfv-sheet-dialog .card-header > :first-child {
  min-width: 0;
}

.tabir-req-detail-vmilist-list__item + .tabir-req-detail-vmilist-list__item {
  margin-top: var(--space-3);
}

.tabir-req-detail-dialog [data-tabir-distribution-req-detail-target="body"] {
  white-space: pre-wrap;
}

.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: middle;
}

.tabir-distribution-grid--compact button.tabir-distribution-req-ref-btn {
  padding: var(--space-1) var(--space-2);
}

.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;
}

/* Compact sticky name rail — same tokens as VFV camper (.tabir-vfv-grid__camper).
   Include tbody/thead so this beats the base .tabir-distribution-grid tbody|thead sticky min-width: 14rem. */
.tabir-distribution-grid--compact tbody .tabir-distribution-sticky-column,
.tabir-distribution-grid--compact thead .tabir-distribution-sticky-column {
  width: 1%;
  min-width: var(--sheet-name-col-min);
  max-width: var(--sheet-name-col-max);
  overflow: hidden;
  white-space: nowrap;
}

.tabir-distribution-grid--compact tbody tr:not(.tabir-distribution-group-row) > .tabir-distribution-sticky-column {
  padding: 0;
  height: 1px; /* row height wins; person button fills the cell */
}

.tabir-distribution-grid--compact tr.tabir-distribution-group-row > .tabir-distribution-sticky-column {
  white-space: normal;
  max-width: var(--sheet-name-col-max);
}

.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: var(--dist-group-row-bg) !important;
  font-weight: 600;
}

.treasury-ledger-grid .treasury-ledger-input {
  min-width: 5.5rem;
}

.treasury-ledger-grid .treasury-ledger-add-row > :is(th, td) {
  background: color-mix(in srgb, var(--bg-surface) 92%, rgb(var(--accent-primary-rgb)) 8%);
  border-top: 2px solid var(--border-primary);
}

/* 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);
}

.tabir-vfv-grid .tabir-vfv-grid__table {
  /* Intrinsic sheet width — avoids desktop stretching that left inputs looking inset. */
  width: max-content;
  min-width: 38rem;
  margin-bottom: 0;
  /* Shared body-row target: score cell + choice/date/reviewer chrome. */
  --vfv-row-min-height: 2.85rem;
}

.tabir-vfv-grid thead th {
  cursor: default;
  line-height: 1.1;
  white-space: normal;
  vertical-align: middle;
}

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

.tabir-distribution-head-wrap .tabir-vfv-grid__table thead .tabir-vfv-grid__camper {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--sheet-thead-bg) !important;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 9999px var(--sheet-thead-bg),
    1px 0 0 var(--border-primary),
    8px 0 0 -4px var(--sheet-thead-bg);
}

.tabir-vfv-grid td {
  padding: 0;
  width: 5.75rem;
  min-width: 5.75rem;
}

/* Time columns need room for mm:ss (and occasional h:mm:ss) with tabular nums + date. */
.tabir-vfv-grid th.tabir-vfv-grid__event-header,
.tabir-vfv-grid td.tabir-vfv-grid__event {
  width: 6.75rem;
  min-width: 6.75rem;
}

@media (min-width: 992px) {
  .tabir-vfv-grid th.tabir-vfv-grid__event-header,
  .tabir-vfv-grid td.tabir-vfv-grid__event {
    width: 7.5rem;
    min-width: 7.5rem;
  }
}

.tabir-vfv-grid th.tabir-vfv-grid__gender-col,
.tabir-vfv-grid td.tabir-vfv-grid__gender-col {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 6.25rem;
}

.tabir-vfv-grid th.tabir-vfv-grid__proba,
.tabir-vfv-grid td.tabir-vfv-grid__proba {
  width: 7.5rem;
  min-width: 7.5rem;
  max-width: 9rem;
}

.tabir-vfv-grid th.tabir-vfv-grid__target,
.tabir-vfv-grid td.tabir-vfv-grid__target {
  width: 4.75rem;
  min-width: 4.75rem;
  max-width: 5.5rem;
}

.tabir-vfv-grid th.tabir-vfv-grid__total-col,
.tabir-vfv-grid td.tabir-vfv-grid__total-col {
  width: 4.5rem;
  min-width: 4.5rem;
}

.tabir-vfv-grid th.tabir-vfv-grid__override-col,
.tabir-vfv-grid td.tabir-vfv-grid__override-col {
  width: 8.5rem;
  min-width: 7.5rem;
  max-width: 11rem;
}

.tabir-vfv-grid td.tabir-vfv-grid__override-col {
  padding: 0 !important;
  vertical-align: stretch;
  background: color-mix(in srgb, var(--bg-elevated) 40%, var(--bg-surface) 60%);
}

.tabir-vfv-grid tbody tr:hover > td.tabir-vfv-grid__override-col {
  background: color-mix(in srgb, var(--list-row-hover-bg) 75%, var(--bg-elevated) 25%);
}

.tabir-vfv-grid td.tabir-vfv-grid__override-col:last-child {
  width: 10.5rem;
  min-width: 9rem;
  max-width: 14rem;
}

.tabir-vfv-grid__override-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--vfv-row-min-height, 2.85rem);
  height: 100%;
}

.tabir-vfv-grid__override-input {
  width: 100%;
  min-width: 0;
  min-height: var(--vfv-row-min-height, 2.85rem);
  height: 100%;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
}

.tabir-vfv-grid__override-input::placeholder {
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.55;
}

.tabir-vfv-grid__override-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.55;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.tabir-vfv-grid__override-cell.is-blank:not(:focus-within) .tabir-vfv-grid__override-fallback {
  display: flex;
}

.tabir-vfv-grid__event-date {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.tabir-vfv-grid__event-date-stamp,
.tabir-vfv-grid__event-date-fallback,
.tabir-vfv-grid__event-reviewer-stamp {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.78;
  white-space: nowrap;
}

button.tabir-vfv-grid__event-date-stamp,
button.tabir-vfv-grid__event-reviewer-stamp {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  cursor: pointer;
  max-width: 100%;
}

button.tabir-vfv-grid__event-date-stamp:focus-visible,
button.tabir-vfv-grid__event-reviewer-stamp:focus-visible {
  outline: 1px solid var(--accent-primary);
  outline-offset: 1px;
  border-radius: 2px;
  opacity: 1;
}

.tabir-vfv-grid__event-date.is-blank .tabir-vfv-grid__event-date-stamp {
  color: transparent;
  min-width: 2.2rem;
  min-height: 0.7rem;
}

.tabir-vfv-grid__event-date-fallback {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0.5;
  pointer-events: none;
  text-align: right;
}

.tabir-vfv-grid__event-date.is-blank .tabir-vfv-grid__event-date-fallback {
  display: block;
}

.tabir-vfv-grid__event-reviewer {
  min-width: 0;
  max-width: 100%;
}

.tabir-vfv-grid__event-reviewer.is-blank {
  display: none;
}

.tabir-vfv-grid__event-reviewer-stamp {
  max-width: 5.5rem;
}

.tabir-vfv-grid .form-control.tabir-vfv-grid__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 1.6rem;
  height: 1.6rem;
  padding: 0 0.2rem;
  font-size: var(--font-ui-sm);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.tabir-vfv-grid__event {
  vertical-align: middle;
  padding: 0.15rem 0.12rem 0.06rem !important;
}

.tabir-vfv-grid__event-inner {
  position: relative;
  /* Keep score/date stacking local so they cannot paint over the sticky camper rail. */
  isolation: isolate;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--vfv-row-min-height, 2.85rem);
}

.tabir-vfv-grid__event .form-control.tabir-vfv-grid__input {
  display: block;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--vfv-row-min-height, 2.85rem);
  height: var(--vfv-row-min-height, 2.85rem);
  padding: 0 0.2rem 0.05rem;
  background: transparent;
  font-weight: 600;
  font-size: 1rem;
  line-height: 2.65rem;
  text-align: center;
  /* Don't create a nested scrollport for slightly-wide values. */
  overflow-x: hidden;
  scrollbar-width: none;
}

.tabir-vfv-grid__event .form-control.tabir-vfv-grid__input::-webkit-scrollbar {
  display: none;
}

/* Fixed corner chips — never reflow the centered result. */
.tabir-vfv-grid__event-meta {
  position: absolute;
  left: 0.08rem;
  right: 0.08rem;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.25rem;
  pointer-events: none;
}

.tabir-vfv-grid__event-meta-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  min-width: 0;
  max-width: 100%;
  pointer-events: auto;
}

.tabir-vfv-grid__event-date {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.tabir-vfv-grid__points {
  flex: 0 0 auto;
  display: block;
  margin: 0;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.78;
  text-align: right;
  pointer-events: none;
}

.tabir-vfv-grid__points--empty {
  opacity: 0;
}

.tabir-vfv-grid__total--hint {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--warning, #b78103);
}

.tabir-vfv-grid__event.vfv-score--below .tabir-vfv-grid__points:not(.tabir-vfv-grid__points--empty) {
  color: var(--danger-fg-strong);
  font-weight: 600;
  opacity: 0.95;
}

.tabir-vfv-grid--hide-date-columns [data-vfv-date-column] {
  display: none;
}

.tabir-vfv-grid--hide-reviewers [data-vfv-reviewer-column] {
  display: none;
}

.tabir-vfv-grid--hide-camper-info [data-vfv-camper-info-column] {
  display: none;
}

.tabir-vfv-grid th.tabir-vfv-grid__date-col,
.tabir-vfv-grid td.tabir-vfv-grid__date-col {
  width: 4.25rem;
  min-width: 4.25rem;
  max-width: 5rem;
}

.tabir-vfv-grid th.tabir-vfv-grid__date-col {
  padding: 0.3rem 0.2rem !important;
  font-size: 0.68rem;
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  white-space: normal;
}

.tabir-vfv-grid td.tabir-vfv-grid__date-col {
  padding: 0 !important;
  vertical-align: stretch;
  background: color-mix(in srgb, var(--bg-elevated) 40%, var(--bg-surface) 60%);
}

.tabir-vfv-grid tbody tr:hover > td.tabir-vfv-grid__date-col {
  background: color-mix(in srgb, var(--list-row-hover-bg) 75%, var(--bg-elevated) 25%);
}

.tabir-vfv-grid__date-col-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--vfv-row-min-height, 2.85rem);
}

.tabir-vfv-grid__date-col-label {
  position: relative;
  z-index: 0;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

.tabir-vfv-grid td.tabir-vfv-grid__date-col.is-blank .tabir-vfv-grid__date-col-label {
  opacity: 0.45;
  font-weight: 500;
}

.tabir-vfv-grid__date-col-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  font-size: 1rem; /* keep native picker usable on mobile */
}

.tabir-vfv-grid__date-col-inner:hover,
.tabir-vfv-grid__date-col-inner:focus-within {
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.tabir-vfv-grid__date-col-inner:focus-within {
  outline: 2px solid rgb(var(--accent-primary-rgb));
  outline-offset: -2px;
}

.tabir-vfv-grid__date-col-inner:hover .tabir-vfv-grid__date-col-label,
.tabir-vfv-grid__date-col-inner:focus-within .tabir-vfv-grid__date-col-label {
  color: var(--text-primary);
}

.tabir-vfv-grid th.tabir-vfv-grid__reviewer-col,
.tabir-vfv-grid th.tabir-vfv-grid__gender-col,
.tabir-vfv-grid th.tabir-vfv-grid__proba,
.tabir-vfv-grid th.tabir-vfv-grid__target,
.tabir-vfv-grid th.tabir-vfv-grid__total-col,
.tabir-vfv-grid th.tabir-vfv-grid__override-col {
  padding: 0.3rem 0.25rem !important;
  font-size: 0.68rem;
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  white-space: normal;
}

.tabir-vfv-grid th.tabir-vfv-grid__reviewer-col,
.tabir-vfv-grid td.tabir-vfv-grid__reviewer-col {
  width: 5.75rem;
  min-width: 5.75rem;
  max-width: 6.5rem;
}

.tabir-vfv-grid td.tabir-vfv-grid__reviewer-col,
.tabir-vfv-grid td.tabir-vfv-grid__gender-col,
.tabir-vfv-grid td.tabir-vfv-grid__proba {
  position: relative;
  padding: 0 !important;
  vertical-align: stretch;
  background: color-mix(in srgb, var(--bg-elevated) 55%, var(--bg-surface) 45%);
}

.tabir-vfv-grid td.tabir-vfv-grid__target,
.tabir-vfv-grid td.tabir-vfv-grid__total-col {
  position: relative;
  padding: 0 !important;
  vertical-align: stretch;
}

.tabir-vfv-grid tbody tr:hover > td.tabir-vfv-grid__reviewer-col,
.tabir-vfv-grid tbody tr:hover > td.tabir-vfv-grid__gender-col,
.tabir-vfv-grid tbody tr:hover > td.tabir-vfv-grid__proba {
  background: color-mix(in srgb, var(--list-row-hover-bg) 70%, var(--bg-elevated) 30%);
}

/* Soft read-only wash for target (and similar); not total (score bands) or editable chrome. */
.tabir-vfv-grid td.tabir-vfv-grid__derived:not(.tabir-vfv-grid__total-col):not(.tabir-vfv-grid__gender-col):not(.tabir-vfv-grid__proba) {
  background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.tabir-vfv-grid__derived:not(.tabir-vfv-grid__total-col):not(.tabir-vfv-grid__gender-col):not(.tabir-vfv-grid__proba) {
  background: color-mix(in srgb, var(--list-row-hover-bg) 55%, var(--bg-surface) 45%);
}

button.tabir-vfv-grid__reviewer-btn,
button.tabir-vfv-grid__choice-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--vfv-row-min-height, 2.85rem);
  margin: 0;
  padding: 0.2rem 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
  font: inherit;
}

button.tabir-vfv-grid__reviewer-btn:hover,
button.tabir-vfv-grid__reviewer-btn:focus-visible,
button.tabir-vfv-grid__choice-btn:hover,
button.tabir-vfv-grid__choice-btn:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

button.tabir-vfv-grid__reviewer-btn:focus-visible,
button.tabir-vfv-grid__choice-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-primary-rgb));
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.tabir-vfv-grid__reviewer-display,
.tabir-vfv-grid__choice-display,
.tabir-vfv-grid__choice-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
  width: 100%;
  line-height: 1.1;
}

.tabir-vfv-grid__choice-static {
  min-height: var(--vfv-row-min-height, 2.85rem);
  padding: 0.2rem 0.25rem;
  box-sizing: border-box;
}

.tabir-vfv-grid__reviewer-first,
.tabir-vfv-grid__reviewer-last,
.tabir-vfv-grid__choice-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 600;
}

.tabir-vfv-grid__reviewer-last {
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.9;
}

.tabir-vfv-grid__total-value {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tabir-vfv-grid__reviewer-placeholder,
.tabir-vfv-grid__choice-placeholder {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.55;
}

.tabir-vfv-grid td.tabir-vfv-grid__reviewer-col.is-blank .tabir-vfv-grid__reviewer-btn,
.tabir-vfv-grid td.is-blank .tabir-vfv-grid__choice-btn {
  color: var(--text-muted);
}

.tabir-vfv-grid__choice-select {
  /* Keep in-DOM for persistence/tests, but never expand the sheet scroller. */
  position: absolute !important;
  left: 0;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.tabir-vfv-choice-menu,
.tabir-vfv-reviewer-menu {
  z-index: 1080;
  max-height: min(18rem, calc(100vh - 1.5rem));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #d8dde3) 80%, transparent);
  background: var(--bg-surface, #fff);
  box-shadow: var(--shadow-dropdown);
}

.tabir-vfv-choice-menu[hidden],
.tabir-vfv-reviewer-menu[hidden] {
  display: none !important;
}

.tabir-vfv-choice-menu__option,
.tabir-vfv-reviewer-menu__option {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.tabir-vfv-choice-menu__option:hover,
.tabir-vfv-choice-menu__option:focus-visible,
.tabir-vfv-reviewer-menu__option:hover,
.tabir-vfv-reviewer-menu__option:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  outline: none;
}

.tabir-vfv-choice-menu__option.is-selected,
.tabir-vfv-reviewer-menu__option.is-selected {
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

.tabir-vfv-choice-menu__option-label,
.tabir-vfv-reviewer-menu__option-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 500;
}

.tabir-vfv-reviewer-menu__other {
  padding: 0.25rem 0.3rem 0.35rem;
}

.tabir-vfv-reviewer-menu__other-input {
  width: 100%;
}

.tabir-vfv-event-popover {
  z-index: 1080;
  width: min(14rem, calc(100vw - 1rem));
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #d8dde3) 80%, transparent);
  background: var(--bg-surface, #fff);
  box-shadow: var(--shadow-dropdown);
}

.tabir-vfv-event-popover[hidden] {
  display: none !important;
}

.tabir-vfv-grid__input:focus {
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-surface));
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

.tabir-vfv-grid__input--invalid,
.tabir-vfv-grid__input--invalid:focus {
  background: color-mix(in srgb, var(--danger-fg) 12%, var(--bg-surface));
  outline: 2px solid var(--danger-fg);
  outline-offset: -2px;
}

.tabir-vfv-grid th.tabir-vfv-grid__event-header {
  padding: 0 !important;
  vertical-align: middle;
  height: 1px; /* row height wins; button height:100% fills the cell */
}

button.tabir-vfv-standards-ref-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 2.5rem;
  padding: 0.35rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.15;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--transition-fast);
}

button.tabir-vfv-standards-ref-btn .tabir-vfv-standards-ref-btn__label {
  text-decoration: none;
}

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

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

.tabir-vfv-refs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-primary);
}

.tabir-vfv-refs__label {
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, var(--bs-secondary-color));
}

.tabir-vfv-refs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabir-vfv-refs__link,
button.tabir-vfv-refs__link.tabir-vfv-standards-ref-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--accent-primary);
  text-align: left;
  text-decoration: none;
  text-underline-offset: 0.15em;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.tabir-vfv-refs__link:hover,
button.tabir-vfv-refs__link.tabir-vfv-standards-ref-btn:hover {
  box-shadow: none;
  color: var(--accent-primary-hover);
  text-decoration: underline;
}

.tabir-vfv-refs__link:focus-visible,
button.tabir-vfv-refs__link.tabir-vfv-standards-ref-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-primary-rgb));
  outline-offset: 2px;
  z-index: auto;
  position: static;
}

.tabir-vfv-sheet-pill.active {
  color: #fff;
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.tabir-vfv-standards-table {
  width: auto;
  margin-inline: auto;
  font-variant-numeric: tabular-nums;
}

.tabir-vfv-standards-table th,
.tabir-vfv-standards-table td {
  width: 1%;
  white-space: nowrap;
  padding-inline: 0.75rem;
}

.tabir-vfv-person-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.tabir-vfv-person-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 4.5rem;
}

.tabir-vfv-person-meta__label {
  font-size: 0.75rem;
}

.tabir-vfv-person-report {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tabir-vfv-person-report__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.15rem 0.75rem;
  font-size: 0.9rem;
}

.tabir-vfv-person-report__label {
  color: var(--text-muted);
  flex: 1 1 auto;
  min-width: 0;
}

.tabir-vfv-person-report__value {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.tabir-vfv-person-report__note {
  flex: 1 0 100%;
  padding-left: 0.75rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tabir-vfv-grid td.vfv-score--below {
  color: var(--danger-fg-strong);
  background: color-mix(in srgb, var(--danger-fg) 26%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--75 {
  background: color-mix(in srgb, var(--danger-fg) 18%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--80 {
  background: color-mix(in srgb, var(--danger-fg) 12%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--85 {
  background: color-mix(in srgb, var(--warning) 15%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--90 {
  background: color-mix(in srgb, var(--warning) 11%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--95 {
  background: color-mix(in srgb, var(--success) 7%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--100 {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--105 {
  background: color-mix(in srgb, var(--success) 14%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--110 {
  background: color-mix(in srgb, var(--success) 18%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--115 {
  background: color-mix(in srgb, var(--success) 22%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--120 {
  background: color-mix(in srgb, var(--success) 27%, var(--bg-surface));
}

.tabir-vfv-grid td.vfv-score--125 {
  background: color-mix(in srgb, var(--success) 32%, var(--bg-surface));
}

/* Row hover must not wipe score tints — deepen the band a notch instead. */
.tabir-vfv-grid tbody tr:hover > td.vfv-score--below {
  color: var(--danger-fg-strong);
  background: color-mix(in srgb, var(--danger-fg) 34%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--75 {
  background: color-mix(in srgb, var(--danger-fg) 26%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--80 {
  background: color-mix(in srgb, var(--danger-fg) 20%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--85 {
  background: color-mix(in srgb, var(--warning) 22%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--90 {
  background: color-mix(in srgb, var(--warning) 18%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--95 {
  background: color-mix(in srgb, var(--success) 14%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--100 {
  background: color-mix(in srgb, var(--success) 17%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--105 {
  background: color-mix(in srgb, var(--success) 21%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--110 {
  background: color-mix(in srgb, var(--success) 25%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--115 {
  background: color-mix(in srgb, var(--success) 29%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--120 {
  background: color-mix(in srgb, var(--success) 34%, var(--bg-surface));
}

.tabir-vfv-grid tbody tr:hover > td.vfv-score--125 {
  background: color-mix(in srgb, var(--success) 39%, var(--bg-surface));
}

.tabir-vfv-grid__input[type="number"] {
  appearance: textfield;
}

.tabir-vfv-grid__input[type="number"]::-webkit-inner-spin-button,
.tabir-vfv-grid__input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.tabir-vfv-grid .tabir-vfv-grid__camper {
  position: sticky;
  left: 0;
  /* Above event cells (inputs/date chips) while scrolling horizontally. */
  z-index: 4;
  width: 1%;
  min-width: var(--sheet-name-col-min);
  max-width: var(--sheet-name-col-max);
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--sheet-sticky-bg, var(--bg-surface)) !important;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 9999px var(--sheet-sticky-bg, var(--bg-surface)),
    1px 0 0 var(--border-primary),
    6px 0 10px -6px color-mix(in srgb, rgb(var(--shadow-key)) 14%, transparent);
}

.tabir-vfv-grid tbody .tabir-vfv-grid__camper {
  padding: 0;
  height: 1px; /* row height wins; person button fills the cell */
}

.tabir-vfv-grid thead .tabir-vfv-grid__camper {
  z-index: 5;
  background-color: var(--sheet-thead-bg) !important;
  box-shadow:
    inset 0 0 0 9999px var(--sheet-thead-bg),
    1px 0 0 var(--border-primary),
    8px 0 0 -4px var(--sheet-thead-bg);
}

.tabir-vfv-grid .tabir-vfv-grid__camper a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

button.tabir-vfv-person-btn,
button.completion-matrix-person-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  margin: 0;
  padding: 0.25rem 0.5rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-align: start;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}

.completion-matrix-person-cell {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.completion-matrix-person-cell > button.completion-matrix-person-btn {
  flex: 1 1 auto;
  width: auto;
}

.completion-matrix-prior-award {
  flex: 0 0 auto;
  font-size: 0.85em;
  line-height: 1;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.85;
  user-select: none;
}

.form-check-input.is-prior-progress:not(:checked) {
  background-color: color-mix(in srgb, var(--bg-surface) 62%, var(--border-secondary) 38%);
  border-color: color-mix(in srgb, var(--border-secondary) 55%, var(--text-secondary) 45%);
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--text-secondary) 80%, var(--border-secondary) 20%) 0 38%,
    transparent 40%
  );
  background-size: 0.4em 0.4em;
  background-position: center;
  background-repeat: no-repeat;
}

.tabir-vfv-grid__camper-cell {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.tabir-vfv-grid__camper-cell > .tabir-vfv-person-btn:not(.tabir-vfv-anketa-marker) {
  flex: 1 1 auto;
  width: auto;
}

button.tabir-vfv-anketa-marker {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 1.75rem;
  padding: 0.2rem 0.35rem;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.55;
}

button.tabir-vfv-anketa-marker:hover,
button.tabir-vfv-anketa-marker:focus-visible,
button.tabir-vfv-anketa-marker.is-set {
  color: var(--accent-primary);
  opacity: 1;
}

button.tabir-vfv-person-btn .tabir-vfv-person-btn__label,
button.completion-matrix-person-btn .completion-matrix-person-btn__label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.tabir-vfv-person-btn:hover .tabir-vfv-person-btn__label,
button.tabir-vfv-person-btn:focus-visible .tabir-vfv-person-btn__label,
button.completion-matrix-person-btn:hover .completion-matrix-person-btn__label,
button.completion-matrix-person-btn:focus-visible .completion-matrix-person-btn__label {
  color: var(--accent-primary);
}

button.tabir-vfv-person-btn:focus-visible,
button.completion-matrix-person-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-primary-rgb));
  outline-offset: -2px;
}

/* 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);
  }
}