Fix button styling using CSS variables for FluentUI buttons

Co-authored-by: MatthewSteeples <[email protected]>

Author: Copilot

Client/Pages/Edit.razor

@@ -161,9 +161,13 @@
             </div>
 
             <div class="button-group">
-                <FluentButton Type="ButtonType.Submit" style="background-color: #107C10; color: white; border-color: #107C10;">Save</FluentButton>
+                <div class="save-button-container">
+                    <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Save</FluentButton>
+                </div>
                 <FluentButton @onclick="Cancel" Appearance="Appearance.Neutral">Cancel</FluentButton>
-                <FluentButton @onclick="Delete" style="background-color: #d32f2f; color: white; border-color: #d32f2f;">Delete</FluentButton>
+                <div class="delete-button-container">
+                    <FluentButton @onclick="Delete" Appearance="Appearance.Accent">Delete</FluentButton>
+                </div>
             </div>
         </EditForm>
     </FluentCard>

Client/Pages/Edit.razor.css

@@ -289,40 +289,26 @@
 }
 
 /* Custom button styling */
-::deep .delete-button::part(control),
-::deep .delete-button::part(content),
-::deep .delete-button::part(start),
-::deep .delete-button::part(end),
-::deep .delete-button::part(root) {
-    background-color: #d32f2f !important;
-    color: white !important;
-    border-color: #d32f2f !important;
-    fill: white !important;
-}
-
-::deep .delete-button:hover::part(control),
-::deep .delete-button:hover::part(content),
-::deep .delete-button:hover::part(root) {
-    background-color: #b71c1c !important;
-    border-color: #b71c1c !important;
-}
-
-::deep .save-button::part(control),
-::deep .save-button::part(content),
-::deep .save-button::part(start),
-::deep .save-button::part(end),
-::deep .save-button::part(root) {
-    background-color: #107C10 !important;
-    color: white !important;
-    border-color: #107C10 !important;
-    fill: white !important;
-}
-
-::deep .save-button:hover::part(control),
-::deep .save-button:hover::part(content),
-::deep .save-button:hover::part(root) {
-    background-color: #0b5e0b !important;
-    border-color: #0b5e0b !important;
+.save-button-container ::deep fluent-button {
+    --accent-fill-rest: #107C10 !important;
+    --accent-fill-hover: #0b5e0b !important;
+    --accent-fill-active: #0b5e0b !important;
+    --accent-fill-focus: #107C10 !important;
+    --accent-foreground-rest: white !important;
+    --accent-foreground-hover: white !important;
+    --accent-foreground-active: white !important;
+    --accent-foreground-focus: white !important;
+}
+
+.delete-button-container ::deep fluent-button {
+    --accent-fill-rest: #d32f2f !important;
+    --accent-fill-hover: #b71c1c !important;
+    --accent-fill-active: #b71c1c !important;
+    --accent-fill-focus: #d32f2f !important;
+    --accent-foreground-rest: white !important;
+    --accent-foreground-hover: white !important;
+    --accent-foreground-active: white !important;
+    --accent-foreground-focus: white !important;
 }
 
 /* Responsive design */