adminpage update

src.zip

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1819db358c2c3e8e40f189817c01f35259ca5c611a797cd3ba3a62189f5c5a30
-size 34011296
+oid sha256:33012a38b94a3ec9be05092233cda9e45e53e9dd90e00e9cfb27658cf088922b
+size 38836504

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

@@ -1,1046 +1,1505 @@
 @import '../recordpage/recordpage.component.css';
 
-body, html {
-  overflow-y: hidden !important;
+/* ===== CSS Variables & Reset ===== */
+:root {
+  --primary-blue: #1E3A8A;
+  --primary-blue-light: #2563eb;
+  --accent-green: #22c55e;
+  --accent-red: #ef4444;
+  --accent-purple: #7c3aed;
+  --text-dark: #1f2937;
+  --text-light: #6b7280;
+  --border-color: #e5e7eb;
+  --bg-light: #f8fafc;
+  --bg-white: #ffffff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-body, main.content {
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: #f4f6fa;
-  min-height: 100vh;
-  margin: 0;
-  padding: 0;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
 }
 
+/* ===== App Container ===== */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
 
-/* Modern UI header styles from infopage */
+/* ===== Header Styles ===== */
 .site-header {
-  background: #011329;
-  box-shadow: 0 2px 12px #38bdf844;
-  margin-bottom: 0;
-  position: relative;
-  z-index: 10;
-  padding-bottom: 0;
-}
+  background: linear-gradient(135deg, #011329 0%, #0a2540 100%);
+  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+  height: 60px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background: rgba(1, 19, 41, 0.95);
+}
+
+  .site-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
+    z-index: -1;
+  }
 
 .header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 18px 32px 0 32px;
-  position: relative;
+  height: 100%;
+  padding: 0 32px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .logo-cluster {
   display: flex;
   align-items: center;
-  gap: 18px;
+  gap: 12px;
 }
 
 .logo-img-header {
-  width: 54px;
-  height: 54px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-  padding: 4px;
-  margin-top: -6px;
-  margin-bottom: 1vh;
+  background: white;
+  padding: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  transition: transform 0.2s;
 }
 
+  .logo-img-header:hover {
+    transform: scale(1.05);
+  }
+
 .py-detect-title-header {
-  font-size: 2.1rem;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-size: 28px;
   font-weight: 900;
-  letter-spacing: 6px;
+  letter-spacing: 3px;
   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.p,
+  .py-detect-title-header .py-letter.d,
+  .py-detect-title-header .py-letter.t,
   .py-detect-title-header .py-letter.c {
     color: #e3f6ff;
     text-shadow: 0 0 6px #38bdf8;
   }
 
+  .py-detect-title-header .py-letter.y,
+  .py-detect-title-header .py-letter.e,
+  .py-detect-title-header .py-letter.e2,
   .py-detect-title-header .py-letter.t2 {
     color: #38bdf8;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-
-.case-details-list {
-  width: 100%;
-  max-width: 1700px;
-  margin: 0 auto;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 32px rgba(30,41,59,0.12);
-  padding: 32px 48px;
+.py-shape {
+  display: inline-block;
+  width: 16px;
+  height: 4px;
+  background: #e3f6ff;
+  margin: 0 6px;
+  border-radius: 2px;
+  box-shadow: 0 0 6px #38bdf8;
 }
 
-.case-details-item {
-  border-bottom: 1px solid #edf2f7;
-  padding: 24px 0;
+.header-actions-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.case-details-item:last-child {
-  border-bottom: none;
+.back-small {
+  font-weight: 600;
+  font-size: 11px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  background: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
 }
 
-h2 {
-  color: #38bdf8;
-  font-size: 2.1rem;
-  font-weight: 800;
-  margin-bottom: 32px;
-  text-align: center;
-}
+  .back-small:hover {
+    background: #f9fafb;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
 
-h3 {
-  color: #23272b;
-  font-size: 1.2rem;
-  font-weight: 700;
-  margin-bottom: 12px;
+.logout-btn {
+  font-weight: 600;
+  font-size: 11px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
 }
 
-/*p {
-  margin: 4px 0;
-  color: #334155;
-}*/
+  .logout-btn:hover {
+    background: linear-gradient(135deg, #dc2626, #ef4444);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+  }
 
-hr {
-  margin: 24px 0 0 0;
-  border: none;
-  border-top: 1px solid #e2e8f0;
+.logout-icon {
+  font-size: 16px;
 }
 
-.welcome-user {
-  position: absolute;
-  top: 24px;
-  left: 32px;
-  font-size: 1.1rem;
-  color: #ffffff;
-  font-weight: 600;
-  z-index: 2;
+/* ===== Main Content Area ===== */
+.main-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.welcome-user-fixed {
-  position: absolute;
-  top: 24px;
-  left: 32px;
-  font-size: 1.1rem;
-  color: #334155;
-  font-weight: 600;
-  z-index: 2;
+.content-container {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+  max-width: 1882px;
+  margin: 0 auto;
+  width: 100%;
 }
 
-.page-title-centered {
-  text-align: center;
-  margin-top: 24px;
-  font-size: 2.1rem;
-  font-weight: 800;
-  color: #38bdf8;
+/* ===== Record Card ===== */
+.record-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 90%;
+  min-height: 0;
+  width: 96vw;
+  margin-left: 1px;
+  margin-top: 6px;
 }
 
-.wrapper.records-center {
-  position: relative;
-}
 
-.welcome-left {
-  text-align: left;
-  font-size: 2.1rem;
-  font-weight: 800;
-  color: #38bdf8;
-  margin-bottom: 32px;
-  margin-top: 0;
+/* ===== Analytics Blue Section ===== */
+.analytics-blue {
+  background: #1E3A8A;
+  padding: 20px 32px;
+  flex-shrink: 0;
 }
 
-.table-wrap {
-  position: relative;
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
-.welcome-left {
-  font-size: 2.1rem;
-  font-weight: 800;
-  color: #38bdf8;
-  margin-bottom: 16px;
-  text-align: left;
-  position: relative;
-  right: 32vw;
+.record-title-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-.modal-case-details {
-  background: #f8fbfd;
-  border-radius: 18px;
-  box-shadow: 0 20px 60px rgba(0,0,0,.25);
-  padding: 0;
-  max-width: 540px;
-  min-width: 340px;
+.record-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.modal-header-case {
-  background: #f5fafd;
-  border-bottom: 1px solid #e2e8f0;
-  padding: 24px 24px 12px 24px;
-}
+  .record-title i {
+    font-size: 18px;
+    color: #38bdf8;
+  }
 
-.modal-header-case h2 {
-  font-size: 1.6rem;
-  font-weight: 800;
-  color: #23272b;
-  margin: 0;
+.record-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-.modal-body-case {
-  padding: 18px 24px 8px 24px;
-  background: #f8fbfd;
-}
+.record-search {
+  width: 280px;
+  padding: 10px 16px 10px 42px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+
+  .record-search:focus {
+    outline: none;
+    border-color: #38bdf8;
+    background: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
+  }
 
-.modal-footer-case {
-  background: #f5fafd;
-  border-top: 1px solid #e2e8f0;
-  padding: 16px 24px;
-  text-align: left;
-}
+  .record-search::placeholder {
+    color: rgba(255, 255, 255, 0.7);
+  }
 
-.detail-row {
-  display: grid;
-  grid-template-columns: 160px 1fr;
-  gap: 8px;
-  padding: 6px 0;
-  color: #334155;
+.analytics-cards {
+  display: flex;
+  gap: 20px;
+  flex-shrink: 0;
 }
 
-.detail-row span {
-  color: #1e293b;
-  font-weight: 700;
-  min-width: 180px;
-  font-size: 1.08em;
-  margin-right: 32px;
-  text-align: left;
-  display: inline-block;
+.summary-card {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 10px;
+  padding: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s;
+  cursor: pointer;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  min-height: 85px;
 }
 
-.detail-row b {
-  color: #2563eb;
-  font-weight: 700;
-  word-break: break-word;
-  font-size: 1.13em;
-  margin-left: 8px;
-  text-align: left;
-  display: inline-block;
-}
+  .summary-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  }
 
-.bold-value {
-  font-weight: 700 !important;
-  color: #23272b !important;
+.summary-left {
+  display: flex;
+  flex-direction: column;
 }
 
-.detail-block .label {
-  font-weight: 700;
+.summary-label {
+  font-size: 18px;
+  font-weight: 900;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 1px;
   margin-bottom: 6px;
-  color: #23272b;
 }
 
-hr {
-  margin: 18px 0 12px 0;
-  border: none;
-  border-top: 1px solid #e2e8f0;
+.summary-value {
+  font-size: 30px;
+  font-weight: 700;
+  font-family: 'Segoe UI', sans-serif;
+  line-height: 1;
 }
 
-/* Modal for case details (match record page style) */
-.modal-blur-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 199;
-  background: rgba(255,255,255,0.45);
-  backdrop-filter: blur(8px);
-  pointer-events: none;
-  display: block;
-}
+  .summary-value.blue {
+    color: #2563eb;
+  }
 
-.modal {
-  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%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1001;
-  width: 90%;
-  max-width: 600px;
-  display: flex;
-  flex-direction: column;
-  animation: fadeIn 0.3s ease-out;
-}
+  .summary-value.green {
+    color: #22c55e;
+  }
 
-.modal-header {
-  background: #f8fafc;
-  border-radius: 10px 10px 0 0;
-  border-bottom: 1.5px solid #e5e7eb;
-  padding: 16px;
+  .summary-value.red {
+    color: #ef4444;
+  }
+
+.summary-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: white;
 }
 
-.modal-header h2 {
-  font-size: 1.4rem;
-  font-weight: 700;
-  margin: 0;
-  color: #23272b;
+.summary-card.total .summary-icon {
+  background: linear-gradient(135deg, #1E3A8A, #1e40af);
 }
 
-.modal-body {
-  padding: 16px;
-  background: #fff;
-  flex: 1;
-  overflow-y: auto;
-  color: #23272b;
+.summary-card.open .summary-icon {
+  background: linear-gradient(135deg, #16a34a, #15803d);
 }
 
-.modal-footer {
-  background: #f8fafc;
-  border-radius: 0 0 10px 10px;
-  border-top: 1.5px solid #e5e7eb;
-  padding: 12px;
-  text-align: right;
+.summary-card.closed .summary-icon {
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
 }
 
-.btn {
-  background: #38bdf8;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background 0.3s;
+.summary-card.review .summary-icon {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
 }
 
-.btn:hover {
-  background: #34b3e0;
+/* ===== Record Meta ===== */
+.record-meta {
+  padding: 14px 32px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border-color);
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  flex-shrink: 0;
 }
 
-.actions {
+/* ===== Filter Bar ===== */
+.filter-bar {
   display: flex;
-  flex-direction: row;
-  justify-content: center;
   align-items: center;
-  gap: 18px;
-  flex-wrap: nowrap;
-  width: 100%;
+  gap: 16px;
+  padding: 16px 32px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
-.btn.view {
-  background: #64748b;
-  color: #fff;
-  border: none;
-  border-radius: 12px;
-  font-weight: 600;
-  font-size: 1.08rem;
-  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;
-}
+  .filter-bar select {
+    padding: 9px 16px;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: #374151;
+    font-size: 14px;
+    font-weight: 500;
+    min-width: 150px;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
 
-.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;
-}
+    .filter-bar select:focus {
+      outline: none;
+      border-color: #2563eb;
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+  .filter-bar button {
+    padding: 9px 18px;
+    border-radius: 6px;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s;
+    background: #2563eb;
+    color: white;
+  }
 
-.actions-col {
-  text-align: center;
-  vertical-align: middle;
+    .filter-bar button:hover {
+      background: #1d4ed8;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
+    }
+
+    .filter-bar button:last-of-type {
+      background: #E5E7EB;
+      color: #374151;
+      border: 1px solid #D1D5DB;
+    }
+
+      .filter-bar button:last-of-type:hover {
+        background: #D1D5DB;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
+      }
+
+/* ===== Table Container ===== */
+.table-container {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
-.records th.actions-col,
-.records td.actions {
-  width: 24% !important;
-  min-width: 313px;
-  max-width: 320px;
+.table-wrapper {
+  flex: 1;
+  overflow: auto;
+  padding: 15px 32px;
+  background: white;
 }
 
-.next-action-col {
-  text-align: left;
-  min-width: 120px;
-  padding-left: 0;
-  padding-right: 0;
-  font-weight: 500;
-  color: #2563eb;
-}
+  .table-wrapper::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
 
-@media (max-width: 700px) {
-  .actions .btn {
-    min-width: 120px;
-    max-width: 160px;
-    font-size: 1rem;
-    padding: 8px 10px;
+  .table-wrapper::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
   }
-  .records th.actions-col,
-  .records td.actions {
-    min-width: 140px;
-    max-width: 180px;
-    width: 36% !important;
+
+  .table-wrapper::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
   }
+
+    .table-wrapper::-webkit-scrollbar-thumb:hover {
+      background: #a8a8a8;
+    }
+
+.record-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: white;
+  min-height: 118px;
 }
 
-@media (max-width: 900px) {
-  .btn.view, .btn.edit {
-    padding: 10px 16px;
-    font-size: 1rem;
+  .record-table thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: #f8fafc;
   }
-  .records th.actions-col,
-  .records td.actions {
-    min-width: 120px;
-    max-width: 180px;
-    width: 36% !important;
+
+  .record-table th {
+    padding: 18px 16px;
+    text-align: left;
+    font-weight: 600;
+    color: #374151;
+    font-size: 13px;
+    border-bottom: 2px solid var(--border-color);
+    white-space: nowrap;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
   }
-}
 
+    .record-table th:hover {
+      background: #f1f5f9;
+    }
 
+  .record-table td {
+    padding: 16px 16px;
+    border-bottom: 1px solid var(--border-color);
+    color: #374151;
+    font-size: 14px;
+    white-space: nowrap;
+  }
 
-/* table layout for case details page */
-.record-table {
-  width: 100%;
-  table-layout: auto;
-  border-collapse: collapse;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
+  .record-table tbody tr {
+    transition: background 0.2s;
+  }
 
-.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 tbody tr:hover {
+      background: #f8fafc;
+    }
 
-.record-table tr:last-child td {
-  border-bottom: none;
+/* Sort arrows */
+.sort {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  opacity: 0.5;
 }
 
-th.actions, td.actions {
-  text-align: left;
-  padding-left: 0;
-  padding-right: 0;
-}
+  .sort.asc {
+    border-bottom: 8px solid #374151;
+  }
 
-td.actions {
-  vertical-align: middle;
-}
+  .sort.desc {
+    border-top: 8px solid #374151;
+  }
 
-.icon-btn.view {
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
+  .sort.neutral {
+    border-top: 8px solid #9ca3af;
+  }
+
+/* Case ID link */
+.mono a {
   color: #2563eb;
-  font-size: 1.4em;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  text-decoration: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s;
 }
 
-.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;
+  .mono a:hover {
+    color: #1d4ed8;
+    text-decoration: underline;
+  }
+
+/* Priority pills */
+.priority-pill {
+  display: inline-flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.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;
+.priority-high {
+  background: #fee2e2;
+  color: #b91c1c;
 }
-.filter-bar select:focus,
-.filter-bar .filter-date:focus {
-  border: 1.5px solid #38bdf8;
+
+.priority-medium {
+  background: #fef9c3;
+  color: #ca8a04;
 }
-.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;
+
+.priority-low {
+  background: #dcfce7;
+  color: #15803d;
 }
-.date-label {
-  margin: 0 4px 0 4px;
+
+/* Status labels */
+.status-label {
   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;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 13px;
   font-weight: 600;
-  outline: none;
-  min-width: 90px;
-  margin-left: 2px;
+  min-width: 110px;
+  justify-content: center;
 }
-.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;
+.status-open {
+  background: #dcfce7;
+  color: #166534;
 }
-.details-content {
-  max-width: 
-      ;
-  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;
+
+.status-under {
+  background: #fef3c7;
+  color: #92400e;
 }
 
-.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;
+.status-closed {
+  background: #fee2e2;
+  color: #991b1b;
 }
-body.popup-open {
-  overflow: hidden !important;
+
+/* Progress indicators */
+.progress-col {
+  text-align: left;
+  min-width: 90px;
 }
 
-.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;
+.progress-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
 }
 
-/* --- 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;
+  .progress-dot.blue {
+    background: linear-gradient(135deg, #2563eb, #38bdf8);
+  }
+
+  .progress-dot.green {
+    background: linear-gradient(135deg, #34d399, #6ee7b7);
+  }
+
+.progress-check {
+  font-size: 14px;
+  color: #34d399;
+  background: #d1fae5;
+  border-radius: 4px;
+  padding: 2px 6px;
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
 }
-@keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(32px); }
-  to { opacity: 1; transform: translateY(0); }
+
+.progress-value {
+  font-weight: 600;
+  font-size: 14px;
+  color: #374151;
+  vertical-align: middle;
 }
 
-.section-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 18px;
-  letter-spacing: 0.5px;
+/* Action buttons */
+.actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }
 
-.subgroup-pills {
+.icon-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
   display: flex;
-  gap: 18px;
-  margin-bottom: 28px;
-  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
 }
-.subgroup-pills button {
-  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
-  color: #fff;
-  font-weight: 700;
+
+  .icon-btn.view {
+    color: #2563eb;
+    border-color: #dbeafe;
+  }
+
+    .icon-btn.view:hover {
+      background: #dbeafe;
+      border-color: #2563eb;
+    }
+
+  .icon-btn.upload {
+    color: #7c3aed;
+    border-color: #ede9fe;
+  }
+
+    .icon-btn.upload:hover {
+      background: #ede9fe;
+      border-color: #7c3aed;
+    }
+
+.detect-btn {
+  background: linear-gradient(135deg, #1976d2, #38bdf8);
+  color: white;
   border: none;
-  border-radius: 22px;
-  padding: 10px 32px;
-  font-size: 1.08em;
-  box-shadow: 0 2px 12px rgba(56,189,248,0.13);
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 14px;
+  padding: 8px 16px;
   cursor: pointer;
-  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
-  outline: none;
-  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  position: relative;
+  overflow: hidden;
 }
-.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);
+
+  .detect-btn:hover:not(:disabled) {
+    background: linear-gradient(135deg, #1565c0, #2563eb);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
+  }
+
+  .detect-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+/* Empty state */
+.empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: #9ca3af;
+  font-size: 16px;
+  background: white;
 }
 
-.fields-table-2col {
+/* ===== Pagination Controls ===== */
+/*.pagination-controls {
   display: flex;
-  flex-direction: row;
-  gap: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-.fields-col {
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+  gap: 10px;
+}
+
+  .pagination-controls button {
+    border: none;
+    background: #f3f4f6;
+    color: #333;
+    border-radius: 8px;
+    padding: 0 16px;
+    min-width: 40px;
+    min-height: 40px;
+    font-size: 14px;
+    font-weight: 500;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    transition: background 0.2s, color 0.2s, transform 0.2s;
+    cursor: pointer;
+    outline: none;
+  }
+
+    .pagination-controls button:hover:not(:disabled),
+    .pagination-controls button:focus:not(:disabled) {
+      background: #e3eafe;
+      color: #1976d2;
+      transform: scale(1.08);
+    }
+
+    .pagination-controls button.active {
+      background: #1976d2;
+      color: #fff;
+      font-weight: bold;
+      box-shadow: 0 0 0 2px #90caf9;
+    }
+
+  .pagination-controls span {
+    font-size: 14px;
+    color: #888;
+    padding: 0 8px;
+  }*/
+
+/* ===== Bottom Controls ===== */
+/*.bottom-controls {
   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;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 16px 32px;
+  background: #f8fafc;
+  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
+  gap: 24px;
 }
-.field-label {
-  color: #22223b;
+
+.results-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #6b7280;
+  font-size: 14px;
   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;
+.page-size-selector {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  position: relative;
+  gap: 8px;
+  color: #6b7280;
+  font-size: 14px;
 }
 
-.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;
+  .page-size-selector select {
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: #374151;
+    font-size: 14px;
+    cursor: pointer;*/
+ /* }*/
+
+
+/* ===== Bottom Controls ===== */
+.bottom-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 32px;
+  background: #f8fafc;
+  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
 }
-.btn.close-btn:hover {
-  color: #2563eb;
+
+.results-summary {
+  display: flex;
+  align-items: center;
+  gap: 20px;
 }
 
-.btn.close-btn-bottom {
-  position: fixed;
-  right: 326px;
-  top: 46px;
-  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;
+.results-info {
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  gap: 8px;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
 }
-  .btn.close-btn-bottom:hover {
-    background: #38bdf8;
-    color: #22223b;
+
+  .results-info i {
+    color: #2563eb;
   }
 
-.progress-col {
-  text-align: left;
-  min-width: 90px;
-  padding-left: 0;
-  padding-right: 0;
-}
+.page-size-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+  .page-size-selector select {
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: #374151;
+    font-size: 14px;
+    cursor: pointer;
+  }
 
-.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;
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.priority-pill {
-  display: inline-flex;
+.page-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  display: 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;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #374151;
 }
-.priority-high {
-  background: #fee2e2;
-  color: #b91c1c;
+
+  .page-btn:hover:not(:disabled) {
+    background: #f3f4f6;
+    border-color: #9ca3af;
+  }
+
+  .page-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+.page-numbers {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
-.priority-medium {
-  background: #fef9c3;
-  color: #ca8a04;
+
+.page-number {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
 }
-.priority-low {
-  background: #dcfce7;
-  color: #15803d;
+
+  .page-number:hover {
+    background: #f3f4f6;
+  }
+
+  .page-number.active {
+    background: #2563eb;
+    color: white;
+    border-color: #2563eb;
+  }
+
+.page-ellipsis {
+  padding: 0 8px;
+  color: #9ca3af;
+  font-size: 14px;
 }
 
+/* ===== Evidence Upload Section ===== */
 .evidence-upload-section {
   margin-top: 32px;
-  padding: 16px;
-  background: #f3f4f6;
+  padding: 24px 32px;
+  background: #f8fafc;
   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;
+  border: 1px solid var(--border-color);
 }
+
+  .evidence-upload-section h3 {
+    margin-bottom: 20px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #374151;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+    .evidence-upload-section h3 i {
+      color: #2563eb;
+    }
+
 .evidence-list {
-  margin-top: 10px;
+  margin-top: 16px;
 }
+
 .evidence-file {
   display: flex;
   align-items: center;
-  font-size: 0.98em;
-  margin-bottom: 6px;
-  color: #374151;
-}
-.evidence-file i {
-  margin-right: 8px;
-  color: #2563eb;
+  padding: 12px 16px;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  margin-bottom: 8px;
+  transition: all 0.2s;
 }
 
+  .evidence-file:hover {
+    background: #f9fafb;
+    border-color: #d1d5db;
+  }
 
-/* Footer */
-footer {
-  background: linear-gradient(to right, #011022, #01030a);
-  color: #fff;
-  text-align: center;
-  padding: 10px 0px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 100;
-  margin-top: 0;
+  .evidence-file i {
+    margin-right: 12px;
+    color: #2563eb;
+    font-size: 16px;
+  }
+
+.evidence-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-/* Additional Styles for Go Detect button/icon */
-.icon-btn.detect {
-  background: #e3f2fd;
-  color: #1976d2;
-  border-radius: 50%;
-  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
-  margin-left: 4px;
-  position: relative;
-  transition: box-shadow 0.2s, transform 0.2s;
+.evidence-type-tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+  .evidence-type-tabs button {
+    padding: 8px 20px;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: #374151;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+    .evidence-type-tabs button.active,
+    .evidence-type-tabs button:hover {
+      background: #2563eb;
+      color: white;
+      border-color: #2563eb;
+    }
+
+.evidence-actions {
+  margin-bottom: 20px;
 }
-.icon-btn.detect:enabled:hover {
-  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.25);
-  transform: scale(1.08);
+
+.evidence-file-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  background: #2563eb;
+  color: white;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
 }
-.icon-btn.detect i {
-  font-size: 1.35em;
-  animation: detectPulse 1.2s infinite;
+
+  .evidence-file-label:hover {
+    background: #1d4ed8;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
+  }
+
+.evidence-list-block {
+  background: white;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  padding: 20px;
 }
-@keyframes detectPulse {
-  0% { transform: scale(1); color: #1976d2; }
-  50% { transform: scale(1.25); color: #42a5f5; }
-  100% { transform: scale(1); color: #1976d2; }
+
+.evidence-list-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--border-color);
 }
 
-.header-actions {
+.evidence-file-row {
   display: flex;
   align-items: center;
-  gap: 16px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color);
 }
-.header-btn.detect-header-btn {
-  background: #1976d2;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 8px 20px;
-  font-size: 1.08em;
+
+  .evidence-file-row:last-child {
+    border-bottom: none;
+  }
+
+.evidence-file-icon {
+  margin-right: 12px;
+  color: #2563eb;
+  font-size: 16px;
+  width: 24px;
+  text-align: center;
+}
+
+.evidence-file-name {
+  flex: 1;
+  color: #374151;
+  font-size: 14px;
   font-weight: 500;
-  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.10);
-  cursor: pointer;
-  transition: background 0.2s, transform 0.2s;
+}
+
+.evidence-view-link {
+  color: #2563eb;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+  .evidence-view-link:hover {
+    color: #1d4ed8;
+    text-decoration: underline;
+  }
+
+.evidence-hr {
+  margin: 20px 0;
+  border: none;
+  border-top: 1px solid var(--border-color);
+}
+
+/* ===== Full-page Overlay Styles ===== */
+.fullpage-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
   display: flex;
   align-items: center;
-  gap: 8px;
-  position: relative;
-}
-.header-btn.detect-header-btn:hover {
-  background: #1565c0;
-  transform: scale(1.04);
+  justify-content: center;
+  padding: 40px;
+  overflow: auto;
 }
-.header-btn.detect-header-btn i {
-  font-size: 1.2em;
-  animation: detectPulse 1.2s infinite;
+
+body.popup-open {
+  overflow: hidden !important;
 }
 
-/* Enhanced styles for the Go Detect button */
-.detect-btn {
-  background: linear-gradient(90deg, #1976d2 0%, #38bdf8 100%);
-  color: #fff;
-  border: none;
-  border-radius: 24px;
-  font-weight: 700;
-  font-size: 1.08em;
-  padding: 5px 28px;
-  box-shadow: 0 2px 12px rgba(25, 118, 210, 0.13);
-  cursor: pointer;
-  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
-  outline: none;
-  margin-left: 4px;
+.fullpage-popup-content {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  max-width: 1200px;
+  width: 100%;
+  max-height: 90vh;
+  overflow: auto;
+  padding: 32px;
   position: relative;
-  overflow: hidden;
-  z-index: 1;
-  animation: detectBtnPulse 1.6s infinite alternate;
-}
-.detect-btn:enabled:hover,
-.detect-btn:focus {
-  background: linear-gradient(90deg, #38bdf8 0%, #1976d2 100%);
-  box-shadow: 0 4px 24px rgba(56,189,248,0.18);
-  transform: scale(1.06);
 }
-@keyframes detectBtnPulse {
-  0% { box-shadow: 0 2px 12px rgba(25, 118, 210, 0.13); }
-  100% { box-shadow: 0 8px 32px rgba(56,189,248,0.22); }
+
+.case-details-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.detect-btn::after {
-  content: '';
-  position: absolute;
-  left: 0; top: 0;
-  width: 100%; height: 100%;
-  border-radius: 24px;
-  background: linear-gradient(90deg, rgba(56,189,248,0.12) 0%, rgba(25,118,210,0.08) 100%);
-  opacity: 0.5;
-  z-index: -1;
-  pointer-events: none;
-  animation: detectBtnGlow 2.2s infinite alternate;
+
+/* ===== Details Section Cards ===== */
+.details-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-bottom: 32px;
 }
-@keyframes detectBtnGlow {
-  0% { opacity: 0.5; }
-  100% { opacity: 0.9; }
+
+.details-section-card {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
-.header-actions-right {
-  position: absolute;
-  right: 32px;
-  top: 27px;
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e5e7eb;
   display: flex;
   align-items: center;
-  z-index: 100;
+  gap: 10px;
 }
 
-.logout-btn {
-  font-size: 0.85rem;
-  padding: 0.18rem 0.7rem;
-  border-radius: 5px;
-  min-width: unset;
-  min-height: unset;
-  box-shadow: 0 1px 4px #d1d5db22;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+.subgroup-pills {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
 }
-.logout-btn:hover {
-  background: linear-gradient(90deg, #23272b 0%, #ef4444 100%);
-  color: #fff;
-  box-shadow: 0 2px 24px #ef444488;
-  transform: scale(1.04);
+
+  .subgroup-pills button {
+    padding: 8px 20px;
+    border-radius: 20px;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: #374151;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+    .subgroup-pills button.active,
+    .subgroup-pills button:hover {
+      background: #2563eb;
+      color: white;
+      border-color: #2563eb;
+    }
+
+.fields-table-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
 }
-.logout-icon {
-  font-size: 1.2em;
-  margin-right: 6px;
+
+.fields-col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.summary-value.blue { color: #2563eb; }
-.summary-value.green { color: #22c55e; }
-.summary-value.red { color: #ef4444; }
+.field-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+  margin-bottom: 4px;
+}
 
-.sort {
- display: inline-block;
- width:0;
- height:0;
- border-left:4px solid transparent;
- border-right:4px solid transparent;
- margin-left:6px;
- vertical-align: middle;
+.field-value {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1f2937;
+  line-height: 1.5;
 }
-.sort.asc {
- border-bottom:6px solid #4a5568;
+
+.raw-formdata-table {
+  background: #f9fafb;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  padding: 20px;
+  max-height: 400px;
+  overflow: auto;
 }
-.sort.desc {
- border-top:6px solid #4a5568;
+
+  .raw-formdata-table table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .raw-formdata-table tr {
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+    .raw-formdata-table tr:last-child {
+      border-bottom: none;
+    }
+
+  .raw-formdata-table td {
+    padding: 12px 16px;
+    vertical-align: top;
+  }
+
+    .raw-formdata-table td:first-child {
+      font-weight: 600;
+      color: #374151;
+      width: 35%;
+      background: #f3f4f6;
+    }
+
+    .raw-formdata-table td:last-child {
+      background: white;
+    }
+
+  .raw-formdata-table pre {
+    margin: 0;
+    font-family: inherit;
+    font-size: 13px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+.small-btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+  .small-btn:hover {
+    background: #f3f4f6;
+    border-color: #9ca3af;
+  }
+
+/* ===== Footer ===== */
+footer {
+  background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
+  color: #fff;
+  text-align: center;
+  padding: 12px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
+/* ===== Responsive Design ===== */
+@media (max-width: 1200px) {
+  .header-inner,
+  .analytics-blue,
+  .record-meta,
+  .filter-bar,
+  .table-wrapper,
+  .bottom-controls {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  .content-container {
+    padding: 16px;
+  }
+
+  .fullpage-popup-content {
+    padding: 24px;
+  }
 }
-.sort.neutral {
- border-top:6px solid #b0b0b0;
- border-bottom:6px solid #b0b0b0;
- opacity:0.5;
+
+@media (max-width: 992px) {
+  .analytics-cards {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .record-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+
+  .record-header-actions {
+    width: 100%;
+  }
+
+  .record-search {
+    width: 100%;
+  }
+
+  .filter-bar {
+    gap: 12px;
+  }
+
+    .filter-bar select {
+      flex: 1;
+      min-width: 120px;
+    }
+
+  .table-wrapper {
+    padding: 0 16px;
+    overflow-x: auto;
+  }
+
+  .record-table {
+    min-width: 1200px;
+  }
+
+  .fields-table-2col {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
 }
 
+@media (max-width: 768px) {
+  .header-inner {
+    padding: 0 16px;
+    flex-direction: column;
+    height: auto;
+    padding: 12px 16px;
+    gap: 12px;
+  }
+
+  .py-detect-title-header {
+    font-size: 22px;
+    letter-spacing: 2px;
+  }
+
+  .header-actions-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .analytics-blue,
+  .record-meta,
+  .filter-bar,
+  .table-wrapper,
+  .bottom-controls {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .summary-value {
+    font-size: 22px;
+  }
 
+  .summary-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
 
+  .bottom-controls {
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+  }
 
+  .pagination-controls {
+    width: 100%;
+    justify-content: center;
+  }
 
+  .actions {
+    flex-direction: column;
+    gap: 4px;
+  }
 
+  .icon-btn,
+  .detect-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
 
+  .fullpage-popup-overlay {
+    padding: 20px;
+  }
 
+  .fullpage-popup-content {
+    padding: 20px;
+  }
 
+  .case-details-title {
+    font-size: 20px;
+  }
 
+  .section-title {
+    font-size: 16px;
+  }
+}
 
+@media (max-width: 480px) {
+  .py-detect-title-header {
+    font-size: 18px;
+    letter-spacing: 1px;
+  }
+
+  .header-actions-right {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .summary-card {
+    padding: 16px;
+  }
+
+  .summary-value {
+    font-size: 20px;
+  }
+
+  .summary-icon {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+
+  .filter-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+    .filter-bar select,
+    .filter-bar button {
+      width: 100%;
+    }
+
+  .subgroup-pills {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+    .subgroup-pills button {
+      width: 100%;
+      text-align: center;
+    }
+}

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

@@ -19,6 +19,31 @@
  </div>
  <div class="header-actions-right">
  <button class="back-small" *ngIf="selectedCase" (click)="closeAndReturn()">← Back to {{ getReturnLabel() }}</button>
+
+ <!-- Profile display: initials and dropdown with name/email (matches infopage) -->
+ <div #profileDisplay class="profile-display" [class.open]="showProfileMenu" style="margin-left:12px; display:flex;align-items:center; cursor:pointer; position:relative;" (click)="toggleProfileMenu($event)">
+ <div class="profile-avatar" style="width:2.2em; height:2.2em; border-radius:50%; background: linear-gradient(135deg, #1E3A8A, #2563eb); color: #fff; display: flex; align-items: center; justify-content: center; font-weight:700; font-size:0.95em; overflow: hidden;">
+ <img *ngIf="currentUser?.avatarUrl" [src]="currentUser?.avatarUrl" alt="avatar" style="width:100%;height:100%;object-fit:cover;" />
+ <span *ngIf="!currentUser?.avatarUrl">{{ getUserInitials() }}</span>
+ </div>
+ <div *ngIf="showProfileMenu" class="profile-menu" [ngStyle]="profileMenuStyle" style="background:#222;color:#fff;border-radius:8px;padding:8px10px;min-width:220px;box-shadow:06px18px rgba(0,0,0,0.25);">
+ <div style="display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:8px;">
+ <div style="width:42px;height:42px;border-radius:50%;background:#2b6ea6;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;overflow:hidden;">
+ <img *ngIf="currentUser?.avatarUrl" [src]="currentUser?.avatarUrl" alt="avatar" style="width:100%;height:100%;object-fit:cover;" />
+ <span *ngIf="!currentUser?.avatarUrl">{{ getUserInitials() }}</span>
+ </div>
+ <div style="font-size:0.95em;">
+ <div>{{ currentUser?.name }}</div>
+ <div style="font-size:0.8em;opacity:0.9;">{{ currentUser?.email }}</div>
+ </div>
+ </div>
+ <button (click)="logout()" style="width:100%;display:flex;align-items:center;gap:8px;padding:8px10px;border:none;border-radius:6px;background:transparent;color:#fff;cursor:pointer;">
+ <i class="fas fa-sign-out-alt" style="width:18px;text-align:center;"></i>
+ Logout
+ </button>
+ </div>
+ </div>
+
  <button class="logout-btn" (click)="logout()">
  <span class="logout-icon">⎋</span> Logout
  </button>
@@ -26,7 +51,12 @@
  </div>
 </div>
 
-<div class="record-card">
+
+<!-- Main Content Area -->
+<div class="main-content">
+ <div class="content-container">
+ <!-- Record Card -->
+ <div class="record-card">
  <div class="analytics-panel">
  <div class="analytics-blue">
  <div class="record-header">
@@ -81,6 +111,7 @@
  </div>
 
  <div class="filter-bar">
+ <span class="filter-icon"><i class="fas fa-filter"></i></span>
  <select [(ngModel)]="filterStatus">
  <option value="">Status</option>
  <option *ngFor="let status of statusTypes">{{ status }}</option>
@@ -94,6 +125,9 @@
  </div>
 
  <!-- Table/list view always visible -->
+ <!-- Table Container -->
+ <div class="table-container">
+ <div class="table-wrapper">
  <table class="record-table">
  <thead>
  <tr>
@@ -202,68 +236,48 @@
  </tr>
  </tbody>
  </table>
-
- <!-- Pagination Controls -->
- <div class="pagination-controls" style="display:flex;justify-content:center;align-items:center;margin:20px0;gap:10px;">
- <style>
- .pagination-controls button {
- border: none;
- background: #f3f4f6;
- color: #333;
- border-radius:8px;
- padding:016px;
- min-width:40px;
- min-height:40px;
- font-size:1.1em;
- font-weight:500;
- box-shadow:02px 8px rgba(0,0,0,0.04);
- transition: background 0.2s, color 0.2s, transform 0.2s;
- cursor: pointer;
- outline: none;
- }
- .pagination-controls button:hover:not(:disabled),
- .pagination-controls button:focus:not(:disabled) {
- background: #e3eafe;
- color: #1976d2;
- transform: scale(1.08);
- }
- .pagination-controls button.active {
- background: #1976d2;
- color: #fff;
- font-weight: bold;
- box-shadow:0002px #90caf9;
- animation: pulseActive1s infinite;
- }
- @keyframes pulseActive {
-0% { box-shadow:0002px #90caf9; }
-50% { box-shadow:0006px #90caf9; }
-100% { box-shadow:0002px #90caf9; }
- }
- .pagination-controls span {
- font-size:1.2em;
- color: #888;
- padding:08px;
- }
- </style>
- <button (click)="prevPage()" [disabled]="currentPage ===1">«</button>
- <ng-container *ngFor="let page of getPagination()">
- <button *ngIf="page !== '...'" (click)="goToPage(page)" [class.active]="currentPage === page">{{ page }}</button>
- <span *ngIf="page === '...'">...</span>
- </ng-container>
- <button (click)="nextPage()" [disabled]="currentPage === totalPages">»</button>
  </div>
-</div>
+ </div>
 
-<!-- Results summary and page size selector -->
-<div style="display:flex;align-items:center;justify-content:flex-start;gap:24px;margin-bottom:16px;">
- <span style="font-size:1.1em;">Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
- <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)" style="padding:4px 12px;border-radius:8px;font-size:1em;">
+ <!-- Bottom Controls -->
+ <div class="bottom-controls">
+ <div class="results-summary">
+ <div class="results-info">
+ <i class="fas fa-list-ol"></i>
+ <span>Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
+ </div>
+ <div class="page-size-selector">
+ <span>Show:</span>
+ <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)">
  <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
  </select>
-</div>
+ </div>
+ </div>
+
+ <div class="pagination-controls">
+ <button class="page-btn prev" (click)="prevPage()" [disabled]="currentPage ===1">
+ <i class="fas fa-chevron-left"></i>
+ </button>
+ <div class="page-numbers">
+ <ng-container *ngFor="let page of getPagination()">
+ <button *ngIf="page !== '...'"
+ class="page-number"
+ [class.active]="currentPage === page"
+ (click)="goToPage(page)">
+ {{ page }}
+ </button>
+ <span *ngIf="page === '...'" class="page-ellipsis">...</span>
+ </ng-container>
+ </div>
+ <button class="page-btn next" (click)="nextPage()" [disabled]="currentPage === totalPages">
+ <i class="fas fa-chevron-right"></i>
+ </button>
+ </div>
+ </div>
+ </div>
 
-<!-- Evidence Upload Section for Investigators only, below the table -->
-<div *ngIf="isInvestigator() && selectedCase" class="evidence-upload-section">
+ <!-- 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">
@@ -271,10 +285,10 @@
  <i class="fas fa-file-upload"></i> {{ file.name }}
  </div>
  </div>
-</div>
+ </div>
 
-<!-- Evidence Upload Panel for selected case -->
-<div *ngIf="isInvestigator() && evidencePanelCase && evidencePanelCase.caseId" class="evidence-upload-section">
+ <!-- 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>
@@ -301,10 +315,10 @@
  </div>
  </div>
  <hr class="evidence-hr" />
-</div>
+ </div>
 
-<!-- Full-page overlay for details (no evidence upload here) -->
-<div *ngIf="selectedCase" class="fullpage-popup-overlay">
+ <!-- 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">
@@ -364,10 +378,10 @@
  <button class="btn close-btn-bottom" (click)="closeAndReturn()" title="Close">&times;</button>
  </div>
  </div>
-</div>
+ </div>
 
-<!-- Footer from provided design -->
-<footer>
+ <!-- Footer from provided design -->
+ <footer>
  <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
-</footer>
-<!-- End of record-card -->
+ </footer>
+ <!-- End of record-card -->

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
+import { HostListener, ElementRef, ViewChild } from '@angular/core';
 
 type EvidenceType = 'Document' | 'Photo';
 
@@ -37,8 +38,8 @@ export class CaseDetailsPageComponent implements OnInit {
           bVal = b.crime || '';
           break;
         case 'dateTime':
-          aVal = a.dateTime ? new Date(a.dateTime).getTime() :0;
-          bVal = b.dateTime ? new Date(b.dateTime).getTime() :0;
+          aVal = a.dateTime ? new Date(a.dateTime).getTime() : 0;
+          bVal = b.dateTime ? new Date(b.dateTime).getTime() : 0;
           break;
         case 'status':
           aVal = a.status || '';
@@ -48,8 +49,8 @@ export class CaseDetailsPageComponent implements OnInit {
           aVal = '';
           bVal = '';
       }
-      if (aVal < bVal) return this.sortDir === 'asc' ? -1 :1;
-      if (aVal > bVal) return this.sortDir === 'asc' ?1 : -1;
+      if (aVal < bVal) return this.sortDir === 'asc' ? -1 : 1;
+      if (aVal > bVal) return this.sortDir === 'asc' ? 1 : -1;
       return 0;
     });
     return sorted.slice(start, start + this.pageSize);
@@ -91,37 +92,37 @@ export class CaseDetailsPageComponent implements OnInit {
   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'], 
+    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'], 
+    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'], 
+    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']
-      } 
+      }
     }
   };
 
@@ -145,13 +146,22 @@ export class CaseDetailsPageComponent implements OnInit {
   sortKey: string = 'dateTime';
   sortDir: 'asc' | 'desc' = 'desc';
 
+  // New: current user/profile menu state
+  currentUser: { name: string; email?: string; avatarUrl?: string } | null = null;
+  showProfileMenu: boolean = false;
+  profileMenuStyle: Record<string, string> = {};
+  @ViewChild('profileDisplay', { read: ElementRef }) profileDisplayRef!: ElementRef;
+
   constructor(private caseStore: CaseStoreService, private router: Router, private route: ActivatedRoute) {}
 
   ngOnInit(): void {
     // Load cases first
     this.cases = this.caseStore.getPoliceCases();
     this.username = localStorage.getItem('username') || sessionStorage.getItem('username') || '';
-    
+
+    // Load current user for header/profile display
+    this.loadCurrentUser();
+
     // If navigated with a case in history state, use it (faster)
     try {
       const navState = (history && (history as any).state) || null;
@@ -187,6 +197,13 @@ export class CaseDetailsPageComponent implements OnInit {
     });
   }
 
+  // close profile menu when clicking outside
+  @HostListener('document:click', ['$event'])
+  handleDoc(ev: Event) {
+    const target = ev.target as HTMLElement;
+    if (this.showProfileMenu && !target.closest('.profile-display')) this.showProfileMenu = false;
+  }
+
   get filteredCases(): PoliceCase[] {
     let filtered = this.cases;
 
@@ -456,7 +473,7 @@ export class CaseDetailsPageComponent implements OnInit {
     // If not found on mapped path, try raw formData saved with the case
     if (value === null || value === undefined || value === '') {
       try {
-        const fd = this.getFormDataArray(sc);
+        const fd: Array<any> = this.getFormDataArray(sc);
         const norm = (s: any) => {
           if (s === null || s === undefined) return '';
           let t = String(s).toLowerCase();
@@ -469,7 +486,7 @@ export class CaseDetailsPageComponent implements OnInit {
 
         // Try exact key match first
         if (fd && fd.length) {
-          let kv = fd.find(k => k && String(k.key).toLowerCase() === String(field).toLowerCase());
+          let kv = fd.find((k: any) => k && String(k.key).toLowerCase() === String(field).toLowerCase());
           if (kv) value = kv.value;
 
           // Try normalized matches: label -> stored key, and mapped path names
@@ -478,7 +495,7 @@ export class CaseDetailsPageComponent implements OnInit {
             const pathName = Array.isArray(path) ? path[path.length -1] : String(path);
             const pathNorm = norm(pathName);
 
-            kv = fd.find(k => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm || norm(k.key).includes(fieldNorm) || fieldNorm.includes(norm(k.key))));
+            kv = fd.find((k: any) => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm || norm(k.key).includes(fieldNorm) || fieldNorm.includes(norm(k.key))));
             if (kv) value = kv.value;
           }
         }
@@ -529,6 +546,19 @@ export class CaseDetailsPageComponent implements OnInit {
     return String(value);
   }
 
+  // Helpers to work with saved formData shape
+  isFormDataArray(fd: any): boolean {
+    return Array.isArray(fd) && fd.length >0 && fd.every((item: any) => item && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'key'));
+  }
+
+  getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
+    if (!caseObj || !caseObj.formData) return [];
+    const fd = caseObj.formData;
+    if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
+    if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
+    return [{ key: 'value', value: fd }];
+  }
+
   getProgressValue(caseObj: any): number {
     let total = 0, filled = 0;
     ['crime', 'suspect', 'notes'].forEach(sectionKey => {
@@ -674,43 +704,63 @@ export class CaseDetailsPageComponent implements OnInit {
     }
   }
 
-  logout(): void {
-    // Implement your logout logic here (clear session, etc.)
-    // For now, just redirect to home/login
-    window.location.href = '/';
-  }
-
-  // New helper: return keys in saved formData (preserve order)
-  getFormDataKeys(caseObj: any): string[] {
-    if (!caseObj || !caseObj.formData) return [];
+  // Helper to load current user from localStorage key used by Infopage
+  private loadCurrentUser(): void {
     try {
-      const fd = caseObj.formData;
-      if (Array.isArray(fd)) {
-        return fd.map((kv: any) => kv && kv.key ? String(kv.key) : '');
-      }
-      return Object.keys(fd);
-    } catch {
-      return [];
+      const raw = localStorage.getItem('pydetect-current-user');
+      if (raw) this.currentUser = JSON.parse(raw);
+      else this.currentUser = { name: 'Rathi', email: 'rathi@gmail.com' };
+    } catch (e) {
+      this.currentUser = { name: 'Rathi' };
     }
   }
 
-  // New helper: detect if formData is key/value array
-  isFormDataArray(fd: any): boolean {
-    return Array.isArray(fd) && fd.length >0 && fd.every((item: any) => item && Object.prototype.hasOwnProperty.call(item, 'key'));
+  getUserInitials(): string {
+    if (!this.currentUser || !this.currentUser.name) return 'A';
+    const parts = this.currentUser.name.trim().split(/\s+/);
+    const first = parts[0] ? parts[0].charAt(0).toUpperCase() : 'A';
+    const second = parts.length > 1 ? (parts[1].charAt(0) || '').toUpperCase() : '';
+    return `${first}${second}`;
   }
 
-  // Return formData as array of {key,value}
-  getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
-    if (!caseObj || !caseObj.formData) return [];
-    const fd = caseObj.formData;
-    if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
-    if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
-    return [{ key: 'value', value: fd }];
+  toggleProfileMenu(ev?: Event): void {
+    if (ev) ev.stopPropagation();
+    this.showProfileMenu = !this.showProfileMenu;
+    if (this.showProfileMenu) {
+      try {
+        const el = this.profileDisplayRef && this.profileDisplayRef.nativeElement;
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          const menuWidth = 260; // desired menu width
+          const gap = 8; // gap between icon bottom and menu
+          const leftUnclamped = Math.round(rect.right - menuWidth);
+          const left = Math.min(Math.max(leftUnclamped, 8), Math.max(window.innerWidth - menuWidth - 8, 8));
+          const top = Math.round(rect.bottom + gap);
+          this.profileMenuStyle = {
+            position: 'fixed',
+            top: `${top}px`,
+            left: `${left}px`,
+            'min-width': `${menuWidth}px`,
+            'z-index': '9999',
+            padding: '10px'
+          };
+        }
+      } catch (e) { }
+    } else {
+      this.profileMenuStyle = {};
+    }
   }
 
+  logout(): void {
+    try { localStorage.removeItem('pydetect-current-user'); } catch { }
+    this.showProfileMenu = false;
+    // simple redirect for now
+    window.location.href = '/';
+  }
+
+  // Copy form data to clipboard (used in template)
   copyFormData(): void {
     if (!this.selectedCase) return;
-    // Use the key/value array representation for copying so UI and clipboard match
     const kv = this.getFormDataArray(this.selectedCase);
     const json = JSON.stringify(kv, null,2);
 
@@ -741,47 +791,36 @@ export class CaseDetailsPageComponent implements OnInit {
     });
   }
 
+  // Navigate to infopage to edit the selected case
   editCase(): void {
     if (!this.selectedCase) return;
-    // Send the stored key/value array back to Infopage as a flat object
     const kv = this.getFormDataArray(this.selectedCase);
     const flat: any = {};
     kv.forEach(item => { flat[item.key] = item.value; });
-    // Navigate to infopage route with state carrying the flat form
-    this.router.navigate(['/infopage'], { state: { prefillFormData: flat } });
+    this.router.navigate(['/infopage'], { state: { prefillFormData: flat, case: this.selectedCase } });
   }
 
-  // Navigation back to origin
+  // Close the overlay/details and navigate back to origin
   closeAndReturn(): void {
     this.closeDetails();
-    // Use returnTo if available, otherwise default to '/record'
     const target = this.returnTo || '/record';
 
-    // Debug info for runtime troubleshooting
-    console.log('closeAndReturn called. returnTo=', this.returnTo, 'history.state=', (history && (history as any).state) || {});
-
-    // Normalize and handle case-details with id if available in history.state
+    // Try to derive returnId from history state
     const hist = (history && (history as any).state) || {};
-    const returnId = hist && (hist.returnId || hist.caseId || hist.case) ? (hist.returnId || hist.caseId || (hist.case && hist.case.caseId)) : null;
+    const returnId = hist && (hist.returnId || hist.caseId || (hist.case && hist.case.caseId)) ? (hist.returnId || hist.caseId || (hist.case && hist.case.caseId)) : null;
 
     try {
       if (target.includes('case-details')) {
         if (returnId) {
-          // navigate to specific case details page
           this.router.navigate(['/case-details', returnId]);
           return;
         }
-        // navigate to case-details root
         this.router.navigate(['/case-details']);
         return;
       }
-    } catch (e) {
-      // fallback to generic navigation below
-    }
+    } catch (e) { /* fallthrough */ }
 
-    // For other targets ensure absolute URL and navigate
     const normalized = target.startsWith('/') ? target : ('/' + target);
-    // Use navigateByUrl to avoid relative navigation issues
     this.router.navigateByUrl(normalized);
   }
 
@@ -793,7 +832,7 @@ export class CaseDetailsPageComponent implements OnInit {
       if (t.includes('/case-details') || t === 'case-details') return 'Case Details';
       if (t.includes('/infopage') || t === 'infopage') return 'Info Page';
       if (t.includes('/')) return 'Previous Page';
-    } catch {}
+    } catch { }
     return 'Previous Page';
   }
 }

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

@@ -1,76 +1,260 @@
-:root {
-  --masthead-min-height: 140px;
+/* case-details-summary-page.component.css */
+/* ===== CSS Reset ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-/* Base */
-body {
-  background: linear-gradient(135deg, #e0e7ef 0%, #38bdf8 100%);
-  min-height: 100vh;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 12px;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* Layout */
-.case-details-summary-layout {
-  display: flex;
-  min-height: 90vh; /* unified (was 88vh in an earlier duplicate) */
-  background: linear-gradient(120deg, #e0f2fe 0%, #f4f6fa 100%);
+/* ===== Animations ===== */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
-.masthead {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  padding: 24px 24px 12px;
-  min-height: var(--masthead-min-height);
-  background: transparent;
-  margin-bottom: 48px;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+
+  80%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-/* Header (from infopage) */
+/* ===== Header Styles ===== */
 .site-header {
-  background: #011329;
-  box-shadow: 0 2px 12px #38bdf844;
-  margin-bottom: 0;
-  position: relative;
-  z-index: 10;
-  padding-bottom: 0;
+  background: linear-gradient(135deg, #011329 0%, #0a2540 100%);
+  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+  height: 60px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  background: rgba(1, 19, 41, 0.95);
 }
 
+  .site-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
+    z-index: -1;
+  }
+
+  .site-header.scrolled {
+    height: 56px;
+    box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  }
+
 .header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 18px 32px 0 32px;
-  position: relative;
+  height: 100%;
+  padding: 0 20px;
+  max-width: 1440px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .logo-cluster {
   display: flex;
   align-items: center;
-  gap: 18px;
+  gap: 12px;
+  margin-left: -215px; /* Remove negative margin if it exists */
+}
+
+.brand-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
 }
 
 .logo-img-header {
-  width: 54px;
-  height: 54px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-  padding: 4px;
-  margin-top: -6px;
-  margin-bottom: 1vh;
+  background: white;
+  padding: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  transition: transform 0.2s;
 }
 
+  .logo-img-header:hover {
+    transform: scale(1.05);
+  }
+
 .py-detect-title-header {
-  font-size: 2.1rem;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-size: 28px;
   font-weight: 900;
-  letter-spacing: 6px;
+  letter-spacing: 3px;
   color: #38bdf8;
   display: flex;
   align-items: center;
   gap: 2px;
-  margin-bottom: 1.5vh;
 }
 
   .py-detect-title-header .py-letter.p,
@@ -89,393 +273,2114 @@ body {
     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-shape {
+  display: inline-block;
+  width: 16px;
+  height: 4px;
+  background: #e3f6ff;
+  margin: 0 6px;
+  border-radius: 2px;
+  box-shadow: 0 0 6px #38bdf8;
+}
 
-/* Sidebar */
-.sidebar {
-  width: 370px;
-  height: 84vh;
-  color: #fff;
-  box-shadow: 0 8px 32px #2563eb33;
+.header-actions-right {
   display: flex;
-  flex-direction: column;
-  padding-top: 4px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  margin-right: 0;
-  overflow-y: auto;
-  background: linear-gradient(to right, #011022, #01030a);
+  align-items: center;
+  gap: 12px;
 }
 
-  .sidebar ul {
-    list-style: none;
-    padding: 14px;
-    margin: 0;
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: -209px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: none;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+}
+
+  .action-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
   }
 
-  .sidebar > ul > li > button {
-    border-radius: 12px !important;
-    margin-bottom: 18px;
-    padding: 18px 32px;
-    box-shadow: 0 4px 16px #38bdf855;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    letter-spacing: 1px;
-    text-align: left;
-    outline: none;
-    position: relative !important;
-    display: flex !important;
-    align-items: center !important;
-    gap: 8px !important;
-    min-width: 150px !important;
-    justify-content: center !important;
-    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important;
-    border: 1px solid rgba(0,212,255,0.3) !important;
-    backdrop-filter: blur(10px) !important;
-    color: #e0e6ed !important;
-    font-weight: 900 !important;
-    font-size: 1.18rem !important;
-  }
-
-    .sidebar > ul > li > button.active,
-    .sidebar > ul > li > button:focus {
-      background: linear-gradient(90deg, #38bdf8 0%, #bfcfe7 100%);
-      box-shadow: 0 8px 32px #2563eb55;
-      transform: scale(1.06);
-    }
+  .action-btn:hover::before {
+    width: 200px;
+    height: 200px;
+  }
 
-    .sidebar > ul > li > button:hover {
-      background: linear-gradient(90deg, #0ea5e9 0%, #bfcfe7 100%);
-    }
+  .action-btn.print-btn {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  }
 
-  .sidebar ul ul {
-    background: rgba(255, 255, 255, 0.18);
-    border-radius: 14px;
-    margin-top: 2px;
-    box-shadow: 0 2px 8px #38bdf822;
-    padding: 8px 0;
-    animation: slideDown 0.35s cubic-bezier(.77, 0, .175, 1);
-  }
-
-    .sidebar ul ul li {
-      background: linear-gradient(90deg, #f8fafc 0%, #e0e7ef 100%);
-      color: #010610;
-      font-size: 1.05em;
-      font-weight: 700;
-      border-radius: 10px;
-      margin: 6px 18px;
-      padding: 12px 22px;
-      box-shadow: 0 2px 8px #2563eb11;
-      cursor: pointer;
-      transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
-      border: 2px solid transparent;
+    .action-btn.print-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: translateY(-1px);
+      box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+      border-color: rgba(255, 255, 255, 0.3);
     }
 
-      .sidebar ul ul li.active,
-      .sidebar ul ul li:focus {
-        background: linear-gradient(90deg, #38bdf8 0%, #0c0c0c 100%);
-        color: #fff;
-        border: 2px solid #2563eb;
-        box-shadow: 0 4px 16px #38bdf855;
-        transform: scale(1.04);
-      }
+  .action-btn.export-btn {
+    background: linear-gradient(135deg, #f97316, #ea580c);
+    color: #ffffff;
+    border: none;
+    box-shadow: 0 3px 10px 0 rgba(249, 115, 22, 0.3);
+  }
 
-      .sidebar ul ul li:hover {
-        background: linear-gradient(90deg, #e0f2fe 0%, #38bdf8 100%);
-        color: #2563eb;
-        border: 2px solid #38bdf8;
-      }
+    .action-btn.export-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+      animation: pulse 1s ease-in-out;
+    }
 
-/* Main */
-.main-content {
-  flex: 1;
-  padding: 6px 6px;
-  background: linear-gradient(120deg, #f4f6fa 0%, #e0e7ef 100%);
-  min-height: calc(100vh - var(--masthead-min-height) - 48px);
-  border-radius: 0;
-  box-shadow: 0 8px 32px #2563eb22;
-  animation: fadeIn 0.5s cubic-bezier(.77, 0, .175, 1);
-  overflow-y: auto;
+.btn-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
 }
 
-/* Slide panel */
-.slide-panel {
-  background: #fff;
-  border-radius: 0;
-  box-shadow: 0 4px 24px #23272b18;
-  padding: 38px 54px;
-  min-height: 340px;
-  transition: transform 0.3s cubic-bezier(.77, 0, .175, 1), box-shadow 0.2s;
-  transform: translateX(0);
-  animation: fadeIn 0.5s cubic-bezier(.77, 0, .175, 1);
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: rgba(255, 255, 255, 0.95);
+  color: #111827;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
 }
 
-  .slide-panel.open {
-    transform: translateX(0);
-    box-shadow: 0 12px 48px #2563eb22;
+  .back-btn:hover {
+    background: #ffffff;
+    transform: translateX(-2px);
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+    border-color: #1E3A8A;
+    color: #1E3A8A;
   }
 
-/* Tabs */
-.tabs {
-  display: flex;
-  gap: 18px;
-  margin-bottom: 32px;
-}
+  .back-btn i {
+    font-size: 11px;
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
 
-  .tabs button {
-    background: #f8fafc;
-    color: #2563eb;
-    border: none;
-    border-radius: 8px;
-    font-weight: 700;
-    font-size: 1.08em;
-    padding: 12px 32px;
-    cursor: pointer;
-    box-shadow: 0 2px 8px #2563eb11;
-    transition: background 0.25s, color 0.25s, transform 0.18s;
-  }
-
-    .tabs button.active,
-    .tabs button:focus {
-      background: #2563eb;
-      color: #fff;
-      box-shadow: 0 4px 16px #38bdf855;
-      transform: scale(1.04);
-    }
+  .back-btn:hover i {
+    transform: translateX(-2px);
+  }
 
-    .tabs button:hover {
-      background: #0ea5e9;
-      color: #fff;
-    }
+/* ===== Loading Overlay ===== */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #011329 0%, #0a2540 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-/* Table */
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 24px 0;
+.loading-spinner {
+  text-align: center;
+  color: white;
+  position: relative;
 }
 
-th {
-  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
-  color: #fff;
-  padding: 16px;
-  text-align: left;
-  font-weight: 700;
-  font-size: 1.1em;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+.spinner-ring {
+  width: 60px;
+  height: 60px;
+  border: 2px solid rgba(56, 189, 248, 0.3);
+  border-top-color: #38bdf8;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 16px;
+  box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
 }
 
-td {
-  background: #fff;
-  padding: 16px;
-  border-bottom: 2px solid #e0e7ef;
-  color: #50575d;
-  font-size: 1em;
-  vertical-align: middle;
+.loading-spinner i {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 20px;
+  color: #38bdf8;
+  animation: pulse 2s infinite;
 }
 
-tr:hover td {
-  background: #f1f9ff;
+.loading-spinner p {
+  color: #cbd5e1;
+  font-weight: 500;
+  font-size: 14px;
+  margin-top: 16px;
+  animation: pulse 2s ease-in-out infinite;
 }
 
-tr:last-child td {
-  border-bottom: none;
+/* ===== Main Layout ===== */
+.case-details-summary-layout {
+  display: flex;
+  height: calc(108vh - 137px);
+  overflow: hidden;
+  background: #f8fafc;
+  position: relative;
 }
 
-/* Footer */
-footer {
-  background: linear-gradient(to right, #011022, #01030a);
-  color: #fff;
-  text-align: center;
-  padding: 10px 0;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+/* ===== Sidebar Navigation ===== */
+.sidebar {
+  width: 272px;
+  background: #ffffff;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e5e7eb;
+  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  animation: fadeInLeft 250ms cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 100;
-  margin-top: 0;
+  position: relative;
+  height: 88.5vh;
 }
 
-/* Cards */
-.details-card {
-  background: #fff;
-  border-radius: 0;
-  box-shadow: 0 4px 32px #2563eb22;
-  padding: 5px 5px;
-  margin-top: -5px;
-  margin-bottom: 32px;
-  max-width: 1510px;
-  width: 100%;
-  animation: fadeIn 0.6s cubic-bezier(.77, 0, .175, 1);
-}
+  .sidebar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
+    z-index: -1;
+  }
 
-.details-header {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  margin-bottom: 32px;
+.sidebar-nav {
+  flex: 1;
+  padding: 16px 0;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-  .details-header h2 {
-    font-size: 2.3em;
-    font-weight: 900;
-    color: #2563eb;
-    margin: 0;
-    letter-spacing: 1.5px;
-    text-shadow: 1px 0 #fff;
+  .sidebar-nav::-webkit-scrollbar {
+    width: 5px;
   }
 
-.subheader-pill {
-  background: linear-gradient(90deg, #000000 0%, #0066ff 100%);
-  color: #fff;
-  font-weight: 700;
-  font-size: 1.1em;
-  border-radius: 16px;
-  padding: 8px 22px;
-  margin-left: 18px;
-  box-shadow: 0 2px 8px #38bdf855;
-  display: inline-block;
-}
+  .sidebar-nav::-webkit-scrollbar-track {
+    background: #f9fafb;
+    border-radius: 3px;
+  }
 
-.details-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 6px 6px;
+  .sidebar-nav::-webkit-scrollbar-thumb {
+    background: #e5e7eb;
+    border-radius: 3px;
+  }
+
+    .sidebar-nav::-webkit-scrollbar-thumb:hover {
+      background: #d1d5db;
+    }
+
+.nav-section {
+  margin-bottom: 4px;
+  position: relative;
 }
 
-.details-field {
-  background: linear-gradient(90deg, #f8fafc 0%, #e0e7ef 100%);
-  border-radius: 0;
-  box-shadow: 0 2px 8px #2563eb11;
-  padding: 3px 3px;
+.nav-section-header {
   display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-height: 3px;
-  transition: box-shadow 0.18s, background 0.18s;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  color: #374151;
+  font-weight: 600;
+  font-size: 12px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  background: transparent;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  border-bottom: 1px solid transparent;
 }
 
-.field-label {
-  color: #2563eb;
-  font-weight: 700;
-  font-size: 1.09em;
-  margin-bottom: 2px;
-}
+  .nav-section-header:hover {
+    background: linear-gradient(90deg, rgba(30, 58, 138, 0.05), transparent);
+    color: #1E3A8A;
+    border-left-color: #1E3A8A;
+    transform: translateX(2px);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  }
 
-.field-value {
-  color: #23272b;
-  font-size: 1.08em;
-  font-weight: 500;
-  word-break: break-word;
+    .nav-section-header:hover .nav-icon-wrapper {
+      transform: scale(1.08);
+      background: linear-gradient(135deg, #1E3A8A, #2563eb);
+      box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    }
+
+.nav-icon-wrapper {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: #f9fafb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
 }
 
-.details-field .field-value {
-  max-height: 220px;
-  overflow-y: auto;
-  word-break: break-word;
-  white-space: pre-wrap;
+.nav-section-header i:first-child {
+  font-size: 14px;
+  color: #1E3A8A;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.details-field.description-field {
-  min-height: 32px;
+.nav-chevron {
+  margin-left: auto;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 10px;
+  color: #9CA3AF;
 }
 
-  .details-field.description-field .field-value {
-    white-space: pre-wrap;
-    min-height: 32px;
-    max-height: 400px;
-    overflow-y: auto;
-    resize: vertical;
-    transition: min-height 0.2s, max-height 0.2s;
+  .nav-chevron.rotated {
+    transform: rotate(90deg);
+    color: #1E3A8A;
   }
 
-/* Animated back button */
-.animated-back {
-  background: linear-gradient(90deg, #38bdf8 0%, #bfcfe7 100%);
-  color: #23272b; /* text color */
-  font-size: 1em;
-  font-weight: 900;
-  border: none;
-  border-radius: 5px;
-  margin-bottom: 18px;
-  padding: 0px 4px;
-  box-shadow: 0 4px 16px #38bdf855;
-  cursor: pointer;
-  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.18s;
-  letter-spacing: 1px;
-  text-align: center;
-  outline: none;
-  position: relative;
-  animation: backBtnFadeIn 0.6s cubic-bezier(.77,0,.175,1);
+.nav-subgroups {
+  padding: 8px 0;
+  background: #f9fafb;
+  border-left: 3px solid #e5e7eb;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.nav-subgroup-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 0px;
+  gap: 12px;
+  padding: 10px 16px 10px 44px;
+  color: #374151;
+  font-size: 11px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  border-bottom: 1px solid transparent;
 }
 
-  .animated-back:hover {
-    background: linear-gradient(90deg, #0ea5e9 0%, #bfcfe7 100%);
-    transform: scale(1.08);
-    box-shadow: 0 8px 32px #2563eb55;
+  .nav-subgroup-item:hover {
+    background: rgba(30, 58, 138, 0.05);
+    color: #1E3A8A;
+    transform: translateX(2px);
+    border-bottom-color: #e5e7eb;
   }
 
-.back-icon {
-  font-size: 1em;
-  margin-right: 4px;
-  margin-top: -4px;
-  transition: transform 0.2s;
+    .nav-subgroup-item:hover .subgroup-icon-wrapper {
+      transform: scale(1.08);
+      background: #1E3A8A;
+      box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    }
+
+  .nav-subgroup-item.active {
+    background: rgba(30, 58, 138, 0.08);
+    color: #1E3A8A;
+    font-weight: 600;
+    border-left-color: #1E3A8A;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+  }
+
+    .nav-subgroup-item.active .subgroup-icon-wrapper {
+      background: #1E3A8A;
+      box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    }
+
+.subgroup-icon-wrapper {
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid #e5e7eb;
+}
+
+.nav-subgroup-item i {
+  font-size: 12px;
+  color: #1E3A8A;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-subgroup-item.active i {
+  color: white;
+}
+
+.nav-subgroup-item:hover i {
+  color: white;
+}
+
+.subgroup-indicator {
+  margin-left: auto;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #22c55e;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 0 6px #22c55e;
+}
+
+.nav-subgroup-item.active .subgroup-indicator {
+  opacity: 1;
+  animation: pulse 2s infinite;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+  padding: 16px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  animation: fadeInUp 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+}
+
+.case-summary {
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 16px;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+}
+
+  .case-summary h4 {
+    color: #111827;
+    font-size: 11px;
+    margin-bottom: 16px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #e5e7eb;
+  }
+
+    .case-summary h4 i {
+      color: #1E3A8A;
+    }
+
+.summary-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding: 10px;
+  background: #f9fafb;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  animation: fadeInUp 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: both;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+  .summary-item:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+    border-color: #1E3A8A;
+  }
+
+.summary-label {
+  color: #6b7280;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.summary-value {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 16px;
+  border: 2px solid;
+  min-width: 70px;
+  text-align: center;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+}
+
+  .summary-value:hover {
+    transform: scale(1.04);
+  }
+
+  .summary-value.open {
+    background: linear-gradient(135deg, #86efac, #22c55e);
+    color: #166534;
+    border-color: rgba(34, 197, 94, 0.3);
+    box-shadow: 0 3px 10px 0 rgba(34, 197, 94, 0.3);
+  }
+
+  .summary-value.under-investigation {
+    background: linear-gradient(135deg, #fdba74, #f97316);
+    color: #92400e;
+    border-color: rgba(249, 115, 22, 0.3);
+    box-shadow: 0 3px 10px 0 rgba(249, 115, 22, 0.3);
+  }
+
+  .summary-value.closed {
+    background: linear-gradient(135deg, #fca5a5, #ef4444);
+    color: #991b1b;
+    border-color: rgba(239, 68, 68, 0.3);
+    box-shadow: 0 3px 10px 0 rgba(239, 68, 68, 0.3);
+  }
+
+  .summary-value.pending,
+  .summary-value.not-assigned {
+    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+    color: #374151;
+    border-color: #e5e7eb;
+  }
+
+.summary-progress {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 2px solid #e5e7eb;
+}
+
+.progress-label {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.progress-bar {
+  height: 6px;
+  background: #f3f4f6;
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #38bdf8, #1E3A8A);
+  border-radius: 3px;
+  transition: width 1s ease-in-out;
+  position: relative;
+  overflow: hidden;
+}
+
+  .progress-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 2s infinite;
+  }
+
+/* ===== Main Content Area ===== */
+.main-content {
+  flex: 1;
+  padding: 16px;
+  background: #f8fafc;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+  .main-content::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(249, 250, 251, 0.9) 100%);
+    z-index: -1;
+  }
+
+/* ===== Case Header Banner ===== */
+.case-header-banner {
+  background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 16px;
+  flex-shrink: 0;
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  animation: fadeInDown 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+  .case-header-banner::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  }
+
+.case-header-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.case-identity {
+  flex: 1;
+  min-width: 0;
+}
+
+.case-ref-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.case-ref-label {
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  margin-bottom: 2px;
+  display: block;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.case-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.case-action-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+}
+
+  .case-action-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.08);
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+  }
+
+  .case-action-btn.favorited {
+    background: rgba(245, 158, 11, 0.3);
+    border-color: rgba(245, 158, 11, 0.5);
+    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
+  }
+
+.case-ref-value {
+  font-size: 28px;
+  font-weight: 900;
+  margin: 0 0 16px 0;
+  color: white;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(135deg, #ffffff 0%, #e3f6ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.4px;
+}
+
+.case-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.case-tag {
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  backdrop-filter: blur(8px);
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+}
+
+  .case-tag:hover {
+    background: rgba(255, 255, 255, 0.25);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+  }
+
+.case-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.case-status-badge {
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  border: 2px solid;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  backdrop-filter: blur(8px);
+  animation: pulse 2s infinite;
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+}
+
+  .case-status-badge.open {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.4));
+    color: #dcfce7;
+    border-color: rgba(34, 197, 94, 0.5);
+    box-shadow: 0 3px 10px 0 rgba(34, 197, 94, 0.3);
+  }
+
+  .case-status-badge.under-investigation {
+    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(249, 115, 22, 0.4));
+    color: #fef3c7;
+    border-color: rgba(249, 115, 22, 0.5);
+    box-shadow: 0 3px 10px 0 rgba(249, 115, 22, 0.3);
+  }
+
+  .case-status-badge.closed {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.4));
+    color: #fee2e2;
+    border-color: rgba(239, 68, 68, 0.5);
+    box-shadow: 0 3px 10px 0 rgba(239, 68, 68, 0.3);
+  }
+
+  .case-status-badge.pending,
+  .case-status-badge.not-assigned {
+    background: linear-gradient(135deg, rgba(156, 163, 175, 0.25), rgba(156, 163, 175, 0.4));
+    color: #f3f4f6;
+    border-color: rgba(156, 163, 175, 0.5);
+  }
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  animation: pulse 2s infinite;
+  box-shadow: 0 0 8px currentColor;
+}
+
+.case-priority {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: white;
+}
+
+.priority-label {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.priority-value {
+  font-weight: 800;
+  padding: 8px 14px;
+  border-radius: 16px;
+  border: 2px solid;
+  color: white;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+}
+
+  .priority-value:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  .priority-value.high {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.5));
+    border-color: rgba(239, 68, 68, 0.6);
+  }
+
+  .priority-value.medium {
+    background: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(217, 119, 6, 0.5));
+    border-color: rgba(249, 115, 22, 0.6);
+  }
+
+  .priority-value.low {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(5, 150, 105, 0.5));
+    border-color: rgba(34, 197, 94, 0.6);
+  }
+
+/* Quick Info Items */
+.case-quick-info {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  min-width: 280px;
+}
+
+.quick-info-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(15px);
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  animation: fadeInUp 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: both;
+  box-shadow: 0 6px 20px rgba(31, 38, 135, 0.1);
+}
+
+  .quick-info-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05), transparent);
+    opacity: 0;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .quick-info-item:hover::before {
+    opacity: 1;
+  }
+
+  .quick-info-item:nth-child(1) {
+    animation-delay: 0.1s;
+  }
+
+  .quick-info-item:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .quick-info-item:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  .quick-info-item:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+    border-color: rgba(56, 189, 248, 0.3);
+  }
+
+    .quick-info-item:hover .info-icon-wrapper {
+      transform: scale(1.08) rotate(5deg);
+      box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    }
+
+.info-icon-wrapper {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.quick-info-item i {
+  font-size: 20px;
+  color: white;
+}
+
+.info-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.info-label {
+  display: block;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 6px;
+  color: #6b7280;
+  font-weight: 700;
+}
+
+.info-value {
+  display: block;
+  font-size: 16px;
+  font-weight: 800;
+  color: #111827;
+  line-height: 1.3;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.info-hover-effect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, transparent, rgba(56, 189, 248, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.quick-info-item:hover .info-hover-effect {
+  opacity: 1;
+}
+
+/* ===== Details Section ===== */
+.details-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  min-height: 0;
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  animation: scaleIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Section Header */
+.section-header {
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f9fafb, #ffffff);
+  border-bottom: 2px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  position: relative;
+}
+
+  .section-header::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #1E3A8A, #38bdf8);
+    opacity: 0.5;
+  }
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.section-icon-wrapper {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.section-title:hover .section-icon-wrapper {
+  transform: scale(1.04) rotate(5deg);
+  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+}
+
+.section-title i {
+  font-size: 20px;
+  color: white;
+}
+
+.section-title h2 {
+  font-size: 18px;
+  font-weight: 800;
+  color: #111827;
+  margin: 0;
+  letter-spacing: 0.4px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.section-subtitle {
+  font-size: 12px;
+  color: #1E3A8A;
+  font-weight: 700;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+  .section-subtitle::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #38bdf8;
+    display: inline-block;
+    box-shadow: 0 0 8px #38bdf8;
+  }
+
+.section-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.section-action-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: 2px solid #e5e7eb;
+  background: #ffffff;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+}
+
+  .section-action-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(30, 58, 138, 0.1);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+  }
+
+  .section-action-btn:hover::before {
+    width: 150px;
+    height: 150px;
+  }
+
+  .section-action-btn:hover {
+    background: #1E3A8A;
+    border-color: #1E3A8A;
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  .section-action-btn.expand-all:hover {
+    background: #7c3aed;
+    border-color: #7c3aed;
+    box-shadow: 0 3px 15px rgba(124, 58, 237, 0.4);
+  }
+
+/* ===== Footer ===== */
+footer {
+  background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
+  color: #fff;
+  text-align: center;
+  padding: 12px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 1000;
+}
+
+/* Details Content */
+.details-content-scrollable {
+  overflow-y: scroll;
+  padding: 20px;
+  background: #ffffff;
+  height: 63vh;
+  position: relative;
+}
+
+  .details-content-scrollable::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .details-content-scrollable::-webkit-scrollbar-track {
+    background: #f9fafb;
+    border-radius: 4px;
+    border: 1px solid #e5e7eb;
+  }
+
+  .details-content-scrollable::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 4px;
+    border: 2px solid #f9fafb;
+  }
+
+    .details-content-scrollable::-webkit-scrollbar-thumb:hover {
+      background: #9ca3af;
+    }
+
+/* Form Grid */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+  .form-group.description-field {
+    grid-column: 1 / -1;
+  }
+
+  .form-group.important-field {
+    border-left: 4px solid #1E3A8A;
+    padding-left: 12px;
+    background: linear-gradient(90deg, rgba(30, 58, 138, 0.03), transparent);
+    border-radius: 0 10px 10px 0;
+  }
+
+  .form-group.expanded .field-container {
+    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+    border-color: #1E3A8A;
+    transform: translateY(-4px);
+    background: linear-gradient(135deg, #ffffff, #f9fafb);
+  }
+
+  .form-group.expanded .field-expand-icon {
+    transform: rotate(180deg);
+  }
+
+/* Field Container */
+.field-container {
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 10px;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  position: relative;
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+  align-items: center;
+}
+
+  .field-container:hover {
+    border-color: #1E3A8A;
+    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+  }
+
+    .field-container:hover .field-icon-wrapper {
+      transform: scale(1.08);
+      background: #1E3A8A;
+      box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    }
+
+      .field-container:hover .field-icon-wrapper i {
+        color: white;
+      }
+
+.field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: linear-gradient(135deg, #f9fafb, #ffffff);
+  border-bottom: 2px solid #e5e7eb;
+  flex-shrink: 0;
+  gap: 0.2vw;
+}
+
+.field-label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.field-icon-wrapper {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 2px solid #e5e7eb;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+}
+
+.field-label i {
+  font-size: 14px;
+  color: #1E3A8A;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.field-label-text {
+  color: #374151;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.field-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.field-type {
+  font-size: 10px;
+  color: #6b7280;
+  background: #f3f4f6;
+  padding: 4px 10px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  font-weight: 800;
+  white-space: nowrap;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.field-expand-icon {
+  font-size: 12px;
+  color: #9CA3AF;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  background: #ffffff;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.field-value-container {
+  padding: 16px;
+  background: #ffffff;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.field-value {
+  color: #111827;
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+  font-weight: 600;
+  width: 100%;
+  flex: 1;
+}
+
+  .field-value.empty-field {
+    background: linear-gradient(135deg, #f9fafb, #f8fafc);
+    border-left: 4px solid #e5e7eb;
+    padding: 16px;
+    border-radius: 6px;
+    font-style: italic;
+    animation: pulse 3s infinite;
+    border: 1px solid #e5e7eb;
+    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+  }
+
+/* Not Provided State */
+.not-provided {
+  color: #9CA3AF;
+  font-style: italic;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 10px;
+  background: rgba(156, 163, 175, 0.1);
+  border-radius: 6px;
+  border: 1px dashed #e5e7eb;
+}
+
+  .not-provided i {
+    font-size: 16px;
+    color: #9CA3AF;
+    animation: pulse 2s infinite;
+  }
+
+.field-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.field-action-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  border: 2px solid #e5e7eb;
+  background: #ffffff;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+}
+
+  .field-action-btn:hover {
+    background: #1E3A8A;
+    border-color: #1E3A8A;
+    color: white;
+    transform: scale(1.08);
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+  }
+
+.field-footer {
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #f9fafb, #ffffff);
+  border-top: 2px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.field-hint {
+  font-style: italic;
+  background: rgba(30, 58, 138, 0.05);
+  padding: 3px 8px;
+  border-radius: 5px;
+  border: 1px solid rgba(30, 58, 138, 0.1);
+}
+
+.field-updated {
+  font-weight: 600;
+  color: #374151;
+  background: rgba(156, 163, 175, 0.1);
+  padding: 3px 8px;
+  border-radius: 5px;
+  border: 1px solid #e5e7eb;
+}
+
+/* Empty Fields Summary */
+.empty-fields-summary {
+  margin-top: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #fef3c7, #fef9c3);
+  border: 2px solid #fde68a;
+  border-radius: 10px;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+}
+
+.summary-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+  .summary-header i {
+    font-size: 24px;
+    color: #d97706;
+    animation: pulse 2s infinite;
+  }
+
+  .summary-header h3 {
+    font-size: 16px;
+    color: #92400e;
+    font-weight: 800;
+    margin: 0;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+.empty-fields-summary p {
+  color: #92400e;
+  margin-bottom: 20px;
+  line-height: 1.6;
+  font-size: 13px;
+  font-weight: 500;
 }
 
-.animated-back:hover .back-icon {
-  transform: translateX(-4px) scale(1.2);
+.fill-empty-btn {
+  background: linear-gradient(135deg, #f97316, #ea580c);
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 10px;
+  font-weight: 700;
+  font-size: 13px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 10px 0 rgba(249, 115, 22, 0.3);
+  border: 2px solid rgba(249, 115, 22, 0.3);
 }
 
+  .fill-empty-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+  }
 
-/* Animations */
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-    transform: translateY(10px);
+/* Empty State */
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 60px 32px;
+  text-align: center;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 2px dashed #e5e7eb;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+  .empty-state::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(30, 58, 138, 0.02), rgba(56, 189, 248, 0.02));
+    z-index: -1;
   }
 
-  100% {
-    opacity: 1;
-    transform: translateY(0);
+.empty-state-icon {
+  font-size: 60px;
+  color: #1E3A8A;
+  margin-bottom: 32px;
+  position: relative;
+  animation: float 6s ease-in-out infinite;
+}
+
+.pulse-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+  border: 2px solid #38bdf8;
+  border-radius: 50%;
+  animation: pulse-ring 3s infinite;
+}
+
+.empty-state h3 {
+  font-size: 24px;
+  color: #111827;
+  margin-bottom: 16px;
+  font-weight: 900;
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.4px;
+}
+
+.empty-state p {
+  color: #6b7280;
+  max-width: 400px;
+  line-height: 1.6;
+  margin-bottom: 32px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.empty-state-actions {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.primary-btn {
+  padding: 14px 28px;
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-weight: 800;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+  .primary-btn:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+    letter-spacing: 0.5px;
   }
+
+.secondary-btn {
+  padding: 14px 28px;
+  background: white;
+  color: #1E3A8A;
+  border: 2px solid #1E3A8A;
+  border-radius: 10px;
+  font-weight: 800;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
 }
 
-@keyframes slideDown {
-  0% {
-    opacity: 0;
-    transform: translateY(-10px);
+  .secondary-btn:hover {
+    background: #1E3A8A;
+    color: white;
+    transform: translateY(-4px);
+    box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
   }
 
-  100% {
-    opacity: 1;
-    transform: translateY(0);
+.empty-state-tips {
+  margin-top: 32px;
+  padding-top: 16px;
+  border-top: 2px solid #e5e7eb;
+  width: 100%;
+  max-width: 400px;
+}
+
+.tip {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #6b7280;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 10px;
+  background: rgba(30, 58, 138, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(30, 58, 138, 0.1);
+}
+
+  .tip i {
+    color: #f97316;
+    font-size: 18px;
+    animation: pulse 2s infinite;
   }
+
+/* Quick Actions Bar */
+.quick-actions-bar {
+  position: fixed;
+  bottom: 70px; /* Increased from 59px for better visibility above footer */
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 1101;
+  animation: fadeInUp 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  padding: 10px;
+  border-radius: 16px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(30, 58, 138, 0.1);
 }
 
-@keyframes backBtnFadeIn {
-  0% {
+.quick-action {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+  .quick-action:hover::after {
+    opacity: 1;
+  }
+
+  .quick-action::before {
+    content: '';
+    position: absolute;
+    right: 52px;
+    top: 50%;
+    transform: translateY(-50%);
+    border: 6px solid transparent;
+    border-left-color: #1f2937;
     opacity: 0;
-    transform: translateX(-20px);
+    pointer-events: none;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1102;
   }
 
-  100% {
+  .quick-action:hover::before {
     opacity: 1;
+  }
+
+  .quick-action:hover {
+    transform: translateY(-4px) scale(1.08);
+    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Different colors for each action button */
+  .quick-action:nth-child(2):hover {
+    background: linear-gradient(135deg, #059669, #10b981);
+  }
+
+  .quick-action:nth-child(3):hover {
+    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
+  }
+
+  .quick-action:nth-child(4):hover {
+    background: linear-gradient(135deg, #f97316, #fb923c);
+  }
+
+  .quick-action i {
+    font-size: 18px;
+  }
+
+  .quick-action span {
+    font-size: 9px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+  }
+
+  /* Tooltip for quick actions */
+  .quick-action::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    right: 60px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #1f2937;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1102;
+  }
+
+/* Notification Toast */
+.notification-toast {
+  position: fixed;
+  top: 80px;
+  right: 24px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+  max-width: 320px;
+  z-index: 2000;
+  transform: translateX(120%);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation: slideInRight 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 2px solid #e5e7eb;
+  backdrop-filter: blur(8px);
+}
+
+  .notification-toast.show {
     transform: translateX(0);
   }
+
+.toast-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+  .toast-content i {
+    font-size: 24px;
+    margin-top: 2px;
+    color: #1E3A8A;
+  }
+
+.toast-title {
+  font-weight: 800;
+  color: #111827;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.toast-message {
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.toast-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  color: #9CA3AF;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+}
+
+  .toast-close:hover {
+    color: #ef4444;
+    border-color: #ef4444;
+    transform: scale(1.08);
+  }
+
+/* ===== Print Styles ===== */
+@media print {
+  .site-header,
+  .sidebar,
+  .quick-actions-bar,
+  .notification-toast,
+  .action-buttons,
+  .section-actions,
+  .field-actions,
+  .field-expand-icon,
+  .empty-fields-summary,
+  footer {
+    display: none !important;
+  }
+
+  body {
+    background: white !important;
+    color: black !important;
+    font-size: 12px !important;
+  }
+
+  .case-details-summary-layout {
+    height: auto !important;
+    overflow: visible !important;
+    background: white !important;
+    display: block !important;
+  }
+
+  .main-content {
+    padding: 0 !important;
+    background: white !important;
+    overflow: visible !important;
+    width: 100% !important;
+  }
+
+  .case-header-banner {
+    box-shadow: none !important;
+    background: #f0f0f0 !important;
+    border: 1px solid #ccc !important;
+    margin-bottom: 20px !important;
+  }
+
+  .case-ref-value {
+    -webkit-text-fill-color: black !important;
+    color: black !important;
+  }
+
+  .details-section {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+    page-break-inside: avoid;
+    margin-bottom: 20px !important;
+  }
+
+  .form-grid {
+    display: block !important;
+  }
+
+  .form-group {
+    page-break-inside: avoid;
+    margin-bottom: 15px !important;
+  }
+
+  .field-container {
+    border: 1px solid #ccc !important;
+    box-shadow: none !important;
+    margin-bottom: 10px !important;
+    break-inside: avoid;
+  }
+
+  .field-header {
+    background: #f5f5f5 !important;
+    padding: 10px !important;
+  }
+
+  .field-value-container {
+    display: block !important;
+    padding: 15px !important;
+  }
+
+  .field-value {
+    font-size: 12px !important;
+  }
+
+  .field-footer {
+    display: none !important;
+  }
+
+  .details-content-scrollable {
+    height: auto !important;
+    overflow: visible !important;
+    max-height: none !important;
+    padding: 15px !important;
+  }
+
+  /* Ensure all content is visible */
+  .nav-subgroups,
+  .expanded .field-value-container {
+    display: block !important;
+    height: auto !important;
+    opacity: 1 !important;
+  }
+
+  .field-expand-icon {
+    display: none !important;
+  }
+
+  .print-mode .sidebar {
+    display: none !important;
+  }
+}
+
+/* ===== Responsive Design ===== */
+@media (max-width: 1400px) {
+  .form-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  }
+
+  .case-quick-info {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .case-ref-value {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .sidebar {
+    width: 200px;
+  }
+
+  .header-inner,
+  .main-content {
+    padding: 0 16px;
+  }
+
+  .section-header {
+    padding: 16px;
+  }
+
+  .details-content-scrollable {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 992px) {
+  .case-details-summary-layout {
+    flex-direction: column;
+    height: auto;
+    min-height: 100vh;
+    overflow: auto;
+  }
+
+  .sidebar {
+    width: 100%;
+    height: auto;
+    max-height: 320px;
+    border-right: none;
+    border-bottom: 2px solid #e5e7eb;
+    box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  .case-header-content {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .case-quick-info {
+    grid-template-columns: 1fr;
+    width: 100%;
+  }
+
+  .quick-actions-bar {
+    position: static;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 24px;
+    gap: 8px;
+  }
+
+  .quick-action {
+    width: 44px;
+    height: 44px;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .header-inner {
+    padding: 0 16px;
+    flex-direction: column;
+    gap: 12px;
+    height: auto;
+    padding: 12px 16px;
+  }
+
+  .site-header {
+    height: auto;
+  }
+
+    .site-header.scrolled {
+      height: auto;
+    }
+
+  .action-buttons {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .case-ref-value {
+    font-size: 22px;
+  }
+
+  .case-status-badge,
+  .priority-value {
+    padding: 8px 12px;
+    font-size: 10px;
+  }
+
+  .section-header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .section-actions {
+    align-self: flex-end;
+  }
+
+  .empty-state {
+    padding: 40px 16px;
+  }
+
+    .empty-state h3 {
+      font-size: 20px;
+    }
+
+    .empty-state p {
+      font-size: 14px;
+    }
+
+  .empty-state-actions {
+    flex-direction: column;
+    width: 100%;
+    gap: 12px;
+  }
+
+  .primary-btn,
+  .secondary-btn {
+    width: 100%;
+    justify-content: center;
+    padding: 12px 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .py-detect-title-header {
+    font-size: 18px;
+    letter-spacing: 1.5px;
+  }
+
+  .logo-img-header {
+    width: 32px;
+    height: 32px;
+  }
+
+  .action-btn {
+    padding: 5px 10px;
+    font-size: 10px;
+  }
+
+  .back-btn {
+    padding: 5px 12px;
+    font-size: 10px;
+  }
+
+  .case-ref-value {
+    font-size: 20px;
+  }
+
+  .case-tags {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .case-meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .main-content {
+    padding: 12px;
+  }
+
+  .section-header,
+  .details-content-scrollable {
+    padding: 12px;
+  }
+
+  .field-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .field-meta {
+    align-self: flex-end;
+  }
+
+  .case-quick-info {
+    gap: 8px;
+  }
+
+  .quick-info-item {
+    padding: 12px;
+  }
+
+  .notification-toast {
+    right: 12px;
+    left: 12px;
+    max-width: none;
+  }
+}
+
+/* Remark fields should span full width */
+.form-group.remark-field {
+  grid-column: 1 / -1;
 }

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

@@ -1,87 +1,341 @@
-<!-- Modern UI header with logo and PyDetect title -->
-<div class="site-header">
- <div class="header-inner">
- <div class="logo-cluster">
- <span style="cursor:default;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-actions-right">
- <button class="back-btn animated-back" (click)="navigateBack()">
- <span class="back-icon">←</span> Back
- </button>
- </div>
- </div>
+<!-- case-details-summary-page.component.html -->
+<!-- Professional Header -->
+<div class="site-header" [class.scrolled]="isScrolled">
+  <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 class="header-actions-right">
+      <div class="action-buttons">
+        <button class="action-btn print-btn" (click)="printSummary()" title="Print Summary">
+          <i class="fas fa-print"></i>
+          <span class="btn-label">Print</span>
+        </button>
+        <button class="action-btn export-btn" (click)="exportAsPDF()" title="Export as PDF">
+          <i class="fas fa-file-pdf"></i>
+          <span class="btn-label">PDF</span>
+        </button>
+        <button class="back-btn" (click)="navigateBack()">
+          <i class="fas fa-arrow-left"></i>
+          <span>Back</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Loading State -->
+<div *ngIf="loading" class="loading-overlay" @fadeInOut>
+  <div class="loading-spinner">
+    <div class="spinner-ring"></div>
+    <i class="fas fa-search"></i>
+    <p>Loading case details...</p>
+  </div>
 </div>
 
+<!-- Main Content -->
+<div class="case-details-summary-layout" [class.print-mode]="printMode">
+
+  <!-- Left Navigation Sidebar -->
+  <aside class="sidebar" *ngIf="!printMode" @slideInLeft>
+    <nav class="sidebar-nav">
+      <div class="nav-section" *ngFor="let section of sidebarSections; let i = index"
+           [class.expanded]="expandedMainHeader === section.key">
+        <div class="nav-section-header" (click)="setMainHeader(section.key)">
+          <div class="nav-icon-wrapper">
+            <i [class]="section.icon"></i>
+          </div>
+          <span>{{section.title}}</span>
+          <i class="fas fa-chevron-right nav-chevron"
+             [class.rotated]="expandedMainHeader === section.key"></i>
+        </div>
+        <div class="nav-subgroups" *ngIf="expandedMainHeader === section.key" @expandAnimation>
+          <div *ngFor="let subgroup of getSubgroupsForSection(section.key); let j = index"
+               class="nav-subgroup-item"
+               [class.active]="activeSubheader === section.key + '-' + subgroup.name"
+               (click)="setSubheader(section.key, subgroup.name)"
+               @staggerItem>
+            <div class="subgroup-icon-wrapper">
+              <i [class]="subgroup.icon"></i>
+            </div>
+            <span>{{ subgroup.name }}</span>
+            <div class="subgroup-indicator"></div>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <div class="sidebar-footer" @fadeInUp>
+      <div class="case-summary" *ngIf="selectedCase">
+        <h4><i class="fas fa-chart-pie"></i> Case Summary</h4>
+        <div class="summary-item" @fadeInUp *ngIf="selectedCase.status">
+          <span class="summary-label">Status:</span>
+          <span class="summary-value" [class]="getCaseStatusClass()">
+            {{ selectedCase.status || 'Not Assigned' }}
+          </span>
+        </div>
+        <div class="summary-item" @fadeInUp *ngIf="selectedCase.casePriority">
+          <span class="summary-label">Priority:</span>
+          <span class="summary-value priority-{{ selectedCase.casePriority.toLowerCase() }}">
+            {{ selectedCase.casePriority || 'Not Set' }}
+          </span>
+        </div>
+        <div class="summary-item" @fadeInUp>
+          <span class="summary-label">Last Updated:</span>
+          <span class="summary-value">
+            {{ getFilledDetail('crime', 'Identification & Timing', 'Date & Time (Entry)') || 'N/A' }}
+          </span>
+        </div>
+        <div class="summary-progress" *ngIf="getProgressPercentage() > 0">
+          <div class="progress-label">
+            <span>Case Progress</span>
+            <span>{{ getProgressPercentage() }}%</span>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Main Content Area -->
+  <main class="main-content">
+    <!-- Case Header Banner -->
+    <div class="case-header-banner" @slideInDown>
+      <div class="case-header-content">
+        <div class="case-identity">
+          <div class="case-ref">
+            <div class="case-ref-top">
+              <h1 class="case-ref-label">CASE REFERENCE</h1>
+              <h1 class="case-ref-value">{{ selectedCase?.caseId || 'Not Assigned' }}</h1>
+
+              <div class="case-actions">
+                <button class="case-action-btn" (click)="toggleFavorite()" [class.favorited]="isFavorited">
+                  <i [ngClass]="isFavorited ? 'fas fa-star' : 'far fa-star'"></i>
+                </button>
+                <button class="case-action-btn" (click)="addReminder()">
+                  <i class="fas fa-bell"></i>
+                </button>
+              </div>
+            </div>
+            <div class="case-tags">
+              <span class="case-tag" *ngIf="selectedCase?.crime">
+                <i class="fas fa-gavel"></i>
+                {{ selectedCase?.crime }}
+              </span>
+              <span class="case-tag">
+                <i class="fas fa-calendar"></i>
+                {{ getFilledDetail('crime', 'Identification & Timing', 'Date & Time (Entry)') | date:'mediumDate' }}
+              </span>
+
+              <div class="case-meta">
+                <div class="case-status-badge" [class]="getCaseStatusClass()" @pulseAnimation>
+                  <span class="status-dot"></span>
+                  {{ (selectedCase?.status || 'Not Assigned') | uppercase }}
+                </div>
+                <div class="case-priority" *ngIf="selectedCase?.casePriority">
+                  <span class="priority-label">Priority:</span>
+                  <span class="priority-value priority-{{ selectedCase?.casePriority?.toLowerCase() }}">
+                    <i class="fas fa-flag"></i>
+                    {{ selectedCase?.casePriority | uppercase }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="case-quick-info">
+          <div class="quick-info-item" *ngFor="let info of quickInfoItems" @slideInUp>
+            <div class="info-icon-wrapper">
+              <i [class]="info.icon"></i>
+            </div>
+            <div class="info-content">
+              <span class="info-label">{{ info.label }}</span>
+              <span class="info-value">{{ info.value || 'Not Specified' }}</span>
+            </div>
+            <div class="info-hover-effect"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Details Container -->
+    <div class="details-container">
+      <!-- Details Section -->
+      <div *ngIf="activeMainHeader && activeSubheader" class="details-section" @fadeIn>
+        <!-- Section Header -->
+        <div class="section-header">
+          <div class="section-title">
+            <div class="section-icon-wrapper">
+              <i [class]="sections[activeMainHeader]?.icon"></i>
+            </div>
+            <div>
+              <h2>{{ sections[activeMainHeader]?.title | uppercase }}</h2>
+              <p class="section-subtitle">{{ activeSubheaderName | uppercase }}</p>
+            </div>
+          </div>
+          <div class="section-actions">
+            <button class="section-action-btn" (click)="copySection()" title="Copy Section">
+              <i class="fas fa-copy"></i>
+            </button>
+            <button class="section-action-btn" (click)="printSummary()" title="Print">
+              <i class="fas fa-print"></i>
+            </button>
+            <button class="section-action-btn" (click)="exportAsPDF()" title="Export PDF">
+              <i class="fas fa-file-pdf"></i>
+            </button>
+            <button class="section-action-btn expand-all" (click)="toggleExpandAll()" title="Expand All">
+              <i class="fas" [class.fa-expand]="!allExpanded" [class.fa-compress]="allExpanded"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- Details Content -->
+        <div class="details-content-scrollable">
+          <div *ngIf="sections[activeMainHeader]?.subgroups[activeSubheaderName] as fields">
+            <div class="form-grid">
+              <div class="form-group"
+                   *ngFor="let field of fields; let i = index"
+                   [class.remark-field]="field === 'Remark'"
+                   [ngClass]="{
+                     'description-field': isDescriptionField(field),
+                     'important-field': isImportantField(field),
+                     'expanded': allExpanded || expandedFields.has(field)
+                   }"
+                   @staggerItem>
+                <div class="field-container" (click)="toggleFieldExpand(field)">
+                  <div class="field-header">
+                    <div class="field-label">
+                      <div class="field-icon-wrapper">
+                        <i [class]="getFieldIcon(field)"></i>
+                      </div>
+                      <span class="field-label-text">{{ field | uppercase }}</span>
+                    </div>
+                    <div class="field-meta">
+                      <span class="field-type">
+                        {{ getFieldType(field) | uppercase }}
+                      </span>
+                      <i class="fas fa-chevron-down field-expand-icon"
+                         [class.rotated]="allExpanded || expandedFields.has(field)"></i>
+                    </div>
+                  </div>
+                  <div class="field-value-container">
+                    <div class="field-value"
+                         [class.empty-field]="getFilledDetail(activeMainHeader, activeSubheaderName, field) === '— Not Provided'">
+                      <ng-container *ngIf="getFilledDetail(activeMainHeader, activeSubheaderName, field) !== '— Not Provided'; else notProvided">
+                        <span class="value-text">{{ getFilledDetail(activeMainHeader, activeSubheaderName, field) }}</span>
+                      </ng-container>
+                      <ng-template #notProvided>
+                        <span class="not-provided">
+                          <i class="fas fa-minus-circle"></i>
+                          NOT PROVIDED
+                        </span>
+                      </ng-template>
+                    </div>
+                  </div>
+                  <div class="field-footer">
+                    <span class="field-updated">Last updated: {{ getFieldUpdateTime(field) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty Fields Summary -->
+          <div class="empty-fields-summary" *ngIf="hasEmptyFields()" @fadeIn>
+            <div class="summary-header">
+              <i class="fas fa-exclamation-triangle"></i>
+              <h3>Missing Information</h3>
+            </div>
+            <p>{{ getEmptyFieldsCount() }} fields in this section require attention.</p>
+            <button class="action-btn fill-empty-btn" (click)="highlightEmptyFields()">
+              <i class="fas fa-highlighter"></i>
+              Highlight Missing Fields
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div *ngIf="!activeMainHeader || !activeSubheader" class="empty-state" @fadeIn>
+        <div class="empty-state-icon">
+          <i class="fas fa-file-search"></i>
+          <div class="pulse-ring"></div>
+        </div>
+        <h3>SELECT A SECTION TO VIEW DETAILS</h3>
+        <p>Choose a category from the sidebar to display the corresponding case information.</p>
+        <div class="empty-state-actions">
+          <button class="primary-btn" (click)="setMainHeader('crime')">
+            <i class="fas fa-gavel"></i>
+            START WITH CRIME DETAILS
+          </button>
+          <button class="secondary-btn" (click)="expandAllSections()">
+            <i class="fas fa-expand"></i>
+            EXPAND ALL SECTIONS
+          </button>
+        </div>
+        <div class="empty-state-tips">
+          <div class="tip">
+            <i class="fas fa-lightbulb"></i>
+            <span>Tip: Use keyboard shortcuts for faster navigation</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Quick Actions Bar -->
+      <div class="quick-actions-bar" *ngIf="activeMainHeader && activeSubheader" @slideInUp>
+        <div class="quick-action" (click)="scrollToTop()" data-tooltip="Scroll to Top">
+          <i class="fas fa-arrow-up"></i>
+          <span>Top</span>
+        </div>
+        <div class="quick-action" (click)="exportSection()" data-tooltip="Export Section">
+          <i class="fas fa-download"></i>
+          <span>Export</span>
+        </div>
+        <div class="quick-action" (click)="shareSection()" data-tooltip="Share Section">
+          <i class="fas fa-share-alt"></i>
+          <span>Share</span>
+        </div>
+        <div class="quick-action" (click)="addNote()" data-tooltip="Add Note">
+          <i class="fas fa-plus"></i>
+          <span>Add Note</span>
+        </div>
+      </div>
+    </div>
+  </main>
 
-<div class="case-details-summary-layout">
- <aside class="sidebar">
- <ul>
- <li>
- <button (click)="setMainHeader('crime')" [class.active]="expandedMainHeader==='crime'">Crime Details</button>
- <ul *ngIf="expandedMainHeader==='crime'">
- <ng-container *ngFor="let subgroupName of crimeSubgroupOrder">
- <li *ngIf="sections['crime']?.subgroups[subgroupName]" (click)="setSubheader('crime', subgroupName)" [class.active]="activeSubheader==='crime-' + subgroupName">
- {{ subgroupName }}
- </li>
- </ng-container>
- </ul>
- </li>
- <li>
- <button (click)="setMainHeader('suspect')" [class.active]="expandedMainHeader==='suspect'">Suspect Details</button>
- <ul *ngIf="expandedMainHeader==='suspect'">
- <ng-container *ngFor="let subgroupName of suspectSubgroupOrder">
- <li *ngIf="sections['suspect']?.subgroups[subgroupName]" (click)="setSubheader('suspect', subgroupName)" [class.active]="activeSubheader==='suspect-' + subgroupName">
- {{ subgroupName }}
- </li>
- </ng-container>
- </ul>
- </li>
- <li>
- <button (click)="setMainHeader('notes')" [class.active]="expandedMainHeader==='notes'">Documents/Evidence</button>
- <ul *ngIf="expandedMainHeader==='notes'">
- <ng-container *ngFor="let subgroupName of notesSubgroupOrder">
- <li *ngIf="sections['notes']?.subgroups[subgroupName]" (click)="setSubheader('notes', subgroupName)" [class.active]="activeSubheader==='notes-' + subgroupName">
- {{ subgroupName }}
- </li>
- </ng-container>
- </ul>
- </li>
- </ul>
- </aside>
- <main class="main-content">
- <div *ngIf="activeMainHeader && activeSubheader">
- <div class="details-card">
- <div class="details-header">
- <h2>{{ sections[activeMainHeader]?.title }} <span class="subheader-pill">{{ activeSubheaderName }}</span></h2>
- </div>
- <div *ngIf="sections[activeMainHeader]?.subgroups[activeSubheaderName] as fields">
- <div class="details-grid">
- <div class="details-field" [ngClass]="{'description-field': field.toLowerCase().includes('description') || field.toLowerCase().includes('notes') || field.toLowerCase().includes('findings') }" *ngFor="let field of fields">
- <div class="field-label">{{ field }}</div>
- <div class="field-value">{{ getFilledDetail(activeMainHeader, activeSubheaderName, field) }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </main>
+  <!-- Notification Toast -->
+  <div class="notification-toast" [class.show]="showNotification" @slideInRight>
+    <div class="toast-content">
+      <i class="fas" [class]="notificationIcon"></i>
+      <div>
+        <p class="toast-title">{{ notificationTitle }}</p>
+        <p class="toast-message">{{ notificationMessage }}</p>
+      </div>
+    </div>
+    <button class="toast-close" (click)="hideNotification()">
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
 </div>
 
-<!-- Footer from provided design -->
+<!-- Footer from record page -->
 <footer>
- <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
 </footer>
-<!-- End of record-card -->

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

@@ -1,446 +1,1016 @@
-import { InfopageComponent } from '../infopage/infopage.component';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener, ElementRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
+import { Subscription } from 'rxjs';
+import {
+  trigger,
+  transition,
+  style,
+  animate,
+  query,
+  stagger,
+  keyframes
+} from '@angular/animations';
 
 @Component({
- selector: 'app-case-details-summary-page',
- templateUrl: './case-details-summary-page.component.html',
- styleUrls: ['./case-details-summary-page.component.css']
+  selector: 'app-case-details-summary-page',
+  templateUrl: './case-details-summary-page.component.html',
+  styleUrls: ['./case-details-summary-page.component.css'],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('300ms ease-in', style({ opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({ opacity: 0 }))
+      ])
+    ]),
+    trigger('slideInUp', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(20px)' }),
+        animate('400ms cubic-bezier(0.4, 0, 0.2, 1)',
+          style({ opacity: 1, transform: 'translateY(0)' }))
+      ])
+    ]),
+    trigger('slideInDown', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(-20px)' }),
+        animate('400ms cubic-bezier(0.4, 0, 0.2, 1)',
+          style({ opacity: 1, transform: 'translateY(0)' }))
+      ])
+    ]),
+    trigger('slideInLeft', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(-20px)' }),
+        animate('400ms cubic-bezier(0.4, 0, 0.2, 1)',
+          style({ opacity: 1, transform: 'translateX(0)' }))
+      ])
+    ]),
+    trigger('slideInRight', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(20px)' }),
+        animate('400ms cubic-bezier(0.4, 0, 0.2, 1)',
+          style({ opacity: 1, transform: 'translateX(0)' }))
+      ])
+    ]),
+    trigger('fadeIn', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('500ms ease-in', style({ opacity: 1 }))
+      ])
+    ]),
+    trigger('pulseAnimation', [
+      transition('* => *', [
+        animate('2s ease-in-out',
+          keyframes([
+            style({ transform: 'scale(1)', offset: 0 }),
+            style({ transform: 'scale(1.02)', offset: 0.5 }),
+            style({ transform: 'scale(1)', offset: 1 })
+          ])
+        )
+      ])
+    ]),
+    trigger('expandAnimation', [
+      transition(':enter', [
+        style({ height: 0, opacity: 0 }),
+        animate('300ms ease-out',
+          style({ height: '*', opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-in',
+          style({ height: 0, opacity: 0 }))
+      ])
+    ]),
+    trigger('staggerItem', [
+      transition(':enter', [
+        query(':enter', [
+          style({ opacity: 0, transform: 'translateY(10px)' }),
+          stagger('50ms', [
+            animate('300ms ease-out',
+              style({ opacity: 1, transform: 'translateY(0)' }))
+          ])
+        ], { optional: true })
+      ])
+    ])
+  ]
 })
-export class CaseDetailsSummaryPageComponent implements OnInit {
- caseId: string | null = null;
- activeSection: string = 'crime';
- activeSubgroup: string = '';
- // Added ordered list for crime subgroups to ensure sidebar shows in desired order
- crimeSubgroupOrder: string[] = [
- 'Identification & Timing',
- 'Location & People',
- 'Offence & Context',
- 'Evidence & Scene',
- 'Operational Notes',
- 'Status & Linkage',
- 'Remark'
- ];
- // Added ordered list for suspect subgroups
- suspectSubgroupOrder: string[] = [
- 'Identity',
- 'Physical Description',
- 'Background',
- 'Known Associates',
- 'Prior Records',
- 'Remark'
- ];
-
- // Added ordered list for notes/evidence subgroups
- notesSubgroupOrder: string[] = [
- 'Investigation Notes',
- 'Evidence Files',
- 'Links and Recommendation',
- 'Remark'
- ];
- 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', 'Physical Evidence', 'Evidence Storage Reference', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Forensic Tests Required', 'Chain of Custody?', 'Scene Condition', 'Digital Evidence'],
- '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)', 'Tattoo Details', 'Hair Color', 'Scar Details', 'Distinguishing Marks', 'Build', 'Eye Color', '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']
- }
- }
- };
- mainTitles: string[] = ['Crime Details', 'Suspect Details', 'Evidence and Documents'];
- mainKeys: string[] = ['crime', 'suspect', 'notes'];
- subgroups: string[] = [];
- activeTab: string = 'Crime Details';
- tabs: string[] = ['Crime Details', 'Suspect Details', 'Evidence and Documents']; // Added tabs property
- slideOpen: boolean = true; // Added slideOpen property
- activeMainHeader: string = 'crime';
- activeSubheader: string = '';
- activeSubheaderName: string = '';
- expandedMainHeader: string | null = 'crime'; // Track which main header is expanded
- selectedCase: PoliceCase | null = null;
- fromPage: string = 'record'; // default
- returnId: string | null = null;
-
- // date sets for formatting
- private dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
- private dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
-
- constructor(private route: ActivatedRoute, private router: Router, private caseStore: CaseStoreService) {
- // Read route params
- this.route.paramMap.subscribe(params => {
- this.caseId = params.get('id');
- });
-
- // Read query params (preferable for reliable behavior)
- this.route.queryParams.subscribe(params => {
- if (params['from']) {
- this.fromPage = params['from'];
- }
- if (params['returnId']) {
- this.returnId = params['returnId'];
- }
- });
-
- // Also read navigation state (router state or history.state) as a fallback
- const nav = this.router.getCurrentNavigation();
- if (nav && nav.extras && (nav.extras.state as any)) {
- const st = nav.extras.state as any;
- if (st.from) this.fromPage = st.from;
- if (st.returnId) this.returnId = st.returnId;
- if (st.case) this.selectedCase = st.case as PoliceCase;
- if (st.caseId) this.returnId = this.returnId || st.caseId;
- }
-
- // Fallback to history.state for cases where getCurrentNavigation() is unavailable (e.g., after reload)
- const hist = (window && (window as any).history && (window as any).history.state) || {};
- if (hist.from) this.fromPage = hist.from;
- if (hist.returnId) this.returnId = this.returnId || hist.returnId;
- if (hist.caseId) this.returnId = this.returnId || hist.caseId;
- if (hist.case && !this.selectedCase) this.selectedCase = hist.case as PoliceCase;
-
- // Debug log to help trace where navigation came from
- console.log('[CaseDetailsSummary] init sources:', {
- urlParamId: this.caseId,
- queryFrom: (this.route.snapshot.queryParamMap.get('from')),
- queryReturnId: (this.route.snapshot.queryParamMap.get('returnId')),
- navState: nav?.extras?.state,
- historyState: hist,
- resolvedFrom: this.fromPage,
- resolvedReturnId: this.returnId
- });
- }
-
- ngOnInit() {
- this.setSection('crime');
- // Ensure the main header and first subgroup are selected so main content shows by default
- const crimeSubgroups = Object.keys(this.sections['crime']?.subgroups || {});
- const first = crimeSubgroups[0] || '';
- this.activeMainHeader = 'crime';
- this.expandedMainHeader = 'crime';
- this.activeSubheader = 'crime-' + first;
- this.activeSubheaderName = first;
-
- // Load the selected case if not already provided in navigation state
- if (!this.selectedCase) {
- // Prefer caseId from route param or returnId
- const id = this.caseId || this.returnId || null;
- if (id) {
- const found = this.caseStore.getPoliceCases().find(c => c.caseId === id || String(c.caseId).toLowerCase() === id.toLowerCase());
- if (found) this.selectedCase = found;
- }
- }
- }
-
- setSection(section: string) {
- this.activeSection = section;
- this.subgroups = Object.keys(this.sections[section].subgroups);
- this.activeSubgroup = this.subgroups[0];
- this.activeTab = this.sections[section].title;
- }
-
- setSubgroup(subgroup: string) {
- this.activeSubgroup = subgroup;
- }
-
- setTab(tab: string) {
- // Find section key by tab title
- const sectionKey = this.mainKeys[this.mainTitles.indexOf(tab)];
- if (sectionKey) {
- this.activeTab = tab;
- this.setSection(sectionKey);
- }
- }
-
- setMainHeader(header: string) {
- if (this.expandedMainHeader === header) {
- // Collapse if already expanded
- this.expandedMainHeader = null;
- } else {
- // Expand and collapse others
- this.expandedMainHeader = header;
- this.activeMainHeader = header;
- // Set first subgroup as default
- const subgroups = Object.keys(this.sections[header]?.subgroups || {});
- this.activeSubheader = header + '-' + (subgroups[0] || '');
- this.activeSubheaderName = subgroups[0] || '';
- }
- }
-
- setSubheader(mainHeader: string, subgroup: string) {
- this.activeSubheader = mainHeader + '-' + subgroup;
- this.activeSubheaderName = subgroup;
- }
-
- getFilledDetail(mainHeader: string, subgroup: string, field: string): string {
- // If we have a selectedCase, map the field to the case object first
- if (this.selectedCase) {
- const v = this.getFieldValueFromCase(this.selectedCase, field);
- if (v !== null && v !== undefined && v !== '') {
- // format dates if needed
- if (this.dateFields && this.dateFields.has(field)) {
- const d = new Date(v);
- if (!isNaN(d.getTime())) return d.toISOString().slice(0,10);
- }
- if (this.dateTimeFields && this.dateTimeFields.has(field)) {
- const d = new Date(v);
- if (!isNaN(d.getTime())) return d.toLocaleString();
- }
- return String(v);
- }
- }
-
- // Load saved form data from localStorage as fallback (legacy behavior)
- const savedData = localStorage.getItem('pydetect-form-data');
- if (savedData) {
- const data = JSON.parse(savedData);
- if (data.formData && data.formData[field] !== undefined && data.formData[field] !== null) {
- return data.formData[field];
- }
- }
- return '';
- }
-
- // Map field labels to properties on PoliceCase (copied/adapted from recordpage)
- private getFieldValueFromCase(sc: any, field: string): any {
- const fieldMap: { [key: string]: string | string[] } = {
- '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;
- let value: any = undefined;
- if (Array.isArray(path)) {
- let v: any = sc as any;
- for (const p of path) {
- if (v && v[p] !== undefined) v = v[p];
- else { v = undefined; break; }
- }
- value = v;
- } else {
- value = (sc as any) && (sc as any)[path] !== undefined ? (sc as any)[path] : undefined;
- }
-
- // If not found on mapped path, try raw formData saved with the case
- if (value === null || value === undefined || value === '') {
- try {
- const fd = this.getFormDataArray(sc as any);
- const norm = (s: any) => {
- if (s === null || s === undefined) return '';
- let t = String(s).toLowerCase();
- t = t.replace(/&/g, '');
- t = t.replace(/and/g, '');
- t = t.replace(/entry/g, '');
- t = t.replace(/\s+/g, '');
- return t.replace(/[^a-z0-9]/g, '');
- };
-
- if (fd && fd.length) {
- let kv = fd.find(k => k && String(k.key).toLowerCase() === String(field).toLowerCase());
- if (kv) value = kv.value;
- if (value === null || value === undefined || value === '') {
- const fieldNorm = norm(field);
- const pathName = Array.isArray(path) ? path[path.length -1] : String(path);
- const pathNorm = norm(pathName);
- kv = fd.find(k => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm || norm(k.key).includes(fieldNorm) || fieldNorm.includes(norm(k.key))));
- if (kv) value = kv.value;
- }
- }
-
- if ((value === null || value === undefined || value === '') && (sc as any) && (sc as any).formData && typeof (sc as any).formData === 'object') {
- if ((sc as any).formData[field] !== undefined) value = (sc as any).formData[field];
- else {
- const fieldNorm = (s: any) => s === null || s === undefined ? '' : String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
- const target = fieldNorm(field);
- for (const k of Object.keys((sc as any).formData)) {
- if (fieldNorm(k) === target || k.toLowerCase() === field.toLowerCase() || k.toLowerCase().includes(field.toLowerCase())) {
- value = (sc as any).formData[k];
- break;
- }
- }
- }
- }
- } catch (e) {
- // ignore
- }
- }
-
- return value;
- }
-
- // Helpers reused from other components
- private isFormDataArray(fd: any): boolean {
- return Array.isArray(fd) && fd.length >0 && fd.every((item: any) => item && Object.prototype.hasOwnProperty.call(item, 'key'));
- }
-
- private getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
- if (!caseObj || !(caseObj as any).formData) return [];
- const fd = (caseObj as any).formData;
- if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
- if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
- return [{ key: 'value', value: fd }];
- }
-
- // New helper: safely format display value for formData
- formatFormValue(value: any): string {
- if (value === null || value === undefined || value === '') return '—';
- if (typeof value === 'object') {
- try { return JSON.stringify(value, null,2); } catch { return String(value); }
- }
- return String(value);
- }
-
- navigateBack() {
- // Prefer explicit fromPage values set via queryParam or navigation state
- if (this.fromPage === 'case-details') {
- // If returnId is available, pass it back in navigation state for the target to use
- if (this.returnId) {
- this.router.navigate(['/case-details'], { state: { caseId: this.returnId } });
- } else {
- this.router.navigate(['/case-details']);
- }
- } else {
- // Default/record
- this.router.navigate(['/record']);
- }
- }
+export class CaseDetailsSummaryPageComponent implements OnInit, OnDestroy {
+  @ViewChild('mainContent') mainContent!: ElementRef;
+
+  caseId: string | null = null;
+  selectedCase: PoliceCase | null = null;
+
+  // UI State
+  activeMainHeader: string = 'crime';
+  activeSubheader: string = '';
+  activeSubheaderName: string = '';
+  expandedMainHeader: string | null = 'crime';
+  expandedFields = new Set<string>();
+  allExpanded = false;
+  isScrolled = false;
+  isFavorited = true;
+  loading = true;
+  printMode = false;
+  // Notification properties
+  showNotification: boolean = false;
+  notificationTitle: string = '';
+  notificationMessage: string = '';
+  notificationIcon: string = 'fas fa-info-circle';
+
+  // Data
+  sidebarSections: Array<{ key: string, title: string, icon: string }> = [
+    { key: 'crime', title: 'Crime Details', icon: 'fas fa-gavel' },
+    { key: 'suspect', title: 'Suspect Details', icon: 'fas fa-user-secret' },
+    { key: 'notes', title: 'Evidence & Documents', icon: 'fas fa-file-alt' }
+  ];
+
+  quickInfoItems: Array<{ label: string, icon: string, value: string }> = [
+    { label: 'Date Filed', icon: 'fas fa-calendar-alt', value: '' },
+    { label: 'Location', icon: 'fas fa-map-marker-alt', value: '' },
+    { label: 'Investigating Officer', icon: 'fas fa-user-shield', value: '' }
+  ];
+
+  sections: any = {
+    crime: {
+      title: 'Crime Details',
+      icon: 'fas fa-gavel',
+      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', 'Suspected Offender Known?', 'Suspect Link', 'Victim Summary'],
+        'Offence & Context': ['Legal Sections / Charges', 'Offence Category', 'Suspected Motive', 'Confirmed Motive', 'Weapon Involved', 'Property Loss / Damage', 'Offence Description'],
+        'Evidence & Scene': ['Evidence Collected', 'Physical Evidence', 'Evidence Storage Reference', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Forensic Tests Required', 'Chain of Custody?', 'Scene Condition', 'Digital Evidence'],
+        'Operational Notes': ['Investigating Officer', 'Duty Person', 'Supervising Officer', 'Arrest Made', 'Arrest Location', 'Initial Actions Taken', 'riskLevel', 'Confidentiality', 'Patrol Notes'],
+        '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',
+      icon: 'fas fa-user-secret',
+      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)', 'Tattoo Details', 'Hair Color', 'Scar Details', 'Distinguishing Marks', 'Build', 'Eye Color', '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',
+      icon: 'fas fa-file-alt',
+      subgroups: {
+        'Investigation Notes': ['Status', 'Version History / Updates', 'Initial Findings', 'Detailed Notes'],
+        'Evidence Files': ['Evidence Photos', 'Evidence Videos', 'Evidence Documents'],
+        'Links and Recommendation': ['Links to Evidence', 'Final Recommendations'],
+        'Remark': ['Remark']
+      }
+    }
+  };
+
+  crimeSubgroupOrder: Array<{ name: string, icon: string }> = [
+    { name: 'Identification & Timing', icon: 'fas fa-fingerprint' },
+    { name: 'Location & People', icon: 'fas fa-map-marker-alt' },
+    { name: 'Offence & Context', icon: 'fas fa-gavel' },
+    { name: 'Evidence & Scene', icon: 'fas fa-search' },
+    { name: 'Operational Notes', icon: 'fas fa-clipboard-list' },
+    { name: 'Status & Linkage', icon: 'fas fa-link' },
+    { name: 'Remark', icon: 'fas fa-comment' }
+  ];
+
+  suspectSubgroupOrder: Array<{ name: string, icon: string }> = [
+    { name: 'Identity', icon: 'fas fa-id-card' },
+    { name: 'Physical Description', icon: 'fas fa-user' },
+    { name: 'Background', icon: 'fas fa-history' },
+    { name: 'Known Associates', icon: 'fas fa-users' },
+    { name: 'Prior Records', icon: 'fas fa-file-alt' },
+    { name: 'Remark', icon: 'fas fa-comment' }
+  ];
+
+  notesSubgroupOrder: Array<{ name: string, icon: string }> = [
+    { name: 'Investigation Notes', icon: 'fas fa-clipboard-check' },
+    { name: 'Evidence Files', icon: 'fas fa-folder-open' },
+    { name: 'Links and Recommendation', icon: 'fas fa-paperclip' },
+    { name: 'Remark', icon: 'fas fa-comment' }
+  ];
+
+  // Date fields for formatting
+  private dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
+  private dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
+  private routeSubscriptions: Subscription[] = [];
+  private fromPage = 'record';
+  private returnId: string | null = null;
+  private currentDate = new Date();
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private caseStore: CaseStoreService
+  ) { }
+
+  ngOnInit() {
+    this.initializeFromNavigation();
+    this.loadSelectedCase();
+    this.initializeDefaults();
+    this.setupQuickInfo();
+  }
+
+  ngOnDestroy() {
+    this.routeSubscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  @HostListener('window:scroll', ['$event'])
+  onScroll(event: Event) {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    this.isScrolled = scrollTop > 20;
+  }
+
+  private initializeFromNavigation(): void {
+    this.loading = true;
+
+    const paramSub = this.route.paramMap.subscribe(params => {
+      this.caseId = params.get('id');
+    });
+
+    const querySub = this.route.queryParams.subscribe(params => {
+      if (params['from']) {
+        this.fromPage = params['from'];
+      }
+      if (params['returnId']) {
+        this.returnId = params['returnId'];
+      }
+      if (params['print'] === 'true') {
+        this.printMode = true;
+        setTimeout(() => window.print(), 500);
+      }
+    });
+
+    this.routeSubscriptions.push(paramSub, querySub);
+
+    const nav = this.router.getCurrentNavigation();
+    if (nav?.extras?.state) {
+      const state = nav.extras.state as any;
+      if (state.from) this.fromPage = state.from;
+      if (state.returnId) this.returnId = state.returnId;
+      if (state.case) this.selectedCase = state.case as PoliceCase;
+      if (state.caseId) this.returnId = this.returnId || state.caseId;
+      if (state.favorited) this.isFavorited = state.favorited;
+    }
+  }
+
+  private initializeDefaults(): void {
+    this.activeMainHeader = 'crime';
+    this.expandedMainHeader = 'crime';
+
+    const crimeSubgroups = Object.keys(this.sections['crime']?.subgroups || {});
+    const first = crimeSubgroups[0] || '';
+    this.activeSubheader = 'crime-' + first;
+    this.activeSubheaderName = first;
+
+    this.loading = false;
+  }
+
+  private loadSelectedCase(): void {
+    if (!this.selectedCase) {
+      const id = this.caseId || this.returnId;
+      if (id) {
+        const cases = this.caseStore.getPoliceCases();
+        const found = cases.find(c =>
+          c.caseId === id || String(c.caseId).toLowerCase() === id.toLowerCase()
+        );
+        if (found) {
+          this.selectedCase = found;
+        }
+      }
+    }
+  }
+
+  private setupQuickInfo(): void {
+    if (this.selectedCase) {
+      const dateTime = this.getFilledDetail('crime', 'Identification & Timing', 'Date & Time (Entry)');
+      this.quickInfoItems[0].value = dateTime !== '— Not Provided' ? dateTime : 'Not Specified';
+
+      const location = this.getLocation();
+      this.quickInfoItems[1].value = location !== 'Not Specified' ? location : 'Not Specified';
+
+      const officer = this.getFilledDetail('crime', 'Operational Notes', 'Investigating Officer');
+      this.quickInfoItems[2].value = officer !== '— Not Provided' ? officer : 'Not Specified';
+    } else {
+      this.quickInfoItems.forEach(item => item.value = 'Not Specified');
+    }
+  }
+
+  getSubgroupsForSection(sectionKey: string): Array<{ name: string, icon: string }> {
+    switch (sectionKey) {
+      case 'crime': return this.crimeSubgroupOrder;
+      case 'suspect': return this.suspectSubgroupOrder;
+      case 'notes': return this.notesSubgroupOrder;
+      default: return [];
+    }
+  }
+
+  setMainHeader(header: string): void {
+    if (this.expandedMainHeader === header) {
+      this.expandedMainHeader = null;
+    } else {
+      this.expandedMainHeader = header;
+      this.activeMainHeader = header;
+
+      const subgroups = this.getSubgroupsForSection(header);
+      if (subgroups.length > 0) {
+        const firstSubgroup = subgroups[0].name;
+        this.activeSubheader = `${header}-${firstSubgroup}`;
+        this.activeSubheaderName = firstSubgroup;
+      }
+    }
+  }
+
+  setSubheader(mainHeader: string, subgroup: string): void {
+    this.activeSubheader = `${mainHeader}-${subgroup}`;
+    this.activeSubheaderName = subgroup;
+  }
+
+  toggleFieldExpand(field: string): void {
+    if (this.expandedFields.has(field)) {
+      this.expandedFields.delete(field);
+    } else {
+      this.expandedFields.add(field);
+    }
+  }
+
+  toggleExpandAll(): void {
+    this.allExpanded = !this.allExpanded;
+    if (this.allExpanded) {
+      this.showNotificationMessage('All fields are now expanded', 'fas fa-expand');
+    } else {
+      this.showNotificationMessage('All fields are now collapsed', 'fas fa-compress');
+    }
+  }
+
+  expandAllSections(): void {
+    this.expandedMainHeader = 'crime';
+    this.setMainHeader('suspect');
+    this.setMainHeader('notes');
+    this.expandedMainHeader = 'crime';
+    this.allExpanded = true;
+    this.showNotificationMessage('All sections are now expanded', 'fas fa-expand-arrows-alt');
+  }
+
+  getFilledDetail(mainHeader: string, subgroup: string, field: string): string {
+    if (this.selectedCase) {
+      const value = this.getFieldValueFromCase(this.selectedCase, field);
+
+      if (value !== null && value !== undefined && value !== '' && value !== 'Not Provided') {
+        return this.formatValue(value, field);
+      }
+    }
+
+    return '— Not Provided';
+  }
+
+  private formatValue(value: any, field: string): string {
+    if (Array.isArray(value)) {
+      return value.join(', ');
+    }
+
+    if (this.dateFields.has(field)) {
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric'
+        });
+      }
+    }
+
+    if (this.dateTimeFields.has(field)) {
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleString('en-US', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: true
+        });
+      }
+    }
+
+    if (typeof value === 'boolean') {
+      return value ? 'Yes' : 'No';
+    }
+
+    return String(value).trim();
+  }
+
+  getFieldType(field: string): string {
+    if (this.dateFields.has(field) || this.dateTimeFields.has(field)) {
+      return 'Date/Time';
+    }
+    if (field.toLowerCase().includes('description') ||
+      field.toLowerCase().includes('notes') ||
+      field.toLowerCase().includes('remarks')) {
+      return 'Text';
+    }
+    if (field.toLowerCase().includes('count') ||
+      field.toLowerCase().includes('number') ||
+      field.toLowerCase().includes('age') ||
+      field.toLowerCase().includes('height') ||
+      field.toLowerCase().includes('weight')) {
+      return 'Number';
+    }
+    return 'Text';
+  }
+
+  isDescriptionField(field: string): boolean {
+    const descKeywords = ['description', 'notes', 'findings', 'summary', 'remarks'];
+    return descKeywords.some(keyword => field.toLowerCase().includes(keyword));
+  }
+
+  isImportantField(field: string): boolean {
+    const importantKeywords = ['status', 'priority', 'motive', 'weapon', 'emergency', 'critical'];
+    return importantKeywords.some(keyword => field.toLowerCase().includes(keyword));
+  }
+
+  getFieldIcon(field: string): string {
+    if (field.toLowerCase().includes('date') || field.toLowerCase().includes('time')) {
+      return 'fas fa-calendar-alt';
+    } else if (field.toLowerCase().includes('location') || field.toLowerCase().includes('address')) {
+      return 'fas fa-map-marker-alt';
+    } else if (field.toLowerCase().includes('name') || field.toLowerCase().includes('officer')) {
+      return 'fas fa-user';
+    } else if (field.toLowerCase().includes('status')) {
+      return 'fas fa-info-circle';
+    } else if (field.toLowerCase().includes('priority')) {
+      return 'fas fa-flag';
+    } else if (field.toLowerCase().includes('description') || field.toLowerCase().includes('notes')) {
+      return 'fas fa-file-alt';
+    } else {
+      return 'fas fa-tag';
+    }
+  }
+
+  getFieldHint(field: string): string {
+    if (field.toLowerCase().includes('date')) {
+      return 'Date format: MM/DD/YYYY';
+    } else if (field.toLowerCase().includes('time')) {
+      return 'Time format: HH:MM AM/PM';
+    } else if (field.toLowerCase().includes('email')) {
+      return 'Enter valid email address';
+    } else if (field.toLowerCase().includes('phone')) {
+      return 'Enter 10-digit phone number';
+    } else {
+      return 'Enter relevant information';
+    }
+  }
+
+  getFieldUpdateTime(field: string): string {
+    try {
+      const lu = this.selectedCase?.lastUpdated;
+      if (lu) {
+        const date = new Date(lu);
+        if (!isNaN(date.getTime())) {
+          const diffMs = Date.now() - date.getTime();
+          const diffMin = Math.floor(diffMs / 60000);
+          if (diffMin <= 0) return 'Just now';
+          if (diffMin < 60) return `${diffMin} minute${diffMin === 1 ? '' : 's'} ago`;
+          const diffHr = Math.floor(diffMin / 60);
+          if (diffHr < 24) return `${diffHr} hour${diffHr === 1 ? '' : 's'} ago`;
+          return date.toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+        }
+      }
+    } catch (e) {
+      // ignore and fallback to mock
+    }
+
+    // Fallback: random-ish mock update time
+    const hoursAgo = Math.floor(Math.random() * 24);
+    if (hoursAgo === 0) return 'Just now';
+    if (hoursAgo === 1) return '1 hour ago';
+    return `${hoursAgo} hours ago`;
+  }
+
+  private getFieldValueFromCase(caseObj: any, field: string): any {
+    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']
+    };
+
+    const path = fieldMap[field] || field;
+    let value: any = undefined;
+
+    if (Array.isArray(path)) {
+      let tempValue: any = caseObj;
+      for (const p of path) {
+        if (tempValue && tempValue[p] !== undefined) {
+          tempValue = tempValue[p];
+        } else {
+          tempValue = undefined;
+          break;
+        }
+      }
+      value = tempValue;
+    } else {
+      value = caseObj && caseObj[path] !== undefined ? caseObj[path] : undefined;
+    }
+
+    if (value === null || value === undefined || value === '') {
+      value = this.findValueInFormData(caseObj, field, path);
+    }
+
+    return value;
+  }
+
+  getLocation(): string {
+    if (!this.selectedCase) return 'Not Specified';
+
+    const district = this.getFieldValueFromCase(this.selectedCase, 'District');
+    const state = this.getFieldValueFromCase(this.selectedCase, 'State');
+    const country = this.getFieldValueFromCase(this.selectedCase, 'Country');
+
+    const parts = [];
+    if (district && district !== '— Not Provided') parts.push(district);
+    if (state && state !== '— Not Provided') parts.push(state);
+    if (country && country !== '— Not Provided') parts.push(country);
+
+    return parts.length > 0 ? parts.join(', ') : 'Not Specified';
+  }
+
+  private findValueInFormData(caseObj: any, field: string, path: string | string[]): any {
+    try {
+      if (caseObj?.formData) {
+        if (caseObj.formData[field] !== undefined) {
+          return caseObj.formData[field];
+        }
+      }
+    } catch (e) {
+      console.warn('Error accessing formData:', e);
+    }
+
+    return undefined;
+  }
+
+  getCaseStatusClass(): string {
+    const status = this.selectedCase?.status?.toLowerCase() || '';
+    if (status.includes('open')) return 'open';
+    if (status.includes('investigation')) return 'under-investigation';
+    if (status.includes('closed')) return 'closed';
+    if (status.includes('pending')) return 'pending';
+    return 'not-assigned';
+  }
+
+  getProgressPercentage(): number {
+    if (!this.selectedCase) return 0;
+
+    const fields = [
+      'Case ID', 'Crime Type', 'Date & Time (Entry)', 'Location',
+      'Investigating Officer', 'Case Status', 'Case Priority'
+    ];
+
+    let filled = 0;
+    fields.forEach(field => {
+      const value = this.getFieldValueFromCase(this.selectedCase, field);
+      if (value && value !== 'Not Provided') filled++;
+    });
+
+    return Math.round((filled / fields.length) * 100);
+  }
+
+  hasEmptyFields(): boolean {
+    if (!this.activeMainHeader || !this.activeSubheaderName) return false;
+    return this.getEmptyFieldsCount() > 0;
+  }
+
+  getEmptyFieldsCount(): number {
+    if (!this.activeMainHeader || !this.activeSubheaderName || !this.selectedCase) return 0;
+
+    const fields = this.sections[this.activeMainHeader]?.subgroups[this.activeSubheaderName] || [];
+    let emptyCount = 0;
+
+    fields.forEach((field: string) => {
+      const value = this.getFilledDetail(this.activeMainHeader, this.activeSubheaderName, field);
+      if (value === '— Not Provided') emptyCount++;
+    });
+
+    return emptyCount;
+  }
+
+  // UI Actions
+  toggleFavorite() {
+    this.isFavorited = !this.isFavorited;
+    const message = this.isFavorited ? 'Added to Favorites' : 'Removed from Favorites';
+    const icon = this.isFavorited ? 'fas fa-star' : 'far fa-star';
+    this.showNotificationMessage(message, icon);
+  }
+
+  addReminder(): void {
+    this.showNotificationMessage('Reminder added for this case', 'fas fa-bell');
+  }
+
+  copySection(): void {
+    if (!this.activeMainHeader || !this.activeSubheaderName) {
+      this.showNotificationMessage('Please select a section to copy', 'fas fa-exclamation-circle');
+      return;
+    }
+
+    try {
+      const sectionData = this.getSectionDataForExport();
+      const textToCopy = this.generateCopyText(sectionData);
+
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        this.showNotificationMessage('Section copied to clipboard', 'fas fa-copy');
+      }).catch(err => {
+        console.error('Copy failed:', err);
+        this.fallbackCopyMethod(textToCopy);
+      });
+    } catch (error) {
+      console.error('Copy failed:', error);
+      this.showNotificationMessage('Copy failed. Please try again.', 'fas fa-times-circle');
+    }
+  }
+
+  copyFieldValue(field: string, event: Event): void {
+    event.stopPropagation();
+    const value = this.getFilledDetail(this.activeMainHeader, this.activeSubheaderName, field);
+
+    // Remove the "— " prefix if present
+    const cleanValue = value.startsWith('— ') ? value.substring(2) : value;
+
+    navigator.clipboard.writeText(cleanValue).then(() => {
+      this.showNotificationMessage('Field value copied to clipboard', 'fas fa-copy');
+    }).catch(err => {
+      console.error('Copy failed:', err);
+      const textArea = document.createElement('textarea');
+      textArea.value = cleanValue;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+      this.showNotificationMessage('Field value copied to clipboard', 'fas fa-copy');
+    });
+  }
+
+  editField(field: string, event: Event): void {
+    event.stopPropagation();
+    this.showNotificationMessage(`Editing field: ${field}`, 'fas fa-edit');
+  }
+
+  highlightEmptyFields(): void {
+    this.showNotificationMessage('Empty fields are now highlighted', 'fas fa-highlighter');
+  }
+
+  scrollToTop(): void {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    this.showNotificationMessage('Scrolled to top', 'fas fa-arrow-up');
+  }
+
+  exportSection(): void {
+    if (!this.activeMainHeader || !this.activeSubheaderName) {
+      this.showNotificationMessage('Please select a section to export', 'fas fa-exclamation-circle');
+      return;
+    }
+    try {
+      const sectionData = this.getSectionDataForExport();
+
+      // Create a JSON string
+      const dataStr = JSON.stringify(sectionData, null, 2);
+      const dataBlob = new Blob([dataStr], { type: 'application/json' });
+
+      // Create download link
+      const downloadUrl = URL.createObjectURL(dataBlob);
+      const link = document.createElement('a');
+      link.href = downloadUrl;
+      link.download = `Case_${this.selectedCase?.caseId || 'Unknown'}_${this.activeMainHeader}_${this.activeSubheaderName}.json`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(downloadUrl);
+
+      this.showNotificationMessage('Section exported successfully', 'fas fa-download');
+    } catch (error) {
+      console.error('Export failed:', error);
+      this.showNotificationMessage('Export failed. Please try again.', 'fas fa-times-circle');
+    }
+  }
+
+  shareSection(): void {
+    if (!this.activeMainHeader || !this.activeSubheaderName) {
+      this.showNotificationMessage('Please select a section to share', 'fas fa-exclamation-circle');
+      return;
+    }
+
+    try {
+      const sectionData = this.getSectionDataForExport();
+      const shareText = this.generateShareText(sectionData);
+
+      if (navigator.share) {
+        navigator.share({
+          title: `Case ${this.selectedCase?.caseId || 'Unknown'} - ${this.activeMainHeader}`,
+          text: shareText,
+          url: window.location.href
+        }).then(() => {
+          this.showNotificationMessage('Shared successfully', 'fas fa-share-alt');
+        }).catch(err => {
+          console.error('Share failed:', err);
+          this.fallbackShareMethod(shareText);
+        });
+      } else {
+        this.fallbackShareMethod(shareText);
+      }
+    } catch (error) {
+      console.error('Share failed:', error);
+      this.showNotificationMessage('Share failed. Please try again.', 'fas fa-times-circle');
+    }
+  }
+
+  // Helper method to get section data for export
+  private getSectionDataForExport(): any {
+    const fields = this.sections[this.activeMainHeader!]?.subgroups[this.activeSubheaderName!];
+    const sectionData: any = {
+      caseId: this.selectedCase?.caseId,
+      section: this.activeMainHeader,
+      subgroup: this.activeSubheaderName,
+      fields: {},
+      exportDate: new Date().toISOString()
+    };
+
+    if (fields) {
+      fields.forEach((field: string) => {
+        sectionData.fields[field] = this.getFilledDetail(
+          this.activeMainHeader!,
+          this.activeSubheaderName!,
+          field
+        );
+      });
+    }
+
+    return sectionData;
+  }
+
+  // Helper method to generate copy text
+  private generateCopyText(sectionData: any): string {
+    const caseId = this.selectedCase?.caseId || 'Unknown Case';
+    const section = this.activeMainHeader?.toUpperCase() || '';
+    const subgroup = this.activeSubheaderName || '';
+
+    let text = `CASE: ${caseId}\n`;
+    text += `SECTION: ${section} - ${subgroup}\n`;
+    text += '══════════════════════════════════════════════════\n\n';
+
+    // Add field values
+    Object.keys(sectionData.fields).forEach(field => {
+      const value = sectionData.fields[field];
+      text += `${field}: ${value}\n`;
+    });
+
+    text += '\n══════════════════════════════════════════════════\n';
+    text += `Copied on: ${new Date().toLocaleString()}\n`;
+    text += `Source: PyDetect Case Management System`;
+
+    return text;
+  }
+
+  // Helper method to generate share text
+  private generateShareText(sectionData: any): string {
+    const caseId = this.selectedCase?.caseId || 'Unknown Case';
+    const section = this.activeMainHeader?.toUpperCase() || '';
+    const subgroup = this.activeSubheaderName || '';
+
+    let text = `Case ${caseId} - ${section}: ${subgroup}\n\n`;
+
+    // Add field values
+    Object.keys(sectionData.fields).forEach(field => {
+      const value = sectionData.fields[field];
+      if (value !== '— Not Provided') {
+        text += `${field}: ${value}\n`;
+      }
+    });
+
+    text += `\nExported: ${new Date().toLocaleString()}`;
+    return text;
+  }
+
+  // Fallback copy method
+  private fallbackCopyMethod(text: string): void {
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      const successful = document.execCommand('copy');
+      if (successful) {
+        this.showNotificationMessage('Section copied to clipboard', 'fas fa-copy');
+      } else {
+        throw new Error('Copy command failed');
+      }
+    } catch (err) {
+      console.error('Fallback copy failed:', err);
+      this.showNotificationMessage('Copy failed. Please try manually.', 'fas fa-times-circle');
+      // Last resort: show text in alert
+      alert('Please copy the following text:\n\n' + text);
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  }
+
+  // Fallback share method (copy to clipboard)
+  private fallbackShareMethod(text: string): void {
+    navigator.clipboard.writeText(text).then(() => {
+      this.showNotificationMessage('Copied to clipboard!', 'fas fa-copy');
+    }).catch(err => {
+      console.error('Clipboard copy failed:', err);
+      // Last resort - show text in alert
+      alert('Share text:\n\n' + text);
+      this.showNotificationMessage('Text displayed for sharing', 'fas fa-info-circle');
+    });
+  }
+
+  addNote(): void {
+    const note = prompt('Add a note for this section:');
+    if (note && note.trim()) {
+      this.showNotificationMessage('Note added successfully', 'fas fa-check-circle');
+    }
+  }
+
+  exportAsPDF(): void {
+    try {
+      this.showNotificationMessage('Preparing PDF export...', 'fas fa-file-pdf');
+
+      // Create a printable version of the page
+      this.printMode = true;
+
+      setTimeout(() => {
+        window.print();
+
+        setTimeout(() => {
+          this.printMode = false;
+          this.showNotificationMessage('PDF ready for printing/saving', 'fas fa-file-pdf');
+        }, 500);
+      }, 1000);
+
+    } catch (error) {
+      console.error('PDF export failed:', error);
+      this.showNotificationMessage('PDF export failed. Please try printing instead.', 'fas fa-times-circle');
+    }
+  }
+
+  printSummary(): void {
+    this.printMode = true;
+    setTimeout(() => {
+      window.print();
+      this.printMode = false;
+      this.showNotificationMessage('Print dialog opened', 'fas fa-print');
+    }, 100);
+  }
+
+  private showNotificationMessage(message: string, icon: string = 'fas fa-info-circle'): void {
+    this.notificationTitle = 'Quick Action';
+    this.notificationMessage = message;
+    this.notificationIcon = icon;
+    this.showNotification = true;
+
+    // Auto-hide notification after 3 seconds
+    setTimeout(() => {
+      this.showNotification = false;
+    }, 3000);
+  }
+
+  hideNotification(): void {
+    this.showNotification = false;
+  }
+
+  navigateBack(): void {
+    switch (this.fromPage) {
+      case 'case-details':
+        const state = this.returnId ? { caseId: this.returnId } : undefined;
+        this.router.navigate(['/case-details'], { state });
+        break;
+      case 'record':
+      default:
+        this.router.navigate(['/record']);
+        break;
+    }
+  }
+
+  navigateHome(): void {
+    this.router.navigate(['/']);
+  }
 }

src/app/homepage/homepage.component.css

@@ -1,7 +1,8 @@
 body, html {
   margin: 0;
   padding: 0;
-  font-family: 'Arial', 'Segoe UI', 'Roboto', sans-serif;
+  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+  font-size: 16px;
   /* Background is managed globally via body.homepage-bg in styles.css */
 }
 
@@ -13,7 +14,7 @@ body, html {
   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: url(/assets/py-detect-illustration.png) no-repeat center center fixed;*/
   background-size: cover;
 }
 
@@ -303,8 +304,8 @@ body {
 
 label {
   color: #bae6fd;
-  font-size: 26px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 500;
   margin-bottom: 4px;
   letter-spacing: 1px;
   text-shadow: 0 0 6px #38bdf888;
@@ -316,7 +317,7 @@ label {
   border: 3px solid #38bdf8;
   background: rgba(30,41,59,0.98);
   color: #e3f6ff;
-  font-size: 28px;
+  font-size: 15px;
   width: 100%;
   box-shadow: 0 2px 12px #38bdf844;
   transition: border-color 0.3s;
@@ -338,14 +339,14 @@ label {
   background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
   color: #e3f6ff;
   padding: 22px 0;
-  font-size: 32px;
+  font-size: 15px;
   border: none;
   border-radius: 14px;
   cursor: pointer;
   transition: background 0.3s ease, box-shadow 0.3s ease;
   width: 100%;
   margin-top: 0;
-  font-weight: bold;
+  font-weight: 600;
   letter-spacing: 1px;
   box-shadow: 0 2px 16px #38bdf888;
   text-shadow: 0 0 6px #23272b;
@@ -631,8 +632,8 @@ label {
   align-items: center;
   padding: 2vw;
   position: fixed;
-  top: 37vh;
-  left: calc(100% - 68vw);
+  top: 35vh;
+  left: calc(100% - 96vw);
   width: 32vw;
   text-wrap: auto;
   font-weight: 800;
@@ -641,7 +642,10 @@ label {
 }
 
 /* Subtle gradient overlay behind hero text for readability */
-.hero { position: fixed; /* already set, ensure stacking */ }
+/*.hero { position: fixed;
+
+}*/
+
 .hero::before {
  content: '';
  position: absolute;
@@ -719,7 +723,7 @@ label {
 
 h2.section-title {
   font-size: 28px;
-  color: #0d9de3;
+  color: #fff;
   margin-bottom: 10px;
 }
   /* Footer */
@@ -1108,18 +1112,19 @@ footer .social-icons {
 
 
 .header-nav {
- display: flex;
- align-items: center;
- gap:48px;
- color: #e3f6ff;
- font-weight:700;
- margin-right: 100px;
-}
-.header-nav .nav-link {
- color: #e3f6ff;
- text-decoration: none;
- font-size:0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 41px;
+/*  color: #692727 !important;*/
+  font-weight: 700;
+  margin-right: 100px;
 }
+  .header-nav .nav-link {
+    color: #ffffff;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 600;
+  }
 .header-nav .nav-link:hover {
  color: #38bdf8;
 }
@@ -1127,16 +1132,23 @@ footer .social-icons {
  color: #5fa8d4;
  opacity:0.9;
 }
-.header-nav .nav-icon { font-size:0.95rem; margin-right:6px; vertical-align: -1px; opacity:0.9; }
+  .header-nav .nav-icon {
+    font-size: 1vw;
+    margin-right: 6px;
+    /* vertical-align: -1px; */
+    opacity: 0.9;
+  }
 .header-nav .dropdown-item .nav-icon { margin-right:8px; }
 
 /* Premium soft hover underline and color fade for header nav */
-.header-nav .nav-link,
-.header-nav .dropdown-toggle,
-.header-nav .dropdown-item {
- position: relative;
- transition: color .25s ease;
-}
+  .header-nav .nav-link,
+  .header-nav .dropdown-toggle,
+  .header-nav .dropdown-item {
+    position: relative;
+    transition: color .25s ease;
+    display: flex;
+    align-items: baseline;
+  }
 .header-nav .nav-link::after,
 .header-nav .dropdown-toggle::after,
 .header-nav .dropdown-item::after {
@@ -1251,12 +1263,12 @@ footer .social-icons {
 /* Title stack for logo + tagline */
 .title-stack { display:flex; flex-direction: column; align-items:flex-start; gap:2px; }
 .logo-tagline {
- font-size:0.92rem;
- font-weight:400;
- color: #b7d6eb;
- letter-spacing:0.3px;
- margin-top: -6px; /* tuck closer under title */
- opacity:0.9;
+  font-size: 0.92rem;
+  font-weight: 400;
+  color: #ffffff;
+  letter-spacing: 0.3px;
+  margin-top: -6px; /* tuck closer under title */
+  opacity: 0.9;
 }
 
 /* Remove separate fixed language selector */
@@ -1270,7 +1282,7 @@ footer .social-icons {
  color: #e3f6ff;
  border:1px solid #3aa6d9;
  border-radius:8px;
- padding:08px;
+ padding:0 8px;
  font-size:0.9rem;
  box-shadow:0 2px 10px rgba(2,6,23,0.35);
  cursor: pointer;
@@ -1307,7 +1319,7 @@ footer .social-icons {
 .auth-topright .auth-btn[data-tooltip]:focus-visible::after { opacity:1; transform: translateX(50%) translateY(0); }
 .hero .hero-cta {
   margin-top: 12px;
-  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  background: linear-gradient( 90deg, #38BDF8 0%, #0EA5E9 100% );
   color: #18181b;
   border: none;
   border-radius: 999px;
@@ -1339,7 +1351,6 @@ footer .social-icons {
  color: #e3f6ff;
  position: relative; /* for pseudo-element if present */
 }
-/* If decorative background was present, keep but ensure card sits above */
 .how-it-works::before {
  content: '';
  position: absolute;
@@ -1446,6 +1457,54 @@ footer .social-icons {
 }
 
 
+/* Language box with globe icon and label */
+.lang-box {
+ display: inline-flex;
+ align-items: center;
+ gap:8px;
+ padding:6px 10px;
+ border:1px solid #3aa6d9;
+ border-radius:10px;
+ background: rgba(13,26,43,0.65);
+ margin:0 12px 8px 12px;
+ box-shadow:0 2px 10px rgba(2,6,23,0.35);
+}
+
+.lang-icon {
+ color: #38bdf8;
+ text-shadow:0 0 6px #38bdf866;
+ font-size:0.95rem;
+}
+
+.lang-label {
+ color: #e3f6ff;
+ font-size:0.9rem;
+ opacity:0.95;
+}
+
+/* Reuse existing select but remove large right margin so it fits the box */
+.lang-select.header-lang {
+ margin-right:0;
+ margin-top:0;
+ height:28px;
+ padding:4px 8px;
+}
+
+
+/* Language dropdown alignment to avoid overlapping auth button */
+.header-nav .lang-dropdown { position: relative; }
+.header-nav .lang-dropdown .dropdown-menu {
+ right:0; /* align the menu to the toggle's right edge */
+ left: auto;
+ transform-origin: top right;
+}
+/* When the language dropdown is near the right edge, open to the left */
+@media (min-width:761px) {
+ .header-nav .lang-dropdown .dropdown-menu {
+ transform: translateY(0) translateX(-20px);
+ }
+}
+
 
 
 

src/app/homepage/homepage.component.html

@@ -24,43 +24,53 @@
  </div>
  <!-- Right-side minimal navigation -->
  <nav class="header-nav" aria-label="Primary">
- <a class="nav-link" [class.active]="selectedNav==='home'" href="#" (click)="navigateHome(); $event.preventDefault()">
- <i class="fas fa-home nav-icon" aria-hidden="true"></i> Home
- </a>
- <span class="nav-sep">|</span>
- <!-- About dropdown (second) -->
- <div class="dropdown">
- <a class="nav-link dropdown-toggle" [class.active]="selectedNav==='mission' || selectedNav==='how-to-use' || selectedNav==='about'" href="#" (click)="markSelected('about'); $event.preventDefault()">
- <i class="fas fa-info-circle nav-icon" aria-hidden="true"></i> About ▾
- </a>
- <div class="dropdown-menu">
- <a class="dropdown-item" [class.active]="selectedNav==='mission'" href="#mission" (click)="scrollToMission($event)">
- <i class="fas fa-bullseye nav-icon" aria-hidden="true"></i> Our mission
- </a>
- <a class="dropdown-item" [class.active]="selectedNav==='how-to-use'" href="#how-to-use" (click)="scrollToHowToUse($event)">
- <i class="fas fa-lightbulb nav-icon" aria-hidden="true"></i> How to use 
- </a>
- <a class="dropdown-item" [class.active]="selectedNav==='how-it-works'" href="#how-it-works" (click)="scrollToHowItWorks($event)">
- <i class="fas fa-cogs nav-icon" aria-hidden="true"></i> How it works
- </a>
- </div>
- </div>
- <span class="nav-sep">|</span>
- <!-- Features (third) -->
- <a class="nav-link" [class.active]="selectedNav==='features'" href="#features" (click)="scrollToFeatures($event)">
- <i class="fas fa-star nav-icon" aria-hidden="true"></i> Features
- </a>
- <span class="nav-sep">|</span>
- <!-- Support (fourth) -->
- <a class="nav-link" [class.active]="selectedNav==='support'" href="mailto:info@pykara.ai?subject=Py-Detect%20Support%20Request" (click)="markSelected('support')">
- <i class="fas fa-life-ring nav-icon" aria-hidden="true"></i> Support
- </a>
- <!-- Language selector inline, after Support -->
- <select class="lang-select header-lang" aria-label="Select language" [value]="selectedLanguage" (change)="onLanguageChange($any($event.target).value)">
- <option value="en">EN</option>
- <option value="en-IN">IN</option>
- </select>
-</nav>
+   
+   <a class="nav-link" [class.active]="selectedNav==='home'" href="#" (click)="navigateHome(); $event.preventDefault()">
+     <i class="fas fa-home nav-icon" aria-hidden="true"></i> Home
+   </a>
+   <span class="nav-sep">|</span>
+   <!-- About dropdown (second) -->
+   <div class="dropdown">
+     <a class="nav-link dropdown-toggle" [class.active]="selectedNav==='mission' || selectedNav==='how-to-use' || selectedNav==='about'" href="#" (click)="markSelected('about'); $event.preventDefault()">
+       <i class="fas fa-info-circle nav-icon" aria-hidden="true"></i> About ▾
+     </a>
+     <div class="dropdown-menu">
+       <a class="dropdown-item" [class.active]="selectedNav==='mission'" href="#mission" (click)="scrollToMission($event)">
+         <i class="fas fa-bullseye nav-icon" aria-hidden="true"></i> Our mission
+       </a>
+       <a class="dropdown-item" [class.active]="selectedNav==='how-to-use'" href="#how-to-use" (click)="scrollToHowToUse($event)">
+         <i class="fas fa-lightbulb nav-icon" aria-hidden="true"></i> How to use
+       </a>
+       <a class="dropdown-item" [class.active]="selectedNav==='how-it-works'" href="#how-it-works" (click)="scrollToHowItWorks($event)">
+         <i class="fas fa-cogs nav-icon" aria-hidden="true"></i> How it works
+       </a>
+     </div>
+   </div>
+   <span class="nav-sep">|</span>
+   <!-- Features (third) -->
+   <a class="nav-link" [class.active]="selectedNav==='features'" href="#features" (click)="scrollToFeatures($event)">
+     <i class="fas fa-star nav-icon" aria-hidden="true"></i> Features
+   </a>
+   <span class="nav-sep">|</span>
+   <!-- Support (fourth) -->
+   <a class="nav-link" [class.active]="selectedNav==='support'" href="mailto:info@pykara.ai?subject=Py-Detect%20Support%20Request" (click)="markSelected('support')">
+     <i class="fas fa-life-ring nav-icon" aria-hidden="true"></i> Support
+   </a>
+   <span class="nav-sep">|</span>
+   <!-- Language dropdown placed like About -->
+   <div class="dropdown lang-dropdown">
+     <a class="nav-link dropdown-toggle" href="#" (click)="$event.preventDefault()">
+       <i class="fas fa-globe-americas nav-icon" aria-hidden="true"></i> Language ▾
+     </a>
+     <div class="dropdown-menu" role="menu" aria-label="Choose language">
+       <a class="dropdown-item" href="#" (click)="onLanguageChange('en-GB'); $event.preventDefault()">English (UK)</a>
+       <a class="dropdown-item" href="#" (click)="onLanguageChange('en-US'); $event.preventDefault()">English (US)</a>
+       <a class="dropdown-item" href="#" (click)="onLanguageChange('sv'); $event.preventDefault()">Swedish</a>
+       <a class="dropdown-item" href="#" (click)="onLanguageChange('es'); $event.preventDefault()">Spanish</a>
+       <a class="dropdown-item" href="#" (click)="onLanguageChange('hi'); $event.preventDefault()">Hindi</a>
+     </div>
+   </div>
+ </nav>
  <!-- Top-right auth button -->
  <div class="auth-topright">
    <button class="auth-btn" (click)="openSignIn()" aria-label="Open Sign In"  title="Account">

src/app/homepage/homepage.component.ts

@@ -20,7 +20,7 @@ export class HomepageComponent implements OnInit, OnDestroy {
 
   // Track selected nav for persistent highlight
   selectedNav: string = '';
-  selectedLanguage = 'en';
+  selectedLanguage = 'en-US';
 
   // (Optional legacy flags kept intact if used elsewhere)
   selectedInfo: string | null = null;

src/app/infopage/infopage.component.html

@@ -29,12 +29,36 @@
         <i class="fas fa-save"></i>
         <span>{{ autoSaveStatus }}</span>
       </div>
+      <!-- Profile display (moved here so menu anchors under icon) -->
+      <div #profileDisplay class="profile-display" [class.open]="showProfileMenu" style="margin-left:12px; display: flex; align-items: center; cursor: pointer; color: #fff; position: relative; margin-bottom:15px;" (click)="toggleProfileMenu($event)">
+        <div class="profile-avatar" style="width: 2.2em; height: 2.2em; border-radius: 50%; background: linear-gradient(135deg, #1E3A8A, #2563eb); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95em; overflow: hidden; margin-top: 17px;">
+          <img *ngIf="currentUser?.avatarUrl" [src]="currentUser?.avatarUrl" alt="avatar" style="width:100%;height:100%;object-fit:cover;" />
+          <span *ngIf="!currentUser?.avatarUrl">{{ getUserInitials() }}</span>
+        </div>
+        <!-- Profile menu anchored directly below the icon -->
+        <div *ngIf="showProfileMenu" class="profile-menu" [ngStyle]="profileMenuStyle" style="background:#222;color:#fff;border-radius:8px;padding:8px 10px;min-width:220px;box-shadow:0 6px 18px rgba(0,0,0,0.25);">
+          <div style="display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:8px;">
+            <div style="width:42px;height:42px;border-radius:50%;background:#2b6ea6;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;overflow:hidden;">
+              <img *ngIf="currentUser?.avatarUrl" [src]="currentUser?.avatarUrl" alt="avatar" style="width:100%;height:100%;object-fit:cover;" />
+              <span *ngIf="!currentUser?.avatarUrl">{{ getUserInitials() }}</span>
+            </div>
+            <div style="font-size:0.95em;">
+              <div>{{ currentUser?.name }}</div>
+              <div style="font-size:0.8em;opacity:0.9;">{{ currentUser?.email }}</div>
+            </div>
+          </div>
+          <button (click)="logout()" style="width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border:none;border-radius:6px;background:transparent;color:#fff;cursor:pointer;">
+            <i class="fas fa-sign-out-alt" style="width:18px;text-align:center;"></i>
+            Logout
+          </button>
+        </div>
+      </div>
       <!-- View Records Button -->
-      <div class="view-records-btn" style="margin-left: 16px; vertical-align: middle; color: #fff; font-size: 1.5em; width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; margin-bottom: 15px;"
-              type="button"
-              (click)="goToRecords()"
-              (mouseenter)="showViewRecordsTooltip = true"
-              (mouseleave)="showViewRecordsTooltip = false">
+      <div class="view-records-btn" style="margin-left: 16px; vertical-align: middle; color: #fff; font-size: 1.5em; width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; background: linear-gradient(135deg, #1E3A8A, #2563eb);"
+           type="button"
+           (click)="goToRecords()"
+           (mouseenter)="showViewRecordsTooltip = true"
+           (mouseleave)="showViewRecordsTooltip = false">
         <i class="fas fa-folder-open"></i>
         <span *ngIf="showViewRecordsTooltip" style="position:absolute;top:100%;left:0%;transform:translateX(-50%);background:#222;color:#fff;padding:4px 12px;border-radius:6px;font-size:0.6em;white-space:nowrap;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.12);">View Records</span>
       </div>
@@ -46,22 +70,22 @@
 <div class="section-navigation" [@fadeIn]>
   <div class="ai-neural-bg"></div>
   <div class="section-pills">
-    <button class="section-pill main-section-pill ai-enhanced"
+    <button class="section-pill main-section-pill"
             *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>
+      <i class="fas fa-chevron-right nav-chevron"
+         [class.rotated]="currentSection === section"></i>
       <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>
@@ -94,7 +118,7 @@
 <div class="investigation-container">
 
   <!-- Universal Single Investigation Card -->
-  <div class="form-card primary-card" [@cardSlide] #formCard1>
+  <div class="form-card primary-card" [class.is-physical-description]="isPhysicalDescriptionPage()" [@cardSlide] #formCard1>
     <div class="card-header compact-card-header">
       <div class="card-header-main">
         <h2 class="compact-title">
@@ -122,26 +146,30 @@
               <i class="fas fa-times"></i>
             </button>
           </div>
+          <!-- Small dynamic subtitle showing selection count -->
+          <div style="font-size:0.85rem;color:#9fc9de;margin:8px 12px 0 12px;">{{ getSelectedFieldCount() }} of {{ getTotalAvailableFieldsCount() }} fields selected</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)"
-                       (click)="$event.stopPropagation()"
                        (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 class="popup-action-btn clear-btn" (click)="resetFieldSelection($event)" type="button"
+                    style="min-width:80px;padding:8px 10px;border:2px solid #e74c3c;background:transparent;color:#e74c3c;font-weight:600;border-radius:10px;display:inline-flex;align-items:center;gap:6px;">
+              <i class="fas fa-times-circle" style="color:#e74c3c;"></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 class="popup-action-btn selectall-btn" (click)="selectAllFields($event)" type="button"
+                    style="min-width:96px;padding:8px 12px;border:2px solid #5fa8d4;background:transparent;color:#2b6ea6.font-weight:600;border-radius:10px;display:inline-flex;align-items:center;gap:6px;">
+              <i class="fas fa-check-double" style="color:#2b6ea6;"></i> Select All
             </button>
-            <button class="popup-action-btn save-btn" (click)="closeFieldSelector()" type="button">
-              <i class="fas fa-save"></i> Save
+            <button class="popup-action-btn save-btn" (click)="closeFieldSelector()" type="button"
+                    style="min-width:110px;padding:8px 14px;border:none;border-radius:12px;background:linear-gradient(90deg,#38bdf80%, #23272b100%);color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 12px rgba(56,189,248,0.55);">
+              <i class="fas fa-save" style="color:#fff;"></i> Save
             </button>
           </div>
         </div>
@@ -154,9 +182,9 @@
         <strong>{{ sections[currentSection].title }} - {{ currentSubgroup }}:</strong> {{ getSectionDescription(currentSection) }}
       </div>
 
-      <div class="fields-grid">
+      <div class="fields-grid" [class.evidence-scene-grid]="currentSubgroup === 'Evidence & Scene'">
         <div *ngFor="let field of getPrimaryFields(); let i = index; trackBy: trackByField"
-             class="field-container"
+             class="field-container" [class.photo-field]="field === 'Photo Upload' || field === 'Digital Evidence'"
              [class.filled]="formData[field] && formData[field].toString().trim() !== ''"
              [attr.data-field]="field"
              [@fieldAnimation]>
@@ -170,85 +198,63 @@
                     [attr.aria-label]="'Info for ' + field">
               <i class="fas fa-info"></i>
             </button>
-            <!-- Microphone icon for Remark field -->
-            <ng-container *ngIf="field === 'Remark'">
-              <span style="display:inline-flex;align-items:center;position:relative;">
-                <button type="button"
-                        (mouseenter)="showMicPopup = true"
-                        (mouseleave)="showMicPopup = false"
-                        (click)="toggleRecording()"
-                        style="background:none;border:none;outline:none;cursor:pointer;padding:0;margin-left:6px;">
-                  <i class="fas fa-microphone"
-                     [ngStyle]="{
-                       color: isRecording ? '#e74c3c' : '#3498db',
-                       animation: 'micPulse 1s infinite',
-                       fontSize: '1.2em',
-                       transition: 'color 0.2s'
-                     }"
-                     style="transition:color 0.2s;">
-                  </i>
-                </button>
-                <!-- Popup on hover -->
-                <div *ngIf="showMicPopup"
-                     style="position:absolute;top:120%;left:0;z-index:10;background:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);white-space:nowrap;min-width:160px;">
-                  Click to record your remark.<br>Release to stop.<br>Recording is {{ isRecording ? 'ON' : 'OFF' }}.
-                </div>
-                <!-- Inline animation keyframes -->
-                <style>
-                  @keyframes micPulse {
-                    0% {
-                      transform: scale(1);
-                      filter: drop-shadow(0 0 0 #e74c3c);
-                    }
 
-                    50% {
-                      transform: scale(1.2);
-                      filter: drop-shadow(0 0 8px #e74c3c);
-                    }
-
-                    100% {
-                      transform: scale(1);
-                      filter: drop-shadow(0 0 0 #e74c3c);
-                    }
-                  }
-                </style>
-              </span>
-            </ng-container>
+            <!-- Microphone button hidden for file fields -->
+            <span *ngIf="!fileFields.has(field)" style="display:inline-flex;align-items:center;position:relative;"
+                  (mouseenter)="showMicPopupField = field"
+                  (mouseleave)="showMicPopupField = null">
+              <button type="button"
+                      (click)="toggleRecording(field)"
+                      style="background:none;border:none;outline:none;cursor:pointer;padding:0;margin-left:6px;">
+                <i class="fas fa-microphone"
+                   [ngStyle]="{
+ color: recordingField === field ? '#e74c3c' : '#3498db',
+ animation: recordingField === field ? 'micPulse1s infinite' : 'none',
+ fontSize: '1.2em'
+ }"></i>
+              </button>
+              <div *ngIf="showMicPopupField === field"
+                   (mouseenter)="showMicPopupField = field"
+                   (mouseleave)="showMicPopupField = null"
+                   style="position:absolute;bottom:120%;left:0;z-index:5000;background:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);white-space:nowrap;min-width:180px;pointer-events:auto;">
+                Click to record your input for "{{ field }}".<br>Click again to stop.<br>Recording is {{ recordingField === field ? 'ON' : 'OFF' }}.
+              </div>
+            </span>
           </label>
 
-          <!-- 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>
+            <!-- File upload vs various input types simplified to avoid complex nested templates -->
+
+            <ng-container *ngIf="fileFields.has(field)">
+              <div class="file-upload-block">
+                <div class="file-drop-zone" title="Click to upload files or drag and drop here" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onFileDrop(field, $event)" [class.drag-over]="isDragOver">
+                  <input #fileInput type="file" (change)="onFileChange(field, $event)" multiple [accept]="getAcceptedFileTypes(field)" class="file-input" style="display:none;" />
+                  <div class="drop-zone-content" (click)="fileInput.click()" style="cursor:pointer;">
+                    <i [class]="getUploadZoneIcon(field)"></i>
+                    <p style="margin:0;">Drop files here or click to browse</p>
+                  </div>
                 </div>
-              </div>
-              <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 class="file-accepts" style="font-size:0.85rem;color:#9fb6c8;margin-top:6px;">
+                  Accepts: {{ getAcceptedDisplay(field) }}
+                </div>
+                <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 *ngIf="uploadConfirmations[field]" class="upload-confirmation" style="color:#2b7a2b;margin-top:6px;font-size:0.95rem;">
+                  {{ uploadConfirmations[field] }}
                 </div>
               </div>
-            </div>
+            </ng-container>
 
-            <ng-template #nonFileField>
-              <!-- Date/Time Fields -->
-              <ng-container *ngIf="dateTimeFields.has(field); else nonDateTime">
+            <ng-container *ngIf="!fileFields.has(field)">
+              <!-- Date/time -->
+              <ng-container *ngIf="dateTimeFields.has(field)">
                 <input type="datetime-local"
                        class="field-input"
                        [class.compact]="isCompactField(field)"
@@ -256,66 +262,66 @@
                        (input)="onFieldChange(field)" />
               </ng-container>
 
-              <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>
+              <!-- Date only -->
+              <ng-container *ngIf="!dateTimeFields.has(field) && dateFields.has(field)">
+                <input type="date"
+                       class="field-input"
+                       [class.compact]="isCompactField(field)"
+                       [(ngModel)]="formData[field]"
+                       (input)="onFieldChange(field)" />
+              </ng-container>
+
+              <!-- Cascading selects for Country/State/District -->
+              <ng-container *ngIf="!dateTimeFields.has(field) && !dateFields.has(field) && (field === 'Country' || field === 'State' || field === 'District')">
+                <select class="field-input"
+                        [class.compact]="isCompactField(field)"
+                        [(ngModel)]="formData[field]"
+                        (change)="onSelectChange(field, $event)"
+                        [class.empty-select]="!formData[field]">
+                  <option [value]="''" [selected]="!formData[field]">-- Select {{ field }} --</option>
+                  <option *ngFor="let opt of getOptions(field)" [value]="opt">{{ opt }}</option>
+                </select>
+              </ng-container>
 
-                <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>
+              <!-- Select from predefined options when available -->
+              <ng-container *ngIf="!dateTimeFields.has(field) && !dateFields.has(field) && !(field === 'Country' || field === 'State' || field === 'District') && getOptions(field)?.length">
+                <select class="field-input"
+                        [class.compact]="isCompactField(field)"
+                        [(ngModel)]="formData[field]"
+                        (change)="onSelectChange(field, $event)"
+                        [class.empty-select]="!formData[field]">
+                  <option [value]="''" [selected]="!formData[field]">-- Select {{ field }} --</option>
+                  <option *ngFor="let opt of getOptions(field)" [value]="opt">{{ opt }}</option>
+                </select>
+              </ng-container>
 
-                  <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>
+              <!-- Textarea for description/remark fields -->
+              <ng-container *ngIf="!dateTimeFields.has(field) && !dateFields.has(field) && !(field === 'Country' || field === 'State' || field === 'District') && !getOptions(field)?.length && (field.toLowerCase().includes('description') || field === 'Remark')">
+                <textarea
+                        class="field-input auto-scroll-textarea"
+                        [class.compact]="isCompactField(field)"
+                        [(ngModel)]="formData[field]"
+                        (input)="onFieldChange(field)"
+                        [placeholder]="getFieldPlaceholder(field)"
+                        [attr.maxlength]="field === 'Brief Description' ? null : getMaxLength(field)"
+                        rows="3"></textarea>
 
-                    <ng-template #textInput>
-                      <!-- Description fields as textarea -->
-                      <textarea *ngIf="field.toLowerCase().includes('description') || field === 'Remark'; else regularInput"
-                                class="field-input auto-scroll-textarea"
-                                [class.compact]="isCompactField(field)"
-                                [(ngModel)]="formData[field]"
-                                (input)="onFieldChange(field)"
-                                [placeholder]="getFieldPlaceholder(field)"
-                                [attr.maxlength]="field === 'Brief Description' ? null : getMaxLength(field)"
-                                rows="3"></textarea>
-                      <!-- Recording status for Remark -->
-                      <div *ngIf="field === 'Remark' && isRecording" style="margin-top:4px;color:#e74c3c;font-size:0.95em;">
-                        Recording... Speak now.
-                      </div>
-                      <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 *ngIf="recordingField === field" style="margin-top:4px;color:#e74c3c;font-size:0.95em;">
+                  Recording... Speak now.
+                </div>
+              </ng-container>
+
+              <!-- Fallback regular input -->
+              <ng-container *ngIf="!dateTimeFields.has(field) && !dateFields.has(field) && !(field === 'Country' || field === 'State' || field === 'District') && !getOptions(field)?.length && !(field.toLowerCase().includes('description') || field === 'Remark')">
+                <input [type]="getInputType(field)"
+                       class="field-input"
+                       [class.compact]="isCompactField(field)"
+                       [(ngModel)]="formData[field]"
+                       (input)="onFieldChange(field)"
+                       [placeholder]="getFieldPlaceholder(field)"
+                       [maxlength]="getMaxLength(field)" />
+              </ng-container>
+            </ng-container>
           </div>
 
           <!-- Field Help Popover -->
@@ -325,39 +331,87 @@
           </div>
         </div>
       </div>
+      <!-- Removed modern-nav-btns from here to prevent scrolls -->
     </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">
-  <!-- Next button appears on all pages except the last Remark page under notes -->
-  <button *ngIf="!(isLastSubgroup() && currentSection === 'notes' && currentSubgroup === 'Remark')" type="button" class="modern-round-btn next-btn-animated" (click)="nextSubgroup()" [disabled]="!canNextSubgroup()" title="Next">
-    <i class="fas fa-arrow-right"></i>
-  </button>
-  <!-- Submit button only on last Remark page under notes -->
-  <button *ngIf="isLastSubgroup() && currentSection === 'notes' && currentSubgroup === 'Remark'" type="button" class="modern-round-btn submit-btn-animated" (click)="submitCurrentSection()" title="Submit">
-    <i class="fas fa-paper-plane"></i>
-  </button>
-</div>
+  <!-- Floating Modern Navigation Button (fixed, no scroll) -->
+  <div class="modern-floating-nav-btn">
+    <div class="modern-nav-row">
+      <!-- Previous button appears when not on the very first subgroup of the first section -->
+      <button *ngIf="canPrevSubgroup()" type="button" class="modern-round-btn" (click)="previousSubgroup()" [disabled]="!canPrevSubgroup()" title="Previous">
+        <i class="fas fa-arrow-left"></i>
+      </button>
+
+      <!-- Submit button only on last Remark page under notes; placed next to Previous button -->
+      <button *ngIf="isLastSubgroup() && currentSection === 'notes' && currentSubgroup === 'Remark'" type="button" class="modern-round-btn submit-btn-animated" (click)="submitCurrentSection()" title="Submit & View Records">
+        <i class="fas fa-paper-plane"></i>
+      </button>
 
-<!-- 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>
+      <!-- Next button appears on all pages except the last Remark page under notes -->
+      <button *ngIf="!(isLastSubgroup() && currentSection === 'notes' && currentSubgroup === 'Remark')" type="button" class="modern-round-btn next-btn-animated" (click)="nextSubgroup()" [disabled]="!canNextSubgroup()" title="Next">
+        <i class="fas fa-arrow-right"></i>
+      </button>
     </div>
   </div>
-</div>
 
-<!-- Footer from provided design -->
-<footer>
-  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
-  </footer>
+  <!-- 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>
+  </div>
 
+  <!-- Case ID Exists Popup -->
+  <div *ngIf="showCaseIdExistsPopup" class="submit-popup-backdrop" (click)="closeCaseIdPopup()">
+    <div class="submit-popup-modal" (click)="$event.stopPropagation()">
+      <div class="submit-popup-content">
+        <i class="fas fa-exclamation-triangle submit-popup-icon" style="color:#ef4444;"></i>
+        <h3>Duplicate Case ID</h3>
+        <p>{{ caseIdExistsMessage }}</p>
+        <button class="submit-popup-btn" (click)="closeCaseIdPopup()">OK</button>
+      </div>
+    </div>
+  </div>
 
+  <!-- No-data Popup: shown when user tries to submit without entering data -->
+  <div *ngIf="showNoDataPopup" class="submit-popup-backdrop" (click)="closeNoDataPopup()">
+    <div class="submit-popup-modal" (click)="$event.stopPropagation()">
+      <div class="submit-popup-content">
+        <i class="fas fa-exclamation-circle submit-popup-icon" style="color:#f59e0b;"></i>
+        <h3>No Data Entered</h3>
+        <p>Please enter at least one field or upload a file before submitting. No case will be created.</p>
+        <button class="submit-popup-btn" (click)="closeNoDataPopup()">OK</button>
+      </div>
+    </div>
+  </div>
 
+  <!-- Add this loader overlay after the floating nav buttons but before the success popup -->
+  <div *ngIf="isSubmitting" class="submit-loader-backdrop">
+    <div class="submit-loader-modal">
+      <div class="submit-loader-content">
+        <div class="spinner-container">
+          <div class="spinner"></div>
+          <div class="spinner-ring"></div>
+        </div>
+        <h3>Submitting...</h3>
+        <p>Please wait while we save your case information.</p>
+        <div class="loader-progress">
+          <div class="loader-progress-bar" [style.width.%]="submitProgress"></div>
+        </div>
+        <p class="loader-subtext">Processing {{ submitProgress }}% complete</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Footer from provided design -->
+  <footer>
+    <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  </footer>
+
+</div>

src/app/py-detect/py-detect.component.css

@@ -1,1239 +1,1164 @@
-/* --- Crispy Modern Redesign --- */
-body, html {
-  font-family: 'Poppins', 'Inter', Arial, sans-serif;
-  background: #f6f8fa;
-  color: #23272b;
-}
 
-.h-full {
-  min-height: 100vh;
+/* ===== GLOBAL RESET & BASE ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.bg-gray-900 {
-  background-color: #1a202c;
+body, html {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  color: #1e293b;
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 
-.text-gray-200 {
-  color: #e2e8f0;
+/* ===== HEADER ===== */
+.site-header {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  padding: 0 0 0 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
-.flex {
+.header-inner {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 32px;
   display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.justify-between {
+  align-items: center;
   justify-content: space-between;
+  height: 70px;
 }
 
-.items-center {
+.logo-cluster {
+  display: flex;
   align-items: center;
+  gap: 16px;
 }
 
-.p-4 {
-  padding: 1rem;
+.logo-img-header {
+  width: 42px;
+  height: 42px;
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  border-radius: 12px;
+  padding: 8px;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
 }
 
-.border-b {
-  border-bottom: 1px solid #4a5568;
+.py-detect-title-header {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: flex;
+  gap: 6px;
 }
 
-.bg-gray-800 {
-  background-color: #2d3748;
+.py-letter {
+  transition: transform 0.2s ease;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-}
+  .py-letter:hover {
+    transform: translateY(-2px);
+  }
 
-.font-semibold {
-  font-weight: 600;
+.header-actions-right-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-.tracking-wide {
-  letter-spacing: 0.05em;
-}
+/* ===== BACK BUTTON ===== */
+.back-btn {
+  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
+}
+
+  .back-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.6s ease;
+  }
 
-.text-white {
-  color: #fff;
-}
+  .back-btn:hover {
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
+    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
+  }
 
-.gap-4 {
-  gap: 1rem;
-}
+    .back-btn:hover::before {
+      left: 100%;
+    }
 
-.home-btn, .btn-start, .btn-stop {
-  background: none;
-  border: none;
-  color: #fff;
-  font-size: 1rem;
-  padding: 0.5rem 1.2rem;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
+  .back-btn:active {
+    transform: translateY(0) scale(0.98);
+  }
 
-.home-btn:hover, .btn-start:hover, .btn-stop:hover {
-  background: #2b6cb0;
-}
+  .back-btn i {
+    font-size: 16px;
+    transition: transform 0.3s ease;
+  }
 
-.max-w-4xl {
-  max-width: 56rem;
-}
+  .back-btn:hover i {
+    transform: translateX(-3px);
+  }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+/* ===== HEADER ACTION ICONS CONTAINER ===== */
+.header-actions-icons {
+  display: flex;
+  gap: 12px;
 }
 
-.space-y-6 > * + * {
-  margin-top: 1.5rem;
-}
+/* ===== EVIDENCE UPLOAD BUTTON ===== */
+.evidence-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
+  color: white;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
+}
+
+  .evidence-btn::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.4s ease, height 0.4s ease;
+  }
 
-.bg-gray-800 {
-  background-color: #2d3748;
-}
+  .evidence-btn:hover {
+    transform: translateY(-2px) rotate(5deg);
+    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4);
+    background: linear-gradient(135deg, #047857 0%, #0d9669 100%);
+  }
 
-.border {
-  border: 1px solid #4a5568;
-}
+    .evidence-btn:hover::after {
+      width: 60px;
+      height: 60px;
+    }
 
-.rounded-xl {
-  border-radius: 1rem;
-}
+  .evidence-btn:active {
+    transform: translateY(0) rotate(0);
+  }
 
-.shadow-md {
-  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
-}
+  .evidence-btn i {
+    font-size: 18px;
+    position: relative;
+    z-index: 1;
+    transition: transform 0.3s ease;
+  }
 
-.text-sm {
-  font-size: 0.875rem;
-}
+  .evidence-btn:hover i {
+    transform: scale(1.1);
+  }
 
-.text-gray-400 {
-  color: #a0aec0;
+/* ===== SUMMARY BUTTON ===== */
+.summary-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
+  color: white;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3);
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
+  .summary-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+  }
 
-.text-lg {
-  font-size: 1.125rem;
-}
+  .summary-btn:hover {
+    transform: translateY(-2px) rotate(-5deg);
+    box-shadow: 0 8px 25px rgba(217, 119, 6, 0.4);
+    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
+  }
 
-.font-semibold {
-  font-weight: 600;
-}
+    .summary-btn:hover::before {
+      transform: translateX(100%);
+    }
 
-.text-gray-200 {
-  color: #e2e8f0;
-}
+  .summary-btn:active {
+    transform: translateY(0) rotate(0);
+  }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
+  .summary-btn i {
+    font-size: 18px;
+    position: relative;
+    z-index: 1;
+    transition: transform 0.3s ease;
+  }
 
-.flex {
-  display: flex;
-}
+  .summary-btn:hover i {
+    transform: scale(1.1);
+  }
 
-.items-center {
-  align-items: center;
-}
+  /* ===== TOOLTIP FOR ICONS ===== */
+  .evidence-btn::after,
+  .summary-btn::after {
+    content: attr(title);
+    position: absolute;
+    bottom: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    z-index: 1001;
+  }
 
-.justify-between {
-  justify-content: space-between;
-}
+  .evidence-btn:hover::after,
+  .summary-btn:hover::after {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-5px);
+  }
 
-.badge {
-  padding: 4px 8px;
-  border-radius: 9999px;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-  background: #2d3748;
-  color: #fff;
-  margin-right: 8px;
+/* ===== MAIN CONTENT CARD ===== */
+.main-content-card {
+  max-width: 1400px;
+  margin: 32px auto;
+  background: white;
+  border-radius: 24px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+  position: relative;
+  min-height: calc(100vh - 200px);
 }
 
-.badge.bg-blue-600 {
-  background: #3182ce;
-}
-.badge.bg-green-600 {
-  background: #38a169;
-}
-.badge.bg-yellow-600 {
-  background: #ecc94b;
-  color: #222;
-}
+  /* Decorative elements for the card */
+  .main-content-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 6px;
+    background: linear-gradient(90deg, #2563eb, #3b82f6, #8b5cf6);
+    background-size: 300% 100%;
+    animation: gradient-shift 4s ease infinite;
+  }
 
-.mic {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #4a5568;
-  box-shadow: 0 0 0 0 rgba(31, 130, 68, 0.7);
-  transition: box-shadow 0.25s ease;
-  margin-right: 8px;
-}
-.mic.bg-green-600 {
-  background: #2f855a;
-  box-shadow: 0 0 8px 2px rgba(31, 130, 68, 0.7);
-}
+  .main-content-card::after {
+    content: '';
+    position: absolute;
+    top: 6px;
+    left: 20px;
+    right: 20px;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), transparent);
+  }
 
-.recog {
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 6px;
-  border: 1px dashed #3a3f47;
-  opacity: 0.8;
-  background: #2d3748;
-  color: #fff;
-}
-.recog.bg-blue-600 {
-  border-style: solid;
-  border-color: #3b82f6;
-}
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
 
-.text-xs {
-  font-size: 0.75rem;
-}
-.text-gray-500 {
-  color: #718096;
-}
-.flex-1 {
-  flex: 1;
-}
-.mt-2 {
-  margin-top: 0.5rem;
-}
-.space-x-6 > * + * {
-  margin-left: 1.5rem;
-}
-.w-full {
-  width: 100%;
-}
-.bg-gray-700 {
-  background-color: #4a5568;
-}
-.rounded-xl {
-  border-radius: 1rem;
+  50% {
+    background-position: 100% 50%;
+  }
 }
 
-/* Stylish font and button animation */
-.stylish-font {
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  letter-spacing: 2px;
-  text-shadow: 0 0 8px #38bdf8, 0 2px 8px #22222244;
-  transition: color 0.3s, text-shadow 0.3s;
+.card-inner {
+  padding: 32px;
+  height: 100%;
 }
 
-.main-flex-layout {
+/* ===== CONTENT LAYOUT ===== */
+.content-grid {
   display: grid;
-  grid-template-columns: 1fr 1.5fr;
+  grid-template-columns: 1fr 1fr;
   gap: 32px;
-  margin: 32px auto 0 auto;
-  max-width: 1700px;
-  min-height: 80vh;
-  background: linear-gradient(120deg, #f6f8fa 60%, #e0f2fe 100%);
-  border-radius: 24px;
-  box-shadow: 0 8px 32px #38bdf822;
-  padding: 32px 32px 48px 32px;
+  height: 100%;
 }
 
+/* ===== LEFT PANEL ===== */
 .left-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  justify-content: flex-start;
-  align-items: flex-start;
-  min-width: 750px;
-  max-width: 800px;
-}
-
-.right-panel {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  align-items: stretch;
-  min-width: 600px;
-  max-width: 900px;
 }
 
-/* Card style for summary/case info */
-.case-meta {
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 2px 16px #38bdf822;
-  padding: 18px 24px;
-  margin-bottom: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+/* Guidance Banner */
+.guidance-banner {
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  border-radius: 16px;
+  padding: 20px 24px;
+  color: white;
+  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2);
+  animation: slideIn 0.5s ease;
   position: relative;
-}
-.case-meta::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0; height: 6px;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  border-radius: 18px 18px 0 0;
+  overflow: hidden;
 }
 
-/* Add avatar/icon for suspect/officer */
-.suspect-avatar {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  object-fit: cover;
-  box-shadow: 0 2px 8px #38bdf844;
-  margin-right: 12px;
+  .guidance-banner::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+    animation: shimmer 2s infinite;
+  }
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
 }
 
-.case-row {
+.guidance-content {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 2px;
-  border-radius: 8px;
-  padding: 2px 0;
-  font-size: 1.02rem;
-}
-.case-label {
-  color: #2563eb;
-  font-weight: 600;
-  min-width: 120px;
-}
-.case-value {
-  color: #e3f6ff;
-  font-weight: 500;
-}
-.divider-line {
-  border-top: 1.5px solid #e5e7eb;
-  margin: 10px 0 14px 0;
+  gap: 16px;
+  position: relative;
+  z-index: 1;
 }
 
-/* Button group for actions */
-.button-group {
+.guidance-icon {
+  font-size: 28px;
+  background: rgba(255, 255, 255, 0.2);
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
   display: flex;
-  gap: 12px;
-  margin: 18px 0 0 0;
-  justify-content: flex-end;
-}
-
-.summary-toggle-btn,
-.back-btn,
-.evidence-toggle-btn,
-.btn-start-gradient,
-.evidence-submit-btn,
-.submit-evaluate-btn {
-  font-size: 0.92rem;
-  padding: 0.38rem 0.85rem;
-  border-radius: 8px;
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-weight: 700;
-  letter-spacing: 1px;
-  box-shadow: 0 2px 12px #38bdf844;
-  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
 }
 
-.summary-toggle-btn:hover,
-.back-btn:hover,
-.evidence-toggle-btn:hover,
-.btn-start-gradient:hover,
-.evidence-submit-btn:hover,
-.submit-evaluate-btn:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 6px 32px #6366f1cc;
-  transform: scale(1.04);
+.guidance-text {
+  flex: 1;
 }
 
-/* Animated divider */
-.animated-divider {
-  width: 100%;
-  height: 4px;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  border-radius: 2px;
-  margin: 18px 0;
-  animation: dividerPulse 2s infinite alternate;
-}
-@keyframes dividerPulse {
-  0% { box-shadow: 0 0 8px #38bdf844; }
-  100% { box-shadow: 0 0 24px #6366f144; }
-}
-
-/* Camera/video preview card */
-.video-preview {
-  background: #374151;
-  border: 2px dashed #64748b;
-  border-radius: 18px;
-  box-shadow: 0 2px 16px #23272b44;
-  padding: 0;
-  width: 100%;
-  max-width: 921px;
-  min-height: 368px;
-  height: 368px;
-  box-sizing: border-box;
+  .guidance-text h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  .guidance-text p {
+    font-size: 14px;
+    opacity: 0.9;
+  }
+
+/* Start Investigation Button */
+.start-investigation-btn {
+  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
+  color: white;
+  border: none;
+  border-radius: 14px;
+  padding: 18px 32px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 12px;
+  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.3);
   position: relative;
   overflow: hidden;
 }
-.camera-video {
-  border-radius: 18px;
-  border: none;
-  background: #222;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
+
+  .start-investigation-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 32px rgba(22, 163, 74, 0.4);
+  }
+
+  .start-investigation-btn:active {
+    transform: translateY(-1px);
+  }
+
+/* Question Section */
+.question-section {
+  background: #f8fafc;
+  border-radius: 16px;
+  padding: 24px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.3s ease;
 }
 
-/* Camera inactive styles */
-.camera-inactive-block {
-  width: 100%;
-  height: 100%;
-  min-height: 368px;
+  .question-section:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+    transform: translateY(-2px);
+  }
+
+.question-header {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  position: relative;
-}
-.camera-placeholder-img {
-  width: 96px;
-  height: 96px;
-  object-fit: contain;
-  margin-bottom: 18px;
-  opacity: 0.7;
-}
-.camera-placeholder-icon {
-  font-size: 4rem;
-  color: #38bdf8;
-  margin-bottom: 18px;
-  opacity: 0.7;
+  gap: 12px;
+  margin-bottom: 20px;
 }
-.camera-inactive-title {
-  font-size: 1.2rem;
-  color: #bae6fd;
-  font-weight: 700;
-  margin-bottom: 8px;
+
+.question-badge {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  color: white;
+  padding: 6px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
 }
-.camera-inactive-sub {
-  font-size: 1rem;
-  color: #fff;
-  opacity: 0.8;
+
+.question-content {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid #e2e8f0;
+  min-height: 120px;
+}
+
+  .question-content h3 {
+    font-size: 15px;
+    font-weight: 600;
+    color: #64748b;
+    margin-bottom: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+.question-text {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #1e293b;
+  font-weight: 500;
 }
 
-/* Footer */
-footer {
-  background: linear-gradient(to right, #011022, #01030a);
-  color: #fff;
+.no-question {
+  color: #94a3b8;
+  font-style: italic;
+  padding: 20px 0;
   text-align: center;
-  padding: 10px 0px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
 }
 
-/* Evidence and summary sidebar styles restoration */
-.evidence-toggle-btn {
-  position: fixed;
-  top: 110px;
-  right: 32px;
-  z-index: 1202;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  color: #fff;
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  border: none;
-  border-radius: 16px;
-  padding: 12px 28px;
-  box-shadow: 0 2px 16px #38bdf888;
-  cursor: pointer;
-  transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s;
-  animation: buttonPulse 1.2s infinite alternate;
-}
-.evidence-toggle-btn:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 6px 32px #6366f1cc;
-  transform: scale(1.04);
+.status-indicator {
+  margin-top: 16px;
+  padding: 12px;
+  background: #f0f9ff;
+  border-radius: 8px;
+  border-left: 4px solid #3b82f6;
+  font-size: 14px;
+  color: #1e40af;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-.summary-toggle-btn {
-  position: fixed;
-  top: 160px;
-  right: 32px;
-  z-index: 1202;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  color: #fff;
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  border: none;
+
+/* Answer Section */
+.answer-section {
+  background: #f8fafc;
   border-radius: 16px;
-  padding: 12px 28px;
-  box-shadow: 0 2px 16px #38bdf888;
-  cursor: pointer;
-  transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s;
-  animation: buttonPulse 1.2s infinite alternate;
+  padding: 24px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.3s ease;
 }
-.summary-toggle-btn:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 6px 32px #6366f1cc;
-  transform: scale(1.04);
+
+  .answer-section:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+    transform: translateY(-2px);
+  }
+
+  .answer-section h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+    .answer-section h3::before {
+      content: '';
+      width: 4px;
+      height: 20px;
+      background: #2563eb;
+      border-radius: 2px;
+    }
+
+.answer-input {
+  width: 100%;
+  min-height: 150px;
+  padding: 16px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 1.6;
+  resize: vertical;
+  transition: all 0.3s ease;
+  margin-bottom: 20px;
+  background: white;
 }
-.evidence-sidebar, .summary-sidebar {
-  position: fixed;
-  top: 90px;
-  right: -35vw;
-  width: 35vw;
-  max-width: 562px;
-  height: 60vh;
-  min-height: 340px;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  background: rgba(30, 41, 59, 0.97);
-  box-shadow: 0 8px 32px #38bdf844, 0 2px 16px #6366f144;
-  border-radius: 24px 0 0 24px;
-  z-index: 1201;
-  transition: right 0.35s cubic-bezier(.23,1,.32,1);
-  color: #fff;
-  overflow-y: auto;
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  border: 2.5px solid #38bdf8;
-  animation: fadeInPanel 0.7s cubic-bezier(.23,1,.32,1);
-}
-.evidence-sidebar.open, .summary-sidebar.open {
-  right: 0;
-}
-.evidence-title-bar, .summary-title-bar {
+
+  .answer-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  .answer-input::placeholder {
+    color: #94a3b8;
+  }
+
+.answer-actions {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 24px 32px 0 32px;
-}
-.evidence-title, .summary-title {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: #38bdf8;
-  letter-spacing: 1px;
+  gap: 12px;
+  margin-bottom: 20px;
 }
-.evidence-close-btn, .summary-close-btn {
-  background: none;
+
+.btn-primary {
+  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  color: white;
   border: none;
-  font-size: 1.5rem;
-  color: #38bdf8;
+  border-radius: 10px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
   cursor: pointer;
-}
-.evidence-form-card, .summary-content-card {
-  background: rgba(44, 54, 74, 0.98);
-  border-radius: 18px;
-  box-shadow: 0 2px 16px #38bdf822;
-  margin: 24px 24px 24px 24px;
-  padding: 32px 36px 24px 36px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  color: #fff;
-}
-.evidence-upload-form {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  width: 100%;
-}
-.evidence-upload-row {
+  transition: all 0.3s ease;
   display: flex;
   align-items: center;
-  gap: 14px;
-  margin-bottom: 8px;
-  color: #fff;
+  gap: 8px;
+  flex: 1;
+  justify-content: center;
 }
-.evidence-upload-label {
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
+  }
+
+.btn-secondary {
+  background: white;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  border-radius: 10px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 1.08rem;
-  font-weight: 600;
-  color: #fff;
-  min-width: 160px;
-}
-.evidence-field-icon {
-  font-size: 1.3rem;
-  color: #38bdf8;
+  flex: 1;
+  justify-content: center;
 }
-.evidence-summary-row {
+
+  .btn-secondary:hover {
+    background: #f0f9ff;
+    transform: translateY(-2px);
+  }
+
+.recording-status {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 10px;
+  padding: 12px 16px;
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: 12px;
-  width: 100%;
-}
-.evidence-summary-label {
-  font-size: 1.05rem;
-  font-weight: 600;
-  color: #fff;
-  margin-bottom: 2px;
-}
-.evidence-summary-textarea {
-  border-radius: 8px;
-  border: 1.5px solid #38bdf8;
-  padding: 8px 12px;
-  font-size: 1rem;
-  background: #232b3e;
-  color: #fff;
-  resize: vertical;
-  min-height: 48px;
-  width: 100%;
-}
-.evidence-submit-btn {
-  margin-top: 18px;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  color: #fff;
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1.08rem;
-  font-weight: 700;
-  border: none;
-  border-radius: 12px;
-  padding: 0.55rem 1.3rem;
-  box-shadow: 0 2px 16px #38bdf888;
-  cursor: pointer;
-  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
-  letter-spacing: 1px;
-  width: 140px;
-  display: block;
-}
-.evidence-submit-btn:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 6px 32px #6366f1cc;
-  transform: scale(1.04);
+  align-items: center;
+  gap: 12px;
+  animation: pulse 2s infinite;
+  border: 1px solid #fbbf24;
 }
 
-/* Prevent page scroll */
-body, html {
-  overflow: hidden !important;
-  height: 100vh;
-}
-.main-flex-layout {
-  max-height: calc(100vh - 60px);
-  overflow: hidden;
+.recording-dot {
+  width: 12px;
+  height: 12px;
+  background: #dc2626;
+  border-radius: 50%;
+  animation: blink 1.5s infinite;
 }
 
-/* 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;
+/* Results Section */
+.results-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  margin-top: 24px;
 }
 
-.header-inner {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 18px 32px 0 32px;
+.result-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.3s ease;
   position: relative;
+  overflow: hidden;
 }
 
-.logo-cluster {
+  .result-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: linear-gradient(to bottom, #2563eb, #3b82f6);
+    border-radius: 2px 0 0 2px;
+  }
+
+  .result-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+  }
+
+.result-header {
   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;
+  gap: 12px;
+  margin-bottom: 16px;
 }
 
-.py-detect-title-header {
-  font-size: 2.1rem;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
-  font-weight: 900;
-  letter-spacing: 6px;
-  color: #38bdf8;
+.result-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
-  gap: 2px;
-  margin-bottom: 1.5vh;
+  justify-content: center;
+  font-size: 18px;
 }
 
-  .py-detect-title-header .py-letter.p {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
+  .result-icon.truth {
+    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+    color: #1d4ed8;
   }
 
-  .py-detect-title-header .py-letter.y {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
+  .result-icon.face {
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+    color: #b45309;
   }
 
-  .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;
+  .result-icon.involvement {
+    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
+    color: #7c3aed;
   }
 
-  .py-detect-title-header .py-letter.d {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
+  .result-icon.emotion {
+    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
+    color: #be185d;
   }
 
-  .py-detect-title-header .py-letter.e {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.result-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+  flex: 1;
+}
 
-  .py-detect-title-header .py-letter.t {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.result-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+}
 
-  .py-detect-title-header .py-letter.e2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.progress-bar {
+  height: 8px;
+  background: #e2e8f0;
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 12px 0;
+}
 
-  .py-detect-title-header .py-letter.c {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #10b981, #8b5cf6);
+  border-radius: 4px;
+  transition: width 1s ease;
+}
+
+.cues-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.cue-tag {
+  background: #f1f5f9;
+  color: #475569;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
 
-  .py-detect-title-header .py-letter.t2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
+  .cue-tag:hover {
+    background: #e2e8f0;
+    transform: translateY(-1px);
   }
 
-.header-action-bar {
+/* ===== RIGHT PANEL ===== */
+.right-panel {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
+  flex-direction: column;
+  gap: 32px;
+}
+
+/* Camera Section */
+.camera-section {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
   position: relative;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: 0 32px 18px 32px;
-  min-height: 96px;
-  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
-.header-action-left {
+
+.camera-placeholder {
+  height: 400px;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
-  height: 40px;
+  justify-content: center;
+  color: white;
+  padding: 40px;
+  text-align: center;
 }
-.header-action-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 40px;
-  position: absolute;
-  top: 18px;
-  right: 32px;
-  z-index: 100;
-}
-.header-action-bar .small-btn,
-.header-action-bar .summary-toggle-btn,
-.header-action-bar .evidence-toggle-btn {
-  font-size: 1.08rem;
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-weight: 700;
-  letter-spacing: 1px;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  color: #fff;
-  border: none;
-  border-radius: 12px;
-  padding: 0.55rem 1.3rem;
-  box-shadow: 0 2px 16px #38bdf888;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
-  overflow: hidden;
-  height: 40px;
-  line-height: 1.2;
-}
-.header-action-bar .small-btn {
-  margin-left: 8px;
-}
-.header-action-bar .summary-toggle-btn {
-  margin-right: 8px;
-}
-.header-action-bar .evidence-toggle-btn {
-  margin-right: 8px;
-}
-.header-action-bar .small-btn:hover,
-.header-action-bar .summary-toggle-btn:hover,
-.header-action-bar .evidence-toggle-btn:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 6px 32px #6366f1cc;
-  transform: scale(1.04);
-}
-.header-divider-line {
-  width: calc(100% - 64px); /* 32px gap on both sides */
-  height: 2px;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  border-radius: 2px;
-  margin: 0 auto 18px auto;
-  box-shadow: 0 2px 8px #38bdf844;
-  position: relative;
-  top: -19px;
+
+.camera-icon {
+  font-size: 64px;
+  margin-bottom: 24px;
+  opacity: 0.7;
+  color: #cbd5e1;
 }
 
-.blur-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1200;
-  background: rgba(30,41,59,0.18);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  transition: opacity 0.3s;
-  opacity: 1;
-  pointer-events: auto;
+.camera-placeholder h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-.blur-bg.hide {
-  opacity: 0;
-  pointer-events: none;
+
+.camera-placeholder p {
+  font-size: 14px;
+  color: #cbd5e1;
+  max-width: 300px;
+  line-height: 1.6;
 }
 
-.tts-question-card {
-  background: linear-gradient(120deg, #f6f8fa 60%, #bae6fd 100%);
-  border-radius: 18px;
-  box-shadow: 0 8px 32px #38bdf822, 0 2px 16px #6366f144;
-  padding: 32px 36px 24px 36px;
-  margin: 0 0 18px 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+.video-active {
+  height: 400px;
   position: relative;
-  animation: fadeInUp 0.7s cubic-bezier(.39,.58,.57,1);
-  min-height: 180px;
-  max-width: 700px;
-  width: 100%;
-  z-index: 1;
-}
-.tts-question-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 10px;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 12px #38bdf844;
+  overflow: hidden;
 }
-.tts-question-text {
-  font-size: 1.12rem;
-  color: #23272b;
-  font-weight: 600;
-  margin-bottom: 8px;
-  text-shadow: 0 1px 8px #bae6fd44;
+
+.camera-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
-.tts-status-row {
-  font-size: 1.05rem;
-  color: #6366f1;
+
+.recording-overlay {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: rgba(220, 38, 38, 0.9);
+  color: white;
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 14px;
   font-weight: 500;
-  margin-bottom: 4px;
-  background: rgba(56,189,248,0.08);
-  border-radius: 8px;
-  padding: 6px 14px;
-  box-shadow: 0 2px 8px #38bdf822;
-  display: inline-block;
-  animation: statusPulse 1.2s infinite alternate;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  backdrop-filter: blur(10px);
+  animation: pulse 2s infinite;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
-@keyframes statusPulse {
-  0% { box-shadow: 0 2px 8px #38bdf822; }
-  100% { box-shadow: 0 4px 16px #6366f144; }
+
+/* Transcription Section */
+.transcription-section {
+  background: #f8fafc;
+  border-radius: 20px;
+  padding: 24px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.3s ease;
 }
 
-/* Transcript Panel */
-.transcript-panel {
-  background: #fff;
-  border-radius: 14px;
-  box-shadow: 0 2px 12px #6366f122;
-  padding: 18px 18px 18px 18px;
-  width: 100%;
-  max-width: 889px;
-  overflow: hidden;
+  .transcription-section:hover {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  }
+
+.transcription-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
 }
 
-.transcript-title {
-  font-weight: 700;
-  color: #6366f1;
-  margin-bottom: 8px;
+  .transcription-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1e293b;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+.live-badge {
+  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  animation: pulse 2s infinite;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.transcript-scrollable {
+.transcription-content {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  max-height: 300px;
   overflow-y: auto;
-  max-height: 180px;
-  padding-right: 8px;
+  border: 1px solid #e2e8f0;
 }
 
-.transcript-line {
-  font-size: 1.05rem;
-  color: #23272b;
-  margin-bottom: 4px;
-}
+.transcription-line {
+  padding: 12px;
+  border-bottom: 1px solid #e2e8f0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #475569;
+  position: relative;
+  padding-left: 20px;
+}
+
+  .transcription-line::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 16px;
+    width: 8px;
+    height: 8px;
+    background: #3b82f6;
+    border-radius: 50%;
+  }
 
+  .transcription-line:last-child {
+    border-bottom: none;
+  }
 
+/* Final Action */
+.final-action {
+  margin-top: 16px;
+  text-align: center;
+  padding: 20px;
+  background: #f8fafc;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+}
 
-/* Evidence Panel Sidebar Styles */
-.evidence-toggle-btn {
-  display: block;
-  position: relative;
-  margin: 2px 0 0 auto;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  color: #fff;
-  font-family: 'Poppins', 'Inter', Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
+.evaluate-btn {
+  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
+  color: white;
   border: none;
-  border-radius: 8px 8px 0 0;
-  padding: 10px 22px;
-  box-shadow: 0 2px 12px #38bdf844;
+  border-radius: 14px;
+  padding: 18px 48px;
+  font-size: 16px;
+  font-weight: 600;
   cursor: pointer;
-  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
-  z-index: 1200;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.3);
+  position: relative;
+  overflow: hidden;
 }
 
-  .evidence-toggle-btn:hover {
-    background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
-    color: #bae6fd;
+  .evaluate-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 32px rgba(5, 150, 105, 0.4);
   }
 
-.evidence-sidebar {
+  .evaluate-btn:active {
+    transform: translateY(-1px);
+  }
+
+/* ===== SIDEBARS ===== */
+.evidence-sidebar,
+.summary-sidebar {
   position: fixed;
-  top: 90px;
-  right: -35vw;
-  width: 35vw;
-  max-width: 562px;
-  height: 60vh;
-  min-height: 340px;
-  padding: 0;
-  gap: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  background: rgba(30, 41, 59, 0.97);
-  box-shadow: 0 8px 32px #38bdf844, 0 2px 16px #6366f144;
-  border-radius: 24px 0 0 24px;
-  z-index: 1201;
-  transition: right 0.35s cubic-bezier(.23,1,.32,1);
-  color: #fff;
+  top: 0;
+  right: -400px;
+  width: 380px;
+  height: 100vh;
+  background: white;
+  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
+  z-index: 2000;
+  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y: auto;
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  border: 2.5px solid #38bdf8;
-  animation: fadeInPanel 0.7s cubic-bezier(.23,1,.32,1);
 }
 
-  .evidence-sidebar.open {
+  .evidence-sidebar.open,
+  .summary-sidebar.open {
     right: 0;
   }
 
-.evidence-title-bar {
+.sidebar-header {
+  padding: 24px;
+  border-bottom: 1px solid #e2e8f0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 18px;
-  padding: 24px 32px 0 32px;
-}
-
-.evidence-title {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: #38bdf8;
-  letter-spacing: 1px;
-}
-
-.evidence-form-card {
-  background: rgba(44, 54, 74, 0.98);
-  border-radius: 18px;
-  box-shadow: 0 2px 16px #38bdf822;
-  margin: 24px 24px 24px 24px;
-  padding: 24px 28px 18px 28px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  color: white;
 }
 
-.evidence-upload-form {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-}
-
-.evidence-upload-row {
+.sidebar-title {
+  font-size: 18px;
+  font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 14px;
-  margin-bottom: 0;
+  gap: 12px;
 }
 
-.evidence-upload-label {
+.close-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 1.08rem;
-  font-weight: 600;
-  color: #6366f1;
-  min-width: 160px;
+  justify-content: center;
 }
 
-.evidence-field-icon {
-  font-size: 1.3rem;
-  color: #38bdf8;
-}
+  .close-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: rotate(90deg);
+  }
 
-.evidence-divider {
-  border: none;
-  border-top: 1.5px solid #38bdf8;
-  margin: 12px 0 8px 0;
+.sidebar-content {
+  padding: 24px;
 }
 
-.evidence-summary-row {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+/* ===== BLUR BACKGROUND ===== */
+.blur-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+  z-index: 1999;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
 }
 
-.evidence-summary-label {
-  font-size: 1.05rem;
-  font-weight: 600;
-  color: #38bdf8;
-  margin-bottom: 2px;
-}
+  .blur-bg.active {
+    opacity: 1;
+    pointer-events: all;
+  }
 
-.evidence-summary-textarea {
-  border-radius: 8px;
-  border: 1.5px solid #6366f1;
-  padding: 8px 12px;
-  font-size: 1rem;
-  background: #232b3e;
-  color: #fff;
-  resize: vertical;
-  min-height: 48px;
+/* ===== FOOTER ===== */
+footer {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  color: white;
+  text-align: center;
+  padding: 24px 0;
+  margin-top: 40px;
 }
 
-.evidence-submit-btn {
-  margin-top: 12px;
-  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
-  color: #fff;
-  font-family: 'Poppins', 'Inter', Arial, sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 22px;
-  box-shadow: 0 2px 12px #38bdf844;
-  cursor: pointer;
-  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
-  letter-spacing: 1px;
-}
+  footer p {
+    font-size: 14px;
+    color: #cbd5e1;
+    opacity: 0.8;
+  }
 
-  .evidence-submit-btn:hover {
-    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
-    color: #bae6fd;
+/* ===== ANIMATIONS ===== */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
   }
 
-.evidence-upload-form input[type="file"] {
-  background: #232b3e;
-  color: #fff;
-  border-radius: 6px;
-  border: 1px solid #6366f1;
-  padding: 4px 8px;
-  font-size: 0.98rem;
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.evidence-upload-icon {
-  font-size: 1.15em;
-  margin-right: 6px;
-  vertical-align: middle;
-}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
 
-.back-btn {
-  font-size: 1.08rem;
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-weight: 700;
-  letter-spacing: 1px;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  color: #fff;
-  border: none;
-  border-radius: 12px;
-  padding: 0.55rem 1.3rem;
-  box-shadow: 0 2px 16px #38bdf888;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
-  overflow: hidden;
+  50% {
+    opacity: 0.7;
+  }
 }
 
-.recording-status-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: flex-start;
-  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
-  color: #23272b;
-  font-size: 1.08rem;
-  font-weight: 700;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px #38bdf822;
-  padding: 8px 22px;
-  margin: 18px 0 0 0;
-  min-width: 220px;
-  max-width: 340px;
-  position: relative;
-  z-index: 2;
-  border: none;
-  outline: none;
-  cursor: default;
-  transition: none;
-}
-.recording-status-bar .status-icon {
-  font-size: 1.3em;
-  margin-right: 6px;
-}
-.recording-status-bar .status-timer {
-  font-size: 1.08em;
-  font-weight: 600;
-  color: #2563eb;
-}
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
 
-.icon-btn {
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  box-shadow: 0 2px 12px #38bdf844;
-  margin-bottom: 0;
-  margin-top: 0;
-  margin-right: 8px;
-  cursor: pointer;
-  transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s;
-}
-.icon-btn:hover {
-  background: linear-gradient(90deg, #6366f1 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 6px 32px #6366f1cc;
-  transform: scale(1.08);
+  50% {
+    opacity: 0.3;
+  }
 }
 
-.header-actions-right-group {
-  position: absolute;
-  top: 18px;
-  right: 32px;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 10px;
-}
-.header-actions-icons {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  margin-top: 37px;
-}
+/* ===== RESPONSIVE DESIGN ===== */
+@media (max-width: 1200px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
 
-.guidance-tooltip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
-  color: #2563eb;
-  font-size: 1.08rem;
-  font-weight: 600;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px #38bdf844;
-  padding: 6px 14px;
-  margin-top: 8px;
-  margin-left: 0;
-  position: absolute;
-  left: 32px;
-  top: 60px;
-  z-index: 101;
-  animation: fadeInTooltip 0.7s cubic-bezier(.39,.58,.57,1);
-  white-space: nowrap;
-}
-@keyframes fadeInTooltip {
-  0% { opacity: 0; transform: translateY(-12px); }
-  100% { opacity: 1; transform: translateY(0); }
+  .results-section {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
-.recording-indicator {
-  position: absolute;
-  top: 18px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: #ef4444;
-  color: #fff;
-  font-size: 1.15rem;
-  font-weight: 700;
-  padding: 8px 22px;
-  border-radius: 16px;
-  max-width: 1000px;
-  z-index: 10;
-  letter-spacing: 1px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  animation: fadeInRecording 0.5s cubic-bezier(.39,.58,.57,1);
-}
-@keyframes fadeInRecording {
-  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
-  100% { opacity: 1; transform: translateX(-50%) scale(1); }
+@media (max-width: 768px) {
+  .main-content-card {
+    margin: 16px;
+    border-radius: 20px;
+  }
+
+  .card-inner {
+    padding: 20px;
+  }
+
+  .header-inner {
+    padding: 0 16px;
+  }
+
+  .content-grid {
+    gap: 16px;
+  }
+
+  .results-section {
+    grid-template-columns: 1fr;
+  }
+
+  .answer-actions {
+    flex-direction: column;
+  }
+
+  .video-active,
+  .camera-placeholder {
+    height: 300px;
+  }
+
+  .evidence-sidebar,
+  .summary-sidebar {
+    width: 100%;
+    right: -100%;
+  }
 }
 
+@media (max-width: 480px) {
+  .py-detect-title-header {
+    font-size: 18px;
+    letter-spacing: 1px;
+  }
+
+  .header-actions-right-group {
+    gap: 12px;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .back-btn span:last-child {
+    display: none;
+  }
+
+  .back-btn {
+    padding: 10px 15px;
+    font-size: 13px;
+  }
+
+  .evidence-btn,
+  .summary-btn {
+    width: 40px;
+    height: 40px;
+  }
+
+  .main-content-card {
+    margin: 8px;
+    border-radius: 16px;
+  }
+}
 

src/app/py-detect/py-detect.component.html

@@ -1,8 +1,8 @@
-<!-- Modern UI header with logo and PyDetect title -->
-<div class="site-header">
+<!-- Header -->
+<header class="site-header">
   <div class="header-inner">
     <div class="logo-cluster">
-      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
+      <span (click)="navigateHome()" style="cursor:pointer">
         <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
       </span>
       <div class="py-detect-title-header">
@@ -19,218 +19,340 @@
     </div>
     <div class="header-actions-right-group">
       <button class="back-btn" (click)="navigateBackToCaseDetails()">
-        <span class="back-icon">←</span> Back to Case Details
+        <i class="fas fa-arrow-left"></i>
+        <span>Back to Case Details</span>
       </button>
       <div class="header-actions-icons">
-        <button class="icon-btn" (click)="showEvidencePanel = !showEvidencePanel" title="Upload Evidence">
+        <button class="evidence-btn" (click)="showEvidencePanel = !showEvidencePanel" title="Upload Evidence">
           <i class="fas fa-file-upload"></i>
         </button>
-        <button class="icon-btn" (click)="showSummaryPanel = !showSummaryPanel" title="Investigation Summary">
+        <button class="summary-btn" (click)="showSummaryPanel = !showSummaryPanel" title="Investigation Summary">
           <i class="fas fa-clipboard-list"></i>
         </button>
       </div>
     </div>
   </div>
-</div>
-<!-- Header action bar with buttons and divider line -->
-<div class="header-action-bar">
-  <div class="header-action-left" style="position:relative;">
-  <button class="small-btn" (click)="onStartInvestigation()">
-      <i class="fas fa-search"></i> Start Investigation
-    </button>
-    <div *ngIf="currentQuestionIndex < 0" class="guidance-tooltip">
-      <span style="font-size:1.3em;">💡</span>
-      Click Start Investigation to activate camera and begin questioning.
-    </div>
-  </div>
-  </div>
-<div class="header-divider-line"></div>
-<!-- Investigation Summary Toggle Button (moved below header, above camera box) -->
-<main class="main-flex-layout">
-  <!-- Left Panel: Case Info + Question -->
-  <section class="left-panel">
-    <div class="animated-divider"></div>
-    <!-- Remove old question/status block, keep only the new decorated card -->
-    <!-- In tts-question-card, show AI question if available -->
-<div class="tts-question-card">
-  <div class="tts-question-title">Question {{ currentQuestionIndex + 1 }}</div>
-  <div class="tts-question-text">
-    <ng-container *ngIf="questions.length > 0; else noQuestion">
-      {{ questions[currentQuestionIndex] }}
-    </ng-container>
-    <ng-template #noQuestion>
-      <span *ngIf="currentQuestionText">{{ currentQuestionText }}</span>
-      <span *ngIf="!currentQuestionText">No question available.</span>
-    </ng-template>
-  </div>
-  <div *ngIf="infoText" class="tts-status-row">{{ infoText }}</div>
-
-  <!-- Manual answer input for testing -->
-      <div class="answer-section">
-  <div class="answer-card" style="background: #f8fbff; border-radius: 12px; box-shadow: 0 2px 8px #0001; padding: 18px 20px; margin-top: 10px; display: flex; flex-direction: column; gap: 18px; max-width: 650px; width: 100%;">
-          <label for="answerInput" style="font-weight: 500; margin-bottom: 4px; color: #2a3b5c;">Your Answer:</label>
-          <textarea id="answerInput" [(ngModel)]="textAnswer" (focus)="captureTextStart()" class="answer-input" placeholder="Type or speak your answer here..." rows="4" maxlength="3000" style="width: 100%; font-size: 1.08em; border-radius: 8px; border: 1px solid #bcd0ee; padding: 10px; resize: vertical; background: #fff; box-shadow: 0 1px 4px #0001; min-height: 60px;"></textarea>
-          <div style="display: flex; gap: 10px; margin-top: 6px;">
-            <button (click)="submitCombinedAnswer()" class="small-btn" style="background: linear-gradient(90deg,#3a8bfd,#6ad1ff); color: #fff; border-radius: 6px; font-weight: 500; padding: 7px 18px; border: none; box-shadow: 0 1px 4px #0001; cursor: pointer;">Submit Answer</button>
-            <button (click)="toggleVoiceRecording()" class="mic-btn" style="background: #fff; color: #3a8bfd; border-radius: 6px; font-weight: 500; padding: 7px 18px; border: 1px solid #3a8bfd; box-shadow: 0 1px 4px #0001; cursor: pointer;">
-              <span *ngIf="!isVoiceRecording">🎤 Start Recording</span>
-              <span *ngIf="isVoiceRecording">⏹️ Stop Recording</span>
+</header>
+
+<!-- Main Content Card -->
+<div class="main-content-card">
+  <div class="card-inner">
+    <div class="content-grid">
+      <!-- Left Column -->
+      <div class="left-panel">
+        <!-- Guidance Banner -->
+        <div *ngIf="currentQuestionIndex < 0" class="guidance-banner">
+          <div class="guidance-content">
+            <div class="guidance-icon">
+              <i class="fas fa-lightbulb"></i>
+            </div>
+            <div class="guidance-text">
+              <h3>Ready to Begin Investigation</h3>
+              <p>Click "Start Investigation" to activate camera and begin questioning</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Start Investigation Button -->
+        <button class="start-investigation-btn" (click)="onStartInvestigation()">
+          <i class="fas fa-search"></i>
+          Start Investigation
+        </button>
+
+        <!-- Question Section -->
+        <div class="question-section">
+          <div class="question-header">
+            <div class="question-badge">Question {{ currentQuestionIndex + 1 }}</div>
+            <div class="status-indicator" *ngIf="infoText">
+              <i class="fas fa-info-circle"></i>
+              {{ infoText }}
+            </div>
+          </div>
+          <div class="question-content">
+            <h3>Current Question</h3>
+            <div class="question-text">
+              <ng-container *ngIf="questions.length > 0 && currentQuestionIndex >= 0">
+                {{ questions[currentQuestionIndex] }}
+              </ng-container>
+              <ng-container *ngIf="!questions.length || currentQuestionIndex < 0">
+                <span *ngIf="currentQuestionText">{{ currentQuestionText }}</span>
+                <span *ngIf="!currentQuestionText" class="no-question">
+                  Awaiting first question. Click "Start Investigation" to begin.
+                </span>
+              </ng-container>
+            </div>
+          </div>
+        </div>
+
+        <!-- Answer Section -->
+        <div class="answer-section">
+          <h3>Your Answer</h3>
+          <textarea id="answerInput"
+                    [(ngModel)]="textAnswer"
+                    (focus)="captureTextStart()"
+                    class="answer-input"
+                    placeholder="Type or speak your answer here..."
+                    rows="5"
+                    maxlength="3000">
+          </textarea>
+
+          <div class="answer-actions">
+            <button (click)="submitCombinedAnswer()" class="btn-primary">
+              <i class="fas fa-paper-plane"></i>
+              Submit Answer
             </button>
+            <button (click)="toggleVoiceRecording()" class="btn-secondary">
+              <i class="fas fa-microphone"></i>
+              <span *ngIf="!isVoiceRecording">Start Recording</span>
+              <span *ngIf="isVoiceRecording">Stop Recording</span>
+            </button>
+          </div>
+
+          <div *ngIf="isVoiceRecording" class="recording-status">
+            <div class="recording-dot"></div>
+            <span>Recording... Speak now</span>
           </div>
-          <div *ngIf="isVoiceRecording" class="voice-hint" style="color: #e74c3c; font-weight: 500; margin-top: 4px;">🎤 Recording... Speak now.</div>
-          <!-- Results Section: Truth Score, Face Detection, Involvement -->
-          <div class="results-section" style="display: flex; flex-direction: column; gap: 16px; margin-top: 10px;">
-            <div *ngIf="truthScore !== null" class="result-card" style="background: #e0f7fa; border-radius: 10px; box-shadow: 0 1px 6px #38bdf822; padding: 12px 16px; margin-bottom: 0;">
-              <div style="display: flex; align-items: center; gap: 10px;">
-                <i class="fas fa-check-circle" style="color: #38bdf8; font-size: 1.3em;"></i>
-                <span style="font-weight: 600; color: #2563eb; font-size: 1.08em;">Truth Score</span>
-                <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ truthScore }}</span>
+        </div>
+
+        <!-- Results Section -->
+        <div class="results-section">
+          <!-- Truth Score -->
+          <div *ngIf="truthScore !== null" class="result-card">
+            <div class="result-header">
+              <div class="result-icon truth">
+                <i class="fas fa-check-circle"></i>
               </div>
+              <div class="result-title">Truth Score</div>
+              <div class="result-value">{{ truthScore }}</div>
             </div>
-            <div *ngIf="faceDetectionScore !== null" class="result-card" style="background: #fffde7; border-radius: 10px; box-shadow: 0 1px 6px #ffe08244; padding: 12px 16px; margin-bottom: 0;">
-              <div style="display: flex; align-items: center; gap: 10px;">
-                <i class="fas fa-user-check" style="color: #ff9800; font-size: 1.3em;"></i>
-                <span style="font-weight: 600; color: #ff9800; font-size: 1.08em;">Face Detection Score</span>
-                <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ faceDetectionScore }}</span>
+          </div>
+
+          <!-- Face Detection -->
+          <div *ngIf="faceDetectionScore !== null" class="result-card">
+            <div class="result-header">
+              <div class="result-icon face">
+                <i class="fas fa-user-check"></i>
               </div>
+              <div class="result-title">Face Detection</div>
+              <div class="result-value">{{ faceDetectionScore }}</div>
             </div>
-            <div *ngIf="involvementScore !== null" class="result-card" style="background: #f3e8ff; border-radius: 10px; box-shadow: 0 1px 6px #a78bfa44; padding: 12px 16px; margin-bottom: 0;">
-              <div style="font-weight:600;color:#6d28d9;display:flex;align-items:center;gap:8px;">
-                <i class="fas fa-user-tag" style="color: #6d28d9; font-size: 1.3em;"></i>
-                <span>Involvement Score</span>
-                <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ involvementScore | number:'1.1-1' }}</span>
+          </div>
+
+          <!-- Involvement Score -->
+          <div *ngIf="involvementScore !== null" class="result-card">
+            <div class="result-header">
+              <div class="result-icon involvement">
+                <i class="fas fa-user-tag"></i>
               </div>
-              <div style="flex:1;background:#e0ecf8;height:14px;border-radius:6px;overflow:hidden;margin-top:8px;">
-                <div [style.width]="involvementScore + '%'" [style.background]="'linear-gradient(90deg,#4caf50,#ff9800,#f44336)'" style="height:100%;"></div>
+              <div class="result-title">Involvement Score</div>
+              <div class="result-value">{{ involvementScore | number:'1.1-1' }}</div>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" [style.width]="involvementScore + '%'"></div>
+            </div>
+
+            <div *ngIf="involvementCues.length" class="cues-container">
+              <span *ngFor="let cue of involvementCues" class="cue-tag">
+                {{ cue.replace('_cue','').replace('_',' ') }}
+              </span>
+            </div>
+
+            <div *ngIf="bodyLanguageMeaning || bodyLanguageExplanation" style="margin-top: 12px; font-size: 12px; color: #64748b;">
+              <div *ngIf="bodyLanguageMeaning" style="margin-bottom: 4px;">
+                <strong>Body Language:</strong> {{ bodyLanguageMeaning }}
               </div>
-              <div *ngIf="involvementCues.length" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;">
-                <span *ngFor="let cue of involvementCues" style="background:#3a8bfd11;color:#1d3e63;padding:4px 10px;border:1px solid #3a8bfd33;border-radius:16px;font-size:0.75rem;font-weight:500;">{{ cue.replace('_cue','').replace('_',' ') }}</span>
+              <div *ngIf="bodyLanguageExplanation">
+                <strong>Analysis:</strong> {{ bodyLanguageExplanation }}
               </div>
-              <div *ngIf="dominantInvestigativeExpression" style="margin-top:4px;font-size:0.75rem;color:#445;">Dominant Investigative Expression: <strong>{{ dominantInvestigativeExpression }}</strong></div>
-              <div class="body-language-explanation" *ngIf="bodyLanguageMeaning || bodyLanguageExplanation">
-                <span *ngIf="bodyLanguageMeaning" class="explanation-label">Body Language Meaning:</span>
-                <span *ngIf="bodyLanguageMeaning" class="explanation-text">{{ bodyLanguageMeaning }}</span><br *ngIf="bodyLanguageMeaning && bodyLanguageExplanation">
-                <span *ngIf="bodyLanguageExplanation" class="explanation-label">Body Language Explanation:</span>
-                <span *ngIf="bodyLanguageExplanation" class="explanation-text">{{ bodyLanguageExplanation }}</span>
+            </div>
+          </div>
+
+          <!-- FER Emotion -->
+          <div *ngIf="ferEmotion" class="result-card">
+            <div class="result-header">
+              <div class="result-icon emotion">
+                <i class="fas fa-smile"></i>
               </div>
-             </div>
-             <div *ngIf="ferEmotion" class="result-card" style="background: #e3f6ff; border-radius: 10px; box-shadow: 0 1px 6px #38bdf822; padding: 12px 16px; margin-bottom: 0;">
-               <div style="display: flex; align-items: center; gap: 10px;">
-                 <i class="fas fa-smile" style="color: #38bdf8; font-size: 1.3em;"></i>
-                 <span style="font-weight: 600; color: #2563eb; font-size: 1.08em;">Emotion (FER)</span>
-                 <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ ferEmotion }}</span>
-               </div>
+              <div class="result-title">Emotion (FER)</div>
+              <div class="result-value">{{ ferEmotion }}</div>
             </div>
           </div>
-          <div *ngIf="guidanceCommand" style="margin-top:6px;font-size:0.72rem;color:#555;background:#ffeecd;padding:6px 8px;border-radius:6px;box-shadow:0 1px 3px #0001;">Guidance: {{ guidanceCommand }}</div>
         </div>
       </div>
-</div>
-  </section>
-  <!-- Right Panel: Video + Transcript -->
-  <section class="right-panel">
-    <div class="video-preview">
-      <ng-container *ngIf="!videoStream">
-        <div class="camera-inactive-block">
-          <i class="fas fa-camera camera-placeholder-icon"></i>
-          <div class="camera-inactive-title">Camera Inactive</div>
-          <div class="camera-inactive-sub">Click "Start Investigation" to begin video recording</div>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="videoStream">
-  <video #videoElement [srcObject]="videoStream" autoplay muted playsinline class="camera-video"></video>
-        <div *ngIf="isRecording && currentQuestionIndex >= 0 && currentQuestionIndex < totalQuestions" class="recording-indicator">
-          <span style="font-size:1.3em;">🔴</span> Recording...
-        </div>
-        <div class="video-status stylish-font">{{ videoStatus }}</div>
-        <div class="waveform-animation" *ngIf="isRecording">
-          <span></span><span></span><span></span><span></span><span></span>
-        </div>
-      </ng-container>
-    </div>
-    <div class="section-line"></div>
-    <div class="transcript-panel">
-      <div class="transcript-title">Transcription (Live):</div>
-      <div class="transcript-scrollable">
-        <div *ngFor="let line of transcriptLines" class="transcript-line">{{ line }}</div>
+
+      <!-- Right Column -->
+      <div class="right-panel">
+        <!-- Camera Section -->
+        <div class="camera-section">
+          <ng-container *ngIf="!videoStream">
+            <div class="camera-placeholder">
+              <div class="camera-icon">
+                <i class="fas fa-video"></i>
+              </div>
+              <h3>Camera Inactive</h3>
+              <p>Click "Start Investigation" to begin video recording and analysis</p>
+            </div>
+          </ng-container>
+
+          <ng-container *ngIf="videoStream">
+            <div class="video-active">
+              <video #videoElement [srcObject]="videoStream" autoplay muted playsinline class="camera-video"></video>
+              <div *ngIf="isRecording && currentQuestionIndex >= 0 && currentQuestionIndex < totalQuestions" class="recording-overlay">
+                <i class="fas fa-circle" style="font-size: 8px;"></i>
+                LIVE RECORDING
+              </div>
+            </div>
+          </ng-container>
+        </div>
+
+        <!-- Transcription Section -->
+        <div class="transcription-section">
+          <div class="transcription-header">
+            <h3>
+              <i class="fas fa-comments"></i>
+              Transcription
+              <span class="live-badge">LIVE</span>
+            </h3>
+          </div>
+          <div class="transcription-content">
+            <div *ngFor="let line of transcriptLines" class="transcription-line">
+              {{ line }}
+            </div>
+            <div *ngIf="!transcriptLines.length" class="transcription-line" style="text-align: center; color: #94a3b8;">
+              <i class="fas fa-microphone-alt"></i>
+              <div style="margin-top: 8px;">Waiting for speech input...</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Final Action -->
+        <div class="final-action">
+          <button class="evaluate-btn" (click)="navigateToValidationPage()">
+            <i class="fas fa-check-circle"></i>
+            Submit & Evaluate
+          </button>
+        </div>
       </div>
     </div>
-    <button class="submit-evaluate-btn" (click)="navigateToValidationPage()">
-      Submit & Evaluate
-    </button>
-  <!-- <a *ngIf="recordedVideoUrl" [href]="recordedVideoUrl" download="investigation-video.webm" class="download-btn" style="margin-left: 12px; background: #3a8bfd; color: #fff; padding: 10px 22px; border-radius: 8px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 4px #0001; vertical-align: middle;">Download Video</a> -->
-  </section>
-</main>
-<!-- Evidence Panel Sidebar (directly below button bar) -->
+  </div>
+</div>
+
+<!-- Evidence Sidebar -->
 <div class="evidence-sidebar" [class.open]="showEvidencePanel">
-  <div class="evidence-title-bar">
-    <span class="evidence-title">Evidence Panel</span>
-    <button class="evidence-close-btn" (click)="showEvidencePanel = false" title="Close">
+  <div class="sidebar-header">
+    <div class="sidebar-title">
+      <i class="fas fa-file-upload"></i>
+      Evidence Panel
+    </div>
+    <button class="close-btn" (click)="showEvidencePanel = false" title="Close">
       <i class="fas fa-times"></i>
     </button>
   </div>
-  <div class="evidence-form-card">
+  <div class="sidebar-content">
     <form class="evidence-upload-form" (submit)="$event.preventDefault(); uploadDocument()">
-      <div class="evidence-upload-row">
-        <label for="evidenceFileDoc" class="evidence-upload-label">
-          <i class="fas fa-file-upload evidence-field-icon"></i>
-          <span>Upload Document</span>
-        </label>
-        <input id="evidenceFileDoc" type="file" (change)="onEvidenceFileSelect($event, 'document')" />
+      <div style="margin-bottom: 24px;">
+        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1e293b;">Upload Document</label>
+        <input type="file" (change)="onEvidenceFileSelect($event, 'document')"
+               style="width: 100%; padding: 12px; border: 2px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; cursor: pointer;">
       </div>
-      <div class="evidence-upload-row">
-        <label for="evidenceFilePhoto" class="evidence-upload-label">
-          <i class="fas fa-image evidence-field-icon"></i>
-          <span>Upload Photo</span>
-        </label>
-        <input id="evidenceFilePhoto" type="file" accept="image/*" (change)="onEvidenceFileSelect($event, 'photo')" />
+      <div style="margin-bottom: 24px;">
+        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1e293b;">Upload Photo</label>
+        <input type="file" accept="image/*" (change)="onEvidenceFileSelect($event, 'photo')"
+               style="width: 100%; padding: 12px; border: 2px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; cursor: pointer;">
       </div>
-      <div class="evidence-upload-row">
-        <label for="evidenceFileRec" class="evidence-upload-label">
-          <i class="fas fa-microphone evidence-field-icon"></i>
-          <span>Upload Recording</span>
-        </label>
-        <input id="evidenceFileRec" type="file" accept="audio/*,video/*" (change)="onEvidenceFileSelect($event, 'recording')" />
+      <div style="margin-bottom: 24px;">
+        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1e293b;">Upload Recording</label>
+        <input type="file" accept="audio/*,video/*" (change)="onEvidenceFileSelect($event, 'recording')"
+               style="width: 100%; padding: 12px; border: 2px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; cursor: pointer;">
       </div>
-      <hr class="evidence-divider" />
-      <div class="evidence-summary-row">
-        <label for="evidenceSummary" class="evidence-summary-label">Remark</label>
-  <textarea id="evidenceSummary" [(ngModel)]="evidenceSummary" [ngModelOptions]="{standalone: true}" rows="3" placeholder="Enter Remark..." class="evidence-summary-textarea"></textarea>
+
+      <div style="margin-bottom: 24px;">
+        <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #1e293b;">Remarks</label>
+        <textarea [(ngModel)]="evidenceSummary" [ngModelOptions]="{standalone: true}"
+                  rows="4" placeholder="Enter any additional remarks..."
+                  style="width: 100%; padding: 12px; border: 2px solid #cbd5e1; border-radius: 10px; background: white; font-family: inherit;"></textarea>
       </div>
-      <button type="submit" class="evidence-submit-btn">Submit</button>
+
+      <button type="submit" class="btn-primary" style="width: 100%;">
+        <i class="fas fa-paper-plane"></i>
+        Submit Evidence
+      </button>
     </form>
   </div>
 </div>
+
 <!-- Summary Sidebar -->
 <div class="summary-sidebar" [class.open]="showSummaryPanel">
-  <div class="summary-title-bar">
-    <span class="summary-title">Investigation Summary</span>
-    <button class="summary-close-btn" (click)="showSummaryPanel = false" title="Close">
+  <div class="sidebar-header">
+    <div class="sidebar-title">
+      <i class="fas fa-clipboard-list"></i>
+      Investigation Summary
+    </div>
+    <button class="close-btn" (click)="showSummaryPanel = false" title="Close">
       <i class="fas fa-times"></i>
     </button>
   </div>
-  <div class="summary-content-card">
-    <div class="case-section-title">Case Details</div>
-    <div class="case-row"><span class="case-label">Case ID:</span> <span class="case-value">{{ caseId }}</span></div>
-    <div class="case-row"><span class="case-label">Crime Type:</span> <span class="case-value">{{ crimeType }}</span></div>
-    <div class="case-row"><span class="case-label">Date & Time:</span> <span class="case-value">{{ dateTime }}</span></div>
-    <div class="case-row"><span class="case-label">Location:</span> <span class="case-value">{{ location }}</span></div>
-    <div class="divider-line"></div>
-    <div class="case-section-title">Person Details</div>
-    <div class="case-row"><span class="case-label">Suspect Name:</span> <span class="case-value">{{ suspectName }}</span></div>
-    <div class="case-row"><span class="case-label">Investigation Officer:</span> <span class="case-value">{{ investigationOfficer }}</span></div>
-    <div class="divider-line"></div>
-    <div class="case-section-title">Progress Details</div>
-    <div class="case-row"><span class="case-label">Status:</span> <span class="case-value">{{ statusText }}</span></div>
-    <div class="case-row"><span class="case-label">Progress:</span> <span class="case-value">{{progress}}% (Stage: {{ progressStage }})</span></div>
-    <div class="case-row"><span class="case-label">Session Time:</span> <span class="case-value">{{ sessionTime }}</span></div>
+  <div class="sidebar-content">
+    <div style="margin-bottom: 24px;">
+      <h4 style="color: #2563eb; margin-bottom: 12px; font-size: 14px; font-weight: 600;">Case Details</h4>
+      <div style="background: #f0f9ff; border-radius: 10px; padding: 16px;">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #475569; font-size: 13px;">Case ID:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ caseId }}</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #475569; font-size: 13px;">Crime Type:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ crimeType }}</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #475569; font-size: 13px;">Date & Time:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ dateTime }}</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #475569; font-size: 13px;">Location:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ location }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div style="margin-bottom: 24px;">
+      <h4 style="color: #2563eb; margin-bottom: 12px; font-size: 14px; font-weight: 600;">Person Details</h4>
+      <div style="background: #f0f9ff; border-radius: 10px; padding: 16px;">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #475569; font-size: 13px;">Suspect Name:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ suspectName }}</span>
+        </div>
+        <div style="display: flex; justify-content: space-between;">
+          <span style="color: #475569; font-size: 13px;">Investigation Officer:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ investigationOfficer }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h4 style="color: #2563eb; margin-bottom: 12px; font-size: 14px; font-weight: 600;">Progress Details</h4>
+      <div style="background: #f0f9ff; border-radius: 10px; padding: 16px;">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #475569; font-size: 13px;">Status:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ statusText }}</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+          <span style="color: #475569; font-size: 13px;">Progress:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{progress}}% ({{ progressStage }})</span>
+        </div>
+        <div style="display: flex; justify-content: space-between;">
+          <span style="color: #475569; font-size: 13px;">Session Time:</span>
+          <span style="font-weight: 600; color: #1e293b;">{{ sessionTime }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 
-<!-- Blur background when evidence or summary panel is open -->
-<div class="blur-bg" [class.hide]="!showEvidencePanel && !showSummaryPanel"></div>
+<!-- Blur Background -->
+<div class="blur-bg" [class.active]="showEvidencePanel || showSummaryPanel"></div>
 
+<!-- Footer -->
 <footer>
   <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
 </footer>
-

src/app/py-detect/py-detect.component.ts

@@ -197,70 +197,70 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   ttsEnabled: boolean = false;
   isListening: boolean = false;
   speechRecognition: any = null;
-          // Combined answer submission: prefer text box, fallback to transcript
-          public submitCombinedAnswer() {
-            // Accept answer from text box or voice transcript
-            let answerText = (this.textAnswer && this.textAnswer.trim()) ? this.textAnswer.trim() : (this.transcriptSoFar && this.transcriptSoFar.trim()) ? this.transcriptSoFar.trim() : '';
-            if (!answerText || !this.sessionId || !this.questions[this.currentQuestionIndex]) {
-              this.infoText = 'Please provide your answer before submitting.';
-              return;
-            }
-            this.stopAudioRecording();
-            this.infoText = 'Submitting answer...';
-            this.textAnswer = '';
-            this.transcriptSoFar = '';
-            const endTs = Date.now();
-            this.answerEndAt = endTs;
-            if (!this.answerStartAt) this.answerStartAt = this.questionWindowStartAt || endTs;
-            const durationMs = this.answerEndAt - this.answerStartAt;
-            this.stopFrameStreaming();
-            this.pyDetectService.submitResponse(
-              this.sessionId,
-              answerText,
-              this.questions[this.currentQuestionIndex],
-              {
-                answer_start_at: this.answerStartAt,
-                answer_end_at: this.answerEndAt,
-                duration_ms: durationMs,
-                mode: this.answerMode
-              }
-            ).subscribe({
-              next: async (res) => {
-                // Extract truth score if present
-                this.truthScore = (res && (res.truth_score || res.score)) ? Number(res.truth_score || res.score) : null;
-                this.infoText = 'Answer submitted.' + (this.truthScore !== null ? ` Truth Score: ${this.truthScore}` : '');
-                // Pull involvement metrics
-                this.fetchLatestInvolvement();
-                // Fetch next question from backend
-                const response = await this.pyDetectService.askQuestion(
-                  this.sessionId,
-                  this.crimeType,
-                  this.briefDescription
-                ).toPromise();
-                if (response && response.question) {
-                  this.questions.push(response.question);
-                  this.currentQuestionIndex++;
-                  this.questionNumber = this.currentQuestionIndex + 1;
-                  this.cdr.detectChanges();
-                  await this.startCamera();
-                  await this.startVideoRecording();
-                  await this.speakQuestion(response.question);
-                  // Restart window for next question
-                  this.startQuestionWindow();
-                  // Reset answer timing
-                  this.answerStartAt = null;
-                  this.answerEndAt = null;
-                  this.answerMode = 'text';
-                } else {
-                  this.infoText = 'No more questions.';
-                  this.showSummary = true;
-                }
-              },
-              error: () => {
-                this.infoText = 'Error submitting answer.';
-              }
-            });
-          }
+  // Combined answer submission: prefer text box, fallback to transcript
+  public submitCombinedAnswer() {
+    // Accept answer from text box or voice transcript
+    let answerText = (this.textAnswer && this.textAnswer.trim()) ? this.textAnswer.trim() : (this.transcriptSoFar && this.transcriptSoFar.trim()) ? this.transcriptSoFar.trim() : '';
+    if (!answerText || !this.sessionId || !this.questions[this.currentQuestionIndex]) {
+      this.infoText = 'Please provide your answer before submitting.';
+      return;
+    }
+    this.stopAudioRecording();
+    this.infoText = 'Submitting answer...';
+    this.textAnswer = '';
+    this.transcriptSoFar = '';
+    const endTs = Date.now();
+    this.answerEndAt = endTs;
+    if (!this.answerStartAt) this.answerStartAt = this.questionWindowStartAt || endTs;
+    const durationMs = this.answerEndAt - this.answerStartAt;
+    this.stopFrameStreaming();
+    this.pyDetectService.submitResponse(
+      this.sessionId,
+      answerText,
+      this.questions[this.currentQuestionIndex],
+      {
+        answer_start_at: this.answerStartAt,
+        answer_end_at: this.answerEndAt,
+        duration_ms: durationMs,
+        mode: this.answerMode
+      }
+    ).subscribe({
+      next: async (res) => {
+        // Extract truth score if present
+        this.truthScore = (res && (res.truth_score || res.score)) ? Number(res.truth_score || res.score) : null;
+        this.infoText = 'Answer submitted.' + (this.truthScore !== null ? ` Truth Score: ${this.truthScore}` : '');
+        // Pull involvement metrics
+        this.fetchLatestInvolvement();
+        // Fetch next question from backend
+        const response = await this.pyDetectService.askQuestion(
+          this.sessionId,
+          this.crimeType,
+          this.briefDescription
+        ).toPromise();
+        if (response && response.question) {
+          this.questions.push(response.question);
+          this.currentQuestionIndex++;
+          this.questionNumber = this.currentQuestionIndex + 1;
+          this.cdr.detectChanges();
+        //  await this.startCamera();
+          await this.startVideoRecording();
+          await this.speakQuestion(response.question);
+          // Restart window for next question
+          this.startQuestionWindow();
+          // Reset answer timing
+          this.answerStartAt = null;
+          this.answerEndAt = null;
+          this.answerMode = 'text';
+        } else {
+          this.infoText = 'No more questions.';
+          this.showSummary = true;
+        }
+      },
+      error: () => {
+        this.infoText = 'Error submitting answer.';
+      }
+    });
+  }
   public stopAudioRecording() {
     if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
       this.mediaRecorder.stop();
@@ -269,7 +269,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
       this.infoText = 'Voice recording stopped.';
       // Stop speech recognition when recording stops
       if (this.recognition) {
-        try { this.recognition.stop(); } catch {}
+        try { this.recognition.stop(); } catch { }
       }
     }
   }
@@ -491,8 +491,8 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   private async fetchNextQuestion(): Promise<string> {
     // Replace this with HTTP call to your backend if needed.
     // Example: const { question } = await this.http.get<{question:string}>('/api/next-question').toPromise();
-  // Legacy fetchNextQuestion logic removed. Use backend-driven workflow only.
-  return '';
+    // Legacy fetchNextQuestion logic removed. Use backend-driven workflow only.
+    return '';
   }
 
   // ======== TTS (question playback) ========
@@ -535,7 +535,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
       audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true },
       video: false
     });
-  // ...existing code...
+    // ...existing code...
 
     // 2) prepare MediaRecorder
     const mime = this.chooseMimeType();
@@ -567,7 +567,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     this.stopAnalyser();
     this.stopRecognition();
     this.cleanupMediaStream();
-  // ...existing code...
+    // ...existing code...
 
     // 7) build audio URL
     const blob = new Blob(this.audioChunks, { type: mime });
@@ -586,7 +586,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   private waitForSilenceOrContinue() {
     if (this.silenceTimeout) clearTimeout(this.silenceTimeout);
     this.silenceTimeout = setTimeout(() => {
-  // ...existing code...
+      // ...existing code...
     }, 5002); // Timeout after 5 seconds of silence
   }
 
@@ -613,7 +613,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     this.sourceNode.connect(this.analyser);
 
     // Use correct constructor for Float32Array
-  this.analyserBuffer = new Float32Array(this.analyser.fftSize);
+    this.analyserBuffer = new Float32Array(this.analyser.fftSize);
 
     const tick = () => {
       if (!this.analyser || !this.analyserBuffer) return;
@@ -723,7 +723,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     };
   }
 
-    private removeFillerWords(text: string): string {
+  private removeFillerWords(text: string): string {
     const fillerWords = ['um', 'ah', 'like', 'you know', 'so', 'actually', 'basically'];
     const regex = new RegExp(`\\b(${fillerWords.join('|')})\\b`, 'gi');
     return text.replace(regex, '').replace(/\s+/g, ' ').trim();  // Clean extra spaces after removal
@@ -894,18 +894,18 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   public async onStartInvestigation() {
     this.isLoading = true;
     this.infoText = 'Starting investigation...';
-    await this.startCamera();
+   // await this.startCamera();
     await this.startVideoRecording();
     await this.startSession();
     // Ensure questions are loaded and index is set
     // Use fallback logic for brief description
     let briefDescriptionToSend = this.briefDescription?.trim() || '';
     if (!briefDescriptionToSend) {
-      briefDescriptionToSend = 
-        sessionStorage.getItem('briefDescription')?.trim() || 
-        this.caseData?.briefDescription?.trim() || 
-        this.caseData?.police?.information?.trim() || 
-        this.caseData?.crime?.trim() || 
+      briefDescriptionToSend =
+        sessionStorage.getItem('briefDescription')?.trim() ||
+        this.caseData?.briefDescription?.trim() ||
+        this.caseData?.police?.information?.trim() ||
+        this.caseData?.crime?.trim() ||
         '';
     }
     const response = await this.pyDetectService.askQuestion(
@@ -935,150 +935,150 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   }
 
   // Backend-driven session start and first question fetch
-public async startSession(): Promise<void> {
-  try {
-    this.isLoading = true;
-    if (this.voiceSupported) {
-      this.ttsEnabled = true;
-      setTimeout(() => {
-        this.speakQuestion('Investigation starting. I will ask you questions and you can respond using voice or text.');
-      }, 1000);
-    }
-    let briefDescriptionToSend = this.briefDescription?.trim() || '';
-    if (!briefDescriptionToSend) {
-      briefDescriptionToSend = 
-        sessionStorage.getItem('briefDescription')?.trim() || 
-        this.caseData?.briefDescription?.trim() || 
-        this.caseData?.police?.information?.trim() || 
-        this.caseData?.crime?.trim() || 
-        '';
-    }
-    const sessionResponse = await this.pyDetectService.startSession(briefDescriptionToSend).toPromise();
-    this.sessionId = sessionResponse.session_id;
-    sessionStorage.setItem('sessionId', this.sessionId);
-    localStorage.setItem('sessionId', this.sessionId);
-    const caseData = this.caseData || {};
-    const caseDataToSend = {
-      ...caseData,
-      brief_description: briefDescriptionToSend
-    };
-    await this.pyDetectService.submitCaseDetails(
-      this.sessionId,
-      caseDataToSend,
-      briefDescriptionToSend
-    ).toPromise();
-    if (briefDescriptionToSend && briefDescriptionToSend.length > 0) {
-      const questionsResponse = await this.pyDetectService.askQuestion(
+  public async startSession(): Promise<void> {
+    try {
+      this.isLoading = true;
+      if (this.voiceSupported) {
+        this.ttsEnabled = true;
+        setTimeout(() => {
+          this.speakQuestion('Investigation starting. I will ask you questions and you can respond using voice or text.');
+        }, 1000);
+      }
+      let briefDescriptionToSend = this.briefDescription?.trim() || '';
+      if (!briefDescriptionToSend) {
+        briefDescriptionToSend =
+          sessionStorage.getItem('briefDescription')?.trim() ||
+          this.caseData?.briefDescription?.trim() ||
+          this.caseData?.police?.information?.trim() ||
+          this.caseData?.crime?.trim() ||
+          '';
+      }
+      const sessionResponse = await this.pyDetectService.startSession(briefDescriptionToSend).toPromise();
+      this.sessionId = sessionResponse.session_id;
+      sessionStorage.setItem('sessionId', this.sessionId);
+      localStorage.setItem('sessionId', this.sessionId);
+      const caseData = this.caseData || {};
+      const caseDataToSend = {
+        ...caseData,
+        brief_description: briefDescriptionToSend
+      };
+      await this.pyDetectService.submitCaseDetails(
         this.sessionId,
-        this.crimeType,
+        caseDataToSend,
         briefDescriptionToSend
       ).toPromise();
-      if (questionsResponse && questionsResponse.questions && questionsResponse.questions.length > 0) {
-        this.questions = questionsResponse.questions;
-        this.currentQuestion = this.questions[0];
-        this.currentQuestionIndex = 0;
-        this.questionCount = this.questions.length;
-  this.questionNumber = 1;
-        // Optionally, update UI to show the first question
-      } else {
-        this.questions = [];
-        this.currentQuestionIndex = -1;
+      if (briefDescriptionToSend && briefDescriptionToSend.length > 0) {
+        const questionsResponse = await this.pyDetectService.askQuestion(
+          this.sessionId,
+          this.crimeType,
+          briefDescriptionToSend
+        ).toPromise();
+        if (questionsResponse && questionsResponse.questions && questionsResponse.questions.length > 0) {
+          this.questions = questionsResponse.questions;
+          this.currentQuestion = this.questions[0];
+          this.currentQuestionIndex = 0;
+          this.questionCount = this.questions.length;
+          this.questionNumber = 1;
+          // Optionally, update UI to show the first question
+        } else {
+          this.questions = [];
+          this.currentQuestionIndex = -1;
+        }
       }
+      this.isSessionStarted = true;
+      this.investigationStarted = true;
+      this.investigationActive = true;
+      this.isLoading = false;
+    } catch (error) {
+      alert('Failed to connect to backend. Please check if the Flask server is running on port 5002.');
+      this.isLoading = false;
     }
-    this.isSessionStarted = true;
-    this.investigationStarted = true;
-    this.investigationActive = true;
-    this.isLoading = false;
-  } catch (error) {
-    alert('Failed to connect to backend. Please check if the Flask server is running on port 5002.');
-    this.isLoading = false;
-  }
   }
   public isVoiceRecording: boolean = false;
 
-    // Start audio recording and speech recognition
-    public async startAudioRecording() {
-      // Debounce: Prevent rapid start
-      if (this.isVoiceRecording) return;
-      // Clear previous answer before starting new recording
-      this.textAnswer = '';
-      console.log('[PyDetect] Voice recording started.');
-      try {
-        // Request microphone access
-        this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
-        // Setup MediaRecorder
-        const mimeType = this.chooseMimeType();
-        this.mediaRecorder = new MediaRecorder(this.mediaStream, { mimeType });
-        this.audioChunks = [];
-        this.mediaRecorder.ondataavailable = (e) => {
-          if (e.data && e.data.size > 0) this.audioChunks.push(e.data);
+  // Start audio recording and speech recognition
+  public async startAudioRecording() {
+    // Debounce: Prevent rapid start
+    if (this.isVoiceRecording) return;
+    // Clear previous answer before starting new recording
+    this.textAnswer = '';
+    console.log('[PyDetect] Voice recording started.');
+    try {
+      // Request microphone access
+      this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+      // Setup MediaRecorder
+      const mimeType = this.chooseMimeType();
+      this.mediaRecorder = new MediaRecorder(this.mediaStream, { mimeType });
+      this.audioChunks = [];
+      this.mediaRecorder.ondataavailable = (e) => {
+        if (e.data && e.data.size > 0) this.audioChunks.push(e.data);
+      };
+      this.mediaRecorder.onstop = () => {
+        console.log('[PyDetect] Voice recording stopped.');
+        // Stop speech recognition when recording stops
+        if (this.recognition) {
+          try { this.recognition.stop(); } catch { }
+        }
+        // UI feedback if no transcript
+        if (!this.transcriptSoFar) {
+          this.infoText = 'No voice detected. Please try again or type your answer.';
+        } else {
+          this.infoText = 'Voice recording stopped.';
+        }
+      };
+      this.mediaRecorder.start();
+      // Setup speech recognition
+      const Ctor = window.webkitSpeechRecognition || window.SpeechRecognition;
+      if (Ctor) {
+        this.recognition = new Ctor();
+        this.recognition.lang = 'en-IN';
+        this.recognition.continuous = true;
+        this.recognition.interimResults = false;
+        this.transcriptSoFar = '';
+        this.recognition.onstart = () => {
+          this.infoText = 'Listening...';
         };
-        this.mediaRecorder.onstop = () => {
-          console.log('[PyDetect] Voice recording stopped.');
-          // Stop speech recognition when recording stops
-          if (this.recognition) {
-            try { this.recognition.stop(); } catch {}
+        this.recognition.onresult = (event: any) => {
+          let finalText = '';
+          for (let i = event.resultIndex; i < event.results.length; i++) {
+            const result = event.results[i];
+            if (result.isFinal) {
+              finalText += result[0].transcript.trim();
+            }
           }
-          // UI feedback if no transcript
+          this.transcriptSoFar = finalText.trim();
+          this.textAnswer = this.transcriptSoFar;
+        };
+        this.recognition.onerror = (error: any) => {
+          this.infoText = 'Speech recognition error: ' + error.error;
+        };
+        this.recognition.onend = () => {
           if (!this.transcriptSoFar) {
             this.infoText = 'No voice detected. Please try again or type your answer.';
           } else {
             this.infoText = 'Voice recording stopped.';
           }
         };
-        this.mediaRecorder.start();
-        // Setup speech recognition
-        const Ctor = window.webkitSpeechRecognition || window.SpeechRecognition;
-        if (Ctor) {
-          this.recognition = new Ctor();
-          this.recognition.lang = 'en-IN';
-          this.recognition.continuous = true;
-          this.recognition.interimResults = false;
-          this.transcriptSoFar = '';
-          this.recognition.onstart = () => {
-            this.infoText = 'Listening...';
-          };
-          this.recognition.onresult = (event: any) => {
-            let finalText = '';
-            for (let i = event.resultIndex; i < event.results.length; i++) {
-              const result = event.results[i];
-              if (result.isFinal) {
-                finalText += result[0].transcript.trim();
-              }
-            }
-            this.transcriptSoFar = finalText.trim();
-            this.textAnswer = this.transcriptSoFar;
-          };
-          this.recognition.onerror = (error: any) => {
-            this.infoText = 'Speech recognition error: ' + error.error;
-          };
-          this.recognition.onend = () => {
-            if (!this.transcriptSoFar) {
-              this.infoText = 'No voice detected. Please try again or type your answer.';
-            } else {
-              this.infoText = 'Voice recording stopped.';
-            }
-          };
-          this.recognition.start();
-        } else {
-          this.infoText = 'Speech Recognition not supported.';
-        }
-        this.isVoiceRecording = true;
-      } catch (err) {
-        this.infoText = 'Could not start audio recording.';
+        this.recognition.start();
+      } else {
+        this.infoText = 'Speech Recognition not supported.';
       }
+      this.isVoiceRecording = true;
+    } catch (err) {
+      this.infoText = 'Could not start audio recording.';
+    }
+  }
+  public async toggleVoiceRecording() {
+    if (this.isVoiceRecording) {
+      this.stopAudioRecording();
+      this.isVoiceRecording = false;
+      this.infoText = 'Voice recording stopped.';
+    } else {
+      await this.startAudioRecording();
+      this.isVoiceRecording = true;
+      this.infoText = 'Voice recording started. Speak your answer.';
     }
-public async toggleVoiceRecording() {
-  if (this.isVoiceRecording) {
-    this.stopAudioRecording();
-    this.isVoiceRecording = false;
-    this.infoText = 'Voice recording stopped.';
-  } else {
-    await this.startAudioRecording();
-    this.isVoiceRecording = true;
-    this.infoText = 'Voice recording started. Speak your answer.';
   }
-}
 
-// Ensure the class is properly closed
+  // Ensure the class is properly closed
 }

src/app/recordpage/recordpage.component.css

@@ -1,2025 +1,1042 @@
-/* ===== Header ===== */
+/* ===== CSS Variables & Reset ===== */
 :root {
- --masthead-min-height:140px;
- --analytics-blue-height:110px;
- --primary-accent: #2563eb;
- --primary-accent-light: #38bdf8;
- --primary-accent-dark: #1e40af;
- --secondary-accent: #7c3aed;
- --card-radius:14px;
- --card-shadow:06px24px rgba(30,41,59,0.13);
- --section-gap:32px;
-}
-
-body, main.content {
- background: #f4f6fa;
- min-height:100vh;
- margin:0;
- overflow-y: auto;
- font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
- animation: fadeInPage0.7s cubic-bezier(0.4,0.2,0.2,1) both;
-}
-
-@keyframes fadeInPage {
- from { opacity:0; transform: translateY(32px); }
- to { opacity:1; transform: none; }
-}
-
-/* Card hover animation */
-.record-card, .summary-card, .section-block, .subgroup-block {
- transition: box-shadow 0.25s, transform 0.18s;
-}
-.record-card:hover, .summary-card:hover, .section-block:hover, .subgroup-block:hover {
- box-shadow:08px 32px #2563eb33,02px 8px #38bdf822;
- /*transform: translateY(-2px) scale(1.012);*/
-}
-
-/* Table row hover animation */
-.record-table tr {
- transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
-}
-.record-table tr:hover td {
- background: #e0f2fe;
- box-shadow:02px 12px #38bdf822;
- transform: scale(1.01);
-}
-
-/* Button and icon-btn animation */
-.btn, .icon-btn {
- transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
-}
-.btn:hover, .icon-btn:hover {
- transform: scale(1.08) rotate(-2deg);
- box-shadow:04px 16px #2563eb33;
+  --primary-blue: #1E3A8A;
+  --primary-blue-light: #2563eb;
+  --accent-green: #22c55e;
+  --accent-red: #ef4444;
+  --accent-purple: #7c3aed;
+  --text-dark: #1f2937;
+  --text-light: #6b7280;
+  --border-color: #e5e7eb;
+  --bg-light: #f8fafc;
+  --bg-white: #ffffff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-/* Modal fade/slide in */
-.modal-backdrop {
- animation: fadeInModalBg0.4s cubic-bezier(0.4,0.2,0.2,1) both;
-}
-@keyframes fadeInModalBg {
- from { opacity:0; }
- to { opacity:1; }
-}
-.modal {
- animation: slideInModal0.5s cubic-bezier(0.4,0.2,0.2,1) both;
-}
-@keyframes slideInModal {
- from { opacity:0; transform: translateY(-40px) scale(0.98); }
- to { opacity:1; transform: none; }
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: #f4f6fa;
 }
 
-/* Status badge pulse for Open */
-.status-label.status-open, .status-open {
- animation: pulseStatusOpen1.6s infinite alternate;
-}
-@keyframes pulseStatusOpen {
- from { box-shadow:0000px #22c55e44; }
- to { box-shadow:0008px #22c55e11; }
+/* ===== App Container ===== */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
 }
 
-/* Animated icons */
-.icon-btn .fa-spin, .summary-icon .fa-spin {
- animation: fa-spin1.2s infinite linear;
-}
-@keyframes fa-spin {
-0% { transform: rotate(0deg); }
-100% { transform: rotate(359deg); }
-}
-.icon-btn .fa-bounce, .summary-icon .fa-bounce {
- animation: fa-bounce1.2s infinite alternate;
-}
-@keyframes fa-bounce {
-0% { transform: translateY(0); }
-100% { transform: translateY(-8px); }
-}
-.icon-btn .fa-beat, .summary-icon .fa-beat {
- animation: fa-beat1.1s infinite alternate;
-}
-@keyframes fa-beat {
-0% { transform: scale(1); }
-100% { transform: scale(1.18); }
+/* ===== Header Styles ===== */
+.site-header {
+  background: linear-gradient(135deg, #011329 0%, #0a2540 100%);
+  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+  height: 60px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background: rgba(1, 19, 41, 0.95);
 }
 
-/* Subtle fade for overlays */
-.modal-blur-overlay {
- animation: fadeInModalBg0.4s cubic-bezier(0.4,0.2,0.2,1) both;
-}
+  .site-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
+    z-index: -1;
+  }
 
-/* Modern Searchbar animation */
-.modern-searchbar-form {
- transition: box-shadow 0.18s, transform 0.18s;
-}
-.modern-searchbar-form:focus-within {
- box-shadow:06px 24px #38bdf855;
- transform: scale(1.03);
-}
+  .site-header.scrolled {
+    height: 56px;
+    box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  }
 
-/* ===== Header ===== */
-:root {
-  --masthead-min-height: 140px;
-  --analytics-blue-height:110px; /* Default, can be overridden inline or in other CSS */
-  --primary-accent: #2563eb;
-  --primary-accent-light: #38bdf8;
-  --primary-accent-dark: #1e40af;
-  --secondary-accent: #7c3aed;
-  --card-radius:14px;
-  --card-shadow:06px24px rgba(30,41,59,0.13);
-  --section-gap:32px;
-}
-
-.masthead {
+.header-inner {
   display: flex;
   align-items: center;
-  gap: 24px;
-  padding: 24px 24px 12px;
-  min-height: var(--masthead-min-height);
-  background: transparent;
-  margin-bottom: 48px;
-}
-
-
-.logo {
-  width: 120px;
-  height: 120px;
-  margin-left: 0;
-  margin-top: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 40;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 32px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
 }
 
-.logo-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 120px;
-  height: 120px;
-  z-index: 100;
-  margin: 0;
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: -252px;
 }
 
-/* Add gap between logo and browser border */
-.logo-img {
-  width: 6vw;
-  position: fixed;
-  top: 21px;
-  left: 36px;
-  z-index: 300;
-  margin: 0;
-  background: #ffffff;
-  max-width: 4.2vw;
-  min-width: 56px;
-  height: auto;
+.logo-img-header {
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
-  padding: 4px;
-  box-shadow: 04px 10px rgba(0, 0, 0, 0.25);
-  transition: transform .25s ease;
+  background: white;
+  padding: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  transition: transform 0.2s;
 }
 
-/* Move Py-Detect text further down by increasing top value of .logo-title-row */
-.logo-title-row {
-  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%;
-}
+  .logo-img-header:hover {
+    transform: scale(1.05);
+  }
 
-.py-detect-title {
-  position: fixed;
-  margin-left: 97px;
-  margin-top: -228px;
-  text-align: left;
-  font-size: 3vw;
-  color: #38bdf8;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+.py-detect-title-header {
+  font-size: 28px;
   font-weight: 900;
-  letter-spacing: 6px;
-  background: none;
-  border: none;
-  box-shadow: none;
-  min-width: unset;
-  max-width: unset;
+  letter-spacing: 3px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
-  /* Py-Detect title: each letter with its own color */
-  .py-detect-title .py-letter.p {
+  .py-detect-title-header .py-letter.p,
+  .py-detect-title-header .py-letter.d,
+  .py-detect-title-header .py-letter.t,
+  .py-detect-title-header .py-letter.c {
     color: #e3f6ff;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-letter.y {
+  .py-detect-title-header .py-letter.y,
+  .py-detect-title-header .py-letter.e,
+  .py-detect-title-header .py-letter.e2,
+  .py-detect-title-header .py-letter.t2 {
     color: #38bdf8;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .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;
-  }
-
-.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;
-}
-
-.py-detect-title .py-letter.e {
-  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.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-shape {
   display: inline-block;
-  width: 18px;
+  width: 16px;
   height: 4px;
-  background: #38bdf8;
-  margin: 0 8px;
-  vertical-align: middle;
+  background: #e3f6ff;
+  margin: 0 6px;
   border-radius: 2px;
-  box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
-  border: 2px solid #23272b;
+  box-shadow: 0 0 6px #38bdf8;
 }
 
-/*.title {
-  font-weight: 800;
-  margin-bottom: 12px;
-}*/
-/* header tools */
-.toolbar {
+.header-actions-right {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  position: absolute;
-  right: 32px;
-  top: -211%;
-  transform: translateY(-50%);
-  width: auto;
-  margin-bottom: 0;
-  z-index: 2;
+  gap: 12px;
+  margin-right: -250px;
 }
 
-.search {
-  padding: 10px;
-  border: 1px solid #cbd5e0;
+.back-btn, .logout-btn {
+  font-weight: 600;
+  font-size: 11px;
+  padding: 6px 12px;
   border-radius: 6px;
-  width: min(360px, 100%);
-}
-
-/* layout: keep table centered and scrollable */
-.padded-table-wrap {
-  width: 100%;
-  padding-left: 48px;
-  padding-right: 48px;
-  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
   display: flex;
-  justify-content: center;
-  background: rgba(30, 41, 59, 0.55); /* semi-transparent dark background */
-  border-radius: 18px;
-  box-shadow: 0 4px 32px rgba(30,41,59,0.12);
+  align-items: center;
+  gap: 6px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
-  z-index: 1;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
 }
 
-.table-wrap {
-  width: 100%;
-  max-width: 1700px;
-  margin: 0 auto;
-  max-height: 80vh;
-  min-height: 252px;
-  overflow: auto;
+.back-btn {
+  background: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
 }
 
-/* --- Modern Table Refactor Inspired by Example --- */
-
-.record-table {
- width:100%;
- border-collapse: separate;
- border-spacing:0;
- background: #fff;
- border-radius:12px;
- box-shadow:0 2px 12px #2563eb11;
- overflow: hidden;
-}
-
-.record-table th, .record-table td {
- padding:14px 14px;
- font-size:1.08rem;
- border-bottom:1.5px solid #e5e7eb;
- text-align: left;
- white-space: nowrap;
-}
-
-.record-table th {
- background: #f8fafc;
- color: #222b45;
- font-weight:700;
- font-size:1.08rem;
- letter-spacing:0.5px;
- border-bottom:2.5px solid #e5e7eb;
- text-shadow: none;
- position: sticky;
- top:0;
- z-index:2;
-}
-
-  .record-table th i {
-    color: #e50808;
-    margin-right: 7px;
-    font-size: 1.1em;
+  .back-btn:hover {
+    background: #f9fafb;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
 
-.record-table td {
- background: #fff;
- font-size:1.05rem;
- color: #23272b;
- vertical-align: middle;
-}
-
-/* Remove alternate row color: force all rows to white */
-.record-table tr:nth-child(odd) td {
- background: #fff !important;
-}
-
-.record-table tr:hover td {
- background: #e0f2fe;
- transition: background 0.18s;
-}
-
-/* Checkbox column */
-.record-table td.select-col, .record-table th.select-col {
- width:36px;
- text-align: center;
- padding-left:10px;
- padding-right:10px;
-}
-
-/* Status badge */
-.status-label {
- display: inline-flex;
- align-items: center;
- gap:6px;
- padding:3px 14px;
- border-radius:12px;
- font-weight:700;
- font-size:1em;
- letter-spacing:0.5px;
- min-width:70px;
- text-align: center;
- background: #e0e7ff;
- color: var(--primary-accent);
- box-shadow:0 2px 8px #2563eb11;
+.logout-btn {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
 }
-.status-dot {
- display: inline-block;
- width:9px;
- height:9px;
- border-radius:50%;
- margin-right:4px;
-}
-.status-open { background: #d1fae5; color: #059669; }
-.status-open .status-dot { background: #059669; }
-.status-under { background: #dbeafe; color: #2563eb; }
-.status-under .status-dot { background: #2563eb; }
-.status-closed { background: #fee2e2; color: #dc2626; }
-.status-closed .status-dot { background: #dc2626; }
-
-.record-table td.actions-col, .record-table th.actions-col {
- min-width:80px;
- text-align: left;
- padding-right:18px;
-}
-
-.icon-btn {
- margin:02px;
- font-size:1.18em;
- border-radius:6px;
- padding:6px 10px;
- transition: background 0.15s, color 0.15s, box-shadow 0.15s;
- background: none;
- border: none;
- cursor: pointer;
-}
-.icon-btn.verify { color: #22c55e; }
-.icon-btn.view { color: #2563eb; }
-.icon-btn.edit { color: #7c3aed; }
-.icon-btn.delete { color: #ef4444; }
-.icon-btn:hover { background: #f0f7ff; }
-.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:hover { background: #e0ffe6; color: #15803d; }
-
-/* Responsive: stack columns on small screens */
-@media (max-width:900px) {
- .record-table th, .record-table td {
- padding:10px6px;
- font-size:0.98rem;
- }
- .record-table {
- font-size:0.98rem;
- }
+
+  .logout-btn:hover {
+    background: linear-gradient(135deg, #dc2626, #ef4444);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+  }
+
+.back-icon, .logout-icon {
+  font-size: 16px;
 }
 
-.empty {
- text-align: center;
- color: #718096;
- padding: 24px;
- font-size: 1.1em;
+/* ===== Main Content Area ===== */
+.main-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.records {
-  width: 100%;
-  min-width: 1500px;
-  max-width: 1700px;
-  border-collapse: collapse;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+.content-container {
+  flex: 1;
+  overflow: hidden;
+  padding: 20px;
+  max-width: 1882px;
   margin: 0 auto;
+  width: 100%;
 }
 
-.record-table th,
-.record-table td {
-  white-space: nowrap;
-  min-width: 90px;
+.record-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 90%;
+  min-height: 0;
 }
 
-.record-table td {
-  vertical-align: middle;
+/* ===== Analytics Blue Section ===== */
+.analytics-blue {
+  background: #1E3A8A;
+  padding: 20px 32px;
+  flex-shrink: 0;
+}
+
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
-.record-table th {
-  vertical-align: middle;
+.record-title-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-.record-table td a {
-  white-space: nowrap;
-  display: inline-block;
-  min-width: 80px;
+.record-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-@media (max-width: 1800px) {
-  .records {
-    max-width: 100vw;
-    min-width: 1000px;
+  .record-title i {
+    font-size: 18px;
+    color: #38bdf8;
   }
 
-  .table-wrap {
-    max-width: 100vw;
-    min-height: 400px;
-  }
+.record-dropdown {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  min-width: 160px;
 }
 
-@media (max-width: 900px) {
-  .records {
-    min-width: 0;
-    width: 100%;
-    max-width: 100vw;
+  .record-dropdown:focus {
+    outline: none;
+    border-color: #38bdf8;
   }
 
-  .table-wrap {
-    min-height: 200px;
-  }
+option {
+  color: black;
+}
 
-  .padded-table-wrap {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
+.record-search-container {
+  position: relative;
+}
 
-  .records-header-row {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-    padding-left: 4px;
-    padding-right: 4px;
-  }
+.record-search {
+  width: 280px;
+  padding: 10px 16px 10px 42px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 14px;
+  transition: all 0.3s;
+}
 
-  .page-title {
-    text-align: center;
-    margin-right: 0;
+  .record-search:focus {
+    outline: none;
+    border-color: #38bdf8;
+    background: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
   }
 
-  .toolbar {
-    position: static;
-    transform: none;
-    width: 100%;
-    justify-content: flex-end;
-    margin-top: 8px;
+  .record-search::placeholder {
+    color: rgba(255, 255, 255, 0.7);
   }
-}
-
-.records th, .records td {
-  padding: 10px 12px;
-  border-bottom: 1px solid #edf2f7;
-  text-align: left;
-  white-space: nowrap;
-  min-width: 90px;
-}
 
-.records td {
-  vertical-align: middle;
+.analytics-cards {
+  display: flex;
+  gap: 20px;
+  flex-shrink: 0;
 }
 
-.records th {
-  vertical-align: middle;
+.summary-card {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 10px;
+  padding: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s;
+  cursor: pointer;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  min-height: 85px;
 }
 
-.records td a {
-  white-space: nowrap;
-  display: inline-block;
-  min-width: 80px;
-}
+  .summary-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  }
 
-.records thead th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: linear-gradient(90deg, #23272b 0%, #0ea5e9 100%);
-  color: #fff;
-  font-weight: 800;
-  font-size: 1.08rem;
-  letter-spacing: 0.5px;
-  box-shadow: 0 2px 8px rgba(30,41,59,0.10);
-  border-bottom: 2.5px solid #0ea5e9;
-  text-shadow: 0 1px 4px rgba(30,41,59,0.10);
-  padding-top: 14px;
-  padding-bottom: 14px;
+.summary-left {
+  display: flex;
+  flex-direction: column;
 }
 
-.records th.actions-col, .records td.actions {
-  color: #fff;
-  text-align: left;
-  padding-left: 18px;
-  padding-right: 18px;
-  width: 1%;
-  white-space: nowrap;
+.summary-label {
+  font-size: 18px;
+  font-weight: 900;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 6px;
 }
 
-.records tbody tr:last-child td {
-  border-bottom: none;
+.summary-value {
+  font-size: 30px;
+  font-weight: 700;
+  font-family: 'Segoe UI', sans-serif;
+  line-height: 1;
 }
 
-.records tbody tr {
-  transition: background 0.18s;
-}
+  .summary-value.blue {
+    color: #2563eb;
+  }
 
-  .records tbody tr:nth-child(odd) {
-    background: #fafafa;
+  .summary-value.green {
+    color: #22c55e;
   }
 
-  .records tbody tr:hover {
-    background: #eef5ff;
+  .summary-value.red {
+    color: #ef4444;
   }
 
-/* column widths */
-.records th:nth-child(1), .records td:nth-child(1) {
-  width: 90px;
+.summary-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: white;
 }
 
-.records th:nth-child(2), .records td:nth-child(2) {
-  width: 140px;
+.summary-card.total .summary-icon {
+  background: linear-gradient(135deg, #1E3A8A, #1e40af);
 }
 
-.records th:nth-child(3), .records td:nth-child(3) {
-  width: 180px;
+.summary-card.open .summary-icon {
+  background: linear-gradient(135deg, #16a34a, #15803d);
 }
 
-.records th:nth-child(4), .records td:nth-child(4) {
-  min-width: 220px;
+.summary-card.closed .summary-icon {
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
 }
 
-.records th:nth-child(5), .records td:nth-child(5) {
-  width: 130px;
+/* ===== Record Meta ===== */
+.record-meta {
+  padding: 14px 32px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border-color);
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  flex-shrink: 0;
 }
 
-.records th:nth-child(6), .records td:nth-child(6) {
-  width: 140px;
+/* ===== Filter Bar ===== */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 32px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
-.actions-col {
-  width: 200px;
+.filter-icon {
+  color: #6b7280;
+  font-size: 16px;
 }
 
-/* badges + helpers */
-.status {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-weight: 600;
-  font-size: 12px;
+.filter-select {
+  padding: 9px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  min-width: 150px;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-  .status.open {
-    background: #dcfce7;
-    color: #166534;
+  .filter-select:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
   }
 
-  .status.under {
-    background: #fff7ed;
-    color: #9a3412;
-  }
+.filter-btn {
+  padding: 9px 18px;
+  border-radius: 6px;
+  border: none;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s;
+}
 
-  .status.closed {
-    background: #fee2e2;
-    color: #991b1b;
+  .filter-btn.apply {
+    background: #2563eb;
+    color: white;
   }
 
-.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;
-}
+    .filter-btn.apply:hover {
+      background: #1d4ed8;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
+    }
 
-.status-under {
-  background: #dbeafe;
-  color: #2563eb;
-}
+  .filter-btn.reset {
+    background: #E5E7EB;
+    color: #374151;
+    border: 1px solid #D1D5DB;
+  }
 
-.status-closed {
-  background: #fee2e2;
-  color: #dc2626;
-}
+    .filter-btn.reset:hover {
+      background: #D1D5DB;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
+    }
 
-.mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-}
+    .filter-btn.reset i {
+      color: #6B7280;
+    }
 
-.ellipsis {
+/* ===== Table Container ===== */
+.table-container {
+  flex: 1;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* buttons */
-.actions {
   display: flex;
-  gap: 8px;
+  flex-direction: column;
+  min-height: 0;
 }
 
-.btn {
-  padding: 8px 12px;
-  border: 1px solid #cbd5e0;
-  border-radius: 8px;
-  background: #f7fafc;
-  cursor: pointer;
+.table-wrapper {
+  flex: 1;
+  overflow: auto;
+  padding: 0 32px;
+  background: white;
 }
 
-  .btn.view {
-    background: #2b6cb0;
-    color: #fff;
-    border-color: #2b6cb0;
+  .table-wrapper::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
   }
 
-  .btn.edit {
-    background: #805ad5;
-    color: #fff;
-    border-color: #805ad5;
+  .table-wrapper::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
   }
 
-  .btn.delete {
-    background: #ef4444;
-    color: #fff;
-    border-color: #ef4444;
-    box-shadow: 0 2px 8px #ef444422;
-    transition: background 0.18s, color 0.18s;
+  .table-wrapper::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
   }
 
-    .btn.delete:hover {
-      background: #991b1b;
-      color: #fff;
+    .table-wrapper::-webkit-scrollbar-thumb:hover {
+      background: #a8a8a8;
     }
 
-    /* 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;
+.record-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: white;
+  min-height: 118px;
 }
 
-  .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;
+  .record-table thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: #f8fafc;
   }
 
-  .icon-btn.edit {
-    color: #7c3aed;
+  .record-table th {
+    padding: 18px 16px;
+    text-align: left;
+    font-weight: 600;
+    color: #374151;
+    font-size: 13px;
+    border-bottom: 2px solid var(--border-color);
+    white-space: nowrap;
+    position: relative;
   }
 
-  .icon-btn.delete {
-    color: #ef4444;
-  }
+    .record-table th i {
+      color: #64748B;
+      margin-right: 8px;
+      font-size: 13px;
+    }
 
-  .icon-btn:hover {
-    background: #f0f7ff;
-    box-shadow: 0 2px 8px #2563eb22;
-  }
+    .record-table th.sortable {
+      cursor: pointer;
+      user-select: none;
+    }
 
-  .icon-btn.delete:hover {
-    background: #fff0f0;
-    color: #b91c1c;
-  }
+      .record-table th.sortable:hover {
+        background: #f1f5f9;
+      }
 
-  .icon-btn.edit:hover {
-    background: #f3e8ff;
-    color: #5b21b6;
-  }
+.sort {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  opacity: 0.5;
+}
 
-  .icon-btn.view:hover {
-    background: #e0f2fe;
-    color: #0ea5e9;
+  .sort.asc {
+    border-bottom: 8px solid #374151;
   }
 
-  .icon-btn.verify {
-    color: #22c55e;
+  .sort.desc {
+    border-top: 8px solid #374151;
   }
 
-    .icon-btn.verify:hover {
-      background: #e0ffe6;
-      color: #15803d;
-    }
+  .sort.neutral {
+    border-top: 8px solid #9ca3af;
+  }
 
-.empty {
-  text-align: center;
-  color: #718096;
-  padding: 24px;
+.record-table td {
+  padding: 16px 16px;
+  border-bottom: 1px solid var(--border-color);
+  color: #374151;
+  font-size: 14px;
+  white-space: nowrap;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 
-/* modal */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,.45);
+.record-table tbody tr {
+  transition: background 0.2s;
 }
 
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  min-width: 0;
-  min-height: 0;
-  max-width: 100vw;
-  max-height: 100vh;
-  background: #fff;
-  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;
-}
+  .record-table tbody tr:hover {
+    background: #f8fafc;
+  }
 
-.modal-header, .modal-footer {
-  padding: 24px 40px 18px 40px;
-  background: #f8fafc;
-  font-weight: 700;
-  font-size: 1.18rem;
-  color: #23272b;
+.sl-no-col {
+  width: 80px;
+  text-align: center;
 }
 
-.modal-body {
-  flex: 1 1 auto;
-  padding: 32px 48px 32px 48px;
-  background: #fff;
-  color: #23272b;
-  font-size: 1.08rem;
-  overflow-y: auto;
+.case-id-link {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s;
 }
 
-.detail-row {
-  display: grid;
-  grid-template-columns: 180px 1fr;
-  gap: 12px;
-  padding: 10px 0;
-  border-bottom: 1px solid #e5e7eb;
+  .case-id-link:hover {
+    color: #1d4ed8;
+    text-decoration: underline;
+  }
+
+/* Status Badges */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  min-width: 110px;
+  justify-content: center;
 }
 
-  .detail-row:last-child {
-    border-bottom: none;
+  .status-badge.status-open {
+    background: #dcfce7;
+    color: #166534;
   }
 
-  .detail-row span {
-    color: #2563eb;
-    font-weight: 600;
-    font-size: 1.07em;
-  }
+    .status-badge.status-open .status-dot {
+      background: #166534;
+    }
 
-  .detail-row b {
-    color: #23272b;
-    font-weight: 500;
-    font-size: 1.07em;
+  .status-badge.status-under {
+    background: #fef3c7;
+    color: #92400e;
   }
 
-.detail-block {
-  margin-top: 18px;
-  margin-bottom: 8px;
-}
+    .status-badge.status-under .status-dot {
+      background: #92400e;
+    }
 
-  .detail-block .label {
-    font-weight: 700;
-    color: #2563eb;
-    margin-bottom: 6px;
-    font-size: 1.09em;
+  .status-badge.status-closed {
+    background: #fee2e2;
+    color: #991b1b;
   }
 
-.explain {
-  white-space: pre-wrap;
-  color: #23272b;
-  font-size: 1.07em;
-}
+    .status-badge.status-closed .status-dot {
+      background: #991b1b;
+    }
 
-.modal-footer {
-  text-align: right;
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
 }
 
-.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;
+/* Empty values */
+.empty-value {
+  color: #9CA3AF;
+  font-style: italic;
 }
 
-  .btn:hover {
-    background: #e0e7ef;
-  }
+/* Action Buttons */
+.actions-col {
+  width: 160px;
+}
 
-.records-center {
+.action-buttons {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 90px;
+  gap: 8px;
 }
 
-.records-header-row {
+.action-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  margin-bottom: 24px;
-  padding-left: 48px;
-  padding-right: 48px;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.page-title {
-  text-align: center;
-  width: 100%;
-  color: #fff;
-  font-weight: 800;
-  margin-bottom: 32px; /* Increased from 0 to 32px for more space */
-  margin-right: 0;
-  font-size: 2.1rem;
+  cursor: pointer;
+  transition: all 0.2s;
   position: relative;
-  z-index: 1;
 }
 
-/* sort indicators */
-.sort {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  margin-left: 6px;
-}
+  .action-btn::after {
+    content: attr(title);
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #374151;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    z-index: 100;
+  }
+
+  .action-btn:hover::after {
+    opacity: 1;
+  }
 
-  .sort.asc {
-    border-bottom: 6px solid #4a5568;
+  .action-btn.view {
+    color: #2563eb;
+    border-color: #dbeafe;
   }
 
-  .sort.desc {
-    border-top: 6px solid #4a5568;
+    .action-btn.view:hover {
+      background: #dbeafe;
+      border-color: #2563eb;
+    }
+
+  .action-btn.edit {
+    color: #7c3aed;
+    border-color: #ede9fe;
   }
 
-  /* Remove global blur and pointer-events when modal is open */
-  /*
-  .show-details body > *:not(.cdk-overlay-container):not(app-root),
-  .show-details app-root > *:not(.modal):not(.modal-backdrop) {
-    filter: blur(8px) !important;
-    pointer-events: none !important;
-    user-select: none !important;
+    .action-btn.edit:hover {
+      background: #ede9fe;
+      border-color: #7c3aed;
+    }
+
+  .action-btn.delete {
+    color: #ef4444;
+    border-color: #fee2e2;
   }
-  */
 
-.show-details .modal,
-.show-details .modal-backdrop {
-  filter: none !important;
-  pointer-events: auto !important;
-  user-select: auto !important;
-  z-index: 200;
-}
+    .action-btn.delete:hover {
+      background: #fee2e2;
+      border-color: #ef4444;
+    }
 
-/* Remove previous ::before blur if present */
-.show-details main.content::before {
-  display: none !important;
+/* Empty State */
+.empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: #9ca3af;
+  font-size: 16px;
+  background: white;
 }
 
-/* Modal blur overlay for white shadow and blur effect */
-.modal-blur-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 199;
-  background: rgba(255,255,255,0.45); /* white shadow */
-  backdrop-filter: blur(8px);
-  pointer-events: none;
-  display: block;
+  .empty i {
+    font-size: 32px;
+    margin-bottom: 16px;
+    display: block;
+    opacity: 0.5;
+  }
+
+/* ===== Bottom Controls ===== */
+.bottom-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 32px;
+  background: #f8fafc;
+  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
 }
 
-.show-details .modal-blur-overlay {
-  display: block;
+.results-summary {
+  display: flex;
+  align-items: center;
+  gap: 20px;
 }
 
-/* Modern Searchbar Styles */
-.modern-searchbar-container {
-  width: 100%;
+.results-info {
   display: flex;
-  justify-content: center;
-  margin: 48px 0 32px 0;
-  z-index: 10;
+  align-items: center;
+  gap: 8px;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
 }
 
-  .modern-searchbar-container.compact {
-    width: auto;
-    margin: 0 0 0 24px;
-    align-items: center;
+  .results-info i {
+    color: #2563eb;
   }
 
-.modern-searchbar-form {
+.page-size-selector {
   display: flex;
   align-items: center;
-  background: linear-gradient(90deg, #38bdf8 0%, #7c3aed 100%);
-  border-radius: 48px;
-  box-shadow: 0 4px 24px rgba(30,41,59,0.18);
-  padding: 0 16px 0 18px;
-  width: min(600px, 90vw);
-  height: 72px;
-  position: relative;
+  gap: 8px;
+  color: #6b7280;
+  font-size: 14px;
 }
 
-  .modern-searchbar-form.compact {
-    height: 44px;
-    min-width: 260px;
-    width: 320px;
-    padding: 0 8px 0 10px;
+  .page-size-selector select {
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    background: white;
+    color: #374151;
+    font-size: 14px;
+    cursor: pointer;
   }
 
-.modern-searchbar-icon {
+.pagination-controls {
   display: flex;
   align-items: center;
-  margin-right: 12px;
+  gap: 6px;
 }
 
-.modern-searchbar-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: #fff;
-  font-size: 1.05rem;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-  padding: 0 6px;
-  height: 32px;
+.page-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #374151;
 }
 
-  .modern-searchbar-input::placeholder {
-    color: #e0e7ef;
-    opacity: 1;
-    font-weight: 400;
+  .page-btn:hover:not(:disabled) {
+    background: #f3f4f6;
+    border-color: #9ca3af;
   }
 
-.modern-searchbar-btn {
-  background: #fff;
-  color: #7c3aed;
-  border: none;
-  border-radius: 32px;
-  font-size: 0.98rem;
-  font-weight: 700;
-  padding: 0 18px;
-  height: 32px;
-  margin-left: 10px;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(124,58,237,0.10);
-  transition: background 0.18s, color 0.18s;
-}
-
-  .modern-searchbar-btn:hover {
-    background: #ede9fe;
-    color: #4f46e5;
+  .page-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 
-.modern-searchbar-form.white-bg {
-  background: #fff !important;
-  box-shadow: 0 4px 24px rgba(30,41,59,0.10);
+.page-numbers {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.modern-searchbar-input.white-bg {
-  background: #fff !important;
-  color: #23272b !important;
+.page-number {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: white;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-  .modern-searchbar-input.white-bg::placeholder {
-    color: #64748b !important;
-    opacity: 1;
+  .page-number:hover {
+    background: #f3f4f6;
+  }
+
+  .page-number.active {
+    background: #2563eb;
+    color: white;
+    border-color: #2563eb;
   }
 
-.modern-searchbar-icon svg {
-  stroke: #64748b !important;
+.page-ellipsis {
+  padding: 0 8px;
+  color: #9ca3af;
+  font-size: 14px;
 }
 
-.modern-searchbar-btn {
-  background: #64748b;
+/* ===== FOOTER ===== */
+footer {
+  background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
   color: #fff;
-  border: none;
-  border-radius: 32px;
-  font-size: 0.98rem;
-  font-weight: 700;
-  padding: 0 18px;
-  height: 32px;
-  margin-left: 10px;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(124,58,237,0.10);
-  transition: background 0.18s, color 0.18s;
+  text-align: center;
+  padding: 12px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
 }
 
-  .modern-searchbar-btn:hover {
-    background: #38bdf8;
-    color: #fff;
+/* ===== Responsive Design ===== */
+@media (max-width: 1200px) {
+  .header-inner {
+    padding: 0 24px;
   }
 
+  .content-container {
+    padding: 16px;
+  }
 
-.back-colo {
-  background: #011329;
-  width: 100%;
-  height: 7vw;
-  position: fixed;
-}
-/* Search bar at top right corner */
-.searchbar-topright {
-  position: fixed;
-  top: 20px;
-  right: 48px;
-  z-index: 1001;
-  display: flex;
-  align-items: center;
+  .analytics-blue,
+  .record-meta,
+  .filter-bar,
+  .table-wrapper,
+  .bottom-controls {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }
 
-.back-colo {
-  background: #011329;
-  width: 100%;
-  height: 7vw;
-  position: fixed;
-}
+@media (max-width: 992px) {
+  .analytics-cards {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .record-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
 
-@media (max-width: 900px) {
-  .searchbar-topright {
-    top: 12px;
-    right: 8px;
-    width: 95vw;
-    justify-content: flex-end;
+  .record-title-group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
   }
 
-  .modern-searchbar-form.compact {
+  .record-dropdown,
+  .record-search {
     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;
-}
+  .filter-bar {
+    gap: 12px;
+  }
 
-.header-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 18px 32px 0 32px;
-  position: relative;
+  .filter-select {
+    flex: 1;
+    min-width: 120px;
+  }
+
+  .table-wrapper {
+    padding: 0 16px;
+    overflow-x: auto;
+  }
+
+  .record-table {
+    min-width: 800px;
+  }
 }
 
-.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;
-  }
-
-header {
-  position: relative;
-  z-index: 10;
-}
-
-.header-actions-right {
-  position: absolute;
-  right: 32px;
-  top: 27px;
-  display: flex;
-  align-items: center;
-  z-index: 100;
-}
-
-.logout-btn {
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1.05rem;
-  font-weight: 700;
-  letter-spacing: 2px;
-  background: linear-gradient(90deg, #ef4444 0%, #23272b 100%);
-  color: #fff;
-  box-shadow: 0 2px 16px #ef444488;
-  border: none;
-  border-radius: 12px;
-  padding: 0.55rem 1.3rem;
-  margin: 0 0.3rem;
-  cursor: pointer;
-  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
-  overflow: hidden;
-}
-
-.logout-btn:hover {
-  background: linear-gradient(90deg, #23272b 0%, #ef4444 100%);
-  color: #fff;
-  box-shadow: 0 2px 24px #ef444488;
-  transform: scale(1.04);
-}
-
-.logout-icon {
-  font-size: 1.2em;
-  margin-right: 6px;
-}
-
-body, main.content {
-  background: #f4f6fa;
-  min-height: 100vh;
-  margin: 0;
-  overflow-y: auto; /* enables scrolling */
-  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: 24px auto 0 auto;
-  max-width: 98vw;
-  width: 98vw;
-  min-width: 320px;
-  padding: 0;
-  overflow-x: auto;
-  overflow-y: visible;
-}
-
-.record-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 18px 24px 8px 24px;
-  border-bottom: 1.5px solid #e5e7eb;
-  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  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: #fff;
-}
-
-.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: #4654ff;
-}
-
-  .record-table th, .record-table td {
-    border-bottom: 1.5px solid #e5e7eb;
+@media (max-width: 768px) {
+  .header-inner {
+    padding: 0 16px;
+    flex-direction: column;
+    height: auto;
     padding: 12px 16px;
-    text-align: left;
-    font-size: 1.05rem;
-  }
-
-  .record-table th {
-    background: #f4f6fa;
-    color: #222b45;
-    font-weight: 700;
+    gap: 12px;
   }
 
-  .record-table tr:last-child td {
-    border-bottom: none;
+  .py-detect-title-header {
+    font-size: 22px;
+    letter-spacing: 2px;
   }
 
-  .record-table tr {
-    transition: background 0.15s;
+  .header-actions-right {
+    width: 100%;
+    justify-content: space-between;
   }
 
-  
-
-  .record-table a {
-    color: #2563eb;
-    text-decoration: underline;
-    cursor: pointer;
+  .back-btn,
+  .logout-btn {
+    flex: 1;
+    justify-content: center;
   }
 
-  .record-table .record-status {
-    font-weight: 500;
-    border-radius: 6px;
-    padding: 2px 10px;
-    background: #f1f5f9;
-    color: #2563eb;
-    font-size: 0.98em;
+  .analytics-blue,
+  .record-meta,
+  .filter-bar,
+  .table-wrapper,
+  .bottom-controls {
+    padding-left: 16px;
+    padding-right: 16px;
   }
 
-.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;
+  .summary-value {
+    font-size: 22px;
   }
 
-.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;
+  .summary-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
   }
 
-.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;
+  .bottom-controls {
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
   }
 
-  .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;
+  .results-summary {
+    width: 100%;
+    justify-content: space-between;
   }
 
-    .field-row b:hover {
-      color: #0ea5e9;
-    }
-
-.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;
+  .pagination-controls {
+    width: 100%;
+    justify-content: center;
   }
-
-    .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;
+@media (max-width: 480px) {
+  .py-detect-title-header {
+    font-size: 18px;
+    letter-spacing: 1px;
   }
 
-  .subgroup-block {
-    min-width: 180px;
-    padding: 12px 8px 8px 8px;
+  .header-actions-right {
+    flex-direction: column;
+    gap: 8px;
   }
 
-  .field-row span {
-    min-width: 120px;
+  .summary-card {
+    padding: 16px;
   }
-}
 
-@media (max-width: 600px) {
-  .section-block {
-    padding: 10px 2vw 8px 2vw;
+  .summary-value {
+    font-size: 20px;
   }
 
-  .subgroup-block {
-    min-width: 120px;
-    padding: 8px 2px 6px 2px;
+  .summary-icon {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
   }
 
-  .field-row span {
-    min-width: 80px;
-    font-size: 0.98em;
-  }
-
-  .field-row b {
-    font-size: 1em;
+  .filter-bar {
+    flex-direction: column;
+    align-items: stretch;
   }
-}
 
-/* 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: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
-  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-select,
+  .filter-btn {
+    width: 100%;
   }
 
-    .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;
+  .action-buttons {
+    flex-direction: column;
+    gap: 4px;
   }
 
-    .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-panel {
-  margin: 18px 16px 8px 16px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
-}
-
-.analytics-header {
-  background: linear-gradient(90deg,#6b46ff,#7c3aed);
-  color: #fff;
-  padding: 16px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.analytics-title {
-  font-weight: 800;
-  font-size: 1.05rem;
-}
-
-.create-project-btn {
-  background: #fff;
-  color: #111827;
-  border: none;
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.analytics-cards {
-  display: flex;
-  gap: 5px;
-  width: 100%;
-  justify-content: stretch;
-  align-items: stretch;
-}
-
-.summary-card {
-  flex: 110;
-  min-width: 0;
-  max-width: none;
-  /* keep all previous styles and animations */
-  border: none;
-  border-radius: var(--card-radius);
-  box-shadow: var(--card-shadow);
-  border-left: 5px solid var(--primary-accent-light);
-  transition: box-shadow 0.18s, border 0.18s, transform 0.18s;
-  background: #3f51b526;
-  padding: 10px 12px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-}
-
-@media (max-width: 900px) {
-  .analytics-cards { gap: 6px; padding: 8px; }
-  .summary-card { flex: 11100%; min-width: 80px; max-width: 100%; padding: 6px 6px; flex-direction: row; }
-}
-
-/* Footer */
-footer {
-  background: linear-gradient(to right, #011022, #01030a);
-  color: #fff;
-  text-align: center;
-  padding: 10px 0px;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: 100;
-  margin-top: 0;
-}
-
-.back-btn {
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 0.95rem;
-  font-weight: 700;
-  letter-spacing: 1px;
-  background: #fff;
-  color: #23272b;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  padding: 0.32rem 0.8rem;
-  margin: 0 0.3rem;
-  cursor: pointer;
-  transition: background 0.3s, color 0.2s, box-shadow 0.2s, transform 0.2s;
-  box-shadow: 0 2px 8px #d1d5db44;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.back-btn:hover {
-  background: #f3f4f6;
-  color: #1976d2;
-  box-shadow: 0 2px 16px #bae6fd88;
-  transform: scale(1.04);
-}
-
-.back-icon {
-  font-size: 1.1em;
-  margin-right: 4px;
-}
-
-.back-btn,
-.logout-btn {
-  font-size: 0.85rem;
-  padding: 0.18rem 0.7rem;
-  border-radius: 5px;
-  min-width: unset;
-  min-height: unset;
-  box-shadow: 0 1px 4px #d1d5db22;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.analytics-blue {
-  height: var(--analytics-blue-height);
-  animation: analyticsBlueFadeIn0.7s cubic-bezier(0.4,0.2,0.2,1) both;
-}
-
-@keyframes analyticsBlueFadeIn {
-  from {
-    opacity:0;
-    transform: translateY(-32px);
-  }
-  to {
-    opacity:1;
-    transform: translateY(0);
+  .action-btn {
+    width: 32px;
+    height: 32px;
   }
 }
-
-
-/* === Modern Additions for Record Page === */
-:root {
- --primary-accent: #2563eb;
- --primary-accent-light: #38bdf8;
- --primary-accent-dark: #1e40af;
- --secondary-accent: #7c3aed;
- --card-radius:14px;
- --card-shadow:06px24px rgba(30,41,59,0.13);
- --section-gap:32px;
-}
-
-/* Modern gradient for analytics-blue */
-.analytics-blue {
- background: linear-gradient(90deg, var(--primary-accent)0%, var(--primary-accent-light)100%);
- border-radius: var(--card-radius) var(--card-radius)00;
- box-shadow: var(--card-shadow);
-}
-
-/* Modern shadow and accent border for summary-card */
-.summary-card {
- border-radius: var(--card-radius);
- box-shadow: var(--card-shadow);
- border-left:5px solid var(--primary-accent-light);
- transition: box-shadow 0.18s, border 0.18s;
-}
-.summary-card:hover {
- box-shadow:0 10px 32px rgba(30,41,59,0.18);
- border-left:5px solid var(--primary-accent);
-}
-
-/* Modern color for summary-label, value, sub */
-.summary-label {
- color: var(--primary-accent);
- font-weight:900;
- font-size:1.25rem;
- letter-spacing:1.5px;
- text-transform: uppercase;
- font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
- margin-bottom:-11px;
- opacity:0.95;
-}
-.summary-value {
- font-size:3.0rem;
- font-weight:500;
- color: var(--primary-accent-light);
- font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
- letter-spacing:2px;
- text-shadow:02px 8px #2563eb11;
- margin-bottom:4px;
-}
-.summary-sub {
- color: var(--secondary-accent);
- font-size:1.18rem;
- font-weight:700;
- font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
- opacity:0.88;
-}
-.summary-icon {
- width:64px;
- height:64px;
- border-radius:12px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size:2.6rem;
- margin-bottom:0;
- margin-left:18px;
-}
-
-/* Slide-in animation for table rows on load */
-.record-table tbody tr {
- animation: rowSlideIn0.7s cubic-bezier(0.4,0.2,0.2,1) both;
-}
-@keyframes rowSlideIn {
- from { opacity:0; transform: translateX(-32px); }
- to { opacity:1; transform: none; }
-}
-
-/* Animated highlight (glow, no shadow) on row hover/focus */
-.record-table tr:hover td,
-.record-table tr:focus-within td {
- background: #e0f2fe !important;
- animation: rowGlow1.2s linear infinite alternate;
- border-left:4px solid #38bdf8;
-}
-@keyframes rowGlow {
- from { box-shadow:0000px #38bdf800; }
- to { box-shadow:0004px #38bdf866; }
-}
-
-/* Remove box-shadow on hover for table rows (override previous) */
-.record-table tr:hover td {
- box-shadow: none !important;
-}
-
-/* Animated highlight for selected row (if you use .selected-row) */
-.record-table tr.selected-row td {
- background: #bae6fd !important;
- animation: rowGlowSelected1.2s linear infinite alternate;
- border-left:4px solid #38bdf8;
-}
-@keyframes rowGlowSelected {
- from { box-shadow:0000px #38bdf800; }
- to { box-shadow:0004px #38bdf866; }
-}
-
-/* Remove all box-shadow from table rows and cells */
-.record-table td, .record-table th {
- box-shadow: none !important;
-}
-
-/* === Summary Card Animations and Dynamic Styles === */
-.summary-card {
-  transition: box-shadow 0.25s, border 0.18s, transform 0.18s;
-  cursor: pointer;
-  height: 100px;
-}
-.summary-card:hover {
- transform: scale(1.045) rotate(0deg);
- /* Default blue glow, overridden below for each type */
- box-shadow:0 0 24px 0 #38bdf8cc,0 10px 32px rgba(30,41,59,0.18);
- border-left:5px solid var(--primary-accent);
-}
-
-/* Card type specific icon and glow */
-.summary-card.total .summary-icon {
-  /* background: linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%); */
-  color: #23272b;
-  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); /* effectively no shadow */
-}
-
-.summary-card.total:hover {
-  box-shadow: 0 0 32px 0 #38bdf8cc, 0 10px 32px #38bdf822;
-  border-left: 5px solid #38bdf8;
-}
-
-.summary-card.closed .summary-icon {
-  /* background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%); */
-  color: #ef4444;
-}
-
-.summary-card.closed:hover {
-  box-shadow: 0 0 32px 0 #ef4444cc, 0 10px 32px #ef444422;
-  border-left: 5px solid #ef4444;
-}
-
-.summary-card.open .summary-icon {
-  /* background: linear-gradient(135deg, #22c55e 0%, #2563eb 100%); */
-  color: #00ae0e; /* 6 digit hex, avoids linter warnings */
-}
-
-.summary-card.open:hover {
-  box-shadow: 0 0 32px 0 #22c55ecc, 0 10px 32px #22c55e22;
-  border-left: 5px solid #22c55e;
-}
-
-/* Subtle bounce animation for icon on hover */
-.summary-card:hover .summary-icon {
- animation: summary-bounce0.7s cubic-bezier(0.4,0.2,0.2,1) both;
-}
-@keyframes summary-bounce {
-0% { transform: scale(1) translateY(0); }
-30% { transform: scale(1.18) translateY(-6px); }
-60% { transform: scale(0.96) translateY(2px); }
-100% { transform: scale(1) translateY(0); }
-}
-
-.summary-value.blue { color: #2563eb; }
-.summary-value.green { color: #22c55e; }
-.summary-value.red { color: #ef4444; }
-

src/app/recordpage/recordpage.component.html

@@ -1,257 +1,246 @@
-<!-- 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 class="header-actions-right">
- <button class="back-btn" (click)="navigateBackToInfoPage()">
- <span class="back-icon">←</span> Back to Info Page
- </button>
- <button class="logout-btn" (click)="logout()">
- <span class="logout-icon">⎋</span> Logout
- </button>
- </div>
- </div>
-</div>
-
-<!-- Salesforce-style card/table content below the header -->
-<div class="record-card">
-  <!-- Analytics summary panel -->
-  <div class="analytics-panel">
-    <div class="analytics-blue">
-
-      <div class="record-header">
-        <div class="record-title-group">
-          <span class="record-title"><i class="fas fa-database"></i> Police Investigation Records</span>
-          <select class="record-dropdown">
-            <option>Recently Viewed</option>
-            <option>All Records</option>
-          </select>
-        </div>
-        <div class="record-header-actions">
-          <span style="position:relative;">
-            <i class="fas fa-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#b0b0b0;"></i>
-            <input class="record-search" type="text" [(ngModel)]="q" (ngModelChange)="applyFilters()" placeholder="Search this list..." style="padding-left:32px;" />
-          </span>
+<div class="app-container">
+  <!-- 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 class="header-actions-right">
+        <button class="back-btn" (click)="navigateBackToInfoPage()">
+          <span class="back-icon">←</span> Back
+        </button>
+        <button class="logout-btn" (click)="logout()">
+          <span class="logout-icon">⎋</span> Logout
+        </button>
+      </div>
+    </div>
+  </div>
 
-      <div class="analytics-cards">
-        <!-- Total Cases -->
-        <div class="summary-card total">
-          <div class="summary-left">
-            <div class="summary-label">Total Cases</div>
-            <div class="summary-value blue">{{ totalCases }}</div>
-            <div class="summary-sub">&nbsp;</div>
+  <!-- Main Content Area -->
+  <div class="main-content">
+    <div class="content-container">
+      <!-- Record Card -->
+      <div class="record-card">
+        <!-- Analytics Section -->
+        <div class="analytics-blue">
+          <div class="record-header">
+            <div class="record-title-group">
+              <span class="record-title"><i class="fas fa-database"></i> Police Investigation Records</span>
+              <select class="record-dropdown">
+                <option>Recently Viewed</option>
+                <option>All Records</option>
+              </select>
+            </div>
+            <div class="record-search-container">
+              <span style="position:relative;">
+                <i class="fas fa-search" style="position:absolute;left:16px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.7);"></i>
+                <input class="record-search" type="text" [(ngModel)]="q" (ngModelChange)="applyFilters()" placeholder="Search this list..." />
+              </span>
+            </div>
           </div>
-          <div class="summary-icon icon-indigo"><i class="fas fa-folder-open fa-bounce"></i></div>
-        </div>
-        <!-- Open Cases -->
-        <div class="summary-card open">
-          <div class="summary-left">
-            <div class="summary-label">Open</div>
-            <div class="summary-value green">{{ openCases }}</div>
-            <div class="summary-sub">&nbsp;</div>
+
+          <div class="analytics-cards">
+            <!-- Total Cases -->
+            <div class="summary-card total">
+              <div class="summary-left">
+                <div class="summary-label">Total Cases</div>
+                <div class="summary-value blue">{{ totalCases }}</div>
+              </div>
+              <div class="summary-icon"><i class="fas fa-folder-open"></i></div>
+            </div>
+            <!-- Open Cases -->
+            <div class="summary-card open">
+              <div class="summary-left">
+                <div class="summary-label">Open</div>
+                <div class="summary-value green">{{ openCases }}</div>
+              </div>
+              <div class="summary-icon"><i class="fas fa-exclamation-circle"></i></div>
+            </div>
+            <!-- Closed Cases -->
+            <div class="summary-card closed">
+              <div class="summary-left">
+                <div class="summary-label">Closed</div>
+                <div class="summary-value red">{{ closedCases }}</div>
+              </div>
+              <div class="summary-icon"><i class="fas fa-check-circle"></i></div>
+            </div>
           </div>
-          <div class="summary-icon icon-blue"><i class="fas fa-exclamation-circle fa-beat"></i></div>
         </div>
-        <!-- Closed Cases -->
-        <div class="summary-card closed">
-          <div class="summary-left">
-            <div class="summary-label">Closed</div>
-            <div class="summary-value red">{{ closedCases }}</div>
-            <div class="summary-sub">&nbsp;</div>
-          </div>
-          <div class="summary-icon icon-green"><i class="fas fa-check-circle fa-spin"></i></div>
+
+        <div class="record-meta">
+          {{ rows.length }} items • Updated a few seconds ago
         </div>
-      </div>
-    </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>
+        <!-- Filter bar -->
+        <div class="filter-bar">
+          <span class="filter-icon"><i class="fas fa-filter"></i></span>
+          <select [(ngModel)]="filterCrimeType" class="filter-select" (change)="applyFilters()">
+            <option value="">Crime Type</option>
+            <option *ngFor="let type of crimeTypes">{{ type }}</option>
+          </select>
+          <select [(ngModel)]="filterStatus" class="filter-select" (change)="applyFilters()">
+            <option value="">Select Status</option>
+            <option *ngFor="let status of statusTypes">{{ status }}</option>
+          </select>
+          <select [(ngModel)]="filterLocation" class="filter-select" (change)="applyFilters()">
+            <option value="">Location</option>
+            <option *ngFor="let loc of locations">{{ loc }}</option>
+          </select>
+          <select [(ngModel)]="filterOfficer" class="filter-select" (change)="applyFilters()">
+            <option value="">Officer</option>
+            <option *ngFor="let officer of officers">{{ officer }}</option>
+          </select>
+          <button class="filter-btn apply" (click)="applyFilters()">
+            <i class="fas fa-check"></i> Apply
+          </button>
+          <button class="filter-btn reset" (click)="resetFilters()">
+            <i class="fas fa-undo"></i> Reset
+          </button>
+        </div>
 
-    <!-- Filter bar above the table -->
-    <div class="filter-bar">
-      <span style="margin-right:8px;"><i class="fas fa-filter"></i></span>
-      <select [(ngModel)]="filterCrimeType">
-        <option value="">Crime Type</option>
-        <option *ngFor="let type of crimeTypes">{{ type }}</option>
-      </select>
-      <select [(ngModel)]="filterStatus">
-        <option value="">Select 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()"><i class="fas fa-check"></i> Apply</button>
-      <button (click)="resetFilters()"><i class="fas fa-undo"></i> Reset</button>
-    </div>
+        <!-- Table Container -->
+        <div class="table-container">
+          <div class="table-wrapper">
+            <table class="record-table">
+              <thead>
+                <tr>
+                  <th class="sl-no-col">
+                    <i class="fas fa-list-ol"></i> Sl. No
+                  </th>
+                  <th (click)="setSort('caseId')" [attr.aria-sort]="ariaSort('caseId')" class="sortable">
+                    <i class="fas fa-id-badge"></i> Case ID
+                    <span class="sort" [ngClass]="{'asc': isAsc('caseId'), 'desc': isDesc('caseId'), 'neutral': !isAsc('caseId') && !isDesc('caseId')}"></span>
+                  </th>
+                  <th (click)="setSort('status')" [attr.aria-sort]="ariaSort('status')" class="sortable">
+                    <i class="fas fa-info-circle"></i> Status
+                    <span class="sort" [ngClass]="{'asc': isAsc('status'), 'desc': isDesc('status'), 'neutral': !isAsc('status') && !isDesc('status')}"></span>
+                  </th>
+                  <th (click)="setSort('crime')" [attr.aria-sort]="ariaSort('crime')" class="sortable">
+                    <i class="fas fa-gavel"></i> Crime Type
+                    <span class="sort" [ngClass]="{'asc': isAsc('crime'), 'desc': isDesc('crime'), 'neutral': !isAsc('crime') && !isDesc('crime')}"></span>
+                  </th>
+                  <th (click)="setSort('Investigation Officer')" [attr.aria-sort]="ariaSort('Investigation Officer')" class="sortable">
+                    <i class="fas fa-user-tie"></i> Investigator
+                    <span class="sort" [ngClass]="{'asc': isAsc('Investigation Officer'), 'desc': isDesc('Investigation Officer'), 'neutral': !isAsc('Investigation Officer') && !isDesc('Investigation Officer')}"></span>
+                  </th>
+                  <th (click)="setSort('dateTime')" [attr.aria-sort]="ariaSort('dateTime')" class="sortable">
+                    <i class="fas fa-calendar-alt"></i> Date & Time
+                    <span class="sort" [ngClass]="{'asc': isAsc('dateTime'), 'desc': isDesc('dateTime'), 'neutral': !isAsc('dateTime') && !isDesc('dateTime')}"></span>
+                  </th>
+                  <th class="actions-col">
+                    <i class="fas fa-cogs"></i> Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let c of rows; let i = index">
+                  <td class="sl-no-col">{{ (currentPage - 1) * pageSize + i + 1 }}</td>
+                  <td>
+                    <a (click)="navigateToCaseDetails(c)" class="case-id-link">{{ c.caseId || 'Not Assigned' }}</a>
+                  </td>
+                  <td>
+                    <span class="status-badge" [ngClass]="{
+                      'status-open': c.status === 'Open',
+                      'status-under': c.status === 'Under Investigation',
+                      'status-closed': c.status === 'Closed'
+                    }">
+                      <span class="status-dot"></span>
+                      {{ c.status || 'Not Assigned' }}
+                    </span>
+                  </td>
+                  <td [class.empty-value]="!c.crime">{{ c.crime || 'Not Assigned' }}</td>
+                  <td [class.empty-value]="!c.police?.name">{{ c.police?.name || 'Not Assigned' }}</td>
+                  <td [class.empty-value]="!c.dateTime">{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : 'Not Assigned' }}</td>
+                  <td class="actions-col">
+                    <div class="action-buttons">
+                      <button class="action-btn view" (click)="navigateToCaseDetails(c)" title="View Case">
+                        <i class="fas fa-eye"></i>
+                      </button>
+                      <button class="action-btn edit" (click)="editCase(c, i)" title="Edit Case">
+                        <i class="fas fa-edit"></i>
+                      </button>
+                      <button class="action-btn delete" (click)="deleteCase(i)" title="Delete Case">
+                        <i class="fas fa-trash"></i>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+                <tr *ngIf="rows.length === 0">
+                  <td colspan="7" class="empty">
+                    <i class="fas fa-inbox"></i> No records found.
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
 
-    <table class="record-table">
-      <thead>
-        <tr>
-          <th class="select-col"><i class="fas fa-list-ol"></i> Sl. No</th>
-          <th (click)="setSort('caseId')" [attr.aria-sort]="ariaSort('caseId')" style="cursor:pointer;">
-            <i class="fas fa-id-badge"></i> Case ID
-            <span class="sort" [ngClass]="{'asc': isAsc('caseId'), 'desc': isDesc('caseId'), 'neutral': !isAsc('caseId') && !isDesc('caseId')}"></span>
-          </th>
-          <th (click)="setSort('status')" [attr.aria-sort]="ariaSort('status')" style="cursor:pointer;">
-            <i class="fas fa-info-circle"></i> Status
-            <span class="sort" [ngClass]="{'asc': isAsc('status'), 'desc': isDesc('status'), 'neutral': !isAsc('status') && !isDesc('status')}"></span>
-          </th>
-          <th (click)="setSort('crime')" [attr.aria-sort]="ariaSort('crime')" style="cursor:pointer;">
-            <i class="fas fa-gavel"></i> Crime Type
-            <span class="sort" [ngClass]="{'asc': isAsc('crime'), 'desc': isDesc('crime'), 'neutral': !isAsc('crime') && !isDesc('crime')}"></span>
-          </th>
-          <th (click)="setSort('Investigation Officer')" [attr.aria-sort]="ariaSort('Investigation Officer')" style="cursor:pointer;">
-            <i class="fas fa-user-tie"></i> Investigator
-            <span class="sort" [ngClass]="{'asc': isAsc('Investigation Officer'), 'desc': isDesc('Investigation Officer'), 'neutral': !isAsc('Investigation Officer') && !isDesc('Investigation Officer')}"></span>
-          </th>
-          <th (click)="setSort('dateTime')" [attr.aria-sort]="ariaSort('dateTime')" style="cursor:pointer;">
-            <i class="fas fa-calendar-alt"></i> Date &amp; Time
-            <span class="sort" [ngClass]="{'asc': isAsc('dateTime'), 'desc': isDesc('dateTime'), 'neutral': !isAsc('dateTime') && !isDesc('dateTime')}"></span>
-          </th>
-          <th class="actions-col" style="text-align:left;"><i class="fas fa-cogs"></i> Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let c of rows, let i = index">
-          <td class="select-col">{{ (currentPage -1) * pageSize + i +1 }}</td>
-          <td><a (click)="navigateToCaseDetails(c)" style="cursor:pointer">{{ 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'
- }">
-              <span class="status-dot"></span>{{ c.status || '—' }}
-            </span>
-          </td>
-          <td>{{ c.crime || '—' }}</td>
-          <td>{{ c.police?.name || '—' }}</td>
-          <td>{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</td>
-          <td class="actions-col" style="text-align:left;">
-            <button class="icon-btn view" (click)="navigateToCaseDetails(c)" 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>
+        <!-- Bottom Controls -->
+        <div class="bottom-controls">
+          <div class="results-summary">
+            <div class="results-info">
+              <i class="fas fa-list-ol"></i>
+              <span>Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
+            </div>
+            <div class="page-size-selector">
+              <span>Show:</span>
+              <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)">
+                <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="pagination-controls">
+            <button class="page-btn prev" (click)="prevPage()" [disabled]="currentPage === 1">
+              <i class="fas fa-chevron-left"></i>
             </button>
-            <button class="icon-btn delete" (click)="deleteCase(i)" title="Delete">
-              <i class="fas fa-trash"></i>
+            <div class="page-numbers">
+              <ng-container *ngFor="let page of getPagination()">
+                <button *ngIf="page !== '...'"
+                        class="page-number"
+                        [class.active]="currentPage === page"
+                        (click)="goToPage(page)">
+                  {{ page }}
+                </button>
+                <span *ngIf="page === '...'" class="page-ellipsis">...</span>
+              </ng-container>
+            </div>
+            <button class="page-btn next" (click)="nextPage()" [disabled]="currentPage === totalPages">
+              <i class="fas fa-chevron-right"></i>
             </button>
-          </td>
-        </tr>
-        <tr *ngIf="rows.length ===0">
-          <td colspan="7" class="empty">No records found.</td>
-        </tr>
-      </tbody>
-    </table>
-
-    <!-- Pagination Controls -->
-    <div class="pagination-controls" style="display:flex;justify-content:center;align-items:center;margin:5px 0;gap:10px;">
-      <style>
-        .pagination-controls button {
-          border: none;
-          background: #f3f4f6;
-          color: #333;
-          border-radius: 8px;
-          padding: 016px;
-          min-width: 40px;
-          min-height: 40px;
-          font-size: 1.1em;
-          font-weight: 500;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-          transition: background 0.2s, color 0.2s, transform 0.2s;
-          cursor: pointer;
-          outline: none;
-        }
-
-          .pagination-controls button:hover:not(:disabled),
-          .pagination-controls button:focus:not(:disabled) {
-            background: #e3eafe;
-            color: #1976d2;
-            transform: scale(1.08);
-          }
-
-          .pagination-controls button.active {
-            background: #1976d2;
-            color: #fff;
-            font-weight: bold;
-            box-shadow: 0002px #90caf9;
-            animation: pulseActive1s infinite;
-          }
-
-        @keyframes pulseActive {
-          0% {
-            box-shadow: 0002px #90caf9;
-          }
-
-          50% {
-            box-shadow: 0006px #90caf9;
-          }
-
-          100% {
-            box-shadow: 0002px #90caf9;
-          }
-        }
-
-        .pagination-controls span {
-          font-size: 1.2em;
-          color: #888;
-          padding: 08px;
-        }
-      </style>
-      <button (click)="prevPage()" [disabled]="currentPage ===1">«</button>
-      <ng-container *ngFor="let page of getPagination()">
-        <button *ngIf="page !== '...'" (click)="goToPage(page)" [class.active]="currentPage === page">{{ page }}</button>
-        <span *ngIf="page === '...'">...</span>
-      </ng-container>
-      <button (click)="nextPage()" [disabled]="currentPage === totalPages">»</button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
-  <!-- Results summary and page size selector -->
-  <div style="display:flex;align-items:center;justify-content:flex-start;gap:24px;margin-bottom:12px;">
-    <span style="font-size:1.1em;"><i class="fas fa-list-ol"></i> Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
-    <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)" style="padding:4px 12px;border-radius:8px;font-size:1em;">
-      <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
-    </select>
-  </div>
+  <!-- Footer from provided design -->
+  <footer>
+    <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  </footer>
 
   <!-- 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"><i class="fas fa-info-circle"></i> Case Details</h2>
+      <button class="modal-close" (click)="closeDetails()"><i class="fas fa-times"></i></button>
     </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']">
@@ -263,39 +252,35 @@
               {{ sectionKey === 'crime' ? 'Crime Details' : sectionKey === 'suspect' ? 'Suspect Details' : 'Evidence and Documents' }}
             </div>
             <ng-container *ngFor="let subgroup of getSubgroups(sectionKey)">
-              <div class="subgroup-title" style="margin:10px 0 4px 0;font-weight:600;color:#1976d2;">
+              <div class="subgroup-title">
                 <i class="fas fa-folder"></i> {{ subgroup }}
               </div>
               <div class="fields-grid">
                 <ng-container *ngFor="let field of getFieldsForSubgroup(sectionKey, subgroup)">
-                  <div class="field-card" style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f3f4f6;">
-                    <span style="font-weight:500;color:#333;"><i class="fas fa-tag"></i> {{ field }}</span>
-                    <span style="color:#444;">{{ getFieldValue(sc, sectionKey, field) }}</span>
+                  <div class="field-card">
+                    <span class="field-label"><i class="fas fa-tag"></i> {{ field }}</span>
+                    <span class="field-value">{{ getFieldValue(sc, sectionKey, field) }}</span>
                   </div>
                 </ng-container>
               </div>
             </ng-container>
           </div>
         </ng-container>
-        <!-- Show all other fields from formData not in the above structure -->
+
         <div class="section-block">
           <div class="section-title"><i class="fas fa-list"></i> All Entered Information</div>
           <div class="fields-grid">
-            <div class="field-card" *ngFor="let key of objectKeys(sc)" style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f3f4f6;">
-              <span style="font-weight:500;color:#333;"><i class="fas fa-tag"></i> {{ key }}</span>
-              <span style="color:#444;">{{ getValue(sc, key) }}</span>
+            <div class="field-card" *ngFor="let key of objectKeys(sc)">
+              <span class="field-label"><i class="fas fa-tag"></i> {{ key }}</span>
+              <span class="field-value">{{ getValue(sc, key) }}</span>
             </div>
           </div>
         </div>
       </div>
     </div>
+
     <div class="modal-footer">
-      <button type="button" class="btn" (click)="closeDetails()"><i class="fas fa-times"></i> Close</button>
+      <button type="button" class="btn btn-close" (click)="closeDetails()"><i class="fas fa-times"></i> Close</button>
     </div>
   </div>
-
-  <footer>
-    <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
-  </footer>
-
-
+</div>

src/app/recordpage/recordpage.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
-import { InfopageComponent } from '../infopage/infopage.component';
+import { INFOPAGE_SECTIONS } from '../shared/infopage-sections';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -19,289 +19,30 @@ export class RecordpageComponent implements OnInit, OnDestroy {
 
   // Pagination
   currentPage: number = 1;
-  pageSize: number = 5; // Change to 20 if you want 20 per page
+  pageSize: number = 5;
+  pageSizeOptions: number[] = [5, 10, 20, 50];
+
   get totalPages(): number {
     return Math.ceil(this.filteredCases.length / this.pageSize) || 1;
   }
+
   get pagedCases(): PoliceCase[] {
     const start = (this.currentPage - 1) * this.pageSize;
     return this.filteredCases.slice(start, start + this.pageSize);
   }
-  setPage(page: number) {
-    if (page < 1 || page > this.totalPages) return;
-    this.currentPage = page;
-  }
-  nextPage() { this.setPage(this.currentPage + 1); }
-  prevPage() { this.setPage(this.currentPage - 1); }
 
-  // modal
+  // Modal state
   showDetails = false;
   selectedCase: PoliceCase | null = null;
   selectedIndex = -1;
 
-  // quick filter
+  // Search query
   q = '';
 
-  // simple sort state
-  sortKey: 'caseId' | 'crime' | 'dateTime' | 'location' | 'status' | 'Investigation Officer' = 'dateTime';
+  // Sorting
+  sortKey: 'caseId' | 'crime' | 'dateTime' | '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;
-    let value: any = undefined;
-    if (Array.isArray(path)) {
-      let v = sc;
-      for (const p of path) {
-        if (v && v[p] !== undefined) v = v[p];
-        else { v = undefined; break; }
-      }
-      value = v;
-    } else {
-      value = sc && sc[path] !== undefined ? sc[path] : undefined;
-    }
-
-    // Fallback: try raw formData (array or object) saved with the case
-    if (value === null || value === undefined || value === '') {
-      try {
-        const fd = this.getFormDataArray(sc);
-        const norm = (s: any) => {
-          if (s === null || s === undefined) return '';
-          let t = String(s).toLowerCase();
-          t = t.replace(/&/g, '');
-          t = t.replace(/and/g, '');
-          t = t.replace(/entry/g, '');
-          t = t.replace(/\s+/g, '');
-          return t.replace(/[^a-z0-9]/g, '');
-        };
-
-        if (fd && fd.length) {
-          let kv = fd.find(k => k && String(k.key).toLowerCase() === String(field).toLowerCase());
-          if (kv) value = kv.value;
-          if (value === null || value === undefined || value === '') {
-            const fieldNorm = norm(field);
-            const pathName = Array.isArray(path) ? path[path.length -1] : String(path);
-            const pathNorm = norm(pathName);
-            kv = fd.find(k => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm || norm(k.key).includes(fieldNorm) || fieldNorm.includes(norm(k.key))));
-            if (kv) value = kv.value;
-          }
-        }
-
-        if ((value === null || value === undefined || value === '') && sc && sc.formData && typeof sc.formData === 'object') {
-          if (sc.formData[field] !== undefined) value = sc.formData[field];
-          else {
-            const fieldNorm = (s: any) => s === null || s === undefined ? '' : String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
-            const target = fieldNorm(field);
-            for (const k of Object.keys(sc.formData)) {
-              if (fieldNorm(k) === target || k.toLowerCase() === field.toLowerCase() || k.toLowerCase().includes(field.toLowerCase())) {
-                value = sc.formData[k];
-                break;
-              }
-            }
-          }
-        }
-      } catch (e) {
-        // ignore
-      }
-    }
-
-    // Normalize and format
-    if (value === null || value === undefined || value === '') return '—';
-
-    // Date formatting
-    if ((this.dateTimeFields && this.dateTimeFields.has(field)) || (this.dateFields && this.dateFields.has(field))) {
-      const d = new Date(value);
-      if (!isNaN(d.getTime())) {
-        if (this.dateFields && this.dateFields.has(field)) return d.toISOString().slice(0,10);
-        return d.toLocaleString();
-      }
-    }
-
-    if (typeof value === 'object') return this.formatFormValue(value);
-    return value;
-  }
-
-  getValue(obj: any, key: string): any {
-    const v = obj && obj[key] !== undefined ? obj[key] : undefined;
-    if (v === null || v === undefined || v === '') return '—';
-    if (typeof v === 'object') return this.formatFormValue(v);
-    if ((this.dateTimeFields && this.dateTimeFields.has(key)) || (this.dateFields && this.dateFields.has(key))) {
-      const d = new Date(v);
-      if (!isNaN(d.getTime())) {
-        if (this.dateFields && this.dateFields.has(key)) return d.toISOString().slice(0,10);
-        return d.toLocaleString();
-      }
-    }
-    return v;
-  }
-
-  // Helpers for handling stored formData
-  isFormDataArray(fd: any): boolean {
-    return Array.isArray(fd) && fd.length >0 && fd.every((item: any) => item && Object.prototype.hasOwnProperty.call(item, 'key'));
-  }
-
-  getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
-    if (!caseObj || !caseObj.formData) return [];
-    const fd = caseObj.formData;
-    if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
-    if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
-    return [{ key: 'value', value: fd }];
-  }
-
-  formatFormValue(value: any): string {
-    if (value === null || value === undefined || value === '') return '—';
-    if (typeof value === 'object') {
-      try { return JSON.stringify(value, null,2); } catch { return String(value); }
-    }
-    return String(value);
-  }
-
-  constructor(private caseStore: CaseStoreService, private router: Router) { }
-
   // Filter state
   filterCrimeType: string = '';
   filterStatus: string = '';
@@ -315,11 +56,22 @@ export class RecordpageComponent implements OnInit, OnDestroy {
 
   filteredCases: PoliceCase[] = [];
 
-  // selection state
+  // Selection state
   allSelected: boolean = false;
 
+  // For modal subgroup pills
+  selectedSubgroup: any = {
+    crime: 'Identification & Timing',
+    suspect: 'Identity',
+    notes: 'Investigation Notes'
+  };
+
+  // Reference infopage section/subgroup/fields structure
+  sections = INFOPAGE_SECTIONS;
+
+  constructor(private caseStore: CaseStoreService, private router: Router) { }
+
   ngOnInit(): void {
-    // Subscribe to case store so UI updates automatically when new cases are added/updated
     if (typeof this.caseStore.getCases$ === 'function') {
       this.casesSub = this.caseStore.getCases$().subscribe((cases: PoliceCase[]) => {
         this.cases = cases || [];
@@ -329,7 +81,6 @@ export class RecordpageComponent implements OnInit, OnDestroy {
         this.applySort();
       });
     } else {
-      // Fallback for older API
       this.load();
       this.populateFilterOptions();
       this.applyFilters();
@@ -341,17 +92,72 @@ export class RecordpageComponent implements OnInit, OnDestroy {
     if (this.casesSub) this.casesSub.unsubscribe();
   }
 
-  load(): void {
-    this.cases = this.caseStore.getPoliceCases();
-    this.cases.forEach((c: any) => { if (c.selected === undefined) c.selected = false; });
-    this.populateFilterOptions();
-    this.applyFilters();
+  // Helper methods
+  getSubgroups(sectionKey: string): string[] {
+    return Object.keys(this.sections[sectionKey]?.subgroups || {});
   }
 
-  toggleSelectAll(event: Event): void {
-    const checked = (event.target as HTMLInputElement).checked;
-    this.allSelected = checked;
-    this.rows.forEach((c: any) => c.selected = checked);
+  getFieldsForSubgroup(sectionKey: string, subgroup: string): string[] {
+    return this.sections[sectionKey]?.subgroups[subgroup] || [];
+  }
+
+  selectSubgroup(sectionKey: string, subgroup: string) {
+    this.selectedSubgroup[sectionKey] = subgroup;
+  }
+
+  // Case statistics
+  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;
+  }
+
+  // Table rows getter
+  get rows(): PoliceCase[] {
+    return this.pagedCases;
+  }
+
+  // Pagination results
+  get resultsStart(): number {
+    return this.filteredCases.length === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
+  }
+
+  get resultsEnd(): number {
+    return Math.min(this.currentPage * this.pageSize, this.filteredCases.length);
+  }
+
+  get resultsTotal(): number {
+    return this.filteredCases.length;
+  }
+
+  // Navigation methods
+  navigateHome(): void {
+    this.router.navigate(['/']);
+  }
+
+  navigateBackToInfoPage(): void {
+    this.router.navigate(['/infopage']);
+  }
+
+  logout(): void {
+    // Implement proper logout logic
+    localStorage.clear();
+    sessionStorage.clear();
+    this.router.navigate(['/login']);
+  }
+
+  // Data loading and filtering
+  load(): void {
+    this.cases = this.caseStore.getPoliceCases();
+    this.cases.forEach((c: any) => { if (c.selected === undefined) c.selected = false; });
+    this.populateFilterOptions();
+    this.applyFilters();
   }
 
   populateFilterOptions() {
@@ -362,14 +168,15 @@ export class RecordpageComponent implements OnInit, OnDestroy {
   }
 
   applyFilters() {
-    // First, filter by dropdowns
+    // Filter by dropdowns
     let filtered = 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)
     );
-    // Then, filter by search query
+
+    // Filter by search query
     const s = (this.q || '').toLowerCase();
     if (s) {
       filtered = filtered.filter(c =>
@@ -380,8 +187,9 @@ export class RecordpageComponent implements OnInit, OnDestroy {
         (c.police?.name || '').toLowerCase().includes(s)
       );
     }
+
     this.filteredCases = filtered;
-    this.currentPage =1; // Reset to first page on filter
+    this.currentPage = 1;
     this.applySort();
   }
 
@@ -390,23 +198,11 @@ export class RecordpageComponent implements OnInit, OnDestroy {
     this.filterStatus = '';
     this.filterLocation = '';
     this.filterOfficer = '';
+    this.q = '';
     this.applyFilters();
   }
 
-  // search over visible columns (no accused)
-  get filtered(): PoliceCase[] {
-    const s = (this.q || '').toLowerCase();
-    if (!s) return this.cases;
-    return this.cases.filter(c =>
-      (c.caseId || '').toString().toLowerCase().includes(s) ||
-      (c.crime || '').toLowerCase().includes(s) ||
-      (c.police?.address || '').toLowerCase().includes(s) ||
-      (c.status || '').toLowerCase().includes(s) ||
-      (c.police?.name || '').toLowerCase().includes(s)
-    );
-  }
-
-  // sorting helpers
+  // Sorting methods
   setSort(key: typeof this.sortKey) {
     if (this.sortKey === key) {
       this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
@@ -416,12 +212,15 @@ export class RecordpageComponent implements OnInit, OnDestroy {
     }
     this.applySort();
   }
+
   isAsc(key: typeof this.sortKey) {
     return this.sortKey === key && this.sortDir === 'asc';
   }
+
   isDesc(key: typeof this.sortKey) {
     return this.sortKey === key && this.sortDir === 'desc';
   }
+
   ariaSort(key: typeof this.sortKey) {
     return this.sortKey === key ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
   }
@@ -429,8 +228,10 @@ export class RecordpageComponent implements OnInit, OnDestroy {
   applySort() {
     const key = this.sortKey;
     const dir = this.sortDir;
+
     this.filteredCases.sort((a, b) => {
       let aVal: any, bVal: any;
+
       switch (key) {
         case 'caseId':
           aVal = a.caseId || '';
@@ -441,12 +242,8 @@ export class RecordpageComponent implements OnInit, OnDestroy {
           bVal = b.crime || '';
           break;
         case 'dateTime':
-          aVal = a.dateTime ? new Date(a.dateTime).getTime() :0;
-          bVal = b.dateTime ? new Date(b.dateTime).getTime() :0;
-          break;
-        case 'location':
-          aVal = a.police?.address || '';
-          bVal = b.police?.address || '';
+          aVal = a.dateTime ? new Date(a.dateTime).getTime() : 0;
+          bVal = b.dateTime ? new Date(b.dateTime).getTime() : 0;
           break;
         case 'status':
           aVal = a.status || '';
@@ -460,175 +257,378 @@ export class RecordpageComponent implements OnInit, OnDestroy {
           aVal = '';
           bVal = '';
       }
-      if (aVal < bVal) return dir === 'asc' ? -1 :1;
-      if (aVal > bVal) return dir === 'asc' ?1 : -1;
+
+      if (aVal < bVal) return dir === 'asc' ? -1 : 1;
+      if (aVal > bVal) return dir === 'asc' ? 1 : -1;
       return 0;
     });
   }
 
-  // Update your table to use filteredCases instead of rows
-  get rows(): PoliceCase[] {
-    return this.pagedCases;
+  // Pagination methods
+  setPage(page: number) {
+    if (page < 1 || page > this.totalPages) return;
+    this.currentPage = page;
+  }
+
+  nextPage() {
+    this.setPage(this.currentPage + 1);
+  }
+
+  prevPage() {
+    this.setPage(this.currentPage - 1);
+  }
+
+  getPagination(): (number | string)[] {
+    const pages: (number | string)[] = [];
+    const total = this.totalPages;
+
+    if (total <= 7) {
+      for (let i = 1; i <= total; i++) pages.push(i);
+    } else {
+      if (this.currentPage <= 4) {
+        for (let i = 1; i <= 5; i++) pages.push(i);
+        pages.push('...');
+        pages.push(total);
+      } else if (this.currentPage >= total - 3) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = total - 4; i <= total; i++) pages.push(i);
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = this.currentPage - 1; i <= this.currentPage + 1; i++) pages.push(i);
+        pages.push('...');
+        pages.push(total);
+      }
+    }
+
+    return pages;
   }
 
+  goToPage(page: string | number) {
+    if (typeof page === 'number') {
+      this.setPage(page);
+    }
+  }
+
+  onPageSizeChange(size: number) {
+    this.pageSize = size;
+    this.currentPage = 1;
+  }
+
+  // Modal methods
   openDetails(c: PoliceCase, i: number): void {
     this.selectedCase = c;
     this.selectedIndex = i;
     this.showDetails = true;
-    document.body.classList.add('modal-open');
+    document.body.style.overflow = 'hidden';
   }
 
   closeDetails(): void {
     this.showDetails = false;
     this.selectedCase = null;
     this.selectedIndex = -1;
-    document.body.classList.remove('modal-open');
+    document.body.style.overflow = 'auto';
   }
 
+  // Case actions
   editCase(c: PoliceCase, i: number): void {
-    // Navigate to /infopage/:id for editing and pass prefill data in navigation state
     const prefill: Record<string, any> = {};
+
     try {
-      // If case.formData is stored as array of {key,value}
       const fd = (c as any).formData;
       if (fd && Array.isArray(fd)) {
         (fd as Array<any>).forEach(kv => { if (kv && kv.key) prefill[kv.key] = kv.value; });
       } else if (fd && typeof fd === 'object') {
         Object.assign(prefill, fd as Record<string, any>);
       }
-      // Also include mapped top-level properties for convenience
+
+      // Include mapped top-level properties
       if (c.caseId) prefill['Case ID'] = c.caseId;
       if (c.crime) prefill['Crime Type'] = c.crime;
       if (c.dateTime) prefill['Date & Time (Entry)'] = c.dateTime;
-      if (c.police && c.police.address) prefill['Location'] = c.police.address;
-      if (c.police && c.police.name) prefill['Investigating Officer'] = c.police.name;
-      if (c.accused && c.accused.name) prefill['Suspect Name'] = c.accused.name;
+      if (c.police?.address) prefill['Location'] = c.police.address;
+      if (c.police?.name) prefill['Investigating Officer'] = c.police.name;
+      if (c.accused?.name) prefill['Suspect Name'] = c.accused.name;
     } catch (e) {
-      // ignore
+      console.error('Error preparing edit data:', e);
     }
 
-    this.router.navigate(['/infopage', c.caseId], { state: { from: 'record', returnId: c.caseId, prefillFormData: prefill, case: c } });
+    this.router.navigate(['/infopage', c.caseId], {
+      state: {
+        from: 'record',
+        returnId: c.caseId,
+        prefillFormData: prefill,
+        case: c
+      }
+    });
   }
 
-  // resolve origin dynamically from current router url
-  private resolveOrigin(): string {
-    try {
-      const cur = this.router.url || '';
-      if (cur.includes('/case-details')) return 'case-details';
-      if (cur.includes('/record')) return 'record';
-    } catch {}
-    return 'record';
+  deleteCase(index: number): void {
+    if (confirm('Are you sure you want to delete this case?')) {
+      this.caseStore.deletePoliceCaseAt(index);
+      this.load();
+    }
   }
 
   navigateToCaseDetails(c: PoliceCase): void {
     if (!c || !c.caseId) return;
-    const origin = this.resolveOrigin();
-    // navigate to new summary page — include source so summary can navigate back
-    const from = origin;
-    this.router.navigate(['/case-details-summary-page', c.caseId], { queryParams: { from, returnId: c.caseId }, state: { case: c, from, returnId: c.caseId } });
-  }
 
-  viewSummary(caseId: string) {
-    const origin = this.resolveOrigin();
-    this.router.navigate(['/case-details-summary-page', caseId], { queryParams: { from: origin, returnId: caseId }, state: { from: origin, returnId: caseId } });
+    const origin = this.router.url.includes('/case-details') ? 'case-details' : 'record';
+
+    this.router.navigate(['/case-details-summary-page', c.caseId], {
+      queryParams: {
+        from: origin,
+        returnId: c.caseId
+      },
+      state: {
+        case: c,
+        from: origin,
+        returnId: c.caseId
+      }
+    });
   }
 
-  onModernSearch() {
-    // Optionally, you can trigger filtering or any other logic here
-    // For now, just prevent form submission from reloading the page
-    return false;
-  }
+  // Field value getters for modal
+  objectKeys = Object.keys;
 
-  navigateHome(): void {
-    this.router.navigate(['/']);
-  }
+  getFieldValue(sc: any, sectionKey: string, field: string): any {
+    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'
+    };
 
-  onNewRecord(): void {
-    // Placeholder: implement record creation logic or modal here
-    alert('New record functionality coming soon!');
-  }
+    const path = fieldMap[field] || field;
+    let value: any = undefined;
 
-  deleteCase(index: number): void {
-    if (confirm('Are you sure you want to delete this case?')) {
-      this.caseStore.deletePoliceCaseAt(index);
-      this.load();
+    if (Array.isArray(path)) {
+      let v = sc;
+      for (const p of path) {
+        if (v && v[p] !== undefined) v = v[p];
+        else { v = undefined; break; }
+      }
+      value = v;
+    } else {
+      value = sc && sc[path] !== undefined ? sc[path] : undefined;
     }
-  }
 
-  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();
-  }
+    // Try to find in formData
+    if (value === null || value === undefined || value === '') {
+      try {
+        const fd = this.getFormDataArray(sc);
+        const norm = (s: any) => {
+          if (s === null || s === undefined) return '';
+          let t = String(s).toLowerCase();
+          t = t.replace(/&/g, '');
+          t = t.replace(/and/g, '');
+          t = t.replace(/entry/g, '');
+          t = t.replace(/\s+/g, '');
+          return t.replace(/[^a-z0-9]/g, '');
+        };
 
-  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;
-  }
+        if (fd && fd.length) {
+          let kv = fd.find(k => k && String(k.key).toLowerCase() === String(field).toLowerCase());
+          if (kv) value = kv.value;
 
-  getPagination(): (number | string)[] {
-    const pages: (number | string)[] = [];
-    const total = this.totalPages;
-    if (total <= 7) {
-      for (let i = 1; i <= total; i++) pages.push(i);
-    } else {
-      if (this.currentPage <= 4) {
-        for (let i = 1; i <= 5; i++) pages.push(i);
-        pages.push('...');
-        pages.push(total);
-      } else if (this.currentPage >= total - 3) {
-        pages.push(1);
-        pages.push('...');
-        for (let i = total - 4; i <= total; i++) pages.push(i);
-      } else {
-        pages.push(1);
-        pages.push('...');
-        for (let i = this.currentPage - 1; i <= this.currentPage + 1; i++) pages.push(i);
-        pages.push('...');
-        pages.push(total);
+          if (value === null || value === undefined || value === '') {
+            const fieldNorm = norm(field);
+            const pathName = Array.isArray(path) ? path[path.length - 1] : String(path);
+            const pathNorm = norm(pathName);
+            kv = fd.find(k => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm));
+            if (kv) value = kv.value;
+          }
+        }
+
+        if ((value === null || value === undefined || value === '') && sc && sc.formData && typeof sc.formData === 'object') {
+          if (sc.formData[field] !== undefined) value = sc.formData[field];
+        }
+      } catch (e) {
+        // ignore
       }
     }
-    return pages;
-  }
 
-  goToPage(page: string | number) {
-    if (typeof page === 'number') {
-      this.setPage(page);
+    // Normalize and format
+    if (value === null || value === undefined || value === '') return 'Not Assigned';
+
+    // Date formatting
+    if (this.dateTimeFields.has(field) || this.dateFields.has(field)) {
+      const d = new Date(value);
+      if (!isNaN(d.getTime())) {
+        if (this.dateFields.has(field)) return d.toISOString().slice(0, 10);
+        return d.toLocaleString();
+      }
     }
+
+    if (typeof value === 'object') return this.formatFormValue(value);
+    return value;
   }
 
-  pageSizeOptions: number[] = [5, 10, 20, 50];
-  onPageSizeChange(size: number) {
-    this.pageSize = size;
-    this.currentPage = 1;
+  getValue(obj: any, key: string): any {
+    const v = obj && obj[key] !== undefined ? obj[key] : undefined;
+    if (v === null || v === undefined || v === '') return 'Not Assigned';
+    if (typeof v === 'object') return this.formatFormValue(v);
+    if (this.dateTimeFields.has(key) || this.dateFields.has(key)) {
+      const d = new Date(v);
+      if (!isNaN(d.getTime())) {
+        if (this.dateFields.has(key)) return d.toISOString().slice(0, 10);
+        return d.toLocaleString();
+      }
+    }
+    return v;
   }
-  get resultsStart(): number {
-    return this.filteredCases.length === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
+
+  // Form data helpers
+  isFormDataArray(fd: any): boolean {
+    return Array.isArray(fd) && fd.length > 0 && fd.every((item: any) => item && Object.prototype.hasOwnProperty.call(item, 'key'));
   }
-  get resultsEnd(): number {
-    return Math.min(this.currentPage * this.pageSize, this.filteredCases.length);
+
+  getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
+    if (!caseObj || !caseObj.formData) return [];
+    const fd = caseObj.formData;
+    if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
+    if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
+    return [{ key: 'value', value: fd }];
   }
-  get resultsTotal(): number {
-    return this.filteredCases.length;
+
+  formatFormValue(value: any): string {
+    if (value === null || value === undefined || value === '') return 'Not Assigned';
+    if (typeof value === 'object') {
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch {
+        return String(value);
+      }
+    }
+    return String(value);
   }
 
-  goToDetect(caseId: string): void {
-    this.router.navigate(['/py-detect'], { state: { caseId } });
+  // Other methods
+  toggleSelectAll(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    this.allSelected = checked;
+    this.rows.forEach((c: any) => c.selected = checked);
   }
 
-  navigateBackToInfoPage(): void {
-    this.router.navigate(['/infopage']);
+  onModernSearch() {
+    return false;
   }
 
-  logout(): void {
-    // Implement your logout logic here (clear session, etc.)
-    // For now, just redirect to home/login
-    window.location.href = '/';
+  goToDetect(caseId: string): void {
+    this.router.navigate(['/py-detect'], { state: { caseId } });
   }
 }

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

@@ -162,6 +162,8 @@ export class CaseStoreService {
     const mapped: PoliceCase = {
       caseId: crime.caseId || (formValue && formValue['Case ID']) || '',
       dateTime: crime.dateTime || '' ,
+      // mark when infopage submission occurred
+      lastUpdated: new Date().toISOString(),
       status: notes.status || 'Open',
       crime: crime.crimeType || 'Unknown',
       police: {
@@ -199,6 +201,8 @@ export class CaseStoreService {
     if (idx !== -1) {
       // Merge existing object to preserve other metadata where possible
       this.cases[idx] = { ...this.cases[idx], ...mapped };
+      // Ensure lastUpdated reflects this infopage update
+      this.cases[idx].lastUpdated = mapped.lastUpdated || new Date().toISOString();
       this.save();
       this.debugLogCasesOperation('updatePoliceCase', mapped);
       this.casesSubject.next(this.cases.slice());

src/app/shared/infopage-sections.ts

@@ -0,0 +1,34 @@
+export const INFOPAGE_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 & Involved Persons': ['Location', 'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Reporter Phone', 'Reporter Email', 'Witness Count', 'Witness Phone', 'Witness Email', 'Victim Name', 'Victim Phone', 'Victim Email', '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', 'Physical Evidence List', 'Evidence Storage Reference', 'Evidence Collected By', 'Evidence Bag / Seal Number', 'Scene Secured Time', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Forensic Tests Required', 'Chain of Custody?', 'Scene Condition'],
+ 'Operational Notes': ['Investigating Officer', 'Duty Person', 'Supervising Officer', 'Patrol Notes', 'Arrest Made', 'Arrest Location', 'Initial Actions Taken', 'risk Level', 'Confidentiality'],
+ 'Status & Linkage': ['Biometric / Forensic IDs', 'DNA Ref ID', 'Fingerprint ID', 'Investigative Status', 'Linked Cases', 'Arrest Count', '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', 'Suspect Email', 'Suspect Phone', 'Alias / Nickname', 'Age', 'Gender', 'Nationality', 'Nationality ID / Passport Number', 'Languages', 'Address', 'Known Aliases', 'Government ID'],
+ 'Physical Description': ['Height (cm)', 'Weight (kg)', 'Build', 'Skin Tone', 'Hair Color', 'Eye Color', 'Facial Hair', 'Handedness', 'Tattoo Details', 'Scar Details', 'Distinguishing Marks', 'Voice Characteristics', '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', 'Digital Evidence'],
+ 'Links and Recommendation': ['Links to Evidence', 'Final Recommendations'],
+ 'Remark': ['Remark']
+ }
+ }
+};

src/styles.css

@@ -21,7 +21,7 @@ body.light-theme {
 
 /* Homepage specific background */
 body.homepage-bg {
-  background: url('/assets/hero.png') no-repeat center center fixed;
+  background: url('/assets/coverimage.png') no-repeat center center fixed;
   background-size: cover;
 }
 
@@ -92,7 +92,7 @@ html {
 /* Firefox Scrollbar */
 html {
   scrollbar-width: thin;
-  scrollbar-color: #00d4ff rgba(0, 0, 0, 0.1);
+  scrollbar-color: #1e3a8a rgba(0, 0, 0, 0.1);
 }
 
 /* Material Design Compatibility */