Refactor dialog components to use form-container for improved layout and styling; update button styles for consistency

src/Duempelkas.Desktop/wwwroot/css/app.css

@@ -172,8 +172,6 @@ html, body {
 
 /* Buttons – modern style */
 .btn {
-    border-radius: 0.5rem;
-    font-weight: 500;
     font-size: 0.85rem;
     padding: 0.35rem 0.85rem;
     display: inline-flex;
@@ -208,6 +206,28 @@ html, body {
     border-color: #16a34a;
 }
 
+.btn-danger {
+    background-color: #ef4444;
+    border-color: #ef4444;
+    color: #fff;
+}
+
+.btn-danger:hover {
+    background-color: #dc2626;
+    border-color: #dc2626;
+}
+
+.btn-warning {
+    background-color: #facc15;
+    border-color: #facc15;
+    color: #000;
+}
+
+.btn-warning:hover {
+    background-color: #eab308;
+    border-color: #eab308;
+}
+
 .btn-info {
     background-color: #3b82f6;
     border-color: #3b82f6;
@@ -284,6 +304,32 @@ html, body {
     border-bottom-color: var(--color-border);
 }
 
+/* Form container */
+.form-container {
+  display: grid;
+  /* Col 1: fits largest label | Col 2: takes the rest */
+  grid-template-columns: max-content 1fr;
+  gap: 1rem;
+  align-items: center;
+  max-width: 500px;
+  padding-bottom: 1rem;
+}
+
+/* Ensure the label and input stay on the same row */
+.form-container label {
+  grid-column: 1;
+  font-weight: 600;
+}
+
+.form-container input, 
+.form-container select, 
+.form-container textarea {
+  grid-column: 2;
+  padding: 0.5rem;
+  width: 100%; /* Fill the available space in col 2 */
+  box-sizing: border-box;
+}
+
 /* Form controls in dark */
 .form-control, .form-select {
     background-color: var(--color-bg);