record page updated

obj/Debug/Py-Detect.esproj.FileListAbsolute.txt

@@ -1 +1,2 @@
 C:\Users\Admin\Desktop\Py-Detect\obj\Debug\Py-Detect.esproj.CoreCompileInputs.cache
+C:\Users\Admin\Desktop\deployment-pydetect\Py-detect\obj\Debug\Py-Detect.esproj.CoreCompileInputs.cache

obj/Debug/package.g.props

@@ -17,6 +17,7 @@
     <PackageJsonDependenciesAngularPlatformBrowser Condition="$(PackageJsonDependenciesAngularPlatformBrowser) == ''">^16.1.0</PackageJsonDependenciesAngularPlatformBrowser>
     <PackageJsonDependenciesAngularPlatformBrowserDynamic Condition="$(PackageJsonDependenciesAngularPlatformBrowserDynamic) == ''">^16.1.0</PackageJsonDependenciesAngularPlatformBrowserDynamic>
     <PackageJsonDependenciesAngularRouter Condition="$(PackageJsonDependenciesAngularRouter) == ''">^16.1.0</PackageJsonDependenciesAngularRouter>
+    <PackageJsonDependenciesForce Condition="$(PackageJsonDependenciesForce) == ''">^0.0.3</PackageJsonDependenciesForce>
     <PackageJsonDependenciesJestEditorSupport Condition="$(PackageJsonDependenciesJestEditorSupport) == ''">*</PackageJsonDependenciesJestEditorSupport>
     <PackageJsonDependenciesRxjs Condition="$(PackageJsonDependenciesRxjs) == ''">~7.8.0</PackageJsonDependenciesRxjs>
     <PackageJsonDependenciesTslib Condition="$(PackageJsonDependenciesTslib) == ''">^2.3.0</PackageJsonDependenciesTslib>

src/app/app-routing.module.ts

@@ -1,21 +1,26 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { HomepageComponent } from './homepage/homepage.component';
-import { PyDetectComponent } from './py-detect/py-detect.component';
 import { InfopageComponent } from './infopage/infopage.component';
 import { ValidationpageComponent } from './validationpage/validationpage.component';
 import { RecordpageComponent } from './recordpage/recordpage.component';
 import { CaseDetailsPageComponent } from './case-details-page/case-details-page.component';
 
 const routes: Routes = [
-  { path: '', component: HomepageComponent },
+  { 
+    path: '', 
+    loadComponent: () => import('./homepage/homepage.component').then(m => m.HomepageComponent) 
+  },
   { path: 'infopage', component: InfopageComponent },
   { path: 'infopage/:id', component: InfopageComponent },
-  { path: 'py-detect', component: PyDetectComponent },
+  { 
+    path: 'py-detect', 
+    loadComponent: () => import('./py-detect/py-detect.component').then(m => m.PyDetectComponent) 
+  },
   { path: 'validationpage', component: ValidationpageComponent },
   { path: 'record', component: RecordpageComponent },
   { path: 'case-details', component: CaseDetailsPageComponent },
   { path: 'case-details/:id', component: CaseDetailsPageComponent },
+  { path: '', redirectTo: '/case-detail', pathMatch: 'full' },
 
   {
     path: 'auth/signin', loadComponent: () =>

src/app/app.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 import { InfopageComponent } from './infopage/infopage.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -10,8 +12,8 @@ import { ValidationpageComponent } from './validationpage/validationpage.compone
 import { SignInComponent } from './homepage/sign-in/sign-in.component';
 import { SignUpComponent } from './homepage/sign-up/sign-up.component';
 import { RecordpageComponent } from './recordpage/recordpage.component';
-import { HomepageComponent } from './homepage/homepage.component';
 import { CaseDetailsPageComponent } from './case-details-page/case-details-page.component';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
   declarations: [
@@ -23,14 +25,14 @@ import { CaseDetailsPageComponent } from './case-details-page/case-details-page.
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     ReactiveFormsModule,
     FormsModule,
     CommonModule,
     AppRoutingModule,
     HttpClientModule,
-    HomepageComponent,
-    SignInComponent,
-    SignUpComponent
+    RouterModule,
+    MatCardModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/auth.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/auth.service.ts

@@ -0,0 +1,50 @@
+// src/app/auth.service.ts
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'  // This makes the service available globally in the app
+})
+export class AuthService {
+
+  constructor() { }
+
+  // Sign-up method to handle user registration
+  signUp(name: string, role: string, email: string, password: string): Promise<any> {
+    return new Promise((resolve) => {
+      // Simulating storing user data in localStorage
+      const user = { name, role, email, password };
+      localStorage.setItem('user', JSON.stringify(user)); // Save user data in localStorage
+      localStorage.setItem('userRole', role);  // Save only the role in localStorage (for later use)
+      resolve('User signed up');
+    });
+  }
+
+  // Sign-in method to handle user login
+  signIn(email: string, password: string): Promise<any> {
+    return new Promise((resolve, reject) => {
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      // Check if email and password match the stored data
+      if (user.email === email && user.password === password) {
+        resolve('User signed in');
+      } else {
+        reject('Invalid credentials');
+      }
+    });
+  }
+
+  // Helper methods to manage user session and check if the user is logged in
+  isLoggedIn(): boolean {
+    return !!localStorage.getItem('user');
+  }
+
+  // Get the user's role from localStorage
+  getUserRole(): string | null {
+    return localStorage.getItem('userRole');
+  }
+
+  // Logout function to clear the session
+  logout(): void {
+    localStorage.removeItem('user');
+    localStorage.removeItem('userRole');
+  }
+}

src/app/case-details-page/case-details-page.component.css

@@ -1,5 +1,119 @@
 @import '../recordpage/recordpage.component.css';
 
+body, html {
+  overflow: auto !important;
+}
+
+body, main.content {
+  background: #f4f6fa;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+}
+
+
+/* Modern UI header styles from infopage */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 18px 32px 0 32px;
+  position: relative;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px;
+  margin-bottom: 1vh;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 1.5vh;
+}
+
+  .py-detect-title-header .py-letter.p {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.y {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-shape {
+    color: #e3f6ff;
+    background: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+    box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+    border: 2px solid #23272b;
+    width: 18px;
+    height: 4px;
+    display: inline-block;
+    margin: 0 8px;
+    border-radius: 2px;
+  }
+
+  .py-detect-title-header .py-letter.d {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.e {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.t {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.e2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.c {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.t2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+
 .case-details-list {
   width: 100%;
   max-width: 1700px;
@@ -143,13 +257,23 @@ hr {
 }
 
 .detail-row span {
-  color: #64748b;
-  font-weight: 500;
+  color: #1e293b;
+  font-weight: 700;
+  min-width: 180px;
+  font-size: 1.08em;
+  margin-right: 32px;
+  text-align: left;
+  display: inline-block;
 }
 
 .detail-row b {
-  color: #23272b;
-  font-weight: 500;
+  color: #2563eb;
+  font-weight: 700;
+  word-break: break-word;
+  font-size: 1.13em;
+  margin-left: 8px;
+  text-align: left;
+  display: inline-block;
 }
 
 .bold-value {
@@ -172,18 +296,19 @@ hr {
 /* Modal for case details (match record page style) */
 .modal-blur-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  inset: 0;
+  z-index: 199;
+  background: rgba(255,255,255,0.45);
+  backdrop-filter: blur(8px);
+  pointer-events: none;
+  display: block;
 }
 
 .modal {
-  background: #fefefe;
-  border-radius: 8px;
-  box-shadow: 0 4px 32px rgba(30, 41, 59, 0.12);
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px #0001, 0 1.5px 0 #e5e7eb;
+  border: 1.5px solid #e5e7eb;
   overflow: hidden;
   position: fixed;
   top: 50%;
@@ -198,8 +323,9 @@ hr {
 }
 
 .modal-header {
-  background: #f5fafd;
-  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+  border-radius: 10px 10px 0 0;
+  border-bottom: 1.5px solid #e5e7eb;
   padding: 16px;
   display: flex;
   justify-content: space-between;
@@ -218,11 +344,13 @@ hr {
   background: #fff;
   flex: 1;
   overflow-y: auto;
+  color: #23272b;
 }
 
 .modal-footer {
-  background: #f5fafd;
-  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+  border-radius: 0 0 10px 10px;
+  border-top: 1.5px solid #e5e7eb;
   padding: 12px;
   text-align: right;
 }
@@ -242,47 +370,47 @@ hr {
   background: #34b3e0;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.active-cases-label {
-  font-size: 1.8rem;
-  font-weight: 800;
-  color: #38bdf8;
-  margin-bottom: 16px;
-  position: relative;
-  text-align: left;
-}
-
 .actions {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  gap: 16px;
+  gap: 18px;
   flex-wrap: nowrap;
   width: 100%;
 }
 
-.actions .btn {
-  min-width: 150px;
-  max-width: 200px;
-  padding: 12px 20px;
+.btn.view {
+  background: #64748b;
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
   font-size: 1.08rem;
-  white-space: nowrap;
-  border-radius: 8px;
-  box-sizing: border-box;
-  overflow: visible;
-  text-overflow: unset;
-  margin: 0 2px;
+  padding: 12px 32px;
+  box-shadow: 0 2px 8px #2563eb22;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.btn.view:hover {
+  background: #1d4ed8;
+  box-shadow: 0 4px 16px #2563eb44;
+}
+
+.btn.edit {
+  background: #8b5cf6;
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 1.08rem;
+  padding: 12px 32px;
+  box-shadow: 0 2px 8px #8b5cf622;
+  transition: background 0.2s, box-shadow 0.2s;
+  margin-left: 0;
+}
+.btn.edit:hover {
+  background: #7c3aed;
+  box-shadow: 0 4px 16px #8b5cf644;
 }
 
 .actions-col {
@@ -292,11 +420,20 @@ hr {
 
 .records th.actions-col,
 .records td.actions {
-  width: 28% !important;
-  min-width: 260px;
+  width: 24% !important;
+  min-width: 313px;
   max-width: 320px;
 }
 
+.next-action-col {
+  text-align: left;
+  min-width: 120px;
+  padding-left: 0;
+  padding-right: 0;
+  font-weight: 500;
+  color: #2563eb;
+}
+
 @media (max-width: 700px) {
   .actions .btn {
     min-width: 120px;
@@ -312,19 +449,422 @@ hr {
   }
 }
 
-/* Make all table columns equal width */
-.records {
-  table-layout: fixed;
+@media (max-width: 900px) {
+  .btn.view, .btn.edit {
+    padding: 10px 16px;
+    font-size: 1rem;
+  }
+  .records th.actions-col,
+  .records td.actions {
+    min-width: 120px;
+    max-width: 180px;
+    width: 36% !important;
+  }
+}
+
+/* table layout for case details page */
+.record-table {
   width: 100%;
+  table-layout: auto;
+  border-collapse: collapse;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
-.records th,
-.records td {
-  width: 16.66%; /* 6 columns, 100/6 = 16.66% */
-  text-align: center;
+
+.record-table th, .record-table td {
+  padding-left: 12px;
+  padding-right: 12px;
+  word-break: break-word;
+  white-space: normal;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e5e7eb; /* consistent row border */
+}
+
+.record-table tr:last-child td {
+  border-bottom: none;
+}
+
+th.actions, td.actions {
+  text-align: left;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+td.actions {
   vertical-align: middle;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
+.icon-btn.view {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #2563eb;
+  font-size: 1.4em;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.custom-active-cases-label {
+  font-weight: 800;
+  color: #2196f3;
+  font-size: 2rem;
+  margin-bottom: 18px;
+  margin-top: 0;
+  text-align: left;
+  position: relative;
+  right: 32vw;
+}
+
+.filter-bar select,
+.filter-bar .filter-date {
+  padding: 6px 18px;
+  border-radius: 6px;
+  border: 1.5px solid #cbd5e1;
+  font-size: 1em;
+  color: #2563eb;
+  background: #fff;
+  font-weight: 600;
+  outline: none;
+  transition: border 0.15s;
+  min-width: 160px;
+  margin-right: 4px;
+}
+.filter-bar select:focus,
+.filter-bar .filter-date:focus {
+  border: 1.5px solid #38bdf8;
+}
+.date-group {
+  display: inline-flex;
+  align-items: center;
+  font-family: inherit;
+  color: #a86a00;
+  font-size: 1.08em;
+  font-weight: 500;
+  margin-right: 8px;
+  gap: 2px;
+}
+.date-label {
+  margin: 0 4px 0 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.calendar-ico {
+  font-size: 1.1em;
+  margin-left: 2px;
+  vertical-align: middle;
+}
+.filter-date {
+  border: none;
+  background: transparent;
+  color: #a86a00;
+  font-size: 1em;
+  font-weight: 600;
+  outline: none;
+  min-width: 90px;
+  margin-left: 2px;
+}
+.filter-date::-webkit-input-placeholder { color: #a86a00; }
+.filter-date:-moz-placeholder { color: #a86a00; }
+.filter-date::-moz-placeholder { color: #a86a00; }
+.filter-date:-ms-input-placeholder { color: #a86a00; }
+
+.fullpage-details {
+  width: 100vw;
+  min-height: 100vh;
+  background: #f8fafc;
+  padding: 32px 0 32px 0;
+  position: relative;
+  z-index: 1;
+}
+.details-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px rgba(30,41,59,0.12);
+  padding: 32px 48px;
+}
+.btn.back-btn {
+  margin: 0 0 24px 0;
+  background: #64748b;
+  color: #fff;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  padding: 10px 28px;
+  border: none;
+  cursor: pointer;
+}
+
+.fullpage-popup-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #f8fafc;
+  z-index: 9999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+body.popup-open {
+  overflow: hidden !important;
+}
+
+.fullpage-popup-content {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px rgba(30,41,59,0.18);
+  margin: 40px 0;
+  max-width: 1200px;
+  width: 90vw;
+  min-height: 80vh;
+  padding: 32px 48px;
+  position: relative;
+}
+
+/* --- Section Card Styles --- */
+.details-section-card {
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 4px 24px rgba(30,41,59,0.10);
+  border-left: 6px solid #38bdf8;
+  border-right: 2px solid #e0f2fe;
+  padding: 32px 36px 32px 36px;
+  margin-bottom: 0;
+  margin-top: 32px;
+  animation: fadeInUp 0.6s cubic-bezier(.23,1.01,.32,1) both;
+}
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(32px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 18px;
+  letter-spacing: 0.5px;
+}
+
+.subgroup-pills {
+  display: flex;
+  gap: 18px;
+  margin-bottom: 28px;
+  flex-wrap: wrap;
+}
+.subgroup-pills button {
+  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
+  color: #fff;
+  font-weight: 700;
+  border: none;
+  border-radius: 22px;
+  padding: 10px 32px;
+  font-size: 1.08em;
+  box-shadow: 0 2px 12px rgba(56,189,248,0.13);
+  cursor: pointer;
+  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
+  outline: none;
+  margin-bottom: 4px;
+}
+.subgroup-pills button.active,
+.subgroup-pills button:focus {
+  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
+  box-shadow: 0 4px 16px rgba(56,189,248,0.18);
+  transform: translateY(-2px) scale(1.04);
+}
+
+.fields-table-2col {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.fields-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.fields-col-labels {
+  min-width: 260px;
+  text-align: left;
+}
+.fields-col-values {
+  min-width: 220px;
+  text-align: right;
+}
+.field-label {
+  color: #22223b;
+  font-weight: 500;
+  font-size: 1.08em;
+  padding: 2px 0;
+}
+.field-value {
+  color: #22223b;
+  font-weight: 700;
+  font-size: 1.08em;
+  padding: 2px 0;
+  letter-spacing: 0.5px;
+}
+
+/* --- Card Container and Title --- */
+.case-details-title {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #22223b;
+  margin-bottom: 32px;
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.btn.close-btn {
+  background: none;
+  color: #64748b;
+  border: none;
+  font-size: 2.2rem;
+  font-weight: 700;
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+  line-height: 1;
+  padding: 0 16px;
+  transition: color 0.15s;
+}
+.btn.close-btn:hover {
+  color: #2563eb;
+}
+
+.btn.close-btn-bottom {
+  position: absolute;
+  right: 32px;
+  top: 32px;
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  font-size: 2.2rem;
+  font-weight: 700;
+  box-shadow: 0 4px 16px rgba(56,189,248,0.18);
+  cursor: pointer;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+}
+  .btn.close-btn-bottom:hover {
+    background: #38bdf8;
+    color: #22223b;
+  }
+
+.progress-col {
+  text-align: left;
+  min-width: 90px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.progress-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+  box-shadow: 0 2px 8px rgba(56,189,248,0.10);
+}
+.progress-dot.blue {
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+}
+.progress-dot.green {
+  background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);
+}
+.progress-check {
+  font-size: 1.2em;
+  color: #34d399;
+  background: #d1fae5;
+  border-radius: 4px;
+  padding: 2px 4px;
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.progress-value {
+  font-weight: 700;
+  font-size: 1em;
+  color: #22223b;
+  vertical-align: middle;
+}
+
+.priority-pill {
+  display: inline-flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 0.98em;
+  padding: 2px 12px 2px 8px;
+  border-radius: 16px;
+  margin-right: 2px;
+  letter-spacing: 0.02em;
+}
+.priority-high {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+.priority-medium {
+  background: #fef9c3;
+  color: #ca8a04;
+}
+.priority-low {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.evidence-upload-section {
+  margin-top: 32px;
+  padding: 16px;
+  background: #f3f4f6;
+  border-radius: 12px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+}
+.evidence-upload-section h3 {
+  margin-bottom: 12px;
+  font-size: 1.1em;
+  color: #2563eb;
+}
+.evidence-list {
+  margin-top: 10px;
+}
+.evidence-file {
+  display: flex;
+  align-items: center;
+  font-size: 0.98em;
+  margin-bottom: 6px;
+  color: #374151;
+}
+.evidence-file i {
+  margin-right: 8px;
+  color: #2563eb;
+}
+
+
+
+
+
+
+
+
 

src/app/case-details-page/case-details-page.component.html

@@ -1,107 +1,234 @@
-<div class="searchbar-topright">
-  <form class="modern-searchbar-form compact white-bg">
-    <span class="modern-searchbar-icon">
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="11" cy="11" r="8"/>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-      </svg>
-    </span>
-    <input type="text" class="modern-searchbar-input white-bg" placeholder="Search... (not active)" autocomplete="off" />
-  </form>
-</div>
-
-<div class="logo-title-row">
-  <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img" style="cursor:pointer;" (click)="navigateHome()" />
-  <div class="py-detect-title">
-    <span class="py-letter p">P</span>
-    <span class="py-letter y">Y</span>
-    <span class="py-shape"></span>
-    <span class="py-letter d">D</span>
-    <span class="py-letter e">E</span>
-    <span class="py-letter t">T</span>
-    <span class="py-letter e2">E</span>
-    <span class="py-letter c">C</span>
-    <span class="py-letter t2">T</span>
+<!-- Modern UI header with logo and PyDetect title -->
+<div class="site-header">
+  <div class="header-inner">
+    <div class="logo-cluster">
+      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
+        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
+      </span>
+      <div class="py-detect-title-header">
+        <span class="py-letter p">P</span>
+        <span class="py-letter y">Y</span>
+        <span class="py-shape"></span>
+        <span class="py-letter d">D</span>
+        <span class="py-letter e">E</span>
+        <span class="py-letter t">T</span>
+        <span class="py-letter e2">E</span>
+        <span class="py-letter c">C</span>
+        <span class="py-letter t2">T</span>
+      </div>
+    </div>
   </div>
 </div>
 
-<div style="height:128px;"></div>
+<div class="record-card">
+  <div class="record-header">
+    <div class="record-title-group">
+      <span class="record-title">Your Assigned Cases</span>
+    </div>
+    <div class="record-header-actions">
+      <input class="record-search" type="text" [(ngModel)]="q" placeholder="Search your cases..." />
+    </div>
+  </div>
 
-<main class="content" role="main">
-  <div class="wrapper records-center">
-    <div class="welcome-left">Welcome User 👮</div>
-    <div *ngIf="username" class="welcome-user">Welcome, {{ username }}👮</div>
-    <div class="active-cases-label left-align"><b>Your Active Cases</b></div>
-    <div class="table-wrap padded-table-wrap">
-      <table class="records">
-        <thead>
-          <tr>
-            <th>Case ID</th>
-            <th>Crime</th>
-            <th>Date &amp; Time</th>
-            <th>Location</th>
-            <th>Status</th>
-            <th class="actions-col">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let c of cases">
-            <td class="mono">{{ c.caseId || '—' }}</td>
-            <td>{{ c.crime || '—' }}</td>
-            <td>{{ c.dateTime ? (c.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}</td>
-            <td class="ellipsis" [title]="c.police.address || ''">{{ c.police.address || '—' }}</td>
-            <td>
-              <span class="status"
-                    [class.open]="c.status==='Open'"
-                    [class.under]="c.status==='Under Investigation'"
-                    [class.closed]="c.status==='Closed'">
-                {{ c.status || '—' }}
-              </span>
-            </td>
-            <td class="actions">
-              <button type="button" class="btn view" (click)="openDetails(c)">View Details</button>
-              <button type="button" class="btn edit" (click)="goToDetect()">Go Detect</button>
-            </td>
-          </tr>
-          <tr *ngIf="cases.length === 0">
-            <td colspan="6" class="empty">No records found.</td>
-          </tr>
-        </tbody>
-      </table>
+  <div class="analytics-summary">
+    <div class="summary-card total">
+      <div class="summary-label">Total Cases</div>
+      <div class="summary-value">{{ totalCases }}</div>
     </div>
+    <div class="summary-card open">
+      <div class="summary-label">Open</div>
+      <div class="summary-value">{{ openCases }}</div>
+    </div>
+    <div class="summary-card closed">
+      <div class="summary-label">Closed</div>
+      <div class="summary-value">{{ closedCases }}</div>
+    </div>
+    <div class="summary-card review">
+      <div class="summary-label">Pending Review</div>
+      <div class="summary-value">{{ reviewCases }}</div>
+    </div>
+  </div>
 
-    <!-- Modal for case details -->
-    <!-- ...existing code above... -->
-    <!-- Modal for case details -->
-    <!-- ...existing code above... -->
-    <!-- Modal for case details (match record page style) -->
-    <div class="modal-blur-overlay" *ngIf="showDetails"></div>
-    <div class="modal" *ngIf="showDetails" role="dialog" aria-modal="true" aria-labelledby="detailsTitle">
-      <div class="modal-header">
-        <h2 id="detailsTitle">Case Details</h2>
+  <div class="record-meta" style="padding: 8px 24px 0 24px; color: #6b7280; font-size: 0.98em;">
+    {{ filteredCases.length }} items • Updated a few seconds ago
+  </div>
+
+  <div class="filter-bar">
+    <select [(ngModel)]="filterStatus">
+      <option value="">Status</option>
+      <option *ngFor="let status of statusTypes">{{ status }}</option>
+    </select>
+    <select [(ngModel)]="filterCrimeType">
+      <option value="">Crime Type</option>
+      <option *ngFor="let type of crimeTypes">{{ type }}</option>
+    </select>
+    <button (click)="applyFilters()">Apply</button>
+    <button (click)="resetFilters()">Reset</button>
+  </div>
+
+  <!-- Table/list view always visible -->
+  <table class="record-table">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Case ID</th>
+        <th>Priority</th>
+        <th>Status</th>
+        <th>Crime Type</th>
+        <th>Date &amp; Time</th>
+        <th>Location</th>
+        <th>Suspect Name</th>
+        <th>Last Updated</th>
+        <th class="progress-col">Progress</th>
+        <th class="next-action-col">Next Action</th>
+        <th class="actions">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let c of filteredCases; let i = index">
+        <td>{{ i + 1 }}</td>
+        <td class="mono">
+          <a (click)="openDetails(c)" style="cursor:pointer; color:#2563eb; text-decoration:underline;">
+            {{ c.caseId || '—' }}
+          </a>
+        </td>
+        <td>
+          <ng-container [ngSwitch]="getCasePriority(c)">
+            <span *ngSwitchCase="'High'" class="priority-pill priority-high" title="High Priority">
+              🔴 High
+            </span>
+            <span *ngSwitchCase="'Medium'" class="priority-pill priority-medium" title="Medium Priority">
+              🟡 Medium
+            </span>
+            <span *ngSwitchCase="'Low'" class="priority-pill priority-low" title="Low Priority">
+              🟢 Low
+            </span>
+            <span *ngSwitchDefault style="color:#6b7280;">—</span>
+          </ng-container>
+        </td>
+        <td>
+          <span class="status-label"
+                [ngClass]="{
+                  'status-open': c.status === 'Open',
+                  'status-under': c.status === 'Under Investigation',
+                  'status-closed': c.status === 'Closed'
+                }">
+            {{ c.status || '—' }}
+          </span>
+        </td>
+        <td>{{ c.crime || '—' }}</td>
+        <td>{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</td>
+        <td>{{ c.police?.address || '—' }}</td>
+        <td>{{ c.accused?.name || '—' }}</td>
+        <td>{{ c.lastUpdated ? (c.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }}</td>
+        <td class="progress-col">
+          <ng-container [ngSwitch]="getProgressValue(c)">
+            <ng-container *ngSwitchCase="100">
+              <span class="progress-check">&#x2714;</span>
+              <span class="progress-value">100%</span>
+            </ng-container>
+            <ng-container *ngSwitchCase="75">
+              <span class="progress-dot green"></span>
+              <span class="progress-value">75%</span>
+            </ng-container>
+            <ng-container *ngSwitchDefault>
+              <span class="progress-dot blue"></span>
+              <span class="progress-value">{{ getProgressValue(c) }}%</span>
+            </ng-container>
+          </ng-container>
+        </td>
+        <td class="next-action-col">
+          {{ getNextActionMessage(c) }}
+        </td>
+        <td class="actions">
+          <button type="button" class="icon-btn view" (click)="openDetails(c)" title="View Case Details" aria-label="View Case Details">
+            <i class="fas fa-eye"></i>
+          </button>
+          <button *ngIf="isInvestigator()" type="button" class="icon-btn upload" (click)="showEvidencePanel(c)" title="Upload Evidence" aria-label="Upload Evidence">
+            <i class="fas fa-upload"></i>
+          </button>
+        </td>
+      </tr>
+      <tr *ngIf="filteredCases.length === 0">
+        <td colspan="12" class="empty">No records found.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- Evidence Upload Section for Investigators only, below the table -->
+  <div *ngIf="isInvestigator() && selectedCase" class="evidence-upload-section">
+    <h3>Upload Evidence for Case: {{ selectedCase.caseId }}</h3>
+    <input type="file" multiple (change)="onEvidenceUpload($event)" />
+    <div class="evidence-list" *ngIf="uploadedEvidence.length">
+      <div *ngFor="let file of uploadedEvidence" class="evidence-file">
+        <i class="fas fa-file-upload"></i> {{ file.name }}
       </div>
-      <div class="modal-body" *ngIf="selectedCase as sc">
-        <div class="detail-row"><span>Case ID</span><b>{{ sc.caseId || '—' }}</b></div>
-        <div class="detail-row"><span>Crime</span><b>{{ sc.crime || '—' }}</b></div>
-        <div class="detail-row"><span>Date & Time</span><b>{{ sc.dateTime ? (sc.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}</b></div>
-        <div class="detail-row"><span>Location</span><b>{{ sc.police.address || '—' }}</b></div>
-        <hr />
-        <div class="detail-row"><span>Investigation Officer</span><b>{{ sc.police.name || '—' }}</b></div>
-        <div class="detail-row"><span>Duty Person</span><b>{{ sc.police.dutyPerson || '—' }}</b></div>
-        <div class="detail-row"><span>Mode of Crime</span><b>{{ sc.police.modeOfCrime || '—' }}</b></div>
-        <hr />
-        <div class="detail-row"><span>Accused Name</span><b>{{ sc.accused.name || '—' }}</b></div>
-        <div class="detail-row"><span>Accused Gender</span><b>{{ sc.accused.gender || '—' }}</b></div>
-        <div class="detail-row"><span>Accused Age</span><b>{{ sc.accused.age || '—' }}</b></div>
-        <div class="detail-row"><span>Accused Address</span><b>{{ sc.accused.address || '—' }}</b></div>
-        <hr />
-        <div class="detail-block">
-          <div class="label">Notes / Explanation</div>
-          <p class="explain">{{ sc.police.information || '—' }}</p>
-        </div>
+    </div>
+  </div>
+
+  <!-- Evidence Upload Panel for selected case -->
+  <div *ngIf="isInvestigator() && evidencePanelCase && evidencePanelCase.caseId" class="evidence-upload-section">
+    <hr class="evidence-hr" />
+    <div class="evidence-title">
+      <i class="fas fa-folder-open evidence-folder"></i>
+      Evidence Upload for Case: {{ evidencePanelCase.caseId }}
+    </div>
+    <hr class="evidence-hr" />
+    <div class="evidence-type-tabs">
+      <button [class.active]="evidenceType === 'Document'" (click)="setEvidenceType('Document')">Document</button>
+      <button [class.active]="evidenceType === 'Photo'" (click)="setEvidenceType('Photo')">Photo</button>
+    </div>
+    <div class="evidence-actions">
+      <label class="evidence-file-label">
+        [Choose File]
+        <input type="file" multiple (change)="onEvidenceFileSelectType($event)" style="display:none;" />
+      </label>
+    </div>
+    <hr class="evidence-hr" />
+    <div class="evidence-list-block">
+      <div class="evidence-list-title">Uploaded Evidence ({{ evidenceType }}):</div>
+      <div *ngFor="let file of evidenceFiles[evidencePanelCase.caseId][evidenceType]" class="evidence-file-row">
+        <i [ngClass]="getEvidenceIcon(file.name)" class="evidence-file-icon"></i>
+        <span class="evidence-file-name">{{ file.name }}</span>
+        <a class="evidence-view-link" href="#" (click)="viewEvidenceFile(file)">(View)</a>
       </div>
-      <div class="modal-footer">
-        <button type="button" class="btn" (click)="closeDetails()">Close</button>
+    </div>
+    <hr class="evidence-hr" />
+  </div>
+
+  <!-- Full-page overlay for details (no evidence upload here) -->
+  <div *ngIf="selectedCase" class="fullpage-popup-overlay">
+    <div class="fullpage-popup-content">
+      <div class="case-details-title">Case Details</div>
+      <div class="details-sections">
+        <ng-container *ngFor="let sectionKey of ['crime', 'suspect', 'notes']">
+          <div class="details-section-card">
+            <div class="section-title">{{ sections[sectionKey].title }}</div>
+            <div class="subgroup-pills">
+              <button *ngFor="let subgroup of getSubgroups(sectionKey)"
+                      [class.active]="selectedSubgroup[sectionKey] === subgroup"
+                      (click)="selectSubgroup(sectionKey, subgroup)">
+                {{ subgroup }}
+              </button>
+            </div>
+            <div class="fields-table-2col">
+              <div class="fields-col fields-col-labels">
+                <div class="field-label" *ngFor="let field of getFieldsForSubgroup(sectionKey, selectedSubgroup[sectionKey])">
+                  {{ field }}
+                </div>
+              </div>
+              <div class="fields-col fields-col-values">
+                <div class="field-value" *ngFor="let field of getFieldsForSubgroup(sectionKey, selectedSubgroup[sectionKey])">
+                  {{ getFieldValue(selectedCase, sectionKey, field) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-container>
       </div>
+      <button class="btn close-btn-bottom" (click)="closeDetails()" title="Close">&times;</button>
     </div>
+  </div>
+</div>
+<!-- End of record-card -->
 

src/app/case-details-page/case-details-page.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
 
+type EvidenceType = 'Document' | 'Photo';
+
 @Component({
   selector: 'app-case-details-page',
   templateUrl: './case-details-page.component.html',
@@ -12,6 +14,59 @@ export class CaseDetailsPageComponent implements OnInit {
   showDetails = false;
   selectedCase: PoliceCase | null = null;
   username: string = '';
+  q: string = '';
+
+  filterStatus: string = '';
+  filterCrimeType: string = '';
+  filterDateFrom: string = '';
+  filterDateTo: string = '';
+
+  sections: any = {
+    crime: { 
+      title: 'Crime Details', 
+      subgroups: { 
+        'Identification & Timing': ['Case ID', 'FIR / Ref #', 'Crime Type', 'Case Category', 'Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered', 'Country', 'State', 'District', 'Number of Victims', 'Brief Description'], 
+        'Location & People': ['Location', 'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Reported Contact', 'Witness Count', 'Victim Name', 'Victim Contact', 'Victim Summary', 'Suspected Offender Known?', 'Suspect Link'], 
+        'Offence & Context': ['Legal Sections / Charges', 'Offence Category', 'Offence Description', 'Suspected Motive', 'Confirmed Motive', 'Weapon Involved', 'Property Loss / Damage'], 
+        'Evidence & Scene': ['Evidence Collected', 'Forensic Tests Required', 'Scene Condition', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Physical Evidence (list)', 'Chain of Custody?', 'Digital Evidence', 'Evidence Storage Reference'], 
+        'Operational Notes': ['Investigating Officer', 'Duty Person', 'Supervising Officer', 'Patrol Notes', 'Arrest Made', 'Arrest Location', 'Initial Actions Taken', 'riskLevel', 'Confidentiality'], 
+        'Status & Linkage': ['Biometric / Forensic IDs', 'DNA Ref ID', 'Fingerprint ID', 'Case Status', 'Linked Cases', 'arrestCount', 'Case Priority', 'Follow-up Date', 'Court Case ID', 'Next Hearing Date', 'Final Summary'],
+        'Remark': ['Remark']
+      } 
+    },
+    suspect: { 
+      title: 'Suspect Details', 
+      subgroups: { 
+        'Identity': ['Suspect ID', 'Suspect Name', 'Alias / Nickname', 'Age', 'Gender', 'Nationality', 'Nationality ID / Passport Number', 'Languages', 'Address', 'Known Aliases', 'Government ID'], 
+        'Physical Description': ['Height (cm)', 'Weight (kg)', 'Build', 'Hair Color', 'Eye Color', 'Distinguishing Marks', 'Tattoo Details', 'Scar Details', 'Photo Upload'], 
+        'Background': ['Employment', 'Education', 'Occupation', 'Company', 'Workplace Address', 'Marital Status', 'Known Habits', 'Known Financial Details'], 
+        'Known Associates': ['Associate Names', 'Gang Affiliation', 'Family Connections', 'Social Media Handles'], 
+        'Prior Records': ['Criminal History', 'Prior Arrests', 'Probation/Parole Status'],
+        'Remark': ['Remark']
+      } 
+    },
+    notes: { 
+      title: 'Evidence and Documents', 
+      subgroups: { 
+        'Investigation Notes': ['Initial Findings', 'Detailed Notes', 'Status', 'Version History / Updates'], 
+        'Evidence Files': ['Evidence Photos', 'Evidence Videos', 'Evidence Documents'], 
+        'Links and Recommendation': ['Links to Evidence', 'Final Recommendations'],
+        'Remark': ['Remark']
+      } 
+    }
+  };
+
+  selectedSubgroup: any = {
+    crime: 'Identification & Timing',
+    suspect: 'Identity',
+    notes: 'Investigation Notes'
+  };
+
+  uploadedEvidence: File[] = [];
+
+  evidencePanelCase: PoliceCase | null = null;
+  evidenceType: EvidenceType = 'Document';
+  evidenceFiles: { [caseId: string]: { Document: File[]; Photo: File[] } } = {};
 
   constructor(private caseStore: CaseStoreService, private router: Router) {}
 
@@ -20,14 +75,59 @@ export class CaseDetailsPageComponent implements OnInit {
     this.username = localStorage.getItem('username') || sessionStorage.getItem('username') || '';
   }
 
+  get filteredCases(): PoliceCase[] {
+    let filtered = this.cases;
+
+    if (this.filterStatus) {
+      filtered = filtered.filter(c => c.status === this.filterStatus);
+    }
+    if (this.filterCrimeType) {
+      filtered = filtered.filter(c => c.crime === this.filterCrimeType);
+    }
+    // Add date filtering logic here if needed
+
+    if (!this.q?.trim()) return filtered;
+    const qLower = this.q.trim().toLowerCase();
+    return filtered.filter(c =>
+      (c.caseId || '').toLowerCase().includes(qLower) ||
+      (c.status || '').toLowerCase().includes(qLower) ||
+      (c.crime || '').toLowerCase().includes(qLower) ||
+      (c.police?.address || '').toLowerCase().includes(qLower) ||
+      (c.accused?.name || '').toLowerCase().includes(qLower)
+    );
+  }
+
+  get totalCases(): number {
+    return this.cases.length;
+  }
+  get openCases(): number {
+    return this.cases.filter(c => c.status === 'Open').length;
+  }
+  get closedCases(): number {
+    return this.cases.filter(c => c.status === 'Closed').length;
+  }
+
+  get reviewCases(): number {
+    return this.cases.filter(c => c.status === 'Under Investigation').length;
+  }
+
+  get statusTypes(): string[] {
+    return Array.from(new Set(this.cases.map(c => c.status).filter(s => !!s))) as string[];
+  }
+  get crimeTypes(): string[] {
+    return Array.from(new Set(this.cases.map(c => c.crime).filter(s => !!s))) as string[];
+  }
+
   openDetails(c: PoliceCase): void {
     this.selectedCase = c;
     this.showDetails = true;
+    document.body.classList.add('popup-open');
   }
 
   closeDetails(): void {
     this.showDetails = false;
     this.selectedCase = null;
+    document.body.classList.remove('popup-open');
   }
 
   goToDetect(): void {
@@ -37,4 +137,246 @@ export class CaseDetailsPageComponent implements OnInit {
   navigateHome(): void {
     this.router.navigate(['/']);
   }
+
+  applyFilters() {
+    // No-op: filteredCases getter will use filters
+  }
+  resetFilters() {
+    this.filterStatus = '';
+    this.filterCrimeType = '';
+    this.filterDateFrom = '';
+    this.filterDateTo = '';
+    this.q = '';
+  }
+  getSubgroups(sectionKey: string): string[] {
+    return Object.keys(this.sections[sectionKey].subgroups);
+  }
+
+  getFieldsForSubgroup(sectionKey: string, subgroup: string): string[] {
+    return this.sections[sectionKey].subgroups[subgroup] || [];
+  }
+
+  selectSubgroup(sectionKey: string, subgroup: string) {
+    this.selectedSubgroup[sectionKey] = subgroup;
+  }
+
+  getFieldValue(sc: any, sectionKey: string, field: string): any {
+    // Map field labels to PoliceCase property paths (copied from recordpage.component.ts)
+    const fieldMap: { [key: string]: string | string[] } = {
+      // Crime Details
+      'Case ID': 'caseId',
+      'FIR / Ref #': 'firRef',
+      'Crime Type': 'crime',
+      'Case Category': 'caseCategory',
+      'Date & Time (Entry)': 'dateTime',
+      'Occurred From': 'occurredFrom',
+      'Occurred To': 'occurredTo',
+      'Time Reported': 'timeReported',
+      'Time Discovered': 'timeDiscovered',
+      'Country': 'country',
+      'State': 'state',
+      'District': 'district',
+      'Number of Victims': 'numberOfVictims',
+      'Brief Description': 'briefDescription',
+      'Location': ['police', 'address'],
+      'Jurisdiction / PS': 'jurisdiction',
+      'Scene Type': 'sceneType',
+      'Reported By': 'reportedBy',
+      'Reported Contact': 'reportedContact',
+      'Witness Count': 'witnessCount',
+      'Victim Name': 'victimName',
+      'Victim Contact': 'victimContact',
+      'Victim Summary': 'victimSummary',
+      'Suspected Offender Known?': 'suspectedOffenderKnown',
+      'Suspect Link': 'suspectLink',
+      'Legal Sections / Charges': 'legalSections',
+      'Offence Category': 'offenceCategory',
+      'Offence Description': 'offenceDescription',
+      'Suspected Motive': 'suspectedMotive',
+      'Confirmed Motive': 'confirmedMotive',
+      'Weapon Involved': 'weaponInvolved',
+      'Property Loss / Damage': 'propertyLoss',
+      'Evidence Collected': 'evidenceCollected',
+      'Forensic Tests Required': 'forensicTestsRequired',
+      'Scene Condition': 'sceneCondition',
+      'Photos / Video?': 'photosVideo',
+      'CCTV Present?': 'cctvPresent',
+      'CCTV Sources / IDs': 'cctvSources',
+      'Physical Evidence (list)': 'physicalEvidence',
+      'Chain of Custody?': 'chainOfCustody',
+      'Digital Evidence': 'digitalEvidence',
+      'Evidence Storage Reference': 'evidenceStorageReference',
+      'Investigating Officer': ['police', 'name'],
+      'Duty Person': ['police', 'dutyPerson'],
+      'Supervising Officer': ['police', 'supervisingOfficer'],
+      'Patrol Notes': ['police', 'patrolNotes'],
+      'Arrest Made': 'arrestMade',
+      'Arrest Location': 'arrestLocation',
+      'Initial Actions Taken': 'initialActionsTaken',
+      'riskLevel': 'riskLevel',
+      'Confidentiality': 'confidentiality',
+      'Biometric / Forensic IDs': 'biometricIds',
+      'DNA Ref ID': 'dnaRefId',
+      'Fingerprint ID': 'fingerprintId',
+      'Case Status': 'status',
+      'Linked Cases': 'linkedCases',
+      'arrestCount': 'arrestCount',
+      'Case Priority': 'casePriority',
+      'Follow-up Date': 'followUpDate',
+      'Court Case ID': 'courtCaseId',
+      'Next Hearing Date': 'nextHearingDate',
+      'Final Summary': 'finalSummary',
+      'Remark': 'remark',
+      // Suspect Details
+      'Suspect ID': ['accused', 'suspectId'],
+      'Suspect Name': ['accused', 'name'],
+      'Alias / Nickname': ['accused', 'alias'],
+      'Age': ['accused', 'age'],
+      'Gender': ['accused', 'gender'],
+      'Nationality': ['accused', 'nationality'],
+      'Nationality ID / Passport Number': ['accused', 'passportNumber'],
+      'Languages': ['accused', 'languages'],
+      'Address': ['accused', 'address'],
+      'Known Aliases': ['accused', 'knownAliases'],
+      'Government ID': ['accused', 'governmentId'],
+      'Height (cm)': ['accused', 'height'],
+      'Weight (kg)': ['accused', 'weight'],
+      'Build': ['accused', 'build'],
+      'Hair Color': ['accused', 'hairColor'],
+      'Eye Color': ['accused', 'eyeColor'],
+      'Distinguishing Marks': ['accused', 'distinguishingMarks'],
+      'Tattoo Details': ['accused', 'tattooDetails'],
+      'Scar Details': ['accused', 'scarDetails'],
+      'Photo Upload': ['accused', 'photoUpload'],
+      'Employment': ['accused', 'employment'],
+      'Education': ['accused', 'education'],
+      'Occupation': ['accused', 'occupation'],
+      'Company': ['accused', 'company'],
+      'Workplace Address': ['accused', 'workplaceAddress'],
+      'Marital Status': ['accused', 'maritalStatus'],
+      'Known Habits': ['accused', 'knownHabits'],
+      'Known Financial Details': ['accused', 'knownFinancialDetails'],
+      'Associate Names': ['accused', 'associateNames'],
+      'Gang Affiliation': ['accused', 'gangAffiliation'],
+      'Family Connections': ['accused', 'familyConnections'],
+      'Social Media Handles': ['accused', 'socialMediaHandles'],
+      'Criminal History': ['accused', 'criminalHistory'],
+      'Prior Arrests': ['accused', 'priorArrests'],
+      'Probation/Parole Status': ['accused', 'probationStatus'],
+      // Notes/Evidence
+      'Initial Findings': ['police', 'information'],
+      'Detailed Notes': ['notes', 'detailedNotes'],
+      'Status': 'status',
+      'Version History / Updates': ['notes', 'versionHistory'],
+      'Evidence Photos': ['legal', 'evidencePhotos'],
+      'Evidence Videos': ['legal', 'evidenceVideos'],
+      'Evidence Documents': ['legal', 'evidenceDocuments'],
+      'Links to Evidence': ['legal', 'linksToEvidence'],
+      'Final Recommendations': ['legal', 'finalRecommendations'],
+      'Witness Statements': ['legal', 'witnessStatements'],
+      'Confessions': ['legal', 'confessions'],
+      // Audit Fields
+      'Created By': 'createdBy',
+      'Creation Date': 'creationDate',
+      'Last Updated': 'lastUpdated',
+      'Verified By': 'verifiedBy'
+    };
+
+    const path = fieldMap[field] || field;
+    if (Array.isArray(path)) {
+      let value = sc;
+      for (const p of path) {
+        if (value && value[p] !== undefined) value = value[p];
+        else return '—';
+      }
+      return value !== undefined && value !== null && value !== '' ? value : '—';
+    } else {
+      return sc[path] !== undefined && sc[path] !== null && sc[path] !== '' ? sc[path] : '—';
+    }
+  }
+
+  getProgressValue(caseObj: any): number {
+    let total = 0, filled = 0;
+    ['crime', 'suspect', 'notes'].forEach(sectionKey => {
+      const subgroups = this.getSubgroups(sectionKey);
+      subgroups.forEach(subgroup => {
+        const fields = this.getFieldsForSubgroup(sectionKey, subgroup);
+        total += fields.length;
+        fields.forEach(field => {
+          const value = this.getFieldValue(caseObj, sectionKey, field);
+          if (value && value !== '—') filled++;
+        });
+      });
+    });
+    return total ? Math.round((filled / total) * 100) : 0;
+  }
+  getNextActionMessage(c: any): string {
+    // Example logic based on status and progress
+    const progress = this.getProgressValue(c);
+    if (c.status === 'Closed' || progress === 100) {
+      return 'Case completed';
+    }
+    if (c.status === 'Under Review' || progress >= 75) {
+      return 'Await supervisor approval';
+    }
+    if (c.status === 'Open' || progress < 75) {
+      return 'Collect evidence';
+    }
+    return '—';
+  }
+  getCasePriority(c: PoliceCase): 'High' | 'Medium' | 'Low' {
+    // Automatic logic based on crime type and status
+    const highCrimes = ['Murder', 'Robbery'];
+    const mediumCrimes = ['Theft', 'Assault'];
+    if (highCrimes.includes(c.crime) || c.status === 'Open') {
+      return 'High';
+    }
+    if (mediumCrimes.includes(c.crime) || c.status === 'Under Investigation') {
+      return 'Medium';
+    }
+    return 'Low';
+  }
+
+  isInvestigator(): boolean {
+    // Simple role check: username contains 'investigator' (customize as needed)
+    return this.username.toLowerCase().includes('investigator');
+  }
+
+  onEvidenceUpload(event: any): void {
+    const files = Array.from(event.target.files) as File[];
+    this.uploadedEvidence = [...this.uploadedEvidence, ...files];
+    // You can add logic to save evidence to the case or backend here
+  }
+
+  showEvidencePanel(c: PoliceCase): void {
+    if (!c.caseId) return;
+    this.evidencePanelCase = c;
+    this.evidenceType = 'Document';
+    if (!this.evidenceFiles[c.caseId]) {
+      this.evidenceFiles[c.caseId] = { Document: [], Photo: [] };
+    }
+  }
+
+  setEvidenceType(type: EvidenceType): void {
+    this.evidenceType = type;
+  }
+
+  onEvidenceFileSelectType(event: any): void {
+    const files = Array.from(event.target.files) as File[];
+    if (this.evidencePanelCase && this.evidencePanelCase.caseId) {
+      this.evidenceFiles[this.evidencePanelCase.caseId][this.evidenceType].push(...files);
+    }
+  }
+
+  getEvidenceIcon(filename: string): string {
+    if (filename.match(/\.(jpg|jpeg|png|gif)$/i)) return 'fas fa-camera';
+    if (filename.match(/\.(mp4|avi|mov)$/i)) return 'fas fa-film';
+    if (filename.match(/\.(pdf)$/i)) return 'fas fa-file-pdf';
+    return 'fas fa-file';
+  }
+
+  viewEvidenceFile(file: File): void {
+    const url = URL.createObjectURL(file);
+    window.open(url, '_blank');
+  }
 }

src/app/case-store.service.ts

@@ -1,8 +1,19 @@
 import { Injectable } from '@angular/core';
 
+export interface LegalInfo {
+  witnessStatements: string;
+  confessions: string;
+  evidence: File[]; // Assuming you're collecting file(s) as evidence
+}
+
 export interface PoliceCase {
   // Optional metadata used by your UI
   caseId?: string;
+  firRef?: string;
+  occurredFrom?: string;
+  occurredTo?: string;
+  jurisdiction?: string;
+  sceneType?: string;
   dateTime?: string;
   status?: 'Open' | 'Under Investigation' | 'Closed';
   crime: string;
@@ -22,6 +33,12 @@ export interface PoliceCase {
     address: string;
     occupation?: string;
   };
+  legal: LegalInfo; // Add the legal property here
+  victimName?: string;
+  caseCategory?: string;
+  reportedBy?: string;
+  lastUpdated?: string;
+  verifiedBy?: string;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -34,7 +51,21 @@ export class CaseStoreService {
   }
 
   /** Create (newest first) */
+  private getNextCaseId(): string {
+    const max = this.cases
+      .map(c => c.caseId)
+      .map(id => parseInt((id || '').replace('CASE-', ''), 10))
+      .filter(n => !isNaN(n))
+      .reduce((a, b) => Math.max(a, b), 0);
+    return `CASE-${(max + 1).toString().padStart(3, '0')}`;
+  }
+
   addPoliceCase(c: PoliceCase): void {
+    if (!c.caseId) {
+      c.caseId = this.getNextCaseId();
+    }
+    c.lastUpdated = new Date().toISOString();
+    c.verifiedBy = c.verifiedBy || '';
     this.cases.unshift(c);
     this.save();
   }
@@ -47,11 +78,20 @@ export class CaseStoreService {
   /** Update by array index */
   updatePoliceCaseAt(index: number, updated: PoliceCase): void {
     if (index >= 0 && index < this.cases.length) {
+      updated.lastUpdated = new Date().toISOString();
       this.cases[index] = updated;
       this.save();
     }
   }
 
+  /** Delete by array index */
+  deletePoliceCaseAt(index: number): void {
+    if (index >= 0 && index < this.cases.length) {
+      this.cases.splice(index, 1);
+      this.save();
+    }
+  }
+
   /**
    * Convenience: map Info page reactive-form value to PoliceCase and store it.
    * Call with the whole this.form.value from InfopageComponent.
@@ -60,17 +100,23 @@ export class CaseStoreService {
     const crime = (formValue && formValue.crime) || {};
     const suspect = (formValue && formValue.suspect) || {};
     const notes = (formValue && formValue.notes) || {};
+    const legal = (formValue && formValue.legal) || {};
 
     const mapped: PoliceCase = {
       caseId: crime.caseId || '',
+      firRef: crime['FIR / Ref #'] || formValue['FIR / Ref #'] || '',
+      occurredFrom: crime['Occurred From'] || formValue['Occurred From'] || '',
+      occurredTo: crime['Occurred To'] || formValue['Occurred To'] || '',
+      jurisdiction: crime['Jurisdiction / PS'] || formValue['Jurisdiction / PS'] || '',
+      sceneType: crime['Scene Type'] || formValue['Scene Type'] || '',
       dateTime: crime.dateTime || '',
       status: notes.status || 'Open',
       crime: crime.crimeType || 'Unknown',
       police: {
         name: notes.officerInCharge || '—',
-        station: '—',                   // not captured on Info page
+        station: '—',
         address: crime.location || '—',
-        pincode: '',                    // not captured on Info page
+        pincode: '',
         dutyPerson: notes.officerInCharge || '—',
         modeOfCrime: crime.crimeType || '—',
         information: notes.initialFindings || ''
@@ -81,7 +127,17 @@ export class CaseStoreService {
         gender: suspect.gender || '—',
         address: suspect.address || '—',
         occupation: suspect.alias || ''
-      }
+      },
+      legal: {
+        witnessStatements: legal.witnessStatements || '',
+        confessions: legal.confessions || '',
+        evidence: legal.evidence || []
+      },
+      victimName: crime.victimName || formValue['Victim Name'] || '',
+      caseCategory: crime.caseCategory || formValue['Case Category'] || '',
+      reportedBy: crime.reportedBy || formValue['Reported By'] || '',
+      lastUpdated: new Date().toISOString(),
+      verifiedBy: formValue.verifiedBy || '',
     };
 
     this.addPoliceCase(mapped);

src/app/homepage/homepage.component.css

@@ -2,8 +2,7 @@ body, html {
   margin: 0;
   padding: 0;
   font-family: 'Arial', 'Segoe UI', 'Roboto', sans-serif;
-  background: url('/assets/background.jpg') no-repeat center center fixed !important;
-  background-size: cover !important;
+  /* Background is managed globally via body.homepage-bg in styles.css */
 }
 
 .homepage-container {
@@ -65,14 +64,19 @@ body, html {
 /* Add gap between logo and browser border */
 .logo-img {
   width: 6vw;
-  height: 6vw;
-  border-radius: 50%;
-  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
   position: fixed;
-  top: 18px; /* Add gap from top */
-  left: 18px; /* Add gap from left */
+  top: 21px;
+  left: 36px;
   z-index: 300;
   margin: 0;
+  background: #ffffff;
+  max-width: 4.2vw;
+  min-width: 56px;
+  height: auto;
+  border-radius: 50%;
+  padding: 4px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+  transition: transform .25s ease;
 }
 
 /* Move Py-Detect text further down by increasing top value of .logo-title-row */
@@ -91,10 +95,10 @@ body, html {
 
 .py-detect-title {
   position: fixed;
-  margin-left: 132px;
-  margin-top: -208px;
+  margin-left: 97px;
+  margin-top: -228px;
   text-align: left;
-  font-size: 4vw;
+  font-size: 3vw;
   color: #38bdf8;
   font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
   font-weight: 900;
@@ -125,6 +129,18 @@ body, html {
     border: 2px solid #23272b;
   }
 
+.py-shape {
+  display: inline-block;
+  width: 18px;
+  height: 4px;
+  background: #38bdf8;
+  margin: 0 8px;
+  vertical-align: middle;
+  border-radius: 2px;
+  box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+  border: 2px solid #23272b;
+}
+
   .py-detect-title .py-letter.d {
     color: #e3f6ff;
     text-shadow: 0 0 6px #38bdf8;
@@ -212,6 +228,49 @@ body, html {
   height: 100vh;
 }
 
+.auth-topright {
+  position: fixed;
+  top: 46px;
+  right: 48px;
+  z-index: 200;
+  display: flex;
+  gap: 18px;
+}
+
+.auth-btn {
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #e3f6ff;
+  box-shadow: 0 2px 16px #38bdf888;
+  border: none;
+  border-radius: 12px;
+  padding: 0.7rem 2rem;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+  .auth-btn:hover {
+    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+.py-detect-image {
+  width: 420px;
+  max-width: 100%;
+  height: auto;
+  border-radius: 24px;
+  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+  border: 3px solid #38bdf8;
+  background: #23272b;
+  margin-top: 48px;
+  margin-bottom: 48px;
+  display: block;
+}
+
 .sign-in-form {
   background: rgba(30,41,59,0.92);
   padding: 32px 48px 32px 64px; /* Reduced vertical and horizontal padding */
@@ -535,469 +594,141 @@ label {
     box-shadow: 0 8px 24px #38bdf888;
   }
 
-/* Keep app-sign-in/up wrapper */
-.app-sign-in, .app-sign-up {
-  position: relative;
-  background: #fff;
-  border-radius: 14px;
-  box-shadow: 0 20px 60px rgba(0,0,0,.35);
-}
-
-.py-shape {
-  display: inline-block;
-  width: 18px;
-  height: 4px;
-  background: #38bdf8;
-  margin: 0 8px;
-  vertical-align: middle;
-  border-radius: 2px;
-  box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
-  border: 2px solid #23272b;
-}
-
-.auth-topright {
-  position: fixed;
-  top: 32px;
-  right: 48px;
-  z-index: 200;
-  display: flex;
-  gap: 18px;
-}
-
-.auth-btn {
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1.1rem;
-  font-weight: 700;
-  letter-spacing: 2px;
-  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
-  color: #e3f6ff;
-  box-shadow: 0 2px 16px #38bdf888;
-  border: none;
-  border-radius: 12px;
-  padding: 0.7rem 2rem;
-  cursor: pointer;
-  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-}
-
-  .auth-btn:hover {
-    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
-    color: #bae6fd;
-    box-shadow: 0 2px 24px #bae6fd88;
-  }
 
-.py-detect-image {
-  width: 420px;
-  max-width: 100%;
-  height: auto;
-  border-radius: 24px;
-  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
-  border: 3px solid #38bdf8;
-  background: #23272b;
-  margin-top: 48px;
-  margin-bottom: 48px;
-  display: block;
-}
+/* Preserve existing header logo/title and auth buttons styles from before (no change) */
 
-/* Footer Styles */
-.footer {
-  background: linear-gradient(90deg, #18181b 0%, #38bdf8 100%); /* Dual color: black to cyan */
-  color: #fff; /* All text white */
-  padding: 0; /* Remove extra padding for a slim footer */
-  text-align: center;
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 200;
-  height: 46px; /* Further reduced height for a slim footer */
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* New Landing styles (scoped to homepage to avoid affecting auth pages) */
+.landing {
+  min-height: 100vh;
+  /* Use global body.homepage-bg background; remove local hero override */
+  background: transparent;
+  color: #fff;
 }
 
-.footer-content {
+/* Simple navbar that does not override existing top-right auth */
+.navbar {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 32px;
-  gap: 64px;
-}
-
-.footer-left,
-.footer-center,
-.footer-right {
-  margin: 0;
-  min-width: 0;
-  flex: 1 1 1;
-  display: flex;
-  align-items: center;
-  color: #fff !important;
-  justify-content: center;
-}
-
-.footer-center,
-.footer-right {
-  color: #fff !important;
-}
-
-  .footer-center .footer-links {
-    display: flex;
-    flex-direction: row;
-    gap: 32px;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-  }
-
-    .footer-center .footer-links li {
-      display: flex;
-      align-items: center;
-      margin: 0;
-    }
-
-  .footer-right .social-media {
-    display: flex;
-    flex-direction: row;
-    gap: 18px;
-    align-items: center;
-    margin-left: 24px;
-  }
-
-  .footer-center .footer-links a {
-    color: #fff !important;
-    text-decoration: none !important;
-  }
-
-  .footer-center .footer-links a:hover {
-    color: #38bdf8 !important;
-    text-decoration: none !important;
-  }
-
-  .footer-right .social-media a,
-  .footer-right .social-media i {
-    color: #fff !important;
-    text-decoration: none !important;
-  }
-
-@media screen and (max-width: 900px) {
-  .footer-content {
-    flex-direction: column;
-    gap: 16px;
-    padding: 8px 8px;
-  }
-
-  .footer-left,
-  .footer-center,
-  .footer-right {
-    justify-content: center;
-    width: 100%;
-    margin: 0;
-  }
-
-    .footer-center .footer-links {
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 12px;
-      white-space: normal;
-    }
-
-    .footer-right .social-media {
-      margin-left: 0;
-      justify-content: center;
-    }
-}
-
-/* Align detection info boxes to start from left, with space at right */
-.detection-info-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 24px;
-  justify-content: flex-start;
-  align-items: stretch;
-  margin: 0 0 0 48px; /* Add left margin, remove auto centering */
-  width: auto;
-  max-width: 1200px;
-}
-
-.detection-info-box {
-  background: rgba(30,41,59,0.92);
-  border-radius: 16px;
-  box-shadow: 0 2px 16px #38bdf844, 0 0 12px #1e293b88;
-  border-left: 6px solid #38bdf8;
-  border-top: 2px solid #1e293b;
-  padding: 18px 24px 16px 24px;
-  min-width: 220px;
-  max-width: 280px;
-  flex: 1 1 0;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
-  color: #e3f6ff;
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 1.5;
-  letter-spacing: 0.5px;
-  position: relative;
-  margin-bottom: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  opacity: 0;
-  transform: translateY(40px) scale(0.98);
-  animation: detectionBoxFadeIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
-  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s;
-}
-
-  .detection-info-box:hover {
-    transform: scale(1.06);
-    box-shadow: 0 8px 32px #38bdf888, 0 0 24px #1e293b88;
-    z-index: 10;
-  }
-
-  .detection-info-box:nth-child(2) {
-    animation-delay: 0.15s;
-  }
-
-  .detection-info-box:nth-child(3) {
-    animation-delay: 0.3s;
-  }
-
-  .detection-info-box:nth-child(4) {
-    animation-delay: 0.45s;
-  }
-
-@keyframes detectionBoxFadeIn {
-  0% {
-    opacity: 0;
-    transform: translateY(40px) scale(0.98);
-  }
-
-  80% {
-    opacity: 1;
-    transform: translateY(-4px) scale(1.02);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .detection-info-row {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .detection-info-box {
-    max-width: 98vw;
-    min-width: 0;
-    font-size: 15px;
-    padding: 14px 6vw;
-  }
-}
-
-@media screen and (max-width: 900px) {
-  .detection-info-row {
-    flex-direction: column;
-    gap: 18px;
-    align-items: center;
-  }
-
-  .detection-info-box {
-    max-width: 98vw;
-    min-width: 0;
-    font-size: 15px;
-    padding: 14px 6vw;
-    height: auto;
-  }
-}
-
-/* Footer social icon styles */
-.footer-social-icon {
-  width: 32px;
-  height: 32px;
-  margin: 0 8px;
-  vertical-align: middle;
-  filter: drop-shadow(0 0 6px #38bdf8);
-  transition: transform 0.2s, filter 0.2s;
-}
-
-  .footer-social-icon:hover {
-    transform: scale(1.15);
-    filter: drop-shadow(0 0 12px #bae6fd);
-  }
-
-/* Style for Next button in footer */
-.footer-next-btn {
-  margin-left: 24px;
-  padding: 12px 32px;
-  font-size: 1.1rem;
-  font-weight: 600;
-  border-radius: 10px;
-  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
-  color: #e3f6ff;
-  border: none;
-  box-shadow: 0 2px 12px #38bdf888;
-  cursor: pointer;
-  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-}
-
-  .footer-next-btn:hover {
-    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
-    color: #bae6fd;
-    box-shadow: 0 2px 24px #bae6fd88;
-  }
-
-.tour-btn {
-  background: linear-gradient(90deg, #38bdf8 0%, #712d74 100%);
+  padding: 15px 30px;
+}
+.navbar h1 { font-size: 22px; letter-spacing: 2px; margin: 0; }
+.nav-right { display: flex; align-items: center; gap: 15px; }
+
+/* Dropdown */
+.dropdown { position: relative; display: inline-block; }
+.dropbtn { background-color: #222; color: #fff; padding: 10px 16px; border: none; cursor: pointer; border-radius: 4px; }
+.dropdown-content { display: none; position: absolute; right: 0; background: #333; min-width: 180px; box-shadow: 0 8px 16px rgba(0,0,0,.3); border-radius: 4px; z-index: 1; }
+.dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; }
+.dropdown-content a:hover { background: #444; }
+.dropdown:hover .dropdown-content { display: block; }
+
+/* Buttons */
+.btn {
+  background: #c62828;
   color: #fff;
-  font-size: 1.2rem;
-  font-weight: 700;
   border: none;
-  border-radius: 12px;
-  padding: 14px 38px;
-  box-shadow: 0 2px 16px #38bdf888;
+  padding: 10px 16px;
+  border-radius: 4px;
   cursor: pointer;
-  margin: 0 auto;
-  display: block;
-  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-}
-
-  .tour-btn:hover {
-    background: linear-gradient(90deg, #712d74 0%, #38bdf8 100%);
-    color: #bae6fd;
-    box-shadow: 0 2px 24px #bae6fd88;
-  }
-
-.tour-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(24,24,27,0.92);
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-weight: bold;
+  text-decoration: none;
 }
+.btn:hover { background: #e53935; }
 
-.tour-content {
-  background: #23272b;
-  color: #fff;
-  border-radius: 18px;
-  padding: 48px 36px 36px 36px;
-  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
-  max-width: 480px;
-  width: 90vw;
+/* Hero */
+.hero {
   text-align: center;
-  position: relative;
-}
-
-.tour-close {
-  position: absolute;
-  top: 18px;
-  right: 18px;
-  width: 44px;
-  height: 44px;
-  border: none;
-  background: #18181b;
-  color: #fff;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 2rem;
-  font-weight: bold;
+  min-height: 31vh;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-  z-index: 10;
-  transition: background 0.2s, color 0.2s;
-}
-
-  .tour-close:hover {
-    background: #333;
-    color: #f134d0;
-  }
-
-.tour-next {
-  margin-top: 24px;
-  background: linear-gradient(90deg, #38bdf8 0%, #712d74 100%);
-  color: #fff;
-  font-size: 1rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 10px;
-  padding: 12px 32px;
-  box-shadow: 0 2px 12px #38bdf888;
-  cursor: pointer;
-  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-}
-
-  .tour-next:hover {
-    background: linear-gradient(90deg, #712d74 0%, #38bdf8 100%);
-    color: #bae6fd;
-    box-shadow: 0 2px 24px #bae6fd88;
-  }
-
-.info-link {
-  margin-left: 12px;
-  color: #38bdf8;
-  font-size: 0.95em;
-  cursor: pointer;
-  text-decoration: underline;
-  font-weight: 500;
-  transition: color 0.2s;
-}
-
-  .info-link:hover {
-    color: #bae6fd;
-  }
-
-.detection-info-box .detection-description,
-.detection-info-box .detection-list {
-  margin-top: 10px;
-}
-
-.detection-icon {
-  font-size: 3vw;
-}
-
-.detection-info-box .detection-icon {
-  font-size: 3vw !important;
+  align-items: center;
+  padding: 2vw;
+  position: fixed;
+  top: 37vh;
+  left: calc(100% - 68vw);
+  width: 32vw;
+  text-wrap: auto;
+  font-weight: 800;
+  /*background: #011329d6;*/
+  border-radius: 4vw;
 }
 
-.welcome-title {
-  margin-left: 12px;
-  margin-bottom: 8px;
+.blue-section, .how-to-use, .features {
+  position: relative;
+  z-index: 1;
+}
+
+
+/* Specialisations */
+.specialisations { padding: 25px 10%; text-align: center; background: linear-gradient(to right, #011329 0%, #010207 23%, #71a4c2 23%, #0171a3 77%, #010207 77%, #011329 100%); }
+.specialisation-cards { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
+.card { background: #fff; padding: 40px 30px; flex: 1 1 350px; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,.1); transition: transform .3s; }
+.card:hover { transform: translateY(-8px); }
+.card .icon { font-size: 48px; margin-bottom: 20px; color: #c62828; }
+.card h3 { font-size: 20px; margin-bottom: 15px; color: #c62828; }
+.card p { font-size: 16px; line-height: 1.6; color: #000; }
+
+/* Mission */
+.mission { background: transparent; color: #fff; padding: 60px 10%; text-align: center; }
+.mission-row { display: flex; justify-content: space-between; gap: 30px; margin-top: 20px; margin-left: 7vw; flex-wrap: wrap; }
+.mission-left, .mission-right { flex: 1; min-width: 300px; text-align: left; font-size: 16px; line-height: 1.6; color: #f0f4f8; }
+
+/* Features */
+.features { padding: 60px 10%; background: #011329; color: #010207; }
+.feature-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; background: #f9f9f9; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: 30px; gap: 20px; flex-wrap: wrap; }
+.feature-row.reverse { flex-direction: row-reverse; }
+.feature-text { flex: 1 1 320px; padding: 20px; }
+.feature-text h2 { color: #c62828; margin-bottom: 15px; }
+.feature-text p { font-size: 20px; line-height: 1.6; }
+.feature-image { flex: 1 1 320px; padding: 20px; }
+.feature-image img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,.2); }
+
+/* Footer */
+footer { background: linear-gradient(to right, #011022, #01030a); color: #fff; text-align: center; padding: 15px 10px; }
+footer a { color: #fff; text-decoration: none; margin: 0 10px; }
+footer .social-icons { margin-top:12px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
+footer .social-icons .si-wrap { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; letter-spacing:.5px; font-family:'Segoe UI', Arial, sans-serif; color:#cfe9f7; }
+footer .social-icons .si-wrap .si-text { transition:color .25s; }
+footer .social-icons .si { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#122434; color:#38bdf8; font-size:18px; box-shadow:0 0 0 1px #214055, 0 4px 14px #0006; transition:background .25s, color .25s, transform .25s, box-shadow .25s; text-decoration:none; }
+footer .social-icons .si:hover { background:#38bdf8; color:#0c2533; transform:translateY(-4px); box-shadow:0 6px 20px #38bdf8aa,0 0 0 2px #38bdf8 inset; }
+footer .social-icons .si-wrap:hover .si-text { color:#ffffff; }
+footer .social-icons .si.fb { background:#1877f2; color:#fff; }
+footer .social-icons .si.fb:hover { background:#fff; color:#1877f2; }
+footer .social-icons .si.yt { background:#ff0000; color:#fff; }
+footer .social-icons .si.yt:hover { background:#fff; color:#ff0000; }
+footer .social-icons .si.li { background:#0a66c2; color:#fff; }
+footer .social-icons .si.li:hover { background:#fff; color:#0a66c2; }
+footer .social-icons .si.ig { background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; }
+footer .social-icons .si.ig:hover { filter:brightness(1.15); color:#fff; box-shadow:0 6px 22px rgba(253,89,73,.6); }
+
+/* Keep existing modal styling (unchanged) */
+.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; }
+.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; z-index: 1001; background: #ffffff45; }
+
+/* Ensure info dialog is a real centered popup overlay */
+.dialog-modal {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 2001; /* above backdrop and page */
+  pointer-events: auto;
 }
 
-.main-title {
-  font-size: 2.2em;
-  font-weight: bold;
-  background: linear-gradient(90deg, #f134d0 0%, #38bdf8 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-fill-color: transparent;
-  letter-spacing: 2px;
+.modal-backdrop--fade {
+  animation: fadeInBackdrop .25s ease-out both;
 }
 
-.sub-title {
-  font-size: 1.2em;
-  font-weight: bold;
-  color: #fff;
+.dialog-modal--zoom {
+  animation: zoomInModal .28s cubic-bezier(0.23, 1, 0.32, 1) both;
 }
 
-.detection-description {
-  margin: 12px 0 18px 0;
-  color: #e3f6ff;
-  font-size: 1em;
-  font-weight: 400;
+/* Dialog card sizing */
+.dialog-content {
+  max-width: 720px;
+  width: min(92vw, 720px);
 }
 
 .read-more-btn {
@@ -1116,3 +847,130 @@ label {
     background: #333;
     color: #38bdf8;
   }
+
+.back-colo {
+  background: #011329;
+  width: 100%;
+  height: 7vw;
+  position: fixed;
+  z-index: 3;
+}
+
+/* how to use */
+.how-to-use {
+  padding: 80px 10%;
+  text-align: center;
+  background: linear-gradient(to right, #011329 0%, #010207 23%, #01040b 23%, #01030a 77%, #010207 77%, #011329 100%);
+  color: #fff;
+}
+
+
+  .how-to-use .section-title {
+    font-size: 28px;
+    color: #0d9de3; /* blue highlight */
+    margin-bottom: 10px;
+  }
+
+  .how-to-use .section-subtitle {
+    font-size: 16px;
+    color: #f0f4f8;
+    margin-bottom: 40px;
+  }
+
+.use-cards {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 25px;
+}
+
+.use-card {
+  background: #fff;
+  color: #000;
+  flex: 1 1 calc(20% - 20px); /* 5 cards in a row */
+  min-width: 220px;
+  border-radius: 12px;
+  padding: 25px 20px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  transition: transform 0.3s;
+}
+
+  .use-card:hover {
+    transform: translateY(-6px);
+  }
+
+  .use-card .icon {
+    font-size: 40px;
+    margin-bottom: 15px;
+    color: #3328c6; /* red accent */
+  }
+
+  .use-card h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: #3328c6;
+  }
+
+  .use-card p {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #000;
+  }
+
+.social-icons {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.social-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+footer .social-icons {
+  margin-top: 10px;
+}
+
+  footer .social-icons img {
+    width: 25px;
+    margin: 0 8px;
+    vertical-align: middle;
+  }
+
+.social-icon:hover {
+  transform: translateY(-3px);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Specific colors for each platform */
+.social-icon.facebook:hover {
+  background: #3b5998;
+  box-shadow: 0 4px 8px rgba(59, 89, 152, 0.3);
+}
+
+.social-icon.youtube:hover {
+  background: #ff0000;
+  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
+}
+
+.social-icon.linkedin:hover {
+  background: #0077b5;
+  box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
+}
+
+.social-icon.instagram:hover {
+  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+  box-shadow: 0 4px 8px rgba(188, 24, 136, 0.3);
+}

src/app/homepage/homepage.component.html

@@ -1,4 +1,5 @@
 <!-- Logo and Py-Detect Title (kept as your last version) -->
+<div class="back-colo">
 <div class="logo-title-row">
   <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img" />
   <div class="py-detect-title">
@@ -13,100 +14,240 @@
     <span class="py-letter t2">T</span>
   </div>
 </div>
+</div>
+
+<!-- Top-right auth buttons (unchanged) -->
+<div class="auth-topright">
+   <button class="auth-btn" (click)="openSignIn()">Sign In</button>
+  <button class="auth-btn" (click)="openSignUp()">Sign Up</button>
+</div>
 
-<div class="homepage-container">
-  <!-- Top-right: Sign-In/Sign-Up buttons (reverted; unchanged from your last version) -->
-  <div class="auth-topright">
-    <button class="auth-btn" (click)="openSignIn()">Sign In</button>
-    <button class="auth-btn" (click)="openSignUp()">Sign Up</button>
+<!-- New Landing Hero + Sections -->
+<div class="landing">
+  <!-- Hero Section -->
+  <div class="hero">
+    <h2>Real-Time Truth & Deception Detection</h2>
+    <p>
+      One intelligent platform for law enforcement, recruiters, and security teams.
+      Analyse verbal responses and body language in real-time to detect deception, assess risks, and build trust.
+    </p>
+    <a href="#" class="btn know-more" (click)="openInfoDialog(); $event.preventDefault()">Know More</a>
   </div>
+</div>
+
+
+<!-- Blue Background Wrapper -->
+<div class="blue-section">
+  <section class="specialisations">
+    <!-- Mission Section -->
+    <section class="mission">
+      <h2 class="section-title">OUR MISSION IS SIMPLE & IMPACTFUL</h2>
+      <div class="mission-row">
+        <div class="mission-left">
+          <p>
+            Py-Detect is designed to reduce deception, fraud, and risk by enabling
+            investigators, recruiters, and security professionals to uncover hidden truths
+            with precision and speed. Our goal is to create safer communities, fairer
+            recruitment processes, and stronger organisational security.
+          </p>
+        </div>
+        <div class="mission-right">
+          <p>
+            By combining AI-powered verbal analysis, body language<br> detection, and facial
+            recognition, Py-Detect provides<br> real-time deception scores and behavioural insights.<br>
+            This empowers law enforcement, HR teams, and security<br> officers to make
+            confident, evidence-based decisions that<br> enhance safety, trust, and efficiency.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <div class="specialisation-cards">
+      <!-- Card 1 -->
+      <div class="card">
+        <i class="fas fa-user-secret icon"></i>
+        <h3>AI-Powered Investigation</h3>
+        <p>
+          Advanced NLP and computer vision analyse verbal and non-verbal cues in real time,
+          supporting law enforcement with reliable truth detection.
+        </p>
+      </div>
 
-  <!-- Left-side instruction/info (position unchanged) -->
-  <div class="left-instructions"
-       style="position: absolute; left: 0; width: 50vw; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 80px; z-index: 10;">
-    <div style="max-width: 520px;">
-      <h1 style="font-size:2.5em; font-weight:800; color:#38bdf8; margin-bottom:12px;">
-        Welcome to Py-Detect
-      </h1>
-      <div style="font-size: 1.2em; color: #e3f6ff; margin-bottom: 18px; width: 33vw; text-align: justify;">
-        {{ welcomeText }}
+      <!-- Card 2 -->
+      <div class="card">
+        <i class="fas fa-bullseye icon"></i>
+        <h3>High Accuracy</h3>
+        <p>
+          Trained on diverse behavioural datasets, Py-Detect delivers strong accuracy across
+          multiple scenarios including crime, recruitment, and security.
+        </p>
       </div>
-      <!-- Know More as a styled button -->
-      <button class="know-more-btn" (click)="openInfoDialog()"
-              style="font-size:1.1em; font-weight:600; color:#fff;
-                     background:linear-gradient(90deg,#38bdf8 0%,#23272b 100%);
-                     border:none; border-radius:22px; padding:10px 32px;
-                     box-shadow:0 2px 12px #38bdf888; cursor:pointer;
-                     transition:background 0.3s, color 0.3s, box-shadow 0.3s;
-                     margin-top:8px; letter-spacing:1px;">
-        Know more
-      </button>
+
+      <!-- Card 3 -->
+      <div class="card">
+        <i class="fas fa-shield-alt icon"></i>
+        <h3>Secure & Scalable</h3>
+        <p>
+          Built with data privacy in mind, Py-Detect ensures secure handling of sensitive inputs
+          while scaling for enterprise or government use.
+        </p>
+      </div>
+    </div>
+  </section>
+</div>
+
+<!-- How to Use Section -->
+<section class="how-to-use">
+  <h2 class="section-title">How to Use Py-Detect?</h2>
+  <p class="section-subtitle">
+    Py-Detect supports both <strong>Admins</strong> (e.g., Inspectors) and <strong>Users</strong> (e.g., Constables) 
+    to manage cases, conduct investigations, and analyse suspects with AI.
+  </p>
+
+  <div class="use-cards">
+    <!-- Step 1 -->
+    <div class="use-card">
+      <i class="fas fa-user-tie icon"></i>
+      <h3>1. Admin Creates Case</h3>
+      <p>
+        The Admin (Inspector) logs in, enters case details, and assigns 
+        the investigation to specific users.
+      </p>
+    </div>
+
+    <!-- Step 2 -->
+    <div class="use-card">
+      <i class="fas fa-user-check icon"></i>
+      <h3>2. User Views Assignment</h3>
+      <p>
+        Assigned Users (Constables) log in to see their cases, 
+        review case details, and prepare for investigation.
+      </p>
+    </div>
+
+    <!-- Step 3 -->
+    <div class="use-card">
+      <i class="fas fa-video icon"></i>
+      <h3>3. Investigation Recording</h3>
+      <p>
+        During interrogation, the system generates AI-based questions. 
+        Video and audio responses are recorded in real time.
+      </p>
+    </div>
+
+    <!-- Step 4 -->
+    <div class="use-card">
+      <i class="fas fa-brain icon"></i>
+      <h3>4. AI Analysis</h3>
+      <p>
+        Py-Detect analyses tone, body language, and facial expressions 
+        to produce a deception score and behavioural insights.
+      </p>
+    </div>
+
+    <!-- Step 5 -->
+    <div class="use-card">
+      <i class="fas fa-file-alt icon"></i>
+      <h3>5. Report & Decision</h3>
+      <p>
+        A final AI-powered prediction report is generated, 
+        helping investigators make evidence-based decisions quickly.
+      </p>
     </div>
   </div>
+</section>
 
-  <!-- Optional tour overlay (unchanged) -->
-  <div class="tour-overlay" *ngIf="showTourOverlay">
-    <div class="tour-content">
-      <button class="tour__close" (click)="showTourOverlay = false" aria-label="Close">×</button>
-      <h2>Welcome to Py-Detect!</h2>
-      <p>Discover what Py-Detect can do for you:</p>
-      <ul>
-        <li>🕵️ Intelligent lie detection platform</li>
-        <li>🔍 AI-powered analysis of responses</li>
-        <li>🎯 Designed for investigators, educators, HR, and more</li>
-        <li>💡 Fast, non-invasive, and data-driven insights</li>
-      </ul>
-      <button class="tour-next" (click)="showTourOverlay = false">Got it!</button>
+<!-- Features Section -->
+<section id="features" class="features">
+  <!-- Crime Investigation -->
+  <div class="feature-row">
+    <div class="feature-text">
+      <h2>Crime Investigation</h2>
+      <p>
+        Py-Detect assists law enforcement and police by analysing suspects’ verbal responses
+        and body language during interrogations. With AI-driven facial recognition, tone analysis,
+        and micro-expression detection, investigators gain deeper behavioural insights and
+        a real-time deception score to uncover hidden truths.
+      </p>
+    </div>
+    <div class="feature-image">
+      <img src="assets/3.JPG" alt="Crime Investigation">
     </div>
   </div>
-</div>
 
-<!-- Footer (unchanged) -->
-<footer class="footer">
-  <div class="footer-content">
-    <div class="footer-left">
-      <p>© 2025 Pykara Technologies. All rights reserved.</p>
+  <!-- Recruitment Analysis -->
+  <div class="feature-row reverse">
+    <div class="feature-image">
+      <img src="assets/6.JPG" alt="Recruitment Analysis">
     </div>
-    <div class="footer-center">
-      <ul class="footer-links">
-        <li><a href="/about">About Us</a></li>
-        <li><a href="/contact">Contact</a></li>
-        <li><a href="/privacy">Privacy Policy</a></li>
-        <li><a href="/terms">Terms & Conditions</a></li>
-      </ul>
+    <div class="feature-text">
+      <h2>Recruitment Analysis</h2>
+      <p>
+        In hiring processes, Py-Detect supports recruiters by evaluating candidates’ speech clarity,
+        consistency, and emotional cues during interviews. AI-based analysis highlights honesty levels
+        and potential stress indicators, enabling smarter, bias-free hiring decisions.
+      </p>
     </div>
-    <div class="footer-right">
-      <div class="social-media">
-        <a href="https://facebook.com" target="_blank" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
-        <a href="https://twitter.com" target="_blank" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a>
-        <a href="https://linkedin.com" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
-        <a href="https://instagram.com" target="_blank" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
-      </div>
+  </div>
+
+  <!-- Court Room -->
+  <div class="feature-row">
+    <div class="feature-text">
+      <h2>Court Room</h2>
+      <p>
+        Py-Detect strengthens courtroom proceedings by analysing witnesses’ verbal
+        responses, tone, and body language in real time. The system highlights potential
+        stress indicators, inconsistencies, and deception cues, providing judges and
+        legal professionals with deeper behavioural insights.
+        This ensures more reliable evaluations, supports fair trials, and reduces the
+        risks of biased or inaccurate testimony.
+      </p>
+    </div>
+    <div class="feature-image">
+      <img src="assets/4.JPG" alt="Court Room">
     </div>
   </div>
+</section>
+
+<!-- Footer from provided design -->
+<footer>
+  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  <a href="#">Contact</a> |
+  <a href="#">Privacy Policy</a> |
+  <a href="#">Terms & Conditions</a>
+  <div class="social-icons">
+    <a href="#" class="social-icon facebook" aria-label="Facebook">
+      <i class="fab fa-facebook-f"></i>
+    </a>
+    <a href="#" class="social-icon youtube" aria-label="YouTube">
+      <i class="fab fa-youtube"></i>
+    </a>
+    <a href="#" class="social-icon linkedin" aria-label="LinkedIn">
+      <i class="fab fa-linkedin-in"></i>
+    </a>
+    <a href="#" class="social-icon instagram" aria-label="Instagram">
+      <i class="fab fa-instagram"></i>
+    </a>
+  </div>
 </footer>
 
 <!-- ===== Auth Modals (unchanged) ===== -->
 <div class="modal-backdrop" *ngIf="showSignIn || showSignUp" (click)="closeModal()"></div>
 <div class="modal" *ngIf="showSignIn || showSignUp" role="dialog" aria-modal="true">
   <ng-container *ngIf="showSignIn">
-    <button class="signin-close" (click)="closeModal()" aria-label="Close">×</button>
-    <app-sign-in (switchToSignUp)="openSignUp()"
-                 (signInSuccess)="handleSignInSuccess()">
+    <app-sign-in (switchToSignUp)="openSignUp()" (close)="closeModal()">
     </app-sign-in>
   </ng-container>
   <ng-container *ngIf="showSignUp">
-    <button class="signup-close" (click)="closeModal()" aria-label="Close">×</button>
-    <app-sign-up (switchToSignIn)="openSignIn()">
+    <app-sign-up (switchToSignIn)="openSignIn()" (close)="closeModal()">
     </app-sign-up>
   </ng-container>
 </div>
 
-<!-- ===== Info Dialog (unchanged) ===== -->
+<!-- ===== Info Dialog ===== -->
 <div class="modal-backdrop modal-backdrop--fade" *ngIf="showInfoDialog" (click)="closeInfoDialog()"></div>
 <div class="modal dialog-modal dialog-modal--zoom" *ngIf="showInfoDialog" role="dialog" aria-modal="true" aria-label="About Py-Detect">
-  <div class="dialog-content">
-    <!-- Close button at top-right (replaces Back) -->
+  <div class="dialog-content" (click)="$event.stopPropagation()">
     <button class="dialog-close" (click)="closeInfoDialog()" aria-label="Close">×</button>
 
     <h3>How It Works</h3>
@@ -119,3 +260,5 @@
     <p>It is fast, non-invasive, configurable for different scenarios, and supports decisions with clear, data-driven evidence.</p>
   </div>
 </div>
+
+

src/app/homepage/sign-in/sign-in.component.css

@@ -1,243 +1,226 @@
-:host {
-  display: block
-}
-
-
-.auth-box {
-  width: 54vw;
-  display: grid;
-  grid-template-columns: 1fr;
-  background: #2b1b6b;
-  border-radius: 18px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px 0 #18181b, 0 0 32px #38bdf888;
-  min-height: 420px;
-  max-height: 520px;
-  z-index: 1100;
-  animation: popupZoomIn .35s cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-@keyframes popupZoomIn {
-  0% { opacity: 0; transform: scale(0.96) translateY(16px); }
-  100% { opacity: 1; transform: scale(1) translateY(0); }
-}
-
-.panel-right {
-  position: relative;
-  background: radial-gradient(120% 120% at 20% 50%,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 60%);
-  width: 100%;
-  height: 100%;
+.signin-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
   display: flex;
-  align-items: stretch;
-  justify-content: stretch;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  background: rgb(30 41 59 / 67%);
 }
 
-.right-image {
-  width: 100%;
-  height: 100%;
+.signin-header {
+  width: 420px;
+  max-width: 95vw;
   display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-}
-
-.right-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.panel-left {
-  padding: clamp(22px,3vw,38px);
-  background: white;
-  color: black;
-}
-
-.brand-mark {
-  width: 4vw;
-  margin-bottom: 14px;
-  border: 2px solid #b1b1b17d;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-
-.title {
-  margin: 0 0 6px;
-  font-size: clamp(22px,3vw,26px);
-  font-weight: 700
-}
-.subtitle {
-  margin: 0 0 8px; /* Reduced space below Create Account text */
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 0;
+  position: absolute;
+  top: -28px;
+  right: 12px;
+  pointer-events: none;
+  z-index: 2;
 }
-
-.form {
-  display: grid;
-  gap: 12px
+.signin-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  pointer-events: auto;
 }
-
-.field {
-  display: grid;
-  gap: 6px
+.signin-login-link {
+  font-size: 1.1rem;
+  color: #fff;
+  margin-top: 0;
+  pointer-events: auto;
+  background: #18314a;
+  border-radius: 0 0 12px 12px;
+  padding: 8px 18px 4px 18px;
+  box-shadow: 0 2px 8px #0002;
+  position: relative;
+  right: 0;
+  top: 0;
 }
-
-label {
+.signin-login-link a {
+  color: #1de9b6;
+  text-decoration: underline;
+  margin-left: 6px;
   font-weight: 600;
-  font-size: 13px;
-}
-
-input[type="email"], input[type="password"] {
-  color: black;
-  border: 1px solid rgb(0 0 0 / 57%);
-  border-radius: 10px;
-  padding: 11px 12px;
-  outline: none
-}
-
-input::placeholder {
-  color: #808080;
+  cursor: pointer;
 }
-
-input:focus {
-  border-color: #a78bfa;
-  box-shadow: 0 0 0 3px rgba(167,139,250,.25)
+.signin-box {
+  background: #18314a;
+  border-radius: 22px;
+  box-shadow: 0 12px 48px #000a;
+  padding: 48px 38px 32px 38px;
+  width: 420px;
+  max-width: 95vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
-
-.error {
-  color: red;
-  font-size: 12px
+.signin-title {
+  color: #38bdf8;
+  font-size: 2.1rem;
+  font-weight: 800;
+  margin-bottom: 12px;
+  text-align: center;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 8px #0008;
 }
-
-.btn {
+form {
   width: 100%;
-  border-radius: 999px;
-  padding: 12px 18px;
-  cursor: pointer
-}
-
-.btn-primary {
-  background: #0b0f1a;
-  color: #fff;
-  border: none;
-  font-weight: 700
 }
-
-.btn[aria-busy="true"] {
-  opacity: .75;
-  cursor: progress
+.signin-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 18px;
 }
-
-.footnote {
-  margin: 14px 0 0;
-  font-size: 13px;
+.signin-field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
-
-  .footnote a {
-    color: red;
-    text-decoration: underline
-  }
-
-.admin-info {
-  margin: 10px 0 16px 0;
-  color: #f134d0;
-  font-size: 1em;
+.signin-field label {
+  color: #fff;
   font-weight: 600;
-  text-align: center;
+  margin-bottom: 6px;
+  font-size: 1rem;
+  letter-spacing: 0.5px;
 }
-
-.admin-checkbox {
+.signin-field input {
+  background: #fff;
+  color: #18314a;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 1rem;
+  margin-bottom: 2px;
+  box-shadow: 0 1px 4px #0002;
+  transition: border 0.2s, box-shadow 0.2s;
+}
+.signin-field input:focus {
+  outline: 2px solid #1de9b6;
+  border-color: #1de9b6;
+  box-shadow: 0 0 0 2px #1de9b688;
+}
+.signin-field input::placeholder {
+  color: #b0b8c1;
+  opacity: 1;
+}
+.signin-field small.error {
+  color: #ff5252;
+  font-size: 0.85rem;
+  margin-top: 2px;
+  text-shadow: 0 1px 2px #0008;
+}
+.signin-options-row {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  margin: 10px 0 0 0;
-}
-.admin-checkbox input[type="checkbox"] {
-  accent-color: #2b1b6b;
-  width: 18px;
-  height: 18px;
-}
-.admin-checkbox label {
-  color: #2b1b6b;
-  font-size: 1em;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-
-@keyframes fadeInBackdrop {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  margin-bottom: 12px;
+  margin-top: -8px;
 }
-
-@media(min-width:900px) {
-  .auth-box {
-    grid-template-columns: 520px 1fr
-  }
-}
-
-
-.topTitle {
+.remember-me {
   display: flex;
   align-items: center;
-  gap: 21px;
+  gap: 6px;
+  font-size: 1rem;
+  color: #b0b8c1;
+}
+  .remember-me input[type="checkbox"] {
+    accent-color: #38bdf8;
+    width: 16px;
+    height: 16px;
+  }
+.forgot-password {
+  font-size: 1rem;
 }
-
-.topHeader {
-  font-size: 1vw;
+.forgot-link {
+  color: #38bdf8;
+  text-decoration: underline;
+  font-weight: 500;
+  cursor: pointer;
 }
-
-.signin-close {
-  position: absolute;
-  top: 158px;
-  right: 450px;
-  width: 44px;
-  height: 3px;
+.signin-btn {
+  width: 100%;
+  background: #38bdf8;
+  color: #18314a;
   border: none;
-  background: #18181b;
-  color: #fff;
-  border-radius: 50%;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 18px;
   cursor: pointer;
-  font-size: 2rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-  z-index: 10;
   transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px #0003;
 }
-
-.signin-close:hover {
-  background: #333;
-  color: #f134d0;
+.signin-btn:hover {
+  background: #13bfa6;
 }
-
-.signin-close:hover, .signup-close:hover {
-  background: linear-gradient(135deg, #333 60%, #23272b 100%);
-  color: #38bdf8;
-  box-shadow: 0 8px 24px #38bdf888;
+.signin-footer {
+  color: #b0b8c1;
+  font-size: 0.95rem;
+  text-align: center;
+  margin-top: 8px;
 }
-
-.modal__close {
+.signin-footer .footer-sep {
+  display: block;
+  height: 16px;
+}
+  .signin-footer a {
+    color: #38bdf8;
+    text-decoration: underline;
+    margin-left: 4px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+.signin-close {
   position: absolute;
   top: 18px;
   right: 18px;
-  width: 44px;
-  height: 44px;
+  width: 38px;
+  height: 38px;
   border: none;
-  background: #18181b;
+  background: #14263c;
   color: #fff;
   border-radius: 50%;
-  cursor: pointer;
   font-size: 2rem;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  cursor: pointer;
   z-index: 10;
   transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px #0005;
 }
+  .signin-close:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
 
-.modal__close:hover {
-  background: #333;
-  color: #f134d0;
+@media (max-width: 700px) {
+  .signin-box {
+    padding: 18px 6vw 18px 6vw;
+    width: 98vw;
+  }
+  .signin-header {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 98vw;
+    padding: 0 0 12px 0;
+  }
+  .signin-title {
+    font-size: 1.3rem;
+  }
+  .signin-row {
+    flex-direction: column;
+    gap: 0;
+  }
 }

src/app/homepage/sign-in/sign-in.component.html

@@ -1,45 +1,44 @@
-<section class="auth-page">
-  <div class="signin-modal-backdrop"></div>
-  <div class="auth-box" role="dialog" aria-labelledby="siTitle">
-    <!-- Left (form) -->
-    <div class="panel-left">
-      <div class="topTitle">
-        <img class="brand-mark" src="/assets/pykara-logo.png" alt="Brand" />
-        <span class="topHeader"><b>Welcome back!</b></span>
+<section class="signin-popup">
+  <div class="signin-header">
+    <div class="signin-logo">
+      <!-- No logo or CO. text as per sign-up style -->
+    </div>
+  </div>
+  <div class="signin-box">
+    <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
+    <h2 class="signin-title">Log In</h2>
+    <form [formGroup]="form" (ngSubmit)="signIn()" novalidate>
+      <div class="signin-row">
+        <div class="signin-field">
+          <label for="email">Email</label>
+          <input id="email" type="email" placeholder="you@example.com" formControlName="email" [attr.aria-invalid]="form.get('email')?.invalid && form.get('email')?.touched" />
+          <small class="error" *ngIf="form.get('email')?.touched && form.get('email')?.hasError('required')">Email is required.</small>
+          <small class="error" *ngIf="form.get('email')?.touched && form.get('email')?.hasError('email')">Please enter a valid email address.</small>
+        </div>
       </div>
-      <h2 id="siTitle" class="title">Log in</h2>
-
-      <form class="form" [formGroup]="form" (ngSubmit)="signIn()" novalidate>
-        <div class="field">
-          <label for="email">
-            Email
-          </label>
-          <input id="email" type="email" formControlName="email" placeholder="you@example.com" />
+      <div class="signin-row">
+        <div class="signin-field">
+          <label for="password">Password</label>
+          <input id="password" type="password" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="form.get('password')?.invalid && form.get('password')?.touched" />
+          <small class="error" *ngIf="form.get('password')?.touched && form.get('password')?.hasError('required')">Password is required.</small>
         </div>
-
-        <div class="field">
-          <label for="password">
-            Password
-          </label>
-          <input id="password" type="password" formControlName="password" placeholder="••••••••" />
+      </div>
+      <div class="signin-row signin-options-row">
+        <div class="remember-me">
+          <input id="rememberMe" type="checkbox" />
+          <label for="rememberMe">Remember me</label>
+        </div>
+        <div class="forgot-password">
+          <a href="#" class="forgot-link">Forgot password?</a>
         </div>
-
-        <button class="btn btn-primary" type="submit">
-          Sign in
-        </button>
-      </form>
-
-      <p class="footnote">
-        New here?
-        <a href="#" (click)="goToSignUp(); $event.preventDefault()">Create an account</a>
-      </p>
-    </div>
-
-    <!-- Right (image) -->
-    <div class="panel-right">
-      <div class="right-image">
-        <img src="/assets/signin.png" alt="Decorative" />
       </div>
+      <button class="signin-btn" type="submit">Sign In</button>
+    </form>
+    <div class="signin-footer">
+      <span>Don't have an account?</span>
+      <a href="#" (click)="goToSignUp(); $event.preventDefault()">Sign up here!</a>
+      <span class="footer-sep"></span>
+      &copy; Pykara Technologies, 2025. All rights reserved.
     </div>
   </div>
 </section>

src/app/homepage/sign-in/sign-in.component.ts

@@ -15,6 +15,7 @@ import { SignInService } from './sign-in.service';  // Import SignInService
 })
 export class SignInComponent {
   @Output() switchToSignUp = new EventEmitter<void>();
+  @Output() close = new EventEmitter<void>();
   form: FormGroup;
 
   constructor(private fb: FormBuilder, private router: Router, private signInService: SignInService) {
@@ -28,6 +29,10 @@ export class SignInComponent {
     this.switchToSignUp.emit();
   }
 
+  closePopup() {
+    this.close.emit();
+  }
+
   signIn() {
     if (this.form.invalid) {
       console.log("Form is invalid:", this.form.errors);
@@ -42,14 +47,29 @@ export class SignInComponent {
     this.signInService.signIn(payload).subscribe(
       (response) => {
         console.log('Login successful:', response);
-        // Navigate to case details or home page after login success
-        this.router.navigate(['/case-details']);
+        // Save role to localStorage for future logins
+        if (response && response.role) {
+          localStorage.setItem('role', response.role);
+        }
+        // Redirect based on role
+        if (response && response.role === 'admin') {
+          this.router.navigate(['/infopage']);
+        } else {
+          this.router.navigate(['/case-details']);
+        }
       },
       (error) => {
         console.error('Login failed:', error);
         alert('Invalid email or password!');
       }
     );
+  }
 
+  ngOnInit() {
+    // If already logged in and role is admin, redirect to infopage
+    const role = localStorage.getItem('role');
+    if (role === 'admin') {
+      this.router.navigate(['/infopage']);
+    }
   }
 }

src/app/homepage/sign-in/sign-in.service.ts

@@ -7,14 +7,9 @@ import { Observable } from 'rxjs';
 })
 export class SignInService {
 
-  private baseUrl = location.hostname.endsWith('hf.space')
-    ? 'https://pykara-py-detect-backend.hf.space'
-    : 'http://localhost:5000';
-
   constructor(private http: HttpClient) { }
 
   signIn(payload: any): Observable<any> {
-    //return this.http.post('http://127.0.0.1:5000/sign-in', payload);
-    return this.http.post(`${this.baseUrl}/sign-in`, payload);
+    return this.http.post('http://127.0.0.1:5000/sign-in', payload);
   }
 }

src/app/homepage/sign-up/sign-up.component.css

@@ -1,9 +1,7 @@
 :host {
-  display: block
+  display: block;
 }
 
-
-
 /* Two-column card */
 .auth-box {
   width: 49vw;
@@ -12,14 +10,13 @@
   background: #2b1b6b; /* purple base under left panel */
   border-radius: 14px;
   overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0,0,0,.35);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
   position: relative;
 }
-
 /* Right column (image) */
 .panel-right {
   position: relative;
-  background: radial-gradient(120% 120% at 20% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%);
+  background: radial-gradient(120% 120% at 20% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%);
 }
 
   .panel-right::before {
@@ -27,7 +24,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 26%);
     pointer-events: none;
   }
 
@@ -40,12 +37,12 @@
 
   .right-image img {
     width: 100%;
-    display: block
+    display: block;
   }
 
 /* Left column (form) */
 .panel-left {
-  padding: clamp(22px,3.5vw,36px);
+  padding: clamp(22px, 3.5vw, 36px);
   background: white; /* brighter purple */
   color: black;
 }
@@ -59,8 +56,8 @@
 
 .title {
   margin: 0 0 6px;
-  font-size: clamp(22px,3vw,26px);
-  font-weight: 700
+  font-size: clamp(22px, 3vw, 26px);
+  font-weight: 700;
 }
 
 .subtitle {
@@ -69,12 +66,13 @@
 
 .form {
   display: grid;
-  gap: 12px
+  gap: 25px; /* Increased gap for better spacing between fields */
 }
 
+/* Field-specific margin adjustments */
 .field {
   display: grid;
-  gap: 6px
+  gap: 12px; /* Increased gap between label/input pairs */
 }
 
 label {
@@ -83,43 +81,33 @@ label {
 }
 
 /* Inputs: translucent with subtle border */
-input[type="text"], input[type="password"] {
+input[type="text"], input[type="password"], select.input-field {
   color: #000000;
   border: 1px solid rgb(0 0 0 / 57%);
   border-radius: 10px;
-  padding: 11px 12px;
+  padding: 12px 14px; /* Increased padding */
   outline: none;
 }
 
 input::placeholder {
-  color: #808080
+  color: #808080;
 }
 
-input:focus {
+input:focus, select.input-field:focus {
   border-color: #a78bfa;
-  box-shadow: 0 0 0 3px rgba(167,139,250,.25)
+  box-shadow: 0 0 0 3px rgba(167, 139, 250, .25);
 }
 
 select.input-field {
-  color: #000000;
-  border: 1px solid rgb(0 0 0 / 57%);
-  border-radius: 10px;
-  padding: 11px 12px;
-  outline: none;
   font-size: 16px;
   width: 100%;
   background: #fff;
   box-sizing: border-box;
 }
 
-select.input-field:focus {
-  border-color: #a78bfa;
-  box-shadow: 0 0 0 3px rgba(167,139,250,.25);
-}
-
 .error {
   color: red;
-  font-size: 12px
+  font-size: 12px;
 }
 
 /* Buttons */
@@ -127,26 +115,26 @@ select.input-field:focus {
   width: 100%;
   border-radius: 999px;
   padding: 12px 18px;
-  cursor: pointer
+  cursor: pointer;
 }
 
 .btn-primary {
   background: #0b0f1a;
   color: #fff;
   border: none;
-  font-weight: 700
+  font-weight: 700;
 }
 
 .btn-dark {
   background: #111827;
   color: #fff;
   border: none;
-  margin-top: 8px
+  margin-top: 8px;
 }
 
 .btn[aria-busy="true"] {
   opacity: .75;
-  cursor: progress
+  cursor: progress;
 }
 
 .footnote {
@@ -156,13 +144,13 @@ select.input-field:focus {
 
   .footnote a {
     color: red;
-    text-decoration: underline
+    text-decoration: underline;
   }
 
 /* Layout: stack on small, split on >= 900px */
-@media(min-width:900px) {
+@media(min-width: 900px) {
   .auth-box {
-    grid-template-columns: 520px 1fr
+    grid-template-columns: 520px 1fr;
   }
 }
 
@@ -186,60 +174,260 @@ select.input-field:focus {
   }
 }
 
+.signup-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  background: rgb(30 41 59 / 67%);
+}
 
-.signup-close {
+.signup-header {
+  width: 100vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 32px 48px 0 48px;
   position: absolute;
-  top: 18px;
-  right: 18px;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+.signup-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  pointer-events: auto;
+}
+.signup-logo img {
   width: 48px;
   height: 48px;
-  border: none;
-  background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
-  color: #fff;
-  border-radius: 50%;
-  cursor: pointer;
+  border-radius: 8px;
+  background: #fff;
+  border: 2px solid #b1b1b17d;
+}
+.signup-brand {
+  color: #1de9b6;
   font-size: 2.2rem;
-  font-weight: bold;
+  font-weight: 900;
+  letter-spacing: 2px;
+}
+/* Removed header login link positioning; new variant below form */
+.signup-login-link {
+  font-size: 1.05rem;
+  color: #fff;
+  text-align: center;
+  margin: 14px 0 4px;
+}
+.signup-login-link.below { margin-top: 8px; }
+  .signup-login-link a {
+    color: #38bdf8;
+    text-decoration: underline;
+    margin-left: 6px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+.signup-box {
+  background: #18314a;
+  border-radius: 22px;
+  box-shadow: 0 12px 48px #000a;
+  padding: 48px 38px 32px 38px;
+  width: 520px;
+  max-width: 95vw;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 16px rgba(30,41,59,0.28);
-  z-index: 20;
-  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
-  outline: none;
+  position: relative;
 }
-
-.signup-close:hover {
-  background: linear-gradient(135deg, #333 60%, #23272b 100%);
+.signup-title {
   color: #38bdf8;
-  box-shadow: 0 8px 24px #38bdf888;
+  font-size: 2.1rem;
+  font-weight: 800;
+  margin-bottom: 32px;
+  text-align: center;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 8px #0008;
 }
-
-.signin-close {
+form {
+  width: 100%;
+}
+.signup-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 18px;
+}
+.signup-field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.signup-field label {
+  color: #fff;
+  font-weight: 600;
+  margin-bottom: 6px;
+  font-size: 1rem;
+  letter-spacing: 0.5px;
+}
+.signup-field input,
+.signup-field select {
+  background: #fff;
+  color: #18314a;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 1rem;
+  margin-bottom: 2px;
+  box-shadow: 0 1px 4px #0002;
+  transition: border 0.2s, box-shadow 0.2s;
+}
+.signup-field input:focus,
+.signup-field select:focus {
+  outline: 2px solid #1de9b6;
+  border-color: #1de9b6;
+  box-shadow: 0 0 0 2px #1de9b688;
+}
+.signup-field input::placeholder {
+  color: #b0b8c1;
+  opacity: 1;
+}
+.signup-field small.error {
+  color: #ff5252;
+  font-size: 0.85rem;
+  margin-top: 2px;
+  text-shadow: 0 1px 2px #0008;
+}
+.signup-checkbox {
+  display: flex;
+  align-items: center;
+  margin-bottom: 22px;
+  color: #fff;
+  font-size: 1rem;
+}
+.signup-checkbox input[type="checkbox"] {
+  margin-right: 10px;
+  accent-color: #1de9b6;
+}
+  .signup-checkbox a {
+    color: #38bdf8;
+    text-decoration: underline;
+    margin-left: 4px;
+  }
+.signup-btn {
+  width: 100%;
+  background: #38bdf8;
+  color: #18314a;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 8px; /* reduced because login link follows */
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px #0003;
+}
+.signup-btn:hover {
+  background: #13bfa6;
+}
+.signup-social-row {
+  display: flex;
+  gap: 18px;
+  width: 100%;
+  margin-bottom: 18px;
+}
+.signup-social {
+  flex: 1;
+  background: #fff;
+  color: #18314a;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 0;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+.signup-social.facebook:hover {
+  background: #3b5998;
+  color: #fff;
+}
+.signup-social.twitter:hover {
+  background: #1da1f2;
+  color: #fff;
+}
+.signup-footer {
+  color: #b0b8c1;
+  font-size: 0.95rem;
+  text-align: center;
+  margin-top: 8px;
+}
+.signup-close {
   position: absolute;
   top: 18px;
   right: 18px;
-  width: 48px;
-  height: 48px;
+  width: 38px;
+  height: 38px;
   border: none;
-  background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+  background: #14263c;
   color: #fff;
   border-radius: 50%;
-  cursor: pointer;
-  font-size: 2.2rem;
+  font-size: 2rem;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 16px rgba(30,41,59,0.28);
-  z-index: 20;
-  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
-  outline: none;
+  cursor: pointer;
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px #0005;
+}
+.signup-close:hover {
+  background: #38bdf8;
+  color: #18314a;
 }
 
-.signin-close:hover {
-  background: linear-gradient(135deg, #333 60%, #23272b 100%);
-  color: #38bdf8;
-  box-shadow: 0 8px 24px #38bdf888;
+/* Animated glow loop for role info button when closed */
+@keyframes pulseGlow { 0%{box-shadow:0 0 0 0 rgba(56,189,248,.75);} 70%{box-shadow:0 0 12px 6px rgba(56,189,248,0);} 100%{box-shadow:0 0 0 0 rgba(56,189,248,0);} }
+.role-info-btn.glow-loop { animation:pulseGlow 2s ease-in-out infinite; }
+.role-info-btn.glow-loop:hover { animation:none; }
+
+/* Pop-in animation for role-help panel */
+@keyframes popIn { 0%{opacity:0; transform:translateY(-8px) scale(.95);} 60%{opacity:1; transform:translateY(2px) scale(1.02);} 100%{opacity:1; transform:translateY(0) scale(1);} }
+.role-help { animation:popIn .35s cubic-bezier(.23,1,.32,1); }
+
+@media (max-width: 700px) {
+  .signup-box {
+    padding: 18px 6vw 18px 6vw;
+    width: 98vw;
+  }
+  .signup-header {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 98vw;
+    padding: 0 0 12px 0;
+  }
+  .signup-title {
+    font-size: 1.3rem;
+  }
+  .signup-row {
+    flex-direction: column;
+    gap: 0;
+  }
+  .signup-login-link { font-size: .95rem; }
 }
 
+/* Detached overlay modal (centered) */
+.role-help-overlay { position:fixed; inset:0; background:rgba(15,33,50,.72); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1400; animation:fadeInBackdrop .25s ease-out; }
+.role-help-modal { position:relative; width:min(480px,90vw); background:#18314a; color:#e6f4fa; border:1px solid #27526b; border-radius:20px; padding:46px 34px 32px; box-shadow:0 18px 48px rgba(0,0,0,.55),0 0 0 1px #1d4358; animation:popIn .38s cubic-bezier(.23,1,.32,1); }
+.role-help-title { margin:0 0 14px; font-size:1.55rem; font-weight:800; letter-spacing:.5px; color:#38bdf8; text-shadow:0 2px 8px #0008; }
+.role-help-list { margin:0 0 14px 18px; padding:0; list-style:disc; }
+.role-help-list li { margin:0 0 6px; line-height:1.4; }
+.role-help-tip { margin:4px 0 0; font-size:.85rem; color:#9bd7ff; font-style:italic; }
+.role-help-close { position:absolute; top:12px; right:12px; width:42px; height:42px; border:none; border-radius:50%; background:#102536; color:#38bdf8; font-size:1.5rem; font-weight:700; cursor:pointer; box-shadow:0 0 0 1px #1e3a4d; transition:background .25s,color .25s, transform .25s, box-shadow .25s; }
+.role-help-close:hover { background:#38bdf8; color:#102536; box-shadow:0 0 0 2px #38bdf8,0 0 14px #38bdf8aa; transform:rotate(90deg); }

src/app/homepage/sign-up/sign-up.component.html

@@ -1,98 +1,86 @@
-<section class="auth-page">
-  <div class="auth-box" role="dialog" aria-labelledby="suTitle">
-    <!-- Left (form) -->
-    <div class="panel-left">
-      <div class="topTitle">
-        <img class="brand-mark" src="/assets/pykara-logo.png" alt="Brand" />
-        <p class="topHeader"><b>Let's get started!</b></p>
+<section class="signup-popup" (click)="hideRoleInfo()">
+  <div class="signup-header">
+    <div class="signup-logo"></div>
+  </div>
+  <div class="signup-box" (click)="$event.stopPropagation()">
+    <button class="signup-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
+    <h2 class="signup-title">Create An Account</h2>
+    <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+      <div class="signup-row">
+        <div class="signup-field">
+          <label for="firstName">First Name</label>
+          <input id="firstName" type="text" placeholder="First Name" formControlName="name" [attr.aria-invalid]="controlHasError('name')" />
+          <small *ngIf="controlHasError('name','required') && form.get('name')?.touched" class="error">First name is required.</small>
+          <small *ngIf="controlHasError('name','minlength') && form.get('name')?.touched" class="error">Enter at least 2 characters.</small>
+        </div>
+        <div class="signup-field">
+          <label for="lastName">Last Name</label>
+          <input id="lastName" type="text" placeholder="Last Name" />
+        </div>
       </div>
-      <h2 id="suTitle" class="title">Create an account</h2>
-
-      <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
-
-        <button class="btn btn-primary" type="submit">
-          Sign up
-        </button>
-        <!-- Name -->
-        <div class="field">
-          <label for="name">
-            Name
-            <small *ngIf="controlHasError('name','required')" class="error">*</small>
-          </label>
-          <input id="name" type="text" placeholder="John"
-                 formControlName="name" [attr.aria-invalid]="controlHasError('name')" class="input-field" />
-          <small *ngIf="controlHasError('name','minlength')" class="error">Enter at least 2 characters.</small>
+      <div class="signup-row">
+        <div class="signup-field">
+          <label for="email">Email</label>
+          <input id="email" type="text" placeholder="email@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" />
+          <small *ngIf="controlHasError('email','required') && form.get('email')?.touched" class="error">Email is required.</small>
+          <small *ngIf="controlHasError('email','pattern') && form.get('email')?.touched" class="error">Enter a valid email/phone.</small>
         </div>
-
-        <!-- Role dropdown (moved below Name, styled) -->
-        <div class="field">
+        <div class="signup-field role-field-wrapper">
           <label for="role">
             Role
-            <small *ngIf="controlHasError('role','required')" class="error">*</small>
+            <button type="button" class="role-info-btn" [class.glow-loop]="!showRoleInfo" (click)="toggleRoleInfo($event)" aria-label="Role descriptions">i</button>
           </label>
-          <select id="role" formControlName="role"
-                  [attr.aria-invalid]="controlHasError('role')"
-                  class="input-field" required>
+          <select id="role" formControlName="role" [attr.aria-invalid]="controlHasError('role')">
             <option value="">-- Select Role --</option>
+            <option value="admin">Admin</option>
             <option value="teachers">Teachers</option>
             <option value="lawyers">Lawyers</option>
             <option value="investigators">Investigators</option>
             <option value="others">Others</option>
           </select>
+          <small *ngIf="controlHasError('role','required') && form.get('role')?.touched" class="error">Role is required.</small>
         </div>
-
-        <!-- Email/Phone (contact) -->
-        <div class="field">
-          <label for="contact">
-            Email
-            <small *ngIf="controlHasError('contact','required')" class="error">*</small>
-          </label>
-          <input id="email" type="text" placeholder="hello@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" class="input-field" />
-
-          <!--<input id="contact" type="text" placeholder="hello@gmail.com"
-                 formControlName="contact" [attr.aria-invalid]="controlHasError('contact')" class="input-field" />-->
-          <small *ngIf="controlHasError('contact','pattern')" class="error">Enter a valid email/phone.</small>
-        </div>
-
-        <!-- Password -->
-        <div class="field">
-          <label for="password">
-            Password
-            <small *ngIf="controlHasError('password','required')" class="error">*</small>
-          </label>
-          <input id="password" type="password" placeholder="••••••••"
-                 formControlName="password" [attr.aria-invalid]="controlHasError('password')" />
-          <small *ngIf="controlHasError('password','minlength')" class="error">Use at least 6 characters.</small>
+      </div>
+      <div class="signup-row">
+        <div class="signup-field">
+          <label for="password">Create Password</label>
+          <input id="password" type="password" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="controlHasError('password')" />
+          <small *ngIf="controlHasError('password','required') && form.get('password')?.touched" class="error">Password is required.</small>
+          <small *ngIf="controlHasError('password','minlength') && form.get('password')?.touched" class="error">Use at least 6 characters.</small>
         </div>
-
-        <!-- Confirm password -->
-        <div class="field">
-          <label for="confirmPassword">
-            Confirm password
-            <small *ngIf="controlHasError('confirmPassword','required')" class="error">*</small>
-          </label>
-          <input id="confirmPassword" type="password" placeholder="••••••••"
-                 formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
-          <small *ngIf="showPwdMismatch()" class="error">Passwords do not match.</small>
+        <div class="signup-field">
+          <label for="confirmPassword">Confirm Password</label>
+          <input id="confirmPassword" type="password" placeholder="••••••••" formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
+          <small *ngIf="controlHasError('confirmPassword','required') && form.get('confirmPassword')?.touched" class="error">Confirm password is required.</small>
+          <small *ngIf="showPwdMismatch() && form.get('confirmPassword')?.touched" class="error">Passwords do not match.</small>
         </div>
-
-        <!--<button class="btn btn-primary" type="submit" [disabled]="form.invalid || submitting()" [attr.aria-busy]="submitting()">
-    Sign up1
-  </button>-->
-
-        <p class="footnote">
-          Already have an account?
-          <!-- CHANGED: Use click handler instead of routerLink -->
-          <a href="#" (click)="goToLogin(); $event.preventDefault()">Log in</a>
-        </p>
-      </form>
-    </div>
-
-    <!-- Right (image) -->
-    <div class="panel-right">
-      <div class="right-image">
-        <img src="/assets/signup.png" alt="Decorative" />
       </div>
+      <div class="signup-checkbox">
+        <input type="checkbox" id="terms" required />
+        <label for="terms">Creating your account and you accepting <a href="#">Terms & Conditions.</a></label>
+      </div>
+      <button class="signup-btn" type="submit">Create Account</button>
+      <div class="signup-login-link below">
+        <span>Already have an account?</span>
+        <a href="#" (click)="goToLogin(); $event.preventDefault()">Sign in here!</a>
+      </div>
+    </form>
+    <div class="signup-footer">&copy; Pykara Technologies, 2025. All rights reserved.</div>
+  </div>
+
+  <!-- Detached overlay/modal so layout doesn't shift -->
+  <div class="role-help-overlay" *ngIf="showRoleInfo" (click)="hideRoleInfo()">
+    <div class="role-help-modal" role="dialog" aria-label="Role descriptions" (click)="$event.stopPropagation()">
+      <button type="button" class="role-help-close" aria-label="Close role info" (click)="hideRoleInfo()">×</button>
+      <h3 class="role-help-title">Choose the right role</h3>
+      <ul class="role-help-list">
+        <li><strong>Admin:</strong> Full control: users, roles, system settings.</li>
+        <li><strong>Teachers:</strong> Run assessments / training evaluations.</li>
+        <li><strong>Lawyers:</strong> Review analytics for case & witness prep.</li>
+        <li><strong>Investigators:</strong> Conduct interviews and capture signals.</li>
+        <li><strong>Others:</strong> General or limited access usage.</li>
+      </ul>
+      <p class="role-help-tip">Not sure? Select Others; an Admin can upgrade your role later.</p>
     </div>
   </div>
 </section>

src/app/homepage/sign-up/sign-up.component.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractControl } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { SignUpService } from './sign-up.service';  // Import the SignUpService
+import { AuthService } from '../../auth.service';
 
 @Component({
   selector: 'app-sign-up',
@@ -15,20 +16,29 @@ export class SignUpComponent {
   form: FormGroup;
   private isSubmitting = false;
 
+  // Added: state & handlers for role info popover used in template
+  showRoleInfo = false;
+  toggleRoleInfo(ev?: Event) { ev?.stopPropagation(); this.showRoleInfo = !this.showRoleInfo; }
+  hideRoleInfo() { this.showRoleInfo = false; }
+
   @Output() switchToSignIn = new EventEmitter<void>();
+  @Output() close = new EventEmitter<void>();
 
   constructor(private fb: FormBuilder, private router: Router, private signUpService: SignUpService) {  // Inject SignUpService
     this.form = this.fb.group({
       name: ['', [Validators.required, Validators.minLength(2)]],
       email: ['', [
         Validators.required,
-        Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
+        Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
       ]],
       //gender: ['', [Validators.required]],
       password: ['', [Validators.required, Validators.minLength(6)]],
       confirmPassword: ['', [Validators.required]],
       role: ['', [Validators.required]],
     }, { validators: [this.passwordsMatchValidator] });
+
+    // Close popover when clicking anywhere in document (capture phase not needed here)
+    document.addEventListener('click', () => this.hideRoleInfo());
   }
 
   control(path: string): AbstractControl | null { return this.form.get(path); }
@@ -52,8 +62,6 @@ export class SignUpComponent {
     return pw && cpw && pw === cpw ? null : { passwordMismatch: true };
   }
 
-  
-
   async submit() {
     // Confirm button click
     alert("Sign-Up button clicked!");
@@ -93,23 +101,27 @@ export class SignUpComponent {
       await this.signUpService.signUp(payload).toPromise();
       console.log("Sign-up request sent successfully!");
 
-      // On success, navigate to Sign-In page
-      this.router.navigateByUrl('/auth/signin');
+      // On success, navigate based on role
+      if (payload.role === 'admin') {
+        this.router.navigateByUrl('/infopage');
+      } else {
+        this.router.navigateByUrl('/auth/signin');
+      }
     } catch (error) {
       console.error("Error occurred during sign-up:", error); // Log any errors from the API call
     }
   }
 
-
-
-  
-
   navigateHome() { this.router.navigateByUrl('/'); }
 
   goToLogin() {
     this.switchToSignIn.emit(); // ← Emit event instead of router navigation
   }
 
+  closePopup() {
+    this.close.emit();
+  }
+
   tr(key: string): string {
     const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
     return map[key] || '';

src/app/homepage/sign-up/sign-up.service.ts

@@ -6,15 +6,11 @@ import { Observable } from 'rxjs';  // Import Observable for async handling
   providedIn: 'root'
 })
 export class SignUpService {
-
-  private baseUrl = location.hostname.endsWith('hf.space')
-    ? 'https://pykara-py-detect-backend.hf.space'
-    : 'http://localhost:5000';
-  //private apiUrl = 'http://127.0.0.1:5000';  // The base URL for your Flask backend
+  private apiUrl = 'http://127.0.0.1:5000';  // The base URL for your Flask backend
   constructor(private http: HttpClient) { }
 
   // Method to sign up a user
   signUp(payload: any): Observable<any> {
-    return this.http.post(`${this.baseUrl }/sign-up`, payload);
+    return this.http.post(`${this.apiUrl}/sign-up`, payload);
   }
 }

src/app/infopage/infopage.component.css

@@ -1,362 +1,2153 @@
-body, html {
+/* ===== BALANCED AI DESIGN WITH READABLE CONTENT ===== */
+
+/* ===== IMPROVED BODY BACKGROUND ===== */
+body {
+  background: 
+    radial-gradient(ellipse at top left, rgba(0, 212, 255, 0.08), transparent 40%),
+    radial-gradient(ellipse at bottom right, rgba(255, 0, 110, 0.06), transparent 40%),
+    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%) !important;
+  background-attachment: fixed !important;
+  color: #e0e6ed !important;
+  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
+  overflow-x: hidden !important;
+}
+
+/* ===== SUBTLE PARTICLE BACKGROUND ===== */
+body::before {
+  content: '' !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  background-image: 
+    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.15) 1px, transparent 1px),
+    radial-gradient(circle at 80% 70%, rgba(255, 0, 110, 0.12) 1px, transparent 1px) !important;
+  background-size: 150px 150px, 200px 200px !important;
+  animation: subtleParticles 20s linear infinite !important;
+  pointer-events: none !important;
+  z-index: -1 !important;
+  opacity: 0.4 !important;
+}
+
+@keyframes subtleParticles {
+  0% { background-position: 0 0, 0 0; }
+  100% { background-position: 150px 150px, -200px -200px; }
+}
+
+/* ===== ENHANCED HEADER WITH READABILITY ===== */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 18px;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 32px 0 32px;
+  position: relative;
+  gap: 32px;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px; /* Move logo slightly upwards */
+  margin-bottom: 0;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 1.5vh;
+}
+
+.py-detect-title-header .py-letter.p { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.y { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-shape { color: #e3f6ff; background: #e3f6ff; text-shadow: 0 0 6px #38bdf8; box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; border: 2px solid #23272b; width: 18px; height: 4px; display: inline-block; margin: 0 8px; border-radius: 2px; }
+.py-detect-title-header .py-letter.d { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.e { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.t { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.e2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.c { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.t2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+
+.header-progress {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-right: 32px;
+  margin-left:89vh;
+}
+
+.pykara-analysis-label {
+  color: #38bdf8;
+  font-size: 1.1em;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.pykara-progress-bar {
+  width: 220px;
+  height: 14px;
+  background: #e3f6ff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px #38bdf844, 0 0 12px #38bdf8aa;
+  position: relative;
+}
+
+.pykara-progress-bar-inner {
+  height: 100%;
+  background: linear-gradient(270deg, #38bdf8, #06ffa5, #ff006e, #38bdf8);
+  background-size: 400% 100%;
+  border-radius: 8px 0 0 8px;
+  transition: width 0.4s cubic-bezier(.4,2,.6,1);
+  animation: progressBarGradientMove 2.5s linear infinite;
+  box-shadow: 0 0 16px #38bdf8cc, 0 0 8px #06ffa5aa;
+}
+
+@keyframes progressBarGradientMove {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
+}
+
+.pykara-progress-percentage {
+  color: #38bdf8;
+  font-size: 1.05em;
+  font-weight: 700;
+  margin-left: 4px;
+}
+
+/* ===== READABLE PROGRESS BAR ===== */
+.progress-container {
+  background: rgba(26, 26, 46, 0.9) !important;
+  backdrop-filter: blur(10px) !important;
+  padding: 8px 24px !important;
+  position: relative !important;
+}
+
+.progress-bar {
+  background: linear-gradient(90deg, #00d4ff 0%, #06ffa5 50%, #ff006e 100%) !important;
+  height: 6px !important;
+  border-radius: 3px !important;
+  position: relative !important;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
+}
+
+.progress-text {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  font-size: 0.8rem !important;
+  color: #e0e6ed !important;
+  margin-bottom: 4px !important;
+}
+
+.progress-ai {
+  color: #06ffa5 !important;
+  font-weight: 600 !important;
+}
+
+/* ===== READABLE SECTION NAVIGATION ===== */
+.section-navigation {
+  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95)) !important;
+  backdrop-filter: blur(15px) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
+  padding: 16px 0 !important;
+  position: relative !important;
+}
+
+.section-pills {
+  display: flex !important;
+  justify-content: center !important;
+  gap: 16px !important;
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+  padding: 0 24px !important;
+}
+
+.section-pill {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
+  border: 1px solid rgba(0, 212, 255, 0.3) !important;
+  backdrop-filter: blur(10px) !important;
+  padding: 12px 20px !important;
+  border-radius: 12px !important;
+  color: #e0e6ed !important;
+  font-weight: 500 !important;
+  font-size: 0.9rem !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  min-width: 150px !important;
+  justify-content: center !important;
+}
+
+.section-pill:hover {
+  border-color: rgba(0, 212, 255, 0.6) !important;
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
+  transform: translateY(-2px) !important;
+}
+
+.section-pill.active {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 0, 110, 0.1)) !important;
+  border-color: #00d4ff !important;
+  color: white !important;
+  box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important;
+  transform: translateY(-3px) !important;
+}
+
+.section-pill::after {
+  content: attr(data-step) !important;
+  position: absolute !important;
+  top: -8px !important;
+  left: 12px !important;
+  width: 20px !important;
+  height: 20px !important;
+  background: linear-gradient(135deg, #7209b7, #4cc9f0) !important;
+  color: white !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 0.7rem !important;
+  font-weight: 700 !important;
+  border: 2px solid rgba(26, 26, 46, 0.9) !important;
+}
+
+.section-pill.active::after {
+  background: linear-gradient(135deg, #ff006e, #8338ec) !important;
+  animation: activeStep 2s ease-in-out infinite !important;
+}
+
+@keyframes activeStep {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+/* ===== READABLE SUBGROUP PILLS ===== */
+.subgroup-pills {
+  background: linear-gradient(135deg, rgba(22, 33, 62, 0.9), rgba(26, 26, 46, 0.95)) !important;
+  backdrop-filter: blur(15px) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
+  padding: 16px 24px !important;
+  display: flex !important;
+  justify-content: center !important;
+  flex-wrap: wrap !important;
+  gap: 12px !important;
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+}
+
+.subgroup-pills .pill {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
+  border: 1px solid rgba(0, 212, 255, 0.25) !important;
+  backdrop-filter: blur(8px) !important;
+  padding: 8px 16px !important;
+  border-radius: 20px !important;
+  color: #e0e6ed !important;
+  font-weight: 500 !important;
+  font-size: 0.85rem !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  min-width: 120px !important;
+  justify-content: center !important;
+}
+
+.subgroup-pills .pill:hover {
+  border-color: rgba(6, 255, 165, 0.6) !important;
+  box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important;
+  transform: translateY(-1px) !important;
+}
+
+.subgroup-pills .pill.active {
+  background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(131, 56, 236, 0.15)) !important;
+  border-color: #ff006e !important;
+  color: white !important;
+  box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important;
+  transform: translateY(-2px) !important;
+}
+
+/* ===== READABLE CONTENT AREA ===== */
+.investigation-container {
+  background: transparent !important;
+  padding: 24px 0 !important;
+  max-width: 100vw !important;
+  width: 96vw !important;
+  margin: 0 !important;
+  min-height: calc(100vh - 400px) !important;
+  position: relative !important;
+  left: 50% !important;
+  right: 50% !important;
+  margin-left: -48vw !important;
+  margin-right: -50vw !important;
+  box-sizing: border-box !important;
+}
+
+/* ===== FULL-WIDTH FORM CARD ===== */
+.form-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.92)) !important;
+  backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(0, 212, 255, 0.2) !important;
+  border-radius: 0 !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.2) !important;
+  color: #2C3E50 !important;
+  position: relative !important;
+  overflow: visible !important;
+  margin: 0 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  padding: 0 24px !important;
+  box-sizing: border-box !important;
+}
+
+.form-card::before {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: -100% !important;
+  width: 100% !important;
+  height: 2px !important;
+  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent) !important;
+  animation: cardScan 4s linear infinite !important;
+}
+
+@keyframes cardScan {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+.card-header {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05)) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
+  padding: 16px 20px !important;
+  border-radius: 0 !important;
+  margin: 0 -24px !important;
+  margin-bottom: 0 !important;
+}
+
+.card-header h2 {
+  background: linear-gradient(45deg, #00d4ff, #ff006e) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.card-content {
+  padding: 20px 0 !important;
+  background: rgba(255, 255, 255, 0.98) !important;
+  color: #2C3E50 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+.section-description {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(6, 255, 165, 0.08)) !important;
+  border: 1px solid rgba(0, 212, 255, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 12px 16px !important;
+  margin-bottom: 20px !important;
+  font-size: 0.85rem !important;
+  color: #2C3E50 !important;
+  border-left: 4px solid #00d4ff !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* ===== FULL-WIDTH FORM FIELDS ===== */
+.fields-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
+  gap: 16px !important;
+  margin-top: 16px !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  padding: 0 !important;
+  overflow: visible !important;
+  position: relative;
+}
+
+.field-container {
+  background: rgba(255, 255, 255, 0.9) !important;
+  border: 1px solid rgba(0, 212, 255, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 12px !important;
+  transition: all 0.3s ease !important;
+  position: relative !important;
+  overflow: visible !important;
+  z-index: 1;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+.field-container:hover {
+  border-color: rgba(0, 212, 255, 0.4) !important;
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important;
+  transform: translateY(-1px) !important;
+}
+
+.field-label {
+  color: #2C3E50 !important;
+  font-weight: 600 !important;
+  font-size: 0.85rem !important;
+  margin-bottom: 6px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  width: 100% !important;
+}
+
+.field-input {
+  width: 100% !important;
+  padding: 10px 12px !important;
+  border: 1px solid #E1E8ED !important;
+  border-radius: 6px !important;
+  background: white !important;
+  color: #2C3E50 !important;
+  font-size: 0.85rem !important;
+  transition: all 0.3s ease !important;
+  box-sizing: border-box !important;
+}
+
+.field-input:focus {
+  border-color: #00d4ff !important;
+  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
+  outline: none !important;
+}
+
+.field-input::placeholder {
+  color: #7F8C8D !important;
+}
+
+/* ===== CARD ACTIONS FULL WIDTH ===== */
+.card-actions {
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px !important;
+  justify-content: flex-start !important;
+  width: 100% !important;
+  flex-wrap: wrap !important;
+  position: relative;
+}
+
+.card-actions-spacer {
+  flex: 1 1 auto;
+}
+
+.field-selector-container {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 12px !important;
+  width: 100% !important;
+}
+
+.modern-field-selector-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  position: relative;
+}
+
+.field-selector-btn.modern-selector-animated {
+  border-radius: 24px;
+  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
+  color: #fff;
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 10px 22px;
+  border: none;
+  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
+  outline: none;
+  position: relative;
+  z-index: 2;
+  animation: selectorPulse 2s infinite alternate;
+}
+
+.field-selector-btn.modern-selector-animated:hover,
+.field-selector-btn.modern-selector-animated.active {
+  background: linear-gradient(135deg, #06ffa5 0%, #00d4ff 60%, #ff006e 100%);
+  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18);
+  transform: scale(1.04);
+}
+
+@keyframes selectorPulse {
+  0% { box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); }
+  100% { box-shadow: 0 6px 24px rgba(0, 212, 255, 0.18); }
+}
+
+.field-selector-btn.modern-selector-animated i {
+  font-size: 1.2em;
+}
+
+/* Highlight filled field-container with green border */
+.field-container.filled {
+  border-color: #06ffa5 !important;
+  box-shadow: 0 0 0 2px rgba(6,255,165,0.12);
+  transition: border-color 0.25s, box-shadow 0.25s;
+}
+
+/* ===== REMOVE BODY OVERFLOW ===== */
+body {
+  overflow-x: hidden !important;
+  width: 100vw !important;
+  box-sizing: border-box !important;
+}
+
+html {
+  overflow-x: hidden !important;
+  width: 100vw !important;
+  box-sizing: border-box !important;
+}
+
+/* ===== ENSURE ALL CONTAINERS ARE FULL WIDTH ===== */
+.site-header,
+.section-navigation,
+.subgroup-pills,
+.page-indicator-container {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+}
+
+/* ===== RESPONSIVE FULL WIDTH ===== */
+@media (max-width: 768px) {
+  .investigation-container {
+    padding: 16px 0 !important;
+    margin-left: -50vw !important;
+    margin-right: -50vw !important;
+    left: 50% !important;
+    right: 50% !important;
+  }
+  
+  .form-card {
+    padding: 0 16px !important;
+    border-radius: 0 !important;
+  }
+  
+  .card-header {
+    margin: 0 -16px !important;
+    padding: 12px 16px !important;
+  }
+  
+  .fields-grid {
+    grid-template-columns: 1fr !important;
+    gap: 12px !important;
+  }
+  
+  .card-actions {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: 8px !important;
+  }
+  
+  .field-selector-container {
+    width: 100% !important;
+  }
+  
+  .field-selector-btn {
+    width: 100% !important;
+    justify-content: center !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .investigation-container {
+    padding: 12px 0 !important;
+  }
+  
+  .form-card {
+    padding: 0 12px !important;
+  }
+  
+  .card-header {
+    margin: 0 -12px !important;
+    padding: 10px 12px !important;
+  }
+  
+  .card-content {
+    padding: 16px 0 !important;
+  }
+}
+
+/* Crime Details style for autosave button */
+.autosave-indicator.crime-section-btn {
+  background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%) !important;
+  border: 2px solid #4A90E2 !important;
+  color: #357ABD !important;
+  font-weight: 600 !important;
+  border-radius: 20px !important;
+  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.08) !important;
+  padding: 10px 20px !important;
+  transition: all 0.3s;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.autosave-indicator.crime-section-btn:hover {
+  border-color: #357ABD !important;
+  color: #fff !important;
+  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
+  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important;
+}
+
+.autosave-right {
+  margin-left: auto !important;
+  margin-right: 0 !important;
+}
+
+.autosave-left {
+  margin-right: auto !important;
+  margin-left: 0 !important;
+}
+
+.header-actions {
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px !important;
+}
+
+.header-actions.autosave-right {
+  display: flex !important;
+  justify-content: flex-end !important;
+  width: 100%;
+}
+
+.autosave-indicator {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  padding: 8px 16px !important;
+  background: rgba(255, 255, 255, 0.15) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 8px !important;
+  font-size: 0.875rem !important;
+  color: white !important;
+  font-weight: 500 !important;
+  backdrop-filter: blur(10px) !important;
+}
+
+  .autosave-indicator.saving {
+    background: rgba(255, 255, 255, 0.25) !important;
+    animation: pulse 1.5s ease-in-out infinite !important;
+  }
+
+.main-section-pill {
+  font-size: 1.25rem !important;
+  padding: 20px 36px !important;
+  min-width: 200px !important;
+  min-height: 64px !important;
+  border-width: 2.5px !important;
+  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18) !important;
+}
+
+.main-section-pill i {
+  font-size: 2rem !important;
+}
+
+.main-section-pill span {
+  font-size: 1.25em !important;
+  font-weight: 700 !important;
+}
+
+/* ===== MODERN NAVIGATION BUTTONS ===== */
+.modern-nav-btns {
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+  margin-top: 32px;
+  margin-bottom: 8px;
+}
+
+.modern-round-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
+  color: #fff;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18), 0 1.5px 6px rgba(0,0,0,0.08);
+  cursor: pointer;
+  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
+  outline: none;
+  position: relative;
+  z-index: 2;
+}
+
+.modern-round-btn:active {
+  transform: scale(0.93);
+  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.12);
+}
+
+.modern-round-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.next-btn-animated {
+  animation: bounceRight 1.2s infinite alternate;
+}
+
+@keyframes bounceRight {
+  0% { transform: translateX(0); }
+  60% { transform: translateX(6px) scale(1.08); }
+  100% { transform: translateX(0); }
+}
+
+.submit-btn-animated {
+  animation: pulseSend 1.5s infinite alternate;
+}
+
+@keyframes pulseSend {
+  0% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
+  60% { box-shadow: 0 8px 32px rgba(255, 0, 110, 0.22); }
+  100% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
+}
+
+.modern-round-btn i {
+  font-size: 2rem;
+  pointer-events: none;
+}
+
+/* ===== FLOATING NAVIGATION BUTTON ===== */
+.modern-floating-nav-btn {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: none;
+}
+
+.modern-floating-nav-btn .modern-round-btn {
+  pointer-events: auto;
+}
+
+@media (max-width: 600px) {
+  .modern-floating-nav-btn {
+    bottom: 16px;
+    right: 16px;
+  }
+}
+
+/* Compact Card Header */
+.compact-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px !important;
+  min-height: 0;
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(255, 0, 110, 0.04)) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
+  margin: 0 -24px !important;
+}
+
+.card-header-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.compact-title {
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #00d4ff !important;
+  background: none !important;
+}
+
+.compact-title i {
+  font-size: 1.1em;
+  color: #00d4ff;
+}
+
+.field-counter.compact-field-counter {
+  font-size: 0.95em !important;
+  font-weight: 600 !important;
+  color: #222 !important;
+  background: none !important;
+  padding: 0 0 0 8px !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  text-shadow: none !important;
+}
+
+.modern-field-selector-btn.compact-selector-btn {
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+
+.field-selector-btn.modern-selector-animated.compact-selector-btn-inner {
+  font-size: 0.95rem;
+  padding: 4px 14px;
+  min-width: 0;
+  height: 32px;
+  border-radius: 16px;
+  gap: 6px;
+}
+
+.field-selector-btn.modern-selector-animated.compact-selector-btn-inner i {
+  font-size: 1em;
+}
+
+.field-selector-counter {
+  font-size: 0.95em;
+  font-weight: 600;
+  margin-left: 2px;
+}
+
+/* ===== MODERN FIELD SELECTOR POPUP ===== */
+.modern-field-selector-popup {
+  position: absolute;
+  top: 110%;
+  right: 0;
+  min-width: 260px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0,212,255,0.12);
+  z-index: 3000 !important;
+  padding: 18px 20px 16px 20px;
+  animation: popupFadeIn 0.25s cubic-bezier(.4,2,.6,1);
+}
+
+.modern-field-selector-btn {
+  position: relative;
+}
+
+@keyframes popupFadeIn {
+  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.popup-header span {
+  font-weight: 700;
+  font-size: 1.1em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #00d4ff;
+}
+
+.popup-header i {
+  color: #00d4ff;
+}
+
+.popup-close-btn {
+  background: none;
+  border: none;
+  font-size: 1.2em;
+  color: #ff006e;
+  cursor: pointer;
+  transition: color 0.18s;
+}
+.popup-close-btn:hover {
+  color: #00d4ff;
+}
+
+.popup-fields-list {
+  max-height: 220px;
+  overflow: auto;
+  margin-bottom: 16px;
+  padding-right: 2px;
+}
+
+.popup-field-row {
+  margin-bottom: 8px;
+}
+
+.popup-field-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1em;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 500;
+  color: #222;
+  border-radius: 6px;
+  padding: 2px 4px;
+  transition: background 0.15s;
+}
+.popup-field-label:hover {
+  background: #f0faff;
+}
+
+.popup-field-label input[type="checkbox"] {
+  accent-color: #00d4ff;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1.5px solid #00d4ff;
+  margin: 0;
+  transition: box-shadow 0.15s;
+}
+
+.popup-field-label input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 2px #06ffa5;
+}
+
+.popup-field-text {
+  font-weight: 500;
+  color: #222;
+}
+
+.popup-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.popup-action-btn {
+  flex: 1;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 0;
+  font-weight: 600;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.popup-action-btn.clear-btn {
+  background: #f8f8f8;
+  color: #ff006e;
+}
+.popup-action-btn.clear-btn:hover {
+  background: #ffe6f0;
+  color: #d1005b;
+}
+
+.popup-action-btn.selectall-btn {
+  background: #f8f8f8;
+  color: #06ffa5;
+}
+.popup-action-btn.selectall-btn:hover {
+  background: #e6fff7;
+  color: #00d4ff;
+}
+
+.popup-action-btn.save-btn {
+  background: linear-gradient(135deg,#00d4ff,#06ffa5,#ff006e);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0,212,255,0.10);
+}
+.popup-action-btn.save-btn:hover {
+  background: linear-gradient(135deg,#06ffa5,#00d4ff,#ff006e);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(0,212,255,0.18);
+}
+
+
+.form-card,
+.investigation-container {
+  overflow: visible !important;
+}
+
+.modern-field-selector-popup {
+  z-index: 3000 !important;
+}
+
+.info-btn, .glossy-info-btn {
+  opacity: 0.5;
+  background: rgba(10, 30, 60, 0.35);
+  border: 2px solid #00d4ff33;
+  box-shadow: none;
+}
+.info-btn:hover, .glossy-info-btn:hover {
+  opacity: 0.8;
+  background: rgba(10, 30, 60, 0.55);
+  border: 2px solid #00d4ff;
+}
+.info-btn i, .glossy-info-btn i {
+  color: #0a1e3c;
+  font-size: 0.95em;
+  text-shadow: none;
+}
+
+.field-help {
+  position: absolute !important;
+  left: 36px;
+  top: 50%;
+  transform: translateY(-50%);
+  min-width: 180px;
+  max-width: 260px;
+  background: rgba(10, 30, 60, 0.85);
+  color: #fff;
+  border-radius: 10px;
+  border: 2px solid #00d4ff;
+  box-shadow: 0 4px 24px rgba(0,212,255,0.10);
+  padding: 10px 16px 10px 16px;
+  z-index: 4000;
+  font-size: 0.97em;
+  font-weight: 500;
+  animation: fadeInInfoModal 0.18s cubic-bezier(.4,2,.6,1);
+  pointer-events: auto;
+  white-space: pre-line;
+}
+@keyframes fadeInInfoModal {
+  from { opacity: 0; transform: translateY(-50%) scale(0.98); }
+  to { opacity: 1; transform: translateY(-50%) scale(1); }
+}
+.field-help strong {
+  color: #00d4ff;
+  font-weight: 700;
+  font-size: 1.05em;
+  display: block;
+  margin-bottom: 2px;
+}
+
+.file-upload-block {
+  border: 2px solid #00d4ff;
+  border-radius: 18px;
+  background: rgba(240, 255, 255, 0.45);
+  box-shadow: 0 2px 16px rgba(0,212,255,0.08);
+  padding: 18px 18px 12px 18px;
+  margin-bottom: 12px;
+  position: relative;
+  animation: fileGlow 2.2s infinite alternate;
+  transition: box-shadow 0.22s, border-color 0.22s;
+}
+@keyframes fileGlow {
+  0% { box-shadow: 0 2px 16px rgba(0,212,255,0.08), 0 0 0 0 #06ffa5; border-color: #00d4ff; }
+  60% { box-shadow: 0 6px 32px rgba(0,212,255,0.18), 0 0 0 4px #06ffa5; border-color: #06ffa5; }
+  100% { box-shadow: 0 2px 16px rgba(0,212,255,0.08), 0 0 0 0 #00d4ff; border-color: #00d4ff; }
+}
+
+.file-upload-block .file-drop-zone {
+  background: rgba(255,255,255,0.85);
+  border: 2px dashed #00d4ff;
+  border-radius: 14px;
+  padding: 18px 0 12px 0;
+  text-align: center;
+  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
+  cursor: pointer;
+  margin-bottom: 8px;
+  position: relative;
+}
+.file-upload-block .file-drop-zone:hover, .file-upload-block .file-drop-zone.drag-over {
+  background: rgba(0,212,255,0.08);
+  border-color: #06ffa5;
+  box-shadow: 0 4px 24px rgba(0,212,255,0.18);
+}
+
+.file-upload-block .drop-zone-content i {
+  color: #00d4ff;
+  font-size: 2.2em;
+  margin-bottom: 6px;
+  animation: fileIconBounce 1.4s infinite alternate;
+  filter: drop-shadow(0 0 8px #06ffa5);
+  transition: color 0.18s;
+}
+@keyframes fileIconBounce {
+  0% { transform: translateY(0) scale(1); }
+  60% { transform: translateY(-8px) scale(1.12); color: #06ffa5; }
+  100% { transform: translateY(0) scale(1); }
+}
+
+.file-upload-block .drop-zone-content p {
+  color: #222;
+  font-size: 1.08em;
+  font-weight: 500;
   margin: 0;
-  padding: 0;
-  font-family: 'Arial', 'Segoe UI', 'Roboto', sans-serif;
-  background: url('/assets/background.jpg') no-repeat center center fixed !important;
-  background-size: cover !important;
+  opacity: 0.85;
+}
+
+.file-upload-block .file-input {
+  opacity: 0;
+  position: absolute;
+  left: 0; top: 0; width: 100%; height: 100%;
+  cursor: pointer;
+}
+
+/* ===== HEADER STYLES ===== */
+.infopage-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #011329;
+  padding: 18px 32px 18px 32px;
+  border-radius: 0 0 18px 18px;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 18px;
+  position: relative;
+  z-index: 10;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px; /* Move logo slightly upwards */
+  margin-bottom: 1vh;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 1.5vh;
+}
+
+.py-detect-title-header .py-letter.p { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.y { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-shape { color: #e3f6ff; background: #e3f6ff; text-shadow: 0 0 6px #38bdf8; box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; border: 2px solid #23272b; width: 18px; height: 4px; display: inline-block; margin: 0 8px; border-radius: 2px; }
+.py-detect-title-header .py-letter.d { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.e { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.t { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.e2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.c { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.t2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.pykara-analysis-label {
+  color: #38bdf8;
+  font-size: 1.1em;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.pykara-progress-bar {
+  width: 220px;
+  height: 14px;
+  background: #e3f6ff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px #38bdf844, 0 0 12px #38bdf8aa;
+  position: relative;
+}
+
+.pykara-progress-bar-inner {
+  height: 100%;
+  background: linear-gradient(270deg, #38bdf8, #06ffa5, #ff006e, #38bdf8);
+  background-size: 400% 100%;
+  border-radius: 8px 0 0 8px;
+  transition: width 0.4s cubic-bezier(.4,2,.6,1);
+  animation: progressBarGradientMove 2.5s linear infinite;
+  box-shadow: 0 0 16px #38bdf8cc, 0 0 8px #06ffa5aa;
+}
+
+@keyframes progressBarGradientMove {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
+}
+
+.pykara-progress-percentage {
+  color: #38bdf8;
+  font-size: 1.05em;
+  font-weight: 700;
+  margin-left: 4px;
+}
+
+/* ===== READABLE PROGRESS BAR ===== */
+.progress-container {
+  background: rgba(26, 26, 46, 0.9) !important;
+  backdrop-filter: blur(10px) !important;
+  padding: 8px 24px !important;
+  position: relative !important;
+}
+
+.progress-bar {
+  background: linear-gradient(90deg, #00d4ff 0%, #06ffa5 50%, #ff006e 100%) !important;
+  height: 6px !important;
+  border-radius: 3px !important;
+  position: relative !important;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
+}
+
+.progress-text {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  font-size: 0.8rem !important;
+  color: #e0e6ed !important;
+  margin-bottom: 4px !important;
 }
 
-.homepage-container {
-  display: flex;
-  flex-direction: row;
-  height: 100vh;
-  color: #e3f6ff;
-  position: relative;
-  align-items: center; /* Center content vertically */
-  justify-content: center; /* Center content horizontally */
-  background: url(/assets/py-detect-illustration.png) no-repeat center center fixed;
-  background-size: cover;
+.progress-ai {
+  color: #06ffa5 !important;
+  font-weight: 600 !important;
 }
 
-.left-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center; /* Center vertically */
-  align-items: center; /* Center horizontally */
-  padding-left: 120px; /* Reduced from 240px to 120px */
-  padding-top: 0;
+/* ===== READABLE SECTION NAVIGATION ===== */
+.section-navigation {
+  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95)) !important;
+  backdrop-filter: blur(15px) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
+  padding: 16px 0 !important;
+  position: relative !important;
+}
+
+.section-pills {
+  display: flex !important;
+  justify-content: center !important;
+  gap: 16px !important;
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+  padding: 0 24px !important;
+}
+
+.section-pill {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
+  border: 1px solid rgba(0, 212, 255, 0.3) !important;
+  backdrop-filter: blur(10px) !important;
+  padding: 12px 20px !important;
+  border-radius: 12px !important;
+  color: #e0e6ed !important;
+  font-weight: 500 !important;
+  font-size: 0.9rem !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  min-width: 150px !important;
+  justify-content: center !important;
+}
+
+.section-pill:hover {
+  border-color: rgba(0, 212, 255, 0.6) !important;
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
+  transform: translateY(-2px) !important;
+}
+
+.section-pill.active {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 0, 110, 0.1)) !important;
+  border-color: #00d4ff !important;
+  color: white !important;
+  box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important;
+  transform: translateY(-3px) !important;
+}
+
+.section-pill::after {
+  content: attr(data-step) !important;
+  position: absolute !important;
+  top: -8px !important;
+  left: 12px !important;
+  width: 20px !important;
+  height: 20px !important;
+  background: linear-gradient(135deg, #7209b7, #4cc9f0) !important;
+  color: white !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 0.7rem !important;
+  font-weight: 700 !important;
+  border: 2px solid rgba(26, 26, 46, 0.9) !important;
+}
+
+.section-pill.active::after {
+  background: linear-gradient(135deg, #ff006e, #8338ec) !important;
+  animation: activeStep 2s ease-in-out infinite !important;
+}
+
+@keyframes activeStep {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+/* ===== READABLE SUBGROUP PILLS ===== */
+.subgroup-pills {
+  background: linear-gradient(135deg, rgba(22, 33, 62, 0.9), rgba(26, 26, 46, 0.95)) !important;
+  backdrop-filter: blur(15px) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
+  padding: 16px 24px !important;
+  display: flex !important;
+  justify-content: center !important;
+  flex-wrap: wrap !important;
+  gap: 12px !important;
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+}
+
+.subgroup-pills .pill {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
+  border: 1px solid rgba(0, 212, 255, 0.25) !important;
+  backdrop-filter: blur(8px) !important;
+  padding: 8px 16px !important;
+  border-radius: 20px !important;
+  color: #e0e6ed !important;
+  font-weight: 500 !important;
+  font-size: 0.85rem !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  min-width: 120px !important;
+  justify-content: center !important;
+}
+
+.subgroup-pills .pill:hover {
+  border-color: rgba(6, 255, 165, 0.6) !important;
+  box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important;
+  transform: translateY(-1px) !important;
+}
+
+.subgroup-pills .pill.active {
+  background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(131, 56, 236, 0.15)) !important;
+  border-color: #ff006e !important;
+  color: white !important;
+  box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important;
+  transform: translateY(-2px) !important;
+}
+
+/* ===== READABLE CONTENT AREA ===== */
+.investigation-container {
+  background: transparent !important;
+  padding: 24px 0 !important;
+  max-width: 100vw !important;
+  width: 96vw !important;
+  margin: 0 !important;
+  min-height: calc(100vh - 400px) !important;
+  position: relative !important;
+  left: 50% !important;
+  right: 50% !important;
+  margin-left: -48vw !important;
+  margin-right: -50vw !important;
+  box-sizing: border-box !important;
+}
+
+/* ===== FULL-WIDTH FORM CARD ===== */
+.form-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.92)) !important;
+  backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(0, 212, 255, 0.2) !important;
+  border-radius: 0 !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.2) !important;
+  color: #2C3E50 !important;
+  position: relative !important;
+  overflow: visible !important;
+  margin: 0 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  padding: 0 24px !important;
+  box-sizing: border-box !important;
+}
+
+.form-card::before {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: -100% !important;
+  width: 100% !important;
+  height: 2px !important;
+  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent) !important;
+  animation: cardScan 4s linear infinite !important;
+}
+
+@keyframes cardScan {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+.card-header {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05)) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
+  padding: 16px 20px !important;
+  border-radius: 0 !important;
+  margin: 0 -24px !important;
+  margin-bottom: 0 !important;
+}
+
+.card-header h2 {
+  background: linear-gradient(45deg, #00d4ff, #ff006e) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.card-content {
+  padding: 20px 0 !important;
+  background: rgba(255, 255, 255, 0.98) !important;
+  color: #2C3E50 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+.section-description {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(6, 255, 165, 0.08)) !important;
+  border: 1px solid rgba(0, 212, 255, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 12px 16px !important;
+  margin-bottom: 20px !important;
+  font-size: 0.85rem !important;
+  color: #2C3E50 !important;
+  border-left: 4px solid #00d4ff !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+/* ===== FULL-WIDTH FORM FIELDS ===== */
+.fields-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
+  gap: 16px !important;
+  margin-top: 16px !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  padding: 0 !important;
+  overflow: visible !important;
   position: relative;
 }
 
-.topbar {
-  display: flex;
-  align-items: flex-start;
-  height: 80px;
-  padding-left: 0;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 30;
+.field-container {
+  background: rgba(255, 255, 255, 0.9) !important;
+  border: 1px solid rgba(0, 212, 255, 0.2) !important;
+  border-radius: 8px !important;
+  padding: 12px !important;
+  transition: all 0.3s ease !important;
+  position: relative !important;
+  overflow: visible !important;
+  z-index: 1;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
 }
 
-.logo {
-  width: 120px;
-  height: 120px;
-  margin-left: 0;
-  margin-top: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 40;
+.field-container:hover {
+  border-color: rgba(0, 212, 255, 0.4) !important;
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important;
+  transform: translateY(-1px) !important;
 }
 
-.logo-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 120px;
-  height: 120px;
-  z-index: 100;
-  margin: 0;
+.field-label {
+  color: #2C3E50 !important;
+  font-weight: 600 !important;
+  font-size: 0.85rem !important;
+  margin-bottom: 6px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  width: 100% !important;
 }
 
-/* Add gap between logo and browser border */
-.logo-img {
-  width: 6vw;
-  height: 6vw;
-  border-radius: 50%;
-  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
-  position: fixed;
-  top: 18px; /* Add gap from top */
-  left: 18px; /* Add gap from left */
-  z-index: 300;
-  margin: 0;
+.field-input {
+  width: 100% !important;
+  padding: 10px 12px !important;
+  border: 1px solid #E1E8ED !important;
+  border-radius: 6px !important;
+  background: white !important;
+  color: #2C3E50 !important;
+  font-size: 0.85rem !important;
+  transition: all 0.3s ease !important;
+  box-sizing: border-box !important;
+}
+
+.field-input:focus {
+  border-color: #00d4ff !important;
+  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
+  outline: none !important;
+}
+
+.field-input::placeholder {
+  color: #7F8C8D !important;
+}
+
+/* ===== CARD ACTIONS FULL WIDTH ===== */
+.card-actions {
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px !important;
+  justify-content: flex-start !important;
+  width: 100% !important;
+  flex-wrap: wrap !important;
+  position: relative;
+}
+
+.card-actions-spacer {
+  flex: 1 1 auto;
 }
 
-/* Move Py-Detect text further down by increasing top value of .logo-title-row */
-.logo-title-row {
+.field-selector-container {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 12px !important;
+  width: 100% !important;
+}
+
+.modern-field-selector-btn {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  position: absolute;
-  top: 180px; /* Increased from 120px to move text further down */
-  left: 48px;
-  z-index: 300;
-  gap: 32px;
-  justify-content: flex-start;
-  width: 100%;
+  justify-content: flex-end;
+  margin-left: auto;
+  position: relative;
 }
 
-.py-detect-title {
-  position: fixed;
-  margin-left: 132px;
-  margin-top: -208px;
-  text-align: left;
-  font-size: 4vw;
-  color: #38bdf8;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
-  font-weight: 900;
-  letter-spacing: 6px;
-  background: none;
+.field-selector-btn.modern-selector-animated {
+  border-radius: 24px;
+  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
+  color: #fff;
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 10px 22px;
   border: none;
-  box-shadow: none;
-  min-width: unset;
-  max-width: unset;
+  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
+  outline: none;
+  position: relative;
+  z-index: 2;
+  animation: selectorPulse 2s infinite alternate;
 }
 
-  /* Py-Detect title: each letter with its own color */
-  .py-detect-title .py-letter.p {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.field-selector-btn.modern-selector-animated:hover,
+.field-selector-btn.modern-selector-animated.active {
+  background: linear-gradient(135deg, #06ffa5 0%, #00d4ff 60%, #ff006e 100%);
+  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18);
+  transform: scale(1.04);
+}
 
-  .py-detect-title .py-letter.y {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+@keyframes selectorPulse {
+  0% { box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); }
+  100% { box-shadow: 0 6px 24px rgba(0, 212, 255, 0.18); }
+}
 
-  .py-detect-title .py-shape {
-    color: #e3f6ff;
-    background: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-    box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
-    border: 2px solid #23272b;
-  }
+.field-selector-btn.modern-selector-animated i {
+  font-size: 1.2em;
+}
 
-  .py-detect-title .py-letter.d {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+/* Highlight filled field-container with green border */
+.field-container.filled {
+  border-color: #06ffa5 !important;
+  box-shadow: 0 0 0 2px rgba(6,255,165,0.12);
+  transition: border-color 0.25s, box-shadow 0.25s;
+}
 
-  .py-detect-title .py-letter.e {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+/* ===== REMOVE BODY OVERFLOW ===== */
+body {
+  overflow-x: hidden !important;
+  width: 100vw !important;
+  box-sizing: border-box !important;
+}
 
-  .py-detect-title .py-letter.t {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+html {
+  overflow-x: hidden !important;
+  width: 100vw !important;
+  box-sizing: border-box !important;
+}
 
-  .py-detect-title .py-letter.e2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+/* ===== ENSURE ALL CONTAINERS ARE FULL WIDTH ===== */
+.site-header,
+.section-navigation,
+.subgroup-pills,
+.page-indicator-container {
+  width: 100vw !important;
+  max-width: 100vw !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+}
 
-  .py-detect-title .py-letter.c {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
+/* ===== RESPONSIVE FULL WIDTH ===== */
+@media (max-width: 768px) {
+  .investigation-container {
+    padding: 16px 0 !important;
+    margin-left: -50vw !important;
+    margin-right: -50vw !important;
+    left: 50% !important;
+    right: 50% !important;
+  }
+  
+  .form-card {
+    padding: 0 16px !important;
+    border-radius: 0 !important;
+  }
+  
+  .card-header {
+    margin: 0 -16px !important;
+    padding: 12px 16px !important;
+  }
+  
+  .fields-grid {
+    grid-template-columns: 1fr !important;
+    gap: 12px !important;
   }
+  
+  .card-actions {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: 8px !important;
+  }
+  
+  .field-selector-container {
+    width: 100% !important;
+  }
+  
+  .field-selector-btn {
+    width: 100% !important;
+    justify-content: center !important;
+  }
+}
 
-  .py-detect-title .py-letter.t2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
+@media (max-width: 480px) {
+  .investigation-container {
+    padding: 12px 0 !important;
   }
+  
+  .form-card {
+    padding: 0 12px !important;
+  }
+  
+  .card-header {
+    margin: 0 -12px !important;
+    padding: 10px 12px !important;
+  }
+  
+  .card-content {
+    padding: 16px 0 !important;
+  }
+}
 
-.py-shape {
-  display: inline-block;
-  width: 18px;
-  height: 4px;
-  background: #38bdf8;
-  margin: 0 8px;
-  vertical-align: middle;
-  border-radius: 2px;
-  box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
-  border: 2px solid #23272b;
-}
-/* ===== Layout ===== */
-.content {
-  min-height: calc(100vh - var(--masthead-min-height));
-  display: flex;
-  justify-content: center;
-  padding: 16px;
+/* Crime Details style for autosave button */
+.autosave-indicator.crime-section-btn {
+  background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%) !important;
+  border: 2px solid #4A90E2 !important;
+  color: #357ABD !important;
+  font-weight: 600 !important;
+  border-radius: 20px !important;
+  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.08) !important;
+  padding: 10px 20px !important;
+  transition: all 0.3s;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
 }
 
-.wrapper {
-  max-width: 960px;
-  width: 100%;
-  margin: 80px auto 0 auto; /* Add top margin to wrapper to create space below title */
+.autosave-indicator.crime-section-btn:hover {
+  border-color: #357ABD !important;
+  color: #fff !important;
+  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
+  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important;
 }
 
-.page-title {
-  margin: 0 0 12px;
-  color: #fff;
-  font-weight: 800;
+.autosave-right {
+  margin-left: auto !important;
+  margin-right: 0 !important;
 }
 
-/* ===== Steps / Card / Form ===== */
-.steps {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
+.autosave-left {
+  margin-right: auto !important;
+  margin-left: 0 !important;
 }
 
-.step {
-  flex: 1;
-  text-align: center;
-  padding: 10px 8px;
-  border-radius: 8px;
-  background: #e9ecef;
-  font-weight: 600;
-  opacity: 0.8;
+.header-actions {
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px !important;
+}
+
+.header-actions.autosave-right {
+  display: flex !important;
+  justify-content: flex-end !important;
+  width: 100%;
 }
 
-  .step.active {
-    background: #2f855a;
-    color: #fff;
-    opacity: 1;
+.autosave-indicator {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  padding: 8px 16px !important;
+  background: rgba(255, 255, 255, 0.15) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 8px !important;
+  font-size: 0.875rem !important;
+  color: white !important;
+  font-weight: 500 !important;
+  backdrop-filter: blur(10px) !important;
+}
+
+  .autosave-indicator.saving {
+    background: rgba(255, 255, 255, 0.25) !important;
+    animation: pulse 1.5s ease-in-out infinite !important;
   }
 
-.card {
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  padding: 16px;
-  background: #fff;
-  box-shadow: 0 2px 10px rgba(0,0,0,.04);
-  margin-bottom: 16px;
-  width: 100%;
+.main-section-pill {
+  font-size: 1.25rem !important;
+  padding: 20px 36px !important;
+  min-width: 200px !important;
+  min-height: 64px !important;
+  border-width: 2.5px !important;
+  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18) !important;
+}
+
+.main-section-pill i {
+  font-size: 2rem !important;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px 16px;
+.main-section-pill span {
+  font-size: 1.25em !important;
+  font-weight: 700 !important;
 }
 
-label {
+/* ===== MODERN NAVIGATION BUTTONS ===== */
+.modern-nav-btns {
   display: flex;
-  flex-direction: column; /* input below the label text */
-  gap: 6px;
-  font-size: 14px;
+  justify-content: flex-end;
+  gap: 18px;
+  margin-top: 32px;
+  margin-bottom: 8px;
 }
 
-/* Put label text and * on the same line */
-.label-main {
-  display: inline-flex;
+.modern-round-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
+  color: #fff;
+  font-size: 2rem;
+  display: flex;
   align-items: center;
-  gap: 4px;
-  font-weight: 600;
+  justify-content: center;
+  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18), 0 1.5px 6px rgba(0,0,0,0.08);
+  cursor: pointer;
+  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
+  outline: none;
+  position: relative;
+  z-index: 2;
 }
 
-label.full {
-  grid-column: 1 / -1;
+.modern-round-btn:active {
+  transform: scale(0.93);
+  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.12);
 }
 
-input, select, textarea, button {
-  font: inherit;
+.modern-round-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-input, select, textarea {
-  padding: 10px;
-  border: 1px solid #cbd5e0;
-  border-radius: 6px;
-  background: #fdfdfd;
+.next-btn-animated {
+  animation: bounceRight 1.2s infinite alternate;
 }
 
-textarea {
-  resize: vertical;
+@keyframes bounceRight {
+  0% { transform: translateX(0); }
+  60% { transform: translateX(6px) scale(1.08); }
+  100% { transform: translateX(0); }
 }
 
-fieldset {
-  border: 1px dashed #cbd5e0;
-  border-radius: 8px;
-  padding: 10px 12px;
+.submit-btn-animated {
+  animation: pulseSend 1.5s infinite alternate;
 }
 
-legend {
-  padding: 0 6px;
+@keyframes pulseSend {
+  0% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
+  60% { box-shadow: 0 8px 32px rgba(255, 0, 110, 0.22); }
+  100% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
 }
 
-.req {
-  color: #c53030;
-  line-height: 1;
+.modern-round-btn i {
+  font-size: 2rem;
+  pointer-events: none;
 }
 
-.error {
-  color: #c53030;
-  font-size: 12px;
+/* ===== FLOATING NAVIGATION BUTTON ===== */
+.modern-floating-nav-btn {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: none;
+}
+
+.modern-floating-nav-btn .modern-round-btn {
+  pointer-events: auto;
+}
+
+@media (max-width: 600px) {
+  .modern-floating-nav-btn {
+    bottom: 16px;
+    right: 16px;
+  }
 }
 
-.row-between {
+/* Compact Card Header */
+.compact-card-header {
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  padding: 8px 16px !important;
+  min-height: 0;
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(255, 0, 110, 0.04)) !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
+  margin: 0 -24px !important;
+}
+
+.card-header-main {
+  display: flex;
   align-items: center;
+  gap: 8px;
 }
 
-.list {
+.compact-title {
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 8px;
-  margin-top: 8px;
+  color: #00d4ff !important;
+  background: none !important;
+}
+
+.compact-title i {
+  font-size: 1.1em;
+  color: #00d4ff;
+}
+
+.field-counter.compact-field-counter {
+  font-size: 0.95em !important;
+  font-weight: 600 !important;
+  color: #222 !important;
+  background: none !important;
+  padding: 0 0 0 8px !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  text-shadow: none !important;
+}
+
+.modern-field-selector-btn.compact-selector-btn {
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+
+.field-selector-btn.modern-selector-animated.compact-selector-btn-inner {
+  font-size: 0.95rem;
+  padding: 4px 14px;
+  min-width: 0;
+  height: 32px;
+  border-radius: 16px;
+  gap: 6px;
+}
+
+.field-selector-btn.modern-selector-animated.compact-selector-btn-inner i {
+  font-size: 1em;
+}
+
+.field-selector-counter {
+  font-size: 0.95em;
+  font-weight: 600;
+  margin-left: 2px;
+}
+
+/* ===== MODERN FIELD SELECTOR POPUP ===== */
+.modern-field-selector-popup {
+  position: absolute;
+  top: 110%;
+  right: 0;
+  min-width: 260px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0,212,255,0.12);
+  z-index: 3000 !important;
+  padding: 18px 20px 16px 20px;
+  animation: popupFadeIn 0.25s cubic-bezier(.4,2,.6,1);
+}
+
+.modern-field-selector-btn {
+  position: relative;
+}
+
+@keyframes popupFadeIn {
+  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-.list-item {
+.popup-header {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.popup-header span {
+  font-weight: 700;
+  font-size: 1.1em;
+  display: flex;
+  align-items: center;
   gap: 8px;
+  color: #00d4ff;
+}
+
+.popup-header i {
+  color: #00d4ff;
 }
 
-button.link {
+.popup-close-btn {
   background: none;
   border: none;
-  color: #2b6cb0;
+  font-size: 1.2em;
+  color: #ff006e;
   cursor: pointer;
-  padding: 0;
+  transition: color 0.18s;
+}
+.popup-close-btn:hover {
+  color: #00d4ff;
 }
 
-button.danger {
-  background: #e53e3e;
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  padding: 8px 10px;
+.popup-fields-list {
+  max-height: 220px;
+  overflow: auto;
+  margin-bottom: 16px;
+  padding-right: 2px;
+}
+
+.popup-field-row {
+  margin-bottom: 8px;
+}
+
+.popup-field-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1em;
   cursor: pointer;
+  user-select: none;
+  font-weight: 500;
+  color: #222;
+  border-radius: 6px;
+  padding: 2px 4px;
+  transition: background 0.15s;
+}
+.popup-field-label:hover {
+  background: #f0faff;
+}
+
+.popup-field-label input[type="checkbox"] {
+  accent-color: #00d4ff;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1.5px solid #00d4ff;
+  margin: 0;
+  transition: box-shadow 0.15s;
+}
+
+.popup-field-label input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 2px #06ffa5;
 }
 
-.files {
-  margin: 6px 0 0;
-  padding-left: 16px;
+.popup-field-text {
+  font-weight: 500;
+  color: #222;
 }
 
-.actions {
+.popup-actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   gap: 8px;
 }
 
-button {
-  padding: 10px 14px;
-  border: 1px solid #cbd5e0;
+.popup-action-btn {
+  flex: 1;
+  border: none;
   border-radius: 8px;
-  background: #f7fafc;
+  padding: 8px 0;
+  font-weight: 600;
+  font-size: 1em;
   cursor: pointer;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 }
 
-  button.primary {
-    background: #2f855a;
-    color: #fff;
-    border-color: #2f855a;
-  }
-
-  button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
+.popup-action-btn.clear-btn {
+  background: #f8f8f8;
+  color: #ff006e;
+}
+.popup-action-btn.clear-btn:hover {
+  background: #ffe6f0;
+  color: #d1005b;
+}
 
-.scrollable-suspect-form {
-  max-height: 350px;
-  overflow-y: auto;
-  padding-right: 8px; /* Optional: for scrollbar space */
+.popup-action-btn.selectall-btn {
+  background: #f8f8f8;
+  color: #06ffa5;
+}
+.popup-action-btn.selectall-btn:hover {
+  background: #e6fff7;
+  color: #00d4ff;
 }
 
-@media (max-width: 700px) {
-  .grid {
-    grid-template-columns: 1fr;
-  }
+.popup-action-btn.save-btn {
+  background: linear-gradient(135deg,#00d4ff,#06ffa5,#ff006e);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0,212,255,0.10);
+}
+.popup-action-btn.save-btn:hover {
+  background: linear-gradient(135deg,#06ffa5,#00d4ff,#ff006e);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(0,212,255,0.18);
+}
 
-  .brand-logo {
-    width: 64px;
-    height: 64px;
-  }
+/* ===== SUBMIT SUCCESS POPUP ===== */
+.submit-popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.35);
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.submit-popup-modal {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+  padding: 32px 36px 28px 36px;
+  min-width: 320px;
+  max-width: 90vw;
+  text-align: center;
+  z-index: 3001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.submit-popup-content h3 {
+  color: #38bdf8;
+  margin: 12px 0 8px 0;
+  font-size: 1.4em;
+  font-weight: 700;
+}
+.submit-popup-content p {
+  color: #23272b;
+  font-size: 1.08em;
+  margin-bottom: 18px;
+}
+.submit-popup-btn {
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #fff;
+  font-size: 1em;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 32px;
+  box-shadow: 0 2px 12px #38bdf888;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
 }
+.submit-popup-btn:hover {
+  background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+  color: #bae6fd;
+  box-shadow: 0 2px 24px #bae6fd88;
+}
+.submit-popup-icon {
+  color: #38bdf8;
+  font-size: 2.6em;
+  margin-bottom: 8px;
+}
+

src/app/infopage/infopage.component.html

@@ -1,245 +1,296 @@
-<!-- Add gap below title row -->
-<div style="height:128px;"></div>
-
-<!-- Header (in normal flow so content appears below it) -->
-<div class="logo-title-row">
-  <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img" (click)="navigateHome()" style="cursor:pointer;" />
-  <div class="py-detect-title">
-    <span class="py-letter p">P</span>
-    <span class="py-letter y">Y</span>
-    <span class="py-shape"></span>
-    <span class="py-letter d">D</span>
-    <span class="py-letter e">E</span>
-    <span class="py-letter t">T</span>
-    <span class="py-letter e2">E</span>
-    <span class="py-letter c">C</span>
-    <span class="py-letter t2">T</span>
+<!-- AI-Enhanced Remote Tech Jobs Style Header -->
+<div class="site-header">
+  <div class="header-inner">
+    <div class="logo-cluster">
+      <span [routerLink]="'/'" style="cursor:pointer;display:flex;align-items:center;">
+        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
+      </span>
+      <div class="py-detect-title-header">
+        <span class="py-letter p">P</span>
+        <span class="py-letter y">Y</span>
+        <span class="py-shape"></span>
+        <span class="py-letter d">D</span>
+        <span class="py-letter e">E</span>
+        <span class="py-letter t">T</span>
+        <span class="py-letter e2">E</span>
+        <span class="py-letter c">C</span>
+        <span class="py-letter t2">T</span>
+      </div>
+    </div>
+    <div class="header-progress">
+      <span class="pykara-analysis-label">Progress:</span>
+      <div class="pykara-progress-bar">
+        <div class="pykara-progress-bar-inner" [style.width.%]="progressPercentage"></div>
+      </div>
+      <span class="pykara-progress-percentage">{{ progressPercentage }}%</span>
+    </div>
+    <div class="header-actions autosave-right">
+      <div class="autosave-indicator" [class.saving]="isAutoSaving">
+        <i class="fas fa-save"></i>
+        <span>{{ autoSaveStatus }}</span>
+      </div>
+    </div>
   </div>
 </div>
 
-<!-- Main content starts below header -->
-<main class="content" role="main">
-  <div class="wrapper">
-    <h1 class="page-title">Investigation Form</h1>
+<!-- AI-Enhanced Tech Jobs Style Section Navigation -->
+<div class="section-navigation" [@fadeIn]>
+  <div class="ai-neural-bg"></div>
+  <div class="section-pills">
+    <button class="section-pill main-section-pill ai-enhanced"
+            *ngFor="let section of sectionKeys; let i = index"
+            [class.active]="currentSection === section"
+            [class.completed]="isSectionCompleted(section)"
+            [attr.data-step]="i + 1"
+            (click)="showSection(section)"
+            [attr.tabindex]="0">
+      <div class="pill-neural-core"></div>
+      <i [class]="sectionIcons[section]"></i>
+      <span>{{ sections[section].title }}</span>
+      <div class="ai-completion-orb" *ngIf="isSectionCompleted(section)">
+        <div class="orb-pulse"></div>
+        <i class="fas fa-check"></i>
+      </div>
+      <div class="pill-scanner"></div>
+    </button>
+  </div>
+  <div class="section-ai-grid"></div>
+</div>
 
-    <!-- Progress -->
-    <div class="steps">
-      <div class="step" [class.active]="step === 1">1. Crime</div>
-      <div class="step" [class.active]="step === 2">2. Suspect</div>
-      <div class="step" [class.active]="step === 3">3. Notes & Attachments</div>
+<!-- AI-Enhanced Job Category Style Subgroup Navigation with Section-Specific Styling -->
+<div class="subgroup-pills" 
+     [class.crime-section]="currentSection === 'crime'"
+     [class.suspect-section]="currentSection === 'suspect'"
+     [class.notes-section]="currentSection === 'notes'"
+     [@fadeIn]>
+  <div class="neural-mesh"></div>
+  <div class="pill ai-subgroup-pill" 
+       *ngFor="let key of getSubgroups(); let i = index"
+       [class.active]="key === currentSubgroup"
+       [class.completed]="isSubgroupCompleted(key)"
+       (click)="setSubgroup(key)"
+       [attr.tabindex]="0">
+    <div class="pill-ai-core"></div>
+    <i [class]="subgroupIcons[key] || 'fas fa-circle'"></i>
+    <span>{{ key }}</span>
+    <div class="ai-completion-badge" *ngIf="isSubgroupCompleted(key)">
+      <div class="badge-glow"></div>
+      <i class="fas fa-check-circle"></i>
     </div>
+    <div class="pill-ai-scanner"></div>
+  </div>
+</div>
 
-    <form [formGroup]="form" novalidate>
-      <!-- Step 1: Crime -->
-      <section *ngIf="step === 1" class="card" [formGroup]="crimeGroup">
-        <h2>Crime Information</h2>
-
-        <div class="grid">
-          <label>
-            <span class="label-main">Case ID</span>
-            <input formControlName="caseId" placeholder="Auto or manual" />
-          </label>
-
-          <label>
-            <span class="label-main">Crime Type <span class="req">*</span></span>
-            <select formControlName="crimeType">
-              <option value="" disabled>Select</option>
-              <option *ngFor="let t of crimeTypes" [value]="t">{{ t }}</option>
-            </select>
-            <small class="error" *ngIf="crimeGroup.get('crimeType')?.touched && crimeGroup.get('crimeType')?.invalid">
-              Crime type is required.
-            </small>
-          </label>
+<!-- Job Cards Style Layout - Universal Single Card Layout for All Pages -->
+<div class="investigation-container">
+  
+  <!-- Universal Single Investigation Card -->
+  <div class="form-card primary-card" [@cardSlide] #formCard1>
+    <div class="card-header compact-card-header">
+      <div class="card-header-main">
+        <h2 class="compact-title">
+          <i [class]="subgroupIcons[currentSubgroup] || 'fas fa-circle'"></i>
+          {{ currentSubgroup }}
+          <span class="field-counter compact-field-counter">{{ getSelectedFieldCount() }} of {{ getTotalAvailableFieldsCount() }}</span>
+        </h2>
+      </div>
+      <div class="modern-field-selector-btn compact-selector-btn" style="position:relative;">
+        <button class="field-selector-btn modern-selector-animated compact-selector-btn-inner"
+                [class.active]="showFieldSelector === (currentSection + '-' + currentSubgroup)"
+                (click)="toggleFieldSelector($event)"
+                type="button"
+                title="Select fields to display">
+          <i class="fas fa-list-check"></i>
+          <span class="field-selector-counter">{{ getSelectedFieldCount() }}/{{ getDynamicMaxSelectable() }}</span>
+        </button>
+        <!-- Field Selector Popup: floating, anchored to button -->
+        <div class="modern-field-selector-popup"
+             *ngIf="showFieldSelector === (currentSection + '-' + currentSubgroup)">
+          <div class="popup-header">
+            <span><i class="fas fa-list-check"></i> Select Fields to Display</span>
+            <button class="popup-close-btn" (click)="closeFieldSelector()" type="button">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+          <div class="popup-fields-list">
+            <div *ngFor="let field of getAvailableFields(); trackBy: trackByField" class="popup-field-row">
+              <label class="popup-field-label">
+                <input type="checkbox"
+                       [checked]="isFieldSelected(field)"
+                       (change)="toggleFieldSelection(field, $event)" />
+                <span class="popup-field-text">{{ field }}</span>
+              </label>
+            </div>
+          </div>
+          <div class="popup-actions">
+            <button class="popup-action-btn clear-btn" (click)="resetFieldSelection($event)" type="button">
+              <i class="fas fa-times-circle"></i> Clear All
+            </button>
+            <button class="popup-action-btn selectall-btn" (click)="selectAllFields($event)" type="button">
+              <i class="fas fa-check-double"></i> Select All
+            </button>
+            <button class="popup-action-btn save-btn" (click)="closeFieldSelector()" type="button">
+              <i class="fas fa-save"></i> Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
 
-          <label>
-            <span class="label-main">Date & Time <span class="req">*</span></span>
-            <input type="datetime-local" formControlName="dateTime" />
-            <small class="error" *ngIf="crimeGroup.get('dateTime')?.touched && crimeGroup.get('dateTime')?.invalid">
-              Date & time is required.
-            </small>
-          </label>
 
-          <label>
-            <span class="label-main">Location <span class="req">*</span></span>
-            <input formControlName="location" placeholder="Address / Area" />
-            <small class="error" *ngIf="crimeGroup.get('location')?.touched && crimeGroup.get('location')?.invalid">
-              Location is required.
-            </small>
-          </label>
+    <div class="card-content" [class.minimized]="isCardMinimized.primary">
+      <div class="section-description" [@fadeIn]>
+        <strong>{{ sections[currentSection].title }} - {{ currentSubgroup }}:</strong> {{ getSectionDescription(currentSection) }}
+      </div>
 
-          <label>
-            <span class="label-main">Reported By (Name)</span>
-            <input formControlName="reportedByName" />
-          </label>
+      <div class="fields-grid">
+        <div *ngFor="let field of getPrimaryFields(); let i = index; trackBy: trackByField"
+             class="field-container"
+             [class.filled]="formData[field] && formData[field].toString().trim() !== ''"
+             [attr.data-field]="field"
+             [@fieldAnimation]>
 
-          <label>
-            <span class="label-main">Reported By (Contact Number)</span>
-            <input formControlName="reportedByContact" />
+          <label class="field-label">
+            {{ field }}
+            <span class="required-indicator" *ngIf="isFieldRequired(field)">*</span>
+            <button type="button"
+                    class="info-btn glossy-info-btn"
+                    (click)="toggleFieldInfo(field, $event)"
+                    [attr.aria-label]="'Info for ' + field">
+              <i class="fas fa-info"></i>
+            </button>
           </label>
 
-          <label class="full">
-            <span class="label-main">Brief Description <span class="req">*</span></span>
-            <textarea rows="4" formControlName="description" placeholder="Short summary"></textarea>
-            <small class="error" *ngIf="crimeGroup.get('description')?.touched && crimeGroup.get('description')?.invalid">
-              Description (min 10 characters) is required.
-            </small>
-          </label>
-        </div>
-      </section>
-
-      <!-- Step 2: Suspect -->
-      <section *ngIf="step === 2" class="card" [formGroup]="suspectGroup">
-        <h2>Suspect Details</h2>
-
-        <div class="scrollable-suspect-form">
-          <div class="grid">
-            <label>
-              <span class="label-main">Suspect ID</span>
-              <input formControlName="suspectId" />
-            </label>
-
-            <label>
-              <span class="label-main">Full Name <span class="req">*</span></span>
-              <input formControlName="fullName" />
-              <small class="error" *ngIf="suspectGroup.get('fullName')?.touched && suspectGroup.get('fullName')?.invalid">
-                Full name is required.
-              </small>
-            </label>
-
-            <label>
-              <span class="label-main">Alias / Nickname</span>
-              <input formControlName="alias" />
-            </label>
-
-            <label>
-              <span class="label-main">Date of Birth</span>
-              <input type="date" formControlName="dob" />
-            </label>
-
-            <label>
-              <span class="label-main">Gender <span class="req">*</span></span>
-              <select formControlName="gender">
-                <option *ngFor="let g of genders" [value]="g">{{ g }}</option>
-              </select>
-            </label>
-
-            <label class="full">
-              <span class="label-main">Address / Known Address</span>
-              <input formControlName="address" />
-            </label>
-
-            <div class="full">
-              <div class="row-between">
-                <strong>Known Locations</strong>
-                <button type="button" class="link" (click)="addKnownLocation()">+ Add location</button>
+          <!-- Dynamic Field Rendering -->
+          <div class="input-container">
+            <!-- File Upload Fields -->
+            <div *ngIf="fileFields.has(field); else nonFileField" class="file-upload-block">
+              <div class="file-drop-zone"
+                   (dragover)="onDragOver($event)"
+                   (dragleave)="onDragLeave($event)"
+                   (drop)="onFileDrop(field, $event)"
+                   [class.drag-over]="isDragOver">
+                <input type="file"
+                       (change)="onFileChange(field, $event)"
+                       multiple
+                       [accept]="getAcceptedFileTypes(field)"
+                       class="file-input" />
+                <div class="drop-zone-content">
+                  <i class="fas fa-cloud-upload-alt"></i>
+                  <p>Drop files here or click to browse</p>
+                </div>
               </div>
-              <div formArrayName="knownLocations" class="list">
-                <div class="list-item" *ngFor="let ctrl of knownLocations.controls; let i = index">
-                  <input [formControlName]="i" placeholder="e.g., Workplace, Frequent area" />
-                  <button type="button" class="danger" (click)="removeKnownLocation(i)">Remove</button>
+              <div class="file-list" *ngIf="uploadedFiles[field]?.length">
+                <div *ngFor="let f of uploadedFiles[field]" class="file-chip">
+                  <i [class]="getFileIcon(f.name)"></i>
+                  <span [title]="f.name">{{ f.name | slice:0:15 }}{{ f.name.length > 15 ? '...' : '' }}</span>
+                  <button class="remove-file" (click)="removeFile(field, f)">
+                    <i class="fas fa-times"></i>
+                  </button>
                 </div>
               </div>
             </div>
 
-            <fieldset class="full" formGroupName="contact">
-              <legend>Contact</legend>
-              <div class="grid">
-                <label>
-                  <span class="label-main">Phone</span>
-                  <input formControlName="phone" />
-                </label>
-                <label>
-                  <span class="label-main">Email</span>
-                  <input formControlName="email" />
-                  <small class="error" *ngIf="suspectGroup.get('contact.email')?.touched && suspectGroup.get('contact.email')?.invalid">
-                    Enter a valid email.
-                  </small>
-                </label>
-              </div>
-            </fieldset>
-
-            <fieldset class="full" formGroupName="physical">
-              <legend>Physical Description</legend>
-              <div class="grid">
-                <label>
-                  <span class="label-main">Height (cm)</span>
-                  <input type="number" formControlName="heightCm" />
-                </label>
-                <label>
-                  <span class="label-main">Weight (kg)</span>
-                  <input type="number" formControlName="weightKg" />
-                </label>
-                <label>
-                  <span class="label-main">Build</span>
-                  <input formControlName="build" placeholder="Slim / Average / Heavy" />
-                </label>
-                <label>
-                  <span class="label-main">Hair Color</span>
-                  <input formControlName="hairColor" />
-                </label>
-                <label>
-                  <span class="label-main">Eye Color</span>
-                  <input formControlName="eyeColor" />
-                </label>
-                <label class="full">
-                  <span class="label-main">Distinguishing Marks</span>
-                  <input formControlName="marks" placeholder="Tattoos, scars, etc." />
-                </label>
-              </div>
-            </fieldset>
+            <ng-template #nonFileField>
+              <!-- Date/Time Fields -->
+              <ng-container *ngIf="dateTimeFields.has(field); else nonDateTime">
+                <input type="datetime-local"
+                       class="field-input"
+                       [class.compact]="isCompactField(field)"
+                       [(ngModel)]="formData[field]"
+                       (input)="onFieldChange(field)" />
+              </ng-container>
 
-            <div class="full">
-              <label>
-                <span class="label-main">Photo Upload</span>
-                <input type="file" accept="image/*" (change)="onPhotoChange($event)" />
-              </label>
-            </div>
-          </div>
-        </div>
-      </section>
+              <ng-template #nonDateTime>
+                <ng-container *ngIf="dateFields.has(field); else nonDate">
+                  <input type="date"
+                         class="field-input"
+                         [class.compact]="isCompactField(field)"
+                         [(ngModel)]="formData[field]"
+                         (input)="onFieldChange(field)" />
+                </ng-container>
 
-      <!-- Step 3: Notes & Attachments -->
-      <section *ngIf="step === 3" class="card" [formGroup]="notesGroup">
-        <h2>Investigation Notes</h2>
+                <ng-template #nonDate>
+                  <!-- Cascading Dropdowns -->
+                  <ng-container *ngIf="field === 'Country' || field === 'State' || field === 'District'; else standardField">
+                    <select class="field-input"
+                            [class.compact]="isCompactField(field)"
+                            [(ngModel)]="formData[field]"
+                            (change)="onSelectChange(field, $event)">
+                      <option value="">-- Select {{ field }} --</option>
+                      <option *ngFor="let opt of getOptions(field)" [value]="opt">{{ opt }}</option>
+                    </select>
+                  </ng-container>
 
-        <div class="grid">
-          <label class="full">
-            <span class="label-main">Initial Findings</span>
-            <textarea rows="4" formControlName="initialFindings"></textarea>
-          </label>
+                  <ng-template #standardField>
+                    <!-- Standard Select or Text Input -->
+                    <select *ngIf="getOptions(field)?.length; else textInput"
+                            class="field-input"
+                            [class.compact]="isCompactField(field)"
+                            [(ngModel)]="formData[field]"
+                            (change)="onSelectChange(field, $event)">
+                      <option value="">-- Select Option --</option>
+                      <option *ngFor="let opt of getOptions(field)" [value]="opt">{{ opt }}</option>
+                    </select>
 
-          <label>
-            <span class="label-main">Investigation Officer</span>
-            <input formControlName="Investigation Officer" placeholder="Select/Type officer name" />
-          </label>
+                    <ng-template #textInput>
+                      <!-- Description fields as textarea -->
+                      <textarea *ngIf="field.toLowerCase().includes('description'); else regularInput"
+                                class="field-input"
+                                [class.compact]="isCompactField(field)"
+                                [(ngModel)]="formData[field]"
+                                (input)="onFieldChange(field)"
+                                [placeholder]="getFieldPlaceholder(field)"
+                                [maxlength]="getMaxLength(field)"
+                                rows="3"></textarea>
 
-          <label>
-            <span class="label-main">Status <span class="req">*</span></span>
-            <select formControlName="status">
-              <option *ngFor="let s of statuses" [value]="s">{{ s }}</option>
-            </select>
-          </label>
+                      <ng-template #regularInput>
+                        <input [type]="getInputType(field)"
+                               class="field-input"
+                               [class.compact]="isCompactField(field)"
+                               [(ngModel)]="formData[field]"
+                               (input)="onFieldChange(field)"
+                               [placeholder]="getFieldPlaceholder(field)"
+                               [maxlength]="getMaxLength(field)" />
+                      </ng-template>
+                    </ng-template>
+                  </ng-template>
+                </ng-template>
+              </ng-template>
+            </ng-template>
+          </div>
 
-          <div class="full">
-            <label>
-              <span class="label-main">Attachments (CCTV, documents, etc.)</span>
-              <input type="file" multiple (change)="onAttachmentsChange($event)" />
-            </label>
-            <ul class="files">
-              <li *ngFor="let c of attachments.controls; let i = index">
-                {{ c.value?.name || ('Attachment ' + (i + 1)) }}
-              </li>
-            </ul>
+          <!-- Field Help Popover -->
+          <div class="field-help" *ngIf="showHelpFor === field" [@helpAnimation]>
+            <strong>Field Information:</strong><br>
+            {{ fieldDescriptions[field] || 'Additional details for this field are being prepared.' }}
           </div>
         </div>
-      </section>
-
-      <!-- Actions -->
-      <div class="actions">
-        <button type="button" (click)="back()" [disabled]="step===1">Back</button>
-        <button type="button" (click)="next()" *ngIf="step<3">Next</button>
-        <button type="button" class="primary" (click)="submit()" *ngIf="step===3">Submit Case</button>
       </div>
-    </form>
+    </div>
+    <!-- Removed modern-nav-btns from here to prevent scrolls -->
+  </div>
+</div>
+
+<!-- Floating Modern Navigation Button (fixed, no scroll) -->
+<div class="modern-floating-nav-btn">
+  <button *ngIf="!isLastSubgroup()" type="button" class="modern-round-btn next-btn-animated" (click)="nextSubgroup()" [disabled]="!canNextSubgroup()" title="Next">
+    <i class="fas fa-arrow-right"></i>
+  </button>
+  <button *ngIf="isLastSubgroup()" type="button" class="modern-round-btn submit-btn-animated" (click)="submitCurrentSection()" title="Submit">
+    <i class="fas fa-paper-plane"></i>
+  </button>
+</div>
+
+<!-- Submission Success Popup - Enhanced with Clickable Background and Navigation on Close -->
+<div *ngIf="showSubmitPopup" class="submit-popup-backdrop">
+  <div class="submit-popup-modal">
+    <div class="submit-popup-content" (click)="onSubmitPopupClose()" style="cursor:pointer;">
+      <i class="fas fa-check-circle submit-popup-icon"></i>
+      <h3>Submission Successful!</h3>
+      <p>Your information has been submitted.</p>
+      <button class="submit-popup-btn">OK</button>
+    </div>
   </div>
-</main>
+</div>
+

src/app/infopage/infopage.component.ts

@@ -1,223 +1,1145 @@
-import { Component, OnInit } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
-import { CaseStoreService, PoliceCase } from '../case-store.service';
-
-type CrimeType = 'Theft' | 'Assault' | 'Fraud' | 'Murder' | 'Cybercrime' | 'Other';
-type Gender = 'Male' | 'Female' | 'Other';
-type CaseStatus = 'Open' | 'Under Investigation' | 'Closed';
+import { Component, HostListener, ElementRef, ViewChild, AfterViewInit, OnInit, OnDestroy } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { Subject, debounceTime, takeUntil } from 'rxjs';
+import { Router } from '@angular/router';
+import { CaseStoreService } from '../case-store.service';
 
 @Component({
   selector: 'app-infopage',
   templateUrl: './infopage.component.html',
-  styleUrls: ['./infopage.component.css']
+  styleUrls: ['./infopage.component.css'],
+  animations: [
+    // Simple card animation
+    trigger('cardSlide', [
+      transition(':enter', [
+        style({ transform: 'translateY(20px)', opacity: 0 }),
+        animate('300ms ease-out', 
+          style({ transform: 'translateY(0)', opacity: 1 }))
+      ])
+    ]),
+    // Field animation
+    trigger('fieldAnimation', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(10px)' }),
+        animate('200ms ease-out', 
+          style({ opacity: 1, transform: 'translateY(0)' }))
+      ])
+    ]),
+    // Simple fade animation
+    trigger('fadeIn', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('200ms ease-in', style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate('150ms ease-out', style({ opacity: 0 }))
+      ])
+    ]),
+    // Help animation
+    trigger('helpAnimation', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(-10px)' }),
+        animate('200ms ease-out', 
+          style({ opacity: 1, transform: 'translateY(0)' }))
+      ]),
+      transition(':leave', [
+        animate('150ms ease-in', 
+          style({ opacity: 0, transform: 'translateY(-10px)' }))
+      ])
+    ])
+  ]
 })
-export class InfopageComponent implements OnInit {
-  step = 1;
-
-  crimeTypes: CrimeType[] = ['Theft', 'Assault', 'Fraud', 'Murder', 'Cybercrime', 'Other'];
-  genders: Gender[] = ['Male', 'Female', 'Other'];
-  statuses: CaseStatus[] = ['Open', 'Under Investigation', 'Closed'];
-
-  // If navigating here via Edit, we store the index to update.
-  private editIndex: number | null = null;
-
-  form: FormGroup = this.fb.group({
-    crime: this.fb.group({
-      caseId: [''],
-      crimeType: ['', Validators.required],
-      dateTime: ['', Validators.required],
-      location: ['', Validators.required],
-      reportedByName: [''],
-      reportedByContact: [''],
-      description: ['', [Validators.required, Validators.minLength(10)]],
-    }),
-
-    suspect: this.fb.group({
-      suspectId: [''],
-      fullName: ['', Validators.required],
-      alias: [''],
-      dob: [''],
-      age: ['', [Validators.min(0)]],
-      gender: ['Male' as Gender, Validators.required],
-      address: [''],
-      knownLocations: this.fb.array([]),
-      contact: this.fb.group({
-        phone: [''],
-        email: ['', Validators.email],
-      }),
-      physical: this.fb.group({
-        heightCm: [''],
-        weightKg: [''],
-        build: [''],
-        hairColor: [''],
-        eyeColor: [''],
-        marks: [''],
-      }),
-      photo: [null], // File
-    }),
-
-    notes: this.fb.group({
-      initialFindings: [''],
-      officerInCharge: [''],
-      status: ['Open' as CaseStatus, Validators.required],
-      attachments: this.fb.array([]), // Files
-    }),
-  });
-
-  constructor(
-    private fb: FormBuilder,
-    private router: Router,
-    private route: ActivatedRoute,
-    private caseStore: CaseStoreService
-  ) { }
-
-  // ----------------- lifecycle -----------------
+export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
+  showRemarkModal: boolean = false;
+  showSubmitPopup: boolean = false;
+  constructor(private router: Router, private caseStore: CaseStoreService) {}
+  // Core state
+  currentSection: 'crime' | 'suspect' | 'notes' = 'crime';
+  currentSubgroup: string = 'Identification & Timing';
+  showHelpFor: string | null = null;
+  
+  // UI state
+  isAutoSaving: boolean = false;
+  autoSaveStatus: string = 'Saved';
+  isDragOver: boolean = false;
+  
+  // Card state
+  isCardMinimized = {
+    primary: false,
+    secondary: false,
+    tertiary: false
+  };
+  
+  // Form data and validation
+  formData: Record<string, any> = {};
+  fieldValidation: Record<string, { hasError: boolean, isValid: boolean, message: string }> = {};
+  completedFields: Set<string> = new Set();
+  completedSubgroups: Set<string> = new Set();
+  completedSections: Set<string> = new Set();
+  
+  // Subjects for reactive programming
+  private destroy$ = new Subject<void>();
+  private autoSave$ = new Subject<void>();
+  
+  // Constants - Reverted to original values except for Identification & Timing
+  readonly sectionKeys: ('crime' | 'suspect' | 'notes')[] = ['crime', 'suspect', 'notes'];
+  readonly maxFieldsPerCard = 8; // Reverted to original
+  readonly maxFieldsPerSecondaryCard = 8; // Reverted to original
+  readonly maxFieldsPerCardIdentificationTiming = 6; // Special for Identification & Timing
+  readonly maxFieldsPerSecondaryCardIdentificationTiming = 6; // Special for Identification & Timing
+  
+  @ViewChild('formCard1') formCard1!: ElementRef<HTMLDivElement>;
+  @ViewChild('formCard2') formCard2!: ElementRef<HTMLDivElement>;
+  @ViewChild('formCard3') formCard3!: ElementRef<HTMLDivElement>;
+
+  // Enhanced field definitions with validation rules
+  readonly requiredFields = new Set<string>([
+    'Case ID', 'Crime Type', 'Date & Time (Entry)', 'Location', 'Suspect Name', 'Age', 'Gender',
+    'FIR / Ref #', 'Case Category', 'Occurred From', 'Country', 'State', 'District',
+    'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Case Status', 'Investigating Officer'
+  ]);
+  
+  readonly compactFields = new Set<string>([
+    'Age', 'Gender', 'Height (cm)', 'Weight (kg)', 'Build', 'Hair Color', 'Eye Color',
+    'Number of Victims', 'Witness Count', 'Prior Arrests', 'arrest Count', 'Case Priority',
+    'Photos / Video?', 'CCTV Present?', 'Arrest Made', 'risk Level', 'Confidentiality'
+  ]);
+  
+  readonly numericFields = new Set<string>([
+    'Age', 'Height (cm)', 'Weight (kg)', 'Number of Victims', 'Witness Count', 'Prior Arrests', 'arrest Count'
+  ]);
+
+  // File type configurations
+  readonly fileTypeConfig: Record<string, string> = {
+    'Photo Upload': 'image/*',
+    'Evidence Photos': 'image/*',
+    'Evidence Videos': 'video/*',
+    'Evidence Documents': '.pdf,.doc,.docx,.txt',
+    'Evidence Files': '*',
+    'Upload Evidence Files': '*',
+    'Digital Evidence': '*'
+  };
+
+  // Track selected values (cascading dropdown logic)
+  selectedValues: Record<string, string> = {};
+
+  // Date field groups
+  dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
+  dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
+
+  // Country/State/District data
+  countries = ['India'];
+  indiaStates = [
+    'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat', 
+    'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh', 
+    'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab', 
+    'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh', 
+    'Uttarakhand', 'West Bengal'
+  ];
+  
+  tamilNaduDistricts = [
+    'Ariyalur', 'Chengalpattu', 'Chennai', 'Coimbatore', 'Cuddalore', 'Dharmapuri', 'Dindigul', 
+    'Erode', 'Kallakurichi', 'Kanchipuram', 'Kanyakumari', 'Karur', 'Krishnagiri', 'Madurai', 
+    'Mayiladuthurai', 'Nagapattinam', 'Namakkal', 'Nilgiris', 'Perambalur', 'Pudukkottai', 
+    'Ramanathapuram', 'Ranipet', 'Salem', 'Sivaganga', 'Tenkasi', 'Thanjavur', 'Theni', 
+    'Thoothukudi (Tuticorin)', 'Tiruchirappalli', 'Tirunelveli', 'Tirupathur', 'Tiruppur', 
+    'Tiruvallur', 'Tiruvannamalai', 'Tiruvarur', 'Vellore', 'Viluppuram', 'Virudhunagar'
+  ];
+
+  // Enhanced select options - Added missing field options
+  selectOptions: Record<string, string[]> = {
+    'Crime Type': ['Theft', 'Assault', 'Homicide', 'Cybercrime', 'Fraud', 'Narcotics', 'Arson', 'Kidnapping', 'General', 'Other'],
+    'Case Category': ['Property', 'Violent', 'Cyber', 'Financial', 'Public Order', 'Narcotics', 'Organized', 'General', 'Other'],
+    'Number of Victims': ['0', '1', '2', '3', '4', '5+'],
+    'Jurisdiction / PS': ['Central PS', 'East Division', 'West Division', 'Rural Unit', 'Cyber Cell', 'General'],
+    'Scene Type': ['Residential', 'Commercial', 'Public Space', 'Vehicle', 'Rural', 'Online', 'General', 'Other'],
+    'Witness Count': ['0', '1', '2', '3', '4', '5+'],
+    'Victim Summary': ['Stable', 'Injured', 'Critical', 'Deceased', 'Unknown'],
+    'Suspected Offender Known?': ['Yes', 'No', 'Unknown'],
+    'Offence Category': ['Minor', 'Serious', 'Organized', 'Cyber', 'Financial', 'Violent', 'General', 'Other'],
+    'Suspected Motive': ['Financial Gain', 'Revenge', 'Jealousy', 'Ideological', 'Political', 'Personal Dispute', 'Unknown', 'General', 'Other'],
+    'Confirmed Motive': ['Financial Gain', 'Revenge', 'Jealousy', 'Ideological', 'Political', 'Personal Dispute', 'Unknown', 'General', 'Other'],
+    'Weapon Involved': ['None', 'Knife', 'Firearm', 'Blunt Object', 'Explosive', 'Chemical', 'Other', 'Unknown', 'General'],
+    'Property Loss / Damage': ['None', 'Minor', 'Moderate', 'Major', 'Severe', 'Unknown'],
+    'Photos / Video?': ['Yes', 'No'],
+    'CCTV Present?': ['Yes', 'No'],
+    'Scene Condition': ['Intact', 'Disturbed', 'Contaminated', 'Secured', 'Compromised', 'General'],
+    'Chain of Custody?': ['Initiated', 'Ongoing', 'Complete', 'Not Started'],
+    'Forensic Tests Required': ['None', 'DNA', 'Fingerprints', 'Ballistics', 'Toxicology', 'Digital Forensics', 'Trace', 'General', 'Other'],
+    'Arrest Made': ['Yes', 'No'],
+    'riskLevel': ['Low', 'Medium', 'High', 'Critical'],
+    'Confidentiality': ['Internal', 'Restricted', 'Sensitive', 'Sealed'],
+    'Initial Actions Taken': ['Scene Secured', 'Medical Aid', 'Evidence Logged', 'Witness Statements', 'Suspect Detained', 'General', 'Other'],
+    'Case Status': ['Open', 'Active', 'Suspended', 'Closed', 'Archived'],
+    'Case Priority': ['Low', 'Normal', 'High', 'Urgent', 'Critical'],
+    'Gender': ['Male', 'Female', 'Other'],
+    'Nationality': ['India'],
+    'Languages': ['English', 'Hindi', 'Tamil', 'Telugu', 'Kannada', 'Malayalam', 'Bengali', 'Marathi', 'Gujarati', 'Other'],
+    'Build': ['Slim', 'Average', 'Athletic', 'Heavy', 'Obese'],
+    'Hair Color': ['Black', 'Brown', 'Blonde', 'Red', 'Grey', 'White', 'Dyed / Other', 'Unknown'],
+    'Eye Color': ['Brown', 'Blue', 'Green', 'Hazel', 'Grey', 'Black', 'Unknown'],
+    'Employment': ['Employed', 'Unemployed', 'Self-Employed', 'Student', 'Retired', 'Unknown'],
+    'Education': ['None', 'Primary', 'Secondary', 'Diploma', 'Bachelor', 'Master', 'Doctorate', 'Other'],
+    'Marital Status': ['Single', 'Married', 'Divorced', 'Separated', 'Widowed', 'Unknown'],
+    'Known Habits': ['Smoking', 'Alcohol', 'Substance Use', 'Gambling', 'None', 'Unknown'],
+    'Occupation': ['Unskilled', 'Skilled Labour', 'Professional', 'Executive', 'Military', 'Law Enforcement', 'IT', 'Healthcare', 'Education', 'Finance', 'Other'],
+    'Known Financial Details': ['None', 'Low Income', 'Moderate Income', 'High Income', 'Wealthy', 'Unknown'],
+    'Gang Affiliation': ['None', 'Local', 'Regional', 'International', 'Unknown'],
+    'Criminal History': ['None', 'Minor', 'Multiple', 'Serious'],
+    'Prior Arrests': ['0', '1', '2', '3', '4', '5+'],
+    'Probation/Parole Status': ['None', 'On Probation', 'On Parole', 'Completed', 'Unknown'],
+    'Status': ['Draft', 'In Progress', 'Completed', 'Archived'],
+    // Additional field options for complete coverage
+    'arrestCount': ['0', '1', '2', '3', '4', '5+'],
+    'Linked Cases': [], // Will be populated dynamically with existing case IDs
+    'Suspect Link': [], // Will be populated dynamically with existing suspect IDs
+    'Government ID': ['Aadhaar Card', 'PAN Card', 'Driving License', 'Passport', 'Voter ID', 'Other'],
+    'Family Connections': ['Spouse', 'Parent', 'Child', 'Sibling', 'Relative', 'Friend', 'Other'],
+    'Social Media Handles': [], // Text input field for multiple handles
+    'Version History / Updates': [] // Text area for version tracking
+  };
+
+  // File upload fields
+  fileFields = new Set<string>([
+    'Photo Upload', 'Evidence Photos', 'Evidence Videos', 'Evidence Documents', 
+    'Evidence Files', 'Upload Evidence Files', 'Digital Evidence'
+  ]);
+
+  uploadedFiles: Record<string, File[]> = {};
+
+  // Section icons
+  sectionIcons = {
+    crime: 'fas fa-gavel',
+    suspect: 'fas fa-user-secret',
+    notes: 'fas fa-sticky-note'
+  };
+
+  sections: any = {
+    crime: { 
+      title: 'Crime Details', 
+      subgroups: { 
+        'Identification & Timing': ['Case ID', 'FIR / Ref #', 'Crime Type', 'Case Category', 'Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered', 'Country', 'State', 'District', 'Number of Victims', 'Brief Description'], 
+        'Location & People': ['Location', 'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Reported Contact', 'Witness Count', 'Victim Name', 'Victim Contact', 'Victim Summary', 'Suspected Offender Known?', 'Suspect Link'], 
+        'Offence & Context': ['Legal Sections / Charges', 'Offence Category', 'Offence Description', 'Suspected Motive', 'Confirmed Motive', 'Weapon Involved', 'Property Loss / Damage'], 
+        'Evidence & Scene': ['Evidence Collected', 'Forensic Tests Required', 'Scene Condition', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Physical Evidence (list)', 'Chain of Custody?', 'Digital Evidence', 'Evidence Storage Reference'], 
+        'Operational Notes': ['Investigating Officer', 'Duty Person', 'Supervising Officer', 'Patrol Notes', 'Arrest Made', 'Arrest Location', 'Initial Actions Taken', 'riskLevel', 'Confidentiality'], 
+        'Status & Linkage': ['Biometric / Forensic IDs', 'DNA Ref ID', 'Fingerprint ID', 'Case Status', 'Linked Cases', 'arrestCount', 'Case Priority', 'Follow-up Date', 'Court Case ID', 'Next Hearing Date', 'Final Summary'],
+        'Remark': ['Remark']
+      } 
+    },
+    suspect: { 
+      title: 'Suspect Details', 
+      subgroups: { 
+        'Identity': ['Suspect ID', 'Suspect Name', 'Alias / Nickname', 'Age', 'Gender', 'Nationality', 'Nationality ID / Passport Number', 'Languages', 'Address', 'Known Aliases', 'Government ID'], 
+        'Physical Description': ['Height (cm)', 'Weight (kg)', 'Build', 'Hair Color', 'Eye Color', 'Distinguishing Marks', 'Tattoo Details', 'Scar Details', 'Photo Upload'], 
+        'Background': ['Employment', 'Education', 'Occupation', 'Company', 'Workplace Address', 'Marital Status', 'Known Habits', 'Known Financial Details'], 
+        'Known Associates': ['Associate Names', 'Gang Affiliation', 'Family Connections', 'Social Media Handles'], 
+        'Prior Records': ['Criminal History', 'Prior Arrests', 'Probation/Parole Status'],
+        'Remark': ['Remark']
+      } 
+    },
+    notes: { 
+      title: 'Evidence and Documents', 
+      subgroups: { 
+        'Investigation Notes': ['Initial Findings', 'Detailed Notes', 'Status', 'Version History / Updates'], 
+        'Evidence Files': ['Evidence Photos', 'Evidence Videos', 'Evidence Documents'], 
+        'Links and Recommendation': ['Links to Evidence', 'Final Recommendations'],
+        'Remark': ['Remark']
+      } 
+    }
+  };
+
+  // Complete field descriptions
+  fieldDescriptions: Record<string, string> = { 
+    // Crime: Identification & Timing
+    'Case ID': 'Unique internal tracking identifier for this case.',
+    'FIR / Ref #': 'Official First Information Report or reference number.',
+    'Crime Type': 'Primary legal / investigative classification of the offence.',
+    'Case Category': 'Broader grouping used for analytics and reporting.',
+    'Date & Time (Entry)': 'Timestamp when the case was first registered in the system.',
+    'Occurred From': 'Start of the known / suspected offence time window.',
+    'Occurred To': 'End of the known / suspected offence time window.',
+    'Time Reported': 'When it was first reported to authorities.',
+    'Time Discovered': 'When the incident was first discovered (may differ from reported).',
+    'Country': 'Country where the offence occurred.',
+    'State': 'State / province of occurrence.',
+    'District': 'Administrative district of occurrence (Tamil Nadu districts supported).',
+    'Number of Victims': 'Total count of direct victims involved.',
+    'Brief Description': 'Short narrative summary for quick reference.',
+
+    // Crime: Location & People
+    'Location': 'Exact address / geo description of the scene.',
+    'Jurisdiction / PS': 'Police Station or jurisdiction handling the investigation.',
+    'Scene Type': 'Type of environment where the offence occurred.',
+    'Reported By': 'Name of the reporting individual / entity.',
+    'Reported Contact': 'Contact details for the reporting party.',
+    'Witness Count': 'Number of identified witnesses so far.',
+    'Victim Name': 'Primary victim name (or placeholder if protected).',
+    'Victim Contact': 'Phone / email / other contact channel for victim.',
+    'Victim Summary': 'Short summary of victim condition or status.',
+    'Suspected Offender Known?': 'Whether victim / witnesses know the offender.',
+    'Suspect Link': 'Internal reference to related suspect record.',
+
+    // Crime: Offence & Context
+    'Legal Sections / Charges': 'Applicable statutory sections / penal codes.',
+    'Offence Category': 'Higher level grouping (e.g., violent, cyber).',
+    'Offence Description': 'Detailed narrative of what occurred.',
+    'Suspected Motive': 'Preliminary perceived motive (subject to change).',
+    'Confirmed Motive': 'Validated motive after evidence review.',
+    'Weapon Involved': 'Weapon(s) used or suspected; choose Unknown if unclear.',
+    'Property Loss / Damage': 'Summary / valuation of property loss or damage.',
+
+    // Crime: Evidence & Scene
+    'Evidence Collected': 'General list of all evidentiary items gathered.',
+    'Forensic Tests Required': 'Pending or requested forensic examinations.',
+    'Scene Condition': 'Condition of scene upon first secure entry.',
+    'Photos / Video?': 'Whether any media was captured.',
+    'CCTV Present?': 'If relevant CCTV sources exist.',
+    'CCTV Sources / IDs': 'Identifiers / locations for each CCTV source.',
+    'Physical Evidence (list)': 'Individual tangible exhibits (bagged / tagged).',
+    'Chain of Custody?': 'Status of formal evidence transfer logging.',
+    'Digital Evidence': 'Electronic sources: phones, email dumps, logs, socials.',
+    'Evidence Storage Reference': 'Locker / repository / digital vault reference ID.',
+
+    // Crime: Operational Notes
+    'Investigating Officer': 'Lead officer responsible for case progress.',
+    'Duty Person': 'Officer / staff who received the report.',
+    'Supervising Officer': 'Oversight / escalation point for the case.',
+    'Patrol Notes': 'First responder observations / scene notes.',
+    'Arrest Made': 'Indicates whether an arrest has occurred.',
+    'Arrest Location': 'Location at which arrest was executed.',
+    'Initial Actions Taken': 'Immediate remedial or containment actions.',
+    'riskLevel': 'Risk classification influencing priority.',
+    'Confidentiality': 'Access / visibility level of case records.',
+
+    // Crime: Status & Linkage
+    'Biometric / Forensic IDs': 'External forensic system identifiers (AFIS, DNA DB).',
+    'DNA Ref ID': 'Laboratory DNA reference identifier.',
+    'Fingerprint ID': 'Fingerprint database reference.',
+    'Case Status': 'Lifecycle status (Open / Active / Closed etc.).',
+    'Linked Cases': 'Related or associated case identifiers.',
+    'arrestCount': 'Total arrests associated with this case.',
+    'Case Priority': 'Operational prioritisation level.',
+    'Follow-up Date': 'Next scheduled investigative review date.',
+    'Court Case ID': 'Judicial / docket identifier once filed.',
+    'Next Hearing Date': 'Date of next scheduled court proceeding.',
+    'Final Summary': 'Closure narrative entered at completion.',
+
+    // Suspect: Identity
+    'Suspect ID': 'Internal unique suspect identifier.',
+    'Suspect Name': 'Full legal or recorded name.',
+    'Alias / Nickname': 'Commonly used alternative names.',
+    'Age': 'Approximate or confirmed age.',
+    'Gender': 'Recorded gender descriptor.',
+    'Nationality': 'Country of citizenship.',
+    'Nationality ID / Passport Number': 'Official national ID / passport number.',
+    'Languages': 'Languages spoken or understood by suspect.',
+    'Address': 'Primary last known address.',
+    'Known Aliases': 'Additional identity variations.',
+    'Government ID': 'Government issued identification (license / ID card).',
+
+    // Suspect: Physical Description
+    'Height (cm)': 'Height in centimetres measured or estimated.',
+    'Weight (kg)': 'Weight in kilograms measured or estimated.',
+    'Build': 'General body build classification.',
+    'Hair Color': 'Observed or recorded hair colour.',
+    'Eye Color': 'Observed or recorded eye colour.',
+    'Distinguishing Marks': 'Unique visible physical markers.',
+    'Tattoo Details': 'Location and description of tattoos.',
+    'Scar Details': 'Location and description of scars.',
+    'Photo Upload': 'Most recent or relevant facial photograph.',
+
+    // Suspect: Background
+    'Employment': 'Current employment status.',
+    'Education': 'Highest completed education level.',
+    'Occupation': 'Primary occupation / role.',
+    'Company': 'Employer / organisation name.',
+    'Workplace Address': 'Physical address of workplace.',
+    'Marital Status': 'Current marital / relationship status.',
+    'Known Habits': 'Behavioural patterns (substances, gambling, etc.).',
+    'Known Financial Details': 'Financial profile relevant to investigation.',
+
+    // Suspect: Known Associates
+    'Associate Names': 'Key associate individuals linked to suspect.',
+    'Gang Affiliation': 'Known gang or group membership.',
+    'Family Connections': 'Notable family relational links.',
+    'Social Media Handles': 'Identifiers used on social platforms.',
+
+    // Suspect: Prior Records
+    'Criminal History': 'Summary of prior criminal involvement.',
+    'Prior Arrests': 'Number / list of previous arrests.',
+    'Probation/Parole Status': 'Current supervision / release status.',
+
+    // Notes: Investigation Notes
+    'Initial Findings': 'Early observations at investigation start.',
+    'Detailed Notes': 'Progressive narrative & analytical details.',
+    'Status': 'Progress state category for notes.',
+    'Version History / Updates': 'Chronological changes & authorship log.',
+
+    // Notes: Evidence Files
+    'Evidence Photos': 'Photographic evidence references.',
+    'Evidence Videos': 'Video evidence references.',
+    'Evidence Documents': 'Document / PDF evidence references.',
+
+    // Notes: Links and Recommendation
+    'Links to Evidence': 'External or internal reference links to sources.',
+    'Final Recommendations': 'Closing recommendations / actions summary.'
+  };
+
+  subgroupIcons: any = {
+    'Identification & Timing': 'fas fa-clock',
+    'Location & People': 'fas fa-map-marker-alt',
+    'Offence & Context': 'fas fa-gavel',
+    'Evidence & Scene': 'fas fa-search',
+    'Operational Notes': 'fas fa-clipboard',
+    'Status & Linkage': 'fas fa-link',
+    'Identity': 'fas fa-id-card',
+    'Physical Description': 'fas fa-user',
+    'Background': 'fas fa-user-graduate',
+    'Known Associates': 'fas fa-users',
+    'Prior Records': 'fas fa-file-alt',
+    'Investigation Notes': 'fas fa-sticky-note',
+    'Evidence Files': 'fas fa-folder',
+    'Links and Recommendation': 'fas fa-link',
+    'Recommendations': 'fas fa-thumbs-up'
+  };
+
   ngOnInit(): void {
-    // If navigated with router state from Record page Edit action
-    const state: any = history.state || {};
-    if (typeof state.editIndex === 'number' && state.editCase) {
-      this.editIndex = state.editIndex;
-      this.patchFromCase(state.editCase as PoliceCase);
-      return;
+    // Set up autosave
+    this.autoSave$.pipe(
+      debounceTime(2000),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      this.performAutoSave();
+    });
+    
+    // Load saved form data
+    this.loadFormData();
+    
+    // Load field selections
+    this.loadFieldSelections();
+  }
+
+  ngAfterViewInit(): void {
+    // No special scroll handling needed anymore
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // Progress Calculation
+  get progressPercentage(): number {
+    const totalFields = this.getAllFields().length;
+    const completedFields = this.completedFields.size;
+    return totalFields > 0 ? Math.round((completedFields / totalFields) * 100) : 0;
+  }
+
+  private getAllFields(): string[] {
+    let allFields: string[] = [];
+    for (const section of this.sectionKeys) {
+      for (const subgroup of Object.keys(this.sections[section].subgroups)) {
+        allFields = allFields.concat(this.sections[section].subgroups[subgroup]);
+      }
+    }
+    return allFields;
+  }
+
+  // Helper method to check if we're in Identification & Timing
+  private isIdentificationAndTimingPage(): boolean {
+    return this.currentSubgroup === 'Identification & Timing';
+  }
+
+  // Helper method to check if we're in Location & People
+  private isLocationAndPeoplePage(): boolean {
+    return this.currentSubgroup === 'Location & People';
+  }
+
+  // Helper method to check if we need compact layout (applies to all pages now)
+  private needsCompactLayout(): boolean {
+    return true; // Apply compact layout to all pages to prevent main page scroll
+  }
+
+  // Card Management - Updated for single card layout across ALL pages
+  showSecondaryCard(): boolean {
+    return false; // No secondary card for any page - single card layout for all
+  }
+
+  showTertiaryCard(): boolean {
+    return false; // No tertiary card for any page - single card layout for all
+  }
+
+  getPrimaryFields(): string[] {
+    // Return selected fields for display instead of all fields
+    return this.getSelectedFieldsForDisplay();
+  }
+
+  getSecondaryFields(): string[] {
+    // Return empty array for single card layout across all pages
+    return [];
+  }
+
+  getTertiaryFields(): string[] {
+    // Return empty array for single card layout across all pages
+    return [];
+  }
+  
+  private getCurrentFields(): string[] {
+    return this.sections[this.currentSection].subgroups[this.currentSubgroup] || [];
+  }
+
+  toggleCardMinimize(card: 'primary' | 'secondary' | 'tertiary'): void {
+    this.isCardMinimized[card] = !this.isCardMinimized[card];
+  }
+
+  // Field Management
+  isFieldRequired(field: string): boolean {
+    return this.requiredFields.has(field);
+  }
+
+  isCompactField(field: string): boolean {
+    return this.compactFields.has(field);
+  }
+
+  getInputType(field: string): string {
+    if (this.numericFields.has(field)) return 'number';
+    if (this.dateTimeFields.has(field)) return 'datetime-local';
+    if (this.dateFields.has(field)) return 'date';
+    if (field.toLowerCase().includes('email')) return 'email';
+    if (field.toLowerCase().includes('phone') || field.toLowerCase().includes('contact')) return 'tel';
+    if (field.toLowerCase().includes('url') || field.toLowerCase().includes('link')) return 'url';
+    if (field.toLowerCase().includes('description')) return 'textarea';
+    return 'text';
+  }
+
+  getFieldPlaceholder(field: string): string {
+    if (field === 'Age') return 'Enter age (18-99)';
+    if (field === 'Height (cm)') return 'Height in cm';
+    if (field === 'Weight (kg)') return 'Weight in kg';
+    if (this.dateTimeFields.has(field)) return 'dd-mm-yyyy --:--';
+    if (this.dateFields.has(field)) return 'dd-mm-yyyy';
+    if (field.toLowerCase().includes('email')) return 'Enter email address';
+    if (field.toLowerCase().includes('phone')) return 'Enter phone number';
+    if (field.toLowerCase().includes('description')) return 'Enter detailed description...';
+    return `Enter ${field.toLowerCase()}`;
+  }
+
+  getMaxLength(field: string): number {
+    if (field === 'Age') return 2;
+    if (field === 'Gender') return 10;
+    if (field === 'Height (cm)') return 3;
+    if (field === 'Weight (kg)') return 3;
+    if (this.compactFields.has(field)) return 20;
+    return 500;
+  }
+
+  // Validation
+  validateField(field: string): void {
+    const value = this.formData[field];
+    let hasError = false;
+    let isValid = false;
+    let message = '';
+
+    if (this.isFieldRequired(field) && (!value || value.toString().trim() === '')) {
+      hasError = true;
+      message = `${field} is required`;
+    } else if (value && value.toString().trim() !== '') {
+      // Field-specific validation
+      if (field === 'Age') {
+        const age = parseInt(value);
+        if (isNaN(age) || age < 1 || age > 120) {
+          hasError = true;
+          message = 'Age must be a valid number between 1 and 120';
+        } else {
+          isValid = true;
+        }
+      } else if (field === 'Email') {
+        // Basic email pattern; improve with regex if needed
+        const emailPattern = /\S+@\S+\.\S+/;
+        isValid = emailPattern.test(value);
+        if (!isValid) {
+          hasError = true;
+          message = 'Invalid email address format';
+        }
+      } else {
+        // Generic validation for other fields (extend as needed)
+        isValid = true;
+      }
     }
-    // If navigated via /infopage/:id, load by caseId
-    const caseId = this.route.snapshot.paramMap.get('id');
-    if (caseId) {
-      const cases = this.caseStore.getPoliceCases();
-      const idx = cases.findIndex(c => c.caseId == caseId);
-      if (idx !== -1) {
-        this.editIndex = idx;
-        this.patchFromCase(cases[idx]);
+
+    // Update field validation state
+    this.fieldValidation[field] = { hasError, isValid, message };
+
+    // Update overall form completion status
+    this.updateCompletionStatus();
+  }
+
+  private updateCompletionStatus(): void {
+    this.completedFields.clear();
+
+    for (const field of Object.keys(this.formData)) {
+      if (this.formData[field] !== null && this.formData[field] !== undefined && this.formData[field] !== '') {
+        this.completedFields.add(field);
       }
     }
+
+    // Update completed subgroups and sections
+    this.updateCompletedGroupsAndSections();
   }
 
-  // ----------------- getters -----------------
-  get crimeGroup() { return this.form.get('crime') as FormGroup; }
-  get suspectGroup() { return this.form.get('suspect') as FormGroup; }
-  get notesGroup() { return this.form.get('notes') as FormGroup; }
-
-  get knownLocations(): FormArray {
-    return this.suspectGroup.get('knownLocations') as FormArray;
-  }
-  get attachments(): FormArray {
-    return this.notesGroup.get('attachments') as FormArray;
-  }
-
-  // ----------------- helpers (arrays) -----------------
-  addKnownLocation() { this.knownLocations.push(new FormControl('')); }
-  removeKnownLocation(index: number) { this.knownLocations.removeAt(index); }
-
-  // ----------------- file helpers -----------------
-  setPhoto(file: File | null) { this.suspectGroup.get('photo')?.setValue(file || null); }
-  addAttachment(file: File) { this.attachments.push(new FormControl(file)); }
-
-  onPhotoChange(event: Event): void {
-    const input = event.target as HTMLInputElement | null;
-    let file: File | null = null;
-    if (input && input.files && input.files.length > 0) file = input.files[0];
-    this.setPhoto(file);
-    if (input) input.value = '';
-  }
-
-  onAttachmentsChange(event: Event): void {
-    const input = event.target as HTMLInputElement | null;
-    if (!input || !input.files || input.files.length === 0) return;
-    for (let i = 0; i < input.files.length; i++) {
-      const f = input.files.item(i);
-      if (f) this.addAttachment(f);
-    }
-    input.value = '';
-  }
-
-  // ----------------- wizard -----------------
-  next() {
-    if (this.step === 1 && this.crimeGroup.invalid) { this.crimeGroup.markAllAsTouched(); return; }
-    if (this.step === 2 && this.suspectGroup.invalid) { this.suspectGroup.markAllAsTouched(); return; }
-    this.step = Math.min(3, this.step + 1);
-  }
-  back() { this.step = Math.max(1, this.step - 1); }
-
-  // ----------------- edit support -----------------
-  private patchFromCase(c: PoliceCase): void {
-    // Patch only fields guaranteed by your current PoliceCase type
-    // (do not read c.caseId / c.dateTime here to avoid TS errors)
-    this.form.patchValue({
-      crime: {
-        caseId: '', // optional: leave as is or derive from elsewhere
-        crimeType: c.crime || '',
-        dateTime: '', // optional: leave as is
-        location: c.police?.address || '',
-        reportedByName: '',
-        reportedByContact: '',
-        description: c.police?.information || ''
-      },
-      suspect: {
-        suspectId: '',
-        fullName: c.accused?.name || '',
-        alias: c.accused?.occupation || '',
-        dob: '',
-        age: c.accused?.age || '',
-        gender: c.accused?.gender || '',
-        address: c.accused?.address || ''
-      },
-      notes: {
-        initialFindings: c.police?.information || '',
-        officerInCharge: c.police?.name || '',
-        status: 'Open',
+  private updateCompletedGroupsAndSections(): void {
+    this.completedSubgroups.clear();
+    this.completedSections.clear();
+
+    for (const section of this.sectionKeys) {
+      const subgroups = Object.keys(this.sections[section].subgroups);
+      for (const subgroup of subgroups) {
+        const fields = this.sections[section].subgroups[subgroup];
+        const allFieldsCompleted = fields.every((field: string) => this.completedFields.has(field));
+        
+        if (allFieldsCompleted) {
+          this.completedSubgroups.add(subgroup);
+        }
       }
-    });
-    // Reset arrays (optional)
-    this.knownLocations.clear();
-    this.attachments.clear();
-    this.step = 1;
-  }
-
-  private mapToPoliceCase(): PoliceCase {
-    const v: any = this.form.value;
-    // Build an object that matches your current PoliceCase type (no caseId/dateTime)
-    return {
-      crime: v.crime?.crimeType || 'Unknown',
-      police: {
-        name: v.notes?.officerInCharge || '—',
-        station: '—',
-        address: v.crime?.location || '—',
-        pincode: '',
-        dutyPerson: v.notes?.officerInCharge || '—',
-        modeOfCrime: v.crime?.crimeType || '—',
-        information: v.notes?.initialFindings || ''
-      },
-      accused: {
-        name: v.suspect?.fullName || '—',
-        age: v.suspect?.age || '—',
-        gender: v.suspect?.gender || '—',
-        address: v.suspect?.address || '—',
-        occupation: v.suspect?.alias || ''
+
+      if (this.completedSubgroups.size === subgroups.length) {
+        this.completedSections.add(section);
       }
+    }
+  }
+
+  // Field selection functionality - Updated to allow all fields by default
+  selectedFields: Record<string, string[]> = {}; // Store selected fields per subgroup
+  showFieldSelector: string | null = null; // Track which field selector is open
+  readonly maxSelectableFields = 50; // Increased limit to allow more fields
+
+  // Get all available fields for current subgroup
+  getAvailableFields(): string[] {
+    return this.getCurrentFields();
+  }
+
+  // Get total available fields count dynamically
+  getTotalAvailableFieldsCount(): number {
+    return this.getAvailableFields().length;
+  }
+
+  // Get currently selected fields for display (default to ALL fields if none selected)
+  getSelectedFieldsForDisplay(): string[] {
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    if (this.selectedFields[subgroupKey] && this.selectedFields[subgroupKey].length >= 0) {
+      return this.selectedFields[subgroupKey];
+    }
+    // Default to ALL fields if no selection made
+    return this.getCurrentFields();
+  }
+
+  // Toggle field selection with enhanced debugging
+  toggleFieldSelection(field: string, event?: Event): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    console.log('Toggling field selection for:', field);
+
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    if (!this.selectedFields[subgroupKey]) {
+      // Initialize with all fields selected by default
+      this.selectedFields[subgroupKey] = [...this.getCurrentFields()];
+    }
+
+    const currentSelection = this.selectedFields[subgroupKey];
+    const fieldIndex = currentSelection.indexOf(field);
+
+    console.log('Current selection:', currentSelection);
+    console.log('Field index:', fieldIndex);
+
+    if (fieldIndex > -1) {
+      // Remove field if already selected
+      currentSelection.splice(fieldIndex, 1);
+      console.log('Removed field:', field);
+    } else {
+      // Add field if not selected and under limit
+      if (currentSelection.length < this.maxSelectableFields) {
+        currentSelection.push(field);
+        console.log('Added field:', field);
+      } else {
+        console.log('Selection limit reached, cannot add:', field);
+      }
+    }
+
+    // Trigger change detection
+    this.selectedFields = { ...this.selectedFields };
+    this.saveFieldSelections();
+    // Do NOT close the popup here; just update selection and save
+  }
+
+  // Check if field is currently selected
+  isFieldSelected(field: string): boolean {
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    const selections = this.selectedFields[subgroupKey];
+    if (!selections) {
+      // If no selections made, all fields are selected by default
+      return true;
+    }
+    return selections.includes(field);
+  }
+
+  // Get count of selected fields
+  getSelectedFieldCount(): number {
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    const selections = this.selectedFields[subgroupKey];
+    if (!selections) {
+      return this.getCurrentFields().length; // All fields selected by default
+    }
+    return selections.length;
+  }
+
+  // Check if selection limit is reached
+  isSelectionLimitReached(): boolean {
+    return this.getSelectedFieldCount() >= this.maxSelectableFields;
+  }
+
+  // Reset field selection for current subgroup (clear all)
+  resetFieldSelection(event?: Event): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    this.selectedFields[subgroupKey] = [];
+    this.selectedFields = { ...this.selectedFields };
+    this.saveFieldSelections();
+    // Do NOT close the popup here; keep it open for further selection
+  }
+
+  // Select all fields
+  selectAllFields(event?: Event): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    const allFields = this.getCurrentFields();
+    this.selectedFields[subgroupKey] = [...allFields];
+    this.selectedFields = { ...this.selectedFields };
+    this.saveFieldSelections();
+  }
+
+  // Select default fields (first 10 or all if less than 10) - Renamed for clarity
+  selectDefaultFields(event?: Event): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    const allFields = this.getCurrentFields();
+    this.selectedFields[subgroupKey] = allFields.slice(0, Math.min(10, allFields.length));
+    this.selectedFields = { ...this.selectedFields };
+    this.saveFieldSelections();
+  }
+
+  // Get dynamic max selectable based on available fields
+  getDynamicMaxSelectable(): number {
+    const totalFields = this.getTotalAvailableFieldsCount();
+    return Math.min(this.maxSelectableFields, totalFields);
+  }
+
+  // Check if all fields are selected
+  areAllFieldsSelected(): boolean {
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    const selections = this.selectedFields[subgroupKey];
+    const totalFields = this.getCurrentFields().length;
+    
+    if (!selections) {
+      return true; // All fields selected by default
+    }
+    
+    return selections.length === totalFields;
+  }
+
+  // Check if no fields are selected
+  areNoFieldsSelected(): boolean {
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    const selections = this.selectedFields[subgroupKey];
+    
+    if (!selections) {
+      return false; // All fields selected by default
+    }
+    
+    return selections.length === 0;
+  }
+
+  // Navigation and section management methods
+  getSubgroups(): string[] {
+    return Object.keys(this.sections[this.currentSection].subgroups);
+  }
+
+  showSection(section: 'crime' | 'suspect' | 'notes'): void {
+    // Close field selector when changing sections
+    this.closeFieldSelector();
+    this.currentSection = section;
+    this.currentSubgroup = Object.keys(this.sections[this.currentSection].subgroups)[0];
+    this.showHelpFor = null;
+    this.triggerAutoSave();
+  }
+
+  // Enhanced document click handler
+  @HostListener('document:click', ['$event'])
+  handleDoc(event: Event): void {
+    this.showHelpFor = null;
+    // Only close field selector if click is outside the popup
+    const target = event.target as HTMLElement;
+    if (this.showFieldSelector && !target.closest('.field-selector-container')) {
+      this.closeFieldSelector();
+    }
+  }
+
+  // Handle section/subgroup changes to refresh field selector
+  setSubgroup(key: string): void {
+    // Close field selector when changing subgroups
+    this.closeFieldSelector();
+    this.currentSubgroup = key;
+    this.showHelpFor = null;
+    this.triggerAutoSave();
+  }
+
+  // Section and subgroup completion status
+  isSectionCompleted(section: string): boolean {
+    return this.completedSections.has(section);
+  }
+
+  isSubgroupCompleted(subgroup: string): boolean {
+    return this.completedSubgroups.has(subgroup);
+  }
+
+  // Section descriptions
+  getSectionDescription(section: string): string {
+    const descriptions = {
+      crime: 'Capture complete crime intelligence: timing, location, evidence, and operational context. Use dropdown values for consistency and upload supporting materials.',
+      suspect: 'Document comprehensive suspect profile: identity, physical characteristics, background, associations, and criminal history. Include recent photographs where available.',
+      notes: 'Maintain detailed investigative records: findings, evidence files, reference materials, and final recommendations with proper version control.'
+    };
+    return descriptions[section as keyof typeof descriptions] || '';
+  }
+
+  // Field handling and validation
+  onFieldChange(field: string): void {
+    this.validateField(field);
+    this.triggerAutoSave();
+  }
+
+  // Auto-save functionality
+  private triggerAutoSave(): void {
+    this.autoSave$.next();
+  }
+
+  private performAutoSave(): void {
+    this.isAutoSaving = true;
+    this.autoSaveStatus = 'Saving...';
+    
+    // Save to localStorage
+    this.saveFormData();
+    
+    // Simulate save delay
+    setTimeout(() => {
+      this.isAutoSaving = false;
+      this.autoSaveStatus = 'Saved';
+      
+      // Reset status after a moment
+      setTimeout(() => {
+        this.autoSaveStatus = 'Auto-save enabled';
+      }, 2000);
+    }, 500);
+  }
+
+  private saveFormData(): void {
+    const saveData = {
+      formData: this.formData,
+      completedFields: Array.from(this.completedFields),
+      completedSubgroups: Array.from(this.completedSubgroups),
+      completedSections: Array.from(this.completedSections),
+      currentSection: this.currentSection,
+      currentSubgroup: this.currentSubgroup
     };
+    localStorage.setItem('pydetect-form-data', JSON.stringify(saveData));
+  }
+
+  private loadFormData(): void {
+    const savedData = localStorage.getItem('pydetect-form-data');
+    if (savedData) {
+      const data = JSON.parse(savedData);
+      this.formData = data.formData || {};
+      this.completedFields = new Set(data.completedFields || []);
+      this.completedSubgroups = new Set(data.completedSubgroups || []);
+      this.completedSections = new Set(data.completedSections || []);
+      this.currentSection = data.currentSection || 'crime';
+      this.currentSubgroup = data.currentSubgroup || 'Identification & Timing';
+    }
+  }
+
+  // Dropdown options and cascading logic
+  getOptions(field: string): string[] | undefined {
+    if (field === 'Country') return this.countries;
+    if (field === 'State') return (this.selectedValues['Country'] === 'India' || !this.selectedValues['Country']) ? this.indiaStates : [];
+    if (field === 'District') return this.selectedValues['State'] === 'Tamil Nadu' ? this.tamilNaduDistricts : [];
+    return this.selectOptions[field];
+  }
+
+  onSelectChange(field: string, event: Event): void {
+    const value = (event.target as HTMLSelectElement).value;
+    this.selectedValues[field] = value;
+    this.formData[field] = value;
+    
+    // Clear dependent fields
+    if (field === 'Country') {
+      delete this.selectedValues['State'];
+      delete this.selectedValues['District'];
+      delete this.formData['State'];
+      delete this.formData['District'];
+    }
+    if (field === 'State') {
+      delete this.selectedValues['District'];
+      delete this.formData['District'];
+    }
+    
+    this.validateField(field);
+    this.triggerAutoSave();
+  }
+
+  // Field help functionality
+  toggleFieldInfo(field: string, ev: MouseEvent): void {
+    ev.stopPropagation();
+    this.showHelpFor = this.showHelpFor === field ? null : field;
   }
 
-  // ----------------- submit -----------------
-  submit() {
-    if (this.form.invalid) {
-      this.form.markAllAsTouched();
+  closeFieldInfo(): void {
+    this.showHelpFor = null;
+  }
+
+  // File upload functionality
+  onFileChange(field: string, event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const files = input.files ? Array.from(input.files) : [];
+    if (files.length) {
+      this.uploadedFiles[field] = (this.uploadedFiles[field] || []).concat(files);
+      this.validateField(field);
+      this.triggerAutoSave();
+    }
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver = true;
+  }
+
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver = false;
+  }
+
+  onFileDrop(field: string, event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver = false;
+    
+    const files = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
+    if (files.length) {
+      this.uploadedFiles[field] = (this.uploadedFiles[field] || []).concat(files);
+      this.validateField(field);
+      this.triggerAutoSave();
+    }
+  }
+
+  removeFile(field: string, file: File): void {
+    if (this.uploadedFiles[field]) {
+      this.uploadedFiles[field] = this.uploadedFiles[field].filter(f => f !== file);
+      this.triggerAutoSave();
+    }
+  }
+
+  getAcceptedFileTypes(field: string): string {
+    return this.fileTypeConfig[field] || '*';
+  }
+
+  getFileIcon(filename: string): string {
+    const ext = filename.split('.').pop()?.toLowerCase();
+    switch (ext) {
+      case 'pdf': return 'fas fa-file-pdf';
+      case 'doc':
+      case 'docx': return 'fas fa-file-word';
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif': return 'fas fa-file-image';
+      case 'mp4':
+      case 'avi':
+      case 'mov': return 'fas fa-file-video';
+      default: return 'fas fa-file';
+    }
+  }
+
+  // Navigation helper methods for floating buttons
+  getPreviousSubgroup(): string {
+    const list = this.getSubgroups();
+    const currentIndex = list.indexOf(this.currentSubgroup);
+    return currentIndex > 0 ? list[currentIndex - 1] : '';
+  }
+
+  getNextSubgroup(): string {
+    const list = this.getSubgroups();
+    const currentIndex = list.indexOf(this.currentSubgroup);
+    return currentIndex < list.length - 1 ? list[currentIndex + 1] : '';
+  }
+
+  isLastSubgroup(): boolean {
+    const list = this.getSubgroups();
+    return list.indexOf(this.currentSubgroup) === list.length - 1;
+  }
+
+  isFirstSubgroup(): boolean {
+    return this.getSubgroups().indexOf(this.currentSubgroup) === 0;
+  }
+
+  canPrevSubgroup(): boolean {
+    return !this.isFirstSubgroup();
+  }
+
+  canNextSubgroup(): boolean {
+    return !this.isLastSubgroup();
+  }
+
+  prevSubgroup(): void {
+    if (!this.canPrevSubgroup()) return;
+    const list = this.getSubgroups();
+    const i = list.indexOf(this.currentSubgroup);
+    this.setSubgroup(list[i - 1]);
+  }
+
+  nextSubgroup(): void {
+    if (!this.canNextSubgroup()) return;
+    const list = this.getSubgroups();
+    const i = list.indexOf(this.currentSubgroup);
+    this.setSubgroup(list[i + 1]);
+  }
+
+  submitCurrentSection(): void {
+    // Perform final validation
+    const currentFields = this.getCurrentFields();
+    const requiredFields = currentFields.filter(f => this.isFieldRequired(f));
+    const missingFields = requiredFields.filter(f => !this.completedFields.has(f));
+
+    if (missingFields.length > 0) {
+      alert(`Please complete the following required fields: ${missingFields.join(', ')}`);
       return;
     }
 
-    if (this.editIndex !== null) {
-      // Update existing record (service must have updatePoliceCaseAt; see earlier message)
-      this.caseStore.updatePoliceCaseAt(this.editIndex, this.mapToPoliceCase() as PoliceCase);
-    } else {
-      // Add new record using your existing service mapping
-      this.caseStore.addFromInfoForm(this.form.value);
+    this.performAutoSave();
+
+    // Map flat formData to nested structure expected by addFromInfoForm
+    const crime = {
+      caseId: this.formData['Case ID'] || '',
+      dateTime: this.formData['Date & Time (Entry)'] || '',
+      crimeType: this.formData['Crime Type'] || '',
+      location: this.formData['Location'] || '',
+      victimName: this.formData['Victim Name'] || '',
+      caseCategory: this.formData['Case Category'] || '',
+      reportedBy: this.formData['Reported By'] || '',
+      'FIR / Ref #': this.formData['FIR / Ref #'] || '',
+      'Occurred From': this.formData['Occurred From'] || '',
+      'Occurred To': this.formData['Occurred To'] || '',
+      'Jurisdiction / PS': this.formData['Jurisdiction / PS'] || '',
+      'Scene Type': this.formData['Scene Type'] || ''
+    };
+    const suspect = {
+      fullName: this.formData['Suspect Name'] || '',
+      age: this.formData['Age'] || '',
+      gender: this.formData['Gender'] || '',
+      address: this.formData['Address'] || '',
+      alias: this.formData['Alias / Nickname'] || ''
+    };
+    const notes = {
+      status: this.formData['Case Status'] || this.formData['Status'] || 'Open',
+      officerInCharge: this.formData['Investigating Officer'] || '',
+      initialFindings: this.formData['Initial Findings'] || ''
+    };
+    const legal = {
+      witnessStatements: this.formData['Witness Statements'] || '',
+      confessions: this.formData['Confessions'] || '',
+      evidence: this.uploadedFiles['Evidence Files'] || []
+    };
+
+    this.caseStore.addFromInfoForm({ crime, suspect, notes, legal });
+    // Show popup first
+    this.showSubmitPopup = true;
+  }
+
+  onSubmitPopupClose(): void {
+    this.showSubmitPopup = false;
+    this.router.navigate(['/record'], { state: { formData: this.formData } });
+  }
+
+  // Keyboard navigation
+  @HostListener('document:keydown', ['$event'])
+  handleKeydown(event: KeyboardEvent): void {
+    // Keyboard navigation
+    if (event.ctrlKey && event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.nextSubgroup();
+    } else if (event.ctrlKey && event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.prevSubgroup();
+    } else if (event.ctrlKey && event.key === 's') {
+      event.preventDefault();
+      this.performAutoSave();
+    } else if (event.key === 'Escape') {
+      this.closeFieldInfo();
+    }
+  }
+
+  // Toggle field selector visibility
+  toggleFieldSelector(event?: Event): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+    this.showFieldSelector = this.showFieldSelector === subgroupKey ? null : subgroupKey;
+  }
+
+  // Close field selector
+  closeFieldSelector(): void {
+    this.showFieldSelector = null;
+  }
+
+  // Save field selections to localStorage
+  private saveFieldSelections(): void {
+    try {
+      localStorage.setItem('pydetect-field-selections', JSON.stringify(this.selectedFields));
+    } catch (error) {
+      console.warn('Could not save field selections to localStorage:', error);
     }
+  }
 
-    // Navigate to record page
-    this.router.navigate(['/record']);
+  // Load field selections from localStorage
+  private loadFieldSelections(): void {
+    try {
+      const savedSelections = localStorage.getItem('pydetect-field-selections');
+      if (savedSelections) {
+        this.selectedFields = JSON.parse(savedSelections);
+      }
+    } catch (error) {
+      console.warn('Could not load field selections from localStorage:', error);
+      this.selectedFields = {};
+    }
   }
 
-  navigateHome(): void {
-    this.router.navigate(['/']);
+  // Track by function for ngFor optimization
+  trackByField(index: number, field: string): string {
+    return field;
   }
 }

src/app/recordpage/recordpage.component.css

@@ -38,16 +38,22 @@
 /* Add gap between logo and browser border */
 .logo-img {
   width: 6vw;
-  height: 6vw;
-  border-radius: 50%;
-  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
   position: fixed;
-  top: 18px; /* Add gap from top */
-  left: 18px; /* Add gap from left */
+  top: 21px;
+  left: 36px;
   z-index: 300;
   margin: 0;
+  background: #ffffff;
+  max-width: 4.2vw;
+  min-width: 56px;
+  height: auto;
+  border-radius: 50%;
+  padding: 4px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+  transition: transform .25s ease;
 }
 
+/* Move Py-Detect text further down by increasing top value of .logo-title-row */
 .logo-title-row {
   display: flex;
   flex-direction: row;
@@ -63,10 +69,10 @@
 
 .py-detect-title {
   position: fixed;
-  margin-left: 132px;
-  margin-top: -208px;
+  margin-left: 97px;
+  margin-top: -228px;
   text-align: left;
-  font-size: 4vw;
+  font-size: 3vw;
   color: #38bdf8;
   font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
   font-weight: 900;
@@ -97,35 +103,48 @@
     border: 2px solid #23272b;
   }
 
-  .py-detect-title .py-letter.d {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.py-shape {
+  display: inline-block;
+  width: 18px;
+  height: 4px;
+  background: #38bdf8;
+  margin: 0 8px;
+  vertical-align: middle;
+  border-radius: 2px;
+  box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+  border: 2px solid #23272b;
+}
 
-  .py-detect-title .py-letter.e {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.py-detect-title .py-letter.d {
+  color: #e3f6ff;
+  text-shadow: 0 0 6px #38bdf8;
+}
 
-  .py-detect-title .py-letter.t {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.py-detect-title .py-letter.e {
+  color: #38bdf8;
+  text-shadow: 0 0 6px #38bdf8;
+}
 
-  .py-detect-title .py-letter.e2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.py-detect-title .py-letter.t {
+  color: #e3f6ff;
+  text-shadow: 0 0 6px #38bdf8;
+}
 
-  .py-detect-title .py-letter.c {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.py-detect-title .py-letter.e2 {
+  color: #38bdf8;
+  text-shadow: 0 0 6px #38bdf8;
+}
+
+.py-detect-title .py-letter.c {
+  color: #e3f6ff;
+  text-shadow: 0 0 6px #38bdf8;
+}
+
+.py-detect-title .py-letter.t2 {
+  color: #38bdf8;
+  text-shadow: 0 0 6px #38bdf8;
+}
 
-  .py-detect-title .py-letter.t2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
 
 .py-shape {
   display: inline-block;
@@ -201,11 +220,32 @@
   margin: 0 auto;
 }
 
+.record-table th,
+.record-table td {
+  white-space: nowrap;
+  min-width: 90px;
+}
+
+.record-table td {
+  vertical-align: middle;
+}
+
+.record-table th {
+  vertical-align: middle;
+}
+
+.record-table td a {
+  white-space: nowrap;
+  display: inline-block;
+  min-width: 80px;
+}
+
 @media (max-width: 1800px) {
   .records {
     max-width: 100vw;
     min-width: 1000px;
   }
+
   .table-wrap {
     max-width: 100vw;
     min-height: 400px;
@@ -218,13 +258,16 @@
     width: 100%;
     max-width: 100vw;
   }
+
   .table-wrap {
     min-height: 200px;
   }
+
   .padded-table-wrap {
     padding-left: 4px;
     padding-right: 4px;
   }
+
   .records-header-row {
     flex-direction: column;
     align-items: stretch;
@@ -232,10 +275,12 @@
     padding-left: 4px;
     padding-right: 4px;
   }
+
   .page-title {
     text-align: center;
     margin-right: 0;
   }
+
   .toolbar {
     position: static;
     transform: none;
@@ -250,6 +295,21 @@
   border-bottom: 1px solid #edf2f7;
   text-align: left;
   white-space: nowrap;
+  min-width: 90px;
+}
+
+.records td {
+  vertical-align: middle;
+}
+
+.records th {
+  vertical-align: middle;
+}
+
+.records td a {
+  white-space: nowrap;
+  display: inline-block;
+  min-width: 80px;
 }
 
 .records thead th {
@@ -270,6 +330,11 @@
 
 .records th.actions-col, .records td.actions {
   color: #fff;
+  text-align: left;
+  padding-left: 18px;
+  padding-right: 18px;
+  width: 1%;
+  white-space: nowrap;
 }
 
 .records tbody tr:last-child td {
@@ -341,6 +406,34 @@
     color: #991b1b;
   }
 
+.status-label {
+  display: inline-block;
+  padding: 3px 16px;
+  border-radius: 12px;
+  font-weight: 700;
+  font-size: 1em;
+  letter-spacing: 0.5px;
+  min-width: 70px;
+  text-align: center;
+  background: #e5e7eb;
+  color: #22223b;
+}
+
+.status-open {
+  background: #d1fae5;
+  color: #059669;
+}
+
+.status-under {
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.status-closed {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
 .mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
 }
@@ -377,6 +470,86 @@
     border-color: #805ad5;
   }
 
+  .btn.delete {
+    background: #ef4444;
+    color: #fff;
+    border-color: #ef4444;
+    box-shadow: 0 2px 8px #ef444422;
+    transition: background 0.18s, color 0.18s;
+  }
+
+    .btn.delete:hover {
+      background: #991b1b;
+      color: #fff;
+    }
+
+/* Icon buttons */
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 6px 10px;
+  margin: 0 2px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1.18em;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+  vertical-align: middle;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+  .icon-btn.view {
+    margin: 0;
+    padding: 0 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #2563eb;
+    font-size: 1.2em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .icon-btn.edit {
+    color: #7c3aed;
+  }
+
+  .icon-btn.delete {
+    color: #ef4444;
+  }
+
+  .icon-btn:hover {
+    background: #f0f7ff;
+    box-shadow: 0 2px 8px #2563eb22;
+  }
+
+  .icon-btn.delete:hover {
+    background: #fff0f0;
+    color: #b91c1c;
+  }
+
+  .icon-btn.edit:hover {
+    background: #f3e8ff;
+    color: #5b21b6;
+  }
+
+  .icon-btn.view:hover {
+    background: #e0f2fe;
+    color: #0ea5e9;
+  }
+
+  .icon-btn.verify {
+    color: #22c55e;
+  }
+
+    .icon-btn.verify:hover {
+      background: #e0ffe6;
+      color: #15803d;
+    }
+
 .empty {
   text-align: center;
   color: #718096;
@@ -392,47 +565,104 @@
 
 .modal {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  width: min(720px, 94vw);
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100vw;
+  max-height: 100vh;
   background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(0,0,0,.2);
-  overflow: hidden;
+  border-radius: 0;
+  box-shadow: none;
+  overflow-y: auto;
+  z-index: 2000;
+  padding: 0;
+  font-size: 1.13rem;
+  animation: none;
+  display: flex;
+  flex-direction: column;
 }
 
 .modal-header, .modal-footer {
-  padding: 12px 16px;
-  background: #f7fafc;
+  padding: 24px 40px 18px 40px;
+  background: #f8fafc;
+  font-weight: 700;
+  font-size: 1.18rem;
+  color: #23272b;
 }
 
 .modal-body {
-  padding: 16px;
+  flex: 1 1 auto;
+  padding: 32px 48px 32px 48px;
+  background: #fff;
+  color: #23272b;
+  font-size: 1.08rem;
+  overflow-y: auto;
 }
 
-
-
 .detail-row {
   display: grid;
-  grid-template-columns: 160px 1fr;
-  gap: 8px;
-  padding: 6px 0;
+  grid-template-columns: 180px 1fr;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid #e5e7eb;
 }
 
+  .detail-row:last-child {
+    border-bottom: none;
+  }
+
   .detail-row span {
-    color: #4a5568;
+    color: #2563eb;
+    font-weight: 600;
+    font-size: 1.07em;
   }
 
-.detail-block .label {
-  font-weight: 700;
-  margin-bottom: 6px;
+  .detail-row b {
+    color: #23272b;
+    font-weight: 500;
+    font-size: 1.07em;
+  }
+
+.detail-block {
+  margin-top: 18px;
+  margin-bottom: 8px;
 }
 
+  .detail-block .label {
+    font-weight: 700;
+    color: #2563eb;
+    margin-bottom: 6px;
+    font-size: 1.09em;
+  }
+
 .explain {
   white-space: pre-wrap;
+  color: #23272b;
+  font-size: 1.07em;
+}
+
+.modal-footer {
+  text-align: right;
+}
+
+.btn {
+  padding: 8px 18px;
+  border: 1px solid #cbd5e0;
+  border-radius: 8px;
+  background: #f7fafc;
+  cursor: pointer;
+  font-size: 1.05em;
+  font-weight: 600;
+  margin-left: 8px;
 }
 
+  .btn:hover {
+    background: #e0e7ef;
+  }
+
 .records-center {
   display: flex;
   flex-direction: column;
@@ -530,11 +760,11 @@
   z-index: 10;
 }
 
-.modern-searchbar-container.compact {
-  width: auto;
-  margin: 0 0 0 24px;
-  align-items: center;
-}
+  .modern-searchbar-container.compact {
+    width: auto;
+    margin: 0 0 0 24px;
+    align-items: center;
+  }
 
 .modern-searchbar-form {
   display: flex;
@@ -548,12 +778,12 @@
   position: relative;
 }
 
-.modern-searchbar-form.compact {
-  height: 44px;
-  min-width: 260px;
-  width: 320px;
-  padding: 0 8px 0 10px;
-}
+  .modern-searchbar-form.compact {
+    height: 44px;
+    min-width: 260px;
+    width: 320px;
+    padding: 0 8px 0 10px;
+  }
 
 .modern-searchbar-icon {
   display: flex;
@@ -574,11 +804,11 @@
   height: 32px;
 }
 
-.modern-searchbar-input::placeholder {
-  color: #e0e7ef;
-  opacity: 1;
-  font-weight: 400;
-}
+  .modern-searchbar-input::placeholder {
+    color: #e0e7ef;
+    opacity: 1;
+    font-weight: 400;
+  }
 
 .modern-searchbar-btn {
   background: #fff;
@@ -595,10 +825,10 @@
   transition: background 0.18s, color 0.18s;
 }
 
-.modern-searchbar-btn:hover {
-  background: #ede9fe;
-  color: #4f46e5;
-}
+  .modern-searchbar-btn:hover {
+    background: #ede9fe;
+    color: #4f46e5;
+  }
 
 .modern-searchbar-form.white-bg {
   background: #fff !important;
@@ -610,10 +840,10 @@
   color: #23272b !important;
 }
 
-.modern-searchbar-input.white-bg::placeholder {
-  color: #64748b !important;
-  opacity: 1;
-}
+  .modern-searchbar-input.white-bg::placeholder {
+    color: #64748b !important;
+    opacity: 1;
+  }
 
 .modern-searchbar-icon svg {
   stroke: #64748b !important;
@@ -634,21 +864,35 @@
   transition: background 0.18s, color 0.18s;
 }
 
-.modern-searchbar-btn:hover {
-  background: #38bdf8;
-  color: #fff;
-}
+  .modern-searchbar-btn:hover {
+    background: #38bdf8;
+    color: #fff;
+  }
 
+
+.back-colo {
+  background: #011329;
+  width: 100%;
+  height: 7vw;
+  position: fixed;
+}
 /* Search bar at top right corner */
 .searchbar-topright {
   position: fixed;
-  top: 54px;
+  top: 20px;
   right: 48px;
   z-index: 1001;
   display: flex;
   align-items: center;
 }
 
+.back-colo {
+  background: #011329;
+  width: 100%;
+  height: 7vw;
+  position: fixed;
+}
+
 @media (max-width: 900px) {
   .searchbar-topright {
     top: 12px;
@@ -656,10 +900,559 @@
     width: 95vw;
     justify-content: flex-end;
   }
+
   .modern-searchbar-form.compact {
     width: 100%;
     min-width: 0;
   }
 }
 
+/* Modern UI header styles from infopage */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 18px 32px 0 32px;
+  position: relative;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px;
+  margin-bottom: 1vh;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 1.5vh;
+}
+
+  .py-detect-title-header .py-letter.p {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.y {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-shape {
+    color: #e3f6ff;
+    background: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+    box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+    border: 2px solid #23272b;
+    width: 18px;
+    height: 4px;
+    display: inline-block;
+    margin: 0 8px;
+    border-radius: 2px;
+  }
+
+  .py-detect-title-header .py-letter.d {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.e {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.t {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.e2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.c {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.t2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+body, main.content {
+  background: #f4f6fa;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+}
+
+.record-card {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 8px #0001, 0 1.5px 0 #e5e7eb;
+  border: 1.5px solid #e5e7eb;
+  margin: 40px auto 0 auto;
+  max-width: 98vw;
+  width: 98vw;
+  min-width: 320px;
+  padding: 0;
+  overflow-x: auto;
+}
+
+.record-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 24px 8px 24px;
+  border-bottom: 1.5px solid #e5e7eb;
+  background: #f8fafc;
+  border-radius: 10px 10px 0 0;
+}
+
+.record-title-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.record-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #222b45;
+}
+
+.record-dropdown {
+  font-size: 1.05rem;
+  color: #222b45;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 4px 12px;
+  margin-left: 8px;
+}
+
+.record-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.record-search {
+  border: 1.5px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: 1rem;
+  background: #fff;
+  margin-right: 8px;
+  min-width: 220px;
+}
 
+.record-new-btn {
+  background: #2563eb;
+  color: #fff;
+  font-weight: 600;
+  border: none;
+  border-radius: 6px;
+  padding: 7px 22px;
+  font-size: 1rem;
+  box-shadow: 0 2px 8px #2563eb22;
+  cursor: pointer;
+  transition: background 0.18s;
+}
+
+  .record-new-btn:hover {
+    background: #1e40af;
+  }
+
+.record-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: #fff;
+}
+
+  .record-table th, .record-table td {
+    border-bottom: 1.5px solid #e5e7eb;
+    padding: 12px 16px;
+    text-align: left;
+    font-size: 1.05rem;
+  }
+
+  .record-table th {
+    background: #f4f6fa;
+    color: #222b45;
+    font-weight: 700;
+  }
+
+  .record-table tr:last-child td {
+    border-bottom: none;
+  }
+
+  .record-table tr {
+    transition: background 0.15s;
+  }
+
+    .record-table tr:hover {
+      background: #f1f5f9;
+    }
+
+  .record-table a {
+    color: #2563eb;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .record-table .record-status {
+    font-weight: 500;
+    border-radius: 6px;
+    padding: 2px 10px;
+    background: #f1f5f9;
+    color: #2563eb;
+    font-size: 0.98em;
+  }
+
+.vertical-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.horizontal-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  background: linear-gradient(120deg, #f0f7ff 0%, #e0f2fe 100%);
+  border-radius: 24px;
+  box-shadow: 0 8px 32px #2563eb22;
+  padding: 32px 0 32px 0;
+}
+
+.section-block {
+  background: rgba(255,255,255,0.98);
+  border-radius: 18px;
+  box-shadow: 0 4px 24px #38bdf822;
+  padding: 28px 38px 18px 38px;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  border-left: 6px solid #38bdf8;
+  transition: box-shadow 0.2s, border 0.2s;
+}
+
+  .section-block:hover {
+    box-shadow: 0 8px 32px #2563eb33;
+    border-left: 6px solid #2563eb;
+  }
+
+.section-title {
+  font-size: 1.32em;
+  font-weight: 900;
+  color: #1d4ed8;
+  margin-bottom: 12px;
+  letter-spacing: 1px;
+  text-shadow: 0 1px 0 #fff;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.subgroup-row {
+  display: flex;
+  flex-direction: row;
+  gap: 36px;
+  overflow-x: auto;
+}
+
+.subgroup-block {
+  min-width: 260px;
+  flex: 1 1 0;
+  background: rgba(248,250,252,0.95);
+  border-radius: 14px;
+  box-shadow: 0 2px 8px #38bdf822;
+  padding: 18px 20px 10px 20px;
+  margin-bottom: 0;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1.5px solid #e0e7ef;
+  transition: box-shadow 0.18s, border 0.18s, background 0.18s;
+}
+
+  .subgroup-block:hover {
+    box-shadow: 0 4px 16px #38bdf855;
+    border: 1.5px solid #38bdf8;
+    background: #e0f2fe;
+  }
+
+.subgroup-title {
+  font-size: 1.11em;
+  font-weight: 700;
+  color: #0ea5e9;
+  margin-bottom: 12px;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 0 #fff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fields-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+.field-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 14px 0 14px 0;
+  border-bottom: 1px solid #e0e7ef;
+  font-size: 1.09em;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  transition: background 0.18s;
+  gap: 32px;
+}
+
+  .field-row:last-child {
+    border-bottom: none;
+  }
+
+  .field-row span {
+    color: #1e293b;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+    min-width: 180px;
+    font-size: 1.08em;
+    margin-right: 32px;
+    text-align: left;
+    display: inline-block;
+  }
+
+  .field-row b {
+    color: #2563eb;
+    font-weight: 700;
+    word-break: break-word;
+    letter-spacing: 0.1px;
+    font-size: 1.13em;
+    margin-left: 8px;
+    text-align: left;
+    display: inline-block;
+  }
+
+    .field-row b:hover {
+      color: #0ea5e9;
+    }
+
+/* Stylish pills for subgroups */
+.subgroup-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+  .subgroup-pills button {
+    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
+    border: none;
+    border-radius: 20px;
+    padding: 7px 22px;
+    font-size: 1em;
+    color: #fff;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: 0 2px 8px #2563eb22;
+    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+    outline: none;
+  }
+
+    .subgroup-pills button.active,
+    .subgroup-pills button:focus {
+      background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
+      color: #fff;
+      box-shadow: 0 4px 16px #38bdf855;
+    }
+
+    .subgroup-pills button:hover {
+      background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
+      color: #fff;
+    }
+
+.field-card {
+  display: flex;
+  width: 30%;
+  gap: 9vw;
+  justify-content: space-between;
+}
+
+/* Responsive tweaks */
+@media (max-width: 900px) {
+  .section-block {
+    padding: 18px 8vw 12px 8vw;
+  }
+
+  .subgroup-block {
+    min-width: 180px;
+    padding: 12px 8px 8px 8px;
+  }
+
+  .field-row span {
+    min-width: 120px;
+  }
+}
+
+@media (max-width: 600px) {
+  .section-block {
+    padding: 10px 2vw 8px 2vw;
+  }
+
+  .subgroup-block {
+    min-width: 120px;
+    padding: 8px 2px 6px 2px;
+  }
+
+  .field-row span {
+    min-width: 80px;
+    font-size: 0.98em;
+  }
+
+  .field-row b {
+    font-size: 1em;
+  }
+}
+
+/* Modern styles for the filter bar, dropdowns, and buttons */
+.filter-bar {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin: 24px 0 12px 0;
+  padding: 12px 18px;
+  background: #f8fafc;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px #2563eb11;
+}
+
+  .filter-bar select {
+    padding: 6px 18px;
+    border-radius: 6px;
+    border: 1.5px solid #cbd5e1;
+    font-size: 1em;
+    color: #2563eb;
+    background: #fff;
+    font-weight: 600;
+    outline: none;
+    transition: border 0.15s;
+  }
+
+    .filter-bar select:focus {
+      border: 1.5px solid #38bdf8;
+    }
+
+  .filter-bar button {
+    padding: 6px 18px;
+    border-radius: 6px;
+    border: none;
+    font-size: 1em;
+    font-weight: 700;
+    cursor: pointer;
+    background: #2563eb;
+    color: #fff;
+    transition: background 0.15s;
+  }
+
+    .filter-bar button:hover {
+      background: #0ea5e9;
+    }
+
+    .filter-bar button:last-child {
+      background: #f87171;
+      color: #fff;
+      margin-left: 4px;
+    }
+
+      .filter-bar button:last-child:hover {
+        background: #ef4444;
+      }
+
+.analytics-summary {
+  display: flex;
+  gap: 32px;
+  margin: 18px 0 8px 0;
+}
+
+.summary-card {
+  background: #f8fafc;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px #2563eb11;
+  padding: 18px 32px;
+  min-width: 120px;
+  text-align: center;
+}
+
+  .summary-card .summary-label {
+    font-size: 1em;
+    color: #64748b;
+    font-weight: 600;
+    margin-bottom: 6px;
+  }
+
+  .summary-card .summary-value {
+    font-size: 2em;
+    font-weight: 900;
+    color: #2563eb;
+  }
+
+  .summary-card.open .summary-value {
+    color: #059669;
+  }
+
+  .summary-card.closed .summary-value {
+    color: #dc2626;
+  }
+
+.record-meta {
+  color: #64748b;
+  font-size: 0.98em;
+  margin: 0 0 10px 0;
+  padding-left: 2px;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+}

src/app/recordpage/recordpage.component.html

@@ -1,117 +1,179 @@
-<!-- Search bar at top right corner -->
-<div class="searchbar-topright" *ngIf="!showDetails">
-  <form (submit)="onModernSearch()" class="modern-searchbar-form compact white-bg">
-    <span class="modern-searchbar-icon">
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-    </span>
-    <input type="text" [(ngModel)]="q" name="modernSearch" class="modern-searchbar-input white-bg" placeholder="Search..." autocomplete="off" />
-   <!-- <button type="submit" class="modern-searchbar-btn">GO</button>-->
-  </form>
-</div>
-
-<!-- Logo and Py-Detect Title with blur wrapper -->
-<div class="logo-title-row">
-  <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img" (click)="navigateHome()" style="cursor:pointer;" />
-  <div class="py-detect-title">
-    <span class="py-letter p">P</span>
-    <span class="py-letter y">Y</span>
-    <span class="py-shape"></span>
-    <span class="py-letter d">D</span>
-    <span class="py-letter e">E</span>
-    <span class="py-letter t">T</span>
-    <span class="py-letter e2">E</span>
-    <span class="py-letter c">C</span>
-    <span class="py-letter t2">T</span>
+<!-- Modern UI header with logo and PyDetect title -->
+<div class="site-header">
+  <div class="header-inner">
+    <div class="logo-cluster">
+      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
+        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
+      </span>
+      <div class="py-detect-title-header">
+        <span class="py-letter p">P</span>
+        <span class="py-letter y">Y</span>
+        <span class="py-shape"></span>
+        <span class="py-letter d">D</span>
+        <span class="py-letter e">E</span>
+        <span class="py-letter t">T</span>
+        <span class="py-letter e2">E</span>
+        <span class="py-letter c">C</span>
+        <span class="py-letter t2">T</span>
+      </div>
+    </div>
   </div>
 </div>
 
-<div style="height:128px;"></div>
-
-<main class="content" role="main">
-  <div class="wrapper records-center" [ngClass]="{'show-details': showDetails}">
-    <!-- Centered heading above the table -->
-    <h1 class="page-title">Police Investigation Records</h1>
-    <div class="table-wrap padded-table-wrap">
-      <table class="records">
-        <thead>
-          <tr>
-            <th (click)="setSort('caseId')" [attr.aria-sort]="ariaSort('caseId')">Case ID <span class="sort" [class.asc]="isAsc('caseId')" [class.desc]="isDesc('caseId')"></span></th>
-            <th (click)="setSort('crime')" [attr.aria-sort]="ariaSort('crime')">Crime <span class="sort" [class.asc]="isAsc('crime')" [class.desc]="isDesc('crime')"></span></th>
-            <th (click)="setSort('dateTime')" [attr.aria-sort]="ariaSort('dateTime')">Date &amp; Time <span class="sort" [class.asc]="isAsc('dateTime')" [class.desc]="isDesc('dateTime')"></span></th>
-            <th (click)="setSort('location')" [attr.aria-sort]="ariaSort('location')">Location <span class="sort" [class.asc]="isAsc('location')" [class.desc]="isDesc('location')"></span></th>
-            <th (click)="setSort('status')" [attr.aria-sort]="ariaSort('status')">Status <span class="sort" [class.asc]="isAsc('status')" [class.desc]="isDesc('status')"></span></th>
-            <th (click)="setSort('Investigation Officer')" [attr.aria-sort]="ariaSort('Investigation Officer')">Investigation Officer <span class="sort" [class.asc]="isAsc('Investigation Officer')" [class.desc]="isDesc('Investigation Officer')"></span></th>
-            <th class="actions-col">Actions</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr *ngFor="let c of rows, let i = index">
-            <td class="mono">{{ c.caseId || '—' }}</td>
-            <td>{{ c.crime || '—' }}</td>
-            <td>{{ c.dateTime ? (c.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}</td>
-            <td class="ellipsis" [title]="c.police.address || ''">{{ c.police.address || '—' }}</td>
-            <td>
-              <span class="status"
-                    [class.open]="c.status==='Open'"
-                    [class.under]="c.status==='Under Investigation'"
-                    [class.closed]="c.status==='Closed'">
-                {{ c.status || '—' }}
-              </span>
-            </td>
-            <td>{{ c.police.name || '—' }}</td>
-            <td class="actions">
-              <button type="button" class="btn view" (click)="openDetails(c, i)">View Details</button>
-              <button type="button" class="btn edit" (click)="editCase(c, i)">Edit</button>
-            </td>
-          </tr>
-
-          <tr *ngIf="rows.length === 0">
-            <td colspan="7" class="empty">No records found.</td>
-          </tr>
-        </tbody>
-      </table>
+<!-- Salesforce-style card/table content below the header -->
+<div class="record-card">
+  <div class="record-header">
+    <div class="record-title-group">
+      <span class="record-title">Police Investigation Records</span>
+      <select class="record-dropdown">
+        <option>Recently Viewed</option>
+        <option>All Records</option>
+      </select>
     </div>
+    <div class="record-header-actions">
+      <input class="record-search" type="text" [(ngModel)]="q" placeholder="Search this list..." />
+    </div>
+  </div>
 
-    <!-- Modal -->
-    <!-- Modal white blur overlay for background -->
-    <div class="modal-blur-overlay" *ngIf="showDetails"></div>
-
-    <!-- Modal backdrop and modal as before -->
-    <div class="modal-backdrop" *ngIf="showDetails" (click)="closeDetails()"></div>
-    <div class="modal" *ngIf="showDetails" role="dialog" aria-modal="true" aria-labelledby="detailsTitle">
-      <div class="modal-header">
-        <h2 id="detailsTitle">Case Details</h2>
-      </div>
-      <div class="modal-body" *ngIf="selectedCase as sc">
-        <div class="detail-row"><span>Case ID</span><b>{{ sc.caseId || '—' }}</b></div>
-        <div class="detail-row"><span>Crime</span><b>{{ sc.crime || '—' }}</b></div>
-        <div class="detail-row"><span>Date & Time</span><b>{{ sc.dateTime ? (sc.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}</b></div>
-        <div class="detail-row"><span>Location</span><b>{{ sc.police.address || '—' }}</b></div>
-
-        <hr />
+  <!-- Analytics summary panel -->
+  <div class="analytics-summary">
+    <div class="summary-card total">
+      <div class="summary-label">Total Cases</div>
+      <div class="summary-value">{{ totalCases }}</div>
+    </div>
+    <div class="summary-card open">
+      <div class="summary-label">Open</div>
+      <div class="summary-value">{{ openCases }}</div>
+    </div>
+    <div class="summary-card closed">
+      <div class="summary-label">Closed</div>
+      <div class="summary-value">{{ closedCases }}</div>
+    </div>
+  </div>
 
-        <div class="detail-row"><span>Investigation Officer</span><b>{{ sc.police.name || '—' }}</b></div>
-        <div class="detail-row"><span>Duty Person</span><b>{{ sc.police.dutyPerson || '—' }}</b></div>
-        <div class="detail-row"><span>Mode of Crime</span><b>{{ sc.police.modeOfCrime || '—' }}</b></div>
+  <div class="record-meta" style="padding: 8px 24px 0 24px; color: #6b7280; font-size: 0.98em;">
+    {{ rows.length }} items • Updated a few seconds ago
+  </div>
 
-        <hr />
+  <!-- Filter bar above the table -->
+  <div class="filter-bar">
+    <select [(ngModel)]="filterCrimeType">
+      <option value="">Crime Type</option>
+      <option *ngFor="let type of crimeTypes">{{ type }}</option>
+    </select>
+    <select [(ngModel)]="filterStatus">
+      <option value="">Status</option>
+      <option *ngFor="let status of statusTypes">{{ status }}</option>
+    </select>
+    <select [(ngModel)]="filterLocation">
+      <option value="">Location</option>
+      <option *ngFor="let loc of locations">{{ loc }}</option>
+    </select>
+    <select [(ngModel)]="filterOfficer">
+      <option value="">Officer</option>
+      <option *ngFor="let officer of officers">{{ officer }}</option>
+    </select>
+    <button (click)="applyFilters()">Apply</button>
+    <button (click)="resetFilters()">Reset</button>
+  </div>
 
-        <div class="detail-row"><span>Accused Name</span><b>{{ sc.accused.name || '—' }}</b></div>
-        <div class="detail-row"><span>Accused Gender</span><b>{{ sc.accused.gender || '—' }}</b></div>
-        <div class="detail-row"><span>Accused Age</span><b>{{ sc.accused.age || '—' }}</b></div>
-        <div class="detail-row"><span>Accused Address</span><b>{{ sc.accused.address || '—' }}</b></div>
+  <table class="record-table">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Case ID</th>
+        <th>Status</th>
+        <th>Crime Type</th>
+        <th>Date &amp; Time</th>
+        <th>Location</th>
+        <th>Investigation Officer</th>
+        <th>Suspect Name</th>
+        <th>Reported By</th>
+        <th>Last Updated</th>
+        <th>Verified By</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let c of rows, let i = index">
+        <td>{{ i + 1 }}</td>
+        <td><a (click)="openDetails(c, i)">{{ c.caseId || '—' }}</a></td>
+        <td>
+          <span class="status-label"
+                [ngClass]="{
+                  'status-open': c.status === 'Open',
+                  'status-under': c.status === 'Under Investigation',
+                  'status-closed': c.status === 'Closed'
+                }">
+            {{ c.status || '—' }}
+          </span>
+        </td>
+        <td>{{ c.crime || '—' }}</td>
+        <td>{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</td>
+        <td>{{ c.police?.address || '—' }}</td>
+        <td>{{ c.police?.name || '—' }}</td>
+        <td>{{ c.accused?.name || '—' }}</td>
+        <td>{{ c.reportedBy || '—' }}</td>
+        <td>{{ c.lastUpdated ? (c.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }}</td>
+        <td>{{ c.verifiedBy || '���' }}</td>
+        <td>
+          <button class="icon-btn verify" (click)="verifyCase(i)" title="Verify">
+            <i class="fas fa-user-check"></i>
+          </button>
+          <button class="icon-btn view" (click)="openDetails(c, i)" title="View">
+            <i class="fas fa-eye"></i>
+          </button>
+          <button class="icon-btn edit" (click)="editCase(c, i)" title="Edit">
+            <i class="fas fa-edit"></i>
+          </button>
+          <button class="icon-btn delete" (click)="deleteCase(i)" title="Delete">
+            <i class="fas fa-trash"></i>
+          </button>
+        </td>
+      </tr>
+      <tr *ngIf="rows.length === 0">
+        <td colspan="12" class="empty">No records found.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
-        <hr />
+<!-- Modal -->
+<!-- Modal white blur overlay for background -->
+<div class="modal-blur-overlay" *ngIf="showDetails"></div>
 
-        <div class="detail-block">
-          <div class="label">Notes / Explanation</div>
-          <p class="explain">{{ sc.police.information || '—' }}</p>
+<!-- Modal backdrop and modal as before -->
+<div class="modal-backdrop" *ngIf="showDetails" (click)="closeDetails()"></div>
+<div class="modal" *ngIf="showDetails" role="dialog" aria-modal="true" aria-labelledby="detailsTitle">
+  <div class="modal-header">
+    <h2 id="detailsTitle">Case Details</h2>
+  </div>
+  <!-- View Modal: Show all subgroup pills and fields for each section -->
+  <div class="modal-body" *ngIf="selectedCase as sc">
+    <div class="modal-sections-grid">
+      <ng-container *ngFor="let sectionKey of ['crime', 'suspect', 'notes']">
+        <div class="section-block">
+          <div class="section-title">{{ sectionKey === 'crime' ? 'Crime Details' : sectionKey === 'suspect' ? 'Suspect Details' : 'Evidence and Documents' }}</div>
+          <div class="subgroup-pills">
+            <button *ngFor="let subgroup of getSubgroups(sectionKey)"
+                    [class.active]="selectedSubgroup[sectionKey] === subgroup"
+                    (click)="selectSubgroup(sectionKey, subgroup)">
+              {{ subgroup }}
+            </button>
+          </div>
+          <div class="fields-grid">
+            <ng-container *ngFor="let field of getFieldsForSubgroup(sectionKey, selectedSubgroup[sectionKey])">
+              <div class="field-card">
+                <span>{{ field }}</span>
+                <b>{{ getFieldValue(sc, sectionKey, field) }}</b>
+              </div>
+            </ng-container>
+          </div>
         </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn" (click)="closeDetails()">Close</button>
-      </div>
+      </ng-container>
     </div>
   </div>
-</main>
+  <div class="modal-footer">
+    <button type="button" class="btn" (click)="closeDetails()">Close</button>
+  </div>
+</div>

src/app/recordpage/recordpage.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { CaseStoreService, PoliceCase } from '../case-store.service';
+import { InfopageComponent } from '../infopage/infopage.component';
 
 @Component({
   selector: 'app-recordpage',
@@ -22,14 +23,218 @@ export class RecordpageComponent implements OnInit {
   sortKey: 'caseId' | 'crime' | 'dateTime' | 'location' | 'status' | 'Investigation Officer' = 'dateTime';
   sortDir: 'asc' | 'desc' = 'desc';
 
+  objectKeys = Object.keys;
+
+  // For modal subgroup pills
+  selectedSubgroup: any = {
+    crime: 'Identification & Timing',
+    suspect: 'Identity',
+    notes: 'Investigation Notes'
+  };
+
+  // Reference infopage section/subgroup/fields structure
+  sections = new InfopageComponent(null as any, null as any).sections;
+
+  getSubgroups(sectionKey: string): string[] {
+    return Object.keys(this.sections[sectionKey].subgroups);
+  }
+
+  getFieldsForSubgroup(sectionKey: string, subgroup: string): string[] {
+    return this.sections[sectionKey].subgroups[subgroup] || [];
+  }
+
+  selectSubgroup(sectionKey: string, subgroup: string) {
+    this.selectedSubgroup[sectionKey] = subgroup;
+  }
+
+  getFieldValue(sc: any, sectionKey: string, field: string): any {
+    // Map field labels to PoliceCase property paths
+    const fieldMap: { [key: string]: string | string[] } = {
+      // Crime Details
+      'Case ID': 'caseId',
+      'FIR / Ref #': 'firRef',
+      'Crime Type': 'crime',
+      'Case Category': 'caseCategory',
+      'Date & Time (Entry)': 'dateTime',
+      'Occurred From': 'occurredFrom',
+      'Occurred To': 'occurredTo',
+      'Time Reported': 'timeReported',
+      'Time Discovered': 'timeDiscovered',
+      'Country': 'country',
+      'State': 'state',
+      'District': 'district',
+      'Number of Victims': 'numberOfVictims',
+      'Brief Description': 'briefDescription',
+      'Location': ['police', 'address'],
+      'Jurisdiction / PS': 'jurisdiction',
+      'Scene Type': 'sceneType',
+      'Reported By': 'reportedBy',
+      'Reported Contact': 'reportedContact',
+      'Witness Count': 'witnessCount',
+      'Victim Name': 'victimName',
+      'Victim Contact': 'victimContact',
+      'Victim Summary': 'victimSummary',
+      'Suspected Offender Known?': 'suspectedOffenderKnown',
+      'Suspect Link': 'suspectLink',
+      'Legal Sections / Charges': 'legalSections',
+      'Offence Category': 'offenceCategory',
+      'Offence Description': 'offenceDescription',
+      'Suspected Motive': 'suspectedMotive',
+      'Confirmed Motive': 'confirmedMotive',
+      'Weapon Involved': 'weaponInvolved',
+      'Property Loss / Damage': 'propertyLoss',
+      'Evidence Collected': 'evidenceCollected',
+      'Forensic Tests Required': 'forensicTestsRequired',
+      'Scene Condition': 'sceneCondition',
+      'Photos / Video?': 'photosVideo',
+      'CCTV Present?': 'cctvPresent',
+      'CCTV Sources / IDs': 'cctvSources',
+      'Physical Evidence (list)': 'physicalEvidence',
+      'Chain of Custody?': 'chainOfCustody',
+      'Digital Evidence': 'digitalEvidence',
+      'Evidence Storage Reference': 'evidenceStorageReference',
+      'Investigating Officer': ['police', 'name'],
+      'Duty Person': ['police', 'dutyPerson'],
+      'Supervising Officer': ['police', 'supervisingOfficer'],
+      'Patrol Notes': ['police', 'patrolNotes'],
+      'Arrest Made': 'arrestMade',
+      'Arrest Location': 'arrestLocation',
+      'Initial Actions Taken': 'initialActionsTaken',
+      'riskLevel': 'riskLevel',
+      'Confidentiality': 'confidentiality',
+      'Biometric / Forensic IDs': 'biometricIds',
+      'DNA Ref ID': 'dnaRefId',
+      'Fingerprint ID': 'fingerprintId',
+      'Case Status': 'status',
+      'Linked Cases': 'linkedCases',
+      'arrestCount': 'arrestCount',
+      'Case Priority': 'casePriority',
+      'Follow-up Date': 'followUpDate',
+      'Court Case ID': 'courtCaseId',
+      'Next Hearing Date': 'nextHearingDate',
+      'Final Summary': 'finalSummary',
+      'Remark': 'remark',
+      // Suspect Details
+      'Suspect ID': ['accused', 'suspectId'],
+      'Suspect Name': ['accused', 'name'],
+      'Alias / Nickname': ['accused', 'alias'],
+      'Age': ['accused', 'age'],
+      'Gender': ['accused', 'gender'],
+      'Nationality': ['accused', 'nationality'],
+      'Nationality ID / Passport Number': ['accused', 'passportNumber'],
+      'Languages': ['accused', 'languages'],
+      'Address': ['accused', 'address'],
+      'Known Aliases': ['accused', 'knownAliases'],
+      'Government ID': ['accused', 'governmentId'],
+      'Height (cm)': ['accused', 'height'],
+      'Weight (kg)': ['accused', 'weight'],
+      'Build': ['accused', 'build'],
+      'Hair Color': ['accused', 'hairColor'],
+      'Eye Color': ['accused', 'eyeColor'],
+      'Distinguishing Marks': ['accused', 'distinguishingMarks'],
+      'Tattoo Details': ['accused', 'tattooDetails'],
+      'Scar Details': ['accused', 'scarDetails'],
+      'Photo Upload': ['accused', 'photoUpload'],
+      'Employment': ['accused', 'employment'],
+      'Education': ['accused', 'education'],
+      'Occupation': ['accused', 'occupation'],
+      'Company': ['accused', 'company'],
+      'Workplace Address': ['accused', 'workplaceAddress'],
+      'Marital Status': ['accused', 'maritalStatus'],
+      'Known Habits': ['accused', 'knownHabits'],
+      'Known Financial Details': ['accused', 'knownFinancialDetails'],
+      'Associate Names': ['accused', 'associateNames'],
+      'Gang Affiliation': ['accused', 'gangAffiliation'],
+      'Family Connections': ['accused', 'familyConnections'],
+      'Social Media Handles': ['accused', 'socialMediaHandles'],
+      'Criminal History': ['accused', 'criminalHistory'],
+      'Prior Arrests': ['accused', 'priorArrests'],
+      'Probation/Parole Status': ['accused', 'probationStatus'],
+      // Notes/Evidence
+      'Initial Findings': ['police', 'information'],
+      'Detailed Notes': ['notes', 'detailedNotes'],
+      'Status': 'status',
+      'Version History / Updates': ['notes', 'versionHistory'],
+      'Evidence Photos': ['legal', 'evidencePhotos'],
+      'Evidence Videos': ['legal', 'evidenceVideos'],
+      'Evidence Documents': ['legal', 'evidenceDocuments'],
+      'Links to Evidence': ['legal', 'linksToEvidence'],
+      'Final Recommendations': ['legal', 'finalRecommendations'],
+      'Witness Statements': ['legal', 'witnessStatements'],
+      'Confessions': ['legal', 'confessions'],
+      // Audit Fields
+      'Created By': 'createdBy',
+      'Creation Date': 'creationDate',
+      'Last Updated': 'lastUpdated',
+      'Verified By': 'verifiedBy'
+    };
+
+    const path = fieldMap[field] || field;
+    if (Array.isArray(path)) {
+      let value = sc;
+      for (const p of path) {
+        if (value && value[p] !== undefined) value = value[p];
+        else return '—';
+      }
+      return value !== undefined && value !== null && value !== '' ? value : '—';
+    } else {
+      return sc[path] !== undefined && sc[path] !== null && sc[path] !== '' ? sc[path] : '—';
+    }
+  }
+
+  getValue(obj: any, key: string): any {
+    return obj && obj[key] !== undefined && obj[key] !== null && obj[key] !== '' ? obj[key] : '—';
+  }
+
   constructor(private caseStore: CaseStoreService, private router: Router) { }
 
+  // Filter state
+  filterCrimeType: string = '';
+  filterStatus: string = '';
+  filterLocation: string = '';
+  filterOfficer: string = '';
+
+  crimeTypes: string[] = [];
+  statusTypes: string[] = [];
+  locations: string[] = [];
+  officers: string[] = [];
+
+  filteredCases: PoliceCase[] = [];
+
   ngOnInit(): void {
     this.load();
+    this.populateFilterOptions();
+    this.applyFilters();
   }
 
   load(): void {
     this.cases = this.caseStore.getPoliceCases();
+    this.populateFilterOptions();
+    this.applyFilters();
+  }
+
+  populateFilterOptions() {
+    this.crimeTypes = [...new Set(this.cases.map(c => c.crime).filter(Boolean))] as string[];
+    this.statusTypes = [...new Set(this.cases.map(c => c.status).filter(Boolean))] as string[];
+    this.locations = [...new Set(this.cases.map(c => c.police?.address).filter(Boolean))] as string[];
+    this.officers = [...new Set(this.cases.map(c => c.police?.name).filter(Boolean))] as string[];
+  }
+
+  applyFilters() {
+    this.filteredCases = this.cases.filter(c =>
+      (!this.filterCrimeType || c.crime === this.filterCrimeType) &&
+      (!this.filterStatus || c.status === this.filterStatus) &&
+      (!this.filterLocation || c.police?.address === this.filterLocation) &&
+      (!this.filterOfficer || c.police?.name === this.filterOfficer)
+    );
+  }
+
+  resetFilters() {
+    this.filterCrimeType = '';
+    this.filterStatus = '';
+    this.filterLocation = '';
+    this.filterOfficer = '';
+    this.applyFilters();
   }
 
   // search over visible columns (no accused)
@@ -71,27 +276,23 @@ export class RecordpageComponent implements OnInit {
     }
   }
 
+  // Update your table to use filteredCases instead of rows
   get rows(): PoliceCase[] {
-    const out = this.filtered.slice();
-    const key = this.sortKey, dir = this.sortDir === 'asc' ? 1 : -1;
-    out.sort((a, b) => {
-      const va = this.cell(a, key), vb = this.cell(b, key);
-      if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
-      return va.toString().localeCompare(vb.toString()) * dir;
-    });
-    return out;
+    return this.filteredCases;
   }
 
   openDetails(c: PoliceCase, i: number): void {
     this.selectedCase = c;
     this.selectedIndex = i;
     this.showDetails = true;
+    document.body.classList.add('modal-open');
   }
 
   closeDetails(): void {
     this.showDetails = false;
     this.selectedCase = null;
     this.selectedIndex = -1;
+    document.body.classList.remove('modal-open');
   }
 
   editCase(c: PoliceCase, i: number): void {
@@ -108,4 +309,33 @@ export class RecordpageComponent implements OnInit {
   navigateHome(): void {
     this.router.navigate(['/']);
   }
+
+  onNewRecord(): void {
+    // Placeholder: implement record creation logic or modal here
+    alert('New record functionality coming soon!');
+  }
+
+  deleteCase(index: number): void {
+    if (confirm('Are you sure you want to delete this case?')) {
+      this.caseStore.deletePoliceCaseAt(index);
+      this.load();
+    }
+  }
+
+  verifyCase(index: number): void {
+    const adminName = 'Admin'; // Replace with actual admin name if available
+    const updated = { ...this.cases[index], verifiedBy: adminName, lastUpdated: new Date().toISOString() };
+    this.caseStore.updatePoliceCaseAt(index, updated);
+    this.load();
+  }
+
+  get totalCases(): number {
+    return this.cases.length;
+  }
+  get openCases(): number {
+    return this.cases.filter(c => c.status === 'Open').length;
+  }
+  get closedCases(): number {
+    return this.cases.filter(c => c.status === 'Closed').length;
+  }
 }

src/app/shared/case-store.service.ts

@@ -22,6 +22,9 @@ export interface PoliceCase {
     address: string;
     occupation?: string;
   };
+  lastUpdated?: string;
+  nextAction?: string;
+  casePriority?: 'High' | 'Medium' | 'Low';
 }
 
 @Injectable({ providedIn: 'root' })

src/assets/font/EBGaramond-Medium.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8e2105ea6bbb11a408667c03e5f0fa19f69fffe417fffe9b915baee4bda9c77f
+size 561508

src/assets/font/EBGaramond-Regular.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a45a5040e1a328d056871d42aa70f10f7ca3bf5c447887b80720542feeead5f2
+size 558640

src/assets/font/Roliana-Regular.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e1f3947d7128de625e8815bc66bd3ece11329410519e8c0a3eef04f9bf03ae41
+size 110052

src/index.html

@@ -5,11 +5,13 @@
   <title>Py-Detect</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="pykara-favicon.ico">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
 </body>
 </html>
-