/* AbodeTable 2D-virtualized table styles */

.abode-table {
  --at-row-height: 40px;
  --at-header-height: 40px;
  --at-category-height: 28px;
  --at-cell-padding: 16px;
  --at-font-size: 14px;

  font-family: inherit;
  font-size: var(--at-font-size);
  color: var(--foreground);
  background-color: var(--background);
}

/* Scroll container – scrolls both axes */
.abode-table-body {
  overflow: auto;
  flex: 1;
  position: relative;
  contain: strict;
  overflow-anchor: none;
}

/* Header – sticks to top of scroll container */
.abode-table-header {
  background-color: var(--background);
}

/* Category group row */
.abode-table-category-row {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.abode-table-category-cell {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--foreground);
  background-color: var(--muted);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}

.abode-table-category-label {
  position: sticky;
  padding-inline: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.abode-table-category-cell--active {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* Header row */
.abode-table-header-row {
  border-bottom: 1px solid var(--border);
}

.abode-table-header-cell {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  background-color: var(--background);
  border-right: 1px solid var(--border);
  overflow: hidden;
  box-sizing: border-box;
}

/* Column resize handle */
.abode-table-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 3;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.abode-table-resize-handle:hover,
.abode-table-resize-handle:active {
  background-color: var(--primary);
  opacity: 0.5;
}

/* Column drop indicator */
.abode-table-drop-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--primary);
  z-index: 4;
  pointer-events: none;
}

.abode-table-header-cell[draggable="true"] {
  cursor: grab;
}

.abode-table-header-cell[draggable="true"]:active {
  cursor: grabbing;
}

.abode-table-header-cell--active-category {
  background-color: color-mix(in srgb, var(--primary) 15%, var(--background));
  color: var(--accent-foreground);
}

.abode-table-header-cell--frozen {
  z-index: 1;
}

/* Data rows */
.abode-table-row {
  height: var(--at-row-height);
  border-bottom: 1px solid var(--border);
  background-color: var(--background);
  cursor: default;
}

.abode-table-row:hover {
  background-color: var(--accent);
}

.abode-table-row--selected {
  background-color: color-mix(in srgb, var(--muted) 50%, transparent) !important;
}

/* Data cells */
.abode-table-cell {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-inline: var(--at-cell-padding);
  overflow: hidden;
  border-right: 1px solid var(--border);
  height: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.abode-table-cell > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Pinned row section inherits bg from the row for hover/selection */
.abode-table-row-pinned {
  background: inherit;
}

/* Selection cell */
.abode-table-selection-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 35px;
  min-width: 35px;
  max-width: 35px;
}

/* Expand toggle cell */
.abode-table-expand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
}

.abode-table-expand-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 4px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted-foreground);
}

.abode-table-expand-btn:hover {
  background-color: var(--accent);
  color: var(--foreground);
}

/* Child rows */
.abode-table-child-row {
  background-color: var(--muted);
}

.abode-table-child-row:hover {
  background-color: color-mix(in srgb, var(--muted) 80%, var(--accent));
}

.abode-table-child-row .abode-table-cell {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Group row */
.abode-table-group-row {
  display: flex;
  align-items: center;
  height: var(--at-row-height);
  border-bottom: 1px solid var(--border);
  background-color: var(--muted);
  font-weight: 600;
  font-size: 0.8125rem;
  padding-inline: var(--at-cell-padding);
  cursor: pointer;
}

.abode-table-group-row:hover {
  background-color: color-mix(in srgb, var(--muted) 80%, var(--accent));
}

/* Loading indicator */
.abode-table-loading {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 6px;
  font-size: 0.875rem;
}

/* No radius variant */
.abode-table-no-radius {
  border-radius: 0;
}
/* AbodeCardTable – card-style list variant */

.abode-card-table {
  --act-row-height: 60px;
  --act-card-gap: 8px;
  --act-card-radius: var(--radius, 8px);
  --act-card-padding-x: 16px;
  --act-header-padding-x: 16px;
  --act-font-size: 14px;

  font-family: inherit;
  font-size: var(--act-font-size);
  color: var(--foreground);
}

/* Scroll container */
.abode-card-table-body {
  overflow: auto;
  flex: 1;
  position: relative;
}

/* Column headers row – lightweight labels */
.abode-card-table-header {
  display: flex;
  padding-inline: var(--act-header-padding-x);
  gap: 0;
}

.abode-card-table-header-cell {
  display: flex;
  align-items: center;
  padding-block: 8px;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.abode-card-table-header-cell--sortable {
  cursor: pointer;
}

.abode-card-table-header-cell--sortable:hover {
  color: var(--foreground);
}

/* Card row */
.abode-card-table-row {
  display: flex;
  align-items: center;
  height: var(--act-row-height);
  padding-inline: var(--act-card-padding-x);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--act-card-radius);
  overflow: hidden;
  cursor: default;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.abode-card-table-row:hover {
  border-color: color-mix(in srgb, var(--border) 70%, var(--foreground));
}

.abode-card-table-row--selected {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 4%, var(--background));
}

/* Cell within a card */
.abode-card-table-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.abode-card-table-cell > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Selection cell */
.abode-card-table-selection-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 35px;
  min-width: 35px;
  max-width: 35px;
}

/* Loading indicator */
.abode-card-table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Sort indicator */
.abode-card-table-sort-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 0.625rem;
  color: var(--muted-foreground);
}