/* ══════════════════════════════════════════════════════════════════════
   ADS table column header — shared across every V2 data table
   ──────────────────────────────────────────────────────────────────────
   Figma HARPS 5099:59896 (Data Table / Example Row Header): the label is
   ADS body/semibold/sm on #666D70.

   V2 ships two header shapes and this file serves both:
     .th-cell > .th-label + .th-sort        Accounts Receivable (Order,
                                            Deal, GL export tabs)
     th > .sort-trigger > .sort-label
          + .sort-icon                      Accounts Payable, GL export,
                                            dashboard

   Sort indicator: hidden until its own column is the active sort. Both
   shapes already record that state on the header itself — `data-sort` for
   AR, `data-sort-dir` for the others — so visibility is derived from the
   real sort rather than a second flag that could drift out of step.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Label typography ─────────────────────────────────────────────────
   Scoped to header elements only, so body text, links, chips, tabs, and
   pagination are untouched.

   The `html:not([data-theme="wireframe"])` prefix is load-bearing twice
   over: it lifts these rules past `html[data-theme="ads"] .th-label` in
   ads-theme.css, which would otherwise keep repainting the label, and it
   leaves wireframe on its own greyscale header colour. */
html:not([data-theme="wireframe"]) .th-label,
/* .inv-th-label is the Order → Invoice expandable row's nested table header
   (5111:69471/73210) — same ADS header treatment, so it never drifts from
   the parent Order/Deal header it sits directly under. */
html:not([data-theme="wireframe"]) .inv-th-label,
html:not([data-theme="wireframe"]) .sort-trigger,
html:not([data-theme="wireframe"]) .sort-label,
html:not([data-theme="wireframe"]) thead th,
/* The two below only exist to match specificity. assets/ads-theme.css sets
   `color` and a `font` shorthand on these same dashboard tables with
   !important behind page IDs, and V1 loads that file too, so it can't be
   edited. Repeating its ID anchors here — rather than forking the values —
   keeps this the single place the header style is defined. */
html:not([data-theme="wireframe"]) #owa-content .owa-table thead th,
html:not([data-theme="wireframe"]) #revsummary-content .owa-table thead th,
/* The Revenue Summary widget is anchored harder still in that same file —
   `:nth-child(n+2)` and a second id on #revtab-product. `:not([hidden])`
   here is purely a specificity counterweight, not a state test. */
html:not([data-theme="wireframe"]) #revsummary-content .owa-table thead th:not([hidden]),
html:not([data-theme="wireframe"]) #revsummary-content #revtab-product .owa-table thead th:not([hidden]) {
  /* !important throughout for the same reason: the rule being displaced is
     itself !important, so nothing weaker can reach these headers. */
  color: #666d70 !important;
  font-family: var(--font-family, "Open Sans") !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}

/* ── Sort indicator ───────────────────────────────────────────────────
   The arrow is drawn as a mask so it takes the label's colour, and it is
   the up half of the Feather Arrow-Down&Up glyph the header already used —
   same geometry, one direction at a time. Descending is the same mark
   rotated, so the two directions can't drift apart visually. */
.th-sort,
.sort-icon {
  display: none;
}

/* The original markup nests the two-way glyph here. It stays in the DOM so
   no page template has to change; only the active arrow is ever painted. */
.th-sort > svg,
.sort-icon > svg {
  display: none;
}

.th-cell[data-sort="asc"] .th-sort,
.th-cell[data-sort="desc"] .th-sort,
.sort-trigger[data-sort-dir="asc"] .sort-icon,
.sort-trigger[data-sort-dir="desc"] .sort-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--ads-sort-arrow) center / 12px 12px no-repeat;
  mask: var(--ads-sort-arrow) center / 12px 12px no-repeat;
}

.th-cell[data-sort="desc"] .th-sort,
.sort-trigger[data-sort-dir="desc"] .sort-icon {
  transform: rotate(180deg);
}

/* An unsorted column advertises that it can be sorted only while the pointer
   is over it or it holds keyboard focus, so the header row is not a wall of
   permanent arrows. The sorted column keeps its arrow from the rules above.
   The hint is muted so it never reads as the active sort. */
.th-cell[data-col]:hover .th-sort,
.th-cell[data-col]:hover .sort-icon,
.th-cell[data-col]:focus-visible .th-sort,
.th-cell[data-col]:focus-visible .sort-icon,
.th-cell[data-col]:focus-within .sort-icon,
.sort-trigger:hover .sort-icon,
.sort-trigger:focus-visible .sort-icon,
thead th:hover .sort-icon,
thead th:focus-within .sort-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--ads-sort-arrow) center / 12px 12px no-repeat;
  mask: var(--ads-sort-arrow) center / 12px 12px no-repeat;
  opacity: 0.45;
}

/* Once a column is actually sorted its arrow is fully opaque in both
   directions, including while hovered. */
.th-cell[data-sort="asc"] .th-sort,
.th-cell[data-sort="desc"] .th-sort,
.sort-trigger[data-sort-dir="asc"] .sort-icon,
.sort-trigger[data-sort-dir="desc"] .sort-icon {
  opacity: 1;
}

:root {
  --ads-sort-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path transform='translate(-2.5,0)' d='M8.5 1.875C8.66576 1.875 8.82473 1.94085 8.94194 2.05806L10.4419 3.55806C10.686 3.80214 10.686 4.19786 10.4419 4.44194C10.1979 4.68602 9.80214 4.68602 9.55806 4.44194L9.125 4.00888V9.5C9.125 9.84518 8.84518 10.125 8.5 10.125C8.15482 10.125 7.875 9.84518 7.875 9.5V4.00888L7.44194 4.44194C7.19786 4.68602 6.80214 4.68602 6.55806 4.44194C6.31398 4.19786 6.31398 3.80214 6.55806 3.55806L8.05806 2.05806C8.17527 1.94085 8.33424 1.875 8.5 1.875Z'/></svg>");
}

/* ── Interaction affordance ───────────────────────────────────────────
   Only headers the page wired for sorting get the pointer; a plain header
   must not look interactive. */
.th-cell[data-col],
.sort-trigger {
  cursor: pointer;
}

thead th:not(:has(.sort-trigger)) {
  cursor: default;
}

/* Keyboard focus uses the ADS ring. No background, border, or chip is
   added to a header — focus is the only thing that draws. */
.th-cell[data-col]:focus-visible,
.sort-trigger:focus-visible {
  outline: 2px solid var(--ads-brand, #4045c2);
  outline-offset: -2px;
  border-radius: 2px;
}

/* ── Non-functional sort affordance ───────────────────────────────────
   The generated Order/Invoice detail tables ship a static two-way arrow
   (.th-sort-icon) next to every header label, but those tables have no sort
   behaviour at all: no handler, no data-sort, no aria-sort. A permanent
   bidirectional arrow on a header that cannot be sorted advertises an
   interaction that does not exist, so it is hidden here rather than in each
   of the ~770 pages that carry it. The label itself keeps the shared ADS
   header typography above.

   If those tables ever gain real sorting, delete this rule and give them the
   same data-sort contract the Accounts Receivable header already uses; the
   show/hide rules above will then light the active column automatically. */
.th-sort-icon {
  display: none;
}