/* ===================================================================
 * test-report-mui.css — MUI-dashboard visual layer for #testReportView.
 *
 * All rules are scoped under #testReportView.
 * Provides: page surface, card elevation, .mui-stat, .mui-chip,
 *           .mui-pill, .mui-bar, .mui-dg data-grid table.
 * Tokens only (no raw hex; layout px + rgba shadow tokens OK).
 * Loaded after test-report.css; layer order keeps these in @layer features.
 * =================================================================== */

@layer features {

/* ── Page surface ──────────────────────────────────────────────── */
/* Flat design: white page — cards delineate by 1px border, not by
   floating on a gray surface. No elevation needed. */
#testReportView {
  background: var(--c-neutral-0);
}

/* ── Card border (flat) ─────────────────────────────────────────
 * Scoped overrides for every .ds-card inside the Test Insights
 * view. Flat design: border + radius only — no shadow elevation. */
#testReportView .ds-card {
  background: var(--color-bg-surface);
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

/* ── .mui-stat — stat card ──────────────────────────────────────
 * A complete KPI card with label / big-number / chip / caption /
 * sparkline slots. Composes with .ds-card for the card shell.
 *
 * Usage:
 *   <div class="ds-card mui-stat">
 *     <p class="mui-stat__label">Portfolio Index</p>
 *     <div class="mui-stat__row">
 *       <span class="mui-stat__num">78</span>
 *       <span class="mui-chip mui-chip--up">▲ +6</span>
 *     </div>
 *     <p class="mui-stat__cap">vs last quarter</p>
 *     <div class="mui-stat__spark"><!-- renderSparkline target --></div>
 *   </div>
 */

#testReportView .mui-stat {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
}

/* Label — uppercase overline style, secondary color */
#testReportView .mui-stat__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

/* Row that holds the big number + trend chip side-by-side */
#testReportView .mui-stat__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Big number — ~30px, semibold, tight tracking */
#testReportView .mui-stat__num {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text-primary);
}

/* Caption below the number row — muted, small */
#testReportView .mui-stat__cap {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

/* Sparkline slot — gives breathing room above the SVG */
#testReportView .mui-stat__spark {
  margin-top: var(--space-3);
  line-height: 0;
}

/* ── .mui-chip — trend chip ─────────────────────────────────────
 * Small rounded pill used inside .mui-stat__row to show directional
 * change (+6, -2, etc.).
 *
 * Usage:
 *   <span class="mui-chip mui-chip--up">▲ +6</span>
 *   <span class="mui-chip mui-chip--down">▼ -2</span>
 */

#testReportView .mui-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Up / positive delta — success palette */
#testReportView .mui-chip--up {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Down / negative delta — danger palette */
#testReportView .mui-chip--down {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* ── .mui-pill — status pill ────────────────────────────────────
 * Larger rounded pill for project/release readiness status. Includes
 * a colored dot element (.mui-pill__dot) before the label text.
 *
 * Usage:
 *   <span class="mui-pill mui-pill--g">
 *     <span class="mui-pill__dot"></span>Ship
 *   </span>
 *   <span class="mui-pill mui-pill--a">…At risk</span>
 *   <span class="mui-pill mui-pill--r">…Hold</span>
 */

#testReportView .mui-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Dot inside the pill — inherits currentColor so it always matches
   the pill's text color. Use opacity so it reads slightly softer. */
#testReportView .mui-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Green / Ship */
#testReportView .mui-pill--g {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Amber / At risk */
#testReportView .mui-pill--a {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* Red / Hold */
#testReportView .mui-pill--r {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* ── .mui-bar — progress bar ────────────────────────────────────
 * A simple horizontal progress bar with a track and a fill.
 * Fill color and width are set inline by the caller.
 *
 * Usage:
 *   <div class="mui-bar">
 *     <div class="mui-bar__fill" style="width:62%;background:#2e7d32"></div>
 *   </div>
 */

#testReportView .mui-bar {
  height: 8px;
  background: var(--c-neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

#testReportView .mui-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  min-width: 0;
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── .mui-dg — MUI DataGrid-style table ─────────────────────────
 * Scoped data-grid table that mirrors MUI X DataGrid column headers
 * (uppercase overline) and row hover behavior.
 *
 * Usage:
 *   <table class="mui-dg">
 *     <thead><tr><th>Project</th>…</tr></thead>
 *     <tbody><tr><td>…</td>…</tr></tbody>
 *   </table>
 */

#testReportView .mui-dg {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}

/* Column headers — uppercase overline style */
#testReportView .mui-dg thead th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border-default);
}

/* Body cells */
#testReportView .mui-dg tbody td {
  padding: 11px var(--space-3);
  border-bottom: var(--border-width-1) solid var(--color-border-subtle);
  color: var(--color-text-primary);
}

/* Last row: no bottom border */
#testReportView .mui-dg tbody tr:last-child td {
  border-bottom: none;
}

/* Row hover — subtle surface tint matching mockup behavior */
#testReportView .mui-dg tbody tr:hover td {
  background: var(--color-bg-surface-alt);
}

/* ── Test Metrics: headline KPI stat-card grid (T3) ─────────────────
 * Four stat cards across the top of the Test Metrics panel showing
 * Coverage, DRE, MTTR, Net defects with RAG-tinted numbers.
 */

#testReportView .tm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (max-width: 900px) {
  #testReportView .tm-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  #testReportView .tm-kpi-grid {
    grid-template-columns: 1fr;
  }
}



/* ── Automation tab: headline KPI stat-card grid (T4) ────────────────
 * Four stat cards across the top of the Automation panel showing
 * Coverage %, Pass rate %, Flaky count, Automated count.
 * Mirrors .tm-kpi-grid from T3; breakpoints match.
 */

#testReportView .am-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (max-width: 900px) {
  #testReportView .am-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  #testReportView .am-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Defect-flow chart: height cap ──────────────────────────────────
 * The chart SVG uses containerEl.offsetHeight to compute its h-value,
 * so capping the container to 180px makes the bars render proportionally
 * instead of stretching into a tall sparse band.                       */
#testReportView #tmDefectFlowChart {
  height: 180px;
  min-height: 0;
  overflow: hidden;
}




/* Automation 3-chart grid: ensure cards don't stretch unevenly */
#testReportView .tm-grid3 {
  align-items: start;
}

} /* end @layer features */