merging code

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

src/app/clients/clients-view/general-tab/general-tab.component.scss

@@ -24,7 +24,7 @@ $gray-300: #dadce0;
 $gray-600: #5f6368;
 $gray-700: #3c4043;
 $gray-900: #202124;
-$white: #ffffff;
+$white: #fff;
 $red: #d93025;
 
 // ── Main Container ──
@@ -41,7 +41,7 @@ $red: #d93025;
     font-size: 16px;
     font-weight: 600;
     color: $gray-900;
-    margin: 0 0 16px 0;
+    margin: 0 0 16px;
   }
 }
 
@@ -58,12 +58,16 @@ $red: #d93025;
   background: $white;
   border-radius: 10px;
   padding: 18px 20px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 1px 3px rgb(0 0 0 / 8%),
+    0 1px 2px rgb(0 0 0 / 6%);
   border-left: 4px solid transparent;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 
   &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
     transform: translateY(-2px);
   }
 
@@ -106,6 +110,7 @@ $red: #d93025;
   // Color variants
   &--blue {
     border-left-color: $primary-blue;
+
     .stat-card__icon {
       background: $primary-blue-light;
       color: $primary-blue;
@@ -114,6 +119,7 @@ $red: #d93025;
 
   &--green {
     border-left-color: $green;
+
     .stat-card__icon {
       background: $green-light;
       color: $green;
@@ -122,6 +128,7 @@ $red: #d93025;
 
   &--purple {
     border-left-color: $purple;
+
     .stat-card__icon {
       background: $purple-light;
       color: $purple;
@@ -130,6 +137,7 @@ $red: #d93025;
 
   &--teal {
     border-left-color: $teal;
+
     .stat-card__icon {
       background: $teal-light;
       color: $teal;
@@ -138,6 +146,7 @@ $red: #d93025;
 
   &--orange {
     border-left-color: $orange;
+
     .stat-card__icon {
       background: $orange-light;
       color: $orange;
@@ -204,7 +213,7 @@ $red: #d93025;
 .table-wrapper {
   border-radius: 0 0 8px 8px;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
   border: 1px solid $gray-200;
   border-top: none;
 
@@ -214,6 +223,7 @@ $red: #d93025;
 }
 
 // ── Mat Table Styling ──
+/* stylelint-disable selector-no-qualifying-type */
 table[mat-table] {
   width: 100%;
   border-collapse: collapse;
@@ -307,6 +317,7 @@ table[mat-table] {
     font-size: 12px;
   }
 }
+/* stylelint-enable selector-no-qualifying-type */
 
 // Status color classes (for the fa-stop dots)
 :host ::ng-deep {
@@ -370,7 +381,7 @@ table[mat-table] {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -384,7 +395,7 @@ table[mat-table] {
   width: 85%;
   max-width: 900px;
   position: relative;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
 }
 
 .pdf-modal-close {