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/organization/adhoc-query/create-adhoc-query/create-adhoc-query.component.scss

@@ -43,7 +43,8 @@ $gray-900: #202124;
 
 .caq-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; }
 }
 
 .caq-field {

src/app/organization/bulk-import/bulk-import.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;
   }
 }
@@ -83,7 +83,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%);
 
     .org-card__arrow {
       color: $gray-700;
@@ -102,62 +102,62 @@ $gray-900: #0f172a;
     flex-shrink: 0;
 
     &--blue {
-      background: rgba(59, 130, 246, 0.1);
+      background: rgb(59 130 246 / 10%);
       color: #2563eb;
     }
 
     &--amber {
-      background: rgba(245, 158, 11, 0.1);
+      background: rgb(245 158 11 / 10%);
       color: #d97706;
     }
 
     &--green {
-      background: rgba(34, 197, 94, 0.1);
+      background: rgb(34 197 94 / 10%);
       color: #16a34a;
     }
 
     &--emerald {
-      background: rgba(16, 185, 129, 0.1);
+      background: rgb(16 185 129 / 10%);
       color: #059669;
     }
 
     &--purple {
-      background: rgba(139, 92, 246, 0.1);
+      background: rgb(139 92 246 / 10%);
       color: #7c3aed;
     }
 
     &--indigo {
-      background: rgba(99, 102, 241, 0.1);
+      background: rgb(99 102 241 / 10%);
       color: #4f46e5;
     }
 
     &--slate {
-      background: rgba(100, 116, 139, 0.1);
+      background: rgb(100 116 139 / 10%);
       color: #475569;
     }
 
     &--orange {
-      background: rgba(249, 115, 22, 0.1);
+      background: rgb(249 115 22 / 10%);
       color: #ea580c;
     }
 
     &--teal {
-      background: rgba(20, 184, 166, 0.1);
+      background: rgb(20 184 166 / 10%);
       color: #0d9488;
     }
 
     &--cyan {
-      background: rgba(6, 182, 212, 0.1);
+      background: rgb(6 182 212 / 10%);
       color: #0891b2;
     }
 
     &--rose {
-      background: rgba(244, 63, 94, 0.1);
+      background: rgb(244 63 94 / 10%);
       color: #e11d48;
     }
 
     &--red {
-      background: rgba(239, 68, 68, 0.1);
+      background: rgb(239 68 68 / 10%);
       color: #dc2626;
     }
   }

src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.scss

@@ -57,7 +57,7 @@ $gray-900: #202124;
   border: 1px solid $border;
   border-radius: 12px;
   padding: 0;
-  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
+  box-shadow: 0 1px 3px rgb(16 24 40 / 6%), 0 1px 2px rgb(16 24 40 / 4%);
 }
 
 .bl-section {
@@ -89,7 +89,7 @@ $gray-900: #202124;
   grid-template-columns: 1fr 1fr;
   gap: 4px 20px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }
@@ -104,7 +104,7 @@ $gray-900: #202124;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }
@@ -184,7 +184,7 @@ $gray-900: #202124;
     font-weight: 500;
     font-size: 13px;
     padding: 4px 20px !important;
-    box-shadow: 0 1px 2px rgba(19, 83, 160, 0.15);
+    box-shadow: 0 1px 2px rgb(19 83 160 / 15%);
     transition: all 0.2s ease;
 
     i {
@@ -194,7 +194,7 @@ $gray-900: #202124;
 
     &:hover {
       background: #0f4688 !important;
-      box-shadow: 0 2px 6px rgba(19, 83, 160, 0.25);
+      box-shadow: 0 2px 6px rgb(19 83 160 / 25%);
     }
 
     &:disabled {

src/app/organization/currencies/manage-currencies/manage-currencies.component.scss

@@ -73,7 +73,7 @@ $gray-900: #202124;
   justify-content: space-between;
   padding: 10px 14px;
   background: $gray-50;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid rgb(0 0 0 / 4%);
   border-radius: 8px;
   margin-bottom: 6px;
   transition: background 0.12s;
@@ -110,7 +110,7 @@ $gray-900: #202124;
     line-height: 32px !important;
     font-size: 13px;
 
-    &:hover { background: rgba(239, 68, 68, 0.08) !important; }
+    &:hover { background: rgb(239 68 68 / 8%) !important; }
   }
 }
 

src/app/organization/employees/create-employee/create-employee.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; }
 }
 
 .ce-field {

src/app/organization/employees/edit-employee/edit-employee.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; }
 }
 
 .ee-field {

src/app/organization/employees/view-employee/view-employee.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; }
 }
 
 .ve-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;
 
@@ -124,12 +124,12 @@ $gray-900: #202124;
   letter-spacing: 0.2px;
 
   &--active {
-    background: rgba(22, 163, 74, 0.1);
+    background: rgb(22 163 74 / 10%);
     color: #16a34a;
   }
 
   &--inactive {
-    background: rgba(220, 38, 38, 0.1);
+    background: rgb(220 38 38 / 10%);
     color: #dc2626;
   }
 }

src/app/organization/entity-data-table-checks/create-entity-data-table-checks/create-entity-data-table-checks.component.scss

@@ -88,7 +88,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; }
 }
 
 .ce-field {

src/app/organization/fund-mapping/fund-mapping.component.scss

@@ -96,7 +96,7 @@ $gray-900: #202124;
     grid-template-columns: repeat(3, 1fr);
   }
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     grid-template-columns: 1fr;
 
     &--3col { grid-template-columns: 1fr; }
@@ -127,7 +127,7 @@ $gray-900: #202124;
   padding: 0 0 8px;
   margin-top: -4px;
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     grid-template-columns: 1fr;
   }
 }

src/app/organization/holidays/create-holiday/create-holiday.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; }
 }
 
 .ch-field {

src/app/organization/holidays/edit-holiday/edit-holiday.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; }
 }
 
 .eh-field {

src/app/organization/holidays/view-holidays/view-holidays.component.scss

@@ -85,14 +85,14 @@ $gray-900: #202124;
   gap: 10px;
   padding: 20px 24px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .vh-cell {
   padding: 14px 16px;
   background: $gray-50;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid rgb(0 0 0 / 4%);
   transition: background 0.12s;
 
   &:hover {
@@ -130,7 +130,7 @@ $gray-900: #202124;
 }
 
 // Responsive
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vh-header {
     flex-direction: column;
     align-items: flex-start;

src/app/organization/investors/investors.component.scss

@@ -92,8 +92,9 @@ $gray-900: #202124;
   gap: 4px 16px;
   padding: 16px 24px;
 
-  @media (max-width: 768px) { grid-template-columns: 1fr; }
-  @media (max-width: 1024px) and (min-width: 769px) { grid-template-columns: repeat(2, 1fr); }
+  @media (width <= 768px) { grid-template-columns: 1fr; }
+
+  @media (width <= 1024px) and (width >= 769px) { grid-template-columns: repeat(2, 1fr); }
 }
 
 .inv-field {
@@ -105,7 +106,7 @@ $gray-900: #202124;
   align-items: center;
   padding-top: 4px;
 
-  @media (max-width: 768px) { padding-top: 0; }
+  @media (width <= 768px) { padding-top: 0; }
 }
 
 .inv-search-btn {
@@ -210,7 +211,7 @@ $gray-900: #202124;
     gap: 16px;
     margin-bottom: 16px;
 
-    @media (max-width: 600px) { grid-template-columns: 1fr; }
+    @media (width <= 600px) { grid-template-columns: 1fr; }
   }
 
   &__item {

src/app/organization/loan-originators/create-loan-originator/create-loan-originator.component.scss

@@ -84,7 +84,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; }
 }
 
 .cl-field {

src/app/organization/loan-originators/edit-loan-originator/edit-loan-originator.component.scss

@@ -84,7 +84,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; }
 }
 
 .el-field {

src/app/organization/loan-originators/view-loan-originator/view-loan-originator.component.scss

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

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.scss

@@ -94,7 +94,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; }
 }
 
 .cp-field {

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.scss

@@ -94,7 +94,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; }
 }
 
 .ep-field {

src/app/organization/manage-funds/create-fund/create-fund.component.scss

@@ -84,7 +84,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; }
 }
 
 .cf-field {

src/app/organization/manage-funds/edit-fund/edit-fund.component.scss

@@ -84,7 +84,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; }
 }
 
 .ef-field {

src/app/organization/manage-funds/view-fund/view-fund.component.scss

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

src/app/organization/offices/create-office/create-office.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; }
 }
 
 .co-field {

src/app/organization/offices/edit-office/edit-office.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; }
 }
 
 .eo-field {

src/app/organization/offices/view-office/general-tab/general-tab.component.scss

@@ -25,14 +25,14 @@ $gray-900: #202124;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
 
-  @media (max-width: 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) { grid-template-columns: 1fr; }
 }
 
 .gt-cell {
   padding: 14px 16px;
   background: $gray-50;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid rgb(0 0 0 / 4%);
   transition: background 0.12s;
 
   &:hover {

src/app/organization/offices/view-office/view-office.component.scss

@@ -92,7 +92,7 @@ $gray-900: #202124;
 }
 
 // Responsive
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .vo-header {
     flex-direction: column;
     align-items: flex-start;

src/app/organization/organization.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;
   }
 }
@@ -83,7 +83,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%);
 
     .org-card__arrow {
       color: $gray-700;
@@ -102,62 +102,62 @@ $gray-900: #0f172a;
     flex-shrink: 0;
 
     &--blue {
-      background: rgba(59, 130, 246, 0.1);
+      background: rgb(59 130 246 / 10%);
       color: #2563eb;
     }
 
     &--amber {
-      background: rgba(245, 158, 11, 0.1);
+      background: rgb(245 158 11 / 10%);
       color: #d97706;
     }
 
     &--green {
-      background: rgba(34, 197, 94, 0.1);
+      background: rgb(34 197 94 / 10%);
       color: #16a34a;
     }
 
     &--emerald {
-      background: rgba(16, 185, 129, 0.1);
+      background: rgb(16 185 129 / 10%);
       color: #059669;
     }
 
     &--purple {
-      background: rgba(139, 92, 246, 0.1);
+      background: rgb(139 92 246 / 10%);
       color: #7c3aed;
     }
 
     &--indigo {
-      background: rgba(99, 102, 241, 0.1);
+      background: rgb(99 102 241 / 10%);
       color: #4f46e5;
     }
 
     &--slate {
-      background: rgba(100, 116, 139, 0.1);
+      background: rgb(100 116 139 / 10%);
       color: #475569;
     }
 
     &--orange {
-      background: rgba(249, 115, 22, 0.1);
+      background: rgb(249 115 22 / 10%);
       color: #ea580c;
     }
 
     &--teal {
-      background: rgba(20, 184, 166, 0.1);
+      background: rgb(20 184 166 / 10%);
       color: #0d9488;
     }
 
     &--cyan {
-      background: rgba(6, 182, 212, 0.1);
+      background: rgb(6 182 212 / 10%);
       color: #0891b2;
     }
 
     &--rose {
-      background: rgba(244, 63, 94, 0.1);
+      background: rgb(244 63 94 / 10%);
       color: #e11d48;
     }
 
     &--red {
-      background: rgba(239, 68, 68, 0.1);
+      background: rgb(239 68 68 / 10%);
       color: #dc2626;
     }
   }

src/app/organization/payment-types/create-payment-type/create-payment-type.component.scss

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

src/app/organization/payment-types/edit-payment-type/edit-payment-type.component.scss

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

src/app/organization/standing-instructions-history/standing-instructions-history.component.scss

@@ -59,7 +59,7 @@ $gray-900: #202124;
   border: 1px solid $border;
   border-radius: 12px;
   padding: 0;
-  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
+  box-shadow: 0 1px 3px rgb(16 24 40 / 6%), 0 1px 2px rgb(16 24 40 / 4%);
 }
 
 .si-section {
@@ -91,7 +91,7 @@ $gray-900: #202124;
   grid-template-columns: 1fr 1fr;
   gap: 4px 20px;
 
-  @media (max-width: 600px) {
+  @media (width <= 600px) {
     grid-template-columns: 1fr;
   }
 }
@@ -129,7 +129,7 @@ $gray-900: #202124;
     font-weight: 500;
     font-size: 13px;
     padding: 4px 20px !important;
-    box-shadow: 0 1px 2px rgba(19, 83, 160, 0.15);
+    box-shadow: 0 1px 2px rgb(19 83 160 / 15%);
     transition: all 0.2s ease;
 
     i {
@@ -139,7 +139,7 @@ $gray-900: #202124;
 
     &:hover {
       background: #0f4688 !important;
-      box-shadow: 0 2px 6px rgba(19, 83, 160, 0.25);
+      box-shadow: 0 2px 6px rgb(19 83 160 / 25%);
     }
   }
 }
@@ -150,7 +150,7 @@ $gray-900: #202124;
   border: 1px solid $border;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
+  box-shadow: 0 1px 3px rgb(16 24 40 / 6%), 0 1px 2px rgb(16 24 40 / 4%);
 }
 
 .modern-table {

src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.scss

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

src/app/organization/tellers/cashiers/create-cashier/create-cashier.component.scss

@@ -92,7 +92,7 @@ $gray-900: #202124;
     gap: 4px 16px;
     padding: 16px 24px;
 
-    @media (max-width: 600px) { grid-template-columns: 1fr !important; }
+    @media (width <= 600px) { grid-template-columns: 1fr !important; }
   }
 
   .cc-field {
@@ -107,7 +107,7 @@ $gray-900: #202124;
     display: flex !important;
     gap: 12px;
 
-    @media (max-width: 600px) { flex-direction: column; gap: 4px; }
+    @media (width <= 600px) { flex-direction: column; gap: 4px; }
   }
 
   .cc-time-field {

src/app/organization/tellers/cashiers/edit-cashier/edit-cashier.component.scss

@@ -92,7 +92,7 @@ $gray-900: #202124;
     gap: 4px 16px;
     padding: 16px 24px;
 
-    @media (max-width: 600px) { grid-template-columns: 1fr !important; }
+    @media (width <= 600px) { grid-template-columns: 1fr !important; }
   }
 
   .ec-field {
@@ -107,7 +107,7 @@ $gray-900: #202124;
     display: flex !important;
     gap: 12px;
 
-    @media (max-width: 600px) { flex-direction: column; gap: 4px; }
+    @media (width <= 600px) { flex-direction: column; gap: 4px; }
   }
 
   .ec-time-field {

src/app/organization/tellers/cashiers/settle-cash/settle-cash.component.scss

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

src/app/organization/tellers/cashiers/transactions/transactions.component.scss

@@ -27,7 +27,7 @@ $gray-900: #202124;
   border-radius: 10px;
   margin-bottom: 16px;
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     grid-template-columns: repeat(2, 1fr);
   }
 

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.scss

@@ -112,7 +112,7 @@ $gray-900: #202124;
     gap: 16px;
     padding: 20px 24px;
 
-    @media (max-width: 600px) { grid-template-columns: 1fr !important; }
+    @media (width <= 600px) { grid-template-columns: 1fr !important; }
   }
 
   .vc-detail {

src/app/organization/tellers/create-teller/create-teller.component.scss

@@ -84,7 +84,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; }
 }
 
 .ct-field {

src/app/organization/tellers/edit-teller/edit-teller.component.scss

@@ -84,7 +84,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; }
 }
 
 .et-field {

src/app/organization/tellers/view-teller/view-teller.component.scss

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