/*
 * Data Table Foundation
 *
 * One geometry model for every operational list. Row separators belong to the
 * table row, never to individual cells. A td/th must remain a native table cell;
 * flex/grid layouts live inside .data-table__cell wrappers. This prevents the
 * split and vertically drifting rules caused by global .row/.tags utilities.
 */

:root {
  --data-table-rule: rgba(60, 60, 67, 0.105);
  --data-table-head: rgba(118, 118, 128, 0.045);
  --data-table-hover: rgba(0, 122, 255, 0.035);
}

.cr-shell .tablewrap:has(> table.data-table),
.cr-shell .tenant-table-wrap:has(> table.data-table),
.cr-shell .device-table-wrap:has(> table.data-table) {
  isolation: isolate;
}

.cr-shell table.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--cr-ink);
}

/* Native table geometry is an invariant. Do not override this in page CSS. */
.cr-shell table.data-table th,
.cr-shell table.data-table td {
  display: table-cell;
  box-sizing: border-box;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  vertical-align: middle;
}

.cr-shell table.data-table thead tr,
.cr-shell table.data-table tbody tr {
  position: relative;
  box-shadow: inset 0 -1px 0 var(--data-table-rule);
}

.cr-shell table.data-table thead th {
  background: var(--data-table-head);
  font-size: var(--cr-type-caption);
  line-height: 1.4;
}

.cr-shell table.data-table tbody td {
  font-size: var(--cr-type-body);
  line-height: 1.5;
}

.cr-shell table.data-table tbody tr {
  transition: background-color 140ms ease;
}

.cr-shell table.data-table tbody tr:hover {
  background-color: var(--data-table-hover);
}

.cr-shell table.data-table tbody tr:last-child {
  box-shadow: none;
}

.cr-shell table.data-table td.row,
.cr-shell table.data-table td.tags {
  white-space: normal;
}

.cr-shell table.data-table td.row > *,
.cr-shell table.data-table td.tags > * {
  display: inline-flex;
  margin: 2px 5px 2px 0;
  vertical-align: middle;
}

.data-table__cell {
  min-width: 0;
}

.data-table__cell--identity,
.data-table__cell--risk {
  display: flex;
  align-items: center;
}

.data-table__cell--identity,
.data-table__cell--risk {
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .cr-shell table.data-table tbody tr {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --data-table-rule: rgba(28, 28, 30, 0.32);
    --data-table-head: rgba(118, 118, 128, 0.09);
  }
}