From 5bd34b58e06022038c2563e076c51d228792cac2 Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Thu, 18 Dec 2025 10:16:47 +0530
Subject: [PATCH 1/4] 1000021: Fixing issues in Employee Management

---
 .../src/components/Announcement.css           |  12 +-
 Employee_Managment_App/src/index.css          | 221 ++++++++++++++----
 2 files changed, 189 insertions(+), 44 deletions(-)

diff --git a/Employee_Managment_App/src/components/Announcement.css b/Employee_Managment_App/src/components/Announcement.css
index f080c1e..afd30e7 100644
--- a/Employee_Managment_App/src/components/Announcement.css
+++ b/Employee_Managment_App/src/components/Announcement.css
@@ -8,6 +8,14 @@
   --annc-backdrop: rgba(2,6,23,0.35);
   --annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
   --annc-panel-width: 380px;
+
+
+    /* Accent (emerald) */
+  --accent: #10b981;
+  --accent-600: #059669;
+  --accent-700: #047857;
+  --accent-100: #d1fae5;
+  --accent-50: #ecfdf5;
 }
 
 /* Backdrop area that starts below the top bar (top offset applied inline) */
@@ -145,8 +153,8 @@
   transition: background 160ms ease, border-color 160ms ease;
 }
 .annc-panel-item:hover {
-  background: #f8fffb;
-  border-color: #e8f7f1;
+    background: var(--accent-50);
+    color: var(--accent-700);
 }
 .annc-item-icon {
   width: 36px;
diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css
index 06b93dd..bb4593d 100644
--- a/Employee_Managment_App/src/index.css
+++ b/Employee_Managment_App/src/index.css
@@ -15,7 +15,18 @@
   line-height: 1;
   text-transform: none;
 }
-
+#payroll_grid .e-summaryrow .e-leftfreeze.e-summarycell[data-index="2"] {
+  border-right-color: #818cf8;
+  border-right-width: 2px;
+}
+ 
+#payroll_grid.e-grid.e-left-shadow .e-summaryrow .e-leftfreeze.e-summarycell[data-index="2"] {
+    clip-path: inset(0 -15px 0 0);
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.12);
+    border-right-width: 0px;
+}
+ 
+ 
 .e-icons.e-small {
   font-size: 8px;
 }
@@ -388,6 +399,86 @@
   content: "\e759";
 }
 
+
+
+/* Primary/OK button: hover/focus in Column Chooser */
+.e-dialog .e-footer-content .e-btn.e-primary:hover,
+.e-dialog .e-footer-content .e-btn.e-primary:focus {
+  background-color: var(--color-sf-success) !important; /* subtle green */
+  border-color: var(--color-sf-success) !important;
+  color: var(--color-sf-dialog-border) !important;
+}
+
+/*Disabled primary button on hover */
+
+.e-dialog .e-footer-content .e-btn.e-primary:disabled:hover,
+.e-dialog .e-footer-content .e-btn.e-primary.e-disabled:hover,
+.e-dialog .e-footer-content .e-btn.e-primary[aria-disabled="true"]:hover { 
+  background-color: var(--color-sf-success-bg-color-disabled) !important;
+  border-color: var( --color-sf-success-border-color-disabled) !important;
+}
+
+/* Cancel button: keep subtle grey on hover/focus (not green) */
+.e-dialog .e-footer-content .e-btn:not(.e-primary) {
+  background-color:var(--color-sf-appbar-bg-color-alt1);           
+  border-color: var(--color-sf-rating-unrated-disabled-color);      
+  color: var(--color-sf-rating-unrated-hover-color);
+}
+.e-dialog .e-footer-content .e-btn:not(.e-primary):hover,
+.e-dialog .e-footer-content .e-btn:not(.e-primary):focus {
+  background-color: var(--color-sf-rating-unrated-disabled-color) !important;
+  border-color: var(--color-sf-primary-lighter) !important; 
+  color: var(--color-sf-appbar-bg-color-alt2) !important;         
+}
+
+/* Checkbox hover styles inside Column Chooser list */
+.e-checkbox-wrapper:hover .e-frame {
+  border-color: var(--color-sf-primary-bg-color) !important;
+}
+.e-checkbox-wrapper:hover .e-frame.e-check,
+.e-checkbox-wrapper:hover .e-frame.e-stop {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+}
+/* Improve hover via list item hover as well */
+.e-list-item:hover .e-checkbox-wrapper .e-frame {
+  border-color: var(--color-sf-primary-bg-color) !important;
+}
+.e-list-item:hover .e-checkbox-wrapper .e-frame.e-check,
+.e-list-item:hover .e-checkbox-wrapper .e-frame.e-stop {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+}
+/* Checked / indeterminate visuals anywhere in the chooser */
+.e-column-chooser .e-checkbox-wrapper .e-frame.e-check,
+.e-column-chooser .e-checkbox-wrapper .e-frame.e-stop,
+.e-dialog .e-checkbox-wrapper .e-frame.e-check,
+.e-dialog .e-checkbox-wrapper .e-frame.e-stop {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-border-color) !important;
+}
+.e-dialog .e-checkbox-wrapper .e-frame.e-check:before,
+.e-dialog .e-checkbox-wrapper .e-frame.e-stop:before {
+  color: #fff !important;
+}
+/* List item selected (Select All) */
+.e-column-chooser .e-list-item.e-active .e-frame {
+  background-color: var(--color-sf-success) !important;
+  border-color: var(--color-sf-success) !important;
+}
+
+/* Columns trigger and generic focus outlines: remove blue ring */
+.e-toolbar .e-tbar-btn:focus,
+.e-toolbar .e-tbar-btn:active,
+.e-dropdown-btn:focus,
+.e-dropbtn:focus,
+.e-btn:focus,
+.e-input:focus,
+button:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35) !important; /* soft green */
+}
+
 .e-icons.e-italic:before {
   content: "\e75a";
 }
@@ -1908,6 +1999,43 @@
   content: "\e8d5";
 }
 
+/* Override Calendar/DatePicker colors: set selected date and Today to green */
+/* Selected date cell */
+.e-calendar .e-content td.e-selected span,
+.e-calendar .e-content td.e-selected:hover span,
+.e-datepicker .e-calendar .e-content td.e-selected span {
+  background-color: var(--color-sf-success) !important;
+  border-color: var(--color-sf-success) !important;
+  color: #fff !important;
+}
+/* Today cell (outline/foreground) */
+.e-calendar .e-content td.e-today span,
+.e-datepicker .e-calendar .e-content td.e-today span {
+  color: var(--color-sf-success) !important;
+  border-color: var(--color-sf-success) !important;
+}
+/* Today button in footer */
+.e-calendar .e-footer-container .e-btn.e-today,
+.e-datepicker .e-footer-container .e-btn.e-today {
+  background-color: var(--color-sf-success) !important;
+  border-color: var(--color-sf-success) !important;
+  color: #fff !important;
+}
+/* Footer Today button hover/focus */
+.e-calendar .e-footer-container .e-btn.e-today:hover,
+.e-calendar .e-footer-container .e-btn.e-today:focus,
+.e-datepicker .e-footer-container .e-btn.e-today:hover,
+.e-datepicker .e-footer-container .e-btn.e-today:focus {
+  background-color: var(--color-sf-success) !important;
+  border-color: var(--color-sf-success) !important;
+}
+
+/* Also adjust keyboard focus ring on day cells to green */
+.e-calendar .e-content td:focus span,
+.e-datepicker .e-calendar .e-content td:focus span {
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35) !important;
+}
+
 .e-icons.e-frame-mat:before {
   content: "\e8d6";
 }
@@ -2610,6 +2738,12 @@
   --color-sf-chip-info-bg-color-disabled: #ecfeff;
   --color-sf-chip-info-border-color-disabled: #cffafe;
   --color-sf-chip-info-text-disabled: #67e8f9;
+    /* Accent (emerald) */
+  --accent: #10b981;
+  --accent-600: #059669;
+  --accent-700: #047857;
+  --accent-100: #d1fae5;
+  --accent-50: #ecfdf5;
 }
 
 .e-dark-mode {
@@ -5504,7 +5638,7 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::before,
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::after {
-  background-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
   opacity: 0;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
@@ -5514,7 +5648,7 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover,
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
-  background: var(--color-sf-primary);
+  background: var(--color-sf-primary-bg-color);
   border-left: none;
   border-right: none;
 }
@@ -5522,7 +5656,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler,
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
   background: var(--color-sf-content-bg-color);
-  color: var(--color-sf-primary);
+  color: var(---color-sf-primary-bg-color);
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left,
@@ -7116,8 +7250,8 @@
 
 .e-btn.e-primary:hover,
 .e-css.e-btn.e-primary:hover {
-  background: var(--color-sf-primary-bg-color-hover);
-  border-color: var(--color-sf-primary-border-color-hover);
+  background: var(--color-sf-success-bg-color-hover);
+  border-color: var(--color-sf-success-border-color-hover);
   -webkit-box-shadow: none;
   box-shadow: none;
   color: var(--color-sf-primary-text-hover);
@@ -7125,8 +7259,8 @@
 
 .e-btn.e-primary:focus,
 .e-css.e-btn.e-primary:focus {
-  background: var(--color-sf-primary-bg-color-focus);
-  border-color: var(--color-sf-primary-border-color-focus);
+  background: var(--color-sf-success-bg-color-hover);
+  border-color: var(--color-sf-success-bg-color-hover);
   color: var(--color-sf-primary-text-focus);
   outline: var(--color-sf-secondary-bg-color) 0 solid;
 }
@@ -7135,14 +7269,14 @@
 .e-css.e-btn.e-primary:focus-visible {
   background: var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-color);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-success-bg-color-hover);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-success-bg-color-hover);
 }
 
 .e-btn.e-primary:active,
 .e-css.e-btn.e-primary:active {
-  background: var(--color-sf-primary-bg-color-pressed);
-  border-color: var(--color-sf-primary-border-color-pressed);
+  background: var(--color-sf-success-bg-color-pressed);
+  border-color: var(--color-sf-success-border-color-pressed);
   color: var(--color-sf-primary-text-pressed);
   outline: var(--color-sf-secondary-bg-color) 0 solid;
   -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
@@ -7484,8 +7618,8 @@
 
 .e-btn.e-flat.e-primary:hover,
 .e-css.e-btn.e-flat.e-primary:hover {
-  background: var(--color-sf-primary-bg-color-hover);
-  border-color: var(--color-sf-primary-border-color-hover);
+  background: var(--color-sf-success-bg-color-hover);
+  border-color: var(--color-sf-success-border-color-hover);
   color: var(--color-sf-primary-text-color);
 }
 
@@ -7517,11 +7651,11 @@
 .e-btn.e-flat.e-primary.e-disabled,
 .e-css.e-btn.e-flat.e-primary:disabled,
 .e-css.e-btn.e-flat.e-primary.e-disabled {
-  background: var(--color-sf-primary-bg-color-disabled);
+  background: var(--color-sf-success-bg-color-disabled);
   border-color: transparent;
   -webkit-box-shadow: none;
   box-shadow: none;
-  color: var(--color-sf-primary-text-disabled);
+  color: var(--color-sf-success-text-disabled);
 }
 
 .e-btn.e-flat.e-primary .e-ripple-element,
@@ -8740,15 +8874,15 @@
 
 .e-checkbox-wrapper .e-frame.e-check,
 .e-css.e-checkbox-wrapper .e-frame.e-check {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
   color: var(--color-sf-primary-text-color);
 }
 
 .e-checkbox-wrapper .e-frame.e-stop,
 .e-css.e-checkbox-wrapper .e-frame.e-stop {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
   color: var(--color-sf-primary-text-color);
 }
 
@@ -8812,14 +8946,14 @@
 .e-checkbox-wrapper:hover .e-frame,
 .e-css.e-checkbox-wrapper:hover .e-frame {
   background-color: var(--color-sf-text-input-bg-color);
-  border-color: var(--color-sf-border);
+  border-color: var(--color-sf-primary-border-color);
 }
 
 .e-checkbox-wrapper:hover .e-frame.e-check,
 .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
-  color: var(--color-sf-primary-text-color);
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-primary-text-color) !important;
 }
 
 .e-checkbox-wrapper:hover .e-frame.e-stop,
@@ -9375,9 +9509,10 @@
   border-color: var(--color-sf-border);
 }
 
+
 .e-radio:checked+label::before {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-radio:checked+label::after {
@@ -17716,7 +17851,7 @@ ejs-calendar {
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover:not(.e-other-month) span {
-  background: var(--color-sf-primary-lighter);
+  background: var(--color-sf-msg-info-bg-color);
   border: none;
   color: var(--color-sf-content-text-color);
 }
@@ -17764,12 +17899,13 @@ ejs-calendar {
 }
 
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-active {
-  background-color: var(--color-sf-content-bg-color-selected);
+    background-color: var(--color-sf-primary-bg-color);
+    color: var(--color-sf-warning-text-focus);
 }
 
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-hover {
-  background-color: var(--color-sf-content-bg-color-hover);
-  color: var(--color-sf-content-text-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
+  color: var(--color-sf-warning-text-focus);
 }
 
 .e-daterangepicker.e-popup .e-start-label,
@@ -17812,7 +17948,7 @@ ejs-calendar {
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-end-date.e-selected span.e-day,
 .e-daterangepicker.e-popup .e-calendar .e-content .e-start-date.e-selected span.e-day {
-  background: var(--color-sf-primary);
+  background: var(--color-sf-primary-bg-color);
   border-radius: 0;
 }
 
@@ -33088,10 +33224,10 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
 .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
 .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
   border-radius: 4px;
-  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary);
-  box-shadow: 0 0 0 1px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 1px var(---color-sf-primary-bg-color);
+  box-shadow: 0 0 0 1px var(--color-sf-primary-bg-color);
 }
 
 .e-input-group .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
@@ -33116,10 +33252,10 @@ textarea.e-input::selection,
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
   border-radius: 4px;
-  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary);
-  box-shadow: 0 0 0 1px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 1px var(--color-sf-primary-bg-color);
 }
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
@@ -33154,8 +33290,8 @@ textarea.e-input::selection,
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
 .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
   border-color: var(--color-sf-border);
-  -webkit-box-shadow: 0 1px 2px 0 rgba(var(--color-sf-black), 0.05);
-  box-shadow: 0 1px 2px 0 rgba(var(--color-sf-black), 0.05);
+  -webkit-box-shadow: 0 1px 2px 0 rgba(var(--color-sf-primary-bg-color), 0.05);
+  box-shadow: 0 1px 2px 0 rgba(var(--color-sf-primary-bg-color), 0.05);
 }
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
@@ -33418,7 +33554,7 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input~label.e-float-text,
 .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input~label.e-float-text,
 .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input~label.e-float-text {
-  color: rgba(var(--color-sf-primary));
+  color: rgba(var(--color-sf-primary-bg-color));
 }
 
 .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
@@ -33429,7 +33565,7 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
 .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
 .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-underline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
@@ -57628,7 +57764,7 @@ ejs-sidebar {
 }
 
 .e-dialog .e-dlg-header-content+.e-dlg-content {
-  padding-top: 16px;
+  padding-top: 0px !important;
 }
 
 .e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -71076,6 +71212,7 @@ td.cardcell.separateline {
 .app-sidebar .sidebar-brand .title {
   color: #e5e7eb;
   font-weight: 600;
+  font-size: 16px;
 }
 
 /* Nav items: icon + text; hide text when docked */

From b5737476d6cdbc0f88da1665df5eddbc070b7aed Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Thu, 18 Dec 2025 18:56:41 +0530
Subject: [PATCH 2/4] 1000021: Fixed theme level issues

---
 .../src/components/Announcement.css           |  16 +-
 .../src/components/Policies.css               | 104 ++---
 .../src/components/TopNav.css                 | 429 ++++++++++++++++++
 Employee_Managment_App/src/index.css          | 245 +++++-----
 4 files changed, 574 insertions(+), 220 deletions(-)

diff --git a/Employee_Managment_App/src/components/Announcement.css b/Employee_Managment_App/src/components/Announcement.css
index afd30e7..d103eca 100644
--- a/Employee_Managment_App/src/components/Announcement.css
+++ b/Employee_Managment_App/src/components/Announcement.css
@@ -9,14 +9,10 @@
   --annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
   --annc-panel-width: 380px;
 
-
-    /* Accent (emerald) */
-  --accent: #10b981;
-  --accent-600: #059669;
-  --accent-700: #047857;
-  --accent-100: #d1fae5;
-  --accent-50: #ecfdf5;
-}
+  --color-sf-icon-color: #6b7280;
+  --color-sf-secondary-border-color-hover: #d1d5db;
+  --color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
+  --color-sf-content-text-color: #111827;
 
 /* Backdrop area that starts below the top bar (top offset applied inline) */
 .annc-panel-backdrop {
@@ -153,8 +149,8 @@
   transition: background 160ms ease, border-color 160ms ease;
 }
 .annc-panel-item:hover {
-    background: var(--accent-50);
-    color: var(--accent-700);
+    background: var(--color-sf-secondary-bg-color-hover);
+    color: var(--color-sf-content-text-color);
 }
 .annc-item-icon {
   width: 36px;
diff --git a/Employee_Managment_App/src/components/Policies.css b/Employee_Managment_App/src/components/Policies.css
index 43f49ef..edc4056 100644
--- a/Employee_Managment_App/src/components/Policies.css
+++ b/Employee_Managment_App/src/components/Policies.css
@@ -18,6 +18,7 @@
   --text-muted: #667085;
   --text-soft: #475467;
 
+
   --surface: #ffffff;
   --surface-subtle: #fafbfc;
 
@@ -27,12 +28,13 @@
   --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
   --shadow-sm: 0 2px 8px rgba(16, 24, 40, .08);
   --shadow-md: 0 6px 18px rgba(16, 24, 40, .10);
+
+  --color-sf-primary-bg-color: #1ab394;
+  --color-sf-primary-border-color: #1ab394;
 }
 
 .policies-grid-wrapper {
   padding: 28px 24px;
-  max-width: 1160px;
-  margin: 0 auto;
   color: var(--text-strong);
 }
 
@@ -90,6 +92,7 @@
   text-decoration: underline;
 }
 
+
 /* Section headers and Reset link */
 .section-header {
   display: flex;
@@ -148,9 +151,8 @@
 }
 
 .filter-chip:hover {
-  background: var(--primary-50);
-  border-color: var(--primary-100);
-  transform: translateY(-1px);
+  border-color: var(--text-muted);
+
 }
 
 .filter-chip.is-active {
@@ -183,12 +185,11 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  text-align: center;
   gap: 8px;
-  padding-left: 22px;
 }
 
 .filter-chip .filter-chip__label::before {
-  content: '🏷️';
   position: absolute;
   left: 0;
   top: 50%;
@@ -196,31 +197,6 @@
   font-size: 14px;
 }
 
-.filter-chip-row .filter-chip:nth-child(1) .filter-chip__label::before {
-  content: '📚';
-}
-
-.filter-chip-row .filter-chip:nth-child(2) .filter-chip__label::before {
-  content: '🔒';
-}
-
-.filter-chip-row .filter-chip:nth-child(3) .filter-chip__label::before {
-  content: '🗓️';
-}
-
-.filter-chip-row .filter-chip:nth-child(4) .filter-chip__label::before {
-  content: '🧾';
-}
-
-.filter-chip-row .filter-chip:nth-child(5) .filter-chip__label::before {
-  content: '💻';
-}
-
-.filter-chip-row .filter-chip:nth-child(6) .filter-chip__label::before {
-  content: '👔';
-}
-
-/* Employment */
 
 /* Grid styling (unchanged core look from previous refresh) */
 .policy-name-cell {
@@ -307,14 +283,7 @@
   font-size: 16px;
 }
 
-/* Category pills in the grid */
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"] {
-  position: relative;
-  padding-left: 28px;
-}
-
 .policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]::before {
-  content: '🏷️';
   position: absolute;
   left: 8px;
   top: 50%;
@@ -323,40 +292,6 @@
   opacity: .95;
 }
 
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Security"]::before {
-  content: '🔒';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="HR & Leave"]::before {
-  content: '🗓️';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Compliance"]::before {
-  content: '🧾';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="IT & Devices"]::before {
-  content: '💻';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Employment"]::before {
-  content: '👔';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Code of Conduct"]::before {
-  content: '📜';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]>span {
-  display: inline-block;
-  padding: 4px 10px 4px 8px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  background: #f9fafb;
-  font-weight: 700;
-  color: #1f2937;
-}
-
 /* Dialog */
 .policy-dialog .e-dlg-header-content {
   border-bottom: 1px solid var(--border);
@@ -435,12 +370,25 @@
 
 .policies-grid-wrapper .e-grid .e-pager .e-currentitem,
 .policies-grid-wrapper .e-grid .e-pager .e-currentitem:hover {
-  background: #1ab394;
-  border-color:#1ab394;
-  color: #fff;
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  color: --surface;
 }
 
-.policies-grid-wrapper .e-grid .e-pager .e-numericitem:hover {
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem:active {
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+
+}
+
+/* Keep hover color for non-active pages only */
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem:not(.e-currentitem):hover {
   background: var(--primary-50);
   color: var(--primary-900);
-}
\ No newline at end of file
+}
+/* When hovering the active page, keep the active green */
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem.e-currentitem:hover {
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  color: --surface;
+}
diff --git a/Employee_Managment_App/src/components/TopNav.css b/Employee_Managment_App/src/components/TopNav.css
index 535aa68..503f67d 100644
--- a/Employee_Managment_App/src/components/TopNav.css
+++ b/Employee_Managment_App/src/components/TopNav.css
@@ -11,6 +11,19 @@
   --icon: #475569;
   --elevation: 0 8px 20px rgba(2, 6, 23, 0.06);
 
+  /* Accent (emerald) *//* src/components/TopNav.css */
+:root {
+  --topnav-height: 56px;
+
+  /* Base neutrals */
+  --topnav-bg: #ffffff;
+  --surface: #ffffff;
+  --topnav-border: #e5e7eb;
+  --topnav-text: rgba(0, 0, 0, 0.87);
+  --text-muted: #64748b;
+  --icon: #475569;
+  --elevation: 0 8px 20px rgba(2, 6, 23, 0.06);
+
   /* Accent (emerald) */
   --accent: #10b981;
   --accent-600: #059669;
@@ -21,6 +34,422 @@
   /* Bootstrap-like green for Create */
   --bs-success: #1ab394;
 
+  /* Component sizing to match HR portal */
+  --create-width: 96px;     /* button width similar to screenshots */
+  --search-max: 600px;      /* desktop search width similar to HR portal */
+  
+  --hr-search-width: 210px;
+
+  --control-height: 35px;
+  --radius-pill: 9999px;
+
+  --accent: #10b981;                   /* focus ring + border accent */
+  --search-bg: #f7f7f8;                /* filled background */
+  --search-border: #d6d7db;
+  --search-text: #111827;
+  --search-muted: #6b7280;
+  --search-icon: #6b7280;
+
+  --shadow-rest: 0 1px 2px rgba(0,0,0,.06);
+  --shadow-focus: 0 6px 18px rgba(16, 185, 129, 0.16);
+  --focus-ring: 0 0 0 4px rgba(16, 185, 129, 0.14);
+
+  --color-sf-icon-color: #6b7280;
+  --color-sf-secondary-border-color-hover: #d1d5db;
+  --color-sf-secondary-bg-color-hover:rgba(158, 158, 158, 0.2);
+  --color-sf-content-text-color: #111827;
+}
+
+/* Parallel fixed header */
+.topnav.parallel {
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  height: var(--topnav-height);
+  background: var(--topnav-bg);
+  border-bottom: 2px solid var(--topnav-border);
+}
+
+/* Optional green accent line/shadow */
+.topnav.parallel.theme-green {
+  border-bottom-color: var(--accent);
+  box-shadow: 0 1px 0 rgba(16, 185, 129, 0.12), var(--elevation);
+}
+
+.topnav-inner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 16px;
+}
+
+/* Left cluster */
+.cluster-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.brand-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  white-space: nowrap;
+}
+
+.company-name {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* Center cluster: search */
+.cluster-center {
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center; /* center like HR portal */
+}
+
+.search-form { 
+  width: var(--hr-search-width);
+  margin-left: auto;           /* push to the right side */
+}
+
+
+/* Input group container */
+.search-field.input-group {
+  pointer-events: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--control-height);
+  background: var(--search-bg);
+  box-shadow: var(--shadow-rest);
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 120ms ease;
+}
+
+/* Hover: slightly lift and sharpen border */
+.search-field.input-group:hover {
+  border-color: color-mix(in srgb, var(--search-border) 70%, var(--accent));
+}
+
+/* Left icon */
+.search-field .input-icon {
+  position: absolute;
+  left: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: var(--search-icon);
+  pointer-events: none; /* decorative */
+}
+
+/* The input itself */
+.search-field .search-input.form-control {
+  appearance: none;
+  background: transparent;
+  color: var(--search-text);
+  font-size: 14px;
+  line-height: 1;
+  height: 100%;
+  width: 100%;
+  padding: 0 36px 0 42px; /* left: icon; right: clear */
+  outline: none;
+  box-shadow: none;
+}
+
+.search-field.input-group .search-input.form-control:not(:first-child):not(:last-child) {
+  border-radius: 4px;
+}
+
+/* Placeholder color */
+.search-field .search-input::placeholder {
+  color: var(--search-muted);
+  opacity: 1;
+}
+
+/* Clear button (hidden until there's text) */
+.search-field .clear-btn {
+  position: absolute;
+  right: 6px;
+  height: 28px;
+  width: 28px;
+  border: 0;
+  border-radius: 999px;
+  display: inline-grid;
+  place-items: center;
+  background: transparent;
+  color: var(--search-muted);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.search-field.has-value .clear-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.search-field .clear-btn:hover {
+  background: color-mix(in srgb, var(--search-bg), #000 6%);
+  color: var(--search-text);
+}
+
+.search-field .clear-btn:active {
+  transform: scale(0.96);
+}
+
+/* Remove native WebKit clear icon for consistency */
+.search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+/* High-contrast / forced colors */
+@media (forced-colors: active) {
+  .search-field.input-group {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
+  .search-field .search-input {
+    color: CanvasText;
+  }
+  .search-field .input-icon,
+  .search-field .clear-btn { color: CanvasText; }
+}
+
+/* Reduced motion respect */
+@media (prefers-reduced-motion: reduce) {
+  .search-field.input-group,
+  .search-field .clear-btn {
+    transition: none;
+  }
+}
+
+/* Right cluster: actions */
+.cluster-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+}
+
+.icon-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  border: 1px solid var(--topnav-border);
+  background: #fff;
+  color: var(--icon);
+  cursor: pointer;
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease, background 160ms ease;
+}
+
+.icon-btn:hover {
+  border-color: var(--focus-ring);
+  background: transparent;
+  color: var(--color-sf-icon-color);
+}
+
+.icon-btn:active { transform: translateY(1px); }
+
+.icon-btn:focus-visible,
+.topnav-avatar:focus-visible,
+.btn-create:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Create button (Bootstrap look, fixed size like HR portal) */
+.btn-create-group { position: relative; }
+
+.btn-create {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  height: var(--control-height);
+  min-width: var(--create-width);
+  padding: 0 12px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: var(--bs-success);
+  color: #fff;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  cursor: pointer;
+  transition: background 160ms ease, transform 80ms ease, filter 160ms ease;
+}
+
+.btn-create:active { transform: translateY(1px); }
+
+.btn-create .material-icons {
+  font-size: 20px;
+  line-height: 1;
+}
+
+/* Create dropdown menu */
+.create-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  min-width: 200px;
+  background: #fff;
+  border: 1px solid var(--topnav-border);
+  border-radius: 12px;
+  padding: 6px;
+  box-shadow: var(--elevation);
+  z-index: 10;
+}
+
+.create-menu li { list-style: none; }
+
+.create-menu button {
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--topnav-text);
+  transition: background 160ms ease, color 160ms ease;
+}
+
+.create-menu button:hover {
+  background: var(--color-sf-secondary-bg-color-hover);
+  border-color: var(--color-sf-content-text-color);
+  color: var(--color-sf-content-text-color);
+}
+
+/* Badge */
+.badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 10px;
+  background: var(--bs-success);
+  color: #fff;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
+}
+
+/* Avatar */
+.topnav-avatar-wrapper { 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.topnav-avatar-name{
+  margin-left: 10px;
+}
+
+.topnav-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: var(--topnav-text);
+  border: 1px solid var(--topnav-border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 160ms ease, background 160ms ease;
+}
+
+.topnav-avatar:hover {
+  border-color: var(--focus-ring);
+  background: transparent;
+  color: var(--color-sf-icon-color);
+}
+
+.topnav-avatar-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  min-width: 200px;
+  background: #fff;
+  border: 1px solid var(--topnav-border);
+  border-radius: 12px;
+  padding: 6px;
+  box-shadow: var(--elevation);
+}
+
+.topnav-avatar-menu li { list-style: none; }
+
+.topnav-avatar-menu button {
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--topnav-text);
+  transition: background 160ms ease, color 160ms ease;
+}
+
+.topnav-avatar-menu button:hover {
+  background: var(--accent-50);
+  color: var(--accent-700);
+}
+
+/* Mobile handling */
+.show-md-down { display: none; }
+
+@media (max-width: 992px) {
+  .topnav.parallel {
+    left: 0 !important;
+    width: 100% !important;
+  }
+  .company-name { display: none; }
+}
+
+@media (max-width: 768px) {
+  .cluster-center { display: none; } /* collapse center search to icon */
+  .show-md-down { display: inline-flex; }
+
+  .mobile-search {
+    position: sticky;
+    top: var(--topnav-height);
+    z-index: 999;
+    border-bottom: 1px solid var(--topnav-border);
+    padding: 8px;
+    background: #fff;
+  }
+
+  .mobile-search .search-form { max-width: 100%; }
+}
+
+/* Utility (when we hide center due to mobile search toggle) */
+.hidden-md-up { display: none; }
+  --accent: #10b981;
+  --accent-600: #059669;
+  --accent-700: #047857;
+  --accent-100: #d1fae5;
+  --accent-50: #ecfdf5;
+
+  /* Bootstrap-like green for Create */
+  --bs-success: #1ab394;
+
   /* Component sizing to match HR portal */
   --control-height: 38px;   /* search and create height */
   --create-width: 96px;     /* button width similar to screenshots */
diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css
index bb4593d..68d2727 100644
--- a/Employee_Managment_App/src/index.css
+++ b/Employee_Managment_App/src/index.css
@@ -399,8 +399,6 @@
   content: "\e759";
 }
 
-
-
 /* Primary/OK button: hover/focus in Column Chooser */
 .e-dialog .e-footer-content .e-btn.e-primary:hover,
 .e-dialog .e-footer-content .e-btn.e-primary:focus {
@@ -419,11 +417,7 @@
 }
 
 /* Cancel button: keep subtle grey on hover/focus (not green) */
-.e-dialog .e-footer-content .e-btn:not(.e-primary) {
-  background-color:var(--color-sf-appbar-bg-color-alt1);           
-  border-color: var(--color-sf-rating-unrated-disabled-color);      
-  color: var(--color-sf-rating-unrated-hover-color);
-}
+
 .e-dialog .e-footer-content .e-btn:not(.e-primary):hover,
 .e-dialog .e-footer-content .e-btn:not(.e-primary):focus {
   background-color: var(--color-sf-rating-unrated-disabled-color) !important;
@@ -431,53 +425,6 @@
   color: var(--color-sf-appbar-bg-color-alt2) !important;         
 }
 
-/* Checkbox hover styles inside Column Chooser list */
-.e-checkbox-wrapper:hover .e-frame {
-  border-color: var(--color-sf-primary-bg-color) !important;
-}
-.e-checkbox-wrapper:hover .e-frame.e-check,
-.e-checkbox-wrapper:hover .e-frame.e-stop {
-  background-color: var(--color-sf-primary-bg-color) !important;
-  border-color: var(--color-sf-primary-bg-color) !important;
-}
-/* Improve hover via list item hover as well */
-.e-list-item:hover .e-checkbox-wrapper .e-frame {
-  border-color: var(--color-sf-primary-bg-color) !important;
-}
-.e-list-item:hover .e-checkbox-wrapper .e-frame.e-check,
-.e-list-item:hover .e-checkbox-wrapper .e-frame.e-stop {
-  background-color: var(--color-sf-primary-bg-color) !important;
-  border-color: var(--color-sf-primary-bg-color) !important;
-}
-/* Checked / indeterminate visuals anywhere in the chooser */
-.e-column-chooser .e-checkbox-wrapper .e-frame.e-check,
-.e-column-chooser .e-checkbox-wrapper .e-frame.e-stop,
-.e-dialog .e-checkbox-wrapper .e-frame.e-check,
-.e-dialog .e-checkbox-wrapper .e-frame.e-stop {
-  background-color: var(--color-sf-primary-bg-color) !important;
-  border-color: var(--color-sf-primary-border-color) !important;
-}
-.e-dialog .e-checkbox-wrapper .e-frame.e-check:before,
-.e-dialog .e-checkbox-wrapper .e-frame.e-stop:before {
-  color: #fff !important;
-}
-/* List item selected (Select All) */
-.e-column-chooser .e-list-item.e-active .e-frame {
-  background-color: var(--color-sf-success) !important;
-  border-color: var(--color-sf-success) !important;
-}
-
-/* Columns trigger and generic focus outlines: remove blue ring */
-.e-toolbar .e-tbar-btn:focus,
-.e-toolbar .e-tbar-btn:active,
-.e-dropdown-btn:focus,
-.e-dropbtn:focus,
-.e-btn:focus,
-.e-input:focus,
-button:focus {
-  outline: none !important;
-  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35) !important; /* soft green */
-}
 
 .e-icons.e-italic:before {
   content: "\e75a";
@@ -2000,41 +1947,67 @@ button:focus {
 }
 
 /* Override Calendar/DatePicker colors: set selected date and Today to green */
-/* Selected date cell */
-.e-calendar .e-content td.e-selected span,
-.e-calendar .e-content td.e-selected:hover span,
-.e-datepicker .e-calendar .e-content td.e-selected span {
-  background-color: var(--color-sf-success) !important;
-  border-color: var(--color-sf-success) !important;
-  color: #fff !important;
+/* Selected/Start/End day: turn pill green and add green border */
+.e-calendar .e-content td.e-selected span.e-day,
+.e-calendar .e-content td.e-start-date span.e-day,
+.e-calendar .e-content td.e-end-date span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-selected span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-start-date span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-end-date span.e-day {
+  background-color:var(--color-sf-primary-bg-color) !important; 
+  border: 1px solid var(--color-sf-primary-bg-color) !important; /* green border for the selected date */
+  color: var(--color-sf-success-text) !important;
+  box-sizing: border-box;
+  border-radius: 6px !important; /* square with slightly rounded corners */
 }
-/* Today cell (outline/foreground) */
-.e-calendar .e-content td.e-today span,
-.e-datepicker .e-calendar .e-content td.e-today span {
-  color: var(--color-sf-success) !important;
-  border-color: var(--color-sf-success) !important;
+
+
+
+/* Today cell accent: green text/border */
+.e-calendar .e-content td.e-today span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-today span.e-day {
+  border: 1px solid  var(--color-sf-primary-bg-color) !important; /* visible green outline for Today */
+  color:  var(--color-sf-primary-bg-color) !important;
+  background-color: transparent !important;
+  border-radius: 6px !important;
+  box-sizing: border-box;
 }
-/* Today button in footer */
+/* If Today is also selected, keep the text visible (white on green) */
+.e-calendar .e-content td.e-selected.e-today span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-selected.e-today span.e-day {
+  color: var(--color-sf-text-input-bg-color) !important;
+  background-color: var(--color-sf-primary-bg-color) !important;
+}
+
+/* Year/Decade view selected item: also green */
+.e-calendar .e-content.e-year td .e-selected,
+.e-calendar .e-content.e-decade td .e-selected {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-primary-text) !important;
+}
+
+/* Today footer button: force green background/border */
 .e-calendar .e-footer-container .e-btn.e-today,
-.e-datepicker .e-footer-container .e-btn.e-today {
-  background-color: var(--color-sf-success) !important;
-  border-color: var(--color-sf-success) !important;
-  color: #fff !important;
+.e-datepicker .e-footer-container .e-btn.e-today,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-text-input-bg-color) !important;
 }
-/* Footer Today button hover/focus */
 .e-calendar .e-footer-container .e-btn.e-today:hover,
 .e-calendar .e-footer-container .e-btn.e-today:focus,
+.e-calendar .e-footer-container .e-btn.e-today:active,
 .e-datepicker .e-footer-container .e-btn.e-today:hover,
-.e-datepicker .e-footer-container .e-btn.e-today:focus {
-  background-color: var(--color-sf-success) !important;
-  border-color: var(--color-sf-success) !important;
+.e-datepicker .e-footer-container .e-btn.e-today:focus,
+.e-datepicker .e-footer-container .e-btn.e-today:active,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today:hover,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today:focus,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today:active {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-text-input-bg-color) !important;
 }
 
-/* Also adjust keyboard focus ring on day cells to green */
-.e-calendar .e-content td:focus span,
-.e-datepicker .e-calendar .e-content td:focus span {
-  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35) !important;
-}
 
 .e-icons.e-frame-mat:before {
   content: "\e8d6";
@@ -2405,7 +2378,7 @@ button:focus {
   --color-sf-spreadsheet-gridline: #dee2e6;
   --color-sf-flyout-border: #e5e7eb;
   --color-sf-dialog-border: #fff;
-  --color-sf-primary: rgba(79, 70, 229);
+  --color-sf-primary: #1ab394;
   --color-sf-primary-text-color: #fff;
   --color-sf-primary-light: #818cf8;
   --color-sf-primary-lighter: #e0e7ff;
@@ -2448,7 +2421,7 @@ button:focus {
   --color-sf-secondary-bg-color: #fff;
   --color-sf-secondary-border-color: #d1d5db;
   --color-sf-secondary-text-color: #374151;
-  --color-sf-secondary-bg-color-hover: #f3f4f6;
+  --color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
   --color-sf-secondary-border-color-hover: #d1d5db;
   --color-sf-secondary-text-color-hover: #374151;
   --color-sf-secondary-bg-color-pressed: #e5e7eb;
@@ -4952,7 +4925,7 @@ button:focus {
 
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
-  -webkit-tap-highlight-color: var(--color-sf-primary);
+  -webkit-tap-highlight-color: var(--color-sf-primary-bg-color);
   background: var(--color-sf-content-bg-color);
   border: 1px solid var(--color-sf-border-light);
   -webkit-box-shadow: none;
@@ -4973,7 +4946,7 @@ button:focus {
 
 .e-card:active {
   background-color: var(--color-sf-content-bg-color-alt2);
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-card .e-card-separator {
@@ -7625,7 +7598,7 @@ button:focus {
 
 .e-btn.e-flat.e-primary:focus,
 .e-css.e-btn.e-flat.e-primary:focus {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
   border-color: var(--color-sf-primary-border-color-focus);
   color: var(--color-sf-primary-text-focus);
 }
@@ -7906,8 +7879,8 @@ button:focus {
 
 .e-btn.e-outline:hover,
 .e-css.e-btn.e-outline:hover {
-  background: var(--color-sf-secondary-bg-color-hover);
-  border-color: var(--color-sf-secondary-border-color-hover);
+  background: transparent;
+  border-color: var(--color-sf-secondary-text-color-hover);
   -webkit-box-shadow: none;
   box-shadow: none;
   color: var(--color-sf-secondary-text-color-hover);
@@ -7932,7 +7905,6 @@ button:focus {
 .e-btn.e-outline.e-active,
 .e-css.e-btn.e-outline:active,
 .e-css.e-btn.e-outline.e-active {
-  background: var(--color-sf-secondary-bg-color-pressed);
   border-color: var(--color-sf-secondary-border-color-pressed);
   -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
   box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
@@ -7957,7 +7929,7 @@ button:focus {
 
 .e-btn.e-outline.e-primary:hover,
 .e-css.e-btn.e-outline.e-primary:hover {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
   border-color: var(--color-sf-primary-border-color-hover);
   color: var(--color-sf-primary-text-hover);
 }
@@ -8917,18 +8889,18 @@ button:focus {
 .e-css.e-checkbox-wrapper .e-checkbox:active+.e-frame {
   background-color: var(--color-sf-text-input-bg-color);
   border-color: var(--color-sf-primary-border-color-pressed);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
 }
 
 .e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check,
 .e-checkbox-wrapper .e-checkbox:active+.e-frame.e-check,
 .e-css.e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check,
 .e-css.e-checkbox-wrapper .e-checkbox:active+.e-frame.e-check {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary-border-color-hover);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-color);
 }
 
@@ -8936,10 +8908,10 @@ button:focus {
 .e-checkbox-wrapper .e-checkbox:active+.e-frame.e-stop,
 .e-css.e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-stop,
 .e-css.e-checkbox-wrapper .e-checkbox:active+.e-frame.e-stop {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary-border-color-hover);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-color);
 }
 
@@ -8959,8 +8931,8 @@ button:focus {
 .e-checkbox-wrapper:hover .e-frame.e-stop,
 .e-css.e-checkbox-wrapper:hover .e-frame.e-stop {
   color: var(--color-sf-primary-text-color);
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-checkbox-wrapper:hover .e-label,
@@ -11778,7 +11750,7 @@ button:focus {
 
 .e-chip-list.e-chip.e-primary:not(.e-active) .e-chip-delete.e-dlt-btn:active,
 .e-chip-list .e-chip.e-primary:not(.e-active) .e-chip-delete.e-dlt-btn:active {
-  color: var(--color-sf-chip-primary-icon-color-pressed);
+  color: var(--color-sf-chip-success-icon-color-pressed);
 }
 
 .e-chip-list.e-chip.e-primary:hover,
@@ -11845,20 +11817,20 @@ button:focus {
 .e-chip-list .e-chip.e-primary.e-active {
   background: var(--color-sf-chip-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-active .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary:active,
@@ -11905,27 +11877,27 @@ button:focus {
 .e-chip-list .e-chip.e-primary.e-clone-chip {
   background: var(--color-sf-chip-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-drag-and-drop,
 .e-chip-list.e-chip.e-primary.e-clone-chip.e-error-treeview,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-drag-and-drop,
 .e-chip-list .e-chip.e-primary.e-clone-chip.e-error-treeview {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline,
@@ -12007,60 +11979,60 @@ button:focus {
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active {
   background: var(--color-sf-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-focused.e-active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline.e-focused.e-active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-focused.e-active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active .e-chip-avatar {
   background-color: var(--color-sf-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-active,
 .e-chip-list .e-chip.e-primary.e-outline.e-active {
   background: var(--color-sf-chip-primary-bg-color);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline.e-active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline.e-active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline.e-active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline.e-active .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline:active,
 .e-chip-list .e-chip.e-primary.e-outline:active {
   background: var(--color-sf-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline:active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline:active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline:active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline:active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline:active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline:active .e-chip-avatar {
   background-color: var(--color-sf-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-disabled,
@@ -12087,27 +12059,27 @@ button:focus {
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip {
   background: var(--color-sf-chip-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-drag-and-drop,
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip.e-error-treeview,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-drag-and-drop,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip.e-error-treeview {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-success,
@@ -15071,7 +15043,7 @@ ejs-calendar {
 }
 
 .e-calendar .e-content td.e-selected.e-focused-date.e-today span.e-day {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-pressed);
   border-radius: 40px;
 }
@@ -15215,7 +15187,7 @@ ejs-calendar {
 
 .e-calendar .e-btn.e-today.e-flat.e-primary:hover,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
   border-color: var(--color-sf-primary-border-color-hover);
   color: var(--color-sf-primary-text-hover);
 }
@@ -15507,7 +15479,7 @@ ejs-calendar {
 
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td.e-selected:hover span.e-day {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
 }
 
 .e-bigger.e-small .e-calendar .e-content.e-year td>span.e-day,
@@ -38539,7 +38511,7 @@ input.e-input.e-bigger.e-small,
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
   -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
   box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
 }
@@ -38950,7 +38922,7 @@ input.e-input.e-bigger.e-small,
 }
 
 .e-control-wrapper.e-slider-container.e-slider-hover .e-range {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
 }
 
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
@@ -50465,10 +50437,13 @@ body.e-colorpicker-overflow {
   color: var(--color-sf-content-text-color-alt4);
 }
 
+
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
-  background: inherit;
+  border-color: var(--color-sf-secondary-border-color-hover);
+  background: var(--color-sf-secondary-bg-color-hover);
   border: 0;
   border-radius: 0;
+  color: var(--color-sf-icon-color);
 }
 
 @media screen and (max-width: 480px) {
@@ -57550,7 +57525,7 @@ ejs-sidebar {
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: var(--color-sf-primary-text-color);
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
 }
 
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
@@ -58215,7 +58190,7 @@ ejs-sidebar {
 }
 
 .e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
 }
 
 .e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
@@ -68178,7 +68153,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 
 .e-grid .e-filtered::before {
-  color: var(--color-sf-primary);
+  color: var(--color-sf-primary-bg-color);
 }
 
 .e-grid .e-gridpopup .e-content {
@@ -70682,7 +70657,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 
 .overview-content #_tab_header_items .e-toolbar-item.e-active {
-  background-color: #1ab394;
+  background-color: var(--color-sf-primary-bg-color);
+}
+
+.overview-content #_tab_header_items .e-toolbar-item.e-active :hover {
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-secondary-border-color-hover);
+
 }
 
 .overview-content #_tab_header_items .e-toolbar-item.e-active .e-tab-text {

From c41c964883c13429acaab4a391297e9741d311ca Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Thu, 18 Dec 2025 19:02:03 +0530
Subject: [PATCH 3/4] 1000021: Updated the theme styles

---
 .../src/components/TopNav.css                 | 420 +-----------------
 1 file changed, 2 insertions(+), 418 deletions(-)

diff --git a/Employee_Managment_App/src/components/TopNav.css b/Employee_Managment_App/src/components/TopNav.css
index 503f67d..a9b822e 100644
--- a/Employee_Managment_App/src/components/TopNav.css
+++ b/Employee_Managment_App/src/components/TopNav.css
@@ -11,19 +11,6 @@
   --icon: #475569;
   --elevation: 0 8px 20px rgba(2, 6, 23, 0.06);
 
-  /* Accent (emerald) *//* src/components/TopNav.css */
-:root {
-  --topnav-height: 56px;
-
-  /* Base neutrals */
-  --topnav-bg: #ffffff;
-  --surface: #ffffff;
-  --topnav-border: #e5e7eb;
-  --topnav-text: rgba(0, 0, 0, 0.87);
-  --text-muted: #64748b;
-  --icon: #475569;
-  --elevation: 0 8px 20px rgba(2, 6, 23, 0.06);
-
   /* Accent (emerald) */
   --accent: #10b981;
   --accent-600: #059669;
@@ -102,6 +89,7 @@
 
 .company-name {
   font-size: 16px;
+  font-weight: bold;
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -241,7 +229,6 @@
 
 .icon-btn {
   position: relative;
-  display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
@@ -333,6 +320,7 @@
 /* Badge */
 .badge {
   position: absolute;
+  font-family: 'Roboto', sans-serif;
   top: -4px;
   right: -4px;
   min-width: 18px;
@@ -439,409 +427,5 @@
   .mobile-search .search-form { max-width: 100%; }
 }
 
-/* Utility (when we hide center due to mobile search toggle) */
-.hidden-md-up { display: none; }
-  --accent: #10b981;
-  --accent-600: #059669;
-  --accent-700: #047857;
-  --accent-100: #d1fae5;
-  --accent-50: #ecfdf5;
-
-  /* Bootstrap-like green for Create */
-  --bs-success: #1ab394;
-
-  /* Component sizing to match HR portal */
-  --control-height: 38px;   /* search and create height */
-  --create-width: 96px;     /* button width similar to screenshots */
-  --search-max: 600px;      /* desktop search width similar to HR portal */
-  
-  --hr-search-width: 210px;
-
-  --control-height: 40px;
-  --radius-pill: 9999px;
-
-  --accent: #10b981;                   /* focus ring + border accent */
-  --search-bg: #f7f7f8;                /* filled background */
-  --search-border: #d6d7db;
-  --search-text: #111827;
-  --search-muted: #6b7280;
-  --search-icon: #6b7280;
-
-  --shadow-rest: 0 1px 2px rgba(0,0,0,.06);
-  --shadow-focus: 0 6px 18px rgba(16, 185, 129, 0.16);
-  --focus-ring: 0 0 0 4px rgba(16, 185, 129, 0.14);
-}
-
-/* Parallel fixed header */
-.topnav.parallel {
-  position: fixed;
-  top: 0;
-  z-index: 1000;
-  height: var(--topnav-height);
-  background: var(--topnav-bg);
-  border-bottom: 2px solid var(--topnav-border);
-}
-
-/* Optional green accent line/shadow */
-.topnav.parallel.theme-green {
-  border-bottom-color: var(--accent);
-  box-shadow: 0 1px 0 rgba(16, 185, 129, 0.12), var(--elevation);
-}
-
-.topnav-inner {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 16px;
-}
-
-/* Left cluster */
-.cluster-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.brand-line {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  white-space: nowrap;
-}
-
-.company-name {
-  font-size: 16px;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-/* Center cluster: search */
-.cluster-center {
-  flex: 1 1 auto;
-  display: flex;
-  justify-content: center; /* center like HR portal */
-}
-
-.search-form { 
-  width: var(--hr-search-width);
-  margin-left: auto;           /* push to the right side */
-}
-
-
-/* Input group container */
-.search-field.input-group {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--control-height);
-  background: var(--search-bg);
-  border-radius: var(--radius-pill);
-  box-shadow: var(--shadow-rest);
-  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 120ms ease;
-}
-
-/* Hover: slightly lift and sharpen border */
-.search-field.input-group:hover {
-  border-color: color-mix(in srgb, var(--search-border) 70%, var(--accent));
-}
-
-/* Left icon */
-.search-field .input-icon {
-  position: absolute;
-  left: 10px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  color: var(--search-icon);
-  pointer-events: none; /* decorative */
-}
-
-/* The input itself */
-.search-field .search-input.form-control {
-  appearance: none;
-  background: transparent;
-  color: var(--search-text);
-  font-size: 14px;
-  line-height: 1;
-  height: 100%;
-  width: 100%;
-  padding: 0 36px 0 42px; /* left: icon; right: clear */
-  outline: none;
-  box-shadow: none;
-}
-
-.search-field.input-group .search-input.form-control:not(:first-child):not(:last-child) {
-  border-radius: 4px;
-}
-
-/* Placeholder color */
-.search-field .search-input::placeholder {
-  color: var(--search-muted);
-  opacity: 1;
-}
-
-/* Clear button (hidden until there's text) */
-.search-field .clear-btn {
-  position: absolute;
-  right: 6px;
-  height: 28px;
-  width: 28px;
-  border: 0;
-  border-radius: 999px;
-  display: inline-grid;
-  place-items: center;
-  background: transparent;
-  color: var(--search-muted);
-  cursor: pointer;
-  transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.search-field.has-value .clear-btn {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.search-field .clear-btn:hover {
-  background: color-mix(in srgb, var(--search-bg), #000 6%);
-  color: var(--search-text);
-}
-
-.search-field .clear-btn:active {
-  transform: scale(0.96);
-}
-
-/* Remove native WebKit clear icon for consistency */
-.search-input::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-}
-
-/* High-contrast / forced colors */
-@media (forced-colors: active) {
-  .search-field.input-group {
-    border: 1px solid CanvasText;
-    background: Canvas;
-  }
-  .search-field .search-input {
-    color: CanvasText;
-  }
-  .search-field .input-icon,
-  .search-field .clear-btn { color: CanvasText; }
-}
-
-/* Reduced motion respect */
-@media (prefers-reduced-motion: reduce) {
-  .search-field.input-group,
-  .search-field .clear-btn {
-    transition: none;
-  }
-}
-
-/* Right cluster: actions */
-.cluster-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  position: relative;
-}
-
-.icon-btn {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  border: 1px solid var(--topnav-border);
-  background: #fff;
-  color: var(--icon);
-  cursor: pointer;
-  transition: border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease, background 160ms ease;
-}
-
-.icon-btn:hover {
-  border-color: var(--accent-100);
-  background: var(--accent-50);
-  color: var(--accent-700);
-}
-
-.icon-btn:active { transform: translateY(1px); }
-
-.icon-btn:focus-visible,
-.topnav-avatar:focus-visible,
-.btn-create:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* Create button (Bootstrap look, fixed size like HR portal) */
-.btn-create-group { position: relative; }
-
-.btn-create {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-  height: var(--control-height);
-  min-width: var(--create-width);
-  padding: 0 12px;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  background: var(--bs-success);
-  color: #fff;
-  font-weight: 600;
-  letter-spacing: 0.2px;
-  cursor: pointer;
-  transition: background 160ms ease, transform 80ms ease, filter 160ms ease;
-}
-
-.btn-create:active { transform: translateY(1px); }
-
-.btn-create .material-icons {
-  font-size: 20px;
-  line-height: 1;
-}
-
-/* Create dropdown menu */
-.create-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  min-width: 200px;
-  background: #fff;
-  border: 1px solid var(--topnav-border);
-  border-radius: 12px;
-  padding: 6px;
-  box-shadow: var(--elevation);
-  z-index: 10;
-}
-
-.create-menu li { list-style: none; }
-
-.create-menu button {
-  width: 100%;
-  text-align: left;
-  border: none;
-  background: transparent;
-  padding: 10px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  color: var(--topnav-text);
-  transition: background 160ms ease, color 160ms ease;
-}
-
-.create-menu button:hover {
-  background: var(--accent-50);
-  color: var(--accent-700);
-}
-
-/* Badge */
-.badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 4px;
-  border-radius: 10px;
-  background: var(--bs-success);
-  color: #fff;
-  font-size: 11px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
-}
-
-/* Avatar */
-.topnav-avatar-wrapper { position: relative; }
-
-.topnav-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 999px;
-  background: #f1f5f9;
-  color: var(--topnav-text);
-  border: 1px solid var(--topnav-border);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  cursor: pointer;
-  user-select: none;
-  transition: border-color 160ms ease, background 160ms ease;
-}
-
-.topnav-avatar:hover {
-  border-color: var(--accent-100);
-  background: var(--accent-50);
-  color: var(--accent-700);
-}
-
-.topnav-avatar-menu {
-  position: absolute;
-  right: 0;
-  top: calc(100% + 8px);
-  min-width: 200px;
-  background: #fff;
-  border: 1px solid var(--topnav-border);
-  border-radius: 12px;
-  padding: 6px;
-  box-shadow: var(--elevation);
-}
-
-.topnav-avatar-menu li { list-style: none; }
-
-.topnav-avatar-menu button {
-  width: 100%;
-  text-align: left;
-  border: none;
-  background: transparent;
-  padding: 10px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  color: var(--topnav-text);
-  transition: background 160ms ease, color 160ms ease;
-}
-
-.topnav-avatar-menu button:hover {
-  background: var(--accent-50);
-  color: var(--accent-700);
-}
-
-/* Mobile handling */
-.show-md-down { display: none; }
-
-@media (max-width: 992px) {
-  .topnav.parallel {
-    left: 0 !important;
-    width: 100% !important;
-  }
-  .company-name { display: none; }
-}
-
-@media (max-width: 768px) {
-  .cluster-center { display: none; } /* collapse center search to icon */
-  .show-md-down { display: inline-flex; }
-
-  .mobile-search {
-    position: sticky;
-    top: var(--topnav-height);
-    z-index: 999;
-    border-bottom: 1px solid var(--topnav-border);
-    padding: 8px;
-    background: #fff;
-  }
-
-  .mobile-search .search-form { max-width: 100%; }
-}
-
 /* Utility (when we hide center due to mobile search toggle) */
 .hidden-md-up { display: none; }
\ No newline at end of file

From ceca68c84f1fe40785816c43657e9bd3ebf00542 Mon Sep 17 00:00:00 2001
From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com>
Date: Thu, 18 Dec 2025 19:20:43 +0530
Subject: [PATCH 4/4] 1000021: Removed unwanted codes

---
 Employee_Managment_App/src/index.css | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css
index 68d2727..48b52d3 100644
--- a/Employee_Managment_App/src/index.css
+++ b/Employee_Managment_App/src/index.css
@@ -2711,12 +2711,6 @@
   --color-sf-chip-info-bg-color-disabled: #ecfeff;
   --color-sf-chip-info-border-color-disabled: #cffafe;
   --color-sf-chip-info-text-disabled: #67e8f9;
-    /* Accent (emerald) */
-  --accent: #10b981;
-  --accent-600: #059669;
-  --accent-700: #047857;
-  --accent-100: #d1fae5;
-  --accent-50: #ecfdf5;
 }
 
 .e-dark-mode {