/* SortHeader — sortable table column header
   States: idle / hover / asc / desc
   Idle = column is sortable but not active
   Hover = mouse over (or focused)
   Asc/Desc = column actively sorted, shows clear (×) button
*/

.sort-header {
  /* Horizontal by default: [X][icon][label] in LTR (label on right in RTL context).
     flex-wrap: wrap-reverse → only if truly no room, label gets the top row alone. */
  direction: ltr;
  display: inline-flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Google Sans','Assistant', sans-serif;
}

.sort-header__clear {
  display: inline-flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
  flex-shrink: 0;
}
.sort-header__clear svg { display: block; }

.sort-header__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  width: 18px;
  height: 18px;
  padding: 3.25px 0;
  border-radius: 999px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.sort-header__chev {
  display: block;
  width: 10px;
  height: 5px;
}
.sort-header__chev path {
  stroke: var(--ta-color-icon-disabled);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sort-header__label {
  direction: rtl;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  color: var(--ta-color-text-subtle);
  white-space: nowrap;
  text-align: right;
}

/* ── State: idle (default) ─────────────────────────────── */
/* gray text, gray chevrons — already the base */

/* ── State: hover ──────────────────────────────────────── */
.sort-header:hover .sort-header__label,
.sort-header[data-state="hover"] .sort-header__label {
  color: var(--ta-color-text-default);
}

/* ── State: asc / desc (active sort) ──────────────────── */
.sort-header[data-state="asc"] .sort-header__label,
.sort-header[data-state="desc"] .sort-header__label {
  color: var(--ta-color-text-default);
  font-weight: 600;
}

.sort-header[data-state="asc"] .sort-header__icon,
.sort-header[data-state="desc"] .sort-header__icon {
  background: var(--ta-color-brand-subtle);
}

.sort-header[data-state="asc"] .sort-header__clear,
.sort-header[data-state="desc"] .sort-header__clear {
  visibility: visible;
}

/* Chevron colors per sort direction */
.sort-header[data-state="asc"] .sort-header__chev--up path {
  stroke: var(--color-turquoise-600);
}
.sort-header[data-state="asc"] .sort-header__chev--down path {
  stroke: var(--color-turquoise-400);
}
.sort-header[data-state="desc"] .sort-header__chev--up path {
  stroke: var(--color-turquoise-400);
}
.sort-header[data-state="desc"] .sort-header__chev--down path {
  stroke: var(--color-turquoise-600);
}