Updates

BudgetApp/wwwroot/app.css

@@ -1,5 +1,6 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    scrollbar-gutter: stable;
 }
 
 a, .btn-link {
@@ -29,11 +30,21 @@ h1:focus {
 }
 
 .invalid {
-    outline: 1px solid #e50000;
+    outline: 2px solid #dc3545;
+    outline-offset: -2px;
+}
+
+input.invalid:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
+textarea.invalid {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1rem 1rem;
+    padding-right: 2.25rem;
 }
 
 .validation-message {
-    color: #e50000;
+    display: none;
 }
 
 .blazor-error-boundary {
@@ -83,23 +94,13 @@ h1:focus {
 
 /* Cards */
 .card {
-    transition: box-shadow 0.25s ease, transform 0.25s ease;
+    transition: box-shadow 0.25s ease;
 }
 
 .card:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
-/* Balance chips */
-.balance-chip {
-    transition: box-shadow 0.25s ease, transform 0.25s ease;
-}
-
-.balance-chip:hover {
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
-}
-
 /* List group items */
 .list-group-item {
     transition: background-color 0.2s ease, border-left-color 0.2s ease, box-shadow 0.2s ease;
@@ -121,12 +122,19 @@ h1:focus {
 /* Modal */
 .modal.d-block {
     animation: modalFadeIn 0.2s ease;
+    overflow-y: auto;
 }
 
 .modal.d-block .modal-content {
     animation: modalSlideDown 0.3s ease;
 }
 
+/* Prevent body scroll shift when modal is open */
+body:has(.modal.d-block) {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width, 0px);
+}
+
 /* Buttons */
 .btn {
     transition: transform 0.15s ease, box-shadow 0.15s ease,
@@ -136,6 +144,9 @@ h1:focus {
 
 .btn:active {
     transform: scale(0.96);
+    /* Scale from center so layout dimensions stay fixed */
+    transform-origin: center;
+    will-change: transform;
 }
 
 /* Nav tabs */
@@ -156,4 +167,9 @@ h1:focus {
 /* Chart canvas */
 canvas {
     transition: opacity 0.3s ease;
+}
+
+/* Prevent scrollbar appearance from shifting content width */
+.card-body[style*="overflow-y"] {
+    scrollbar-gutter: stable;
 }