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>

assets/app.css

@@ -210,3 +210,59 @@
     backface-visibility: hidden;
     transform: translateZ(0);
 }
+
+/* Below `md`, a `.table-cards` table reads as a stack of cards instead of a
+   horizontally-scrolling grid: each row becomes a bordered block, each cell
+   becomes a label/value line pulling its label from `data-label` (set on the
+   <td> in the template -- there's no way to read the matching <th> text from
+   pure CSS). A <td> with no `data-label` renders as plain full-width content
+   instead of a label/value row -- for an image cell, a heading-style link, or
+   an actions row that already lays itself out. At `md` and up this reverts to
+   an ordinary table with nothing left over from the mobile styling. */
+@media (width < 48rem) {
+    .table-cards, .table-cards :is(thead, tbody, tr, th, td) {
+        display: block;
+        width: 100%;
+    }
+
+    .table-cards thead {
+        display: none;
+    }
+
+    .table-cards tbody tr {
+        border: 1px solid var(--color-base-300);
+        border-radius: var(--radius-box);
+        padding: 0 0.75rem;
+    }
+
+    .table-cards tbody tr + tr {
+        margin-top: 0.75rem;
+    }
+
+    .table-cards td {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        padding: 0.6rem 0;
+        border-bottom: 1px solid var(--color-base-200);
+    }
+
+    .table-cards td:last-child {
+        border-bottom: none;
+    }
+
+    .table-cards td[data-label]:before {
+        content: attr(data-label);
+        flex-shrink: 0;
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        opacity: 0.5;
+    }
+
+    .table-cards td:not([data-label]) {
+        justify-content: flex-start;
+    }
+}