feat: Client & CKYC UI improvements — filters, KYC management, image crop+merge

- Clients list: CKYC icon, CKYC Number column, status/legal form/CKYC filters
- CKYC: SFTP upload logs, date formatting, modal z-index fix, non-dismissible dialogs
- KYC Management: new standalone module with alert dashboard, notification scheduler, audit inventory, account status
- Image cropper: ngx-image-cropper integration for front+back document merge into single PNG
- Sidebar: KYC Management menu entry after CKYC

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/products/charges/create-charge/create-charge.component.scss

@@ -98,10 +98,10 @@
   gap: 12px;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .cc-grid {
     grid-template-columns: 1fr;
   }

src/app/products/charges/edit-charge/edit-charge.component.scss

@@ -98,10 +98,10 @@
   gap: 12px;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .ec-grid {
     grid-template-columns: 1fr;
   }

src/app/products/charges/view-charge/view-charge.component.scss

@@ -109,10 +109,10 @@
   gap: 12px;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vc-top-bar {
     flex-direction: column;
     align-items: flex-start;

src/app/products/collaterals/create-collateral/create-collateral.component.scss

@@ -72,10 +72,10 @@
   gap: 12px;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .ccl-section__body {
     grid-template-columns: 1fr;
   }

src/app/products/collaterals/edit-collateral/edit-collateral.component.scss

@@ -72,10 +72,10 @@
   gap: 12px;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .ecl-section__body {
     grid-template-columns: 1fr;
   }

src/app/products/collaterals/view-collateral/view-collateral.component.scss

@@ -99,7 +99,7 @@
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vcl-top-bar {
     flex-direction: column;
     align-items: flex-start;

src/app/products/current-products/create-current-product/create-current-product.component.scss

@@ -35,11 +35,11 @@ $primary: #1353a0;
 .cp-tabs {
   background: var(--md-sys-color-surface, #fff);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
 
   ::ng-deep {
     .mat-mdc-tab-header {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      border-bottom: 1px solid rgb(0 0 0 / 8%);
     }
 
     .mat-mdc-tab {
@@ -77,10 +77,10 @@ $primary: #1353a0;
   align-items: center;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 
   &__cancel {
-    color: rgba(0, 0, 0, 0.6);
+    color: rgb(0 0 0 / 60%);
   }
 
   &__right {

src/app/products/fixed-deposit-products/create-fixed-deposit-product/create-fixed-deposit-product.component.scss

@@ -18,9 +18,10 @@ $primary: #1353a0;
 
 .fdp-tabs {
   background: var(--md-sys-color-surface, #fff); border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+
   ::ng-deep {
-    .mat-mdc-tab-header { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
+    .mat-mdc-tab-header { border-bottom: 1px solid rgb(0 0 0 / 8%); }
     .mat-mdc-tab { min-width: 100px; padding: 0 12px; height: 52px; }
     .mat-mdc-tab-body-wrapper { min-height: 200px; }
     .mat-mdc-tab-body { overflow: visible !important; }
@@ -33,7 +34,7 @@ $primary: #1353a0;
 
 .fdp-action-bar {
   display: flex; justify-content: space-between; align-items: center;
-  margin-top: 20px; padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, 0.08);
-  &__cancel { color: rgba(0, 0, 0, 0.6); }
+  margin-top: 20px; padding: 16px 0; border-top: 1px solid rgb(0 0 0 / 8%);
+  &__cancel { color: rgb(0 0 0 / 60%); }
   &__right { display: flex; gap: 12px; }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }
@@ -62,7 +62,7 @@
   gap: 24px;
   flex-wrap: wrap;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     flex-direction: column;
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.scss

@@ -51,7 +51,7 @@
   grid-template-columns: repeat(2, 1fr);
   gap: 4px 16px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.scss

@@ -57,7 +57,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.scss

@@ -152,7 +152,7 @@
   padding-top: 8px;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .cfr-container {
     padding: 16px 10px;
   }

src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.scss

@@ -152,7 +152,7 @@
   padding-top: 8px;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .efr-container {
     padding: 16px 10px;
   }

src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.scss

@@ -154,7 +154,7 @@
   margin-right: 10px;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vfr-container {
     padding: 16px 10px;
   }

src/app/products/loan-products/create-loan-product/create-loan-product.component.scss

@@ -35,11 +35,11 @@ $primary: #1353a0;
 .lp-tabs {
   background: var(--md-sys-color-surface, #fff);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
 
   ::ng-deep {
     .mat-mdc-tab-header {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      border-bottom: 1px solid rgb(0 0 0 / 8%);
     }
 
     .mat-mdc-tab {
@@ -77,10 +77,10 @@ $primary: #1353a0;
   align-items: center;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 
   &__cancel {
-    color: rgba(0, 0, 0, 0.6);
+    color: rgb(0 0 0 / 60%);
   }
 
   &__right {

src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.scss

@@ -112,7 +112,7 @@
 }
 
 // Responsive
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .lpa-grid {
     grid-template-columns: 1fr;
   }

src/app/products/loan-products/loan-product-stepper/loan-product-capitalized-income-step/loan-product-deferred-income-recognition-step.component.scss

@@ -39,7 +39,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .lpdi-field {

src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.scss

@@ -57,7 +57,7 @@ $gray-900: #202124;
     box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
   }
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     flex-direction: column;
     &__select { max-width: 100%; width: 100%; }
   }

src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.scss

@@ -39,7 +39,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .lpc-field {

src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.scss

@@ -39,7 +39,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .lpd-field {

src/app/products/loan-products/loan-product-stepper/loan-product-interest-refund-step/loan-product-interest-refund-step.component.scss

@@ -37,7 +37,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .lpir-field {

src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.scss

@@ -53,7 +53,7 @@
     gap: 4px 16px;
     padding: 16px 24px;
 
-    @media (max-width: 600px) {
+    @media (width <= 600px) {
       grid-template-columns: 1fr;
     }
   }
@@ -80,7 +80,7 @@
   grid-template-columns: repeat(2, 1fr);
   gap: 4px 16px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.scss

@@ -50,7 +50,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }
@@ -58,7 +58,7 @@
 .lpt-grid-3 {
   grid-template-columns: repeat(3, 1fr);
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }
@@ -66,11 +66,11 @@
 .lpt-grid-4 {
   grid-template-columns: repeat(4, 1fr);
 
-  @media (max-width: 900px) {
+  @media (width <= 900px) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.scss

@@ -92,7 +92,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .db-field {

src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.scss

@@ -92,7 +92,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .db-field {

src/app/products/manage-delinquency-buckets/delinquency-range/create-range/create-range.component.scss

@@ -31,9 +31,9 @@
 
 .cr-action-bar {
   display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .cr-grid { grid-template-columns: 1fr; }
 }

src/app/products/manage-delinquency-buckets/delinquency-range/edit-range/edit-range.component.scss

@@ -31,9 +31,9 @@
 
 .er-action-bar {
   display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .er-grid { grid-template-columns: 1fr; }
 }

src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.scss

@@ -23,7 +23,7 @@
 
   &:hover {
     border-color: #0ea5e9;
-    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12);
+    box-shadow: 0 2px 8px rgb(14 165 233 / 12%);
   }
 
   &__icon-wrap {

src/app/products/manage-tax-components/create-tax-component/create-tax-component.component.scss

@@ -92,7 +92,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .ctc-field {

src/app/products/manage-tax-components/edit-tax-component/edit-tax-component.component.scss

@@ -92,7 +92,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .etc-field {

src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.scss

@@ -81,14 +81,14 @@ $gray-900: #202124;
   padding: 20px 28px 24px;
   background: #fff;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .vtc-cell {
   padding: 14px 16px;
   background: #f8fafc;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid rgb(0 0 0 / 4%);
   margin: 3px;
   transition: background 0.12s;
 
@@ -114,7 +114,7 @@ $gray-900: #202124;
 }
 
 // Responsive
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vtc-header {
     flex-direction: column;
     align-items: flex-start;

src/app/products/manage-tax-configurations/manage-tax-configurations.component.scss

@@ -62,7 +62,7 @@ $gray-900: #0f172a;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     grid-template-columns: 1fr;
   }
 }
@@ -82,7 +82,7 @@ $gray-900: #0f172a;
 
   &:hover {
     border-color: #cbd5e1;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
     transform: translateY(-1px);
   }
 

src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.scss

@@ -102,7 +102,7 @@ $text-muted: #64748b;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .ctg-field {

src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.scss

@@ -102,7 +102,7 @@ $text-muted: #64748b;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .etg-field {

src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.scss

@@ -109,14 +109,14 @@ $text-muted: #64748b;
   gap: 1px;
   padding: 20px 28px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .vtg-cell {
   padding: 14px 16px;
   background: #f8fafc;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid rgb(0 0 0 / 4%);
   margin: 3px;
   transition: background 0.12s;
 
@@ -195,7 +195,7 @@ $text-muted: #64748b;
 }
 
 // Responsive
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vtg-header {
     flex-direction: column;
     align-items: flex-start;

src/app/products/products-mix/create-product-mix/create-product-mix.component.scss

@@ -81,7 +81,7 @@
   padding-top: 8px;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .cpm-container {
     padding: 16px 12px;
   }

src/app/products/products-mix/edit-product-mix/edit-product-mix.component.scss

@@ -81,7 +81,7 @@
   padding-top: 8px;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .epm-container {
     padding: 16px 12px;
   }

src/app/products/products-mix/view-product-mix/view-product-mix.component.scss

@@ -156,7 +156,7 @@
   background: transparent;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vpm-container {
     padding: 16px 12px;
   }

src/app/products/products.component.scss

@@ -61,7 +61,7 @@ $gray-900: #0f172a;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     grid-template-columns: 1fr;
   }
 }
@@ -82,7 +82,7 @@ $gray-900: #0f172a;
   &:hover {
     border-color: #cbd5e1;
     background: $gray-50;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
 
     .pd-card__arrow {
       color: $gray-700;
@@ -101,62 +101,62 @@ $gray-900: #0f172a;
     flex-shrink: 0;
 
     &--blue {
-      background: rgba(59, 130, 246, 0.1);
+      background: rgb(59 130 246 / 10%);
       color: #2563eb;
     }
 
     &--green {
-      background: rgba(34, 197, 94, 0.1);
+      background: rgb(34 197 94 / 10%);
       color: #16a34a;
     }
 
     &--cyan {
-      background: rgba(6, 182, 212, 0.1);
+      background: rgb(6 182 212 / 10%);
       color: #0891b2;
     }
 
     &--purple {
-      background: rgba(139, 92, 246, 0.1);
+      background: rgb(139 92 246 / 10%);
       color: #7c3aed;
     }
 
     &--amber {
-      background: rgba(245, 158, 11, 0.1);
+      background: rgb(245 158 11 / 10%);
       color: #d97706;
     }
 
     &--teal {
-      background: rgba(20, 184, 166, 0.1);
+      background: rgb(20 184 166 / 10%);
       color: #0d9488;
     }
 
     &--indigo {
-      background: rgba(99, 102, 241, 0.1);
+      background: rgb(99 102 241 / 10%);
       color: #4f46e5;
     }
 
     &--orange {
-      background: rgba(249, 115, 22, 0.1);
+      background: rgb(249 115 22 / 10%);
       color: #ea580c;
     }
 
     &--slate {
-      background: rgba(100, 116, 139, 0.1);
+      background: rgb(100 116 139 / 10%);
       color: #475569;
     }
 
     &--rose {
-      background: rgba(244, 63, 94, 0.1);
+      background: rgb(244 63 94 / 10%);
       color: #e11d48;
     }
 
     &--emerald {
-      background: rgba(16, 185, 129, 0.1);
+      background: rgb(16 185 129 / 10%);
       color: #059669;
     }
 
     &--red {
-      background: rgba(239, 68, 68, 0.1);
+      background: rgb(239 68 68 / 10%);
       color: #dc2626;
     }
   }

src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.scss

@@ -18,9 +18,10 @@ $primary: #1353a0;
 
 .rdp-tabs {
   background: var(--md-sys-color-surface, #fff); border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+
   ::ng-deep {
-    .mat-mdc-tab-header { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
+    .mat-mdc-tab-header { border-bottom: 1px solid rgb(0 0 0 / 8%); }
     .mat-mdc-tab { min-width: 100px; padding: 0 12px; height: 52px; }
     .mat-mdc-tab-body-wrapper { min-height: 200px; }
     .mat-mdc-tab-body { overflow: visible !important; }
@@ -33,7 +34,7 @@ $primary: #1353a0;
 
 .rdp-action-bar {
   display: flex; justify-content: space-between; align-items: center;
-  margin-top: 20px; padding: 16px 0; border-top: 1px solid rgba(0, 0, 0, 0.08);
-  &__cancel { color: rgba(0, 0, 0, 0.6); }
+  margin-top: 20px; padding: 16px 0; border-top: 1px solid rgb(0 0 0 / 8%);
+  &__cancel { color: rgb(0 0 0 / 60%); }
   &__right { display: flex; gap: 12px; }
 }

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.scss

@@ -73,7 +73,7 @@
   table { width: 100%; }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .rdpa-grid { grid-template-columns: 1fr; }
   .rdpa-radio-group { flex-direction: column; }
 }

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.scss

@@ -59,7 +59,7 @@
   padding: 4px 0;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .rdpc-grid {
     grid-template-columns: 1fr;
   }

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.scss

@@ -53,7 +53,7 @@
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .rdpd-grid {
     grid-template-columns: 1fr;
   }

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.scss

@@ -143,7 +143,7 @@
   margin-bottom: 12px;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .rdpi-grid {
     grid-template-columns: 1fr;
   }

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.scss

@@ -59,7 +59,7 @@
   padding: 4px 0;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .rdps-grid {
     grid-template-columns: 1fr;
   }

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.scss

@@ -57,7 +57,7 @@
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .rdpt-grid {
     grid-template-columns: 1fr;
 

src/app/products/saving-products/create-saving-product/create-saving-product.component.scss

@@ -35,11 +35,11 @@ $primary: #1353a0;
 .sp-tabs {
   background: var(--md-sys-color-surface, #fff);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
 
   ::ng-deep {
     .mat-mdc-tab-header {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      border-bottom: 1px solid rgb(0 0 0 / 8%);
     }
 
     .mat-mdc-tab {
@@ -77,10 +77,10 @@ $primary: #1353a0;
   align-items: center;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 
   &__cancel {
-    color: rgba(0, 0, 0, 0.6);
+    color: rgb(0 0 0 / 60%);
   }
 
   &__right {

src/app/products/saving-products/edit-saving-product/edit-saving-product.component.scss

@@ -35,11 +35,11 @@ $primary: #1353a0;
 .sp-tabs {
   background: var(--md-sys-color-surface, #fff);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
 
   ::ng-deep {
     .mat-mdc-tab-header {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      border-bottom: 1px solid rgb(0 0 0 / 8%);
     }
 
     .mat-mdc-tab {
@@ -77,10 +77,10 @@ $primary: #1353a0;
   align-items: center;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 
   &__cancel {
-    color: rgba(0, 0, 0, 0.6);
+    color: rgb(0 0 0 / 60%);
   }
 
   &__right {

src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.scss

@@ -57,7 +57,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }
@@ -75,7 +75,7 @@ $gray-900: #202124;
   gap: 24px;
   flex-wrap: wrap;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     flex-direction: column;
     gap: 12px;
   }

src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.scss

@@ -65,7 +65,7 @@ $gray-900: #202124;
     box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
   }
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     flex-direction: column;
 
     &__select {

src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.scss

@@ -50,7 +50,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.scss

@@ -46,7 +46,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.scss

@@ -50,7 +50,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.scss

@@ -50,7 +50,7 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/share-products/create-share-product/create-share-product.component.scss

@@ -27,10 +27,10 @@ $primary: #1353a0;
 .shp-tabs {
   background: var(--md-sys-color-surface, #fff);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
 
   ::ng-deep {
-    .mat-mdc-tab-header { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
+    .mat-mdc-tab-header { border-bottom: 1px solid rgb(0 0 0 / 8%); }
     .mat-mdc-tab { min-width: 100px; padding: 0 12px; height: 52px; }
     .mat-mdc-tab-body-wrapper { min-height: 200px; }
     .mat-mdc-tab-body { overflow: visible !important; }
@@ -47,8 +47,8 @@ $primary: #1353a0;
   align-items: center;
   margin-top: 20px;
   padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgb(0 0 0 / 8%);
 
-  &__cancel { color: rgba(0, 0, 0, 0.6); }
+  &__cancel { color: rgb(0 0 0 / 60%); }
   &__right { display: flex; gap: 12px; }
 }

src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.scss

@@ -44,7 +44,7 @@
   gap: 16px;
   margin-bottom: 16px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     flex-direction: column;
     align-items: stretch;
   }
@@ -54,7 +54,7 @@
   flex: 1;
   max-width: 400px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     max-width: 100%;
   }
 }

src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.scss

@@ -31,7 +31,8 @@ $gray-900: #202124;
 .shpcr-grid {
   display: grid; grid-template-columns: repeat(2, 1fr);
   gap: 4px 16px; padding: 16px 24px;
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .shpcr-field {

src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.scss

@@ -29,7 +29,8 @@ $gray-900: #202124;
 .shpd-grid {
   display: grid; grid-template-columns: repeat(2, 1fr);
   gap: 4px 16px; padding: 16px 24px;
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .shpd-field {

src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.scss

@@ -61,7 +61,7 @@
   font-size: 13px;
   line-height: 1.5;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     flex-direction: column;
   }
 }

src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.scss

@@ -44,7 +44,7 @@
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }

src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.scss

@@ -29,7 +29,8 @@ $gray-900: #202124;
 .shpt-grid {
   display: grid; grid-template-columns: repeat(2, 1fr);
   gap: 4px 16px; padding: 16px 24px;
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .shpt-field {