/* M³GIM Tab Bar — the tabs inside the single KUG-Blau band, grouped into
 * Material, Perspektiven and Werkzeug (E-160). Ground, height and the hairline
 * below belong to .topbar in base.css; on that ground the tabs are pale white
 * and the active one goes to full white with a white underline.
 *
 * The groups are set apart by spacing plus a short vertical hairline. A visible
 * group label would put three permanently readable words of explanation into
 * the navigation, which Regel 8 rules out, and the single band has no second
 * line to carry it. Spacing alone leaves the boundary ambiguous at eight tabs of
 * differing width, so the hairline stands where the eye would otherwise not
 * hold the blocks apart (Regel 11, which bars horizontal rules; the bar keeps
 * its single bottom hairline).
 */

.tab-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Takes the free middle of the bar, so the info links end up on the right
     without a spacer element. */
  flex: 1 1 auto;
  min-width: 0;
  /* Contains its own sideways overflow so the page never scrolls sideways. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.tab-bar__group {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  padding: 0 var(--space-3);
}

.tab-bar__group:first-child { padding-left: 0; }
.tab-bar__group:last-child { padding-right: 0; }

/* Group boundary: hairline between two groups, drawn short and centred so it
   reads as a separator, not as a frame. */
.tab-bar__group + .tab-bar__group {
  position: relative;
}

.tab-bar__group + .tab-bar__group::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  block-size: 18px;
  border-inline-start: 1px solid color-mix(in oklch, var(--color-text-inverse) 30%, transparent);
  transform: translateY(-50%);
}

.tab-bar__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* One token for the side padding, so the underline below spans exactly the
     label and follows the narrower padding of the icon-only bar. */
  --tab-pad: var(--space-4);
  padding: 0 var(--tab-pad);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-soft);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* The underline is a pseudo-element, not the bottom border: it has to sit a few
   pixels above the band edge, otherwise it merges with the white work area
   below and stops reading as a marker (Projektleitung, 2026-09-04). It is
   always present and only changes colour, so no state shifts the layout. */
.tab-bar__tab::after {
  content: "";
  position: absolute;
  inset-inline: var(--tab-pad);
  inset-block-end: 4px;
  block-size: 2px;
  background: transparent;
  transition: background var(--transition-fast);
}

.tab-bar__tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* The active tab holds the full band height as a translucent white field and
   keeps the underline inside the band. Regel 6 keeps selection to a contour on
   the white work area; on the accent band a contour alone was not visible
   enough (Projektleitung, 2026-09-04). Hover takes the same field, weaker. */
.tab-bar__tab:hover {
  color: var(--color-text-inverse);
  background: color-mix(in oklch, var(--color-text-inverse) 8%, transparent);
  /* On the info pages the tab is a link into the application, so the band has
     to refuse the global underline on hover. */
  text-decoration: none;
}

.tab-bar__tab.active {
  color: var(--color-text-inverse);
  background: color-mix(in oklch, var(--color-text-inverse) 14%, transparent);
}

.tab-bar__tab.active::after {
  background: var(--color-text-inverse);
}

/* The accent is the ground here, so the focus ring takes the band's white. */
.tab-bar__tab:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: -2px;
}

.tab-bar__badge {
  color: color-mix(in oklch, var(--accent-soft) 70%, transparent);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.tab-bar__tab.active .tab-bar__badge {
  color: var(--color-text-inverse);
}

/* Below the same 900px break the sidebar uses (sidebar.css, container query on
   view-shell): the bar cannot be a container query itself, because it sits
   outside #main-content. It keeps one row and scrolls inside its own box. */
@media (max-width: 899px) {
  .tab-bar__tab {
    --tab-pad: var(--space-3);
    font-size: var(--text-xs);
  }

  .tab-bar__group {
    padding: 0 var(--space-2);
  }

  .tab-bar__tab svg {
    width: 15px;
    height: 15px;
  }
}

/* Narrow desktop: same band, same eight tabs, less air. Padding and the gap
   between symbol and word step down one token each so the whole row fits
   without scrolling inside the bar and without dropping a label; base.css
   frees the matching width in the lead and the info links. */
@media (min-width: 900px) and (max-width: 1365px) {
  .tab-bar__tab {
    --tab-pad: var(--space-2);
    gap: var(--space-1-5);
  }

  .tab-bar__group {
    padding: 0 var(--space-2);
  }
}

/* The tightest band of all: from 900px the labels come back, but brand, seven
   labels and the info links only just share the row, so word and symbol take
   the same smaller step the icon-only bar below 900px uses. */
@media (min-width: 900px) and (max-width: 1023px) {
  .tab-bar__tab {
    font-size: var(--text-xs);
  }

  .tab-bar__tab svg {
    width: 15px;
    height: 15px;
  }
}

/* Icons carry the tabs by default; the label is hidden through the shared
   .visually-hidden group in base.css, so the button keeps its accessible name
   (the icon is aria-hidden). From 900px up the label becomes visible again.
   The restore mirrors that group property for property; both belong together. */
@media (min-width: 900px) {
  .tab-bar__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* Register menu at the Indizes tab (E-230, cut of 2026-09-05). The element is
   one control, not a tab with a chevron glued on. Symbol, word and chevron
   belong together, the underline of the active tab carries them as one unit,
   and the menu falls flush below it. The panel is fixed rather than absolute,
   because the tab bar clips its own sideways overflow and would swallow a menu
   positioned inside it. */
.tab-menu {
  display: flex;
  align-items: stretch;
}

/* The chevron sits at the label, not at the button edge: a wider gap read as a
   second control glued to the tab. */
.tab-menu__name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.tab-menu__chevron {
  width: 11px;
  height: 11px;
  transition: transform var(--transition-fast);
}

.tab-menu__trigger[aria-expanded="true"] .tab-menu__chevron {
  transform: rotate(180deg);
}

.tab-menu__panel {
  position: fixed;
  z-index: var(--z-floating-menu);
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  border: 1px solid var(--border-color-light);
  /* The top edge takes the band colour so the panel reads as the open state of
     the control above it instead of a card floating under the bar. */
  border-top: 2px solid var(--accent);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  background: var(--surface);
  /* No heavier than the tooltip: the panel hangs on the band, it does not
     float above the work area. */
  box-shadow: var(--shadow-sm);
}

.tab-menu__item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 12px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1-5);
  /* Transparent by default, so the contour of the chosen entry costs no
     layout shift. */
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tab-menu__item:hover { background: var(--surface-3); }

/* The choice stands as contour and check (Regel 6). The family colour of the
   symbol says which register is meant, the text stays text. */
.tab-menu__item[aria-checked="true"] {
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
}

.tab-menu__check {
  width: 12px;
  height: 12px;
  color: var(--accent);
  opacity: 0;
}

.tab-menu__item[aria-checked="true"] .tab-menu__check { opacity: 1; }

.tab-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}