/* HARPS Version 2 — Accounts Receivable tabs.
 *
 * One owner for both AR tab groups: the primary row (Order / Deal / GL export)
 * and the compact row inside GL export (Revenue / Adjustments / Deals / Deal
 * Adjustments). Four places were styling `.tab-item` — v2-ar.css,
 * v2-gl-export.css, v2-density.css and an inline block on each page that
 * renders the markup — and they disagreed about weight, line-height and how the
 * underline was laid out. The result was a tab that resized when you selected
 * it: the primary row grew from 32px to 39px tall, the label re-measured from
 * regular to semibold, and every tab to the right slid sideways.
 *
 * The two groups are told apart by `data-gl-tab`, which only the GL subview
 * tabs carry. Their containers are not a reliable signal: both groups sit in
 * `.top-tab-bar` on most pages, and v2c's primary row has no `.top-tab-bar` at
 * all. Selectors are deliberately one step more specific than the rules they
 * settle (which top out at four classes), so this file wins on specificity
 * rather than relying on being linked last.
 */

/* ── Box ───────────────────────────────────────────────────────────────
   `position: relative` anchors the indicator. `margin: 0` retires the per-tab
   margins the older rules used for spacing — the gap between tabs belongs to
   the tab list, so it stays one value instead of one per tab. */
.card-header .tab-bar .tab-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  gap: 0;
}

.card-header .tab-bar .tab-item .tab-item-inner {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* ── Indicator ─────────────────────────────────────────────────────────
   Taken out of flow so it cannot contribute to the tab's height. It used to be
   a static block, present in both states but coloured only when active, which
   still let a difference in its height move the whole row. It now lines the
   bottom edge of the tab's own padding and is always the same size: an inactive
   tab reserves it as transparent rather than collapsing it. */
.card-header .tab-bar .tab-item .tab-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  visibility: visible;
}

/* Primary AR views: selected state is aria-selected from the view router.
   HARPS_TABLE.setMode() still toggles `.active` on Order when the period
   changes; that must not paint a second primary underline. Secondary GL
   tabs keep `.active` in sync with aria-selected. */
.card-header .tab-bar .tab-item:not([data-gl-tab]) .tab-underline {
  background: transparent;
}
.card-header .tab-bar .tab-item:not([data-gl-tab])[aria-selected="true"] .tab-underline,
.card-header .tab-bar .tab-item[data-gl-tab].active .tab-underline,
.card-header .tab-bar .tab-item[data-gl-tab][aria-selected="true"] .tab-underline {
  background: var(--ar-indigo, #4045c2);
}

/* ── Label ─────────────────────────────────────────────────────────────
   Weight is equal in every state. A semibold active label beside regular
   inactive ones re-measures the text on each selection, which is what widened
   the active tab and pushed its neighbours; the selected tab is already
   identified by colour and by the indicator. Every state is named explicitly so
   an `.active`-only rule elsewhere cannot reintroduce the difference. */
.card-header .tab-bar .tab-item:not([data-gl-tab]) .tab-item-text,
.card-header .tab-bar .tab-item:not([data-gl-tab]).active .tab-item-text,
.card-header .tab-bar .tab-item:not([data-gl-tab]):not(.active) .tab-item-text,
.card-header .tab-bar .tab-item:not([data-gl-tab]):not(.active):hover .tab-item-text {
  font-family: "Open Sans", var(--font-family, sans-serif);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

.card-header .tab-bar .tab-item[data-gl-tab] .tab-item-text,
.card-header .tab-bar .tab-item[data-gl-tab].active .tab-item-text,
.card-header .tab-bar .tab-item[data-gl-tab]:not(.active) .tab-item-text,
.card-header .tab-bar .tab-item[data-gl-tab]:not(.active):hover .tab-item-text {
  font-family: "Open Sans", var(--font-family, sans-serif);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

/* Colour is the one thing selection is allowed to change. */
.card-header .tab-bar .tab-item:not(.active) .tab-item-text {
  color: var(--ar-text-rest, #5b6770);
}

.card-header .tab-bar .tab-item:not(.active):hover .tab-item-text {
  color: var(--ar-text-strong, #1e2528);
}

.card-header .tab-bar .tab-item:not([data-gl-tab]).active .tab-item-text {
  color: var(--ar-text-rest, #5b6770);
}
.card-header .tab-bar .tab-item:not([data-gl-tab])[aria-selected="true"] .tab-item-text,
.card-header .tab-bar .tab-item[data-gl-tab].active .tab-item-text,
.card-header .tab-bar .tab-item[aria-selected="true"] .tab-item-text {
  color: var(--ar-indigo, #4045c2);
}

/* ── Group geometry ────────────────────────────────────────────────────
   Two variants of one component. Each is internally constant: the padding
   below the label is what the indicator sits in, so the totals hold whichever
   tab is selected. */
.card-header .tab-bar .tab-item:not([data-gl-tab]) {
  min-height: 39px;
  padding: 8px 16px 7px;
}

.card-header .tab-bar .tab-item:not([data-gl-tab]) .tab-underline {
  height: 3px;
}

/* GL subview is a subordinate switch: 14px labels and a 2px underline,
   against the primary row's 18px labels and 3px underline. Every tab keeps
   the same box, so the indicator does not move the row when selection changes. */
.card-header .tab-bar .tab-item[data-gl-tab] {
  min-height: 40px;
  height: 40px;
  padding: 10px 0 8px;
  border-radius: 0;
  background: transparent;
}

.card-header .tab-bar .tab-item[data-gl-tab] .tab-underline {
  display: block;
  height: 2px;
  visibility: hidden;
  background: transparent;
}

.card-header .tab-bar .tab-item[data-gl-tab].active .tab-underline,
.card-header .tab-bar .tab-item[data-gl-tab][aria-selected="true"] .tab-underline {
  visibility: visible;
  background: var(--ar-indigo, #4045c2);
}

.card-header .tab-bar .tab-item[data-gl-tab]:not(.active):hover,
.card-header .tab-bar .tab-item[data-gl-tab].active,
.card-header .tab-bar .tab-item[data-gl-tab][aria-selected="true"] {
  background: transparent;
}

.card-header .tab-bar .top-tab-bar:has(.tab-item[data-gl-tab]) {
  height: auto;
  min-height: 0;
  padding: 0;
  border-bottom: 1px solid var(--ar-divider, var(--gray-20, #d4dee3));
}

.card-header .tab-bar .tab-list:has(.tab-item[data-gl-tab]) {
  align-items: flex-end;
  gap: 24px;
  min-height: 40px;
  margin-left: 0;
}

.card-header .tab-bar .tab-item[data-gl-tab][aria-selected="true"]::after,
.card-header .tab-bar .tab-item[data-gl-tab].active::after {
  content: none;
  display: none;
  height: 0;
  background: transparent;
}

/* ── Focus ─────────────────────────────────────────────────────────────
   A pointer press leaves nothing behind; keyboard focus gets the ADS ring,
   drawn inside the tab so it cannot change the box either. */
.card-header .tab-bar .tab-item:focus:not(:focus-visible) {
  outline: none;
}

.card-header .tab-bar .tab-item:focus-visible {
  outline: 2px solid var(--ar-indigo, #4045c2);
  outline-offset: -2px;
  border-radius: 2px;
}

/* Present for completeness: a disabled tab keeps the component's box and only
   drops in contrast, so a group that gains one does not change height. */
.card-header .tab-bar .tab-item:disabled,
.card-header .tab-bar .tab-item[aria-disabled="true"] {
  cursor: default;
  opacity: 0.4;
}