/* ── Shared results chrome ─────────────────────────────────────────────────────
   The unified results header used by both products (Spot + VAR): an identity tier
   (name + horizontal dot-separated meta + optional headline/actions) above a
   horizontal, sticky section tab strip. Loaded by both `spot/results/base.html`
   and every `var/results/*` page, so keep it product-neutral — VAR-only styling
   stays in var-results.css, Spot-only chart layout in results.css.

   The wrapper must NOT generate a box. A sticky element is confined to its parent's
   box, so while the nav lived inside a short .results-chrome it could only stick
   until that wrapper scrolled off — i.e. it scrolled away with the page. `display:
   contents` drops the wrapper from the box tree, so the nav's containing block
   becomes the full-height page container and it pins for the entire scroll. */

.results-chrome {
  display: contents;
}

.results-chrome-bar {
  display: flex;
  /* Centre the action cluster against the title so the buttons sit level with the
     headline rather than floating above it (issue #3144). */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  /* Tight to the top — the banner is the page header, so it hugs the chrome above. */
  padding: 0 0 0.6rem;
}

.results-chrome-identity {
  min-width: 0;
}

.results-chrome-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.results-chrome-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  /* High-contrast primary text so the name reads as the clear headline. The former
     amber wash was low-contrast on the cream banner and easy to lose (issue #3144).
     The token flips to near-white under the dark theme, so it stays legible. */
  color: var(--varial-gray-900, #131210);
}

.results-chrome-status {
  font-size: 0.7rem;
}

.results-chrome-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
  /* Quieter than the section tabs below it — smaller and lighter so the meta line
     supports the title without competing with the tab strip (issue #3144). */
  font-size: 0.75rem;
  color: var(--varial-gray-400, #9A9690);
}

.results-chrome-sub a {
  color: var(--varial-gray-600, #4D4A46);
  text-decoration: none;
}

.results-chrome-sub a:hover {
  color: var(--varial-primary, #2563EB);
  text-decoration: underline;
}

.results-chrome-dot {
  color: var(--varial-gray-400, #9A9690);
}

.results-chrome-basis {
  cursor: help;
}

/* Right-hand action cluster in tier 1 (Spot: View Inputs / Download RRP). */
.results-chrome-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The Download RRP menu opens from the (non-sticky) identity tier but drops over
   the sticky nav below it, whose solid background sits at z-index 1020 — Bootstrap's
   default dropdown z-index (1000) left the menu hidden behind it. Lift it above the
   nav (issue #3144). */
.results-chrome-actions .dropdown-menu {
  z-index: 1031;
}

/* Only the nav tier is sticky — it pins to the top on scroll with a solid
   background + bottom border/shadow so the content cards scroll cleanly beneath it.
   The border-top is the divider from the identity tier before the page scrolls. */
.results-chrome-nav {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* The wrapper no longer supplies the gap before the content (display:contents),
     so the nav carries it — and because the nav is sticky, the gutter stays clear
     of the content scrolling beneath it. */
  margin-bottom: 1rem;
  background: var(--varial-bg, #FAF7EE);
  border-top: 1px solid var(--varial-border, #E7E0CC);
  border-bottom: 1px solid var(--varial-border, #E7E0CC);
  box-shadow: 0 2px 6px rgba(33, 31, 28, 0.04);
  /* Tabs left, filter cluster (scenarios dropdown + region segmented group) right,
     on one sticky bar (compaction pass). Wraps to a second line on narrow screens. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
}

.results-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.25rem;
  flex: 1 1 auto;
}

/* Inline filter cluster pinned to the right of the nav bar. */
.results-nav-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex: 0 0 auto;
}

/* Scenario/weather-year dropdown menu — the sidebar-style vertical legend lives
   inside it, so give it padding + a sensible min width. Sits above the sticky nav. */
.results-scenario-menu {
  z-index: 1030;
  min-width: 14rem;
  padding: 0.75rem 0.85rem;
}

/* Both filter controls — the "Scenarios & years" dropdown and the segmented region
   group — share one compact height so the filter cluster reads as a single strip.
   Without this the region buttons (line-height 1.3, from results.css) sat ~3px
   shorter than the standard btn-sm dropdown toggle (issue #3144). */
#results-scenario-toggle,
.results-region-buttons--connected .btn {
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Connected segmented variant of the region toggle group (header filter only —
   the plain .results-region-buttons stays gapped for the in-card selectors). */
.results-region-buttons--connected {
  gap: 0;
  flex-wrap: nowrap;
}

.results-region-buttons--connected .btn {
  border-radius: 0;
  margin-left: -1px;
}

.results-region-buttons--connected .btn:first-child {
  margin-left: 0;
  border-top-left-radius: var(--bs-border-radius-sm, 0.25rem);
  border-bottom-left-radius: var(--bs-border-radius-sm, 0.25rem);
}

.results-region-buttons--connected .btn:last-child {
  border-top-right-radius: var(--bs-border-radius-sm, 0.25rem);
  border-bottom-right-radius: var(--bs-border-radius-sm, 0.25rem);
}

/* Active region reads with the brand accent, matching VAR's region toggle. The
   raised z-index keeps the accented border above its neighbours' shared edges. */
.results-region-buttons--connected .btn.active {
  background-color: var(--varial-accent, #F59E0B);
  border-color: var(--varial-accent, #F59E0B);
  color: var(--varial-gray-900, #131210);
  position: relative;
  z-index: 1;
}

/* Narrow screens: let the segmented region group scroll horizontally rather than
   overflow the bar, keeping it a single compact strip under the wrapped tabs. */
@media (max-width: 768px) {
  .results-nav-filters {
    width: 100%;
    margin-left: 0;
  }

  .results-region-buttons--connected {
    overflow-x: auto;
  }
}

.results-tab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.6rem 0.95rem;
  font-weight: 500;
  color: var(--varial-gray-600, #4D4A46);
  text-decoration: none;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
}

.results-tab:hover {
  color: var(--varial-primary, #2563EB);
}

.results-tab.active {
  color: var(--varial-primary, #2563EB);
  border-bottom-color: var(--varial-primary, #2563EB);
}

/* A WIP tab shown but not yet reachable (e.g. Trading for non-staff): greyed, no pointer,
   and no hover recolour, so it reads as present-but-disabled rather than a live link. */
.results-tab.disabled {
  color: var(--varial-gray-500, #6E6A63);
  cursor: default;
}

.results-tab.disabled:hover {
  color: var(--varial-gray-500, #6E6A63);
}

/* The plain tabs are anchors, so the global `.content a` link rule paints them blue.
   The Supply / Network tabs are <button> dropdown toggles that rule can't reach, so
   they fell back to grey — colour them to match the rest of the strip (issue #3144). */
.results-tab.dropdown-toggle {
  color: var(--varial-primary, #2563EB);
}

.results-tabs-dropdown {
  display: inline-flex;
}

/* Results header: prominent headline value (VAR portfolio P50 / position value),
   shown in the sticky chrome's control cluster beside the filters. */
.results-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.1;
}

.results-headline-amount {
  font-size: 1.45rem;
  font-weight: 700;
}

.results-headline-sub {
  font-size: 0.75rem;
}