Add print stylesheet for reports page (#499)

* Add print stylesheet for reports page

* Polish reports print layout

* Make sure all pages are printed

* Use design system tokens

app/views/layouts/application.html.erb

@@ -19,7 +19,8 @@
     data-app-layout-user-id-value="<%= Current.user.id %>">
     <div
       class="hidden fixed inset-0 bg-surface z-20 h-full w-full pt-[calc(env(safe-area-inset-top)+0.75rem)] pr-3 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] pl-3 overflow-y-auto transition-all duration-300"
-      data-app-layout-target="mobileSidebar">
+      data-app-layout-target="mobileSidebar"
+      data-print="hide">
       <div class="mb-2">
         <%= icon("x", as_button: true, data: { action: "app-layout#closeMobileSidebar" }) %>
       </div>
@@ -33,7 +34,7 @@
     </div>
 
     <%# MOBILE - Top nav %>
-    <nav class="lg:hidden flex justify-between items-center p-3">
+    <nav class="lg:hidden flex justify-between items-center p-3" data-print="hide">
       <%= icon("panel-left", as_button: true, data: { action: "app-layout#openMobileSidebar"}) %>
 
       <%= link_to root_path, class: "block" do %>
@@ -44,7 +45,7 @@
     </nav>
 
     <%# DESKTOP - Left navbar %>
-    <div class="hidden lg:block">
+    <div class="hidden lg:block" data-print="hide">
       <nav class="h-full flex flex-col shrink-0 w-[84px] py-4 mr-3">
         <div class="pl-2 mb-3">
           <%= link_to root_path, class: "block" do %>
@@ -78,7 +79,7 @@
         "hidden lg:block py-4 overflow-y-auto shrink-0 max-w-[320px] transition-all duration-300",
         Current.user.show_sidebar? ? expanded_sidebar_class : collapsed_sidebar_class,
        ),
-       data: { app_layout_target: "leftSidebar" } do %>
+       data: { app_layout_target: "leftSidebar", print: "hide" } do %>
       <% if content_for?(:sidebar) %>
         <%= yield :sidebar %>
       <% else %>
@@ -138,7 +139,7 @@
           "hidden lg:block h-full overflow-y-auto shrink-0 max-w-[400px] transition-all duration-300",
           Current.user.show_ai_sidebar? ? expanded_sidebar_class : collapsed_sidebar_class,
         ),
-        data: { app_layout_target: "rightSidebar" } do %>
+        data: { app_layout_target: "rightSidebar", print: "hide" } do %>
       <%= tag.div id: "chat-container", class: "relative h-full", data: { controller: "chat hotkey", turbo_permanent: true } do %>
         <div class="flex flex-col h-full justify-between shrink-0">
           <%= turbo_frame_tag chat_frame, src: chat_view_path(@chat), loading: "lazy", class: "h-full" do %>
@@ -157,7 +158,7 @@
     <% end %>
 
     <%# MOBILE - Bottom Nav %>
-    <%= tag.nav class: "lg:hidden fixed bottom-0 left-0 right-0 bg-surface z-10 pb-[env(safe-area-inset-bottom)] border-t border-tertiary flex justify-around" do %>
+    <%= tag.nav class: "lg:hidden fixed bottom-0 left-0 right-0 bg-surface z-10 pb-[env(safe-area-inset-bottom)] border-t border-tertiary flex justify-around", data: { print: "hide" } do %>
       <% mobile_nav_items.each do |nav_item| %>
         <%= render "layouts/shared/nav_item", **nav_item %>
       <% end %>

app/views/reports/_transactions_breakdown.html.erb

@@ -1,6 +1,6 @@
 <div>
   <%# Export Controls %>
-  <div class="flex items-center justify-end mb-4 flex-wrap gap-3">
+  <div class="reports-print-hide flex items-center justify-end mb-4 flex-wrap gap-3">
     <%
       # Build params hash for links
       base_params = {

app/views/reports/index.html.erb

@@ -1,5 +1,103 @@
+<% content_for :head do %>
+  <style media="print">
+    /* Print-specific custom property overrides for values using --alpha() */
+    :root {
+      --print-shadow-color: rgba(11, 11, 11, 0.06);
+    }
+
+    @page {
+      margin: 0.75in;
+    }
+
+    body {
+      background: var(--color-gray-50);
+      color: var(--color-gray-900);
+      font-family: var(--font-sans);
+    }
+
+    #notification-tray,
+    #cta,
+    #chat-container,
+    turbo-frame#modal,
+    turbo-frame#drawer,
+    [data-print="hide"] {
+      display: none !important;
+    }
+
+    [data-controller="app-layout"] {
+      height: auto !important;
+      overflow: visible !important;
+      display: block !important;
+    }
+
+    [data-app-layout-target="content"] {
+      max-width: none !important;
+      max-height: none !important;
+      height: auto !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      overflow: visible !important;
+    }
+
+    body,
+    html {
+      height: auto !important;
+      overflow: visible !important;
+    }
+
+    main {
+      overflow: visible !important;
+      height: auto !important;
+      max-height: none !important;
+    }
+
+    [data-app-layout-target="content"] > .hidden.lg\:flex {
+      display: none !important;
+    }
+
+    .reports-page {
+      background: transparent;
+      padding: 0 !important;
+    }
+
+    .reports-print-sheet {
+      background: var(--color-white);
+      border-radius: 16px;
+      padding: 0.75in 0.65in;
+      box-shadow: 0 10px 25px var(--print-shadow-color);
+    }
+
+    .reports-page section {
+      break-inside: avoid;
+      page-break-inside: avoid;
+    }
+
+    .reports-print-hide,
+    [data-reports-section-target="button"],
+    [data-reports-sortable-target="handle"] {
+      display: none !important;
+    }
+
+    [data-reports-section-target="content"] {
+      display: block !important;
+    }
+
+    section[data-section-key="transactions_breakdown"] {
+      break-before: page;
+      page-break-before: always;
+      margin-top: 0 !important;
+      padding-top: 0 !important;
+    }
+
+    .reports-page table th,
+    .reports-page table td {
+      padding-inline: 0.5rem !important;
+    }
+  </style>
+<% end %>
+
 <% content_for :page_header do %>
-  <div class="space-y-4 mb-6">
+  <div class="space-y-4 mb-6 reports-print-hide">
     <div class="space-y-1">
       <h1 class="text-xl lg:text-3xl font-medium text-primary">
         <%= t("reports.index.title") %>
@@ -17,7 +115,7 @@
     <% end %>
 
     <%# Period Navigation Tabs %>
-    <div class="flex items-center gap-2 overflow-x-auto pb-2">
+    <div class="reports-print-hide flex items-center gap-2 overflow-x-auto pb-2">
       <%= render DS::Link.new(
         text: t("reports.index.periods.monthly"),
         variant: @period_type == :monthly ? "secondary" : "ghost",
@@ -52,7 +150,7 @@
 
     <%# Custom Date Range Picker (only shown when custom is selected) %>
     <% if @period_type == :custom %>
-      <%= form_with url: reports_path, method: :get, data: { controller: "auto-submit-form" }, class: "flex items-center gap-3 bg-surface-inset p-3 rounded-lg" do |f| %>
+      <%= form_with url: reports_path, method: :get, data: { controller: "auto-submit-form" }, class: "reports-print-hide flex items-center gap-3 bg-surface-inset p-3 rounded-lg" do |f| %>
         <%= f.hidden_field :period_type, value: :custom %>
 
         <div class="flex items-center gap-2">
@@ -84,7 +182,7 @@
   </div>
 <% end %>
 
-<div class="w-full space-y-6 pb-24">
+<div class="reports-page w-full space-y-6 pb-24 reports-print-sheet">
   <% if Current.family.transactions.any? %>
     <%# Summary Dashboard - Always visible, not collapsible %>
     <section>