/* Application styles */

/* An index table whose last column stays in place while the rest scrolls under it (SMA-107).
 *
 * Opt in from the page, not from every cell: partials/_index.html.erb takes a `pinned_actions`
 * local and puts this class on the table, so the Actions column stops being pushed past the edge
 * once a page adds enough columns to overflow. A table that fits its container is unchanged.
 *
 * The backgrounds are not decoration. A sticky cell is transparent, so without them the scrolling
 * columns show through the pinned one. They repeat the classes the markup already uses for the
 * header (gray-100 / gray-700), the row (white / gray-800) and its hover (gray-100 / gray-700),
 * because a sticky cell cannot inherit the row's background.
 *
 * Requires that no ancestor between the table and the horizontal scroll container sets
 * `overflow: hidden`: that would become the scroll container the cell sticks to, and the column
 * would never move. partials/_index.html.erb drops that wrapper when this is on. */
/* Tailwind's preflight collapses every table's borders, and a cell in a collapsed-border table owns
 * no borders of its own: WebKit does not position such a cell as sticky at all, and the border
 * below would not travel with the pinned column. Separating them with no spacing leaves the table
 * looking exactly as it did. */
.table-pinned-actions {
  border-collapse: separate;
  border-spacing: 0;
}

.table-pinned-actions th:last-child,
.table-pinned-actions td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background-color: #ffffff;
  border-left: 1px solid #e5e7eb;
}

.table-pinned-actions thead th:last-child {
  background-color: #f3f4f6;
}

.table-pinned-actions tbody tr:hover td:last-child {
  background-color: #f3f4f6;
}

.dark .table-pinned-actions th:last-child,
.dark .table-pinned-actions td:last-child {
  background-color: #1f2937;
  border-left-color: #374151;
}

.dark .table-pinned-actions thead th:last-child,
.dark .table-pinned-actions tbody tr:hover td:last-child {
  background-color: #374151;
}