/* print.css — 3.5 (Phase 3)
 * Print styles for report views. PMI artifacts get printed for steering
 * committees; this file makes the report body the page.
 *
 * Loaded via:  <link rel="stylesheet" href="css/print.css" media="print">
 * Separate file (not @media block in components.css) to avoid cascade
 * interference with the responsive layout — per gap-analysis risk note.
 *
 * Applies to all report views (SAFe and PMI) — print correctness is
 * methodology-neutral and does not alter screen rendering, so the SAFe
 * byte-for-byte DOM contract is unaffected.
 */

@media print {

  /* ---- chrome suppression ---- */
  .sidebar,
  nav,
  .topbar,
  .topbar-context,
  .command-palette,
  .controls,
  .btn,
  button,
  .upload-zone,
  .hamburger,
  .dark-mode-toggle,
  .sidebar-footer,
  [data-no-print] {
    display: none !important;
  }

  /* ---- page body ---- */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.4;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  main, .content, .page, .report-body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
  }

  /* ---- report sections ---- */
  .report-section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 14pt;
  }

  .report-section + .report-section {
    page-break-before: auto;
  }

  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
    color: #000 !important;
  }

  h1 { font-size: 18pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }

  /* New page for each top-level report when printing multi-report views */
  .report-page, #di-p1-status-report, #steerco-report, #pmo-monthly {
    page-break-before: always;
    break-before: page;
  }
  .report-page:first-child,
  #di-p1-status-report:first-of-type {
    page-break-before: auto;
  }

  /* ---- tables ---- */
  table {
    border-collapse: collapse;
    width: 100%;
    page-break-inside: auto;
  }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
  th, td {
    border: 0.5pt solid #999;
    padding: 4pt 6pt;
    color: #000 !important;
    background: #fff !important;
  }
  th { background: #eee !important; font-weight: 600; }

  /* ---- KPI tiles ---- */
  .kpi-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6pt;
  }
  .kpi-tile {
    border: 0.5pt solid #999 !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 6pt 8pt;
    page-break-inside: avoid;
  }
  .kpi-value { color: #000 !important; font-weight: 700; }
  .kpi-label, .kpi-sub { color: #444 !important; }

  /* ---- RAG / band colors — keep meaning in grayscale-safe form ---- */
  .band-green .kpi-value::after  { content: " (G)"; font-size: 8pt; }
  .band-amber .kpi-value::after  { content: " (A)"; font-size: 8pt; }
  .band-red .kpi-value::after    { content: " (R)"; font-size: 8pt; }
  .badge-critical {
    border: 1pt solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    font-weight: 700;
  }

  /* ---- S-curve SVG: high-contrast strokes on white ---- */
  svg { background: #fff !important; }
  svg .pv-line { stroke: #1a4d8a !important; stroke-width: 2 !important; }   /* ≥4.5:1 on white */
  svg .ev-line { stroke: #14602e !important; stroke-width: 2 !important; }
  svg .ac-line { stroke: #9a2418 !important; stroke-width: 2 !important; }
  svg text { fill: #000 !important; }

  /* ---- links ---- */
  a { color: #000 !important; text-decoration: none; }
  a[href^="http"]::after { content: ""; } /* suppress URL expansion in report prose */

  /* ---- dark mode neutralization ---- */
  [data-theme="dark"], [data-theme="dark"] * {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ---- accessibility (screen, all modes) ----
 * Focus-visible affordances for interactive PMI elements — part of the
 * 3.5 contrast/keyboard pass. Loaded with media="print" link this block is
 * inert; the install script also appends it to components.css if the
 * INCLUDE_FOCUS_STYLES flag is set. Kept here so the rules ship together.
 */
@media screen {
  .kpi-tile:focus-visible,
  .report-section [tabindex]:focus-visible,
  .badge-critical:focus-visible {
    outline: 2px solid var(--info, #2F5D8A);
    outline-offset: 2px;
  }
}