From 9e10a2f52151c26913eb4c087a7b38cad1e7a69b Mon Sep 17 00:00:00 2001
From: aasandei-vsp <andreea.asandei@vspartners.us>
Date: Sat, 12 Sep 2026 17:26:19 +0300
Subject: [PATCH] Soften the focus ring on form controls

Since we upgrated to Bootstrap 5, the focus ring on inputs became a
solid block instead of being a soft shadow.

In order to revert this change, the best solution is to override the
bootstrap 5 variables that provide that shadow effect, instead of just
adding a blur to the input itelf.

Issue: PER-10673
---
 src/styles/_variables.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 461efc5b2..e71d4ede7 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -181,7 +181,13 @@ $linear-gradient-background: linear-gradient(90deg, #131b4a 0%, #364493 100%);
 $input-border-color: $gray-400;
 $input-focus-border-color: $form-border-focus;
 $input-focus-bg: white;
-$input-focus-box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
+
+$focus-ring-width: 0.125rem;
+$focus-ring-opacity: 0.35;
+$focus-ring-blur: 0.25rem;
+$focus-ring-color: rgba($primary, $focus-ring-opacity);
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
+$form-select-focus-box-shadow: $focus-ring-box-shadow;
 
 @import 'bootstrap/scss/variables';
 @import 'utilities';