diff --git a/README.md b/README.md index cb4e25e..1a75dac 100644 --- a/README.md +++ b/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) | diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 8b9cb71..8373807 100644 --- a/frontend/src/app/app.component.ts +++ b/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 { diff --git a/frontend/src/app/components/navbar/navbar.component.ts b/frontend/src/app/components/navbar/navbar.component.ts index 83deb1a..1c6f873 100644 --- a/frontend/src/app/components/navbar/navbar.component.ts +++ b/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-radius: 16px; - box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 4px 16px rgba(63, 81, 181, 0.3); + border: 2px solid #ffffff; + border-radius: 12px; + 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; - background: linear-gradient(90deg, #3f51b5, #5c6bc0, #3f51b5); + height: 2px; + 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; - color: white; + background: #ffffff; + 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; diff --git a/frontend/src/app/components/search/search.component.ts b/frontend/src/app/components/search/search.component.ts index 6b6a628..611b563 100644 --- a/frontend/src/app/components/search/search.component.ts +++ b/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';
search - @@ -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); - border-radius: 8px; + background: transparent !important; + border: none !important; + border-radius: 0 !important; + padding: 8px 0 !important; + align-items: center !important; } .mat-mdc-text-field-wrapper { - background: transparent; - padding: 0; + background: transparent !important; + padding: 0 !important; + border: none !important; } - .mat-mdc-form-field-outline { - color: rgba(255, 255, 255, 0.2); + .mat-mdc-form-field-outline, + .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 { - color: rgba(255, 255, 255, 0.6); + .mat-icon { + 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 { - searchQuery = ''; +export class SearchComponent implements OnInit, OnDestroy { @Output() search = new EventEmitter(); + @ViewChild('searchInput') searchInput!: ElementRef; + + 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); } diff --git a/frontend/src/app/components/upload/upload.component.ts b/frontend/src/app/components/upload/upload.component.ts index b431480..765b859 100644 --- a/frontend/src/app/components/upload/upload.component.ts +++ b/frontend/src/app/components/upload/upload.component.ts @@ -26,7 +26,7 @@ import { FormPreviewService } from '../../services/form-preview.service'; ], template: `
+ [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)'} : {}">
Validating {{validationProgress.current}}/{{validationProgress.total}}...
@@ -39,11 +39,10 @@ import { FormPreviewService } from '../../services/form-preview.service';
@@ -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; - background: rgba(76, 175, 80, 0.1); + border-color: #ffffff; + 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); - border-left: 3px solid #FF9800; + background: rgba(255, 255, 255, 0.1); + 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); - border: 2px solid #3f51b5; - box-shadow: 0 0 12px rgba(63, 81, 181, 0.3); + background: rgba(255, 255, 255, 0.15); + border: 2px solid #ffffff; + 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; - color: white !important; + background-color: #ffffff !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; } } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index d7f2388..0100e1b 100644 --- a/frontend/src/styles.scss +++ b/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 { - margin: 0; +/* Global Dark Theme Styles */ +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; }