merging code

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

src/app/clients/client-stepper/client-address-step/client-address-step.component.html

@@ -91,7 +91,9 @@
               @if (isFieldEnabled('stateProvinceId')) {
                 <div class="detail-row">
                   <span class="detail-label">{{ 'labels.inputs.State / Province' | translate }}</span>
-                  <span class="detail-value">{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}</span>
+                  <span class="detail-value">{{
+                    getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name
+                  }}</span>
                 </div>
               }
               @if (isFieldEnabled('countryId')) {

src/app/clients/client-stepper/client-address-step/client-address-step.component.scss

@@ -41,11 +41,11 @@
   align-items: center;
   gap: 10px;
   padding: 24px 16px;
-  color: rgba(0, 0, 0, 0.45);
+  color: rgb(0 0 0 / 45%);
   font-size: 14px;
-  background: rgba(0, 0, 0, 0.02);
+  background: rgb(0 0 0 / 2%);
   border-radius: 6px;
-  border: 1px dashed rgba(0, 0, 0, 0.12);
+  border: 1px dashed rgb(0 0 0 / 12%);
 
   .empty-icon {
     font-size: 18px;
@@ -58,7 +58,7 @@
   .panel-icon {
     margin-right: 8px;
     font-size: 13px;
-    color: rgba(0, 0, 0, 0.45);
+    color: rgb(0 0 0 / 45%);
   }
 }
 
@@ -85,7 +85,7 @@
 
 .detail-label {
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.5);
+  color: rgb(0 0 0 / 50%);
   font-weight: 500;
 }
 
@@ -94,7 +94,7 @@
   color: #333;
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .section-header {
     flex-direction: column;
     align-items: flex-start;