/*
 * The primary section-tab strip: a page's top-level view switch, on its own line under the page
 * header (Sales Report's Dashboard / Trends / Scorecard & Goals; the Broker Platform Utilization
 * Report's Brokers / Invoicing Compliance / Summary / Trends).
 *
 * Extracted from analytics.html when ISH-1207 put the utilization report on the same strip. It is
 * shared for the reason AGENTS.md gives and `css/broker-utilization-table.css` repeats: a second
 * inline copy is the hand-copied-per-page pattern ISH-253/510/558 have each spent effort undoing,
 * and the failure it produces is silent — both strips render, only differently. The utilization
 * report had drifted to its own third set of values (0.9375rem text, `--border-light`, a 2px
 * underline, 1.5rem gaps) against the Sales Report's, and neither page could tell.
 *
 * ⚠️ **This is the PRIMARY strip, and there is a secondary one.** `.tabs-container` / `.tab-btn`
 * (Overview / Recent Trends / Daily Load Matrix, and broker.html's record tabs) is the same
 * flat-underline family deliberately one step quieter — smaller text, a lighter rule. The size
 * difference IS the information: this row switches sections, that row switches views inside one.
 * Do not reconcile the two.
 *
 * ⚠️ **No `overflow-x` here, and the underline is an `::after`.** The utilization report's local
 * version carried `overflow-x: auto`, which makes the strip a scroll container on BOTH axes — so
 * its underline had to be an outset `box-shadow` rather than anything contributing to overflow, or
 * a row of four comfortably-fitting tabs grew a scrollbar. Without the overflow that trap does not
 * exist and the `::after` is free to paint over the strip's own rule. If a page ever genuinely
 * needs to scroll this strip, read that history in git before reaching for `overflow-x`.
 *
 * Hosts must define --border, --text-label, --text and --red.
 *
 * Markup: <nav class="main-tabs"> holding <button class="main-tab-btn">, with `active` on the
 * current one. A trailing control that should sit hard right takes `.main-tab-btn-right`.
 */

/* Its own border-bottom doubles as the header/section divider, which is why the strip carries no
   bottom margin of its own: on both hosts a filter bar is attached to the underside and supplies
   the gap below. A page with nothing attached beneath it has to supply that gap itself. */
.main-tabs {
  display: flex;
  align-items: center;
  gap: 2rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}

.main-tab-btn {
  background: none;
  border: none;
  padding: 0.7rem 0.25rem;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-label);
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.main-tab-btn:hover {
  color: var(--text);
}

.main-tab-btn.active {
  color: var(--red);
  font-weight: 700;
}

/* `bottom: -2px` puts the 3px marker over the strip's own 2px rule rather than above it, so the
   two read as one line. It is an ::after precisely so it contributes nothing to layout — see the
   overflow note in this file's header. */
.main-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
}

.main-tab-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Pushes this button to the right end of .main-tabs regardless of how many tabs before it are
   visible — the Sales Goals tab is admin-only and toggles display:none/flex, but margin-left: auto
   on a flex child always claims the remaining space ahead of it, so this stays right-aligned
   either way. */
.main-tab-btn-right {
  margin-left: auto;
}