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.

static/css/forms.css

@@ -0,0 +1,102 @@
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: 1.25rem;
+}
+
+.form-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	gap: 1.25rem;
+}
+
+.form-group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.form-group label {
+	font-weight: 600;
+	color: var(--text);
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+	padding: 0.75rem 0.85rem;
+	border-radius: var(--radius-sm);
+	border: 1px solid var(--card-border);
+	background: rgba(8, 12, 19, 0.78);
+	color: var(--text);
+	transition: border-color 0.15s ease, background 0.2s ease,
+		box-shadow 0.2s ease;
+}
+
+.form-group textarea {
+	resize: vertical;
+	min-height: 120px;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+	outline: 2px solid var(--brand-2);
+	outline-offset: 1px;
+}
+
+.form-group input:disabled,
+.form-group select:disabled,
+.form-group textarea:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.form-group--error input,
+.form-group--error select,
+.form-group--error textarea {
+	border-color: rgba(209, 75, 75, 0.6);
+	box-shadow: 0 0 0 1px rgba(209, 75, 75, 0.3);
+}
+
+.field-help {
+	margin: 0;
+	font-size: 0.85rem;
+	color: var(--color-text-subtle);
+}
+
+.field-error {
+	margin: 0;
+	font-size: 0.85rem;
+	color: var(--danger);
+}
+
+.form-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.75rem;
+	justify-content: flex-end;
+}
+
+.form-fieldset {
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius);
+	background: rgba(21, 27, 35, 0.85);
+	box-shadow: var(--shadow);
+	padding: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1.25rem;
+}
+
+.form-fieldset legend {
+	font-weight: 700;
+	padding: 0 0.5rem;
+	color: var(--text);
+}
+
+@media (max-width: 640px) {
+	.form-actions {
+		justify-content: stretch;
+	}
+}

static/css/imports.css

@@ -35,18 +35,6 @@
   gap: 0.5rem;
 }
 
-.btn-ghost {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  color: var(--text-muted);
-}
-
-.btn-ghost:hover {
-  color: var(--primary-color);
-}
-
 .toast {
   position: fixed;
   right: 1rem;

static/css/main.css

@@ -19,11 +19,25 @@
   --color-text-dark: #0f172a;
   --color-text-strong: #111827;
   --color-border: rgba(255, 255, 255, 0.08);
+  --card-border: rgba(255, 255, 255, 0.08);
   --color-border-strong: rgba(255, 255, 255, 0.12);
   --color-highlight: rgba(241, 178, 26, 0.08);
   --color-panel-shadow: rgba(0, 0, 0, 0.25);
   --color-panel-shadow-deep: rgba(0, 0, 0, 0.35);
   --color-surface-alt: rgba(21, 27, 35, 0.7);
+  --btn-primary-bg: var(--brand-2);
+  --btn-primary-color: var(--color-text-dark);
+  --btn-primary-hover: var(--brand-3);
+  --btn-secondary-bg: rgba(21, 27, 35, 0.85);
+  --btn-secondary-hover: rgba(21, 27, 35, 0.95);
+  --btn-secondary-border: var(--color-border-strong);
+  --btn-secondary-color: var(--text);
+  --btn-danger-bg: var(--danger);
+  --btn-danger-color: #ffffff;
+  --btn-danger-hover: #e56a6a;
+  --btn-link-color: var(--brand-2);
+  --btn-link-hover: var(--brand-3);
+  --btn-ghost-color: var(--muted);
   --space-2xs: 0.25rem;
   --space-xs: 0.5rem;
   --space-sm: 0.75rem;
@@ -887,36 +901,6 @@ a.sidebar-brand:focus {
   font-size: var(--font-size-lg);
 }
 
-.form-grid {
-  display: grid;
-  gap: var(--space-md);
-  max-width: 480px;
-}
-
-.form-grid label {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  font-weight: 600;
-  color: var(--text);
-}
-
-.form-grid input,
-.form-grid textarea,
-.form-grid select {
-  padding: 0.6rem var(--space-sm);
-  border: 1px solid var(--color-border-strong);
-  border-radius: 8px;
-  font-size: var(--font-size-base);
-}
-
-.form-grid input:focus,
-.form-grid textarea:focus,
-.form-grid select:focus {
-  outline: 2px solid var(--brand-2);
-  outline-offset: 1px;
-}
-
 .btn {
   display: inline-flex;
   align-items: center;
@@ -924,37 +908,121 @@ a.sidebar-brand:focus {
   gap: 0.5rem;
   padding: 0.65rem 1.25rem;
   border-radius: 999px;
-  border: none;
+  border: 1px solid var(--btn-secondary-border);
   cursor: pointer;
   font-weight: 600;
-  background-color: var(--brand);
+  background-color: var(--btn-secondary-bg);
-  color: var(--color-text-dark);
+  color: var(--btn-secondary-color);
   text-decoration: none;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease,
+    background-color 0.2s ease, border-color 0.2s ease;
 }
 
 .btn:hover,
 .btn:focus {
   transform: translateY(-1px);
   box-shadow: 0 4px 10px var(--color-panel-shadow);
+  background-color: var(--btn-secondary-hover);
 }
 
-.btn.primary {
+.btn--primary,
-  background-color: var(--brand-2);
+.btn.primary,
-  color: var(--color-text-dark);
+.btn.btn-primary {
+  background-color: var(--btn-primary-bg);
+  border-color: transparent;
+  color: var(--btn-primary-color);
 }
 
+.btn--primary:hover,
+.btn--primary:focus,
 .btn.primary:hover,
-.btn.primary:focus {
+.btn.primary:focus,
-  background-color: var(--brand-3);
+.btn.btn-primary:hover,
+.btn.btn-primary:focus {
+  background-color: var(--btn-primary-hover);
 }
 
-.btn.btn-link {
+.btn--secondary,
-  background: var(--brand);
+.btn.secondary,
-  color: var(--color-text-dark);
+.btn.btn-secondary {
-  text-decoration: none;
+  background-color: var(--btn-secondary-bg);
-  border: 1px solid var(--brand);
+  border-color: var(--btn-secondary-border);
-  margin-bottom: 0.5rem;
+  color: var(--btn-secondary-color);
+}
+
+.btn--secondary:hover,
+.btn--secondary:focus,
+.btn.secondary:hover,
+.btn.secondary:focus,
+.btn.btn-secondary:hover,
+.btn.btn-secondary:focus {
+  background-color: var(--btn-secondary-hover);
+}
+
+.btn--danger,
+.btn.danger,
+.btn.btn-danger {
+  background-color: var(--btn-danger-bg);
+  border-color: transparent;
+  color: var(--btn-danger-color);
+}
+
+.btn--danger:hover,
+.btn--danger:focus,
+.btn.danger:hover,
+.btn.danger:focus,
+.btn.btn-danger:hover,
+.btn.btn-danger:focus {
+  background-color: var(--btn-danger-hover);
+}
+
+.btn--link,
+.btn.btn-link,
+.btn.link {
+  padding: 0.25rem 0;
+  border: none;
+  background: transparent;
+  color: var(--btn-link-color);
+  margin: 0;
+  box-shadow: none;
+}
+
+.btn--link:hover,
+.btn--link:focus,
+.btn.btn-link:hover,
+.btn.btn-link:focus,
+.btn.link:hover,
+.btn.link:focus {
+  transform: none;
+  box-shadow: none;
+  color: var(--btn-link-hover);
+  text-decoration: underline;
+}
+
+.btn--ghost,
+.btn.btn-ghost {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--btn-ghost-color);
+}
+
+.btn--ghost:hover,
+.btn--ghost:focus,
+.btn.btn-ghost:hover,
+.btn.btn-ghost:focus {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.btn--icon {
+  padding: 0.4rem;
+  border-radius: 50%;
+  line-height: 0;
+}
+
+.btn--icon:hover,
+.btn--icon:focus {
+  transform: none;
 }
 
 .result-output {

static/css/projects.css

@@ -108,7 +108,7 @@
   flex-wrap: wrap;
 }
 
-.project-card__links .btn-link {
+.project-card__links .btn--link {
   padding: 3px 4px;
   border-radius: 8px;
 }
@@ -342,7 +342,7 @@
   flex-wrap: wrap;
 }
 
-.scenario-item__actions .btn-link {
+.scenario-item__actions .btn--link {
   padding: 0;
 }
 
@@ -421,37 +421,3 @@
     max-width: 70%;
   }
 }
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1.25rem;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-group input,
-.form-group select,
-.form-group textarea {
-  padding: 0.75rem 0.85rem;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--card-border);
-  background: rgba(8, 12, 19, 0.75);
-  color: var(--text);
-}
-
-.form-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}

static/css/scenarios.css

@@ -120,63 +120,6 @@
   margin: 0;
 }
 
-.scenario-form .form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 1.25rem;
-}
-
-.scenario-form .form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.scenario-form .form-group label {
-  font-weight: 600;
-  color: var(--text);
-}
-
-.scenario-form .form-group input,
-.scenario-form .form-group select,
-.scenario-form .form-group textarea {
-  padding: 0.75rem 0.85rem;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--card-border);
-  background: rgba(8, 12, 19, 0.78);
-  color: var(--text);
-}
-
-.scenario-form .form-group textarea {
-  resize: vertical;
-}
-
-.scenario-form .form-group input:focus,
-.scenario-form .form-group select:focus,
-.scenario-form .form-group textarea:focus {
-  outline: 2px solid var(--brand-2);
-  outline-offset: 1px;
-}
-
-.form-group--error input,
-.form-group--error select,
-.form-group--error textarea {
-  border-color: rgba(209, 75, 75, 0.6);
-  box-shadow: 0 0 0 1px rgba(209, 75, 75, 0.3);
-}
-
-.field-help {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--color-text-subtle);
-}
-
-.field-error {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--danger);
-}
-
 .table-responsive {
   width: 100%;
   overflow-x: auto;
@@ -396,7 +339,7 @@
   flex-wrap: wrap;
 }
 
-.scenario-item__actions .btn-link {
+.scenario-item__actions .btn--link {
   padding: 0;
 }
 

templates/base.html

@@ -4,8 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{% block title %}CalMiner{% endblock %}</title>
-    <link rel="stylesheet" href="/static/css/main.css" />
+  <link rel="stylesheet" href="/static/css/main.css" />
-    <link rel="stylesheet" href="/static/css/imports.css" />
+  <link rel="stylesheet" href="/static/css/forms.css" />
+  <link rel="stylesheet" href="/static/css/imports.css" />
     {% block head_extra %}{% endblock %}
   </head>
   <body>

templates/exports/modal.html

@@ -9,7 +9,7 @@
         <h5 class="modal-title">Export {{ dataset|capitalize }}</h5>
         <button
           type="button"
-          class="btn-close"
+          class="btn btn--ghost btn--icon"
           data-dismiss="modal"
           aria-label="Close"
         ></button>
@@ -40,10 +40,10 @@
           >
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          <button type="button" class="btn btn--secondary" data-dismiss="modal">
             Cancel
           </button>
-          <button type="submit" class="btn btn-primary">Download</button>
+          <button type="submit" class="btn btn--primary">Download</button>
         </div>
         <p class="form-error hidden" data-export-error></p>
       </form>

templates/imports/ui.html

@@ -24,8 +24,8 @@
   {% include "partials/import_preview_table.html" %}
 
       <div class="import-actions hidden" data-import-actions>
-        <button class="btn primary" data-import-commit disabled>Commit Import</button>
+        <button class="btn btn--primary" data-import-commit disabled>Commit Import</button>
-        <button class="btn" data-import-cancel>Cancel</button>
+        <button class="btn btn--secondary" data-import-cancel>Cancel</button>
       </div>
     </div>
   </section>

templates/login.html

@@ -26,7 +26,7 @@
       <label for="password">Password:</label>
       <input type="password" id="password" name="password" required />
     </div>
-    <button type="submit" class="btn primary">Login</button>
+  <button type="submit" class="btn btn--primary">Login</button>
   </form>
   <p>Don't have an account? <a href="/register">Register here</a></p>
   <p><a href="/forgot-password">Forgot password?</a></p>

templates/partials/import_upload.html

@@ -9,7 +9,7 @@
   <div class="import-upload__dropzone" data-import-dropzone>
     <span class="icon-upload" aria-hidden="true"></span>
     <p>Drag & drop CSV/XLSX files here or</p>
-    <label class="btn secondary">
+  <label class="btn btn--secondary">
       Browse
       <input type="file" name="import-file" accept=".csv,.xlsx" hidden />
     </label>
@@ -17,8 +17,8 @@
   </div>
 
   <div class="import-upload__actions">
-    <button type="button" class="btn primary" data-import-upload-trigger disabled>Upload & Preview</button>
+  <button type="button" class="btn btn--primary" data-import-upload-trigger disabled>Upload & Preview</button>
-    <button type="button" class="btn" data-import-reset hidden>Reset</button>
+  <button type="button" class="btn btn--secondary" data-import-reset hidden>Reset</button>
   </div>
 
   {{ feedback("import-upload-feedback", hidden=True, role="alert") }}

templates/projects/detail.html

@@ -17,9 +17,9 @@
       <p class="text-muted">{{ project.operation_type.value.replace('_', ' ') | title }}</p>
     </div>
     <div class="header-actions">
-      <a class="btn" href="{{ url_for('scenarios.project_scenario_list', project_id=project.id) }}">Manage Scenarios</a>
+  <a class="btn btn--secondary" href="{{ url_for('scenarios.project_scenario_list', project_id=project.id) }}">Manage Scenarios</a>
-      <a class="btn" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit Project</a>
+  <a class="btn btn--secondary" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit Project</a>
-      <a class="btn primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
+  <a class="btn btn--primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
     </div>
   </header>
 
@@ -99,7 +99,7 @@
           <h2>Scenarios</h2>
           <p class="text-muted">Project scenarios inherit pricing and provide entry points to profitability planning.</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">
@@ -126,8 +126,8 @@
                 </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.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="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
               </div>
             </li>
           {% endfor %}

templates/projects/form.html

@@ -26,8 +26,8 @@
         <p class="text-muted">Provide core information about the mining project.</p>
       </div>
       <div class="header-actions">
-        <a class="btn" href="{{ cancel_url }}">Cancel</a>
+  <a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
-        <button class="btn primary" type="submit">Save Project</button>
+  <button class="btn btn--primary" type="submit">Save Project</button>
       </div>
     </header>
 
@@ -58,8 +58,8 @@
     </div>
 
     <div class="form-actions">
-      <a class="btn" href="{{ cancel_url }}">Cancel</a>
+  <a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
-      <button class="btn primary" type="submit">Save Project</button>
+  <button class="btn btn--primary" type="submit">Save Project</button>
     </div>
   </form>
 {% endblock %}

templates/projects/list.html

@@ -19,7 +19,7 @@
         data-project-filter
         aria-label="Filter projects"
       />
-      <a class="btn btn-primary" href="{{ url_for('projects.create_project_form') }}">New Project</a>
+  <a class="btn btn--primary" href="{{ url_for('projects.create_project_form') }}">New Project</a>
     </div>
   </section>
 
@@ -55,12 +55,12 @@
 
           <footer class="project-card__footer">
             <div class="project-card__links">
-              <a class="btn btn-link" href="{{ url_for('projects.view_project', project_id=project.id) }}">View Project</a>
+              <a class="btn btn--link" href="{{ url_for('projects.view_project', project_id=project.id) }}">View Project</a>
-              <a class="btn btn-link" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
+              <a class="btn btn--link" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
-              <a class="btn btn-link" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit</a>
+              <a class="btn btn--link" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit</a>
             </div>
             <button
-              class="btn btn-ghost"
+              class="btn btn--ghost"
               data-export-trigger
               data-export-target="projects"
               title="Export projects dataset"

templates/register.html

@@ -36,7 +36,7 @@ content %}
       <label for="password">Password:</label>
       <input type="password" id="password" name="password" required />
     </div>
-    <button type="submit" class="btn primary">Register</button>
+  <button type="submit" class="btn btn--primary">Register</button>
   </form>
   <p>Already have an account? <a href="/login">Login here</a></p>
 </div>

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 btn--secondary" href="{{ scenario_list_href }}">Scenario Portfolio</a>
-      <a class="btn" href="{{ profitability_href }}">Profitability Calculator</a>
+  <a class="btn btn--secondary" href="{{ profitability_href }}">Profitability Calculator</a>
-      <a class="btn" href="{{ opex_href }}">Opex Planner</a>
+  <a class="btn btn--secondary" href="{{ opex_href }}">Opex Planner</a>
-      <a class="btn" href="{{ capex_href }}">Capex Planner</a>
+  <a class="btn btn--secondary" 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--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>
+  <a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
-        <button class="btn primary" type="submit">Save Scenario</button>
+  <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>
+  <a class="btn btn--secondary" href="{{ cancel_url }}">Cancel</a>
-      <button class="btn primary" type="submit">Save Scenario</button>
+  <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 btn--secondary" 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--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.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="{{ 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="{{ profitability_href }}">Profitability</a>
-                <a class="btn btn-link" href="{{ opex_href }}">Opex</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="{{ 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>