Mobile responsive layout — bottom nav + table scroll

- Hide sidebar on mobile (≤640px), show fixed bottom nav bar instead
- Cards get overflow-x: auto so wide tables scroll horizontally
- Summary grid forces 2-column on mobile
- Reduce content padding to 12px, clear 68px for bottom nav
- Summary card values shrink to 18px on mobile

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

frontend/src/App.tsx

@@ -28,6 +28,8 @@ function Shell() {
 
   const hotelName = import.meta.env.VITE_HOTEL_NAME || 'Hotel'
 
+  const visibleNav = NAV.filter(n => !n.cap || can(user, n.cap))
+
   return (
     <div className="app-shell">
       <nav className="sidebar">
@@ -36,7 +38,7 @@ function Shell() {
           Wage Costs
         </div>
         <div className="sidebar-nav">
-          {NAV.filter(n => !n.cap || can(user, n.cap)).map(n => (
+          {visibleNav.map(n => (
             <div
               key={n.id}
               className={`nav-item${page === n.id ? ' active' : ''}`}
@@ -60,6 +62,19 @@ function Shell() {
         {page === 'budgets'        && <Budgets />}
         {page === 'settings'       && <SettingsPage />}
       </main>
+
+      <nav className="bottom-nav">
+        {visibleNav.map(n => (
+          <div
+            key={n.id}
+            className={`bottom-nav-item${page === n.id ? ' active' : ''}`}
+            onClick={() => setPage(n.id)}
+          >
+            <n.icon size={18} strokeWidth={1.75} />
+            <span>{n.label}</span>
+          </div>
+        ))}
+      </nav>
     </div>
   )
 }