feat: update UI with dark theme styles, fix UI bugs and enhance performance metrics in README

README.md

@@ -161,15 +161,21 @@ mongosh --eval "db.runCommand('ping')"
 
 ## Sample Performance Metrics Output
 
-Below is a real example of metrics collected for uploading 9 forms (each with ~400 questions and 3-10 options per question) on two different machines:
+Below is a real example of metrics collected for uploading 10 forms (each with ~400 questions and 3-10 options per question) based on the latest performance data:
+
+| Description                                      | Time                   |
+| ------------------------------------------------ | ----------------------- |
+| Time to validate each form file                  | 45.80-123.20ms (59.98ms) |
+| Time to process and save one form                | 0.49-288.43ms (126.84ms) |
+| Time to process and save all questions in a form | 59.64-82.80ms (64.59ms) |
+| Average time to process one question             | 0.15-0.20ms (0.16ms) |
+| Average time to process one option               | 0.15-0.17ms (0.16ms) |
+| Time to process all forms in the batch           | 228.62-288.43ms (253.00ms) |
+| Number of forms processed in the batch           | 10                      |
+| Average time to process one form in the batch    | 228.62-288.43ms (253.00ms) |
+
+**Notes:**
+- Metrics collected from backend/metrics.txt on 2025-07-28
+- All times are in ms unless specified otherwise
+- Hardware used is an M3 Pro Macbook Pro, with 18GB unified memory and 512GB of storage.
 
-| Description                                      | Ryzen 5 5500U           | M3 Pro                  |
-| ------------------------------------------------ | ----------------------- | ----------------------- |
-| Time to validate each form file                  | 120-260ms               | 51.28ms (46.58-59.83ms) |
-| Time to process and save one form                | 240-1080ms              | 0.73ms (0.53-1.19ms)    |
-| Time to process and save all questions in a form | 1.6-2.92s               | 62.46ms (55.66-73.13ms) |
-| Average time to process one question             | 4-7ms                   | 0.15ms (0.14-0.18ms)    |
-| Average time to process one option               | 3.6-4.5ms               | 0.15ms (0.14-0.15ms)    |
-| Time to process all forms in the batch           | 15.63s                  | 2.16s (1.96-2.34s)      |
-| Number of forms processed in the batch           | 9                       | 9                       |
-| Average time to process one form in the batch    | 1.74s                   | 240.3ms (217.25-259.99) |

frontend/src/app/app.component.ts

@@ -36,7 +36,11 @@ import { UploadComponent } from './components/upload/upload.component';
       height: 100vh;
       display: flex;
       flex-direction: column;
-      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      background: #0a0a0a;
+      border-radius: 16px;
+      margin: 8px;
+      overflow: hidden;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     }
 
     .main-content {

frontend/src/app/components/navbar/navbar.component.ts

@@ -102,15 +102,16 @@ import { Subscription } from 'rxjs';
   `,
   styles: [`
     .navbar {
-      background: rgba(255, 255, 255, 0.1);
+      background: rgba(0, 0, 0, 0.8);
       backdrop-filter: blur(10px);
       color: white;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
       z-index: 1000;
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }
 
     .navbar-brand {
@@ -128,6 +129,7 @@ import { Subscription } from 'rxjs';
       font-size: 24px;
       width: 24px;
       height: 24px;
+      color: #ffffff;
     }
 
     .navbar-actions {
@@ -144,12 +146,13 @@ import { Subscription } from 'rxjs';
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
         font-family: monospace;
+        border: 1px solid rgba(255, 255, 255, 0.2);
       }
     }
 
     .close-preview-btn {
       background: rgba(255, 255, 255, 0.1);
-      color: white;
+      color: #ffffff;
 
       &:hover {
         background: rgba(255, 255, 255, 0.2);
@@ -162,11 +165,11 @@ import { Subscription } from 'rxjs';
       left: 2rem;
       right: 2rem;
       height: 60vh;
-      background: #23234a;
+      background: #1a1a1a;
       color: white;
-      border: 5px solid #3f51b5;
+      border: 2px solid #ffffff;
-      border-radius: 16px;
+      border-radius: 12px;
-      box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 4px 16px rgba(63, 81, 181, 0.3);
+      box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 4px 16px rgba(255, 255, 255, 0.2);
       margin: 22px;
       z-index: 999;
       transform: translateY(-120%);
@@ -184,10 +187,10 @@ import { Subscription } from 'rxjs';
         top: 0;
         left: 0;
         right: 0;
-        height: 0px;
+        height: 2px;
-        background: linear-gradient(90deg, #3f51b5, #5c6bc0, #3f51b5);
+        background: linear-gradient(90deg, #ffffff, #e0e0e0, #ffffff);
         z-index: 1;
-        border-radius: 16px 16px 0 0;
+        border-radius: 12px 12px 0 0;
       }
     }
 
@@ -202,7 +205,7 @@ import { Subscription } from 'rxjs';
     .preview-header {
       margin-bottom: 2rem;
       padding-bottom: 1rem;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 
       h2 {
         margin: 0 0 0.5rem 0;
@@ -223,6 +226,7 @@ import { Subscription } from 'rxjs';
         padding: 1rem;
         background: rgba(255, 255, 255, 0.05);
         border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
 
         h3 {
           margin: 0 0 1rem;
@@ -240,6 +244,7 @@ import { Subscription } from 'rxjs';
             padding: 0.5rem;
             background: rgba(255, 255, 255, 0.05);
             border-radius: 4px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
 
             strong {
               display: block;
@@ -265,9 +270,13 @@ import { Subscription } from 'rxjs';
             padding: 1rem;
             background: rgba(255, 255, 255, 0.05);
             border-radius: 8px;
-            border-left: 3px solid #3f51b5;
+            border-left: 3px solid #ffffff;
+            border: 1px solid rgba(255, 255, 255, 0.1);
 
-            &.current-question { border: 2px solid #FFD600; background: rgba(255, 214, 0, 0.08); }
+            &.current-question { 
+              border: 2px solid #ffffff; 
+              background: rgba(255, 255, 255, 0.1); 
+            }
 
             .question-header {
               display: flex;
@@ -276,8 +285,8 @@ import { Subscription } from 'rxjs';
               margin-bottom: 0.5rem;
 
               .question-number {
-                background: #3f51b5;
+                background: #ffffff;
-                color: white;
+                color: #000000;
                 width: 24px;
                 height: 24px;
                 border-radius: 50%;
@@ -303,6 +312,7 @@ import { Subscription } from 'rxjs';
                 font-size: 0.75rem;
                 font-weight: 500;
                 color: rgba(255, 255, 255, 0.8);
+                border: 1px solid rgba(255, 255, 255, 0.2);
               }
             }
 
@@ -336,11 +346,12 @@ import { Subscription } from 'rxjs';
                   gap: 0.5rem;
                   margin-bottom: 0.25rem;
                   padding: 0.25rem 0.5rem;
-                  background: rgba(255, 255, 255, 0.03);
+                  background: rgba(255, 255, 255, 0.05);
                   border-radius: 4px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
 
                   .option-id {
-                    background: rgba(255, 255, 255, 0.1);
+                    background: rgba(255, 255, 255, 0.2);
                     color: white;
                     padding: 0.125rem 0.375rem;
                     border-radius: 3px;

frontend/src/app/components/search/search.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, ViewChild, ElementRef, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -19,8 +19,9 @@ import { MatIconModule } from '@angular/material/icon';
     <div class="search-container">
       <mat-form-field appearance="outline" class="search-field">
         <mat-icon matPrefix>search</mat-icon>
-        <input matInput
+        <input #searchInput
-               placeholder="Search forms..."
+               matInput
+               placeholder="Search forms... (Shift+K)"
                [(ngModel)]="searchQuery"
                (input)="onSearch()">
       </mat-form-field>
@@ -29,48 +30,180 @@ import { MatIconModule } from '@angular/material/icon';
   styles: [`
     .search-container {
       width: 100%;
-      max-width: 600px;
+      max-width: 400px;
       margin: 0 auto;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 12px;
+      padding: 4px 12px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      transition: all 0.3s ease;
+    }
+
+    .search-container:hover {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .search-container:focus-within {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.3);
     }
 
     .search-field {
       width: 100%;
 
       ::ng-deep {
+        .mat-mdc-form-field {
+          background: transparent !important;
+          border: none !important;
+          outline: none !important;
+        }
+
         .mat-mdc-form-field-flex {
-          background: rgba(255, 255, 255, 0.04);
+          background: transparent !important;
-          border-radius: 8px;
+          border: none !important;
+          border-radius: 0 !important;
+          padding: 8px 0 !important;
+          align-items: center !important;
         }
 
         .mat-mdc-text-field-wrapper {
-          background: transparent;
+          background: transparent !important;
-          padding: 0;
+          padding: 0 !important;
+          border: none !important;
         }
 
-        .mat-mdc-form-field-outline {
+        .mat-mdc-form-field-outline,
-          color: rgba(255, 255, 255, 0.2);
+        .mat-mdc-form-field-outline-start,
+        .mat-mdc-form-field-outline-end,
+        .mat-mdc-form-field-outline-gap,
+        .mat-mdc-form-field-outline-thick {
+          display: none !important;
+          border: none !important;
+          outline: none !important;
+        }
+
+        .mat-mdc-form-field-infix {
+          border: none !important;
+          padding: 0 !important;
+          margin: 0 !important;
+          min-height: auto !important;
+          display: flex !important;
+          align-items: center !important;
         }
 
         .mat-mdc-input-element {
-          color: white;
+          color: white !important;
+          background: transparent !important;
+          border: none !important;
+          outline: none !important;
+          padding: 0 4px !important;
+          font-size: 16px !important;
+          line-height: 1.5 !important;
+          font-weight: 400 !important;
         }
 
         .mat-mdc-form-field-label {
-          color: rgba(255, 255, 255, 0.6);
+          display: none !important;
         }
 
-        .mat-mdc-icon-button {
+        .mat-icon {
-          color: rgba(255, 255, 255, 0.6);
+          color: rgba(255, 255, 255, 0.7) !important;
+          margin-right: 4px !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          font-size: 20px !important;
+          width: 20px !important;
+          height: 20px !important;
+          transition: color 0.3s ease !important;
+        }
+
+        .mat-mdc-form-field-subscript-wrapper {
+          display: none !important;
+        }
+
+        ::placeholder {
+          color: rgba(255, 255, 255, 0.5) !important;
+          font-weight: 300 !important;
+        }
+
+        /* Remove all focus states and borders */
+        .mat-mdc-form-field.mat-focused,
+        .mat-mdc-form-field.mat-focused .mat-mdc-form-field-flex,
+        .mat-mdc-form-field.mat-focused .mat-mdc-input-element {
+          background: transparent !important;
+          border: none !important;
+          outline: none !important;
+          box-shadow: none !important;
+        }
+
+        .mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline,
+        .mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-start,
+        .mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-end,
+        .mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-gap,
+        .mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick {
+          display: none !important;
+          border: none !important;
+          outline: none !important;
+        }
+
+        /* Remove any Material Design default styling */
+        .mdc-text-field,
+        .mdc-text-field--outlined,
+        .mdc-text-field--focused {
+          background: transparent !important;
+          border: none !important;
+          outline: none !important;
+        }
+
+        .mdc-notched-outline,
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing,
+        .mdc-notched-outline__notch {
+          display: none !important;
+          border: none !important;
         }
       }
     }
+
+    /* Focus enhancement */
+    .search-container:focus-within .search-field ::ng-deep .mat-icon {
+      color: rgba(255, 255, 255, 0.9) !important;
+    }
   `]
 })
-export class SearchComponent {
+export class SearchComponent implements OnInit, OnDestroy {
-  searchQuery = '';
   @Output() search = new EventEmitter<string>();
+  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
+  
+  searchQuery = '';
 
-  onSearch(): void {
+  ngOnInit() {
+    // Component initialization
+  }
+
+  ngOnDestroy() {
+    // Cleanup if needed
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  handleKeyboardShortcut(event: KeyboardEvent) {
+    // Check for Shift+K
+    if (event.shiftKey && event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      this.focusSearch();
+    }
+  }
+
+  focusSearch() {
+    if (this.searchInput) {
+      this.searchInput.nativeElement.focus();
+    }
+  }
+
+  onSearch() {
     this.search.emit(this.searchQuery);
   }
 

frontend/src/app/components/upload/upload.component.ts

@@ -26,7 +26,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
   ],
   template: `
     <div *ngIf="isValidating || isUploading || isDeletingAll" class="global-upload-progress"
-         [ngStyle]="isValidating ? {'background': '#665c00'} : isUploading ? {'background': '#1b5e20'} : isDeletingAll ? {'background': '#b71c1c'} : {}">
+         [ngStyle]="isValidating ? {'background': 'rgba(0, 0, 0, 0.95)'} : isUploading ? {'background': 'rgba(0, 0, 0, 0.95)'} : isDeletingAll ? {'background': 'rgba(244, 67, 54, 0.95)'} : {}">
       <div class="progress-counter" *ngIf="isValidating">
         Validating {{validationProgress.current}}/{{validationProgress.total}}...
       </div>
@@ -39,11 +39,10 @@ import { FormPreviewService } from '../../services/form-preview.service';
       <mat-progress-bar
         color="primary"
         [ngClass]="{
-          'bar-yellow': isValidating,
+          'bar-orange': isValidating || isUploading,
-          'bar-green': isUploading,
           'bar-red': isDeletingAll
         }"
-        [ngStyle]="isValidating ? {'background': '#FFD600'} : isUploading ? {'background': '#4CAF50'} : isDeletingAll ? {'background': '#F44336'} : {}"
+        [ngStyle]="isValidating ? {'background': '#ff9800'} : isUploading ? {'background': '#ff9800'} : isDeletingAll ? {'background': '#F44336'} : {}"
         mode="indeterminate">
       </mat-progress-bar>
     </div>
@@ -173,17 +172,17 @@ import { FormPreviewService } from '../../services/form-preview.service';
   `,
   styles: [`
     .upload-card {
-      background: rgba(255, 255, 255, 0.1);
+      background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(10px);
-      border: 2px dashed rgba(255, 255, 255, 0.2);
+      border: 2px dashed rgba(255, 255, 255, 0.3);
       transition: all 0.3s ease;
       height: 100%;
       min-height: 400px;
       color: white;
 
       &.dragover {
-        border-color: #4CAF50;
+        border-color: #ffffff;
-        background: rgba(76, 175, 80, 0.1);
+        background: rgba(255, 255, 255, 0.1);
       }
 
       ::ng-deep {
@@ -205,6 +204,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
           justify-content: center;
           width: 40px;
           height: 40px;
+          border: 1px solid rgba(255, 255, 255, 0.2);
 
           mat-icon {
             display: flex;
@@ -212,6 +212,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
             justify-content: center;
             width: 100%;
             height: 100%;
+            color: #ffffff;
           }
         }
 
@@ -239,7 +240,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
         width: 64px;
         height: 64px;
         margin-bottom: 1rem;
-        color: rgba(255, 255, 255, 0.8);
+        color: #ffffff;
       }
 
       h2 {
@@ -256,28 +257,38 @@ import { FormPreviewService } from '../../services/form-preview.service';
 
     .file-actions {
       padding: 1rem;
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
 
       .selected-file {
         margin-bottom: 1rem;
-        padding: 0.75rem;
+        padding: 0.4rem 0.4rem 0.0rem 0.4rem;
         background: rgba(255, 255, 255, 0.05);
         border-radius: 8px;
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: unset;
 
         .file-info {
           display: flex;
           align-items: center;
           gap: 0.5rem;
           margin-bottom: 0.5rem;
+          min-height: 2rem;
 
           mat-icon {
-            color: rgba(255, 255, 255, 0.7);
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
           }
 
           .file-name {
             flex: 1;
             font-weight: 500;
+            display: flex;
+            align-items: center;
           }
 
           .validation-status {
@@ -286,6 +297,9 @@ import { FormPreviewService } from '../../services/form-preview.service';
             font-size: 0.8rem;
             font-weight: bold;
             margin-left: 0.5rem;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
           }
 
           .valid {
@@ -304,7 +318,9 @@ import { FormPreviewService } from '../../services/form-preview.service';
         .validation-details {
           margin-top: 0.75rem;
           padding-top: 0.75rem;
-          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          border-top: 1px solid rgba(255, 255, 255, 0.2);
+          min-height: 0;
+          transition: all 0.3s ease;
 
           .error-section, .warning-section {
             margin-bottom: 0.5rem;
@@ -320,7 +336,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
             }
 
             .warning-title {
-              color: #FF9800;
+              color: #ffffff;
             }
 
             .validation-item {
@@ -332,11 +348,13 @@ import { FormPreviewService } from '../../services/form-preview.service';
               &.error {
                 background: rgba(244, 67, 54, 0.1);
                 border-left: 3px solid #F44336;
+                border: 1px solid rgba(244, 67, 54, 0.2);
               }
 
               &.warning {
-                background: rgba(255, 152, 0, 0.1);
+                background: rgba(255, 255, 255, 0.1);
-                border-left: 3px solid #FF9800;
+                border-left: 3px solid #ffffff;
+                border: 1px solid rgba(255, 255, 255, 0.2);
               }
 
               .validation-header {
@@ -352,6 +370,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
                   font-size: 0.7rem;
                   font-weight: 600;
                   text-transform: uppercase;
+                  border: 1px solid rgba(255, 255, 255, 0.2);
                 }
 
                 .validation-location {
@@ -382,7 +401,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
     }
 
     .form-list {
-      border-top: 2px dashed #b39ddb;
+      border-top: 2px dashed #ffffff;
       border-radius: 0;
       border-right: none;
       border-bottom: none;
@@ -401,25 +420,27 @@ import { FormPreviewService } from '../../services/form-preview.service';
       margin-bottom: 0.5rem;
       transition: all 0.3s ease;
       cursor: pointer;
+      border: 1px solid rgba(255, 255, 255, 0.1);
 
       &:hover {
         background: rgba(255, 255, 255, 0.1);
+        border-color: rgba(255, 255, 255, 0.3);
       }
 
       &.loading {
-        background: rgba(255, 255, 255, 0.18);
+        background: rgba(255, 255, 255, 0.1);
         opacity: 0.6;
         pointer-events: none;
       }
 
       &.previewed {
-        background: rgba(63, 81, 181, 0.2);
+        background: rgba(255, 255, 255, 0.15);
-        border: 2px solid #3f51b5;
+        border: 2px solid #ffffff;
-        box-shadow: 0 0 12px rgba(63, 81, 181, 0.3);
+        box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
         transform: scale(1.009);
 
         &:hover {
-          background: rgba(63, 81, 181, 0.25);
+          background: rgba(255, 255, 255, 0.2);
         }
       }
     }
@@ -430,12 +451,12 @@ import { FormPreviewService } from '../../services/form-preview.service';
       gap: 1rem;
 
       mat-icon {
-        color: rgba(255, 255, 255, 0.7);
+        color: #ffffff;
       }
 
       .loading-spinner {
         ::ng-deep circle {
-          stroke: rgba(255, 255, 255, 0.7);
+          stroke: #ffffff;
         }
       }
     }
@@ -476,11 +497,12 @@ import { FormPreviewService } from '../../services/form-preview.service';
       left: 0;
       width: 100vw;
       z-index: 4000;
-      background: rgba(35, 35, 74, 0.95);
+      background: rgba(0, 0, 0, 0.95);
       color: white;
       text-align: center;
       padding: 0.5rem 0 0.2rem 0;
-      box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
+      box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
     }
     .progress-counter {
       font-size: 1.1rem;
@@ -496,17 +518,17 @@ import { FormPreviewService } from '../../services/form-preview.service';
     ::ng-deep {
       .custom-snackbar {
         .mdc-snackbar__surface {
-          background-color: #3f51b5 !important;
+          background-color: #ffffff !important;
-          color: white !important;
+          color: #000000 !important;
         }
         
         .mdc-snackbar__label {
-          color: white !important;
+          color: #000000 !important;
           font-weight: 500 !important;
         }
         
         .mdc-snackbar__actions .mdc-button {
-          color: white !important;
+          color: #000000 !important;
           font-weight: 600 !important;
         }
       }

frontend/src/styles.scss

@@ -1,5 +1,281 @@
-@import '@angular/material/prebuilt-themes/purple-green.css';
+/* Custom Black-White Dark Theme */
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
 
-.mat-typography {
+/* Global Dark Theme Styles */
-    margin: 0;
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  background: #000000;
+  color: #ffffff;
+}
+
+body {
+  background: #000000;
+  min-height: 100vh;
+  padding: 0;
+}
+
+/* Remove ::before pseudo-element from navbar */
+app-navbar div::before {
+  display: none !important;
+  content: none !important;
+}
+
+/* Custom Material Overrides */
+.mat-mdc-raised-button.mat-primary {
+  background-color: #0d4f14 !important;
+  color: #ffffff !important;
+  border: 1px solid #2e7d32 !important;
+  transition: all 0.3s ease !important;
+}
+
+.mat-mdc-raised-button.mat-primary:hover {
+  background-color: #0a3d10 !important;
+}
+
+.mat-mdc-raised-button.mat-accent {
+  background-color: #2d1b69 !important;
+  color: #ffffff !important;
+  border: 1px solid #5e35b1 !important;
+  transition: all 0.3s ease !important;
+}
+
+.mat-mdc-raised-button.mat-accent:hover {
+  background-color: #1f0f4a !important;
+}
+
+.mat-mdc-raised-button.mat-warn {
+  background-color: #4a148c !important;
+  color: #ffffff !important;
+  border: 1px solid #8e24aa !important;
+  transition: all 0.3s ease !important;
+}
+
+.mat-mdc-raised-button.mat-warn:hover {
+  background-color: #3a0f6e !important;
+}
+
+.mat-mdc-icon-button {
+  color: #ffffff !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all 0.3s ease !important;
+}
+
+.mat-mdc-icon-button:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.mat-mdc-progress-bar-fill::after {
+  background-color: #ffffff !important;
+}
+
+.mat-mdc-progress-spinner circle {
+  stroke: #ffffff !important;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #ffffff;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #e0e0e0;
+}
+
+/* Typography */
+.mat-typography {
+  margin: 0;
+  color: #ffffff;
+}
+
+/* Focus styles */
+.mat-mdc-focus-indicator {
+  border-color: #ffffff !important;
+}
+
+/* Input focus */
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline {
+  color: #ffffff !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-label {
+  color: #ffffff !important;
+}
+
+/* Material Design Overrides for Dark Theme */
+.mat-mdc-card {
+  background-color: rgba(0, 0, 0, 0.6) !important;
+  color: #ffffff !important;
+}
+
+.mat-mdc-form-field {
+  color: #ffffff !important;
+}
+
+.mat-mdc-form-field-label {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+
+.mat-mdc-input-element {
+  color: #ffffff !important;
+}
+
+.mat-mdc-form-field-outline {
+  color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.mat-mdc-form-field-outline-start,
+.mat-mdc-form-field-outline-end,
+.mat-mdc-form-field-outline-gap {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline {
+  color: #ffffff !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-start,
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-end,
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-gap {
+  border-color: #ffffff !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-label {
+  color: #ffffff !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-input-element {
+  color: #ffffff !important;
+}
+
+/* Override Material Design default colors */
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick {
+  color: #ffffff !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick .mat-mdc-form-field-outline-start,
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick .mat-mdc-form-field-outline-end,
+.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick .mat-mdc-form-field-outline-gap {
+  border-color: #ffffff !important;
+}
+
+/* Placeholder text */
+.mat-mdc-input-element::placeholder {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Form field subscript */
+.mat-mdc-form-field-subscript-wrapper {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+
+/* Button overrides */
+.mat-mdc-raised-button {
+  border-radius: 8px !important;
+  font-weight: 500 !important;
+  transition: all 0.3s ease !important;
+}
+
+.mat-mdc-raised-button.mat-primary {
+  background-color: #0d4f14 !important;
+  color: #ffffff !important;
+  border: 1px solid #2e7d32 !important;
+}
+
+.mat-mdc-raised-button.mat-primary:hover {
+  background-color: #0a3d10 !important;
+}
+
+.mat-mdc-raised-button.mat-accent {
+  background-color: #2d1b69 !important;
+  color: #ffffff !important;
+  border: 1px solid #5e35b1 !important;
+}
+
+.mat-mdc-raised-button.mat-accent:hover {
+  background-color: #1f0f4a !important;
+}
+
+.mat-mdc-raised-button.mat-warn {
+  background-color: #4a148c !important;
+  color: #ffffff !important;
+  border: 1px solid #8e24aa !important;
+}
+
+.mat-mdc-raised-button.mat-warn:hover {
+  background-color: #3a0f6e !important;
+}
+
+/* Icon button overrides */
+.mat-mdc-icon-button {
+  color: #ffffff !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all 0.3s ease !important;
+}
+
+.mat-mdc-icon-button:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Progress bar overrides */
+.mat-mdc-progress-bar-fill::after {
+  background-color: #ffffff !important;
+}
+
+.mat-mdc-progress-spinner circle {
+  stroke: #ffffff !important;
+}
+
+/* Snackbar overrides */
+.mat-mdc-snack-bar-container {
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  color: #ffffff !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.mat-mdc-snack-bar-container .mdc-snackbar__surface {
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  color: #ffffff !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.mat-mdc-snack-bar-container .mdc-snackbar__label {
+  color: #ffffff !important;
+}
+
+/* Toolbar overrides */
+.mat-mdc-toolbar {
+  background-color: rgba(0, 0, 0, 0.8) !important;
+  color: #ffffff !important;
+}
+
+/* Card overrides */
+.mat-mdc-card {
+  background-color: rgba(0, 0, 0, 0.6) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+.mat-mdc-card-title {
+  color: #ffffff !important;
+}
+
+.mat-mdc-card-subtitle {
+  color: rgba(255, 255, 255, 0.7) !important;
 }