/**
 * DHCW Single Record — Tabs
 * Reference HTML/CSS implementation, matched to the Figma "Menu Tab" set
 * (817:7219 on page 1753:21420): State=Default|Hover|Focus|Active|Disabled ×
 * Orientation=Horizontal|Vertical. Consumes @dhcw/sr-tokens.
 *
 * Tabs switch the VIEW: one tablist controls one panel region, and exactly one
 * tab is selected. Not the Segmented control — that picks a value within a view
 * and is a group of buttons with aria-pressed. If choosing changes what is
 * rendered below it, it is Tabs; if it filters or sets an option, it is the
 * Segmented control.
 *
 * Markup follows the WAI-ARIA tabs pattern: role="tablist" > role="tab" with
 * aria-selected and aria-controls, each pointing at a role="tabpanel". Keyboard
 * behaviour (roving tabindex, arrow keys, Home/End) is the consumer's job —
 * see tabs.stories.js for a working reference, and Tabs.jsx in @dhcw/sr-react.
 */

.sr-tabs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  /* The strip carries no track line. The Figma component does not draw one, and
     inventing a rule here would put code ahead of the design. If a track is
     wanted, it is a Figma change first. */
}

.sr-tabs__tab {
  /* 40px tall, 16px padding LEFT AND RIGHT ONLY, 8px gap — from the component.
     `padding: var(--space-4)` applied 16px on all four sides, which made every
     tab 52px tall (20px line box + 32px) rather than the specified 40px. The
     min-height was satisfied and so nothing complained. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2); /* 8px */
  min-height: 40px;
  padding: 0 var(--space-4); /* 0 16px */
  border: none;
  background: transparent;
  color: var(--sr-color-text-primary);
  font: var(--sr-type-body-s-font); /* 14/20 Regular */
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/**
 * There is deliberately NO width reservation here.
 *
 * The selected tab is Medium with 0.3px tracking and the rest are Regular with
 * none, so selecting a tab widens it by about 3px and nudges the tabs to its
 * right. An earlier version tried to absorb that by rendering the label again
 * at the selected weight in a `::after`, collapsed to zero height.
 *
 * That did not work. `.sr-tabs__tab` is a flex container, so the pseudo-element
 * became a flex ITEM and sat BESIDE the label with the 8px gap between them,
 * rather than behind it. Every tab came out roughly twice as wide as its own
 * text — 164px for a label measuring 62px. Nothing looked broken because every
 * tab was inflated by the same proportion, and the check it was meant to
 * satisfy — "does the strip shift on select" — passed for the wrong reason.
 * The bug only surfaced when the strip started wrapping and four tabs claimed
 * four rows.
 *
 * Doing it properly needs the label wrapped in its own element so the two
 * copies can be stacked in one grid cell; a bare text node cannot be placed.
 * That is not worth it for 3px. The better fix is in the design: keep one
 * weight and let colour and the 3px indicator carry selection, which is
 * already raised in components/tabs/spec.md. Until then the 3px reflow stays,
 * and it is far less harmful than what it replaced.
 */

/* Hover — soft page-background wash, brand-blue label. Unselected tabs only:
   the selected tab is already at its strongest and has nowhere to go. */
.sr-tabs__tab:hover:not([aria-selected='true']):not(:disabled) {
  background-color: var(--sr-color-surface-background);
  color: var(--sr-color-interactive-primary);
}

/* Selected — Medium label plus a 3px indicator on the leading edge.
   The indicator is an inset shadow rather than a border so it cannot change the
   40px height or nudge the label. */
.sr-tabs__tab[aria-selected='true'] {
  color: var(--sr-color-interactive-primary);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  box-shadow: inset 0 -3px 0 var(--sr-color-interactive-primary);
}

/* Focus — 2px Border/Focus ring (DDR-025), drawn outside so it does not disturb
   the layout. Selected AND focused keeps both: the ring is where you are, the
   indicator is what is showing. */
.sr-tabs__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}
.sr-tabs__tab[aria-selected='true']:focus-visible {
  box-shadow:
    inset 0 -3px 0 var(--sr-color-interactive-primary),
    0 0 0 2px var(--sr-color-border-focus);
}

.sr-tabs__tab:disabled,
.sr-tabs__tab[aria-disabled='true'] {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
  background: transparent;
}

/* Count badge — a pill, Interactive/Primary with white text.
   Decorative: the count must also reach the accessible name of the tab, or a
   screen reader announces the tab without it. */
.sr-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 20px;
  padding: 0 var(--space-2); /* 0 8px */
  border-radius: var(--radius-full);
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-on-fill);
  font: var(--sr-type-caption-font); /* 12/16 Regular */
  letter-spacing: var(--sr-type-caption-letter-spacing);
}

.sr-tabs__tab:disabled .sr-tabs__badge,
.sr-tabs__tab[aria-disabled='true'] .sr-tabs__badge {
  background-color: var(--sr-color-interactive-disabled);
}

/* ── Level=Secondary: sub-tab pills ────────────────────────────────────────
   The second level of a two-level tab structure (DDR-030). The outer tablist
   selects a group; that group's PANEL contains one of these.

   It is a pill, not a smaller underlined tab, because two identical strips
   stacked are ambiguous about which row you are on. It is a BARE pill — no
   track — because the track is what distinguishes the Segmented control:

     track = filter (aria-pressed, sets an option within this view)
     no track = navigate (role=tab, switches which view you see)

   32px against the parent's 40px. A child that outweighs its parent inverts
   the hierarchy. */

.sr-tabs--secondary {
  gap: var(--space-2); /* 8px — pills are separate controls, not a strip */
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.sr-tabs--secondary .sr-tabs__tab {
  min-height: 32px;
  padding: 0 var(--space-3); /* 0 12px */
  box-sizing: border-box;
  /* Border/Strong (Grey/500, 3.75:1) not Border/Default (1.37:1). The border
     is what says "this is an option", so it is a UI component boundary under
     WCAG 2.2 SC 1.4.11 and needs 3:1. Asserted by check:contrast. */
  border: 1px solid var(--sr-color-border-strong);
  border-radius: var(--radius-full);
  box-shadow: none; /* no indicator at this level — the fill carries selection */
  color: var(--sr-color-text-secondary);
}

/* Hover leaves the BORDER ALONE and moves only the wash and the label.
   Taking the border to Interactive/Primary — the treatment Checkbox and Radio
   use — would make a hovered pill identical to Button/Secondary, which is also
   transparent with a blue outline and a blue label. Only the radius would
   separate "switch to this view" from "do this thing". */
.sr-tabs--secondary .sr-tabs__tab:hover:not([aria-selected='true']):not(:disabled) {
  background-color: var(--sr-color-surface-accent);
  color: var(--sr-color-interactive-primary);
}

.sr-tabs--secondary .sr-tabs__tab[aria-selected='true'] {
  background-color: var(--sr-color-interactive-primary);
  border-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
  box-shadow: none;
}

/* The ring is offset by a 2px halo in the surface colour so the cyan never sits
   directly against the pill's own border. Same treatment as the Segmented
   control and the Switch. */
.sr-tabs--secondary .sr-tabs__tab:focus-visible,
.sr-tabs--secondary .sr-tabs__tab[aria-selected='true']:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--sr-color-surface-section-cards),
    0 0 0 4px var(--sr-color-border-focus);
}

.sr-tabs--secondary .sr-tabs__tab:disabled,
.sr-tabs--secondary .sr-tabs__tab[aria-disabled='true'] {
  border-color: var(--sr-color-border-disabled);
  color: var(--sr-color-text-disabled);
  background: transparent;
}

/* Vertical secondary stacks the pills and lets each hug its own label, rather
   than stretching them all to the widest — a column of full-width pills reads
   as a menu, not as a set of options. */
.sr-tabs--secondary.sr-tabs--vertical {
  align-items: flex-start;
}
.sr-tabs--secondary.sr-tabs--vertical .sr-tabs__tab[aria-selected='true'] {
  box-shadow: none;
}

/* ── Vertical ──────────────────────────────────────────────────────────────
   Same tab, stacked, with the indicator on the left edge. Set
   aria-orientation="vertical" on the tablist so Up/Down become the arrow keys
   a screen reader user is told to press. */

.sr-tabs--vertical {
  flex-direction: column;
  align-items: stretch;
}

.sr-tabs--vertical .sr-tabs__tab {
  justify-content: flex-start;
  text-align: left;
}

.sr-tabs--vertical .sr-tabs__tab[aria-selected='true'] {
  box-shadow: inset 3px 0 0 var(--sr-color-interactive-primary);
}

.sr-tabs--vertical .sr-tabs__tab[aria-selected='true']:focus-visible {
  box-shadow:
    inset 3px 0 0 var(--sr-color-interactive-primary),
    0 0 0 2px var(--sr-color-border-focus);
}

/* ── Panels ───────────────────────────────────────────────────────────────
   The panel is focusable so that a keyboard user who tabs off the tablist lands
   in the content it controls rather than skipping past it. */

.sr-tabs__panel {
  padding: var(--space-4) 0;
  color: var(--sr-color-text-primary);
  font: var(--sr-type-body-m-font);
}

.sr-tabs__panel:focus-visible {
  outline: 2px solid var(--sr-color-border-focus);
  outline-offset: 2px;
}

.sr-tabs__panel[hidden] {
  display: none;
}

/* ── Overflow ─────────────────────────────────────────────────────────────
   A horizontal strip that outgrows its container WRAPS onto another row.

   This used to scroll, on the argument that a wrapped tablist reads as two
   rows of unrelated controls. That argument lost to a stronger one: a
   horizontally scrolling strip gives no indication that anything is off-screen,
   so it hides tabs from the very people who most need to see them. Clinicians
   are explicit that hidden navigation costs them — it adds recall effort and
   damages discoverability. Wrapping shows every tab at once, which is the point
   of a tab strip. Vertical stacks are unaffected.

   The row-gap is deliberate and small: 4px detaches a selected tab's 3px bottom
   indicator from the row beneath it, so the indicator cannot read as a rule
   over the following row, while staying tight enough that the rows still read
   as one control. */

.sr-tabs:not(.sr-tabs--vertical) {
  flex-wrap: wrap;
  row-gap: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  .sr-tabs__tab {
    transition: none;
  }
}