feat(waitlist): queue position on the customer manage page

A waitlisted customer saw only a bare status — worse, the badge fell
back to "Pending" for both waitlisted and cancelled states. The view
now carries a 1-based waitlistPosition (earlier-created waitlisted
bookings on the session + 1) and the page renders a warning-tone
notice with the queue spot and auto-promotion explanation, in CS/EN.
Also fixed the badge's nonexistent --danger-soft/--warning-soft tokens.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/frontend/src/routes/booking-manage-route.tsx

@@ -195,18 +195,48 @@ export function BookingManageRoute() {
                     <CardDescription class="mt-1">{b().businessName}</CardDescription>
                   </div>
                   <span class={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold ${
-                    b().status === 'confirmed' 
-                      ? 'bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]' 
-                      : 'bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]'
+                    b().status === 'confirmed'
+                      ? 'bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]'
+                      : b().status === 'cancelled'
+                      ? 'bg-[hsl(var(--error-subtle))] text-[hsl(var(--error))]'
+                      : 'bg-[hsl(var(--warning-subtle))] text-[hsl(var(--warning))]'
                   }`}>
-                    {b().status === 'confirmed' 
+                    {b().status === 'confirmed'
                       ? (i18n.locale() === 'cs' ? 'Potvrzeno' : 'Confirmed')
+                      : b().status === 'waitlisted'
+                      ? (i18n.locale() === 'cs' ? 'Čekací listina' : 'Waitlisted')
+                      : b().status === 'cancelled'
+                      ? (i18n.locale() === 'cs' ? 'Zrušeno' : 'Cancelled')
                       : (i18n.locale() === 'cs' ? 'Čeká se' : 'Pending')
                     }
                   </span>
                 </div>
               </CardHeader>
               <CardContent class="space-y-6">
+                {/* Waitlist position */}
+                <Show when={b().status === 'waitlisted'}>
+                  <div class="flex items-center gap-3 p-4 bg-[hsl(var(--warning-subtle))] rounded-xl border border-[hsl(var(--warning))]/20">
+                    <div class="w-10 h-10 rounded-lg bg-[hsl(var(--warning))]/10 flex items-center justify-center text-[hsl(var(--warning))]">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"/>
+                        <polyline points="12 6 12 12 16 14"/>
+                      </svg>
+                    </div>
+                    <div>
+                      <p class="font-medium text-ink">
+                        {b().waitlistPosition > 0
+                          ? (i18n.locale() === 'cs' ? `Jste ${b().waitlistPosition}. v pořadí` : `You are #${b().waitlistPosition} in the queue`)
+                          : (i18n.locale() === 'cs' ? 'Jste na čekací listině' : 'You are on the waitlist')}
+                      </p>
+                      <p class="text-sm text-ink-muted">
+                        {i18n.locale() === 'cs'
+                          ? 'Po uvolnění místa vám rezervaci automaticky potvrdíme e-mailem.'
+                          : 'When a seat frees up we will confirm your booking by email automatically.'}
+                      </p>
+                    </div>
+                  </div>
+                </Show>
+
                 {/* Reference */}
                 <div class="flex items-center gap-3 p-3 bg-canvas-subtle rounded-xl">
                   <div class="w-10 h-10 rounded-lg bg-[hsl(var(--info-subtle))] flex items-center justify-center text-[hsl(var(--info))]">