/* The quote preview is a DOCUMENT, not app chrome, render it as
 * a white "paper" sheet in every theme. This keeps it legible on
 * the Dark theme's dark canvas (the table header was invisible
 * light-on-#f2f2f2 before), puts the company logo back on white
 * where it was designed to sit, and makes the on-screen preview
 * match what actually prints. Forced (!important) so no active
 * theme's body text/background color bleeds into the sheet. */
#estimateArea { background:#ffffff !important; color:#111 !important; box-shadow:0 2px 14px rgba(0,0,0,.18); border-radius:4px; }
#estimateArea a { color:#111 !important; }
#estimateArea th, #estimateArea td, #estimateArea h1, #estimateArea h2, #estimateArea h3, #estimateArea strong { color:#111 !important; }

/* Print / Save-as-PDF: only the quote document, clean black-and-
 * white. window.print() (see printQuoteWithFilename()) triggers
 * this. The visibility trick blanks ALL other ink, the WP site
 * header, the PaintOps nav, the "Jobs" page title, the Email/Text/
 * Print action links, the "Not yet viewed"/"No email" status
 * badges, and the footer, then re-shows just the quote and pulls
 * it to the top of the sheet so there's no blank leading page. */
@media print {
	body * { visibility: hidden !important; }
	#printableArea, #printableArea * { visibility: visible !important; }
	#printableArea { position: absolute; left: 0; top: 0; width: 100%; }
	#estimateArea { box-shadow: none !important; width: 100% !important; border-radius: 0 !important; padding: 0 !important; }
	/* Portrait paper is ~740 CSS px wide, BELOW the 782px phone
	 * breakpoint, so responsive table-stacking rules (the active
	 * theme's or ours) reshuffled the Description/Price cells on
	 * portrait prints while landscape looked fine (2026-07-21).
	 * Print is paper, not a phone: force real table layout. */
	#estimateArea table { display: table !important; width: 100% !important; }
	#estimateArea thead { display: table-header-group !important; }
	#estimateArea tbody { display: table-row-group !important; }
	#estimateArea tfoot { display: table-footer-group !important; }
	#estimateArea tr { display: table-row !important; }
	#estimateArea th, #estimateArea td { display: table-cell !important; width: auto !important; }
}
	/* On a phone the 700px document overflowed (title cut off, wide
	 * tables). Fit it to the screen: smaller padding/font, wrap the long
	 * heading, and let the header (logo + customer) stack instead of
	 * squeezing. The inner tables are width:100% so they follow the now-
	 * responsive container. */
	/* screen-only (2026-07-21): without the screen keyword these
	 * phone rules also applied to portrait PRINTS (~740px wide). */
	@media screen and (max-width: 782px) {
		#estimateArea { padding: 16px !important; font-size: 13px !important; overflow-wrap: break-word; word-break: break-word; }
		#estimateArea h1, #estimateArea h2, #estimateArea h3 { overflow-wrap: break-word; word-break: break-word; }
		#estimateArea .po-quote-header { flex-wrap: wrap; gap: 12px; }
		#estimateArea .po-quote-header > div { text-align: left !important; }
	}
