/*
 * Single source of truth for the portal's shared chrome: design tokens and the
 * site-header/tab-nav/logout bar used identically by page 1 (public/index.html) and
 * page 2 (tools/stv-tools-frontend, served at /reports/stv-tools.html).
 *
 * Both pages load this file directly as a real <link rel="stylesheet"> from the portal
 * root (served by server.js's express.static(public/)) instead of each keeping its own
 * copy — the two copies drifted out of sync repeatedly (padding, gaps, font, button
 * sizing) because nothing forced them to match. Edit header/tab/logout chrome ONLY here;
 * page-specific styling (rk-gate, rk-list, dashboard, apk-*, stv-* components, etc.)
 * stays in each page's own stylesheet.
 */

:root {
  --tl-purple: #4b286d;
  --tl-purple-600: #3e215a;
  --tl-green: #66cc00;
  --tl-green-700: #4fa100;
  --ink: #1f2937;
  /* 4.5:1 on the purple page plane as well as on white; #6b7280 met it only on white. */
  --muted: #5f6672;
  --bg: #f0ecf7;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius: 16px;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.top-accent { height: 4px; background: var(--tl-purple); }

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(75, 40, 109, 0.06);
  /* Outer padding on the header itself, on top of .header-inner's own padding.
     Two nested paddings (rather than one big one) are what give the roomier
     ~95px bar and inset the .top-accent rule from the window edges, matching
     the sibling STBT portal's header this was aligned to. */
  padding: 12px 16px;
}
.header-inner {
  /* A centred fixed-width block, not full-bleed: on a wide monitor the whole
     cluster (wordmark, product name, tabs, logout) sits in the middle of the
     bar instead of hugging the left edge. */
  max-width: 1200px; margin: 0 auto;
  /* 13px (not the reference's 10px) because our tab labels are single words and
     so ~5px shorter than the reference's two-line ones; the extra vertical
     padding makes up the difference and lands the bar at the same ~95px. */
  padding: 13px 16px;
  display: flex; align-items: center; gap: 14px;
}
.brand-logo { height: 22px; width: auto; display: block; }
/* A divider between the wordmark and the product name, so the header reads as
   "TELUS | the product" rather than one long run-on string. */
.brand-title {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tl-purple);
  padding-left: 18px;
  border-left: 1px solid var(--border);
  /* Deliberately too narrow for the full name, so it breaks after "TELUS TSQA ·"
     into a two-line block - that two-line block is what sets the header's
     height. The usable window is bounded on both sides: it must be wide enough
     to fit "Smart TV Portal" on one line, but too narrow to also fit the next
     word ("Smart") up on line 1. Measured at 16px/700, including the 18px
     padding-left and 1px divider (box-sizing is border-box on both pages):
         Poppins loaded:  >144px and <=170px
         Poppins blocked: >139px and <=172px   (system-ui fallback, offline)
     157px is the midpoint of the overlap, so it holds in both font states with
     ~13px of slack either side. Re-measure if this string or the font changes. */
  max-width: 157px;
  /* Without this the flex row shrinks the block below that max-width when space
     gets tight and the name collapses into 3-5 lines, which is what used to
     stretch the bar to ~160px between roughly 760px and 900px wide. */
  flex-shrink: 0;
}

.header-tabs { display: flex; gap: 8px; margin-left: 28px; flex-shrink: 0; }
.header-tab {
  padding: 10px 20px; border: 1px solid var(--border); border-radius: 10px;
  background: transparent; font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  text-decoration: none; display: inline-flex; align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.005em;
  /* A tab label must never break mid-word when the row gets tight - a wrapped
     label silently makes every tab (and so the whole bar) taller. */
  white-space: nowrap;
}
.header-tab:hover { background: var(--bg); color: var(--ink); }
.header-tab.active {
  background: var(--tl-purple); border-color: var(--tl-purple); color: #fff;
  box-shadow: 0 2px 8px rgba(75, 40, 109, 0.24);
}

/* 860px, not the 720px this started at: the single-row cluster (logo + two-line name + THREE
   tabs + logout) needs ~824px, measured from where the logout button's right edge pins when the
   row is at its natural minimum. Below that the row cannot shrink - .brand-title and .header-tabs
   are both flex-shrink:0 by design - so it overflowed the viewport and scrolled the page
   sideways instead of wrapping. The extra ~35px of headroom covers the system fallback font,
   which measures a few px wider per item than Poppins/Inter when the webfonts haven't loaded.
   Re-derived for the fourth tab (Feature Test Runs): measured row = 951px
   (114 logo + 157 title + 517 tabs + 89 logout + 3x14 gap + 32 padding), + ~35px headroom for the
   system fallback font, which measures wider per item than Poppins/Inter before the webfonts load.
   Re-derive again if a fifth tab is added. */
@media (max-width: 990px) {
  /* The two nested paddings that give the desktop bar its height would stack
     into a very tall header once the content wraps, so the outer one collapses
     here and only .header-inner keeps padding. */
  .site-header { padding: 0; }
  .header-inner { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  /* max-width re-derived for this breakpoint's smaller 15px type and 12px
     padding-left - the desktop 157px would be wide enough to pull "Smart" up
     onto line 1 here. Window is >131px and <=155px in both font states. */
  .brand-title { font-size: 15px; padding-left: 12px; max-width: 143px; }
  .brand-logo { height: 20px; }
  .header-tabs { margin-left: 0; gap: 6px; }
  .header-tab { padding: 8px 14px; font-size: 13px; }
}

/* Base .back-btn/.logout-btn sizing (originally the dark dashboard's own buttons); the
   .site-header descendant overrides below adapt their color for the light header without
   touching these base rules, which nothing else in either page uses. */
.back-btn {
  padding: 8px 14px; background: rgba(255, 255, 255, .15); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: all .2s;
  font-family: 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}
.back-btn:hover { background: rgba(255, 255, 255, .28); }
.logout-btn {
  padding: 8px 20px; background: rgba(255, 255, 255, .2); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; cursor: pointer;
  font-size: 14px; font-weight: 500; transition: all .3s;
  font-family: 'Inter', system-ui, sans-serif;
  white-space: nowrap;
}
.logout-btn:hover { background: rgba(255, 255, 255, .3); }

.site-header .back-btn, .site-header .logout-btn {
  background: rgba(75, 40, 109, .08); color: var(--tl-purple); border-color: rgba(75, 40, 109, .25);
}
.site-header .back-btn:hover, .site-header .logout-btn:hover { background: rgba(75, 40, 109, .16); }
.site-header .logout-btn { margin-left: auto; }