/*
 * TW DataTable.
 *
 * This is the only visual owner for registry, settings, embedded record and
 * directory tables. Module styles may size semantic columns and compose a
 * scrollport, but may not redefine table surface, chrome, row rhythm, borders,
 * radius, hover/selection or sticky service rails.
 */

.tw-data-table-wrap {
  position: relative;
  min-width: 0;
  overflow: auto;
}

.tw-data-table {
  width: 100%;
  min-width: var(--tw-data-table-min-width, 680px);
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

.tw-data-table--settings {
  --tw-data-table-min-width: 620px;
}

.tw-data-table--embedded {
  --tw-data-table-min-width: 540px;
}

.tw-data-table--framed {
  overflow: hidden;
  background: var(--tw-color-surface);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-frame-radius);
  border-collapse: separate;
  border-spacing: 0;
}

.tw-data-table--framed tbody tr:last-child td {
  border-bottom: 0;
}

.tw-data-table--settings tr > :first-child:has(.tw-table-checkbox) {
  width: var(--tw-selection-column);
  padding-inline: 0;
  text-align: center;
}

.tw-data-table--settings:has(th[data-actions]) tbody td:last-child {
  width: var(--tw-actions-column);
  position: sticky;
  right: 0;
  z-index: 3;
  padding-inline: 0;
  background: var(--tw-color-surface);
  box-shadow: -1px 0 0 var(--tw-color-border);
  text-align: center;
}

.tw-data-table--settings:has(th[data-actions]) tbody tr:hover td:last-child {
  background: var(--tw-color-surface-subtle);
}

.tw-data-table--settings:has(th[data-actions]) tbody tr:is([aria-current="true"], .is-selected) td:last-child {
  background: var(--tw-color-accent);
}

.tw-data-table th,
.tw-data-table td {
  height: var(--tw-table-mini-row);
  max-height: var(--tw-table-mini-row);
  padding: 0 var(--tw-space-3);
  overflow: hidden;
  color: var(--tw-color-text);
  border-bottom: 1px solid var(--tw-color-border);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
  text-align: left;
  vertical-align: middle;
}

.tw-data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--tw-registry-header-row);
  color: var(--tw-color-text-muted);
  background: var(--tw-color-bg);
  font-size: var(--tw-font-meta);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-meta);
}

.tw-data-table tbody tr:hover {
  background: var(--tw-color-surface-subtle);
}

.tw-data-table tbody tr {
  height: var(--tw-table-mini-row);
  max-height: var(--tw-table-mini-row);
}

.tw-data-table tbody tr[aria-current="true"],
.tw-data-table tbody tr.is-selected {
  background: var(--tw-color-accent);
}

.tw-data-table .tw-col-select,
.tw-data-table th[data-selection-cell],
.tw-data-table td[data-selection-cell] {
  width: var(--tw-selection-column);
  min-width: var(--tw-selection-column);
  max-width: var(--tw-selection-column);
}

.tw-data-table .tw-col-actions,
.tw-data-table th[data-actions],
.tw-data-table td[data-actions] {
  width: var(--tw-actions-column);
  min-width: var(--tw-actions-column);
  max-width: var(--tw-actions-column);
}

.tw-data-table th[data-selection-cell],
.tw-data-table td[data-selection-cell],
.tw-data-table th[data-actions],
.tw-data-table td[data-actions] {
  padding-inline: 0;
  text-align: center;
}

.tw-data-table [data-selection-cell] .tw-table-checkbox,
.tw-data-table [data-actions] .tw-row-action {
  margin-inline: auto;
}

.tw-data-table [data-selection-cell] .tw-table-checkbox {
  transform: translateX(var(--tw-selection-checkbox-nudge));
}

.tw-data-table :is(th, td)[data-selection-cell] + :is(th, td) {
  padding-left: var(--tw-space-2);
}

.tw-data-table th[data-actions],
.tw-data-table td[data-actions] {
  position: sticky;
  right: 0;
  box-shadow: -1px 0 0 var(--tw-color-border);
}

.tw-data-table th[data-actions] {
  z-index: 4;
  background: var(--tw-color-bg);
}

.tw-data-table td[data-actions] {
  z-index: 2;
  background: var(--tw-color-surface);
}

.tw-data-table tbody tr:hover td[data-actions] {
  background: var(--tw-color-surface-subtle);
}

.tw-data-table tbody tr:is([aria-current="true"], .is-selected) td[data-actions] {
  background: var(--tw-color-accent);
}

.tw-data-table td > :is(
  .tw-cell-stack,
  .revision-cell,
  .identity-cell,
  .health-summary,
  .run-summary,
  .tw-due,
  .tw-sla
) {
  max-height: calc(var(--tw-line-ui) + var(--tw-line-meta) + var(--tw-space-0-5));
  overflow: hidden;
}

/* Full entity registry profile. */
.tw-registry-table {
  width: 100%;
  min-width: var(
    --tw-registry-table-min-width,
    var(--tw-registry-table-min)
  );
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.tw-registry-table .tw-col-select {
  width: var(--tw-selection-column);
}

.tw-registry-table .tw-col-actions {
  width: var(--tw-actions-column);
}

.tw-registry-table .tw-col-visual {
  width: var(--tw-registry-visual-column);
}

:is(
  .tw-registry-table,
  .tw-data-table,
  .tw-record-mini-table,
  .tw-directory-values__table
) caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.tw-registry-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--tw-color-table-chrome);
}

.tw-registry-table th,
.tw-registry-table td {
  min-width: 0;
  padding: 0 var(--tw-space-3);
  border-bottom: var(--tw-registry-row-divider) solid
    var(--tw-color-table-chrome);
  text-align: left;
  vertical-align: middle;
}

.tw-registry-table th {
  height: var(--tw-registry-header-row);
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-meta);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-meta);
  white-space: nowrap;
}

.tw-registry-table td {
  height: var(--tw-registry-body-row);
  max-height: var(--tw-registry-body-row);
  overflow: hidden;
  color: var(--tw-color-text);
  font-size: var(--tw-font-ui);
  line-height: var(--tw-line-ui);
}

.tw-registry-table tbody tr {
  height: var(--tw-registry-body-row);
  max-height: var(--tw-registry-body-row);
  background: transparent;
}

.tw-registry-table tbody tr[data-href] {
  cursor: pointer;
}

html[data-input-modality="keyboard"] .tw-registry-table tbody tr:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--tw-color-focus);
  outline-offset: -2px;
}

.tw-registry-table tbody tr:hover,
html[data-input-modality="keyboard"] .tw-registry-table tbody tr:focus-within {
  background: var(--tw-color-surface-subtle);
}

.tw-registry-table tbody tr.is-selected {
  background: var(--tw-color-accent);
}

.tw-registry-table th[data-selection-cell],
.tw-registry-table td[data-selection-cell] {
  width: var(--tw-selection-column);
  min-width: var(--tw-selection-column);
  max-width: var(--tw-selection-column);
  padding-inline: 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.tw-registry-table [data-selection-cell] .tw-table-checkbox {
  display: none;
  margin-inline: auto;
  transform: translateX(var(--tw-selection-checkbox-nudge));
}

.tw-registry-table :is(th, td)[data-selection-cell] + :is(th, td) {
  padding-left: var(--tw-space-2);
}

.tw-registry-table th[data-actions],
.tw-registry-table td[data-actions] {
  width: var(--tw-actions-column);
  min-width: var(--tw-actions-column);
  max-width: var(--tw-actions-column);
  padding-inline: 0;
  text-align: center;
}

.tw-registry-table td[data-actions] .tw-row-action {
  margin-inline: auto;
  transform: translateX(var(--tw-row-action-nudge));
}

.tw-registry-table th[data-visual-cell],
.tw-registry-table td[data-visual-cell] {
  width: var(--tw-registry-visual-column);
  min-width: var(--tw-registry-visual-column);
  max-width: var(--tw-registry-visual-column);
  padding-inline: 0;
  text-align: center;
}

.tw-registry-table th[data-visual-cell] .tw-column-heading {
  justify-content: center;
  gap: 0;
}

/* Embedded and settings profiles. */
.tw-record-mini-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.tw-record-mini-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.tw-record-mini-table th,
.tw-record-mini-table td {
  min-height: var(--tw-table-mini-row);
  padding: var(--tw-space-2) var(--tw-space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--tw-color-border);
}

.tw-record-mini-table th {
  color: var(--tw-color-text-muted);
  background: var(--tw-color-table-chrome);
  font-size: var(--tw-font-micro);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-micro);
}

.tw-record-mini-table tbody tr:last-child td {
  border-bottom: 0;
}

.tw-record-mini-table__action {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

/* Directory child-entity profile. */
.tw-directory-values__table-wrap {
  overflow: hidden;
  background: var(--tw-color-surface);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-frame-radius);
}

.tw-directory-values__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tw-directory-values__table th {
  height: 36px;
  padding: 0 var(--tw-space-2);
  color: var(--tw-color-text-muted);
  background: var(--tw-color-table-chrome);
  font-size: var(--tw-font-micro);
  font-weight: var(--tw-weight-semibold);
  text-align: left;
}

.tw-directory-values__table th:first-child {
  width: 44%;
}

.tw-directory-values__table th:nth-child(2) {
  width: 28%;
}

.tw-directory-values__table th:nth-child(3) {
  width: 22%;
}

.tw-directory-values__table th:last-child {
  width: 34px;
}

.tw-directory-values__table td {
  min-width: 0;
  height: 52px;
  padding: var(--tw-space-1) var(--tw-space-2);
  border-top: 1px solid var(--tw-color-border);
}

@media (min-width: 701px) {
  .tw-registry-table {
    background: var(--tw-color-table-chrome);
    border-radius: var(--tw-registry-table-radius);
    box-shadow: 0 0 0 var(--tw-registry-row-divider)
      var(--tw-color-table-chrome);
  }

  .tw-registry-table thead th {
    background: var(--tw-color-table-chrome);
  }

  .tw-registry-table tbody td {
    background: var(--tw-color-table-row);
  }

  .tw-registry-table tbody tr:hover > td,
  html[data-input-modality="keyboard"]
    .tw-registry-table
    tbody
    tr:focus-within
    > td {
    background: var(--tw-color-surface-subtle);
  }

  .tw-registry-table tbody tr.is-selected > td {
    background: var(--tw-color-accent);
  }

  .tw-registry-table thead tr:first-child > th:first-child,
  .tw-registry-table
    tbody
    > tr:nth-child(1 of :not([hidden]))
    > td:first-child {
    border-start-start-radius: var(--tw-registry-table-radius);
  }

  .tw-registry-table thead tr:first-child > th:last-child,
  .tw-registry-table
    tbody
    > tr:nth-child(1 of :not([hidden]))
    > td:last-child {
    border-start-end-radius: var(--tw-registry-table-radius);
  }

  .tw-registry-table
    tbody
    > tr:nth-last-child(1 of :not([hidden]))
    > td {
    border-bottom: 0;
  }

  .tw-registry-table
    tbody
    > tr:nth-last-child(1 of :not([hidden]))
    > td:first-child {
    border-end-start-radius: var(--tw-registry-table-radius);
  }

  .tw-registry-table
    tbody
    > tr:nth-last-child(1 of :not([hidden]))
    > td:last-child {
    border-end-end-radius: var(--tw-registry-table-radius);
  }

  .tw-registry-table thead th[data-actions],
  .tw-registry-table tbody td[data-actions] {
    position: sticky;
    right: 0;
  }

  .tw-registry-table thead th[data-actions] {
    z-index: 4;
    background: var(--tw-color-table-chrome);
  }

  .tw-registry-table tbody td[data-actions] {
    z-index: 2;
    background: var(--tw-color-table-row);
  }

  .tw-registry-table tbody tr:hover td[data-actions] {
    background: var(--tw-color-surface-subtle);
  }

  .tw-registry-table tbody tr.is-selected td[data-actions] {
    background: var(--tw-color-accent);
  }
}

@media (max-width: 700px) {
  .tw-data-table--mobile-cards,
  .tw-data-table--mobile-cards tbody,
  .tw-data-table--mobile-cards tr,
  .tw-data-table--mobile-cards td {
    display: block;
    width: 100%;
  }

  .tw-data-table--mobile-cards {
    min-width: 0;
  }

  .tw-data-table--mobile-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .tw-data-table--mobile-cards tr {
    height: auto;
    max-height: none;
    padding: var(--tw-space-2-5);
    border-bottom: 1px solid var(--tw-color-border);
  }

  .tw-data-table--mobile-cards tbody tr:last-child {
    border-bottom: 0;
  }

  .tw-data-table--mobile-cards td {
    height: auto;
    max-height: none;
    padding: 3px 0;
    border: 0;
  }

  .tw-data-table--mobile-cards td::before {
    display: block;
    margin-bottom: 1px;
    color: var(--tw-color-text-muted);
    content: attr(data-label);
    font-size: var(--tw-font-micro);
    font-weight: var(--tw-weight-bold);
    text-transform: uppercase;
  }

  .tw-registry-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .tw-registry-table colgroup {
    display: none;
  }

  .tw-registry-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .tw-registry-table tbody {
    display: grid;
    width: 100%;
    gap: var(--tw-space-2);
  }

  .tw-registry-table tr,
  .tw-registry-table td {
    display: block;
    width: 100%;
  }

  .tw-registry-table tbody tr {
    position: relative;
    display: grid;
    height: auto;
    max-height: none;
    gap: var(--tw-space-1);
    padding: var(--tw-space-3) 48px var(--tw-space-3) 52px;
    background: var(--tw-color-surface);
    border: 1px solid var(--tw-color-border);
    border-radius: var(--tw-frame-radius);
  }

  .tw-registry-table tbody tr:has(td[data-visual-cell]) {
    padding-left: 88px;
  }

  .tw-registry-table td {
    height: auto;
    max-height: none;
    padding: var(--tw-space-1) 0;
    border: 0;
  }

  .tw-registry-table td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--tw-color-text-muted);
    content: attr(data-label);
    font-size: var(--tw-font-micro);
    line-height: var(--tw-line-micro);
  }

  .tw-registry-table td[data-primary]::before,
  .tw-registry-table td[data-selection-cell]::before,
  .tw-registry-table td[data-actions]::before {
    display: none;
  }

  .tw-registry-table td[data-selection-cell] {
    position: absolute;
    top: var(--tw-space-2);
    left: var(--tw-space-1);
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
  }

  .tw-registry-table td[data-actions] {
    position: absolute;
    top: var(--tw-space-1);
    right: var(--tw-space-1);
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
  }

  .tw-registry-table td[data-visual-cell] {
    position: absolute;
    top: var(--tw-space-2);
    left: 44px;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
  }

  .tw-registry-table td[data-visual-cell]::before {
    display: none;
  }

  .tw-registry-table td[data-mobile-hidden] {
    display: none;
  }
}