feat: make all pages mobile-responsive

- Global CSS: touch targets (44px buttons), responsive table padding, .table-scroll utility, .mobile-overlay class
- Sidebar: mobile drawer with overlay backdrop, mobileOpen/onclose props, tap-to-close nav items
- Layout: mobileOpen state, toggleSidebar() with viewport detection, dual sidebar rendering (desktop wrapper + mobile drawer)
- Header: larger hamburger touch target (p-2.5), responsive padding
- Modal: larger close button touch target (p-2)
- POS: mobile cart FAB with item count + total, full-screen cart overlay, responsive product grid (2/3 cols)
- Captain: mobile cart FAB + overlay, responsive table/product grids, bigger cart buttons (w-8/w-9), responsive modals (max-w-[480px]/[400px])
- Tables: responsive stat grid (2/4 cols), responsive table grid (2-8 cols across breakpoints)
- KDS: stacked columns on mobile (grid-cols-1 md:grid-cols-3), flex-wrap filter bar, independent scroll per column on desktop
- Reports: all 10 tables in table-scroll wrappers, flex-wrap date range, responsive stat grids
- Admin: dual sidebar (mobile horizontal tabs + desktop sidebar), table-scroll on users table, responsive form grids
- Dashboard: overflow-x-auto on hourly chart

frontend/src/app.css

@@ -40,7 +40,7 @@
 
 @layer components {
 	.btn {
-		@apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed;
+		@apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed min-h-[44px];
 	}
 
 	.btn-primary {
@@ -68,7 +68,7 @@
 	}
 
 	.btn-sm {
-		@apply px-3 py-1.5 text-xs;
+		@apply px-3 py-2 text-xs min-h-[36px];
 	}
 
 	.btn-lg {
@@ -116,11 +116,11 @@
 	}
 
 	.table-pos th {
-		@apply px-4 py-3 font-medium;
+		@apply px-3 py-3 font-medium lg:px-4;
 	}
 
 	.table-pos td {
-		@apply px-4 py-3 border-b border-gray-100;
+		@apply px-3 py-3 border-b border-gray-100 lg:px-4;
 	}
 
 	.table-pos tbody tr {
@@ -132,7 +132,7 @@
 	}
 
 	.stat-value {
-		@apply text-2xl font-bold;
+		@apply text-xl font-bold lg:text-2xl;
 	}
 
 	.stat-label {
@@ -178,4 +178,15 @@
 	.table-cell.cleaning {
 		@apply bg-gray-50 border-2 border-gray-300 hover:border-gray-500 text-gray-500;
 	}
+
+	/* Mobile-friendly scrollable table wrapper */
+	.table-scroll {
+		@apply overflow-x-auto -mx-4 px-4;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	/* Mobile overlay backdrop */
+	.mobile-overlay {
+		@apply fixed inset-0 bg-black/40 z-40 lg:hidden;
+	}
 }

frontend/src/lib/components/Header.svelte

@@ -21,18 +21,18 @@
 	});
 </script>
 
-<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 sticky top-0 z-30">
-	<div class="flex items-center gap-3">
+<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-3 lg:px-4 sticky top-0 z-30">
+	<div class="flex items-center gap-2">
 		<button
 			onclick={oncollapse}
-			class="text-gray-500 hover:text-gray-800 transition-colors p-1.5 rounded-lg hover:bg-gray-100"
+			class="text-gray-500 hover:text-gray-800 transition-colors p-2.5 rounded-lg hover:bg-gray-100 -ml-1"
 		>
 			<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
 			</svg>
 		</button>
 		{#if title}
-			<h1 class="text-lg font-semibold text-gray-800">{title}</h1>
+			<h1 class="text-lg font-semibold text-gray-800 truncate">{title}</h1>
 		{/if}
 	</div>
 

frontend/src/lib/components/Modal.svelte

@@ -39,10 +39,10 @@
 			{#if title}
 				<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
 					<h2 class="text-lg font-semibold text-gray-800">{title}</h2>
-					<button
-						onclick={onclose}
-						class="text-gray-400 hover:text-gray-700 transition-colors p-1 rounded-lg hover:bg-gray-100"
-					>
+				<button
+					onclick={onclose}
+					class="text-gray-400 hover:text-gray-700 transition-colors p-2 rounded-lg hover:bg-gray-100"
+				>
 						<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 						</svg>

frontend/src/lib/components/Sidebar.svelte

@@ -3,7 +3,7 @@
 	import { authStore, currentUser, userRole } from '$stores/auth.js';
 	import { hasRole } from '$utils/helpers.js';
 
-	let { collapsed = false } = $props();
+	let { collapsed = false, mobileOpen = false, onclose = () => {} } = $props();
 	let user = null;
 	let role = '';
 
@@ -30,19 +30,42 @@
 			return item.roles.some((r) => r === role);
 		});
 	}
+
+	function handleNavClick() {
+		// Close drawer on mobile after navigation
+		if (mobileOpen) onclose();
+	}
 </script>
 
+<!-- Mobile backdrop overlay -->
+{#if mobileOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="mobile-overlay" onclick={onclose}></div>
+{/if}
+
 <aside
-	class="h-screen bg-white border-r border-gray-200 flex flex-col transition-all duration-300 {collapsed ? 'w-16' : 'w-56'}"
+	class="h-screen bg-white border-r border-gray-200 flex flex-col transition-all duration-300 flex-shrink-0
+		{collapsed ? 'w-16' : 'w-56'}
+		max-lg:fixed max-lg:inset-y-0 max-lg:left-0 max-lg:z-50 max-lg:w-64 max-lg:shadow-xl
+		{mobileOpen ? 'max-lg:translate-x-0' : 'max-lg:-translate-x-full'}
+	"
 >
 	<!-- Logo -->
 	<div class="px-4 py-5 border-b border-gray-200 flex items-center gap-3">
 		<div class="w-8 h-8 rounded-lg bg-pos-highlight flex items-center justify-center flex-shrink-0">
 			<span class="text-white font-bold text-sm">H</span>
 		</div>
-		{#if !collapsed}
-			<span class="font-bold text-base text-gray-800 truncate">HSS POS</span>
-		{/if}
+		<span class="font-bold text-base text-gray-800 truncate lg:{collapsed ? 'hidden' : 'block'}">HSS POS</span>
+		<!-- Mobile close button -->
+		<button
+			class="ml-auto p-2 rounded-lg hover:bg-gray-100 text-gray-400 lg:hidden"
+			onclick={onclose}
+		>
+			<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</button>
 	</div>
 
 	<!-- Navigation -->
@@ -53,16 +76,15 @@
 			{:else}
 				<a
 					href={item.href}
-					class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors mb-0.5
+					class="flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors mb-0.5
 						{currentPath.startsWith(item.href) ? 'bg-red-50 text-pos-highlight font-medium' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}"
 					title={collapsed ? item.label : ''}
+					onclick={handleNavClick}
 				>
 					<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
 						<path stroke-linecap="round" stroke-linejoin="round" d={item.icon} />
 					</svg>
-					{#if !collapsed}
-						<span class="truncate">{item.label}</span>
-					{/if}
+					<span class="truncate max-lg:block {collapsed ? 'lg:hidden' : ''}">{item.label}</span>
 				</a>
 			{/if}
 		{/each}
@@ -70,35 +92,23 @@
 
 	<!-- User info -->
 	<div class="border-t border-gray-200 p-3">
-		{#if !collapsed}
-			<div class="flex items-center gap-3">
-				<div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
-					<span class="text-xs font-medium text-gray-600">{user?.full_name?.[0] || '?'}</span>
-				</div>
-				<div class="flex-1 min-w-0">
-					<p class="text-sm font-medium text-gray-800 truncate">{user?.full_name || 'User'}</p>
-					<p class="text-xs text-gray-500 capitalize">{role}</p>
-				</div>
-				<button
-					onclick={() => authStore.logout()}
-					class="text-gray-400 hover:text-pos-danger transition-colors"
-					title="Logout"
-				>
-					<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-					</svg>
-				</button>
+		<div class="flex items-center gap-3">
+			<div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0">
+				<span class="text-xs font-medium text-gray-600">{user?.full_name?.[0] || '?'}</span>
+			</div>
+			<div class="flex-1 min-w-0 max-lg:block {collapsed ? 'lg:hidden' : ''}">
+				<p class="text-sm font-medium text-gray-800 truncate">{user?.full_name || 'User'}</p>
+				<p class="text-xs text-gray-500 capitalize">{role}</p>
 			</div>
-		{:else}
 			<button
 				onclick={() => authStore.logout()}
-				class="w-full flex justify-center text-gray-400 hover:text-pos-danger transition-colors"
+				class="p-2 text-gray-400 hover:text-pos-danger transition-colors rounded-lg hover:bg-gray-100 flex-shrink-0"
 				title="Logout"
 			>
 				<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
 				</svg>
 			</button>
-		{/if}
+		</div>
 	</div>
 </aside>

frontend/src/routes/(app)/+layout.svelte

@@ -8,6 +8,7 @@
 
 	let { children } = $props();
 	let collapsed = $state(false);
+	let mobileOpen = $state(false);
 	let ready = $state(false);
 
 	onMount(() => {
@@ -39,15 +40,33 @@
 			wsStore.disconnect();
 		};
 	});
+
+	function toggleSidebar() {
+		// On mobile (< lg), toggle the mobile drawer
+		// On desktop (>= lg), toggle collapsed state
+		if (window.innerWidth < 1024) {
+			mobileOpen = !mobileOpen;
+		} else {
+			collapsed = !collapsed;
+		}
+	}
 </script>
 
 {#if ready}
 	<div class="flex h-screen overflow-hidden">
-		<Sidebar {collapsed} />
-		<div class="flex-1 flex flex-col overflow-hidden">
-			<Header
-				oncollapse={() => (collapsed = !collapsed)}
-			/>
+		<!-- Desktop: inline sidebar. Mobile: drawer overlay (handled inside Sidebar) -->
+		<div class="hidden lg:block flex-shrink-0">
+			<Sidebar {collapsed} />
+		</div>
+		<!-- Mobile sidebar drawer -->
+		<Sidebar
+			{collapsed}
+			{mobileOpen}
+			onclose={() => (mobileOpen = false)}
+		/>
+
+		<div class="flex-1 flex flex-col overflow-hidden min-w-0">
+			<Header oncollapse={toggleSidebar} />
 			<main class="flex-1 overflow-auto bg-pos-bg">
 				{@render children?.()}
 			</main>

frontend/src/routes/(app)/admin/+page.svelte

@@ -132,9 +132,23 @@
 
 <svelte:head><title>Settings - HSS POS</title></svelte:head>
 
-<div class="flex h-full">
-	<!-- Settings sidebar -->
-	<div class="w-48 bg-white border-r border-gray-200 py-4">
+<div class="flex flex-col lg:flex-row h-full">
+	<!-- Mobile tab bar -->
+	<div class="lg:hidden flex gap-2 px-3 py-2.5 border-b border-gray-200 overflow-x-auto flex-shrink-0 scrollbar-hide">
+		{#each [
+			{ id: 'users', label: 'Users & Roles' },
+			{ id: 'profile', label: 'My Profile' },
+			{ id: 'restaurant', label: 'Restaurant Info' },
+		] as tab}
+			<button
+				class="px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap transition-colors {activeTab === tab.id ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
+				onclick={() => (activeTab = tab.id)}
+			>{tab.label}</button>
+		{/each}
+	</div>
+
+	<!-- Desktop sidebar -->
+	<div class="hidden lg:block w-48 bg-white border-r border-gray-200 py-4 flex-shrink-0">
 		<nav class="space-y-1 px-2">
 			{#each [
 				{ id: 'users', label: 'Users & Roles' },
@@ -160,6 +174,7 @@
 			{#if loading}
 				<Spinner loading={true} />
 			{:else}
+				<div class="table-scroll">
 				<table class="table-pos">
 					<thead>
 						<tr><th>Name</th><th>Username</th><th>Role</th><th>PIN</th><th>Phone</th><th>Actions</th></tr>
@@ -184,6 +199,7 @@
 						{/each}
 					</tbody>
 				</table>
+			</div>
 			{/if}
 
 		{:else if activeTab === 'profile'}
@@ -216,7 +232,7 @@
 <!-- User Modal -->
 <Modal show={showUserModal} title={editingUser ? 'Edit User' : 'Add User'} onclose={() => (showUserModal = false)} size="md">
 	<form onsubmit={(e) => { e.preventDefault(); saveUser(); }} class="space-y-4">
-		<div class="grid grid-cols-2 gap-4">
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 			<div>
 				<label class="label">Full Name</label>
 				<input class="input" bind:value={userForm.full_name} placeholder="John Doe" required />
@@ -226,7 +242,7 @@
 				<input class="input" bind:value={userForm.username} placeholder="johndoe" required />
 			</div>
 		</div>
-		<div class="grid grid-cols-2 gap-4">
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 			<div>
 				<label class="label">{editingUser ? 'New Password (leave blank to keep)' : 'Password'}</label>
 				<input type="password" class="input" bind:value={userForm.password} placeholder="Min 6 chars" />
@@ -245,7 +261,7 @@
 				{/each}
 			</select>
 		</div>
-		<div class="grid grid-cols-2 gap-4">
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 			<div>
 				<label class="label">Phone</label>
 				<input class="input" bind:value={userForm.phone} placeholder="9876543210" />

frontend/src/routes/(app)/captain/+page.svelte

@@ -33,6 +33,7 @@
 	cartItems.subscribe((v) => (items = v));
 	cartTotal.subscribe((v) => (total = v));
 	let submitting = $state(false);
+	let mobileCartOpen = $state(false);
 
 	// ── Bill / Payment ──
 	let showPaymentModal = $state(false);
@@ -330,7 +331,7 @@
 	<div class="px-4 py-3 border-b border-gray-200 flex items-center gap-3">
 		{#if view !== 'tables'}
 			<button
-				class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-800 transition-colors"
+				class="p-2.5 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-800 transition-colors"
 				onclick={() => {
 					if (view === 'menu' && selectedTable?.status === 'occupied') backToTableDetail();
 					else if (view === 'menu') backToTables();
@@ -373,15 +374,15 @@
 	<!-- ═══════════════════════════════════════════════════════ -->
 	{:else if view === 'tables'}
 		<div class="flex-1 overflow-y-auto p-4">
-			<div class="flex items-center justify-between mb-4">
+			<div class="flex flex-wrap items-center justify-between gap-2 mb-4">
 				<h2 class="text-lg font-semibold text-gray-800">Select a Table</h2>
-				<div class="flex gap-3 text-xs text-gray-600">
+				<div class="flex flex-wrap gap-2 sm:gap-3 text-xs text-gray-600">
 					<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-green-100 border border-green-400"></span> Available</span>
 					<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-orange-100 border border-orange-400"></span> Occupied</span>
 					<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-amber-100 border border-amber-400"></span> Cleaning</span>
 				</div>
 			</div>
-			<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+			<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
 				{#each tableList as table}
 					{@const info = activeOrdersMap[table.id]}
 					<button
@@ -470,7 +471,7 @@
 										</span>
 										<span class="text-sm font-medium w-20 text-right text-gray-700">{formatCurrency(item.total_price)}</span>
 										<button
-											class="p-1 rounded-lg hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors"
+											class="p-2 rounded-lg hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors"
 											title="Remove item"
 											onclick={() => promptCancelItem(item._order, item)}
 										>
@@ -529,18 +530,18 @@
 				</div>
 				<div class="flex gap-2 px-3 py-2 overflow-x-auto border-b border-gray-200 scrollbar-hide">
 					<button
-						class="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap {selectedCategory === 'all' ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
+						class="px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap {selectedCategory === 'all' ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
 						onclick={() => (selectedCategory = 'all')}
 					>All</button>
 					{#each menuData as cat}
 						<button
-							class="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap {selectedCategory === cat.name ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
+							class="px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap {selectedCategory === cat.name ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
 							onclick={() => (selectedCategory = cat.name)}
 						>{cat.name}</button>
 					{/each}
 				</div>
 				<div class="flex-1 overflow-y-auto p-3">
-					<div class="grid grid-cols-3 xl:grid-cols-4 gap-2">
+					<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2">
 						{#each filteredProducts() as p}
 							<button class="menu-item-card text-left" onclick={() => cartStore.addItem(p)}>
 								<div class="flex items-center gap-1.5 mb-1">
@@ -556,8 +557,8 @@
 				</div>
 			</div>
 
-			<!-- Right: mini cart -->
-			<div class="w-72 bg-white border-l border-gray-200 flex flex-col">
+			<!-- Right: mini cart (desktop only) -->
+			<div class="hidden lg:flex w-72 bg-white border-l border-gray-200 flex-col">
 				<div class="px-4 py-3 border-b border-gray-200 font-semibold text-sm text-gray-800">
 					{#if tableOrders.length > 0}
 						Adding to {selectedTable?.name}
@@ -571,9 +572,9 @@
 							<div class="flex-1 min-w-0">
 								<p class="truncate text-gray-800">{item.name}</p>
 								<div class="flex items-center gap-1 mt-1">
-									<button class="w-6 h-6 rounded bg-gray-50 border border-gray-200 text-xs text-gray-600 hover:border-gray-300" onclick={() => cartStore.updateQuantity(item.cartId, item.quantity - 1)}>-</button>
-									<span class="w-6 text-center text-xs text-gray-700">{item.quantity}</span>
-									<button class="w-6 h-6 rounded bg-gray-50 border border-gray-200 text-xs text-gray-600 hover:border-gray-300" onclick={() => cartStore.updateQuantity(item.cartId, item.quantity + 1)}>+</button>
+									<button class="w-8 h-8 rounded bg-gray-50 border border-gray-200 text-sm text-gray-600 hover:border-gray-300 flex items-center justify-center" onclick={() => cartStore.updateQuantity(item.cartId, item.quantity - 1)}>-</button>
+									<span class="w-8 text-center text-xs text-gray-700">{item.quantity}</span>
+									<button class="w-8 h-8 rounded bg-gray-50 border border-gray-200 text-sm text-gray-600 hover:border-gray-300 flex items-center justify-center" onclick={() => cartStore.updateQuantity(item.cartId, item.quantity + 1)}>+</button>
 								</div>
 							</div>
 							<span class="font-medium text-gray-700">{formatCurrency(item.price * item.quantity)}</span>
@@ -607,6 +608,75 @@
 	{/if}
 </div>
 
+<!-- Mobile cart FAB (captain menu view) -->
+{#if view === 'menu' && items.length > 0 && !mobileCartOpen}
+	<button
+		class="fixed bottom-6 right-6 z-30 lg:hidden bg-green-600 text-white rounded-2xl shadow-lg px-5 py-3.5 flex items-center gap-3 active:scale-95 transition-transform"
+		onclick={() => (mobileCartOpen = true)}
+	>
+		<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z" /></svg>
+		<span class="font-bold">{items.length} item{items.length !== 1 ? 's' : ''}</span>
+		<span class="text-white/80">|</span>
+		<span class="font-bold">{formatCurrency(total)}</span>
+	</button>
+{/if}
+
+<!-- Mobile cart overlay (captain) -->
+{#if mobileCartOpen}
+	<div class="fixed inset-0 z-40 lg:hidden flex flex-col bg-white">
+		<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+			<h3 class="font-bold text-gray-800">
+				{#if tableOrders.length > 0}
+					Adding to {selectedTable?.name}
+				{:else}
+					New order for {selectedTable?.name}
+				{/if}
+			</h3>
+			<button class="p-2 rounded-lg hover:bg-gray-100" onclick={() => (mobileCartOpen = false)}>
+				<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+			</button>
+		</div>
+		<div class="flex-1 overflow-y-auto">
+			{#each items as item (item.cartId)}
+				<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+					<div class="flex-1 min-w-0">
+						<p class="font-medium text-gray-800">{item.name}</p>
+						<p class="text-sm text-gray-500">{formatCurrency(item.price)} each</p>
+						<div class="flex items-center gap-2 mt-2">
+							<button class="w-9 h-9 rounded-lg bg-gray-100 border border-gray-200 text-sm font-medium text-gray-600 flex items-center justify-center" onclick={() => cartStore.updateQuantity(item.cartId, item.quantity - 1)}>-</button>
+							<span class="w-8 text-center font-medium text-gray-700">{item.quantity}</span>
+							<button class="w-9 h-9 rounded-lg bg-gray-100 border border-gray-200 text-sm font-medium text-gray-600 flex items-center justify-center" onclick={() => cartStore.updateQuantity(item.cartId, item.quantity + 1)}>+</button>
+						</div>
+					</div>
+					<span class="font-bold text-gray-800 ml-3">{formatCurrency(item.price * item.quantity)}</span>
+				</div>
+			{/each}
+			{#if items.length === 0}
+				<div class="text-center py-12 text-gray-400">No items added yet</div>
+			{/if}
+		</div>
+		{#if items.length > 0}
+			<div class="px-4 py-4 border-t border-gray-200 bg-white">
+				<div class="flex justify-between font-bold text-lg mb-3">
+					<span class="text-gray-800">Total</span>
+					<span class="text-pos-highlight">{formatCurrency(total)}</span>
+				</div>
+				<button
+					class="btn-success w-full py-3.5 flex items-center justify-center gap-2 text-base"
+					onclick={() => { mobileCartOpen = false; sendToKitchen(); }}
+					disabled={submitting}
+				>
+					{#if submitting}
+						<div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+					{/if}
+					<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+					Send to Kitchen
+				</button>
+			</div>
+		{/if}
+	</div>
+{/if}
+
 <!-- ═══════════════════════════════════════════════════════ -->
 <!-- PAYMENT MODAL (combined table bill)                   -->
 <!-- ═══════════════════════════════════════════════════════ -->
@@ -615,14 +685,14 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
 		onclick={(e) => { if (e.target === e.currentTarget) showPaymentModal = false; }}>
-		<div class="bg-white rounded-2xl w-[480px] max-h-[90vh] overflow-y-auto border border-gray-200 shadow-xl animate-in">
+		<div class="bg-white rounded-2xl w-full max-w-[480px] max-h-[90vh] overflow-y-auto border border-gray-200 shadow-xl animate-in">
 			<!-- Header -->
 			<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
 				<div>
 					<h3 class="text-lg font-bold text-gray-800">Generate Bill</h3>
 					<p class="text-sm text-gray-500">{selectedTable?.name} - {allActiveItems().length} item{allActiveItems().length !== 1 ? 's' : ''}</p>
 				</div>
-				<button class="p-1.5 rounded-lg hover:bg-gray-100" onclick={() => { showPaymentModal = false; }}>
+				<button class="p-2 rounded-lg hover:bg-gray-100" onclick={() => { showPaymentModal = false; }}>
 					<svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
 				</button>
 			</div>
@@ -738,7 +808,7 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
 		onclick={(e) => { if (e.target === e.currentTarget) { showCancelDialog = false; cancellingItem = null; } }}>
-		<div class="bg-white rounded-2xl w-[400px] border border-gray-200 shadow-xl animate-in">
+		<div class="bg-white rounded-2xl w-full max-w-[400px] border border-gray-200 shadow-xl animate-in">
 			<div class="px-6 py-4 border-b border-gray-200">
 				<h3 class="text-lg font-bold text-red-500">Remove Item</h3>
 				<p class="text-sm text-gray-500 mt-1">

frontend/src/routes/(app)/dashboard/+page.svelte

@@ -109,7 +109,7 @@
 		{#if dashboard.hourly_sales?.length}
 			<div class="card p-4">
 				<h3 class="font-semibold text-sm text-gray-800 mb-3">Hourly Sales (Today)</h3>
-				<div class="flex items-end gap-1 h-32">
+				<div class="flex items-end gap-1 h-32 overflow-x-auto min-w-0">
 					{#each dashboard.hourly_sales as hour}
 						{@const maxVal = Math.max(...dashboard.hourly_sales.map(h => h.sales || 0), 1)}
 						<div class="flex-1 flex flex-col items-center gap-1">

frontend/src/routes/(app)/kds/+page.svelte

@@ -103,8 +103,8 @@
 
 <div class="flex flex-col h-full">
 	<!-- Station filter + Stats -->
-	<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
-		<div class="flex gap-2 overflow-x-auto">
+	<div class="px-4 py-3 border-b border-gray-200 flex flex-wrap items-center justify-between gap-2">
+		<div class="flex gap-2 overflow-x-auto flex-shrink-0">
 			{#each stations as station}
 				<button
 					class="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors {selectedStation === station ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
@@ -116,7 +116,7 @@
 		</div>
 
 		{#if stats}
-			<div class="flex gap-4 text-xs">
+			<div class="flex gap-3 sm:gap-4 text-xs flex-shrink-0">
 				<span class="text-pos-warning font-medium">Pending: {stats.pending || 0}</span>
 				<span class="text-pos-info font-medium">Preparing: {stats.preparing || 0}</span>
 				<span class="text-pos-success font-medium">Ready: {stats.ready || 0}</span>
@@ -128,9 +128,9 @@
 	{#if loading}
 		<Spinner loading={true} text="Loading kitchen orders..." />
 	{:else}
-		<div class="flex-1 grid grid-cols-3 gap-0 overflow-hidden">
+		<div class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-0 overflow-y-auto md:overflow-hidden">
 			{#each statusOrder as status}
-				<div class="flex flex-col border-r border-gray-200 last:border-r-0 overflow-hidden">
+				<div class="flex flex-col border-b md:border-b-0 md:border-r border-gray-200 last:border-b-0 md:last:border-r-0 md:overflow-hidden">
 					<!-- Column header -->
 					<div class="px-4 py-2 border-b border-gray-200 flex items-center justify-between {
 						status === 'pending' ? 'bg-amber-50' : 
@@ -151,7 +151,7 @@
 					</div>
 
 					<!-- KOT Cards -->
-					<div class="flex-1 overflow-y-auto p-3 space-y-3">
+					<div class="p-3 space-y-3 md:flex-1 md:overflow-y-auto">
 						{#each kotsByStatus(status) as kot}
 							<div class="kot-card {status}">
 								<!-- KOT Header -->

frontend/src/routes/(app)/pos/+page.svelte

@@ -59,6 +59,9 @@
 	// Confirm clear
 	let showClearConfirm = $state(false);
 
+	// Mobile cart visibility
+	let mobileCartOpen = $state(false);
+
 	// ── Load menu ──
 	onMount(async () => {
 		try {
@@ -99,6 +102,7 @@
 			return;
 		}
 		showPayment = true;
+		mobileCartOpen = false;
 	}
 
 	// ── Process payment ──
@@ -179,6 +183,7 @@
 		if (items.length === 0) return;
 		heldOrders = [...heldOrders, { ...cart, items: [...items], heldAt: new Date() }];
 		cartStore.clear();
+		mobileCartOpen = false;
 		toasts.info('Order held');
 	}
 
@@ -204,7 +209,7 @@
 		if (e.key === 'F2') { showPayment = true; }
 		if (e.key === 'F3') { holdOrder(); }
 		if (e.key === 'F4') { showDiscount = true; }
-		if (e.key === 'Escape') { showPayment = false; showDiscount = false; showCustomer = false; }
+		if (e.key === 'Escape') { showPayment = false; showDiscount = false; showCustomer = false; mobileCartOpen = false; }
 	}
 
 	const orderTypes = [
@@ -220,42 +225,44 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="flex h-full">
+<div class="flex h-full relative">
 	<!-- LEFT: Menu Grid -->
 	<div class="flex-1 flex flex-col overflow-hidden">
 		<!-- Top bar: search + category filter -->
-		<div class="p-3 border-b border-gray-200 flex gap-3 items-center">
+		<div class="p-3 border-b border-gray-200 flex gap-2 lg:gap-3 items-center flex-wrap">
 			<!-- Order Type Badge -->
-			<button
-				class="btn-ghost btn-sm capitalize"
-				onclick={() => (showOrderType = !showOrderType)}
-			>
-				{cart.orderType?.replace('_', ' ') || 'Dine In'}
-				<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
-			</button>
+			<div class="relative">
+				<button
+					class="btn-ghost btn-sm capitalize"
+					onclick={() => (showOrderType = !showOrderType)}
+				>
+					{cart.orderType?.replace('_', ' ') || 'Dine In'}
+					<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+				</button>
 
-			{#if showOrderType}
-				<div class="absolute top-24 left-16 z-20 card p-2 shadow-xl">
-					{#each orderTypes as ot}
-						<button
-							class="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-gray-100 transition-colors {cart.orderType === ot.value ? 'text-pos-highlight font-medium' : 'text-gray-600'}"
-							onclick={() => { cartStore.setOrderType(ot.value); showOrderType = false; }}
-						>
-							{ot.label}
-						</button>
-					{/each}
-				</div>
-			{/if}
+				{#if showOrderType}
+					<div class="absolute top-full left-0 mt-1 z-20 card p-2 shadow-xl min-w-[140px]">
+						{#each orderTypes as ot}
+							<button
+								class="w-full text-left px-3 py-2 rounded-lg text-sm hover:bg-gray-100 transition-colors {cart.orderType === ot.value ? 'text-pos-highlight font-medium' : 'text-gray-600'}"
+								onclick={() => { cartStore.setOrderType(ot.value); showOrderType = false; }}
+							>
+								{ot.label}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
 
 			<!-- Search -->
-			<div class="flex-1 relative">
+			<div class="flex-1 relative min-w-[120px]">
 				<svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
 				</svg>
 				<input
 					type="text"
 					class="input pl-10"
-					placeholder="Search items... (type to filter)"
+					placeholder="Search items..."
 					bind:value={searchQuery}
 				/>
 			</div>
@@ -265,21 +272,21 @@
 				<span class="badge-info">{cart.tableName}</span>
 			{/if}
 			{#if cart.customerName}
-				<span class="badge-success">{cart.customerName}</span>
+				<span class="badge-success hidden sm:inline-flex">{cart.customerName}</span>
 			{/if}
 		</div>
 
 		<!-- Category tabs -->
 		<div class="flex gap-2 px-3 py-2 overflow-x-auto border-b border-gray-200 flex-shrink-0">
 			<button
-				class="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors {selectedCategory === 'all' ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
+				class="px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap transition-colors {selectedCategory === 'all' ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
 				onclick={() => (selectedCategory = 'all')}
 			>
 				All Items
 			</button>
 			{#each menuData as cat}
 				<button
-					class="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors {selectedCategory === cat.name ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
+					class="px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap transition-colors {selectedCategory === cat.name ? 'bg-pos-highlight text-white' : 'bg-white text-gray-500 hover:text-gray-800 border border-gray-200'}"
 					onclick={() => (selectedCategory = cat.name)}
 				>
 					{cat.name}
@@ -293,7 +300,7 @@
 			{#if loading}
 				<Spinner loading={true} text="Loading menu..." />
 			{:else}
-				<div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
+				<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
 					{#each filteredProducts() as product}
 						<button
 							class="menu-item-card text-left"
@@ -324,8 +331,8 @@
 			{/if}
 		</div>
 
-		<!-- Bottom shortcuts -->
-		<div class="flex gap-2 px-3 py-2 border-t border-gray-200 text-xs text-gray-400">
+		<!-- Bottom shortcuts (desktop only) -->
+		<div class="hidden lg:flex gap-2 px-3 py-2 border-t border-gray-200 text-xs text-gray-400">
 			<span>F2: Pay</span>
 			<span>F3: Hold</span>
 			<span>F4: Discount</span>
@@ -335,10 +342,19 @@
 				</button>
 			{/if}
 		</div>
+
+		<!-- Mobile held orders bar -->
+		{#if heldOrders.length > 0}
+			<div class="lg:hidden px-3 py-2 border-t border-gray-200">
+				<button class="badge-warning w-full text-center py-2" onclick={() => recallOrder(0)}>
+					{heldOrders.length} held order(s) - Tap to recall
+				</button>
+			</div>
+		{/if}
 	</div>
 
-	<!-- RIGHT: Cart Panel -->
-	<div class="w-80 xl:w-96 bg-white border-l border-gray-200 flex flex-col">
+	<!-- RIGHT: Cart Panel (desktop) -->
+	<div class="hidden lg:flex w-80 xl:w-96 bg-white border-l border-gray-200 flex-col">
 		<!-- Cart header -->
 		<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
 			<h2 class="font-semibold text-sm text-gray-800">
@@ -392,17 +408,17 @@
 						<div class="flex items-center justify-between mt-2">
 							<div class="flex items-center gap-1">
 								<button
-									class="w-7 h-7 rounded-md bg-gray-50 border border-gray-300 flex items-center justify-center hover:border-pos-highlight text-sm transition-colors text-gray-600"
+									class="w-8 h-8 rounded-md bg-gray-50 border border-gray-300 flex items-center justify-center hover:border-pos-highlight text-sm transition-colors text-gray-600"
 									onclick={() => cartStore.updateQuantity(item.cartId, item.quantity - 1)}
 								>-</button>
 								<span class="w-8 text-center text-sm font-medium text-gray-800">{item.quantity}</span>
 								<button
-									class="w-7 h-7 rounded-md bg-gray-50 border border-gray-300 flex items-center justify-center hover:border-pos-highlight text-sm transition-colors text-gray-600"
+									class="w-8 h-8 rounded-md bg-gray-50 border border-gray-300 flex items-center justify-center hover:border-pos-highlight text-sm transition-colors text-gray-600"
 									onclick={() => cartStore.updateQuantity(item.cartId, item.quantity + 1)}
 								>+</button>
 							</div>
 							<button
-								class="text-gray-400 hover:text-pos-danger transition-colors"
+								class="p-2 text-gray-400 hover:text-pos-danger transition-colors"
 								onclick={() => cartStore.removeItem(item.cartId)}
 							>
 								<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -418,7 +434,6 @@
 		<!-- Cart totals + actions -->
 		{#if items.length > 0}
 			<div class="border-t border-gray-200">
-				<!-- Totals -->
 				<div class="px-4 py-3 space-y-1.5 text-sm">
 					<div class="flex justify-between text-gray-500">
 						<span>Subtotal</span>
@@ -439,18 +454,132 @@
 						<span class="text-pos-highlight">{formatCurrency(total)}</span>
 					</div>
 				</div>
-
-				<!-- Action buttons -->
 				<div class="px-4 pb-4 grid grid-cols-2 gap-2">
-					<button class="btn-ghost btn-sm" onclick={holdOrder}>Hold (F3)</button>
-					<button class="btn-ghost btn-sm" onclick={() => (showDiscount = true)}>Discount (F4)</button>
+					<button class="btn-ghost btn-sm" onclick={holdOrder}>Hold</button>
+					<button class="btn-ghost btn-sm" onclick={() => (showDiscount = true)}>Discount</button>
 					<button class="btn-primary w-full col-span-2 py-3 text-base" onclick={placeOrder}>
-						Pay {formatCurrency(total)} (F2)
+						Pay {formatCurrency(total)}
 					</button>
 				</div>
 			</div>
 		{/if}
 	</div>
+
+	<!-- MOBILE: Floating cart button -->
+	{#if itemCount > 0}
+		<button
+			class="lg:hidden fixed bottom-4 right-4 z-30 bg-pos-highlight text-white rounded-full shadow-lg px-5 py-3 flex items-center gap-2 active:scale-95 transition-transform"
+			onclick={() => (mobileCartOpen = true)}
+		>
+			<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z" />
+			</svg>
+			<span class="font-bold">{itemCount}</span>
+			<span class="text-sm">| {formatCurrency(total)}</span>
+		</button>
+	{/if}
+
+	<!-- MOBILE: Cart overlay -->
+	{#if mobileCartOpen}
+		<div class="lg:hidden fixed inset-0 z-40 flex flex-col bg-white">
+			<!-- Mobile cart header -->
+			<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
+				<h2 class="font-semibold text-base text-gray-800">
+					Cart
+					{#if itemCount > 0}
+						<span class="badge-info ml-2">{itemCount} items</span>
+					{/if}
+				</h2>
+				<div class="flex gap-2">
+					<button class="btn-ghost btn-sm" onclick={() => (showCustomer = true)} title="Customer">
+						<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+						</svg>
+					</button>
+					<button class="btn-ghost btn-sm" onclick={() => { if (items.length > 0) showClearConfirm = true; }} title="Clear">
+						<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+						</svg>
+					</button>
+					<button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500" onclick={() => (mobileCartOpen = false)}>
+						<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			<!-- Mobile cart items -->
+			<div class="flex-1 overflow-y-auto">
+				{#each items as item (item.cartId)}
+					<div class="px-4 py-3 border-b border-gray-100">
+						<div class="flex items-start justify-between gap-2">
+							<div class="flex-1 min-w-0">
+								<p class="text-sm font-medium text-gray-800 truncate">{item.name}</p>
+								{#if item.modifiers.length > 0}
+									<p class="text-xs text-gray-400 mt-0.5">+ {item.modifiers.map((m) => m.name).join(', ')}</p>
+								{/if}
+								<p class="text-xs text-gray-400">{formatCurrency(item.price)} each</p>
+							</div>
+							<p class="text-sm font-semibold text-gray-800">{formatCurrency((item.price + item.modifiers.reduce((s, m) => s + (m.price || 0), 0)) * item.quantity)}</p>
+						</div>
+						<div class="flex items-center justify-between mt-2">
+							<div class="flex items-center gap-2">
+								<button
+									class="w-10 h-10 rounded-lg bg-gray-50 border border-gray-300 flex items-center justify-center text-base text-gray-600 active:bg-gray-100"
+									onclick={() => cartStore.updateQuantity(item.cartId, item.quantity - 1)}
+								>-</button>
+								<span class="w-8 text-center text-base font-medium text-gray-800">{item.quantity}</span>
+								<button
+									class="w-10 h-10 rounded-lg bg-gray-50 border border-gray-300 flex items-center justify-center text-base text-gray-600 active:bg-gray-100"
+									onclick={() => cartStore.updateQuantity(item.cartId, item.quantity + 1)}
+								>+</button>
+							</div>
+							<button
+								class="p-2 text-gray-400 hover:text-pos-danger"
+								onclick={() => cartStore.removeItem(item.cartId)}
+							>
+								<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+								</svg>
+							</button>
+						</div>
+					</div>
+				{/each}
+			</div>
+
+			<!-- Mobile cart totals + actions -->
+			<div class="border-t border-gray-200 flex-shrink-0">
+				<div class="px-4 py-3 space-y-1.5 text-sm">
+					<div class="flex justify-between text-gray-500">
+						<span>Subtotal</span>
+						<span>{formatCurrency(subtotal)}</span>
+					</div>
+					{#if discount > 0}
+						<div class="flex justify-between text-pos-success">
+							<span>Discount</span>
+							<span>-{formatCurrency(discount)}</span>
+						</div>
+					{/if}
+					<div class="flex justify-between text-gray-500">
+						<span>GST ({cart.gstRate}%)</span>
+						<span>{formatCurrency(tax)}</span>
+					</div>
+					<div class="flex justify-between text-lg font-bold pt-2 border-t border-gray-200">
+						<span class="text-gray-800">Total</span>
+						<span class="text-pos-highlight">{formatCurrency(total)}</span>
+					</div>
+				</div>
+				<div class="px-4 pb-4 grid grid-cols-2 gap-2">
+					<button class="btn-ghost btn-sm" onclick={holdOrder}>Hold</button>
+					<button class="btn-ghost btn-sm" onclick={() => { mobileCartOpen = false; showDiscount = true; }}>Discount</button>
+					<button class="btn-primary w-full col-span-2 py-3 text-base" onclick={placeOrder}>
+						Pay {formatCurrency(total)}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 </div>
 
 <!-- Payment Modal -->
@@ -493,17 +622,17 @@
 			</div>
 
 			<!-- Quick cash buttons -->
-			<div class="grid grid-cols-4 gap-2">
+			<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
 				{#each [100, 200, 500, 1000, 2000] as amount}
 					<button
-						class="py-2 rounded-lg bg-gray-50 border border-gray-300 text-sm text-gray-700 hover:border-pos-highlight/50 transition-colors"
+						class="py-2.5 rounded-lg bg-gray-50 border border-gray-300 text-sm text-gray-700 hover:border-pos-highlight/50 transition-colors"
 						onclick={() => (cashReceived = String(amount))}
 					>
 						{formatCurrency(amount)}
 					</button>
 				{/each}
 				<button
-					class="py-2 rounded-lg bg-red-50 border border-pos-highlight text-sm text-pos-highlight font-medium"
+					class="py-2.5 rounded-lg bg-red-50 border border-pos-highlight text-sm text-pos-highlight font-medium"
 					onclick={() => (cashReceived = String(Math.ceil(total)))}
 				>
 					Exact
@@ -531,13 +660,13 @@
 			<label class="label">Discount Type</label>
 			<div class="grid grid-cols-2 gap-2">
 				<button
-					class="py-2 rounded-lg border text-sm transition-colors {discountType === 'percentage' ? 'bg-red-50 border-pos-highlight text-pos-highlight' : 'border-gray-300 text-gray-500'}"
+					class="py-2.5 rounded-lg border text-sm transition-colors {discountType === 'percentage' ? 'bg-red-50 border-pos-highlight text-pos-highlight' : 'border-gray-300 text-gray-500'}"
 					onclick={() => (discountType = 'percentage')}
 				>
 					Percentage (%)
 				</button>
 				<button
-					class="py-2 rounded-lg border text-sm transition-colors {discountType === 'flat' ? 'bg-red-50 border-pos-highlight text-pos-highlight' : 'border-gray-300 text-gray-500'}"
+					class="py-2.5 rounded-lg border text-sm transition-colors {discountType === 'flat' ? 'bg-red-50 border-pos-highlight text-pos-highlight' : 'border-gray-300 text-gray-500'}"
 					onclick={() => (discountType = 'flat')}
 				>
 					Flat Amount
@@ -605,6 +734,6 @@
 	show={showClearConfirm}
 	title="Clear Cart"
 	message="Remove all items from the cart?"
-	onconfirm={() => { cartStore.clear(); showClearConfirm = false; }}
+	onconfirm={() => { cartStore.clear(); showClearConfirm = false; mobileCartOpen = false; }}
 	oncancel={() => (showClearConfirm = false)}
 />

frontend/src/routes/(app)/reports/+page.svelte

@@ -58,11 +58,11 @@
 	</div>
 
 	<!-- Date range + generate -->
-	<div class="px-4 py-3 border-b border-gray-200 flex items-center gap-3">
+	<div class="px-4 py-3 border-b border-gray-200 flex flex-wrap items-center gap-3">
 		<label class="text-xs text-gray-500">From</label>
-		<input type="date" class="input w-40" bind:value={dateFrom} />
+		<input type="date" class="input w-full sm:w-40" bind:value={dateFrom} />
 		<label class="text-xs text-gray-500">To</label>
-		<input type="date" class="input w-40" bind:value={dateTo} />
+		<input type="date" class="input w-full sm:w-40" bind:value={dateTo} />
 		<button class="btn-primary btn-sm" onclick={loadReport}>Generate</button>
 	</div>
 
@@ -74,34 +74,34 @@
 			<!-- Sales Report -->
 			{#if activeTab === 'sales'}
 				<div class="space-y-4">
-					<div class="grid grid-cols-3 gap-3">
+					<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
 						<div class="stat-card"><span class="stat-value text-pos-highlight">{formatCurrency(reportData.totals?.sales || 0)}</span><span class="stat-label">Revenue</span></div>
 						<div class="stat-card"><span class="stat-value text-pos-success">{reportData.totals?.count || 0}</span><span class="stat-label">Orders</span></div>
 						<div class="stat-card"><span class="stat-value text-pos-info">{formatCurrency(reportData.totals?.count ? (reportData.totals.sales / reportData.totals.count) : 0)}</span><span class="stat-label">Avg Order</span></div>
 					</div>
 					{#if reportData.data?.length}
-						<table class="table-pos">
+						<div class="table-scroll"><table class="table-pos">
 							<thead><tr><th>Date</th><th>Orders</th><th>Revenue</th><th>Tax</th></tr></thead>
 							<tbody>
 								{#each reportData.data as row}
 									<tr><td>{row.date}</td><td>{row.count}</td><td>{formatCurrency(row.sales)}</td><td>{formatCurrency(row.tax)}</td></tr>
 								{/each}
 							</tbody>
-						</table>
+						</table></div>
 					{/if}
 				</div>
 
 			<!-- GST Report -->
 			{:else if activeTab === 'gst'}
 				<div class="space-y-4">
-					<div class="grid grid-cols-4 gap-3">
+					<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
 						<div class="stat-card"><span class="stat-value text-gray-800">{formatCurrency(reportData.summary?.sub_total || 0)}</span><span class="stat-label">Taxable</span></div>
 						<div class="stat-card"><span class="stat-value text-pos-info">{formatCurrency(reportData.summary?.cgst_amount || 0)}</span><span class="stat-label">CGST</span></div>
 						<div class="stat-card"><span class="stat-value text-pos-info">{formatCurrency(reportData.summary?.sgst_amount || 0)}</span><span class="stat-label">SGST</span></div>
 						<div class="stat-card"><span class="stat-value text-pos-warning">{formatCurrency(reportData.summary?.total_tax || 0)}</span><span class="stat-label">Total GST</span></div>
 					</div>
 					{#if reportData.data?.length}
-						<table class="table-pos">
+						<div class="table-scroll"><table class="table-pos">
 							<thead><tr><th>Date</th><th>Taxable</th><th>CGST</th><th>SGST</th><th>Total Tax</th><th>Grand Total</th><th>Orders</th></tr></thead>
 							<tbody>
 								{#each reportData.data as row}
@@ -116,7 +116,7 @@
 									</tr>
 								{/each}
 							</tbody>
-						</table>
+						</table></div>
 					{/if}
 				</div>
 
@@ -124,7 +124,7 @@
 			{:else if activeTab === 'items'}
 				{@const rows = reportData.data || reportData}
 				{#if Array.isArray(rows) && rows.length}
-					<table class="table-pos">
+					<div class="table-scroll"><table class="table-pos">
 						<thead><tr><th>Item</th><th>Qty Sold</th><th>Revenue</th></tr></thead>
 						<tbody>
 							{#each rows as row}
@@ -135,7 +135,7 @@
 								</tr>
 							{/each}
 						</tbody>
-					</table>
+					</table></div>
 				{:else}
 					<p class="text-gray-400 text-sm text-center py-6">No data for this period</p>
 				{/if}
@@ -144,7 +144,7 @@
 			{:else if activeTab === 'categories'}
 				{@const rows = reportData.data || reportData}
 				{#if Array.isArray(rows) && rows.length}
-					<table class="table-pos">
+					<div class="table-scroll"><table class="table-pos">
 						<thead><tr><th>Category</th><th>Items Sold</th><th>Revenue</th></tr></thead>
 						<tbody>
 							{#each rows as row}
@@ -155,7 +155,7 @@
 								</tr>
 							{/each}
 						</tbody>
-					</table>
+					</table></div>
 				{:else}
 					<p class="text-gray-400 text-sm text-center py-6">No data for this period</p>
 				{/if}
@@ -164,7 +164,7 @@
 			{:else if activeTab === 'captains'}
 				{@const rows = reportData.data || reportData}
 				{#if Array.isArray(rows) && rows.length}
-					<table class="table-pos">
+					<div class="table-scroll"><table class="table-pos">
 						<thead><tr><th>Captain</th><th>Orders</th><th>Revenue</th></tr></thead>
 						<tbody>
 							{#each rows as row}
@@ -175,7 +175,7 @@
 								</tr>
 							{/each}
 						</tbody>
-					</table>
+					</table></div>
 				{:else}
 					<p class="text-gray-400 text-sm text-center py-6">No data for this period</p>
 				{/if}
@@ -184,7 +184,7 @@
 			{:else if activeTab === 'kitchen'}
 				{@const rows = Array.isArray(reportData) ? reportData : (reportData.data || [])}
 				{#if rows.length}
-					<table class="table-pos">
+					<div class="table-scroll"><table class="table-pos">
 						<thead><tr><th>Station</th><th>Total KOTs</th><th>Pending</th><th>Completed</th><th>Cancelled</th></tr></thead>
 						<tbody>
 							{#each rows as row}
@@ -197,7 +197,7 @@
 								</tr>
 							{/each}
 						</tbody>
-					</table>
+					</table></div>
 				{:else}
 					<p class="text-gray-400 text-sm text-center py-6">No data for this period</p>
 				{/if}
@@ -207,14 +207,14 @@
 				<div class="space-y-4">
 					<div class="stat-card w-fit"><span class="stat-value text-pos-danger">{formatCurrency(reportData.grand_total || reportData.total || 0)}</span><span class="stat-label">Total Expenses</span></div>
 					{#if (reportData.data || reportData.by_category || []).length}
-						<table class="table-pos">
+						<div class="table-scroll"><table class="table-pos">
 							<thead><tr><th>Category</th><th>Amount</th><th>Count</th></tr></thead>
 							<tbody>
 								{#each (reportData.data || reportData.by_category || []) as row}
 									<tr><td>{row.category}</td><td>{formatCurrency(row.total || row.amount)}</td><td>{row.count}</td></tr>
 								{/each}
 							</tbody>
-						</table>
+						</table></div>
 					{/if}
 				</div>
 
@@ -222,13 +222,13 @@
 			{:else if activeTab === 'inventory'}
 				{#if (reportData.items || []).length}
 					{#if reportData.total_items}
-						<div class="grid grid-cols-3 gap-3 mb-4">
+						<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
 							<div class="stat-card"><span class="stat-value text-pos-info">{reportData.total_items}</span><span class="stat-label">Total Items</span></div>
 							<div class="stat-card"><span class="stat-value text-pos-warning">{reportData.low_stock_count || 0}</span><span class="stat-label">Low Stock</span></div>
 							<div class="stat-card"><span class="stat-value text-pos-highlight">{formatCurrency(reportData.total_value || 0)}</span><span class="stat-label">Total Value</span></div>
 						</div>
 					{/if}
-					<table class="table-pos">
+					<div class="table-scroll"><table class="table-pos">
 						<thead><tr><th>Item</th><th>Current Stock</th><th>Unit</th><th>Status</th></tr></thead>
 						<tbody>
 							{#each (reportData.items || []) as row}
@@ -240,7 +240,7 @@
 								</tr>
 							{/each}
 						</tbody>
-					</table>
+					</table></div>
 				{:else}
 					<p class="text-gray-400 text-sm text-center py-6">No inventory data</p>
 				{/if}
@@ -281,7 +281,7 @@
 						</div>
 					{/if}
 					{#if reportData.kots?.length}
-						<table class="table-pos">
+						<div class="table-scroll"><table class="table-pos">
 							<thead><tr><th>KOT #</th><th>Order</th><th>Station</th><th>Items</th><th>Status</th><th>Table</th><th>Captain</th><th>Time</th></tr></thead>
 							<tbody>
 								{#each reportData.kots as kot}
@@ -310,7 +310,7 @@
 									</tr>
 								{/each}
 							</tbody>
-						</table>
+						</table></div>
 					{:else}
 						<p class="text-gray-400 text-sm text-center py-6">No KOTs found for this period</p>
 					{/if}
@@ -319,7 +319,7 @@
 			<!-- Cancelled Items Report -->
 			{:else if activeTab === 'cancelledItems'}
 				<div class="space-y-4">
-					<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+					<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
 						<div class="stat-card"><span class="stat-value text-red-500">{reportData.summary?.total_items || 0}</span><span class="stat-label">Items Cancelled</span></div>
 						<div class="stat-card"><span class="stat-value text-red-500">{formatCurrency(reportData.summary?.total_lost_revenue || 0)}</span><span class="stat-label">Lost Revenue</span></div>
 						<div class="stat-card"><span class="stat-value text-orange-500">{reportData.summary?.unique_orders || 0}</span><span class="stat-label">Affected Orders</span></div>
@@ -353,7 +353,7 @@
 					{/if}
 
 					{#if reportData.items?.length}
-						<table class="table-pos">
+						<div class="table-scroll"><table class="table-pos">
 							<thead><tr><th>Order</th><th>Table</th><th>Item</th><th>Qty</th><th>Price</th><th>Reason</th><th>Cancelled By</th><th>Time</th></tr></thead>
 							<tbody>
 								{#each reportData.items as item}
@@ -369,7 +369,7 @@
 									</tr>
 								{/each}
 							</tbody>
-						</table>
+						</table></div>
 					{:else}
 						<p class="text-gray-400 text-sm text-center py-6">No cancelled items found for this period</p>
 					{/if}

frontend/src/routes/(app)/tables/+page.svelte

@@ -111,7 +111,7 @@
 <div class="p-4 space-y-4">
 	<!-- Overview Stats -->
 	{#if overview}
-		<div class="grid grid-cols-4 gap-3">
+		<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
 			<div class="stat-card">
 				<span class="stat-value text-pos-success">{overview.available || 0}</span>
 				<span class="stat-label">Available</span>
@@ -156,7 +156,7 @@
 	{#if loading}
 		<Spinner loading={true} text="Loading tables..." />
 	{:else}
-		<div class="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-3">
+		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-3">
 			{#each filteredTables() as table}
 				<div class="table-cell {table.status || 'available'}" onclick={() => openEditTable(table)}>
 					<span class="text-lg font-bold">{table.name}</span>