CUB-42: Show filament cost and usage in UI

frontend/src/app/components/filament-table/filament-table.component.scss

@@ -55,7 +55,7 @@ $color-inactive: #94a3b8;  // Gray — inactive spool
 // Table styling
 .filament-table {
   width: 100%;
-  min-width: 700px;
+  min-width: 900px;
 
   th {
     font-weight: 600;
@@ -132,6 +132,48 @@ $color-inactive: #94a3b8;  // Gray — inactive spool
   letter-spacing: 0.02em;
 }
 
+// Cost cell
+.cost-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 80px;
+
+  .cost-price {
+    font-weight: 600;
+    color: var(--mat-sys-on-surface);
+  }
+
+  .cost-per-gram {
+    font-size: 11px;
+    color: var(--mat-sys-on-surface-variant);
+    letter-spacing: 0.02em;
+  }
+
+  .cost-unknown {
+    color: var(--mat-sys-on-surface-variant);
+    font-style: italic;
+  }
+}
+
+// Usage cell
+.usage-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 100px;
+
+  .usage-grams {
+    font-weight: 500;
+    color: var(--mat-sys-on-surface);
+  }
+
+  .usage-remaining {
+    font-size: 12px;
+    color: var(--mat-sys-on-surface-variant);
+  }
+}
+
 // Remaining weight cell
 .remaining-cell {
   display: flex;