/**
 * table-sort.css — FacultyPage Theme
 *
 * Fixes table sorting visual styles by targeting the EXACT classes
 * that Drupal's tableheader.js and Views add at runtime:
 *
 *   th.active          ← Drupal tableheader.js adds this (NOT .is-active)
 *   th.active a        ← the sort link inside the active column
 *   a.is-active        ← Views sometimes uses this on the link itself
 *   .views-field       ← Views column class
 *   [aria-sort]        ← ARIA attribute tableheader.js sets
 *   .tablesort--asc    ← Drupal 10 tableheader sort indicator class
 *   .tablesort--desc   ← Drupal 10 tableheader sort indicator class
 *
 * Load order: weight 1 so it loads AFTER table.css (weight 0).
 */

/* ════════════════════════════════════════════════════════════
   SORTABLE HEADER CELL
   Drupal's tableheader.js makes every <th> with a sort link
   clickable and adds .active to the currently sorted column.
   ════════════════════════════════════════════════════════════ */

/* All sortable header cells — show pointer cursor */
.fp-table thead th a,
table.views-table thead th a,
table thead th a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}

.fp-table thead th a:hover,
table.views-table thead th a:hover,
table thead th a:hover {
  color: var(--fp-terra);
}

/* ── ACTIVE SORTED COLUMN ──────────────────────────────────────────────────
   Drupal tableheader.js adds class="active" to the sorted <th>.
   ─────────────────────────────────────────────────────────────────────── */
.fp-table thead th.active,
table.views-table thead th.active,
table thead th.active {
  background: var(--fp-terra-pale) !important;
  color: var(--fp-terra-dark);
}

.fp-table thead th.active a,
table.views-table thead th.active a,
table thead th.active a {
  color: var(--fp-terra-dark);
  font-weight: 700;
}

/* aria-sort attribute (set by Drupal 10 tableheader.js) */
.fp-table thead th[aria-sort],
table thead th[aria-sort] {
  background: var(--fp-terra-pale) !important;
  color: var(--fp-terra-dark);
}

/* Views link active class */
.fp-table thead th a.is-active,
table thead th a.is-active {
  color: var(--fp-terra-dark);
  font-weight: 700;
}

/* ── SORT DIRECTION INDICATORS ─────────────────────────────────────────────
   Drupal 10 tableheader.js injects <span class="tablesort tablesort--asc">
   or <span class="tablesort tablesort--desc"> inside the <a> tag.
   ─────────────────────────────────────────────────────────────────────── */
.tablesort {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Replace Drupal's default arrow images with CSS unicode arrows */
.tablesort--asc::after {
  content: '↑';
  color: var(--fp-terra);
  line-height: 1;
}

.tablesort--desc::after {
  content: '↓';
  color: var(--fp-terra);
  line-height: 1;
}

/* Hide Drupal's background-image arrow (replaced by ::after above) */
.tablesort--asc,
.tablesort--desc {
  background-image: none !important;
}

/* Unsorted indicator on hover */
.fp-table thead th:not(.active) a:hover::after,
table thead th:not(.active) a:hover::after {
  content: '⇅';  
  color: var(--fp-sand);
  margin-left: 0.25rem;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   VIEWS TABLE SORT SPECIFICS
   Views outputs slightly different markup — target both
   ════════════════════════════════════════════════════════════ */
table.views-table {
  width: 100%;
  border-collapse: collapse;
}

table.views-table thead th {
  padding: 0.8rem 1.25rem;
  font-family: 'Space Mono', monospace;  
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fp-mid);
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--fp-border-strong);
  background: var(--fp-paper);
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

table.views-table thead th:hover {
  background: var(--fp-terra-pale);
  color: var(--fp-terra-dark);
}

table.views-table tbody td {
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--fp-border);  
  color: var(--fp-charcoal);
}

table.views-table tbody tr:last-child td {
  border-bottom: none;
}

table.views-table tbody tr:hover td {
  background: var(--fp-off-white);
}

/* First/last column padding */
table.views-table thead th:first-child,
table.views-table tbody td:first-child { padding-left: 1.5rem; }
table.views-table thead th:last-child,
table.views-table tbody td:last-child  { padding-right: 1.5rem; }

/* ════════════════════════════════════════════════════════════
   DRAGGABLE ROWS (tabledrag.js)
   Drupal adds class="drag" during drag and "drag-previous"
   to the row above the drop target.
   ════════════════════════════════════════════════════════════ */
tr.drag td {
  background: var(--fp-terra-pale) !important;
  outline: 2px dashed var(--fp-terra);
  outline-offset: -2px;
}

tr.drag-previous td {
  background: var(--fp-off-white);
}

/* Drupal's tabledrag handle */
a.tabledrag-handle,
.tabledrag-handle {
  cursor: grab;
  color: var(--fp-sand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

a.tabledrag-handle:hover,
.tabledrag-handle:hover {
  color: var(--fp-mid);
  background: var(--fp-paper);
}

a.tabledrag-handle .handle {
  /* Drupal renders a div.handle — style it */
  width: 14px;
  height: 14px;
  background-image: none;
  background: none;
}

/* Replace Drupal's sprite with text handle icon */
a.tabledrag-handle .handle::before {
  content: '⠿';  
  color: inherit;
  line-height: 1;
  display: block;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  table.views-table thead th,
  .fp-table thead th {
    padding: 0.65rem 1rem;    
  }

  table.views-table tbody td,
  .fp-table tbody td {
    padding: 0.65rem 1rem;    
  }
}