feat: KYC re-verify UX, family/nominee tab gating, savings dialogs, cfcfrms shell

- KYC tab: fix Verify (PAN) and Send OTP (Aadhaar) being disabled in edit mode;
  unmask Aadhaar input and show on-file masked value as hint; resolve kycId
  from id/kycId/resourceId fallbacks.
- Client stepper/view: add familyAllowed / nomineeAllowed predicates +
  CanActivate route guards. Family tab hidden for non-individuals, Nominee
  tab hidden for non-proprietor entities. Family-members step accepts a
  nomineeOnly input for proprietorship clients. Add/Edit/Delete buttons
  inside family-members and nominee tabs gated by canAdd.
- cfcfrms: add cfcfrms-shell wrapper, restyle complaint/fraud/mule/escalate
  pages and dashboard.
- Savings: identity-verify and transaction-confirm dialogs, manage / activate
  / add-charge flows, account preview styling.
- Tasks, core shell, account-nominees, icons: minor style and behaviour
  updates.

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

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -6,25 +6,22 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="tab-container mat-typography">
-  <div class="layout-row align-start">
-    <div class="m-b-10">
-      <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
-    </div>
-    @if (this.chargesData) {
-      <div class="action-button m-b-20">
-        <button mat-raised-button color="primary" (click)="toggleCharges()">
+<div class="chg-tab">
+  <div class="chg-tab__card">
+    <div class="chg-tab__toolbar">
+      <h3 class="chg-tab__title">{{ 'labels.inputs.Charges' | translate }}</h3>
+      <span class="chg-tab__spacer"></span>
+      @if (this.chargesData) {
+        <button mat-flat-button class="chg-tab__toggle" (click)="toggleCharges()">
           {{
             showInactiveCharges
               ? viewAllChargeButtons('View Active Charges')
               : viewAllChargeButtons('View Inactive Charges')
           }}
         </button>
-      </div>
-    }
-  </div>
+      }
+    </div>
 
-  <div class="mat-elevation-z1 m-b-25">
     <table mat-table #chargesTable [dataSource]="dataSource">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>

src/app/savings/savings-account-view/charges-tab/charges-tab.component.scss

@@ -6,30 +6,107 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.tab-container {
-  padding: 1%;
-  margin: 1%;
+$navy: #0d1b2a;
+$slate: #475569;
+$muted: #64748b;
+$border: #e2e8f0;
+$soft: #f8fafc;
+$blue: #1e40af;
 
-  h3 {
-    margin: 1% auto;
+.chg-tab {
+  width: 100%;
+}
+
+.chg-tab__card {
+  background: #fff;
+  border: 1px solid $border;
+  border-radius: 14px;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
+  overflow: hidden;
+}
+
+.chg-tab__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 18px;
+  background: $soft;
+  border-bottom: 1px solid $border;
+}
+
+.chg-tab__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: $navy;
+  letter-spacing: 0.01em;
+}
+
+.chg-tab__spacer {
+  flex: 1;
+}
+
+.chg-tab__toggle {
+  height: 34px !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+  font-size: 13px !important;
+  padding: 0 14px !important;
+  background: linear-gradient(135deg, #1e88e5 0%, $blue 100%) !important;
+  color: #fff !important;
+}
+
+table {
+  width: 100%;
+}
+
+::ng-deep .chg-tab__card {
+  .mat-mdc-header-row {
+    background: $soft;
   }
 
-  .action-button {
-    margin-left: auto;
+  .mat-mdc-header-cell {
+    font-size: 11.5px;
+    font-weight: 800;
+    color: $slate;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 12px 14px;
+    border-bottom: 1px solid $border;
   }
 
-  table {
-    width: 100%;
+  .mat-mdc-cell {
+    font-size: 13px;
+    color: $navy;
+    padding: 11px 14px;
+    border-bottom: 1px solid #f1f5f9;
+  }
+
+  .mat-mdc-row:hover {
+    background: #f8fafc;
+    cursor: pointer;
+  }
+
+  /* Right-align monetary columns. */
+  .mat-column-due,
+  .mat-column-paid,
+  .mat-column-waived,
+  .mat-column-outstanding {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .mat-column-actions {
+    text-align: center;
+    width: 140px;
 
     .account-action-button {
-      min-width: 26px;
-      padding: 0 6px;
-      margin: 4px;
-      line-height: 25px;
-    }
-
-    .select-row:hover {
-      cursor: pointer;
+      min-width: 30px !important;
+      padding: 0 8px !important;
+      margin: 0 3px !important;
+      height: 30px !important;
+      line-height: 30px !important;
+      border-radius: 7px !important;
     }
   }
 }