/* ===========================================================
   Engineering Progress Report module
   =========================================================== */

:root {
  /* Shared height for the Progress Curves Chart/Table views so toggling between
     them doesn't resize the page. Matches .chart-box.tall in main.css — change
     both together. */
  --pc-view-h:    310px;
  --pr-navy:      #1e3a5f;
  --pr-navy-soft: #2c5f8d;
  --pr-teal:      #0d9488;
  --pr-teal-soft: #14b8a6;
  --pr-green:     #16a34a;
  --pr-amber:     #d97706;
  --pr-red:       #dc2626;
  --pr-bg:        #f3f6fa;
  --pr-table-head:#1e3a5f;
  /* P-20 - exact Power BI dashboard hexes for the percentage data bars,
     extracted from the PBIX. Deliberately literal rather than mapped to a
     brand token: the requirement is to match the dashboard exactly. */
  --pr-earned-bar:    #91A7B8;
  --pr-hardgated-bar: #7DADD0;
}

/* ---- Landing ---- */
.pr-landing-body {
  margin: 0;
  background: #f5f8fb;
  min-height: 100vh;
}

.pr-landing-shell {
  position: relative;
  min-height: 100vh;
  padding: 14px 20px 16px;
}

.pr-landing-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 70px;
  background: linear-gradient(180deg, var(--pr-navy) 0%, var(--pr-navy-soft) 100%);
  z-index: 0;
}

.pr-landing-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 4px 14px;
}

.pr-landing-header .kbr-logo { color: #fff; font-weight: 700; font-size: 22px; }
.pr-landing-header .kbr-logo .dot { background: var(--pr-teal-soft); }
.pr-landing-header h1 { color: #fff; font-size: 24px; font-weight: 700; margin: 0; }

.pr-landing-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0 12px;
}

.pr-landing-controls .reporting-period-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  padding: 6px 12px;
}

.pr-landing-controls label { font-size: 12px; font-weight: 600; color: var(--kbr-text); }
.pr-landing-controls select {
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
  min-width: 120px;
}

.pr-navigate-btn {
  background: var(--pr-teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pr-navigate-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.pr-navigate-btn:not(:disabled):hover { background: var(--pr-navy); }

/* Discipline tab strip on landing */
.pr-disc-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 12px;
  box-shadow: var(--kbr-shadow-sm);
  overflow-x: auto;
}

.pr-disc-tab {
  padding: 6px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pr-navy);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.15s;
}

.pr-disc-tab:hover { background: #eef4fa; }
.pr-disc-tab.active { background: var(--pr-teal); color: #fff; border-color: var(--pr-teal); }
.pr-disc-tab.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* Portfolio table */
.pr-portfolio-wrap {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--kbr-shadow-sm);
}

.pr-portfolio-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.pr-portfolio-table thead th {
  background: var(--pr-table-head);
  color: #fff;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  white-space: nowrap;
  border-bottom: 2px solid #0f2647;
}

.pr-portfolio-table thead th.num { text-align: right; }

.pr-portfolio-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f6;
  white-space: nowrap;
}

.pr-portfolio-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-portfolio-table tbody tr:hover td { background: #eef4fa; cursor: pointer; }
.pr-portfolio-table tbody tr.selected td { background: #e6f0fb; }

/* ---- Report pages shared shell ---- */
.pr-report-body { background: var(--pr-bg); }
.pr-shell { background: var(--pr-bg); }

.pr-toolbar {
  background: #fff;
  border-bottom: 1px solid var(--kbr-border);
  padding: 10px 18px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pr-tab-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.pr-tab-nav .home-btn {
  color: var(--pr-navy);
  font-size: 16px;
  text-decoration: none;
  padding: 2px 4px;
}

.pr-tab-nav .tab-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--pr-navy);
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.pr-tab-nav .tab-link:hover { color: var(--pr-teal); }
.pr-tab-nav .tab-link.active { color: var(--pr-teal); border-bottom-color: var(--pr-teal); }

.pr-report-logo { text-align: right; flex-shrink: 0; margin-left: 18px; }
.pr-report-logo .kbr-logo { font-size: 20px; font-weight: 700; color: var(--pr-navy); }
.pr-report-logo .report-tag { font-size: 11px; font-weight: 600; color: var(--kbr-text-muted); }

.pr-body { padding: 4px 68px 18px 18px; position: relative; }

.pr-footer {
  background: #fff;
  border-top: 1px solid var(--kbr-border);
  padding: 8px 18px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  box-shadow: 0 -1px 2px rgba(15,23,42,0.04);
}

.pr-footer .footer-item { display: flex; align-items: center; gap: 4px; }
.pr-footer .footer-label { color: var(--kbr-text-muted); font-weight: 600; }
.pr-footer .footer-value { color: var(--pr-navy); font-weight: 700; }

/* Filter names in sentence case, not SHOUTING. main.css:1839 sets
   text-transform:uppercase on the shared .fb-label; overriding it here confines
   the change to Progress (this file is linked by the progress pages only) instead
   of touching the 9+ modules that share .fb-label. Equal specificity, but
   progress.css loads after main.css on every progress page, so this wins.
   letter-spacing goes back to normal with it — the 0.06em tracking only exists to
   keep all-caps legible and looks loose in mixed case. */
.fb-label,
.pr-rel-combo-label { text-transform: none; letter-spacing: normal; }

/* Reporting Date hard right. main.css pushes the first item left with
   margin-right:auto, then adds a zero-width ::after carrying margin-left:auto —
   two auto margins split the slack either side, which is what centred Reporting
   Date. Dropping the pseudo-element leaves a single auto margin, so all the free
   space lands after Portfolio and the last item sits on the edge.
   Do NOT also add margin-left:auto to the last item: that reintroduces the
   second auto margin and re-centres it. Progress-scoped because this file is
   linked by the progress pages only. */
.page-footer::after { content: none; }

/* ---- KPI tiles ---- */
.pr-kpi-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pr-kpi {
  flex: 1;
  min-width: 130px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--kbr-shadow-sm);
}

.pr-kpi .kpi-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--pr-navy);
  line-height: 1.1;
}

.pr-kpi .kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--kbr-text-muted);
  margin-top: 4px;
}

.pr-kpi .kpi-sub {
  font-size: 11px;
  color: var(--kbr-text-muted);
  margin-top: 2px;
}

.pr-kpi.good  .kpi-num { color: var(--pr-green); }
.pr-kpi.warn  .kpi-num { color: var(--pr-amber); }
.pr-kpi.bad   .kpi-num { color: var(--pr-red);   }

/* ---- Overview grid ---- */
.pr-overview-top {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  margin-bottom: 12px;
}

.pr-overview-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Flex items default to min-width:auto, which would re-introduce the
     content-driven floor that minmax(0,1fr) just removed. */
  min-width: 0;
}

.pr-overview-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

/* ---- Chart panels ---- */
.pr-chart-panel {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--kbr-shadow-sm);
}

.pr-chart-panel h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--pr-navy);
  margin: 0 0 8px;
  text-align: center;
}

.pr-chart-panel .chart-box { height: 220px; position: relative; }
.pr-chart-panel .chart-box.tall { height: 320px; }
.pr-chart-panel .chart-box.short { height: 200px; }

/* ---- Group-by toggle ---- */
.pr-groupby-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pr-groupby-bar .gb-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kbr-text-muted);
  margin-right: 4px;
}

.pr-groupby-btn {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 18px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pr-navy);
  cursor: pointer;
}

.pr-groupby-btn:hover { background: #eef4fa; }
.pr-groupby-btn.active { background: var(--pr-teal); color: #fff; border-color: var(--pr-teal); }

/* ---- Mode toggle ---- */
.pr-mode-toggle {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid var(--kbr-border);
  border-radius: 20px;
  padding: 3px;
  margin-bottom: 10px;
  width: fit-content;
}

.pr-mode-btn {
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kbr-text-muted);
  cursor: pointer;
  transition: background 0.15s;
}

.pr-mode-btn.active { background: #fff; color: var(--pr-navy); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* ---- Data tables ---- */
.pr-table-wrap {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--kbr-shadow-sm);
  /* Fixed frame. Without a height the wrapper grows with its content, so the
     PAGE scrolls and the sticky <th> has no scroll container to pin against —
     headers scrolled away. Bounding it makes the body scroll inside the card
     and keeps the header + Total row on screen. */
  max-height: 60vh;
}

/* Progress Curves table mode — fixed-height frame so the page itself doesn't
   scroll; the header (sticky top) and Total footer (sticky bottom) stay frozen
   while the period rows scroll inside, matching the Power BI matrix. */
/* Fixed height, not max-height: with max-height a short period list rendered a
   ~100px table while the chart is a fixed 310px, so every Chart/Table toggle
   resized the page. Pinning both to --pc-view-h keeps the container steady and
   still scrolls the rows inside against the sticky header/Total footer. */
#curvesTableWrap .pr-table-wrap { height: var(--pc-view-h); max-height: var(--pc-view-h); overflow: auto; }
#curvesChartBox { height: var(--pc-view-h); }
#curvesTableWrap .pr-curves-foot td {
  position: sticky; bottom: 0; z-index: 2;
  background: #eef4fa; font-weight: 700; color: var(--pr-navy, #1f3a5f);
  border-top: 2px solid var(--kbr-border);
}

.pr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.pr-table thead th {
  background: var(--pr-table-head);
  color: #fff;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  /* Above the sticky Total row (z-index 2) so the two can't overlap badly in a
     short frame. */
  z-index: 3;
}

.pr-table thead th.num  { text-align: right; }
.pr-table thead th.ctr  { text-align: center; }
.pr-table thead th.sortable { cursor: pointer; user-select: none; }
.pr-table thead th.sortable:hover { background: #15304e; }

.pr-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f6;
  white-space: nowrap;
}

.pr-table tbody td.num  { text-align: right; font-variant-numeric: tabular-nums; }
.pr-table tbody td.ctr  { text-align: center; }
.pr-table tbody tr:nth-child(even) td { background: #f8fafc; }
.pr-table tbody tr:hover td { background: #eef4fa; }
.pr-table tbody tr.subtotal td { background: #e8f0fa; font-weight: 700; }
/* All 9 columns must fit the ~1040px right panel without a horizontal scrollbar.
   Tabulator's default header chrome is 45px per column (cell padding + sort
   arrow); trimming the padding recovers ~110px across the grid, which is more
   than shortening the headers would save and keeps the labels readable. */
#tblOverview .tabulator-header .tabulator-col,
#tblOverview .tabulator-row .tabulator-cell {
  padding-left: 5px;
  padding-right: 5px;
}

/* Compact density. The shared grid theme in main.css sets `min-height: 46px`
   and `padding: 12px 16px` with !important, which is right for the full-page
   grids but leaves this one (in a ~340px panel) showing only 4 rows. !important
   is required to override it — plain rules lose regardless of specificity. */
/* Both selectors are needed: the shared theme also targets
   `.tabulator-row.tabulator-row-even`, which outranks a plain `.tabulator-row`
   override — so only the odd rows shrank and every other row kept a 46px floor,
   producing alternating 17px gaps. */
#tblOverview .tabulator-row,
#tblOverview .tabulator-row.tabulator-row-even { min-height: 28px !important; }
#tblOverview .tabulator-row .tabulator-cell {
  padding: 4px 6px !important;
  font-size: 12px !important;
}
#tblOverview .tabulator-header .tabulator-col { padding-top: 3px; padding-bottom: 3px; }
#tblOverview .pr-inline-bar-label { font-size: 11px; }
/* Take the sort arrow OUT of the layout flow. In flow it reserved ~14px in
   every column (126px across the grid) purely for an icon, which is what kept
   forcing the horizontal scrollbar on narrower windows.
   Out of flow it would overlap the label, and padding to clear it would cost
   back the same 126px — so it's parked in the top-right corner and only shown
   on hover or on the column actually being sorted. Default state is a clean,
   fully readable header. */
#tblOverview .tabulator-col { position: relative; }
#tblOverview .tabulator-col .tabulator-col-sorter {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 10px;
  opacity: 0;
  transition: opacity 0.12s;
}
#tblOverview .tabulator-col:hover .tabulator-col-sorter,
#tblOverview .tabulator-col[aria-sort="asc"] .tabulator-col-sorter,
#tblOverview .tabulator-col[aria-sort="desc"] .tabulator-col-sorter,
#tblOverview .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter,
#tblOverview .tabulator-col[aria-sort="descending"] .tabulator-col-sorter {
  opacity: 1;
}
/* Smaller header type shrinks each column's floor, which is also what lets all
   9 columns fit without a horizontal scrollbar. */
#tblOverview .tabulator-col .tabulator-col-title { font-size: 10px; }

/* The bar columns are 100px here, but .pr-inline-bar has a 90px floor and its
   track another 44px — together they pushed the "%" label out of the cell.
   Scoped to this grid so the wider tables on other Progress pages keep the
   original bar proportions. */
#tblOverview .pr-inline-bar       { min-width: 0; }
#tblOverview .pr-inline-bar-track { min-width: 16px; }
#tblOverview .pr-inline-bar-label { flex: none; white-space: nowrap; }

/* Let titles wrap instead of truncating. Even trimmed, the 9 headers need
   ~1050px on one line against a ~983px panel; wrapping "Planned Hrs" onto two
   lines drops the per-column floor to its longest word, so everything fits with
   full labels and no horizontal scrollbar. */
#tblOverview .tabulator-col .tabulator-col-title {
  white-space: normal;
  text-overflow: clip;
  line-height: 1.25;
}

/* Progressable Manpower card (Manpower graph). Mirrors the Power BI card: navy
   header, teal Baseline row, red Actual row, centred above the chart. */
.pr-mp-card {
  width: 230px;
  margin: 0 auto 8px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
}
.pr-mp-card-title {
  background: var(--pr-navy);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 4px 8px;
}
.pr-mp-card-row { display: flex; align-items: stretch; border-top: 1px solid #fff; }
.pr-mp-card-lbl {
  flex: 0 0 72px;
  background: var(--kbr-bg);
  color: var(--kbr-text);
  padding: 4px 8px;
  font-weight: 600;
}
.pr-mp-card-val { flex: 1; padding: 4px 10px; color: #fff; font-weight: 700; }
.pr-mp-card-val.baseline { background: #0d9488; }
.pr-mp-card-val.actual   { background: #c0392b; }

/* EWP grid: same compact density as the Overview grid. 11 columns at the shared
   theme's 46px rows / 13px type read as very crowded. !important and the
   `-even` selector are both required to beat the theme (see the note above). */
#tblEwp .tabulator-row,
#tblEwp .tabulator-row.tabulator-row-even { min-height: 30px !important; }
#tblEwp .tabulator-row .tabulator-cell {
  padding: 4px 8px !important;
  font-size: 12px !important;
}
#tblEwp .tabulator-header .tabulator-col { padding-top: 3px; padding-bottom: 3px; }
#tblEwp .tabulator-col .tabulator-col-title { font-size: 11px; }
#tblEwp .tabulator-group { padding: 3px 8px !important; font-size: 12px; }

/* Visual separation. The shared theme paints every row the same panel white
   (`background: var(--kbr-panel) !important`) and overrides zebra striping, so
   group banners, data rows and the Total all blended into one sheet. Tint the
   group banner + add an accent edge so each group reads as a block, stripe the
   data rows, and give the pinned Total its own shade. */
#tblEwp .tabulator-group {
  background: var(--kbr-bg) !important;
  border-top: 1px solid var(--kbr-border) !important;
  border-left: 3px solid var(--kbr-teal-dark) !important;
  color: var(--pr-navy);
}
#tblEwp .tabulator-tableholder .tabulator-row.tabulator-row-even:not(.tabulator-group) {
  background: #fafbfd !important;
}
#tblEwp .tabulator-tableholder .tabulator-row:not(.tabulator-group):hover {
  background: #eaf2fa !important;
}
#tblEwp .tabulator-footer .tabulator-calcs-holder .tabulator-row,
#tblEwp .tabulator-footer .tabulator-calcs-holder .tabulator-cell,
#tblEwp .tabulator-calcs-bottom,
#tblEwp .tabulator-calcs-bottom .tabulator-cell {
  background: #dbe7f4 !important;
  font-weight: 700;
}

/* Overview dimension table toolbar — Fit-width + Columns drawer buttons, pushed
   to the right-hand end of the tab strip so they share its row. */
.pr-ov-table-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-right: 8px;
}

/* Total row frozen to the bottom of the frame. Opaque background is required —
   a transparent sticky cell shows the rows scrolling underneath it. */
.pr-table tbody tr.total-row td {
  background: #d8e8f8;
  font-weight: 700;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* indent levels */
.pr-table td.indent-1 { padding-left: 22px; }
.pr-table td.indent-2 { padding-left: 36px; }
.pr-table td.indent-3 { padding-left: 50px; }

/* SPI coloring */
.spi-good { color: var(--pr-green); font-weight: 700; }
.spi-warn { color: var(--pr-amber); font-weight: 700; }
.spi-bad  { color: var(--pr-red);   font-weight: 700; }

/* ---- Search bar ---- */
.pr-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pr-search-bar input {
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  min-width: 260px;
}

/* ---- Gantt rows (Status on a Page) ---- */
.pr-gantt-row {
  display: flex;
  align-items: center;
  height: 28px;
  border-bottom: 1px solid #eef2f6;
  padding: 0 10px;
  font-size: 11px;
}

.pr-gantt-label {
  width: 220px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--pr-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-gantt-track {
  flex: 1;
  height: 14px;
  background: #eef2f6;
  border-radius: 3px;
  position: relative;
  margin: 0 8px;
  overflow: hidden;
}

.pr-gantt-bar {
  position: absolute;
  height: 100%;
  border-radius: 3px;
}

.pr-gantt-bar.planned  { background: #93c5fd; }
.pr-gantt-bar.earned   { background: var(--pr-teal); }
.pr-gantt-bar.baseline { background: #1e3a5f; opacity: 0.5; }

/* ---- MDL view columns ---- */
.pr-mdl-view-dates  .pr-col-hours    { display: none; }
.pr-mdl-view-dates  .pr-col-progress { display: none; }
.pr-mdl-view-hours  .pr-col-dates    { display: none; }
.pr-mdl-view-hours  .pr-col-progress { display: none; }
.pr-mdl-view-progress .pr-col-dates  { display: none; }
.pr-mdl-view-progress .pr-col-hours  { display: none; }

/* ---- Self Service sunburst / decomposition ---- */
.pr-ss-panel { padding: 14px 16px; box-shadow: var(--kbr-shadow-sm); }

.pr-ss-dim-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pr-ss-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---- Donut legend ---- */
/* Two columns, not a single stacked list: four rows cost ~100px of the left
   column's height, which is the budget the donut needs to stay visible. */
.pr-donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 6px;
}

.pr-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.pr-donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Waterfall chart panel ---- */
.pr-waterfall-panel { padding: 12px 14px; box-shadow: var(--kbr-shadow-sm); }
.pr-waterfall-panel h5 { font-size: 13px; font-weight: 700; color: var(--pr-navy); margin: 0 0 8px; text-align: center; }
.pr-waterfall-panel .chart-box { height: 200px; }

/* ---- Action rail (filter button) ----
   Hidden — replaced by the inline filter bar that #filterPanelHost
   renders via ProgressFilters.mount(). chrome.js still emits the rail
   markup for now (other code wires click handlers to it); display:none
   keeps it out of view without breaking those handlers. */
.pr-action-rail { display: none !important; }
.pr-action-rail-LEGACY {
  position: fixed;
  top: 140px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}

.pr-action-rail .rail-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--kbr-border);
  background: #fff;
  font-size: 14px;
  color: var(--pr-navy);
  cursor: pointer;
  box-shadow: var(--kbr-shadow-sm);
}

.pr-action-rail .rail-btn:hover { background: #eef4fa; }

/* ---- Filter drawer ---- */
.pr-filter-drawer {
  position: fixed;
  top: 64px;
  right: -360px;
  width: 300px;
  bottom: 0;
  background: #fff;
  border-left: 1px solid var(--kbr-border);
  z-index: 10;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--kbr-shadow-md);
}

.pr-filter-drawer.open { right: 0; }

.pr-filter-drawer .drawer-header,
.pr-groupby-panel .drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--kbr-border);
}

.pr-filter-drawer .drawer-header h5,
.pr-groupby-panel .drawer-header h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pr-navy);
}

.pr-filter-drawer .drawer-close,
.pr-groupby-panel .drawer-close {
  background: transparent;
  border: 1px solid var(--pr-teal);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: var(--pr-teal);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.pr-filter-drawer .drawer-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}

.pr-filter-drawer .drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--kbr-border);
  display: flex;
  gap: 8px;
}

.pr-filter-apply {
  flex: 1;
  background: var(--pr-teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.pr-filter-apply:hover { background: var(--pr-navy); }

.pr-filter-reset {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbr-text-muted);
  cursor: pointer;
}

.pr-fp-field { margin-bottom: 12px; }
.pr-fp-field label { display: block; font-size: 12px; font-weight: 700; color: var(--pr-navy); margin-bottom: 4px; }
.pr-fp-field select,
.pr-fp-field input[type="date"],
.pr-fp-field input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  font-size: 13px;
}

/* ---- Overview two-panel split ---- */
.pr-overview-split {
  display: grid;
  /* minmax(0, 1fr) — NOT plain 1fr. A 1fr track's floor is min-content, so the
     Tabulator grid's column minWidths set the right panel's width and pushed the
     whole page into horizontal scroll. minmax(0,…) lets the track shrink and
     keeps any overflow inside the grid's own scroller. */
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  /* `align-items: stretch` alone could never pull the left column up: a grid row is as
     tall as its TALLEST item, and the left column (two KPI boxes + donut + legend +
     release bar) is the taller one, so stretching only grew the right.
     This MUST be a definite `height`, never `min-height`. The flexible chart panels
     below size their canvases from this chain; if the row height came from content
     instead, Chart.js would size the canvas from the box while the box sized itself
     from the canvas — an unbounded feedback loop that blew both charts to full page
     height. A definite row height terminates it. */
  /* 180px = toolbar + filter bar + .pr-body padding + footer. */
  height: calc(100vh - 180px);
  min-height: 640px;
}

.pr-overview-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.pr-overview-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Flex items default to min-width:auto, which would re-introduce the
     content-driven floor that minmax(0,1fr) just removed. */
  min-width: 0;
  min-height: 0;
}

/* Both columns are stretched to the resolved row height, so each needs exactly one
   flexible panel to absorb the leftover space. Everything else keeps its natural
   height, which is what makes the two columns end on the same line.
   Left  = donut chart  (Deliverable Release Status below it stays natural)
   Right = S-curve      (the Tabulator panel stays at its definite px height) */
.pr-overview-right > .pr-chart-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pr-overview-right > .pr-chart-panel > .pr-panel-header { flex: 0 0 auto; }

/* Donut card: legend BESIDE the chart, not under it. A Chart.js doughnut is drawn
   at min(width, height), and this card is ~380px wide but only ~100px tall — all
   the constraint was vertical. Moving the legend into a second column hands that
   ~70px back to the chart and roughly doubles the drawn diameter without adding a
   single pixel to the page. */
.pr-ov-donut {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* minmax(0,1fr) NOT 1fr, and a fixed legend track NOT auto. `1fr` keeps a
     min-content floor and `auto` sizes to the legend's longest label, so together
     they demanded more than the 340px card and the legend spilled out past its
     right edge. Both tracks are now bounded. */
  grid-template-columns: minmax(0, 1fr) 146px;
  grid-template-rows: auto 1fr;
  gap: 0 10px;
  overflow: hidden;
}
.pr-ov-donut > .pr-panel-header { grid-column: 1 / -1; }

/* height:auto so the grid row, not the px rule above, decides the size. */
.pr-ov-donut .chart-box.short {
  grid-column: 1;
  min-width: 0;
  height: auto;
  min-height: 70px;
}
.pr-overview-right > .pr-chart-panel .chart-box.tall {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
}

/* Second grid column, vertically centred against the donut. Single column now that
   it sits in a narrow track — the 2-up layout was only there to save height.
   11px so "On Target: 21 (100.0%)" fits the 146px track on one line. */
.pr-ov-donut .pr-donut-legend {
  grid-column: 2;
  grid-template-columns: 1fr;
  align-self: center;
  margin-top: 0;
  min-width: 0;
  gap: 5px;
}
.pr-ov-donut .pr-donut-legend-item { font-size: 11px; }
.pr-ov-release { flex: 0 0 auto; }
.pr-overview-right > .pr-tab-panel { flex: 0 0 auto; }

/* ---- Progress KPI boxes (2-col grid: % left, Hrs right) ---- */
.pr-progress-box {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--kbr-shadow-sm);
}

.pr-progress-box .pb-title {
  background: var(--pr-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 7px 14px;
  letter-spacing: 0.02em;
}

/* Tightened so the two KPI cards leave room for the donut and the release bar
   inside one viewport — they were ~197px each, over half the column's budget. */
.pb-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
  padding: 6px 12px;
}

.pb-val-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px dashed #eef2f6;
}

.pb-delta-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 14px;
}

.pb-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}

.pb-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--pr-navy);
  font-variant-numeric: tabular-nums;
}

.pb-delta {
  font-size: 10px;
  font-weight: 700;
}

.pb-delta.good { color: var(--pr-green); }
.pb-delta.bad  { color: var(--pr-red); }
.pb-delta.neut { color: var(--kbr-text-muted); }

.pb-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--kbr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 6px 0 4px;
}

.pr-progress-row {
  display: grid;
  grid-template-columns: 60px 1fr 76px;
  align-items: center;
  font-size: 11px;
  margin-bottom: 3px;
  gap: 4px;
}

.pr-progress-row .pb-row-label { color: var(--kbr-text-muted); font-size: 11px; font-weight: 600; }
.pr-progress-row .pb-row-value { font-weight: 700; color: var(--pr-navy); font-variant-numeric: tabular-nums; }
.pr-progress-row .pb-row-delta { font-size: 10px; font-weight: 700; text-align: right; }
.pb-row-delta.good { color: var(--pr-green); }
.pb-row-delta.bad  { color: var(--pr-red); }
.pb-row-delta.neut { color: var(--kbr-text-muted); }

/* ---- Tabbed table (Overview, etc.) ---- */
.pr-tab-panel {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--kbr-shadow-sm);
}

.pr-tab-strip {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #eef2f6;
  background: #f8fafc;
  overflow-x: auto;
  padding: 0 6px;
}

/* Overview tab strip is a single row — suppress the stray vertical scrollbar
   that a few px of content overflow triggers via the implicit overflow-y. */
#ovTabStrip { overflow-y: hidden; }

.pr-tab-item {
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--kbr-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s;
}

.pr-tab-item:hover { color: var(--pr-teal); }
.pr-tab-item.active { color: var(--pr-navy); border-bottom-color: var(--pr-teal); }

/* ---- Inline % bar cells ---- */
.pr-inline-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 90px;
}

.pr-inline-bar-track {
  flex: 1;
  height: 8px;
  background: #eef2f6;
  border-radius: 2px;
  overflow: hidden;
  min-width: 44px;
}

.pr-inline-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--pr-teal);
  transition: width 0.3s;
}

/* P-20 - Earned% and Hard Gated% carry the exact dashboard hexes on EVERY page,
   not just Activity / EWP: the finding is scoped "All Pages", and both values
   were identical across all 12 Activity tables in the PBIX. Planned% and Burned%
   were not specified in the dashboard, so they keep their existing colours.
   Earned% previously shared --pr-teal with Planned%, which made the two bars
   indistinguishable. */
.pr-inline-bar-fill.planned    { background: var(--pr-teal); }
.pr-inline-bar-fill.earned     { background: var(--pr-earned-bar); }
.pr-inline-bar-fill.hard-gated { background: var(--pr-hardgated-bar); }
.pr-inline-bar-fill.burned     { background: #6366f1; }
.pr-inline-bar-fill.grey       { background: #94a3b8; }

.pr-inline-bar-label {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: var(--pr-navy);
  min-width: 34px;
  text-align: right;
}

/* ---- SPI arrows ---- */
.spi-arrow { font-size: 12px; font-weight: 700; margin-right: 2px; }
.spi-arrow.up { color: var(--pr-green); }
.spi-arrow.dn { color: var(--pr-red); }

/* ---- Progress Curves top row (KPI grid + period slicer) ---- */
.pr-curves-top-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.pr-curves-kpi-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 0;
}

.pr-curves-kpi-box {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--kbr-shadow-sm);
}

.pr-curves-kpi-box .ckb-title {
  background: var(--pr-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  text-align: center;
}

.pr-curves-kpi-box .ckb-body { padding: 10px 12px 8px; }

/* ---- Period slicer (range slider) ---- */
.pr-period-slicer {
  width: 210px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--kbr-shadow-sm);
}
.pr-period-slicer.hidden { display: none; }

.pr-period-slicer-header {
  background: var(--pr-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pr-period-slicer-body { padding: 10px 12px 12px; }

.pr-period-dates {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--pr-navy);
}
.pr-period-date {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.pr-period-date i { font-size: 11px; flex-shrink: 0; color: var(--pr-teal); }
.pr-period-date-sep { font-size: 10px; color: #94a3b8; }

/* Dual range slider */
.pr-range-wrap {
  position: relative;
  height: 22px;
  margin: 0 4px;
}
.pr-range-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  background: #d0dce8;
  border-radius: 2px;
}
.pr-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--pr-navy);
  border-radius: 2px;
}
.pr-range-input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 4px;
  margin: 0;
  padding: 0;
  outline: none;
}
.pr-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pr-navy);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pr-range-input::-moz-range-thumb {
  pointer-events: all;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pr-navy);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#tsToRange { z-index: 1; }

/* ---- Chart toolbar (toggle buttons top-right) ---- */
.pr-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.pr-chart-toolbar h5 { margin: 0; font-size: 13px; font-weight: 700; color: var(--pr-navy); }

.pr-toggle-btns {
  display: flex;
  gap: 4px;
}

.pr-toggle-btn {
  background: #f1f5f9;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--kbr-text-muted);
  cursor: pointer;
}

.pr-toggle-btn.active { background: var(--pr-navy); color: #fff; border-color: var(--pr-navy); }

/* ---- Deliverable QTY top split ---- */
.pr-deliv-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

/* ---- Deliverable table view toggle ---- */
.pr-deliv-view-toggle { margin-bottom: 10px; }

/* ---- Deliverable QTY page (chart + table toggle) ---- */
.pr-dq-body { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; }

.pr-dq-chart-view {
  height: calc(100vh - 160px);
  min-height: 400px;
  background: #eaeff5;
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
}
.pr-dq-chart-view canvas { position: absolute; inset: 20px 24px; }

.pr-dq-table-view { flex: 1; overflow: auto; }

.pr-dq-footer { background:  #4b5e79; border-top: 2px solid var(--pr-navy, #1f3a5f); }
/* Pin the Total row to the bottom of the scroll area so the table's horizontal
   scrollbar can't clip it. Opaque bg on the cell covers rows scrolling under.
   Selector is qualified with `.pr-table tbody tr` to outweigh the zebra rule
   `.pr-table tbody tr:nth-child(even) td` — plain `.pr-dq-footer td` loses to
   it, so whenever the Total row landed on an even index it got the near-white
   stripe under its white text and vanished until hover repainted it dark. */
.pr-table tbody tr.pr-dq-footer td {
  font-weight: 700; font-size: 12px; color: #fff;
  position: sticky; bottom: 0; z-index: 2;
  background: #4b5e79;
}
/* The totals row isn't a data row — keep its fill on hover (overrides the
   generic .pr-table tbody tr:hover td light-blue) and drop the pointer. */
.pr-table tbody tr.pr-dq-footer:hover td,
.pr-dq-footer:hover td { background: #4b5e79; cursor: default; }
/* Keep the signed +/- variance colors legible on the dark total row. Qualified
   to stay above the `color: #fff` on the base rule. */
.pr-table tbody tr.pr-dq-footer td.spi-good { color: #4ade80; }
.pr-table tbody tr.pr-dq-footer td.spi-bad  { color: #f87171; }

/* ---- Mini-bar cells in landing table ---- */
.pr-mini-bar-cell { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.pr-mini-bar-track { width: 50px; height: 6px; background: #eef2f6; border-radius: 2px; overflow: hidden; }
.pr-mini-bar-fill  { height: 100%; border-radius: 2px; background: var(--pr-teal); }

/* ---- Responsive ---- */
@media (max-width: 1199px) {
  .pr-overview-top    { grid-template-columns: 1fr; }
  .pr-overview-bottom { grid-template-columns: 1fr; }
  .pr-overview-split  { grid-template-columns: 1fr; }
  .pr-ss-chart-row    { grid-template-columns: 1fr; }
  .pr-curves-kpi-grid { grid-template-columns: 1fr 1fr; }
  .pr-curves-top-row  { flex-wrap: wrap; }
  .pr-period-slicer   { width: 100%; }
  .pr-deliv-top       { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .pr-kpi-strip { flex-direction: column; }
  .pr-groupby-bar { gap: 4px; }
  .pr-curves-kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Rail button active / badge ---- */
.pr-action-rail .rail-btn.active { background: var(--pr-navy); color: #fff; border-color: var(--pr-navy); }
.pr-action-rail .rail-btn.has-filters { background: var(--pr-teal); color: #fff; border-color: var(--pr-teal); }

.rail-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--pr-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
  line-height: 12px;
  pointer-events: none;
}

.pr-action-rail .rail-btn { position: relative; }

/* ---- Export menu ---- */
.pr-export-menu {
  position: absolute;
  right: 44px;
  top: 0;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  box-shadow: var(--kbr-shadow-md);
  min-width: 130px;
  z-index: 20;
  display: none;
  overflow: hidden;
}

.pr-export-menu.open { display: block; }

.pr-export-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pr-navy);
  cursor: pointer;
  border-bottom: 1px solid #eef2f6;
  transition: background 0.12s;
}

.pr-export-item:last-child { border-bottom: none; }
.pr-export-item:hover { background: #eef4fa; }

/* ---- Info modal ---- */
.pr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.35);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-modal {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.18);
  width: 480px;
  max-width: 95vw;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0;
}

.pr-modal-header {
  background: var(--pr-navy);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
}

.pr-modal-header h5 { margin: 0; font-size: 14px; font-weight: 700; }

.pr-modal-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.pr-modal-body { padding: 18px 18px 14px; }

.pr-modal-body .info-row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #eef2f6;
  font-size: 12px;
}

.pr-modal-body .info-row:last-child { border-bottom: none; }
.pr-modal-body .info-label { font-weight: 700; color: var(--pr-navy); min-width: 140px; }
.pr-modal-body .info-value { color: var(--kbr-text-muted); }

/* ---- Info navigation modal ---- */
.pr-info-nav-modal {
  background: var(--pr-navy);
  border-radius: 14px;
  padding: 36px 40px 40px;
  max-width: 1000px;
  width: 95vw;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(15,23,42,0.45);
}

.pr-info-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-info-close:hover { background: rgba(255,255,255,0.12); }

.pr-info-nav-title {
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 28px;
}

.pr-info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pr-info-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pr-info-card:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.2); }
.pr-info-card-active { border-color: #0d9488 !important; background: rgba(13,148,136,0.12) !important; }

.pr-info-card-title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.pr-info-card-desc {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.5;
  flex: 1;
}

.pr-info-card-thumb {
  height: 100px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.pr-info-card-thumb i { font-size: 36px; color: #0d9488; }
.pr-info-card-active .pr-info-card-thumb i { color: #5eead4; }

/* ---- Active filters panel ---- */
.pr-active-filters-panel {
  position: absolute;
  right: 44px;
  top: 0;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  box-shadow: var(--kbr-shadow-md);
  width: 240px;
  z-index: 20;
  display: none;
  overflow: hidden;
}

.pr-active-filters-panel.open { display: block; }

.pr-afp-header {
  background: #f8fafc;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pr-navy);
  border-bottom: 1px solid #eef2f6;
}

.pr-afp-item {
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid #eef2f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pr-afp-item:last-child { border-bottom: none; }
.pr-afp-key   { color: var(--kbr-text-muted); font-weight: 600; }
.pr-afp-val   { color: var(--pr-navy); font-weight: 700; text-align: right; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Expand overlay (Deliverable charts) ---- */
.pr-expand-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.pr-expand-box {
  background: var(--pr-bg);
  border-radius: 10px;
  width: 100%;
  max-width: 1200px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.22);
  overflow: hidden;
}

.pr-expand-box-full { max-width: 1700px; width: 96vw; }

/* Deliverable expand two-panel layout */
.pr-deliv-expand-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  padding: 14px;
}
.pr-deliv-expand-left {
  display: flex;
  flex-direction: column;
}
.pr-exp-left-tabstrip {
  /* All six tabs stay on one row: nowrap plus the tighter tab padding
     below fits ~310px of tabs into the widened 340px left column.
     P-26: as a shrinkable flex item the strip was squeezed below its
     natural height, and since .pr-tab-strip sets overflow-x:auto the
     other axis computed to auto too, drawing a native scrollbar with
     up/down arrow buttons beside the tabs. Natural height + no vertical
     overflow removes them; same fix as #ovTabStrip above. */
  flex-wrap: nowrap;
  flex: 0 0 auto;
  overflow-y: hidden;
  border-bottom: 2px solid var(--pr-navy);
  margin-bottom: 0;
  padding: 0;
}
.pr-exp-left-tabstrip .pr-tab-item {
  font-size: 11px;
  padding: 5px 7px;
}
.pr-exp-left-table {
  flex: 1;
  overflow-y: auto;
  max-height: 580px;
  border-radius: 0 0 6px 6px;
  border-top: none;
}
.pr-deliv-expand-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pr-deliv-expand-curves { height: 220px; }

.pr-deliv-expand-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pr-expand-field { display: flex; flex-direction: column; gap: 3px; }
.pr-expand-label {
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--kbr-text-muted, #64748b);
}

.pr-expand-select {
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--pr-navy);
  background: #fff;
  min-width: 120px;
}

.pr-deliv-expand-table {
  max-height: 280px;
  overflow-y: auto;
  border-radius: 6px;
}

/* Full-page breakdown / release layout */
/* Page title bar on the two-panel Breakdown / Release pages. The shared
   .table-section-header is shaped to butt against a table, so the bottom
   corners are squared off here; the split below is sized off the viewport,
   so its height has to give back what the bar takes or the page overflows. */
.pr-page-title-bar { margin: 0 14px; border-radius: 6px; }
.pr-page-title-bar + .pr-breakdown-page-split { height: calc(100vh - 165px); }

.pr-breakdown-page-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  padding: 14px;
  height: calc(100vh - 130px);
  overflow: hidden;
}
.pr-breakdown-page-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pr-breakdown-page-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.pr-breakdown-left-table {
  flex: 1;
  overflow-y: auto;
  border-radius: 0 0 6px 6px;
  border-top: none;
}
/* P-22 "Graph background is missing" — both canvases sat straight on the page
   background with no panel behind them, unlike every other chart in the hub.
   box-sizing so the padding doesn't push .pr-breakdown-curves past its 260px. */
.pr-breakdown-left-chart,
.pr-breakdown-curves {
  background: var(--kbr-panel, #fff);
  border: 1px solid var(--kbr-border, #e2e8f0);
  padding: 8px;
  box-sizing: border-box;
}
.pr-breakdown-left-chart {
  flex: 1;
  position: relative;
  min-height: 0;
  /* Reads as one panel with the tab strip above, which already draws the divider. */
  border-top: none;
  border-radius: 0 0 6px 6px;
  /* These are horizontal bars (indexAxis:"y"), so a long category list squeezes
     every bar to a sliver. sizeLeftChart() gives .pr-breakdown-left-inner an
     explicit px height once that happens and this box scrolls down to it. */
  overflow-y: auto;
  overflow-x: hidden;
}
/* height:100% keeps a definite height for Chart.js (maintainAspectRatio:false
   feedback-loops without one) while the series is short enough to fit; JS swaps
   in a px height when it isn't. */
.pr-breakdown-left-inner {
  position: relative;
  height: 100%;
  min-height: 0;
}
/* 360, was 260. The right panel is a flex column with the table on flex:1, so
   every pixel added here comes straight off the table — which is the intent: the
   Progress Curve was too cramped to read and the table had more rows visible than
   it needed. Shared by Deliverable Breakdown and Deliverable Release, which both
   render a Progress Curve in this container. */
.pr-breakdown-curves {
  height: 360px;
  flex-shrink: 0;
  border-radius: 6px;
}
.pr-breakdown-deliv-table {
  flex: 1;
  overflow-y: auto;
  border-radius: 6px;
  min-height: 0;
}

.pr-expand-header {
  background: var(--pr-navy);
  color: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pr-expand-header h5 { margin: 0; font-size: 13px; font-weight: 700; }

.pr-expand-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.pr-expand-body { padding: 14px 16px 16px; }

/* ---- Panel header (title + action button row) ---- */
.pr-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pr-panel-header h5 { margin: 0; }

/* ---- Time slicer ---- */
.pr-time-slicer {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  padding: 7px 14px;
  margin-bottom: 10px;
  box-shadow: var(--kbr-shadow-sm);
  flex-wrap: wrap;
}

.pr-time-slicer .ts-label { font-size: 11px; font-weight: 700; color: var(--kbr-text-muted); white-space: nowrap; }
.pr-time-slicer select   { border: 1px solid var(--kbr-border); border-radius: 4px; padding: 3px 6px; font-size: 11px; color: var(--pr-navy); }
.pr-time-slicer .ts-sep  { font-size: 11px; color: var(--kbr-text-muted); }

/* ---- Chart panel expand button ---- */
.pr-expand-btn {
  background: transparent;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--kbr-text-muted);
  cursor: pointer;
  margin-left: 6px;
}

.pr-expand-btn:hover { background: #eef4fa; color: var(--pr-navy); }

/* ---- Link button (redirect to other page) ---- */
.pr-link-btn {
  background: transparent;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pr-teal);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pr-link-btn:hover { background: #f0fdf8; border-color: var(--pr-teal); }

/* ---- Self Service Analysis ---- */
.pr-ss-controls {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--kbr-border); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 14px;
}
.pr-ss-ctrl-label { font-size: 11px; font-weight: 700; color: #64748b; display: block; margin-bottom: 4px; }
.pr-ss-metric-select {
  border: 1px solid var(--kbr-border); border-radius: 4px;
  padding: 4px 8px; font-size: 12px; color: var(--pr-navy); background: #f8fafc;
  min-width: 220px;
}
.pr-ss-metric-wrap { min-width: 250px; }
.pr-ss-comp-wrap   { flex: 1; min-width: 280px; }
.pr-ss-comp-list   { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-ss-comp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #c0cfe0; border-radius: 12px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; background: #f0f6ff;
  color: var(--pr-navy);
}
.pr-ss-comp-chip.inactive { background: #f8fafc; color: #64748b; border-color: #d0dce8; }
.pr-ss-comp-chip:hover    { background: #dce8f8; border-color: #8ab0d8; }
.pr-ss-comp-sep { font-size: 11px; font-weight: 700; color: #94a3b8; padding: 4px 2px; align-self: center; }

.pr-ss-tree { display: flex; flex-direction: column; gap: 16px; }

.pr-ss-level { background: #fff; border: 1px solid var(--kbr-border); border-radius: 6px; padding: 12px 14px; }
.pr-ss-level-head {
  display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
  border-bottom: 1px solid #e8eef7; padding-bottom: 8px;
}
.pr-ss-level-num    { font-size: 10px; font-weight: 700; background: var(--pr-navy); color: #fff; border-radius: 10px; padding: 2px 7px; }
.pr-ss-level-comp   { font-size: 12px; font-weight: 700; color: var(--pr-navy); }
.pr-ss-level-metric { font-size: 11px; color: #64748b; margin-left: auto; }

.pr-ss-row {
  display: grid; grid-template-columns: 180px 1fr 90px;
  gap: 10px; align-items: center; margin-bottom: 5px;
}
.pr-ss-row-label { font-size: 12px; font-weight: 600; color: var(--pr-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-ss-row-bar-wrap { height: 16px; background: #eef2f6; border-radius: 3px; overflow: hidden; }
.pr-ss-row-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.pr-ss-row-val { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--pr-navy); font-weight: 600; }

/* ---- Icon button (small pill-style action button) ---- */
.pr-icon-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--kbr-border); border-radius: 4px;
  padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--pr-navy);
  cursor: pointer; white-space: nowrap;
}
.pr-icon-btn:hover   { background: #eef4fb; border-color: #a0b8d8; }
.pr-icon-btn.active  { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }

/* ---- Activity grouped table ---- */
.pr-act-group-header td { background: #e8f0fb; font-weight: 700; color: var(--pr-navy); border-top: 2px solid #c0d0e8; }
.pr-act-detail td.pr-act-indent { padding-left: 24px; }
.pr-act-group-count { font-weight: 400; font-size: 11px; color: #64748b; }


/* ---- Chart Mode panel (Progress Curves rail) ---- */
.pr-chart-mode-panel {
  position: absolute;
  right: 44px;
  top: 0;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  box-shadow: var(--kbr-shadow-md);
  width: 150px;
  padding: 8px;
  z-index: 20;
  display: none;
}
.pr-chart-mode-panel.open { display: block; }

.pr-cm-option {
  display: block;
  width: 100%;
  margin: 3px 0;
  padding: 7px 10px;
  border-radius: 20px;
  border: none;
  background: var(--pr-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s;
}
.pr-cm-option:hover  { background: var(--pr-navy-soft); }
.pr-cm-option.active { background: var(--pr-teal); }

/* ---- Curves table export row ---- */
.pr-curves-table-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 6px;
}
.pr-export-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pr-navy);
  cursor: pointer;
}
.pr-export-icon-btn:hover { background: #eef4fb; }

/* ---- Group By panel (Status on a Page rail) ---- */
.pr-groupby-panel {
  position: fixed;
  top: 64px;
  right: -360px;
  width: 300px;
  bottom: 0;
  background: #fff;
  border-left: 1px solid var(--kbr-border);
  z-index: 10;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--kbr-shadow-md);
}
.pr-groupby-panel.open { right: 0; }

.pr-gb-options-wrap { flex: 1; overflow-y: auto; }

/* P-17: multi-select. The row is now a <label> wrapping a checkbox, so the row
   styling moved from .pr-gb-option (which is the checkbox itself) onto
   .pr-gb-check. Activity/EWP tick several dims; Status on a Page still uses the
   single-select <button> form, which is why the button rules are kept below. */
.pr-gb-check {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid #eef2f6;
  color: var(--pr-navy);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.pr-gb-check:last-child { border-bottom: none; }
.pr-gb-check:hover { background: #f0f4f8; }
.pr-gb-check input[type="checkbox"] { cursor: pointer; flex: 0 0 auto; margin: 0; }
.pr-gb-check:has(input:checked) { background: #eef6f8; font-weight: 700; }

button.pr-gb-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid #eef2f6;
  border-radius: 0;
  background: transparent;
  color: var(--pr-navy);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
button.pr-gb-option:last-child { border-bottom: none; }
button.pr-gb-option:hover  { background: #f0f4f8; }
button.pr-gb-option.active { background: var(--pr-teal); color: #fff; font-weight: 700; }

/* ---- Timeline view (Status on a Page) ---- */
.pr-timeline-title-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 10px;
}
/* margin-right:auto so the view chips + Collapse All sit on the RIGHT, matching
   the table view. .table-section-header is space-between (title left, tools
   right) but .pr-timeline-title-bar is a plain flex-start row, so the chips were
   packed against the heading on the left and appeared to jump sides on every
   Table/Timeline toggle. */
.pr-timeline-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--pr-navy);
  margin: 0;
  margin-right: auto;
}
.pr-timeline-outer {
  overflow-x: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
#prTimelineInner { min-width: 900px; }

.pr-tl-row {
  display: flex;
  border-bottom: 1px solid #e8eef7;
  height: 34px;
  align-items: stretch;
}
.pr-tl-row:last-child { border-bottom: none; }

.pr-tl-label-col {
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 12px;
  color: var(--pr-navy);
  background: #fff;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid #e8eef7;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.pr-tl-label-col.group-hdr { font-weight: 700; background: #f3f6fa; }

.pr-tl-chart-col {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Scale (year header) row */
.pr-tl-scale-row { background: var(--pr-navy); height: 28px; }
.pr-tl-scale-row .pr-tl-label-col {
  background: var(--pr-navy);
  color: #fff;
  font-weight: 700;
  border-right-color: rgba(255,255,255,0.2);
}
.pr-tl-year-label {
  position: absolute;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Grid lines */
.pr-tl-grid-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: #e2e8f0;
  pointer-events: none;
}
.pr-tl-scale-row .pr-tl-grid-line { background: rgba(255,255,255,0.15); }

/* Current date line */
.pr-tl-now-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 2px dashed rgba(220,38,38,0.55);
  pointer-events: none;
}

/* Activity bar */
.pr-tl-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  background: var(--pr-teal);
  border-radius: 4px;
  min-width: 3px;
}

/* ===========================================================
   Deliverable Release — Power BI-style filter bar
   =========================================================== */

.pr-rel-filter-bar {
  background: #eef2f7;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* Single horizontal row: selects | date section | toggles */
.pr-rel-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* P-27 — the four Deliverable/Release filters are multi-select combos with a
   search box and Select-all. They keep the teal trigger of the .pr-rel-select
   dropdowns they replaced so the filter bar reads unchanged. */
.pr-rel-combos {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  /* Absorbs the row's spare width (taken off .pr-rel-date-section) so the
     dropdowns get the room; min-width:0 lets it shrink below content instead of
     forcing the row to overflow. */
  flex: 1 1 auto;
  min-width: 0;
}
.pr-rel-combo-field { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.pr-rel-combo-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--pr-navy);
  white-space: nowrap;
}
.pr-rel-combo { position: relative; }
.pr-rel-combo .fp-combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 96px;
  /* 150px truncated the longer Deliverable values; the field now flexes so the
     cap just stops one dropdown running away with the row. */
  max-width: 100%;
  width: 100%;
  padding: 5px 8px;
  background: var(--pr-teal);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.pr-rel-combo .fp-combo-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-rel-combo .fp-caret { font-size: 9px; flex-shrink: 0; transition: transform .15s; }
.pr-rel-combo .fp-combo-trigger[aria-expanded="true"] .fp-caret { transform: rotate(180deg); }
/* z-index clears the table header below; the bar sits above a scrolling grid. */
.pr-rel-combo .chk-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
  z-index: 9990;
  padding: 4px 0;
}
.pr-rel-combo .chk-list[hidden] { display: none; }
.pr-rel-combo .chk-search-wrap { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
.pr-rel-combo .chk-search {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--kbr-border);
  border-radius: 3px;
  font-size: 12px;
  background: #f8fafc;
  box-sizing: border-box;
}
.pr-rel-combo .chk-search:focus { outline: none; border-color: var(--pr-teal); }
.pr-rel-combo .chk-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--kbr-text);
}
.pr-rel-combo .chk-list label:hover { background: #eef4fa; }
.pr-rel-combo .chk-list label.chk-all {
  font-weight: 600;
  border-bottom: 1px solid #f1f5f9;
}
.pr-rel-combo .chk-list input[type=checkbox] { flex-shrink: 0; margin: 0; }

/* Teal-filled dropdown selects */
.pr-rel-select {
  background-color: var(--pr-teal);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 22px 5px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-width: 80px;
  max-width: 130px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
}

.pr-rel-select option {
  background: #fff;
  color: var(--pr-navy);
  font-weight: 400;
}

/* Date + slider stacked vertically, fills remaining space */
/* The date slider was the only flex:1 child of .pr-rel-filter-row, so it took
   every spare pixel and squeezed the four dropdowns down to their max-width. The
   grow now sits on .pr-rel-combos instead and this stays at its natural size —
   a range slider gains nothing from extra width. */
.pr-rel-date-section {
  flex: 0 0 220px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 4px;
}

.pr-rel-date-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pr-rel-date-val {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pr-navy);
}

.pr-rel-date-val i { font-size: 11px; color: #64748b; }

/* Vertical toggle stack on the right */
.pr-rel-toggles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.pr-rel-toggle {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.6;
}

.pr-rel-toggle.active {
  background: var(--pr-teal);
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
}

.pr-rel-toggle:hover:not(.active) { color: var(--pr-navy); }

/* Second range thumb sits on top so it stays draggable */
.pr-range-input.range-to { z-index: 1; }

/* ===========================================================
   Self Service — Decomposed node-link tree
   =========================================================== */

/* Page body: flex column so tree fills available height */
.pr-body.pr-ss-body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  overflow: hidden;
}

/* Scrollable outer container */
.pr-decomp-outer {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  box-shadow: var(--kbr-shadow-sm);
}

/* Inner: sized to content, SVG overlay shares same coordinate space */
.pr-decomp-inner {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-width: 100%;
  min-height: 100%;
}

#prDecompSvg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

/* Horizontal flex row of columns */
.pr-decomp-tree {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 24px 32px;
}

/* Spacer between columns — bezier curves live in this gap */
.pr-decomp-spacer {
  width: 56px;
  flex-shrink: 0;
}

/* One level column */
.pr-decomp-col {
  display: flex;
  flex-direction: column;
  min-width: 165px;
  max-width: 190px;
}

.pr-decomp-col-hdr {
  background: var(--pr-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 5px 8px;
  border-radius: 4px 4px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Dimension column headers have a "×" remove button */
.pr-decomp-col-hdr-dim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 8px;
}

.pr-decomp-remove-col {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  font-size: 15px;
  padding: 0 4px;
  line-height: 1;
  border-radius: 3px;
}
.pr-decomp-remove-col:hover { color: #fff; background: rgba(255,255,255,0.15); }

/* Nodes stack inside column, vertically centered */
.pr-decomp-nodes {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
}

/* Wrapper: node card + expand "+" button side by side */
.pr-decomp-node-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pr-decomp-node-wrap .pr-decomp-node {
  flex: 1;
  min-width: 0;
}

/* "+" expand button on the right of a node */
.pr-decomp-add-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--pr-teal);
  background: #fff;
  color: var(--pr-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.pr-decomp-add-btn:hover {
  background: var(--pr-teal);
  color: #fff;
}

/* Individual node card */
.pr-decomp-node {
  background: #fff;
  border: 1.5px solid #c8d8e8;
  border-left: 4px solid var(--pr-teal);
  border-radius: 6px;
  padding: 9px 10px 9px 11px;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  transition: box-shadow 0.12s;
}

.pr-decomp-node:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

/* Root node: solid teal fill, no accent bar */
.pr-decomp-node.pr-decomp-root {
  background: var(--pr-teal);
  border: 1.5px solid var(--pr-teal);
  border-radius: 6px;
}

.pr-decomp-node.pr-decomp-root .pr-dn-label { color: rgba(255,255,255,0.80); font-size: 11px; }
.pr-decomp-node.pr-decomp-root .pr-dn-value { color: #fff; font-size: 15px; }

/* Node that was clicked to expand the next level — navy accent + subtle bg */
.pr-decomp-node.pr-decomp-active-parent:not(.pr-decomp-root) {
  border-left-color: var(--pr-navy);
  background: #f0f5fb;
}

.pr-dn-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-dn-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--pr-navy);
  font-variant-numeric: tabular-nums;
}

/* "+" dimension picker — dropdown of levels to add to the tree. Positioned
   (top/left) inline by the controller against the clicked "+" button. */
.pr-decomp-picker {
  position: fixed;
  z-index: 9999;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
  min-width: 160px;
}
.pr-decomp-picker-item {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--pr-navy);
  cursor: pointer;
  white-space: nowrap;
}
.pr-decomp-picker-item:hover { background: #eef4fb; font-weight: 600; }

/* ---- Bar-style nodes — matches the Change Self Service decomposition tree ---- */
/* Underline column header (replaces the filled navy header for the bar look). */
.pr-ssbar-col-hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pr-navy);
  border-bottom: 2px solid var(--pr-teal);
  padding-bottom: 4px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.pr-ssbar-col-dim { font-weight: 700; color: var(--pr-navy); }
.pr-ssbar-col-hdr .pr-decomp-remove-col {
  margin-left: auto;
  background: transparent;
  color: #94a3b8;
}
.pr-ssbar-col-hdr .pr-decomp-remove-col:hover { color: var(--pr-navy); background: transparent; }

/* A drill bar: track row on top, label + value below. */
.pr-ssbar { display: flex; flex-direction: column; }
.pr-ssbar-row { display: flex; align-items: center; gap: 6px; }
.pr-ssbar-track {
  flex: 1;
  display: flex;
  align-items: center;
  height: 10px;
  background: #e5edf5;
  border-radius: 3px;
  min-width: 60px;
}
.pr-ssbar-fill { height: 100%; background: var(--pr-teal); border-radius: 3px; min-width: 4px; }
.pr-ssbar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pr-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}
.pr-ssbar-value { font-size: 11px; color: #4a6080; font-weight: 500; }
.pr-ssbar--selected .pr-ssbar-fill  { background: var(--pr-navy); }
.pr-ssbar--selected .pr-ssbar-label { font-weight: 800; }

/* Root rendered as a thin bar (no header box), like Change. */
.pr-ssbar-rootcol .pr-decomp-nodes { justify-content: center; }
.pr-ssbar-root { display: flex; flex-direction: column; }
.pr-ssbar-root-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pr-ssbar-root-bar { flex: 1; height: 10px; background: var(--pr-navy); border-radius: 3px; min-width: 60px; }
.pr-ssbar-root-label { font-size: 13px; font-weight: 600; color: var(--pr-navy); }
.pr-ssbar-root-value { font-size: 15px; font-weight: 700; color: var(--pr-navy); }

/* ---- MDL matrix ---- */
/* Scrolls on BOTH axes. overflow-x alone meant an unbounded height, so the page
   grew with the row count instead of the table scrolling inside a fixed frame
   (#97). The sticky `th` below only works once there is a scroll container with a
   definite height — without max-height it had nothing to stick against. */
.pr-mdl-wrap {
  overflow: auto;
  max-height: calc(100vh - 260px);
  min-height: 220px;
}
.pr-mdl-matrix { border-collapse: collapse; min-width: 100%; }
.pr-mdl-matrix th, .pr-mdl-matrix td { padding: 4px 10px; font-size: 11px; border-bottom: 1px solid #eef2f6; white-space: nowrap; }
.pr-mdl-matrix th { background: #f8fafc; font-weight: 700; color: var(--pr-navy); font-size: 11px; border-bottom: 2px solid #cbd5e1; position: sticky; top: 0; z-index: 2; }
.pr-mdl-scope { min-width: 120px; vertical-align: top; padding-top: 6px; }
.pr-mdl-deliv { min-width: 200px; vertical-align: top; padding-top: 6px; font-family: monospace; font-size: 11px; }
.pr-mdl-name  { min-width: 180px; max-width: 240px; vertical-align: top; padding-top: 6px; white-space: normal; }
/* Same rowspan=3 block as Scope / Deliverable / Name. Without a rule of its own
   the cell inherited vertical-align:middle, so the EWP value floated in the
   centre of the three Baseline/Actual/Forecast rows instead of lining up. */
.pr-mdl-ewp   { min-width: 90px;  vertical-align: top; padding-top: 6px; }
.pr-mdl-type  { min-width: 72px; font-size: 11px; color: #64748b; padding: 3px 8px; }
.pr-mdl-type.baseline { color: var(--pr-navy); font-weight: 700; }
.pr-mdl-type.actual   { color: var(--pr-teal); }
.pr-mdl-type.forecast { color: #64748b; font-style: italic; }
.pr-mdl-cell  { min-width: 88px; font-size: 11px; color: #1e293b; }
.pr-mdl-g-odd  td { background: #f8fafc; }
.pr-mdl-g-even td { background: #fff; }

/* ---- MDL view popup panel ---- */
.pr-mdl-view-panel {
  position: absolute; right: 44px; top: 0;
  background: #fff; border: 1px solid var(--kbr-border);
  border-radius: 6px; box-shadow: var(--kbr-shadow-md);
  width: 140px; padding: 8px; z-index: 20; display: none;
}
.pr-mdl-view-panel.open { display: block; }
.pr-mdl-view-btn {
  display: block; width: 100%; margin: 4px 0;
  padding: 7px 10px; border-radius: 20px; border: none;
  background: var(--pr-navy); color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer; text-align: center;
  transition: background 0.12s;
}
.pr-mdl-view-btn:hover  { background: var(--pr-navy-soft, #2d4a6e); }
.pr-mdl-view-btn.active { background: var(--pr-teal); }

/* ── Progress Curves: Graph By small-multiples + Group By overlay ───────── */
.pc-multi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pc-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px 10px; }
.pc-panel-wide { grid-column: 1 / -1; }
.pc-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--pr-navy, #1f3a5f); margin-bottom: 6px; }
.pc-panel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-grp-sub + .pc-grp-sub { margin-top: 14px; }
.pc-sub-title { font-size: 12px; font-weight: 600; color: var(--pr-teal, #0d9488); margin: 0 0 4px; }
.pc-panel-box { position: relative; height: 240px; }
.pc-panel-box canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 900px) { .pc-multi-grid { grid-template-columns: 1fr; } }

/* Group By dropdown in the curves filter bar */
.pc-gb-combo { position: relative; }
.pc-gb-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 150px; text-align: left; cursor: pointer; }
.pc-gb-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 180px; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 6px; }
.pc-gb-list label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; white-space: nowrap; cursor: pointer; border-radius: 4px; }
.pc-gb-list label:hover { background: #f1f5f9; }

/* Visible Chart/Table toggle (lives in the chart toolbar) */
.pc-view-bar { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.pc-view-chip { background: #fff; border: none; padding: 5px 14px; font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pc-view-chip + .pc-view-chip { border-left: 1px solid #cbd5e1; }
.pc-view-chip:hover { background: #f1f5f9; }
.pc-view-chip.active { background: var(--pr-teal, #0d9488); color: #fff; }

/* Per-panel toggle in the .pc-panel title row — compact icon-only chips. */
.pc-view-bar.pc-panel-toggle { flex: 0 0 auto; }
.pc-panel-toggle .pc-view-chip { padding: 3px 8px; gap: 0; }

/* Graph By / Group By active: collapse the main chart card to just the toggle
   bar — no "Progress Curves" card or main chart shown, toggle stays top-right. */
.pr-chart-panel.pc-toolbar-only { background: transparent; border: none; box-shadow: none; padding: 0; }
.pr-chart-panel.pc-toolbar-only h5 { display: none; }
.pr-chart-panel.pc-toolbar-only .pr-chart-toolbar { justify-content: flex-end; margin-bottom: 0; }

/* ── Print / Save-as-PDF ────────────────────────────────────────────────
   Strip the app chrome so the PDF is just the report: hide the nav header
   and the interactive filter controls (Filters button, Clear Filters, the
   expandable filter panel) while keeping the applied-filter chips, the body
   and the footer (Portfolio / Reporting Date). `@page { margin: 0 }` plus a
   body padding suppresses the browser-injected URL/date header & footer in
   Chromium-based browsers (the page leaves no margin for them to render). */
@media print {
  @page { margin: 0; }
  body.pr-report-body { padding: 12mm 10mm; }

  /* Render CSS background colors (the slicer rail/fill + handles, KPI tile
     headers, filter chips) in the PDF even when the browser's "Background
     graphics" print option is off — otherwise the slicer track and fill
     disappear, leaving just the hollow handle circles. */
  .pr-report-body,
  .pr-report-body * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* App chrome that should not appear in the PDF */
  .pr-report-body [data-page-toolbar],
  .pr-report-body .filter-bar-toggle,
  .pr-report-body .filter-bar-clear,
  .pr-report-body .filter-bar-body,
  .pr-report-body .pc-view-bar,
  .pr-report-body .pr-curves-table-header { display: none !important; }

  /* Collapse the filter bar down to just the applied-filter chips */
  .pr-report-body .filter-bar { border: none; background: none; box-shadow: none; padding: 0; margin: 0 0 10px; }
  .pr-report-body .filter-bar-summary { padding: 0; gap: 6px; }

  /* Avoid splitting a small-multiple panel across two pages */
  .pr-report-body .pc-panel { break-inside: avoid; }
}

/* ── Activity / EWP / Status-on-a-Page tables ───────────────────────────────
   Match the compact 12px sizing of the Staffing PAF Details table
   (#tblDetails in staffing.css) instead of the larger default Tabulator theme. */
#tblActivity.tabulator,
#tblEwp.tabulator,
#tblStatus.tabulator { font-size: 12px; }

#tblActivity .tabulator-header .tabulator-col-title,
#tblEwp .tabulator-header .tabulator-col-title,
#tblStatus .tabulator-header .tabulator-col-title { font-size: 12px; font-weight: 600; }

#tblActivity .tabulator-header .tabulator-col,
#tblEwp .tabulator-header .tabulator-col,
#tblStatus .tabulator-header .tabulator-col { padding: 6px 10px; }

#tblActivity .tabulator-row .tabulator-cell,
#tblEwp .tabulator-row .tabulator-cell,
#tblStatus .tabulator-row .tabulator-cell { padding: 8px 10px; }

#tblActivity .tabulator-row,
#tblEwp .tabulator-row,
#tblStatus .tabulator-row { min-height: 36px; }

/* Activity/EWP/Status grids are themed by the unified Tabulator theme in main.css. */