/* My Transactions portal page — row lines + sortable header affordance.
 * Loaded by mjvnAjaxTools only for the portal-transactions WP page slug, so these selectors do
 * not need a wrapper to scope them. The previous version keyed everything off
 * "#transWrapper #data-table ...", which meant the borders silently did nothing if the table was
 * not nested where that assumed. Scoping on the table id alone is both simpler and safer here.
 */

#data-table thead th.mjvn-sortable {
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  padding-right: 18px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Neutral affordance on every sortable header, replaced by a solid arrow on the active one. */
#data-table thead th.mjvn-sortable::after {
  content: '\2195';                 /* ↕ */
  position: absolute;
  right: 6px;
  opacity: .35;
  font-size: .85em;
}

#data-table thead th.mjvn-asc::after  { content: '\25B2'; opacity: 1; }   /* ▲ */
#data-table thead th.mjvn-desc::after { content: '\25BC'; opacity: 1; }   /* ▼ */

/* Soft separation lines between transactions.
 * Belt and braces on purpose: the border is declared !important, AND an inset box-shadow draws
 * the same line independently. The shadow does not depend on border-collapse and is far harder
 * for a stray theme rule to cancel, so if one is overridden the other still shows.
 * Note the DataTables stylesheet enqueued for this slug is entirely scoped to table.dataTable,
 * and we no longer initialise DataTables, so its row-border rules never apply — these lines are
 * the only thing drawing separation now. */
#data-table {
  border-collapse: collapse !important;
}

#data-table tbody tr td {
  border-bottom: 1px solid #dcdcdc !important;
  box-shadow: inset 0 -1px 0 #dcdcdc;
}

/* The CFWD / Balance total is not a transaction — give it a slightly firmer rule above it and
 * no line below. */
#data-table tbody tr:last-child td {
  border-bottom: none !important;
  box-shadow: none;
  border-top: 2px solid #c8c8c8 !important;
}

#data-table tbody tr:hover td {
  background-color: #fafafa;
}