@media print {
   @page {
     margin: 0.25in 0.5in 0.5in 0.5in; /* top right bottom left - smaller top margin */
     /* Remove default print headers and footers */
     @top-left { content: ""; }
     @top-center { content: ""; }
     @top-right { content: ""; }
     @bottom-left { content: ""; }
     @bottom-center { content: ""; }
     @bottom-right { content: ""; }
     marks: none;
   }

   @page qr-label {
     size: 3in 2in;
     margin: 0;
   }

   @page letter-sheet {
     size: letter;
     margin: 0.25in;
   }
   
   body {
     -webkit-print-color-adjust: exact !important;
     print-color-adjust: exact !important;
     margin: 0;
     padding: 0;
     background: white !important;
   }
  
  /* Ensure root and all containers have white background */
  #root,
  #root > div {
    background: white !important;
  }
  .print-hide {
    display: none !important;
  }

  /* HIDE EVERYTHING EXCEPT THE INTENDED PRINT AREA (for QR codes only) */
  /* Only apply this rule when QR print wrappers are present */
  body > #root > div:has(.print-only-wrapper) > *:not(.print-only-wrapper) {
    display: none !important;
  }
  
  body > #root > div:has(.print-sheet-wrapper) > *:not(.print-sheet-wrapper) {
    display: none !important;
  }
  
  /* Home History Report Print Styles */
  
  /* Hide navigation and buttons when printing */
  .print-hide,
  #full-home-history-report .print-hide,
  #full-home-history-report button.print-hide,
  #full-home-history-report [class*="print-hide"] {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Hide edit buttons in section headers (Ownership & Sales History, Tax Assessment) */
  #full-home-history-report div[class*="flex"][class*="items-center"][class*="justify-between"] button[class*="bg-emerald-500"],
  #full-home-history-report div[class*="flex"][class*="items-center"][class*="justify-between"] > button {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Hide the main navigation header when printing */
  header.sticky,
  header[class*="sticky"] {
    display: none !important;
  }
  
  /* Hide all outer containers and only show the report */
  body > #root > div.min-h-screen {
    display: contents !important;
  }
  
  body > #root > div > main {
    display: contents !important;
  }
  
  body > #root > div > main > div.max-w-5xl {
    display: contents !important;
  }
  
  /* Hide the button container */
  body > #root > div > main > div > div.mb-8 {
    display: none !important;
  }
  
  /* Make the report the only visible element */
  #full-home-history-report {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    page-break-before: avoid !important;
    display: block !important;
  }
  
  /* Force light mode for print - override dark mode classes */
  #full-home-history-report,
  #full-home-history-report * {
    color: inherit !important;
  }
  
  /* Force white backgrounds and light text colors - override dark mode */
  #full-home-history-report [class*="dark:bg-slate"],
  #full-home-history-report [class*="dark:bg-gray"],
  #full-home-history-report [class*="bg-slate-800"],
  #full-home-history-report [class*="bg-slate-900"],
  #full-home-history-report [class*="dark:text-slate"] {
    background-color: white !important;
    color: #1e293b !important; /* slate-800 */
  }
  
  /* Override dark mode text colors */
  #full-home-history-report [class*="dark:text-slate-100"],
  #full-home-history-report [class*="dark:text-slate-200"],
  #full-home-history-report [class*="dark:text-slate-300"] {
    color: #1e293b !important; /* slate-800 */
  }
  
  #full-home-history-report [class*="dark:text-slate-400"],
  #full-home-history-report [class*="dark:text-slate-500"],
  #full-home-history-report [class*="dark:text-slate-600"] {
    color: #475569 !important; /* slate-600 */
  }
  
  #full-home-history-report [class*="dark:text-slate-700"] {
    color: #334155 !important; /* slate-700 */
  }
  
  /* Ensure header gradient stays visible but force light mode text */
  #full-home-history-report > header {
    background: linear-gradient(to bottom right, #10b981, #14b8a6, #06b6d4) !important;
    color: white !important;
  }
  
  /* Force light mode for right panel - keep gradient but ensure text is visible */
  #full-home-history-report > div.grid > div[class*="from-teal-600"],
  #full-home-history-report > div.grid > div[class*="bg-gradient-to-br"] {
    background: linear-gradient(to bottom right, #0d9488, #10b981, #0d9488) !important;
    color: white !important;
  }
  
  /* Override any dark mode border colors */
  #full-home-history-report [class*="dark:border-slate"] {
    border-color: #e2e8f0 !important; /* slate-200 */
  }
  
  /* Remove any auto margins from containers */
  body > #root > div > main > div.mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix blank first page - ensure no space before report */
  body > #root > div > main > div > #full-home-history-report {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    page-break-before: avoid !important;
  }
  
  /* Ensure report header starts at the very top */
  #full-home-history-report > header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Prevent page break before any element that might cause blank page */
  body > #root > div > main > div > *:not(#full-home-history-report) {
    page-break-after: avoid !important;
  }
  
  /* Ensure report is the first printable content */
  body > #root > div > main > div > #full-home-history-report {
    position: relative !important;
  }
  
  /* Remove any backgrounds from containers that might show through */
  body > #root > div[class*="bg-gray"],
  body > #root > div[class*="bg-slate"],
  body > #root > div > main[class*="bg"],
  body > #root > div > main > div[class*="bg"] {
    background: transparent !important;
  }
  
  /* Preserve colors and backgrounds for print, but remove unwanted gradients */
  #full-home-history-report,
  #full-home-history-report * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Remove gradient backgrounds from property images section */
  #full-home-history-report [class*="bg-gradient-to-b"][class*="from-slate-50"] {
    background: white !important;
  }
  
  /* Remove any slate/gray backgrounds that aren't part of the design */
  #full-home-history-report [class*="bg-slate-50"],
  #full-home-history-report [class*="bg-gray"] {
    background: white !important;
  }
  
  /* Keep the header gradient and right panel gradient, but remove others */
  /* Only remove gradients that are not part of the main design */
  
  /* Ensure images print properly and fit frame exactly */
  #full-home-history-report img {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    page-break-inside: avoid;
  }
  
  /* Ensure image containers maintain aspect ratio in print */
  #full-home-history-report [style*="aspectRatio"] {
    aspect-ratio: 4/3 !important;
  }
  
  /* Ensure image containers and frames maintain exact dimensions */
  #full-home-history-report [class*="w-full"][class*="h-full"] {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Ensure object-cover works in print to fill frame */
  #full-home-history-report [class*="object-cover"] {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Force two-column grid layout for print */
  /* Tailwind's md: breakpoint doesn't work in print media, so we need to force it */
  #full-home-history-report .grid {
    display: grid !important;
  }
  
  /* Target the split layout section - it's the first grid after header */
  /* This selector targets any grid element that is a direct child */
  #full-home-history-report > div.grid,
  #full-home-history-report > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  /* Also catch grids with md:grid-cols-2 class using attribute selector */
  #full-home-history-report [class*="md:grid-cols-2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  /* Ensure 3-column grid for images stays 3 columns */
  #full-home-history-report .grid.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  
  /* Ensure 4-column grid for property images */
  #full-home-history-report .grid[class*="grid-cols-4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  
  /* Ensure flex layouts work */
  #full-home-history-report .flex {
    display: flex !important;
  }
  
  /* Print-friendly page breaks - avoid breaking key sections */
  #full-home-history-report header {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  /* Avoid breaking the split layout section */
  #full-home-history-report > .grid {
    page-break-inside: avoid;
  }
  
  /* Reduce font size in property info section (right panel) for print */
  #full-home-history-report > div.grid > div[class*="from-teal-600"],
  #full-home-history-report > div.grid > div[class*="bg-gradient-to-br"] {
    font-size: 0.85em !important;
  }
  
  #full-home-history-report > div.grid > div[class*="from-teal-600"] h3,
  #full-home-history-report > div.grid > div[class*="bg-gradient-to-br"] h3 {
    font-size: 0.9em !important;
  }
  
  #full-home-history-report > div.grid > div[class*="from-teal-600"] p,
  #full-home-history-report > div.grid > div[class*="bg-gradient-to-br"] p {
    font-size: 0.85em !important;
  }
  
  /* Reduce font size in "About this report" section (left panel) for print to match property information */
  /* Target the section with border-t that comes after PROPERTY FEATURES */
  #full-home-history-report > div.grid > div[class*="bg-white"] > div[class*="border-t"][class*="pt-8"] {
    font-size: 0.85em !important;
  }
  
  #full-home-history-report > div.grid > div[class*="bg-white"] > div[class*="border-t"][class*="pt-8"] h3 {
    font-size: 0.9em !important;
  }
  
  #full-home-history-report > div.grid > div[class*="bg-white"] > div[class*="border-t"][class*="pt-8"] p {
    font-size: 0.85em !important;
  }
  
  #full-home-history-report > div.grid > div[class*="bg-white"] > div[class*="border-t"][class*="pt-8"] div[class*="text-sm"] {
    font-size: 0.75em !important;
  }
  
  /* Everything else should look exactly like the webpage */

  /* --- SINGLE QR CARD PRINTING (4x3) --- */
  .print-only-wrapper {
    page: qr-label;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-color: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .print-only-wrapper > div > *:not(#qr-card-to-print) {
    display: none !important;
  }
  /* Matches QRCodeModal #qr-card-to-print (3×2 in, row layout) */
  #qr-card-to-print {
    width: 3in !important;
    height: 2in !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
    color: #000000 !important;
    background-color: white !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    page-break-inside: avoid;
  }

  /* --- BULK QR SHEET PRINTING --- */
  .print-sheet-wrapper {
    page: letter-sheet;
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block !important;
    background: white !important;
  }
   .print-sheet-wrapper > div > *:not(#qr-sheet-to-print) {
     display: none !important;
   }
  /* Matches BulkQRCodePrint #qr-sheet-to-print (2×3 in cards, 2 columns) */
  #qr-sheet-to-print {
    display: grid !important;
    grid-template-columns: repeat(2, 3in) !important;
    grid-auto-rows: 2in !important;
    column-gap: 0.8in !important;
    row-gap: 0.333in !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: auto !important;
    padding: 0.5in !important;
  }
  .bulk-qr-card {
    width: 3in !important;
    height: 2in !important;
    box-sizing: border-box !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: row !important;
    background-color: white !important;
    page-break-inside: avoid;
    color: #000000 !important;
  }
}