.lio-table {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  overflow: auto;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-geist);
  font: var(--body-m);
  letter-spacing: 0;
}

.lio-table__header,
.lio-table__row {
  display: grid;
  grid-template-columns: var(--lio-table-column-template, repeat(var(--lio-table-column-count, 1), minmax(var(--space-zero), 1fr)));
  min-inline-size: var(--lio-table-min-width, max(100%, calc(var(--lio-table-column-count, 1) * 160px)));
}

.lio-table__header {
  position: relative;
  inset-block-start: var(--space-zero);
  z-index: 0;
  background: var(--bg);
}

.lio-table__body {
  display: grid;
  min-inline-size: var(--space-zero);
}

.lio-table .lio-table-cell {
  inline-size: 100%;
  min-inline-size: var(--space-zero);
}

.lio-table__row:hover .lio-table-cell[data-kind="cell"] {
  background: var(--surface-hover);
}

.lio-table__row:last-child .lio-table-cell[data-kind="cell"] {
  border-block-end: 0;
}

.lio-table__empty {
  display: grid;
  min-block-size: 128px;
  place-items: center;
}

.lio-table__empty-cell {
  padding: var(--space-xl3) var(--space-lg);
  color: var(--text-secondary);
  font: var(--body-m);
  text-align: center;
}

.lio-table-cell {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  overflow: hidden;
  font-family: var(--font-geist);
  white-space: nowrap;
}

.lio-table-cell[data-kind="header"] {
  inline-size: 100%;
  block-size: 42px;
  min-block-size: 42px;
  padding: var(--space-zero) var(--space-sm);
  background: var(--bg);
  color: var(--text-secondary);
  border-block-end: var(--border-w) solid var(--border-subtle);
  font: var(--body-m-prominent);
  overflow: hidden;
}

.lio-table-cell[data-kind="cell"] {
  block-size: 76px;
  padding: var(--space-zero) var(--space-sm);
  gap: var(--space-xs);
  background: var(--surface);
  color: var(--text);
  border-block-end: var(--border-w) solid var(--border-subtle);
  font: var(--body-m);
}

.lio-table .lio-table__header-cell {
  inline-size: 100%;
}

.lio-table-cell__header-text,
.lio-table-cell__text {
  min-inline-size: var(--space-zero);
  overflow: hidden;
  text-overflow: ellipsis;
}

.lio-table-cell__header-text {
  color: var(--text-secondary);
  font: var(--body-m-prominent);
}

.lio-table-cell__text {
  color: var(--text);
  font: var(--body-m);
  letter-spacing: 0;
}

.lio-table-cell__muted,
.lio-table-cell__subtitle,
.lio-table-cell__stack span,
.lio-table-cell__stack small {
  min-inline-size: var(--space-zero);
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lio-table-cell__muted,
.lio-table-cell__subtitle,
.lio-table-cell__stack small {
  color: var(--text-tertiary);
  font: var(--body-m);
}

.lio-table-cell__stack {
  display: flex;
  min-inline-size: var(--space-zero);
  flex-direction: column;
  gap: var(--space-xs3);
}

.lio-table-cell__stack span {
  color: var(--text);
  font: var(--body-m);
}

.lio-table-cell__state {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-xs2);
}

.lio-table-cell__state .lio-badge {
  block-size: var(--size-xl);
  min-block-size: var(--size-xl);
  padding: var(--space-xxs) var(--space-xs);
}

.lio-table-cell--menu {
  justify-content: center;
  padding-inline: var(--space-xs2);
}

.lio-table-cell__menu-button {
  appearance: none;
  display: inline-flex;
  inline-size: var(--size-3xl);
  block-size: var(--size-3xl);
  align-items: center;
  justify-content: center;
  padding: var(--space-zero);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--icon);
  cursor: pointer;
}

.lio-table-cell__menu-button:hover {
  background: var(--surface-hover);
}

.lio-table-cell__menu-button:focus-visible {
  outline: none;
  box-shadow: var(--ring-brand);
}

.lio-table-cell__menu-icon {
  display: block;
  inline-size: var(--size-lg);
  block-size: var(--size-lg);
}

.lio-table-cell__sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: var(--space-zero);
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lio-table-cell__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-2xl);
  block-size: var(--size-2xl);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--brand-surface);
  color: var(--text-tertiary);
}

.lio-table-cell__avatar-text {
  font: 400 14px/20px var(--font-geist);
  text-align: center;
}

.lio-table-cell__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-lg);
  block-size: var(--size-lg);
  flex: none;
  color: var(--icon);
}

.lio-table-cell__icon img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.lio-table-cell__badge {
  block-size: var(--size-xl);
  padding: var(--space-xxs) var(--space-xs);
  font: 500 12px/16px var(--font-geist);
}

.lio-table-cell__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--size-2xl);
  min-block-size: var(--size-2xl);
  padding-block: var(--space-zero);
  padding-inline: var(--space-xs);
  border: 0;
  border-radius: 10px;
  background: var(--brand-solid);
  color: var(--text-inverse);
  font: 500 12px/16px var(--font-geist);
  white-space: nowrap;
  cursor: pointer;
}

.lio-table-cell__button:focus-visible {
  outline: none;
  box-shadow: var(--ring-brand);
}