.fillViewportRoot {
  display: flex;
  position: relative;
  block-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
}

.inlineRoot {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  position: relative;
}

.toolbarSlot {
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.tableViewport {
  flex: 1 1 auto;
  min-block-size: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.paginationSlot {
  flex: 0 0 auto;
  overflow: visible;
  margin-top: auto;
}

.paginationSlot:not(.paginationSlotTop) {
  padding-top: var(--spacing-sm);
}

.paginationSlot.paginationSlotTop {
  padding-bottom: var(--spacing-sm);
}

.tableRoot {
  --table-component-header-bg: var(--table-header-bg);
  --table-component-header-fg: var(--table-header-fg);
  --table-component-header-font-size: var(--font-size-table-header);
  --table-component-header-line-height: var(--line-height-table-header);
  --table-component-header-font-weight: var(--font-weight-table-header);
  --table-component-row-bg: var(--table-row-bg);
  --table-component-row-bg-hover: var(--color-bg-hover-subtle);
  --table-component-row-bg-selected: var(--table-row-bg-selected);
  --table-component-row-bg-selected-hover: var(--table-row-bg-selected-hover);
  --table-component-cell-fg: var(--table-cell-fg);
  --table-component-cell-border: var(--table-border-subtle);
  --table-component-divider: var(--table-divider);
  --table-row-actions-reserve-inline: calc(var(--component-size-md) + 4px + var(--spacing-2xs));

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-block-size: 0;
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
}

.primary {
}

.embedded .cell {
  border-block-end: none;
}

.embedded {
  --table-component-header-bg: transparent;
  --table-component-header-fg: var(--color-fg-subtle);
  --table-component-header-font-weight: var(--font-weight-default);
  --table-component-row-bg: transparent;
  --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
  --table-component-row-bg-selected: color-mix(in srgb, var(--color-bg-selected) 55%, transparent);
  --table-component-row-bg-selected-hover: color-mix(
    in srgb,
    var(--color-bg-selected-hover) 60%,
    transparent
  );
  --table-component-cell-border: color-mix(in srgb, var(--table-border-subtle) 65%, transparent);
  --table-component-divider: color-mix(in srgb, var(--table-divider) 75%, transparent);
}

.measuringLayout {
  visibility: hidden;
}

.tableScroll {
  flex: 1 1 auto;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: auto;
  background: var(--table-component-row-bg);
  -webkit-overflow-scrolling: touch;
}

.tableElement {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--table-component-cell-fg);
  background: var(--table-component-row-bg);
}

.header {
  position: relative;
  z-index: 10;
}

/* Sticky embedded headers must cover the rows scrolling underneath. */
.embedded .header[data-sticky='true'] {
  --table-component-header-bg: var(--table-row-bg);
  background-color: var(--table-component-header-bg);
}

.headerRow,
.row {
  position: relative;
}

.emptyStateSlot {
  display: grid;
  place-items: center;
  min-block-size: 100%;
  padding: var(--spacing-lg);
}

.body {
  min-block-size: 0;
}

[data-show-header='true'] .body .row:first-child .cell {
  border-block-start: var(--spacing-xs) solid var(--table-component-row-bg);
}

.embedded [data-show-header='true'] .body .row:first-child .cell {
  border-block-start: none;
}

.headerCell,
.cell {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  vertical-align: top;
  text-align: start;
}

.headerCell {
  vertical-align: middle;
  background-color: var(--table-component-header-bg);
  padding-block: var(--spacing-xxs);
  padding-inline: var(--spacing-sm);
  font-size: var(--table-component-header-font-size);
  line-height: var(--table-component-header-line-height);
  font-weight: var(--table-component-header-font-weight);
  color: var(--table-component-header-fg);
  white-space: nowrap;
}

[data-sticky-header='true'] .headerCell {
  position: sticky;
  top: var(--table-sticky-top);
  z-index: 6;
}

.cell {
  padding-block: 6px;
  padding-inline: var(--spacing-sm);
  border-block-end: 1px solid var(--table-component-cell-border);
  background: var(--table-component-row-bg);
  overflow: hidden;
  line-height: 20px;
}

.md .headerCell {
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-xs);
}

.md .cell {
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-xs);
}

.sm .headerCell {
  padding-block: var(--spacing-xxs);
  padding-inline: var(--spacing-sm);
}

.sm .cell {
  padding-block: var(--spacing-xxs);
  padding-inline: var(--spacing-sm);
  font-size: var(--font-size-xs);
  line-height: 20px;
}

.sm .contextMenuTrigger {
  min-block-size: 0;
  block-size: 100%;
}

.cell[data-vertical-align='top'] {
  vertical-align: top;
}

.cell[data-vertical-align='middle'] {
  vertical-align: middle;
}

.cell[data-vertical-align='bottom'] {
  vertical-align: bottom;
}

.headerCell[data-align='right'],
.cell[data-align='right'] {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.headerCell[data-align='center'],
.cell[data-align='center'] {
  text-align: center;
}

.headerCell.selectionCell,
.cell.selectionCell {
  padding-inline: calc(var(--spacing-xxs) + 2px);
  cursor: pointer;
  overflow: visible;
  line-height: 0;
}

.headerCell.selectionCell {
  padding-block: var(--spacing-xxs);
  vertical-align: middle;
}

.cell.selectionCell {
  vertical-align: top;
  padding-block: var(--spacing-xxs);
}

.headerCell:hover [data-resizer='true']::after {
  opacity: 1;
}

.selectionHitArea {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-block-size: 0;
  padding: 0;
  line-height: 0;
}

.selectionControlWrap {
  display: inline-flex;
  align-items: flex-start;
  line-height: 0;
}

.selectionControlWrap span {
  gap: 0;
}

.selectionControlWrap input[type='radio'] + span {
  width: 18px;
  height: 18px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--color-fg-default) 28%, transparent);
}

.selectionControlWrap input[type='radio'] + span > span {
  width: 8px;
  height: 8px;
}

.clickableRow {
  cursor: pointer;
}

.row:hover > .cell {
  background-color: var(--table-component-row-bg-hover);
}

.selectedRow > .cell {
  background-color: var(--table-component-row-bg-selected);
}

.selectedRow:hover > .cell {
  background-color: var(--table-component-row-bg-selected-hover);
}

.row:focus-within > .cell {
  box-shadow:
    inset 0 2px 0 var(--color-brand),
    inset 0 -2px 0 var(--color-brand);
}

.row:focus-within > .cell:first-child {
  box-shadow:
    inset 2px 0 0 var(--color-brand),
    inset 0 2px 0 var(--color-brand),
    inset 0 -2px 0 var(--color-brand);
}

.row:focus-within > .cell:last-child {
  box-shadow:
    inset -2px 0 0 var(--color-brand),
    inset 0 2px 0 var(--color-brand),
    inset 0 -2px 0 var(--color-brand);
}

.nowrap {
  white-space: nowrap;
}

.allowWrap {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.allowOverflow {
  overflow: visible;
}

.allowOverflow .cellContent,
.allowOverflow .cellValueEllipsis,
.allowOverflow .cellValueNoEllipsis {
  overflow: visible;
  text-overflow: clip;
}

.thInner {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-width: 0;
}

.thInnerRight {
  justify-content: flex-end;
}

.thInnerCenter {
  justify-content: center;
}

.thMain {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.thMainWithActionsReserve {
  padding-inline-end: var(--table-row-actions-reserve-inline);
}

.thMainRight {
  justify-content: flex-end;
}

.thMainCenter {
  justify-content: center;
}

.thButton {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  min-width: 0;
  max-inline-size: 100%;
  cursor: pointer;
  user-select: none;
  border-radius: var(--border-radius-default);
  padding-block: 2px;
  padding-inline: 2px;
  justify-content: flex-start;
  transition: color var(--transition-fast) var(--ease-standard);
}

.thButton:hover {
  color: var(--color-fg-default);
}

.thButton:focus-visible {
  outline: none;
  color: var(--color-fg-default);
  box-shadow: inset 0 0 0 1px var(--color-border-selected);
}

.thButtonRight {
  justify-content: flex-end;
}

.thButtonCenter {
  justify-content: center;
}

.thLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.thLabelRight {
  text-align: right;
  width: 100%;
}

.thLabelCenter {
  text-align: center;
  width: 100%;
}

.thOverlayExtras {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  pointer-events: none;
  z-index: 7;
}

.thOverlayExtras > * {
  pointer-events: auto;
}

.sortIndicator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--color-disabled-fg);
  opacity: 1;
}

.sortIndicator svg {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
}

.descending {
  transform: rotate(180deg);
}

.inActiveSort {
  opacity: 0.8;
}

.activeSort {
  color: var(--color-disabled-fg);
}

.cellContent {
  display: flex;
  inline-size: 100%;
  min-width: 0;
  max-inline-size: 100%;
}

/* horizontal alignment inside content wrapper */
.cellContent[data-align='left'] {
  justify-content: flex-start;
  text-align: left;
}

.cellContent[data-align='center'] {
  justify-content: center;
  text-align: center;
}

.cellContent[data-align='right'] {
  justify-content: flex-end;
  text-align: right;
}

/* vertical alignment inside content wrapper */
.cellContent[data-vertical-align='top'] {
  align-items: flex-start;
}

.cellContent[data-vertical-align='middle'] {
  align-items: center;
}

.cellContent[data-vertical-align='bottom'] {
  align-items: flex-end;
}

.cellContent > * {
  min-width: 0;
  max-inline-size: 100%;
}

/* keep truncation + text alignment working */
.cellValueEllipsis {
  display: block;
  inline-size: 100%;
  min-width: 0;
  max-inline-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cellValueNoEllipsis {
  display: block;
  inline-size: 100%;
  min-width: 0;
  max-inline-size: 100%;
}

.cellContent[data-align='left'] .cellValueEllipsis,
.cellContent[data-align='left'] .cellValueNoEllipsis {
  text-align: left;
}

.cellContent[data-align='center'] .cellValueEllipsis,
.cellContent[data-align='center'] .cellValueNoEllipsis {
  text-align: center;
}

.cellContent[data-align='right'] .cellValueEllipsis,
.cellContent[data-align='right'] .cellValueNoEllipsis {
  text-align: right;
}

.allowWrap .cellContent,
.allowWrap .cellValueEllipsis {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  overflow: visible;
  text-overflow: clip;
}

.row:focus-within > .cell:not(.selectionCell) .cellContent,
.row:focus-within > .cell:not(.selectionCell) .cellValueEllipsis {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  overflow: visible;
  text-overflow: clip;
}

.contextMenuTrigger {
  color: var(--color-fg-subtle);
  min-inline-size: calc(var(--component-size-md) + 4px);
  min-block-size: calc(var(--component-size-md) + 4px);
  border-radius: 999px;
  background-color: transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.contextMenuOverlay {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--spacing-2xs);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  inline-size: max-content;
  block-size: auto;
  min-inline-size: 0;
  padding: 0;
  border-radius: var(--border-radius-rounded);
  background-color: transparent;
  z-index: 2;
}

.contextMenuHoverOnly .contextMenuOverlay {
  opacity: 0;
  pointer-events: none;
}

/*
 * Popover's own wrapper divs (.container/.triggerSlot) default to
 * align-items: stretch so a trigger can fill a fixed-height form row.
 * That stretches our small "sm" trigger button to the full row height
 * instead of letting it size itself, so it's overridden here rather
 * than in Popover.module.css to avoid affecting other Popover consumers.
 * (.contextMenuOverlay itself has no align-items to override: its only
 * child, Popover's .container, always sets an explicit height: 100%.)
 */
.contextMenuOverlay > div,
.contextMenuOverlay > div > div {
  align-items: center;
  background-color: transparent;
  overflow: visible;
  border-radius: 999px;
}

.actionCell {
  overflow: visible;
  position: relative;
}

.cellContentWithActions {
  padding-inline-end: var(--table-row-actions-reserve-inline);
}

.contextMenuTrigger:hover,
.contextMenuTrigger:focus-visible {
  background-color: var(--table-component-row-bg-hover);
  z-index: 2;
}

.contextMenuItemLabel {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  min-width: 0;
}

.contextMenuItemText {
  min-width: 0;
}

.contextMenuHoverOnly:hover .contextMenuOverlay {
  opacity: 1;
  pointer-events: auto;
}

.severityTable {
  --row-rail-width: 2px;
  --row-rail-inset-block: 1px;
  --row-rail-radius: 0;
}

.severityTable .row.severity > .cell:first-child {
  position: relative;
}

.severityTable .row.severity > .cell:first-child::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--row-rail-inset-block);
  inset-block-end: var(--row-rail-inset-block);
  inline-size: var(--row-rail-width);
  background-color: var(--row-severity-color);
  border-radius: var(--row-rail-radius);
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}

.severityTable .row.severity:hover > .cell:first-child::before,
.severityTable .row.severity:focus-within > .cell:first-child::before {
  opacity: 1;
  z-index: 8;
}

.severityTable .row.severityFailed > .cell:first-child::before {
  box-shadow: 1px 0 0 color-mix(in srgb, var(--row-severity-color) 20%, transparent);
}

.sm .severityTable {
  --row-rail-width: 4px;
  --row-rail-inset-block: 1px;
}

.dividerLeft,
.dividerRight {
  position: relative;
}

.dividerLeft::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--table-component-divider);
}

.dividerRight::after {
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--table-component-divider);
}