session summary layout upgrade

static/css/style.css

@@ -755,74 +755,35 @@ td a:hover {
 }
 
 .leaderboard-layout,
+.session-layout,
 .admin-layout {
     align-items: stretch;
 }
 
-.session-layout {
-    align-items: stretch;
-    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
+.results-panel-full {
+    display: block;
 }
 
-.results-panel,
-.chart-panel {
+.table-scroll-open {
+    overflow-x: auto;
+    overflow-y: visible;
+    max-height: none;
+    padding-right: 0;
+}
+
+.chart-row {
+    align-items: stretch;
+}
+
+.chart-panel-compact,
+.session-insights-panel {
     display: flex;
     flex-direction: column;
-    height: 430px;
-    min-height: 430px;
-    max-height: 430px;
 }
 
-.results-panel .table-scroll {
+.chart-panel-compact .chart-frame-compact {
     flex: 1;
-    min-height: 0;
-    overflow-x: auto;
-    overflow-y: auto;
-    padding-right: 0.25rem;
-
-    scrollbar-gutter: stable;
-    scrollbar-width: auto;
-    scrollbar-color: rgba(255, 160, 64, 0.88) rgba(255, 255, 255, 0.08);
-}
-
-.results-panel .table-scroll::-webkit-scrollbar {
-    width: 14px;
-    height: 12px;
-}
-
-.results-panel .table-scroll::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.06);
-    border-radius: 999px;
-}
-
-.results-panel .table-scroll::-webkit-scrollbar-thumb {
-    background: linear-gradient(
-        180deg,
-        rgba(255, 186, 110, 0.95),
-        rgba(255, 136, 48, 0.95)
-    );
-    border-radius: 999px;
-    border: 2px solid rgba(10, 12, 18, 0.9);
-    box-shadow:
-        0 0 0 1px rgba(255, 170, 90, 0.18),
-        0 0 12px rgba(255, 140, 60, 0.18);
-}
-
-.results-panel .table-scroll::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(
-        180deg,
-        rgba(255, 200, 130, 1),
-        rgba(255, 150, 60, 1)
-    );
-}
-
-.results-panel .table-scroll::-webkit-scrollbar-corner {
-    background: rgba(255, 255, 255, 0.04);
-}
-
-.chart-panel .chart-frame {
-    flex: 1;
-    min-height: 0;
+    min-height: 220px;
     height: auto;
 }
 
@@ -838,8 +799,8 @@ td a:hover {
 
 .session-results-table th:last-child,
 .session-results-table td:last-child {
-    min-width: 15rem;
-    width: 18rem;
+    min-width: 18rem;
+    width: 22rem;
     white-space: normal;
 }
 
@@ -851,6 +812,24 @@ td a:hover {
     backdrop-filter: blur(6px);
 }
 
+.detail-grid {
+    display: grid;
+    gap: 0.9rem;
+}
+
+.detail-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--line);
+}
+
+.detail-row:last-child {
+    border-bottom: 0;
+}
+
 .button-row {
     display: flex;
     gap: 0.75rem;

templates/session_detail.html

@@ -39,15 +39,15 @@
     </article>
 </section>
 
-<section class="grid two-col session-layout">
-    <div class="panel results-panel">
+<section class="panel results-panel results-panel-full">
     <div class="panel-header">
         <div>
             <p class="eyebrow">Results</p>
             <h2>Player totals</h2>
         </div>
     </div>
-        <div class="table-wrap table-scroll">
+
+    <div class="table-scroll table-scroll-open">
         <table class="data-table session-results-table">
             <thead>
                 <tr>
@@ -64,7 +64,11 @@
             <tbody>
                 {% for entry in session.entries %}
                 <tr>
-                        <td><a href="{{ url_for('player_detail', player_name=entry.player_name) }}">{{ entry.player_name }}</a></td>
+                    <td>
+                        <a href="{{ url_for('player_detail', player_name=entry.player_name) }}">
+                            {{ entry.player_name }}
+                        </a>
+                    </td>
                     <td>{{ entry.buy_in_cents | money }}</td>
                     <td>{{ entry.cash_out_cents | money }}</td>
                     <td>{{ entry.paid_cents | money }}</td>
@@ -95,19 +99,85 @@
             </tbody>
         </table>
     </div>
-    </div>
+</section>
 
-    <div class="panel chart-panel">
+<section class="grid two-col chart-row">
+    <div class="panel chart-panel chart-panel-compact">
         <div class="panel-header">
             <div>
                 <p class="eyebrow">Breakdown</p>
                 <h2>Net by player</h2>
             </div>
         </div>
-        <div class="chart-frame">
+        <div class="chart-frame chart-frame-compact">
             <canvas id="sessionBreakdownChart"></canvas>
         </div>
     </div>
+
+    <div class="panel session-insights-panel">
+        <div class="panel-header">
+            <div>
+                <p class="eyebrow">Quick read</p>
+                <h2>Session snapshot</h2>
+            </div>
+        </div>
+
+        {% set winners = session.entries | selectattr('net_cents', 'gt', 0) | list %}
+        {% set losers = session.entries | selectattr('net_cents', 'lt', 0) | list %}
+
+        <div class="detail-grid">
+            <div class="detail-row">
+                <span>Players</span>
+                <strong>{{ session.entries|length }}</strong>
+            </div>
+            <div class="detail-row">
+                <span>Biggest winner</span>
+                <strong>
+                    {% if winners %}
+                        {{ winners | sort(attribute='net_cents', reverse=True) | first | attr('player_name') }}
+                    {% else %}
+                        —
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Best result</span>
+                <strong class="positive">
+                    {% if winners %}
+                        {{ (winners | sort(attribute='net_cents', reverse=True) | first).net_cents | money }}
+                    {% else %}
+                        $0.00
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Biggest loser</span>
+                <strong>
+                    {% if losers %}
+                        {{ losers | sort(attribute='net_cents') | first | attr('player_name') }}
+                    {% else %}
+                        —
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Worst result</span>
+                <strong class="negative">
+                    {% if losers %}
+                        {{ (losers | sort(attribute='net_cents') | first).net_cents | money }}
+                    {% else %}
+                        $0.00
+                    {% endif %}
+                </strong>
+            </div>
+            <div class="detail-row">
+                <span>Unpaid total</span>
+                <strong class="{{ 'negative' if session.total_remaining_cents > 0 else 'positive' }}">
+                    {{ session.total_remaining_cents | money }}
+                </strong>
+            </div>
+        </div>
+    </div>
 </section>
 
 <section class="panel">