<?php
// staff/includes/header.php — mobile shell for authenticated staff pages.
// Set $page_title and $active_nav ('orders'|'settings') before including.
require_once(__DIR__ . "/auth.php");

// Unread notifications (defensive — table shared with restaurant side)
$__unread = 0;
if ($n = $conn->prepare("SELECT COUNT(*) c FROM notifications WHERE restaurant_id=? AND is_read=0")) {
    $n->bind_param("i", $__rest_id); $n->execute();
    $__unread = (int)($n->get_result()->fetch_assoc()['c'] ?? 0);
}

$__page_title = $page_title ?? 'Dabil Staff';
$__active     = $active_nav ?? 'orders';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title><?php echo htmlspecialchars($__page_title); ?> — Dabil</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#225AE3;--primary-dark:#1a47b8;--primary-bg:#EEF3FD;
  --bg:#F4F6FB;--white:#fff;--text:#0F172A;--text-muted:#64748B;--text-light:#94A3B8;
  --border:#E2E8F0;--border-dark:#CBD5E1;
  --success:#10B981;--success-bg:#ECFDF5;--warning:#F59E0B;--warning-bg:#FFFBEB;
  --error:#DC2626;--error-bg:#FEF2F2;
  --topbar-h:60px;--bottomnav-h:62px;--app-max-w:480px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:var(--font)}
img{max-width:100%}

.app-topbar{position:fixed;top:0;left:0;right:0;max-width:var(--app-max-w);margin:0 auto;height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 18px 0;box-sizing:content-box;z-index:101}
.app-brand img{height:28px;width:auto;max-width:120px;object-fit:contain;display:block}
.app-topbar-right{display:flex;align-items:center;gap:14px}
.icon-btn{position:relative;width:36px;height:36px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none}
.icon-btn .dot{position:absolute;top:5px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--error);border:1.5px solid #fff}
.topbar-avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0;border:2px solid #fff;box-shadow:0 0 0 2px var(--primary)}
.topbar-avatar img{width:100%;height:100%;object-fit:cover}

.app-shell{max-width:var(--app-max-w);margin:0 auto;min-height:100vh;position:relative}
.main-content{max-width:var(--app-max-w);margin:0 auto;padding:calc(var(--topbar-h) + env(safe-area-inset-top) + 18px) 16px calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 24px);min-height:100vh;overflow-x:hidden}

.app-bottomnav{position:fixed;bottom:0;left:0;right:0;max-width:var(--app-max-w);margin:0 auto;height:var(--bottomnav-h);background:var(--white);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;z-index:101}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-light);font-size:.66rem;font-weight:700}
.bn-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.bn-item.active{color:var(--primary)}

.page-head{margin-bottom:18px}
.page-head h1{font-size:1.55rem;font-weight:800;letter-spacing:-.03em;color:var(--primary)}
.page-head p{font-size:.88rem;color:var(--text-muted);margin-top:2px}

.banner{font-size:.85rem;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.banner.ok{background:var(--success-bg);border:1px solid #A7F3D0;color:#047857}
.banner.err{background:var(--error-bg);border:1px solid #FECACA;color:#B91C1C}

@media(min-width:540px){body{background:#E7EBF1}.main-content{box-shadow:0 0 40px rgba(15,23,42,.05)}}
</style>
</head>
<body>

<header class="app-topbar">
  <a href="index.php" class="app-brand"><img src="../customer/assets/img/dlogo.png" alt="Dabil"></a>
  <div class="app-topbar-right">
    <a href="notifications.php" class="icon-btn" title="Notifications">
      <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
      <?php if ($__unread > 0): ?><span class="dot"></span><?php endif; ?>
    </a>
    <a href="settings.php" class="topbar-avatar" title="<?php echo htmlspecialchars($__name); ?>"><?php echo $__avatar_url ? '<img src="' . htmlspecialchars($__avatar_url) . '" alt="">' : $__initials; ?></a>
  </div>
</header>

<div class="app-shell">
<main class="main-content">
