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/index.html

@@ -144,31 +144,45 @@
           display: flex;
           flex-direction: column;
           align-items: center;
-          gap: 12px;
-          margin-bottom: 24px;
+          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: 72px;
-          height: 72px;
-          border-radius: 18px;
+          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 12px 28px rgba(14, 165, 233, 0.35);
+          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.6rem;
+          font-size: 1.5rem;
           font-weight: 800;
           letter-spacing: -0.02em;
           margin: 0;
         }
         .cbs-init-sub {
-          font-size: 0.8rem;
+          font-size: 0.78rem;
           color: #94a3b8;
           font-weight: 500;
-          letter-spacing: 0.04em;
+          letter-spacing: 0.06em;
           text-transform: uppercase;
         }
         .cbs-init-lottie-box {
@@ -241,15 +255,28 @@
         }
       </style>
       <div class="cbs-init-brand">
-        <div class="cbs-init-icon">
-          <svg width="40" height="40" 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 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>
-        <h2 class="cbs-init-title">CBS Nexora</h2>
         <span class="cbs-init-sub">Next-Generation Core Banking</span>
       </div>