feat(ui): compact navigation with grouped mega menus and branded loaders

Navigation bar (shell.component.html/.scss)
- Restyle top-level nav items as compact tabs and add responsive
  breakpoints (1400px, 1200px, 1080px, 880px) that shrink icon, caret
  and padding so the full menu fits on smaller laptop screens.
- Long labels now carry a short form shown on narrow widths:
  Loan Origination -> Loans, General Ledger -> GL, Sub Ledger -> Sub GL,
  Reconciliation -> Recon, Documents Hub -> Docs Hub.
- Reports and Insurance menus are regrouped into titled mega panels
  (reports-mega-panel, insurance-mega-panel) using deposit-menu-group
  sections instead of one long flat list.
- No route was added or removed: all 64 menu links (Account Register,
  Day Book, End of the Day, Form 97/98, Risk Review, Re-KYC, Dormancy,
  Savings/FD Interest Posting, TDS, BOR, DIP lookups, digital payment
  reports, CKYC, DICGC, Clerk Desk, ...) still point to the same routes.

Global mega panel styles (main.scss)
- Shared grid and overlay styling for every Material mega menu
  (cdk-overlay-pane with a menu panel) plus a coloured top accent per
  panel: admin, cashier, clerk, branch-ops, hrm, digital, reports,
  share, others, npa, letter, insurance, ckyc and reconciliation.
- Fixed column layouts for the dense panels (NPA 3 columns,
  Reconciliation 5 columns, Reports, CKYC).

Toolbar (toolbar.component.html/.scss)
- User account dropdown gets its own t-user-menu panel style and opens
  towards the left (xPosition="before") so it no longer clips at the
  screen edge.
- Restyled AI assistant menu cards.

Density and products page
- Material density lowered from 0 to -1 (mifosx-theme.scss) for a
  tighter, more data-dense UI.
- Products page cards: wider container (1280px), smaller icons, fonts,
  gaps and padding to match the compact look.

Loaders (index.html, loading-screen component)
- Boot splash in index.html and the fullscreen mifosx-loading-screen now
  show the CBS Nexora logo image (assets/images/cbsnexora-logo.png)
  instead of the generic four-square SVG and text title.

Lint clean-up required by the pre-commit hook
- Prettier formatting and stylelint auto-fixes (modern rgb() notation,
  range media queries, shorthand properties, empty lines before rules).
- Merged duplicate selectors into their first block without changing
  the cascade: the second .reports-mega-panel (top accent border) in
  main.scss and the second ::ng-deep .ai-menu (AI card styles) in
  toolbar.component.scss.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

angular.json

@@ -31,6 +31,8 @@
               "@angular/localize/init"
             ],
             "assets": [
+              "src/favicon.ico",
+              "src/apple-touch-icon.png",
               "src/assets/images/cbsnexora-favicon.svg",
               "src/robots.txt",
               "src/manifest.json",
@@ -39,6 +41,11 @@
                 "glob": "**/*",
                 "input": "node_modules/tinymce",
                 "output": "assets/tinymce"
+              },
+              {
+                "glob": "lottie.min.js",
+                "input": "node_modules/lottie-web/build/player",
+                "output": "assets/js"
               }
             ],
             "styles": [

package-lock.json

@@ -41,6 +41,7 @@
         "jspdf-autotable": "^5.0.2",
         "lightgallery": "^2.9.0",
         "lodash": "4.17.23",
+        "lottie-web": "^5.13.0",
         "moment": "^2.29.4",
         "ngx-image-cropper": "^9.1.6",
         "ngx-mat-select-search": "^8.0.2",
@@ -18380,6 +18381,12 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
+      "integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",

package.json

@@ -71,6 +71,7 @@
     "jspdf-autotable": "^5.0.2",
     "lightgallery": "^2.9.0",
     "lodash": "4.17.23",
+    "lottie-web": "^5.13.0",
     "moment": "^2.29.4",
     "ngx-image-cropper": "^9.1.6",
     "ngx-mat-select-search": "^8.0.2",

src/app/app.module.ts

@@ -96,6 +96,7 @@ import { TokenInterceptor as ZitadelTokenInterceptor } from './zitadel/token.int
 import { AuthService } from './zitadel/auth.service';
 import { environment } from '../environments/environment';
 import { CallbackComponent } from './zitadel/callback/callback.component';
+import { LoadingScreenComponent } from './shared/loading-screen/loading-screen.component';
 import { OAuthModule } from 'angular-oauth2-oidc';
 
 export class CustomMissingTranslationHandler implements MissingTranslationHandler {
@@ -195,6 +196,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     AppRoutingModule,
     NotFoundComponent,
     CallbackComponent,
+    LoadingScreenComponent,
     OAuthModule.forRoot()
   ],
   providers: [

src/app/core/shell/shell.component.html

@@ -503,7 +503,8 @@
             [matMenuTriggerFor]="loanOriginationMenu"
             *mifosxHasPermission="'MENU_LOAN_ORIGINATION'"
           >
-            <fa-icon icon="clipboard-check" class="ni-ico"></fa-icon>Loan Origination
+            <fa-icon icon="clipboard-check" class="ni-ico"></fa-icon><span class="ni-full">Loan Origination</span
+            ><span class="ni-short">Loans</span>
             <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
           </a>
           <a
@@ -512,7 +513,8 @@
             (click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false"
             *mifosxHasPermission="'MENU_GENERAL_LEDGER'"
           >
-            <fa-icon icon="book-open" class="ni-ico"></fa-icon>General Ledger
+            <fa-icon icon="book-open" class="ni-ico"></fa-icon><span class="ni-full">General Ledger</span
+            ><span class="ni-short">GL</span>
             <fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
           </a>
           <a
@@ -521,7 +523,8 @@
             (click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false"
             *mifosxHasPermission="'MENU_SUB_LEDGER'"
           >
-            <fa-icon icon="book" class="ni-ico"></fa-icon>Sub Ledger
+            <fa-icon icon="book" class="ni-ico"></fa-icon><span class="ni-full">Sub Ledger</span
+            ><span class="ni-short">Sub GL</span>
             <fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
           </a>
         </div>
@@ -583,14 +586,16 @@
             [matMenuTriggerFor]="reconciliationMenu"
             *mifosxHasPermission="'MENU_CONFIG_WIZARD'"
           >
-            <fa-icon icon="sync-alt" class="ni-ico"></fa-icon>Reconciliation
+            <fa-icon icon="sync-alt" class="ni-ico"></fa-icon><span class="ni-full">Reconciliation</span
+            ><span class="ni-short">Recon</span>
             <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
           </a>
           <a class="ni" tabindex="0" routerLink="/chequebook" *mifosxHasPermission="'MENU_CHEQUEBOOK'">
             <fa-icon icon="book" class="ni-ico"></fa-icon>Cheque Book
           </a>
           <a class="ni" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu" *mifosxHasPermission="'MENU_LETTER_MGMT'">
-            <fa-icon icon="envelope" class="ni-ico"></fa-icon>Documents Hub
+            <fa-icon icon="envelope" class="ni-ico"></fa-icon><span class="ni-full">Documents Hub</span
+            ><span class="ni-short">Docs Hub</span>
             <fa-icon icon="caret-down" class="ni-caret"></fa-icon>
           </a>
         </div>
@@ -617,80 +622,89 @@
       </button>
     </mat-menu>
 
-    <mat-menu #reportsMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item [routerLink]="['/branch-ops/account-register']" tabindex="0">
-        <i class="fa fa-book menu-item-icon"></i> Account Register
-      </button>
-      <button mat-menu-item [routerLink]="['/reports']" tabindex="0">
-        <i class="fa fa-th-list menu-item-icon"></i> All Reports
-      </button>
-      <button mat-menu-item [routerLink]="['/reports', 'Client']" tabindex="0">
-        <i class="fa fa-user menu-item-icon"></i> Clients
-      </button>
-      <button mat-menu-item [routerLink]="['/reports', 'Loan']" tabindex="0">
-        <i class="fa fa-credit-card menu-item-icon"></i> Loans
-      </button>
-      <button mat-menu-item [routerLink]="['/reports', 'Savings']" tabindex="0">
-        <i class="fa fa-piggy-bank menu-item-icon"></i> Savings
-      </button>
-      <button mat-menu-item [routerLink]="['/reports', 'Fund']" tabindex="0">
-        <i class="fa fa-hand-holding-usd menu-item-icon"></i> Funds
-      </button>
-      <button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0">
-        <i class="fa fa-calculator menu-item-icon"></i> Accounting
-      </button>
-      <mat-divider></mat-divider>
-      <!-- Listed here as well as under Branch Ops: an officer looking for the day's figures reaches
-           for Reports, and the same screen answers both. -->
-      <button mat-menu-item routerLink="/branch-ops/day-book" tabindex="0">
-        <i class="fa fa-book menu-item-icon"></i> Day Book &amp; Officer Verification
-      </button>
-      <button mat-menu-item routerLink="/branch-ops/end-of-day" tabindex="0">
-        <i class="fa fa-clipboard-check menu-item-icon"></i> End of the Day Report
-      </button>
-      <button mat-menu-item routerLink="/reports/form-97-98" tabindex="0">
-        <i class="fa fa-file-invoice menu-item-icon"></i> Form 97/98 Transaction Report
-      </button>
-      <button mat-menu-item routerLink="/reports/risk-review" tabindex="0">
-        <i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report
-      </button>
-      <button mat-menu-item routerLink="/reports/kyc-expiry" tabindex="0">
-        <i class="fa fa-id-card menu-item-icon"></i> Re-KYC Expiry &amp; Outreach
-      </button>
-      <button mat-menu-item routerLink="/reports/dormancy" tabindex="0">
-        <i class="fa fa-hourglass-half menu-item-icon"></i> Inactive, Dormant &amp; DEAF
-      </button>
-      <button mat-menu-item routerLink="/reports/savings-interest" tabindex="0">
-        <i class="fa fa-percentage menu-item-icon"></i> Savings Interest Posted
-      </button>
-      <button mat-menu-item routerLink="/reports/interest-posting" tabindex="0">
-        <i class="fa fa-clipboard-check menu-item-icon"></i> Interest Posting Reports
-      </button>
-      <button mat-menu-item routerLink="/reports/fd-interest-posting" tabindex="0">
-        <i class="fa fa-clipboard-check menu-item-icon"></i> FD Interest Posting Reports
-      </button>
-      <button mat-menu-item routerLink="/reports/interest-posting-summary" tabindex="0">
-        <i class="fa fa-table menu-item-icon"></i> Interest Posting Summary (Branch-wise)
-      </button>
-      <!--
-        The Principal Officer clears flagged UNSC screenings here. It is not a runnable report,
-        so it never shows up under the report categories above and had no nav entry at all.
-      -->
-      <button mat-menu-item routerLink="/reports/sanctions-logs" tabindex="0">
-        <i class="fa fa-shield-alt menu-item-icon"></i> Sanctions Screening &amp; Alerts
-      </button>
-      <button mat-menu-item routerLink="/reports/dip-lookups" tabindex="0">
-        <i class="fa fa-satellite-dish menu-item-icon"></i> DIP / MNRL Mobile Lookups
-      </button>
-      <button mat-menu-item routerLink="/reports/tds-interest" tabindex="0">
-        <i class="fa fa-percent menu-item-icon"></i> Deposit Interest &amp; TDS
-      </button>
-      <button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
-        <i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government
-      </button>
-      <button mat-menu-item routerLink="/reports/bor" tabindex="0">
-        <i class="fa fa-gavel menu-item-icon"></i> BOR Register &mdash; Share Capital
-      </button>
+    <mat-menu #reportsMenu="matMenu" class="reports-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid reports-grid" (click)="$event.stopPropagation()">
+        <!-- Core Reports -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Core Reports</div>
+          <button mat-menu-item [routerLink]="['/branch-ops/account-register']" tabindex="0">
+            <i class="fa fa-book menu-item-icon"></i> Account Register
+          </button>
+          <button mat-menu-item [routerLink]="['/reports']" tabindex="0">
+            <i class="fa fa-th-list menu-item-icon"></i> All Reports
+          </button>
+          <button mat-menu-item [routerLink]="['/reports', 'Client']" tabindex="0">
+            <i class="fa fa-user menu-item-icon"></i> Clients
+          </button>
+          <button mat-menu-item [routerLink]="['/reports', 'Loan']" tabindex="0">
+            <i class="fa fa-credit-card menu-item-icon"></i> Loans
+          </button>
+          <button mat-menu-item [routerLink]="['/reports', 'Savings']" tabindex="0">
+            <i class="fa fa-piggy-bank menu-item-icon"></i> Savings
+          </button>
+          <button mat-menu-item [routerLink]="['/reports', 'Fund']" tabindex="0">
+            <i class="fa fa-hand-holding-usd menu-item-icon"></i> Funds
+          </button>
+          <button mat-menu-item [routerLink]="['/reports', 'Accounting']" tabindex="0">
+            <i class="fa fa-calculator menu-item-icon"></i> Accounting
+          </button>
+        </div>
+
+        <!-- Operations & Interest -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Operations &amp; Interest</div>
+          <button mat-menu-item routerLink="/branch-ops/day-book" tabindex="0">
+            <i class="fa fa-book menu-item-icon"></i> Day Book &amp; Officer Verification
+          </button>
+          <button mat-menu-item routerLink="/branch-ops/end-of-day" tabindex="0">
+            <i class="fa fa-clipboard-check menu-item-icon"></i> End of the Day Report
+          </button>
+          <button mat-menu-item routerLink="/reports/savings-interest" tabindex="0">
+            <i class="fa fa-percentage menu-item-icon"></i> Savings Interest Posted
+          </button>
+          <button mat-menu-item routerLink="/reports/interest-posting" tabindex="0">
+            <i class="fa fa-clipboard-check menu-item-icon"></i> Interest Posting Reports
+          </button>
+          <button mat-menu-item routerLink="/reports/fd-interest-posting" tabindex="0">
+            <i class="fa fa-clipboard-check menu-item-icon"></i> FD Interest Posting Reports
+          </button>
+          <button mat-menu-item routerLink="/reports/interest-posting-summary" tabindex="0">
+            <i class="fa fa-table menu-item-icon"></i> Interest Posting Summary (Branch-wise)
+          </button>
+          <button mat-menu-item routerLink="/reports/tds-interest" tabindex="0">
+            <i class="fa fa-percent menu-item-icon"></i> Deposit Interest &amp; TDS
+          </button>
+        </div>
+
+        <!-- Compliance & Registers -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Compliance &amp; Registers</div>
+          <button mat-menu-item routerLink="/reports/form-97-98" tabindex="0">
+            <i class="fa fa-file-invoice menu-item-icon"></i> Form 97/98 Transaction Report
+          </button>
+          <button mat-menu-item routerLink="/reports/risk-review" tabindex="0">
+            <i class="fa fa-user-shield menu-item-icon"></i> Risk Review Report
+          </button>
+          <button mat-menu-item routerLink="/reports/kyc-expiry" tabindex="0">
+            <i class="fa fa-id-card menu-item-icon"></i> Re-KYC Expiry &amp; Outreach
+          </button>
+          <button mat-menu-item routerLink="/reports/dormancy" tabindex="0">
+            <i class="fa fa-hourglass-half menu-item-icon"></i> Inactive, Dormant &amp; DEAF
+          </button>
+          <button mat-menu-item routerLink="/reports/sanctions-logs" tabindex="0">
+            <i class="fa fa-shield-alt menu-item-icon"></i> Sanctions Screening &amp; Alerts
+          </button>
+          <button mat-menu-item routerLink="/reports/dip-lookups" tabindex="0">
+            <i class="fa fa-satellite-dish menu-item-icon"></i> DIP / MNRL Mobile Lookups
+          </button>
+          <button mat-menu-item routerLink="/reports/tds-remittance" tabindex="0">
+            <i class="fa fa-landmark menu-item-icon"></i> TDS Remitted to Government
+          </button>
+          <button mat-menu-item routerLink="/reports/bor" tabindex="0">
+            <i class="fa fa-gavel menu-item-icon"></i> BOR Register &mdash; Share Capital
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
     <!-- Admin Mega Menu — 3-column rectangular panel grouping Setup,
@@ -1063,121 +1077,146 @@
     <!-- Sub Menu Dropdowns -->
     <!-- Branch-level operations. Starts with the day register; other branch-wide controls belong
          here rather than under Cashier, which is one role's workspace. -->
-    <mat-menu #branchOpsMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-register']">
-        <fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Day Open / Day Close
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/missed-close']">
-        <fa-icon icon="exclamation-triangle" class="menu-item-icon"></fa-icon> Missed Close Register
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']">
-        <fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position
-      </button>
-      <!-- The day book carries the Officer Verification Sheet — each person's credit, debit and net
-           for the day. It was reachable only from the Clerk and Cashier menus, which is the one
-           place a principal officer signing the day off does not look. -->
-      <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-book']">
-        <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book &amp; Verification
-      </button>
-      <!-- The signed sheet, as against the day book's working list: the day's modes, the drawer
-           against the books, and what is still open. This is what goes in the file. -->
-      <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/end-of-day']">
-        <fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
-      </button>
+    <mat-menu #branchOpsMenu="matMenu" class="branch-ops-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid branch-ops-grid" (click)="$event.stopPropagation()">
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Day Operations</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-register']">
+            <fa-icon icon="calendar-check" class="menu-item-icon"></fa-icon> Day Open / Day Close
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/missed-close']">
+            <fa-icon icon="exclamation-triangle" class="menu-item-icon"></fa-icon> Missed Close Register
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/vault-position']">
+            <fa-icon icon="lock" class="menu-item-icon"></fa-icon> Vault Position
+          </button>
+        </div>
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Verification &amp; Reports</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/day-book']">
+            <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book &amp; Verification
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/branch-ops/end-of-day']">
+            <fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
-    <!-- Clerk was a bare link straight into the fullscreen dashboard, which left the clerk's other
-         screens reachable only from inside that fullscreen nav. Anything a clerk needs from the
-         normal shell — an open voucher exception above all — belongs here. -->
-    <mat-menu #clerkMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item tabindex="0" routerLink="/clerk/dashboard" (click)="hideShellLayout = true">
-        <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> Clerk Dashboard
-      </button>
-      <!-- The clerk reads the day as a sheet to sign off, not as a working list of vouchers: the
-           day's summary, the counter counted against the books, and what is still open. The day
-           book's own row-by-row view stays reachable from Branch Ops and from the Cashier menu. -->
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/end-of-day']">
-        <fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/withdrawal-requests']">
-        <fa-icon icon="money-bill-wave" class="menu-item-icon"></fa-icon> My Withdrawal Requests
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-disbursement-requests']">
-        <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Disbursements &amp; Transfer
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/dividend-dashboard']">
-        <fa-icon icon="chart-pie" class="menu-item-icon"></fa-icon> Dividend Dashboard
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-work']">
-        <fa-icon icon="user-check" class="menu-item-icon"></fa-icon> My Vouchers
-      </button>
-      <!-- Sits under My Vouchers because it answers the same question for the one worker who has no
-           own list: the system. A nightly run belongs to nobody, so it appears on no person's page. -->
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/system-vouchers']">
-        <fa-icon icon="robot" class="menu-item-icon"></fa-icon> System Vouchers
-      </button>
-      <!-- A clerk supervises the counter, so they need to see what each cashier is holding and what
-           went through their drawer. Both screens already return every cashier for a non-cashier
-           caller (CashierRoleHelper scopes only a cashier to themselves) — they were simply not
-           reachable from this menu. -->
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
-        <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
-        <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Closing Cash Report
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/received-report']">
-        <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Received Vouchers
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/clerk/payment-report']">
-        <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Payment Vouchers
-      </button>
+    <!-- Clerk Desk -->
+    <mat-menu #clerkMenu="matMenu" class="clerk-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid clerk-grid" (click)="$event.stopPropagation()">
+        <!-- Clerk Desk -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Clerk Desk</div>
+          <button mat-menu-item tabindex="0" routerLink="/clerk/dashboard" (click)="hideShellLayout = true">
+            <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> Clerk Dashboard
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/withdrawal-requests']">
+            <fa-icon icon="money-bill-wave" class="menu-item-icon"></fa-icon> My Withdrawal Requests
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-disbursement-requests']">
+            <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Disbursements &amp; Transfer
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/dividend-dashboard']">
+            <fa-icon icon="chart-pie" class="menu-item-icon"></fa-icon> Dividend Dashboard
+          </button>
+        </div>
+
+        <!-- Vouchers -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Vouchers</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/my-work']">
+            <fa-icon icon="user-check" class="menu-item-icon"></fa-icon> My Vouchers
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/system-vouchers']">
+            <fa-icon icon="robot" class="menu-item-icon"></fa-icon> System Vouchers
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/received-report']">
+            <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Received Vouchers
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/payment-report']">
+            <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Payment Vouchers
+          </button>
+        </div>
+
+        <!-- Counter & Reports -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Counter &amp; Reports</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
+            <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
+            <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Closing Cash Report
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/clerk/end-of-day']">
+            <fa-icon icon="clipboard-check" class="menu-item-icon"></fa-icon> End of the Day Report
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
-    <mat-menu #cashierMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-exchange']">
-        <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Cash Exchange Entry
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']">
-        <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
-        <fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Closing Cash Report
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/exchange-detail']">
-        <fa-icon icon="globe" class="menu-item-icon"></fa-icon> Currency Exchange Detail
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']">
-        <fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']">
-        <fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']">
-        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/inter-cashier']">
-        <fa-icon icon="exchange-alt" class="menu-item-icon"></fa-icon> Inter-Cashier Transfer
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
-        <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/reconciliation']">
-        <fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Reconciliation
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']">
-        <fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/day-book']">
-        <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']">
-        <fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry
-      </button>
+    <!-- Cashier Desk -->
+    <mat-menu #cashierMenu="matMenu" class="cashier-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid cashier-grid" (click)="$event.stopPropagation()">
+        <!-- Cash Entries & Exchange -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Cash &amp; Counter</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-exchange']">
+            <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> Cash Exchange Entry
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/exchange-detail']">
+            <fa-icon icon="globe" class="menu-item-icon"></fa-icon> Currency Exchange Detail
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/transaction-entry']">
+            <fa-icon icon="keyboard" class="menu-item-icon"></fa-icon> Transaction Entry
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/system/denomination-master']">
+            <fa-icon icon="coins" class="menu-item-icon"></fa-icon> Cash Denomination
+          </button>
+        </div>
+
+        <!-- Transfers & Settlement -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Transfers &amp; Settlement</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-transfer']">
+            <fa-icon icon="random" class="menu-item-icon"></fa-icon> Cash Transfer
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/inter-cashier']">
+            <fa-icon icon="exchange-alt" class="menu-item-icon"></fa-icon> Inter-Cashier Transfer
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-settlement']">
+            <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Cash Settlement
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cashier-position']">
+            <fa-icon icon="wallet" class="menu-item-icon"></fa-icon> Cashier Position
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/day-book']">
+            <fa-icon icon="book" class="menu-item-icon"></fa-icon> Day Book
+          </button>
+        </div>
+
+        <!-- Reports & Audit -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Reports &amp; Audit</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/closing-report']">
+            <fa-icon icon="file-alt" class="menu-item-icon"></fa-icon> Closing Cash Report
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/excess-report']">
+            <fa-icon icon="exclamation-circle" class="menu-item-icon"></fa-icon> Excess Transaction Report
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/reconciliation']">
+            <fa-icon icon="balance-scale" class="menu-item-icon"></fa-icon> Reconciliation
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/cashier/cash-history']">
+            <fa-icon icon="history" class="menu-item-icon"></fa-icon> Cash History
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
     <mat-menu #depositsMenu="matMenu" class="deposits-mega-panel" [overlapTrigger]="false">
-      <div class="deposit-menu-grid" (click)="$event.stopPropagation()">
+      <div class="deposit-menu-grid deposits-grid" (click)="$event.stopPropagation()">
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Accounts</div>
           <button mat-menu-item tabindex="0" [routerLink]="['/accounts/savings']">
@@ -1239,34 +1278,54 @@
       </div>
     </mat-menu>
 
-    <mat-menu #clearingMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/inward']">
-        <fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward Clearing (CTS)
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/outward']">
-        <fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward Clearing (CTS)
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/positive-pay']">
-        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Positive Pay (PPS)
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/settlement']">
-        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Settlement
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/reconciliation']">
-        <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Reconciliation
-      </button>
-      <button mat-menu-item tabindex="0" [routerLink]="['/nachclearing']">
-        <fa-icon icon="money-check" class="menu-item-icon"></fa-icon> NACH Clearing
-      </button>
-      <button mat-menu-item tabindex="0"><fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward</button>
-      <button mat-menu-item tabindex="0"><fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward</button>
-      <button mat-menu-item [routerLink]="['/sponsor-dd/inventory']" tabindex="0">
-        <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Sponsor DD Inventory
-      </button>
+    <mat-menu #clearingMenu="matMenu" class="clearing-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid clearing-grid" (click)="$event.stopPropagation()">
+        <!-- CTS Clearing -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">CTS Clearing</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/inward']">
+            <fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward Clearing (CTS)
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/outward']">
+            <fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward Clearing (CTS)
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/positive-pay']">
+            <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Positive Pay (PPS)
+          </button>
+        </div>
+
+        <!-- Settlement & Recon -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Settlement &amp; Recon</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/settlement']">
+            <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Settlement
+          </button>
+          <button mat-menu-item tabindex="0" [routerLink]="['/ctsclearing/reconciliation']">
+            <fa-icon icon="check-circle" class="menu-item-icon"></fa-icon> Reconciliation
+          </button>
+          <button mat-menu-item [routerLink]="['/sponsor-dd/inventory']" tabindex="0">
+            <fa-icon icon="receipt" class="menu-item-icon"></fa-icon> Sponsor DD Inventory
+          </button>
+        </div>
+
+        <!-- NACH & Other -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">NACH &amp; Direct</div>
+          <button mat-menu-item tabindex="0" [routerLink]="['/nachclearing']">
+            <fa-icon icon="money-check" class="menu-item-icon"></fa-icon> NACH Clearing
+          </button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="arrow-right" class="menu-item-icon"></fa-icon> Outward
+          </button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="arrow-left" class="menu-item-icon"></fa-icon> Inward
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
     <mat-menu #hrmMenu="matMenu" class="hrm-mega-panel" [overlapTrigger]="false">
-      <div class="deposit-menu-grid" (click)="$event.stopPropagation()">
+      <div class="deposit-menu-grid hrm-grid" (click)="$event.stopPropagation()">
         <!-- Payroll -->
         <div class="deposit-menu-group">
           <div class="deposit-group-title">Payroll</div>
@@ -1573,23 +1632,33 @@
       </div>
     </mat-menu>
 
-    <mat-menu #ckycMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item routerLink="/ckyc" tabindex="0">
-        <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> CKYC Management
-      </button>
-      <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('REKYC')">
-        <fa-icon icon="sync-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> Re-KYC Report
-      </button>
-      <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('RISK-REVIEW')">
-        <fa-icon icon="history" class="menu-item-icon" style="color: #be185d"></fa-icon> Risk Review
-      </button>
-      <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('CERSAI')">
-        <fa-icon icon="shield-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> CERSAI Report
-      </button>
-      <mat-divider></mat-divider>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="database" class="menu-item-icon" style="color: #be185d"></fa-icon> Dump KYC &amp; Loan Data
-      </button>
+    <mat-menu #ckycMenu="matMenu" class="ckyc-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid ckyc-grid" (click)="$event.stopPropagation()">
+        <!-- KYC Operations -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">KYC Operations</div>
+          <button mat-menu-item routerLink="/ckyc" tabindex="0">
+            <fa-icon icon="id-card" class="menu-item-icon"></fa-icon> CKYC Management
+          </button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="database" class="menu-item-icon" style="color: #be185d"></fa-icon> Dump KYC &amp; Loan Data
+          </button>
+        </div>
+
+        <!-- Reports & Screening -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Reports &amp; Screening</div>
+          <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('REKYC')">
+            <fa-icon icon="sync-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> Re-KYC Report
+          </button>
+          <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('RISK-REVIEW')">
+            <fa-icon icon="history" class="menu-item-icon" style="color: #be185d"></fa-icon> Risk Review
+          </button>
+          <button mat-menu-item tabindex="0" (click)="openCkycReportsDialog('CERSAI')">
+            <fa-icon icon="shield-alt" class="menu-item-icon" style="color: #be185d"></fa-icon> CERSAI Report
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
     <!-- CFCFRMS — single landing page (CfcfrmsShell) hosts the full
@@ -1607,11 +1676,11 @@
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/sundry-dr-cr">
             <fa-icon icon="random" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            Sundry Dr / Cr Reconciliation
+            Sundry Dr / Cr
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/pnl-impact">
             <fa-icon icon="chart-line" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            P&amp;L Impact Reconciliation
+            P&amp;L Impact
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/gl-reconciliation">
             <fa-icon icon="book-open" class="menu-item-icon" style="color: #0d9488"></fa-icon>
@@ -1619,11 +1688,11 @@
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/fixed-assets">
             <fa-icon icon="cube" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            Fixed Assets Reconciliation
+            Fixed Assets
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/inter-company">
             <fa-icon icon="sitemap" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            Inter-Company Reconciliation
+            Inter-Company
           </button>
         </div>
 
@@ -1636,15 +1705,15 @@
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/api-bank-reco">
             <fa-icon icon="code-branch" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            API Based Bank Reconciliation
+            API Bank Reco
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/neft-rtgs">
             <fa-icon icon="exchange" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            NEFT / RTGS Reconciliation
+            NEFT / RTGS Reco
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/clearing-reco">
             <fa-icon icon="hand-holding-usd" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            Clearing Reconciliation
+            Clearing Reco
           </button>
         </div>
 
@@ -1657,11 +1726,11 @@
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/three-way-digital">
             <fa-icon icon="project-diagram" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            Three-way Digital Reconciliation
+            Three-way Digital
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/nach-reco">
             <fa-icon icon="sync-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            NACH Reconciliation
+            NACH Reco
           </button>
         </div>
 
@@ -1670,11 +1739,11 @@
           <div class="deposit-group-title">Instruments &amp; Members</div>
           <button mat-menu-item [routerLink]="['/sponsor-dd-reconciliation']" tabindex="0">
             <fa-icon icon="money-check-alt" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            DD / Pay Order Reconciliation
+            DD / Pay Order
           </button>
           <button mat-menu-item tabindex="0" routerLink="/reconciliation/share-member">
             <fa-icon icon="coins" class="menu-item-icon" style="color: #0d9488"></fa-icon>
-            Share Member Reconciliation
+            Share Member
           </button>
         </div>
 
@@ -1850,46 +1919,68 @@
       </div>
     </mat-menu>
 
-    <mat-menu #insuranceMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item routerLink="/dicgc" tabindex="0">
-        <fa-icon icon="building" class="menu-item-icon" style="color: #c2410c"></fa-icon> DICGC
-      </button>
-      <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMJBY</button>
-      <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMSBY</button>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="hand-holding-heart" class="menu-item-icon"></fa-icon> Indemnity
-      </button>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="home" class="menu-item-icon"></fa-icon> Assets Insurance
-      </button>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="laptop" class="menu-item-icon"></fa-icon> Cyber Insurance
-      </button>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="university" class="menu-item-icon"></fa-icon> Bank Insurance
-      </button>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Loan Insurance
-      </button>
+    <mat-menu #insuranceMenu="matMenu" class="insurance-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid insurance-grid" (click)="$event.stopPropagation()">
+        <!-- Social & Policy Schemes -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Schemes &amp; Social</div>
+          <button mat-menu-item routerLink="/dicgc" tabindex="0">
+            <fa-icon icon="building" class="menu-item-icon" style="color: #c2410c"></fa-icon> DICGC
+          </button>
+          <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMJBY</button>
+          <button mat-menu-item tabindex="0"><fa-icon icon="heart" class="menu-item-icon"></fa-icon> PMSBY</button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="hand-holding-heart" class="menu-item-icon"></fa-icon> Indemnity
+          </button>
+        </div>
+
+        <!-- Institutional & Loans -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Institutional &amp; Loans</div>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="file-invoice" class="menu-item-icon"></fa-icon> Loan Insurance
+          </button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="home" class="menu-item-icon"></fa-icon> Assets Insurance
+          </button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="laptop" class="menu-item-icon"></fa-icon> Cyber Insurance
+          </button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="university" class="menu-item-icon"></fa-icon> Bank Insurance
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
-    <mat-menu #digitalMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
-      <button mat-menu-item routerLink="/digital/neft-rtgs-report" tabindex="0">
-        <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> NEFT / RTGS
-      </button>
-      <button mat-menu-item routerLink="/digital/imps-report" tabindex="0">
-        <fa-icon icon="bolt" class="menu-item-icon"></fa-icon> IMPS
-      </button>
-      <button mat-menu-item routerLink="/digital/upi-report" tabindex="0">
-        <fa-icon icon="mobile-alt" class="menu-item-icon"></fa-icon> UPI Reports
-      </button>
-      <button mat-menu-item routerLink="/digital/atm-pos-ecom" tabindex="0">
-        <fa-icon icon="credit-card" class="menu-item-icon"></fa-icon> ATM / POS / ECOM Reports
-      </button>
-      <button mat-menu-item tabindex="0"><fa-icon icon="sync" class="menu-item-icon"></fa-icon> NACH</button>
-      <button mat-menu-item tabindex="0">
-        <fa-icon icon="file-signature" class="menu-item-icon"></fa-icon> Mandate
-      </button>
+    <mat-menu #digitalMenu="matMenu" class="digital-mega-panel" [overlapTrigger]="false">
+      <div class="deposit-menu-grid digital-grid" (click)="$event.stopPropagation()">
+        <!-- Payment Systems -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Payments</div>
+          <button mat-menu-item routerLink="/digital/neft-rtgs-report" tabindex="0">
+            <fa-icon icon="exchange" class="menu-item-icon"></fa-icon> NEFT / RTGS
+          </button>
+          <button mat-menu-item routerLink="/digital/imps-report" tabindex="0">
+            <fa-icon icon="bolt" class="menu-item-icon"></fa-icon> IMPS
+          </button>
+          <button mat-menu-item routerLink="/digital/upi-report" tabindex="0">
+            <fa-icon icon="mobile-alt" class="menu-item-icon"></fa-icon> UPI Reports
+          </button>
+        </div>
+
+        <!-- Cards & Mandates -->
+        <div class="deposit-menu-group">
+          <div class="deposit-group-title">Cards &amp; Mandates</div>
+          <button mat-menu-item routerLink="/digital/atm-pos-ecom" tabindex="0">
+            <fa-icon icon="credit-card" class="menu-item-icon"></fa-icon> ATM / POS / ECOM Reports
+          </button>
+          <button mat-menu-item tabindex="0"><fa-icon icon="sync" class="menu-item-icon"></fa-icon> NACH</button>
+          <button mat-menu-item tabindex="0">
+            <fa-icon icon="file-signature" class="menu-item-icon"></fa-icon> Mandate
+          </button>
+        </div>
+      </div>
     </mat-menu>
 
     <!-- RBI Mega Menu -->

src/app/core/shell/shell.component.scss

@@ -266,7 +266,7 @@ $color: #e2e4ec;
     max-width: 100%;
     overflow-x: hidden;
     box-sizing: border-box;
-    padding: 16px 28px;
+    padding: 10px 18px;
   }
 }
 
@@ -282,21 +282,15 @@ $gray-700: #334155;
 /* ============================================================
    Main header (top 2-row navigation)
    --------------------------------------------------------------
-   Redesigned 2026 — clean, modern enterprise SaaS feel:
-   • Both rows live on the same white surface separated only by a
-     hairline; r2 has a barely-there blue-50 wash so frequent vs
-     secondary menus read at a glance without dark/light contrast.
-   • Items are now equal-width "tabs" with NO vertical dividers
-     between them (the old cell borders made it look spreadsheet-y).
-   • Hover / active = a 3 px brand-coloured TOP bar + brand text +
-     coloured icon. Reads instantly without colour-flooding the row.
-   • Icons larger (12.5 px) and full-opacity always — easier to scan
-     during demos. Caret is subtle and rotates on open.
+   Compact, modern enterprise SaaS navigation:
+   • Height reduced to 32px per row (64px total) to save screen space.
+   • Smooth horizontal scrolling prevents menu items from getting cut off.
+   • Compact typography, icons and paddings fit all banking modules cleanly.
    ============================================================ */
 .main-header {
   background: #fff;
-  border-bottom: 2.5px solid $brand;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
+  border-bottom: 2px solid $brand;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
   position: sticky;
 
   /* Sit directly under the sticky toolbar (32px tall) so both stay visible. */
@@ -306,19 +300,19 @@ $gray-700: #334155;
 }
 
 .nav-row {
-  height: 44px;
+  height: 32px;
   display: flex;
   align-items: stretch;
-  overflow: visible;
+  overflow: auto visible;
   position: relative;
-
-  /* Outer frame; vertical dividers between cells are drawn as `border-right`
-     on each `.ni` below. Switched away from the equal-column grid so each
-     cell can size to its own label — long names (General Ledger, Documents
-     Hub) no longer overflow and short ones (Approvals, HRM) no longer waste
-     space. */
   border: 1px solid $gray-200;
   background: #fff;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .r2.nav-row {
@@ -334,25 +328,17 @@ $gray-700: #334155;
   background: #f8fafc;
 }
 
-// ===== Nav Item — modern tab style =====
-// Typography spec — same family / size / weight / color for BOTH rows.
+// ===== Nav Item — compact modern tab style =====
 .ni {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 7px;
+  gap: 2.5px;
   height: 100%;
-
-  /* Each cell sizes to its own label (min-width: max-content) and grows
-     to share any leftover row width. Short labels stay compact, long ones
-     get the room they need — no overlap, no wasted gap. */
   flex: 1 0 auto;
-  min-width: max-content;
-  padding: 0 14px;
-
-  /* Vertical divider between adjacent cells; outer frame is the row's
-     own border, and the last cell drops its right border below. */
+  min-width: 0;
+  padding: 0 4px;
   border-right: 1px solid $gray-200;
   cursor: pointer;
   white-space: nowrap;
@@ -360,11 +346,11 @@ $gray-700: #334155;
     'IBM Plex Sans',
     -apple-system,
     sans-serif;
-  font-size: 12px;
+  font-size: 10px;
   font-weight: 500;
   color: #0a1a2e;
-  line-height: 1.3;
-  letter-spacing: 0.01em;
+  line-height: 1.2;
+  letter-spacing: -0.015em;
   text-decoration: none;
   user-select: none;
   transition:
@@ -373,17 +359,15 @@ $gray-700: #334155;
     box-shadow 0.15s ease;
   border-radius: 0;
 
-  /* 3px accent strip that fills on hover / active (uses ::before so we
-     don't reflow the row when toggling). */
   &::before {
     content: '';
     position: absolute;
-    left: 4px;
-    right: 4px;
+    left: 2px;
+    right: 2px;
     top: 0;
-    height: 3px;
+    height: 2px;
     background: transparent;
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 2px 2px;
     transition: background 0.15s ease;
   }
 
@@ -410,17 +394,19 @@ $gray-700: #334155;
     outline-offset: -2px;
   }
 
-  /* Last cell in a row sits flush against the row's own right edge, so
-     drop its divider to avoid a double 2 px line. */
   &:last-child {
     border-right: none;
   }
+
+  .ni-short {
+    display: none;
+  }
 }
 
 .ni-ico {
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
+  width: 9.5px;
+  height: 9.5px;
+  font-size: 9.5px;
   color: $gray-500;
   flex-shrink: 0;
   transition: color 0.15s ease;
@@ -432,11 +418,12 @@ $gray-700: #334155;
 }
 
 .ni-caret {
-  width: 7px;
-  height: 7px;
-  font-size: 7px;
+  width: 5px;
+  height: 5px;
+  font-size: 5px;
   color: $gray-400;
   flex-shrink: 0;
+  margin-left: 0.5px;
   transition:
     transform 0.18s ease,
     color 0.18s ease;
@@ -447,17 +434,89 @@ $gray-700: #334155;
   }
 }
 
-@media (width <= 1200px) {
+@media (width >= 1400px) {
   .ni {
-    padding: 0 8px;
-    gap: 5px;
+    padding: 0 6px;
+    gap: 3.5px;
+    font-size: 10.8px;
+    letter-spacing: 0;
+  }
+
+  .ni-ico {
+    width: 10px;
+    height: 10px;
+    font-size: 10px;
+  }
+
+  .ni-caret {
+    width: 5.5px;
+    height: 5.5px;
+    font-size: 5.5px;
+    margin-left: 1px;
   }
 }
 
-@media (width <= 980px) {
+@media (width <= 1200px) {
   .ni {
+    padding: 0 3px;
+    gap: 2px;
+    font-size: 9.8px;
+    letter-spacing: -0.02em;
+  }
+
+  .ni-ico {
+    width: 9px;
+    height: 9px;
+    font-size: 9px;
+  }
+
+  .ni-caret {
+    width: 4.5px;
+    height: 4.5px;
+    font-size: 4.5px;
+  }
+}
+
+@media (width <= 1080px) {
+  .ni {
+    padding: 0 2.5px;
+    gap: 1.5px;
+    font-size: 9.4px;
+    letter-spacing: -0.025em;
+
+    .ni-full {
+      display: none;
+    }
+
+    .ni-short {
+      display: inline;
+    }
+  }
+
+  .ni-ico {
+    width: 8.5px;
+    height: 8.5px;
+    font-size: 8.5px;
+  }
+
+  .ni-caret {
+    width: 4px;
+    height: 4px;
+    font-size: 4px;
+  }
+}
+
+@media (width <= 880px) {
+  .nav-row {
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .ni {
+    flex: 0 0 auto;
     padding: 0 6px;
-    gap: 4px;
+    gap: 3px;
+    font-size: 10px;
   }
 }
 
@@ -699,21 +758,29 @@ $gray-700: #334155;
 
 // ===== Nav Dropdown Menus =====
 ::ng-deep .nav-dropdown {
-  border-radius: 8px !important;
+  border-radius: 6px !important;
   border: 1px solid $gray-200 !important;
-  box-shadow: 0 6px 24px rgb(0 0 0 / 10%) !important;
-  min-width: 180px !important;
-  padding: 4px 0 !important;
-  margin-top: 2px !important;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 12%) !important;
+  min-width: 170px !important;
+  padding: 3px 0 !important;
+  margin-top: 1px !important;
 
   .mat-mdc-menu-item {
-    font-size: 12.5px !important;
+    font-size: 10.5px !important;
     font-weight: 500 !important;
-    height: 34px !important;
-    min-height: 34px !important;
-    padding: 0 14px !important;
+    height: 25px !important;
+    min-height: 25px !important;
+    padding: 0 6px !important;
+    line-height: 25px !important;
     color: $gray-700 !important;
-    font-family: 'DM Sans', Roboto, sans-serif !important;
+    font-family: 'IBM Plex Sans', Roboto, sans-serif !important;
+    white-space: nowrap !important;
+
+    .menu-item-icon {
+      font-size: 10.5px !important;
+      margin-right: 5px !important;
+      opacity: 0.8;
+    }
 
     &:hover {
       background: $brand-hover !important;
@@ -728,39 +795,44 @@ $gray-700: #334155;
 }
 
 /* Deposits Mega Panel (inside mat-menu overlay) */
-.deposit-menu-grid {
+::ng-deep .deposit-menu-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px 24px;
-  padding: 8px 12px;
-  min-width: 600px;
+  gap: 4px 12px;
+  padding: 6px 10px;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
-.deposit-menu-group {
+::ng-deep .deposit-menu-group {
   .deposit-group-title {
     font-weight: 700;
-    font-size: 11px;
+    font-size: 9.5px;
     text-transform: uppercase;
-    letter-spacing: 0.6px;
+    letter-spacing: 0.5px;
     color: #1074b9;
-    padding: 4px 16px 6px;
+    padding: 2px 6px 3px;
     margin-bottom: 2px;
-    border-bottom: 2px solid #1074b9;
+    border-bottom: 1.5px solid #1074b9;
+    white-space: nowrap;
   }
 }
 
-/* NPA Mega Panel — 4 columns (Reports / Analysis / Classification / Recovery Management) */
-.npa-grid {
-  grid-template-columns: repeat(4, minmax(200px, 1fr));
-  min-width: 880px;
-  max-width: 96vw;
+/* NPA Mega Panel — 3 columns */
+::ng-deep .npa-grid {
+  grid-template-columns: repeat(3, minmax(210px, 1fr));
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
-/* Reconciliation Mega Panel — 5 columns, teal accent to match the icon palette */
-.reconciliation-grid {
-  grid-template-columns: repeat(5, minmax(190px, 1fr));
-  min-width: 1040px;
-  max-width: 96vw;
+/* Reconciliation Mega Panel — 5 columns */
+::ng-deep .reconciliation-grid {
+  grid-template-columns: repeat(5, minmax(170px, 1fr));
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
 
   .deposit-group-title {
     color: #0d9488;
@@ -780,47 +852,49 @@ $gray-700: #334155;
 
 .gl-mega-menu {
   position: absolute;
-  top: 100px;
+  top: 96px;
   left: 50%;
   transform: translateX(-50%);
   background: #fff;
-  width: 860px;
-  max-width: 95vw;
-  padding: 20px 24px;
-  box-shadow: 0 6px 24px rgb(0 0 0 / 22%);
-  border-radius: 0 0 10px 10px;
+  width: 760px;
+  max-width: 94vw;
+  max-height: 72vh;
+  overflow-y: auto;
+  padding: 12px 16px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
+  border-radius: 0 0 8px 8px;
   z-index: 1000;
-  border-top: 3px solid #0d47a1;
+  border-top: 2.5px solid #0d47a1;
 }
 
 .gl-mega-menu-header {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 14px;
-  padding-bottom: 12px;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
   border-bottom: 1px solid #e5e7eb;
 
   span {
-    font-size: 18px;
+    font-size: 14px;
     font-weight: 700;
     color: #0d47a1;
-    letter-spacing: 0.02em;
+    letter-spacing: 0.01em;
   }
 }
 
 .gl-mega-menu-header-icon {
-  font-size: 18px;
+  font-size: 14px;
   color: #0d47a1;
 }
 
 .gl-search {
   width: 100%;
-  padding: 10px 14px;
-  margin-bottom: 16px;
+  padding: 6px 10px;
+  margin-bottom: 10px;
   border: 1px solid #d0d5dd;
-  border-radius: 6px;
-  font-size: 14px;
+  border-radius: 5px;
+  font-size: 12px;
   box-sizing: border-box;
   background: #f9fafb;
 
@@ -828,36 +902,37 @@ $gray-700: #334155;
     outline: none;
     border-color: #0d47a1;
     background: #fff;
-    box-shadow: 0 0 0 3px rgb(13 71 161 / 10%);
+    box-shadow: 0 0 0 2px rgb(13 71 161 / 10%);
   }
 }
 
 .gl-columns {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 24px;
+  gap: 10px 16px;
 }
 
 .gl-group-title {
   font-weight: 700;
-  font-size: 11px;
+  font-size: 10px;
   text-transform: uppercase;
-  letter-spacing: 0.8px;
+  letter-spacing: 0.6px;
   color: #0d47a1;
-  margin-bottom: 10px;
-  padding-bottom: 6px;
-  border-bottom: 2px solid #0d47a1;
+  margin-bottom: 5px;
+  padding-bottom: 3px;
+  border-bottom: 1.5px solid #0d47a1;
 }
 
 .gl-link {
   display: flex;
   align-items: center;
-  padding: 7px 6px;
+  padding: 3.5px 5px;
   text-decoration: none;
   color: #344054;
-  font-size: 13px;
+  font-size: 11.5px;
+  line-height: 1.3;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 4px;
   transition:
     background 0.15s,
     color 0.15s;
@@ -873,23 +948,21 @@ $gray-700: #334155;
 }
 
 .gl-icon {
-  width: 18px;
-  margin-right: 8px;
+  width: 14px;
+  margin-right: 5px;
   color: #667085;
-  font-size: 13px;
+  font-size: 11px;
+  flex-shrink: 0;
 
   .gl-link:hover & {
     color: #0d47a1;
   }
 }
 
-// Marks a menu link as actually wired to a working screen/dialog (vs a still-unwired
-// placeholder) — a small green dot at the end of the row, so a reviewer can tell at a glance
-// which items in a mega-menu are functional without having to click every one of them.
 .gl-link--live::after {
   content: '';
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
   margin-left: auto;
   flex-shrink: 0;
   border-radius: 50%;
@@ -899,9 +972,9 @@ $gray-700: #334155;
 
 /* RBI Mega Menu */
 .rbi-mega-menu {
-  width: 1100px;
-  max-width: 97vw;
-  max-height: 80vh;
+  width: 880px;
+  max-width: 94vw;
+  max-height: 72vh;
   overflow-y: auto;
   border-top-color: #b71c1c;
 }
@@ -909,7 +982,7 @@ $gray-700: #334155;
 .rbi-columns {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
+  gap: 10px 16px;
 }
 
 @keyframes move {

src/app/core/shell/toolbar/toolbar.component.html

@@ -522,7 +522,7 @@
 </mat-menu>
 
 <!-- Application User Help Menu -->
-<mat-menu #applicationMenu="matMenu" [overlapTrigger]="false">
+<mat-menu #applicationMenu="matMenu" [overlapTrigger]="false" class="t-user-menu" xPosition="before">
   <button mat-menu-item (click)="help()" tabindex="0">
     <mat-icon matListIcon>
       <fa-icon icon="question-circle" size="sm"></fa-icon>

src/app/core/shell/toolbar/toolbar.component.scss

@@ -390,6 +390,103 @@ $icon-hover-border: rgb(255 255 255 / 28%);
     max-height: 80vh;
     overflow-y: auto;
   }
+
+  // Compact card per AI module
+  .ai-card.mat-mdc-menu-item {
+    display: flex !important;
+    align-items: flex-start !important;
+    gap: 10px !important;
+    padding: 10px !important;
+    min-height: 52px !important;
+    height: auto !important;
+    border-radius: 9px !important;
+    font-family: inherit !important;
+    line-height: 1.3 !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    transition: background 0.16s ease !important;
+
+    .mat-mdc-menu-item-text,
+    .mdc-list-item__primary-text,
+    .mdc-list-item__content {
+      display: flex !important;
+      align-items: flex-start !important;
+      gap: 10px !important;
+      width: 100% !important;
+      white-space: normal !important;
+      overflow: visible !important;
+    }
+
+    .ai-card-ic {
+      width: 32px !important;
+      height: 32px !important;
+      min-width: 32px !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      border-radius: 8px !important;
+      font-size: 13px !important;
+      flex-shrink: 0 !important;
+      background: var(--c-bg) !important;
+      color: var(--c-color) !important;
+      margin: 0 !important;
+      opacity: 1 !important;
+      transition:
+        background 0.16s ease,
+        color 0.16s ease,
+        transform 0.16s ease !important;
+
+      fa-icon {
+        font-size: 13px !important;
+        width: auto !important;
+        min-width: auto !important;
+        margin: 0 !important;
+        color: inherit !important;
+        opacity: 1 !important;
+      }
+    }
+
+    .ai-card-body {
+      display: flex !important;
+      flex-direction: column !important;
+      flex: 1 !important;
+      min-width: 0 !important;
+      text-align: left !important;
+      white-space: normal !important;
+    }
+
+    .ai-card-t {
+      font-size: 12.5px !important;
+      font-weight: 600 !important;
+      color: #0f172a !important;
+      line-height: 1.25 !important;
+      white-space: normal !important;
+      display: block !important;
+    }
+
+    .ai-card-d {
+      font-size: 10.5px !important;
+      color: #64748b !important;
+      margin-top: 3px !important;
+      line-height: 1.35 !important;
+      white-space: normal !important;
+      display: block !important;
+    }
+
+    &:hover {
+      background: var(--c-bg) !important;
+
+      .ai-card-ic {
+        background: var(--c-hover) !important;
+        color: #fff !important;
+        transform: scale(1.06) !important;
+      }
+
+      .ai-card-t {
+        color: var(--c-color) !important;
+      }
+    }
+  }
 }
 
 .ai-menu-header {
@@ -488,70 +585,101 @@ $icon-hover-border: rgb(255 255 255 / 28%);
   font-size: 11px;
 }
 
-// Compact card per AI module
-.ai-card.mat-mdc-menu-item {
-  display: flex !important;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 9px 10px;
-  min-height: 0;
-  height: auto;
-  border-radius: 9px;
-  font-family: inherit;
-  line-height: 1.3;
-  white-space: normal;
-  transition: background 0.16s ease;
+// ===== User Account Dropdown Menu =====
+::ng-deep .t-user-menu.mat-mdc-menu-panel {
+  min-width: 190px !important;
+  border-radius: 10px !important;
+  box-shadow:
+    0 10px 25px rgb(15 23 42 / 12%),
+    0 2px 6px rgb(15 23 42 / 6%) !important;
+  border: 1px solid #e2e8f0 !important;
+  padding: 6px 0 !important;
+  background: #fff !important;
 
-  .ai-card-ic {
-    width: 32px;
-    height: 32px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    font-size: 13px;
-    flex-shrink: 0;
-    background: var(--c-bg);
-    color: var(--c-color);
+  .mat-mdc-menu-content {
+    padding: 4px 0 !important;
+  }
+
+  .mat-mdc-menu-item {
+    height: 38px !important;
+    min-height: 38px !important;
+    line-height: 38px !important;
+    padding: 0 14px !important;
+    display: flex !important;
+    align-items: center !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    color: #334155 !important;
     transition:
-      background 0.16s ease,
-      color 0.16s ease,
-      transform 0.16s ease;
-  }
+      background-color 0.15s ease,
+      color 0.15s ease !important;
 
-  .ai-card-body {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-    text-align: left;
-  }
-
-  .ai-card-t {
-    font-size: 12.5px;
-    font-weight: 600;
-    color: #0f172a;
-    line-height: 1.25;
-  }
-
-  .ai-card-d {
-    font-size: 10.5px;
-    color: #64748b;
-    margin-top: 2px;
-    line-height: 1.35;
-  }
-
-  &:hover {
-    background: var(--c-bg);
-
-    .ai-card-ic {
-      background: var(--c-hover);
-      color: #fff;
-      transform: scale(1.06);
+    .mat-mdc-menu-item-text {
+      display: inline-flex !important;
+      align-items: center !important;
+      width: 100% !important;
+      font-size: 13px !important;
+      color: inherit !important;
+      font-weight: 500 !important;
     }
 
-    .ai-card-t {
-      color: var(--c-color);
+    mat-icon {
+      margin-right: 10px !important;
+      width: 18px !important;
+      height: 18px !important;
+      min-width: 18px !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      color: #64748b !important;
+      font-size: 14px !important;
+      flex-shrink: 0 !important;
+
+      fa-icon {
+        font-size: 14px !important;
+        width: 14px !important;
+        min-width: 14px !important;
+        text-align: center !important;
+        margin-right: 0 !important;
+        color: inherit !important;
+        opacity: 1 !important;
+      }
+    }
+
+    span {
+      font-size: 13px !important;
+      color: inherit !important;
+      font-weight: 500 !important;
+      white-space: nowrap !important;
+    }
+
+    &:hover {
+      background-color: #f1f5f9 !important;
+      color: #0d47a1 !important;
+
+      mat-icon {
+        color: #0d47a1 !important;
+      }
+    }
+
+    &#logout {
+      color: #dc2626 !important;
+      border-top: 1px solid #f1f5f9 !important;
+      margin-top: 4px !important;
+      padding-top: 2px !important;
+
+      mat-icon {
+        color: #dc2626 !important;
+      }
+
+      &:hover {
+        background-color: #fef2f2 !important;
+        color: #b91c1c !important;
+
+        mat-icon {
+          color: #b91c1c !important;
+        }
+      }
     }
   }
 }

src/app/products/products.component.scss

@@ -15,43 +15,43 @@ $gray-900: #0f172a;
 
 // ── Container ──
 .pd-container {
-  max-width: 1100px;
+  max-width: 1280px;
   margin: 0 auto;
-  padding: 24px 20px;
+  padding: 12px 16px;
 }
 
 // ── Page Header ──
 .pd-header {
   display: flex;
   align-items: center;
-  gap: 16px;
-  margin-bottom: 28px;
+  gap: 10px;
+  margin-bottom: 14px;
 
   &__icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 10px;
+    width: 34px;
+    height: 34px;
+    border-radius: 7px;
     background: linear-gradient(135deg, #0d3d78, #1a5276);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
-    font-size: 18px;
+    font-size: 14px;
     flex-shrink: 0;
   }
 
   &__title {
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 700;
     color: $gray-900;
     margin: 0;
-    letter-spacing: -0.3px;
+    letter-spacing: -0.2px;
   }
 
   &__sub {
-    font-size: 13px;
+    font-size: 11.5px;
     color: $gray-500;
-    margin: 2px 0 0;
+    margin: 1px 0 0;
   }
 }
 
@@ -59,7 +59,7 @@ $gray-900: #0f172a;
 .pd-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
+  gap: 8px;
 
   @media (width <= 768px) {
     grid-template-columns: 1fr;
@@ -70,11 +70,11 @@ $gray-900: #0f172a;
 .pd-card {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 14px 16px;
+  gap: 10px;
+  padding: 8px 12px;
   background: #fff;
   border: 1px solid $border;
-  border-radius: 10px;
+  border-radius: 7px;
   text-decoration: none;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -82,7 +82,7 @@ $gray-900: #0f172a;
   &:hover {
     border-color: #cbd5e1;
     background: $gray-50;
-    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
+    box-shadow: 0 1px 6px rgb(0 0 0 / 4%);
 
     .pd-card__arrow {
       color: $gray-700;
@@ -91,13 +91,13 @@ $gray-900: #0f172a;
   }
 
   &__icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 9px;
+    width: 30px;
+    height: 30px;
+    border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 15px;
+    font-size: 12.5px;
     flex-shrink: 0;
 
     &--blue {
@@ -167,25 +167,25 @@ $gray-900: #0f172a;
   }
 
   &__title {
-    font-size: 13.5px;
+    font-size: 12px;
     font-weight: 600;
     color: $gray-900;
     margin: 0;
-    line-height: 1.3;
+    line-height: 1.25;
   }
 
   &__desc {
-    font-size: 11.5px;
+    font-size: 10.5px;
     color: $gray-400;
-    margin: 3px 0 0;
-    line-height: 1.35;
+    margin: 1px 0 0;
+    line-height: 1.3;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   &__arrow {
-    font-size: 11px;
+    font-size: 10px;
     color: #cbd5e1;
     flex-shrink: 0;
     transition: all 0.15s ease;

src/app/shared/loading-screen/loading-screen.component.html

@@ -0,0 +1,80 @@
+<!--
+  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/.
+-->
+
+@if (active) {
+  @if (currentMode === 'overlay') {
+    <!-- Mifos Mobile Transaction / Action Progress Overlay -->
+    <div class="cbs-loading-backdrop" (click)="preventDismiss($event)">
+      <div class="cbs-loading-dialog" role="dialog" aria-modal="true" [attr.aria-label]="title || 'Loading'">
+        <div class="cbs-lottie-container" #lottieContainer>
+          <!-- Vector Fallback if Lottie is loading -->
+          @if (!lottieLoaded) {
+            <div class="cbs-vector-spinner">
+              <div class="spinner-ring ring-outer"></div>
+              <div class="spinner-ring ring-mid"></div>
+              <div class="spinner-ring ring-inner"></div>
+            </div>
+          }
+        </div>
+
+        <div class="cbs-loading-dialog__content">
+          <h3 class="cbs-loading-dialog__title">{{ title || 'CBS Nexora' }}</h3>
+          <p class="cbs-loading-dialog__message">{{ message || 'Please wait...' }}</p>
+        </div>
+
+        <div class="cbs-loading-pulse-bar">
+          <div class="cbs-pulse-bar__indicator"></div>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (currentMode === 'fullscreen') {
+    <!-- Full-Screen App Boot / Splash Screen -->
+    <div class="cbs-fullscreen-loader">
+      <div class="cbs-fullscreen-loader__brand">
+        <img src="assets/images/cbsnexora-logo.png" alt="CBS Nexora" class="cbs-fullscreen-loader__logo-img" />
+        <span class="cbs-brand-sub">Core Banking System</span>
+      </div>
+
+      <div class="cbs-lottie-container cbs-lottie-container--large" #lottieContainer>
+        @if (!lottieLoaded) {
+          <div class="cbs-vector-spinner cbs-vector-spinner--large">
+            <div class="spinner-ring ring-outer"></div>
+            <div class="spinner-ring ring-mid"></div>
+            <div class="spinner-ring ring-inner"></div>
+          </div>
+        }
+      </div>
+
+      <div class="cbs-progress-track">
+        <div class="cbs-progress-fill"></div>
+      </div>
+
+      <p class="cbs-fullscreen-loader__status">{{ message || 'Connecting to Core Banking Engine...' }}</p>
+    </div>
+  }
+
+  @if (currentMode === 'inline') {
+    <!-- Inline Component Loader -->
+    <div class="cbs-inline-loader">
+      <div class="cbs-lottie-container cbs-lottie-container--compact" #lottieContainer>
+        @if (!lottieLoaded) {
+          <div class="cbs-vector-spinner cbs-vector-spinner--compact">
+            <div class="spinner-ring ring-outer"></div>
+            <div class="spinner-ring ring-mid"></div>
+            <div class="spinner-ring ring-inner"></div>
+          </div>
+        }
+      </div>
+      @if (message) {
+        <p class="cbs-inline-loader__message">{{ message }}</p>
+      }
+    </div>
+  }
+}

src/app/shared/loading-screen/loading-screen.component.scss

@@ -0,0 +1,349 @@
+/**
+ * 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/.
+ */
+
+:host {
+  display: block;
+}
+
+/* ==========================================================================
+   Overlay Mode (MifosProgressIndicatorOverlay / MifosLoadingDialog)
+   ========================================================================== */
+.cbs-loading-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(9 13 22 / 72%);
+  backdrop-filter: blur(8px);
+  animation: backdrop-fade-in 0.25s ease-out forwards;
+}
+
+.cbs-loading-dialog {
+  position: relative;
+  width: 90%;
+  max-width: 340px;
+  padding: 28px 24px;
+  background: #111827;
+  color: #f8fafc;
+  border-radius: 20px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  box-shadow:
+    0 25px 60px -15px rgb(0 0 0 / 65%),
+    0 0 35px rgb(37 99 235 / 18%);
+  text-align: center;
+  overflow: hidden;
+  animation: dialog-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+:host-context([data-theme='light']) .cbs-loading-dialog,
+:host-context(.light-theme) .cbs-loading-dialog {
+  background: #fff;
+  color: #0f172a;
+  border-color: rgb(0 0 0 / 8%);
+  box-shadow:
+    0 25px 50px -12px rgb(0 0 0 / 25%),
+    0 0 25px rgb(37 99 235 / 12%);
+}
+
+.cbs-loading-dialog__content {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+.cbs-loading-dialog__title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 6px;
+}
+
+.cbs-loading-dialog__message {
+  font-size: 0.82rem;
+  color: #94a3b8;
+  line-height: 1.45;
+  margin: 0;
+}
+
+:host-context([data-theme='light']) .cbs-loading-dialog__message,
+:host-context(.light-theme) .cbs-loading-dialog__message {
+  color: #64748b;
+}
+
+/* Pulse bar at dialog bottom */
+.cbs-loading-pulse-bar {
+  width: 100%;
+  height: 3px;
+  background: rgb(255 255 255 / 8%);
+  border-radius: 99px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 6px;
+}
+
+.cbs-pulse-bar__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 40%;
+  background: linear-gradient(90deg, #2563eb, #38bdf8);
+  border-radius: 99px;
+  animation: pulse-bar-slide 1.4s infinite ease-in-out;
+}
+
+/* ==========================================================================
+   Full-Screen Mode (App Boot / Splash)
+   ========================================================================== */
+.cbs-fullscreen-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at center, #0f172a 0%, #090d16 100%);
+  color: #f8fafc;
+  padding: 24px;
+  text-align: center;
+}
+
+:host-context([data-theme='light']) .cbs-fullscreen-loader,
+:host-context(.light-theme) .cbs-fullscreen-loader {
+  background: radial-gradient(circle at center, #fff 0%, #f1f5f9 100%);
+  color: #0f172a;
+}
+
+.cbs-fullscreen-loader__brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.cbs-fullscreen-loader__logo-img {
+  height: 52px;
+  width: auto;
+  max-width: 260px;
+  object-fit: contain;
+  filter: drop-shadow(0 6px 18px rgb(0 0 0 / 45%));
+}
+
+.cbs-brand-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10px 24px rgb(14 165 233 / 35%);
+  margin-bottom: 6px;
+}
+
+.cbs-brand-name {
+  font-size: 1.5rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.cbs-brand-sub {
+  font-size: 0.8rem;
+  color: #94a3b8;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cbs-progress-track {
+  width: 240px;
+  height: 5px;
+  background: rgb(255 255 255 / 10%);
+  border-radius: 99px;
+  overflow: hidden;
+  margin: 18px 0 12px;
+  position: relative;
+}
+
+.cbs-progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 45%;
+  background: linear-gradient(90deg, #2563eb, #38bdf8);
+  border-radius: 99px;
+  box-shadow: 0 0 12px rgb(56 189 248 / 50%);
+  animation: pulse-bar-slide 1.5s infinite ease-in-out;
+}
+
+.cbs-fullscreen-loader__status {
+  font-size: 0.82rem;
+  color: #94a3b8;
+  font-family: inherit;
+  margin: 0;
+}
+
+/* ==========================================================================
+   Inline Mode
+   ========================================================================== */
+.cbs-inline-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+.cbs-inline-loader__message {
+  font-size: 0.82rem;
+  color: #94a3b8;
+  margin-top: 10px;
+}
+
+/* ==========================================================================
+   Lottie & Vector Spinner Dimensions
+   ========================================================================== */
+.cbs-lottie-container {
+  width: 110px;
+  height: 110px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cbs-lottie-container--large {
+  width: 140px;
+  height: 140px;
+}
+
+.cbs-lottie-container--compact {
+  width: 64px;
+  height: 64px;
+}
+
+/* Vector Spinner Fallback (CSS Multi-Ring Loader) */
+.cbs-vector-spinner {
+  width: 72px;
+  height: 72px;
+  position: relative;
+}
+
+.cbs-vector-spinner--large {
+  width: 96px;
+  height: 96px;
+}
+
+.cbs-vector-spinner--compact {
+  width: 44px;
+  height: 44px;
+}
+
+.spinner-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 3px solid transparent;
+}
+
+.ring-outer {
+  border-top-color: #2563eb;
+  border-right-color: #2563eb;
+  animation: spin-outer 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.ring-mid {
+  inset: 6px;
+  border-bottom-color: #0ea5e9;
+  border-left-color: #0ea5e9;
+  animation: spin-mid 1.6s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
+}
+
+.ring-inner {
+  inset: 13px;
+  border-top-color: #10b981;
+  animation: spin-inner 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+/* ==========================================================================
+   Keyframe Animations
+   ========================================================================== */
+@keyframes backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse-bar-slide {
+  0% {
+    left: -40%;
+    width: 30%;
+  }
+
+  50% {
+    left: 35%;
+    width: 50%;
+  }
+
+  100% {
+    left: 100%;
+    width: 30%;
+  }
+}
+
+@keyframes spin-outer {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-mid {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-inner {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

src/app/shared/loading-screen/loading-screen.component.ts

@@ -0,0 +1,168 @@
+/**
+ * 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,
+  OnDestroy,
+  Input,
+  ElementRef,
+  ViewChild,
+  AfterViewInit,
+  inject,
+  ChangeDetectorRef
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { LoadingScreenService, LoadingConfig } from './loading-screen.service';
+
+declare const lottie: any;
+
+@Component({
+  selector: 'mifosx-loading-screen',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './loading-screen.component.html',
+  styleUrls: ['./loading-screen.component.scss']
+})
+export class LoadingScreenComponent implements OnInit, AfterViewInit, OnDestroy {
+  private readonly loadingService = inject(LoadingScreenService);
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  @Input() mode: 'overlay' | 'inline' | 'fullscreen' = 'overlay';
+  @Input() title: string = 'CBS Nexora';
+  @Input() message: string = 'Processing transaction...';
+  @Input() active: boolean = false;
+  @Input() isGlobalOverlay: boolean = true;
+
+  @ViewChild('lottieContainer') lottieContainerRef?: ElementRef<HTMLDivElement>;
+
+  currentMode: 'overlay' | 'inline' | 'fullscreen' = 'overlay';
+  lottieLoaded: boolean = false;
+  private animInstance: any = null;
+  private subscription?: Subscription;
+
+  ngOnInit(): void {
+    this.currentMode = this.mode;
+
+    if (this.isGlobalOverlay) {
+      this.subscription = new Subscription();
+      this.subscription.add(
+        this.loadingService.isVisible$.subscribe((visible) => {
+          this.active = visible;
+          this.cdr.markForCheck();
+          if (visible) {
+            setTimeout(() => this.initLottie(), 50);
+          } else {
+            this.destroyLottie();
+          }
+        })
+      );
+
+      this.subscription.add(
+        this.loadingService.config$.subscribe((cfg: LoadingConfig) => {
+          if (cfg.title !== undefined) this.title = cfg.title;
+          if (cfg.message !== undefined) this.message = cfg.message;
+          if (cfg.mode !== undefined) this.currentMode = cfg.mode;
+          this.cdr.markForCheck();
+        })
+      );
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.active) {
+      this.initLottie();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+    this.destroyLottie();
+  }
+
+  preventDismiss(event: MouseEvent): void {
+    event.stopPropagation();
+  }
+
+  private initLottie(): void {
+    if (!this.lottieContainerRef?.nativeElement) return;
+    this.destroyLottie();
+
+    const container = this.lottieContainerRef.nativeElement;
+
+    // Check if lottie-web global is available
+    if (typeof lottie !== 'undefined') {
+      try {
+        this.animInstance = lottie.loadAnimation({
+          container,
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          path: 'assets/animations/loading_animation.json'
+        });
+        this.lottieLoaded = true;
+        this.cdr.markForCheck();
+        return;
+      } catch (err) {
+        console.warn('Could not load Lottie animation, using vector fallback', err);
+      }
+    }
+
+    // Try dynamic script load of local asset if not loaded yet
+    this.loadLottieScript()
+      .then(() => {
+        if (typeof lottie !== 'undefined' && this.lottieContainerRef?.nativeElement) {
+          this.animInstance = lottie.loadAnimation({
+            container: this.lottieContainerRef.nativeElement,
+            renderer: 'svg',
+            loop: true,
+            autoplay: true,
+            path: 'assets/animations/loading_animation.json'
+          });
+          this.lottieLoaded = true;
+          this.cdr.markForCheck();
+        }
+      })
+      .catch(() => {
+        this.lottieLoaded = false;
+        this.cdr.markForCheck();
+      });
+  }
+
+  private loadLottieScript(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (typeof lottie !== 'undefined') {
+        resolve();
+        return;
+      }
+
+      const existingScript = document.getElementById('cbs-lottie-script');
+      if (existingScript) {
+        existingScript.addEventListener('load', () => resolve());
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.id = 'cbs-lottie-script';
+      script.src = 'assets/js/lottie.min.js';
+      script.onload = () => resolve();
+      script.onerror = () => reject();
+      document.head.appendChild(script);
+    });
+  }
+
+  private destroyLottie(): void {
+    if (this.animInstance) {
+      try {
+        this.animInstance.destroy();
+      } catch (_) {}
+      this.animInstance = null;
+    }
+  }
+}

src/app/shared/loading-screen/loading-screen.service.ts

@@ -0,0 +1,61 @@
+/**
+ * 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 { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export interface LoadingConfig {
+  title?: string;
+  message?: string;
+  mode?: 'overlay' | 'inline' | 'fullscreen';
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoadingScreenService {
+  private readonly visibleSubject = new BehaviorSubject<boolean>(false);
+  private readonly configSubject = new BehaviorSubject<LoadingConfig>({
+    title: 'CBS Nexora',
+    message: 'Processing transaction...',
+    mode: 'overlay'
+  });
+
+  readonly isVisible$: Observable<boolean> = this.visibleSubject.asObservable();
+  readonly config$: Observable<LoadingConfig> = this.configSubject.asObservable();
+
+  /**
+   * Show the loading screen/overlay
+   * @param message Optional message to display (e.g. "Processing Transfer...")
+   * @param title Optional title to display (defaults to "CBS Nexora")
+   * @param mode Optional display mode ('overlay' | 'fullscreen')
+   */
+  show(message?: string, title?: string, mode: 'overlay' | 'fullscreen' = 'overlay'): void {
+    this.configSubject.next({
+      title: title || 'CBS Nexora',
+      message: message || 'Please wait...',
+      mode
+    });
+    this.visibleSubject.next(true);
+  }
+
+  /**
+   * Hide the loading screen/overlay
+   */
+  hide(): void {
+    this.visibleSubject.next(false);
+  }
+
+  /**
+   * Update message while loading screen is active
+   */
+  setMessage(message: string): void {
+    const current = this.configSubject.getValue();
+    this.configSubject.next({ ...current, message });
+  }
+}

src/app/shared/shared.module.ts

@@ -30,6 +30,7 @@ import { SearchToolComponent } from './search-tool/search-tool.component';
 import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
 import { ServerSelectorComponent } from './server-selector/server-selector.component';
 import { TenantSelectorComponent } from './tenant-selector/tenant-selector.component';
+import { LoadingScreenComponent } from './loading-screen/loading-screen.component';
 
 /** Custom Modules */
 import { IconsModule } from './icons.module';
@@ -116,9 +117,11 @@ import { DatetimePickerStubComponent } from './datetime-picker-stub/datetime-pic
     DropdownComponent,
     InputAmountComponent,
     InputPasswordComponent,
+    LoadingScreenComponent,
     DatetimePickerStubComponent // temporarily added stub for datetime picker
   ],
   exports: [
+    LoadingScreenComponent,
     FileUploadComponent,
     FooterComponent,
     LanguageSelectorComponent,

src/app/web-app.component.html

@@ -7,3 +7,4 @@
 -->
 
 <router-outlet></router-outlet>
+<mifosx-loading-screen></mifosx-loading-screen>

src/app/web-app.component.ts

@@ -296,6 +296,11 @@ export class WebAppComponent implements OnInit, OnDestroy {
         });
       });
     }
+
+    // Dismiss initial application boot splash screen smoothly
+    if (typeof (window as any).hideAppSplash === 'function') {
+      (window as any).hideAppSplash();
+    }
   }
 
   ngOnDestroy() {

src/assets/styles/_loader.scss

@@ -6,53 +6,95 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+/* ==========================================================================
+   Modernized Loader Wrapper (Inspired by openMF/mifos-mobile)
+   Supports full-screen and embedded containers with smooth vector physics.
+   ========================================================================== */
 .loader-wrapper {
-  height: 100vh;
-  width: 100vw;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 280px;
+  height: 100%;
+  background: transparent;
 
+  /* Modern orbital rings that replace legacy rigid triangles smoothly */
   .triangle {
-    width: 0;
-    height: 0;
-    border-style: solid;
     position: absolute;
-    animation: rotate 0.8s infinite 0.2s;
+    border-radius: 50%;
+    border-style: solid;
+    box-sizing: border-box;
+    transition: all 0.3s ease;
   }
 
   .bottom {
-    border-width: 0 90px 90px;
-    border-color: transparent transparent #1fb050;
-    bottom: calc(50% - 100px);
-    left: calc(50% - 90px);
+    width: 72px;
+    height: 72px;
+    border-width: 3px;
+    border-color: #2563eb transparent transparent;
+    animation: cbs-spin-ring 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    box-shadow: 0 0 16px rgb(37 99 235 / 35%);
   }
 
   .top {
-    border-width: 90px 90px 0;
-    border-color: #b4d575 transparent transparent;
-    top: calc(50% - 100px);
-    left: calc(50% - 90px);
+    width: 54px;
+    height: 54px;
+    border-width: 3px;
+    border-color: transparent transparent #0ea5e9;
+    animation: cbs-spin-ring 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
+    box-shadow: 0 0 14px rgb(14 165 233 / 35%);
   }
 
   .left {
-    border-width: 90px 0 90px 90px;
-    border-color: transparent transparent transparent #1074b9;
-    top: calc(50% - 90px);
-    left: calc(50% - 100px);
+    width: 36px;
+    height: 36px;
+    border-width: 2.5px;
+    border-color: #10b981 transparent transparent;
+    animation: cbs-spin-ring 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    box-shadow: 0 0 10px rgb(16 185 129 / 35%);
   }
 
   .right {
-    border-width: 90px 90px 90px 0;
-    border-color: transparent #1daeec transparent transparent;
-    top: calc(50% - 90px);
-    right: calc(50% - 100px);
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+    border-color: transparent #38bdf8 transparent transparent;
+    animation: cbs-spin-ring 0.7s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
   }
 
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
+  /* Optional central glowing core */
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #38bdf8;
+    box-shadow: 0 0 12px #38bdf8;
+    animation: cbs-pulse-core 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes cbs-spin-ring {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes cbs-pulse-core {
+  0%,
+  100% {
+    transform: scale(0.85);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: scale(1.3);
+    opacity: 1;
   }
 }

src/index.html

@@ -11,7 +11,7 @@
 <html lang="en" class="h-full bg-gray-100">
   <head>
     <meta charset="utf-8" />
-    <title>{{'APP_NAME' | translate}}</title>
+    <title>CBS Nexora</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -111,13 +111,291 @@
       });
     </script>
 
-    <mifosx-web-app>
-      <div class="loader-wrapper">
-        <div class="bottom triangle"></div>
-        <div class="top triangle"></div>
-        <div class="left triangle"></div>
-        <div class="right triangle"></div>
+    <div id="cbs-app-splash-screen" class="cbs-init-screen">
+      <style>
+        .cbs-init-screen {
+          position: fixed;
+          inset: 0;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background: radial-gradient(circle at center, #0f172a 0%, #090d16 100%);
+          color: #f8fafc;
+          font-family:
+            'Plus Jakarta Sans',
+            -apple-system,
+            BlinkMacSystemFont,
+            'Segoe UI',
+            Roboto,
+            sans-serif;
+          z-index: 999999;
+          overflow: hidden;
+          transition:
+            opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .cbs-init-screen.cbs-splash-fade-out {
+          opacity: 0;
+          transform: scale(1.02);
+          pointer-events: none;
+        }
+        .cbs-init-brand {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 10px;
+          margin-bottom: 20px;
+          text-align: center;
+        }
+        .cbs-init-logo-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .cbs-init-logo-img {
+          height: 52px;
+          width: auto;
+          max-width: 260px;
+          object-fit: contain;
+          filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
+          transition: transform 0.3s ease;
+        }
+        .cbs-init-icon {
+          width: 56px;
+          height: 56px;
+          border-radius: 14px;
+          background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .cbs-init-title {
+          font-size: 1.5rem;
+          font-weight: 800;
+          letter-spacing: -0.02em;
+          margin: 0;
+        }
+        .cbs-init-sub {
+          font-size: 0.78rem;
+          color: #94a3b8;
+          font-weight: 500;
+          letter-spacing: 0.06em;
+          text-transform: uppercase;
+        }
+        .cbs-init-lottie-box {
+          width: 130px;
+          height: 130px;
+          margin: 8px auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.25));
+        }
+        .cbs-init-spinner {
+          width: 64px;
+          height: 64px;
+          position: relative;
+        }
+        .cbs-init-ring {
+          position: absolute;
+          inset: 0;
+          border-radius: 50%;
+          border: 3px solid transparent;
+        }
+        .cbs-init-ring-1 {
+          border-top-color: #2563eb;
+          border-right-color: #2563eb;
+          animation: cbsInitSpin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        }
+        .cbs-init-ring-2 {
+          inset: 6px;
+          border-bottom-color: #0ea5e9;
+          border-left-color: #0ea5e9;
+          animation: cbsInitSpin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
+        }
+        .cbs-init-ring-3 {
+          inset: 12px;
+          border-top-color: #10b981;
+          animation: cbsInitSpin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        }
+        .cbs-init-track {
+          width: 260px;
+          height: 5px;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 99px;
+          overflow: hidden;
+          margin: 18px 0 12px;
+          position: relative;
+        }
+        .cbs-init-fill {
+          height: 100%;
+          width: 0%;
+          background: linear-gradient(90deg, #2563eb, #38bdf8);
+          border-radius: 99px;
+          box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
+          transition: width 0.3s ease;
+        }
+        .cbs-init-status {
+          font-size: 0.82rem;
+          color: #94a3b8;
+          font-family: inherit;
+          margin: 0;
+          height: 20px;
+        }
+        @keyframes cbsInitSpin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      </style>
+      <div class="cbs-init-brand">
+        <div class="cbs-init-logo-wrap">
+          <img
+            src="assets/images/cbsnexora-logo.png"
+            alt="CBS Nexora"
+            class="cbs-init-logo-img"
+            onerror="
+              this.style.display = 'none';
+              document.getElementById('cbs-init-fallback-brand').style.display = 'flex';
+            "
+          />
+          <div id="cbs-init-fallback-brand" style="display: none; align-items: center; gap: 8px">
+            <div class="cbs-init-icon">
+              <svg width="32" height="32" viewBox="0 0 32 32">
+                <rect x="2" y="2" width="13" height="13" rx="2.5" fill="#ffffff" />
+                <rect x="17" y="2" width="13" height="13" rx="2.5" fill="#29abe2" />
+                <rect x="2" y="17" width="13" height="13" rx="2.5" fill="#00b388" />
+                <rect x="17" y="17" width="13" height="13" rx="2.5" fill="#6b7fa3" />
+              </svg>
+            </div>
+            <h2 class="cbs-init-title" style="margin: 0; font-size: 1.4rem">CBS Nexora</h2>
+          </div>
+        </div>
+        <span class="cbs-init-sub">Next-Generation Core Banking</span>
       </div>
-    </mifosx-web-app>
+
+      <div id="cbs-init-lottie-target" class="cbs-init-lottie-box">
+        <div class="cbs-init-spinner">
+          <div class="cbs-init-ring cbs-init-ring-1"></div>
+          <div class="cbs-init-ring cbs-init-ring-2"></div>
+          <div class="cbs-init-ring cbs-init-ring-3"></div>
+        </div>
+      </div>
+
+      <div class="cbs-init-track">
+        <div class="cbs-init-fill" id="cbs-init-progress-bar"></div>
+      </div>
+
+      <p class="cbs-init-status" id="cbs-init-status-text">Connecting to Secure Banking Gateway...</p>
+    </div>
+
+    <script>
+      (function () {
+        var splash = document.getElementById('cbs-app-splash-screen');
+        var bar = document.getElementById('cbs-init-progress-bar');
+        var status = document.getElementById('cbs-init-status-text');
+        var progress = 0;
+        var minTimePassed = false;
+        var angularReady = false;
+        var dismissed = false;
+
+        // Load Lottie Vector Animation
+        var script = document.createElement('script');
+        script.src = 'assets/js/lottie.min.js';
+        script.onload = function () {
+          if (typeof lottie !== 'undefined') {
+            var target = document.getElementById('cbs-init-lottie-target');
+            if (target) {
+              target.innerHTML = '';
+              lottie.loadAnimation({
+                container: target,
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                path: 'assets/animations/loading_animation.json'
+              });
+            }
+          }
+        };
+        document.head.appendChild(script);
+
+        // Progress simulation stages (Guaranteed ~2 seconds duration on refresh)
+        var interval = setInterval(function () {
+          if (progress < 90) {
+            progress += 5;
+          } else if (angularReady && progress < 100) {
+            progress += 5;
+          }
+
+          if (bar) bar.style.width = Math.min(progress, 100) + '%';
+
+          if (status) {
+            if (progress >= 85) {
+              status.innerText = 'Launching CBS Nexora Dashboard...';
+            } else if (progress >= 60) {
+              status.innerText = 'Synchronizing core banking ledger schema...';
+            } else if (progress >= 30) {
+              status.innerText = 'Authenticating token & cryptographic keys...';
+            }
+          }
+
+          if (progress >= 100 && angularReady && minTimePassed) {
+            clearInterval(interval);
+            dismissSplash();
+          }
+        }, 90);
+
+        // Enforce minimum hold time (2000ms = 2 seconds) so refresh always shows the animation
+        setTimeout(function () {
+          minTimePassed = true;
+          if (angularReady) {
+            progress = 100;
+            if (bar) bar.style.width = '100%';
+            dismissSplash();
+          }
+        }, 2000);
+
+        function dismissSplash() {
+          if (dismissed) return;
+          dismissed = true;
+          clearInterval(interval);
+          if (bar) bar.style.width = '100%';
+          if (status) status.innerText = 'Ready! System loaded successfully.';
+          setTimeout(function () {
+            if (splash) {
+              splash.classList.add('cbs-splash-fade-out');
+              setTimeout(function () {
+                if (splash && splash.parentNode) {
+                  splash.parentNode.removeChild(splash);
+                }
+              }, 600);
+            }
+          }, 250);
+        }
+
+        // Global hook for Angular to notify when ready
+        window.hideAppSplash = function () {
+          angularReady = true;
+          if (minTimePassed) {
+            dismissSplash();
+          }
+        };
+
+        // Safety fallback (Max 7s in case of backend network failure)
+        setTimeout(function () {
+          angularReady = true;
+          minTimePassed = true;
+          dismissSplash();
+        }, 7000);
+      })();
+    </script>
+
+    <mifosx-web-app></mifosx-web-app>
   </body>
 </html>

src/main.scss

@@ -81,66 +81,332 @@
 
 // ===== Sub-menu Mega Panels (rendered in CDK overlay) =====
 .deposits-mega-panel,
-.hrm-mega-panel {
-  max-width: 700px !important;
+.hrm-mega-panel,
+.cashier-mega-panel,
+.clerk-mega-panel,
+.clearing-mega-panel,
+.npa-mega-panel,
+.advances-mega-panel,
+.admin-mega-panel {
+  min-width: 680px !important;
+  max-width: 740px !important;
+}
+
+.branch-ops-mega-panel,
+.insurance-mega-panel,
+.digital-mega-panel,
+.ckyc-mega-panel {
+  min-width: 440px !important;
+  max-width: 480px !important;
+  overflow-x: hidden !important;
 }
 
 .share-mega-panel,
 .others-mega-panel {
-  max-width: 850px !important;
+  min-width: 780px !important;
+  max-width: 840px !important;
 }
 
-.share-grid,
-.others-grid {
-  grid-template-columns: repeat(4, 1fr) !important;
-}
-
-.others-grid,
-.npa-grid {
-  grid-template-columns: repeat(3, 1fr) !important;
-}
-
-.npa-mega-panel,
-.advances-mega-panel {
+.reports-mega-panel {
+  min-width: 740px !important;
   max-width: 800px !important;
+  border-top: 2.5px solid #0369a1 !important;
 }
 
-.advances-grid {
-  grid-template-columns: repeat(3, 1fr) !important;
+.letter-mega-panel,
+.reconciliation-mega-panel {
+  min-width: 900px !important;
+  max-width: 960px !important;
+}
+
+/* ==========================================================================
+   Mega Menu Panel CDK Overlay Rules (Anchor naturally under triggers)
+   ========================================================================== */
+.cdk-overlay-pane:has(.mat-mdc-menu-panel) {
+  max-width: 96vw !important;
+}
+
+/* Individual Top Accent Border for Mega Panels */
+.deposits-mega-panel,
+.advances-mega-panel {
+  border-top: 2.5px solid #1074b9 !important;
+}
+
+.cashier-mega-panel {
+  border-top: 2.5px solid #0284c7 !important;
+}
+
+.clerk-mega-panel {
+  border-top: 2.5px solid #2563eb !important;
+}
+
+.branch-ops-mega-panel {
+  border-top: 2.5px solid #4f46e5 !important;
+}
+
+.clearing-mega-panel,
+.reconciliation-mega-panel {
+  border-top: 2.5px solid #0d9488 !important;
+}
+
+.hrm-mega-panel {
+  border-top: 2.5px solid #0284c7 !important;
+}
+
+.admin-mega-panel,
+.digital-mega-panel {
+  border-top: 2.5px solid #7c3aed !important;
+}
+
+.share-mega-panel {
+  border-top: 2.5px solid #d97706 !important;
+}
+
+.others-mega-panel {
+  border-top: 2.5px solid #0284c7 !important;
+}
+
+.npa-mega-panel {
+  border-top: 2.5px solid #dc2626 !important;
 }
 
 .letter-mega-panel {
-  max-width: 1100px !important;
+  border-top: 2.5px solid #15803d !important;
 }
 
-.letter-grid {
-  grid-template-columns: repeat(5, minmax(190px, 1fr)) !important;
-  min-width: 1040px;
+.insurance-mega-panel {
+  border-top: 2.5px solid #c2410c !important;
 }
 
-.reconciliation-mega-panel {
-  max-width: 1100px !important;
+.ckyc-mega-panel {
+  border-top: 2.5px solid #be185d !important;
 }
 
+/* Universal Mega Panel Grid styling inside Material Menu Overlays */
+.deposit-menu-grid {
+  display: grid !important;
+  gap: 4px 12px !important;
+  padding: 6px 10px !important;
+  box-sizing: border-box !important;
+  min-width: 0 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow-x: hidden !important;
+}
+
+/* Mega Panel Grids with exact column definitions */
+.deposit-menu-grid.cashier-grid,
+.deposit-menu-grid.clerk-grid,
+.deposit-menu-grid.clearing-grid,
+.deposit-menu-grid.advances-grid,
+.deposit-menu-grid.deposits-grid,
+.deposit-menu-grid.hrm-grid,
+.deposit-menu-grid.admin-grid,
+.deposit-menu-grid.npa-grid,
+.cashier-grid,
+.clerk-grid,
+.clearing-grid,
+.advances-grid,
+.deposits-grid,
+.hrm-grid,
+.admin-grid,
+.npa-grid {
+  grid-template-columns: repeat(3, minmax(210px, 1fr)) !important;
+}
+
+.deposit-menu-grid.reports-grid,
+.reports-grid {
+  grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
+}
+
+.deposit-menu-grid.branch-ops-grid,
+.deposit-menu-grid.insurance-grid,
+.deposit-menu-grid.digital-grid,
+.deposit-menu-grid.ckyc-grid,
+.branch-ops-grid,
+.insurance-grid,
+.digital-grid,
+.ckyc-grid {
+  grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
+}
+
+.deposit-menu-grid.share-grid,
+.deposit-menu-grid.others-grid,
+.share-grid,
+.others-grid {
+  grid-template-columns: repeat(4, minmax(185px, 1fr)) !important;
+}
+
+.deposit-menu-grid.letter-grid,
+.deposit-menu-grid.reconciliation-grid,
+.letter-grid,
 .reconciliation-grid {
-  grid-template-columns: repeat(5, minmax(190px, 1fr)) !important;
-  min-width: 1040px;
+  grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
 }
 
-/* Admin Mega Menu — 3-column rectangular panel (Setup · Catalog ·
-   Audit & Compliance). Reuses the deposit-mega-menu grid + group chrome
-   and retints the group-title accent to Admin purple. */
-.admin-mega-panel {
-  max-width: 760px !important;
-}
-
-.admin-grid {
-  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
-  min-width: 680px;
+.deposit-menu-group {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 1px !important;
+  min-width: 0 !important;
 
   .deposit-group-title {
-    color: #7c3aed !important;
-    border-bottom-color: #7c3aed !important;
+    font-weight: 700 !important;
+    font-size: 9.5px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.6px !important;
+    color: #1074b9 !important;
+    padding: 3px 6px !important;
+    margin-bottom: 2px !important;
+    border-bottom: 1.5px solid #1074b9 !important;
+    display: flex !important;
+    align-items: center !important;
+    line-height: 1.2 !important;
+    white-space: nowrap !important;
+  }
+}
+
+/* Specific Accent Colors for Mega Panel Group Titles */
+.cashier-grid .deposit-group-title {
+  color: #0284c7 !important;
+  border-bottom-color: #0284c7 !important;
+}
+
+.clerk-grid .deposit-group-title {
+  color: #2563eb !important;
+  border-bottom-color: #2563eb !important;
+}
+
+.clearing-grid .deposit-group-title {
+  color: #0d9488 !important;
+  border-bottom-color: #0d9488 !important;
+}
+
+.branch-ops-grid .deposit-group-title {
+  color: #4f46e5 !important;
+  border-bottom-color: #4f46e5 !important;
+}
+
+.reports-grid .deposit-group-title {
+  color: #0369a1 !important;
+  border-bottom-color: #0369a1 !important;
+}
+
+.insurance-grid .deposit-group-title {
+  color: #c2410c !important;
+  border-bottom-color: #c2410c !important;
+}
+
+.digital-grid .deposit-group-title {
+  color: #7c3aed !important;
+  border-bottom-color: #7c3aed !important;
+}
+
+.ckyc-grid .deposit-group-title {
+  color: #be185d !important;
+  border-bottom-color: #be185d !important;
+}
+
+.admin-grid .deposit-group-title {
+  color: #7c3aed !important;
+  border-bottom-color: #7c3aed !important;
+}
+
+.reconciliation-grid .deposit-group-title {
+  color: #0d9488 !important;
+  border-bottom-color: #0d9488 !important;
+}
+
+/* Compact, RBI-Style Menu Item Overrides in CDK Overlays */
+
+/* Compact, RBI-Style Menu Item Overrides for Navbar Mega Panels ONLY */
+.mat-mdc-menu-panel:has(.deposit-menu-grid) {
+  --mat-menu-item-label-text-size: 10.5px !important;
+  --mat-menu-item-label-text-line-height: 14px !important;
+
+  border-radius: 8px !important;
+  box-shadow:
+    0 10px 28px rgb(15 23 42 / 14%),
+    0 2px 6px rgb(15 23 42 / 8%) !important;
+  border: 1px solid #d1d5db !important;
+  background: #fff !important;
+  max-height: 75vh !important;
+  overflow: hidden auto !important;
+
+  .mat-mdc-menu-content {
+    padding: 4px 6px !important;
+    overflow-x: hidden !important;
+  }
+
+  .deposit-menu-grid .mat-mdc-menu-item {
+    font-size: 10.5px !important;
+    font-weight: 500 !important;
+    height: 25px !important;
+    min-height: 25px !important;
+    line-height: 25px !important;
+    padding: 0 6px !important;
+    border-radius: 4px !important;
+    color: #334155 !important;
+    font-family:
+      'IBM Plex Sans',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      sans-serif !important;
+    transition:
+      background-color 0.12s ease,
+      color 0.12s ease !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    min-width: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+
+    .mat-mdc-menu-item-text,
+    .mdc-list-item__primary-text,
+    .mdc-list-item__content {
+      font-size: 10.5px !important;
+      font-weight: 500 !important;
+      line-height: 1.25 !important;
+      color: #334155 !important;
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      width: 100% !important;
+    }
+
+    .menu-item-icon,
+    fa-icon,
+    i {
+      font-size: 10.5px !important;
+      width: 13px !important;
+      min-width: 13px !important;
+      text-align: center !important;
+      margin-right: 5px !important;
+      opacity: 0.8 !important;
+      flex-shrink: 0 !important;
+    }
+
+    &:hover {
+      background-color: #f0f7ff !important;
+      color: #0d47a1 !important;
+
+      .mat-mdc-menu-item-text,
+      .mdc-list-item__primary-text {
+        color: #0d47a1 !important;
+      }
+
+      .menu-item-icon,
+      fa-icon,
+      i {
+        opacity: 1 !important;
+        color: #0d47a1 !important;
+      }
+    }
   }
 }
 
@@ -2012,3 +2278,43 @@ mifosx-client-datatable-step * {
     }
   }
 }
+
+// ===== CBS Compact Enterprise Density Polish =====
+// Reduces excessive whitespace and oversized elements across the banking UI
+.mat-mdc-table {
+  th.mat-mdc-header-cell {
+    padding: 8px 12px !important;
+    font-size: 11px !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.04em !important;
+  }
+
+  td.mat-mdc-cell {
+    padding: 6px 12px !important;
+    font-size: 12px !important;
+    line-height: 1.35 !important;
+  }
+
+  tr.mat-mdc-row,
+  tr.mat-mdc-header-row {
+    height: 36px !important;
+    min-height: 36px !important;
+  }
+}
+
+// Compact Material Cards
+.mat-mdc-card {
+  padding: 12px 16px !important;
+}
+
+// Breadcrumb & Page Titles Compact Spacing
+.breadcrumb-container {
+  margin-bottom: 8px !important;
+  padding: 4px 0 !important;
+}
+
+.mifosx-page-title,
+.page-title {
+  font-size: 17px !important;
+  margin-bottom: 8px !important;
+}

src/theme/mifosx-theme.scss

@@ -53,7 +53,7 @@ $mifosx-typography: mat.m2-define-typography-config(
   $button: $mifosx-typography-level
 );
 
-$mifosx-density: 0;
+$mifosx-density: -1;
 
 $mifosx-app-theme: mat.m2-define-light-theme(
   (