📄 topbar.php

<main class="flex-1 min-w-0 flex flex-col">
  <header class="sticky top-0 z-20 bg-white border-b border-gray-200 px-5 py-3 flex items-center justify-between gap-4">
    <div class="flex items-center gap-3 min-w-0">
      <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden w-9 h-9 rounded-lg border border-gray-300 flex items-center justify-center shrink-0">
        <i class="fa-solid fa-bars"></i>
      </button>
      <h1 class="font-heading font-bold text-lg truncate"><?= e($pageTitle ?? 'Dashboard') ?></h1>
    </div>
    <div class="flex items-center gap-3 shrink-0">
      <?php $cu = current_user(); ?>
      <div class="hidden sm:block text-right">
        <p class="text-sm font-semibold leading-tight"><?= e($cu['name'] ?? '') ?></p>
        <p class="text-xs text-gray-400 capitalize"><?= e($cu['role'] ?? '') ?></p>
      </div>
      <div class="w-9 h-9 rounded-full bg-gradient-to-br from-brand-red to-brand-green flex items-center justify-center text-white text-sm font-bold">
        <?= e(strtoupper(substr($cu['name'] ?? 'A', 0, 1))) ?>
      </div>
    </div>
  </header>

  <div class="flex-1 p-5 md:p-8">
    <?php $flash = flash_get(); if ($flash): ?>
      <div class="mb-6 px-4 py-3 rounded-xl text-sm font-medium <?= $flash['type'] === 'error' ? 'bg-red-50 text-brand-red border border-red-200' : 'bg-green-50 text-brand-green border border-green-200' ?>">
        <i class="fa-solid <?= $flash['type'] === 'error' ? 'fa-circle-exclamation' : 'fa-circle-check' ?> mr-2"></i><?= e($flash['message']) ?>
      </div>
    <?php endif; ?>