<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 sm:px-8 flex-none sticky top-0 z-30">
 <div class="flex items-center gap-4">
 <button @click="mobileSidebar = true" class="lg:hidden h-10 w-10 flex items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition-all border border-emerald-100">
 <i class="fa-solid fa-bars-staggered"></i>
 </button>
 <h2 class="text-xs font-black text-gray-900 uppercase tracking-widest hidden sm:block"><?php echo $title ?? 'Dashboard'; ?></h2>
 </div>

 <div class="flex items-center gap-4">
 <!-- Quick Stats for Student -->
 <div class="hidden md:flex items-center gap-2 bg-emerald-50 px-3 py-1.5 rounded-lg border border-emerald-100">
 <span class="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
 <span class="text-[9px] font-black text-emerald-600 uppercase tracking-widest">Active Status</span>
 </div>

 <div class="h-8 w-px bg-gray-100 mx-1"></div>

 <!-- User Profile -->
 <div class="flex items-center gap-3">
 <div class="text-right hidden sm:block">
 <p class="text-[11px] font-black text-gray-900 leading-none"><?php echo $_SESSION['user_name']; ?></p>
 <p class="text-[9px] font-bold text-emerald-600 uppercase mt-1 tracking-tighter">Student Account</p>
 </div>
 <div class="h-10 w-10 rounded-lg bg-emerald-600 flex items-center justify-center text-white font-black text-sm border border-emerald-700">
 <?php echo substr($_SESSION['user_name'], 0, 1); ?>
 </div>
 </div>
 </div>
</header>
