feat: implement US-4 - complete print optimization with CSS media queries

- Add comprehensive CSS print media queries for A4 paper optimization
- Implement 69.6mm barcode width specification (20% larger than original 58mm)
- Apply B&W print color optimization forcing all elements to black/white
- Add page break handling to prevent table rows from splitting across pages
- Fix table cropping issue by removing excessive width and reducing container padding
- Optimize print layout with zero padding for maximum table space utilization
- Ensure header/button elements hidden from print output with proper CSS

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/ui/PrintPreview.tsx

@@ -21,6 +21,65 @@ export interface PrintPreviewProps {
 export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, translations }) => {
 
   return (
+    <>
+      {/* Print-specific CSS styles */}
+      <style jsx>{`
+        @media print {
+          @page {
+            size: A4;
+            margin: 1in;
+          }
+
+          body {
+            -webkit-print-color-adjust: exact !important;
+            color-adjust: exact !important;
+            print-color-adjust: exact !important;
+          }
+
+          .print-barcode-img {
+            width: 69.6mm !important;
+            max-width: 69.6mm !important;
+            height: auto !important;
+            max-height: none !important;
+          }
+
+          .print-table {
+            page-break-inside: avoid;
+          }
+
+          .print-container {
+            padding: 0 !important;
+          }
+
+          .print-table tr {
+            page-break-inside: avoid;
+            page-break-after: auto;
+          }
+
+          .print-table thead {
+            display: table-header-group;
+          }
+
+          /* Optimize for B&W printing */
+          * {
+            color: black !important;
+            background: white !important;
+            box-shadow: none !important;
+            text-shadow: none !important;
+          }
+
+          .print-table th,
+          .print-table td {
+            border: 2px solid black !important;
+            background: white !important;
+          }
+
+          .print-table thead tr {
+            background: #f5f5f5 !important;
+          }
+        }
+      `}</style>
+
       <div className="min-h-screen bg-white">
       {/* Header section - hidden in print */}
       <div className="p-6 border-b border-gray-200 print:hidden">
@@ -39,8 +98,8 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
       </div>
 
       {/* Print content */}
-      <div className="p-6">
-        <table className="w-full border-collapse border-2 border-gray-800">
+      <div className="p-6 print-container">
+        <table className="w-full border-collapse border-2 border-gray-800 print-table">
           <thead>
             <tr className="bg-gray-100">
               <th className="border-2 border-gray-800 px-3 py-2 text-center font-bold text-sm w-16">
@@ -78,7 +137,7 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
                     <img
                       src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`}
                       alt={`Barcode for ${item.billName}`}
-                      className="max-h-28 w-auto border border-gray-300 rounded"
+                      className="max-h-28 w-auto border border-gray-300 rounded print-barcode-img"
                       style={{ maxWidth: '270px' }}
                     />
                   </div>
@@ -94,5 +153,6 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
         </div>
       </div>
       </div>
+    </>
   );
 };