Add form styles and update button classes for consistency

- Introduced a new CSS file for form styles (forms.css) to enhance form layout and design.
- Removed deprecated button styles from imports.css and updated button classes across templates to use the new utility classes.
- Updated various templates to reflect the new button styles, ensuring a consistent look and feel throughout the application.
- Refactored form-related styles in main.css and removed redundant styles from projects.css and scenarios.css.
- Ensured responsive design adjustments for form actions in smaller viewports.

templates/scenarios/capex.html

@@ -20,16 +20,16 @@
     </div>
     <div class="header-actions">
       {% if scenario_url %}
-        <a class="btn" href="{{ scenario_url }}">Scenario Overview</a>
+        <a class="btn btn--secondary" href="{{ scenario_url }}">Scenario Overview</a>
       {% elif project_url %}
-        <a class="btn" href="{{ project_url }}">Project Overview</a>
+        <a class="btn btn--secondary" href="{{ project_url }}">Project Overview</a>
       {% elif cancel_url %}
-        <a class="btn" href="{{ cancel_url }}">Back</a>
+        <a class="btn btn--secondary" href="{{ cancel_url }}">Back</a>
       {% endif %}
       {% if scenario_portfolio_url %}
-        <a class="btn" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
+        <a class="btn btn--secondary" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
       {% endif %}
-      <button class="btn primary" type="submit" form="capex-form">Save &amp; Calculate</button>
+      <button class="btn btn--primary" type="submit" form="capex-form">Save &amp; Calculate</button>
     </div>
   </header>
 
@@ -66,7 +66,7 @@
         </header>
 
         <div class="table-actions">
-          <button class="btn secondary" type="button" data-action="add-component">Add Component</button>
+          <button class="btn btn--secondary" type="button" data-action="add-component">Add Component</button>
         </div>
 
         {% if component_errors is defined and component_errors %}
@@ -131,7 +131,7 @@
                     <input type="text" name="components[{{ loop.index0 }}][notes]" value="{{ component.notes or '' }}" />
                   </td>
                   <td class="row-actions">
-                    <button class="btn link" type="button" data-action="remove-component">Remove</button>
+                    <button class="btn btn--link" type="button" data-action="remove-component">Remove</button>
                   </td>
                 </tr>
               {% endfor %}

templates/scenarios/detail.html

@@ -30,11 +30,11 @@
       </p>
     </div>
     <div class="header-actions">
-      <a class="btn" href="{{ scenario_list_href }}">Scenario Portfolio</a>
-      <a class="btn" href="{{ profitability_href }}">Profitability Calculator</a>
-      <a class="btn" href="{{ opex_href }}">Opex Planner</a>
-      <a class="btn" href="{{ capex_href }}">Capex Planner</a>
-      <a class="btn primary" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit Scenario</a>
+  <a class="btn btn--secondary" href="{{ scenario_list_href }}">Scenario Portfolio</a>
+  <a class="btn btn--secondary" href="{{ profitability_href }}">Profitability Calculator</a>
+  <a class="btn btn--secondary" href="{{ opex_href }}">Opex Planner</a>
+  <a class="btn btn--secondary" href="{{ capex_href }}">Capex Planner</a>
+  <a class="btn btn--primary" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit Scenario</a>
     </div>
   </header>
 

templates/scenarios/form.html

@@ -32,8 +32,8 @@
         <p class="text-muted">Scenarios inherit pricing defaults from <strong>{{ project.name }}</strong>.</p>
       </div>
       <div class="header-actions">
-        <a class="btn" href="{{ cancel_url }}">Cancel</a>
-        <button class="btn primary" type="submit">Save Scenario</button>
+  <a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
+  <button class="btn btn--primary" type="submit">Save Scenario</button>
       </div>
     </header>
 
@@ -145,8 +145,8 @@
     </section>
 
     <div class="form-actions">
-      <a class="btn" href="{{ cancel_url }}">Cancel</a>
-      <button class="btn primary" type="submit">Save Scenario</button>
+  <a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
+  <button class="btn btn--primary" type="submit">Save Scenario</button>
     </div>
   </form>
 {% endblock %}

templates/scenarios/list.html

@@ -18,8 +18,8 @@
       <p class="text-muted">Assumption sets and calculators for {{ project.name }}</p>
     </div>
     <div class="header-actions">
-      <a class="btn" href="{{ url_for('projects.view_project', project_id=project.id) }}">Project Overview</a>
-      <a class="btn primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
+      <a class="btn btn--secondary" href="{{ url_for('projects.view_project', project_id=project.id) }}">Project Overview</a>
+      <a class="btn btn--primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
     </div>
   </header>
 
@@ -91,7 +91,7 @@
           <h2>Scenario Portfolio</h2>
           <p class="text-muted">Each scenario below inherits pricing defaults and links directly into calculators.</p>
         </div>
-        <a class="btn" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
+  <a class="btn btn--secondary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
       </header>
       {% if scenarios %}
         <ul class="scenario-list">
@@ -125,11 +125,11 @@
                 </dl>
               </div>
               <div class="scenario-item__actions">
-                <a class="btn btn-link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
-                <a class="btn btn-link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
-                <a class="btn btn-link" href="{{ profitability_href }}">Profitability</a>
-                <a class="btn btn-link" href="{{ opex_href }}">Opex</a>
-                <a class="btn btn-link" href="{{ capex_href }}">Capex</a>
+                <a class="btn btn--link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
+                <a class="btn btn--link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
+                <a class="btn btn--link" href="{{ profitability_href }}">Profitability</a>
+                <a class="btn btn--link" href="{{ opex_href }}">Opex</a>
+                <a class="btn btn--link" href="{{ capex_href }}">Capex</a>
               </div>
             </li>
           {% endfor %}

templates/scenarios/opex.html

@@ -20,16 +20,16 @@
     </div>
     <div class="header-actions">
       {% if scenario_url %}
-        <a class="btn" href="{{ scenario_url }}">Scenario Overview</a>
+        <a class="btn btn--secondary" href="{{ scenario_url }}">Scenario Overview</a>
       {% elif project_url %}
-        <a class="btn" href="{{ project_url }}">Project Overview</a>
+        <a class="btn btn--secondary" href="{{ project_url }}">Project Overview</a>
       {% elif cancel_url %}
-        <a class="btn" href="{{ cancel_url }}">Back</a>
+        <a class="btn btn--secondary" href="{{ cancel_url }}">Back</a>
       {% endif %}
       {% if scenario_portfolio_url %}
-        <a class="btn" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
+        <a class="btn btn--secondary" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
       {% endif %}
-      <button class="btn primary" type="submit" form="opex-form">Save &amp; Calculate</button>
+      <button class="btn btn--primary" type="submit" form="opex-form">Save &amp; Calculate</button>
     </div>
   </header>
 
@@ -66,7 +66,7 @@
         </header>
 
         <div class="table-actions">
-          <button class="btn secondary" type="button" data-action="add-opex-component">Add Component</button>
+          <button class="btn btn--secondary" type="button" data-action="add-opex-component">Add Component</button>
         </div>
 
         {% if component_errors %}
@@ -142,7 +142,7 @@
                     <input type="number" min="1" step="1" name="components[{{ loop.index0 }}][period_end]" value="{{ component.period_end or '' }}" />
                   </td>
                   <td class="row-actions">
-                    <button class="btn link" type="button" data-action="remove-opex-component">Remove</button>
+                    <button class="btn btn--link" type="button" data-action="remove-opex-component">Remove</button>
                   </td>
                 </tr>
               {% endfor %}

templates/scenarios/profitability.html

@@ -20,16 +20,16 @@
     </div>
     <div class="header-actions">
       {% if scenario_url %}
-        <a class="btn" href="{{ scenario_url }}">Scenario Overview</a>
+        <a class="btn btn--secondary" href="{{ scenario_url }}">Scenario Overview</a>
       {% elif project_url %}
-        <a class="btn" href="{{ project_url }}">Project Overview</a>
+        <a class="btn btn--secondary" href="{{ project_url }}">Project Overview</a>
       {% elif cancel_url %}
-        <a class="btn" href="{{ cancel_url }}">Back</a>
+        <a class="btn btn--secondary" href="{{ cancel_url }}">Back</a>
       {% endif %}
       {% if scenario_portfolio_url %}
-        <a class="btn" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
+        <a class="btn btn--secondary" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
       {% endif %}
-      <button class="btn primary" type="submit" form="profitability-form">Run Calculation</button>
+      <button class="btn btn--primary" type="submit" form="profitability-form">Run Calculation</button>
     </div>
   </header>