/*
 * TW full entity registry.
 *
 * Owns toolbar, filters, table service rails, row states, selection overlay,
 * pagination and column/row menus. Neutral cell atoms live in content.css.
 */

.tw-registry {
  display: flex;
  min-width: 0;
  min-height: calc(100dvh - var(--tw-page-header));
  flex: 1;
  flex-direction: column;
  container-name: tw-registry;
  container-type: inline-size;
}

.tw-registry-toolbar {
  display: flex;
  min-height: var(--tw-toolbar-height);
  padding: var(--tw-space-2) var(--tw-content-gutter);
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-3);
  background: var(--tw-color-bg);
  border-bottom: 0;
}

.tw-registry-toolbar__group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--tw-space-1);
}

.tw-registry-toolbar__group:first-child {
  overflow-x: auto;
}

.tw-registry-toolbar__group--end {
  margin-left: auto;
}

.tw-registry-toolbar .tw-button,
.tw-registry-toolbar .tw-icon-button,
.tw-registry-toolbar .tw-tab-item {
  min-height: var(--tw-control-compact);
  height: var(--tw-control-compact);
  padding-block: 0;
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-registry-toolbar .tw-icon-button {
  width: var(--tw-control-compact);
  flex-basis: var(--tw-control-compact);
}

.tw-registry-toolbar .tw-button,
.tw-registry-toolbar .tw-tab-item {
  padding-inline: var(--tw-space-2);
}

.tw-registry-toolbar .tw-tab-group > .tw-tab-item,
.tw-registry-toolbar .tw-tab-group--tools > .tw-icon-button,
.tw-registry-toolbar .tw-tab-group--tools > .tw-button {
  min-height: var(--tw-control-tool);
  height: var(--tw-control-tool);
}

.tw-registry-search {
  position: relative;
  display: flex;
  width: min(340px, 29vw);
  min-width: 190px;
  height: var(--tw-control-compact);
  align-items: center;
}

.tw-registry-search::before {
  top: 5px;
}

.tw-registry-search .tw-input {
  height: var(--tw-control-compact);
  min-height: var(--tw-control-compact);
  padding: 0 42px 0 28px;
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-registry-search kbd {
  position: absolute;
  right: var(--tw-space-2);
  padding: 1px var(--tw-space-1);
  color: var(--tw-color-text-muted);
  background: var(--tw-color-surface);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius);
  font: inherit;
  font-size: var(--tw-font-micro);
  line-height: var(--tw-line-micro);
}

.tw-registry-search-toggle {
  display: none;
}

.tw-registry-search-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  padding: var(--tw-space-4);
  place-items: start center;
  background: color-mix(in srgb, var(--tw-color-overlay) 68%, transparent);
}

.tw-registry-search-overlay[hidden] {
  display: none;
}

.tw-registry-search-dialog {
  display: grid;
  width: min(520px, calc(100vw - var(--tw-space-8)));
  min-height: 48px;
  margin-top: 15vh;
  padding: var(--tw-space-2);
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tw-space-2);
  color: var(--tw-color-text);
  background: var(--tw-color-surface-raised);
  border: 1px solid var(--tw-color-border-strong);
  border-radius: var(--tw-radius-workspace);
  box-shadow: var(--tw-shadow);
}

.tw-registry-search-dialog > .tw-icon {
  margin-left: var(--tw-space-1);
  color: var(--tw-color-text-muted);
}

.tw-registry-search-dialog .tw-input {
  min-height: 36px;
  padding-inline: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tw-registry-search-dialog kbd {
  margin-right: var(--tw-space-1);
  padding: 2px var(--tw-space-1-5);
  color: var(--tw-color-text-muted);
  background: var(--tw-color-surface-subtle);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius);
  font-size: var(--tw-font-micro);
}

.tw-filter-panel {
  --filter-field-min-size: 180px;
  display: flex;
  padding: var(--tw-space-3) var(--tw-content-gutter);
  align-items: end;
  flex-wrap: wrap;
  gap: var(--tw-space-3);
  border-bottom: 1px solid var(--tw-color-border);
}

.tw-filter-panel[hidden] {
  display: none;
}

.tw-registry-notice {
  min-height: 32px;
  padding: var(--tw-space-2) var(--tw-content-gutter);
  color: var(--tw-color-accent-text);
  background: var(--tw-color-accent);
  border-bottom: 1px solid var(--tw-color-primary);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-filter-panel .tw-form-field {
  display: grid;
  min-width: min(100%, var(--filter-field-min-size));
  flex: 1 1 var(--filter-field-min-size);
  gap: var(--tw-space-1);
}

.tw-filter-panel .tw-form-label {
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-micro);
  line-height: var(--tw-line-micro);
}

.tw-filter-panel .tw-select,
.tw-filter-panel .tw-input,
.tw-filter-panel .tw-button {
  min-height: var(--tw-control-compact);
  height: var(--tw-control-compact);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-filter-panel__reset {
  flex: 0 0 auto;
}

.tw-registry-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.tw-registry-table-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0 var(--tw-content-gutter) var(--tw-space-2);
  flex: 1;
  overflow: auto;
  background: var(--tw-color-bg);
}

.tw-registry[data-selection-mode="true"] .tw-registry-table [data-selection-cell] .tw-table-checkbox {
  display: grid;
}

.tw-registry[data-selection-mode="true"] .tw-row-action--selection {
  display: none;
}

.tw-row-action--bare {
  width: 28px;
  height: 28px;
  min-height: 28px;
  margin-inline: auto;
  padding: 0;
  color: var(--tw-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius);
  box-shadow: none;
  transform: none;
}

.tw-row-action--bare:hover,
.tw-row-action--bare:focus-visible,
.tw-row-action--bare[aria-expanded="true"] {
  color: var(--tw-color-text);
  background: var(--tw-color-surface-subtle);
  border: 0;
  box-shadow: none;
}

.tw-sort-button {
  display: inline-flex;
  padding: 0;
  align-items: center;
  gap: var(--tw-space-1);
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
}

.tw-column-heading {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--tw-space-1);
}

.tw-column-heading__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-column-filter-trigger {
  display: inline-grid;
  width: 20px;
  height: 20px;
  padding: 0;
  flex: 0 0 20px;
  place-items: center;
  color: var(--tw-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius);
}

.tw-column-filter-trigger .tw-icon {
  width: 11px;
  height: 11px;
}

.tw-column-filter-trigger:hover,
.tw-column-filter-trigger[aria-expanded="true"],
.tw-column-filter-trigger[data-active="true"] {
  color: var(--tw-color-primary);
  background: var(--tw-color-accent);
}

.tw-table-photo {
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--tw-color-text-muted);
  background: var(--tw-color-muted);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius-dot);
  object-fit: cover;
  font-size: var(--tw-font-micro);
  font-weight: var(--tw-weight-bold);
  line-height: var(--tw-line-micro);
}

.tw-sort-indicator {
  display: inline-grid;
  min-width: 12px;
  place-items: center;
  color: var(--tw-color-text-muted);
  text-align: center;
}

.tw-sort-indicator .tw-icon {
  width: 12px;
  height: 12px;
}

.tw-registry-table th[aria-sort="ascending"] .tw-sort-indicator,
.tw-registry-table th[aria-sort="descending"] .tw-sort-indicator {
  color: var(--tw-color-primary);
}

.tw-cell-stack > .tw-badge {
  justify-self: start;
}

/* A registry cell exposes at most two content rows. Extra metadata belongs in
 * the single page, row menu or inspector, never in a third table line. */
.tw-registry-table .tw-cell-stack {
  width: 100%;
  max-height: calc(var(--tw-line-ui) + var(--tw-line-meta) + var(--tw-space-0-5));
  overflow: hidden;
}

.tw-registry-table td > :is(
  a,
  div,
  span
) {
  max-width: 100%;
}

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

.tw-registry-table .tw-cell-stack > :nth-child(n + 3) {
  display: none;
}

.tw-registry-state {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  min-height: 240px;
  padding: var(--tw-space-6);
  place-items: center;
  color: var(--tw-color-text-muted);
  background: var(--tw-color-bg);
  text-align: center;
}

.tw-registry-state[hidden] {
  display: none;
}

.tw-registry-state__content {
  display: grid;
  max-width: 360px;
  gap: var(--tw-space-2);
  justify-items: center;
}

.tw-registry-state h2,
.tw-registry-state p {
  margin: 0;
}

.tw-registry-state h2 {
  color: var(--tw-color-text);
  font-size: var(--tw-font-heading);
  line-height: var(--tw-line-heading);
}

.tw-registry-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  min-height: var(--tw-registry-footer);
  padding: var(--tw-space-2) var(--tw-content-gutter);
  align-items: center;
  border-top: 1px solid var(--tw-color-border);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-registry-footer__status {
  color: var(--tw-color-text-muted);
}

.tw-registry-footer__size {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tw-space-2);
  color: var(--tw-color-text-muted);
}

.tw-registry-footer__size .tw-select {
  width: 64px;
  min-height: var(--tw-control-compact);
  height: var(--tw-control-compact);
}

.tw-pagination {
  display: flex;
  align-items: center;
  gap: var(--tw-space-1);
  justify-content: center;
}

.tw-pagination button {
  min-width: var(--tw-control-compact);
  width: auto;
  height: var(--tw-control-compact);
  padding-inline: var(--tw-space-2);
  color: var(--tw-color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--tw-radius);
  background: transparent;
}

.tw-pagination button[aria-current="page"] {
  color: var(--tw-color-accent-text);
  background: var(--tw-color-accent);
  border-color: var(--tw-color-primary);
}

.tw-pagination button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.tw-selection-bar {
  position: absolute;
  right: var(--tw-content-gutter);
  bottom: calc(100% + var(--tw-space-1));
  left: var(--tw-content-gutter);
  z-index: 8;
  display: flex;
  min-height: 42px;
  padding: var(--tw-space-1) var(--tw-space-3);
  align-items: center;
  gap: var(--tw-space-2);
  color: var(--tw-color-text);
  background: color-mix(in srgb, var(--tw-color-accent) 62%, var(--tw-color-surface-raised));
  border: 1px solid color-mix(in srgb, var(--tw-color-primary) 30%, var(--tw-color-border));
  border-radius: var(--tw-radius-workspace);
  box-shadow: var(--tw-shadow-sm);
}

.tw-selection-bar[hidden] {
  display: none;
}

.tw-selection-bar__actions {
  display: flex;
  margin-left: auto;
  gap: var(--tw-space-1);
}

.tw-columns-panel,
.tw-column-filter-panel,
.tw-row-menu {
  position: fixed;
  z-index: 80;
  display: grid;
  width: 220px;
  max-width: calc(100vw - var(--tw-space-4));
  padding: var(--tw-space-1);
  gap: 1px;
  color: var(--tw-color-text);
  background: var(--tw-color-surface-raised);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-registry-table-radius);
  box-shadow: var(--tw-shadow);
}

.tw-columns-panel[hidden],
.tw-column-filter-panel[hidden],
.tw-row-menu[hidden] {
  display: none;
}

.tw-column-filter-panel {
  width: 260px;
  padding: var(--tw-space-2);
  gap: var(--tw-space-2);
}

.tw-column-filter-panel__title {
  margin: 0;
  color: var(--tw-color-text);
  font-size: var(--tw-font-meta);
  font-weight: var(--tw-weight-bold);
  line-height: var(--tw-line-meta);
}

.tw-column-filter-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tw-space-1);
}

.tw-columns-panel__item {
  display: flex;
  min-height: var(--tw-menu-item);
  padding: 0 var(--tw-space-2-5);
  align-items: center;
  gap: var(--tw-space-2);
  border-radius: var(--tw-radius);
  font-size: var(--tw-font-meta);
}

.tw-columns-panel__item:hover {
  background: var(--tw-color-surface-subtle);
}

.tw-row-menu__title {
  margin: 0;
  padding: var(--tw-space-2);
  color: var(--tw-color-text-muted);
  border-bottom: 1px solid var(--tw-color-border);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-row-menu button,
.tw-row-menu a {
  display: flex;
  min-height: var(--tw-menu-item);
  padding: 0 var(--tw-space-2-5);
  align-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius);
  text-align: left;
  text-decoration: none;
  font-size: var(--tw-font-meta);
}

.tw-row-menu button:hover,
.tw-row-menu a:hover,
html[data-input-modality="keyboard"] .tw-row-menu [role="menuitem"]:focus-visible {
  background: var(--tw-color-surface-subtle);
}

.tw-row-menu__divider {
  height: 1px;
  margin: var(--tw-space-1);
  background: var(--tw-color-border);
}

.tw-row-menu .is-danger {
  color: var(--tw-color-danger);
}

.tw-registry-presentation[hidden],
.tw-kanban[hidden] {
  display: none;
}

.tw-kanban {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: var(--tw-space-2) var(--tw-content-gutter);
  flex: 1;
  grid-template-columns: repeat(3, minmax(280px, 360px));
  grid-auto-columns: minmax(280px, 360px);
  justify-content: start;
  align-items: start;
  gap: var(--tw-space-2);
  overflow: auto;
  background: var(--tw-color-bg);
}

.tw-kanban__column {
  --tw-frame-background: var(--tw-color-table-chrome);
  --tw-frame-border-color: var(--tw-color-table-chrome);
  --tw-frame-border-width: var(--tw-registry-row-divider);
  display: flex;
  width: 100%;
  min-width: 280px;
  max-width: 360px;
  min-height: 180px;
  flex-direction: column;
}

.tw-kanban__header {
  display: flex;
  height: var(--tw-registry-header-row);
  min-height: var(--tw-registry-header-row);
  padding: 0 var(--tw-space-3);
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-2);
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
}

.tw-kanban__cards {
  display: grid;
  padding: 0;
  align-content: start;
  gap: var(--tw-registry-row-divider);
}

.tw-kanban__cards--work {
  padding: 0 var(--tw-space-1) var(--tw-space-1);
  gap: var(--tw-space-2);
}

.tw-kanban__card {
  display: grid;
  min-width: 0;
  max-width: 360px;
  padding: var(--tw-space-3);
  color: var(--tw-color-text);
  background: var(--tw-color-table-row);
  border: 0;
  border-radius: var(--tw-radius);
  gap: var(--tw-space-2);
  text-decoration: none;
}

.tw-kanban__card:hover {
  color: var(--tw-color-text);
  background: var(--tw-color-surface-subtle);
}

.tw-kanban__card[hidden] {
  display: none;
}

.tw-kanban__card-top,
.tw-kanban__card-details {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--tw-space-2);
}

.tw-kanban__card-top > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-kanban__card > small,
.tw-kanban__card-details {
  color: var(--tw-color-text-muted);
  font-size: var(--tw-font-micro);
  line-height: var(--tw-line-micro);
}

.tw-kanban__empty {
  display: grid;
  min-height: 132px;
  padding: var(--tw-space-3);
  place-items: center;
  color: var(--tw-color-text-muted);
  background: var(--tw-color-table-row);
  border-radius: var(--tw-radius);
  font-size: var(--tw-font-meta);
  line-height: var(--tw-line-meta);
  text-align: center;
}

.tw-kanban--crm {
  grid-template-columns: repeat(3, 288px);
  grid-auto-columns: 288px;
}

.tw-kanban--crm .tw-kanban__column,
.tw-kanban--crm .tw-kanban__card {
  min-width: 0;
  max-width: 288px;
}

@media (max-width: 900px) {
  .tw-registry-toolbar,
  .tw-filter-panel,
  .tw-registry-footer,
  .tw-selection-bar {
    padding-inline: var(--tw-content-gutter);
  }

  .tw-registry-toolbar {
    flex-wrap: wrap;
  }

  .tw-kanban {
    grid-template-columns: repeat(3, minmax(280px, 360px));
    grid-auto-columns: minmax(280px, 360px);
  }

  .tw-kanban--crm {
    grid-template-columns: repeat(3, 288px);
    grid-auto-columns: 288px;
  }
}

@container tw-registry (max-width: 820px) {
  .tw-registry-search {
    display: none;
  }

  .tw-registry-search-toggle {
    display: inline-grid;
  }
}

@media (max-width: 700px) {
  .tw-registry {
    min-height: calc(100dvh - var(--tw-page-header));
  }

  .tw-registry-toolbar {
    align-items: stretch;
  }

  .tw-registry-toolbar__group {
    width: 100%;
    overflow-x: auto;
  }

  .tw-registry-toolbar__group--end {
    margin-left: 0;
  }

  .tw-cell-stack > strong,
  .tw-cell-stack > a,
  .tw-cell-stack > span,
  .tw-cell-stack > small {
    white-space: normal;
  }

  .tw-registry-footer {
    grid-template-columns: 1fr auto;
    gap: var(--tw-space-1) var(--tw-space-2);
  }

  .tw-registry-footer__status {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tw-pagination {
    justify-content: flex-start;
  }

  .tw-registry-footer__size {
    grid-column: 2;
  }

  .tw-selection-bar > span {
    display: none;
  }

  .tw-selection-bar {
    padding-inline: var(--tw-space-2);
  }

  .tw-selection-bar__actions .tw-button {
    padding-inline: var(--tw-space-2);
  }

  .tw-kanban {
    grid-template-columns: minmax(260px, 86vw);
    grid-auto-columns: minmax(260px, 86vw);
    grid-auto-flow: column;
  }

  .tw-kanban--crm {
    grid-template-columns: minmax(260px, 86vw);
    grid-auto-columns: minmax(260px, 86vw);
  }
}