/* IW_235_relDashb.css — Release Dashboard page (IW-235 Story 9).
   Scoped under .reldashb-wrap throughout, same discipline as
   release-health-snapshot3.css's .snapshot scoping, so nothing here
   can leak onto the rest of the host page. This file owns the PAGE
   layout only (sidebar, frame chrome) — the report content injected
   into #reldashb-content is styled entirely by release-health-
   snapshot3.css's .snapshot rules, loaded separately. */

.reldashb-wrap {
  --rd-ink: #17222d;
  --rd-navy: #17344d;
  --rd-gold: #c78a24;
  --rd-cream: #f3f0e8;
  --rd-paper: #fbfaf6;
  --rd-line: #d8d1c4;
  --rd-muted: #68737c;

  width: min(1400px, calc(100% - 40px));
  margin: 2rem auto 3rem;
  color: var(--rd-ink);
}

.reldashb-intro {
  margin-bottom: 1.5rem;
}

.reldashb-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

/* ===== Sidebar ===== */

.reldashb-sidebar {
  flex: 0 0 220px;
  background: var(--rd-paper);
  border: 0.5px solid var(--rd-line);
  border-radius: 10px;
  padding: 1rem 0.75rem;
}

.reldashb-sidebar-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-muted);
  padding: 0 0.5rem 0.6rem;
}

.reldashb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reldashb-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  padding: 9px 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--rd-ink);
}

.reldashb-item-sprint {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
}

.reldashb-item-date {
  display: block;
  font-size: 0.7rem;
  color: var(--rd-muted);
}

.reldashb-item:hover {
  background: var(--rd-cream);
}

.reldashb-item.is-active {
  background: var(--rd-navy);
  border-left-color: var(--rd-gold);
}

.reldashb-item.is-active .reldashb-item-sprint {
  color: var(--rd-paper);
}

.reldashb-item.is-active .reldashb-item-date {
  color: #c9d4de;
}

/* ===== Framed report display ===== */

.reldashb-frame {
  flex: 1;
  min-width: 0;
  background: var(--rd-paper);
  border: 0.5px solid var(--rd-line);
  border-radius: 10px;
  overflow: hidden;
}

.reldashb-frame-chrome {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--rd-cream);
  border-bottom: 0.5px solid var(--rd-line);
}

.reldashb-frame-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rd-line);
}

.reldashb-frame-content {
  min-height: 200px;
}

/* Report content (.snapshot) supplies its own margin/width via
   release-health-snapshot3.css — no extra padding needed here, it
   would just double up. */

/* ===== Responsive: stack sidebar above frame on narrow screens ===== */

@media (max-width: 760px) {
  .reldashb-layout {
    flex-direction: column;
    /* 06-08-2026: root cause of RD-13/14/15 (responsive stacking
       broken — frame squeezed into a narrow strip with blank space
       filling the rest, reproduced on real iPhone too). align-items
       controls a DIFFERENT physical axis depending on flex-direction:
       in row mode (desktop) it's vertical alignment; in column mode
       it's horizontal SIZING. The base rule sets align-items:
       flex-start for desktop's vertical alignment, but that was never
       overridden here — so once stacked, children shrank to their own
       content width (flex-start) instead of stretching to fill the
       column. */
    align-items: stretch;
  }

  .reldashb-sidebar {
    flex: 0 0 auto;
    width: 100%;
  }

  .reldashb-frame {
    width: 100%; /* explicit, redundant with align-items:stretch above — belt and suspenders */
  }

  .reldashb-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
  }

  .reldashb-item {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
  }

  .reldashb-item.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--rd-gold);
  }
}

@media print {
  /* 08-08-2026: IW-235 Story 9 print bugs RD-18/19/20/21. This block used
     to hide only the sidebar; everything else — the page kicker/intro
     copy, the frame's browser-chrome mockup dots bar, its rounded
     border/background, and the flex .reldashb-layout/.reldashb-wrap
     wrapper — still printed alongside the report. That wasted page space
     in Safari and, more importantly, left .snapshot's rendered print
     width narrower and less predictable than the standalone report page
     it was copied from, which is what exposed a Firefox container-query
     print-evaluation bug (RD-18/19) and a Safari grid/break-inside
     limitation (RD-20/21) — see release-health-snapshot3.css's matching
     08-08-2026 comment for that half of the fix. Isolating print output
     to just the framed report, at an explicit page size, removes the
     dependency on any of that being print-reliable. */

  @page {
    /* Mirrors EN_relHSnap.html's own print @page rule for the same
       .snapshot report, so this page's print output matches what's
       already been tested there. CONFIRM this against EN_relHSnap.html's
       actual <head> rule before shipping — update if it differs.
       NOTE (08-08-2026 retest): browsers do not apply this consistently —
       Firefox honored the landscape orientation but substituted its own
       default paper size (Letter) rather than A3; Safari ignored it
       entirely and kept its own default (A4 portrait). This is a known,
       widely-documented platform limitation — actual paper size in
       "Print to PDF" is controlled by the browser's print dialog/OS
       driver, and CSS @page size is only ever a hint, honored
       inconsistently across engines. Left in place since it's harmless
       where ignored and may still help browsers/printers that do respect
       it — not something to keep chasing for pixel-parity across
       browsers. */
    size: A3 landscape;
    margin: 12mm;
  }

  /* 08-08-2026 retest: Safari prints background colors by default,
     Firefox does not unless "Print backgrounds" is checked in its print
     dialog — so the same underlying CSS was producing a clean white page
     in Firefox but exposing this page's own beige background as a
     margin band around the frame in Safari. First attempt (body
     background alone) was confirmed deployed and still had no visible
     effect — most likely because the beige is actually painted by a
     child wrapper (.page, .section-one, or a template class from
     global2.css/about.css this file has never needed to touch) sitting
     on top of body, not by body itself; setting body's background does
     nothing if something opaque covers it. Targeting the likely
     candidates directly, with !important as a safety net in case
     something more specific is still winning. If the band persists after
     this, inspect the element in DevTools with print media emulated on
     to find the exact rule painting it, and target that selector
     instead of guessing further. */
  body.reldashb-page,
  body.reldashb-page .page,
  body.reldashb-page #section-one,
  body.reldashb-page .section-one {
    background: #fff !important;
  }

  .reldashb-sidebar,
  .reldashb-intro,
  .reldashb-frame-chrome {
    display: none;
  }

  .reldashb-wrap {
    width: 100%;
    margin: 0;
  }

  .reldashb-layout {
    display: block;
  }

  .reldashb-frame {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
  }

  .reldashb-frame-content {
    min-height: 0;
  }
}

/* 15-08-2026, IW-445 (found during Story 14 DEV testing — TC-13/14,
   first formal execution of this check): EN_relDashb.html and
   FR_relDashb.html's <body> carries class="contact ..." (likely
   inherited from whatever page template these were scaffolded from).
   global2.css defines body.contact { background-color: #F2C078; } —
   an unrelated gold override intended for the site's actual Contact
   page — which this page unintentionally inherits instead of the
   site's normal body background (#dbd8ce). Restoring the intended
   background here, scoped to this page's own body class combination
   only (body.contact.reldashb-page), so the real Contact page's own
   .contact styling is untouched. Not fixed in global2.css directly per
   standing convention (new additions get their own scoped stylesheet;
   nothing touches global2.css). Same defect, same fix pattern, also
   applied in release-health-snapshot-r2.css for EN/FR_relhsnap02.html.
   Note: this is a screen-rendering fix — do not confuse with the
   existing body.reldashb-page { background: #fff !important; } rule
   inside this file's @media print block above, which is unrelated
   (fixes a Safari-only print margin-band bug, no effect on screen). */
body.contact.reldashb-page {
  background-color: #dbd8ce;
}