/* Cursor safety net — every interactive element gets pointer. Native buttons
   and href'd anchors already do, but native form controls (select, checkbox,
   radio, label[for]) and ARIA-role'd custom widgets often don't. This rule
   guarantees consistency so anything clickable signals it on hover. */
button:not(:disabled),
a[href],
[role="button"],
[role="tab"],
[role="link"],
[role="menuitem"],
[onclick],
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="date"]:not(:disabled),
label[for],
select:not(:disabled),
summary {
  cursor: pointer;
}

:root {
  --kbr-navy: #0f2a44;
  --kbr-navy-2: #1a3a5c;
  --kbr-blue: #2c5f8d;
  --kbr-blue-light: #4a7fae;
  --kbr-teal: #06b6d4;
  --kbr-teal-dark: #0891b2;
  --kbr-accent: #22d3ee;
  --kbr-bg: #f1f5f9;
  --kbr-panel: #ffffff;
  --kbr-border: #e2e8f0;
  --kbr-text: #0f172a;
  --kbr-text-muted: #64748b;
  --kbr-danger: #dc2626;
  --kbr-success: #16a34a;
  --kbr-warning: #ea580c;
  --kbr-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --kbr-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --kbr-shadow-lg: 0 10px 20px -5px rgba(15, 23, 42, 0.1), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --kbr-radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--kbr-text);
  background: var(--kbr-bg);
  font-size: 14px;
}

/* Background image on the module Landing pages only (body.landing-bg). */
body.landing-bg {
  background-image: url("../Image/Reporting_hub_background.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* The landing shell paints a solid page colour that would hide the image —
   make it transparent so the background shows through (landing pages only). */
body.landing-bg [class*="-shell"] {
  background-color: transparent !important;
}

a { text-decoration: none; color: inherit; }

/* ===== KBR Header banner ===== */
.kbr-header {
  background: linear-gradient(135deg, #0f2a44 0%, #1a3a5c 40%, #2c5f8d 100%);
  color: #fff;
  padding: 18px 28px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.kbr-header .kbr-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
}
.kbr-header .kbr-logo .dot {
  width: 24px; height: 24px;
  background: #f28c28;
  border-radius: 50%;
  position: relative;
}
.kbr-header .kbr-logo .dot::after,
.kbr-header .kbr-logo .dot::before {
  content: "";
  position: absolute;
  background: #f28c28;
  border-radius: 50%;
}
.kbr-header .kbr-logo .dot::before { width: 6px; height: 6px; top: -3px; right: -8px; }
.kbr-header .kbr-logo .dot::after { width: 4px; height: 4px; top: -8px; right: -14px; }

/* KBR logo image — replaces the old text + dot treatment wherever `<img
   class="kbr-logo-img">` appears (currently the Reporting Hub index and
   the Staffing landing page). The `clamp()` height makes it shrink on
   phones and stop growing past 48px on big monitors; aspect ratio is
   preserved by `width: auto`. */
.kbr-logo-img {
  height: clamp(28px, 4vw, 48px);
  width: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* Same logo, smaller, pinned to the right end of the staffing pages'
   page-toolbar. `margin-left: auto` pushes it to the right edge
   regardless of how many other items (tabs, info bar, etc.) sit to its
   left in the flex row. */
.kbr-logo-toolbar {
  height: clamp(22px, 2.4vw, 32px);
  width: auto;
  max-width: 100%;
  margin-left: auto;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* Brand block in the page toolbar — KBR logo stacked above the
   module-name label, pinned to the right edge of the toolbar. */
.kbr-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  line-height: 1;
}
.kbr-brand .kbr-logo-toolbar {
  margin-left: 0;
}
/* The logo is a link back to the Reporting Hub. inline-flex + line-height:0
   removes the inline baseline gap so the anchor hugs the image exactly. */
.kbr-brand-home {
  display: inline-flex;
  line-height: 0;
}
.kbr-brand-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.kbr-header h1 {
  display: inline-block;
  margin: 0 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  vertical-align: middle;
}

.kbr-header .kbr-meta {
  position: absolute;
  right: 28px;
  top: 24px;
  text-align: right;
  font-size: 13px;
  opacity: 0.95;
}

/* ===== Reporting Hub Home ===== */
.hub-shell {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Reporting-themed background: brand blue gradient + soft teal/blue corner
     glows. The animated dot-matrix (::before) slowly drifts over the top. */
  background:
    radial-gradient(820px 480px at 10% 4%,  rgba(45,212,191,0.18) 0%, rgba(45,212,191,0) 60%),
    radial-gradient(1000px 640px at 92% 100%, rgba(96,165,250,0.26) 0%, rgba(96,165,250,0) 62%),
    linear-gradient(135deg, #0A203C 0%, #0c2748 60%, #0e2e54 100%);
  background-attachment: fixed;
  padding: 22px 48px;
  color: #fff;
}
/* Keep page content above the animated dot layer. */
.hub-shell > * { position: relative; z-index: 1; }
/* Slowly-drifting dot-matrix. Oversized so the diagonal pan never reveals an
   edge; one full tile (24px) per loop keeps it seamless. Disabled under
   prefers-reduced-motion. */
.hub-shell::before {
  content: "";
  position: absolute;
  top: -30px; left: -30px; right: -30px; bottom: -30px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 1.4px, transparent 1.6px) 0 0 / 24px 24px;
  animation: hubDotsDrift 18s linear infinite;
}
@keyframes hubDotsDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(24px, 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .hub-shell::before { animation: none; }
}
/* Decorative cumulative line chart that draws upward then retreats back down,
   looping. Sits behind the hub content; stretched to fill the shell. */
.hub-bg-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}
.hub-shell > .hub-bg-chart { z-index: 0; }   /* behind content (z-index:1) */
.hub-bg-chart path {
  fill: none;
  stroke: rgba(125, 211, 252, 0.6);          /* light sky blue */
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(125, 211, 252, 0.45));
  /* pathLength=1000 normalises the geometry, so 1000 = the full curve. */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;                    /* start hidden (down) */
  animation: hubChartDraw 7s ease-in-out infinite alternate;
}
@keyframes hubChartDraw {
  from { stroke-dashoffset: 1000; }           /* nothing drawn */
  to   { stroke-dashoffset: 0; }              /* fully drawn (risen) */
}
@media (prefers-reduced-motion: reduce) {
  .hub-bg-chart path { animation: none; stroke-dashoffset: 0; }
}
/* Faint bar-chart columns behind the sparkline — render before the line in the
   SVG so they sit underneath it. Gently breathe in sync with the line. */
.hub-bg-bars rect { fill: rgba(125, 211, 252, 0.16); }
.hub-bg-bars { animation: hubBarsBreathe 7s ease-in-out infinite alternate; }
@keyframes hubBarsBreathe {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-bg-bars { animation: none; }
}

.hub-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #fff;
}
/* Small status dot before the title (matches the hub mock). */
.hub-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2dd4bf;
  margin-right: 12px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.7);
}
.hub-subtitle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(173, 201, 230, 0.6);
  margin: 6px 0 0;
}
.hub-accent {
  width: 230px;
  height: 2px;
  background: linear-gradient(90deg, rgba(125, 211, 252, 0.85), rgba(125, 211, 252, 0));
  margin: 9px 0 16px;
}
.hub-title-underline {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 22px;
}
.hub-section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 9px 2px;
  color: rgba(173, 201, 230, 0.9);
}
/* Extra breathing room above the PC Data block (direct child of the shell —
   the Non PC title is nested in .hub-non-pc, so it's unaffected). */
.hub-shell > .hub-section-title { margin-top: 20px; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 10px;
}
/* Dark "glass" module cards: translucent fill + hairline border, a rounded
   icon tile on the left, white label on the right. */
.hub-tile {
  position: relative;
  background: rgba(255, 255, 255, 0.076);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 20px;
  color: #fff;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.hub-tile:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.24);
}
/* Enable/disable affordance (option B):
   • enabled cards show a faint "open" chevron on the right that brightens on
     hover — a positive "this is clickable" cue.
   • disabled cards are greyed out with a lock icon in the corner, no hover
     lift, not-allowed cursor. */
.hub-tile:not(.disabled)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px; height: 7px;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color 0.15s ease, right 0.15s ease;
}
.hub-tile:not(.disabled):hover::after {
  border-color: #fff;
  right: 14px;
}
.hub-tile.disabled {
  cursor: not-allowed;
  opacity: 0.78;   /* match .hub-mini.disabled — clean frosted look, no grayscale */
}
.hub-tile.disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}
.hub-tile.disabled .hub-label { color: rgba(255, 255, 255, 0.9); }
/* No lock icon — instead a "Coming soon" pill that fades in on hover. */
.hub-tile.disabled::after {
  content: "Coming soon";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 4px 10px;
  border-radius: 999px;
}
.hub-tile.disabled:hover::after { opacity: 1; }
/* Rounded-square icon tile inside each card. */
.hub-tile .hub-icon {
  width: 46px; height: 46px;
  background: rgba(68, 67, 67, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cfe0f5;
  font-size: 21px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.hub-tile:hover .hub-icon {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
/* Inline module SVGs inherit the tile colour via stroke="currentColor". */
.hub-tile .hub-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.hub-tile .hub-label {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.hub-mini-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* Outlined pill chips (OPSR / ePCSR / ...). */
.hub-mini {
  background: rgba(255, 255, 255, 0.05);
  color: #cfe0f5;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hub-mini:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.hub-mini.disabled { opacity: 0.78; cursor: not-allowed; }

/* Bottom strip on the hub page: Non PC Data block on the left, User
   Feedback Survey on the right. margin-top:auto pushes the strip to the
   bottom of the flex-column .hub-shell. align-items:flex-end keeps the
   small Survey pill flush with the bottom of the taller Non PC block. */
.hub-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-top: auto;
  padding-top: 14px;
}
.hub-non-pc { flex: 1; min-width: 0; }
/* Frost the busy hub background (dot-matrix + bg chart) behind every hub card,
   pill and the feedback button so the page reads calmer instead of overloaded. */
.hub-tile,
.hub-mini,
.hub-feedback-btn {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
/* Breathing room below the Non PC accent line, before the tiles. */
.hub-non-pc .hub-grid { margin-top: 16px; }
/* Non PC tiles get a heavier frost than the rest of the hub. */
.hub-non-pc .hub-tile {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hub-feedback-row {
  display: flex;
  justify-content: flex-end;
}
.hub-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hub-feedback-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}
.hub-feedback-btn i { font-size: 16px; }

/* ===== Page shell (report pages) ===== */
.page-shell {
  min-height: 100vh;
  background: var(--kbr-bg);
  display: flex;
  flex-direction: column;
}
.page-body {
  padding: 10px 22px 22px;
  flex: 1;
}

/* Toolbar with tabs + Reporting Date */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Match the Reporting Hub background so every module's header ties back to
     the landing page. */
  background: #0A203C;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.tab-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tab-nav .home-btn {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: transparent;
  color: #cfe0f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  border: none;
}
.tab-nav .home-btn:hover { background: rgba(255,255,255,0.1); }
.tab-link {
  padding: 8px 4px 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
}
.tab-link.active {
  color: #fff;
  border-bottom-color: var(--kbr-teal-dark);
}
.tab-link:hover { color: #fff; }

/* kbr-brand restructured to row so user chip sits alongside logo+label. */
.kbr-brand {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.kbr-brand-id {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.kbr-brand-id .kbr-logo-toolbar { margin-left: 0; }

/* User chip — email/name pill with sign-out button. */
.kbr-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.kbr-user-icon { font-size: 1rem; opacity: 0.75; }
.kbr-user-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kbr-signout-btn {
  background: none;
  border: none;
  padding: 0 0 0 2px;
  cursor: pointer;
  color: inherit;
  opacity: 0.65;
  line-height: 1;
  font-size: 0.9rem;
}
.kbr-signout-btn:hover { opacity: 1; }

/* Hub user chip (index.html top bar). */
.hub-user-chip {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.hub-user-chip .kbr-user-name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reporting-date-box {
  background: var(--kbr-navy);
  color: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 260px;
}
.reporting-date-box label {
  font-size: 11px;
  opacity: 0.9;
  display: block;
  font-weight: 700;
  text-transform: none;
  margin-bottom: 4px;
}
.reporting-date-box select {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.3);
  background: #fff;
  color: var(--kbr-navy);
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 600;
}

/* Filter button */
.filter-btn {
  position: absolute;
  right: 12px;
  top: 0;
  background: transparent;
  border: none;
  color: var(--kbr-teal-dark);
  font-size: 22px;
  cursor: pointer;
}
.filter-inline-btn {
  background: transparent;
  border: 1px solid var(--kbr-border);
  color: var(--kbr-teal-dark);
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.filter-inline-btn:hover {
  background: #e6f2f5;
  border-color: var(--kbr-teal-dark);
}

/* ===== Cards / Panels ===== */
.card-panel {
  background: var(--kbr-panel);
  border: 1px solid var(--kbr-border);
  border-radius: var(--kbr-radius);
  padding: 16px;
  box-shadow: var(--kbr-shadow-sm);
  position: relative;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.card-panel:hover {
  box-shadow: var(--kbr-shadow-md);
}
.card-panel h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--kbr-text);
  margin: 0 0 10px 0;
  text-align: center;
}

/* KPI summary strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--kbr-panel);
  border: 1px solid var(--kbr-border);
  border-radius: var(--kbr-radius);
  padding: 12px 0;
  overflow: hidden;
  box-shadow: var(--kbr-shadow-sm);
  position: relative;
}
.kpi-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kbr-navy) 0%, var(--kbr-teal-dark) 100%);
  border-radius: var(--kbr-radius) var(--kbr-radius) 0 0;
}
.kpi-strip .kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6px 10px;
  border-right: 1px solid var(--kbr-border);
}
.kpi-strip .kpi:last-child { border-right: none; }
.kpi-strip .kpi .label {
  color: var(--kbr-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.kpi-strip .kpi .value {
  color: var(--kbr-navy);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2px;
}

.in-Cost{
  color:white !important;
}

.kpi-strip.three { grid-template-columns: repeat(3, 1fr); }


/* Section title row above KPI strips */
.section-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--kbr-navy);
  margin-bottom: 6px;
}
.section-right-note {
  font-size: 11px;
  color: var(--kbr-text-muted);
  font-style: italic;
}

/* Landing page portfolio table */
.landing-top-bar {
  background: #0A203C;
  color: #fff;
  padding: 22px 32px 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.landing-top-bar h1 {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  display: inline-block;
}
.landing-filter-banner {
  position: absolute;
  right: 32px;
  top: 22px;
  font-size: 13px;
  opacity: 0.95;
}
.back-to-modules-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.15s ease;
}
.back-to-modules-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
}
.landing-controls {
  background: #fff;
  border: 1px solid var(--kbr-border);
  margin: 0 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 14px;
  margin-top: -22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}
.landing-controls select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
}
.landing-controls .navigate-btn {
  background: #c3cfdb;
  color: var(--kbr-navy);
  border: none;
  padding: 10px 22px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}
.landing-controls .navigate-btn.enabled {
  background: var(--kbr-teal-dark);
  color: #fff;
}
.landing-controls .navigate-btn:disabled { cursor: not-allowed; opacity: 0.85; }

.portfolio-table-wrap {
  margin: 18px 22px 22px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  overflow: auto;
  max-height: calc(100vh - 200px);
}
.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.portfolio-table thead .group-row th {
  background: #f0f3f7;
  color: var(--kbr-text);
  text-align: center;
  padding: 6px 8px;
  font-weight: 600;
  border-bottom: 1px solid var(--kbr-border);
  border-right: 1px solid var(--kbr-border);
  font-size: 12px;
}
.portfolio-table thead .col-row th {
  background: #f0f3f7;
  color: var(--kbr-text);
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--kbr-border);
  border-right: 1px solid var(--kbr-border);
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
}
.portfolio-table thead .col-row th.num { text-align: center; }
.portfolio-table tbody tr { cursor: pointer; }
.portfolio-table tbody tr:hover { background: #eef4fa; }
.portfolio-table tbody tr:hover td { background: #eef4fa; }
.portfolio-table tbody tr.selected { background: #dff1f5; }
.portfolio-table tbody tr.selected td { background: #dff1f5; }
.portfolio-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
}
.portfolio-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.portfolio-table tbody td.portfolio-name { font-weight: 500; }

/* Landing tables (opt-in via .pt-frozen-frame): the wrap already caps height and
   scrolls internally; freeze the header row(s) so they stay visible while the body
   scrolls, instead of the whole page scrolling and losing the headers. Applied to
   every module landing except epcsr / risk / workshare. */
.portfolio-table-wrap.pt-frozen-frame thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
/* The table uses border-collapse, so the header row's own bottom border is
   painted on the table and scrolls away with the body — leaving the pinned
   header looking like it floats over the rows. Redraw the divider with an
   inset box-shadow (shadows travel with the sticky cell), so the frozen header
   keeps a clean separator while scrolling. Applies to every .pt-frozen-frame
   landing (PR-2). */
.portfolio-table-wrap.pt-frozen-frame thead th {
  box-shadow: inset 0 -1px 0 var(--kbr-border);
}

/* Toolbar toggle pills (Timeline page) */
.toggle-group {
  display: inline-flex;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--kbr-border);
}
.toggle-group button {
  background: #fff;
  border: none;
  padding: 8px 22px;
  font-weight: 600;
  cursor: pointer;
  color: var(--kbr-text);
}
.toggle-group button.active {
  background: var(--kbr-teal-dark);
  color: #fff;
}
.toggle-rect {
  display: inline-flex;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--kbr-border);
}
.toggle-rect button {
  background: #fff;
  color: var(--kbr-text);
  border: none;
  padding: 8px 22px;
  font-weight: 600;
  cursor: pointer;
}
.toggle-rect button.active {
  background: var(--kbr-navy);
  color: #fff;
}

.date-range-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  padding: 6px 10px;
  border-radius: 4px;
}
.date-range-box input[type="date"] {
  border: none;
  outline: none;
  padding: 4px;
  font-size: 13px;
}

/* Dual-range date slicer */
.range-slicer {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  padding: 12px 18px 14px;
  margin-top: 8px;
}
.range-slicer .rs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--kbr-text-muted);
  margin-bottom: 6px;
}
.range-slicer .rs-header strong {
  color: var(--kbr-navy);
  font-weight: 700;
  font-size: 13px;
}
.range-slicer-track {
  position: relative;
  height: 32px;
}
.range-slicer-track .rs-rail {
  position: absolute;
  top: 14px;
  left: 0; right: 0;
  height: 4px;
  background: #dfe5ee;
  border-radius: 2px;
}
.range-slicer-track .rs-fill {
  position: absolute;
  top: 14px;
  height: 4px;
  background: var(--kbr-teal-dark);
  border-radius: 2px;
  pointer-events: none;
}
.range-slicer-track input[type="range"] {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
}
.range-slicer-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--kbr-teal-dark);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  margin-top: 0;
}
.range-slicer-track input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--kbr-teal-dark);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Layer the two thumbs so each is independently grabbable even when they're
   close together. Without z-index the later input (#rsMax) sits on top of
   the earlier one (#rsMin) and steals every click — the LEFT thumb becomes
   ungrabbable. Bumping #rsMin's z-index keeps it accessible. */
.range-slicer-track input[type="range"]#rsMin { z-index: 3; }
.range-slicer-track input[type="range"]#rsMax { z-index: 2; }
.range-slicer-track input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
}
.range-slicer-track input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}
.range-slicer-track input[type="range"]:focus { outline: none; }

.range-slicer .rs-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--kbr-text-muted);
  margin-top: 2px;
}

/* Data table */
.data-table-wrap {
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  overflow: auto;
}

/* Virtualized table: fixed row height, spacers absorb the unrendered rows. */
.data-table-virtual {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: auto;
}
.data-table-virtual table {
  table-layout: fixed;
}
.data-table-virtual .v-spacer {
  padding: 0;
  border: none;
}
.data-table-virtual tr.v-row {
  height: 34px;
}
.data-table-virtual thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 2200px;
}
.data-table th {
  background: #f0f3f7;
  padding: 10px 10px;
  font-weight: 700;
  color: var(--kbr-navy);
  border-bottom: 1px solid var(--kbr-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Paged table: scroll body same as virtual, minus the spacer plumbing.
   Inside .page-body-flex the wrap grows to fill leftover vertical space
   between the section header and the pagination bar. */
.data-table-paged {
  overflow: auto;
}
.data-table-paged table { table-layout: fixed; }
.data-table-paged thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Details page layout: column-flex so the table fills the viewport. */
.page-body-flex {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-body-flex .data-table-paged {
  flex: 1;
  min-height: 200px;
  border-radius: 0 0 6px 6px;
  border-top: none;
}

/* Card panel that acts as a flex child and lets its inner table scroll.
   Use with page-body-flex on the parent page-body. */
.card-panel--paged {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-panel--paged .data-table-paged {
  flex: 1;
  min-height: 200px;
  overflow: auto;
}

/* Section header bar above a data table (title + page-size pills). */
.table-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #eef1f5;
}
.table-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--kbr-navy);
}

/* Right-side tools area inside .table-section-header. Used on the PAF
   Details page to host the Columns dropdown next to the page-size pills. */
.table-section-tools {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
/* GroupByDropdown stacks a "Group By" label above its button via .fb-field.
   In a section-tools strip the label pushes the Group By button below the
   Columns button's baseline — hide it here so both buttons line up. */
.table-section-tools .fb-label { display: none; }
.table-section-tools .fb-field { flex-direction: row; align-items: center; }

/* "Columns" button + the absolutely-positioned dropdown panel below it. */
.cols-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.cols-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  color: var(--kbr-navy);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cols-btn:hover  { background: #f8fafc; }
.cols-btn:active { transform: translateY(1px); }
.cols-caret {
  font-size: 10px;
  color: var(--kbr-text-muted);
}

.cols-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  max-height: 380px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  padding: 6px 0;
  z-index: 50;
  display: none;
}
.cols-dropdown.open { display: block; }
.cols-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--kbr-navy);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.cols-row:hover { background: #f1f5f9; }
.cols-row input[type=checkbox] {
  margin: 0;
  flex-shrink: 0;
}
.cols-row.cols-all {
  border-bottom: 1px solid var(--kbr-border);
  margin-bottom: 4px;
}

/* ── Table column tools: fit-width button + Column Manager panel ──────── */
.tbl-tools { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.tbl-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: #fff; border: 1px solid var(--kbr-border); border-radius: 6px;
  color: var(--kbr-navy); font-size: 14px; cursor: pointer;
}
.tbl-tool-btn:hover  { background: #f8fafc; border-color: #bfc7d1; }
.tbl-tool-btn:active { transform: translateY(1px); }

/* Right-side drawer + dimmed backdrop (appended to <body>). */
.colmgr-overlay {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0; transition: opacity 0.22s ease;
}
.colmgr-overlay[hidden] { display: none; }
.colmgr-overlay.open { opacity: 1; }
.colmgr-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 360px; max-width: 90vw; overflow-y: auto;
  background: #fff; border-left: 1px solid var(--kbr-border);
  box-shadow: -12px 0 34px rgba(15, 23, 42, 0.18);
  padding: 18px 18px 10px;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.colmgr-overlay.open .colmgr-panel { transform: translateX(0); }
body.colmgr-lock { overflow: hidden; }
.colmgr-head { position: relative; margin-bottom: 12px; }
.colmgr-close {
  position: absolute; top: -4px; right: -4px; width: 28px; height: 28px;
  border: none; background: transparent; color: var(--kbr-text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.colmgr-close:hover { background: #f1f5f9; color: var(--kbr-navy); }
.colmgr-title { font-size: 16px; font-weight: 700; color: var(--kbr-navy); }
.colmgr-sub   { font-size: 12px; color: var(--kbr-text-muted); margin: 2px 0 0; line-height: 1.35; }

.colmgr-hrow, .colmgr-row {
  display: grid; grid-template-columns: 22px 1fr 54px; align-items: center; gap: 8px;
}
.colmgr-hrow {
  padding: 6px 4px; border-bottom: 1px solid var(--kbr-border);
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--kbr-text-muted);
}
.colmgr-hrow .c-vis { text-align: center; }
.colmgr-list { padding-top: 4px; }
.colmgr-row { padding: 7px 4px; border-radius: 6px; font-size: 13px; color: var(--kbr-navy); }
.colmgr-row:hover { background: #f1f5f9; }
.colmgr-row.is-hidden .colmgr-field { color: var(--kbr-text-muted); }
.colmgr-row.dragging { opacity: .5; }
.colmgr-row.drop-above { box-shadow: inset 0 2px 0 var(--kbr-navy); }
.colmgr-row.drop-below { box-shadow: inset 0 -2px 0 var(--kbr-navy); }
.colmgr-handle { color: #94a3b8; cursor: grab; display: flex; justify-content: center; }
.colmgr-handle:active { cursor: grabbing; }
.colmgr-field { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.colmgr-sw {
  justify-self: center; position: relative; width: 38px; height: 20px; padding: 0;
  border: none; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background .15s;
}
.colmgr-sw .knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.colmgr-sw.on { background: var(--kbr-navy); }
.colmgr-sw.on .knob { transform: translateX(18px); }

/* ── Unified Tabulator appearance across every module ─────────────────────
   Pin the same font size on all grids, and give the newly-converted grids
   (Schedule Details, CM Variance Aging, CM Change Logs) the same header/row/
   cell backgrounds the Cost/Productivity/Staffing/Progress grids already use.
   Selectors are #id-scoped so they win over the Bootstrap5 theme regardless
   of stylesheet load order. */
/* ── Unified Tabulator grid theme (ALL data grids) ──────────────────────────
   Rounded bordered container, light header + tinted sort arrows, vertical AND
   horizontal grid lines, roomy cells, hover, no zebra stripes. :is(#ids) gives
   id-level specificity and !important wins over the Bootstrap5 CDN theme and any
   per-module rule regardless of stylesheet load order. Add a new grid's id to
   the list below to theme it. */
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable).tabulator {
  background: var(--kbr-panel) !important;
  border: 1px solid var(--kbr-border) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: var(--kbr-shadow-sm);
  font-size: 13px;
}
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-header {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--kbr-border) !important;
  color: var(--kbr-text-muted) !important;
  font-weight: 600;
}
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-header .tabulator-col {
  background: transparent !important;
  border-right: 1px solid #eef1f5 !important;   /* vertical grid line */
  padding: 6px 10px;
}
/* Frozen columns are position:sticky, so the rest of the header scrolls beneath
   them. The transparent !important above therefore let the scrolled titles show
   straight through the pinned one - hence !important here too, or the base rule
   wins. Tabulator's own default is background-color:inherit, which is what these
   restore. */
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-header .tabulator-col.tabulator-frozen {
  background: var(--kbr-bg) !important;
  z-index: 12;
}
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-row .tabulator-cell.tabulator-frozen,
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-footer .tabulator-frozen {
  background: inherit !important;
  z-index: 11;
}
/* Edge of the frozen block, so it reads as pinned once content scrolls under. */
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-frozen.tabulator-frozen-left:last-of-type {
  border-right: 1px solid #cbd5e1 !important;
}
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-header .tabulator-col-title {
  font-size: 11.5px; font-weight: 600; color: var(--kbr-text-muted);
}
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-col .tabulator-col-sorter { color: #94a3b8; }
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-tableholder { background: var(--kbr-panel) !important; }
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-row,
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-row.tabulator-row-even {
  background: var(--kbr-panel) !important;
  border-bottom: 1px solid #eef1f5 !important;  /* horizontal grid line */
  min-height: 46px !important;
}
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-row:hover { background: #f1f5f9 !important; }
:is(#tblOverview,#bdTable,#tblProductivityDetails,#tblDetails,#tblActivity,#tblEwp,#tblStatus,#detailsTable,#cmAgingTable,#cmLogsTable) .tabulator-row .tabulator-cell {
  border-right: 1px solid #eef1f5 !important;   /* vertical grid line */
  padding: 12px 16px !important;
  color: var(--kbr-text);
  font-size: 13px;
}

/* Page-size pill group (Show [10|20|30|50|100] rows). */
.page-size-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kbr-text-muted);
}
.page-size-pills .ps-label { color: var(--kbr-text-muted); }
.page-size-pills .ps-group {
  display: inline-flex;
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.page-size-pills .ps-btn {
  background: #fff;
  border: none;
  border-left: 1px solid var(--kbr-border);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kbr-text);
  cursor: pointer;
  min-width: 44px;
  transition: background 0.12s, color 0.12s;
}
.page-size-pills .ps-btn:first-child { border-left: none; }
.page-size-pills .ps-btn:hover:not(.active) {
  background: #f3f5f8;
  color: var(--kbr-teal-dark);
}
.page-size-pills .ps-btn.active {
  background: var(--kbr-teal-dark);
  color: #fff;
}

/* Pager (Details page) — matches the reference screenshot's look:
     left   : "X–Y of Z" row info
     center : prev chevron • numbered buttons (current = blue outline) • next chevron
     right  : "20 / page" select with a native caret */
.details-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 14px;
  color: #4b5563;
  flex-wrap: wrap;
}
.pg-range {
  font-size: 14px;
  color: #4b5563;
}
.pg-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pg-numbers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pg-arrow,
.pg-num {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid transparent;     /* hidden border until hover/active */
  border-radius: 6px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pg-arrow:hover:not(:disabled),
.pg-num:hover:not(.active) {
  border-color: #d1d5db;
  color: #1677ff;
}
.pg-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: #9ca3af;
}
.pg-num.active {
  background: #fff;
  border-color: #1677ff;
  color: #1677ff;
  font-weight: 600;
  cursor: default;
}
.pg-ellipsis {
  color: #9ca3af;
  padding: 0 4px;
  user-select: none;
  min-width: 24px;
  text-align: center;
}
.pg-size-select {
  min-width: 96px;
  height: 32px;
  padding: 0 30px 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
  /* Custom caret so it matches the screenshot regardless of browser. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.pg-size-select:hover  { border-color: #1677ff; }
.pg-size-select:focus  {
  outline: none;
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
}

/* Status badges */
.badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.badge-approved { background: #d6f2de; color: #1e7a3b; }
.badge-pending { background: #fff2cf; color: #8a6a00; }
.badge-rejected { background: #f9d5d0; color: #a33126; }
.badge-withdrawn { background: #e5e9ef; color: #5c6b80; }
.badge-filled { background: #d6f2de; color: #1e7a3b; }
.badge-open { background: #d8e9f8; color: #1a4c79; }
.badge-canceled { background: #e5e9ef; color: #5c6b80; }

/* Footer-ish for pages */
.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Without a gap the items run together ("…Planning ServicesReporting Date:").
     Cost and Productivity each set their own gap, so only Progress showed it. */
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 22px;
  font-size: 12px;
  color: var(--kbr-text-muted);
  background: var(--kbr-panel);
  border-top: 1px solid var(--kbr-border);
}

/* C-14 / C-15 (Cost only). The footer sits in normal flow, so on a viewport
   shorter than the content — a laptop rather than an external monitor — it fell
   below the fold and QA had to scroll to read the Portfolio / Reporting Date /
   Currency line. Sticky pins it to the bottom of the viewport while the content
   scrolls under its opaque background, and it still comes to rest at the true
   end of the page, so both "visible by default" and "always at the end" hold.
   Works because .page-shell is a flex column with the footer as its last child
   and no ancestor clips overflow. */
.page-footer.ce-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* C-19 (Cost only). Currency read as joined to Reporting Date because the base
   rules push only the FIRST item left, leaving the last two adjacent. Giving the
   trailing item its own margin-left:auto splits the free space either side of
   Reporting Date: Portfolio left, Reporting Date centred, Currency hard right.
   The ::after stand-in has to go with it — a second auto margin on the right
   would halve that side's slack and leave Currency short of the edge. Landing is
   unaffected: its single footer child carries no .footer-item class. */
.page-footer.ce-footer .footer-item:last-child { margin-left: auto; }
.page-footer.ce-footer::after { content: none; }

/* Canonical footer items (Common.footerHtml). Module stylesheets scoped these
   to .pr-footer / .cm-footer / .productivity-footer before the footer was
   shared; the generic rules live here so every module renders alike. */
.page-footer .footer-item  { display: flex; align-items: center; gap: 4px; }
.page-footer .footer-label { color: var(--kbr-text-muted); font-weight: 600; }
.page-footer .footer-value { color: var(--kbr-navy); font-weight: 700; }

/* Three zones: Portfolio left, Reporting Date centred, Last refresh right.
   The two auto margins absorb all free space and split it evenly, which centres
   whatever sits between them — so this works on the generated footer and on the
   pages that hardcode the same markup, without either needing wrapper elements.
   Auto margins are consumed before justify-content, so the module overrides that
   set `space-between` don't fight it. */
.page-footer .footer-item:first-child { margin-right: auto; }
.page-footer .footer-item.end         { margin-left: auto; }
/* "Last refresh" used to be that trailing `.end` item and it was what made
   Reporting Date land in the middle. With it removed there is no third item to
   absorb the right-hand slack, so Reporting Date would drift to the far right.
   This zero-width pseudo-element takes its place as the trailing flex item —
   same geometry, no markup. Harmless on the pages that still have a real `.end`
   item, since two auto margins on the right simply split that side's slack. */
.page-footer::after { content: ""; margin-left: auto; }

/* Filter panel (offcanvas-like) */
.filter-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 16px rgba(0,0,0,0.15);
  z-index: 1050;
  transition: right 0.25s ease;
  overflow-y: auto;
  padding: 20px 24px;
}
.filter-panel.open { right: 0; }
.filter-panel .close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--kbr-teal-dark);
  background: #fff;
  color: var(--kbr-teal-dark);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-panel h5 {
  color: var(--kbr-navy);
  font-weight: 700;
  margin: 14px 0 6px;
  font-size: 15px;
}
.filter-panel select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 4px;
}
.filter-panel .chk-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #eef1f5;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 4px;
  margin-bottom: 12px;
  background: #fafbfc;
}
.filter-panel .chk-list[hidden] { display: none; }
.filter-panel .chk-list label {
  display: block;
  font-size: 13px;
  padding: 3px 0;
  cursor: pointer;
}
.filter-panel .chk-list input { margin-right: 6px; }
.filter-panel .chk-empty { font-size: 13px; color: #888; padding: 4px 0; }
.filter-panel .reporting-date-box { margin-bottom: 12px; }

.filter-panel .fp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px 0;
  padding-right: 40px; /* leave room for the circular close button */
}
.filter-panel .fp-header h4 {
  margin: 0;
  color: var(--kbr-navy);
  font-size: 18px;
  font-weight: 700;
}
.filter-panel .fp-reset-btn {
  background: transparent;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--kbr-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.filter-panel .fp-reset-btn:hover {
  background: #f3f5f8;
  border-color: var(--kbr-teal-dark);
  color: var(--kbr-teal-dark);
}
.filter-panel .fp-reset-btn:active { transform: translateY(1px); }

/* Collapsible multi-select combobox */
.filter-panel .fp-combo { position: relative; margin-bottom: 12px; }
.filter-panel .fp-combo-trigger {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.filter-panel .fp-combo-trigger:hover { border-color: #bfc7d1; }
.filter-panel .fp-combo-trigger:focus {
  outline: 2px solid var(--kbr-teal-dark);
  outline-offset: -1px;
}
.filter-panel .fp-combo-trigger[aria-expanded="true"] { border-color: var(--kbr-teal-dark); }
.filter-panel .fp-combo-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-panel .fp-caret { font-size: 10px; color: #666; transition: transform 0.15s; }
.filter-panel .fp-combo-trigger[aria-expanded="true"] .fp-caret { transform: rotate(180deg); }
.filter-panel .fp-combo .chk-list { margin-top: 4px; margin-bottom: 0; }

.filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1040;
}
.filter-backdrop.open { display: block; }

/* ===== Inline Filter Bar (replaces side panel on staffing pages) ===== */
.filter-bar {
  background: var(--kbr-panel);
  border-bottom: 1px solid var(--kbr-border);
}

.filter-bar-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
}
.filter-bar-summary .filter-chips { flex: 0 1 auto; }
/* Pin the Clear button to the right end of the summary row — covers both
   #filterBarClear (Staffing/Cost-EAC) and the bare .fp-reset-btn class
   used by Schedule / Change-Mgmt. */
.filter-bar-summary #filterBarClear,
.filter-bar-summary .fp-reset-btn,
.filter-bar-summary .filter-bar-clear { margin-left: auto; }

.filter-bar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--kbr-navy);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.filter-bar-toggle:hover { background: var(--kbr-navy-2); }

.filter-bar-caret {
  font-size: 10px;
  transition: transform 0.2s;
  display: inline-block;
}
.filter-bar.open .filter-bar-caret { transform: rotate(180deg); }

/* Active filter chips shown in the summary row */
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #e8f4f8;
  border: 1px solid var(--kbr-teal-dark);
  border-radius: 20px;
  font-size: 12px;
  color: var(--kbr-navy);
  font-weight: 500;
}
/* Make PAF-local chips clickable — they remove the matching filter. */
.filter-chip.pafq-chip { cursor: pointer; }
.filter-chip.pafq-chip:hover { background: #d4ebf2; }

/* Summary-row Clear button — the single reset action for the filter bar.
   Matches the body chrome so it reads as a paired control with the
   Filters toggle on the left. */
.filter-bar-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kbr-navy);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-bar-clear:hover {
  background: #f3f5f8;
  border-color: var(--kbr-teal-dark);
  color: var(--kbr-teal-dark);
}
.filter-bar-clear:active { transform: translateY(1px); }
.filter-bar-clear[hidden]{ display: none; }

/* Expanded filter row */
.filter-bar-body {
  display: none;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--kbr-border);
  background: #f8fafc;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.filter-bar.open .filter-bar-body { display: flex; }

.filter-bar-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
  align-items: flex-end;
}

/* Individual filter field: label above the control */
.fb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kbr-text-muted);
  margin: 0;
  white-space: nowrap;
}

/* Currency slicer — single-select segmented control (Cost Overview). */
.ce-ccy-seg {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--kbr-bg-subtle, #eef2f6);
  border: 1px solid var(--kbr-border);
  border-radius: 6px;
}
.ce-ccy-btn {
  min-width: 46px;
  padding: 5px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--kbr-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ce-ccy-btn:hover { color: var(--kbr-text); }
.ce-ccy-btn.active {
  background: #fff;
  color: var(--kbr-blue, #0A4B78);
  box-shadow: 0 1px 3px rgba(12,44,70,.15);
}

.fb-select {
  height: 34px;
  min-width: 130px;
  padding: 0 8px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

/* Combo dropdowns inside the filter bar */
.filter-bar .fp-combo { position: relative; margin-bottom: 0; }

.filter-bar .fp-combo-trigger {
  height: 34px;
  min-width: 130px;
  max-width: 280px;
  width: max-content;
  padding: 0 10px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
}
.filter-bar .fp-combo-trigger:hover { border-color: #bfc7d1; }
.filter-bar .fp-combo-trigger:focus {
  outline: 2px solid var(--kbr-teal-dark);
  outline-offset: -1px;
}
.filter-bar .fp-combo-trigger[aria-expanded="true"] { border-color: var(--kbr-teal-dark); }

.filter-bar .fp-combo-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-bar .fp-caret { font-size: 10px; color: #666; transition: transform 0.15s; }
.filter-bar .fp-combo-trigger[aria-expanded="true"] .fp-caret { transform: rotate(180deg); }

/* Group By widget inside a filter bar — match the visual weight of the
   sibling .fp-combo-trigger pills so all controls line up. The component
   renders .kbr-gb-field + .cols-btn; without this override the button
   inherits the smaller default .cols-btn style. */
.filter-bar .kbr-gb-field .cols-btn {
  height: 34px;
  min-width: 130px;
  max-width: 280px;
  width: max-content;
  padding: 0 10px;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  color: var(--kbr-text);
}
.filter-bar .kbr-gb-field .cols-btn:hover { border-color: #bfc7d1; }
.filter-bar .kbr-gb-field .cols-caret {
  font-size: 10px;
  color: #666;
}
.filter-bar .kbr-gb-field .kbr-gb-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-bar .kbr-gb-field .cols-dropdown { right: auto; left: 0; min-width: 220px; }

/* Dropdown list opens downward, floating above content */
.filter-bar .fp-combo .chk-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  padding: 6px 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 200;
  margin: 0;
}
.filter-bar .fp-combo .chk-list[hidden] { display: none; }
.filter-bar .fp-combo .chk-list label {
  display: block;
  font-size: 13px;
  padding: 3px 0;
  cursor: pointer;
}
.filter-bar .fp-combo .chk-list input { margin-right: 6px; }
.filter-bar .chk-empty { font-size: 13px; color: #888; padding: 4px 0; }

.filter-bar-summary .fp-reset-btn { margin-left: auto; }

/* Search input inside dropdown lists */
.filter-bar .chk-search-wrap {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 2px 0 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--kbr-border);
  z-index: 1;
}
.filter-bar .chk-search {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--kbr-border);
  border-radius: 3px;
  font-size: 12px;
  background: #f8fafc;
  color: var(--kbr-navy);
  box-sizing: border-box;
}
.filter-bar .chk-search:focus {
  outline: none;
  border-color: var(--kbr-teal-dark);
}
.filter-bar .chk-search::placeholder { color: #aaa; }

/* Apply / Clear action buttons */
.filter-bar-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}



.filter-bar .fp-reset-btn {
  height: 34px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--kbr-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--kbr-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s, color 0.15s;
}
.filter-bar .fp-reset-btn:hover {
  background: #f3f5f8;
  border-color: var(--kbr-teal-dark);
  color: var(--kbr-teal-dark);
}

/* Chart canvas containers */
.chart-box {
  position: relative;
  height: 240px;
  width: 100%;
}
.chart-box.tall { height: 310px; }
.chart-box.short { height: 190px; }
/* Cost-Type panels sit next to a stacked pair of Location + WBS1 panels on
   the Staffing page, so they need to be tall enough to span both combined. */
.chart-box.x-tall { height: 560px; }

/* Skeleton placeholders — shown before the first data render.
   Added on .card-panel or .kpi-strip via class `is-loading`. */
@keyframes kbr-skel {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.is-loading .value,
.is-loading .chart-box {
  position: relative;
  color: transparent !important;
}
.is-loading .value::after,
.is-loading .chart-box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eef1f5 0%, #dfe5ee 50%, #eef1f5 100%);
  background-size: 200% 100%;
  animation: kbr-skel 1.2s linear infinite;
}
.is-loading .chart-box canvas { opacity: 0; }

/* Fetch-failure banner — injected by Common.showError when a page's data load
   rejects. Sits at the top of the page body and offers a one-click retry that
   reloads the page (so every fetch on the page re-runs). */
.kbr-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
.kbr-error-banner .err-icon { font-size: 16px; line-height: 1; color: #b91c1c; }
.kbr-error-banner .err-msg { flex: 1; }
.kbr-error-banner .err-retry {
  background: #b91c1c;
  color: #fff;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.kbr-error-banner .err-retry:hover { background: #991b1b; }
.kbr-error-banner .err-close {
  background: transparent;
  border: none;
  color: #991b1b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* Empty state — shown by ChartsLib when a chart's data is entirely zero/empty
   (e.g. user filtered by a value with no matching rows). Replaces the empty
   axes/labels that Chart.js would otherwise render. */
.chart-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #94a3b8;
  font-style: italic;
  font-size: 13px;
  pointer-events: none;
}

/* Utility */
.text-muted-sm { color: var(--kbr-text-muted); font-size: 12px; }
.text-right { text-align: right; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 14px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.gap-2 { gap: 12px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Responsive */
@media (max-width: 1200px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .hub-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================
   Shared confirmation modal (Common.confirm) — used by CSV
   download buttons across modules.
   =========================================================== */
.rh-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 3000;
}
.rh-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3001;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
  padding: 20px 22px 18px;
}
.rh-confirm-title { font-size: 15px; font-weight: 700; color: var(--kbr-navy); margin-bottom: 8px; }
.rh-confirm-msg   { font-size: 13px; color: var(--kbr-text); margin-bottom: 18px; }
.rh-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.rh-confirm-btn {
  border-radius: 18px;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rh-confirm-cancel { background: #fff; border: 1px solid var(--kbr-border); color: var(--kbr-text); }
.rh-confirm-cancel:hover { background: #f8fafc; }
.rh-confirm-ok { background: var(--kbr-navy); border: 1px solid var(--kbr-navy); color: #fff; }
.rh-confirm-ok:hover { filter: brightness(1.1); }