Stack the referee dashboard's season stats full-width instead of 2/3+1/3

The season-at-a-glance numbers become their own full-width KPI row (same
treatment as the existing "games in view" row above), with the chart and
per-referee breakdown as a separate full-width card below, instead of
squeezed into a narrow sidebar next to the chart.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9

management/templates/management/referee_management.html

@@ -52,36 +52,32 @@
         about who's actually done the refereeing this season, all-time
         within it, not just what's still upcoming.
     {% endcomment %}
-    <div class="grid grid-cols-1 gap-3.5 lg:grid-cols-3">
+    <div class="flex flex-col gap-3.5">
-        <div class="card p-4.5 lg:col-span-2">
+        <div class="flex flex-wrap gap-3.5">
+            <div class="card min-w-0 flex-1 p-4">
+                <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Active referees" %}</div>
+                <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_active_referees }}</div>
+                <div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
+            </div>
+            <div class="card min-w-0 flex-1 p-4">
+                <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Games refereed" %}</div>
+                <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_total_assignments }}</div>
+                <div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
+            </div>
+            <div class="card min-w-0 flex-1 p-4">
+                <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Average per referee" %}</div>
+                <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_avg_games_per_referee }}</div>
+                <div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
+            </div>
+        </div>
+        <div class="card p-4.5">
             <div class="mb-1 font-display text-base font-extrabold tracking-[.08em] text-ink uppercase">{% trans "Games refereed per referee" %}</div>
             <p class="mb-3 text-sm text-muted">{% trans "This season." %}</p>
             {% if referee_stats %}
                 <div class="h-56">
                     <canvas id="referee-games-chart"></canvas>
                 </div>
-            {% else %}
+                <div class="mt-3 max-h-40 overflow-y-auto border-t border-rule">
-                <p class="py-6 text-center text-sm text-muted">{% trans "No referee assignments recorded yet this season." %}</p>
-            {% endif %}
-        </div>
-        <div class="card p-4.5">
-            <div class="mb-3 font-display text-base font-extrabold tracking-[.08em] text-ink uppercase">{% trans "Season at a glance" %}</div>
-            <dl>
-                <div class="flex items-center justify-between py-1.5">
-                    <dt class="text-[13px] text-muted">{% trans "Active referees" %}</dt>
-                    <dd class="font-mono text-sm font-semibold text-ink">{{ kpi_active_referees }}</dd>
-                </div>
-                <div class="flex items-center justify-between py-1.5">
-                    <dt class="text-[13px] text-muted">{% trans "Games refereed" %}</dt>
-                    <dd class="font-mono text-sm font-semibold text-ink">{{ kpi_total_assignments }}</dd>
-                </div>
-                <div class="flex items-center justify-between py-1.5">
-                    <dt class="text-[13px] text-muted">{% trans "Average per referee" %}</dt>
-                    <dd class="font-mono text-sm font-semibold text-ink">{{ kpi_avg_games_per_referee }}</dd>
-                </div>
-            </dl>
-            {% if referee_stats %}
-                <div class="mt-2 max-h-40 overflow-y-auto border-t border-rule">
                     {% for row in referee_stats %}
                         <div class="flex items-center justify-between gap-3 py-1.5 {% if not forloop.last %}border-b border-rule{% endif %}">
                             <span class="truncate text-[13px] text-ink">{{ row.member__first_name }} {{ row.member__last_name }}</span>
@@ -89,6 +85,8 @@
                         </div>
                     {% endfor %}
                 </div>
+            {% else %}
+                <p class="py-6 text-center text-sm text-muted">{% trans "No referee assignments recorded yet this season." %}</p>
             {% endif %}
         </div>
     </div>