/* =====================================================================
   ePCSR (Global PSR) module — Power BI-faithful pages.
   The whole page sits on the dark-blue building photo (same treatment as
   the source report): white titles/labels directly on the photo, a
   FLOATING left icon rail (no solid sidebar column), and white content
   cards. Reuses main.css for .fp-combo internals and PortfolioTable
   markup; everything else here is scoped .epcsr- / .ep-.
   ===================================================================== */

/* ── Page frame: photo background behind everything ───────────────────── */
body.epcsr-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(120deg, rgba(9,24,42,0.82) 0%, rgba(15,42,68,0.66) 45%, rgba(28,75,124,0.5) 100%),
    url("../Image/Reporting_hub_background.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ── Canvas cap + RAG palette ─────────────────────────────────────────────
   Power BI renders a fixed ~16:9 report canvas that scales to fit and
   LETTERBOXES on wide monitors — it never stretches edge-to-edge. Cap the
   banner + layout to a centred max-width so the module reads as that report
   canvas (the photo shows in the margins on wide screens) instead of
   ballooning. RAG is shape+colour coded from the source (green circle / amber
   triangle / red diamond) — defined once here, reused by every glyph/tile/badge. */
:root {
  --ep-canvas: 1440px;
  --ep-rag-green: #5ba64e;
  --ep-rag-amber: #efc14e;
  --ep-rag-red:   #eb6d63;
}
.epcsr-banner,
.epcsr-layout {
  width: 100%;
  max-width: var(--ep-canvas);
  margin-inline: auto;
  box-sizing: border-box;
}

/* ── Scale-to-fit canvas (Power BI "fit to page") ─────────────────────────
   THE single layout mechanism for every ePCSR page: chrome + content live in
   a fixed 1440x820 design canvas scaled uniformly to the viewport by
   EpcsrChrome.fitCanvas(). Every page therefore renders at identical
   proportions and fills to the same bottom (airplane) — seamless page-to-page.
   The photo background stays fixed behind; the legend overlay stays OUTSIDE
   the canvas so it can cover the whole viewport. */
.epcsr-scale { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.epcsr-canvas {
  position: absolute;
  top: 50%; left: 50%;
  width: 1440px;
  height: 820px;
  overflow: hidden;
  transform-origin: center center;   /* translate+scale set by fitCanvas() */
  display: flex;
  flex-direction: column;
}
/* Inside the canvas everything is fixed-px (the canvas scales it), so the rail
   icons are constant and fill the height evenly — no vh keying. */
.epcsr-canvas .epcsr-rail {
  gap: 8px;
  /* 26px left matches the banner's own left padding, so the icon column lines up
     with the KBR logo instead of hugging the canvas edge. The widest button is
     66px, so 26 + 66 = 92 still clears the 100px rail. */
  padding: 14px 0 14px 26px;
  --ep-rail-btn: 42px;
  --ep-rail-btn-wide: 66px;
  --ep-rail-icon: 34px;
  --ep-rail-font: 18px;
}
.epcsr-canvas .epcsr-main { padding-bottom: 8px; }

/* ── Header row: white title on the photo (no separate banner strip) ──── */
.epcsr-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px 8px;
  color: #fff;
  height: 98px;              /* constant header band on EVERY page (landing + project) so the rail + content always start at the same Y — seamless across pages */
  box-sizing: border-box;
  flex-shrink: 0;
}
.epcsr-banner-id { display: flex; align-items: center; gap: 14px; }
.epcsr-banner .kbr-logo-img { height: clamp(32px, 4.5vw, 44px); width: auto; }
.epcsr-banner-title {
  margin: 0;
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  white-space: nowrap;
}
.epcsr-banner-title .bi { font-size: 0.82em; margin-left: 6px; vertical-align: -2px; }

/* Project identity block (top-right on project pages). */
.epcsr-project-meta { text-align: right; min-width: 0; }
.epcsr-project-name {
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.epcsr-project-sub { font-size: 12px; line-height: 1.35; opacity: 0.92; }

.epcsr-banner-hub {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 6px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.epcsr-banner-hub:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Layout: floating icon rail + main column ─────────────────────────── */
.epcsr-layout { display: flex; flex: 1; min-height: 0; }

.epcsr-rail {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  /* flex-start, not center: buttons differ in width (only those that can carry a
     RAG indicator widen into a pill), so centring would stagger the icon circles
     horizontally. A shared left edge keeps every icon on one vertical line. */
  align-items: flex-start;
  justify-content: space-between;   /* distribute buttons down the full height so the last (airplane) sits at the bottom, like the source */
  gap: 16px;                        /* minimum breathing room between buttons */
  padding: 26px 0 20px 26px;        /* top drops the first button clear of the logo; left aligns the icon column with the banner's left margin */
  background: transparent;          /* buttons float on the photo, PB-style */
  overflow: visible;                /* tooltips escape the rail */
  /* Button geometry. Declared as custom properties because three blocks size the
     rail (here, .epcsr-canvas, and the viewport-keyed block near the end of this
     file) and they collide by specificity — this way they restate sizes only,
     never structure, so a change can't be half-applied. */
  --ep-rail-btn: 40px;              /* circle diameter, and the pill's height */
  --ep-rail-btn-wide: 64px;         /* width when a status slot is present */
  --ep-rail-icon: 32px;
  --ep-rail-font: 17px;
}
/* Default is a plain circle: diameter = icon + the 4px side padding, so the icon
   fills the content box exactly and reads as centred. */
.epcsr-rail-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: var(--ep-rail-btn);
  height: var(--ep-rail-btn);
  padding: 0 4px;
  border-radius: 999px;
  border: none;
  /* Half-transparent so the photo reads through the extension, mirroring the
     selected state. The icon circle below re-opaques itself so the glyph stays
     crisp — only the extension is see-through. */
  background: rgba(255,255,255,0.50);
  color: var(--kbr-navy);
  font-size: var(--ep-rail-font);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
/* Only the ten project-category buttons widen into a pill (source: Power BI page
   navigator) — see RAIL's `indicator` flag in chrome.js. The extra width is the
   status slot, nothing else, so the icon stays put and just gains a tail. */
.epcsr-rail-btn.ep-rail-with-status { width: var(--ep-rail-btn-wide); }
/* The icon's circle. A hairline ring separates it from the pill so a widened
   button reads as "circle + tail" rather than one flat lozenge. */
.ep-rail-icon {
  flex: 0 0 var(--ep-rail-icon);
  width: var(--ep-rail-icon);
  height: var(--ep-rail-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;              /* opaque over the translucent extension */
  box-shadow: inset 0 0 0 1px rgba(23,38,58,0.13);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
/* Status slot — rendered even when this project has no token for the category,
   so pills don't change width between projects. */
.ep-rail-status {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* Hover lifts the extension without going fully opaque, so the see-through look
   holds while still reading as a hover. */
.epcsr-rail-btn:hover { background: rgba(255,255,255,0.74); box-shadow: 0 0 0 4px rgba(255,255,255,0.22); }
/* Selected page: the extension goes translucent blue instead of solid white, so the
   photo reads through it, and the icon circle grows to the button's full height.
   Comes after :hover (equal specificity) so the selected look survives hovering;
   the white hover glow is dropped for the same reason. */
.epcsr-rail-btn.active,
.epcsr-rail-btn.active:hover {
  background: rgba(160,203,240,0.20);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* Spread 4 paints the circle out to radius 21 (icon 17 + 4) — exactly the button's
   own radius, so the blue is as big as the extension and not a pixel bigger. Spread
   rather than a larger icon box so the status slot beside it doesn't move. */
.epcsr-rail-btn.active .ep-rail-icon {
  background: var(--kbr-blue);
  color: #fff;
  box-shadow: 0 0 0 4px var(--kbr-blue);
}
/* Non-navigable rail icons (project pages before a project is picked) read as
   greyed/translucent so it's clear they aren't clickable yet — source UX. */
.epcsr-rail-btn.ep-rail-off {
  background: rgba(255,255,255,0.3);
  color: rgba(23,38,58,0.5);
  box-shadow: none;
}
/* The icon circle is opaque white by default; on a greyed button that would make it
   the brightest thing in the rail, so mute it back down. */
.epcsr-rail-btn.ep-rail-off .ep-rail-icon { background: rgba(255,255,255,0.34); }
.epcsr-rail-btn.ep-rail-off:hover { background: rgba(255,255,255,0.42); box-shadow: none; }
.epcsr-rail-btn.ep-rail-off:hover .ep-rail-icon { background: rgba(255,255,255,0.46); }

/* Hover tooltip — "Navigate to X" bubble centred over the icon circle, matching
   the caret below it. */
.epcsr-rail-btn::after {
  content: attr(data-tip);
  position: absolute;
  /* Centred on the icon circle (not the button, whose width varies with the status
     slot). The icon centre sits at x=47 in canvas coords, so the bubble can only be
     94px wide before its left edge crosses x=0 and .epcsr-canvas's overflow:hidden
     clips it — hence the narrower cap and smaller type below. Labels wrap instead. */
  left: calc(4px + var(--ep-rail-icon) / 2);
  bottom: calc(100% + 11px);
  transform: translateX(-50%) translateY(4px);
  background: #fff;
  color: #1f2a37;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  max-width: 72px;
  width: max-content;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 60;
}
/* Caret over the icon circle's centre — a fixed offset, so it lands on the icon
   on circles and pills alike (the icon is at the same x in both). */
.epcsr-rail-btn::before {
  content: "";
  position: absolute;
  left: calc(4px + var(--ep-rail-icon) / 2);
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 60;
}
.epcsr-rail-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.epcsr-rail-btn:hover::before { opacity: 1; }

.epcsr-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 24px 0 14px;   /* left gap separates content from the rail */
}

/* ── Reporting Month row (white label on the photo) ───────────────────── */
.epcsr-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 12px;
  flex-shrink: 0;   /* chrome rows never compress when the column overflows */
}
.epcsr-month-label { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.epcsr-month-select {
  min-width: 170px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 3px;
  background: var(--kbr-navy-2);
  font-size: 13px;
  padding: 0 8px;
  color: #fff;
}

/* ── Cards / panels ───────────────────────────────────────────────────── */
.epcsr-card {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  box-shadow: var(--kbr-shadow-md);
  overflow: hidden;
}
.epcsr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--kbr-border);
}
.epcsr-tabs { display: flex; align-items: center; gap: 18px; }
.epcsr-tab {
  display: inline-block;
  padding: 6px 2px;
  font-weight: 600;
  font-size: 14px;
  color: var(--kbr-navy);
  border-bottom: 2px solid transparent;
}
.epcsr-tab.active { border-bottom-color: var(--kbr-navy); }

.ep-nav-wrap { display: flex; align-items: center; gap: 10px; }
.ep-nav-btn {
  height: 34px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa7b4;
  background: #eef1f5;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  cursor: not-allowed;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ep-nav-btn.enabled { color: #fff; background: var(--kbr-navy); border-color: var(--kbr-navy); cursor: pointer; }
.ep-nav-btn.enabled:hover { background: var(--kbr-navy-2); }
.ep-nav-hint {
  font-size: 12px;
  color: var(--kbr-text-muted);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.ep-nav-hint.show { opacity: 1; }

.epcsr-filter-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  background: #fff;
  color: var(--kbr-navy);
  cursor: pointer;
  transition: background 0.15s;
}
.epcsr-filter-chevron:hover { background: #f0f3f7; }
.epcsr-filter-chevron .bi { transition: transform 0.18s ease; }
.epcsr-filter-chevron.open .bi { transform: rotate(180deg); }

/* ── Filter strip (fields only; chevron-driven) ─────────────────────────
   Everything here is keyed off #filterPanelHost, which 21 pages across 7 modules
   also use — but this stylesheet is only linked from pages/epcsr/*, so the
   overrides can't reach the other modules' filter bars. */
#filterPanelHost .filter-bar { border: none; background: transparent; box-shadow: none; }
#filterPanelHost .filter-bar-body {
  border-top: none;
  background: #f8fafc;
  border-bottom: 1px solid var(--kbr-border);
  align-items: flex-end;
}
/* Compact metrics for the strip — the shared bar is sized for a single wrapping
   row, and at ten fields over two rows its 34px controls and 16px gaps made the
   panel tall enough to squeeze the table below it. */
#filterPanelHost .filter-bar-body { padding: 8px 18px 10px; }
/* Source report lays the ten fields out five per row. A fixed five-column grid
   rather than the shared flex wrap, whose per-field intrinsic widths packed a
   different number onto each line and left the two rows out of register. */
#filterPanelHost .filter-bar-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 16px;
  align-items: end;
}
#filterPanelHost .fb-field { min-width: 0; gap: 2px; }
/* Title Case, not the shared bar's uppercase micro-label — the source report
   labels read as ordinary field captions. */
#filterPanelHost .fb-label {
  text-transform: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--kbr-navy);
  line-height: 1.3;
}
/* Controls fill their grid cell so all five columns line up; the shared rules
   size them to content (min-width + width: max-content), which would leave a
   ragged right edge in a grid. */
#filterPanelHost .filter-bar .fp-combo-trigger,
#filterPanelHost .ep-search,
#filterPanelHost .ep-search-input,
#filterPanelHost .fb-select {
  width: 100%;
  max-width: none;
  min-width: 0;
}
#filterPanelHost .filter-bar .fp-combo-trigger,
#filterPanelHost .ep-search-input,
#filterPanelHost .fb-select {
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
}
#filterPanelHost .ep-search-input { padding-left: 25px; }
#filterPanelHost .ep-search-icon { font-size: 12px; left: 8px; }

/* ── Landing table ────────────────────────────────────────────────────── */
#portfolioTableHost .portfolio-table-wrap { overflow-x: auto; }
#portfolioTableHost .portfolio-table { min-width: 900px; }
/* Landing: the portfolio panel fills the canvas height (reaches the rail
   bottom) even when the table is short; the table scrolls inside it when it
   has more rows than fit — matching the source. */
.epcsr-main > .epcsr-card.ep-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.epcsr-card.ep-fill #portfolioTableHost { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.epcsr-card.ep-fill #portfolioTableHost .portfolio-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
#portfolioTableHost .portfolio-table thead .col-row th {
  position: relative;
  background: #f5f6f8;
  color: #3a4757;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  vertical-align: bottom;
  border-bottom: 1px solid #dfe3e8;
}
#portfolioTableHost .portfolio-table tbody td { padding: 4px 10px; }
#portfolioTableHost .portfolio-table th:not(:first-child),
#portfolioTableHost .portfolio-table td:not(:first-child) { text-align: center; }
#portfolioTableHost .portfolio-table td.portfolio-name { white-space: nowrap; color: var(--kbr-navy); }

/* ── RAG glyphs ───────────────────────────────────────────────────────── */
.ep-glyph { display: inline-block; vertical-align: middle; }
.ep-glyph-green  { width: 12px; height: 12px; border-radius: 50%; background: var(--ep-rag-green); }
.ep-glyph-yellow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--ep-rag-amber); }
.ep-glyph-red    { width: 11px; height: 11px; background: var(--ep-rag-red); transform: rotate(45deg); }
.ep-check { color: #2ea84c; font-size: 16px; font-weight: 700; line-height: 1; }

/* ── Filter-bar search ────────────────────────────────────────────────── */
.ep-search { position: relative; display: block; }
.ep-search-input {
  height: 34px;
  padding: 0 8px 0 28px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  font-size: 13px; background: #fff;
}
.ep-search-input:focus { outline: 2px solid var(--kbr-teal-dark); outline-offset: -1px; }
.ep-search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: #9aa7b4; font-size: 13px; pointer-events: none;
}

/* ── Footer (light text on the photo) ─────────────────────────────────── */
.epcsr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 2px 16px;
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.epcsr-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.epcsr-legend .ep-legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* ── Column resize handles (component: resizable-cols.js) ─────────────── */
.col-resize-handle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  z-index: 3;
}
.col-resize-handle:hover,
.col-resize-handle.dragging { background: rgba(75,200,232,0.5); }
html.col-resizing, html.col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ── In-dropdown option search (PB slicers have one) ──────────────────── */
#filterPanelHost .chk-search-wrap {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 2px 0 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--kbr-border);
  z-index: 1;
}
#filterPanelHost .chk-search {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--kbr-border);
  border-radius: 3px;
  font-size: 12px;
  background: #f8fafc;
  color: var(--kbr-navy);
  box-sizing: border-box;
}
#filterPanelHost .chk-search:focus { outline: none; border-color: var(--kbr-teal-dark); }

/* =====================================================================
   PROJECT HOME PAGE
   ===================================================================== */
.eph-top {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.eph-health {
  padding: 10px 12px;
  text-align: center;
}
.eph-health-title { font-weight: 700; font-size: 14px; color: var(--kbr-navy); margin-bottom: 12px; }
.eph-health-dot { width: 64px; height: 64px; border-radius: 50%; margin: 6px auto 10px; }
/* Health score glyph = the same RAG-by-shape system as the tiles, scaled up:
   green circle / amber triangle / red diamond. */
.eph-health-dot.green  { border-radius: 50%; background: var(--ep-rag-green); }
.eph-health-dot.yellow {
  width: 0; height: 0; background: transparent; border-radius: 0;
  margin: 4px auto 12px;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-bottom: 60px solid var(--ep-rag-amber);
}
.eph-health-dot.red {
  width: 48px; height: 48px; margin: 14px auto 18px;
  background: var(--ep-rag-red); border-radius: 8px; transform: rotate(45deg);
}
.eph-health-dot.none   { background: transparent; width: 0; height: 16px; margin: 0; }

/* Category tile strip — icon row + label + status glyph. HSSE is a live link. */
.eph-tiles {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  padding: 8px;
}
.eph-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 16px 6px 18px;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 4px;
  text-align: center;
  color: var(--kbr-navy);
  min-width: 0;
}
.eph-tile .bi { font-size: 27px; color: #4a5a6e; }
.eph-tile-label { font-size: 13px; font-weight: 600; line-height: 1.25; }
.eph-tile-glyph { min-height: 38px; display: flex; align-items: center; justify-content: center; }
/* Home-tile RAG indicator: coloured shape + white trend arrow (movement vs last
   month). Shapes are drawn with clip-path so the arrow stays upright and centred
   inside the triangle/diamond (unlike the small rail/Landing .ep-glyph shapes). */
.eph-ind { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.eph-ind::before { content: ""; position: absolute; inset: 0; }
.eph-ind i { position: relative; z-index: 1; font-weight: 700; line-height: 1; }
.eph-ind-green::before  { background: var(--ep-rag-green); border-radius: 50%; }
.eph-ind-yellow::before { background: var(--ep-rag-amber); clip-path: polygon(50% 8%, 95% 92%, 5% 92%); }
.eph-ind-red::before    { background: var(--ep-rag-red); clip-path: polygon(50% 4%, 96% 50%, 50% 96%, 4% 50%); }
/* Scope the arrow size/colour under .eph-tile to beat `.eph-tile .bi`
   (the 27px navy tile-icon rule) which otherwise wins on specificity. */
.eph-tile .eph-ind i { color: #fff; font-size: 15px; }
/* The triangle's mass sits below the box centre, so a smaller arrow nudged down
   sits centred inside it. */
.eph-tile .eph-ind-yellow i { font-size: 12px; transform: translateY(3px); }
.eph-tile.clickable { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.eph-tile.clickable:hover { box-shadow: var(--kbr-shadow-md); transform: translateY(-2px); }

/* Main 3-column grid */
.eph-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.1fr;
  gap: 12px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.eph-panel { padding: 7px 12px 8px; }
/* Home grid fills to the rail bottom (airplane): columns stretch, and each
   stack spreads its cards so the last one (Personnel / info box) sits at the
   bottom, like the source. */
.eph-grid > .eph-panel, .eph-grid > .eph-stack { min-height: 0; }
/* Any tile whose content is taller than its column scrolls inside itself
   instead of clipping (source behaviour). */
.eph-grid > .eph-panel { overflow-y: auto; }
/* Cards in each column grow to fill the column height (small even gaps),
   rather than floating apart — matches the source's filled columns. */
.eph-stack > .epcsr-card { flex: 1 1 auto; overflow-y: auto; }
.eph-panel-title { font-weight: 700; font-size: 14px; color: #17263a; margin: 0 0 6px; }
.eph-panel-title .bi { font-weight: 400; margin-left: 6px; color: #4a5a6e; }
.eph-stack { display: flex; flex-direction: column; gap: 12px; }

/* FAC / Financial tables */
.eph-fin-caption {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: #17263a;
  border-bottom: 1px solid #e2e8f0;
  padding: 1px 0;
}
/* Fixed layout so every stacked block gets identical column widths — otherwise
   each block (a separate table) auto-sizes to its own content and the columns
   jog left/right between blocks (e.g. the label-only "As Sold" vs blocks that
   carry a wider "Last Month" row). */
.eph-fin-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
/* Columns centre under their headers on both the Project Home Forecast panel and
   the Financial overview (Power BI layout). */
.eph-fin-table th {
  font-weight: 600; color: #64748b; text-align: center;
  padding: 2px 6px 1px; border: none;
}
.eph-fin-table td { text-align: center; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.eph-fin-main td { font-size: 13px; font-weight: 600; color: #17263a; }
.eph-fin-last td { font-size: 11px; color: #94a3b8; padding-top: 0; }
/* Breathing room between the "0.0" delta and the coloured value in each cell. */
.eph-fin-last .pos { color: #2ea84c; margin-left: 12px; }
.eph-fin-last .neg { color: #e05252; margin-left: 12px; }
/* "Last Month" sits on its own left-aligned line above the delta row. */
.eph-fin-lastlabel-row td { text-align: left; font-size: 10px; font-weight: 600; color: #94a3b8; padding: 3px 6px 0; }
/* Project Home Forecast panel only: the same centred / own-line-label layout as
   above, but with smaller text + tighter padding so every block (As Sold /
   Current Budget / FAC Forecast + EAC / ITD) fits the narrow panel without a
   scrollbar. Scoped to #ephFinPanel; the Financial page keeps the base sizes. */
#ephFinPanel .eph-panel-title { font-size: 13px; margin-bottom: 3px; }
#ephFinPanel .eph-fin-caption { font-size: 10.5px; padding: 1px 0; }
#ephFinPanel .eph-fin-table { line-height: 1.1; }
#ephFinPanel .eph-fin-table th { font-size: 9.5px; padding: 3px 8px 1px; }
#ephFinPanel .eph-fin-main td { font-size: 11.5px; padding: 1px 8px 2px; }
#ephFinPanel .eph-fin-last td { font-size: 9.5px; padding: 0 8px 3px; }
#ephFinPanel .eph-fin-lastlabel-row td { font-size: 9px; padding: 2px 8px 0; }

/* Schedule timeline */
.eph-sched-dates { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.eph-sched-dates .lbl { color: #64748b; font-weight: 600; }
.eph-sched-dates .val { font-size: 15px; font-weight: 700; color: #17263a; white-space: nowrap; }
.eph-timeline { position: relative; height: 26px; margin: 14px 4px 4px; }
.eph-timeline-track { position: absolute; top: 50%; left: 0; right: 0; height: 5px; transform: translateY(-50%); border-radius: 3px; background: var(--kbr-navy); }
.eph-timeline-track .done { position: absolute; top: 0; bottom: 0; left: 0; background: var(--kbr-navy); border-radius: 3px; }
.eph-timeline-track .fcst { position: absolute; top: 0; bottom: 0; background: #9dc89d; border-radius: 3px; }
.eph-timeline .node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--kbr-navy);
}
.eph-timeline .node.fcst { border-color: #7fb37f; }

/* Progress panel */
.eph-progress-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.eph-progress-row .lbl { font-weight: 600; }
.eph-progress-row .baseline .lbl, .eph-progress-row .baseline .val { color: #9db3cc; }
.eph-progress-row .earned .lbl, .eph-progress-row .earned .val { color: #17263a; }
.eph-progress-row .variance .lbl, .eph-progress-row .variance .val { color: #2ea84c; }
.eph-progress-row .val { font-size: 15px; font-weight: 700; }
.eph-progress-bar { position: relative; height: 22px; background: #eef1f5; }
.eph-progress-bar .base { position: absolute; top: -3px; bottom: -3px; left: 0; background: #c9ced6; }
.eph-progress-bar .earn { position: absolute; top: 0; bottom: 0; left: 0; background: #1c4b7c; }
.eph-progress-bar .var  { position: absolute; top: 0; bottom: 0; background: #9dc89d; }

/* Personnel */
.eph-personnel .lbl { font-weight: 700; font-size: 13px; color: #17263a; }
.eph-personnel .val { font-size: 20px; font-weight: 700; color: #17263a; margin-top: 4px; }

/* Performance indices + gauges */
.eph-index { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.eph-index-name { font-size: 14px; font-weight: 600; color: #17263a; }
.eph-index-desc { font-size: 10px; font-style: italic; color: #94a3b8; }
.eph-gauge { flex: 0 0 104px; }
.eph-gauge-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Info card */
.eph-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 12px;
  color: #17263a;
}
.eph-info-grid b { font-weight: 600; }

/* Legend "?" button on the tile strip + overlay */
/* Grey grouping backgrounds (PB groups related visuals on a light-grey panel):
   the tile strip and the bottom-right info box sit on grey; their inner tiles
   stay white. */
.eph-tiles-card { position: relative; background: #e9edf3; }
.eph-grid .eph-panel:has(> .eph-info-grid) { background: #e9edf3; }
.eph-info-btn {
  position: absolute; top: -12px; right: -8px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 1px solid #9fb0c3; color: var(--kbr-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.eph-info-btn:hover { background: #eef3fa; }
.eph-legend-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15,42,68,0.55);
  display: flex; flex-direction: column; gap: 16px;
  padding: 56px 40px; overflow: auto;
}
.eph-legend-overlay[hidden] { display: none; }
.eph-legend-panel {
  position: relative; background: #fff; border-radius: 12px;
  box-shadow: var(--kbr-shadow-lg); padding: 26px 34px;
}
.eph-legend-close {
  position: absolute; top: 14px; right: 16px;
  border: none; background: none; color: var(--kbr-navy);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.eph-legend-row { display: flex; align-items: center; gap: 48px; padding: 14px 0; flex-wrap: wrap; }
.eph-legend-label { font-weight: 700; font-size: 16px; color: #17263a; min-width: 130px; }
.eph-legend-item { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #17263a; }
.eph-legend-item .ep-glyph { transform: scale(1.5); margin: 0 6px; }
.eph-legend-item .ep-glyph-red { transform: scale(1.5) rotate(45deg); }   /* keep the diamond rotated */
.eph-trend-ico { font-size: 24px; font-weight: 700; color: #16345a; line-height: 1; }
.eph-trend.flat { display: inline-block; width: 22px; height: 9px; background: #16345a; border-radius: 2px; }
.eph-process-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.eph-process-table thead th { background: #1c4b7c; color: #fff; font-weight: 600; text-align: left; padding: 9px 12px; }
.eph-process-table tbody td { padding: 7px 12px; border-bottom: 1px solid #eef1f5; }
.eph-process-empty { padding: 60px; text-align: center; color: #94a3b8; }

/* Page footer strip (on photo) */
.epcsr-page-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 4px;
  margin-top: 14px;      /* clear gap below the content so the footer text has room, PB-style */
  flex-shrink: 0;        /* dedicated footer row — never collapses or overlaps a card */
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* =====================================================================
   HSSE PAGE
   ===================================================================== */
.hsse-top {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.hsse-lag { padding: 10px 14px 14px; }
.hsse-lag-title { font-weight: 700; font-size: 15px; color: #17263a; margin-bottom: 8px; }
.hsse-lag-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; }
.hsse-lag-card { border: 1px solid #e8ecf1; border-radius: 4px; padding: 10px 14px 16px; }
.hsse-lag-card .lbl { font-weight: 700; font-size: 13px; color: #17263a; }
.hsse-lag-card .val { text-align: center; font-size: 22px; font-weight: 700; color: #17263a; margin-top: 10px; }

.hsse-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: stretch; }
.hsse-grid .span2 { grid-column: span 2; }
.hsse-chart-title { font-weight: 700; font-size: 13px; color: #17263a; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; margin-bottom: 6px; }
.hsse-mini { width: 100%; height: auto; display: block; }

/* =====================================================================
   PROJECT CHECKLIST PAGE
   ===================================================================== */
.epc-tabbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 0;
  margin-bottom: 12px;
  overflow-x: auto;
  /* .epcsr-main is a flex column — without this, a tall detail table makes
     the column overflow and the tab bar gets vertically crushed. */
  flex-shrink: 0;
}
.epc-tab {
  padding: 9px 14px 7px;
  font-size: 13px;
  font-weight: 600;
  color: #3a4757;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.epc-tab:hover { color: var(--kbr-navy); }
.epc-tab.active { color: var(--kbr-navy); border-bottom-color: var(--kbr-navy); }
/* Empty tabs: greyed, no pointer, not clickable. */
.epc-tab.disabled { color: #aeb8c4; cursor: default; pointer-events: none; }
.epc-tab.disabled:hover { color: #aeb8c4; }

.epc-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 12px;
  align-items: stretch;    /* both columns fill the canvas height — same tile sizes every tab */
  flex: 1 1 0;             /* capped to the available height, not content (no canvas overflow) */
  min-height: 0;
}
/* Columns fill to the bottom; tall content scrolls INSIDE each column so the
   table tile reaches the bottom and the left group shows all rows. */
.epc-layout > #epcMain { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.epc-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* Health Score tile: same fixed size on every tab (never stretches/varies). */
.epc-side > .eph-health { flex: 0 0 auto; height: 96px; }
/* Left-column lower cards grouped on grey (PB grouping); fills the remaining
   column height below the Health Score card. */
.epc-side-group {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; min-height: 0;
  background: #e9edf3; border-radius: 6px; padding: 10px;
}
/* Left tiles keep IDENTICAL proportions on every tab: Owner is natural (same
   content), and the Status/% Complete tile fills the rest at a fixed size and
   scrolls its OWN rows when a tab has more/less content. */
.epc-side-group > #epcOwner { flex: 0 0 auto; }
.epc-side-group > .epc-owner:last-child { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Owner card: label/value rows */
.epc-owner { padding: 10px 14px 12px; font-size: 12px; }
.epc-owner-row { display: flex; justify-content: space-between; padding: 3px 0; }
.epc-owner-row .lbl { color: #3a4757; }
.epc-owner-row .val { color: #17263a; }
.epc-owner-row.head { font-weight: 700; }

/* Status / % Complete mini tables */
.epc-mini-title { font-weight: 700; font-size: 14px; color: #17263a; margin: 0 0 4px; }
/* Fits the ~200px side column without a horizontal scrollbar: no min-width, the
   category label truncates (full text stays in its title tooltip). */
.epc-mini-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 10.5px; white-space: nowrap; }
.epc-mini-table th {
  font-weight: 600; color: #94a3b8; text-align: right;
  padding: 2px 3px; border-bottom: 1px solid #e8ecf1;
  white-space: normal;   /* let "Closed / N/A" wrap so it can't force horizontal scroll */
}
.epc-mini-table th:first-child { text-align: left; }
.epc-mini-table td { padding: 2px 3px; text-align: right; font-variant-numeric: tabular-nums; color: #17263a; }
.epc-mini-table td:first-child {
  text-align: left; color: #3a4757; width: 100%;
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.epc-mini-table tr.total td { font-weight: 700; border-top: 1px solid #cfd8e3; }

/* Overview: 3-column discipline summary grid */
.epc-ov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
  background: #e9edf3;      /* grey grouping container (PB) — white sub-cards sit on it */
  border-radius: 6px;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
}
.epc-ov-panel { padding: 10px 12px; min-height: 120px; overflow-y: auto; }
.epc-ov-panel.clickable { cursor: pointer; transition: box-shadow 0.15s; }
.epc-ov-panel.clickable:hover { box-shadow: var(--kbr-shadow-lg); }
.epc-ov-title { font-weight: 700; font-size: 12px; letter-spacing: 0.02em; color: #17263a; margin-bottom: 6px; }

/* Detail tab: checklist items table */
.epc-detail-wrap { overflow: auto; height: 100%; }   /* table tile fills to the bottom; scrolls its rows inside (one scrollbar) */
.epc-items { width: 100%; border-collapse: collapse; font-size: 12px; }
.epc-items thead th {
  position: sticky; top: 0; z-index: 2;
  background: #1c4b7c; color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 6px 8px; text-align: left; white-space: nowrap;
}
.epc-items thead th.c { text-align: center; }
.epc-items tr.section td {
  background: #0b0f14; color: #fff;
  font-weight: 700; font-size: 11px; letter-spacing: 0.02em;
  padding: 4px 8px; text-transform: uppercase;
}
.epc-items tbody td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.epc-items td.c { text-align: center; }
.epc-items td.item-text { max-width: 420px; color: #17263a; }
.epc-items td.pct { text-align: right; font-variant-numeric: tabular-nums; }
.epc-radio {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #b6c0cc;
  background: #fff;
  vertical-align: middle;
}
.epc-radio.on { background: #e05252; border-color: #c23b3b; }
.epc-empty { padding: 40px 12px; text-align: center; color: #94a3b8; font-size: 13px; }

/* =====================================================================
   KEY MILESTONE SCHEDULE PAGE
   ===================================================================== */
/* Overview / Uncertainty Ranges toggle (top-right, on the photo). */
.kms-toggle {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.kms-toggle button {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #3a4757;
  cursor: pointer;
  white-space: nowrap;
}
.kms-toggle button.active { color: var(--kbr-navy); text-decoration: underline; text-underline-offset: 5px; }

.kms-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Overview: health / SPI / SaC row, then milestone table */
/* KMS body fills to the airplane on both tabs: the top cards are fixed and the
   table card below fills the remaining height and scrolls its rows inside. */
#kmsBody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#kmsBody > .kms-panel:last-child { flex: 1 1 auto; min-height: 0; overflow: auto; }
.kms-top, .kms-unc-top { flex-shrink: 0; }
.kms-top {
  display: grid;
  grid-template-columns: 200px 1.35fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.kms-panel { padding: 10px 14px 12px; }
.kms-panel-title { font-weight: 700; font-size: 14px; color: #17263a; margin: 0 0 4px; }
.kms-mini { width: 100%; height: auto; display: block; }

/* Schedule at Completion: bar or centred text */
.kms-sac-bar-wrap { padding: 24px 6px 8px; }
.kms-sac-ends { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #17263a; margin-bottom: 4px; }
.kms-sac-bar { height: 34px; border-radius: 2px; }
.kms-sac-bar.green { background: #8dc98d; }
.kms-sac-bar.grey  { background: #7f8ba0; }
.kms-sac-axis { display: flex; justify-content: space-between; font-size: 11px; color: #64748b; margin-top: 4px; }
.kms-sac-text { text-align: center; padding: 20px 6px; }
.kms-sac-text .date { font-size: 14px; color: #17263a; margin-bottom: 26px; }
.kms-sac-text .axis { font-size: 11px; color: #64748b; }

/* Milestone table */
.kms-ms-wrap { overflow: visible; }   /* the milestone card itself scrolls (one scrollbar) */
.kms-ms-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kms-ms-table thead th {
  text-align: left; font-size: 12px; font-weight: 700; color: #17263a;
  padding: 8px; border-bottom: 2px solid #cfd8e3; white-space: nowrap;
}
.kms-ms-table thead th.r { text-align: right; }
.kms-ms-table tbody td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.kms-ms-empty { padding: 40px; text-align: center; color: #94a3b8; }

/* Uncertainty: schedule projection */
/* Uncertainty tab: one grey group wraps the Schedule Projection + Impact table
   (PB SC2). It fills to the bottom; the impact card scrolls its rows inside. */
.kms-unc-group {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: #e9edf3; border-radius: 6px; padding: 12px;
}
.kms-unc-group > .kms-panel:last-child { flex: 1 1 auto; min-height: 0; overflow: auto; }
.kms-unc-top { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 12px; margin-bottom: 12px; }
.kms-proj-row {
  display: grid;
  grid-template-columns: 128px 18px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.kms-proj-label { font-size: 13px; color: #17263a; }
.kms-proj-arrow { font-size: 13px; text-align: center; }
.kms-proj-arrow.green::before  { content: "\25C4"; color: #2ea84c; }   /* ◄ earlier than baseline */
.kms-proj-arrow.orange::before { content: "\25BA"; color: #e8792b; }   /* ► later than baseline */
.kms-proj-bar {
  height: 26px; border-radius: 2px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; font-size: 12px; font-weight: 700; color: #fff;
}
.kms-proj-bar.baseline    { background: #17335a; }
.kms-proj-bar.optimistic  { background: #8a94a0; }
.kms-proj-bar.current     { background: #2c6cb0; }
.kms-proj-bar.pessimistic { background: #c9ced6; color: #3a4757; }

/* Uncertainty impact table (grouped headers) */
.kms-unc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kms-unc-table th, .kms-unc-table td { padding: 5px 8px; }
.kms-unc-table .grp th {
  font-size: 11px; font-weight: 700; color: #17263a; text-align: center;
  border-bottom: 1px solid #cfd8e3;
}
.kms-unc-table .hdr th {
  font-size: 11px; font-weight: 700; color: #17263a; text-align: left;
  border-bottom: 2px solid #cfd8e3; white-space: nowrap;
}
.kms-unc-table .hdr th.c { text-align: center; }
.kms-unc-table tbody td { border-bottom: 1px solid #eef1f5; }
.kms-unc-table td.c { text-align: center; }
.kms-unc-table tr.total td { font-weight: 700; background: #eef1f5; border-top: 1px solid #cfd8e3; }
.kms-unc-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #b6c0cc; }
.kms-unc-dot.green { background: #2ea84c; }
.kms-unc-dot.yellow { background: #e0a800; }
.kms-unc-dot.red { background: #e05252; }
.kms-unc-empty { padding: 30px; text-align: center; color: #94a3b8; }

/* =====================================================================
   RISK PAGE (Threats / Opportunities)
   ===================================================================== */
/* Threats / Opportunities toggle — same shell as the schedule toggle. */
.rsk-toggle { display: inline-flex; align-self: flex-start; background: rgba(255,255,255,0.92); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.rsk-toggle button { padding: 8px 20px; font-size: 14px; font-weight: 600; border: none; background: transparent; color: #3a4757; cursor: pointer; white-space: nowrap; }
.rsk-toggle button.active { color: var(--kbr-navy); text-decoration: underline; text-underline-offset: 5px; }

/* Layout: left summary column + main analysis grid */
.rsk-layout { display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.rsk-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* Health Score is the elastic one: the grey group below sizes to its tiles, and
   whatever height is left over lands here rather than pooling as dead grey. The
   floor keeps it from collapsing if the tile list ever grows. */
.rsk-side > .eph-health { flex: 1 1 auto; min-height: 100px; display: flex; flex-direction: column; justify-content: center; }
/* Left Status/Reporting on a grey group (PB); buttons sit directly on the grey.
   flex-grow 0 so the group hugs its two cards instead of stretching; it keeps
   flex-shrink so a longer tile list compresses it and overflow-y scrolls. */
.rsk-side-group { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: #e9edf3; border-radius: 6px; padding: 10px; }
/* Status Overview + Reporting Month stay separate white tiles inside the grey group. */
#rskMain { min-height: 0; display: flex; }
/* flex: 0 0 auto keeps each card at its natural height. Under the default
   flex-shrink they compress past their content and silently clip the last tiles;
   held rigid, an overflow scrolls the grey group instead of hiding rows. */
.rsk-side-card { flex: 0 0 auto; padding: 6px 12px 8px; }
.rsk-side-title { text-align: center; font-weight: 700; font-size: 13px; color: #17263a; margin-bottom: 5px; }

/* Navy count tiles (Status Overview / Reporting Month).
   --kbr-navy-2 rather than --kbr-navy: the source report's tiles read a step
   lighter than the page chrome, and --kbr-navy is shared app-wide so it can't
   be relaxed here without repainting every other module. */
.rsk-tile {
  background: var(--kbr-navy-2);
  color: #fff;
  border-radius: 5px;
  padding: 3px 12px;
  margin-bottom: 4px;
  text-align: center;
}
.rsk-tile:last-child { margin-bottom: 0; }
/* Sized so all 9 label+count tiles clear the column without a scrollbar; the
   source runs them a little taller, but its left column has ~80px more to give. */
.rsk-tile-label { font-size: 12px; font-weight: 600; line-height: 1.2; }
.rsk-tile-count { font-size: 14px; font-weight: 700; line-height: 1.15; }

/* Main grid: heat map + top-10 on the left, analysis cards on the right */
/* Center (heat map + Top 10) and right (analysis cards) sit on one grey group
   that fills to the airplane — PB SC3/SC4. */
.rsk-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: stretch; flex: 1 1 auto; min-height: 0; background: #e9edf3; border-radius: 6px; padding: 12px; }
.rsk-main > * { min-width: 0; }
.rsk-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.rsk-col > .rsk-panel:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rsk-col > .rsk-panel:last-child .rsk-top-wrap { flex: 1 1 auto; min-height: 0; }
.rsk-panel { padding: 10px 14px 12px; }
.rsk-panel-title { text-align: center; font-weight: 700; font-size: 14px; color: #17263a; margin: 0 0 8px; }

/* Heat map */
.rsk-heatmap { width: 100%; height: auto; display: block; }
/* Plotted risks: black markers over the gradient, as the source draws them. The
   white ring keeps two coincident points readable. */
.rsk-point { fill: #11161d; stroke: #fff; stroke-width: 1; cursor: pointer; }
.rsk-point:hover { fill: #000; stroke-width: 1.6; }

/* Analysis-card charts. height:100% lets the flex row above size them; a pie or a
   bar group letterboxes harmlessly (it just centres in the box). */
.rsk-pie, .rsk-bars { width: 100%; height: 100%; display: block; }
.rsk-pie path, .rsk-pie circle, .rsk-bars rect { cursor: pointer; }
/* Compact enough that three band names fit two lines in the narrow pie cards —
   at 10px with a 12px gap they took three lines and overflowed the card. */
.rsk-legend {
  display: flex; flex-wrap: wrap; gap: 1px 8px; justify-content: center;
  font-size: 9px; line-height: 1.5; color: #3a4757;
}
.rsk-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }

/* Top 10 table (navy header, empty body allowed) */
.rsk-top-wrap { overflow: auto; }
.rsk-top-table { width: 100%; min-width: 1200px; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.rsk-top-table thead th {
  background: var(--kbr-navy-2); color: #fff;   /* matches the count tiles, per the source */
  font-size: 11px; font-weight: 600; text-align: left;
  padding: 8px; white-space: nowrap;
}
.rsk-top-table tbody td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.rsk-top-empty { padding: 34px; text-align: center; color: #94a3b8; font-size: 13px; }

/* Analysis cards (right side) — mostly empty titled cards in the source */
/* Right analysis cards fill the grey group: row 1 = the two small status cards,
   rows 2 and 3 = Responsibility and Categories filling to the bottom (PB). */
/* Three equal rows. With the first row `auto` the two pie cards were sized by their
   own content and collapsed to ~87px, leaving no room for the chart. */
.rsk-analysis { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 12px; min-height: 0; }
.rsk-analysis .span2 { grid-column: span 2; }
/* Flex column so the chart takes whatever height the title and legend leave, rather
   than the three parts being balanced by hand — the legend wraps to a different
   number of lines per card, so any fixed chart height clipped one of them. */
.rsk-acard { padding: 10px 12px; min-height: 150px; display: flex; flex-direction: column; }
.rsk-acard > .rsk-acard-title, .rsk-acard > .rsk-legend { flex: 0 0 auto; }
.rsk-acard > svg { flex: 1 1 auto; min-height: 0; }
.rsk-acard-title { font-weight: 700; font-size: 13px; color: #17263a; margin-bottom: 6px; }
.rsk-acard-empty { display: flex; align-items: center; justify-content: center; min-height: 100px; color: #b6c0cc; font-size: 12px; }

/* =====================================================================
   CHANGE PAGE
   ===================================================================== */
/* Hours / Amount toggle (shares the toggle shell with schedule/risk). */
.ep-toggle { display: inline-flex; align-self: flex-start; background: rgba(255,255,255,0.92); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.ep-toggle button { padding: 8px 20px; font-size: 14px; font-weight: 600; border: none; background: transparent; color: #3a4757; cursor: pointer; white-space: nowrap; }
.ep-toggle button.active { color: var(--kbr-navy); text-decoration: underline; text-underline-offset: 5px; }
.ep-toggle button.disabled { color: #a7b0bc; cursor: default; pointer-events: none; }

/* minmax(0,1fr) + min-width:0 lets the wide Change Logs table scroll inside
   its own wrapper instead of stretching the grid track (and the page). */
.chg-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 12px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.chg-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
/* Last panel in each column (Aging left, Change Logs right) fills to the airplane. */
.chg-col > .chg-panel:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#chgBreakdown { overflow-x: auto; }
.chg-breakdown-table { min-width: 720px; }
.chg-left-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chg-panel { padding: 10px 14px 12px; }
.chg-panel-title { font-weight: 700; font-size: 14px; color: #17263a; margin: 0 0 8px; }

/* Changes in Month */
.chg-cim-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; }
.chg-cim-row .lbl { color: #3a4757; font-weight: 600; }
.chg-cim-row .val { color: #17263a; font-weight: 700; }
.chg-cim-tri { font-size: 12px; margin-left: 4px; }
.chg-cim-tri.up { color: #2ea84c; }
.chg-cim-tri.down { color: #e05252; }

/* Duration before Change Approval */
.chg-duration { display: flex; align-items: center; gap: 10px; position: relative; }
.chg-dur-circles { display: flex; justify-content: flex-start; gap: 40px; flex: 1; position: relative; }
/* Connecting line from the first circle centre to the Average-Days box. The box
   (opaque, higher z-index) sits on top, so the line tucks under its left edge
   instead of painting across the tile. */
.chg-dur-circles::before { content: ""; position: absolute; top: 27px; left: 27px; right: -12px; height: 3px; background: #cbd5e1; z-index: 0; }
.chg-dur-item { text-align: center; position: relative; z-index: 1; }
.chg-dur-circle {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px; margin: 0 auto;
}
.chg-dur-circle.green  { background: #4caf50; }
.chg-dur-circle.yellow { background: #e6c34e; }
.chg-dur-circle.red    { background: #e57373; }
/* Labels hang below the circles without adding to the row height, so the circles
   — and the line through them — centre vertically against the Average-Days box. */
.chg-dur-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 7px; font-size: 11px; color: #3a4757; white-space: nowrap; }
.chg-avg {
  position: relative; z-index: 2; background: #fff;
  border: 1px solid #cfd8e3; border-radius: 6px;
  padding: 10px 16px; text-align: center; min-width: 92px;
  display: flex; flex-direction: column; justify-content: center;
}
.chg-avg .lbl { font-size: 13px; font-weight: 700; color: #17263a; line-height: 1.15; }
.chg-avg .val { font-size: 20px; font-weight: 700; color: #17263a; margin-top: 6px; }

/* Aging CCO's table */
/* Pull the header row up level with the "Aging CCO's Open" title, and let the
   four label rows share the card height evenly (fixed-canvas, so stable). */
.chg-aging-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: -26px; }
.chg-aging-table th { color: #64748b; font-weight: 700; text-align: right; padding: 3px 4px; }
.chg-aging-table th:first-child { text-align: left; }
.chg-aging-table td { padding: 26px 4px; color: #3a4757; }
.chg-aging-table td.lbl { font-weight: 600; }

/* Breakdown: bar row + value table, column-aligned via one table */
.chg-breakdown-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.chg-breakdown-table td, .chg-breakdown-table th { text-align: center; padding: 3px 4px; }
.chg-breakdown-table .rowlbl { text-align: left; font-weight: 700; color: #17263a; white-space: nowrap; padding-right: 10px; }
.chg-bar-cell { height: 150px; vertical-align: bottom; }
.chg-bar { width: 34px; margin: 0 auto; background: #17335a; border-radius: 2px 2px 0 0; }
.chg-cat { font-size: 11px; color: #3a4757; line-height: 1.2; vertical-align: bottom; padding-bottom: 6px; }
.chg-val-row td { border-top: 1px solid #eef1f5; padding: 5px 4px; color: #17263a; font-variant-numeric: tabular-nums; }
.chg-val-row .rowlbl { border-top: 1px solid #eef1f5; }

/* Change Logs — one wide horizontally-scrolling table */
.chg-logs-wrap { overflow: auto; flex: 1 1 auto; min-height: 0; }
.chg-logs-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 1600px; }
.chg-logs-table thead th {
  background: #1c4b7c; color: #fff;
  font-size: 11px; font-weight: 600; text-align: left;
  padding: 8px; white-space: nowrap; vertical-align: top;
}
.chg-logs-table tbody td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.chg-logs-empty { padding: 40px; text-align: center; color: #94a3b8; font-size: 13px; }

/* =====================================================================
   FINANCIAL PAGE (7 tabs; tab bar reuses .epc-tabbar/.epc-tab)
   ===================================================================== */
/* The body region fills the canvas below the Reporting-Month row so every tab's
   tiles reach the bottom (airplane rail icon), Power BI "fit to page" style. */
#finBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#finBody > .fin-ov,
#finBody > .fin-shell { flex: 1 1 auto; min-height: 0; }

/* ── Overview ─────────────────────────────────────────────────────────────
   Left column (Health/CPI + 3 charts) spans the full height; the tab strip
   occupies only row 1 of the right region so the FAC/ALR panels sit directly
   under it — matching the Power BI layout. */
.fin-ov {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "left tabs    tabs"
    "left facitd  alrtogo";
  gap: 12px;
}
.fin-ov-left  { grid-area: left; display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.fin-ov-tabs  { grid-area: tabs; min-width: 0; align-self: start; }
.fin-cell-facitd  { grid-area: facitd; }
.fin-cell-alrtogo { grid-area: alrtogo; }
.fin-ov-cell { min-height: 0; min-width: 0; }

.fin-ov-topcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 0 0 auto; }
.fin-ov-topcards .eph-health,
.fin-ov-topcards .fin-panel { height: 146px; }

/* Grouped time-phased charts: one card, three equal chart rows that scale to
   fill the left column so no scrollbar appears for a small overflow. Each row
   carries a grey title band + divider, matching the Power BI grouping. */
.fin-tp-group { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.fin-tp-item { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.fin-tp-item + .fin-tp-item { border-top: 1px solid #dfe4ea; }
.fin-tp-item .fin-tp-chart { flex: 1 1 0; min-height: 0; padding: 4px 12px 0; }
.fin-tp-item .fin-tp-svg { width: 100%; height: 100%; }

/* Grouped financial panels: title stays put, body scrolls only if it must. */
.fin-panel { padding: 10px 14px 12px; display: flex; flex-direction: column; }
.fin-panel-title { text-align: center; font-weight: 700; font-size: 15px; color: #17263a; margin: 0 0 8px; flex: 0 0 auto; }
.fin-panel-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* The two Overview group cards render their section bands edge-to-edge, so the
   card padding moves onto the section bodies instead. */
.fin-ov-cell.fin-panel { padding: 0; }
.fin-sec + .fin-sec { border-top: 1px solid #dfe4ea; }
.fin-sec-body { padding: 4px 14px 5px; }
/* The Overview blocks stack five deep in the FAC/ITD card; the "Last Month"
   label rows sit tighter here so every block fits without a scrollbar. */
.fin-sec .eph-fin-lastlabel-row td { padding-top: 1px; }

/* Grey header band shared by financial sections and chart rows. */
.fin-sec-title,
.fin-tp-title {
  background: #eef1f5;
  border-bottom: 1px solid #dfe4ea;
  text-align: center;
  font-weight: 700;
  color: #17263a;
  margin: 0;
}
.fin-sec-title { padding: 3px 10px; font-size: 15px; }
.fin-tp-title { padding: 6px 12px; font-size: 13px; text-align: left; }
.fin-cpi-title { text-align: center; font-weight: 700; font-size: 13px; color: #17263a; white-space: nowrap; }
.fin-cpi-gauge { max-width: 132px; margin: 4px auto 0; }
/* CPI card is a fixed-height tile: keep the gauge from forcing a scrollbar. */
.fin-ov-topcards .fin-panel { overflow: hidden; padding-bottom: 6px; }

/* ── Shell for the non-Overview tabs (empty/short left slot + offset tabs +
   full-width body that fills to the bottom) ───────────────────────────────── */
.fin-shell {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "sl   tabs"
    "body body";
  gap: 12px;
}
/* Cost Report L1 only. The Summary caption joins the summary text directly beneath
   it into one continuous white block, and is separated from the nav tabs by the
   column gap — the caption belongs to its text, not to the tab strip.
   row-gap is 0 so the caption and text touch; the body re-adds its own top gap.
   204px keeps the tab strip at the same x as on tabs without a summary
   (180 left column + 12 gap + 204 = 396). */
.fin-shell.has-summary {
  grid-template-columns: 180px 204px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "sl   sumcap  tabs"
    "sl   sumtext sumtext"
    "body body    body";
  column-gap: 12px;
  row-gap: 0;
}
.fin-shell.has-summary > .fin-shell-body { margin-top: 12px; }
.fin-shell-left { grid-area: sl; align-self: start; }
.fin-shell-tabs { grid-area: tabs; min-width: 0; align-self: start; }
/* Squared-off edges where the two meet, and no border between them, so the pair
   reads as one L-shaped card rather than two stacked tiles. */
/* The Summary is one grey tile: the caption above and the body below share the same
   grey fill and touch, and the text sits INSIDE the body as a white inset box, so grey
   shows around it. The label is pulled to the top (13px clears the card border and
   half its line) to read level with the Overview / Cost Report labels beside it. */
.fin-sum-cap {
  grid-area: sumcap; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 13px;
  font-weight: 700; font-size: 15px; color: #17263a;
  background: #eef1f5;
  border-radius: 6px 6px 0 0; border-bottom: none;
  /* No shadow: the card's default one is cast downward and landed on the grey body
     directly below, reading as a line across the tile. The body keeps its own
     shadow, which is what lifts the pair off the page. */
  box-shadow: none;
}
.fin-sum-body {
  grid-area: sumtext; background: #eef1f5;
  border-radius: 0 6px 6px 6px; border-top: none; padding: 6px;
}
/* The white box the summary text is read from, inset in the grey. */
.fin-sum-body > .fin-summary-text {
  background: #fff; border: 1px solid var(--kbr-border); border-radius: 4px;
}
.fin-shell-body { grid-area: body; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.fin-shell-body > .fin-panel,
.fin-shell-body > .fin-l1-body,
.fin-shell-body > .fin-fc-body { flex: 1 1 auto; min-height: 0; }
.fin-l1-body { display: flex; flex-direction: column; gap: 8px; }
.fin-l1-body .fin-scroll-panel { flex: 1 1 auto; }
/* Forecast tab: chart and impact table are ONE connected card — the chart fills
   the width (y-axis labels hug the left edge) and the table sits directly below
   it, divided by a grey rule. */
.fin-fc-group { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.fin-fc-chart { flex: 0 0 auto; padding: 10px 6px 0; }
.fin-fc-chart .fin-fc-svg { width: 100%; height: auto; display: block; }
.fin-fc-chart .fin-fc-legend { flex: 0 0 auto; }
.fin-fc-impact { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid #dfe4ea; padding: 0 12px 12px; }
/* A panel whose whole body is a scroll region (tables): plain block (not the
   flex column .fin-panel uses) so stacked tables don't each shrink into their
   own scrollbar — the panel scrolls once, vertically, if anything overflows. */
.fin-scroll-panel { display: block; overflow: auto; }

/* Time-phased scatter charts (grouped rows — title band set with .fin-sec-title
   above; .fin-tp-group holds three of these). */
.fin-tp-chart { position: relative; }
.fin-tp-svg { display: block; }
/* Hover crosshair: marks which period the tooltip is reporting. Hidden until the
   mousemove handler positions it; never a pointer target of its own. */
.fin-tp-cursor { stroke: #17263a; stroke-width: 1; visibility: hidden; pointer-events: none; }
.fin-tp-legend { display: flex; gap: 14px; justify-content: center; font-size: 10px; color: #3a4757; margin-top: 2px; }
.fin-tp-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* Shared floating hover tooltip (time-phased charts) */
/* Vertical guide line drawn at the hovered column on line/scatter charts. */
.ep-guide { stroke: #17263a; stroke-width: 1; pointer-events: none; }
.fin-hovertip,
.epcsr-hovertip {
  position: fixed; z-index: 2000; pointer-events: none;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18); padding: 8px 12px;
  font-size: 12px; color: #17263a; display: none; min-width: 150px;
}
.fin-hovertip .tt-period,
.epcsr-hovertip .tt-period { font-weight: 700; margin-bottom: 6px; }
/* Risk marker card: the risk's row as a small table. Only the Description column
   wraps — capped, so a long one doesn't stretch the tooltip across the viewport
   while the numeric columns stay on one line. */
.rsk-tip-table { border-collapse: collapse; font-size: 11px; }
/* Navy header on --kbr-navy-2, the same band the Top 10 table below the heat map
   uses, so the card reads as an extract of it. White rules inside the header and
   faint dark ones through the body give a grid that stays visible on both fills. */
.rsk-tip-table th {
  background: var(--kbr-navy-2); color: #fff;
  text-align: left; font-weight: 600; white-space: nowrap;
  padding: 3px 8px; border: 1px solid rgba(255, 255, 255, 0.25);
}
.rsk-tip-table td {
  text-align: left; color: #17263a; white-space: nowrap;
  padding: 4px 8px; border: 1px solid rgba(23, 38, 58, 0.10);
  font-variant-numeric: tabular-nums; vertical-align: top;
}
/* The cap lives on the inner div, not the cell: a table cell treats max-width as
   advisory and the auto layout widened the card to ~460px instead. */
.rsk-tip-table .wrap { white-space: normal; }
.rsk-tip-table .wrap > div { max-width: 200px; min-width: 110px; }
.fin-hovertip .tt-row,
.epcsr-hovertip .tt-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.fin-hovertip .tt-row .nm,
.epcsr-hovertip .tt-row .nm { display: flex; align-items: center; gap: 6px; }
.fin-hovertip .tt-row .dot,
.epcsr-hovertip .tt-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.fin-hovertip .tt-row .vl,
.epcsr-hovertip .tt-row .vl { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Financial blocks (reuse .eph-fin-* from Project Home) ────────────── */
/* POC % / % To Go: large KPI pair, then the same left-aligned "Last Month" line
   over a delta row that .eph-fin-table blocks use, so this section measures one
   table block tall and Financial - To Go mirrors Financial - ITD opposite it. */
/* 12px foot, not 8: makes up the caption border + padding a table block has and
   this section doesn't, landing both at the same height. */
.fin-togo-poc { padding: 4px 0 12px; }
.fin-togo-poc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.fin-togo-poc .lbl { font-size: 11px; color: #64748b; }
.fin-togo-poc .val { font-size: 20px; font-weight: 700; color: #17263a; }
.fin-togo-poc-lastlabel { text-align: left; font-size: 10px; font-weight: 600; color: #94a3b8; padding: 3px 6px 0; }
.fin-togo-poc-last { font-size: 11px; color: #94a3b8; }
.fin-togo-poc-last .pos { color: #2ea84c; margin-left: 12px; }

/* ── Cost Report L1 ───────────────────────────────────────────────────── */
.fin-summary-band { display: grid; grid-template-columns: 220px 1fr; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.fin-summary-text { padding: 8px 16px; font-size: 12px; line-height: 1.45; color: #17263a; text-align: center; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fin-table-wrap { overflow-x: auto; }
/* Sized to fit the tile width without a horizontal scrollbar (16 columns). */
/* Gridlines are 1px of the table's own white background (border-spacing), not cell
   borders. Collapsed 1px borders between rows of DIFFERENT fill land on fractional
   device pixels once the canvas scale is applied and anti-alias into a grey
   hairline; a background gap stays white through its centre. Column separators
   never showed the problem because cells either side of them share a fill.
   Column widths come from the <colgroup> l1Table emits, so the headed table and
   the headerless Job Performance table below it stay in register. */
.fin-l1-table {
  width: 100%; table-layout: fixed; font-size: 12px;
  border-collapse: separate; border-spacing: 1px; background: #fff;
}
.fin-l1-table th, .fin-l1-table td { padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }

/* Both header rows and the Category column are one navy field. Group and column
   headings centre over their figures; only the Category label reads as a row
   header and stays left. */
.fin-l1-table .grp th,
.fin-l1-table .sub th { background: #2c5f8d; color: #fff; text-align: center; }
.fin-l1-table .grp th { font-weight: 700; }
.fin-l1-table .sub th { font-weight: 600; font-size: 10px; vertical-align: middle; white-space: normal; }
/* th.cat-head, not .cat-head: it has to outrank the centring `.grp th` rule above. */
.fin-l1-table .grp th.cat-head { text-align: left; vertical-align: middle; }

/* Figures band white / light blue. */
.fin-l1-table tbody td {
  text-align: right; background: #fff;
  font-variant-numeric: tabular-nums; color: #17263a;
}
.fin-l1-table tbody tr:nth-child(even) td { background: #dce6f1; }
/* The Category cell is a row header, so it holds navy straight through the
   banding. The nth-child override is required, not redundant: the banding rule
   above outranks a plain td.cat selector and would otherwise repaint it. */
.fin-l1-table tbody td.cat {
  text-align: left; font-weight: 700; white-space: normal;
  background: #2c5f8d; color: #fff;
}
.fin-l1-table tbody tr:nth-child(even) td.cat { background: #2c5f8d; }
.fin-perf-title { font-weight: 700; font-size: 13px; color: #17263a; margin: 8px 0 4px; }
/* Job Performance sits at the foot of the panel, as in the source: the auto top
   margin hands it whatever height the table above doesn't use, instead of the
   slack pooling below it. */
.fin-l1-body .fin-scroll-panel { display: flex; flex-direction: column; }
.fin-l1-body .fin-perf-title { margin-top: auto; }

/* ── Cost Report L2 ───────────────────────────────────────────────────── */
/* Sized to fit the tile width without a horizontal scrollbar (20 columns). */
.fin-l2-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 9px; }
.fin-l2-table th, .fin-l2-table td { padding: 3px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The Revenue / Cost band stays slim; the Baseline / Forecast band above it runs
   taller with a larger face, at roughly 1.5x its height as in the source. */
.fin-l2-table .grp2 th { padding-top: 1px; padding-bottom: 1px; }
.fin-l2-table .grp1 th { text-align: center; font-weight: 700; color: #fff; font-size: 15px; padding-top: 3px; padding-bottom: 3px; border: 1px solid rgba(255,255,255,0.3); }
.fin-l2-table .grp1 .baseline { background: #2f6ea6; }
.fin-l2-table .grp1 .forecast { background: #7fa542; }
/* Same translucent white divider as grp1, so the Revenue / Cost segments read as
   separate bands rather than one continuous strip. */
.fin-l2-table .grp2 th { text-align: center; font-weight: 700; color: #fff; font-size: 11px; border: 1px solid rgba(255,255,255,0.3); }
.fin-l2-table .grp2 .rev-b { background: #244f78; }
.fin-l2-table .grp2 .cost-b { background: #2f6ea6; }
.fin-l2-table .grp2 .rev-f { background: #6f9438; }
.fin-l2-table .grp2 .cost-f { background: #7fa542; }
/* Column headings sit top-left over their right-aligned figures, as in the source. */
.fin-l2-table .sub th { background: #2c5f8d; color: #fff; font-size: 8px; font-weight: 600; text-align: left; vertical-align: top; border: 1px solid #24507a; white-space: normal; }
.fin-l2-table .sub th:first-child, .fin-l2-table tbody td.disc { white-space: normal; }
.fin-l2-table th:first-child, .fin-l2-table td:first-child { width: 10%; }
/* Section label belongs at the left, under the Discipline column it names — it was
   inheriting the right alignment of the figure cells and sat at the far right. */
/* Section divider: a full step deeper than the row banding. At #eef3fb against the
   band's #f2f6fb the two were within 4 points per channel, so each section header
   merged into the row beneath it. */
.fin-l2-table .section td { background: #d9e4f0; font-weight: 700; color: #17263a; text-align: left; }
/* Faint grey grid so each cell reads as its own box whatever its row fill is. */
.fin-l2-table tbody td { text-align: right; border: 1px solid rgba(23, 38, 58, 0.08); font-variant-numeric: tabular-nums; color: #17263a; }
.fin-l2-table tbody td.disc { text-align: left; color: #3a4757; white-space: normal; }
/* Row banding, restarted per section by the .band class the controller emits
   (CSS nth-child can't do it — the section rows interleave with the data rows). */
.fin-l2-table tbody tr.band td { background: #f0f5fb; }
/* Variance cell: marker hard left, figure hard right, so the markers line up
   vertically down the column. Flex lives on an inner span so the td stays a
   table-cell and column widths are unaffected. */
.fin-l2-variance { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.fin-l2-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e05252; flex: 0 0 auto; }

/* ── Forecast charts (WH / Revenue / Cost / JI) ───────────────────────── */
.fin-fc-svg { width: 100%; height: auto; display: block; }
.fin-fc-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: #3a4757; margin-top: 6px; }
.fin-fc-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
/* Fixed layout: widths come from the <colgroup> impactTable emits, so the grid
   holds still when switching forecast tabs instead of re-sizing around each
   type's Mitigation headers. */
.fin-impact-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.fin-impact-table th, .fin-impact-table td { border: 1px solid #dfe4ea; padding: 5px 8px; }
/* Safety net for the nowrap column headers: a label longer than its fixed column
   ellipsises rather than spilling over its neighbour. Deliberately NOT applied to
   .grp th — its label is sized to fit (see below), and silently ellipsising the
   section title would be worse than letting it wrap if that ever stops holding. */
.fin-impact-table .hdr th { overflow: hidden; text-overflow: ellipsis; }
/* No height floor: the group label now sits on one line on every forecast tab
   (IMPACT_COL_WIDTHS gives the three columns it spans 26%), so the row is one line
   tall and the same height on all of them. The old 48px two-line floor existed only
   because the Revenue/Cost/JI label wrapped while WH's did not, which shifted the
   grid 20px on a tab switch; with no wrapping there is nothing left to equalise. */
.fin-impact-table .grp th { font-weight: 700; color: #17263a; text-align: center; }
/* Grey group-header cells ("Potential Impact…", "Mitigation"); spacer cells stay blank. */
.fin-impact-table .grp th:not(:empty) { background: #eef1f5; }
.fin-impact-table .grp th:empty { border: none; }
.fin-impact-table .hdr th { font-weight: 700; color: #17263a; text-align: left; white-space: nowrap; }
.fin-impact-table .hdr th.c { text-align: center; }
.fin-impact-table tbody td { color: #17263a; }
.fin-impact-table tbody td.c { text-align: center; font-variant-numeric: tabular-nums; }
/* Totals strip under the uncertainties, as in the source. */
.fin-impact-table .tot td { background: #dfe4ea; font-weight: 700; }
/* Marks which of the two Mitigation columns an uncertainty is managed through. */
.fin-mit-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #9aa7b4; }
.fin-impact-empty { padding: 30px; text-align: center; color: #94a3b8; }

/* =====================================================================
   TECHNICAL PERFORMANCE PAGE
   ===================================================================== */
/* Slicers row (Cost Type + Distribution Method) sits right of the tab bar. */
.tp-slicers { display: flex; gap: 20px; align-items: flex-end; }
.tp-slicer { display: flex; flex-direction: column; gap: 3px; }
.tp-slicer > label { font-size: 11px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: #2a3543; }
.tp-slicer select { height: 30px; min-width: 150px; border: 1px solid #aab3bf; border-radius: 3px; background: #eef0f3; font-size: 12px; padding: 0 6px; color: var(--kbr-navy); }

/* Main grid: the side column (Health + Overall) spans the full height; the tab
   band + slicers occupy row 1 of the right region — so the tab band top lines up
   with the Health Score top — and the technical-area table fills the rest down
   to the airplane rail icon. */
.tp-grid {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}
/* Home / empty tabs: side (Health [+ Overall]) spans full height, content on
   the right. */
.tp-grid[data-tab="home"],
.tp-grid[data-tab="empty"] {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "side tabs"
    "side body";
}
/* Engineering: Health + KPI strip form the top band; the chart/table spans the
   FULL width below (all the way to the left edge). */
.tp-grid[data-tab="eng"] {
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "side tabs"
    "side kpi"
    "body body";
}
.tp-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#tpKpis { grid-area: kpi; min-width: 0; align-self: start; }
.tp-grid[data-tab="home"] #tpKpis,
.tp-grid[data-tab="empty"] #tpKpis { display: none; }
/* Tabs + slicers live in ONE grey rounded band (Power BI style). */
.tp-tabrow {
  grid-area: tabs;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  align-self: start;
  background: #ccd2da; border: 1px solid #b7bfca; border-radius: 8px;
  padding: 6px 16px; box-shadow: var(--kbr-shadow-md);
}
.tp-tabrow .epc-tabbar { background: transparent; border: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0; }
#tpBody { grid-area: body; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: auto; }

.tp-side-health { flex: 0 0 auto; height: 164px; display: flex; flex-direction: column; }
/* On Home/empty the Health card is shorter (Overall or empty below); on
   Engineering it grows to bottom-align with the KPI strip. */
.tp-grid[data-tab="home"] .tp-side-health,
.tp-grid[data-tab="empty"] .tp-side-health { height: 128px; }
#tpOverallCard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#tpOverall { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; }
.tp-side-card { padding: 10px 12px 14px; text-align: center; }
.tp-side-title { font-weight: 700; font-size: 15px; color: #17263a; margin-bottom: 6px; }
.tp-overall-metric { margin: 2px 0; }
.tp-overall-metric .lbl { font-size: 13px; color: #3a4757; margin-bottom: 2px; }

/* Donut gauge */
.tp-donut { width: 76px; height: 76px; margin: 0 auto; display: block; }
.tp-donut-sm { width: 60px; height: 60px; }
.tp-var { font-size: 15px; font-weight: 700; color: #17263a; }
.tp-var-tri { font-size: 12px; }
/* Overall tile only: it had ~190px of unused height, so its two rings and the
   variance below them run larger. The same elements in the Technical Area rows keep
   the 76px above, where the row height is the constraint. The viewBox is fixed at
   64x64, so widening the SVG scales the ring, its stroke and its label together. */
.tp-overall-metric .tp-donut { width: 120px; height: 120px; }
.tp-overall-metric .tp-var { font-size: 22px; }
.tp-overall-metric .tp-var-tri { font-size: 18px; }
.tp-var-tri.up { color: #2ea84c; }
.tp-var-tri.down { color: #e05252; }
.tp-var-dash { color: #94a3b8; font-weight: 700; }

/* Home: the area rows fill the body height evenly. Each row is a white card
   whose right ~44% is a grey gauge panel (Baseline / Earned / Variance). */
.tp-home { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tp-home-rows { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }

.tp-home-head {
  display: grid; grid-template-columns: 1fr 44%;
  padding: 2px 8px 6px; color: #cdd8e6; font-weight: 700; font-size: 14px;
  flex: 0 0 auto;
}
.tp-home-head .tp-head-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; }

.tp-area {
  display: grid; grid-template-columns: 1fr 44%; align-items: stretch;
  background: #fff; border-radius: 6px; box-shadow: var(--kbr-shadow-sm);
  min-height: 0; overflow: hidden; flex: 1 1 0;
}
.tp-area-info { padding: 8px 18px; display: flex; flex-direction: column; justify-content: center; }
.tp-area-name { font-size: 19px; font-weight: 700; color: #17263a; }
.tp-area-name .ep-glyph { margin-left: 8px; vertical-align: middle; }
.tp-area-sub { font-size: 13px; color: #3a4757; margin-top: 2px; }
.tp-area-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #eef2f7; align-items: center; }
.tp-area-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-area-metric.var { font-size: 15px; }
/* Rows whose discipline tab has data open it on click (like the navbar tab). */
.tp-area.clickable { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.tp-area.clickable:hover { box-shadow: var(--kbr-shadow-md); transform: translateY(-2px); }
.tp-area.clickable:focus-visible { outline: 2px solid var(--kbr-teal, #1f9ba8); outline-offset: 2px; }

/* Engineering KPI strip — compact row that bottom-aligns with Health Score. */
.tp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tp-kpi { padding: 6px 12px 8px; }
/* KPI cards are selectors — clicking swaps the chart below; active one ringed. */
.tp-kpi-sel { cursor: pointer; transition: box-shadow .12s ease; }
.tp-kpi-sel:hover { box-shadow: 0 0 0 2px rgba(31,155,168,0.4), var(--kbr-shadow-sm); }
.tp-kpi-sel.active { box-shadow: 0 0 0 2px #1f9ba8, var(--kbr-shadow-md); }
.tp-kpi-title { font-weight: 700; font-size: 14px; color: #17263a; margin-bottom: 4px; }

/* Engineering chart / table tile: fills the body to the bottom; toggle top-right. */
.tp-eng-chart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 10px; }
.tp-eng-toggle { display: flex; justify-content: flex-end; flex: 0 0 auto; margin: -2px 0 4px; }
.tp-progress-wrap { flex: 1 1 auto; min-height: 0; }
.tp-eng-progress .tp-progress-svg { width: 100%; height: 100%; display: block; }
.tp-eng-qty .tp-table-wrap,
.tp-eng-details .tp-table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
.tp-kpi-bar-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; margin-bottom: 5px; }
.tp-kpi-bar-row .lbl { font-size: 12px; color: #3a4757; }
.tp-kpi-bar { height: 20px; border-radius: 2px; position: relative; background: #e8ecf1; }
.tp-kpi-bar .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; }
.tp-kpi-bar .fill.grey { background: #9aa7b4; }
.tp-kpi-bar .fill.teal { background: #1f9ba8; }
.tp-kpi-bar .fill.red  { background: #c0392b; }
.tp-kpi-bar .v { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: #fff; }
.tp-wage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.tp-wage .lbl { font-size: 10px; color: #64748b; }
.tp-wage .val { font-size: 18px; font-weight: 700; color: #17263a; }

/* Engineering sub-tab content */
.tp-eng-body { }
.tp-progress-svg { width: 100%; height: auto; display: block; }
.tp-progress-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 11px; color: #3a4757; margin-top: 6px; }
.tp-progress-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* QTY Trend + Details tables */
.tp-table-wrap { overflow: auto; }
/* QTY Trend + Details tables share ONE fit-to-width sizing (fixed layout, no
   horizontal scroll) so both look identical in font, padding and header. */
/* QTY Trend and Details only — .tp-tbl is used by nothing else. */
.tp-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; }
.tp-tbl th, .tp-tbl td { overflow: hidden; text-overflow: ellipsis; }
.tp-tbl th:first-child, .tp-tbl td:first-child { width: 15%; }
/* White rules in the header, faint dark ones through the body: a single colour
   would disappear against one fill or the other. */
.tp-tbl thead th { position: sticky; top: 0; z-index: 2; background: #17607a; color: #fff; font-size: 11.5px; font-weight: 600; padding: 6px; text-align: left; vertical-align: bottom; white-space: normal; border: 1px solid rgba(255, 255, 255, 0.22); }
.tp-tbl thead th.c { text-align: center; }
.tp-tbl thead th.r { text-align: right; }
.tp-tbl .grp th { background: #17607a; text-align: center; }
.tp-tbl tr.section td { background: #cfe0ee; font-weight: 700; color: #17263a; padding: 4px 6px; white-space: normal; }
.tp-tbl tbody td { padding: 4px 6px; border: 1px solid rgba(23, 38, 58, 0.08); white-space: nowrap; }
.tp-tbl tbody td:first-child { white-space: normal; }
.tp-tbl tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
.tp-tbl tbody tr.total td { font-weight: 700; border-top: 2px solid #cfd8e3; background: #f4f7fb; }
.tp-tbl .uom { color: #17607a; }
.tp-conf-legend { display: flex; gap: 18px; justify-content: flex-end; font-size: 12px; color: #3a4757; padding: 8px 4px 0; }
.tp-conf-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
/* Fit-to-width: no forced min-width (tables size to the full-width tile). */
.tp-min-1200, .tp-min-1300 { min-width: 0; }

/* Cost Type slicer — multi-select checkbox dropdown (replaces the plain select) */
.tp-ct { position: relative; }
.tp-ct-btn {
  height: 30px; min-width: 150px; padding: 0 26px 0 8px;
  border: 1px solid #aab3bf; border-radius: 3px; background: #eef0f3;
  font-size: 12px; color: var(--kbr-navy); text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.tp-ct-btn::after { content: "▾"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 10px; }
.tp-ct-menu {
  position: absolute; top: calc(100% + 3px); right: 0; z-index: 80;
  min-width: 210px; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--kbr-border); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22); padding: 6px 10px;
}
.tp-ct-menu[hidden] { display: none; }
.tp-ct-menu label { display: block; font-size: 12px; padding: 3px 0; color: #17263a; cursor: pointer; white-space: nowrap; }
.tp-ct-menu input { margin-right: 6px; }

/* =====================================================================
   RECEIVABLES PAGE
   ===================================================================== */
/* The whole Overview fills the canvas (no bottom overflow): fixed top tile row,
   then the AR table and the Cashflow/Overdue-Ratio band share the rest. */
#rcvBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
/* Health Score stands alone; DSO is grouped with the five KPI tiles on its right. */
.rcv-top { display: grid; grid-template-columns: 210px 1fr; gap: 12px; grid-template-rows: 168px; flex: 0 0 auto; }
.rcv-health { display: flex; flex-direction: column; }
/* DSO + KPI tiles + the view toggle sit together on one grey panel (Power BI):
   DSO tall on the left, toggle top-right, the five KPI tiles across the bottom. */
.rcv-group {
  display: grid;
  grid-template-columns: 1.15fr repeat(5, 1fr);
  grid-template-rows: auto 1fr;
  gap: 10px;
  background: #d8dde3; border: 1px solid #c3cad3; border-radius: 8px; padding: 10px;
  min-width: 0;
}
.rcv-group .rcv-dso { grid-column: 1; grid-row: 1 / 3; }
.rcv-toggle-wrap { grid-column: 2 / -1; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; }
.rcv-group .rcv-kpi { grid-row: 2; min-width: 0; }
.rcv-dso { padding: 8px 12px; text-align: center; display: flex; flex-direction: column; }
.rcv-dso-title { font-weight: 700; font-size: 13px; color: #17263a; }
.rcv-dso-days { font-size: 13px; color: #3a4757; }
.rcv-dso-plot { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.rcv-dso-dot { width: 10px; height: 10px; border-radius: 50%; background: #17263a; }
.rcv-dso-period { font-size: 11px; color: #64748b; }
.rcv-kpi { padding: 8px 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.rcv-kpi .lbl { font-size: 12px; font-weight: 600; color: #3a4757; margin-bottom: 8px; }
.rcv-kpi .val { font-size: 22px; font-weight: 700; color: #17263a; }
.rcv-table-panel { flex: 0.8 1 0; min-height: 0; display: flex; flex-direction: column; }
.rcv-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Fit all 18 columns to the tile width (no horizontal scroll). */
.rcv-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 9px; }
.rcv-table th, .rcv-table td { padding: 2px 3px; border: 1px solid #dfe6ee; overflow: hidden; text-overflow: ellipsis; }
.rcv-table th:first-child, .rcv-table td:first-child { width: 5.5%; }
.rcv-table .grp th { text-align: center; font-size: 14px; font-weight: 700; color: #17263a; border: none; padding-bottom: 6px; }
.rcv-table .hdr th { background: #fff; color: #3a4757; font-size: 8.5px; font-weight: 700; text-align: left; vertical-align: bottom; white-space: normal; }
.rcv-table tbody td { text-align: right; font-variant-numeric: tabular-nums; color: #17263a; }
.rcv-table tbody td.lbl { text-align: left; font-weight: 600; }
.rcv-table tbody tr.total td { font-weight: 700; }
.rcv-ov { background: #eaf2fb; }       /* Overdue column band */
.rcv-ex { background: #d7e6f5; }       /* Exclusions column band */
.rcv-bottom { flex: 1.2 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: 12px; }
.rcv-cashflow { display: flex; flex-direction: column; min-height: 0; }
.rcv-cashflow-title, .rcv-gauge-title { text-align: center; font-weight: 700; font-size: 15px; color: #17263a; margin-bottom: 6px; flex: 0 0 auto; }
.rcv-empty { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; color: #b6c0cc; font-size: 13px; }
.rcv-gauge { text-align: center; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
.rcv-gauge .ep-semi-gauge { margin: auto; }
.ep-semi-gauge { width: 100%; max-width: 260px; height: auto; display: block; }

/* =====================================================================
   RESOURCES PAGE
   Power BI layout: small Health tile top-left; FTE Resources + Key Resource
   Requirements side by side; KBR Resource Cost Rate full width — filling the
   canvas to the airplane rail icon.
   ===================================================================== */
#resBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.res-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.res-health { flex: 0 0 auto; width: 190px; height: 150px; padding: 10px 14px; text-align: center; display: flex; flex-direction: column; }
.res-health .eph-health-dot { margin: auto; }
.res-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.res-top { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.res-panel { padding: 10px 14px 12px; display: flex; flex-direction: column; min-height: 0; }
.res-panel-title { font-weight: 700; font-size: 15px; color: #17263a; margin-bottom: 8px; flex: 0 0 auto; }
.res-req-table { width: 100%; border-collapse: collapse; font-size: 12px; flex: 0 0 auto; }
.res-req-table thead th { background: #1c4b7c; color: #fff; font-size: 12px; font-weight: 600; padding: 8px; text-align: left; }
.res-req-table thead th.c { text-align: center; }
.res-req-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #94a3b8; }
.res-costrate { flex: 1 1 0; min-height: 0; }
.res-empty { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; color: #b6c0cc; font-size: 13px; }

/* Restored for the Workshare page (Health side column + body). */
.tp-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }

/* =====================================================================
   WORKSHARE PAGE
   Power BI layout: Health (left) spans a top band holding the IOC/Global toggle
   and the three Target cards; below, a row of three charts and a row of three
   split panels — all filling the canvas to the airplane rail icon.
   ===================================================================== */
#wsBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.ws-topband { flex: 0 0 auto; display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
.ws-health { padding: 8px 14px; text-align: center; display: flex; flex-direction: column; }
.ws-health .eph-health-dot { margin: auto; }
.ws-topright { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ws-togglebar { display: flex; align-items: center; padding: 6px 14px; }
.ws-togglebar .ep-toggle { box-shadow: none; background: transparent; }
.ws-global-empty { flex: 1 1 auto; min-height: 0; display: flex; }
.ws-global-empty .res-empty { flex: 1 1 auto; }

/* The three Target cards sit together on one grey panel (Power BI). */
.ws-targets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1 1 auto; min-height: 0;
  background: #d8dde3; border: 1px solid #c3cad3; border-radius: 8px; padding: 8px;
}
.ws-target { padding: 6px 14px 8px; }
.ws-target-title { font-weight: 700; font-size: 15px; color: #17263a; }
.ws-target-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.ws-target-val { font-size: 26px; font-weight: 700; color: #17263a; }
.ws-target-arrow { font-size: 26px; }
.ws-target-arrow.green { color: #2ea84c; }
.ws-target-arrow.red { color: #e8792b; }
.ws-target-sub { font-size: 12px; color: #3a4757; margin-top: 2px; }
.ws-target-sub .delta.green { color: #2ea84c; font-weight: 700; }
.ws-target-sub .delta.red { color: #e05252; font-weight: 700; }

.ws-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1 1 0; min-height: 0; }
.ws-chart { padding: 8px 12px 10px; display: flex; flex-direction: column; min-height: 0; }
.ws-chart-title { text-align: center; font-weight: 700; font-size: 14px; color: #17263a; margin-bottom: 4px; flex: 0 0 auto; }
.ws-chart-svg { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; display: block; }
.ws-chart-legend { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-size: 10px; color: #3a4757; margin-top: 2px; }
.ws-chart-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

.ws-splits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1.2 1 0; min-height: 0; }
.ws-split { padding: 8px 14px 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ws-split-title { text-align: center; font-weight: 700; font-size: 13px; color: #17263a; margin-bottom: 4px; flex: 0 0 auto; }
.ws-split-nums { margin-bottom: 6px; background: #eef2f7; border-radius: 6px; padding: 5px 10px; }
.ws-split-num { display: flex; justify-content: space-between; font-size: 12px; padding: 1px 0; }
.ws-split-num .lbl { font-weight: 700; color: #17263a; }
.ws-split-num .val { font-weight: 700; color: #17263a; font-variant-numeric: tabular-nums; }
.ws-split-heads { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #17263a; margin: 2px 0; }
.ws-split-bars { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 3px; }
.ws-split-bars .mid { font-size: 11px; color: #3a4757; white-space: nowrap; }
.ws-bar { height: 16px; width: 135px; max-width: 100%; background: #e8ecf1; position: relative; border-radius: 2px; }
/* Bookend the fixed-width tracks: %HO to the tile's left edge, %IOC to its right. */
/* Tracks stay pinned to the outer edges of their columns. Each row is its own
   1fr-auto-1fr grid, so the middle column is sized by that row's own label — pin the
   tracks to the label instead and they stagger by the label-width difference (23px
   between "EAC" and "Cum to Date"). Pinned outward, every row's track lines up. */
.ws-split-bars > .ws-bar:first-child { justify-self: start; }
.ws-split-bars > .ws-bar:last-child  { justify-self: end; }
/* Only the FILL is mirrored: %HO is anchored to its track's inner (right) edge and
   grows outward, the mirror of %IOC growing right from its inner edge. The track
   itself does not move. */
.ws-split-bars > .ws-bar:first-child .fill { left: auto; right: 0; }
.ws-bar .fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.ws-bar .fill.navy { background: #35506e; left: 0; }
.ws-bar .fill.green { background: #5cb85c; left: 0; }
.ws-bar .fill.red { background: #e78a8a; left: 0; }
.ws-bar .v { position: absolute; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: #fff; left: 6px; }

/* =====================================================================
   NARRATIVE PAGE
   Two tabs (Concerns / Solutions, PSR Actions). RAG status pill sits at the
   tab-bar left; tabs align right (source layout). Reuses .ep-glyph-* dots.
   ===================================================================== */
.nrv-tabbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  margin-bottom: 12px;
  flex-shrink: 0;
  background: #dfe3e8;
}
.nrv-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kbr-navy);
}
.nrv-tabs { display: flex; gap: 4px; margin-left: auto; }
.nrv-tab {
  padding: 9px 16px 7px;
  font-size: 14px;
  font-weight: 600;
  color: #3a4757;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.nrv-tab:hover { color: var(--kbr-navy); }
.nrv-tab.active { color: var(--kbr-navy); border-bottom-color: var(--kbr-navy); }

/* Panel fills the canvas: the two text cards share the height, submitted bar
   pinned at the bottom — nothing overflows past the airplane rail icon. */
.nrv-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

/* Grey card with a grey header band and a white content box (Power BI). */
.nrv-text-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 10px; background: #dfe3e8; }
.nrv-text-title { font-weight: 700; font-size: 15px; color: #17263a; margin-bottom: 6px; flex: 0 0 auto; }
.nrv-text-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
  border: 1px solid #c9cfd6;
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #1f2b3a;
}
.nrv-text-block { white-space: normal; }
.nrv-text-divider { border-top: 1px solid var(--kbr-border); margin: 10px 0; }
.nrv-text-empty { color: var(--kbr-text-muted); font-size: 12px; padding: 4px 2px; }

.nrv-submitted {
  flex: 0 0 auto;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  color: #17263a;
  background: #dfe3e8;
}

.nrv-actions-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 10px; background: #dfe3e8; }
.nrv-actions-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; border: 1px solid #c9cfd6; border-radius: 4px; }
.nrv-actions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.nrv-actions-table th {
  text-align: left;
  font-weight: 700;
  color: var(--kbr-navy);
  padding: 8px 10px;
  border-bottom: 2px solid var(--kbr-border);
  white-space: nowrap;
}
.nrv-actions-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--kbr-border);
  color: #1f2b3a;
  vertical-align: top;
}

/* ── Layout robustness (resize glitches, bg coverage, badge/legend) ──────── */
body.epcsr-page { background-color: var(--kbr-navy); }   /* fallback so no white gaps on overflow/resize */
.epcsr-rail-btn { flex-shrink: 0; }                       /* keep icon circles round when the column is short */
.epcsr-rail { flex-shrink: 0; }
.eph-info-btn { top: 8px; right: 10px; }                  /* inside the card — .epcsr-card has overflow:hidden */
.kms-controls { margin-bottom: 12px; }                    /* match the month-row gap on toggle pages */

/* Footer legibility: white text can land on a bright region of the photo —
   a strong dark halo keeps "Indicative Only / Reporting Currency" readable. */
.epcsr-page-note, .epcsr-footer, .epcsr-month-label {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.7);
}

/* ── Background: fixed full-viewport layer behind everything ────────────── */
/* The photo lives on a position:fixed ::before that always fills the viewport
   (any window size, any scroll position) and can never shrink to the content
   box or expose the light-grey root. Body itself is solid navy as the base. */
html:has(body.epcsr-page) { background: var(--kbr-navy); }
body.epcsr-page { background: transparent; }   /* transparent so the fixed ::before photo shows through */
body.epcsr-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(9,24,42,0.82) 0%, rgba(15,42,68,0.66) 45%, rgba(28,75,124,0.5) 100%),
    url("../Image/Reporting_hub_background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.epcsr-main { padding-bottom: 24px; }

/* Responsive rail: pill size + gap scale with viewport height (clamp) so all
   13 buttons fit at any height — shrink on short windows, cap on tall ones.
   Only for a rail outside .epcsr-canvas; the canvas block above wins on all 13
   ePCSR pages, which scale rather than reflow. Sizes are set as the same custom
   properties the pill rules read, so structure stays defined in one place. */
.epcsr-rail {
  gap: clamp(4px, 1.1vh, 16px);
  padding: clamp(8px, 1.5vh, 24px) 0 clamp(8px, 1.5vh, 20px) 26px;
  --ep-rail-btn: clamp(32px, 5.5vh, 70px);
  --ep-rail-btn-wide: clamp(52px, 8.8vh, 112px);
  --ep-rail-icon: clamp(26px, 4.5vh, 58px);
  --ep-rail-font: clamp(14px, 2.4vh, 30px);
}