merging code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.scss

@@ -6,6 +6,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+@use 'sass:color';
+
 $primary: #1a73e8;
 $primary-light: #e8f0fe;
 $gray-50: #f8f9fa;
@@ -83,15 +85,15 @@ $teal: #00897b;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
 
-  @media (max-width: 1024px) {
+  @media (width <= 1024px) {
     grid-template-columns: repeat(3, 1fr);
   }
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media (max-width: 480px) {
+  @media (width <= 480px) {
     grid-template-columns: 1fr;
   }
 }
@@ -165,7 +167,7 @@ $teal: #00897b;
 
     &.status-active {
       background: rgba($green, 0.1);
-      color: darken($green, 10%);
+      color: color.adjust($green, $lightness: -10%);
 
       &::before {
         background: $green;
@@ -183,7 +185,7 @@ $teal: #00897b;
 
     &.status-pending {
       background: rgba($orange, 0.1);
-      color: darken($orange, 15%);
+      color: color.adjust($orange, $lightness: -15%);
 
       &::before {
         background: $orange;
@@ -192,7 +194,7 @@ $teal: #00897b;
   }
 
   &.monospace {
-    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+    font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
     font-size: 13px;
     letter-spacing: 0.3px;
   }
@@ -230,7 +232,9 @@ $teal: #00897b;
   padding: 3px 12px;
   border-radius: 12px;
 
-  i { font-size: 12px; }
+  i {
+    font-size: 12px;
+  }
 
   &--verified {
     background: #ecfdf5;