/* /sales/recordings (Sales::RecordingsController) — the session recordings
 * list and the player page. The player's own styles are rrweb-player's,
 * vendor/assets/stylesheets/rrweb-player.css, loaded on the player page only. */

.sales-recordings {
  max-width: 72rem;
  margin-inline: auto;
  color: var(--text-primary);
}

.sales-recordings-state { margin: 0; }

.sales-recordings-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-12);
}

.sales-recordings-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 32px;
}

.sales-recordings-table-wrap { overflow-x: auto; }

.sales-recordings-table {
  width: 100%;
  border-collapse: collapse;

  & th, & td {
    padding: var(--spacing-4) var(--spacing-8);
    border-top: var(--stroke-weight-1) solid var(--border-subtle);
    text-align: left;
    vertical-align: top;
  }

  & th { color: var(--text-tertiary); font-weight: var(--font-weight-400); }
}

.sales-recordings-pager {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-12);
}

.sales-recordings-player { overflow-x: auto; }

.sales-recordings-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--spacing-4) var(--spacing-16);
  margin-block: var(--spacing-12);

  & dt { color: var(--text-tertiary); }
  & dd { margin: 0; }
}

.sales-recordings-timeline {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-12);
  padding: 0;
  list-style: none;
}

.sales-recordings-seek {
  display: flex;
  gap: var(--spacing-12);
  width: 100%;
  padding: var(--spacing-4) var(--spacing-8);
  color: var(--text-primary);
  text-align: left;
  background: none;
  border: 0;
  border-top: var(--stroke-weight-1) solid var(--border-subtle);
  cursor: pointer;

  &:hover, &:focus-visible { background: var(--background-hover); }
}

.sales-recordings-offset {
  flex-shrink: 0;
  min-width: 3rem;
  color: var(--text-tertiary);
  font-family: var(--font-family-mono);
}

.sales-recordings-timeline-row--page .sales-recordings-seek { font-weight: var(--font-weight-600); }

.sales-recordings-timeline-row--rage-click .sales-recordings-seek { color: var(--text-danger); }