/* ==========================================================================
   Companies and People tables (modules/features/record-table.js)
   The filter bar on top, then a quiet table that scrolls under a pinned
   header: the name opens the record, other cells edit in place, a ⋯ shows
   on hover. Phones get the list in phone.css instead.
   ========================================================================== */

.rt-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-height, 52px));
  min-height: 0;
}

.rt-fb {
  flex-shrink: 0;
  padding: 12px 20px;
}

.rt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rt-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-top: 1px solid var(--border-color) !important;
  background: var(--bg-primary);
}

.rt-container[hidden] {
  display: none;
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.rt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13.5px;
}

.rt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

.rt-th[data-sortable] {
  cursor: pointer;
}

.rt-th[data-sortable]:hover,
.rt-th.is-sorted {
  color: var(--text-primary);
}

.rt-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
}

.rt-th-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rt-sort-icon {
  flex-shrink: 0;
}

/* ── Resizing: the right edge of each header ──────────────────────────── */

.rt-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

/* A quiet line on the column edge; blue while dragging */
.rt-resize::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 0;
  width: 1px;
  border-radius: 1px;
  background: var(--border-color);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.rt-table thead:hover .rt-resize::after {
  opacity: 1;
}

.rt-resize:hover::after,
.rt-resize:focus-visible::after,
.rt-th.is-resizing .rt-resize::after {
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: var(--color-primary, #2f5fd0);
  opacity: 1;
}

.rt-page.is-resizing,
.rt-page.is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* The filler: nothing until columns have set widths, then the spare room */
.rt-table.spreadsheet-table th.rt-fill,
.rt-table.spreadsheet-table td.rt-fill,
.rt-table.spreadsheet-table tbody tr td.rt-fill:last-child {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.rt-table.spreadsheet-table.is-sized th.rt-fill,
.rt-table.spreadsheet-table.is-sized tbody tr td.rt-fill:last-child {
  width: auto !important;
}

.rt-sort-icon {
  display: inline-flex;
}

.rt-table thead th.rt-th {
  overflow: hidden;
}

.rt-th-select,
.rt-td-select {
  width: 44px;
}

.rt-th-more,
.rt-td-more {
  width: 44px;
}

/* The old grid pinned its last column (Actions) with a shadow. Here the
   last data column is ordinary, a filler takes the spare width, and only
   the ⋯ stays pinned to the right edge when the table scrolls sideways. */
.rt-table th:last-child,
.rt-table td:last-child,
.rt-table tbody tr td:last-child,
.rt-table tbody tr:nth-child(even) td:last-child,
.rt-table tbody tr:nth-child(odd) td:last-child {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-left: 0 !important;
  box-shadow: none !important;
  background: var(--bg-primary) !important;
}

/* Fixed columns keep their width (even when last); the rest share the spare */
.rt-table.spreadsheet-table th.rt-th[data-w] {
  width: var(--w) !important;
}

.rt-table th.rt-th-more,
.rt-table td.rt-td-more,
.rt-table tbody tr td.rt-td-more:last-child {
  position: sticky !important;
  right: 0;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  border-right: 0 !important;
}

.rt-table thead th.rt-th-more {
  z-index: 3 !important;
}

[data-theme] .rt-table.spreadsheet-table thead th:last-child,
.rt-table.spreadsheet-table thead th:last-child {
  background: var(--bg-primary) !important;
}

.rt-table tbody tr:hover td:last-child,
.rt-table tbody tr.is-menu-open td:last-child {
  background: var(--row-hover, var(--bg-hover)) !important;
  border-top: 0 !important;
}

.rt-table tbody td {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-primary);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.rt-table tbody tr:hover td,
.rt-table tbody tr.is-menu-open td {
  background: var(--row-hover, var(--bg-hover)) !important;
}

.rt-table .spreadsheet-cell {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.rt-table td.rt-td-select .spreadsheet-cell,
.rt-table td.rt-td-more .spreadsheet-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Cells that edit in place say so on hover */
.rt-table td.rt-editable {
  cursor: text;
}

.rt-table tbody tr:hover td.rt-editable:hover {
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.rt-table td.editing-cell {
  background: var(--row-hover, var(--bg-hover)) !important;
}

/* ── Editing a cell: a box over it ─────────────────────────────────────── */

.rt-cell-editor {
  position: fixed;
  z-index: var(--z-modal, 1000);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  box-shadow: 0 12px 32px -12px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.06);
  font-size: 13.5px;
  color: var(--text-primary);
  animation: rt-pop 0.12s ease-out;
}

@keyframes rt-pop {
  from { opacity: 0; transform: translateY(-2px); }
}

.rt-cell-input {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px 12px;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  font: inherit;
  line-height: 1.45;
  color: inherit;
}

.rt-cell-input::selection,
.rt-cell-search::selection {
  background: rgba(var(--color-primary-rgb), 0.18);
  color: inherit;
}

.rt-cell-search {
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: inherit;
}

.rt-cell-search::placeholder {
  color: var(--text-muted);
}

.rt-cell-options {
  max-height: 260px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
}

.rt-cell-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
}

.rt-cell-option[hidden] {
  display: none;
}

.rt-cell-option.is-active {
  background: var(--bg-hover);
}

.rt-cell-option.is-current {
  font-weight: 500;
}

.rt-cell-option.is-clear {
  margin-top: 4px;
  border-top: 1px solid var(--border-color-light, var(--border-color));
  border-radius: 0 0 6px 6px;
  color: var(--text-muted);
}

/* The name opens the record */
.rt-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
}

.rt-name .company-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-name:hover .company-title-text {
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 3px;
}

.rt-name .company-badge-icon {
  flex-shrink: 0;
}

.rt-person-avatar {
  border-radius: 50% !important;
}

.rt-muted {
  color: var(--text-muted);
}

.rt-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Figures still loading */
.rt-pending {
  display: inline-block;
  width: 44px;
  height: 9px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  vertical-align: middle;
  animation: rt-pulse 1.2s ease-in-out infinite;
}

@keyframes rt-pulse {
  50% { opacity: 0.45; }
}

/* ── ⋯ on hover, and its menu ──────────────────────────────────────────── */

.rt-more {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
}

.rt-table tbody tr:hover .rt-more,
.rt-table tbody tr.is-menu-open .rt-more,
.rt-more:focus-visible {
  opacity: 1;
}

.rt-more:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

@media (hover: none) {
  .rt-more {
    opacity: 1;
  }
}

.rt-menu {
  position: fixed;
  z-index: var(--z-modal, 1000);
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  box-shadow: 0 10px 30px -10px rgba(16, 24, 40, 0.25), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.rt-menu-item {
  height: 32px;
  min-height: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.rt-menu-item:hover,
.rt-menu-item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.rt-menu-item.is-danger {
  color: var(--color-danger, #dc2626);
}

/* ── Empty ─────────────────────────────────────────────────────────────── */

.rt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 72px 24px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.rt-empty[hidden] {
  display: none;
}

.rt-empty h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.rt-empty p {
  max-width: 380px;
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.rt-empty .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rt-sentinel {
  height: 1px;
}

/* Ticked rows carry the tint across the filler and the ⋯ too */
.rt-table tbody tr:has(.row-select:checked) td.rt-td-more {
  background: rgba(var(--color-primary-rgb), 0.06) !important;
}

[data-theme="dark"] .rt-table tbody tr:has(.row-select:checked) td.rt-td-more {
  background: rgba(var(--color-primary-rgb), 0.12) !important;
}

/* The app's input focus ring would draw a second outline inside the box */
.rt-cell-editor .rt-cell-search:focus,
.rt-cell-editor .rt-cell-input:focus {
  border-color: var(--border-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

.rt-cell-editor .rt-cell-input:focus {
  border: 0 !important;
}