/* ============================================================================
   Schedule Report module
   ============================================================================ */

/* ---- Schedule Landing ----------------------------------------------------- */

/* Landing table mirrors the shared .portfolio-table design (main.css) exactly;
   only the schedule-specific columns (status dots, info icon, pct labels) are
   layered on top. */
.schedule-portfolio-wrap {
  overflow: auto;
  max-height: calc(100vh - 200px);
}
.schedule-portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  /* Auto layout sized every column from whatever rows survived the filters, so
     picking one portfolio narrowed Portfolio Name and shifted the whole grid.
     Fixed layout takes its geometry from the <colgroup> instead, which does not
     depend on the data. The four on-time columns carry no width and split the
     remainder equally — still content-independent. */
  table-layout: fixed;
}
.schedule-portfolio-table .col-name { width: 20%; }
.schedule-portfolio-table .col-date { width: 10%; }
.schedule-portfolio-table .col-num  { width: 6%; }
.schedule-portfolio-table .col-pct  { width: 9%; }
.schedule-portfolio-table .col-info { width: 30px; }
.schedule-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;
}
.schedule-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;
}
.schedule-portfolio-table thead .col-row th.status-col {
  font-size: 10px;
  line-height: 1.25;
  font-weight: 500;
  /* These carry their own <br>; under fixed layout nowrap would spill the
     second line into the neighbouring column on a narrow viewport. */
  white-space: normal;
}
.schedule-portfolio-table thead .col-row th.info-col { width: 30px; }
.schedule-portfolio-table tbody tr:hover td { background: #eef4fa; cursor: pointer; }
.schedule-portfolio-table tbody tr.selected td { background: #dff1f5; }
.schedule-portfolio-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
  /* Columns no longer stretch to fit, so a long portfolio name has to be cut
     rather than run under the next cell. Full text stays on the cell's title. */
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-portfolio-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.schedule-portfolio-table tbody td.portfolio-cell { color: #1c3a5e; cursor: pointer; font-weight: 500; }
.schedule-portfolio-table tbody td.portfolio-cell:hover { text-decoration: underline; }
.schedule-portfolio-table tbody td.status-cell { text-align: center; }

/* Landing filter combos hold a fixed footprint. SearchableSelect only copies the
   <select>'s min-width onto its trigger, and the trigger is an 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 #schLandingBusiness + .ss-combo,
.landing-filter-row #schLandingClient + .ss-combo { width: 150px; }
.landing-filter-row .ss-combo-value { min-width: 0; }

/* "NN% + dot" cell used in the four Early/On-Time landing columns.
   Number on the left, traffic-light dot on the right, both centered. */
.pct-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Status traffic-light dots — green/amber/red/gray.
   Used by Landing portfolio rows AND the Details traffic-light column. */
.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
}
.status-dot.green { background: #4caf76; }
.status-dot.amber { background: #e0a44a; }
.status-dot.red   { background: #d35a5e; }
.status-dot.gray  { background: #cbd5e1; }

/* ---- Schedule Report shared ---------------------------------------------- */
/* Module-local tokens for the muted Power-BI palette so every page in the
   Schedule Report (overview / plan / details) pulls from the same colors. */
:root {
  --sched-bg:           var(--kbr-bg);
  --sched-panel:        #ffffff;
  --sched-border:       var(--kbr-border);
  --sched-text:         var(--kbr-text);
  --sched-muted:        var(--kbr-text-muted);
  --sched-link:         var(--kbr-teal-dark);
  --sched-link-soft:    var(--kbr-teal);
  --sched-accent:       var(--kbr-navy);
  --sched-row-stripe:   #f8fafc;
  --sched-row-hover:    #eef4fa;
  /* Activity-status palette — MUST stay in step with STATUS_COLORS in
     js/schedule/overview.js, which paints the same four statuses in the Overview
     donuts. A status that changes colour between the Overview and the Plan gantt
     reads as a different status. */
  --sched-status-ns:    #38bdf8;   /* sky-400     */
  --sched-status-ip:    #10b981;   /* emerald-500 */
  --sched-status-dl:    #f59e0b;   /* amber-500   */
  --sched-status-cp:    #4f46e5;   /* indigo-600  */
}

.schedule-report-body { background: var(--sched-bg); }

/* Remove shell padding so toolbar and filter bar span full-width, matching the staffing layout. */
.schedule-shell { padding: 0; }

.schedule-body { padding-top: 4px; display: flex; flex-direction: column; }

/* Footer holds only Portfolio + Reporting Date. main.css ends the row with a
   zero-width ::after carrying margin-left:auto, which splits the slack either
   side of Reporting Date and parks it just right of the Portfolio label rather
   than anywhere definite. Drop that stand-in and send the last item hard right,
   the same treatment Cost's .ce-footer already uses. */
.schedule-shell .page-footer::after { content: none; }
.schedule-shell .page-footer .footer-item:last-child { margin-left: auto; }

/* Cost's C-14/C-15 treatment applied to Schedule. The footer sits in normal
   flow, so on a viewport shorter than the content it falls below the fold and
   Portfolio / Reporting Date can only be read by scrolling. 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. Works
   because .page-shell is a flex column with the footer as its last child and no
   ancestor clips overflow; flex-shrink guards against the row being squeezed
   when the content exactly fills the shell's min-height.
   Landing has no footer at all — the report name it used to carry is already in
   the header, and its table wrapper caps at 100vh - 200px, so the page ends
   where the table does. */
.schedule-shell .page-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-shrink: 0;
}

/* ---- Schedule info bar (mirrors staffing-info-bar) ----------------------- */
.schedule-info-bar {
  background: transparent;
  padding: 16px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  font-size: 13px;
}
.schedule-info-bar .sib-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.schedule-info-bar .sib-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: #6b7280;
  font-weight: 600;
}
.schedule-info-bar .sib-value {
  color: var(--kbr-navy);
  font-weight: 700;
}

/* Critical Activity row — inline label + select, no card chrome. The
   Power BI mockup shows this as a thin top-right filter, not a card. */
.critical-float-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sched-link);
  margin: 0 0 10px;
}
.critical-float-row label {
  font-weight: 500;
  color: var(--sched-link-soft);
}
.critical-float-row select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--sched-border);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--sched-text);
  min-width: 64px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.critical-float-row select:focus {
  outline: none;
  border-color: var(--sched-link-soft);
  box-shadow: 0 0 0 3px rgba(42, 108, 176, 0.18);
}



/* Donut pair panel — soft indigo wash grouping the two related donuts,
   ties the pair to the brighter indigo/blue palette used in the donuts. */
.schedule-pair-panel {
  background: linear-gradient(135deg, #eef6fa 0%, #f0f9ff 100%);
  border: 1px solid var(--sched-border);
  border-radius: 12px;
  padding: 12px 10px;
}
.schedule-donut-card {
  background: var(--sched-panel);
  border-radius: 10px;
  padding: 10px 8px 6px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.schedule-donut-card h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--sched-text);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.donut-box {
  height: 260px;
  position: relative;
  flex: 0 0 260px;
}
.card-footnote {
  text-align: left;
  font-size: 10px;
  color: var(--sched-muted);
  margin-top: 2px;
  padding-left: 4px;
}

/* Plan-vs-Actual combo chart panel */
.schedule-body .card-panel h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--sched-text);
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: -0.005em;
}
.schedule-body .card-panel { padding: 12px 14px 10px; }
.schedule-body .card-panel .chart-box.tall { height: 300px; }

/* ---- Schedule Plan / Details sub-tabs ------------------------------------ */
.schedule-subtab-nav {
  display: inline-flex;
  gap: 22px;
  padding-bottom: 4px;
}
.schedule-subtab-nav .subtab {
  font-size: 13px;
  color: var(--sched-muted);
  cursor: pointer;
  font-weight: 500;
  padding: 4px 2px 6px;
  transition: color 150ms ease;
  letter-spacing: 0.01em;
}
.schedule-subtab-nav .subtab:hover { color: var(--sched-link); }
.schedule-subtab-nav .subtab.active {
  color: var(--sched-link);
  border-bottom: 2px solid var(--sched-link);
  font-weight: 600;
}


/* ---- Gantt panel -------------------------------------------------------- */
.gantt-panel {
  padding: 0;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Row limit + scroll INSIDE the Gantt. The panes below already declare
     overflow:auto and plan.js keeps their scrollTop in sync, but .schedule-body is
     a height-less flex column, so `flex: 1 1 auto` had nothing to flex within: the
     panel grew with the row count and the PAGE scrolled instead of the graph.
     Bounding the panel itself is enough to make the existing overflow engage, and
     it stays scoped to this page — .gantt-panel exists only on Schedule Plan. */
  max-height: calc(100vh - 230px);
  min-height: 420px;
}

.gantt-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.gantt-left {
  flex: 0 0 260px;
  border-right: 1px solid var(--sched-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  /* NOT overflow:hidden — the Activity combo now lives in the header below and its
     dropdown is absolutely positioned, so clipping here would cut it off. Safe to
     relax: .gantt-activity-list already owns the vertical scroll, and .gantt-row-top
     already clips its own text (overflow:hidden + ellipsis). .gantt-body and
     .gantt-panel still clip further out, which is what keeps the dropdown inside
     the card. */
  overflow: visible;
}
.gantt-left-header {
  height: 37px;
  box-sizing: border-box;
  background: #fff;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--sched-link);
  border-bottom: 1px solid var(--sched-border);
  flex-shrink: 0;
}
.gantt-left-header-title { flex-shrink: 0; }
/* Pushed to the right edge of the 260px column, and sized down from the toolbar
   variant so it clears the 37px header. */
.gantt-header-combo { margin-left: auto; min-width: 0; }
.gantt-header-combo .fp-combo-trigger {
  height: 26px;
  min-width: 92px;
  max-width: 132px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
}
.gantt-activity-filter {
  padding: 6px 8px;
  border-bottom: 1px solid var(--sched-border);
  background: #f8fafc;
}
.gantt-activity-filter select {
  width: 100%;
  height: 28px;
  background: #fff;
  color: var(--sched-text);
  border: 1px solid var(--sched-border);
  padding: 0 6px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.gantt-activity-filter select:focus {
  outline: none;
  border-color: var(--sched-link-soft);
}

/* ---- Searchable activity combo (Plan page left panel) ------------------ */
.gaf-combo { position: relative; }
.gaf-trigger {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--sched-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--sched-text);
  cursor: pointer;
}
.gaf-trigger[aria-expanded="true"] { border-color: var(--sched-link-soft); }
.gaf-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaf-caret { font-size: 10px; color: #666; flex-shrink: 0; transition: transform 0.15s; }
.gaf-trigger[aria-expanded="true"] .gaf-caret { transform: rotate(180deg); }

.gaf-dropdown {
  position: fixed;
  background: #fff;
  border: 1px solid var(--sched-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
  z-index: 9990;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gaf-dropdown[hidden] { display: none; }
.gaf-search-wrap {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.gaf-search {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--sched-border);
  border-radius: 3px;
  font-size: 12px;
  background: #f8fafc;
  box-sizing: border-box;
}
.gaf-search:focus { outline: none; border-color: var(--sched-link-soft); }
.gaf-list { overflow-y: auto; flex: 1; }
.gaf-item {
  padding: 5px 10px;
  font-size: 12px;
  color: var(--sched-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gaf-item:hover { background: var(--sched-row-hover); }
.gaf-item.selected { background: #eff6ff; color: var(--sched-link); font-weight: 600; }

/* ---- Activity multiselect combo (details + plan pages) ----------------- */
.schedule-act-combo { position: relative; }
.schedule-act-combo .fp-combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 34px;
  min-width: 130px;
  max-width: 280px;
  width: max-content;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
  color: var(--sched-text);
  cursor: pointer;
  text-align: left;
}
.schedule-act-combo .fp-combo-trigger:hover { border-color: #bfc7d1; }
.schedule-act-combo .fp-combo-trigger[aria-expanded="true"] { border-color: var(--kbr-teal-dark, #1a7fa3); }
.schedule-act-combo .fp-combo-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-act-combo .fp-caret { font-size: 10px; color: #666; flex-shrink: 0; transition: transform 0.15s; }
.schedule-act-combo .fp-combo-trigger[aria-expanded="true"] .fp-caret { transform: rotate(180deg); }
.schedule-act-combo .chk-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--sched-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
  z-index: 9990;
  padding: 4px 0;
}
.schedule-act-combo .chk-list[hidden] { display: none; }
.schedule-act-combo .chk-search-wrap { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
.schedule-act-combo .chk-search {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--sched-border);
  border-radius: 3px;
  font-size: 12px;
  background: #f8fafc;
  box-sizing: border-box;
}
.schedule-act-combo .chk-search:focus { outline: none; border-color: var(--sched-link-soft); }
.schedule-act-combo .chk-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.schedule-act-combo .chk-list label:hover { background: var(--sched-row-hover); }
.schedule-act-combo .chk-list input[type=checkbox] { flex-shrink: 0; margin: 0; }

/* ---- Details page inline filter bar ------------------------------------ */
.details-filter-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sched-border);
  background: #f8fafc;
  flex-wrap: wrap;
}
.dfb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dfb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sched-muted);
  white-space: nowrap;
}
/* Variance filters sit above the column each one filters, so they stack the label
   over the select and match the column width instead of the 160px filter-bar size. */
.details-filter-bar .dfb-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.details-filter-bar .dfb-stack + .dfb-stack { margin-left: -12px; }
.details-filter-bar .dfb-stack .dfb-select { min-width: 150px; }
.dfb-select {
  height: 30px;
  min-width: 160px;
  padding: 0 8px;
  border: 1px solid var(--sched-border);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  color: var(--sched-text);
  cursor: pointer;
}
.dfb-select:focus {
  outline: none;
  border-color: var(--sched-link-soft);
}
.gantt-activity-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  /* One visible scrollbar for the pair — .gantt-right owns it, and plan.js mirrors
     its scrollTop onto this pane. The bar is hidden, NOT the overflow: the wheel
     still scrolls over the activity list and drags the timeline with it. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge */
}
.gantt-activity-list::-webkit-scrollbar { width: 0; height: 0; }
.gantt-row-left {
  height: 44px;
  border-bottom: 1px solid var(--kbr-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}
.gantt-row-top {
  font-size: 12px;
  color: var(--sched-text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.gantt-row-top .activity-id { color: var(--sched-text); font-weight: 500; flex-shrink: 0; }
.gantt-row-top .activity-name { color: var(--sched-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.gantt-row-sub {
  font-size: 11px;
  color: var(--sched-muted);
  font-style: italic;
  padding-left: 18px;
}
.gantt-empty { padding: 24px; text-align: center; color: var(--sched-muted); }
.gantt-right {
  flex: 1 1 auto;
  min-height: 0;
  /* The timeline can now be far wider than the panel (plan.js pins a per-month
     pixel floor on long schedules). Without min-width:0 this flex item refuses to
     shrink below its content and the whole PAGE scrolls sideways instead of the
     timeline scrolling inside its own panel. */
  min-width: 0;
  position: relative;
  background: #fff;
  overflow: auto;
}
.gantt-month-axis {
  height: 37px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--sched-border);
  background: #fff;
  font-size: 11px;
  color: var(--sched-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}
.gantt-month-cell {
  flex: 0 0 auto;
  padding: 0 4px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--kbr-border);
}

/* No tail pad: it left a block of empty rows below the last activity, and since
   plan.js mirrors the right pane's scroll extent onto the activity list the gap
   showed in both columns. syncScrollExtents() still adds whatever the horizontal
   scrollbar costs so the two panes stay aligned. */
.gantt-rows .gantt-row {
  position: relative;
  height: 44px;
  border-bottom: 1px solid var(--kbr-border);
}
.gantt-bar {
  position: absolute;
  top: 16px;
  height: 12px;
  border-radius: 6px;
  min-width: 8px;
}
.gantt-bar.not-started { background: var(--sched-status-ns); }
.gantt-bar.in-progress { background: var(--sched-status-ip); }
.gantt-bar.delayed    { background: var(--sched-status-dl); }
.gantt-bar.completed  { background: var(--sched-status-cp); }

.gantt-legend {
  flex-shrink: 0;
  display: flex;
  gap: 22px;
  justify-content: center;
  padding: 10px;
  border-top: 1px solid var(--sched-border);
  background: #fff;
  font-size: 12px;
  color: var(--sched-text);
}
.gantt-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legend .dot,
.schedule-details-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.gantt-legend .dot.blue      { background: var(--sched-status-ns); }
.gantt-legend .dot.green     { background: var(--sched-status-ip); }
.gantt-legend .dot.amber     { background: var(--sched-status-dl); }
.gantt-legend .dot.dark-blue { background: var(--sched-status-cp); }
.schedule-details-legend .dot.green { background: #4caf76; }
.schedule-details-legend .dot.amber { background: #e0a44a; }
.schedule-details-legend .dot.red   { background: #d35a5e; }
.schedule-details-legend .dot.gray  { background: #cbd5e1; }

/* ---- Gantt bar hover tooltip -------------------------------------------- */
.gantt-bar-tip {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  pointer-events: none;
  min-width: 180px;
  max-width: 280px;
}
.gantt-bar-tip[hidden] { display: none; }
.gantt-bar-tip .gbt-id {
  font-weight: 700;
  font-size: 13px;
  color: var(--sched-link);
  margin-bottom: 2px;
}
.gantt-bar-tip .gbt-name {
  color: var(--sched-muted);
  font-size: 11px;
  margin-bottom: 8px;
}
.gantt-bar-tip .gbt-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  border-top: 1px solid #f1f5f9;
}
.gantt-bar-tip .gbt-lbl {
  color: var(--sched-muted);
  font-size: 11px;
  min-width: 64px;
  flex-shrink: 0;
}

/* Details page: table wrap gets a fixed viewport-relative height so the
   pager always sits below the table and the page doesn't scroll. */
.schedule-body .data-table-paged {
  height: calc(100vh - 330px);
}

/* Empty-state row: just enough height for the text, no forced expansion. */
.schedule-details-table .no-data-row td {
  vertical-align: middle;
  padding: 24px 10px;
  border-bottom: none;
}

/* ---- Schedule Details table -------------------------------------------- */
.schedule-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.schedule-details-table thead {
  color: var(--kbr-text);
  position: sticky;
  top: 0;
  z-index: 2;
}
.schedule-details-table thead th {
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  border: 1px solid var(--kbr-border);
  letter-spacing: 0.01em;
  background: #f0f3f7;
}
.schedule-details-table thead .col-row th { font-size: 11px; }
.schedule-details-table thead select {
  width: 100%;
  background: #fff;
  color: var(--kbr-text);
  border: 1px solid var(--kbr-border);
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 3px;
}
.schedule-details-table thead select option { color: #0f172a; background: #fff; }
.schedule-details-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--kbr-border);
  background: #fff;
  color: var(--sched-text);
}
.schedule-details-table tbody tr:nth-child(even) td { background: #f8fafc; }
.schedule-details-table tbody tr:hover td { background: #eef4fa; }
.schedule-details-table tbody td:nth-child(8),
.schedule-details-table tbody td:nth-child(9) { text-align: center; }

/* Numeric day-variance cell — number on the left, traffic-light dot on the
   right, both centered inside the column. */
.variance-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}

.schedule-details-legend {
  display: flex;
  gap: 22px;
  justify-content: flex-end;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--sched-text);
}
.schedule-details-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Total Float control (Overview: right-aligned above the Critical
   Activities pair). Carries .filter-bar purely to inherit the shared
   .fp-combo pill/dropdown styles — the bar's own chrome is stripped. ---- */
.schedule-float-control.filter-bar {
  background: transparent;
  border-bottom: none;
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 10px 0 -2px;
}
/* Label sits beside the dropdown, not stacked above it — .fb-field defaults to
   flex-direction: column for the bar's stacked fields, so override it here. */
.schedule-float-control .fb-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.schedule-float-control .fb-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #1e2a38;
  white-space: nowrap;
}
/* Plan / Details variant: sits inline in the sub-tab row, immediately left of the
   date pickers, so it drops the Overview version's own row spacing. */
.schedule-float-control.schedule-float-inline {
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}
/* Must out-specify `.schedule-float-control.filter-bar { display:flex }` above,
   which would otherwise beat the plain [hidden] attribute and keep it visible. */
.schedule-float-control.filter-bar[hidden] { display: none; }

/* Closing paren hugs the dropdown instead of sitting a full gap away. */
.schedule-float-control .fb-label-suffix { margin-left: -4px; }
.schedule-float-control .fp-combo-trigger { min-width: 84px; }
/* Anchor the panel to the control's right edge so it can't overflow the page. */
.schedule-float-control .fp-combo .chk-list { left: auto; right: 0; }

/* ---- Total Float single-select dropdown items ------------------------- */
.sfp-single-item {
  padding: 5px 10px;
  font-size: 13px;
  color: var(--sched-text);
  cursor: pointer;
  white-space: nowrap;
}
.sfp-single-item:hover { background: var(--sched-row-hover); }
.sfp-single-item.sfp-single-selected {
  background: #eff6ff;
  color: var(--sched-link);
  font-weight: 600;
}

/* ---- Schedule filter bar — fb-field label style ----------------------- */
/* The inline filter bar uses main.css .filter-bar / .fp-combo classes.
   Only schedule-specific overrides go here. */
.schedule-filter-bar .fb-label {
  font-size: 11px;
  font-weight: 600;
  color: #1e2a38;
  margin-bottom: 3px;
  display: block;
}

/* ---- Schedule Report responsive breakpoints ----------------------------- */

/* Stack donut cards vertically inside their pair-panel on narrow screens.
   At md+ the pair stays side-by-side, at <md each donut takes full width. */
@media (max-width: 991px) {
  .schedule-pair-panel .col-6 { flex: 0 0 100%; max-width: 100%; }
  .donut-box { height: 250px; }
}

/* Tablet: tighten spacing and let toolbars wrap. */
@media (max-width: 768px) {
  .schedule-subtab-nav { gap: 14px; flex-wrap: wrap; }

  .schedule-body .card-panel .chart-box.tall { height: 240px; }
  .donut-box { height: 230px; }

  .schedule-portfolio-table { font-size: 11px; }
  .schedule-portfolio-table tbody td { padding: 6px 6px; }

  /* Gantt: shrink left column and rows so the timeline gets more room. */
  .gantt-left { flex: 0 0 200px; }
  .gantt-rows .gantt-row { height: 38px; }
  .gantt-bar { top: 13px; height: 12px; }
}

/* Phone: stack donut pairs and combo charts in a single column. */
@media (max-width: 575px) {
  .donut-box { height: 210px; }
}

/* ---- Landing info icon + conditional formatting modal ------------------- */
#landingInfoIcon {
  cursor: pointer;
  color: #64748b;
  font-size: 14px;
}
#landingInfoIcon:hover { color: var(--kbr-teal-dark); }

.lit-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  z-index: 9998;
}
.lit-modal-backdrop[hidden] { display: none; }

.lit-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #fff;
  border: 1px solid #dbe2ee;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
  min-width: 380px;
  max-width: 480px;
  width: 90vw;
}
.lit-modal[hidden] { display: none; }

.lit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #e2e8f0;
}
.lit-modal-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.lit-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 2px;
}
.lit-modal-close:hover { color: #0f172a; }

.lit-modal-body { padding: 14px 16px; }

.lit-section { margin-bottom: 14px; }
.lit-section:last-child { margin-bottom: 0; }

.lit-heading {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.lit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lit-table thead tr {
  background: #1d3557;
  color: #fff;
}
.lit-table thead th {
  padding: 5px 10px;
  font-weight: 600;
  text-align: left;
  border: 1px solid #2a4a72;
}
.lit-table tbody td {
  padding: 5px 10px;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  background: #fff;
}