Refactor print styles and enhance chart configuration for better visualization

- Adjusted chart grid color for improved contrast in visualizations.
- Implemented print-specific styles to ensure proper layout and formatting on A4 paper.
- Enhanced chart configuration in JavaScript to include grid line width and tick border dash for clearer data representation.
- Updated HTML to streamline print functionality, replacing the PDF export button with a direct print command.

static/css/main.css

@@ -96,7 +96,7 @@
   --border: 1px;
   --depth: 1;
   --noise: 0;
-  --chart-grid-color: color-mix(in oklch, var(--color-base-content) 22%, transparent);
+  --chart-grid-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
 }
 
 @plugin "daisyui/theme" {
@@ -133,7 +133,7 @@
   --border: 1px;
   --depth: 1;
   --noise: 0;
-  --chart-grid-color: color-mix(in oklch, var(--color-base-content) 22%, transparent);
+  --chart-grid-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
 }
 
 /* VTB gradient (both themes) */
@@ -229,16 +229,64 @@ label.swap:focus-within:not(.theme-toggle) {
 @source "../../templates";
 
 /* --- Print (Save as PDF) --- */
+@page {
+  size: A4;
+  margin: 15mm;
+}
+
 @media print {
+  /* Force printable area width (A4 minus margins) so layout doesn't use screen width */
+  html {
+    width: 180mm !important;
+    min-width: 180mm !important;
+    max-width: 180mm !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow-x: hidden !important;
+  }
+  body {
+    width: 180mm !important;
+    min-width: 180mm !important;
+    max-width: 180mm !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow-x: hidden !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    box-sizing: border-box !important;
+  }
+  body *,
+  body *::before,
+  body *::after {
+    box-sizing: border-box !important;
+  }
+  /* Allow flex/grid children to shrink so they don't force overflow */
+  body * {
+    min-width: 0 !important;
+  }
   .no-print {
     display: none !important;
   }
   .print-only {
     display: block !important;
   }
+  /* Main and content: stay within body width */
+  main.container {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0.5rem 0.5rem 0 !important;
+    min-width: 0 !important;
+  }
+  #dashboard-content {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    overflow-x: hidden !important;
+    padding: 0.5rem 0 !important;
+  }
   /* Keep card backgrounds and colors when printing */
   .card,
-  main,
   .badge,
   .progress {
     -webkit-print-color-adjust: exact;
@@ -253,9 +301,39 @@ label.swap:focus-within:not(.theme-toggle) {
     break-inside: avoid;
     page-break-inside: avoid;
   }
-  /* Reduce top padding so content starts higher */
-  main {
-    padding-top: 0.5rem !important;
+  /* Tables: fit to page, allow column shrink */
+  .overflow-x-auto {
+    max-width: 100% !important;
+    overflow-x: visible !important;
+  }
+  .table {
+    table-layout: fixed !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  .table td,
+  .table th {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* Chart: constrain so it doesn't overflow (canvas has fixed size from Chart.js) */
+  section[aria-label="CPU distribution chart"] .card-body {
+    max-width: 100% !important;
+    overflow: hidden !important;
+  }
+  section[aria-label="CPU distribution chart"] .h-48,
+  section[aria-label="CPU distribution chart"] [class*="h-48"] {
+    max-width: 100% !important;
+    min-height: 10rem !important;
+  }
+  section[aria-label="CPU distribution chart"] canvas {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+  /* Navbar fits page width */
+  .navbar {
+    width: 100% !important;
+    max-width: 100% !important;
   }
 }
 @media screen {

static/js/dashboard.js

@@ -265,7 +265,21 @@
                     }
                 },
                 scales: {
-                    y: { beginAtZero: true, max: 100, grid: { drawBorder: false, color: gridColor }, ticks: { color: textColor, callback: function(value) { return value + '%'; } } },
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        grid: {
+                            drawBorder: false,
+                            color: gridColor,
+                            lineWidth: 0.5,
+                            tickBorderDash: [4, 4]
+                        },
+                        ticks: {
+                            stepSize: 25,
+                            color: textColor,
+                            callback: function(value) { return value + '%'; }
+                        }
+                    },
                     x: { grid: { display: false }, ticks: { display: false }, barPercentage: 1, categoryPercentage: 0.85 }
                 }
             }