<?php
// includes/header.php — shared mobile-app shell for customer pages
// Usage: include("includes/header.php"); at top of every page
// Set $page_title and $active_nav before including

if (!isset($_SESSION)) session_start();
if (!isset($_SESSION['user_id'])) { header("Location: signin.php?redirect=" . urlencode($_SERVER['REQUEST_URI'])); exit; }

include_once("config/db.php");

// Fetch user
$uid = (int)$_SESSION['user_id'];
$u_stmt = $conn->prepare("SELECT name,email,avatar FROM users WHERE id=?");
$u_stmt->bind_param("i", $uid);
$u_stmt->execute();
$__user = $u_stmt->get_result()->fetch_assoc();
$__name  = $__user['name'] ?? 'Customer';
$__email = $__user['email'] ?? '';
$__initials = strtoupper(substr($__name,0,1)) . (strpos($__name,' ')!==false ? strtoupper(substr(strrchr($__name,' '),1,1)) : '');

// Real profile photo, when one's been uploaded (see profile.php / upload_avatar.php).
// Show the image whenever the avatar column is set (the markup falls back to
// initials via onerror if the file is genuinely missing). A cache-buster keeps
// a freshly-changed photo from showing stale.
$__avatar_url = '';
if (!empty($__user['avatar'])) {
    $__avatar_file = __DIR__ . '/../uploads/avatars/' . $__user['avatar'];
    $__avatar_bust = is_file($__avatar_file) ? ('?v=' . filemtime($__avatar_file)) : '';
    $__avatar_url  = 'uploads/avatars/' . rawurlencode($__user['avatar']) . $__avatar_bust;
}

// Fetch spendable balance = personal wallet + any organisation meal-ticket balance
$w_stmt = $conn->prepare("SELECT COALESCE(SUM(balance),0) AS bal FROM wallets WHERE user_id=? AND wallet_type IN ('customer','meal_ticket')");
$w_stmt->bind_param("i", $uid);
$w_stmt->execute();
$__balance = (float)($w_stmt->get_result()->fetch_assoc()['bal'] ?? 0);

// Unread notifications count (for bell badge)
$__unread = 0;
if ($n_stmt = $conn->prepare("SELECT COUNT(*) AS cnt FROM customer_notifications WHERE user_id=? AND is_read=0")) {
    $n_stmt->bind_param("i", $uid);
    $n_stmt->execute();
    $__unread = (int)($n_stmt->get_result()->fetch_assoc()['cnt'] ?? 0);
}

$__page_title = $page_title ?? 'Dashboard';
$__active     = $active_nav ?? 'dashboard';

// Which bottom-nav tab should be highlighted
$__nav_home    = ($__active === 'dashboard');
$__nav_wallet  = in_array($__active, ['wallet','fund','withdraw'], true);
$__nav_scan    = ($__active === 'scan');
$__nav_orders  = ($__active === 'orders');
$__nav_profile = ($__active === 'profile');
?>
<!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@300;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-light:#4f79ea;
  --primary-bg:#EEF3FD;--bg:#F5F7F8;--white:#FFFFFF;--surface:#FFFFFF;--surface-2:#F1F5F9;
  --text:#0F172A;--text-muted:#64748B;--text-light:#94A3B8;
  --border:#E2E8F0;--border-dark:#CBD5E1;
  --success:#10B981;--success-bg:#F0FDF4;
  --error:#EF4444;--error-bg:#FEF2F2;
  --warning:#F59E0B;--warning-bg:#FFFBEB;
  --topbar-h:60px;
  --bottomnav-h:60px;
  --fab-size:54px;
  --app-max-w:480px;
  --radius:12px;--radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 8px 30px rgba(34,90,227,.14);
  --font:'Plus Jakarta Sans',sans-serif;
}
/* ── Dark mode ─────────────────────────────────────────────────────────────
   Toggled by adding class "dark" to <html>. Overrides the theme variables and
   re-skins white surfaces so pages that hardcode #fff still look right. */
html.dark{
  color-scheme:dark;
  --primary-bg:#17233D;
  --bg:#0B1220;--white:#131C30;--surface:#131C30;--surface-2:#0E1626;
  --text:#E6EDF7;--text-muted:#9FB0C6;--text-light:#6E7F98;
  --border:#243247;--border-dark:#33455F;
  --success:#34D399;--success-bg:#0F2A20;
  --error:#F87171;--error-bg:#3A1B1B;
  --warning:#FBBF24;--warning-bg:#33280F;
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);--shadow-md:0 4px 16px rgba(0,0,0,.5);--shadow-lg:0 10px 30px rgba(0,0,0,.55);
}
html.dark body{background:var(--bg);color:var(--text);}
/* Re-skin white card surfaces (higher specificity than the pages' own rules).
   .wallet-card is excluded so the balance card keeps its blue gradient. */
html.dark [class*="-card"]:not(.wallet-card):not(.receipt),html.dark .card,html.dark .note,html.dark .tx-stat,html.dark .nd-item,html.dark .opt,html.dark .settings-card,html.dark .profile-card,html.dark .td-hero,html.dark .oh-pill,html.dark .nt-box,html.dark .sr-btn,html.dark .ghost,html.dark .rest-list-item,html.dark .rest-empty,html.dark .cn-quick a,html.dark .cn-msg{
  background:var(--surface);border-color:var(--border);
}
/* Receipts stay a white "paper" document (readable + correct when shared as image/PDF).
   Re-declare the light-theme variables inside the receipt so all its text/borders,
   whether hard-coded or variable-based, render correctly on white. */
html.dark .receipt{
  background:#fff;color:#0F172A;
  --text:#0F172A;--text-muted:#64748B;--text-light:#94A3B8;
  --border:#E2E8F0;--border-dark:#CBD5E1;--bg:#F5F7F8;--surface:#fff;--surface-2:#F1F5F9;
}
/* Keep the coloured balance card blue with its white text. */
html.dark .wallet-card{color:#fff;}
/* Dabil wordmark stays legible in dark mode. */
html.dark .app-brand .brand-name{color:#fff;}
/* Show the white Dabil logo in dark mode, the normal one in light mode. */
html:not(.dark) .brand-logo-dark{display:none;}
html.dark .brand-logo-light{display:none;}
/* Inputs / textareas / selects */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark textarea,html.dark select,html.dark .form-control,
html.dark [class*="-input"],html.dark [class*="-textarea"]{
  background:var(--surface-2);color:var(--text);border-color:var(--border);
}
html.dark input::placeholder,html.dark textarea::placeholder{color:var(--text-light);}
/* Pills / chips that were white (keep the active/selected ones as-is) */
html.dark .tx-pill,html.dark [class*="-chip"]:not(.on):not(.active),html.dark [class*="-pill"]:not(.on):not(.active){
  background:var(--surface);border-color:var(--border);
}
/* Keep white text on coloured gradient/primary cards */
html.dark .tx-balance,html.dark .od-pay,html.dark [class*="hero-icon"]{color:#fff;}
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 TOP BAR === */
.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{display:flex;align-items:center;gap:9px}
.app-brand .brand-icon{width:32px;height:32px;background:var(--primary);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.app-brand .brand-icon svg{width:16px;height:16px;stroke:#fff;fill:none}
.app-brand .brand-name{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.app-brand .brand-logo{height:30px;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:34px;height:34px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;flex-shrink:0;touch-action:manipulation}
.icon-btn:active{background:var(--bg)}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none}
.icon-btn .notif-dot{position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--error);border:1.5px solid var(--white)}
.topbar-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--primary);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;
  cursor:pointer;flex-shrink:0;border:2px solid var(--white);box-shadow:0 0 0 2px var(--primary);
}
.topbar-avatar img{width:100%;height:100%;object-fit:cover;display:block}

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

/* === BOTTOM TAB NAV === */
.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(--bg);
  display:flex;align-items:center;justify-content:space-between;padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;z-index:101;overflow:visible;
}
/* White bar surface with a moving concave "notch" that follows the active
   bubble (the water-wave gap). The notch reveals the nav's page-tone bg. */
@property --notch-x { syntax:'<length>'; inherits:false; initial-value:-100px; }
.bn-surface{
  position:absolute;inset:0;z-index:0;background:var(--white);border-top:1px solid var(--border);
  --notch-x:-100px;
  -webkit-mask-image:radial-gradient(circle 28px at var(--notch-x) 9px, rgba(0,0,0,0) 26px, #000 28px);
          mask-image:radial-gradient(circle 28px at var(--notch-x) 9px, rgba(0,0,0,0) 26px, #000 28px);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  transition:--notch-x .42s cubic-bezier(.5,0,.2,1);
}
.bn-item{
  position:relative;z-index:1;
  flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--text-light);font-size:.64rem;font-weight:700;letter-spacing:.01em;
  transition:color .15s;touch-action:manipulation;
}
.bn-item svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
.bn-item.active{color:var(--primary)}
.bn-fab-wrap{flex:1;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.bn-fab{
  position:absolute;top:-24px;width:var(--fab-size);height:var(--fab-size);border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(34,90,227,.4);border:4px solid var(--white);
  transition:transform .15s;
}
.bn-fab svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:2.2}
.bn-fab-wrap:active .bn-fab{transform:scale(.93)}

/* ── Animated active "bubble" indicator (slides between tabs) ───────── */
.bn-item .bn-ic{display:flex;align-items:center;justify-content:center;transition:opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1)}
.bn-item .bn-lbl{transition:color .2s ease, opacity .2s ease}
/* the floating bubble that carries the active icon */
.bn-bubble{
  position:absolute;top:-14px;left:0;width:46px;height:46px;border-radius:50%;box-sizing:border-box;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border:4px solid var(--white);box-shadow:0 8px 18px rgba(34,90,227,.4);
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,10px) scale(.4);opacity:0;pointer-events:none;z-index:2;
  transition:left .42s cubic-bezier(.5,0,.2,1), transform .4s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.bn-bubble.ready{opacity:1;transform:translate(-50%,0) scale(1)}
.bn-bubble svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2}
/* while the bubble is active, the selected tab hides its own icon (the bubble shows it) */
.app-bottomnav.bubbly .bn-item.active .bn-ic{opacity:0;transform:translateY(-6px) scale(.6)}
@media (prefers-reduced-motion: reduce){
  .bn-surface{transition:none}
  .bn-bubble{transition:left .2s linear, opacity .2s ease}
  .bn-bubble.ready{transform:translate(-50%,0) scale(1)}
}

/* === SHARED: WALLET CARD (used on dashboard + wallet page) === */
.wallet-card {
  background: linear-gradient(135deg, #225AE3 0%, #1844b8 100%);
  border-radius: clamp(16px, 4vw, 22px);
  padding: clamp(18px, 5vw, 26px) clamp(18px, 5vw, 24px) clamp(18px, 5vw, 24px);
  color: #fff;
  margin-bottom: clamp(18px, 5vw, 26px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(34,90,227,.3);
  transform: translateZ(0);
}
.wallet-card::before {
  content: '';
  position: absolute;
  right: clamp(-20px,-5vw,-30px); top: clamp(-20px,-5vw,-30px);
  width: clamp(100px, 35vw, 140px); height: clamp(100px, 35vw, 140px);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  pointer-events: none;
}
.wallet-card::after {
  content: '';
  position: absolute;
  right: clamp(30px, 10vw, 50px); top: clamp(40px, 12vw, 60px);
  width: clamp(55px, 18vw, 80px); height: clamp(55px, 18vw, 80px);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.wallet-card .wc-label {
  font-size: clamp(.75rem, 2.5vw, .84rem);
  opacity: .85;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; z-index: 1;
}
.wallet-card .wc-amount {
  font-size: clamp(1.45rem, 7vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: clamp(16px, 5vw, 22px);
  line-height: 1;
  position: relative; z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.wallet-card .wc-fund-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.95);
  color: var(--primary);
  font-weight: 700;
  font-size: clamp(.82rem, 2.5vw, .9rem);
  padding: clamp(11px, 3vw, 14px) 20px;
  border-radius: 12px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  position: relative; z-index: 1;
  transition: opacity .2s;
  min-height: 44px;
}
.wallet-card .wc-fund-btn:hover { opacity: .9; }
.wallet-card .wc-fund-btn:active { opacity: .8; }
.wallet-card .eye-btn {
  background: rgba(255,255,255,.2);
  border: none;
  border-radius: 8px;
  color: #fff;
  min-width: 36px; min-height: 36px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  touch-action: manipulation;
}
.wallet-card .eye-btn:active { background: rgba(255,255,255,.35); }
@media (max-width: 480px) { .wallet-card { border-radius: 18px; } }
@media (max-width: 375px) { .wallet-card { padding: 18px 16px; border-radius: 16px; } }
@media (max-width: 320px) { .wallet-card { padding: 14px 13px; border-radius: 14px; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .wallet-card { box-shadow: 0 6px 24px rgba(34,90,227,.28); }
}

/* === SHARED: SEARCH BAR (used on dashboard + restaurants page) === */
.search-wrap { position: relative; margin-bottom: clamp(10px, 3vw, 16px); }
.search-wrap input {
  width: 100%;
  font-size: max(16px, .88rem);
  padding: clamp(10px, 3vw, 13px) 46px clamp(10px, 3vw, 13px) 44px;
  border: 1.5px solid var(--border);
  border-radius: clamp(12px, 3vw, 14px);
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
  min-height: 44px;
  font-family: var(--font);
  -webkit-appearance: none;
  appearance: none;
}
.search-wrap input:focus { border-color: var(--primary); }
.search-wrap input::placeholder { color: var(--text-light); }
.search-wrap .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; display: flex;
}
.search-wrap .filter-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: var(--primary-bg); border: none; border-radius: 9px;
  min-width: 32px; min-height: 32px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--primary); touch-action: manipulation;
}
.search-wrap .filter-btn:active { background: var(--primary); color: #fff; }

/* === SHARED: CATEGORY PILLS === */
.cat-pills {
  display: flex; gap: clamp(6px, 2vw, 10px);
  margin-bottom: clamp(18px, 5vw, 24px);
  overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.cat-pills::-webkit-scrollbar { display: none; }
.cat-pill {
  padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 18px);
  border-radius: 30px; font-size: clamp(.74rem, 2.2vw, .82rem); font-weight: 700;
  border: 1.5px solid var(--border); background: #fff; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; transition: all .18s; flex-shrink: 0;
  scroll-snap-align: start; min-height: 36px; touch-action: manipulation;
}
.cat-pill.active, .cat-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (hover: none) {
  .cat-pill:hover { background: #fff; color: var(--text-muted); border-color: var(--border); }
  .cat-pill.active, .cat-pill:active { background: var(--primary); color: #fff; border-color: var(--primary); }
}

/* === SHARED: PARTNER RESTAURANT LIST === */
.rest-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(10px, 3vw, 16px); }
.rest-list-header h2 { font-size: clamp(.9rem, 3vw, 1.05rem); font-weight: 800; letter-spacing: -.02em; }
.rest-list-header a { font-size: clamp(.74rem, 2.2vw, .82rem); color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; padding: 4px 0; }
.rest-list-item {
  display: flex; align-items: center; gap: clamp(10px, 3vw, 16px);
  padding: clamp(12px, 3.5vw, 16px); background: #fff; border: 1.5px solid var(--border);
  border-radius: clamp(12px, 3vw, 16px); margin-bottom: clamp(8px, 2.5vw, 12px);
  text-decoration: none; color: var(--text); transition: border-color .2s, box-shadow .2s;
  touch-action: manipulation; min-height: 72px;
}
.rest-list-item:last-child { margin-bottom: 0; }
.rest-list-item:hover { border-color: rgba(34,90,227,.3); box-shadow: 0 4px 16px rgba(34,90,227,.1); }
@media (hover: none) {
  .rest-list-item:hover { border-color: var(--border); box-shadow: none; }
  .rest-list-item:active { background: var(--primary-bg); border-color: rgba(34,90,227,.25); }
}
.rest-list-item .rest-logo {
  width: clamp(44px, 13vw, 54px); height: clamp(44px, 13vw, 54px); border-radius: 50%;
  overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--primary-bg), #dce8fb);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.85rem, 2.5vw, 1rem); font-weight: 800; color: var(--primary); border: 1.5px solid var(--border);
}
.rest-list-item .rest-logo img { width: 100%; height: 100%; object-fit: cover; }
.rest-list-item .rest-info { flex: 1; min-width: 0; }
.rest-list-item .rest-name { font-weight: 700; font-size: clamp(.84rem, 2.5vw, .92rem); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-list-item .rest-meta { font-size: clamp(.68rem, 2vw, .76rem); color: var(--text-muted); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-list-item .rest-accepts { font-size: clamp(.66rem, 2vw, .73rem); color: #10B981; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.rest-list-item .rest-chevron { color: #ccc; flex-shrink: 0; }
@media (max-width: 320px) {
  .rest-list-item { gap: 9px; padding: 10px 11px; min-height: 65px; }
  .rest-list-item .rest-chevron { display: none; }
}
.rest-empty {
  background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
  padding: clamp(28px, 8vw, 42px) 20px; text-align: center; color: var(--text-muted);
}

/* === SHARED: sub-page topbar (back + title + optional right action) ===
   Used by every "focused sub-screen" reached from a menu/list — Personal
   Info, Change Password, Security, Help Center, Contact Admin, Notification
   Preferences, etc. — instead of each page redefining its own copy. */
.sub-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 18px; }
.sub-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sub-topbar .sub-back {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text); background: var(--bg); flex-shrink: 0; touch-action: manipulation;
}
.sub-topbar .sub-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.sub-topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Secondary row text always stacks under its title (no run-together text). */
[class$="-desc"], [class$="-sub"], [class$="-hint"] { display: block; }

/* === SHARED: settings menu rows === */
.settings-group-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin: 22px 0 12px; }
.settings-group-title:first-of-type { margin-top: 4px; }
.settings-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(15,23,42,.05); overflow: hidden; margin-bottom: 4px; }
.settings-row {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border); touch-action: manipulation; background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font-family: var(--font); cursor: pointer; font-size: .9rem;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: var(--bg); }
.settings-row .sr-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-row .sr-label { flex: 1; font-weight: 600; }
.settings-row .sr-chevron { color: var(--border-dark); flex-shrink: 0; }
.settings-row.danger { color: var(--error); }
.settings-row.danger .sr-label { font-weight: 700; }

/* === CARDS === */
.card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.card-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:.95rem;font-weight:700}
.card-body{padding:20px 22px}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:none;cursor:pointer;font-family:var(--font);font-weight:600;transition:all .2s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-lg)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 8px 24px rgba(34,90,227,.25)}
.btn-secondary{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--border);border-color:var(--border-dark)}
.btn-sm{padding:8px 14px;font-size:.8rem}
.btn-md{padding:10px 20px;font-size:.875rem}
.btn-lg{padding:13px 24px;font-size:.9rem}
.btn-block{width:100%}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none}

/* === STATUS BADGES === */
.badge{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-error{background:var(--error-bg);color:var(--error)}
.badge-primary{background:var(--primary-bg);color:var(--primary)}
.badge-muted{background:var(--bg);color:var(--text-muted)}

/* === TABLE === */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:10px 16px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg);border-bottom:1px solid var(--border)}
.data-table td{padding:13px 16px;font-size:.84rem;border-bottom:1px solid var(--border)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover td{background:var(--bg)}

/* === ALERTS === */
.alert{padding:12px 16px;border-radius:10px;font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.alert svg{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid #BBF7D0}
.alert-error{background:var(--error-bg);color:var(--error);border:1px solid #FECACA}
.alert-warning{background:var(--warning-bg);color:var(--warning);border:1px solid #FDE68A}
.alert-info{background:var(--primary-bg);color:var(--primary);border:1px solid rgba(34,90,227,.2)}

/* === FORM === */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:7px}
.form-control{width:100%;height:46px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);padding:0 14px;font-size:.875rem;color:var(--text);font-family:var(--font);outline:none;transition:all .2s}
.form-control:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px rgba(34,90,227,.1)}
.form-control::placeholder{color:var(--text-light)}
textarea.form-control{height:auto;padding:12px 14px;resize:vertical}
select.form-control{cursor:pointer}

/* === DESKTOP / WIDE VIEWPORT: frame the app like a phone preview === */
@media (min-width:540px){
  body{background:#E7EBF1}
  .app-topbar{box-shadow:0 1px 0 0 var(--border),0 6px 24px rgba(15,23,42,.06)}
  .app-bottomnav{box-shadow:0 -1px 0 0 var(--border),0 -6px 24px rgba(15,23,42,.06)}
  .main-content{box-shadow:0 0 40px rgba(15,23,42,.05)}
}

/* === ANIMATIONS === */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.anim-fade{animation:fadeIn .3s ease both}
.anim-up{animation:fadeUp .4s ease both}
</style>
<script>
  // Apply the saved theme before paint to avoid a flash of the wrong mode.
  // Falls back to the device's colour-scheme preference when the user hasn't chosen.
  (function(){ try {
    var t = localStorage.getItem('dabil_theme');
    if (t === 'dark' || (!t && window.matchMedia && matchMedia('(prefers-color-scheme: dark)').matches))
      document.documentElement.classList.add('dark');
  } catch(e){} })();
</script>
</head>
<body>

<!-- Top App Bar -->
<header class="app-topbar">
  <a href="dashboard.php" class="app-brand">
    <img class="brand-logo brand-logo-light" src="assets/img/dlogo.png" alt="Dabil">
    <img class="brand-logo brand-logo-dark" src="assets/img/whitedabil.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="notif-dot"></span><?php endif; ?>
    </a>
    <a href="profile.php" class="topbar-avatar" title="<?php echo htmlspecialchars($__name); ?>"><?php echo $__avatar_url ? '<img src="' . htmlspecialchars($__avatar_url) . '" alt="" onerror="this.parentNode.textContent=\'' . htmlspecialchars($__initials, ENT_QUOTES) . '\'">' : $__initials; ?></a>
  </div>
</header>

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