Make the management app responsive on mobile

Replace the mobile nav's horizontal scroll strip (which wrapped into
an unreadable jumble because daisyUI's .menu sets flex-wrap: wrap and
.menu-horizontal never resets it) with a hamburger button that opens
a proper left-side drawer, mirrored in controlpanel for the same bug.
Move the theme toggle, "Management", and "Django admin" controls into
that drawer below `lg`, leaving only the account icon in the navbar,
so the club name has room to render in full instead of truncating to
initials.

Add a reusable `.table-cards` CSS pattern (app.css) that turns a list
table into a stack of labelled cards below `md`, and apply it to every
list/detail table in the management app -- members, families, teams,
memberships, events, groups, locations, opponents, positions, referee
levels/list, roles, sponsors, news, parent claims, team roster/staff,
and the shared family-members table. Tables revert to normal desktop
layout at `md` and up.

Member list gets extra passes: search submits icon-only below `sm` so
it fits next to the input, the Members/Guardians/Both tabs go
full-width, and last/first name merge into one column. Action-button
rows across every page stack full-width on mobile instead of wrapping
mid-button (shared fix in base.html). Home dashboard's upcoming-events
and news mini-tables become simple lists instead of overflowing
tables. Also: brand truncates instead of overflowing on a long club
name, a stray invalid xmlns attribute removed, a wrapping UUID badge
hidden below `sm` on team detail.

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

templates/_platform_base.html

@@ -25,11 +25,11 @@
 {% endblock extra %}
 
 {% block brand %}
-    <a class="flex flex-row items-center gap-2" href="/">
-        <span class="logo inline-block h-16 w-16" role="img" aria-label="RosterChief"></span>
-        <div class="flex flex-col gap-1">
-            <div class="font-roboto text-2xl font-bold tracking-wider">Roster<span class="text-sky-500">Chief</span></div>
-            <div class="font-mono text-xs font-semibold text-base-content/50">Club &amp; Team Management</div>
+    <a class="flex min-w-0 flex-row items-center gap-2" href="/">
+        <span class="logo inline-block h-10 w-10 shrink-0 sm:h-16 sm:w-16" role="img" aria-label="RosterChief"></span>
+        <div class="flex min-w-0 flex-col gap-1">
+            <div class="truncate font-roboto text-lg font-bold tracking-wider sm:text-2xl">Roster<span class="text-sky-500">Chief</span></div>
+            <div class="hidden truncate font-mono text-xs font-semibold text-base-content/50 sm:block">Club &amp; Team Management</div>
         </div>
     </a>
 {% endblock brand %}