/* =====================================================================
   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;
}

/* ── 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: 22px 26px 6px;
  color: #fff;
}
.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.45; 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 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                        /* room to breathe between icons */
  padding: 26px 0 20px 22px;        /* top drops the first icon clear of the logo; left nudges icons off the edge so a centred tooltip has room */
  background: transparent;          /* icons float on the photo, PB-style */
  overflow: visible;                /* tooltips escape the rail */
}
.epcsr-rail-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--kbr-navy);
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.epcsr-rail-btn:hover { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.22); }
.epcsr-rail-btn.active {
  background: var(--kbr-blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(34,211,238,0.3);
}
/* Mini RAG badge sitting on the icon circle's top-right corner (like a
   notification badge), not floating outside the circle. A thin white ring
   separates it from the circle so it reads on both. */
.ep-rail-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  transform: scale(0.78);
  transform-origin: top right;
  box-shadow: 0 0 0 2px #fff;
}
.ep-rail-badge.ep-glyph-green  { box-shadow: 0 0 0 2px #fff; }
.ep-rail-badge.ep-glyph-yellow { box-shadow: none; filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.9)); }
.ep-rail-badge.ep-glyph-red {
  top: 2px; right: 2px;
  transform: scale(0.78) rotate(45deg);
  transform-origin: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Hover tooltip — "Navigate to X" bubble above the icon, anchored left so it
   grows rightward over the content (never clips at the screen edge). */
.epcsr-rail-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  transform: translateX(-50%) translateY(4px);
  background: #fff;
  color: #1f2a37;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  /* Centred over the icon. Labels wrap (rather than run off the left of the
     viewport, since the rail sits near the edge) — keeps the caret under the
     icon and the bubble on-screen. Width is capped so even the shorter
     "Navigate to X" labels stay narrow enough to centre without clipping. */
  max-width: 104px;
  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;
}
.epcsr-rail-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  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) ───────────────────────── */
#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;
}
.ep-clear-btn {
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kbr-navy);
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-end;
}
.ep-clear-btn:hover { background: #f0f3f7; }

/* ── Landing table ────────────────────────────────────────────────────── */
#portfolioTableHost .portfolio-table-wrap { overflow-x: auto; }
#portfolioTableHost .portfolio-table { min-width: 900px; }
#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: 7px 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: #2ea84c; }
.ep-glyph-yellow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #e0a800; }
.ep-glyph-red    { width: 11px; height: 11px; background: #e53e3e; transform: rotate(45deg); }
.ep-check { color: #2ea84c; font-size: 16px; font-weight: 700; line-height: 1; }

/* ── Filter-bar search + currency ─────────────────────────────────────── */
.ep-search { position: relative; }
.ep-search-input {
  height: 34px; min-width: 160px;
  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;
}
.ep-currency { display: flex; align-items: center; gap: 14px; height: 34px; }
.ep-currency-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; margin: 0; cursor: pointer; }
.ep-currency-opt input { cursor: pointer; }

/* ── 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: 170px 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.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: #7fbf7f; }
.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 #e8c34e;
}
.eph-health-dot.red {
  width: 48px; height: 48px; margin: 14px auto 18px;
  background: #e06666; border-radius: 8px; transform: rotate(45deg);
}
.eph-health-dot.none   { background: transparent; }

/* 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: 8px;
  padding: 10px 4px 12px;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 4px;
  text-align: center;
  color: var(--kbr-navy);
  min-width: 0;
}
.eph-tile .bi { font-size: 19px; color: #4a5a6e; }
.eph-tile-label { font-size: 12px; font-weight: 600; line-height: 1.2; }
.eph-tile-glyph { min-height: 16px; display: flex; align-items: center; }
.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: start;
}
.eph-panel { padding: 10px 14px 12px; }
.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: 13px;
  color: #17263a;
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 0;
}
.eph-fin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.eph-fin-table th {
  font-weight: 600; color: #64748b; text-align: right;
  padding: 4px 6px 2px; border: none;
}
.eph-fin-table td { text-align: right; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.eph-fin-main td { font-size: 15px; font-weight: 600; color: #17263a; }
.eph-fin-last td { font-size: 11px; color: #94a3b8; padding-top: 0; }
.eph-fin-last .pos { color: #2ea84c; }
.eph-fin-last .neg { color: #e05252; }
.eph-fin-lastlabel { text-align: left !important; font-size: 10px; color: #94a3b8; }

/* 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 */
.eph-tiles-card { position: relative; }
.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: 8px 2px 14px;
  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); }

.epc-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 12px;
  align-items: start;
}
.epc-side { display: flex; flex-direction: column; gap: 12px; }

/* 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; }
.epc-mini-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.epc-mini-table th {
  font-weight: 600; color: #94a3b8; text-align: right;
  padding: 2px 4px; border-bottom: 1px solid #e8ecf1;
}
.epc-mini-table th:first-child { text-align: left; }
.epc-mini-table td { padding: 3px 4px; text-align: right; font-variant-numeric: tabular-nums; color: #17263a; }
.epc-mini-table td:first-child {
  text-align: left; color: #3a4757;
  max-width: 130px; 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: 12px;
  align-items: stretch;
}
.epc-ov-panel { padding: 10px 12px; min-height: 178px; }
.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; max-height: calc(100vh - 300px); }
.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-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: auto; max-height: calc(100vh - 360px); }
.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 */
.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: start; }
.rsk-side { display: flex; flex-direction: column; gap: 12px; }
.rsk-side-card { padding: 8px 12px 12px; }
.rsk-side-title { text-align: center; font-weight: 700; font-size: 13px; color: #17263a; margin-bottom: 8px; }

/* Navy count tiles (Status Overview / Reporting Month) */
.rsk-tile {
  background: var(--kbr-navy);
  color: #fff;
  border-radius: 5px;
  padding: 9px 12px;
  margin-bottom: 8px;
  text-align: center;
}
.rsk-tile:last-child { margin-bottom: 0; }
.rsk-tile-label { font-size: 13px; font-weight: 600; }
.rsk-tile-count { font-size: 18px; font-weight: 700; line-height: 1.1; margin-top: 2px; }

/* Main grid: heat map + top-10 on the left, analysis cards on the right */
.rsk-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.rsk-col { display: flex; flex-direction: column; gap: 12px; }
.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; }

/* Top 10 table (navy header, empty body allowed) */
.rsk-top-wrap { overflow-x: auto; }
.rsk-top-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rsk-top-table thead th {
  background: var(--kbr-navy); color: #fff;
  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 */
.rsk-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.rsk-analysis .span2 { grid-column: span 2; }
.rsk-acard { padding: 10px 12px; min-height: 150px; }
.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; }

/* 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: start; }
.chg-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#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: 14px; }
.chg-dur-circles { display: flex; gap: 12px; flex: 1; }
.chg-dur-item { text-align: center; }
.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 5px;
}
.chg-dur-circle.green  { background: #4caf50; }
.chg-dur-circle.yellow { background: #e6c34e; }
.chg-dur-circle.red    { background: #e57373; }
.chg-dur-label { font-size: 11px; color: #3a4757; }
.chg-avg {
  border: 1px solid #cfd8e3; border-radius: 6px;
  padding: 8px 14px; text-align: center; min-width: 92px;
}
.chg-avg .lbl { font-size: 13px; font-weight: 700; color: #17263a; }
.chg-avg .val { font-size: 20px; font-weight: 700; color: #17263a; margin-top: 6px; }

/* Aging CCO's table */
.chg-aging-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.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: 8px 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-x: auto; }
.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)
   ===================================================================== */
/* ── Overview ─────────────────────────────────────────────────────────── */
.fin-ov { display: grid; grid-template-columns: 340px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.fin-ov-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fin-ov-topcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fin-panel { padding: 10px 14px 12px; }
.fin-panel-title { text-align: center; font-weight: 700; font-size: 15px; color: #17263a; margin: 0 0 8px; }
.fin-cpi-title { text-align: center; font-weight: 700; font-size: 14px; color: #17263a; }
.fin-cpi-gauge { max-width: 150px; margin: 6px auto 0; }

/* Time-phased scatter charts */
.fin-tp { padding: 8px 12px 10px; }
.fin-tp-title { font-weight: 700; font-size: 13px; color: #17263a; margin-bottom: 2px; }
.fin-tp-chart { position: relative; }
.fin-tp-svg { width: 100%; height: auto; display: block; }
.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) */
.fin-hovertip {
  position: fixed; z-index: 200; 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: 170px;
}
.fin-hovertip .tt-period { font-weight: 700; margin-bottom: 6px; }
.fin-hovertip .tt-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.fin-hovertip .tt-row .nm { display: flex; align-items: center; gap: 6px; }
.fin-hovertip .tt-row .dot { width: 8px; height: 8px; border-radius: 50%; }
.fin-hovertip .tt-row .vl { font-variant-numeric: tabular-nums; }

/* ── Financial blocks (reuse .eph-fin-* from Project Home) ────────────── */
.fin-togo-poc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; padding: 4px 0 8px; }
.fin-togo-poc .lbl { font-size: 11px; color: #64748b; }
.fin-togo-poc .val { font-size: 20px; font-weight: 700; color: #17263a; }
.fin-togo-poc .last { font-size: 10px; color: #94a3b8; }

/* ── 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: 14px 18px; font-size: 13px; line-height: 1.6; color: #17263a; text-align: center; display: flex; align-items: center; }
.fin-table-wrap { overflow-x: auto; }
.fin-l1-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 1100px; }
.fin-l1-table th, .fin-l1-table td { padding: 5px 7px; white-space: nowrap; }
.fin-l1-table .grp th { background: #2c5f8d; color: #fff; text-align: center; font-weight: 700; border: 1px solid #24507a; }
.fin-l1-table .sub th { background: #2c5f8d; color: #fff; text-align: right; font-weight: 600; font-size: 10px; border: 1px solid #24507a; vertical-align: bottom; }
.fin-l1-table .sub th:first-child { text-align: left; }
.fin-l1-table tbody td { text-align: right; border: 1px solid #eef1f5; font-variant-numeric: tabular-nums; color: #17263a; }
.fin-l1-table tbody td.cat { text-align: left; font-weight: 700; background: #f4f7fb; color: #17263a; }
.fin-l1-table tbody tr:nth-child(even) td { background: #f8fafc; }
.fin-l1-table tbody tr:nth-child(even) td.cat { background: #eef3fb; }
.fin-perf-title { font-weight: 700; font-size: 17px; color: #17263a; margin: 14px 0 8px; }
.fin-perf-table td.cat { background: #2c5f8d; color: #fff; }
.fin-perf-table tbody tr:nth-child(even) td.cat { background: #24507a; }

/* ── Cost Report L2 ───────────────────────────────────────────────────── */
.fin-l2-table { width: 100%; border-collapse: collapse; font-size: 10.5px; min-width: 1700px; }
.fin-l2-table th, .fin-l2-table td { padding: 4px 6px; white-space: nowrap; }
.fin-l2-table .grp1 th { text-align: center; font-weight: 700; color: #fff; font-size: 12px; border: 1px solid rgba(255,255,255,0.3); }
.fin-l2-table .grp1 .baseline { background: #2f6ea6; }
.fin-l2-table .grp1 .forecast { background: #7fa542; }
.fin-l2-table .grp2 th { text-align: center; font-weight: 700; color: #fff; font-size: 11px; }
.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; }
.fin-l2-table .sub th { background: #2c5f8d; color: #fff; font-size: 9.5px; font-weight: 600; text-align: right; vertical-align: bottom; border: 1px solid #24507a; white-space: normal; min-width: 52px; }
.fin-l2-table .sub th:first-child { text-align: left; }
.fin-l2-table .section td { background: #eef3fb; font-weight: 700; color: #17263a; }
.fin-l2-table tbody td { text-align: right; border-bottom: 1px solid #eef1f5; font-variant-numeric: tabular-nums; color: #17263a; }
.fin-l2-table tbody td.disc { text-align: left; color: #3a4757; white-space: normal; }
.fin-l2-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e05252; margin-right: 4px; vertical-align: middle; }

/* ── 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; }
.fin-impact-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.fin-impact-table .grp th { font-weight: 700; color: #17263a; text-align: center; border-bottom: 1px solid #cfd8e3; padding: 4px 6px; }
.fin-impact-table .hdr th { font-weight: 700; color: #17263a; text-align: left; border-bottom: 2px solid #cfd8e3; padding: 4px 6px; white-space: nowrap; }
.fin-impact-table .hdr th.c { text-align: center; }
.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: 16px; align-items: flex-end; }
.tp-slicer { display: flex; flex-direction: column; gap: 3px; }
.tp-slicer > label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.tp-slicer select { height: 30px; min-width: 150px; border: 1px solid #9fb0c3; border-radius: 3px; background: #fff; font-size: 12px; padding: 0 6px; color: var(--kbr-navy); }
.tp-tabrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.tp-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }
.tp-side { display: flex; flex-direction: column; gap: 12px; }
.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: 6px 0 2px; }
.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; }
.tp-var-tri.up { color: #2ea84c; }
.tp-var-tri.down { color: #e05252; }
.tp-var-dash { color: #94a3b8; font-weight: 700; }

/* Home area rows */
.tp-home-head, .tp-area {
  display: grid;
  grid-template-columns: 1fr 90px 120px 120px 120px;
  align-items: center;
}
.tp-home-head { padding: 4px 16px 8px; color: #17263a; font-weight: 700; font-size: 15px; }
.tp-home-head .m { text-align: center; }
.tp-area {
  background: #fff; border-radius: 6px; box-shadow: var(--kbr-shadow-sm);
  margin-bottom: 10px; min-height: 78px; overflow: hidden;
}
.tp-area-info { padding: 12px 16px; }
.tp-area-name { font-size: 20px; font-weight: 700; color: #17263a; }
.tp-area-sub { font-size: 13px; color: #3a4757; margin-top: 2px; }
.tp-area-glyph { display: flex; align-items: center; justify-content: center; }
.tp-area-glyph .ep-glyph-green  { width: 30px; height: 30px; }
.tp-area-glyph .ep-glyph-yellow { border-left-width: 17px; border-right-width: 17px; border-bottom-width: 30px; }
.tp-area-glyph .ep-glyph-red    { width: 26px; height: 26px; }
.tp-area-metric { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #eef3fa; }
.tp-area-metric.var { font-size: 15px; }

/* Engineering KPI strip */
.tp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.tp-kpi { padding: 8px 12px 10px; }
.tp-kpi-title { font-weight: 700; font-size: 14px; color: #17263a; margin-bottom: 6px; }
.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; max-height: calc(100vh - 380px); }
.tp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tp-tbl thead th { position: sticky; top: 0; z-index: 2; background: #17607a; color: #fff; font-size: 11px; font-weight: 600; padding: 8px; text-align: left; vertical-align: bottom; white-space: normal; }
.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: 5px 8px; }
.tp-tbl tbody td { padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.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; }
.tp-min-1200 { min-width: 1100px; }
.tp-min-1300 { min-width: 1300px; }

/* 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 #9fb0c3; border-radius: 3px; background: #fff;
  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
   ===================================================================== */
.rcv-top { display: grid; grid-template-columns: 190px 210px 1fr; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.rcv-dso { padding: 8px 12px; text-align: center; }
.rcv-dso-title { font-weight: 700; font-size: 13px; color: #17263a; }
.rcv-dso-days { font-size: 13px; color: #3a4757; }
.rcv-dso-plot { height: 74px; 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-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.rcv-kpi { padding: 10px 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.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-wrap { overflow-x: auto; }
.rcv-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 1500px; }
.rcv-table th, .rcv-table td { padding: 5px 7px; border: 1px solid #dfe6ee; }
.rcv-table .grp th { text-align: center; font-size: 15px; font-weight: 700; color: #17263a; border: none; padding-bottom: 6px; }
.rcv-table .hdr th { background: #fff; color: #3a4757; font-size: 10px; font-weight: 700; text-align: left; vertical-align: bottom; }
.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 { display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
.rcv-cashflow { min-height: 260px; }
.rcv-cashflow-title, .rcv-gauge-title { text-align: center; font-weight: 700; font-size: 15px; color: #17263a; margin-bottom: 6px; }
.rcv-empty { display: flex; align-items: center; justify-content: center; min-height: 220px; color: #b6c0cc; font-size: 13px; }
.rcv-gauge { text-align: center; padding: 10px 12px; }
.ep-semi-gauge { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }

/* =====================================================================
   RESOURCES PAGE
   ===================================================================== */
.res-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.res-panel { padding: 10px 14px 12px; min-height: 260px; }
.res-panel-title { font-weight: 700; font-size: 15px; color: #17263a; margin-bottom: 8px; }
.res-req-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.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 { padding: 40px; text-align: center; color: #94a3b8; }
.res-costrate { min-height: 300px; }
.res-empty { display: flex; align-items: center; justify-content: center; min-height: 200px; color: #b6c0cc; font-size: 13px; }

/* =====================================================================
   WORKSHARE PAGE
   ===================================================================== */
.ws-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.ws-target { padding: 10px 14px 12px; }
.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: 4px; }
.ws-target-val { font-size: 30px; 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; margin-bottom: 12px; }
.ws-chart { padding: 8px 12px 10px; }
.ws-chart-title { text-align: center; font-weight: 700; font-size: 14px; color: #17263a; margin-bottom: 4px; }
.ws-chart-svg { width: 100%; height: 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; }
.ws-split { padding: 10px 14px 12px; }
.ws-split-title { text-align: center; font-weight: 700; font-size: 14px; color: #17263a; margin-bottom: 8px; }
.ws-split-nums { margin-bottom: 8px; }
.ws-split-num { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 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: 12px; font-weight: 700; color: #17263a; margin: 4px 0; }
.ws-split-bars { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 4px; }
.ws-split-bars .mid { font-size: 11px; color: #3a4757; white-space: nowrap; }
.ws-bar { height: 20px; background: #e8ecf1; position: relative; border-radius: 2px; }
.ws-bar .fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.ws-bar .fill.navy { background: #35506e; left: 0; }
.ws-bar .fill.navy-r { background: #35506e; right: 0; }
.ws-bar .fill.green { background: #5cb85c; left: 0; }
.ws-bar .fill.green-r { background: #5cb85c; right: 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; }
.ws-bar .v.r { left: auto; right: 6px; }
.ws-cum { margin: 6px 0; }
.ws-cum-label { font-size: 12px; font-weight: 700; color: #17263a; text-align: center; }

/* =====================================================================
   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;
}
.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); }

.nrv-panel { display: flex; flex-direction: column; gap: 12px; }

.nrv-text-card { padding: 14px 18px; }
.nrv-text-title { font-weight: 700; font-size: 16px; color: var(--kbr-navy); margin-bottom: 10px; }
.nrv-text-body {
  min-height: 200px;
  border: 1px solid var(--kbr-border);
  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 {
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--kbr-navy);
}

.nrv-actions-card { padding: 14px 18px; }
.nrv-actions-wrap { overflow-x: auto; }
.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: icon size + gap scale with viewport height (clamp) so all
   13 icons fit at any height — shrink on short windows, cap on tall ones. */
.epcsr-rail { gap: clamp(4px, 1.1vh, 14px); padding: clamp(8px, 1.5vh, 24px) 0 clamp(8px, 1.5vh, 20px) 22px; }
.epcsr-rail-btn { width: clamp(30px, 5.3vh, 42px); height: clamp(30px, 5.3vh, 42px); font-size: clamp(15px, 2.6vh, 19px); }