further refinement of roi calculator

hub/services/static/css/roi-calculator.css

@@ -101,14 +101,109 @@
 
 .chart-container {
     position: relative;
-    height: 400px;
     background: white;
     border-radius: 8px;
-    padding: 1rem;
+    padding: 1.5rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     margin-bottom: 1.5rem;
 }
 
+/* Enhanced chart sizing for new layout */
+.chart-container canvas {
+    max-height: 400px;
+}
+
+/* Full-width chart containers */
+.card-body canvas {
+    width: 100% !important;
+}
+
+/* Primary chart gets extra height */
+#instanceGrowthChart {
+    height: 500px !important;
+}
+
+/* Secondary charts get good height */
+#revenueChart, #cashFlowChart, #modelComparisonChart {
+    height: 400px !important;
+}
+
+/* Enhanced layout styles for new design */
+.sticky-top {
+    z-index: 1020;
+}
+
+.card {
+    transition: box-shadow 0.15s ease-in-out;
+}
+
+.card:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Compact header controls */
+.form-range {
+    height: 4px;
+}
+
+.input-group-sm .form-control,
+.form-select-sm,
+.btn-sm {
+    font-size: 0.825rem;
+}
+
+/* Clean chart headers */
+.card-header {
+    background: white !important;
+    border: none !important;
+    padding-bottom: 0.5rem;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+/* Responsive chart heights */
+@media (max-width: 768px) {
+    #instanceGrowthChart {
+        height: 350px !important;
+    }
+    
+    #revenueChart, #cashFlowChart, #modelComparisonChart {
+        height: 300px !important;
+    }
+    
+    .card-body {
+        padding: 1rem;
+    }
+}
+
+@media (max-width: 576px) {
+    #instanceGrowthChart {
+        height: 250px !important;
+    }
+    
+    #revenueChart, #cashFlowChart, #modelComparisonChart {
+        height: 200px !important;
+    }
+}
+
+/* Manual collapse functionality */
+.collapse {
+    display: none;
+}
+
+.collapse.show {
+    display: block;
+}
+
+.collapsing {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+}
+
 .export-buttons {
     position: sticky;
     top: 20px;