@media print {
  @page {
    size: A4;
    margin: 0.75in 0.6in;
  }

  @page :first {
    margin-top: 0.5in;
  }

  /* ── CSS Variable Overrides ─────────────────────────────────────────── */
  :root,
  :root .dark,
  :root [class*="dark"] {
    --background: 0 0% 100% !important;
    --foreground: 0 0% 0% !important;
    --card: 0 0% 100% !important;
    --card-foreground: 0 0% 0% !important;
    --muted: 0 0% 96% !important;
    --muted-foreground: 0 0% 35% !important;
    --primary: 222 47% 11% !important;
    --primary-foreground: 0 0% 100% !important;
    --border: 0 0% 85% !important;
    --input: 0 0% 85% !important;
    --destructive: 0 84% 50% !important;
    --destructive-foreground: 0 0% 100% !important;
    --chart-1: 0 0% 15% !important;
    --chart-2: 0 0% 35% !important;
    --chart-3: 0 0% 55% !important;
    --chart-4: 0 0% 75% !important;
    --chart-5: 0 0% 90% !important;
  }

  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* ══════════════════════════════════════════════════════════════════════
     TARGETED PRINT FIXES
     Preserve light-mode screen appearance. Only fix Chrome print engine
     issues (border-radius blocking page breaks, overflow clipping,
     shadows not rendering, transitions causing artifacts).
     ══════════════════════════════════════════════════════════════════════ */
  /* ── Page Break Enablers ──────────────────────────────────────────── */
  /* Remove border-radius on large containers so Chrome allows page
     breaks through them. Small elements keep their radius. */
  .print-only-layout .rounded-lg,
  .print-only-layout .rounded-xl,
  .print-only-layout .rounded-2xl,
  .print-only-layout .rounded-md {
    border-radius: 0 !important;
  }

  /* Render borders/backgrounds independently on each page fragment. */
  .print-only-layout * {
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }

  /* ── Print Engine Fixes ───────────────────────────────────────────── */
  .print-only-layout *,
  .print-header * {
    box-shadow: none !important;
    transition: none !important;
    overflow: visible !important;
  }

  /* ── Chip / Badge Print Styling ───────────────────────────────────── */
  .print-only-layout [style*="border-radius: 99px"],
  .print-only-layout .inline-flex.rounded-full {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 0.5pt solid #d1d5db !important;
    border-radius: 9999px !important;
    padding: 2pt 6pt !important;
  }
  .print-only-layout [style*="border-radius: 99px"] *,
  .print-only-layout .inline-flex.rounded-full * {
    color: inherit !important;
    background: transparent !important;
  }

  /* ── Issues Section: Remove Borders From Tall Component Cards ──────── */
  /* Multi-issue component cards can span several pages; removing outer
     borders prevents Chrome from stretching boxes and creating whitespace. */
  .print-only-layout #issues-by-component .space-y-4 > div {
    border: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .print-only-layout #issues-by-component .space-y-4 > div > .border {
    border: none !important;
  }

  /* Strip issue inner backgrounds/inline styles that trap page breaks */
  .print-only-layout #issues-by-component .bg-gray-50,
  .print-only-layout #issues-by-component .dark\:bg-gray-800,
  .print-only-layout #issues-by-component [style*="background-color"],
  .print-only-layout #issues-by-component [style*="background:"] {
    background: transparent !important;
  }
  .print-only-layout #issues-by-component [style*="border-left"] {
    border-left: none !important;
  }

  /* TechStack Paper containers use inline border/gradient via sx.
     sxToStyle produces "border: Npx solid" and "border-color: ..." */
  .print-only-layout #tech-stack [style*="border:"],
  .print-only-layout #tech-stack [style*="border-color"],
  .print-only-layout #tech-stack [style*="linear-gradient"] {
    background: transparent !important;
    border: none !important;
  }

  /* Chrome print breaks are unreliable inside flex columns */
  .print-only-layout [style*="display: flex"][style*="flex-direction: column"] {
    display: block !important;
  }

  /* ── Typography ─────────────────────────────────────────────────────── */
  h1 { font-size: 18pt; font-weight: 700; line-height: 1.2; margin-bottom: 6pt; }
  h2 { font-size: 14pt; font-weight: 700; line-height: 1.3; margin-bottom: 5pt; }
  h3 { font-size: 12pt; font-weight: 600; line-height: 1.3; margin-bottom: 4pt; }
  h4 { font-size: 11pt; font-weight: 600; line-height: 1.4; margin-bottom: 3pt; }
  h5, h6 { font-size: 10pt; font-weight: 600; line-height: 1.4; }

  body, p, li, td, th { font-size: 10pt; line-height: 1.5; }
  .text-xs { font-size: 8pt; }
  .text-sm { font-size: 9pt; }
  .text-lg { font-size: 11pt; }
  .text-xl { font-size: 12pt; }
  .text-2xl { font-size: 14pt; }
  .text-3xl, .text-4xl { font-size: 16pt; }
  .text-5xl, .text-6xl { font-size: 24pt; }

  /* ── Spacing (print-density) ────────────────────────────────────────── */
  .space-y-12 > * + *, .space-y-10 > * + *, .space-y-8 > * + * {
    margin-top: 14pt !important;
  }
  .space-y-6 > * + * { margin-top: 10pt !important; }
  .space-y-4 > * + * { margin-top: 6pt !important; }
  .space-y-3 > * + * { margin-top: 4pt !important; }
  .space-y-2 > * + * { margin-top: 3pt !important; }

  .gap-6, .gap-8 { gap: 10pt !important; }
  .gap-4 { gap: 6pt !important; }
  .gap-3, .gap-2 { gap: 4pt !important; }

  /* Card padding */
  .p-6, .p-8 { padding: 10pt !important; }
  .p-4, .p-5 { padding: 8pt !important; }
  .p-3 { padding: 6pt !important; }
  .p-2 { padding: 3pt !important; }

  /* ── Reduce Inter-Section Gaps ──────────────────────────────────────── */
  .print-only-layout > .space-y-8 > * + * {
    margin-top: 16pt !important;
  }

  /* ── Hide Interactive / Screen-Only Elements ────────────────────────── */
  nav, footer, .back-to-top,
  button:not(.print-visible),
  [role="button"]:not(.print-visible),
  .print\:hidden {
    display: none !important;
  }

  /* Collapse copy/share button wrappers in print flow */
  .print-only-layout .flex.justify-end {
    display: none !important;
  }

  /* Hide fixed overlays (cookie consent, chat widgets, etc.) */
  .fixed.bottom-0,
  .fixed.z-50 {
    display: none !important;
  }

  /* ── Reset Positioning ──────────────────────────────────────────────── */
  .sticky { position: static !important; }
  .fixed { display: none !important; }
  .min-h-screen { min-height: auto !important; }

  /* ── Strip Fixed / Min Heights ──────────────────────────────────────── */
  /* MUI sx prop sets minHeight on metric cards (180px) — kill it */
  .print-only-layout [style*="min-height"],
  .print-only-layout [style*="minHeight"] {
    min-height: auto !important;
  }
  .print-only-layout [style*="height: 100%"] {
    height: auto !important;
  }

  /* ── Grid Layouts — Force Multi-Column ──────────────────────────────── */
  .grid[class*="lg:grid-cols-4"] { grid-template-columns: repeat(4, 1fr) !important; }
  .grid[class*="lg:grid-cols-3"],
  .grid[class*="md:grid-cols-3"] { grid-template-columns: repeat(3, 1fr) !important; }
  .grid[class*="md:grid-cols-2"],
  .grid[class*="sm:grid-cols-2"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* MUI sx-generated grids (inline style has 1fr from xs fallback) */
  .print-only-layout [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* The 3-col severity summary should stay 3-col */
  .grid.grid-cols-3,
  .grid[class*="grid-cols-3"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* brand-header-new metric grid — force 4-col */
  .print-only-layout [class*="print:grid-cols-4"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ══════════════════════════════════════════════════════════════════════
     PAGE BREAK STRATEGY — Maximum Continuity
     Allow EVERYTHING to break across pages. No break-inside:avoid on
     any container. This eliminates blank pages caused by tall elements
     that can't fit and can't break. Only individual list items (small,
     ~3-4 lines) get break-inside:avoid.
     ══════════════════════════════════════════════════════════════════════ */

  /* Kill ALL break constraints from any source */
  .print-only-layout * {
    break-inside: auto !important;
    break-before: auto !important;
    break-after: auto !important;
  }

  /* Override Tailwind print:break-inside-avoid utility */
  [class*="print:break-inside-avoid"] {
    break-inside: auto !important;
  }

  /* Only protect truly small elements (individual step items, single
     list entries) that would look bad split across pages */
  .print-only-layout ol > li,
  .print-only-layout .step-item {
    break-inside: avoid !important;
  }

  /* Hide decorative connector lines between step items */
  .print-only-layout li [style*="position: absolute"] {
    display: none !important;
  }

  /* ── Recharts / SVG Charts ──────────────────────────────────────────── */
  .recharts-responsive-container {
    width: 100% !important;
    min-width: 500px !important;
    height: 250px !important;
  }

  .recharts-wrapper {
    width: 100% !important;
    min-width: 500px !important;
  }

  .recharts-surface {
    width: 100% !important;
  }

  svg {
    overflow: visible !important;
  }

  /* Fix duplicate SVG gradient IDs — the interactive layout (display:none
     in print) defines <linearGradient id="colorValue"> first in document
     order, so the print-only copy's url(#colorValue) resolves to the
     hidden one. Override with solid fill so the chart is always visible. */
  .print-only-layout .recharts-area path[fill^="url("] {
    fill: rgba(59, 130, 246, 0.25) !important;
  }
  .print-only-layout .recharts-area path[stroke] {
    stroke: #3b82f6 !important;
    stroke-width: 2px !important;
  }

  /* ── Print-Only Layout Container ────────────────────────────────────── */
  .print-only-layout {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }

  /* ── Print Header ───────────────────────────────────────────────────── */
  .print-header {
    display: block !important;
    margin-bottom: 16pt;
  }

  /* ── Truncation — Show Full Text ────────────────────────────────────── */
  .truncate {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
  }

  /* ── Dark Mode Overrides ────────────────────────────────────────────── */
  .dark\:bg-gray-900, .dark\:bg-gray-800, .dark\:bg-gray-700 {
    background-color: #ffffff !important;
  }
  .dark\:text-gray-100, .dark\:text-gray-200, .dark\:text-gray-300,
  .dark\:text-white {
    color: #000000 !important;
  }
  .dark\:text-gray-400 {
    color: #4b5563 !important;
  }
  /* Additional dark mode overrides for print components */
  .dark\:border-gray-700, .dark\:border-gray-600 {
    border-color: #e5e7eb !important;
  }
  .dark\:text-green-400 {
    color: #16a34a !important;
  }
  .dark\:border-amber-700 {
    border-color: #d97706 !important;
  }
}