/* ============================================================================
   Cost, Budget & EAC module
   ============================================================================ */

/* ── LANDING TABLE ───────────────────────────────────────────────────────── */

/* C-17. #ceTable carries the shared .portfolio-table class, whose auto layout
   sized every column from whatever rows survived the filters — so picking one
   portfolio narrowed Portfolio and shifted the whole grid, and toggling
   Cost/Revenue shifted it again. Fixed layout takes its geometry from the
   <colgroup> cost-eac/landing.js emits instead, which does not depend on the
   data. Scoped to #ceTable, NOT .portfolio-table: that class is shared with
   other modules' landing pages and must not change here. Mirrors the same fix
   already made for Schedule in css/schedule.css. */
#ceTable {
  table-layout: fixed;
}
#ceTable tbody td {
  /* Columns no longer stretch to fit, so a long portfolio name has to be cut
     rather than run under the next cell. The full text stays on the cell's
     title attribute. */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Landing filter combos hold a fixed footprint. SearchableSelect only copies the
   <select>'s min-width onto its trigger, and the trigger is a shrink-to-fit
   inline-block, so picking a long "ID - Description" grew the control and shoved
   every filter after it sideways. Pin the width to that same min-width (no
   conflict, they are equal) and let the label ellipsise inside it. min-width:0
   is required because the trigger is a flex container and its value span would
   otherwise refuse to shrink below its text. The dropdown panel is absolutely
   positioned and keeps sizing to its longest option, so nothing is truncated
   while choosing. */
.landing-filter-row .ss-combo { width: 210px; }
.landing-filter-row #ceLandingBusiness + .ss-combo,
.landing-filter-row #ceLandingClient + .ss-combo { width: 150px; }
.landing-filter-row .ss-combo-value { min-width: 0; }

.ce-table-wrap {
  overflow-x: auto;
}
.ce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  white-space: nowrap;
}
.ce-table thead tr {
  background: var(--kbr-teal-dark);
}
.ce-table thead th {
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: right;
  border-right: 1px solid rgba(255,255,255,0.15);
  line-height: 1.3;
}
.ce-table thead th:first-child { text-align: left; min-width: 240px; }
.ce-table thead th:last-child  { border-right: none; }
.ce-table tbody tr {
  border-bottom: 1px solid var(--kbr-border);
  cursor: pointer;
  transition: background 0.1s;
}
.ce-table tbody tr:nth-child(even) { background: #f8fafc; }
.ce-table tbody tr:hover { background: #eef3fb; }
.ce-table tbody td {
  padding: 7px 10px;
  text-align: right;
  color: #1e2a3a;
  border-right: 1px solid #f0f2f5;
  font-variant-numeric: tabular-nums;
}
.ce-table tbody td:first-child {
  text-align: left;
  color: var(--kbr-navy);
  font-weight: 500;
  border-right: 1px solid var(--kbr-border);
}
.ce-table tbody td:last-child { border-right: none; }
.ce-table td.ce-red  { color: #e53e3e; font-weight: 600; }
.ce-table td.ce-over { background: #fff5f5; color: #e53e3e; font-weight: 600; }

/* CPI/SPI dot indicator */
.ce-dot-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.ce-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ce-dot-green { background: #2ea84c; }
.ce-dot-red   { background: #e53e3e; }

/* Extra breathing room around the CI column — the rightmost KPI needs a
   little space from the SPI column to read as its own thing. */
.ce-table th.ce-ci-cell,
.ce-table td.ce-ci-cell {
  padding-left: 18px;
}

/* ── PROJECT INFO BAR ────────────────────────────────────────────────────── */
.ce-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 6px 0 2px;
}
.ce-info-item { display: flex; align-items: baseline; gap: 4px; }
.ce-info-key {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  white-space: nowrap;
}
.ce-info-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--kbr-navy);
  white-space: nowrap;
}

/* ── S-CURVE CARD ────────────────────────────────────────────────────────── */
.ce-chart-card {
  display: flex;
  flex-direction: column;
}
.ce-chart-wrap {
  flex: 1;
  position: relative;
  min-height: 220px;
}
/* Timeline page renders a single full-page chart, so give it more room. */
.ce-tl-wrap { min-height: 520px; }

/* ── COST TIMELINE PAGE ──────────────────────────────────────────────────── */
/* Slim version of main.css's .range-slicer — shorter header, tighter
   padding, smaller tick text. The shared slicer styles still apply, this
   block just trims the timeline-specific instance so it doesn't dominate
   the row alongside the KPI tiles. */
.ce-tl-slicer.range-slicer { padding: 6px 10px; }
.ce-tl-slicer .rs-header   { font-size: 10px; margin-bottom: 4px; }
.ce-tl-slicer .rs-ticks    { font-size: 10px; margin-top: 4px; }
.ce-tl-slicer .range-slicer-track { height: 22px; }

.ce-tl-card { padding: 12px 14px; }
.ce-tl-card h4 { font-size: 14px; font-weight: 700; color: var(--kbr-navy); }
.ce-tl-card .ce-tl-canvas-wrap { min-height: 420px; position: relative; }

/* Names which dimension each " | " segment of a series label belongs to, and
   states that the chart folds to the first one. Lives outside #tlSingleCard so it
   survives multi-panel mode, which hides that card (and with it #tlChartTitle,
   previously the only place the dimensions were named). */
.tl-group-caption {
  margin: 0 0 6px;
  padding: 5px 10px;
  background: #eef3fb;
  border-left: 3px solid var(--kbr-teal-dark);
  border-radius: 3px;
  font-size: 11px;
  color: var(--kbr-navy);
  font-weight: 600;
}

/* ── C-21: NESTED PIVOT TABLE ─────────────────────────────────────────────── */
/* One column per Group By dimension (rowspan-merged) + a Measure column of
   coloured dots + the period columns. Mirrors the Staffing Timeline pivot
   (css/staffing.css .tl-pivot-table / .pv-*) so the two reports read the same.
   The `pv-` prefix is free here — this module's older table uses `.ce-tl-pivot*`. */
.tl-pivot-table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  min-width: 100%;
}
.tl-pivot-table thead { position: sticky; top: 0; z-index: 4; }
.pv-th {
  padding: 6px 10px;
  font-weight: 700;
  font-size: 11px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.pv-dim-hdr {
  background: var(--kbr-navy);
  color: #fff;
  text-align: left;
  min-width: 110px;
}
.pv-measure-hdr {
  background: var(--kbr-navy);
  color: #fff;
  text-align: left;
  width: 80px;
  min-width: 80px;
}
.pv-period-hdr {
  background: var(--kbr-teal-dark);
  color: #fff;
  text-align: right;
}
.pv-td {
  padding: 4px 10px;
  border-bottom: 1px solid #e8ecf3;
  border-right: 1px solid #e8ecf3;
}
.pv-dim-cell {
  font-weight: 600;
  color: var(--kbr-navy);
  background: #f4f6fa;
  text-align: left;
  vertical-align: top;
  border-right: 2px solid #c8d0e0;
}
.pv-measure-cell {
  color: #374151;
  background: #fafbfc;
  text-align: left;
  font-style: italic;
  font-size: 11px;
}
.pv-num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #1e2a3a;
}
.pv-even .pv-num-cell, .pv-even .pv-measure-cell { background: #fff; }
.pv-odd  .pv-num-cell, .pv-odd  .pv-measure-cell { background: #f8fafc; }
.pv-detail-row:hover .pv-num-cell,
.pv-detail-row:hover .pv-measure-cell { background: #eef3fb !important; }
/* Square colour chip in front of each measure name — the table doubles as the
   chart's legend, which is why the grouped chart can drop its own. */
.tl-row-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: -1px;
}

/* ── C-21: DENSE GROUPED CHART SCROLLS HORIZONTALLY ───────────────────────── */
/* Grouped, one x category carries (series x measures) bars, so at the container's
   natural width they compress to sub-pixel slivers. timeline.js gives the inner
   box a per-period width floor and this lets the wrapper scroll to reach it.
   Ungrouped leaves min-width unset, so the chart stays fully responsive and the
   C-5 parity with the Overview S-curve is untouched. */
.ce-tl-canvas-wrap { overflow-x: auto; overflow-y: hidden; }
.ce-tl-chart-inner { position: relative; height: 100%; min-height: inherit; }

/* ── C-21: GROUP BY IS SINGLE-SELECT IN CHART MODE ────────────────────────── */
/* The control stays a checkbox list (one markup, one handler) but in chart mode it
   behaves as single-select, so draw the ticks as radio dots — a square tick that
   clears the previous pick reads as a bug. */
.tl-combo.tl-single-select .chk-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid #94a3b8;
  border-radius: 50%;
  background: #fff;
  position: relative;
  top: 1px;
  margin: 0 2px 0 0;
  cursor: pointer;
}
.tl-combo.tl-single-select .chk-list input[type="checkbox"]:checked {
  border-color: var(--kbr-teal-dark);
  box-shadow: inset 0 0 0 3px var(--kbr-teal-dark);
}
.tl-combo .chk-list .chk-hint {
  padding: 2px 4px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--kbr-border);
  font-size: 10px;
  line-height: 1.35;
  color: var(--kbr-text-muted);
  white-space: normal;
  max-width: 190px;
}

/* ── C-21: SCROLLABLE HTML LEGEND ─────────────────────────────────────────── */
/* Chart.js lays its own legend out first and gives the plot the remainder, so at
   combination scale it swallows the canvas. Past CANVAS_LEGEND_MAX series the
   canvas legend is disabled and this renders instead — capped height with its own
   scrollbar, and placed AFTER the horizontal scroll box so the canvas scrollbar
   stays directly beneath the bars. */
.tl-html-legend {
  max-height: 104px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px 10px;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--kbr-border);
}
.tl-html-legend .tll-hdr {
  flex: 0 0 100%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kbr-text-muted);
  margin-bottom: 2px;
}
.tl-html-legend .tll-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 1px 2px;
  cursor: pointer;
  font-size: 10.5px;
  color: #475569;
  line-height: 1.5;
  white-space: nowrap;
}
.tl-html-legend .tll-item:hover { color: var(--kbr-navy); }
/* Hidden series: struck through and dimmed, so the toggle state is obvious. */
.tl-html-legend .tll-item.tll-off { opacity: 0.45; text-decoration: line-through; }
.tl-html-legend .tll-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.tl-html-legend .tll-line {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.tl-table-toolbar { display: inline-flex; align-items: center; gap: 6px; }
.tl-tb-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--kbr-border);
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  color: var(--kbr-navy);
  cursor: pointer;
}
.tl-tb-btn:hover  { background: #f3f5f8; border-color: var(--kbr-teal-dark); }
.tl-tb-btn:active { transform: translateY(1px); }
.tl-tb-btn.active { background: var(--kbr-teal-dark); color: #fff; border-color: var(--kbr-teal-dark); }
.tl-tb-sep { width: 1px; height: 20px; background: var(--kbr-border); margin: 0 2px; }

/* Pivot table — rendered in table view. Sticky header row + sticky left
   column so wide grids stay readable as the user scrolls. */
.ce-tl-pivot {
  max-height: 480px;
  overflow: auto;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
}
.ce-tl-pivot-section + .ce-tl-pivot-section { margin-top: 12px; }
.ce-tl-pivot-section-hdr {
  background: var(--kbr-navy);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  position: sticky;
  top: 0;
  z-index: 3;
}
.ce-tl-pivot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ce-tl-pivot-table thead th {
  background: #1a4f96;
  color: #fff;
  font-weight: 600;
  padding: 5px 8px;
  text-align: right;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.ce-tl-pivot-table thead th:first-child {
  text-align: left;
  left: 0;
  z-index: 3;
}
.ce-tl-pivot-table tbody th {
  background: #f8fafd;
  color: var(--kbr-navy);
  font-weight: 600;
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid #e4e9f2;
}
.ce-tl-pivot-cell {
  padding: 5px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid #f0f3f9;
  color: #1e2a3a;
}
.ce-tl-pivot-table tbody tr:hover td,
.ce-tl-pivot-table tbody tr:hover th { background: #eef3fb; }

/* ── COST STATUS REPORT (Breakdown page) ─────────────────────────────────── */
.ce-bd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ce-bd-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ce-bd-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ce-bd-tab:hover { color: var(--kbr-navy); }
.ce-bd-tab.active {
  color: var(--kbr-teal-dark);
  border-bottom-color: var(--kbr-teal-dark);
}
/* Double-click adds a second group-by dim — distinct amber underline so
   the user can see at a glance which dim is the secondary. */
.ce-bd-tab.secondary {
  color: #b45309;
  border-bottom-color: #f59e0b;
}
.ce-bd-tab.active.secondary {
  /* Defensive: a tab is never both primary AND secondary, but if state
     ever de-syncs, prefer the primary styling. */
  color: var(--kbr-teal-dark);
  border-bottom-color: var(--kbr-teal-dark);
}

/* Tabulator skin — mirrors PAF Details (#tblDetails) for cross-module
   visual consistency. Soft-gray header, white rows, thin row dividers,
   no zebra striping. */
#bdTable.tabulator {
  font-size: 12px;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
#bdTable .tabulator-header {
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}
#bdTable .tabulator-header .tabulator-col {
  background: transparent;
  border-right: 1px solid #e5e7eb;
  padding: 6px 10px;
}
#bdTable .tabulator-header .tabulator-col:last-child { border-right: none; }
#bdTable .tabulator-header .tabulator-col-content { padding: 0; }
#bdTable .tabulator-header .tabulator-col-title {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
#bdTable .tabulator-col-sorter { right: 6px; }
#bdTable .tabulator-col-sorter .tabulator-arrow {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid #cbd5e1;
}
#bdTable .tabulator-col[aria-sort="ascending"] .tabulator-arrow {
  border-bottom-color: #111827;
}
#bdTable .tabulator-col[aria-sort="descending"] .tabulator-arrow {
  border-bottom: none;
  border-top: 5px solid #111827;
}
#bdTable .tabulator-tableholder { background: #fff; }
#bdTable .tabulator-row {
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  min-height: 36px;
}
#bdTable .tabulator-row.tabulator-row-even { background: #fff; }
#bdTable .tabulator-row:hover { background: #f9fafb; }
#bdTable .tabulator-row .tabulator-cell {
  padding: 8px 10px;
  border-right: none;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}

/* Table-level Total — Tabulator's native bottomCalc row pinned at the
   very bottom of the table, OUTSIDE the scrolling body. Bold navy text
   on slate so it reads as the grand-total summary. */
#bdTable .tabulator-calcs-holder,
#bdTable .tabulator-calcs-bottom {
  background: #e8edf5 !important;
}
#bdTable .tabulator-calcs-holder .tabulator-row.tabulator-calcs.tabulator-calcs-bottom,
#bdTable .tabulator-calcs-holder .tabulator-row.tabulator-calcs.tabulator-calcs-bottom .tabulator-cell {
  background: #e8edf5 !important;
  color: var(--kbr-navy);
  font-weight: 700;
  border-top: 2px solid var(--kbr-navy);
  border-bottom: none;
}

/* Per-group Subtotal footer — Tabulator's bottomCalc row rendered INSIDE
   each group cluster (not in the .tabulator-calcs-holder). Lighter slate
   to distinguish from the grand-total bar. */
#bdTable .tabulator-tableholder .tabulator-row.tabulator-calcs.tabulator-calcs-bottom,
#bdTable .tabulator-tableholder .tabulator-row.tabulator-calcs.tabulator-calcs-bottom .tabulator-cell {
  background: #f1f5fb !important;
  color: var(--kbr-navy);
  font-weight: 600;
  border-top: 1px solid #cbd5e1;
}

/* Group banner — primary dim value renders above each cluster. */
#bdTable .tabulator-row.tabulator-group {
  background: #eef2f8;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  color: var(--kbr-navy);
  font-weight: 700;
  padding: 6px 0 6px 14px;   /* small left indent for the top level; deeper levels step further (staircase) */
}
.ce-bd-grp-label { padding-left: 6px; }

/* Nested (sub) group-by levels — indent the label + lighten the banner so the
   2nd / 3rd grouping levels are visually distinct from the top level. Indent is
   on the label only, so the column-aligned subtotal strip stays put. */
/* Staircase indent — each deeper level steps the toggle + label further right
   (on the ROW, so the toggle moves too). The subtotal strip re-aligns to the
   columns via the two-pass correction in breakdown.js, so the indent doesn't
   push the numbers. */
#bdTable .tabulator-row.tabulator-group.tabulator-group-level-1 {
  background: #e2ecf7; padding-left: 34px;
}
#bdTable .tabulator-row.tabulator-group.tabulator-group-level-1:hover { background: #d8e5f3; }
#bdTable .tabulator-row.tabulator-group.tabulator-group-level-1 .ce-bd-grp-label { color: #2c5a86; }

#bdTable .tabulator-row.tabulator-group.tabulator-group-level-2 {
  background: #eef4fb; padding-left: 54px;
}
#bdTable .tabulator-row.tabulator-group.tabulator-group-level-2:hover { background: #e4eef8; }
#bdTable .tabulator-row.tabulator-group.tabulator-group-level-2 .ce-bd-grp-label { color: #3f6e99; }
#bdTable .tabulator-row.tabulator-group:hover { background: #e3eaf3; }

/* Per-group subtotal strip on the banner — column-aligned totals (visible
   even when the group is collapsed). The strip is absolutely positioned with
   its LEFT pinned to the row-label column width (set by JS from the live DOM),
   and each cell sized to its column, so the numbers sit under their columns
   regardless of the arrow / frozen label / horizontal scroll. */
#bdTable .tabulator-row.tabulator-group { position: relative; }
/* Full-row overlay; each cell is absolutely placed directly over its body
   column (left + width set by JS from the live DOM geometry). */
.ce-bd-grp-sub { position: absolute; inset: 0; pointer-events: none; }
.ce-bd-grp-cell {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  color: var(--kbr-navy);
}
#bdTable .tabulator-row.tabulator-group .tabulator-arrow {
  border-color: var(--kbr-navy) !important;
  margin-right: 6px;
}

.ce-bd-group-count {
  font-weight: 500;
  color: #6b7280;
  font-size: 12px;
  margin-left: 6px;
}

/* Group By field — when injected into the .filter-bar-fields row,
   match the visual weight of the other filter combos so it doesn't
   look like a foreign tool button. */
.ce-bd-gb-field .cols-btn {
  width: 100%;
  background: #fff;
  border: 1px solid #d6dde7;
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  color: var(--kbr-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
}
.ce-bd-gb-field .cols-btn:hover { border-color: #bfc7d1; }
.ce-bd-gb-field .cols-caret { color: #6b7280; }
.ce-bd-gb-field .cols-dropdown { right: auto; left: 0; min-width: 220px; }

/* Small numeric badge next to a checked Group By item — shows the
   1-based nesting position (1 = outermost level under primary). */
.ce-bd-gb-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--kbr-teal-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* Cluster the Columns dropdown next to the Cost/Revenue toggle. */
.ce-bd-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── FINANCIAL PERFORMANCE (Power-BI-style 3-section layout) ─────────────── */
/* Wrapper stretches to fill the card vertically so the rows distribute
   evenly down to the bottom edge — no dead space under the variance row. */
.fin-pbi {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.fin-pbi-hdrs {
  display: grid;
  grid-template-columns: 1fr 0.55fr 1fr;
 background: #f0f3f9;
  color: #000000;
  font-weight: 700;
  
}
.fin-pbi-shdr {
  padding: 7px 12px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.25);
}
.fin-pbi-shdr:last-child   { border-right: none; }
.fin-pbi-ji-shdr           { background: #e7e9ec; }

.fin-pbi-body {
  display: grid;
  grid-template-columns: 1fr 0.55fr 1fr;
  flex: 1;
  min-height: 0;
}
.fin-pbi-col {
  display: grid;
  grid-auto-rows: 1fr;
  border-right: 1px solid #e0e6f0;
}
.fin-pbi-col:last-child { border-right: none; }
.fin-pbi-ji-col         { background: #f9fbfd; }

/* Revenue & Cost rows: [label | value + bar] */
.fin-pbi-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f3f9;
}
.fin-pbi-row:last-child { border-bottom: none; }
.fin-pbi-rlbl {
  color: var(--kbr-navy);
  font-weight: 600;
  line-height: 1.2;
}
.fin-pbi-rval {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fin-pbi-vnum {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  color: #1e2a3a;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.fin-pbi-track {
  flex: 1;
  min-width: 40px;
  height: 14px;
  background: transparent;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.fin-pbi-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Track has overflow:hidden so the outer end gets clipped to the track's
     rounded corner. JS sets `left` and `width` per row off the shared
     zero-anchored scale. */
}

/* Job Income rows: [value | arrow], centered */
.fin-pbi-ji {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f3f9;
}
.fin-pbi-ji:last-child { border-bottom: none; }
.fin-pbi-jinum {
  text-align: right;
  color: #1e2a3a;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  font-weight: 600;
}
.fin-pbi-jipct {
  text-align: right;
  color: #1e2a3a;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  font-weight: 600;
}
.fin-pbi-jiarrow {
  font-size: 14px;
  font-weight: 700;
  width: 14px;
  text-align: center;
}
.ji-up   { color: #2ea84c; }
.ji-down { color: #e53e3e; }
.ji-zero { color: #eab308; }   /* difference = 0 → yellow dash (Tailwind yellow-500) */

/* Per-measure bar colors — matches the Power BI palette in the spec.
   Budget/Expended/ETC use a teal gradient, EAC stands out in green, and
   the variance row gets the lightest teal. */
.fin-row-0 .fin-pbi-fill { background: #0e7a86; }   /* Budget (O)        */
.fin-row-1 .fin-pbi-fill { background: #6fb6c0; }   /* Budget (C)        */
.fin-row-2 .fin-pbi-fill { background: #4ca5b5; }   /* Expended To-Date  */
.fin-row-3 .fin-pbi-fill { background: #58aabf; }   /* ETC               */
.fin-row-4 .fin-pbi-fill { background: #2e7d32; }   /* EAC               */
.fin-row-5 .fin-pbi-fill { background: #b4dde4; }   /* Δ (C) vs EAC      */

/* ── WORKHOURS BARS ──────────────────────────────────────────────────────── */
.wh-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
}
.wh-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dashed #dde4ef;
}
.wh-row:last-child { border-bottom: none; }
.wh-label {
  width: 110px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbr-navy);
  flex-shrink: 0;
}
.wh-bars { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wh-bar-line { display: flex; align-items: center; gap: 6px; }
.wh-val {
  width: 80px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #1e2a3a;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.wh-track {
  flex: 1;
  height: 14px;
  background: transparent;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.wh-fill  {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Track clips the outer edge — JS sets left/width off the zero-anchored scale. */
}
/* Both sides keep the legend palette regardless of sign — a negative value
   is "less hours", not an error state. */
.wh-rev  { background: #f59e0b; }
.wh-cost { background: #0891b2; }

/* ── RIGHT PANEL TABLES (Labor Rates, Performance, Progress) ─────────────── */
.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.rp-table thead tr { background: var(--kbr-teal-dark); }
.rp-table thead th {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}
.rp-table thead th:first-child { text-align: left; width: 36%; }
.rp-table tbody tr { border-bottom: 1px solid #eef1f8; }
.rp-table tbody tr:hover { background: #f5f7fc; }
.rp-table tbody td { padding: 8px 10px; text-align: right; color: #1e2a3a; white-space: nowrap; font-weight: 600; }
.rp-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--kbr-navy); }
/* C-6: .rp-nocat has no leading Category column, so its first column is a
   value — keep it right-aligned and evenly sized like the rest. */
.rp-table.rp-nocat thead th:first-child { text-align: right; width: auto; }
.rp-table.rp-nocat tbody td:first-child { text-align: right; color: #1e2a3a; }
.rp-dot-cell { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }

/* ── OVERVIEW PAGE LAYOUT ────────────────────────────────────────────────── */
.ce-overview-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
@media (max-width: 900px) {
  .ce-overview-grid { grid-template-columns: 1fr; }
}

/* ── DIMENSION CHIP BAR ──────────────────────────────────────────────────── */
.ce-chip-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
}
.ce-chip-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 2px;
}
.ce-chip {
  padding: 3px 12px;
  background: #fff;
  border: 1.5px solid var(--kbr-border);
  border-radius: 12px;
  color: #475569;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ce-chip:hover { background: #f0f4fb; border-color: var(--kbr-navy); color: var(--kbr-navy); }
.ce-chip.active {
  background: var(--kbr-navy);
  border-color: var(--kbr-navy);
  color: #fff;
}
.ce-chip.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
.ce-chip-divider {
  width: 1px;
  height: 18px;
  background: var(--kbr-border);
  margin: 0 4px;
  align-self: center;
}
.ce-chip-spacer { flex: 1; }

/* ── BREAKDOWN TABLE ─────────────────────────────────────────────────────── */
.ce-bd-scroll {
  overflow: auto;
}
.ce-bd-table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}
.ce-bd-table thead tr {
  background: var(--kbr-teal-dark);
  position: sticky;
  top: 0;
  z-index: 2;
}
.ce-bd-table thead th {
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: right;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.15);
  position: relative;
}
.ce-bd-table thead th.dim-col { text-align: left; min-width: 130px; }
.ce-bd-table thead th:last-child { border-right: none; }
.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); }
.ce-bd-table tbody tr { border-bottom: 1px solid #eef1f8; }
.ce-bd-table tbody tr:nth-child(even) { background: #f8fafc; }
.ce-bd-table tbody tr:hover { background: #eef3fb; }
.ce-bd-table tbody tr.bd-total {
  background: #f0f3f9;
  border-top: 2px solid var(--kbr-teal-dark);
  font-weight: 700;
  position: sticky;
  bottom: 0;
}
.ce-bd-table tbody td {
  padding: 5px 10px;
  text-align: right;
  color: #1e2a3a;
  white-space: nowrap;
  border-right: 1px solid #f0f2f5;
  font-variant-numeric: tabular-nums;
}
.ce-bd-table tbody td.dim-cell {
  text-align: left;
  font-weight: 600;
  color: var(--kbr-navy);
  border-right: 2px solid #dde4ef;
}
.ce-bd-table tbody td:last-child { border-right: none; }
.ce-bd-empty { padding: 40px 20px; text-align: center; color: #6b7280; font-size: 13px; }

/* ── TIMELINE CHART PANELS ───────────────────────────────────────────────── */
#ce-tl-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
#ce-tl-area.multi-panel {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.ce-tl-panel {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.ce-tl-panel-hdr {
  padding: 5px 12px;
  background: var(--kbr-teal-dark);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tl-view-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.tl-view-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.ce-tl-canvas-wrap {
  flex: 1;
  position: relative;
  padding: 6px 10px 8px;
  min-height: 240px;
}
.ce-tl-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 8px 10px;
  min-height: 240px;
}

/* Per-panel Chart/Table toggle — sits inside .ce-tl-panel-hdr, mirrors the
   staffing/timeline pattern. Scoped here so cost-eac/timeline.html doesn't
   need to pull in staffing.css just for these three rules. */
.ce-tl-panel-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ce-tl-panel-hdr .tl-panel-title { flex: 1; }
.tl-mini-view-toggle {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}
.tl-mini-toggle-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tl-mini-toggle-btn:hover { background: rgba(255, 255, 255, 0.18); }
.tl-mini-toggle-btn.active {
  background: #fff;
  color: var(--kbr-navy);
}
.tl-mini-toggle-btn + .tl-mini-toggle-btn { border-left: 1px solid rgba(255, 255, 255, 0.35); }
.tl-mini-toggle-btn.active + .tl-mini-toggle-btn,
.tl-mini-toggle-btn + .tl-mini-toggle-btn.active { border-left-color: transparent; }
.tl-mini-toggle-btn i { font-size: 11px; }
.tl-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.tl-mini-table th,
.tl-mini-table td {
  border: 1px solid var(--kbr-border);
  padding: 3px 6px;
  text-align: right;
  white-space: nowrap;
}
.tl-mini-table thead th { background: #f1f5f9; font-weight: 600; }
.tl-mini-table .tl-mini-label {
  text-align: left;
  background: #f1f5f9;
  position: sticky;
  left: 0;
  z-index: 1;
}

/* ── MEASURE HINT ────────────────────────────────────────────────────────── */
.ce-measure-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* ── OVERVIEW PAGE — Power-BI-style panel headers ─────────────────────── */

/* Top toolbar: tabs on the left, KBR brand mark on the right. */
.ce-toolbar { display: flex; align-items: center; justify-content: space-between; }
.ce-brand   { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.ce-brand-logo { height: 26px; width: auto; }
.ce-brand-sub  { font-size: 11px; font-weight: 600; color: var(--kbr-navy); letter-spacing: 0.3px; }

/* Panel — strips the default card padding so the dark-navy header strip
   can sit flush against the top edge. Inner panel content gets padded
   instead of the whole card. */
.ce-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ce-panel-hdr {
  background: #1e3a5f;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 8px 12px;
}
.ce-panel-hdr-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.ce-panel-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
  margin-left: 6px;
}
.ce-wh-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px 4px;
  background: #f0f3f9;
}
.ce-wh-legend-item {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  opacity: 0.45;
  transition: opacity 120ms ease;
}
.ce-wh-legend-item.active { opacity: 1; }
.ce-wh-legend-item:hover  { opacity: 1; }
.ce-wh-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin: 0 4px 0 0;
  vertical-align: -1px;
}
.wh-bar-line.wh-hidden { visibility: hidden; }

/* Landing toggle — inverse of the standard Bootstrap-ish pill: inactive
   button is the dark/branded one, active button is the white "selected"
   chip. Visually the inverse of main.css's .toggle-group. */
.ce-view-toggle {
  display: inline-flex;
  border: 1px solid var(--kbr-navy);
  background: var(--kbr-navy);
  border-radius: 24px;
  overflow: hidden;
}
/* Equal-width halves. With padding alone, "Revenue" rendered a visibly wider pill
   than "Cost" purely because the word is longer, so the two labels had different
   space around them. flex:1 on a fixed min-width splits the control evenly and the
   text centres in each half regardless of length. */
.ce-view-toggle button {
  flex: 1 1 0;
  min-width: 96px;
  text-align: center;
  background: var(--kbr-navy);
  color: #fff;
  border: none;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ce-view-toggle button:hover:not(.active) {
  background: #2a4a72;
}
.ce-view-toggle button.active {
  background: #fff;
  color: var(--kbr-navy);
}

/* S-curve / timeline toggle inside the dark header strip. Renders as a
   segmented pill so both options are clearly visible — inactive button
   stays prominent against the navy background instead of fading out. */
.ce-curve-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 20px;
  overflow: hidden;
}
.ce-curve-toggle button {
  background: transparent;
  border: none;
  color: #fff;
  padding: 4px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ce-curve-toggle button:hover:not(.active) {
  background: rgba(255,255,255,0.25);
}
.ce-curve-toggle button.active {
  background: #fff;
  color: #1e3a5f;
}

/* Right-column compact cards (Labor / Performance / Progress) — keep the
   header strip identical to the bigger panels but reduce body padding. */
.ce-rp-card .rp-table thead tr { background: #f0f3f9; }
.ce-rp-card .rp-table thead th { color: var(--kbr-navy); font-weight: 700; }

/* Footer — three equally weighted segments matching the reference image. */
.ce-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ce-footer > div { font-size: 12px; color: #6b7280; }

/* ── RESPONSIVE — Cost module ─────────────────────────────────────────────
   Targets: overview, breakdown, timeline, landing.
   Breakpoints:
     ≤ 1200px — tighten paddings + relax inner column widths
     ≤  900px — main grid stacks (already declared earlier)
     ≤  768px — Financial Performance grid stacks, Workhours rows go vertical,
                toolbar wraps, slicer compresses
     ≤  480px — value/label fonts shrink, table buttons compact
*/
@media (max-width: 1200px) {
  .fin-pbi-row     { grid-template-columns: 90px 1fr; gap: 8px; padding: 7px 10px; }
  .fin-pbi-vnum    { width: 70px; }
  .wh-label        { width: 90px; }
  .wh-val          { width: 70px; }
}
@media (max-width: 900px) {
  .ce-toolbar      { flex-wrap: wrap; row-gap: 6px; }
  .ce-brand        { padding-right: 6px; }
  .ce-bd-tabs      { flex-wrap: wrap; }
  .ce-tl-card,
  .ce-panel        { min-width: 0; }
  #ce-tl-area.multi-panel { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .fin-pbi-hdrs,
  .fin-pbi-body    { grid-template-columns: 1fr; }
  .fin-pbi-col     { border-right: none; border-bottom: 1px solid #e0e6f0; }
  .fin-pbi-col:last-child { border-bottom: none; }
  .fin-pbi-row     { grid-template-columns: 100px 1fr; }
  .wh-row          { flex-wrap: wrap; }
  .wh-label        { width: 100%; }
  .wh-bars         { width: 100%; }
  .ce-wh-legend    { flex-wrap: wrap; gap: 10px; }
  .date-range-box  { flex-wrap: wrap; }
  .ce-tl-slicer    { padding: 6px 8px; }
  .rs-header       { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ce-chip-bar     { flex-wrap: wrap; }
  .fin-pbi         { font-size: 13px; }
}
@media (max-width: 480px) {
  .ce-panel-hdr    { font-size: 12px; padding: 6px 10px; }
  .fin-pbi-shdr    { font-size: 12px; padding: 6px 8px; }
  .fin-pbi-row,
  .wh-row          { font-size: 12px; }
  .fin-pbi-vnum,
  .wh-val          { width: 64px; font-size: 12px; }
  .fin-pbi-rlbl,
  .wh-label        { font-size: 12px; }
  .rp-table thead th,
  .rp-table tbody td { padding: 5px 7px; font-size: 12px; }
  .ce-footer       { gap: 6px; }
  .ce-footer > div { font-size: 11px; }
}