WEB-492: Material Design 3 implementation: Login

src/main.scss

@@ -1,4 +1,5 @@
 @use 'theme/mifosx-theme';
+@use 'theme/material-web' as *;
 @use 'theme/pictonblue-yellowgreen' as *;
 @use 'theme/indigo-pink' as *;
 @use 'theme/pink-bluegrey' as *;
@@ -24,6 +25,65 @@
   z-index: 9999;
 }
 
+// ===== Material Select Panel Styles (Material Design 3) =====
+.mat-mdc-select-panel {
+  background: var(--md-sys-color-surface-container, #fff);
+  border-radius: 8px;
+  box-shadow:
+    0 2px 4px #00000014,
+    0 4px 12px #0000000f,
+    0 8px 24px #00000014;
+
+  .mat-mdc-option {
+    font-size: 0.875rem;
+    min-height: 48px;
+    padding: 0 16px;
+    color: var(--md-sys-color-on-surface, #1a1c1e);
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #1074b914;
+    }
+
+    &.mat-mdc-option-active {
+      background-color: #1074b91f;
+    }
+
+    &.mdc-list-item--selected {
+      background-color: #1074b91f;
+      color: var(--md-sys-color-primary, #1074b9);
+      font-weight: 500;
+    }
+
+    .mdc-list-item__primary-text {
+      color: inherit;
+    }
+  }
+}
+
+// Dark theme select panel
+.dark-theme .mat-mdc-select-panel {
+  background: var(--md-sys-color-surface-container, #2c2f36);
+
+  .mat-mdc-option {
+    color: var(--md-sys-color-on-surface, #e2e2e5);
+
+    &:hover {
+      background-color: #5ba2ec14;
+    }
+
+    &.mat-mdc-option-active {
+      background-color: #5ba2ec1f;
+    }
+
+    &.mdc-list-item--selected {
+      background-color: #5ba2ec1f;
+      color: var(--md-sys-color-primary, #5ba2ec);
+      font-weight: 500;
+    }
+  }
+}
+
 .scrollbar-styling {
   scrollbar-width: thin;
   scrollbar-color: #889 #f1f1f1;