@layer features {

/* ── Delivery Plan (Gantt-style timeline) ──────────────────────────── */
.qc-dp { margin-top: 16px; --qc-dp-label-w: 440px; }
.qc-dp.hidden { display: none; }
.qc-dp-loading, .qc-dp-error { padding: 14px 16px; font-size: var(--font-size-sm); color: var(--color-text-secondary); background: var(--color-bg-surface-alt); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.qc-dp-error { color: var(--color-danger-text); }
.qc-dp-panel {
  padding: 16px 18px;
  margin: 20px 0;
  background: var(--color-bg-surface);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}
.qc-dp-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 0; }
/* (Title styling = combined rule with .qc-cap-team-summary-title.)
 * Legacy `.qc-dp-panel-hint` was a flex-grow sibling of the title;
 * superseded by `.qc-cap-section-hint` nested under the headline. */
.qc-dp-panel-hint { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.qc-dp-panel-actions { display: flex; gap: 6px; }
.qc-dp-toggle-all { padding: 4px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); cursor: pointer; box-shadow: none; }
.qc-dp-toggle-all:hover { background: var(--color-border-subtle); }
.qc-dp-toggle-all:disabled { color: var(--color-text-muted); cursor: default; background: var(--color-bg-surface-alt); }
.qc-dp-toggle-all:disabled:hover { background: var(--color-bg-surface-alt); }
.qc-dp-panel-footer { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 12px; padding: 8px 10px; background: var(--color-bg-surface-alt); border-radius: 6px; line-height: 1.5; }
.qc-dp-panel-footer code { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); padding: 1px 4px; border-radius: 3px; font-size: 11px; }

.qc-dp-grid { position: relative; }
/* MUI X Event Timeline-style rows: hairline dividers in --chart-grid,
 * cells respond to hover with MUI's standard 4%-black overlay. */
.qc-dp-row { display: flex; align-items: stretch; min-height: 38px; border-bottom: 1px solid var(--chart-grid); }
/* MUI tree-view hover: lavender wash on the whole row — same hue family
 * as the brand accent so the hover reads as "selected/focused tree node". */
.qc-dp-row:hover { background: rgba(63, 91, 255, 0.06); }
/* Header row keeps a faint alt-surface tint so the column-day numbers
 * read as "header" not "data row" — but all DATA rows below are flat
 * white per user request (Image #171). Only the brand-blue current-week
 * column overlay + bar fills carry color. */
.qc-dp-row-header { background: var(--color-bg-surface-alt); border-bottom: 1px solid var(--chart-grid); min-height: 30px; }
.qc-dp-row-header:hover { background: var(--color-bg-surface-alt); }
.qc-dp-row-project { background: transparent; cursor: pointer; }
.qc-dp-row-project:hover { background: rgba(63, 91, 255, 0.06); }
/* Project rows nest one level below their layer-0 group, so indent the
   label past the group header's 10px so the hierarchy is visible. */
.qc-dp-row-project .qc-dp-row-label { padding-left: 28px; }
/* Layer-0 group row (BAU / Automation / Test Excellence) — visually heavier than projects. */
.qc-dp-row-group { background: transparent; cursor: pointer; border-top: 1px solid var(--color-border-default); }
.qc-dp-row-group:hover { background: rgba(63, 91, 255, 0.06); }
.qc-dp-row-label-group { font-weight: var(--font-weight-bold); }
.qc-dp-group-name { font-size: var(--font-size-sm); letter-spacing: 0.02em; }

.qc-dp-row-label {
  flex: 0 0 var(--qc-dp-label-w, 220px);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-family-sans);
  font-size: 14px;                              /* MUI body2 — larger label for readability */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15px;
  color: rgba(0, 0, 0, 0.87);
  border-right: 1px solid var(--chart-grid);
  overflow: hidden; white-space: nowrap;
}
.qc-dp-row-label-head { font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.qc-dp-row-label-name { font-weight: var(--font-weight-semibold); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.qc-dp-row-label-count { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
/* Indent cascade below the layer-0 group (10px) → project (28px):
   status / automation row → 50px, parent (Epic) → 80px, item → 116px.
   Bumping every sub-level by ~20px keeps the same relative gap that
   existed before the BAU/Automation/TestEx layer was added. */
.qc-dp-row-label-sub { padding-left: 50px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; }
/* Children rows under an Epic: lighter than the parent to make the
   hierarchy visible (parent stays semibold/primary above). */
.qc-dp-row-label-grandchild { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
/* MUI X SimpleTreeView expand toggle — borderless circular icon button,
 * slim outlined chevron that rotates 90° via [aria-expanded="true"].
 * Hover gets MUI's standard 6%-black overlay (the "tree-item icon ring"). */
.qc-dp-expand {
  width: 24px; height: 24px;
  min-width: 24px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  box-shadow: none;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-dp-expand:hover { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.87); box-shadow: none; }
.qc-dp-expand:focus-visible { outline: 2px solid rgba(63, 91, 255, 0.5); outline-offset: 1px; }
.qc-dp-expand-icon {
  width: 16px; height: 16px;
  display: block;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-dp-expand[aria-expanded="true"] .qc-dp-expand-icon { transform: rotate(90deg); }

.qc-dp-row-timeline { position: relative; flex: 1 1 auto; min-width: 0; }
.qc-dp-row-timeline-head { background: var(--color-bg-surface-alt); }
/* Month band — MUI X uses regular-weight axis labels (not all-caps).
 * Matches `--chart-text` for color, MUI body2 size. */
.qc-dp-month {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-sans);
  font-size: 12px; font-weight: var(--font-weight-medium);
  color: var(--chart-text);
  letter-spacing: 0.15px;
  border-right: 1px solid var(--chart-grid);
  box-sizing: border-box;
}
.qc-dp-month:last-child { border-right: none; }

/* Today indicator — MUI X solid 2px primary line + small filled pill. */
.qc-dp-today {
  position: absolute; top: 2px;
  padding: 2px 8px;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15px;
  border-radius: 12px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.qc-dp-today-line {
  position: absolute; top: 30px; bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(63, 91, 255, 0.45);
  pointer-events: none;
  z-index: 1;
}

/* MUI X event block pattern — tinted background + solid colored left
 * stripe + dark text in the same hue + 1px hairline outline (same hue
 * @ ~30% alpha) so the bar's right/top/bottom edges stay crisp even
 * when the surrounding row carries a weekend tint or hover overlay. */
.qc-dp-bar {
  position: absolute; top: 5px; bottom: 5px;
  display: flex; align-items: center;
  padding: 0 8px 0 12px;             /* extra left padding makes room for the 4px accent stripe */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.15px;
  border-radius: 4px;
  overflow: hidden; white-space: nowrap;
  cursor: help;
  border: 1px solid transparent;
  border-left-width: 4px;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-dp-bar:hover { filter: brightness(0.94); }
/* Sprint bar (row 0) — MUI primary tint. */
.qc-dp-bar-sprint {
  background: rgba(63, 91, 255, 0.18);
  border-color: rgba(63, 91, 255, 0.28);
  border-left-color: var(--color-accent);
  color: var(--c-brand-800);
}
/* (legacy `.qc-dp-bar-epic` gradient removed — Delivery Plan now uses a
   flat, ADO-style bar styled further below.) */
/* Child item rows (descendants of an Epic, sitting in window iterations).
   Rendered with a narrower, lighter bar so they read as detail under the
   parent Epic, not as another top-level item. */
.qc-dp-row-child { background: transparent; }
.qc-dp-row-label-child { padding-left: 56px; font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; gap: 4px; }
.qc-dp-child-arrow { color: var(--color-text-muted); margin-right: 2px; }
.qc-dp-child-title { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.qc-dp-child-type { display: inline-flex; align-items: center; }
/* Small iteration-name chip on Delivery Plan leaf rows (Resources Planning).
   Leaves no longer have a Gantt bar — this chip is the only iteration hint. */
.qc-dp-child-sprint {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* Generic child-item bar (no specific status bucket). MUI warning tone. */
.qc-dp-bar-child {
  top: 6px; bottom: 6px;
  background: rgba(237, 108, 2, 0.20);          /* MUI warning @ 20% */
  border-color: rgba(237, 108, 2, 0.32);
  border-left-color: #ed6c02;                   /* MUI warning.main */
  color: #b04a02;                               /* MUI warning.dark */
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
}
/* Epic row gets a leading toggle + crown so the label visually anchors
   its expanded children below it. */
.qc-dp-epic-crown { margin-right: 2px; }
.qc-dp-expand-placeholder { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; }
.qc-dp-bar-text   { overflow: hidden; text-overflow: ellipsis; }

/* Compact ADO id link used on Epic + child rows so users can jump to the
   work item in a new tab. Mirrors .wi-id-link visually but tighter. */
.qc-dp-id-link { font-family: var(--font-family-mono); font-size: 11px; }
.qc-dp-id-link a { color: var(--color-text-link); text-decoration: none; }
.qc-dp-id-link a:hover { text-decoration: underline; }

/* State badge for child rows. Type badge reuses .work-item-type-badge.
   Colors mirror the bucket-pill / pie palette used on the Capacity page. */
.qc-dp-badge { display: inline-block; padding: 1px 6px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: 3px; line-height: 1.4; white-space: nowrap; }
.qc-dp-badge-state { background: var(--color-bg-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); text-transform: uppercase; letter-spacing: 0.03em; }
/* Per-item state chip on child rows (under an Epic) is flattened so it
   reads alongside the work-item title rather than competing with the
   group-header chip (OPEN / IN PROGRESS / DONE) which stays uppercase. */
.qc-dp-row-label-grandchild .qc-dp-badge-state { font-weight: var(--font-weight-regular); text-transform: none; letter-spacing: 0; }
.qc-dp-badge-state-closed     { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--c-success-500); }
.qc-dp-badge-state-inprogress { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--c-warning-500); }
.qc-dp-badge-state-open       { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--c-danger-500); }

/* Timeline bar colors for child items, by state group. The default
   .qc-dp-bar-child is overridden so the bar visually matches its state
   badge in the label column. In Progress uses yellow on the delivery
   plan (Jira-style) — distinct from the Capacity Monitoring blue. */
/* Status-bucketed item bars — tinted-bg @ 20% + same-hue outline at 30% +
 * solid colored left stripe + dark text. The outline keeps the bar
 * boundary crisp against weekend overlays / hover backgrounds that
 * share the same hue family. */
.qc-dp-bar-child-closed {
  background: rgba(46, 125, 50, 0.20);          /* MUI success @ 20% */
  border-color: rgba(46, 125, 50, 0.32);        /* same hue, hairline edge */
  border-left-color: #2e7d32;                   /* MUI success.main */
  color: #1b5e20;                               /* MUI success.dark */
}
.qc-dp-bar-child-inprogress {
  /* MUI yellow.700 (#f9a825) — matches the IN PROGRESS chip's
   * yellow-tinted look, distinct from the orange "generic warning"
   * fallback variant below. Bumped alpha because yellow has lower
   * perceptual weight than blue/orange at the same opacity. */
  background: rgba(249, 168, 37, 0.22);
  border-color: rgba(249, 168, 37, 0.40);
  border-left-color: #f9a825;
  color: #6a4500;                                /* dark mustard for AA contrast on yellow tint */
}
.qc-dp-bar-child-open {
  background: rgba(211, 47, 47, 0.20);
  border-color: rgba(211, 47, 47, 0.32);
  border-left-color: #d32f2f;
  color: #b71c1c;
}
.qc-dp-bar-child-other {
  background: rgba(0, 0, 0, 0.10);              /* slightly darker grey wash for visibility */
  border-color: rgba(0, 0, 0, 0.18);
  border-left-color: #616161;
  color: #424242;
}

.qc-dp-empty-note { display: inline-block; padding: 4px 10px; font-size: var(--font-size-xs); color: var(--color-text-secondary); font-style: italic; }

/* ── Delivery Monitoring — daily-axis variant ─────────────────────────
   Reuses the Delivery Plan grid layout but swaps month headers for a
   daily calendar. Weekend columns are tinted; Mondays get a slightly
   stronger left border to delimit weeks. */
.qc-dp-grid-daily .qc-dp-row-timeline { background-image: linear-gradient(to right, transparent calc(100% - 1px), #f4f2eb 100%); }
.qc-dp-grid-daily .qc-dp-row-header { min-height: 34px; }
/* Daily header cells: day numbers align to the bottom of the cell so the
   "today" badge (at top: 2px) doesn't overlap the date. */
/* Day cells — MUI X axis label treatment. */
.qc-dp-day {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.15px;
  color: var(--chart-text);
  border-right: 1px solid var(--chart-grid);
  box-sizing: border-box;
  pointer-events: none;
}
.qc-dp-day.is-weekend { color: var(--chart-text); }
.qc-dp-day.is-week-start { border-left: 1px solid var(--chart-grid); }
/* Weekend column shading — REMOVED. Keeps the grid flat so the only
 * background tint is the current-week highlight below. Weekend days
 * still render the muted x-axis label color (.qc-dp-day.is-weekend)
 * so users can still tell which columns are Sat/Sun. */
.qc-dp-day-weekend-bg {
  display: none;
}
/* Current-week tint (Monday → Sunday containing today) — the only
 * column-background highlight in the grid now. Bumped from 4% to 8%
 * alpha so it reads at a glance without the weekend overlay
 * underneath competing for visual weight. */
.qc-dp-day-current-week-bg {
  position: absolute; top: 0; bottom: 0;
  background: rgba(63, 91, 255, 0.08);
  pointer-events: none; z-index: 0;
}

.qc-dp-row-automation { background: transparent; }
/* Automation count blip — MUI deep-purple tone. Bumped to 22% bg so the
 * count number is legible at the smaller blip size. */
.qc-dp-bar-automation {
  background: rgba(123, 31, 162, 0.22);
  border-color: rgba(123, 31, 162, 0.32);
  border-left-color: #7b1fa2;
  color: #4a148c;
  padding: 0 4px;
  justify-content: center;
  font-size: var(--font-size-xs);
  min-width: 18px;
}
.qc-dp-auto-icon { margin-right: 4px; color: #5a48b8; }

/* Sprint bars sit inline on a taller project row. Two-line label (name
   above date range), flat blue background, strong outer border so adjacent
   sprints read as separate blocks rather than one continuous bar. */
.qc-dp-row-project-tall { min-height: 48px; }
/* Sprint window — rendered as a lane backdrop (time-range marker), NOT a
   bar. Spans the full row height so it reads as a *period* rather than
   an object on a track and can't be confused with a work item. Uses a
   purple hue (distinct from the brand-blue today line and the
   red/yellow/green state colors) with stronger edges and bold dark
   text so the period is unmistakable.
   Note: deliberately does NOT share the .qc-dp-bar / .qc-dp-bar-sprint
   classes — those style a work-item pill with a 4px accent stripe and
   pill-shaped geometry, which the backdrop wants none of. */
.qc-dp-bar-sprint-flat {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  background: rgba(123, 31, 162, 0.10);          /* Material purple-700 @ 10% */
  border: none;
  border-left: 2px solid rgba(123, 31, 162, 0.7);
  border-right: 2px solid rgba(123, 31, 162, 0.7);
  border-radius: 0;
  padding: 4px 8px;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: #4a148c;                                /* Material purple-900 — bold dark text */
  text-decoration: none;
  line-height: 1.2;
  gap: 1px;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.qc-dp-bar-sprint-flat:hover {
  background: rgba(123, 31, 162, 0.16);
  text-decoration: none;
  cursor: pointer;
}
a.qc-dp-bar-sprint-flat { display: flex; }
.qc-dp-bar-sprint-name  { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #4a148c; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qc-dp-bar-sprint-dates { font-size: 11px; font-weight: var(--font-weight-semibold); color: #6a1b9a; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── Resources Planning's Delivery Plan: ADO-style timeline ───────────────
   Sprint columns are visualised as light alternating grey background bands
   that span the full row height. Sprint NAMES sit on the project row as
   flat text labels (no filled blocks). Epics get an orange-bordered Gantt
   bar positioned by their StartDate → TargetDate. Features / leaves don't
   have bars — they're just listed against the band backdrop. */
.qc-dp-sprint-band {
  position: absolute; top: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  /* Single uniform shade for every sprint column — no alternation. The
     bands exist only to keep the column edges visible against the page
     background; they are intentionally not used to differentiate sprints. */
  background: var(--color-bg-surface-alt);
}

.qc-dp-sprint-label {
  position: absolute; top: 4px; bottom: 4px;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 6px;
  color: var(--color-text-primary);
  background: transparent;
  text-decoration: none;
  line-height: 1.15;
  gap: 2px;
}
a.qc-dp-sprint-label:hover { text-decoration: underline; color: var(--color-text-link); cursor: pointer; }
.qc-dp-sprint-label-name  { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-link); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qc-dp-sprint-label-dates { font-size: 11px; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Epic row needs a bit more height than the default row to fit the bar +
   the row label readably. */
.qc-dp-row-epic-tall { min-height: 36px; }
.qc-dp-bar-epic {
  position: absolute; top: 6px; bottom: 6px;
  z-index: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px 0 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-left: 4px solid var(--c-warning-500);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  line-height: 1.15;
  overflow: hidden;
}
.qc-dp-bar-epic-crown { font-size: var(--font-size-sm); margin-left: 6px; flex-shrink: 0; }
.qc-dp-bar-epic-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Delivery Monitoring hierarchy indent ladder:
   Project (level 0) → Status (level 1) → Parent / Epic (level 2) → Item (level 3).
   Each level steps right ~28px so the visual nesting is obvious. */
.qc-dp-epic-noparent { color: var(--color-text-muted); }
/* Status section header — first level under project. */
.qc-dp-row-status { min-height: 24px; background: transparent; }
.qc-dp-row-label-status { padding-left: 50px; gap: 6px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
/* Parent (Epic / Feature) row inside a status section — second level. */
.qc-dp-grid-daily .qc-dp-row-epic > .qc-dp-row-label-sub { padding-left: 80px; }
/* Item row — deepest level under Status → Parent. */
.qc-dp-row-label-grandchild { padding-left: 116px; }


} /* end @layer features */