Add mobile nav toggle, responsive admin tables, and menu reordering

- Public site: replace the always-hidden mobile nav with a hamburger
  toggle (index.php, menu.php, main.js, styles.css)
- Admin: render the Menu/Announcements/Users tables as labeled cards
  below ~760px instead of squeezing descriptions into unreadable
  single-word-per-line columns
- Admin menu: replace the manual "Order" number (which allowed
  duplicates and never reflected in real time) with ↑/↓ buttons that
  reorder items and categories immediately and renumber sort_order
  sequentially on every move, self-healing any stale duplicates

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

admin/index.php

@@ -219,7 +219,7 @@ $today = date('Y-m-d');
                         (empty($ann['end_date']) || $ann['end_date'] >= $today);
                     ?>
                     <tr>
-                      <td>
+                      <td data-label="Status">
                         <?php if ($isCurrentlyActive): ?>
                           <span class="status-badge active">● Live</span>
                         <?php elseif ($ann['is_active']): ?>
@@ -228,23 +228,23 @@ $today = date('Y-m-d');
                           <span class="status-badge inactive">○ Off</span>
                         <?php endif; ?>
                       </td>
-                      <td>
+                      <td data-label="Headline">
                         <strong><?= htmlspecialchars($ann['headline']) ?></strong>
                         <div class="muted" style="font-size: 0.82rem; margin-top: 0.2rem; max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                           <?= htmlspecialchars($ann['message']) ?>
                         </div>
                       </td>
-                      <td>
+                      <td data-label="Type">
                         <span class="eyebrow"><?= htmlspecialchars($ann['type']) ?></span>
                       </td>
-                      <td class="font-mono" style="font-size: 0.8rem; color: var(--ink-muted);">
+                      <td class="font-mono" data-label="Schedule" style="font-size: 0.8rem; color: var(--ink-muted);">
                         <?php if (!empty($ann['start_date']) || !empty($ann['end_date'])): ?>
                           <?= htmlspecialchars($ann['start_date'] ?: 'Now') ?> → <?= htmlspecialchars($ann['end_date'] ?: 'Ongoing') ?>
                         <?php else: ?>
                           Always (while on)
                         <?php endif; ?>
                       </td>
-                      <td style="font-size: 0.82rem; color: var(--ink-muted);">
+                      <td data-label="Placements" style="font-size: 0.82rem; color: var(--ink-muted);">
                         <?php
                           $locs = [];
                           if (!empty($ann['show_banner'])) $locs[] = 'Top Banner';
@@ -252,7 +252,7 @@ $today = date('Y-m-d');
                           echo implode(', ', $locs) ?: 'None';
                         ?>
                       </td>
-                      <td>
+                      <td data-label="Actions">
                         <div class="admin-table-actions">
                           <a href="index.php?edit=<?= (int)$ann['id'] ?>" class="btn btn-outline btn-sm">Edit</a>
                           

admin/menu.js

@@ -16,7 +16,6 @@ function openItemModal(itemData = null) {
   const priceField = document.getElementById('item-field-price');
   const badgeField = document.getElementById('item-field-badge');
   const descField = document.getElementById('item-field-desc');
-  const sortField = document.getElementById('item-field-sort');
   const availField = document.getElementById('item-field-available');
 
   if (itemData) {
@@ -27,7 +26,6 @@ function openItemModal(itemData = null) {
     priceField.value = itemData.price || '';
     badgeField.value = itemData.badge || '';
     descField.value = itemData.description || '';
-    sortField.value = itemData.sort_order || 0;
     availField.checked = parseInt(itemData.is_available, 10) === 1;
   } else {
     title.textContent = '✨ Add Menu Item';
@@ -36,7 +34,6 @@ function openItemModal(itemData = null) {
     priceField.value = '';
     badgeField.value = '';
     descField.value = '';
-    sortField.value = 0;
     availField.checked = true;
   }
 
@@ -53,20 +50,17 @@ function openCategoryModal(catData = null) {
   const idField = document.getElementById('cat-field-id');
   const nameField = document.getElementById('cat-field-name');
   const descField = document.getElementById('cat-field-desc');
-  const sortField = document.getElementById('cat-field-sort');
 
   if (catData) {
     title.textContent = '✏️ Edit Category';
     idField.value = catData.id || 0;
     nameField.value = catData.name || '';
     descField.value = catData.description || '';
-    sortField.value = catData.sort_order || 0;
   } else {
     title.textContent = '✨ Add Category';
     idField.value = 0;
     nameField.value = '';
     descField.value = '';
-    sortField.value = 0;
   }
 
   catModal.classList.add('is-open');
@@ -163,12 +157,84 @@ document.getElementById('categories-container').addEventListener('click', async
     openCategoryModal({
       id: target.dataset.id,
       name: target.dataset.name,
-      description: target.dataset.desc,
+      description: target.dataset.desc
-      sort_order: target.dataset.sort
     });
     return;
   }
 
+  // Move Item Up/Down
+  if (target.classList.contains('btn-move-item')) {
+    const direction = target.dataset.direction;
+    const row = target.closest('tr');
+    const tbody = row.parentElement;
+    const sibling = direction === 'up' ? row.previousElementSibling : row.nextElementSibling;
+    if (!sibling) return; // already at this edge; button should be disabled anyway
+
+    target.disabled = true;
+    const fd = new FormData();
+    fd.append('action', 'move_item');
+    fd.append('item_id', row.dataset.itemId);
+    fd.append('direction', direction);
+    fd.append('csrf_token', csrfToken);
+
+    try {
+      const data = await postForm(fd);
+      if (!data.success) {
+        alert(data.error || 'Failed to reorder item.');
+        target.disabled = false;
+        return;
+      }
+      if (direction === 'up') {
+        tbody.insertBefore(row, sibling);
+      } else {
+        tbody.insertBefore(sibling, row);
+      }
+      // Re-derives disabled state from DOM position rather than re-enabling
+      // `target` unconditionally, since the swap may have just moved it
+      // onto an edge (e.g. into the first/last slot) where it should stay disabled.
+      refreshMoveButtonStates(tbody);
+    } catch {
+      alert('Network error. Please try again.');
+      target.disabled = false;
+    }
+    return;
+  }
+
+  // Move Category Up/Down
+  if (target.classList.contains('btn-move-cat')) {
+    const direction = target.dataset.direction;
+    const panel = target.closest('.category-panel');
+    const container = panel.parentElement;
+    const sibling = direction === 'up' ? panel.previousElementSibling : panel.nextElementSibling;
+    if (!sibling) return;
+
+    target.disabled = true;
+    const fd = new FormData();
+    fd.append('action', 'move_category');
+    fd.append('category_id', target.dataset.id);
+    fd.append('direction', direction);
+    fd.append('csrf_token', csrfToken);
+
+    try {
+      const data = await postForm(fd);
+      if (!data.success) {
+        alert(data.error || 'Failed to reorder category.');
+        target.disabled = false;
+        return;
+      }
+      if (direction === 'up') {
+        container.insertBefore(panel, sibling);
+      } else {
+        container.insertBefore(sibling, panel);
+      }
+      refreshCategoryMoveButtonStates();
+    } catch {
+      alert('Network error. Please try again.');
+      target.disabled = false;
+    }
+    return;
+  }
+
   // Toggle Availability (Mark Sold Out / Mark Available)
   if (target.classList.contains('btn-toggle-item')) {
     const row = target.closest('tr');
@@ -203,6 +269,7 @@ document.getElementById('categories-container').addEventListener('click', async
   if (target.classList.contains('btn-delete-item')) {
     if (!confirm('Are you sure you want to delete this menu item?')) return;
     const row = target.closest('tr');
+    const tbody = row?.parentElement;
 
     const fd = new FormData();
     fd.append('action', 'delete_item');
@@ -215,7 +282,10 @@ document.getElementById('categories-container').addEventListener('click', async
         row.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
         row.style.opacity = '0';
         row.style.transform = 'translateX(-10px)';
-        setTimeout(() => row.remove(), 200);
+        setTimeout(() => {
+          row.remove();
+          refreshMoveButtonStates(tbody);
+        }, 200);
       }
     } catch {
       alert('Failed to delete item.');
@@ -239,7 +309,10 @@ document.getElementById('categories-container').addEventListener('click', async
         panel.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
         panel.style.opacity = '0';
         panel.style.transform = 'translateY(-10px)';
-        setTimeout(() => panel.remove(), 200);
+        setTimeout(() => {
+          panel.remove();
+          refreshCategoryMoveButtonStates();
+        }, 200);
       }
     } catch {
       alert('Failed to delete category.');
@@ -247,9 +320,64 @@ document.getElementById('categories-container').addEventListener('click', async
   }
 });
 
+// Sets the up/down move buttons' disabled state from each row's actual DOM
+// position, rather than tracking indices by hand — first row can't move up,
+// last can't move down, everything in between can do either. Call this
+// after any insert/remove/reorder in a category's tbody.
+function refreshMoveButtonStates(tbody) {
+  if (!tbody) return;
+  const rows = [...tbody.querySelectorAll('tr[data-item-id]')];
+  rows.forEach((row, index) => {
+    const upBtn = row.querySelector('.btn-move-item[data-direction="up"]');
+    const downBtn = row.querySelector('.btn-move-item[data-direction="down"]');
+    if (upBtn) upBtn.disabled = index === 0;
+    if (downBtn) downBtn.disabled = index === rows.length - 1;
+  });
+}
+
+// Same idea as refreshMoveButtonStates(), for category panels.
+function refreshCategoryMoveButtonStates() {
+  const panels = [...document.querySelectorAll('#categories-container .category-panel')];
+  panels.forEach((panel, index) => {
+    const upBtn = panel.querySelector('.btn-move-cat[data-direction="up"]');
+    const downBtn = panel.querySelector('.btn-move-cat[data-direction="down"]');
+    if (upBtn) upBtn.disabled = index === 0;
+    if (downBtn) downBtn.disabled = index === panels.length - 1;
+  });
+}
+
+function itemRowHtml(item, isAvail) {
+  return `
+    <td data-label="Status"><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td>
+    <td data-label="Item"><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></td>
+    <td class="font-mono item-price-cell" data-label="Price">${escapeHtml(item.price)}</td>
+    <td class="item-badge-cell" data-label="Tag">${item.badge ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
+    <td data-label="Actions"><div class="admin-table-actions">
+      <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move ${escapeHtml(item.name)} up">↑</button>
+      <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move ${escapeHtml(item.name)} down">↓</button>
+      <button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
+      <button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Mark Sold Out' : 'Mark Available'}</button>
+      <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
+    </div></td>
+  `;
+}
+
 function updateOrInsertItemRow(item, isNew) {
   const isAvail = parseInt(item.is_available, 10) === 1;
-  const existingRow = document.getElementById(`item-row-${item.id}`);
+  let existingRow = document.getElementById(`item-row-${item.id}`);
+
+  // An edit can reassign an item to a different category — when that
+  // happens the row needs to move tables, not just update in place, so
+  // detach it here and let it fall through to the insert path below.
+  if (existingRow && existingRow.closest('table')?.id !== `cat-table-${item.category_id}`) {
+    const oldTbody = existingRow.parentElement;
+    existingRow.remove();
+    existingRow = null;
+    refreshMoveButtonStates(oldTbody);
+    if (oldTbody && !oldTbody.querySelector('tr[data-item-id]')) {
+      oldTbody.innerHTML = '<tr class="no-items-row"><td colspan="5" class="muted">No items in this category yet.</td></tr>';
+    }
+  }
 
   if (existingRow) {
     // Update existing row
@@ -261,7 +389,6 @@ function updateOrInsertItemRow(item, isNew) {
     existingRow.querySelector('.item-name-cell').textContent = item.name;
     existingRow.querySelector('.item-desc-cell').textContent = item.description || '';
     existingRow.querySelector('.item-price-cell').textContent = item.price;
-    existingRow.querySelector('.item-sort-cell').textContent = item.sort_order || 0;
 
     const badgeCell = existingRow.querySelector('.item-badge-cell');
     badgeCell.innerHTML = item.badge
@@ -272,7 +399,8 @@ function updateOrInsertItemRow(item, isNew) {
     return;
   }
 
-  // Item was created or moved — insert into matching category table
+  // Item was created or moved to this category — it always joins at the
+  // end (see next_item_sort_order() server-side), so just append it.
   const catTable = document.getElementById(`cat-table-${item.category_id}`);
   if (!catTable) return;
 
@@ -283,21 +411,10 @@ function updateOrInsertItemRow(item, isNew) {
   tr.id = `item-row-${item.id}`;
   tr.dataset.itemId = item.id;
   tr.dataset.item = JSON.stringify(item);
-
+  tr.innerHTML = itemRowHtml(item, isAvail);
-  tr.innerHTML = `
-    <td><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td>
-    <td><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></td>
-    <td class="font-mono item-price-cell">${escapeHtml(item.price)}</td>
-    <td class="item-badge-cell">${item.badge ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
-    <td class="font-mono item-sort-cell">${item.sort_order || 0}</td>
-    <td><div class="admin-table-actions">
-      <button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
-      <button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Mark Sold Out' : 'Mark Available'}</button>
-      <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
-    </div></td>
-  `;
 
   tbody.appendChild(tr);
+  refreshMoveButtonStates(tbody);
 }
 
 // Static shell for a category panel. Only text-content positions use
@@ -314,6 +431,8 @@ function categoryPanelHtml(category) {
         <p class="muted cat-desc-text">${escapeHtml(category.description || '')}</p>
       </div>
       <div class="admin-table-actions">
+        <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="${category.id}" aria-label="Move category up">↑</button>
+        <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="${category.id}" aria-label="Move category down">↓</button>
         <button type="button" class="btn btn-outline btn-sm btn-edit-cat">Edit Category</button>
         <button type="button" class="btn btn-danger btn-sm btn-delete-cat">Delete Category</button>
       </div>
@@ -327,13 +446,12 @@ function categoryPanelHtml(category) {
             <th>Item</th>
             <th>Price</th>
             <th>Tag</th>
-            <th>Order</th>
             <th>Actions</th>
           </tr>
         </thead>
         <tbody class="items-tbody">
           <tr class="no-items-row">
-            <td colspan="6" class="muted">No items in this category yet.</td>
+            <td colspan="5" class="muted">No items in this category yet.</td>
           </tr>
         </tbody>
       </table>
@@ -353,7 +471,6 @@ function applyCategoryData(panel, category) {
   editBtn.dataset.id = category.id;
   editBtn.dataset.name = category.name;
   editBtn.dataset.desc = category.description || '';
-  editBtn.dataset.sort = category.sort_order || 0;
 
   panel.querySelector('.btn-delete-cat').dataset.id = category.id;
 }
@@ -401,4 +518,5 @@ function updateOrInsertCategoryPanel(category) {
   applyCategoryData(panel, category);
   syncCategoryOption(category);
   resortCategoryPanels();
+  refreshCategoryMoveButtonStates();
 }

admin/menu.php

@@ -42,7 +42,6 @@ function handle_save_item(array $post): array
     'price' => $price,
     'badge' => post_str($post, 'badge'),
     'is_available' => isset($post['is_available']) ? 1 : 0,
-    'sort_order' => (int) ($post['sort_order'] ?? 0),
   ], $itemId);
 
   return ['success' => true, 'item' => get_menu_item_by_id($savedId), 'is_new' => $itemId === null];
@@ -67,6 +66,20 @@ function handle_toggle_item(array $post): array
   ];
 }
 
+function handle_move_item(array $post): array
+{
+  $itemId = (int) ($post['item_id'] ?? 0);
+  $direction = post_str($post, 'direction');
+  if ($itemId <= 0 || !get_menu_item_by_id($itemId)) {
+    return ['success' => false, 'error' => 'Menu item not found.'];
+  }
+  if (!in_array($direction, ['up', 'down'], true)) {
+    return ['success' => false, 'error' => 'Invalid direction.'];
+  }
+
+  return move_menu_item($itemId, $direction);
+}
+
 function handle_delete_item(array $post): array
 {
   $itemId = (int) ($post['item_id'] ?? 0);
@@ -93,12 +106,25 @@ function handle_save_category(array $post): array
   $savedId = save_category([
     'name' => $name,
     'description' => post_str($post, 'description'),
-    'sort_order' => (int) ($post['sort_order'] ?? 0),
   ], $catId);
 
   return ['success' => true, 'category' => get_category_by_id($savedId), 'is_new' => $catId === null];
 }
 
+function handle_move_category(array $post): array
+{
+  $catId = (int) ($post['category_id'] ?? 0);
+  $direction = post_str($post, 'direction');
+  if ($catId <= 0 || !get_category_by_id($catId)) {
+    return ['success' => false, 'error' => 'Category not found.'];
+  }
+  if (!in_array($direction, ['up', 'down'], true)) {
+    return ['success' => false, 'error' => 'Invalid direction.'];
+  }
+
+  return move_category($catId, $direction);
+}
+
 function handle_delete_category(array $post): array
 {
   $catId = (int) ($post['category_id'] ?? 0);
@@ -115,8 +141,10 @@ function handle_menu_action(string $action, array $post): array
   return match ($action) {
     'save_item' => handle_save_item($post),
     'toggle_item' => handle_toggle_item($post),
+    'move_item' => handle_move_item($post),
     'delete_item' => handle_delete_item($post),
     'save_category' => handle_save_category($post),
+    'move_category' => handle_move_category($post),
     'delete_category' => handle_delete_category($post),
     default => ['success' => false, 'error' => 'Unknown action'],
   };
@@ -196,7 +224,8 @@ $menuGrouped = get_full_menu(false);
             </div>
           </div>
         <?php else: ?>
-          <?php foreach ($menuGrouped as $category): ?>
+          <?php $catCount = count($menuGrouped); ?>
+          <?php foreach ($menuGrouped as $catIndex => $category): ?>
             <div class="panel category-panel" id="cat-panel-<?= (int) $category['id'] ?>" data-cat-id="<?= (int) $category['id'] ?>" data-sort-order="<?= (int) $category['sort_order'] ?>">
               <div class="panel-head">
                 <div>
@@ -206,11 +235,12 @@ $menuGrouped = get_full_menu(false);
                   <p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p>
                 </div>
                 <div class="admin-table-actions">
+                  <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category up" <?= $catIndex === 0 ? 'disabled' : '' ?>>↑</button>
+                  <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category down" <?= $catIndex === $catCount - 1 ? 'disabled' : '' ?>>↓</button>
                   <button type="button" class="btn btn-outline btn-sm btn-edit-cat"
                     data-id="<?= (int) $category['id'] ?>"
                     data-name="<?= htmlspecialchars($category['name']) ?>"
-                    data-desc="<?= htmlspecialchars($category['description'] ?? '') ?>"
+                    data-desc="<?= htmlspecialchars($category['description'] ?? '') ?>">
-                    data-sort="<?= (int) $category['sort_order'] ?>">
                     Edit Category
                   </button>
                   <button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int) $category['id'] ?>">
@@ -227,46 +257,45 @@ $menuGrouped = get_full_menu(false);
                       <th>Item</th>
                       <th>Price</th>
                       <th>Tag</th>
-                      <th>Order</th>
                       <th>Actions</th>
                     </tr>
                   </thead>
                   <tbody class="items-tbody">
                     <?php if (empty($category['items'])): ?>
                       <tr class="no-items-row">
-                        <td colspan="6" class="muted">No items in this category yet.</td>
+                        <td colspan="5" class="muted">No items in this category yet.</td>
                       </tr>
                     <?php else: ?>
-                      <?php foreach ($category['items'] as $item): ?>
+                      <?php $itemCount = count($category['items']); ?>
+                      <?php foreach ($category['items'] as $itemIndex => $item): ?>
                         <tr id="item-row-<?= (int) $item['id'] ?>" data-item-id="<?= (int) $item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
-                          <td>
+                          <td data-label="Status">
                             <?php if ($item['is_available']): ?>
                               <span class="status-badge active">● Available</span>
                             <?php else: ?>
                               <span class="status-badge inactive">○ Sold Out / Hidden</span>
                             <?php endif; ?>
                           </td>
-                          <td>
+                          <td data-label="Item">
                             <strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
                             <div class="muted item-desc-cell">
                               <?= htmlspecialchars($item['description'] ?? '') ?>
                             </div>
                           </td>
-                          <td class="font-mono item-price-cell">
+                          <td class="font-mono item-price-cell" data-label="Price">
                             <?= htmlspecialchars($item['price']) ?>
                           </td>
-                          <td class="item-badge-cell">
+                          <td class="item-badge-cell" data-label="Tag">
                             <?php if (!empty($item['badge'])): ?>
                               <span class="eyebrow"><?= htmlspecialchars($item['badge']) ?></span>
                             <?php else: ?>
                               <span class="muted">—</span>
                             <?php endif; ?>
                           </td>
-                          <td class="font-mono item-sort-cell">
+                          <td data-label="Actions">
-                            <?= (int) $item['sort_order'] ?>
-                          </td>
-                          <td>
                             <div class="admin-table-actions">
+                              <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move <?= htmlspecialchars($item['name']) ?> up" <?= $itemIndex === 0 ? 'disabled' : '' ?>>↑</button>
+                              <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move <?= htmlspecialchars($item['name']) ?> down" <?= $itemIndex === $itemCount - 1 ? 'disabled' : '' ?>>↓</button>
                               <button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
                               <button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="<?= (int) $item['id'] ?>">
                                 <?= $item['is_available'] ? 'Mark Sold Out' : 'Mark Available' ?>
@@ -337,11 +366,6 @@ $menuGrouped = get_full_menu(false);
             <label for="item-field-desc">Description</label>
             <textarea id="item-field-desc" name="description" class="form-control" placeholder="Ingredients, preparation, flavor notes..."></textarea>
           </div>
-
-          <div class="form-group">
-            <label for="item-field-sort">Sort Order</label>
-            <input type="number" id="item-field-sort" name="sort_order" class="form-control" value="0">
-          </div>
         </div>
 
         <div class="form-actions">
@@ -374,11 +398,6 @@ $menuGrouped = get_full_menu(false);
             <label for="cat-field-desc">Description / Subtitle (Optional)</label>
             <input type="text" id="cat-field-desc" name="description" class="form-control" placeholder="e.g. Small bites and shareable plates.">
           </div>
-
-          <div class="form-group">
-            <label for="cat-field-sort">Sort Order</label>
-            <input type="number" id="cat-field-sort" name="sort_order" class="form-control" value="0">
-          </div>
         </div>
 
         <div class="form-actions">

admin/users.js

@@ -197,10 +197,10 @@ function insertUserRow(user) {
   // HTML string — escapeHtml() only escapes for text-content positions,
   // not attribute values, so it can't safely build an attribute string.
   tr.innerHTML = `
-    <td><strong>${escapeHtml(user.username)}</strong></td>
+    <td data-label="Username"><strong>${escapeHtml(user.username)}</strong></td>
-    <td>${escapeHtml(user.role.charAt(0).toUpperCase() + user.role.slice(1))}</td>
+    <td data-label="Role">${escapeHtml(user.role.charAt(0).toUpperCase() + user.role.slice(1))}</td>
-    <td class="font-mono item-sort-cell">${escapeHtml(user.created_at)}</td>
+    <td class="font-mono item-sort-cell" data-label="Created">${escapeHtml(user.created_at)}</td>
-    <td><div class="admin-table-actions">
+    <td data-label="Actions"><div class="admin-table-actions">
       <button type="button" class="btn btn-outline btn-sm btn-change-password" data-id="${user.id}">Change Password</button>
       <button type="button" class="btn btn-danger btn-sm btn-delete-user" data-id="${user.id}">Delete</button>
     </div></td>

admin/users.php

@@ -195,15 +195,15 @@ $users = get_all_users();
             <tbody id="users-tbody">
               <?php foreach ($users as $row): ?>
                 <tr id="user-row-<?= (int) $row['id'] ?>" data-user-id="<?= (int) $row['id'] ?>">
-                  <td>
+                  <td data-label="Username">
                     <strong><?= htmlspecialchars($row['username']) ?></strong>
                     <?php if ((int) $row['id'] === (int) $user['id']): ?>
                       <span class="muted"> (you)</span>
                     <?php endif; ?>
                   </td>
-                  <td><?= htmlspecialchars(ucfirst($row['role'])) ?></td>
+                  <td data-label="Role"><?= htmlspecialchars(ucfirst($row['role'])) ?></td>
-                  <td class="font-mono item-sort-cell"><?= htmlspecialchars($row['created_at']) ?></td>
+                  <td class="font-mono item-sort-cell" data-label="Created"><?= htmlspecialchars($row['created_at']) ?></td>
-                  <td>
+                  <td data-label="Actions">
                     <div class="admin-table-actions">
                       <button type="button" class="btn btn-outline btn-sm btn-change-password"
                         data-id="<?= (int) $row['id'] ?>"

inc/menu.php

@@ -62,23 +62,64 @@ function category_exists(int $id): bool {
     return (bool)$stmt->fetchColumn();
 }
 
+// Categories are manually reordered via move_category() rather than a typed
+// sort_order field, so a new one always joins at the end of the list.
+function next_category_sort_order(): int {
+    $pdo = get_db();
+    return (int) $pdo->query("SELECT COALESCE(MAX(sort_order), -1) + 1 FROM menu_categories")->fetchColumn();
+}
+
 function save_category(array $data, ?int $id = null): int {
     $pdo = get_db();
     $name = trim($data['name'] ?? '');
     $description = trim($data['description'] ?? '');
-    $sortOrder = (int)($data['sort_order'] ?? 0);
 
     if ($id && $id > 0) {
-        $stmt = $pdo->prepare("UPDATE menu_categories SET name = ?, description = ?, sort_order = ? WHERE id = ?");
+        $stmt = $pdo->prepare("UPDATE menu_categories SET name = ?, description = ? WHERE id = ?");
-        $stmt->execute([$name, $description, $sortOrder, $id]);
+        $stmt->execute([$name, $description, $id]);
         return $id;
     } else {
+        $sortOrder = next_category_sort_order();
         $stmt = $pdo->prepare("INSERT INTO menu_categories (name, description, sort_order) VALUES (?, ?, ?)");
         $stmt->execute([$name, $description, $sortOrder]);
         return (int)$pdo->lastInsertId();
     }
 }
 
+/**
+ * Swap a category with its previous/next neighbor (by current display
+ * order) and renumber every category's sort_order sequentially from 0.
+ * The renumbering is what keeps values unique and gap-free — it also
+ * self-heals any duplicate/stale sort_order left over from before this
+ * existed, since the new numbers come purely from display position.
+ */
+function move_category(int $id, string $direction): array {
+    $pdo = get_db();
+    $orderedIds = $pdo->query("SELECT id FROM menu_categories ORDER BY sort_order ASC, id ASC")
+        ->fetchAll(PDO::FETCH_COLUMN);
+
+    $index = array_search($id, $orderedIds, true);
+    if ($index === false) {
+        return ['success' => false, 'error' => 'Category not found.'];
+    }
+
+    $swapWith = $direction === 'up' ? $index - 1 : $index + 1;
+    if ($swapWith < 0 || $swapWith >= count($orderedIds)) {
+        return ['success' => false, 'error' => 'Category is already at the ' . ($direction === 'up' ? 'top' : 'bottom') . '.'];
+    }
+
+    [$orderedIds[$index], $orderedIds[$swapWith]] = [$orderedIds[$swapWith], $orderedIds[$index]];
+
+    $update = $pdo->prepare("UPDATE menu_categories SET sort_order = ? WHERE id = ?");
+    $pdo->beginTransaction();
+    foreach ($orderedIds as $position => $categoryId) {
+        $update->execute([$position, $categoryId]);
+    }
+    $pdo->commit();
+
+    return ['success' => true];
+}
+
 function delete_category(int $id): bool {
     $pdo = get_db();
     $stmt = $pdo->prepare("DELETE FROM menu_categories WHERE id = ?");
@@ -93,6 +134,15 @@ function get_menu_item_by_id(int $id): ?array {
     return $res ?: null;
 }
 
+// Items are manually reordered via move_menu_item() rather than a typed
+// sort_order field, so a new one always joins at the end of its category.
+function next_item_sort_order(int $categoryId): int {
+    $pdo = get_db();
+    $stmt = $pdo->prepare("SELECT COALESCE(MAX(sort_order), -1) + 1 FROM menu_items WHERE category_id = ?");
+    $stmt->execute([$categoryId]);
+    return (int) $stmt->fetchColumn();
+}
+
 function save_menu_item(array $data, ?int $id = null): int {
     $pdo = get_db();
     $categoryId = (int)($data['category_id'] ?? 0);
@@ -101,18 +151,27 @@ function save_menu_item(array $data, ?int $id = null): int {
     $price = trim($data['price'] ?? '');
     $badge = trim($data['badge'] ?? '');
     $isAvailable = !empty($data['is_available']) ? 1 : 0;
-    $sortOrder = (int)($data['sort_order'] ?? 0);
 
     if ($id && $id > 0) {
+        $existing = get_menu_item_by_id($id);
+        // Keep its existing position when the category is unchanged; if the
+        // item was reassigned to a different category, it joins at the end
+        // of that category rather than keeping a sort_order that was only
+        // ever meaningful among its old category's items.
+        $sortOrder = ($existing && (int) $existing['category_id'] === $categoryId)
+            ? (int) $existing['sort_order']
+            : next_item_sort_order($categoryId);
+
         $stmt = $pdo->prepare("
-            UPDATE menu_items SET 
+            UPDATE menu_items SET
-                category_id = ?, name = ?, description = ?, price = ?, 
+                category_id = ?, name = ?, description = ?, price = ?,
                 badge = ?, is_available = ?, sort_order = ?, updated_at = CURRENT_TIMESTAMP
             WHERE id = ?
         ");
         $stmt->execute([$categoryId, $name, $description, $price, $badge, $isAvailable, $sortOrder, $id]);
         return $id;
     } else {
+        $sortOrder = next_item_sort_order($categoryId);
         $stmt = $pdo->prepare("
             INSERT INTO menu_items (category_id, name, description, price, badge, is_available, sort_order)
             VALUES (?, ?, ?, ?, ?, ?, ?)
@@ -122,6 +181,45 @@ function save_menu_item(array $data, ?int $id = null): int {
     }
 }
 
+/**
+ * Swap a menu item with its previous/next neighbor within its own category
+ * (by current display order) and renumber that category's items
+ * sequentially from 0. See move_category() for why renumbering matters.
+ */
+function move_menu_item(int $id, string $direction): array {
+    $item = get_menu_item_by_id($id);
+    if (!$item) {
+        return ['success' => false, 'error' => 'Menu item not found.'];
+    }
+
+    $pdo = get_db();
+    $categoryId = (int) $item['category_id'];
+    $stmt = $pdo->prepare("SELECT id FROM menu_items WHERE category_id = ? ORDER BY sort_order ASC, id ASC");
+    $stmt->execute([$categoryId]);
+    $orderedIds = $stmt->fetchAll(PDO::FETCH_COLUMN);
+
+    $index = array_search($id, $orderedIds, true);
+    if ($index === false) {
+        return ['success' => false, 'error' => 'Menu item not found.'];
+    }
+
+    $swapWith = $direction === 'up' ? $index - 1 : $index + 1;
+    if ($swapWith < 0 || $swapWith >= count($orderedIds)) {
+        return ['success' => false, 'error' => 'Item is already at the ' . ($direction === 'up' ? 'top' : 'bottom') . '.'];
+    }
+
+    [$orderedIds[$index], $orderedIds[$swapWith]] = [$orderedIds[$swapWith], $orderedIds[$index]];
+
+    $update = $pdo->prepare("UPDATE menu_items SET sort_order = ? WHERE id = ?");
+    $pdo->beginTransaction();
+    foreach ($orderedIds as $position => $itemId) {
+        $update->execute([$position, $itemId]);
+    }
+    $pdo->commit();
+
+    return ['success' => true];
+}
+
 function toggle_menu_item_availability(int $id): bool {
     $pdo = get_db();
     $stmt = $pdo->prepare("UPDATE menu_items SET is_available = CASE WHEN is_available = 1 THEN 0 ELSE 1 END, updated_at = CURRENT_TIMESTAMP WHERE id = ?");

index.php

@@ -50,7 +50,18 @@ $siteUrl = rtrim(SITE_URL, '/');
         <img class="knot" src="./assets/knot.png" alt="">
         <span>THE OLD FITZ</span>
       </a>
-      <nav class="links" aria-label="Primary">
+      <button type="button" class="nav-toggle" id="nav-toggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="primary-nav">
+        <svg class="icon-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+        <svg class="icon-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+          <line x1="5" y1="5" x2="19" y2="19" />
+          <line x1="19" y1="5" x2="5" y2="19" />
+        </svg>
+      </button>
+      <nav class="links" id="primary-nav" aria-label="Primary">
         <a href="#about">About</a>
         <a href="#visit">Hours &amp; Visit</a>
         <a href="#music">Live Music</a>
@@ -286,22 +297,7 @@ $siteUrl = rtrim(SITE_URL, '/');
     </div>
   </footer>
 
-  <script>
+  <script src="main.js" defer></script>
-    (function() {
-      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-      var els = document.querySelectorAll('.reveal');
-      if (!('IntersectionObserver' in window)) { els.forEach(function(e) { e.classList.add('is-visible'); }); return; }
-      var io = new IntersectionObserver(function(entries) {
-        entries.forEach(function(entry) {
-          if (entry.isIntersecting) {
-            entry.target.classList.add('is-visible');
-            io.unobserve(entry.target);
-          }
-        });
-      }, { threshold: 0.15 });
-      els.forEach(function(e) { io.observe(e); });
-    })();
-  </script>
 </body>
 
 </html>

main.js

@@ -0,0 +1,66 @@
+// Shared public-site behavior: scroll-reveal animations and the mobile
+// nav toggle. Loaded by both index.php and menu.php.
+
+// Reveal-on-scroll
+(() => {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const els = document.querySelectorAll('.reveal');
+  if (!('IntersectionObserver' in window)) {
+    els.forEach((el) => el.classList.add('is-visible'));
+    return;
+  }
+
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-visible');
+        io.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.15 });
+
+  els.forEach((el) => io.observe(el));
+})();
+
+// Mobile nav toggle
+(() => {
+  const toggle = document.getElementById('nav-toggle');
+  const nav = document.getElementById('primary-nav');
+  if (!toggle || !nav) return;
+
+  function closeNav() {
+    nav.classList.remove('is-open');
+    toggle.setAttribute('aria-expanded', 'false');
+  }
+
+  function openNav() {
+    nav.classList.add('is-open');
+    toggle.setAttribute('aria-expanded', 'true');
+  }
+
+  toggle.addEventListener('click', () => {
+    if (nav.classList.contains('is-open')) {
+      closeNav();
+    } else {
+      openNav();
+    }
+  });
+
+  // Close after following a link
+  nav.querySelectorAll('a').forEach((link) => {
+    link.addEventListener('click', closeNav);
+  });
+
+  // Close on Escape
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeNav();
+  });
+
+  // Close on outside click
+  document.addEventListener('click', (e) => {
+    if (!nav.classList.contains('is-open')) return;
+    if (nav.contains(e.target) || toggle.contains(e.target)) return;
+    closeNav();
+  });
+})();

menu.php

@@ -49,11 +49,22 @@ $siteUrl = rtrim(SITE_URL, '/');
         <img class="knot" src="./assets/knot.png" alt="">
         <span>THE OLD FITZ</span>
       </a>
-      <nav class="links" aria-label="Primary">
+      <button type="button" class="nav-toggle" id="nav-toggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="primary-nav">
+        <svg class="icon-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+        <svg class="icon-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+          <line x1="5" y1="5" x2="19" y2="19" />
+          <line x1="19" y1="5" x2="5" y2="19" />
+        </svg>
+      </button>
+      <nav class="links" id="primary-nav" aria-label="Primary">
         <a href="./#about">About</a>
         <a href="./#visit">Hours &amp; Visit</a>
         <a href="./#music">Live Music</a>
-        <a href="menu.php" style="color: var(--gold-bright);">Menu</a>
+        <a href="menu.php" class="active">Menu</a>
         <a href="./#contact">Contact</a>
       </nav>
       <a class="nav-cta" href="https://www.google.com/maps/search/?api=1&amp;query=100+N+Washington+St+Marion+IN" target="_blank" rel="noopener">Get Directions</a>
@@ -197,6 +208,8 @@ $siteUrl = rtrim(SITE_URL, '/');
     </div>
   </footer>
 
+  <script src="main.js" defer></script>
+
 </body>
 
 </html>

styles.css

@@ -343,6 +343,10 @@
     color: var(--gold-bright);
   }
 
+  nav.links a.active {
+    color: var(--gold-bright);
+  }
+
   .nav-cta {
     display: inline-flex;
     align-items: center;
@@ -355,9 +359,67 @@
     letter-spacing: 0.06em;
   }
 
+  /* mobile nav toggle: hidden on desktop, shown only under the nav.links
+     breakpoint below. Icon swap is driven by the button's own
+     aria-expanded state rather than a second JS-toggled class. */
+  .nav-toggle {
+    display: none;
+    background: transparent;
+    border: none;
+    padding: 0.5rem;
+    margin: -0.5rem;
+    color: var(--ink);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nav-toggle svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .nav-toggle .icon-close {
+    display: none;
+  }
+
+  .nav-toggle[aria-expanded="true"] .icon-menu {
+    display: none;
+  }
+
+  .nav-toggle[aria-expanded="true"] .icon-close {
+    display: block;
+  }
+
   @media (max-width: 47.5em) {
+    .nav-toggle {
+      display: inline-flex;
+    }
+
+    .nav-cta {
+      display: none;
+    }
+
     nav.links {
       display: none;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+      background: var(--ground-2);
+      border-bottom: 1px solid var(--rule);
+      padding: 0.5rem 0;
+    }
+
+    nav.links.is-open {
+      display: flex;
+    }
+
+    nav.links a {
+      padding: 0.9rem 1.5rem;
     }
   }
 
@@ -470,6 +532,12 @@
     transform: translateY(-1px);
   }
 
+  .btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    transform: none;
+  }
+
   /* :where() keeps this native-button reset at zero specificity, so
      modifier classes like .btn-primary's background can actually win
      instead of losing to button.btn's higher (0,1,1) specificity */
@@ -1124,6 +1192,22 @@
     text-decoration: underline;
   }
 
+  @media (max-width: 47.5em) {
+    .admin-nav-inner {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.75rem;
+    }
+
+    /* two classes each, so these reliably outrank .admin-nav-links's and
+       .admin-user's own base-rule gap regardless of source order */
+    .admin-nav-inner .admin-nav-links,
+    .admin-nav-inner .admin-user {
+      flex-wrap: wrap;
+      gap: 0.5rem 1rem;
+    }
+  }
+
   .dashboard-layout {
     padding-block: 2.5rem 4rem;
   }
@@ -1155,8 +1239,10 @@
 
   .panel-head {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
+    gap: 0.75rem;
     margin-bottom: 1.5rem;
   }
 
@@ -1279,12 +1365,74 @@
     white-space: nowrap;
   }
 
+  /* Below ~760px a plain <table> forces long text (item descriptions,
+     headlines) into a column so narrow it wraps one word per line. Recast
+     each row as a labeled card instead — the label comes from the td's
+     data-label attribute, kept in sync with the <th> text in each admin
+     page (and its matching *.js row template, where rows are rebuilt
+     client-side). */
+  @media (max-width: 47.5em) {
+    .admin-table-wrap {
+      overflow-x: visible;
+    }
+
+    .admin-table thead {
+      display: none;
+    }
+
+    .admin-table,
+    .admin-table tbody,
+    .admin-table tr,
+    .admin-table td {
+      display: block;
+      width: 100%;
+    }
+
+    .admin-table tr {
+      border: 1px solid var(--rule);
+      border-radius: 0.25rem;
+      padding: 0.9rem 1rem;
+      margin-bottom: 0.85rem;
+    }
+
+    .admin-table tr:last-child {
+      margin-bottom: 0;
+    }
+
+    .admin-table td {
+      padding: 0.4rem 0;
+      border-bottom: none;
+    }
+
+    .admin-table td[data-label]::before {
+      content: attr(data-label);
+      display: block;
+      font-family: var(--font-mono);
+      font-size: 0.68rem;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--gold);
+      margin-bottom: 0.3rem;
+    }
+
+    .admin-table-actions {
+      flex-wrap: wrap;
+      white-space: normal;
+    }
+  }
+
   .btn-sm {
     padding: 0.4rem 0.8rem;
     font-size: 0.75rem;
     line-height: 1.2;
   }
 
+  /* Single-glyph reorder buttons (↑ / ↓) — narrower than .btn-sm's text
+     padding since there's no label to give it room to breathe. */
+  .btn-icon {
+    padding-inline: 0.55rem;
+  }
+
   .btn-danger {
     background: var(--danger-bg);
     border: 1px solid rgba(220, 80, 60, 0.5);
@@ -1539,6 +1687,7 @@
 
   .admin-toolbar {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.75rem;
     align-items: center;
     margin-bottom: 2rem;