UI: Section-aware sidebar active colors - gold for Pro Tier, teal for AI Coach in light mode

src/app/dashboard/layout.tsx

@@ -95,9 +95,10 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             </div>
           </div>
           
-          <NavItem href="/dashboard" icon={<LayoutDashboard size={17} />} label="Overview" active={pathname === "/dashboard"} />
+          <NavItem section="pro" href="/dashboard" icon={<LayoutDashboard size={17} />} label="Overview" active={pathname === "/dashboard"} />
-          <NavItem href="/dashboard/leaderboard" icon={<Trophy size={17} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
+          <NavItem section="pro" href="/dashboard/leaderboard" icon={<Trophy size={17} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
           <NavItem 
+            section="pro"
             href="/dashboard/progress" 
             icon={<BarChart3 size={17} />} 
             label="Syllabus Tracker" 
@@ -105,6 +106,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("chapter-wise-progress-tracking")}
           />
           <NavItem 
+            section="pro"
             href="/dashboard/cbt" 
             icon={<CheckSquare size={17} />} 
             label="Mock Tests (CBT)" 
@@ -112,6 +114,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("weekly-test-series")}
           />
           <NavItem 
+            section="pro"
             href="/dashboard/materials" 
             icon={<BookOpen size={17} />} 
             label="Quick Notes" 
@@ -119,6 +122,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("detailed-performance-analytics")}
           />
           <NavItem 
+            section="pro"
             href="/dashboard/analytics" 
             icon={<LineChart size={17} />} 
             label="Performance Analytics" 
@@ -126,6 +130,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("detailed-performance-analytics")}
           />
           <NavItem 
+            section="pro"
             href="/dashboard/community" 
             icon={<School size={17} />} 
             label="Doubt Forum" 
@@ -146,6 +151,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
           </div>
           
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/tutor" 
             icon={<BrainCircuitIcon />} 
             label="AI Tutor" 
@@ -153,6 +159,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("ai-tutor-chat")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/cbt-dpp" 
             icon={<Zap size={17} />} 
             label="PrepPilot AI" 
@@ -160,6 +167,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("ai-tutor-chat")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/readiness" 
             icon={<Gauge size={17} />} 
             label="Exam Readiness" 
@@ -167,6 +175,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("detailed-performance-analytics")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/college-predictor" 
             icon={<School size={17} />} 
             label="College Predictor" 
@@ -174,6 +183,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("college-predictor")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/strategy" 
             icon={<Target size={17} />} 
             label="Exam Strategy" 
@@ -181,6 +191,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("exam-day-strategy")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/study-plan" 
             icon={<Calendar size={17} />} 
             label="AI Study Plan" 
@@ -188,6 +199,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("personalized-study-plan")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/time-optimization" 
             icon={<Clock size={17} />} 
             label="Time Optimization" 
@@ -195,6 +207,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("personalized-study-plan")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/heatmap" 
             icon={<Flame size={17} />} 
             label="Mistake Heatmap" 
@@ -202,6 +215,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("ai-mistake-tracking")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/weekly-progress" 
             icon={<Activity size={17} />} 
             label="Weekly Progress" 
@@ -209,6 +223,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
             isLocked={!hasAccessTo("detailed-performance-analytics")}
           />
           <NavItem 
+            section="ai"
             href="/dashboard/ai-coach/mistakes" 
             icon={<BrainCircuit size={17} />} 
             label="Mistake Analyzer" 
@@ -332,28 +347,49 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
   )
 }
 
-function NavItem({ href, icon, label, active, isLocked }: { href: string, icon: React.ReactNode, label: string, active?: boolean, isLocked?: boolean }) {
+function NavItem({ href, icon, label, active, isLocked, section }: { href: string, icon: React.ReactNode, label: string, active?: boolean, isLocked?: boolean, section?: "pro" | "ai" }) {
+  // Section-aware active color tokens (light mode only, dark mode falls back to cyan)
+  const activeClasses = active
+    ? section === "pro"
+      ? "bg-yellow-50 light:bg-yellow-50 text-yellow-700 dark:bg-[#00F0FF]/10 dark:text-[#00F0FF] font-semibold border border-yellow-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(234,179,8,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
+      : section === "ai"
+      ? "bg-cyan-50 dark:bg-[#00F0FF]/10 text-cyan-800 dark:text-[#00F0FF] font-semibold border border-cyan-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(6,182,212,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
+      : "bg-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
+    : isLocked
+    ? "text-muted-foreground/40 cursor-not-allowed border border-transparent"
+    : "text-muted-foreground/80 hover:bg-secondary/60 hover:text-foreground border border-transparent hover:border-border/40"
+
+  const iconActiveClass = active
+    ? section === "pro"
+      ? "text-yellow-600 dark:text-[#00F0FF]"
+      : section === "ai"
+      ? "text-cyan-700 dark:text-[#00F0FF]"
+      : "text-[#00F0FF]"
+    : isLocked
+    ? "text-muted-foreground/30"
+    : "text-muted-foreground/60 group-hover:text-foreground/80"
+
+  const activeBarClass = active
+    ? section === "pro"
+      ? "w-1 h-4 rounded-full bg-yellow-500 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(234,179,8,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
+      : section === "ai"
+      ? "w-1 h-4 rounded-full bg-cyan-600 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(6,182,212,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
+      : "w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"
+    : ""
+
   return (
     <Link 
       href={isLocked ? "#" : href}
-      className={`group flex items-center justify-between px-3 py-2 rounded-xl transition-all duration-200 ${
+      className={`group flex items-center justify-between px-3 py-2 rounded-xl transition-all duration-200 ${activeClasses}`}
-        active 
-          ? "bg-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]" 
-          : isLocked
-            ? "text-muted-foreground/40 cursor-not-allowed border border-transparent"
-            : "text-muted-foreground/80 hover:bg-secondary/60 hover:text-foreground border border-transparent hover:border-border/40"
-      }`}
     >
       <div className="flex items-center gap-2.5">
-        <span className={`transition-all duration-200 ${
+        <span className={`transition-all duration-200 ${iconActiveClass}`}>
-          active ? "text-[#00F0FF]" : isLocked ? "text-muted-foreground/30" : "text-muted-foreground/60 group-hover:text-foreground/80"
-        }`}>
           {icon}
         </span>
         <span className="text-[13px] font-medium tracking-[-0.01em]">{label}</span>
       </div>
       {isLocked && <Lock size={11} className="text-muted-foreground/30 shrink-0" />}
-      {active && <span className="w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"></span>}
+      {active && <span className={activeBarClass}></span>}
     </Link>
   )
 }