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>

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

@@ -38,15 +38,7 @@
     <!-- Full-Screen App Boot / Splash Screen -->
     <div class="cbs-fullscreen-loader">
       <div class="cbs-fullscreen-loader__brand">
-        <div class="cbs-brand-icon">
-          <svg width="40" height="40" viewBox="0 0 32 32" aria-hidden="true">
-            <rect x="1" y="1" width="14" height="14" rx="2" fill="#2563eb" />
-            <rect x="17" y="1" width="14" height="14" rx="2" fill="#0ea5e9" />
-            <rect x="1" y="17" width="14" height="14" rx="2" fill="#10b981" />
-            <rect x="17" y="17" width="14" height="14" rx="2" fill="#94a3b8" />
-          </svg>
-        </div>
-        <h2 class="cbs-brand-name">{{ title || 'CBS Nexora' }}</h2>
+        <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>
 

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

@@ -129,6 +129,14 @@
   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;