Implement hybrid print preview with CSS-based approach

- Add hidden print-preview-copy div at app level for clean print isolation
- Use @media print rules to show only print copy (960x720) in landscape
- Auto-sync print copy with preview content on modal render via use_effect
- Copy CSS variables and data attributes for proper hour filtering
- Set explicit dimensions matching print-preview-paper content area
- Force landscape orientation with @page rule for better calendar printing

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

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

frontend/print-preview.css

@@ -1127,3 +1127,37 @@
 .print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .week-days-grid,
 .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels,
 .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; }
+
+/* Print Page Setup - Force landscape orientation */
+@page {
+    size: landscape;
+    margin: 0.5in;
+}
+
+/* Print Media Rules - Show only the print-preview-copy when printing */
+@media print {
+    /* Hide all top-level app content */
+    .app {
+        display: none !important;
+    }
+    
+    /* Show only the print copy div */
+    #print-preview-copy {
+        display: block !important;
+        position: absolute !important;
+        left: 0 !important;
+        top: 0 !important;
+        width: 960px !important;
+        height: 720px !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        box-sizing: border-box !important;
+    }
+    
+    /* Ensure print content uses the full page */
+    body {
+        margin: 0 !important;
+        padding: 0 !important;
+        background: white !important;
+    }
+}