Looking at the image: Action item detail panel header showing "Partially Complies" amber badge and "Fee Disclosure" scoping area text that needs to be removed.

Let me make these changes:

Now let me read more of the action items page to see the detail panel structure:

Now I understand the structure. Let me make all the changes:

1. Remove "OK, " from acknowledge button in workflow
2. Remove finding status badge and scoping area from detail panel header
3. Move Mark as Complete button to header next to client name

Now let me update the action items page to remove the finding badge from the header and move the Mark as Complete button to the header:

Now let me remove the old client info section and the bottom footer button since we moved the Mark as Complete to the header:

Now let me remove the footer with the Mark as Complete button since it's now in the header:

All changes have been made:

1. Removed "OK" from acknowledge button - Changed "OK, I acknowledge" to "I Acknowledge" in the SoA acknowledgement modal
2. Removed finding badge from action item header - The old header showing "Partially Complies" badge and scoping area text has been replaced with the client info (name and review ID)
3. Moved Mark as Complete button to header - The button now appears in the header next to the close (X) button, alongside the client name. For completed tasks, a "Completed" badge is shown instead. The bottom footer with the full-width button has been removed.

Now I understand the structure. I need to:

1. Add a .dark class variant in globals.css with light mode as default (or vice versa)
2. Create a theme provider/context
3. Add theme toggle button in the header next to credits
4. Update hardcoded colors to use CSS variables

Let me update the globals.css first to add light mode tokens:

Now let me create a theme provider component:

The theme provider already exists using next-themes. Let me update the layout to use it and add the toggle button:

Now let me add the theme toggle button to the header in page.tsx and update hardcoded colors:

Now I need to add the Sun and Moon icons to the imports:

Now let me update the hardcoded background colors in page.tsx to use CSS variables:

Now let me update the sidebar background and other hardcoded colors. Let me check the sidebar component:

Now let me update other components with hardcoded colors. Let me check the dashboard and action items:

Now let me update the other files. Let me update action-items-page.tsx:

Now let me update the other components - reviews-page, workflow, and review-results:

Now let me update the workflow and review results components:

Now let me update the review results component:

Now let me also update the page.tsx to fix the remaining hardcoded colors in other views (billing, settings, how it works, etc):

Now let me check for any remaining hardcoded colors and also update the login/signup workflows:

All hardcoded colors in components are updated. Now let me also check the login and signup workflows:

All hardcoded colors have been replaced. The light/dark mode toggle is now complete. Here's a summary of what was implemented:

1. Updated globals.css - Added light mode (:root) and dark mode (.dark) CSS variables with appropriate color tokens for both themes
2. Updated layout.tsx - Wrapped the app with ThemeProvider from next-themes, set default theme to dark, and added a script to prevent flash of unstyled content
3. Added theme toggle button - In the header (top right), next to the credits button, with Sun/Moon icons that swap based on current theme

4. Replaced all hardcoded colors across components:

   • bg-[#030712] → bg-background
   • bg-[#0a1628] / bg-[#0c1929] → bg-card
   • bg-[#0d1f3c] → bg-secondary/30
   • bg-[#050a12] → bg-background
   • bg-[#1e3a5f] → bg-secondary
   • border-[#1e3a5f] → border-border
5. Updated sidebar - Uses semantic colors with special dark mode gradient for active states

The toggle persists the user's preference to localStorage and applies immediately without page refresh.