Merge branch 'feature/merge-updates' from cbsnexora into feature/ui-reports-product

Conflict resolutions: - src/main.scss: kept both new dialog backdrops (CIC/PSL/ALM/CIMS/CKYC/Acct) and incoming dialog panel styles (.abd-dialog-panel, .arc-dialog-panel) - client-general-step.component.html/.ts: kept HEAD's agriculture/non-agri income fields, education/degree/religion/social-category dropdowns, and inject() refactor matching the incoming pattern - kyc-management.component.html/.scss/.ts: kept HEAD's Home Visit terminology, takeAction() method, hv-* and vkyc-* dialog styles; accepted incoming .km-warn-d style addition Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-29 19:22:00 +05:30
parent 12bfc81219 22c9375a55
commit 2d4fb4237e
470 changed files with 46834 additions and 11014 deletions
@@ -34,12 +34,18 @@
          <mat-panel-title class="addr-panel__title">
            <i class="fa fa-home addr-panel__type-icon"></i>
            <span class="addr-panel__type">{{ address.addressType }}</span>
-            <span class="addr-panel__status" [class.addr-panel__status--active]="address.isActive" [class.addr-panel__status--inactive]="!address.isActive">
+            <span
+              class="addr-panel__status"
+              [class.addr-panel__status--active]="address.isActive"
+              [class.addr-panel__status--inactive]="!address.isActive"
+            >
              {{ address.isActive ? 'Active' : 'Inactive' }}
            </span>
          </mat-panel-title>
          <mat-panel-description class="addr-panel__desc">
-            {{ address.city || '' }}{{ address.city && (address.countyDistrict || address.addressLine3) ? ', ' : '' }}{{ address.countyDistrict || address.addressLine3 || '' }}{{ address.postalCode ? ' - ' + address.postalCode : '' }}
+            {{ address.city || '' }}{{ address.city && (address.countyDistrict || address.addressLine3) ? ', ' : ''
+            }}{{ address.countyDistrict || address.addressLine3 || ''
+            }}{{ address.postalCode ? ' - ' + address.postalCode : '' }}
          </mat-panel-description>
        </mat-expansion-panel-header>

@@ -101,12 +107,16 @@
          @if (address.stateProvinceId) {
            <div class="addr-field">
              <div class="addr-field__label">State</div>
-              <div class="addr-field__value">{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name || '-' }}</div>
+              <div class="addr-field__value">
+                {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name || '-' }}
+              </div>
            </div>
          }
          <div class="addr-field">
            <div class="addr-field__label">Country</div>
-            <div class="addr-field__value">{{ getSelectedValue('countryIdOptions', address.countryId)?.name || 'India' }}</div>
+            <div class="addr-field__value">
+              {{ getSelectedValue('countryIdOptions', address.countryId)?.name || 'India' }}
+            </div>
          </div>
        </div>
      </mat-expansion-panel>
@@ -80,23 +80,17 @@
    <!-- Client basic info -->
    <div class="ckyc-info-grid">
      <div class="ckyc-info-item">
-        <span class="ckyc-info-label">
-          <fa-icon icon="hashtag"></fa-icon> CIF Number
-        </span>
+        <span class="ckyc-info-label"> <fa-icon icon="hashtag"></fa-icon> CIF Number </span>
        <span class="ckyc-info-value ckyc-info-value--mono">{{ cifNumber || clientId }}</span>
      </div>

      <div class="ckyc-info-item">
-        <span class="ckyc-info-label">
-          <fa-icon icon="user"></fa-icon> Full Name
-        </span>
+        <span class="ckyc-info-label"> <fa-icon icon="user"></fa-icon> Full Name </span>
        <span class="ckyc-info-value">{{ clientName || '—' }}</span>
      </div>

      <div class="ckyc-info-item">
-        <span class="ckyc-info-label">
-          <fa-icon icon="envelope"></fa-icon> Email
-        </span>
+        <span class="ckyc-info-label"> <fa-icon icon="envelope"></fa-icon> Email </span>
        @if (clientEmail) {
          <span class="ckyc-info-value">{{ clientEmail }}</span>
        } @else {
@@ -105,9 +99,7 @@
      </div>

      <div class="ckyc-info-item">
-        <span class="ckyc-info-label">
-          <fa-icon icon="phone"></fa-icon> Mobile
-        </span>
+        <span class="ckyc-info-label"> <fa-icon icon="phone"></fa-icon> Mobile </span>
        @if (clientMobile) {
          <span class="ckyc-info-value">{{ clientMobile }}</span>
        } @else {
@@ -152,7 +144,8 @@
                }
                @if (existing.ADDRESS_PROOF.fileCount && existing.ADDRESS_PROOF.fileCount > 0) {
                  <span class="ckyc-existing__count">
-                    {{ existing.ADDRESS_PROOF.fileCount }} {{ existing.ADDRESS_PROOF.fileCount === 1 ? 'file' : 'files' }}
+                    {{ existing.ADDRESS_PROOF.fileCount }}
+                    {{ existing.ADDRESS_PROOF.fileCount === 1 ? 'file' : 'files' }}
                  </span>
                }
              </div>
@@ -169,65 +162,65 @@
          }

          @if (!existing.ADDRESS_PROOF.present || existing.ADDRESS_PROOF.expanded) {
-          <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
-          <div class="ckyc-file-row">
-            <input
-              type="file"
-              #addressProofInput
-              accept=".png,.jpeg,.jpg,.pdf"
-              (change)="onFileSelect($event, 'ADDRESS_PROOF')"
-              [style.display]="'none'"
-            />
-            <mat-form-field appearance="outline" class="ckyc-file-name-field">
+            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
+            <div class="ckyc-file-row">
              <input
-                matInput
-                [readonly]="true"
-                [value]="addressProofFile?.name || ''"
-                [placeholder]="'labels.text.NoFileSelected' | translate"
+                type="file"
+                #addressProofInput
+                accept=".png,.jpeg,.jpg,.pdf"
+                (change)="onFileSelect($event, 'ADDRESS_PROOF')"
+                [style.display]="'none'"
              />
-            </mat-form-field>
-            <button mat-stroked-button type="button" (click)="addressProofInput.click()">
-              <fa-icon icon="folder-open" size="lg"></fa-icon>
-              &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              <mat-form-field appearance="outline" class="ckyc-file-name-field">
+                <input
+                  matInput
+                  [readonly]="true"
+                  [value]="addressProofFile?.name || ''"
+                  [placeholder]="'labels.text.NoFileSelected' | translate"
+                />
+              </mat-form-field>
+              <button mat-stroked-button type="button" (click)="addressProofInput.click()">
+                <fa-icon icon="folder-open" size="lg"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              </button>
+            </div>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              [disabled]="!addressProofFile || uploading['ADDRESS_PROOF']"
+              (click)="uploadDocument('ADDRESS_PROOF')"
+            >
+              @if (uploading['ADDRESS_PROOF']) {
+                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              } @else {
+                {{ 'labels.buttons.Upload' | translate }}
+              }
            </button>
-          </div>
-          <button
-            mat-raised-button
-            color="primary"
-            type="button"
-            [disabled]="!addressProofFile || uploading['ADDRESS_PROOF']"
-            (click)="uploadDocument('ADDRESS_PROOF')"
-          >
-            @if (uploading['ADDRESS_PROOF']) {
-              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-            } @else {
-              {{ 'labels.buttons.Upload' | translate }}
+            @if (uploadErrors['ADDRESS_PROOF']) {
+              <div class="ckyc-upload-error">
+                <mat-icon>error_outline</mat-icon>
+                <span>{{ uploadErrors['ADDRESS_PROOF'] }}</span>
+              </div>
+            }
+            @if (uploadResponses['ADDRESS_PROOF']) {
+              <div class="ckyc-upload-response">
+                <p>
+                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].status }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].requestId }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
+                  {{ uploadResponses['ADDRESS_PROOF'].acknowledgementNumber }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
+                  {{ uploadResponses['ADDRESS_PROOF'].processingStatus }}
+                </p>
+              </div>
            }
-          </button>
-          @if (uploadErrors['ADDRESS_PROOF']) {
-            <div class="ckyc-upload-error">
-              <mat-icon>error_outline</mat-icon>
-              <span>{{ uploadErrors['ADDRESS_PROOF'] }}</span>
-            </div>
-          }
-          @if (uploadResponses['ADDRESS_PROOF']) {
-            <div class="ckyc-upload-response">
-              <p>
-                <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].status }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['ADDRESS_PROOF'].requestId }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                {{ uploadResponses['ADDRESS_PROOF'].acknowledgementNumber }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                {{ uploadResponses['ADDRESS_PROOF'].processingStatus }}
-              </p>
-            </div>
-          }
          }
        </mat-card-content>
      </mat-card>
@@ -274,65 +267,65 @@
          }

          @if (!existing.PHOTO_PROOF.present || existing.PHOTO_PROOF.expanded) {
-          <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
-          <div class="ckyc-file-row">
-            <input
-              type="file"
-              #photoProofInput
-              accept=".png,.jpeg,.jpg,.pdf"
-              (change)="onFileSelect($event, 'PHOTO_PROOF')"
-              [style.display]="'none'"
-            />
-            <mat-form-field appearance="outline" class="ckyc-file-name-field">
+            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG, PDF</p>
+            <div class="ckyc-file-row">
              <input
-                matInput
-                [readonly]="true"
-                [value]="photoProofFile?.name || ''"
-                [placeholder]="'labels.text.NoFileSelected' | translate"
+                type="file"
+                #photoProofInput
+                accept=".png,.jpeg,.jpg,.pdf"
+                (change)="onFileSelect($event, 'PHOTO_PROOF')"
+                [style.display]="'none'"
              />
-            </mat-form-field>
-            <button mat-stroked-button type="button" (click)="photoProofInput.click()">
-              <fa-icon icon="folder-open" size="lg"></fa-icon>
-              &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              <mat-form-field appearance="outline" class="ckyc-file-name-field">
+                <input
+                  matInput
+                  [readonly]="true"
+                  [value]="photoProofFile?.name || ''"
+                  [placeholder]="'labels.text.NoFileSelected' | translate"
+                />
+              </mat-form-field>
+              <button mat-stroked-button type="button" (click)="photoProofInput.click()">
+                <fa-icon icon="folder-open" size="lg"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              </button>
+            </div>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              [disabled]="!photoProofFile || uploading['PHOTO_PROOF']"
+              (click)="uploadDocument('PHOTO_PROOF')"
+            >
+              @if (uploading['PHOTO_PROOF']) {
+                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              } @else {
+                {{ 'labels.buttons.Upload' | translate }}
+              }
            </button>
-          </div>
-          <button
-            mat-raised-button
-            color="primary"
-            type="button"
-            [disabled]="!photoProofFile || uploading['PHOTO_PROOF']"
-            (click)="uploadDocument('PHOTO_PROOF')"
-          >
-            @if (uploading['PHOTO_PROOF']) {
-              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-            } @else {
-              {{ 'labels.buttons.Upload' | translate }}
+            @if (uploadErrors['PHOTO_PROOF']) {
+              <div class="ckyc-upload-error">
+                <mat-icon>error_outline</mat-icon>
+                <span>{{ uploadErrors['PHOTO_PROOF'] }}</span>
+              </div>
+            }
+            @if (uploadResponses['PHOTO_PROOF']) {
+              <div class="ckyc-upload-response">
+                <p>
+                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].status }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].requestId }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
+                  {{ uploadResponses['PHOTO_PROOF'].acknowledgementNumber }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
+                  {{ uploadResponses['PHOTO_PROOF'].processingStatus }}
+                </p>
+              </div>
            }
-          </button>
-          @if (uploadErrors['PHOTO_PROOF']) {
-            <div class="ckyc-upload-error">
-              <mat-icon>error_outline</mat-icon>
-              <span>{{ uploadErrors['PHOTO_PROOF'] }}</span>
-            </div>
-          }
-          @if (uploadResponses['PHOTO_PROOF']) {
-            <div class="ckyc-upload-response">
-              <p>
-                <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].status }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['PHOTO_PROOF'].requestId }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                {{ uploadResponses['PHOTO_PROOF'].acknowledgementNumber }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                {{ uploadResponses['PHOTO_PROOF'].processingStatus }}
-              </p>
-            </div>
-          }
          }
        </mat-card-content>
      </mat-card>
@@ -370,65 +363,65 @@
          }

          @if (!existing.CLIENT_IMAGE.present || existing.CLIENT_IMAGE.expanded) {
-          <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
-          <div class="ckyc-file-row">
-            <input
-              type="file"
-              #clientImageInput
-              accept=".png,.jpeg,.jpg"
-              (change)="onFileSelect($event, 'CLIENT_IMAGE')"
-              [style.display]="'none'"
-            />
-            <mat-form-field appearance="outline" class="ckyc-file-name-field">
+            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
+            <div class="ckyc-file-row">
              <input
-                matInput
-                [readonly]="true"
-                [value]="clientImageFile?.name || ''"
-                [placeholder]="'labels.text.NoFileSelected' | translate"
+                type="file"
+                #clientImageInput
+                accept=".png,.jpeg,.jpg"
+                (change)="onFileSelect($event, 'CLIENT_IMAGE')"
+                [style.display]="'none'"
              />
-            </mat-form-field>
-            <button mat-stroked-button type="button" (click)="clientImageInput.click()">
-              <fa-icon icon="folder-open" size="lg"></fa-icon>
-              &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              <mat-form-field appearance="outline" class="ckyc-file-name-field">
+                <input
+                  matInput
+                  [readonly]="true"
+                  [value]="clientImageFile?.name || ''"
+                  [placeholder]="'labels.text.NoFileSelected' | translate"
+                />
+              </mat-form-field>
+              <button mat-stroked-button type="button" (click)="clientImageInput.click()">
+                <fa-icon icon="folder-open" size="lg"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              </button>
+            </div>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              [disabled]="!clientImageFile || uploading['CLIENT_IMAGE']"
+              (click)="uploadDocument('CLIENT_IMAGE')"
+            >
+              @if (uploading['CLIENT_IMAGE']) {
+                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              } @else {
+                {{ 'labels.buttons.Upload' | translate }}
+              }
            </button>
-          </div>
-          <button
-            mat-raised-button
-            color="primary"
-            type="button"
-            [disabled]="!clientImageFile || uploading['CLIENT_IMAGE']"
-            (click)="uploadDocument('CLIENT_IMAGE')"
-          >
-            @if (uploading['CLIENT_IMAGE']) {
-              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-            } @else {
-              {{ 'labels.buttons.Upload' | translate }}
+            @if (uploadErrors['CLIENT_IMAGE']) {
+              <div class="ckyc-upload-error">
+                <mat-icon>error_outline</mat-icon>
+                <span>{{ uploadErrors['CLIENT_IMAGE'] }}</span>
+              </div>
+            }
+            @if (uploadResponses['CLIENT_IMAGE']) {
+              <div class="ckyc-upload-response">
+                <p>
+                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].status }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].requestId }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
+                  {{ uploadResponses['CLIENT_IMAGE'].acknowledgementNumber }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
+                  {{ uploadResponses['CLIENT_IMAGE'].processingStatus }}
+                </p>
+              </div>
            }
-          </button>
-          @if (uploadErrors['CLIENT_IMAGE']) {
-            <div class="ckyc-upload-error">
-              <mat-icon>error_outline</mat-icon>
-              <span>{{ uploadErrors['CLIENT_IMAGE'] }}</span>
-            </div>
-          }
-          @if (uploadResponses['CLIENT_IMAGE']) {
-            <div class="ckyc-upload-response">
-              <p>
-                <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].status }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['CLIENT_IMAGE'].requestId }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                {{ uploadResponses['CLIENT_IMAGE'].acknowledgementNumber }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                {{ uploadResponses['CLIENT_IMAGE'].processingStatus }}
-              </p>
-            </div>
-          }
          }
        </mat-card-content>
      </mat-card>
@@ -451,7 +444,11 @@
                </div>
              </div>
              @if (existing.CLIENT_SIGNATURE.previewUrl) {
-                <img [src]="existing.CLIENT_SIGNATURE.previewUrl" alt="Client signature" class="ckyc-existing__thumb ckyc-existing__thumb--wide" />
+                <img
+                  [src]="existing.CLIENT_SIGNATURE.previewUrl"
+                  alt="Client signature"
+                  class="ckyc-existing__thumb ckyc-existing__thumb--wide"
+                />
              }
              <div class="ckyc-existing__meta">
                <fa-icon icon="file-signature"></fa-icon>
@@ -470,65 +467,66 @@
          }

          @if (!existing.CLIENT_SIGNATURE.present || existing.CLIENT_SIGNATURE.expanded) {
-          <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
-          <div class="ckyc-file-row">
-            <input
-              type="file"
-              #clientSignatureInput
-              accept=".png,.jpeg,.jpg"
-              (change)="onFileSelect($event, 'CLIENT_SIGNATURE')"
-              [style.display]="'none'"
-            />
-            <mat-form-field appearance="outline" class="ckyc-file-name-field">
+            <p class="ckyc-upload-hint">{{ 'labels.inputs.Accepted formats' | translate }}: PNG, JPEG, JPG</p>
+            <div class="ckyc-file-row">
              <input
-                matInput
-                [readonly]="true"
-                [value]="clientSignatureFile?.name || ''"
-                [placeholder]="'labels.text.NoFileSelected' | translate"
+                type="file"
+                #clientSignatureInput
+                accept=".png,.jpeg,.jpg"
+                (change)="onFileSelect($event, 'CLIENT_SIGNATURE')"
+                [style.display]="'none'"
              />
-            </mat-form-field>
-            <button mat-stroked-button type="button" (click)="clientSignatureInput.click()">
-              <fa-icon icon="folder-open" size="lg"></fa-icon>
-              &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              <mat-form-field appearance="outline" class="ckyc-file-name-field">
+                <input
+                  matInput
+                  [readonly]="true"
+                  [value]="clientSignatureFile?.name || ''"
+                  [placeholder]="'labels.text.NoFileSelected' | translate"
+                />
+              </mat-form-field>
+              <button mat-stroked-button type="button" (click)="clientSignatureInput.click()">
+                <fa-icon icon="folder-open" size="lg"></fa-icon>
+                &nbsp;{{ 'labels.buttons.Browse' | translate }}
+              </button>
+            </div>
+            <button
+              mat-raised-button
+              color="primary"
+              type="button"
+              [disabled]="!clientSignatureFile || uploading['CLIENT_SIGNATURE']"
+              (click)="uploadDocument('CLIENT_SIGNATURE')"
+            >
+              @if (uploading['CLIENT_SIGNATURE']) {
+                <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
+              } @else {
+                {{ 'labels.buttons.Upload' | translate }}
+              }
            </button>
-          </div>
-          <button
-            mat-raised-button
-            color="primary"
-            type="button"
-            [disabled]="!clientSignatureFile || uploading['CLIENT_SIGNATURE']"
-            (click)="uploadDocument('CLIENT_SIGNATURE')"
-          >
-            @if (uploading['CLIENT_SIGNATURE']) {
-              <mat-progress-spinner diameter="18" mode="indeterminate"></mat-progress-spinner>
-            } @else {
-              {{ 'labels.buttons.Upload' | translate }}
+            @if (uploadErrors['CLIENT_SIGNATURE']) {
+              <div class="ckyc-upload-error">
+                <mat-icon>error_outline</mat-icon>
+                <span>{{ uploadErrors['CLIENT_SIGNATURE'] }}</span>
+              </div>
+            }
+            @if (uploadResponses['CLIENT_SIGNATURE']) {
+              <div class="ckyc-upload-response">
+                <p>
+                  <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_SIGNATURE'].status }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Request ID' | translate }}:</b>
+                  {{ uploadResponses['CLIENT_SIGNATURE'].requestId }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
+                  {{ uploadResponses['CLIENT_SIGNATURE'].acknowledgementNumber }}
+                </p>
+                <p>
+                  <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
+                  {{ uploadResponses['CLIENT_SIGNATURE'].processingStatus }}
+                </p>
+              </div>
            }
-          </button>
-          @if (uploadErrors['CLIENT_SIGNATURE']) {
-            <div class="ckyc-upload-error">
-              <mat-icon>error_outline</mat-icon>
-              <span>{{ uploadErrors['CLIENT_SIGNATURE'] }}</span>
-            </div>
-          }
-          @if (uploadResponses['CLIENT_SIGNATURE']) {
-            <div class="ckyc-upload-response">
-              <p>
-                <b>{{ 'labels.inputs.Status' | translate }}:</b> {{ uploadResponses['CLIENT_SIGNATURE'].status }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Request ID' | translate }}:</b> {{ uploadResponses['CLIENT_SIGNATURE'].requestId }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Acknowledgement Number' | translate }}:</b>
-                {{ uploadResponses['CLIENT_SIGNATURE'].acknowledgementNumber }}
-              </p>
-              <p>
-                <b>{{ 'labels.inputs.Processing Status' | translate }}:</b>
-                {{ uploadResponses['CLIENT_SIGNATURE'].processingStatus }}
-              </p>
-            </div>
-          }
          }
        </mat-card-content>
      </mat-card>
@@ -61,7 +61,7 @@
  overflow: hidden;
  margin-bottom: 18px;
  color: #fff;
-  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 22px rgb(0 0 0 / 10%);

  &::before {
    content: '';
@@ -71,7 +71,7 @@
    width: 320px;
    height: 320px;
    border-radius: 50%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
+    background: radial-gradient(circle, rgb(255 255 255 / 18%), transparent 70%);
    pointer-events: none;
  }

@@ -96,8 +96,8 @@
    width: 60px;
    height: 60px;
    border-radius: 16px;
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.35);
+    background: rgb(255 255 255 / 20%);
+    border: 1px solid rgb(255 255 255 / 35%);
    display: flex;
    align-items: center;
    justify-content: center;
@@ -115,8 +115,8 @@
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.22);
-    border: 1px solid rgba(255, 255, 255, 0.4);
+    background: rgb(255 255 255 / 22%);
+    border: 1px solid rgb(255 255 255 / 40%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
@@ -150,11 +150,20 @@
    opacity: 0.95;
    flex-wrap: wrap;

-    fa-icon { font-size: 11px; opacity: 0.9; margin-right: 3px; }
-    strong { font-weight: 700; }
+    fa-icon {
+      font-size: 11px;
+      opacity: 0.9;
+      margin-right: 3px;
+    }
+
+    strong {
+      font-weight: 700;
+    }
  }

-  &__sep { opacity: 0.5; }
+  &__sep {
+    opacity: 0.5;
+  }

  &__hint {
    font-size: 12px;
@@ -169,8 +178,8 @@
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
-    background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.35);
+    background: rgb(255 255 255 / 20%);
+    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
@@ -186,15 +195,23 @@
    height: 8px;
    border-radius: 50%;
    background: #9fe1cb;
-    box-shadow: 0 0 0 0 rgba(159, 225, 203, 0.7);
+    box-shadow: 0 0 0 0 rgb(159 225 203 / 70%);
    animation: cersai-pulse 2s infinite;
  }
 }

@keyframes cersai-pulse {
-  0% { box-shadow: 0 0 0 0 rgba(159, 225, 203, 0.7); }
-  70% { box-shadow: 0 0 0 10px rgba(159, 225, 203, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(159, 225, 203, 0); }
+  0% {
+    box-shadow: 0 0 0 0 rgb(159 225 203 / 70%);
+  }
+
+  70% {
+    box-shadow: 0 0 0 10px rgb(159 225 203 / 0%);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgb(159 225 203 / 0%);
+  }
 }

 /* ===================== Client info grid ===================== */
@@ -218,7 +235,7 @@

  &:hover {
    border-color: #c6dafc;
-    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.06);
+    box-shadow: 0 2px 8px rgb(26 115 232 / 6%);
  }
 }

@@ -231,9 +248,19 @@
    flex-direction: column;
    align-items: flex-start;

-    &__left { width: 100%; }
-    &__icon { width: 52px; height: 52px; font-size: 22px; }
-    &__ckyc-number { font-size: 20px; }
+    &__left {
+      width: 100%;
+    }
+
+    &__icon {
+      width: 52px;
+      height: 52px;
+      font-size: 22px;
+    }
+
+    &__ckyc-number {
+      font-size: 20px;
+    }
  }
 }

@@ -253,7 +280,10 @@
  align-items: center;
  gap: 6px;

-  fa-icon { color: #1a73e8; font-size: 11px; }
+  fa-icon {
+    color: #1a73e8;
+    font-size: 11px;
+  }
 }

 .ckyc-info-value {
@@ -277,7 +307,9 @@
  }
 }

-.ckyc-info-hint { display: none; }
+.ckyc-info-hint {
+  display: none;
+}

 .ckyc-section-title {
  margin: 24px 0 12px;
@@ -296,14 +328,16 @@
  border-radius: 12px !important;
  border: 1px solid #e8eaed;
  box-shadow: none !important;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  min-height: 240px;

  &:hover {
    border-color: #c6dafc;
-    box-shadow: 0 2px 10px rgba(26, 115, 232, 0.06) !important;
+    box-shadow: 0 2px 10px rgb(26 115 232 / 6%) !important;
  }

  .mat-mdc-card-content {
@@ -336,7 +370,7 @@
  display: flex !important;
  align-items: center;
  justify-content: center;
-  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.25);
+  box-shadow: 0 2px 6px rgb(26 115 232 / 25%);
  flex-shrink: 0;
 }

@@ -426,7 +460,9 @@
  font-size: 12px;
  margin-bottom: 14px;

-  mat-progress-spinner { display: inline-block; }
+  mat-progress-spinner {
+    display: inline-block;
+  }
 }

 .ckyc-existing {
@@ -494,7 +530,10 @@
      font-weight: 600;
    }

-    fa-icon { color: #1d9e75; font-size: 12px; }
+    fa-icon {
+      color: #1d9e75;
+      font-size: 12px;
+    }
  }

  &__key {
@@ -528,7 +567,7 @@
    background: #fff;
    object-fit: cover;
    align-self: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);

    &--wide {
      width: 200px;
@@ -550,7 +589,10 @@
    padding: 0 12px !important;
    letter-spacing: 0.2px;

-    fa-icon { margin-right: 6px; font-size: 11px; }
+    fa-icon {
+      margin-right: 6px;
+      font-size: 11px;
+    }

    &:hover {
      background: #e1f5ee !important;
@@ -176,7 +176,11 @@ export class CkycTabComponent implements OnInit, OnDestroy {
  private formatJavaDate(value: any): string {
    if (!value) return '';
    if (Array.isArray(value) && value.length >= 3) {
-      const [y, m, d] = value;
+      const [
+        y,
+        m,
+        d
+      ] = value;
      return `${String(d).padStart(2, '0')}-${String(m).padStart(2, '0')}-${y}`;
    }
    if (typeof value === 'string') return value;
@@ -236,13 +240,9 @@ export class CkycTabComponent implements OnInit, OnDestroy {

        // 3 & 4. ID proof + Address proof — client identifiers classified via proof-types
        const idProofIds = new Set<string>((proofTypes?.idProofs || []).map((p: any) => String(p.id)));
-        const addressProofIds = new Set<string>(
-          (proofTypes?.addressProofs || []).map((p: any) => String(p.id))
-        );
+        const addressProofIds = new Set<string>((proofTypes?.addressProofs || []).map((p: any) => String(p.id)));

-        const idList = Array.isArray(identifiers)
-          ? identifiers
-          : (identifiers as any)?.pageItems || [];
+        const idList = Array.isArray(identifiers) ? identifiers : (identifiers as any)?.pageItems || [];

        for (const identity of idList) {
          const docTypeId = String(identity?.documentType?.id ?? '');
@@ -10,29 +10,36 @@
  <div class="cv-top">
    <!-- Avatar -->
    <div class="cv-avatar">
-      <img class="cv-avatar__img"
-        [src]="clientImage ? clientImage : 'assets/images/user_placeholder.png'" />
+      <img class="cv-avatar__img" [src]="clientImage ? clientImage : 'assets/images/user_placeholder.png'" />
      <div class="cv-avatar__actions">
-        <button class="cv-avatar__btn"
+        <button
+          class="cv-avatar__btn"
          (click)="doAction('Upload Image')"
          matTooltip="{{ 'tooltips.Upload Image' | translate }}"
-          *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          *mifosxHasPermission="'CREATE_CLIENTIMAGE'"
+        >
          <i class="fa fa-upload"></i>
        </button>
-        <button class="cv-avatar__btn"
+        <button
+          class="cv-avatar__btn"
          (click)="doAction('Capture Image')"
          matTooltip="{{ 'tooltips.Capture Image' | translate }}"
-          *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          *mifosxHasPermission="'CREATE_CLIENTIMAGE'"
+        >
          <i class="fa fa-camera"></i>
        </button>
-        <button class="cv-avatar__btn cv-avatar__btn--danger"
+        <button
+          class="cv-avatar__btn cv-avatar__btn--danger"
          (click)="doAction('Delete Image')"
          matTooltip="{{ 'tooltips.Delete Image' | translate }}"
-          *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+          *mifosxHasPermission="'DELETE_CLIENTIMAGE'"
+        >
          <i class="fa fa-trash"></i>
        </button>
      </div>
-      <span class="cv-avatar__sig" (click)="doAction('View Signature')">{{ 'labels.inputs.View Signature' | translate }}</span>
+      <span class="cv-avatar__sig" (click)="doAction('View Signature')">{{
+        'labels.inputs.View Signature' | translate
+      }}</span>
    </div>

    <!-- Info -->
@@ -40,12 +47,19 @@
      <!-- Name + Status + Menu -->
      <div class="cv-name-row">
        <div class="cv-name">
-          <i class="fa fa-stop cv-name__dot" [ngClass]="clientViewData.status.code | statusLookup"
-            matTooltip="{{ 'labels.status.' + clientViewData.status.value | translate }}"></i>
+          <i
+            class="fa fa-stop cv-name__dot"
+            [ngClass]="clientViewData.status.code | statusLookup"
+            matTooltip="{{ 'labels.status.' + clientViewData.status.value | translate }}"
+          ></i>
          <span class="cv-name__text">
            <mifosx-entity-name
-              [entityName]="complianceHideClientData ? maskName(clientViewData.displayName) : clientViewData.displayName"
-              [display]="'right'" [hideCopy]="complianceHideClientData"></mifosx-entity-name>
+              [entityName]="
+                complianceHideClientData ? maskName(clientViewData.displayName) : clientViewData.displayName
+              "
+              [display]="'right'"
+              [hideCopy]="complianceHideClientData"
+            ></mifosx-entity-name>
          </span>
          <span class="cv-name__status">
            {{ 'labels.status.' + clientViewData.status.value | translate }}
@@ -77,8 +91,12 @@
            <span class="cv-id__label">{{ 'labels.inputs.External Id' | translate }}</span>
            <span class="cv-id__val">
              <mifosx-external-identifier
-                [externalId]="complianceHideClientData ? maskValue(clientViewData.externalId) : clientViewData.externalId"
-                [completed]="true" [hideCopy]="complianceHideClientData"></mifosx-external-identifier>
+                [externalId]="
+                  complianceHideClientData ? maskValue(clientViewData.externalId) : clientViewData.externalId
+                "
+                [completed]="true"
+                [hideCopy]="complianceHideClientData"
+              ></mifosx-external-identifier>
            </span>
          </div>
        }
@@ -118,7 +136,9 @@
            <div class="cv-cell__value">
              <mifosx-external-identifier
                [externalId]="complianceHideClientData ? maskValue(clientViewData.mobileNo) : clientViewData.mobileNo"
-                [completed]="true" [hideCopy]="complianceHideClientData"></mifosx-external-identifier>
+                [completed]="true"
+                [hideCopy]="complianceHideClientData"
+              ></mifosx-external-identifier>
            </div>
          </div>
        }
@@ -127,8 +147,12 @@
            <div class="cv-cell__label">{{ 'labels.inputs.Email' | translate }}</div>
            <div class="cv-cell__value">
              <mifosx-external-identifier
-                [externalId]="complianceHideClientData ? maskEmail(clientViewData.emailAddress) : clientViewData.emailAddress"
-                [completed]="true" [hideCopy]="complianceHideClientData"></mifosx-external-identifier>
+                [externalId]="
+                  complianceHideClientData ? maskEmail(clientViewData.emailAddress) : clientViewData.emailAddress
+                "
+                [completed]="true"
+                [hideCopy]="complianceHideClientData"
+              ></mifosx-external-identifier>
            </div>
          </div>
        }
@@ -148,10 +172,26 @@
          <div class="cv-cell">
            <div class="cv-cell__label">DIP Status</div>
            <div class="cv-cell__value">
-              <span class="cv-badge"
-                [class.cv-badge--green]="clientViewData.dipVerified === true || clientViewData.dipVerified === 'true' || clientViewData.dipVerified === 1"
-                [class.cv-badge--yellow]="clientViewData.dipVerified !== true && clientViewData.dipVerified !== 'true' && clientViewData.dipVerified !== 1">
-                {{ (clientViewData.dipVerified === true || clientViewData.dipVerified === 'true' || clientViewData.dipVerified === 1) ? 'Verified' : 'Pending' }}
+              <span
+                class="cv-badge"
+                [class.cv-badge--green]="
+                  clientViewData.dipVerified === true ||
+                  clientViewData.dipVerified === 'true' ||
+                  clientViewData.dipVerified === 1
+                "
+                [class.cv-badge--yellow]="
+                  clientViewData.dipVerified !== true &&
+                  clientViewData.dipVerified !== 'true' &&
+                  clientViewData.dipVerified !== 1
+                "
+              >
+                {{
+                  clientViewData.dipVerified === true ||
+                  clientViewData.dipVerified === 'true' ||
+                  clientViewData.dipVerified === 1
+                    ? 'Verified'
+                    : 'Pending'
+                }}
              </span>
            </div>
          </div>
@@ -160,10 +200,26 @@
          <div class="cv-cell">
            <div class="cv-cell__label">Sanctions Screening</div>
            <div class="cv-cell__value">
-              <span class="cv-badge"
-                [class.cv-badge--green]="clientViewData.nameVerified === true || clientViewData.nameVerified === 'true' || clientViewData.nameVerified === 1"
-                [class.cv-badge--red]="clientViewData.nameVerified === false || clientViewData.nameVerified === 'false' || clientViewData.nameVerified === 0">
-                {{ (clientViewData.nameVerified === true || clientViewData.nameVerified === 'true' || clientViewData.nameVerified === 1) ? 'Clear' : 'Pending' }}
+              <span
+                class="cv-badge"
+                [class.cv-badge--green]="
+                  clientViewData.nameVerified === true ||
+                  clientViewData.nameVerified === 'true' ||
+                  clientViewData.nameVerified === 1
+                "
+                [class.cv-badge--red]="
+                  clientViewData.nameVerified === false ||
+                  clientViewData.nameVerified === 'false' ||
+                  clientViewData.nameVerified === 0
+                "
+              >
+                {{
+                  clientViewData.nameVerified === true ||
+                  clientViewData.nameVerified === 'true' ||
+                  clientViewData.nameVerified === 1
+                    ? 'Clear'
+                    : 'Pending'
+                }}
              </span>
            </div>
          </div>
@@ -206,244 +262,299 @@
    </div>
  </div>

-      <mat-menu #clientMenu="matMenu">
-        <button mat-menu-item [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CLIENT'">
+  <mat-menu #clientMenu="matMenu">
+    <button mat-menu-item [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CLIENT'">
+      <mat-icon matListIcon>
+        <fa-icon icon="edit" size="sm"></fa-icon>
+      </mat-icon>
+      <span>{{ 'labels.buttons.Edit' | translate }}</span>
+    </button>
+
+    @if (isActive()) {
+      <button mat-menu-item [matMenuTriggerFor]="accountApplications">
+        <mat-icon matListIcon>
+          <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+        </mat-icon>
+        <span>{{ 'labels.buttons.Applications' | translate }}</span>
+      </button>
+    }
+
+    <button mat-menu-item [matMenuTriggerFor]="Actions">
+      <mat-icon matListIcon>
+        <fa-icon icon="tasks" size="sm"></fa-icon>
+      </mat-icon>
+      <span>{{ 'labels.buttons.Actions' | translate }}</span>
+    </button>
+
+    @if (!clientViewData.staffId) {
+      <button mat-menu-item (click)="doAction('Assign Staff')">
+        <mat-icon matListIcon>
+          <fa-icon icon="user-tie" size="sm"></fa-icon>
+        </mat-icon>
+        <span>{{ 'labels.buttons.Assign Staff' | translate }}</span>
+      </button>
+    }
+
+    @if (clientViewData.staffId) {
+      <span>
+        <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_CLIENT'" (click)="doAction('Unassign Staff')">
          <mat-icon matListIcon>
-            <fa-icon icon="edit" size="sm"></fa-icon>
+            <fa-icon icon="user-tie" size="sm"></fa-icon>
          </mat-icon>
-          <span>{{ 'labels.buttons.Edit' | translate }}</span>
+          <span>{{ 'labels.buttons.Unassign Staff' | translate }}</span>
        </button>
+      </span>
+    }

-        @if (isActive()) {
-          <button mat-menu-item [matMenuTriggerFor]="accountApplications">
-            <mat-icon matListIcon>
-              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
-            </mat-icon>
-            <span>{{ 'labels.buttons.Applications' | translate }}</span>
-          </button>
-        }
+    <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
+  </mat-menu>

-        <button mat-menu-item [matMenuTriggerFor]="Actions">
-          <mat-icon matListIcon>
-            <fa-icon icon="tasks" size="sm"></fa-icon>
-          </mat-icon>
-          <span>{{ 'labels.buttons.Actions' | translate }}</span>
-        </button>
+  <mat-menu #accountApplications="matMenu">
+    <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
+      {{ 'labels.buttons.New Loan Account' | translate }}
+    </button>
+    <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'" [routerLink]="['savings-accounts', 'create']">
+      {{ 'labels.buttons.New Savings Account' | translate }}
+    </button>
+    <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">
+      {{ 'labels.buttons.New Share Account' | translate }}
+    </button>
+    <button
+      mat-menu-item
+      *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
+      [routerLink]="['recurring-deposits-accounts', 'create-recurring-deposits-account']"
+    >
+      {{ 'labels.buttons.New Recurring Deposit Account' | translate }}
+    </button>
+    <button
+      mat-menu-item
+      *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
+      [routerLink]="['fixed-deposits-accounts', 'create']"
+    >
+      {{ 'labels.buttons.New Fixed Deposits Account' | translate }}
+    </button>
+    <button mat-menu-item *mifosxHasPermission="'CREATE_CURRENTACCOUNT'" [routerLink]="['current-accounts', 'create']">
+      {{ 'labels.buttons.New Current Account' | translate }}
+    </button>
+  </mat-menu>

-        @if (!clientViewData.staffId) {
-          <button mat-menu-item (click)="doAction('Assign Staff')">
-            <mat-icon matListIcon>
-              <fa-icon icon="user-tie" size="sm"></fa-icon>
-            </mat-icon>
-            <span>{{ 'labels.buttons.Assign Staff' | translate }}</span>
-          </button>
-        }
+  <mat-menu #Actions="matMenu">
+    <button mat-menu-item (click)="doAction('Close')">{{ 'labels.buttons.Close' | translate }}</button>
+    <button mat-menu-item (click)="doAction('Transfer Client')">
+      {{ 'labels.buttons.Transfer Client' | translate }}
+    </button>
+    @if (clientViewData.status.value === 'Pending') {
+      <span
+        ><button mat-menu-item (click)="doAction('Activate')">
+          {{ 'labels.buttons.Activate' | translate }}
+        </button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Pending') {
+      <span
+        ><button mat-menu-item (click)="doAction('Withdraw')">
+          {{ 'labels.buttons.Withdraw' | translate }}
+        </button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Pending') {
+      <span
+        ><button mat-menu-item (click)="doAction('Reject')">{{ 'labels.buttons.Reject' | translate }}</button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Pending') {
+      <span
+        ><button mat-menu-item *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">
+          {{ 'labels.buttons.Delete' | translate }}
+        </button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Closed') {
+      <span
+        ><button mat-menu-item (click)="doAction('Reactivate')">
+          {{ 'labels.buttons.Reactivate' | translate }}
+        </button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Rejected') {
+      <span
+        ><button mat-menu-item (click)="doAction('Undo Rejection')">
+          {{ 'labels.buttons.Undo Rejection' | translate }}
+        </button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Transfer in progress') {
+      <span
+        ><button mat-menu-item (click)="doAction('Undo Transfer')">
+          {{ 'labels.buttons.Undo Transfer' | translate }}
+        </button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Transfer in progress') {
+      <span
+        ><button mat-menu-item (click)="doAction('Accept Transfer')">
+          {{ 'labels.buttons.Accept Transfer' | translate }}
+        </button></span
+      >
+    }
+    @if (clientViewData.status.value === 'Transfer in progress') {
+      <span
+        ><button mat-menu-item (click)="doAction('Reject Transfer')">
+          {{ 'labels.buttons.Reject transfer' | translate }}
+        </button></span
+      >
+    }
+  </mat-menu>

-        @if (clientViewData.staffId) {
-          <span>
-            <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_CLIENT'" (click)="doAction('Unassign Staff')">
-              <mat-icon matListIcon>
-                <fa-icon icon="user-tie" size="sm"></fa-icon>
-              </mat-icon>
-              <span>{{ 'labels.buttons.Unassign Staff' | translate }}</span>
-            </button>
-          </span>
-        }
-
-        <button mat-menu-item [matMenuTriggerFor]="More">{{ 'labels.buttons.More' | translate }}</button>
-      </mat-menu>
-
-      <mat-menu #accountApplications="matMenu">
-        <button mat-menu-item *mifosxHasPermission="'CREATE_LOAN'" [routerLink]="['loans-accounts', 'create']">
-          {{ 'labels.buttons.New Loan Account' | translate }}
-        </button>
+  <mat-menu #More="matMenu">
+    <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'">
+      {{ 'labels.buttons.Add Charge' | translate }}
+    </button>
+    <button mat-menu-item (click)="doAction('Create Collateral')">
+      {{ 'labels.buttons.Create Collateral' | translate }}
+    </button>
+    <button mat-menu-item (click)="doAction('Survey')" [disabled]="true">
+      {{ 'labels.buttons.Survey' | translate }}
+    </button>
+    <button
+      mat-menu-item
+      (click)="doAction('Update Default Savings')"
+      *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"
+    >
+      {{ 'labels.buttons.Update Default Savings' | translate }}
+    </button>
+    <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+      {{ 'labels.buttons.Upload Signature' | translate }}
+    </button>
+    <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+      {{ 'labels.buttons.Delete Signature' | translate }}
+    </button>
+    <button mat-menu-item (click)="doAction('Client Screen Reports')">
+      {{ 'labels.buttons.Client Screen Reports' | translate }}
+    </button>
+    <button
+      mat-menu-item
+      (click)="doAction('Create Standing Instructions')"
+      *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
+    >
+      {{ 'labels.buttons.Create Standing Instructions' | translate }}
+    </button>
+    @if (clientViewData.status.value !== 'Transfer on hold') {
+      <span>
        <button
          mat-menu-item
-          *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
-          [routerLink]="['savings-accounts', 'create']"
+          (click)="doAction('View Standing Instructions')"
+          *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
        >
-          {{ 'labels.buttons.New Savings Account' | translate }}
+          {{ 'labels.buttons.View Standing Instructions' | translate }}
        </button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">
-          {{ 'labels.buttons.New Share Account' | translate }}
-        </button>
-        <button
-          mat-menu-item
-          *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
-          [routerLink]="['recurring-deposits-accounts', 'create-recurring-deposits-account']"
-        >
-          {{ 'labels.buttons.New Recurring Deposit Account' | translate }}
-        </button>
-        <button
-          mat-menu-item
-          *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
-          [routerLink]="['fixed-deposits-accounts', 'create']"
-        >
-          {{ 'labels.buttons.New Fixed Deposits Account' | translate }}
-        </button>
-        <button
-          mat-menu-item
-          *mifosxHasPermission="'CREATE_CURRENTACCOUNT'"
-          [routerLink]="['current-accounts', 'create']"
-        >
-          {{ 'labels.buttons.New Current Account' | translate }}
-        </button>
-      </mat-menu>
-
-      <mat-menu #Actions="matMenu">
-        <button mat-menu-item (click)="doAction('Close')">{{ 'labels.buttons.Close' | translate }}</button>
-        <button mat-menu-item (click)="doAction('Transfer Client')">
-          {{ 'labels.buttons.Transfer Client' | translate }}
-        </button>
-        @if (clientViewData.status.value === 'Pending') {
-          <span
-            ><button mat-menu-item (click)="doAction('Activate')">
-              {{ 'labels.buttons.Activate' | translate }}
-            </button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Pending') {
-          <span
-            ><button mat-menu-item (click)="doAction('Withdraw')">
-              {{ 'labels.buttons.Withdraw' | translate }}
-            </button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Pending') {
-          <span
-            ><button mat-menu-item (click)="doAction('Reject')">{{ 'labels.buttons.Reject' | translate }}</button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Pending') {
-          <span
-            ><button mat-menu-item *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">
-              {{ 'labels.buttons.Delete' | translate }}
-            </button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Closed') {
-          <span
-            ><button mat-menu-item (click)="doAction('Reactivate')">
-              {{ 'labels.buttons.Reactivate' | translate }}
-            </button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Rejected') {
-          <span
-            ><button mat-menu-item (click)="doAction('Undo Rejection')">
-              {{ 'labels.buttons.Undo Rejection' | translate }}
-            </button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Transfer in progress') {
-          <span
-            ><button mat-menu-item (click)="doAction('Undo Transfer')">
-              {{ 'labels.buttons.Undo Transfer' | translate }}
-            </button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Transfer in progress') {
-          <span
-            ><button mat-menu-item (click)="doAction('Accept Transfer')">
-              {{ 'labels.buttons.Accept Transfer' | translate }}
-            </button></span
-          >
-        }
-        @if (clientViewData.status.value === 'Transfer in progress') {
-          <span
-            ><button mat-menu-item (click)="doAction('Reject Transfer')">
-              {{ 'labels.buttons.Reject transfer' | translate }}
-            </button></span
-          >
-        }
-      </mat-menu>
-
-      <mat-menu #More="matMenu">
-        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'">
-          {{ 'labels.buttons.Add Charge' | translate }}
-        </button>
-        <button mat-menu-item (click)="doAction('Create Collateral')">
-          {{ 'labels.buttons.Create Collateral' | translate }}
-        </button>
-        <button mat-menu-item (click)="doAction('Survey')" [disabled]="true">
-          {{ 'labels.buttons.Survey' | translate }}
-        </button>
-        <button
-          mat-menu-item
-          (click)="doAction('Update Default Savings')"
-          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"
-        >
-          {{ 'labels.buttons.Update Default Savings' | translate }}
-        </button>
-        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
-          {{ 'labels.buttons.Upload Signature' | translate }}
-        </button>
-        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
-          {{ 'labels.buttons.Delete Signature' | translate }}
-        </button>
-        <button mat-menu-item (click)="doAction('Client Screen Reports')">
-          {{ 'labels.buttons.Client Screen Reports' | translate }}
-        </button>
-        <button
-          mat-menu-item
-          (click)="doAction('Create Standing Instructions')"
-          *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'"
-        >
-          {{ 'labels.buttons.Create Standing Instructions' | translate }}
-        </button>
-        @if (clientViewData.status.value !== 'Transfer on hold') {
-          <span>
-            <button
-              mat-menu-item
-              (click)="doAction('View Standing Instructions')"
-              *mifosxHasPermission="'READ_STANDINGINSTRUCTION'"
-            >
-              {{ 'labels.buttons.View Standing Instructions' | translate }}
-            </button>
-          </span>
-        }
-      </mat-menu>
+      </span>
+    }
+  </mat-menu>

  <div>
    <nav mat-tab-nav-bar class="cv-tabs" [tabPanel]="tabPanel">
-      <a mat-tab-link [routerLink]="['./general']" routerLinkActive #general="routerLinkActive" [active]="general.isActive">
+      <a
+        mat-tab-link
+        [routerLink]="['./general']"
+        routerLinkActive
+        #general="routerLinkActive"
+        [active]="general.isActive"
+      >
        <i class="fa fa-tachometer cv-tab-icon"></i> {{ 'labels.inputs.General' | translate }}
      </a>
-      <a mat-tab-link [routerLink]="['./personal-data']" routerLinkActive #personalData="routerLinkActive" [active]="personalData.isActive">
+      <a
+        mat-tab-link
+        [routerLink]="['./personal-data']"
+        routerLinkActive
+        #personalData="routerLinkActive"
+        [active]="personalData.isActive"
+      >
        <i class="fa fa-user cv-tab-icon"></i> {{ 'labels.inputs.Personal Data' | translate }}
      </a>
-      <a mat-tab-link [routerLink]="['./address']" routerLinkActive #address="routerLinkActive" [active]="address.isActive">
+      <a
+        mat-tab-link
+        [routerLink]="['./address']"
+        routerLinkActive
+        #address="routerLinkActive"
+        [active]="address.isActive"
+      >
        <i class="fa fa-map-marker cv-tab-icon"></i> {{ 'labels.inputs.Address' | translate }}
      </a>
      @if (clientViewData?.legalForm?.id !== 2) {
-        <a mat-tab-link [routerLink]="['./family-members']" routerLinkActive #familyMembers="routerLinkActive" [active]="familyMembers.isActive">
+        <a
+          mat-tab-link
+          [routerLink]="['./family-members']"
+          routerLinkActive
+          #familyMembers="routerLinkActive"
+          [active]="familyMembers.isActive"
+        >
          <i class="fa fa-users cv-tab-icon"></i> Family Members
        </a>
      }
-      <a mat-tab-link [routerLink]="['./nominees']" routerLinkActive #nomineesTab="routerLinkActive" [active]="nomineesTab.isActive">
+      <a
+        mat-tab-link
+        [routerLink]="['./nominees']"
+        routerLinkActive
+        #nomineesTab="routerLinkActive"
+        [active]="nomineesTab.isActive"
+      >
        <i class="fa fa-shield cv-tab-icon"></i> Nominee
      </a>
-      <a mat-tab-link [routerLink]="['./identities']" routerLinkActive #identities="routerLinkActive" [active]="identities.isActive" *mifosxHasPermission="'READ_CLIENTIDENTIFIER'">
+      <a
+        mat-tab-link
+        [routerLink]="['./identities']"
+        routerLinkActive
+        #identities="routerLinkActive"
+        [active]="identities.isActive"
+        *mifosxHasPermission="'READ_CLIENTIDENTIFIER'"
+      >
        <i class="fa fa-id-card cv-tab-icon"></i> {{ 'labels.inputs.Identities' | translate }}
      </a>
      <a mat-tab-link [routerLink]="['./kyc']" routerLinkActive #kyc="routerLinkActive" [active]="kyc.isActive">
        <i class="fa fa-check-circle cv-tab-icon"></i> {{ 'labels.inputs.KYC' | translate }}
      </a>
      @if (clientViewData.legalForm?.id !== 1) {
-        <a mat-tab-link [routerLink]="['./entity-classification']" routerLinkActive #ecTab="routerLinkActive" [active]="ecTab.isActive">
+        <a
+          mat-tab-link
+          [routerLink]="['./entity-classification']"
+          routerLinkActive
+          #ecTab="routerLinkActive"
+          [active]="ecTab.isActive"
+        >
          <i class="fa fa-building cv-tab-icon"></i> Scheme &amp; Sector
        </a>
      }
      <a mat-tab-link [routerLink]="['./ckyc']" routerLinkActive #ckyc="routerLinkActive" [active]="ckyc.isActive">
        <i class="fa fa-shield cv-tab-icon"></i> {{ 'labels.inputs.CKYC' | translate }}
      </a>
-      <a mat-tab-link [routerLink]="['./form60']" routerLinkActive #form60="routerLinkActive" [active]="form60.isActive">
+      <a
+        mat-tab-link
+        [routerLink]="['./form60']"
+        routerLinkActive
+        #form60="routerLinkActive"
+        [active]="form60.isActive"
+      >
        <i class="fa fa-file-text cv-tab-icon"></i> {{ 'labels.inputs.Form 60' | translate }}
      </a>
-      <a mat-tab-link [routerLink]="['./documents']" routerLinkActive #documents="routerLinkActive" [active]="documents.isActive" *mifosxHasPermission="'READ_DOCUMENT'">
+      <a
+        mat-tab-link
+        [routerLink]="['./documents']"
+        routerLinkActive
+        #documents="routerLinkActive"
+        [active]="documents.isActive"
+        *mifosxHasPermission="'READ_DOCUMENT'"
+      >
        <i class="fa fa-folder-open cv-tab-icon"></i> {{ 'labels.inputs.Documents' | translate }}
      </a>
-      <a mat-tab-link [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive" [active]="notes.isActive" *mifosxHasPermission="'READ_CLIENTNOTE'">
+      <a
+        mat-tab-link
+        [routerLink]="['./notes']"
+        routerLinkActive
+        #notes="routerLinkActive"
+        [active]="notes.isActive"
+        *mifosxHasPermission="'READ_CLIENTNOTE'"
+      >
        <i class="fa fa-sticky-note cv-tab-icon"></i> {{ 'labels.inputs.Notes' | translate }}
      </a>
      @for (clientDatatable of clientDatatables; track clientDatatable) {
@@ -43,10 +43,17 @@ $accent: #0ea5e9;
    content: '';
    position: absolute;
    inset: 0;
-    background: repeating-linear-gradient(108deg, transparent 0, transparent 80px, rgb(255 255 255 / 2.5%) 80px, rgb(255 255 255 / 2.5%) 160px);
+    background: repeating-linear-gradient(
+      108deg,
+      transparent 0,
+      transparent 80px,
+      rgb(255 255 255 / 2.5%) 80px,
+      rgb(255 255 255 / 2.5%) 160px
+    );
    pointer-events: none;
  }

+  /* stylelint-disable-next-line selector-max-universal */
  > * {
    position: relative;
    z-index: 1;
@@ -90,7 +97,9 @@ $accent: #0ea5e9;
    cursor: pointer;
    transition: all 0.12s;

-    i { font-size: 10px; }
+    i {
+      font-size: 10px;
+    }

    &:hover {
      background: rgb(255 255 255 / 20%) !important;
@@ -109,12 +118,18 @@ $accent: #0ea5e9;
    cursor: pointer;
    font-weight: 500;

-    &:hover { color: #fff; text-decoration: underline; }
+    &:hover {
+      color: #fff;
+      text-decoration: underline;
+    }
  }
 }

 // ── Info column ──
-.cv-info { flex: 1; min-width: 0; }
+.cv-info {
+  flex: 1;
+  min-width: 0;
+}

 // ── Name row ──
 .cv-name-row {
@@ -129,7 +144,9 @@ $accent: #0ea5e9;
  align-items: center;
  gap: 10px;

-  &__dot { font-size: 10px; }
+  &__dot {
+    font-size: 10px;
+  }

  &__text {
    font-size: 20px;
@@ -161,7 +178,10 @@ $accent: #0ea5e9;
  border-radius: 5px !important;
  line-height: 28px !important;

-  &:hover { background: rgb(255 255 255 / 10%); color: #fff !important; }
+  &:hover {
+    background: rgb(255 255 255 / 10%);
+    color: #fff !important;
+  }

  .actions-menu {
    font-size: 14px !important;
@@ -250,12 +270,25 @@ $accent: #0ea5e9;
  border-radius: 10px;
  letter-spacing: 0.3px;

-  &--green { background: rgb(16 185 129 / 20%); color: #6ee7b7; }
-  &--yellow { background: rgb(245 158 11 / 20%); color: #fcd34d; }
-  &--red { background: rgb(239 68 68 / 20%); color: #fca5a5; }
+  &--green {
+    background: rgb(16 185 129 / 20%);
+    color: #6ee7b7;
+  }
+
+  &--yellow {
+    background: rgb(245 158 11 / 20%);
+    color: #fcd34d;
+  }
+
+  &--red {
+    background: rgb(239 68 68 / 20%);
+    color: #fca5a5;
+  }
 }

-.actions-menu { color: #fff !important; }
+.actions-menu {
+  color: #fff !important;
+}

 // ── Tab bar ──
 .cv-tabs {
@@ -279,7 +312,8 @@ $accent: #0ea5e9;
 }

 // Fix copy icons on dark background
-.cv-top, .cv-grid {
+.cv-top,
+.cv-grid {
  ::ng-deep {
    mifosx-external-identifier,
    mifosx-account-number {
@@ -350,16 +384,33 @@ $accent: #0ea5e9;

 // ── Responsive ──
@media (width <= 1024px) {
-  .cv-grid { grid-template-columns: repeat(3, 1fr); }
+  .cv-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }

@media (width <= 768px) {
-  .cv-top { flex-direction: column; align-items: center; text-align: center; }
-  .cv-name-row { justify-content: center; }
-  .cv-ids { justify-content: center; }
-  .cv-grid { grid-template-columns: repeat(2, 1fr); }
+  .cv-top {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .cv-name-row {
+    justify-content: center;
+  }
+
+  .cv-ids {
+    justify-content: center;
+  }
+
+  .cv-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }

@media (width <= 480px) {
-  .cv-grid { grid-template-columns: 1fr; }
+  .cv-grid {
+    grid-template-columns: 1fr;
+  }
 }
@@ -24,5 +24,7 @@
 </mat-dialog-content>
 <mat-dialog-actions class="icd-actions">
  <button mat-button type="button" (click)="cancel()">Cancel</button>
-  <button mat-flat-button color="primary" type="button" (click)="save()" [disabled]="!croppedBlob">Use cropped image</button>
+  <button mat-flat-button color="primary" type="button" (click)="save()" [disabled]="!croppedBlob">
+    Use cropped image
+  </button>
 </mat-dialog-actions>
@@ -38,6 +38,7 @@
  max-height: 60vh;
  overflow: hidden;

+  /* stylelint-disable-next-line selector-type-no-unknown */
  ::ng-deep image-cropper {
    display: block;
    max-height: 56vh;
@@ -30,17 +30,14 @@
          <strong>KYC Document Upload</strong>
          <p>
            Upload KYC documents as per RBI guidelines. Accepted:
-            <i class="fa fa-file-image-o"></i> JPG,
-            <i class="fa fa-file-image-o"></i> PNG,
+            <i class="fa fa-file-image-o"></i> JPG, <i class="fa fa-file-image-o"></i> PNG,
            <i class="fa fa-file-pdf-o"></i> PDF — max 5MB each.
          </p>
        </div>
      </div>

      @if (loadingProofs) {
-        <div class="kyc-loading">
-          <i class="fa fa-spinner fa-spin"></i> Loading document types…
-        </div>
+        <div class="kyc-loading"><i class="fa fa-spinner fa-spin"></i> Loading document types…</div>
      }

      <form [formGroup]="uploadDocumentForm" class="kyc-form">
@@ -51,12 +48,8 @@
              <i class="fa fa-user-circle-o"></i>
            </div>
            <div class="kyc-section__titles">
-              <p class="kyc-section__title">
-                <i class="fa fa-id-badge"></i> Identity proof
-              </p>
-              <p class="kyc-section__sub">
-                Select document type — upload requirements will update automatically
-              </p>
+              <p class="kyc-section__title"><i class="fa fa-id-badge"></i> Identity proof</p>
+              <p class="kyc-section__sub">Select document type — upload requirements will update automatically</p>
            </div>
          </div>

@@ -73,9 +66,7 @@
          }

          <div class="kyc-field kyc-mb-sm">
-            <label class="kyc-label">
-              <i class="fa fa-file-text-o"></i> Document type
-            </label>
+            <label class="kyc-label"> <i class="fa fa-file-text-o"></i> Document type </label>
            <div class="kyc-select-wrap">
              <i class="fa fa-id-card kyc-select-wrap__icon"></i>
              <select
@@ -94,9 +85,7 @@

          @if (selectedIdProof) {
            <div class="kyc-field kyc-mb-sm">
-              <label class="kyc-label">
-                <i class="fa fa-hashtag"></i> {{ selectedIdProof.documentKeyLabel }}
-              </label>
+              <label class="kyc-label"> <i class="fa fa-hashtag"></i> {{ selectedIdProof.documentKeyLabel }} </label>
              <div class="kyc-input-wrap">
                <i class="fa fa-pencil kyc-input-wrap__icon"></i>
                <input
@@ -122,11 +111,9 @@
                <div class="kyc-upload-label">
                  <span class="kyc-label">
                    <i class="fa fa-file-image-o"></i>
-                    {{ selectedIdProof.sides === 2 ? 'Front side' : (selectedIdProof.name + ' (single copy)') }}
-                  </span>
-                  <span class="kyc-tag kyc-tag--req">
-                    <i class="fa fa-asterisk"></i> Required
+                    {{ selectedIdProof.sides === 2 ? 'Front side' : selectedIdProof.name + ' (single copy)' }}
                  </span>
+                  <span class="kyc-tag kyc-tag--req"> <i class="fa fa-asterisk"></i> Required </span>
                </div>
                <label
                  class="kyc-dropzone"
@@ -142,15 +129,12 @@
                  @if (idFiles.front) {
                    <i class="fa fa-check-circle kyc-dropzone__icon"></i>
                    <p class="kyc-dropzone__text">File selected</p>
-                    <p class="kyc-dropzone__name">
-                      <i class="fa fa-paperclip"></i> {{ getFileName('id', 'front') }}
-                    </p>
+                    <p class="kyc-dropzone__name"><i class="fa fa-paperclip"></i> {{ getFileName('id', 'front') }}</p>
                  } @else {
                    <i class="fa fa-cloud-upload kyc-dropzone__icon"></i>
                    <p class="kyc-dropzone__text">Click to upload</p>
                    <p class="kyc-dropzone__hint">
-                      <i class="fa fa-file-image-o"></i> JPG ·
-                      <i class="fa fa-file-image-o"></i> PNG ·
+                      <i class="fa fa-file-image-o"></i> JPG · <i class="fa fa-file-image-o"></i> PNG ·
                      <i class="fa fa-file-pdf-o"></i> PDF · max 5MB
                    </p>
                  }
@@ -160,12 +144,8 @@
              @if (selectedIdProof.sides === 2) {
                <div class="kyc-field">
                  <div class="kyc-upload-label">
-                    <span class="kyc-label">
-                      <i class="fa fa-file-image-o"></i> Back side
-                    </span>
-                    <span class="kyc-tag kyc-tag--req">
-                      <i class="fa fa-asterisk"></i> Required
-                    </span>
+                    <span class="kyc-label"> <i class="fa fa-file-image-o"></i> Back side </span>
+                    <span class="kyc-tag kyc-tag--req"> <i class="fa fa-asterisk"></i> Required </span>
                  </div>
                  <label
                    class="kyc-dropzone"
@@ -181,15 +161,12 @@
                    @if (idFiles.back) {
                      <i class="fa fa-check-circle kyc-dropzone__icon"></i>
                      <p class="kyc-dropzone__text">File selected</p>
-                      <p class="kyc-dropzone__name">
-                        <i class="fa fa-paperclip"></i> {{ getFileName('id', 'back') }}
-                      </p>
+                      <p class="kyc-dropzone__name"><i class="fa fa-paperclip"></i> {{ getFileName('id', 'back') }}</p>
                    } @else {
                      <i class="fa fa-cloud-upload kyc-dropzone__icon"></i>
                      <p class="kyc-dropzone__text">Click to upload</p>
                      <p class="kyc-dropzone__hint">
-                        <i class="fa fa-file-image-o"></i> JPG ·
-                        <i class="fa fa-file-image-o"></i> PNG ·
+                        <i class="fa fa-file-image-o"></i> JPG · <i class="fa fa-file-image-o"></i> PNG ·
                        <i class="fa fa-file-pdf-o"></i> PDF · max 5MB
                      </p>
                    }
@@ -231,12 +208,8 @@
              <i class="fa fa-map-marker"></i>
            </div>
            <div class="kyc-section__titles">
-              <p class="kyc-section__title">
-                <i class="fa fa-home"></i> Address proof
-              </p>
-              <p class="kyc-section__sub">
-                Select document type — upload requirements will update automatically
-              </p>
+              <p class="kyc-section__title"><i class="fa fa-home"></i> Address proof</p>
+              <p class="kyc-section__sub">Select document type — upload requirements will update automatically</p>
            </div>
          </div>

@@ -258,14 +231,10 @@
          }

          <div class="kyc-field">
-            <label class="kyc-label">
-              <i class="fa fa-file-text-o"></i> Document type
-            </label>
+            <label class="kyc-label"> <i class="fa fa-file-text-o"></i> Document type </label>
            <div class="kyc-chip-wrap">
              @for (group of addressGroups; track group.label; let last = $last) {
-                <div class="kyc-chip-group-label">
-                  <i class="fa fa-folder-open-o"></i> {{ group.label }}
-                </div>
+                <div class="kyc-chip-group-label"><i class="fa fa-folder-open-o"></i> {{ group.label }}</div>
                <div class="kyc-chip-grid">
                  @for (p of group.items; track p.id) {
                    <span
@@ -305,11 +274,9 @@
                <div class="kyc-upload-label">
                  <span class="kyc-label">
                    <i class="fa fa-file-image-o"></i>
-                    {{ selectedAddrProof.sides === 2 ? 'Front side' : (selectedAddrProof.name + ' (single copy)') }}
-                  </span>
-                  <span class="kyc-tag kyc-tag--req">
-                    <i class="fa fa-asterisk"></i> Required
+                    {{ selectedAddrProof.sides === 2 ? 'Front side' : selectedAddrProof.name + ' (single copy)' }}
                  </span>
+                  <span class="kyc-tag kyc-tag--req"> <i class="fa fa-asterisk"></i> Required </span>
                </div>
                <label
                  class="kyc-dropzone"
@@ -332,8 +299,7 @@
                    <i class="fa fa-cloud-upload kyc-dropzone__icon"></i>
                    <p class="kyc-dropzone__text">Click to upload</p>
                    <p class="kyc-dropzone__hint">
-                      <i class="fa fa-file-image-o"></i> JPG ·
-                      <i class="fa fa-file-image-o"></i> PNG ·
+                      <i class="fa fa-file-image-o"></i> JPG · <i class="fa fa-file-image-o"></i> PNG ·
                      <i class="fa fa-file-pdf-o"></i> PDF · max 5MB
                    </p>
                  }
@@ -343,12 +309,8 @@
              @if (selectedAddrProof.sides === 2) {
                <div class="kyc-field">
                  <div class="kyc-upload-label">
-                    <span class="kyc-label">
-                      <i class="fa fa-file-image-o"></i> Back side
-                    </span>
-                    <span class="kyc-tag kyc-tag--req">
-                      <i class="fa fa-asterisk"></i> Required
-                    </span>
+                    <span class="kyc-label"> <i class="fa fa-file-image-o"></i> Back side </span>
+                    <span class="kyc-tag kyc-tag--req"> <i class="fa fa-asterisk"></i> Required </span>
                  </div>
                  <label
                    class="kyc-dropzone"
@@ -371,8 +333,7 @@
                      <i class="fa fa-cloud-upload kyc-dropzone__icon"></i>
                      <p class="kyc-dropzone__text">Click to upload</p>
                      <p class="kyc-dropzone__hint">
-                        <i class="fa fa-file-image-o"></i> JPG ·
-                        <i class="fa fa-file-image-o"></i> PNG ·
+                        <i class="fa fa-file-image-o"></i> JPG · <i class="fa fa-file-image-o"></i> PNG ·
                        <i class="fa fa-file-pdf-o"></i> PDF · max 5MB
                      </p>
                    }
@@ -388,11 +349,7 @@
                  </label>
                  <div class="kyc-input-wrap kyc-input-wrap--date">
                    <i class="fa fa-calendar-o kyc-input-wrap__icon"></i>
-                    <input
-                      type="date"
-                      class="kyc-input kyc-input--date"
-                      formControlName="issueDate"
-                    />
+                    <input type="date" class="kyc-input kyc-input--date" formControlName="issueDate" />
                  </div>
                </div>
              }
@@ -439,19 +396,21 @@
        <div class="kyc-status-bar">
          <span>
            <span class="kyc-dot" [class.kyc-dot--done]="isIdComplete()">
-              @if (isIdComplete()) { <i class="fa fa-check"></i> }
+              @if (isIdComplete()) {
+                <i class="fa fa-check"></i>
+              }
            </span>
            <i class="fa fa-id-badge"></i> Identity proof
          </span>
          <span>
            <span class="kyc-dot" [class.kyc-dot--done]="isAddressComplete()">
-              @if (isAddressComplete()) { <i class="fa fa-check"></i> }
+              @if (isAddressComplete()) {
+                <i class="fa fa-check"></i>
+              }
            </span>
            <i class="fa fa-home"></i> Address proof
          </span>
-          <span class="kyc-status-hint">
-            <i class="fa fa-info-circle"></i> Fill in at least one section
-          </span>
+          <span class="kyc-status-hint"> <i class="fa fa-info-circle"></i> Fill in at least one section </span>
        </div>
      </form>
    } @else {
@@ -488,13 +447,7 @@
      <i class="fa fa-times fd-btn__icon"></i>
      {{ 'labels.buttons.Cancel' | translate }}
    </button>
-    <button
-      mat-flat-button
-      color="primary"
-      [disabled]="!canSubmit"
-      (click)="submit()"
-      class="fd-btn fd-btn--submit"
-    >
+    <button mat-flat-button color="primary" [disabled]="!canSubmit" (click)="submit()" class="fd-btn fd-btn--submit">
      <i class="fa fa-check fd-btn__icon"></i>
      @if (documentIdentifier) {
        {{ 'labels.buttons.Submit' | translate }}
@@ -304,8 +304,13 @@ $red-900: #993c1d;
    border-color: $teal-50;
    border-left-color: $teal-700;

-    > i:first-child { color: $teal-700; }
-    .kyc-prefill__value { color: $teal-900; }
+    > i:first-child {
+      color: $teal-700;
+    }
+
+    .kyc-prefill__value {
+      color: $teal-900;
+    }
  }
 }

@@ -363,15 +368,23 @@ $red-900: #993c1d;
    transition: opacity 0.15s;
  }

-  &:hover::-webkit-calendar-picker-indicator { opacity: 0.9; }
+  &:hover::-webkit-calendar-picker-indicator {
+    opacity: 0.9;
+  }

  &::-webkit-datetime-edit {
    color: $gray-900;
    padding-top: 1px;
  }

-  &::-webkit-datetime-edit-fields-wrapper { color: $gray-900; }
-  &::-webkit-datetime-edit-text { color: $gray-500; padding: 0 2px; }
+  &::-webkit-datetime-edit-fields-wrapper {
+    color: $gray-900;
+  }
+
+  &::-webkit-datetime-edit-text {
+    color: $gray-500;
+    padding: 0 2px;
+  }

  &:invalid::-webkit-datetime-edit,
  &:not(:focus):placeholder-shown::-webkit-datetime-edit {
@@ -398,9 +411,13 @@ $red-900: #993c1d;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
-  transition: border-color 0.15s, background 0.15s;
+  transition:
+    border-color 0.15s,
+    background 0.15s;

-  &::placeholder { color: $gray-500; }
+  &::placeholder {
+    color: $gray-500;
+  }

  &:focus {
    outline: none;
@@ -414,7 +431,10 @@ $red-900: #993c1d;
  color: $gray-500;
  padding: 8px 0 14px;

-  i { margin-right: 6px; color: $primary; }
+  i {
+    margin-right: 6px;
+    color: $primary;
+  }
 }

 .kyc-form {
@@ -452,7 +472,10 @@ $red-900: #993c1d;
    align-items: center;
    gap: 8px;

-    i { color: $primary; font-size: 14px; }
+    i {
+      color: $primary;
+      font-size: 14px;
+    }
  }

  &__sub {
@@ -496,7 +519,9 @@ $red-900: #993c1d;
  }
 }

-.kyc-mb-sm { margin-bottom: 12px; }
+.kyc-mb-sm {
+  margin-bottom: 12px;
+}

 .kyc-field {
  display: flex;
@@ -534,9 +559,13 @@ $red-900: #993c1d;
  color: $gray-900;
  font-size: 13px;
  font-family: inherit;
-  transition: border-color 0.15s, background 0.15s;
+  transition:
+    border-color 0.15s,
+    background 0.15s;

-  &::placeholder { color: $gray-500; }
+  &::placeholder {
+    color: $gray-500;
+  }

  &:focus {
    outline: none;
@@ -553,7 +582,6 @@ $red-900: #993c1d;

 .kyc-select {
  appearance: none;
-  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%235f6368' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
@@ -570,7 +598,11 @@ $red-900: #993c1d;
  line-height: 1.5;
  margin-bottom: 12px;

-  i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
+  i {
+    font-size: 14px;
+    flex-shrink: 0;
+    margin-top: 1px;
+  }

  &--blue {
    background: $blue-50;
@@ -670,8 +702,13 @@ $red-900: #993c1d;
    border-style: solid;
    background: $teal-50;

-    .kyc-dropzone__icon { color: $teal-accent; }
-    .kyc-dropzone__text { color: $teal-900; }
+    .kyc-dropzone__icon {
+      color: $teal-accent;
+    }
+
+    .kyc-dropzone__text {
+      color: $teal-900;
+    }
  }

  &--req {
@@ -682,7 +719,9 @@ $red-900: #993c1d;
      background: $red-100;
    }

-    .kyc-dropzone__icon { color: $red-700; }
+    .kyc-dropzone__icon {
+      color: $red-700;
+    }
  }
 }

@@ -704,7 +743,10 @@ $red-900: #993c1d;
  align-items: center;
  gap: 6px;

-  i { color: $gray-500; font-size: 11px; }
+  i {
+    color: $gray-500;
+    font-size: 11px;
+  }
 }

 .kyc-chip-grid {
@@ -735,13 +777,18 @@ $red-900: #993c1d;
  white-space: nowrap;
  user-select: none;

-  i { font-size: 11px; color: $gray-500; }
+  i {
+    font-size: 11px;
+    color: $gray-500;
+  }

  &:hover {
    border-color: $teal-700;
    color: $teal-900;

-    i { color: $teal-700; }
+    i {
+      color: $teal-700;
+    }
  }

  &--sel {
@@ -750,7 +797,9 @@ $red-900: #993c1d;
    color: $teal-900;
    font-weight: 600;

-    i { color: $teal-accent; }
+    i {
+      color: $teal-accent;
+    }
  }
 }

@@ -765,6 +814,15 @@ $red-900: #993c1d;
  border-top: 1px solid $gray-200;
  flex-wrap: wrap;
  gap: 8px;
+
+  span i {
+    color: $gray-500;
+    margin: 0 2px;
+  }
+
+  .kyc-status-hint i {
+    color: $primary;
+  }
 }

 .kyc-status-hint {
@@ -789,12 +847,6 @@ $red-900: #993c1d;
  }
 }

-.kyc-status-bar {
-  span i { color: $gray-500; margin: 0 2px; }
-
-  .kyc-status-hint i { color: $primary; }
-}
-
 .kyc-merged {
  margin-top: 14px;
  padding: 12px 14px;
@@ -815,7 +867,9 @@ $red-900: #993c1d;
    font-weight: 700;
    color: #0c4a6e;

-    i { margin-right: 6px; }
+    i {
+      margin-right: 6px;
+    }
  }

  &__hint {
@@ -863,7 +917,9 @@ $red-900: #993c1d;
    font-family: inherit;
    transition: all 0.15s;

-    i { font-size: 11px; }
+    i {
+      font-size: 11px;
+    }

    &:hover {
      background: #0284c7;
@@ -246,9 +246,7 @@ export class UploadDocumentDialogComponent implements OnInit {
      next: (res: any) => {
        const activeFilter = (p: any) => p?.active !== false;
        this.idProofs = (res?.idProofs || []).filter(activeFilter).map((p: any) => this.normalizeProof(p));
-        this.addressProofs = (res?.addressProofs || [])
-          .filter(activeFilter)
-          .map((p: any) => this.normalizeProof(p));
+        this.addressProofs = (res?.addressProofs || []).filter(activeFilter).map((p: any) => this.normalizeProof(p));
        this.buildAddressGroups();
        this.loadingProofs = false;
      },
@@ -281,7 +279,12 @@ export class UploadDocumentDialogComponent implements OnInit {
      if (!map.has(key)) map.set(key, []);
      map.get(key).push(p);
    });
-    this.addressGroups = Array.from(map.entries()).map(([label, items]) => ({ label, items }));
+    this.addressGroups = Array.from(map.entries()).map(
+      ([
+        label,
+        items
+      ]) => ({ label, items })
+    );
  }

  onIdProofChange(proofId: any): void {
@@ -371,40 +374,48 @@ export class UploadDocumentDialogComponent implements OnInit {
      return;
    }

-    Promise.all([this.fileToImage(front), this.fileToImage(back)])
-      .then(([fImg, bImg]) => {
-        const targetWidth = Math.max(fImg.width, bImg.width);
-        const fScale = targetWidth / fImg.width;
-        const bScale = targetWidth / bImg.width;
-        const fH = fImg.height * fScale;
-        const bH = bImg.height * bScale;
-        const gap = 20;
-        const totalH = Math.round(fH + bH + gap);
+    Promise.all([
+      this.fileToImage(front),
+      this.fileToImage(back)
+    ])
+      .then(
+        ([
+          fImg,
+          bImg
+        ]) => {
+          const targetWidth = Math.max(fImg.width, bImg.width);
+          const fScale = targetWidth / fImg.width;
+          const bScale = targetWidth / bImg.width;
+          const fH = fImg.height * fScale;
+          const bH = bImg.height * bScale;
+          const gap = 20;
+          const totalH = Math.round(fH + bH + gap);

-        const canvas = document.createElement('canvas');
-        canvas.width = targetWidth;
-        canvas.height = totalH;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
+          const canvas = document.createElement('canvas');
+          canvas.width = targetWidth;
+          canvas.height = totalH;
+          const ctx = canvas.getContext('2d');
+          if (!ctx) return;

-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(fImg, 0, 0, targetWidth, fH);
-        ctx.drawImage(bImg, 0, fH + gap, targetWidth, bH);
+          ctx.fillStyle = '#ffffff';
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(fImg, 0, 0, targetWidth, fH);
+          ctx.drawImage(bImg, 0, fH + gap, targetWidth, bH);

-        canvas.toBlob((blob) => {
-          if (!blob) return;
-          const merged = new File([blob], `${proof.name || 'document'}-combined.png`, { type: 'image/png' });
-          const preview = canvas.toDataURL('image/png');
-          if (section === 'id') {
-            this.idMergedFile = merged;
-            this.idMergedPreview = preview;
-          } else {
-            this.addrMergedFile = merged;
-            this.addrMergedPreview = preview;
-          }
-        }, 'image/png');
-      })
+          canvas.toBlob((blob) => {
+            if (!blob) return;
+            const merged = new File([blob], `${proof.name || 'document'}-combined.png`, { type: 'image/png' });
+            const preview = canvas.toDataURL('image/png');
+            if (section === 'id') {
+              this.idMergedFile = merged;
+              this.idMergedPreview = preview;
+            } else {
+              this.addrMergedFile = merged;
+              this.addrMergedPreview = preview;
+            }
+          }, 'image/png');
+        }
+      )
      .catch(() => this.resetMerged(section));
  }

@@ -1,61 +1,144 @@
-.ec-view { padding: 16px 0; }
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+.ec-view {
+  padding: 16px 0;
+}

 .ec-loading {
-  display: flex; flex-direction: column; align-items: center; gap: 12px;
-  padding: 48px; color: #64748b;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px;
+  color: #64748b;
 }

 .ec-header {
-  display: flex; align-items: center; justify-content: space-between;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
  margin-bottom: 16px;

-  h3 { font-size: 16px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px;
-    fa-icon { color: #1565c0; }
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1e293b;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    fa-icon {
+      color: #1565c0;
+    }
  }
 }

 .ec-count {
-  font-size: 12px; font-weight: 600; color: #059669;
-  background: #ecfdf5; padding: 3px 10px; border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #059669;
+  background: #ecfdf5;
+  padding: 3px 10px;
+  border-radius: 12px;
 }

 .ec-empty {
-  display: flex; flex-direction: column; align-items: center; gap: 8px;
-  padding: 40px; color: #94a3b8; font-size: 14px;
-  background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 10px;
-  mat-icon { font-size: 36px; width: 36px; height: 36px; }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px;
+  color: #94a3b8;
+  font-size: 14px;
+  background: #f8fafc;
+  border: 2px dashed #e2e8f0;
+  border-radius: 10px;
+
+  mat-icon {
+    font-size: 36px;
+    width: 36px;
+    height: 36px;
+  }
 }

 .ec-card {
-  border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 12px; overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  overflow: hidden;
 }

 .ec-card__header {
-  display: flex; align-items: center; gap: 10px;
-  padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #f1f5f9;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: #f8fafc;
+  border-bottom: 1px solid #f1f5f9;
 }

 .ec-card__tag {
-  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
 }

-.ec-card__title { font-size: 14px; font-weight: 600; color: #1e293b; flex: 1; }
+.ec-card__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  flex: 1;
+}

 .ec-card__badge {
-  font-size: 10px; font-weight: 700; color: #059669;
-  background: #ecfdf5; padding: 2px 8px; border-radius: 10px; border: 1px solid #a7f3d0;
+  font-size: 10px;
+  font-weight: 700;
+  color: #059669;
+  background: #ecfdf5;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid #a7f3d0;
 }

-.ec-card__body { padding: 14px 16px; }
+.ec-card__body {
+  padding: 14px 16px;
+}

 .ec-card__grid {
-  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px 16px;
 }

-.ec-card__field { display: flex; flex-direction: column; gap: 2px; }
-.ec-card__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; font-weight: 500; }
-.ec-card__value { font-size: 13px; font-weight: 500; color: #1e293b; }
+.ec-card__field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ec-card__label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.ec-card__value {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+}

@media (width <= 768px) {
-  .ec-card__grid { grid-template-columns: repeat(2, 1fr); }
+  .ec-card__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
@@ -1,3 +1,11 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
 import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -29,19 +37,45 @@ export class EntityClassificationTabComponent implements OnInit {
  categories = [
    { key: 'msme', label: 'MSME', tag: 'Udyam / MSME', tagColor: '#0A5C6B', tagBg: '#E6F4F6', icon: 'cogs' },
    { key: 'startup', label: 'Startup India', tag: 'DPIIT', tagColor: '#1A5FAB', tagBg: '#EAF2FB', icon: 'rocket' },
-    { key: 'mudra', label: 'Mudra Borrower', tag: 'PMMY', tagColor: '#8A5A00', tagBg: '#FEF3DC', icon: 'hand-holding-usd' },
+    {
+      key: 'mudra',
+      label: 'Mudra Borrower',
+      tag: 'PMMY',
+      tagColor: '#8A5A00',
+      tagBg: '#FEF3DC',
+      icon: 'hand-holding-usd'
+    },
    { key: 'eou', label: 'Export Oriented Unit', tag: 'EOU', tagColor: '#1B7A4A', tagBg: '#E8F5EE', icon: 'ship' },
-    { key: 'importexport', label: 'Import Export', tag: 'DGFT / IEC', tagColor: '#5B3A8A', tagBg: '#F0EBF8', icon: 'exchange-alt' },
+    {
+      key: 'importexport',
+      label: 'Import Export',
+      tag: 'DGFT / IEC',
+      tagColor: '#5B3A8A',
+      tagBg: '#F0EBF8',
+      icon: 'exchange-alt'
+    },
    { key: 'psl', label: 'Priority Sector', tag: 'RBI PSL', tagColor: '#7B1F1F', tagBg: '#FCEAEA', icon: 'bullseye' },
-    { key: 'nps', label: 'Non-Priority Sector', tag: 'General', tagColor: '#444441', tagBg: '#F1EFE8', icon: 'building' }
+    {
+      key: 'nps',
+      label: 'Non-Priority Sector',
+      tag: 'General',
+      tagColor: '#444441',
+      tagBg: '#F1EFE8',
+      icon: 'building'
+    }
  ];

  ngOnInit() {
    this.clientId = this.route.parent?.snapshot.paramMap.get('clientId') || '';
    if (this.clientId) {
      this.clientsService.getEntityClassifications(this.clientId).subscribe({
-        next: (res: any) => { this.data = res; this.loading = false; },
-        error: () => { this.loading = false; }
+        next: (res: any) => {
+          this.data = res;
+          this.loading = false;
+        },
+        error: () => {
+          this.loading = false;
+        }
      });
    } else {
      this.loading = false;
@@ -50,19 +84,25 @@ export class EntityClassificationTabComponent implements OnInit {

  get enabledCategories(): any[] {
    if (!this.data) return [];
-    return this.categories.filter(c => this.data[c.key]?.enabled);
+    return this.categories.filter((c) => this.data[c.key]?.enabled);
  }

  getCategoryData(key: string): any {
    return this.data?.[key] || {};
  }

-  getFieldPairs(catData: any): { label: string, value: any }[] {
+  getFieldPairs(catData: any): { label: string; value: any }[] {
    if (!catData) return [];
-    const skip = ['id', 'clientId', 'enabled', 'locale', 'dateFormat'];
+    const skip = [
+      'id',
+      'clientId',
+      'enabled',
+      'locale',
+      'dateFormat'
+    ];
    return Object.keys(catData)
-      .filter(k => !skip.includes(k) && catData[k] != null && catData[k] !== '' && catData[k] !== false)
-      .map(k => ({
+      .filter((k) => !skip.includes(k) && catData[k] != null && catData[k] !== '' && catData[k] !== false)
+      .map((k) => ({
        label: this.formatLabel(k),
        value: this.formatValue(catData[k])
      }));
@@ -71,7 +111,7 @@ export class EntityClassificationTabComponent implements OnInit {
  private formatLabel(key: string): string {
    return key
      .replace(/([A-Z])/g, ' $1')
-      .replace(/^./, s => s.toUpperCase())
+      .replace(/^./, (s) => s.toUpperCase())
      .replace(/Id$/, '')
      .trim();
  }
@@ -7,7 +7,6 @@
 -->

 <div class="nom-container mat-typography">
-
  <!-- ═══ FAMILY MEMBERS SECTION ═══ -->
  <div class="nom-header">
    <div class="nom-header__left">
@@ -50,7 +49,12 @@
            <button mat-stroked-button color="primary" class="nom-actions__edit" (click)="editFamilyMember(member, i)">
              <fa-icon icon="edit" class="m-r-10"></fa-icon> Edit
            </button>
-            <button mat-stroked-button color="warn" class="nom-actions__delete" (click)="deleteMember(member, 'Family Member')">
+            <button
+              mat-stroked-button
+              color="warn"
+              class="nom-actions__delete"
+              (click)="deleteMember(member, 'Family Member')"
+            >
              <fa-icon icon="trash" class="m-r-10"></fa-icon> Delete
            </button>
          </div>
@@ -91,5 +95,4 @@
      </mat-expansion-panel>
    }
  </mat-accordion>
-
 </div>
@@ -80,12 +80,12 @@ export class FamilyMembersTabComponent {

  /** Family members (non-nominee entries) */
  get familyMembers(): any[] {
-    return this.clientFamilyMembers.filter(m => !m.nominationType || m.nominationType === '');
+    return this.clientFamilyMembers.filter((m) => !m.nominationType || m.nominationType === '');
  }

  /** Nominees (entries with nominationType set) */
  get nominees(): any[] {
-    return this.clientFamilyMembers.filter(m => m.nominationType && m.nominationType !== '');
+    return this.clientFamilyMembers.filter((m) => m.nominationType && m.nominationType !== '');
  }

  /** Get relationship display name */
@@ -44,7 +44,9 @@ $white: #fff;
  height: 32px !important;
  line-height: 32px !important;
  color: $gray-500;
-  transition: color 0.15s ease, background 0.15s ease;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;

  &:hover {
    color: $gray-900;
@@ -48,8 +48,14 @@ export class NomineeDialogComponent implements OnInit {
    const member = this.data.member;
    this.nomineeForm = this.formBuilder.group({
      nominationType: [member?.nominationType || 'DA1'],
-      firstName: [member?.firstName || '', Validators.required],
-      relationshipId: [member?.relationshipId || '', Validators.required],
+      firstName: [
+        member?.firstName || '',
+        Validators.required
+      ],
+      relationshipId: [
+        member?.relationshipId || '',
+        Validators.required
+      ],
      dateOfBirth: [member?.dateOfBirth ? this.dateUtils.formatDate(member.dateOfBirth, 'yyyy-MM-dd') : null],
      percentageShare: [member?.percentageShare ?? 100],
      isDependent: [member?.isDependent || false],
@@ -61,13 +61,17 @@
            }
            @if (form60Data.dateOfBirth) {
              <div class="f60-detail">
-                <span class="f60-detail__label"><mat-icon class="f60-detail__icon">calendar_today</mat-icon> Date of Birth</span>
+                <span class="f60-detail__label"
+                  ><mat-icon class="f60-detail__icon">calendar_today</mat-icon> Date of Birth</span
+                >
                <span class="f60-detail__value">{{ form60Data.dateOfBirth | dateFormat }}</span>
              </div>
            }
            @if (form60Data.fatherName) {
              <div class="f60-detail">
-                <span class="f60-detail__label"><mat-icon class="f60-detail__icon">family_restroom</mat-icon> Father's Name</span>
+                <span class="f60-detail__label"
+                  ><mat-icon class="f60-detail__icon">family_restroom</mat-icon> Father's Name</span
+                >
                <span class="f60-detail__value">{{ form60Data.fatherName }}</span>
              </div>
            }
@@ -79,25 +83,33 @@
            }
            @if (form60Data.transactionType) {
              <div class="f60-detail">
-                <span class="f60-detail__label"><mat-icon class="f60-detail__icon">receipt_long</mat-icon> Transaction Type</span>
+                <span class="f60-detail__label"
+                  ><mat-icon class="f60-detail__icon">receipt_long</mat-icon> Transaction Type</span
+                >
                <span class="f60-detail__value">{{ form60Data.transactionType }}</span>
              </div>
            }
            @if (form60Data.transactionAmount) {
              <div class="f60-detail">
-                <span class="f60-detail__label"><mat-icon class="f60-detail__icon">currency_rupee</mat-icon> Transaction Amount</span>
+                <span class="f60-detail__label"
+                  ><mat-icon class="f60-detail__icon">currency_rupee</mat-icon> Transaction Amount</span
+                >
                <span class="f60-detail__value">&#8377; {{ form60Data.transactionAmount }}</span>
              </div>
            }
            @if (form60Data.estimatedTotalIncome) {
              <div class="f60-detail">
-                <span class="f60-detail__label"><mat-icon class="f60-detail__icon">account_balance_wallet</mat-icon> Estimated Total Income</span>
+                <span class="f60-detail__label"
+                  ><mat-icon class="f60-detail__icon">account_balance_wallet</mat-icon> Estimated Total Income</span
+                >
                <span class="f60-detail__value">&#8377; {{ form60Data.estimatedTotalIncome }}</span>
              </div>
            }
            @if (form60Data.reasonForNoPan) {
              <div class="f60-detail">
-                <span class="f60-detail__label"><mat-icon class="f60-detail__icon">help_outline</mat-icon> Reason for No PAN</span>
+                <span class="f60-detail__label"
+                  ><mat-icon class="f60-detail__icon">help_outline</mat-icon> Reason for No PAN</span
+                >
                <span class="f60-detail__value">{{ form60Data.reasonForNoPan }}</span>
              </div>
            }
@@ -181,7 +193,8 @@
            <!-- Declaration -->
            <div class="f60-declaration">
              <mat-checkbox formControlName="declaration">
-                I hereby declare that I do not have a Permanent Account Number (PAN) and the information provided above is true and correct to the best of my knowledge and belief.
+                I hereby declare that I do not have a Permanent Account Number (PAN) and the information provided above
+                is true and correct to the best of my knowledge and belief.
              </mat-checkbox>
            </div>

@@ -6,19 +6,26 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

-$primary: #1E6BB8;
-$primary-light: #EBF3FF;
+$primary: #1e6bb8;
+$primary-light: #ebf3ff;
 $green: #16a34a;
 $green-light: #dcfce7;
 $amber: #f59e0b;
 $amber-light: #fef3c7;
-$border: #E2E8F0;
-$text: #1A2332;
-$muted: #64748B;
-$bg: #F0F4F8;
+$border: #e2e8f0;
+$text: #1a2332;
+$muted: #64748b;
+$bg: #f0f4f8;

-.f60-container { padding: 20px 24px; }
-.f60-loading { display: flex; justify-content: center; padding: 40px; }
+.f60-container {
+  padding: 20px 24px;
+}
+
+.f60-loading {
+  display: flex;
+  justify-content: center;
+  padding: 40px;
+}

 /* ── PAN OK — Not Required ── */
 .f60-pan-ok {
@@ -29,103 +36,260 @@ $bg: #F0F4F8;
  border-radius: 12px;

  &__icon-wrap {
-    width: 72px; height: 72px; border-radius: 50%;
-    background: #fff; display: inline-flex; align-items: center;
-    justify-content: center; margin-bottom: 16px;
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    background: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba($green, 0.15);
  }
-  &__icon { font-size: 40px; width: 40px; height: 40px; color: $green; }
-  &__title { font-size: 20px; font-weight: 700; color: $text; margin: 0 0 8px; }
+
+  &__icon {
+    font-size: 40px;
+    width: 40px;
+    height: 40px;
+    color: $green;
+  }
+
+  &__title {
+    font-size: 20px;
+    font-weight: 700;
+    color: $text;
+    margin: 0 0 8px;
+  }

  &__desc {
-    font-size: 15px; color: $text; margin: 0 0 6px;
-    display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
-    strong { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
+    font-size: 15px;
+    color: $text;
+    margin: 0 0 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    flex-wrap: wrap;
+
+    strong {
+      font-family: 'JetBrains Mono', monospace;
+      letter-spacing: 0.5px;
+    }
+  }
+
+  &__tick {
+    font-size: 18px !important;
+    width: 18px !important;
+    height: 18px !important;
+    color: $green;
+  }
+
+  &__verified {
+    font-size: 13px;
+    font-weight: 600;
+    color: $green;
+  }
+
+  &__rule {
+    font-size: 12px;
+    color: $muted;
+    margin: 12px 0 0;
  }
-  &__tick { font-size: 18px !important; width: 18px !important; height: 18px !important; color: $green; }
-  &__verified { font-size: 13px; font-weight: 600; color: $green; }
-  &__rule { font-size: 12px; color: $muted; margin: 12px 0 0; }
 }

 /* ── Warning Banner ── */
 .f60-warning {
-  display: flex; align-items: center; gap: 12px;
-  background: $amber-light; padding: 14px 20px;
-  border-left: 4px solid $amber; border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: $amber-light;
+  padding: 14px 20px;
+  border-left: 4px solid $amber;
+  border-radius: 8px;
  margin-bottom: 20px;

-  &__icon { color: $amber; font-size: 24px; flex-shrink: 0; }
-  &__text { font-size: 13px; color: #92400e; line-height: 1.5; strong { font-weight: 700; } }
+  &__icon {
+    color: $amber;
+    font-size: 24px;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    font-size: 13px;
+    color: #92400e;
+    line-height: 1.5;
+
+    strong {
+      font-weight: 700;
+    }
+  }
 }

 /* ── Card ── */
 .f60-card {
-  background: #fff; border: 1px solid $border; border-radius: 12px; overflow: hidden;
+  background: #fff;
+  border: 1px solid $border;
+  border-radius: 12px;
+  overflow: hidden;

  &__header {
-    display: flex; align-items: center; gap: 10px;
-    padding: 14px 20px; background: $bg; border-bottom: 1px solid $border;
-    h3 { margin: 0; font-size: 15px; font-weight: 600; color: $text; flex: 1; }
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 20px;
+    background: $bg;
+    border-bottom: 1px solid $border;
+
+    h3 {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 600;
+      color: $text;
+      flex: 1;
+    }
+  }
+
+  &__header-icon {
+    color: $primary;
+    font-size: 22px;
  }
-  &__header-icon { color: $primary; font-size: 22px; }

  &__status {
-    font-size: 11px; font-weight: 600; color: $green; background: $green-light;
-    padding: 3px 10px; border-radius: 12px;
+    font-size: 11px;
+    font-weight: 600;
+    color: $green;
+    background: $green-light;
+    padding: 3px 10px;
+    border-radius: 12px;
  }

  &__edit {
-    font-size: 12px !important; height: 30px !important; border-radius: 6px !important;
-    mat-icon { font-size: 16px; width: 16px; height: 16px; margin-right: 4px; }
+    font-size: 12px !important;
+    height: 30px !important;
+    border-radius: 6px !important;
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+    }
+  }
+
+  &__body {
+    padding: 20px;
  }
-  &__body { padding: 20px; }
 }

 /* ── Detail Grid (read-only) ── */
 .f60-detail-grid {
-  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px 24px;

-  @media (width <= 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) {
+    grid-template-columns: 1fr;
+  }
 }

 .f60-detail {
-  display: flex; flex-direction: column;
-  &--full { grid-column: 1 / -1; }
+  display: flex;
+  flex-direction: column;
+
+  &--full {
+    grid-column: 1 / -1;
+  }

  &__label {
-    font-size: 11px; font-weight: 600; text-transform: uppercase;
-    color: $muted; letter-spacing: 0.5px; margin-bottom: 4px;
-    display: flex; align-items: center; gap: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: $muted;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__icon {
+    font-size: 15px !important;
+    width: 15px !important;
+    height: 15px !important;
+    color: $primary;
+  }
+
+  &__value {
+    font-size: 15px;
+    font-weight: 600;
+    color: $text;
  }
-  &__icon { font-size: 15px !important; width: 15px !important; height: 15px !important; color: $primary; }
-  &__value { font-size: 15px; font-weight: 600; color: $text; }
 }

 /* ── Form Grid ── */
 .f60-form-grid {
-  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px 16px;

-  @media (width <= 600px) { grid-template-columns: 1fr; }
+  @media (width <= 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.f60-ff {
+  width: 100%;
+
+  &--full {
+    grid-column: 1 / -1;
+  }
 }
-.f60-ff { width: 100%; &--full { grid-column: 1 / -1; } }

 .f60-prefix {
-  display: inline-flex; align-items: center;
-  padding-left: 4px; padding-right: 8px; margin-right: 8px;
-  border-right: 1.5px solid #cbd5e1; line-height: 1;
-  mat-icon { font-size: 20px; width: 20px; height: 20px; color: $primary; }
+  display: inline-flex;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 8px;
+  margin-right: 8px;
+  border-right: 1.5px solid #cbd5e1;
+  line-height: 1;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    color: $primary;
+  }
 }

 /* ── Declaration ── */
 .f60-declaration {
-  margin: 12px 0 20px; padding: 14px 16px;
-  background: $bg; border-radius: 8px; border: 1px solid $border;
-  font-size: 13px; line-height: 1.5; color: $muted;
+  margin: 12px 0 20px;
+  padding: 14px 16px;
+  background: $bg;
+  border-radius: 8px;
+  border: 1px solid $border;
+  font-size: 13px;
+  line-height: 1.5;
+  color: $muted;
 }

 /* ── Actions ── */
 .f60-actions {
-  display: flex; justify-content: flex-end; gap: 10px;
-  button { border-radius: 8px !important; font-weight: 600 !important; }
-  mat-icon { font-size: 18px; width: 18px; height: 18px; margin-right: 4px; vertical-align: middle; }
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+
+  button {
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+  }
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
 }
@@ -90,33 +90,37 @@ export class Form60TabComponent implements OnInit, OnDestroy {

  private loadForm60Purposes(): void {
    this.loadingPurposes = true;
-    this.clientsService.getCodeValuesByName('FORM_60_PURPOSE').pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((values: any[]) => {
-      this.transactionTypes = (values || [])
-        .sort((a: any, b: any) => (a.position || 0) - (b.position || 0))
-        .map((v: any) => ({ value: v.name, label: v.name }));
-      this.loadingPurposes = false;
-    });
+    this.clientsService
+      .getCodeValuesByName('FORM_60_PURPOSE')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((values: any[]) => {
+        this.transactionTypes = (values || [])
+          .sort((a: any, b: any) => (a.position || 0) - (b.position || 0))
+          .map((v: any) => ({ value: v.name, label: v.name }));
+        this.loadingPurposes = false;
+      });
  }

  private checkPanStatus(): void {
    this.checkingPan = true;
-    this.clientsService.getClientKyc(this.clientId).pipe(
-      takeUntil(this.destroy$),
-      catchError(() => of(null))
-    ).subscribe((kyc: any) => {
-      this.checkingPan = false;
-      if (kyc?.panNumber) {
-        this.hasPan = true;
-        this.panNumber = kyc.panNumber;
-        this.panVerified = kyc.panVerified || false;
-        this.loading = false;
-      } else {
-        this.hasPan = false;
-        this.loadForm60Data();
-      }
-    });
+    this.clientsService
+      .getClientKyc(this.clientId)
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError(() => of(null))
+      )
+      .subscribe((kyc: any) => {
+        this.checkingPan = false;
+        if (kyc?.panNumber) {
+          this.hasPan = true;
+          this.panNumber = kyc.panNumber;
+          this.panVerified = kyc.panVerified || false;
+          this.loading = false;
+        } else {
+          this.hasPan = false;
+          this.loadForm60Data();
+        }
+      });
  }

  private createForm(): void {
@@ -7,7 +7,6 @@
 -->

 <div class="general-tab-container mat-typography">
-
  <!-- Performance History - KPI Stat Cards -->
  <section class="performance-section">
    <h3 class="performance-title">{{ 'labels.heading.Performance History' | translate }}</h3>
@@ -164,7 +163,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Active Saving Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Active Saving Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -211,7 +212,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Closed Saving Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Closed Saving Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -233,6 +236,89 @@
    }
  </section>

+  <!-- Current Accounts -->
+  @if (currentAccounts?.length > 0) {
+    <section class="account-section">
+      <div class="section-header">
+        <div class="section-header__left">
+          <i class="fa fa-credit-card section-header__icon"></i>
+          <h3 class="section-header__title">Current Accounts</h3>
+          <span class="section-header__badge">{{ currentAccounts?.length || 0 }}</span>
+        </div>
+      </div>
+
+      <div class="table-wrapper">
+        <table mat-table [dataSource]="currentAccounts">
+          <ng-container matColumnDef="Account No">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account No' | translate }}</th>
+            <td mat-cell *matCellDef="let element">
+              <i class="fa fa-stop" [ngClass]="element.status.code | statusLookup"></i>
+              <mifosx-account-number accountNo="{{ element.accountNo }}"></mifosx-account-number>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Saving Account">
+            <th mat-header-cell *matHeaderCellDef>Current Account Product</th>
+            <td mat-cell *matCellDef="let element">
+              <mifosx-long-text textValue="{{ element.productName }}" chars="35"></mifosx-long-text>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Last Active">
+            <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Last Active' | translate }}</th>
+            <td mat-cell *matCellDef="let element">{{ element.lastActiveTransactionDate | dateFormat }}</td>
+          </ng-container>
+          <ng-container matColumnDef="Balance">
+            <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance' | translate }}</th>
+            <td mat-cell class="r-amount" *matCellDef="let element">
+              {{ element.accountBalance | currency: element.currency?.code || 'INR' : 'symbol-narrow' : '1.2-2' }}
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="Actions">
+            <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+            <td mat-cell class="center" *matCellDef="let element">
+              @if (element.status.submittedAndPendingApproval) {
+                <button
+                  class="account-action-button"
+                  mat-raised-button
+                  color="primary"
+                  (click)="routeEdit($event)"
+                  [routerLink]="['../', 'current-accounts', element.id, 'actions', 'Approve']"
+                >
+                  <i class="fa fa-check"></i>
+                </button>
+              }
+              <button
+                class="account-action-button"
+                mat-raised-button
+                color="primary"
+                (click)="routeEdit($event)"
+                [routerLink]="['../', 'current-accounts', element.id, 'general']"
+              >
+                <i class="fa fa-eye"></i>
+              </button>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="no-data">
+            <td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
+              <div class="table-empty-state">
+                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
+                <p class="table-empty-state__text">No Active Current Accounts Available</p>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
+          <tr
+            mat-row
+            *matRowDef="let row; columns: openSavingsColumns"
+            [routerLink]="['../', 'current-accounts', row.id, 'general']"
+          ></tr>
+          <tr mat-footer-row *matFooterRowDef="currentAccounts?.length === 0 ? ['no-data'] : []"></tr>
+        </table>
+      </div>
+    </section>
+  }
+
  <!-- Upcoming Charges -->
  <section class="account-section">
    <div class="section-header">
@@ -258,7 +344,8 @@
        <ng-container matColumnDef="Name">
          <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
          <td mat-cell *matCellDef="let element">
-            <i class="fa fa-stop" [ngClass]="!(element.isWaived || element.isPaid) | statusLookup"></i> {{ element.name }}
+            <i class="fa fa-stop" [ngClass]="!(element.isWaived || element.isPaid) | statusLookup"></i>
+            {{ element.name }}
          </td>
        </ng-container>

@@ -322,7 +409,11 @@
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="upcomingChargesColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: upcomingChargesColumns" [routerLink]="['../', 'charges', row.id]"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: upcomingChargesColumns"
+          [routerLink]="['../', 'charges', row.id]"
+        ></tr>
        <tr mat-footer-row *matFooterRowDef="upcomingCharges?.length === 0 ? ['no-data'] : []"></tr>
      </table>
    </div>
@@ -407,7 +498,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -454,7 +547,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Closed Fixed Deposit Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Closed Fixed Deposit Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -559,7 +654,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="openSavingsColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -607,7 +704,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSavingsColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -775,7 +874,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="openLoansColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Active Loan Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Active Loan Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -867,7 +968,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="closedLoansColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Closed Loan Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Closed Loan Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -924,7 +1027,8 @@
          <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Total Value' | translate }}</th>
          <td mat-cell class="r-amount" *matCellDef="let element">
            {{
-              element.basePrice * element.quantity | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2'
+              element.basePrice * element.quantity
+                | currency: element.currency?.code || 'USD' : 'symbol-narrow' : '1.2-2'
            }}
          </td>
        </ng-container>
@@ -1043,7 +1147,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="openSharesColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Active Share Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Active Share Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -1094,7 +1200,9 @@
            <td mat-footer-cell *matFooterCellDef [attr.colspan]="closedSharesColumns.length">
              <div class="table-empty-state">
                <i class="fa fa-folder-open-o table-empty-state__icon"></i>
-                <p class="table-empty-state__text">{{ 'labels.messages.No Closed Share Accounts Available' | translate }}</p>
+                <p class="table-empty-state__text">
+                  {{ 'labels.messages.No Closed Share Accounts Available' | translate }}
+                </p>
              </div>
            </td>
          </ng-container>
@@ -1123,4 +1231,4 @@
      <embed [src]="pdfUrl" type="application/pdf" width="100%" height="600px" />
    </div>
  </div>
-</div>
+</div>
@@ -58,9 +58,13 @@ $red: #d93025;
  background: $white;
  border-radius: 10px;
  padding: 18px 20px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 6%);
+  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 rgb(0 0 0 / 10%);
@@ -219,6 +223,7 @@ $red: #d93025;
 }

 // ── Mat Table Styling ──
+/* stylelint-disable selector-no-qualifying-type */
 table[mat-table] {
  width: 100%;
  border-collapse: collapse;
@@ -312,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 {
@@ -228,6 +228,8 @@ export class GeneralTabComponent implements OnDestroy {
  loanAccounts: any[] = [];
  /** Savings Accounts Data */
  savingAccounts: any[] = [];
+  /** Current Accounts Data */
+  currentAccounts: any[] = [];
  /** Shares Accounts Data */
  shareAccounts: any[] = [];
  /** Upcoming Charges Data */
@@ -273,6 +275,7 @@ export class GeneralTabComponent implements OnDestroy {
      (data: { clientAccountsData: any; clientChargesData: any; clientSummary: any; clientCollateralData: any }) => {
        this.clientAccountData = data.clientAccountsData;
        this.savingAccounts = data.clientAccountsData?.savingsAccounts ?? [];
+        this.currentAccounts = data.clientAccountsData?.currentAccounts ?? [];
        this.loanAccounts = data.clientAccountsData?.loanAccounts ?? [];
        this.shareAccounts = data.clientAccountsData?.shareAccounts ?? [];

@@ -14,7 +14,13 @@
      <h3 class="idt-header__title">{{ 'labels.heading.Identities' | translate }}</h3>
      <span class="idt-header__badge">{{ clientIdentities?.length || 0 }}</span>
    </div>
-    <button mat-flat-button color="primary" class="idt-header__btn" (click)="addIdentifier()" *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'">
+    <button
+      mat-flat-button
+      color="primary"
+      class="idt-header__btn"
+      (click)="addIdentifier()"
+      *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
+    >
      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
    </button>
  </div>
@@ -35,11 +41,21 @@
        <div class="idt-card__title">
          <i class="fa fa-file-text idt-card__type-icon"></i>
          <span class="idt-card__type">{{ identity.documentType?.name }}</span>
-          <span class="idt-card__status" [class.idt-card__status--active]="identity.status === 'clientIdentifierStatusType.active'" [class.idt-card__status--inactive]="identity.status !== 'clientIdentifierStatusType.active'">
+          <span
+            class="idt-card__status"
+            [class.idt-card__status--active]="identity.status === 'clientIdentifierStatusType.active'"
+            [class.idt-card__status--inactive]="identity.status !== 'clientIdentifierStatusType.active'"
+          >
            {{ identity.status === 'clientIdentifierStatusType.active' ? 'Active' : 'Inactive' }}
          </span>
        </div>
-        <button mat-stroked-button color="warn" class="idt-card__delete" (click)="deleteIdentifier(identity.clientId, identity.id, i)" *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'">
+        <button
+          mat-stroked-button
+          color="warn"
+          class="idt-card__delete"
+          (click)="deleteIdentifier(identity.clientId, identity.id, i)"
+          *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'"
+        >
          <i class="fa fa-trash"></i>
        </button>
      </div>
@@ -70,13 +86,22 @@
            </div>
            <div class="idt-docs__grid">
              @for (document of identity.documents; track trackByDocumentId($index, document)) {
-                <div class="idt-doc" [class.idt-doc--clickable]="isPreviewable(document)"
+                <div
+                  class="idt-doc"
+                  [class.idt-doc--clickable]="isPreviewable(document)"
                  (click)="isPreviewable(document) && openDocumentPreview(identity, document)"
                  (keydown.enter)="isPreviewable(document) && openDocumentPreview(identity, document)"
-                  tabindex="0" role="button"
-                  [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name">
+                  tabindex="0"
+                  role="button"
+                  [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
+                >
                  @if (previewThumbnails[document.id]) {
-                    <img [src]="previewThumbnails[document.id]" [alt]="document.name" class="idt-doc__thumb" loading="lazy" />
+                    <img
+                      [src]="previewThumbnails[document.id]"
+                      [alt]="document.name"
+                      class="idt-doc__thumb"
+                      loading="lazy"
+                    />
                  } @else {
                    <div class="idt-doc__placeholder">
                      <i class="fa fa-file-text-o"></i>
@@ -85,9 +110,7 @@
                  <div class="idt-doc__info">
                    <span class="idt-doc__name">{{ document.name }}</span>
                    @if (document.fileName) {
-                      <span class="idt-doc__file">
-                        <i class="fa fa-paperclip"></i> {{ document.fileName }}
-                      </span>
+                      <span class="idt-doc__file"> <i class="fa fa-paperclip"></i> {{ document.fileName }} </span>
                    }
                  </div>
                  @if (isPreviewable(document)) {
@@ -37,7 +37,10 @@ $red-light: #fce8e6;
    gap: 10px;
  }

-  &__icon { font-size: 16px; color: $primary; }
+  &__icon {
+    font-size: 16px;
+    color: $primary;
+  }

  &__title {
    margin: 0;
@@ -71,8 +74,17 @@ $red-light: #fce8e6;
  border-radius: 10px;
  border: 1px dashed $gray-200;

-  &__icon { font-size: 32px; color: $gray-500; margin-bottom: 8px; }
-  &__text { color: $gray-500; font-size: 13px; margin: 0; }
+  &__icon {
+    font-size: 32px;
+    color: $gray-500;
+    margin-bottom: 8px;
+  }
+
+  &__text {
+    color: $gray-500;
+    font-size: 13px;
+    margin: 0;
+  }
 }

 // Identity Card
@@ -82,7 +94,9 @@ $red-light: #fce8e6;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
-  transition: box-shadow 0.15s, border-color 0.15s;
+  transition:
+    box-shadow 0.15s,
+    border-color 0.15s;
  position: relative;

  &::before {
@@ -96,7 +110,7 @@ $red-light: #fce8e6;

  &:hover {
    border-color: $primary-light;
-    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.08);
+    box-shadow: 0 2px 8px rgb(26 115 232 / 8%);
  }

  &__header {
@@ -126,7 +140,7 @@ $red-light: #fce8e6;
    justify-content: center;
    background: linear-gradient(135deg, $primary, #4285f4);
    border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.25);
+    box-shadow: 0 2px 6px rgb(26 115 232 / 25%);
    flex-shrink: 0;
  }

@@ -162,14 +176,18 @@ $red-light: #fce8e6;
      background: $green-light;
      color: $green;

-      &::before { background: $green; }
+      &::before {
+        background: $green;
+      }
    }

    &--inactive {
      background: $red-light;
      color: $red;

-      &::before { background: $red; }
+      &::before {
+        background: $red;
+      }
    }
  }

@@ -189,7 +207,9 @@ $red-light: #fce8e6;
      background: $red-light !important;
    }

-    i { font-size: 13px; }
+    i {
+      font-size: 13px;
+    }
  }

  &__body {
@@ -214,7 +234,9 @@ $red-light: #fce8e6;
    padding: 8px 14px;
    border-bottom: 1px dashed $gray-200;

-    &:last-child { border-bottom: none; }
+    &:last-child {
+      border-bottom: none;
+    }
  }

  &__icon {
@@ -257,8 +279,13 @@ $red-light: #fce8e6;
  }

  @media (width <= 600px) {
-    &__row { flex-wrap: wrap; }
-    &__label { min-width: 0; }
+    &__row {
+      flex-wrap: wrap;
+    }
+
+    &__label {
+      min-width: 0;
+    }
  }
 }

@@ -277,7 +304,9 @@ $red-light: #fce8e6;
    align-items: center;
    gap: 6px;

-    i { color: $primary; }
+    i {
+      color: $primary;
+    }
  }

  &__count {
@@ -314,7 +343,7 @@ $red-light: #fce8e6;

    &:hover {
      border-color: $primary;
-      box-shadow: 0 2px 8px rgba(26, 115, 232, 0.1);
+      box-shadow: 0 2px 8px rgb(26 115 232 / 10%);
      transform: translateY(-1px);
    }
  }
@@ -369,7 +398,9 @@ $red-light: #fce8e6;
    align-items: center;
    gap: 4px;

-    i { font-size: 9px; }
+    i {
+      font-size: 9px;
+    }
  }

  &__preview {
@@ -388,7 +419,11 @@ $red-light: #fce8e6;
    flex-shrink: 0;
  }

-  &:hover .idt-doc__preview { opacity: 1; }
+  &:hover .idt-doc__preview {
+    opacity: 1;
+  }
 }

-.document-lightbox-host { display: none; }
+.document-lightbox-host {
+  display: none;
+}
@@ -132,18 +132,15 @@ export class IdentitiesTabComponent implements OnDestroy {
      });

    // Pull display name from parent route's clientViewData
-    this.route.parent.data
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((data: any) => {
-        this.clientName = data?.clientViewData?.displayName || '';
-      });
+    this.route.parent.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: any) => {
+      this.clientName = data?.clientViewData?.displayName || '';
+    });

    // Pull permanent address (falls back to first available address)
    this.clientService.getClientAddressData(this.clientId).subscribe({
      next: (addresses: any[]) => {
        if (!addresses?.length) return;
-        const permanent =
-          addresses.find((a) => /permanent/i.test(a?.addressType || '')) || addresses[0];
+        const permanent = addresses.find((a) => /permanent/i.test(a?.addressType || '')) || addresses[0];
        this.clientAddress = this.formatAddress(permanent);
      },
      error: () => undefined
@@ -214,10 +211,7 @@ export class IdentitiesTabComponent implements OnDestroy {
    const identifierData = {
      documentTypeId: section.proofId,
      status: 'Active',
-      documentKey:
-        kind === 'id'
-          ? section.documentKey
-          : `${section.proof?.name || 'Address Proof'} - ${this.clientId}`,
+      documentKey: kind === 'id' ? section.documentKey : `${section.proof?.name || 'Address Proof'} - ${this.clientId}`,
      description: kind === 'address' && section.address ? section.address : description
    };

@@ -65,12 +65,22 @@
              <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
            }
          </span>
-          <span class="kv-table__col kv-table__col--date">{{ kycData.panVerifiedOn ? formatDate(kycData.panVerifiedOn) : '—' }}</span>
+          <span class="kv-table__col kv-table__col--date">{{
+            kycData.panVerifiedOn ? formatDate(kycData.panVerifiedOn) : '—'
+          }}</span>
          <span class="kv-table__col kv-table__col--action">
-            <button mat-stroked-button class="kv-action-btn" type="button"
-              [disabled]="verifying.pan || !kycData.panNumber" (click)="verifyPAN()">
-              @if (verifying.pan) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-              @else { Re-Verify }
+            <button
+              mat-stroked-button
+              class="kv-action-btn"
+              type="button"
+              [disabled]="verifying.pan || !kycData.panNumber"
+              (click)="verifyPAN()"
+            >
+              @if (verifying.pan) {
+                <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+              } @else {
+                Re-Verify
+              }
            </button>
          </span>
        </div>
@@ -88,11 +98,18 @@
              <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
            }
          </span>
-          <span class="kv-table__col kv-table__col--date">{{ kycData.aadhaarVerifiedOn ? formatDate(kycData.aadhaarVerifiedOn) : '—' }}</span>
+          <span class="kv-table__col kv-table__col--date">{{
+            kycData.aadhaarVerifiedOn ? formatDate(kycData.aadhaarVerifiedOn) : '—'
+          }}</span>
          <span class="kv-table__col kv-table__col--action">
            @if (!showAadhaarReVerify && !aadhaarOtpSent) {
-              <button mat-stroked-button class="kv-action-btn" type="button"
-                [disabled]="verifying.aadhaar || !kycData.aadhaarNumberMasked" (click)="startAadhaarReVerify()">
+              <button
+                mat-stroked-button
+                class="kv-action-btn"
+                type="button"
+                [disabled]="verifying.aadhaar || !kycData.aadhaarNumberMasked"
+                (click)="startAadhaarReVerify()"
+              >
                Re-Verify
              </button>
            }
@@ -113,12 +130,22 @@
                <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
              }
            </span>
-            <span class="kv-table__col kv-table__col--date">{{ kycData.gstinVerifiedOn ? formatDate(kycData.gstinVerifiedOn) : '—' }}</span>
+            <span class="kv-table__col kv-table__col--date">{{
+              kycData.gstinVerifiedOn ? formatDate(kycData.gstinVerifiedOn) : '—'
+            }}</span>
            <span class="kv-table__col kv-table__col--action">
-              <button mat-stroked-button class="kv-action-btn" type="button"
-                [disabled]="verifying.gstin || !kycData.gstinNumber" (click)="verifyGSTIN()">
-                @if (verifying.gstin) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-                @else { Re-Verify }
+              <button
+                mat-stroked-button
+                class="kv-action-btn"
+                type="button"
+                [disabled]="verifying.gstin || !kycData.gstinNumber"
+                (click)="verifyGSTIN()"
+              >
+                @if (verifying.gstin) {
+                  <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+                } @else {
+                  Re-Verify
+                }
              </button>
            </span>
          </div>
@@ -138,7 +165,9 @@
                <span class="kv-status kv-status--pending"><mat-icon>radio_button_unchecked</mat-icon> Pending</span>
              }
            </span>
-            <span class="kv-table__col kv-table__col--date">{{ kycData.enterprisePanVerifiedOn ? formatDate(kycData.enterprisePanVerifiedOn) : '—' }}</span>
+            <span class="kv-table__col kv-table__col--date">{{
+              kycData.enterprisePanVerifiedOn ? formatDate(kycData.enterprisePanVerifiedOn) : '—'
+            }}</span>
            <span class="kv-table__col kv-table__col--action"></span>
          </div>
        }
@@ -202,12 +231,27 @@
        <div class="kv-otp-bar">
          <mat-form-field appearance="outline" class="kv-otp-input">
            <mat-label>Enter 12-digit Aadhaar</mat-label>
-            <input matInput [(ngModel)]="aadhaarFullNumber" [ngModelOptions]="{standalone: true}" maxlength="12" type="password" />
+            <input
+              matInput
+              [(ngModel)]="aadhaarFullNumber"
+              [ngModelOptions]="{ standalone: true }"
+              maxlength="12"
+              type="password"
+            />
          </mat-form-field>
-          <button mat-raised-button color="primary" type="button" class="kv-otp-btn"
-            [disabled]="!aadhaarFullNumber || aadhaarFullNumber.length !== 12 || verifying.aadhaar" (click)="sendAadhaarOtp()">
-            @if (verifying.aadhaar) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-            @else { Send OTP }
+          <button
+            mat-raised-button
+            color="primary"
+            type="button"
+            class="kv-otp-btn"
+            [disabled]="!aadhaarFullNumber || aadhaarFullNumber.length !== 12 || verifying.aadhaar"
+            (click)="sendAadhaarOtp()"
+          >
+            @if (verifying.aadhaar) {
+              <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+            } @else {
+              Send OTP
+            }
          </button>
        </div>
      }
@@ -216,32 +260,69 @@
          <span class="kv-otp-label"><mat-icon>sms</mat-icon> OTP sent</span>
          <mat-form-field appearance="outline" class="kv-otp-input">
            <mat-label>Enter OTP</mat-label>
-            <input matInput [(ngModel)]="aadhaarOtp" [ngModelOptions]="{standalone: true}" maxlength="6" autocomplete="one-time-code" />
+            <input
+              matInput
+              [(ngModel)]="aadhaarOtp"
+              [ngModelOptions]="{ standalone: true }"
+              maxlength="6"
+              autocomplete="one-time-code"
+            />
          </mat-form-field>
-          <button mat-raised-button color="primary" type="button" class="kv-otp-btn"
-            [disabled]="!aadhaarOtp || aadhaarOtp.length < 4 || aadhaarOtpVerifying" (click)="verifyAadhaarOtp()">
-            @if (aadhaarOtpVerifying) { <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> }
-            @else { Verify }
+          <button
+            mat-raised-button
+            color="primary"
+            type="button"
+            class="kv-otp-btn"
+            [disabled]="!aadhaarOtp || aadhaarOtp.length < 4 || aadhaarOtpVerifying"
+            (click)="verifyAadhaarOtp()"
+          >
+            @if (aadhaarOtpVerifying) {
+              <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+            } @else {
+              Verify
+            }
+          </button>
+          <button
+            mat-stroked-button
+            type="button"
+            class="kv-otp-btn"
+            [disabled]="verifying.aadhaar"
+            (click)="sendAadhaarOtp()"
+          >
+            Resend
          </button>
-          <button mat-stroked-button type="button" class="kv-otp-btn" [disabled]="verifying.aadhaar" (click)="sendAadhaarOtp()">Resend</button>
        </div>
      }
      @if (verificationError.aadhaar) {
-        <div class="kyc-error-msg"><mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.aadhaar }}</div>
+        <div class="kyc-error-msg">
+          <mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.aadhaar }}
+        </div>
      }
      @if (verificationError.pan) {
-        <div class="kyc-error-msg"><mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.pan }}</div>
+        <div class="kyc-error-msg">
+          <mat-icon class="kyc-error-icon">error_outline</mat-icon> {{ verificationError.pan }}
+        </div>
      }

      <!-- KYC Meta Grid -->
      <div class="kv-meta-grid">
        <div class="kv-meta-item">
          <span class="kv-meta-label">KYC Type</span>
-          <span class="kv-meta-value">{{ kycData.kycType === 1 ? 'Individual' : kycData.kycType === 2 ? 'Non-Individual' : '—' }}</span>
+          <span class="kv-meta-value">{{
+            kycData.kycType === 1 ? 'Individual' : kycData.kycType === 2 ? 'Non-Individual' : '—'
+          }}</span>
        </div>
        <div class="kv-meta-item">
          <span class="kv-meta-label">Risk Category</span>
-          <span class="kv-meta-value">{{ kycData.riskCategory === 1 ? 'Low' : kycData.riskCategory === 2 ? 'Medium' : kycData.riskCategory === 3 ? 'High' : '—' }}</span>
+          <span class="kv-meta-value">{{
+            kycData.riskCategory === 1
+              ? 'Low'
+              : kycData.riskCategory === 2
+                ? 'Medium'
+                : kycData.riskCategory === 3
+                  ? 'High'
+                  : '—'
+          }}</span>
        </div>
        <div class="kv-meta-item">
          <span class="kv-meta-label">Initiated On</span>
@@ -323,9 +404,14 @@
            <div class="rekyc-tl-content">
              <div class="rekyc-tl-label">Complete Re-KYC</div>
              <div class="rekyc-tl-sub">Updates Last Verified date and sets new Expiry Date as per RBI norms</div>
-              <button mat-flat-button color="primary" class="rekyc-btn-complete" type="button"
+              <button
+                mat-flat-button
+                color="primary"
+                class="rekyc-btn-complete"
+                type="button"
                [disabled]="!selectedDeclarationFile || reKycCompleting || !kycId"
-                (click)="completeReKyc()">
+                (click)="completeReKyc()"
+              >
                @if (reKycCompleting) {
                  <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
                  Completing...
@@ -164,6 +164,24 @@
    color: #757575;
    border: 1px solid #e0e0e0;
  }
+
+  &.linked {
+    background: #ecfdf5;
+    color: #059669;
+    border: 1px solid #a7f3d0;
+  }
+
+  &.not-linked {
+    background: #fef2f2;
+    color: #dc2626;
+    border: 1px solid #fecaca;
+  }
+
+  &.exempt {
+    background: #eff6ff;
+    color: #2563eb;
+    border: 1px solid #bfdbfe;
+  }
 }

 .status-chip-icon {
@@ -375,26 +393,6 @@
  margin-bottom: 16px;
 }

-.status-chip {
-  &.linked {
-    background: #ecfdf5;
-    color: #059669;
-    border: 1px solid #a7f3d0;
-  }
-
-  &.not-linked {
-    background: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fecaca;
-  }
-
-  &.exempt {
-    background: #eff6ff;
-    color: #2563eb;
-    border: 1px solid #bfdbfe;
-  }
-}
-
 .pan-aadhaar-detail {
  margin: 12px 0;
  display: flex;
@@ -468,10 +466,17 @@
  padding: 0;
  transition: background 0.1s;

-  &:last-child { border-bottom: none; }
-  &:hover { background: #f8fafc; }
+  &:last-child {
+    border-bottom: none;
+  }

-  &--link { background: #fafbfc; }
+  &:hover {
+    background: #f8fafc;
+  }
+
+  &--link {
+    background: #fafbfc;
+  }
 }

 .kv-table__col {
@@ -486,10 +491,25 @@
    gap: 8px;
    font-weight: 600;
  }
-  &--num { flex: 1; }
-  &--status { flex: 0 0 150px; }
-  &--date { flex: 0 0 150px; color: #64748b; font-size: 12px; }
-  &--action { flex: 0 0 110px; text-align: right; }
+
+  &--num {
+    flex: 1;
+  }
+
+  &--status {
+    flex: 0 0 150px;
+  }
+
+  &--date {
+    flex: 0 0 150px;
+    color: #64748b;
+    font-size: 12px;
+  }
+
+  &--action {
+    flex: 0 0 110px;
+    text-align: right;
+  }
 }

 .kv-doc-icon {
@@ -520,10 +540,25 @@
    height: 14px !important;
  }

-  &--ok { background: #ecfdf5; color: #059669; }
-  &--pending { background: #f8fafc; color: #94a3b8; }
-  &--fail { background: #fef2f2; color: #dc2626; }
-  &--info { background: #eff6ff; color: #2563eb; }
+  &--ok {
+    background: #ecfdf5;
+    color: #059669;
+  }
+
+  &--pending {
+    background: #f8fafc;
+    color: #94a3b8;
+  }
+
+  &--fail {
+    background: #fef2f2;
+    color: #dc2626;
+  }
+
+  &--info {
+    background: #eff6ff;
+    color: #2563eb;
+  }
 }

 .kv-action-btn {
@@ -558,14 +593,21 @@
  font-weight: 600;
  white-space: nowrap;

-  mat-icon { font-size: 16px !important; width: 16px !important; height: 16px !important; }
+  mat-icon {
+    font-size: 16px !important;
+    width: 16px !important;
+    height: 16px !important;
+  }
 }

 .kv-otp-input {
  width: 200px;
  flex-shrink: 0;

-  ::ng-deep .mat-mdc-form-field-infix { padding: 6px 0 !important; min-height: 36px !important; }
+  ::ng-deep .mat-mdc-form-field-infix {
+    padding: 6px 0 !important;
+    min-height: 36px !important;
+  }
 }

 .kv-otp-btn {
@@ -594,8 +636,14 @@
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;

-  &:nth-child(5n) { border-right: none; }
-  &--full { grid-column: 1 / -1; border-right: none; }
+  &:nth-child(5n) {
+    border-right: none;
+  }
+
+  &--full {
+    grid-column: 1 / -1;
+    border-right: none;
+  }
 }

 .kv-meta-label {
@@ -614,20 +662,51 @@

@media (width <= 960px) {
  .kv-table__col {
-    &--doc { flex: 0 0 120px; }
-    &--date { display: none; }
-    &--action { flex: 0 0 90px; }
+    &--doc {
+      flex: 0 0 120px;
+    }
+
+    &--date {
+      display: none;
+    }
+
+    &--action {
+      flex: 0 0 90px;
+    }
+  }
+
+  .kv-meta-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .kv-meta-item:nth-child(5n) {
+    border-right: 1px solid #f1f5f9;
+  }
+
+  .kv-meta-item:nth-child(3n) {
+    border-right: none;
  }
-  .kv-meta-grid { grid-template-columns: repeat(3, 1fr); }
-  .kv-meta-item:nth-child(5n) { border-right: 1px solid #f1f5f9; }
-  .kv-meta-item:nth-child(3n) { border-right: none; }
 }

@media (width <= 640px) {
-  .kv-table__row { flex-wrap: wrap; }
-  .kv-table__col { &--status, &--action { flex: 0 0 50%; } }
-  .kv-meta-grid { grid-template-columns: 1fr 1fr; }
-  .kv-otp-bar { flex-wrap: wrap; }
+  .kv-table__row {
+    flex-wrap: wrap;
+  }
+
+  .kv-table__col {
+    &--status,
+    &--action {
+      flex: 0 0 50%;
+    }
+  }
+
+  .kv-meta-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .kv-otp-bar {
+    flex-wrap: wrap;
+  }
 }

 /* ─── Header Actions ─── */
@@ -645,7 +724,9 @@
  border-color: #93c5fd !important;
 }

-.m-r-6 { margin-right: 6px; }
+.m-r-6 {
+  margin-right: 6px;
+}

 /* ─── Re-KYC Section ─── */
 .rekyc-section {
@@ -741,7 +822,9 @@
 }

 .rekyc-tl-item--last .rekyc-tl-dot {
-  .rekyc-tl-line { display: none; }
+  .rekyc-tl-line {
+    display: none;
+  }
 }

 .rekyc-tl-content {
@@ -881,7 +964,10 @@
    border: 1px solid #a7f3d0;
    color: #065f46;

-    .rekyc-result-icon { color: #059669; font-size: 20px; }
+    .rekyc-result-icon {
+      color: #059669;
+      font-size: 20px;
+    }
  }

  &--error {
@@ -899,5 +985,7 @@
 }

@media (width <= 640px) {
-  .rekyc-upload-zone { max-width: 100%; }
+  .rekyc-upload-zone {
+    max-width: 100%;
+  }
 }
@@ -447,10 +447,14 @@ export class KycTabComponent implements OnInit, OnDestroy {

  getPanAadhaarStatusLabel(status: string): string {
    switch (status) {
-      case 'Y': return 'Linked (Seeded)';
-      case 'N': return 'Not Linked';
-      case 'E': return 'Exempt';
-      default: return 'Pending Verification';
+      case 'Y':
+        return 'Linked (Seeded)';
+      case 'N':
+        return 'Not Linked';
+      case 'E':
+        return 'Exempt';
+      default:
+        return 'Pending Verification';
    }
  }

@@ -544,7 +548,14 @@ export class KycTabComponent implements OnInit, OnDestroy {
    if (kyc.aadhaarVerifiedOn) y = addLine('Aadhaar Verified On:', this.formatDate(kyc.aadhaarVerifiedOn), y);

    // PAN-Aadhaar Link
-    const seedingStatus = kyc.panAadhaarSeedingStatus === 'Y' ? 'Linked' : kyc.panAadhaarSeedingStatus === 'N' ? 'Not Linked' : kyc.panAadhaarSeedingStatus === 'E' ? 'Exempt' : 'Pending';
+    const seedingStatus =
+      kyc.panAadhaarSeedingStatus === 'Y'
+        ? 'Linked'
+        : kyc.panAadhaarSeedingStatus === 'N'
+          ? 'Not Linked'
+          : kyc.panAadhaarSeedingStatus === 'E'
+            ? 'Exempt'
+            : 'Pending';
    y = addLine('PAN-Aadhaar Link:', seedingStatus, y);

    // GSTIN (Non-Individual)
@@ -573,7 +584,11 @@ export class KycTabComponent implements OnInit, OnDestroy {
    y += 8;

    y = addLine('KYC Type:', kyc.kycType === 1 ? 'Individual' : kyc.kycType === 2 ? 'Non-Individual' : '—', y);
-    y = addLine('Risk Category:', kyc.riskCategory === 1 ? 'Low' : kyc.riskCategory === 2 ? 'Medium' : kyc.riskCategory === 3 ? 'High' : '—', y);
+    y = addLine(
+      'Risk Category:',
+      kyc.riskCategory === 1 ? 'Low' : kyc.riskCategory === 2 ? 'Medium' : kyc.riskCategory === 3 ? 'High' : '—',
+      y
+    );
    y = addLine('Initiated On:', this.formatDate(kyc.initiatedOn), y);
    y = addLine('Last Verified:', this.formatDate(kyc.verifiedOn), y);
    y = addLine('Expiry Date:', this.formatDate(kyc.expiryDate), y);
@@ -627,7 +642,9 @@ I further confirm that:
    const footerY = doc.internal.pageSize.getHeight() - 10;
    doc.setFontSize(7);
    doc.setTextColor(150, 150, 150);
-    doc.text('This is a system-generated document. Generated from CBS Nexora — KYC Module.', pageWidth / 2, footerY, { align: 'center' });
+    doc.text('This is a system-generated document. Generated from CBS Nexora — KYC Module.', pageWidth / 2, footerY, {
+      align: 'center'
+    });

    // Save
    doc.save(`Self_Declaration_${cifNumber}_${clientName.replace(/\s/g, '_')}.pdf`);
@@ -654,7 +671,10 @@ I further confirm that:
    const formData = new FormData();
    formData.append('file', this.selectedDeclarationFile);
    formData.append('name', 'KYC Self Declaration');
-    formData.append('description', `Signed self-declaration form uploaded on ${new Date().toLocaleDateString('en-IN')}`);
+    formData.append(
+      'description',
+      `Signed self-declaration form uploaded on ${new Date().toLocaleDateString('en-IN')}`
+    );

    this.clientsService.uploadClientDocument(this.clientId, formData).subscribe({
      next: () => {
@@ -668,13 +688,19 @@ I further confirm that:
          },
          error: (err: any) => {
            this.reKycCompleting = false;
-            this.reKycError = err?.error?.defaultUserMessage || err?.error?.developerMessage || 'Failed to complete re-KYC. Please try again.';
+            this.reKycError =
+              err?.error?.defaultUserMessage ||
+              err?.error?.developerMessage ||
+              'Failed to complete re-KYC. Please try again.';
          }
        });
      },
      error: (err: any) => {
        this.reKycCompleting = false;
-        this.reKycError = err?.error?.defaultUserMessage || err?.error?.developerMessage || 'Failed to upload declaration. Please try again.';
+        this.reKycError =
+          err?.error?.defaultUserMessage ||
+          err?.error?.developerMessage ||
+          'Failed to upload declaration. Please try again.';
      }
    });
  }
@@ -6,7 +6,6 @@
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <div class="nom-container mat-typography">
-
  <!-- Header -->
  <div class="nom-page-header">
    <div class="nom-page-header__left">
@@ -39,9 +38,12 @@
      <div class="nom-type-chips">
        @for (group of accountGroups; track group.type) {
          @if (group.accounts.length > 0) {
-            <button type="button" class="nom-type-chip"
+            <button
+              type="button"
+              class="nom-type-chip"
              [class.active]="selectedType === group.type"
-              (click)="selectedType = group.type; onTypeChange()">
+              (click)="selectedType = group.type; onTypeChange()"
+            >
              <mat-icon>{{ group.icon }}</mat-icon>
              {{ group.label }}
              <span class="nom-type-chip__count">{{ group.accounts.length }}</span>
@@ -55,13 +57,23 @@
            <mat-label>Account</mat-label>
            <mat-select [(ngModel)]="selectedAccountId" (ngModelChange)="onAccountChange()">
              @for (acc of selectedGroup.accounts; track acc.id) {
-                <mat-option [value]="acc.id">{{ acc.productName }} — {{ acc.accountNo }}@if (acc.accountBalance != null) { ({{ acc.accountBalance | number:'1.2-2' }}) }</mat-option>
+                <mat-option [value]="acc.id"
+                  >{{ acc.productName }} — {{ acc.accountNo }}
+                  @if (acc.accountBalance != null) {
+                    ({{ acc.accountBalance | number: '1.2-2' }})
+                  }
+                </mat-option>
              }
            </mat-select>
          </mat-form-field>
          @if (selectedAccountId && !showAddForm) {
-            <button mat-flat-button color="primary" class="nom-add-btn"
-              [disabled]="totalShare >= 100" (click)="showAddForm = true">
+            <button
+              mat-flat-button
+              color="primary"
+              class="nom-add-btn"
+              [disabled]="totalShare >= 100"
+              (click)="showAddForm = true"
+            >
              <mat-icon>add</mat-icon> Add Nominee
            </button>
          }
@@ -83,10 +95,12 @@
        <div class="nom-share-bar">
          <span class="nom-share-bar__label">Share</span>
          <div class="nom-share-bar__track">
-            <div class="nom-share-bar__fill"
+            <div
+              class="nom-share-bar__fill"
              [style.width.%]="totalShare > 100 ? 100 : totalShare"
              [class.over]="totalShare > 100"
-              [class.complete]="totalShare === 100"></div>
+              [class.complete]="totalShare === 100"
+            ></div>
          </div>
          <span class="nom-share-bar__value" [class.over]="totalShare > 100">{{ totalShare }}%</span>
        </div>
@@ -97,8 +111,12 @@
          <div class="nom-card__main">
            <div class="nom-card__avatar">
              @if (nominee.profileImageUrl) {
-                <img [src]="nominee.profileImageUrl" alt="" class="nom-card__photo zoomable"
-                  (click)="zoomImage(nominee.profileImageUrl, 'Nominee Photo')" />
+                <img
+                  [src]="nominee.profileImageUrl"
+                  alt=""
+                  class="nom-card__photo zoomable"
+                  (click)="zoomImage(nominee.profileImageUrl, 'Nominee Photo')"
+                />
              } @else {
                <mat-icon>person</mat-icon>
              }
@@ -107,14 +125,22 @@
              <span class="nom-card__name">{{ nominee.nomineeDisplayName || nominee.firstName || '—' }}</span>
              <span class="nom-card__meta">
                {{ getRelationship(nominee) }}
-                @if (nominee.nomineeDateOfBirth || nominee.dateOfBirth) { · DOB: {{ (nominee.nomineeDateOfBirth || nominee.dateOfBirth) | dateFormat }} }
-                @if (nominee.nomineeMobileNo || nominee.mobileNo) { · {{ nominee.nomineeMobileNo || nominee.mobileNo }} }
+                @if (nominee.nomineeDateOfBirth || nominee.dateOfBirth) {
+                  · DOB: {{ nominee.nomineeDateOfBirth || nominee.dateOfBirth | dateFormat }}
+                }
+                @if (nominee.nomineeMobileNo || nominee.mobileNo) {
+                  · {{ nominee.nomineeMobileNo || nominee.mobileNo }}
+                }
              </span>
            </div>
            @if (nominee.signatureUrl) {
              <div class="nom-card__sig">
-                <img [src]="nominee.signatureUrl" alt="Signature" class="zoomable"
-                  (click)="zoomImage(nominee.signatureUrl, 'Nominee Signature')" />
+                <img
+                  [src]="nominee.signatureUrl"
+                  alt="Signature"
+                  class="zoomable"
+                  (click)="zoomImage(nominee.signatureUrl, 'Nominee Signature')"
+                />
              </div>
            }
            @if (nominee.nomineeIdentifier) {
@@ -124,16 +150,30 @@
              <span class="nom-card__share-value">{{ nominee.percentageShare || 0 }}%</span>
            </div>
            <div class="nom-card__actions">
-              <button mat-icon-button type="button" matTooltip="View" (click)="viewNominee(nominee)"><mat-icon>visibility</mat-icon></button>
-              <button mat-icon-button type="button" matTooltip="Edit" (click)="editNominee(nominee, i)"><mat-icon>edit</mat-icon></button>
-              <button mat-icon-button type="button" matTooltip="Delete" class="nom-card__delete" (click)="deleteNominee(nominee, i)"><mat-icon>delete</mat-icon></button>
+              <button mat-icon-button type="button" matTooltip="View" (click)="viewNominee(nominee)">
+                <mat-icon>visibility</mat-icon>
+              </button>
+              <button mat-icon-button type="button" matTooltip="Edit" (click)="editNominee(nominee, i)">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button
+                mat-icon-button
+                type="button"
+                matTooltip="Delete"
+                class="nom-card__delete"
+                (click)="deleteNominee(nominee, i)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
            </div>
          </div>
          @if (nominee.nomineeIsMinor && (nominee.guardianDisplayName || nominee.guardianName)) {
            <div class="nom-card__guardian">
              <mat-icon>shield</mat-icon>
              Guardian: <strong>{{ nominee.guardianDisplayName || nominee.guardianName }}</strong>
-              @if (nominee.guardianRelationshipName) { ({{ nominee.guardianRelationshipName }}) }
+              @if (nominee.guardianRelationshipName) {
+                ({{ nominee.guardianRelationshipName }})
+              }
            </div>
          }
          <!-- Inline Edit -->
@@ -143,24 +183,39 @@
                <mat-form-field appearance="outline" class="nom-edit-field">
                  <mat-label>Type</mat-label>
                  <mat-select [(ngModel)]="editNomType">
-                    @for (opt of nominationTypeOptions; track opt.value) { <mat-option [value]="opt.value">{{ opt.label }}</mat-option> }
+                    @for (opt of nominationTypeOptions; track opt.value) {
+                      <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
+                    }
                  </mat-select>
                </mat-form-field>
                <mat-form-field appearance="outline" class="nom-edit-field">
                  <mat-label>Relationship</mat-label>
                  <mat-select [(ngModel)]="editRelId">
-                    @for (rel of relationshipOptions; track rel) { <mat-option [value]="rel.id">{{ rel.name }}</mat-option> }
+                    @for (rel of relationshipOptions; track rel) {
+                      <mat-option [value]="rel.id">{{ rel.name }}</mat-option>
+                    }
                  </mat-select>
                </mat-form-field>
                <mat-form-field appearance="outline" class="nom-edit-field nom-edit-field--sm">
                  <mat-label>Share %</mat-label>
                  <input matInput type="number" [(ngModel)]="editShare" min="1" [max]="maxShareForEdit(i)" />
-                  @if (editShare && editShare > maxShareForEdit(i)) { <mat-error>Max {{ maxShareForEdit(i) }}%</mat-error> }
+                  @if (editShare && editShare > maxShareForEdit(i)) {
+                    <mat-error>Max {{ maxShareForEdit(i) }}%</mat-error>
+                  }
                </mat-form-field>
-                <button mat-flat-button color="primary" type="button" class="nom-edit-save"
+                <button
+                  mat-flat-button
+                  color="primary"
+                  type="button"
+                  class="nom-edit-save"
                  [disabled]="!editRelId || !editShare || editShare > maxShareForEdit(i)"
-                  (click)="saveEdit(nominee, i)"><mat-icon>check</mat-icon></button>
-                <button mat-stroked-button type="button" class="nom-edit-cancel" (click)="cancelEdit()"><mat-icon>close</mat-icon></button>
+                  (click)="saveEdit(nominee, i)"
+                >
+                  <mat-icon>check</mat-icon>
+                </button>
+                <button mat-stroked-button type="button" class="nom-edit-cancel" (click)="cancelEdit()">
+                  <mat-icon>close</mat-icon>
+                </button>
              </div>
            </div>
          }
@@ -185,17 +240,39 @@
              <mat-form-field appearance="outline" class="nom-search-field">
                <mat-label>Search by Name, Client ID or Mobile</mat-label>
                <span matPrefix class="nom-search-prefix"><mat-icon>search</mat-icon></span>
-                <input matInput [value]="searchText" (input)="onSearch($any($event.target).value)" (blur)="dismissSearch()" placeholder="Type at least 2 characters..." autocomplete="off" />
+                <input
+                  matInput
+                  [value]="searchText"
+                  (input)="onSearch($any($event.target).value)"
+                  (blur)="dismissSearch()"
+                  placeholder="Type at least 2 characters..."
+                  autocomplete="off"
+                />
              </mat-form-field>
              @if (searchResults.length > 0 || searching) {
                <div class="nom-search-results">
-                  @if (searching) { <div class="nom-search-loading"><mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner> Searching...</div> }
+                  @if (searching) {
+                    <div class="nom-search-loading">
+                      <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner> Searching...
+                    </div>
+                  }
                  @for (client of searchResults; track client.id) {
                    <div class="nom-search-item" (mousedown)="selectClient(client); $event.preventDefault()">
                      <mat-icon class="nom-search-item__icon">person</mat-icon>
                      <div class="nom-search-item__info">
                        <span class="nom-search-item__name">{{ client.displayName }}</span>
-                        <span class="nom-search-item__meta">ID: {{ client.id }} · {{ client.officeName }}@if (client.dateOfBirth) { · DOB: {{ client.dateOfBirth | dateFormat }} }@if (client.fatherSpouseName) { · {{ client.fatherSpouseName }} }@if (client.mobileNo) { · {{ client.mobileNo }} }</span>
+                        <span class="nom-search-item__meta"
+                          >ID: {{ client.id }} · {{ client.officeName }}
+                          @if (client.dateOfBirth) {
+                            · DOB: {{ client.dateOfBirth | dateFormat }}
+                          }
+                          @if (client.fatherSpouseName) {
+                            · {{ client.fatherSpouseName }}
+                          }
+                          @if (client.mobileNo) {
+                            · {{ client.mobileNo }}
+                          }
+                        </span>
                      </div>
                    </div>
                  }
@@ -212,32 +289,68 @@
            <div class="nom-linked-card">
              <div class="nom-linked-card__left">
                @if (linkedProfileImage) {
-                  <img [src]="linkedProfileImage" class="nom-linked-card__photo zoomable" (click)="zoomImage(linkedProfileImage, 'Photo')" />
-                } @else { <mat-icon class="nom-linked-card__icon">person</mat-icon> }
+                  <img
+                    [src]="linkedProfileImage"
+                    class="nom-linked-card__photo zoomable"
+                    (click)="zoomImage(linkedProfileImage, 'Photo')"
+                  />
+                } @else {
+                  <mat-icon class="nom-linked-card__icon">person</mat-icon>
+                }
              </div>
              <div class="nom-linked-card__info">
                <span class="nom-linked-card__name">{{ selectedClient.displayName }}</span>
-                <span class="nom-linked-card__meta">ID: {{ selectedClient.id }}@if (selectedClient.mobileNo) { · {{ selectedClient.mobileNo }} }</span>
+                <span class="nom-linked-card__meta"
+                  >ID: {{ selectedClient.id }}
+                  @if (selectedClient.mobileNo) {
+                    · {{ selectedClient.mobileNo }}
+                  }
+                </span>
              </div>
              @if (linkedSignatureImage) {
                <div class="nom-linked-card__sig">
-                  <img [src]="linkedSignatureImage" alt="Signature" class="zoomable" (click)="zoomImage(linkedSignatureImage, 'Signature')" />
+                  <img
+                    [src]="linkedSignatureImage"
+                    alt="Signature"
+                    class="zoomable"
+                    (click)="zoomImage(linkedSignatureImage, 'Signature')"
+                  />
                </div>
              }
              <button mat-icon-button type="button" (click)="removeSelectedClient()"><mat-icon>close</mat-icon></button>
            </div>

            @if (fetchingDetails) {
-              <div class="nom-fetching-hint"><mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> Fetching details...</div>
+              <div class="nom-fetching-hint">
+                <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner> Fetching details...
+              </div>
            }

            @if (!fetchingDetails) {
              <!-- KYC details -->
              @if (selectedClient.dateOfBirth || selectedClient.panNumber || selectedClient.aadhaarMasked) {
                <div class="nom-readonly-row">
-                  @if (selectedClient.dateOfBirth) { <span class="nom-ro-item"><span class="nom-ro-label">DOB</span> {{ selectedClient.dateOfBirth | dateFormat }}</span> }
-                  @if (selectedClient.panNumber) { <span class="nom-ro-item"><span class="nom-ro-label">PAN</span> {{ selectedClient.panNumber }} @if (linkedKycStatus?.panVerified) { <mat-icon class="nom-ro-ok">check_circle</mat-icon> }</span> }
-                  @if (selectedClient.aadhaarMasked) { <span class="nom-ro-item"><span class="nom-ro-label">Aadhaar</span> {{ selectedClient.aadhaarMasked }} @if (linkedKycStatus?.aadhaarVerified) { <mat-icon class="nom-ro-ok">check_circle</mat-icon> }</span> }
+                  @if (selectedClient.dateOfBirth) {
+                    <span class="nom-ro-item"
+                      ><span class="nom-ro-label">DOB</span> {{ selectedClient.dateOfBirth | dateFormat }}</span
+                    >
+                  }
+                  @if (selectedClient.panNumber) {
+                    <span class="nom-ro-item"
+                      ><span class="nom-ro-label">PAN</span> {{ selectedClient.panNumber }}
+                      @if (linkedKycStatus?.panVerified) {
+                        <mat-icon class="nom-ro-ok">check_circle</mat-icon>
+                      }
+                    </span>
+                  }
+                  @if (selectedClient.aadhaarMasked) {
+                    <span class="nom-ro-item"
+                      ><span class="nom-ro-label">Aadhaar</span> {{ selectedClient.aadhaarMasked }}
+                      @if (linkedKycStatus?.aadhaarVerified) {
+                        <mat-icon class="nom-ro-ok">check_circle</mat-icon>
+                      }
+                    </span>
+                  }
                </div>
              }

@@ -246,19 +359,25 @@
                <mat-form-field appearance="outline" class="nom-field-item">
                  <mat-label>Nomination Type</mat-label>
                  <mat-select [(ngModel)]="nomineeNomType">
-                    @for (opt of nominationTypeOptions; track opt.value) { <mat-option [value]="opt.value">{{ opt.label }}</mat-option> }
+                    @for (opt of nominationTypeOptions; track opt.value) {
+                      <mat-option [value]="opt.value">{{ opt.label }}</mat-option>
+                    }
                  </mat-select>
                </mat-form-field>
                <mat-form-field appearance="outline" class="nom-field-item">
                  <mat-label>Relationship</mat-label>
                  <mat-select [(ngModel)]="nomineeRelationshipId">
-                    @for (rel of relationshipOptions; track rel) { <mat-option [value]="rel.id">{{ rel.name }}</mat-option> }
+                    @for (rel of relationshipOptions; track rel) {
+                      <mat-option [value]="rel.id">{{ rel.name }}</mat-option>
+                    }
                  </mat-select>
                </mat-form-field>
                <mat-form-field appearance="outline" class="nom-field-item nom-field-item--sm">
                  <mat-label>Share %</mat-label>
                  <input matInput type="number" [(ngModel)]="nomineeShare" min="1" [max]="maxAllowedShare" />
-                  @if (nomineeShare && nomineeShare > maxAllowedShare) { <mat-error>Max {{ maxAllowedShare }}%</mat-error> }
+                  @if (nomineeShare && nomineeShare > maxAllowedShare) {
+                    <mat-error>Max {{ maxAllowedShare }}%</mat-error>
+                  }
                </mat-form-field>
                <div class="nom-field-item nom-field-item--toggle">
                  <mat-slide-toggle [(ngModel)]="nomineeIsMinor">Minor</mat-slide-toggle>
@@ -270,11 +389,21 @@
                  <span class="nom-guardian-label"><mat-icon>shield</mat-icon> Guardian</span>
                  @if (!selectedGuardian) {
                    <mat-form-field appearance="outline" class="nom-search-field">
-                      <input matInput [ngModel]="guardianSearchText" (ngModelChange)="onGuardianSearch($event)" placeholder="Search guardian..." autocomplete="off" />
+                      <input
+                        matInput
+                        [ngModel]="guardianSearchText"
+                        (ngModelChange)="onGuardianSearch($event)"
+                        placeholder="Search guardian..."
+                        autocomplete="off"
+                      />
                    </mat-form-field>
                    @if (guardianSearchResults.length > 0 || guardianSearching) {
                      <div class="nom-search-results nom-search-results--inline">
-                        @if (guardianSearching) { <div class="nom-search-loading"><mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner></div> }
+                        @if (guardianSearching) {
+                          <div class="nom-search-loading">
+                            <mat-progress-spinner diameter="14" mode="indeterminate"></mat-progress-spinner>
+                          </div>
+                        }
                        @for (client of guardianSearchResults; track client.id) {
                          <div class="nom-search-item" (click)="selectGuardian(client)">
                            <mat-icon class="nom-search-item__icon">person</mat-icon>
@@ -284,7 +413,12 @@
                      </div>
                    }
                  } @else {
-                    <span class="nom-guardian-selected">{{ selectedGuardian.displayName }} <button mat-icon-button (click)="selectedGuardian = null"><mat-icon>close</mat-icon></button></span>
+                    <span class="nom-guardian-selected"
+                      >{{ selectedGuardian.displayName }}
+                      <button mat-icon-button (click)="selectedGuardian = null">
+                        <mat-icon>close</mat-icon>
+                      </button></span
+                    >
                  }
                </div>
              }
@@ -296,11 +430,24 @@

              <div class="nom-form-actions">
                <button mat-stroked-button type="button" (click)="resetAddForm()">Cancel</button>
-                <button mat-raised-button color="primary" type="button"
-                  [disabled]="!nomineeRelationshipId || !nomineeShare || nomineeSaving || (nomineeShare > maxAllowedShare) || (nomineeIsMinor && !selectedGuardian)"
-                  (click)="saveNominee()">
-                  @if (nomineeSaving) { <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner> }
-                  @else { <mat-icon>check</mat-icon> Save }
+                <button
+                  mat-raised-button
+                  color="primary"
+                  type="button"
+                  [disabled]="
+                    !nomineeRelationshipId ||
+                    !nomineeShare ||
+                    nomineeSaving ||
+                    nomineeShare > maxAllowedShare ||
+                    (nomineeIsMinor && !selectedGuardian)
+                  "
+                  (click)="saveNominee()"
+                >
+                  @if (nomineeSaving) {
+                    <mat-progress-spinner diameter="16" mode="indeterminate"></mat-progress-spinner>
+                  } @else {
+                    <mat-icon>check</mat-icon> Save
+                  }
                </button>
              </div>
            }
@@ -8,189 +8,708 @@
 $primary: #1074b9;
 $primary-light: #e8f0fe;

-.nom-container { padding: 16px 24px; }
+.nom-container {
+  padding: 16px 24px;
+}

 /* Header */
 .nom-page-header {
-  background: #0f172a; padding: 14px 20px; border-radius: 10px; margin-bottom: 16px;
-  &__left { display: flex; align-items: center; gap: 10px; }
-  &__icon { color: #60a5fa; }
-  &__title { font-size: 15px; font-weight: 600; color: #fff; margin: 0; }
-  &__sub { font-size: 10px; color: rgb(255 255 255 / 45%); margin: 1px 0 0; }
+  background: #0f172a;
+  padding: 14px 20px;
+  border-radius: 10px;
+  margin-bottom: 16px;
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &__icon {
+    color: #60a5fa;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #fff;
+    margin: 0;
+  }
+
+  &__sub {
+    font-size: 10px;
+    color: rgb(255 255 255 / 45%);
+    margin: 1px 0 0;
+  }
 }

-.nom-loading { display: flex; align-items: center; gap: 8px; padding: 24px 0; justify-content: center; font-size: 13px; color: #64748b;
-  &--sm { padding: 12px 0; }
+.nom-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 24px 0;
+  justify-content: center;
+  font-size: 13px;
+  color: #64748b;
+
+  &--sm {
+    padding: 12px 0;
+  }
 }

 .nom-no-accounts {
-  text-align: center; padding: 36px 20px; background: #f8fafc; border-radius: 8px; border: 1px dashed #e2e8f0;
-  &__icon { font-size: 40px; width: 40px; height: 40px; color: #94a3b8; margin-bottom: 8px; }
-  p { color: #64748b; font-size: 13px; margin: 2px 0; }
-  &__sub { font-size: 11px; color: #94a3b8; }
+  text-align: center;
+  padding: 36px 20px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px dashed #e2e8f0;
+
+  &__icon {
+    font-size: 40px;
+    width: 40px;
+    height: 40px;
+    color: #94a3b8;
+    margin-bottom: 8px;
+  }
+
+  p {
+    color: #64748b;
+    font-size: 13px;
+    margin: 2px 0;
+  }
+
+  &__sub {
+    font-size: 11px;
+    color: #94a3b8;
+  }
 }

 /* Toolbar: chips on top, account + add below */
 .nom-toolbar {
-  display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
-  &__right { display: flex; align-items: center; gap: 10px; }
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 12px;
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+.nom-type-chips {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
 }
-.nom-type-chips { display: flex; gap: 6px; flex-wrap: wrap; }

 .nom-type-chip {
-  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
-  border: 1.5px solid #e2e8f0; border-radius: 6px; background: #fff;
-  font-size: 12px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s;
-  mat-icon { font-size: 16px; width: 16px; height: 16px; }
-  &__count { font-size: 9px; font-weight: 700; background: #f1f5f9; color: #64748b; padding: 0 5px; border-radius: 6px; }
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 6px;
+  background: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  color: #64748b;
+  cursor: pointer;
+  transition: all 0.15s;

-  &.active { border-color: $primary; background: $primary-light; color: $primary;
-    .nom-type-chip__count { background: $primary; color: #fff; }
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &__count {
+    font-size: 9px;
+    font-weight: 700;
+    background: #f1f5f9;
+    color: #64748b;
+    padding: 0 5px;
+    border-radius: 6px;
+  }
+
+  &.active {
+    border-color: $primary;
+    background: $primary-light;
+    color: $primary;
+
+    .nom-type-chip__count {
+      background: $primary;
+      color: #fff;
+    }
+  }
+
+  &:hover:not(.active) {
+    border-color: #94a3b8;
  }
-  &:hover:not(.active) { border-color: #94a3b8; }
 }
-.nom-account-select { flex: 1; min-width: 280px; }
-.nom-add-btn { border-radius: 6px !important; font-size: 12px !important; height: 36px !important; white-space: nowrap; }
+
+.nom-account-select {
+  flex: 1;
+  min-width: 280px;
+}
+
+.nom-add-btn {
+  border-radius: 6px !important;
+  font-size: 12px !important;
+  height: 36px !important;
+  white-space: nowrap;
+}

 /* Share bar */
 .nom-share-bar {
-  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
-  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px;
-  &__label { font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; }
-  &__track { flex: 1; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  margin-bottom: 8px;
+
+  &__label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #64748b;
+    white-space: nowrap;
+  }
+
+  &__track {
+    flex: 1;
+    height: 6px;
+    background: #e2e8f0;
+    border-radius: 3px;
+    overflow: hidden;
+  }

  &__fill {
-    height: 100%; border-radius: 3px; transition: width 0.3s;
+    height: 100%;
+    border-radius: 3px;
+    transition: width 0.3s;
    background: linear-gradient(90deg, #3b82f6, #10b981);
-    &.over { background: #ef4444; } &.complete { background: linear-gradient(90deg, #10b981, #059669); }
+
+    &.over {
+      background: #ef4444;
+    }
+
+    &.complete {
+      background: linear-gradient(90deg, #10b981, #059669);
+    }
+  }
+
+  &__value {
+    font-size: 13px;
+    font-weight: 700;
+    color: #10b981;
+    min-width: 35px;
+    text-align: right;
+
+    &.over {
+      color: #ef4444;
+    }
  }
-  &__value { font-size: 13px; font-weight: 700; color: #10b981; min-width: 35px; text-align: right; &.over { color: #ef4444; } }
 }

 /* Nominee card — compact */
-.nom-card { border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
-.nom-card__main { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
+.nom-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  margin-bottom: 6px;
+  overflow: hidden;
+}
+
+.nom-card__main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+}

 .nom-card__avatar {
-  width: 32px; height: 32px; border-radius: 50%; background: #dbeafe;
-  display: flex; align-items: center; justify-content: center; color: #1565c0; flex-shrink: 0;
-  mat-icon { font-size: 18px; }
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #dbeafe;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1565c0;
+  flex-shrink: 0;
+
+  mat-icon {
+    font-size: 18px;
+  }
+}
+
+.nom-card__photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
 }
-.nom-card__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

 .nom-card__sig {
  flex-shrink: 0;
-  img { height: 24px; max-width: 60px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 3px; background: #fff; padding: 1px 3px; }
-}
-.nom-card__info { flex: 1; min-width: 0; }
-.nom-card__name { font-weight: 600; font-size: 13px; color: #1e293b; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.nom-card__meta { font-size: 11px; color: #64748b; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

+  img {
+    height: 24px;
+    max-width: 60px;
+    object-fit: contain;
+    border: 1px solid #e2e8f0;
+    border-radius: 3px;
+    background: #fff;
+    padding: 1px 3px;
+  }
+}
+
+.nom-card__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.nom-card__name {
+  font-weight: 600;
+  font-size: 13px;
+  color: #1e293b;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nom-card__meta {
+  font-size: 11px;
+  color: #64748b;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .nom-card__id {
-  font-size: 10px; font-weight: 600; color: #1d4ed8; background: #eff6ff;
-  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
-  font-family: 'Roboto Mono', monospace; letter-spacing: 0.3px; flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  color: #1d4ed8;
+  background: #eff6ff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  font-family: 'Roboto Mono', monospace;
+  letter-spacing: 0.3px;
+  flex-shrink: 0;
+}
+
+.nom-card__share {
+  text-align: center;
+  min-width: 40px;
+  flex-shrink: 0;
+}
+
+.nom-card__share-value {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1565c0;
+}
+
+.nom-card__actions {
+  display: flex;
+  gap: 0;
+  flex-shrink: 0;
+
+  button {
+    width: 32px !important;
+    height: 32px !important;
+    line-height: 32px !important;
+
+    mat-icon {
+      font-size: 18px;
+    }
+  }
 }
-.nom-card__share { text-align: center; min-width: 40px; flex-shrink: 0; }
-.nom-card__share-value { font-size: 15px; font-weight: 700; color: #1565c0; }

-.nom-card__actions { display: flex; gap: 0; flex-shrink: 0;
+.nom-card__delete {
+  color: #94a3b8 !important;

-  button { width: 32px !important; height: 32px !important; line-height: 32px !important;
-    mat-icon { font-size: 18px; }
+  &:hover {
+    color: #ef4444 !important;
  }
 }
-.nom-card__delete { color: #94a3b8 !important; &:hover { color: #ef4444 !important; } }

 .nom-card__guardian {
-  display: flex; align-items: center; gap: 5px; padding: 5px 12px; background: #fff7ed;
-  font-size: 11px; color: #92400e; border-top: 1px solid #fde68a;
-  mat-icon { font-size: 14px; width: 14px; height: 14px; }
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  background: #fff7ed;
+  font-size: 11px;
+  color: #92400e;
+  border-top: 1px solid #fde68a;
+
+  mat-icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
 }

 /* Inline edit */
-.nom-card__edit { padding: 8px 12px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
-.nom-edit-row { display: flex; align-items: center; gap: 8px; }
-.nom-edit-field { flex: 1; &--sm { max-width: 100px; } }
-.nom-edit-save, .nom-edit-cancel { min-width: 36px !important; height: 36px !important; padding: 0 !important; }
+.nom-card__edit {
+  padding: 8px 12px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.nom-edit-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nom-edit-field {
+  flex: 1;
+
+  &--sm {
+    max-width: 100px;
+  }
+}
+
+.nom-edit-save,
+.nom-edit-cancel {
+  min-width: 36px !important;
+  height: 36px !important;
+  padding: 0 !important;
+}

 /* Empty */
 .nom-empty {
-  text-align: center; padding: 24px; background: #f8fafc; border-radius: 6px; border: 1px dashed #e2e8f0;
-  mat-icon { font-size: 28px; width: 28px; height: 28px; color: #94a3b8; margin-bottom: 4px; display: block; margin: 0 auto 4px; }
-  span { font-size: 12px; color: #94a3b8; }
+  text-align: center;
+  padding: 24px;
+  background: #f8fafc;
+  border-radius: 6px;
+  border: 1px dashed #e2e8f0;
+
+  mat-icon {
+    font-size: 28px;
+    width: 28px;
+    height: 28px;
+    color: #94a3b8;
+    display: block;
+    margin: 0 auto 4px;
+  }
+
+  span {
+    font-size: 12px;
+    color: #94a3b8;
+  }
 }

 /* ═══ Add Form ═══ */
 .nom-add-form {
-  border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; margin-top: 8px; background: #fafbfc;
-  &__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 12px; }
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 14px;
+  margin-top: 8px;
+  background: #fafbfc;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 12px;
+  }
 }

 /* Search */
-.nom-search-wrapper { position: relative; margin-bottom: 8px; }
-.nom-search-field { width: 100%; }
-.nom-search-prefix { color: #94a3b8; }
+.nom-search-wrapper {
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.nom-search-field {
+  width: 100%;
+}
+
+.nom-search-prefix {
+  color: #94a3b8;
+}

 .nom-search-results {
-  position: absolute; top: 56px; left: 0; right: 0; z-index: 100;
-  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
-  box-shadow: 0 6px 20px rgb(0 0 0 / 10%); max-height: 220px; overflow-y: auto;
-  &--inline { position: relative; top: 0; margin-top: 4px; }
+  position: absolute;
+  top: 56px;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 10%);
+  max-height: 220px;
+  overflow-y: auto;
+
+  &--inline {
+    position: relative;
+    top: 0;
+    margin-top: 4px;
+  }
+}
+
+.nom-search-loading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  font-size: 12px;
+  color: #64748b;
 }
-.nom-search-loading { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 12px; color: #64748b; }

 .nom-search-item {
-  display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9;
-  &:last-child { border-bottom: none; } &:hover { background: #f0f7ff; }
-  &__icon { color: $primary; font-size: 18px; }
-  &__info { display: flex; flex-direction: column; flex: 1; }
-  &__name { font-size: 13px; font-weight: 600; color: #1e293b; }
-  &__meta { font-size: 10px; color: #64748b; }
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid #f1f5f9;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: #f0f7ff;
+  }
+
+  &__icon {
+    color: $primary;
+    font-size: 18px;
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  &__name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  &__meta {
+    font-size: 10px;
+    color: #64748b;
+  }
+}
+
+.search-no-results-hint {
+  font-size: 11px;
+  color: #94a3b8;
+  text-align: center;
+  padding: 4px 0;
 }
-.search-no-results-hint { font-size: 11px; color: #94a3b8; text-align: center; padding: 4px 0; }

 /* Linked card */
 .nom-linked-card {
-  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
-  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px;
-  &__left { flex-shrink: 0; }
-  &__icon { color: $primary; }
-  &__photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #e2e8f0; }
-  &__info { flex: 1; display: flex; flex-direction: column; }
-  &__name { font-size: 13px; font-weight: 600; color: #1e293b; }
-  &__meta { font-size: 11px; color: #64748b; font-family: 'Roboto Mono', monospace; }
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  margin-bottom: 8px;
+
+  &__left {
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    color: $primary;
+  }
+
+  &__photo {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #e2e8f0;
+  }
+
+  &__info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  &__meta {
+    font-size: 11px;
+    color: #64748b;
+    font-family: 'Roboto Mono', monospace;
+  }

  &__sig {
    flex-shrink: 0;
-    img { height: 24px; max-width: 60px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 3px; background: #fff; padding: 1px 3px; }
+
+    img {
+      height: 24px;
+      max-width: 60px;
+      object-fit: contain;
+      border: 1px solid #e2e8f0;
+      border-radius: 3px;
+      background: #fff;
+      padding: 1px 3px;
+    }
  }
 }
-.nom-fetching-hint { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; margin: -4px 0 8px; }
+
+.nom-fetching-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: #64748b;
+  margin: -4px 0 8px;
+}

 /* Read-only KYC row */
 .nom-readonly-row {
-  display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 12px;
-  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 8px 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  margin-bottom: 10px;
+}
+
+.nom-ro-item {
+  font-size: 12px;
+  color: #1e293b;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.nom-ro-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #94a3b8;
+  text-transform: uppercase;
+  margin-right: 2px;
+}
+
+.nom-ro-ok {
+  font-size: 14px !important;
+  width: 14px !important;
+  height: 14px !important;
+  color: #16a34a;
 }
-.nom-ro-item { font-size: 12px; color: #1e293b; display: inline-flex; align-items: center; gap: 4px; }
-.nom-ro-label { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; margin-right: 2px; }
-.nom-ro-ok { font-size: 14px !important; width: 14px !important; height: 14px !important; color: #16a34a; }

 /* Nominee fields */
-.nom-fields-row { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; margin-bottom: 4px; }
-.nom-field-item { flex: 1; min-width: 160px; &--sm { max-width: 100px; min-width: 80px; } &--toggle { padding-top: 8px; } }
-.nom-remarks-field { width: 100%; }
-.nom-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+.nom-fields-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 12px;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.nom-field-item {
+  flex: 1;
+  min-width: 160px;
+
+  &--sm {
+    max-width: 100px;
+    min-width: 80px;
+  }
+
+  &--toggle {
+    padding-top: 8px;
+  }
+}
+
+.nom-remarks-field {
+  width: 100%;
+}
+
+.nom-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}

 /* Guardian */
-.nom-guardian-section { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
-.nom-guardian-label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #92400e; mat-icon { font-size: 16px; } }
+.nom-guardian-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}

-.nom-guardian-selected { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: #1e293b;
-  button { width: 24px !important; height: 24px !important; line-height: 24px !important; mat-icon { font-size: 14px; } }
+.nom-guardian-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #92400e;
+
+  mat-icon {
+    font-size: 16px;
+  }
+}
+
+.nom-guardian-selected {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+
+  button {
+    width: 24px !important;
+    height: 24px !important;
+    line-height: 24px !important;
+
+    mat-icon {
+      font-size: 14px;
+    }
+  }
 }

 /* Zoom */
-.zoomable { cursor: zoom-in; transition: transform 0.15s; &:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgb(0 0 0 / 15%); } }
-::ng-deep .image-zoom-panel { .mat-mdc-dialog-container { padding: 0 !important; border-radius: 8px !important; overflow: hidden; } }
+.zoomable {
+  cursor: zoom-in;
+  transition: transform 0.15s;
+
+  &:hover {
+    transform: scale(1.08);
+    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  }
+}
+
+::ng-deep .image-zoom-panel {
+  .mat-mdc-dialog-container {
+    padding: 0 !important;
+    border-radius: 8px !important;
+    overflow: hidden;
+  }
+}
@@ -109,11 +109,11 @@ export class NomineeTabComponent implements OnInit {
  editNomType: string = 'DA1';

  get hasAccounts(): boolean {
-    return this.accountGroups.some(g => g.accounts.length > 0);
+    return this.accountGroups.some((g) => g.accounts.length > 0);
  }

  get selectedGroup(): AccountGroup | undefined {
-    return this.accountGroups.find(g => g.type === this.selectedType);
+    return this.accountGroups.find((g) => g.type === this.selectedType);
  }

  get selectedAccount(): any {
@@ -154,13 +154,43 @@ export class NomineeTabComponent implements OnInit {
      next: (data: any) => {
        this.loading = false;
        this.accountGroups = [
-          { type: 'savings', apiType: 'SB', label: 'Savings Account', icon: 'savings', accounts: this.filterActive(data.savingsAccounts) },
-          { type: 'current', apiType: 'CB', label: 'Current Account', icon: 'account_balance', accounts: this.filterActive(data.currentAccounts) },
-          { type: 'fd', apiType: 'FD', label: 'Fixed Deposit', icon: 'lock', accounts: this.filterActive(data.fixedDepositAccounts) },
-          { type: 'rd', apiType: 'RD', label: 'Recurring Deposit', icon: 'autorenew', accounts: this.filterActive(data.recurringDepositAccounts) },
-          { type: 'loan', apiType: 'LA', label: 'Loan Account', icon: 'credit_score', accounts: this.filterActive(data.loanAccounts) }
+          {
+            type: 'savings',
+            apiType: 'SB',
+            label: 'Savings Account',
+            icon: 'savings',
+            accounts: this.filterActive(data.savingsAccounts)
+          },
+          {
+            type: 'current',
+            apiType: 'CB',
+            label: 'Current Account',
+            icon: 'account_balance',
+            accounts: this.filterActive(data.currentAccounts)
+          },
+          {
+            type: 'fd',
+            apiType: 'FD',
+            label: 'Fixed Deposit',
+            icon: 'lock',
+            accounts: this.filterActive(data.fixedDepositAccounts)
+          },
+          {
+            type: 'rd',
+            apiType: 'RD',
+            label: 'Recurring Deposit',
+            icon: 'autorenew',
+            accounts: this.filterActive(data.recurringDepositAccounts)
+          },
+          {
+            type: 'loan',
+            apiType: 'LA',
+            label: 'Loan Account',
+            icon: 'credit_score',
+            accounts: this.filterActive(data.loanAccounts)
+          }
        ];
-        const firstWithAccounts = this.accountGroups.find(g => g.accounts.length > 0);
+        const firstWithAccounts = this.accountGroups.find((g) => g.accounts.length > 0);
        if (firstWithAccounts) {
          this.selectedType = firstWithAccounts.type;
          // Auto-select if only 1 account in the group
@@ -170,18 +200,16 @@ export class NomineeTabComponent implements OnInit {
          }
        }
      },
-      error: () => { this.loading = false; }
+      error: () => {
+        this.loading = false;
+      }
    });
  }

  private filterActive(accounts: any[]): any[] {
    if (!accounts) return [];
    // Include all non-closed accounts (active, disbursed, pending, etc.)
-    return accounts.filter((a: any) =>
-      a.status?.active ||
-      a.status?.value === 'Active' ||
-      !a.status?.closed
-    );
+    return accounts.filter((a: any) => a.status?.active || a.status?.value === 'Active' || !a.status?.closed);
  }

  onTypeChange(): void {
@@ -198,7 +226,9 @@ export class NomineeTabComponent implements OnInit {
  onAccountChange(): void {
    this.nominees = [];
    this.resetAddForm();
-    if (this.selectedAccountId) { this.loadNominees(); }
+    if (this.selectedAccountId) {
+      this.loadNominees();
+    }
  }

  private loadNominees(): void {
@@ -210,9 +240,12 @@ export class NomineeTabComponent implements OnInit {
        this.nomineesLoading = false;
        this.nominees = Array.isArray(data) ? data : [];
        // Enrich each nominee with profile image & signature
-        this.nominees.forEach(n => this.enrichNomineeImages(n));
+        this.nominees.forEach((n) => this.enrichNomineeImages(n));
      },
-      error: () => { this.nomineesLoading = false; this.nominees = []; }
+      error: () => {
+        this.nomineesLoading = false;
+        this.nominees = [];
+      }
    });
  }

@@ -224,7 +257,9 @@ export class NomineeTabComponent implements OnInit {
    // Profile image
    this.clientsService.getClientProfileImage(cid).subscribe({
      next: (img: any) => {
-        if (img) { nominee.profileImageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(img); }
+        if (img) {
+          nominee.profileImageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(img);
+        }
      },
      error: () => {}
    });
@@ -232,8 +267,8 @@ export class NomineeTabComponent implements OnInit {
    // Signature
    this.clientsService.getClientDocuments(cid).subscribe({
      next: (docs: any[]) => {
-        const sigDoc = docs?.find((d: any) =>
-          d.name?.toLowerCase().includes('signature') || d.description?.toLowerCase().includes('signature')
+        const sigDoc = docs?.find(
+          (d: any) => d.name?.toLowerCase().includes('signature') || d.description?.toLowerCase().includes('signature')
        );
        if (sigDoc) {
          this.clientsService.getClientSignatureImage(cid, sigDoc.id.toString()).subscribe({
@@ -253,7 +288,10 @@ export class NomineeTabComponent implements OnInit {
  onSearch(text: string): void {
    this.searchText = text;
    clearTimeout(this.searchTimer);
-    if (!text || text.length < 2) { this.searchResults = []; return; }
+    if (!text || text.length < 2) {
+      this.searchResults = [];
+      return;
+    }
    this.searching = true;
    this.searchTimer = setTimeout(() => {
      this.clientsService.searchByText(text, 0, 8).subscribe({
@@ -262,13 +300,19 @@ export class NomineeTabComponent implements OnInit {
          this.searching = false;
          this.clientsService.enrichSearchResults(this.searchResults);
        },
-        error: () => { this.searchResults = []; this.searching = false; }
+        error: () => {
+          this.searchResults = [];
+          this.searching = false;
+        }
      });
    }, 400);
  }

  dismissSearch(): void {
-    setTimeout(() => { this.searchResults = []; this.searching = false; }, 200);
+    setTimeout(() => {
+      this.searchResults = [];
+      this.searching = false;
+    }, 200);
  }

  selectClient(client: any): void {
@@ -291,11 +335,18 @@ export class NomineeTabComponent implements OnInit {
    this.linkedSignatureImage = null;
    this.linkedKycStatus = null;
    let pending = 4;
-    const done = () => { pending--; if (pending <= 0) { this.fetchingDetails = false; } };
+    const done = () => {
+      pending--;
+      if (pending <= 0) {
+        this.fetchingDetails = false;
+      }
+    };

    this.clientsService.getClientData(clientId.toString()).subscribe({
      next: (data: any) => {
-        if (data?.dateOfBirth) { this.selectedClient = { ...this.selectedClient, dateOfBirth: data.dateOfBirth }; }
+        if (data?.dateOfBirth) {
+          this.selectedClient = { ...this.selectedClient, dateOfBirth: data.dateOfBirth };
+        }
        done();
      },
      error: () => done()
@@ -304,8 +355,15 @@ export class NomineeTabComponent implements OnInit {
    this.clientsService.getClientKyc(clientId.toString()).subscribe({
      next: (kyc: any) => {
        if (kyc) {
-          this.selectedClient = { ...this.selectedClient, panNumber: kyc.panNumber, aadhaarMasked: kyc.aadhaarNumberMasked };
-          this.linkedKycStatus = { panVerified: kyc.panVerified || false, aadhaarVerified: kyc.aadhaarVerified || false };
+          this.selectedClient = {
+            ...this.selectedClient,
+            panNumber: kyc.panNumber,
+            aadhaarMasked: kyc.aadhaarNumberMasked
+          };
+          this.linkedKycStatus = {
+            panVerified: kyc.panVerified || false,
+            aadhaarVerified: kyc.aadhaarVerified || false
+          };
        }
        done();
      },
@@ -313,19 +371,31 @@ export class NomineeTabComponent implements OnInit {
    });

    this.clientsService.getClientProfileImage(clientId.toString()).subscribe({
-      next: (img: any) => { if (img) { this.linkedProfileImage = this.sanitizer.bypassSecurityTrustResourceUrl(img); } done(); },
+      next: (img: any) => {
+        if (img) {
+          this.linkedProfileImage = this.sanitizer.bypassSecurityTrustResourceUrl(img);
+        }
+        done();
+      },
      error: () => done()
    });

    this.clientsService.getClientDocuments(clientId.toString()).subscribe({
      next: (docs: any[]) => {
-        const sigDoc = docs?.find((d: any) => d.name?.toLowerCase().includes('signature') || d.description?.toLowerCase().includes('signature'));
+        const sigDoc = docs?.find(
+          (d: any) => d.name?.toLowerCase().includes('signature') || d.description?.toLowerCase().includes('signature')
+        );
        if (sigDoc) {
          this.clientsService.getClientSignatureImage(clientId.toString(), sigDoc.id.toString()).subscribe({
-            next: (blob: Blob) => { this.linkedSignatureImage = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob)); done(); },
+            next: (blob: Blob) => {
+              this.linkedSignatureImage = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob));
+              done();
+            },
            error: () => done()
          });
-        } else { done(); }
+        } else {
+          done();
+        }
      },
      error: () => done()
    });
@@ -336,12 +406,22 @@ export class NomineeTabComponent implements OnInit {
  onGuardianSearch(text: string): void {
    this.guardianSearchText = text;
    clearTimeout(this.guardianSearchTimer);
-    if (!text || text.length < 2) { this.guardianSearchResults = []; return; }
+    if (!text || text.length < 2) {
+      this.guardianSearchResults = [];
+      return;
+    }
    this.guardianSearching = true;
    this.guardianSearchTimer = setTimeout(() => {
      this.clientsService.searchByText(text, 0, 8).subscribe({
-        next: (data: any) => { this.guardianSearchResults = data?.content || []; this.guardianSearching = false; this.clientsService.enrichSearchResults(this.guardianSearchResults); },
-        error: () => { this.guardianSearchResults = []; this.guardianSearching = false; }
+        next: (data: any) => {
+          this.guardianSearchResults = data?.content || [];
+          this.guardianSearching = false;
+          this.clientsService.enrichSearchResults(this.guardianSearchResults);
+        },
+        error: () => {
+          this.guardianSearchResults = [];
+          this.guardianSearching = false;
+        }
      });
    }, 400);
  }
@@ -385,7 +465,9 @@ export class NomineeTabComponent implements OnInit {
        this.loadNominees();
        this.resetAddForm();
      },
-      error: () => { this.nomineeSaving = false; }
+      error: () => {
+        this.nomineeSaving = false;
+      }
    });
  }

@@ -395,26 +477,30 @@ export class NomineeTabComponent implements OnInit {
    // Resolve the linked client ID — could be nomineeClientId or nested
    const clientId = nominee.nomineeClientId || nominee.linkedClientId || nominee.clientId;
    const displayName = nominee.nomineeDisplayName || nominee.firstName || '';
-    import('../../client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component').then(m => {
-      this.dialog.open(m.ClientFamilyMemberDialogComponent, {
-        data: {
-          context: 'View',
-          member: {
-            firstName: displayName,
-            relationshipId: nominee.relationshipId,
-            dateOfBirth: nominee.nomineeDateOfBirth || nominee.dateOfBirth,
-            linkedClientId: clientId,
-            linkedClientName: displayName,
-            isAlive: true,
-            isDependent: nominee.nomineeIsMinor,
-            panNumber: nominee.panNumber || '',
-            aadhaarNumber: nominee.aadhaarMasked || ''
+    import('../../client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component').then(
+      (m) => {
+        this.dialog.open(m.ClientFamilyMemberDialogComponent, {
+          data: {
+            context: 'View',
+            member: {
+              firstName: displayName,
+              relationshipId: nominee.relationshipId,
+              dateOfBirth: nominee.nomineeDateOfBirth || nominee.dateOfBirth,
+              linkedClientId: clientId,
+              linkedClientName: displayName,
+              isAlive: true,
+              isDependent: nominee.nomineeIsMinor,
+              panNumber: nominee.panNumber || '',
+              aadhaarNumber: nominee.aadhaarMasked || ''
+            },
+            options: { relationshipIdOptions: this.relationshipOptions }
          },
-          options: { relationshipIdOptions: this.relationshipOptions }
-        },
-        width: '640px', maxWidth: '95vw', panelClass: 'fm-dialog-panel'
-      });
-    });
+          width: '640px',
+          maxWidth: '95vw',
+          panelClass: 'fm-dialog-panel'
+        });
+      }
+    );
  }

  editNominee(nominee: any, index: number): void {
@@ -424,10 +510,12 @@ export class NomineeTabComponent implements OnInit {
    this.editNomType = nominee.nominationType || 'DA1';
  }

-  cancelEdit(): void { this.editingIndex = null; }
+  cancelEdit(): void {
+    this.editingIndex = null;
+  }

  maxShareForEdit(index: number): number {
-    return 100 - this.nominees.reduce((sum, n, i) => i === index ? sum : sum + (n.percentageShare || 0), 0);
+    return 100 - this.nominees.reduce((sum, n, i) => (i === index ? sum : sum + (n.percentageShare || 0)), 0);
  }

  saveEdit(nominee: any, index: number): void {
@@ -468,7 +556,8 @@ export class NomineeTabComponent implements OnInit {
    this.dialog.open(ImageZoomDialogComponent, {
      data: { imageSrc, title },
      panelClass: 'image-zoom-panel',
-      maxWidth: '90vw', maxHeight: '90vh'
+      maxWidth: '90vw',
+      maxHeight: '90vh'
    });
  }

@@ -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;
@@ -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;
@@ -230,7 +232,9 @@ $teal: #00897b;
  padding: 3px 12px;
  border-radius: 12px;

-  i { font-size: 12px; }
+  i {
+    font-size: 12px;
+  }

  &--verified {
    background: #ecfdf5;