feat: enhance UI components and add vibrant theme support

- Updated layout and styling for various dashboard pages including stock adjustments, counts, transfers, wastage, and vendors to improve responsiveness and visual consistency.
- Introduced a vibrant theme option in the theme toggle component, allowing users to switch between light, dark, and vibrant themes.
- Refactored button styles across login and forgot password pages for better accessibility and visual feedback.
- Improved sidebar navigation with expanded functionality for items without dedicated pages.
- Enhanced data table styling for better readability and user interaction.
- Added new background images to support the vibrant theme.

Frontend/erp-system/app/globals.css

@@ -2,7 +2,7 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is(.dark *, .vibrant *));
 
 @theme inline {
   --color-background: var(--background);
@@ -129,6 +129,69 @@
   --sidebar-ring: oklch(0.68 0.186 265.215);
 }
 
+/* Vibrant — the "System" toggle option. Light content area (background,
+   cards, header, table panels) paired with a dark sidebar — the same split
+   Linear/Vercel/Notion use in their light themes. One violet accent drives
+   every interactive state; the sidebar keeps its own dark token family
+   (applied via .sidebar-surface below) so it stays dark regardless. */
+.vibrant {
+  --background: oklch(0.97 0.004 265);
+  --foreground: oklch(0.2 0.02 265);
+  --card: oklch(0.995 0.002 265);
+  --card-foreground: oklch(0.2 0.02 265);
+  --popover: oklch(0.995 0.002 265);
+  --popover-foreground: oklch(0.2 0.02 265);
+  --primary: oklch(0.55 0.2 275);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.93 0.02 275);
+  --secondary-foreground: oklch(0.32 0.15 275);
+  --muted: oklch(0.94 0.006 265);
+  --muted-foreground: oklch(0.48 0.02 265);
+  --accent: oklch(0.55 0.14 210);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.58 0.22 25);
+  --border: oklch(0.88 0.012 265);
+  --input: oklch(0.92 0.01 265);
+  --ring: oklch(0.55 0.2 275);
+  --success: oklch(0.55 0.15 150);
+  --warning: oklch(0.72 0.15 80);
+  --error: oklch(0.58 0.22 25);
+  --info: oklch(0.55 0.14 210);
+  --chart-1: oklch(0.55 0.2 275);
+  --chart-2: oklch(0.55 0.14 210);
+  --chart-3: oklch(0.55 0.15 150);
+  --chart-4: oklch(0.72 0.15 80);
+  --chart-5: oklch(0.58 0.22 25);
+  --sidebar: oklch(0.18 0.02 265);
+  --sidebar-foreground: oklch(0.96 0.005 265);
+  --sidebar-primary: oklch(0.64 0.19 275);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.28 0.03 265);
+  --sidebar-accent-foreground: oklch(0.96 0.005 265);
+  --sidebar-border: oklch(0.26 0.025 265);
+  --sidebar-ring: oklch(0.64 0.19 275);
+}
+
+/* Re-points the shared tokens (--card, --foreground, --muted*, --primary...)
+   at the sidebar's own dark family for anything inside this scope, so
+   AppSidebar's existing bg-card/text-foreground/text-muted-foreground
+   classes render dark without AppSidebar.tsx needing sidebar-specific
+   classes. CSS custom properties resolve against the cascade at point of
+   use, so this indirection (the same trick .dark/.vibrant use at the root)
+   works scoped to just this subtree. */
+.vibrant .sidebar-surface {
+  --card: var(--sidebar);
+  --card-foreground: var(--sidebar-foreground);
+  --popover: var(--sidebar);
+  --popover-foreground: var(--sidebar-foreground);
+  --foreground: var(--sidebar-foreground);
+  --muted: var(--sidebar-accent);
+  --muted-foreground: oklch(0.72 0.015 265);
+  --primary: var(--sidebar-primary);
+  --primary-foreground: var(--sidebar-primary-foreground);
+  --border: var(--sidebar-border);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -154,4 +217,5 @@
   h4 {
     @apply text-lg;
   }
-}
+}
+