From e1dccb6ff05d1247d5d48178bb113fe207ecc3e2 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 16 Mar 2026 14:12:20 +0100
Subject: [PATCH] feat(OfficialTournaments): redesign tournament management
 interface

- Introduced a new admin panel for importing tournaments via PDF upload, enhancing user experience for tournament management.
- Reorganized the layout to include tabs for events and participations, improving navigation and accessibility of tournament data.
- Updated event listing with options to edit and delete tournaments, streamlining tournament management tasks.
- Enhanced the visual presentation with clearer headers and descriptions for better user guidance.
---
 frontend/src/views/OfficialTournaments.vue | 991 +++++++++++++++------
 1 file changed, 734 insertions(+), 257 deletions(-)

diff --git a/frontend/src/views/OfficialTournaments.vue b/frontend/src/views/OfficialTournaments.vue
index c1a63f1b..745050de 100644
--- a/frontend/src/views/OfficialTournaments.vue
+++ b/frontend/src/views/OfficialTournaments.vue
@@ -1,259 +1,242 @@
 <template>
   <div class="official-tournaments">
-    
-    <div class="uploader">
-      <input type="file" accept="application/pdf" @change="onFile" />
-      <button class="btn-primary" :disabled="!selectedFile" @click="upload">{{ $t('officialTournaments.uploadPdf') }}</button>
-    </div>
-    
-    <div v-if="list && list.length > 0" class="list">
-      <div class="tabs">
-        <button :class="['tab', topActiveTab==='events' ? 'active' : '']" @click="switchTopTab('events')" :title="$t('officialTournaments.showEvents')">{{ $t('officialTournaments.events') }}</button>
-        <button :class="['tab', topActiveTab==='participations' ? 'active' : '']" @click="switchTopTab('participations')" :title="$t('officialTournaments.showParticipations')">{{ $t('officialTournaments.participations') }}</button>
-      </div>
-      <div v-if="topActiveTab==='events'">
-        <h3>{{ $t('officialTournaments.savedEvents') }}</h3>
-        <ul class="event-list">
-          <li v-for="t in list" :key="t.id" class="event-item">
-            <template v-if="editingTournamentId === t.id">
-              <input
-                ref="titleEditInput"
-                v-model="editingTitle"
-                class="title-input"
-                @blur="saveTournamentTitle(t)"
-                @keydown.enter="saveTournamentTitle(t)"
-                @keydown.esc="cancelTitleEdit"
-              />
-            </template>
-            <a
-              v-else
-              href="#"
-              class="event-title"
-              @click.prevent="uploadedId = String(t.id); reload();"
-            >
-              {{ t.title || ($t('officialTournaments.tournament') + ' #' + t.id) }}
-            </a>
-            <span v-if="editingTournamentId !== t.id && (t.termin || t.eventDate)" class="event-date"> — {{ t.termin || t.eventDate }}</span>
-            <button
-              v-if="editingTournamentId !== t.id"
-              class="btn-icon"
-              :title="$t('officialTournaments.editTitle')"
-              @click.prevent="startTitleEdit(t)"
-            >
-              ✏️
-            </button>
-            <button class="btn-secondary" @click.prevent="removeTournament(t)" :title="$t('officialTournaments.delete')">🗑️</button>
-          </li>
-        </ul>
-      </div>
-      <div v-else-if="topActiveTab==='participations'">
-        <h3>{{ $t('officialTournaments.participations') }}</h3>
-        <div class="filters">
-          <label for="participationRange">{{ $t('officialTournaments.timeRange') }}</label>
-          <select id="participationRange" v-model="participationRange" @change="onParticipationRangeChange">
-            <option value="3m">{{ $t('officialTournaments.last3Months') }}</option>
-            <option value="6m">{{ $t('officialTournaments.last6Months') }}</option>
-            <option value="12m">{{ $t('officialTournaments.last12Months') }}</option>
-            <option value="2y">{{ $t('officialTournaments.last2Years') }}</option>
-            <option value="prev">{{ $t('officialTournaments.previousSeason') }}</option>
-            <option value="all">{{ $t('officialTournaments.all') }}</option>
-          </select>
+    <div class="workspace-admin">
+      <div class="admin-panel">
+        <div class="panel-header">
+          <h3>Turnier importieren</h3>
+          <p>PDF hochladen und als neues offizielles Turnier anlegen.</p>
+        </div>
+        <div class="uploader">
+          <input type="file" accept="application/pdf" @change="onFile" />
+          <button class="btn-primary" :disabled="!selectedFile" @click="upload">{{ $t('officialTournaments.uploadPdf') }}</button>
         </div>
-        <table>
-          <thead>
-            <tr>
-              <th>{{ $t('officialTournaments.member') }}</th>
-              <th>{{ $t('officialTournaments.tournament') }}</th>
-              <th>{{ $t('officialTournaments.competition') }}</th>
-              <th>{{ $t('officialTournaments.date') }}</th>
-              <th>{{ $t('officialTournaments.placement') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="row in clubParticipationRows()" :key="row.key">
-              <td>{{ row.memberName }}</td>
-              <td>{{ row.tournamentName }}</td>
-              <td>{{ row.competitionName }}</td>
-              <td>{{ row.date }}</td>
-              <td>{{ row.placement || '–' }}</td>
-            </tr>
-          </tbody>
-        </table>
       </div>
-    </div>
-    
-    <div v-if="!list || list.length === 0" class="empty-state">
-      <p>{{ $t('officialTournaments.noEvents') }}</p>
-    </div>
-    
-    <div v-if="parsed">
-      <div class="meta">
-        <div><strong>{{ $t('officialTournaments.title') }}</strong> {{ parsed.parsedData.title || '–' }}</div>
-        <div><strong>{{ $t('officialTournaments.dateTime') }}</strong> {{ parsed.parsedData.termin || '–' }}</div>
-        <div><strong>{{ $t('officialTournaments.venues') }}</strong>
-          <ul>
-            <li v-for="(o,i) in parsed.parsedData.austragungsorte" :key="i">{{ o }}</li>
+
+      <div class="admin-panel">
+        <div class="tabs">
+          <button :class="['tab', topActiveTab==='events' ? 'active' : '']" @click="switchTopTab('events')" :title="$t('officialTournaments.showEvents')">{{ $t('officialTournaments.events') }}</button>
+          <button :class="['tab', topActiveTab==='participations' ? 'active' : '']" @click="switchTopTab('participations')" :title="$t('officialTournaments.showParticipations')">{{ $t('officialTournaments.participations') }}</button>
+        </div>
+        <div v-if="topActiveTab==='events'">
+          <div class="panel-header">
+            <h3>{{ $t('officialTournaments.savedEvents') }}</h3>
+            <p>Turnier auswählen, umbenennen oder löschen.</p>
+          </div>
+          <ul v-if="list && list.length > 0" class="event-list">
+            <li v-for="t in list" :key="t.id" class="event-item" :class="{ selected: String(uploadedId) === String(t.id) }">
+              <template v-if="editingTournamentId === t.id">
+                <input
+                  ref="titleEditInput"
+                  v-model="editingTitle"
+                  class="title-input"
+                  @blur="saveTournamentTitle(t)"
+                  @keydown.enter="saveTournamentTitle(t)"
+                  @keydown.esc="cancelTitleEdit"
+                />
+              </template>
+              <a
+                v-else
+                href="#"
+                class="event-title"
+                @click.prevent="uploadedId = String(t.id); reload();"
+              >
+                {{ t.title || ($t('officialTournaments.tournament') + ' #' + t.id) }}
+              </a>
+              <span v-if="editingTournamentId !== t.id && (t.termin || t.eventDate)" class="event-date"> — {{ t.termin || t.eventDate }}</span>
+              <button
+                v-if="editingTournamentId !== t.id"
+                class="btn-icon"
+                :title="$t('officialTournaments.editTitle')"
+                @click.prevent="startTitleEdit(t)"
+              >
+                ✏️
+              </button>
+              <button class="btn-secondary" @click.prevent="removeTournament(t)" :title="$t('officialTournaments.delete')">🗑️</button>
+            </li>
           </ul>
-        </div>
-        <div><strong>{{ $t('officialTournaments.competitionTypes') }}</strong> {{ (parsed.parsedData.konkurrenztypen||[]).join(', ') || '–' }}</div>
-        <div><strong>{{ $t('officialTournaments.deadlines') }}</strong> {{ (parsed.parsedData.meldeschluesse||[]).join(' | ') || '–' }}</div>
-        <div><strong>{{ $t('officialTournaments.ageClasses') }}</strong> {{ (parsed.parsedData.altersklassen||[]).join(', ') || '–' }}</div>
-        <div><strong>{{ $t('officialTournaments.startTimes') }}</strong>
-          <span v-for="(t,ak) in parsed.parsedData.startzeiten" :key="ak" style="margin-right:.5rem;">{{ ak }}: {{ t }}</span>
-        </div>
-        <div v-if="parsed.parsedData.meldeschluesseByAk && Object.keys(parsed.parsedData.meldeschluesseByAk).length">
-          <strong>{{ $t('officialTournaments.deadlinesByAgeClass') }}</strong>
-          <span v-for="(arr,ak) in parsed.parsedData.meldeschluesseByAk" :key="ak" style="margin-right:.5rem;">
-            {{ ak }}: {{ arr.join(', ') }}
-          </span>
-        </div>
-        <div v-if="parsed.parsedData.entryFees && Object.keys(parsed.parsedData.entryFees).length">
-          <strong>{{ $t('officialTournaments.entryFees') }}</strong>
-          <div class="entry-fees">
-            <div v-for="(fee, ageClass) in parsed.parsedData.entryFees" :key="ageClass" class="fee-item">
-              <span class="age-class">{{ ageClass }}:</span>
-              <span class="fee-amount">{{ fee.amount }}{{ fee.currency }}</span>
-            </div>
+          <div v-else class="empty-state compact">
+            <p>{{ $t('officialTournaments.noEvents') }}</p>
           </div>
         </div>
-        
+        <div v-else-if="topActiveTab==='participations'">
+          <div class="panel-header">
+            <h3>{{ $t('officialTournaments.participations') }}</h3>
+            <p>Vergangene Turnierteilnahmen des Vereins im Überblick.</p>
+          </div>
+          <div class="filters">
+            <label for="participationRange">{{ $t('officialTournaments.timeRange') }}</label>
+            <select id="participationRange" v-model="participationRange" @change="onParticipationRangeChange">
+              <option value="3m">{{ $t('officialTournaments.last3Months') }}</option>
+              <option value="6m">{{ $t('officialTournaments.last6Months') }}</option>
+              <option value="12m">{{ $t('officialTournaments.last12Months') }}</option>
+              <option value="2y">{{ $t('officialTournaments.last2Years') }}</option>
+              <option value="prev">{{ $t('officialTournaments.previousSeason') }}</option>
+              <option value="all">{{ $t('officialTournaments.all') }}</option>
+            </select>
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('officialTournaments.member') }}</th>
+                <th>{{ $t('officialTournaments.tournament') }}</th>
+                <th>{{ $t('officialTournaments.competition') }}</th>
+                <th>{{ $t('officialTournaments.date') }}</th>
+                <th>{{ $t('officialTournaments.placement') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="row in clubParticipationRows()" :key="row.key">
+                <td>{{ row.memberName }}</td>
+                <td>{{ row.tournamentName }}</td>
+                <td>{{ row.competitionName }}</td>
+                <td>{{ row.date }}</td>
+                <td>{{ row.placement || '–' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="parsed" class="selected-tournament-strip">
+      <div class="selected-tournament-main">
+        <span class="selected-tournament-label">Aktives Turnier</span>
+        <strong>{{ parsed.parsedData.title || '–' }}</strong>
+      </div>
+      <div class="selected-tournament-meta">
+        <span>{{ parsed.parsedData.termin || '–' }}</span>
+        <span v-if="tournamentLocationLabel">{{ tournamentLocationLabel }}</span>
+        <span>{{ registrationDeadlineInfo.label }}</span>
       </div>
-      <!-- ehemals 'Erkannte Einträge' entfernt -->
     </div>
 
     <div v-if="parsed && parsed.parsedData.competitions && parsed.parsedData.competitions.length">
-      <div class="top-actions">
-      <button class="btn-secondary" @click="openMemberDialog" :disabled="!parsed || !activeMembers.length">{{ $t('officialTournaments.selectMembers') }}</button>
-      <button class="btn-primary" :disabled="!selectedMemberIds.length" @click="generateMembersPdf">{{ $t('officialTournaments.pdfForSelectedMembers') }}</button>
-      <button class="btn-primary" :disabled="!uploadedId || !pendingAutoRegistrationCount || autoRegistering" @click="autoRegisterParticipants">
-        {{ autoRegistering ? 'Anmeldung läuft...' : 'Automatisch anmelden' }}
-      </button>
-    </div>
+      <div class="overview-header">
+        <div class="overview-main">
+          <div class="tournament-headline">
+            <h2 class="tournament-title">{{ parsed.parsedData.title || 'Turnier' }}</h2>
+            <div class="tournament-meta">
+              <span v-if="parsed.parsedData.termin">{{ parsed.parsedData.termin }}</span>
+              <span v-if="tournamentLocationLabel">{{ tournamentLocationLabel }}</span>
+            </div>
+            <div class="workflow-badges">
+              <span :class="['workflow-badge', registrationDeadlineInfo.statusClass]">
+                {{ registrationDeadlineInfo.label }}
+              </span>
+              <span
+                v-for="notice in workflowNotices"
+                :key="notice.label"
+                :class="['workflow-badge', notice.statusClass]">
+                {{ notice.label }}
+              </span>
+            </div>
+          </div>
+          <div class="overview-stats">
+            <div class="stat-card">
+              <span class="stat-label">Offene Meldungen</span>
+              <strong class="stat-value">{{ pendingAutoRegistrationCount }}</strong>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Angemeldet</span>
+              <strong class="stat-value">{{ registrationSummary.registered }}</strong>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Teilgenommen</span>
+              <strong class="stat-value">{{ registrationSummary.participated }}</strong>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">Mitglieder</span>
+              <strong class="stat-value">{{ participantsGroups.length }}</strong>
+            </div>
+          </div>
+        </div>
+        <div class="top-actions">
+          <button
+            v-if="primaryHeaderAction === 'auto-register'"
+            class="btn-primary"
+            :disabled="!uploadedId || !pendingAutoRegistrationCount || autoRegistering"
+            @click="autoRegisterParticipants">
+            {{ autoRegistering ? 'Anmeldung läuft...' : 'Automatisch anmelden' }}
+          </button>
+          <button
+            v-else-if="primaryHeaderAction === 'results'"
+            class="btn-primary"
+            @click="activeTab='results'">
+            Ergebnisse pflegen
+          </button>
+          <button
+            v-else
+            class="btn-primary"
+            @click="openMemberDialog"
+            :disabled="!parsed || !activeMembers.length">
+            {{ $t('officialTournaments.selectMembers') }}
+          </button>
+          <button
+            v-if="primaryHeaderAction !== 'members'"
+            class="btn-secondary"
+            @click="openMemberDialog"
+            :disabled="!parsed || !activeMembers.length">
+            {{ $t('officialTournaments.selectMembers') }}
+          </button>
+          <button
+            class="btn-secondary"
+            :disabled="!selectedMemberIds.length"
+            @click="generateMembersPdf">
+            {{ $t('officialTournaments.pdfForSelectedMembers') }}
+          </button>
+          <button
+            v-if="primaryHeaderAction !== 'auto-register'"
+            class="btn-secondary"
+            :disabled="!uploadedId || !pendingAutoRegistrationCount || autoRegistering"
+            @click="autoRegisterParticipants">
+            {{ autoRegistering ? 'Anmeldung läuft...' : 'Automatisch anmelden' }}
+          </button>
+          <button
+            v-if="primaryHeaderAction !== 'results'"
+            class="btn-secondary"
+            :disabled="!registrationSummary.registered"
+            @click="activeTab='results'">
+            Ergebnisse
+          </button>
+        </div>
+      </div>
       <div class="tabs">
+        <button :class="['tab', activeTab==='overview' ? 'active' : '']" @click="activeTab='overview'" :title="$t('officialTournaments.showParticipants')">Übersicht</button>
         <button :class="['tab', activeTab==='competitions' ? 'active' : '']" @click="activeTab='competitions'" :title="$t('officialTournaments.showCompetitions')">{{ $t('officialTournaments.competitions') }}</button>
-        <button :class="['tab', activeTab==='participants' ? 'active' : '']" @click="activeTab='participants'" :title="$t('officialTournaments.showParticipants')">{{ $t('officialTournaments.participants') }}</button>
         <button :class="['tab', activeTab==='results' ? 'active' : '']" @click="activeTab='results'" :title="$t('officialTournaments.showResults')">{{ $t('officialTournaments.results') }}</button>
       </div>
-      <div v-if="activeTab==='competitions'">
-      <h3>{{ $t('officialTournaments.competitions') }}</h3>
-      <table>
-        <thead>
-          <tr>
-            <th></th>
-            <th>{{ $t('officialTournaments.ageClassCompetition') }}</th>
-            <th>{{ $t('officialTournaments.startTime') }}</th>  
-            <th>{{ $t('officialTournaments.entryFee') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="(c,idx) in parsed.parsedData.competitions" :key="idx">
-            <tr>
-              <td style="width:2.5rem;">
-                <button class="btn-secondary" @click.prevent="toggleRow(c, idx)" :aria-expanded="isExpanded(c, idx)" title="Details ein-/ausklappen">
-                  {{ isExpanded(c, idx) ? '▾' : '▸' }}
-                </button>
-              </td>
-              <td>{{ c.ageClassCompetition || c.altersklasseWettbewerb }}</td>
-              <td>{{ c.startTime || c.startzeit || '–' }}</td>
-              <td>{{ c.entryFee || c.startgeld || '–' }}</td>
-            </tr>
-            <tr v-if="isExpanded(c, idx)" class="comp-details">
-              <td :colspan="4">
-                <div class="details">
-                  <div class="detail-item"><strong>{{ $t('officialTournaments.deadlineDate') }}</strong> {{ c.registrationDeadlineDate || c.meldeschlussDatum || '–' }}</div>
-                  <div class="detail-item"><strong>{{ $t('officialTournaments.deadlineOnline') }}</strong> {{ c.registrationDeadlineOnline || c.meldeschlussOnline || '–' }}</div>
-                  <div class="detail-item"><strong>{{ $t('officialTournaments.cutoffDate') }}</strong> {{ c.cutoffDate || c.stichtag || '–' }}</div>
-                  <div class="detail-item"><strong>{{ $t('officialTournaments.openTo') }}</strong> {{ c.openTo || c.offenFuer || '–' }}</div>
-                  <div class="detail-item"><strong>{{ $t('officialTournaments.preliminaryRound') }}</strong> {{ c.preliminaryRound || c.vorrunde || '–' }}</div>
-                  <div class="detail-item"><strong>{{ $t('officialTournaments.finalRound') }}</strong> {{ c.finalRound || c.endrunde || '–' }}</div>
-                  <div class="detail-item">
-                    <strong>{{ $t('officialTournaments.eligible') }} ({{ eligibleMembers(c).length }}):</strong>
-                    <table class="eligible-table" v-if="eligibleMembers(c).length">
-                      <thead>
-                        <tr>
-                          <th>{{ $t('officialTournaments.name') }}</th>
-                          <th>{{ $t('officialTournaments.birthDate') }}</th>
-                          <th>{{ $t('officialTournaments.age') }}</th>
-                          <th>{{ $t('officialTournaments.status') }}</th>
-                          <th>{{ $t('officialTournaments.action') }}</th>
-                          <th>{{ $t('officialTournaments.placement') }}</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr v-for="m in eligibleMembers(c)" :key="m.id">
-                          <td>
-                            <label style="display:flex; align-items:center; gap:.4rem;">
-                              <input type="checkbox"
-                                :checked="getParticipation(c.id, m.id).wants"
-                                @change="onToggleWants(c, m, $event.target.checked)"
-                                title="Teilnahme-Wunsch" />
-                              <span>{{ m.firstName }} {{ m.lastName }}</span>
-                            </label>
-                          </td>
-                          <td>{{ formatDateStr(m.birthDate) }}</td>
-                          <td>{{ ageOnRef(m, c) ?? '–' }}</td>
-                          <td class="status-cell">
-                            <span v-if="getParticipation(c.id, m.id).participated" class="status-badge status-played">{{ $t('officialTournaments.hasPlayed') }}</span>
-                            <span v-else-if="getParticipation(c.id, m.id).registered" class="status-badge status-registered">{{ $t('officialTournaments.registered') }}</span>
-                            <span v-else-if="getParticipation(c.id, m.id).wants" class="status-badge status-wants">{{ $t('officialTournaments.wantsToParticipate') }}</span>
-                            <span v-else class="status-badge status-none">{{ $t('officialTournaments.notInterested') }}</span>
-                          </td>
-                          <td class="action-cell">
-                            <button 
-                              v-if="!getParticipation(c.id, m.id).participated && !getParticipation(c.id, m.id).registered && getParticipation(c.id, m.id).wants" 
-                              @click="updateStatusForCompetition(c, m, 'register')"
-                              class="btn-status btn-register"
-                              :title="$t('officialTournaments.markAsRegistered')">
-                              {{ $t('officialTournaments.registered') }}
-                            </button>
-                            <button 
-                              v-else-if="getParticipation(c.id, m.id).registered && !getParticipation(c.id, m.id).participated" 
-                              @click="updateStatusForCompetition(c, m, 'participate')"
-                              class="btn-status btn-participate"
-                              :title="$t('officialTournaments.markAsParticipated')">
-                              {{ $t('officialTournaments.participated') }}
-                            </button>
-                            <button 
-                              v-else-if="getParticipation(c.id, m.id).participated" 
-                              @click="updateStatusForCompetition(c, m, 'reset')"
-                              class="btn-status btn-reset"
-                              :title="$t('officialTournaments.resetStatus')">
-                              {{ $t('common.reset') }}
-                            </button>
-                            <span v-else class="no-action">{{ $t('officialTournaments.checkBoxToActivate') }}</span>
-                          </td>
-                          <td>
-                            <input 
-                              v-if="getParticipation(c.id, m.id).participated"
-                              type="text" 
-                              :value="getParticipation(c.id, m.id).placement || ''"
-                              @change="onPlacementChange(c, m, $event.target.value)"
-                              placeholder="z.B. 3. Platz"
-                              class="placement-input"
-                            />
-                            <span v-else>{{ getParticipation(c.id, m.id).placement || '–' }}</span>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-      </div>
-      <div v-else-if="activeTab==='participants'">
-        <h3>{{ $t('officialTournaments.participants') }}</h3>
+      <div v-if="activeTab==='overview'">
+        <h3>Teilnehmer</h3>
         <div class="filters">
           <label for="participantsFilter">Status:</label>
           <select id="participantsFilter" v-model="participantsFilter">
-            <option value="wants_not_registered">Möchte teilnehmen, nicht angemeldet</option>
+            <option value="all">Ohne Filter</option>
+            <option value="open">Offen / noch nicht angemeldet</option>
             <option value="registered">Angemeldet</option>
             <option value="participated">Hat gespielt</option>
           </select>
           <div style="flex:1;"></div>
+          <button
+            v-if="participantsFilter === 'open'"
+            class="btn-secondary"
+            :disabled="!participantsRows.some(row => row.wants)"
+            @click="batchUpdateParticipants('register')">
+            Alle Interessierten als angemeldet markieren
+          </button>
+          <button
+            v-if="participantsFilter === 'registered'"
+            class="btn-secondary"
+            :disabled="!participantsRows.length"
+            @click="batchUpdateParticipants('participate')">
+            Alle als teilgenommen markieren
+          </button>
+          <button
+            v-if="participantsFilter === 'participated'"
+            class="btn-secondary"
+            :disabled="!participantsRows.length"
+            @click="batchUpdateParticipants('reset')">
+            Alle zurücksetzen
+          </button>
           <button class="btn-primary" @click="generateParticipantsPdf">{{ $t('officialTournaments.participantsPdf') }}</button>
         </div>
         <table>
@@ -281,33 +264,40 @@
                     <span v-else class="status-badge status-none">Nicht interessiert</span>
                   </td>
                   <td class="action-cell">
-                    <button 
-                      v-if="!item.participated && !item.registered && item.wants" 
+                    <button
+                      v-if="!item.participated && !item.registered && !item.wants"
+                      @click="markMemberInterested(group.memberId)"
+                      class="btn-status btn-register"
+                      title="Als interessiert markieren">
+                      Interessiert
+                    </button>
+                    <button
+                      v-else-if="!item.participated && !item.registered && item.wants"
                       @click="updateStatus(item, 'register')"
                       class="btn-status btn-register"
                       title="Als angemeldet markieren">
                       Angemeldet
                     </button>
-                    <button 
-                      v-else-if="item.registered && !item.participated" 
+                    <button
+                      v-else-if="item.registered && !item.participated"
                       @click="updateStatus(item, 'participate')"
                       class="btn-status btn-participate"
                       title="Als teilgenommen markieren">
                       Teilgenommen
                     </button>
-                    <button 
-                      v-else-if="item.participated" 
+                    <button
+                      v-else-if="item.participated"
                       @click="updateStatus(item, 'reset')"
                       class="btn-status btn-reset"
                       title="Status zurücksetzen">
                       Zurücksetzen
                     </button>
-                    <span v-else class="no-action">Checkbox aktivieren</span>
+                    <span v-else class="no-action">Keine Aktion</span>
                   </td>
                   <td>
-                    <input 
+                    <input
                       v-if="item.participated"
-                      type="text" 
+                      type="text"
                       :value="item.placement || ''"
                       @change="updatePlacement(item, $event.target.value)"
                       placeholder="z.B. 3. Platz"
@@ -324,6 +314,96 @@
           </tbody>
         </table>
       </div>
+      <div v-else-if="activeTab==='competitions'">
+      <h3>{{ $t('officialTournaments.competitions') }}</h3>
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>{{ $t('officialTournaments.ageClassCompetition') }}</th>
+            <th>{{ $t('officialTournaments.startTime') }}</th>  
+            <th>Status</th>
+            <th>{{ $t('officialTournaments.entryFee') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="(c,idx) in parsed.parsedData.competitions" :key="idx">
+            <tr>
+              <td style="width:2.5rem;">
+                <button class="btn-secondary" @click.prevent="toggleRow(c, idx)" :aria-expanded="isExpanded(c, idx)" title="Details ein-/ausklappen">
+                  {{ isExpanded(c, idx) ? '▾' : '▸' }}
+                </button>
+              </td>
+              <td>{{ c.ageClassCompetition || c.altersklasseWettbewerb }}</td>
+              <td>{{ c.startTime || c.startzeit || '–' }}</td>
+              <td>
+                <div class="competition-summary">
+                  <span class="competition-summary-chip">{{ eligibleMembers(c).length }} spielberechtigt</span>
+                  <span class="competition-summary-chip">{{ competitionStatusSummary(c).interested }} interessiert</span>
+                  <span class="competition-summary-chip">{{ competitionStatusSummary(c).registered }} angemeldet</span>
+                  <span class="competition-summary-chip">{{ competitionStatusSummary(c).participated }} gespielt</span>
+                </div>
+              </td>
+              <td>{{ c.entryFee || c.startgeld || '–' }}</td>
+            </tr>
+            <tr v-if="isExpanded(c, idx)" class="comp-details">
+              <td :colspan="5">
+                <div class="details">
+                  <div class="competition-detail-grid">
+                    <div class="detail-item"><strong>{{ $t('officialTournaments.deadlineDate') }}</strong> {{ c.registrationDeadlineDate || c.meldeschlussDatum || '–' }}</div>
+                    <div class="detail-item"><strong>{{ $t('officialTournaments.deadlineOnline') }}</strong> {{ c.registrationDeadlineOnline || c.meldeschlussOnline || '–' }}</div>
+                    <div class="detail-item"><strong>{{ $t('officialTournaments.cutoffDate') }}</strong> {{ c.cutoffDate || c.stichtag || '–' }}</div>
+                    <div class="detail-item"><strong>{{ $t('officialTournaments.openTo') }}</strong> {{ c.openTo || c.offenFuer || '–' }}</div>
+                    <div class="detail-item"><strong>{{ $t('officialTournaments.preliminaryRound') }}</strong> {{ c.preliminaryRound || c.vorrunde || '–' }}</div>
+                    <div class="detail-item"><strong>{{ $t('officialTournaments.finalRound') }}</strong> {{ c.finalRound || c.endrunde || '–' }}</div>
+                  </div>
+                  <div class="competition-active-block">
+                    <strong>Aktive Meldungen</strong>
+                    <div v-if="activeCompetitionMembers(c).length" class="competition-active-list">
+                      <div v-for="row in activeCompetitionMembers(c)" :key="row.key" class="competition-active-row">
+                        <div class="competition-active-main">
+                          <span class="competition-active-name">{{ row.memberName }}</span>
+                          <span :class="['status-badge', row.statusClass]">{{ row.statusText }}</span>
+                        </div>
+                        <div class="competition-active-actions">
+                          <button
+                            v-if="row.wants && !row.registered && !row.participated"
+                            @click="updateStatus(row, 'register')"
+                            class="btn-status btn-register">
+                            Angemeldet
+                          </button>
+                          <button
+                            v-else-if="row.registered && !row.participated"
+                            @click="updateStatus(row, 'participate')"
+                            class="btn-status btn-participate">
+                            Teilgenommen
+                          </button>
+                          <button
+                            v-else-if="row.participated"
+                            @click="updateStatus(row, 'reset')"
+                            class="btn-status btn-reset">
+                            Zurücksetzen
+                          </button>
+                          <input
+                            v-if="row.participated"
+                            type="text"
+                            :value="row.placement || ''"
+                            @change="updatePlacement(row, $event.target.value)"
+                            placeholder="z.B. 3. Platz"
+                            class="placement-input"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <p v-else class="competition-empty-note">Noch keine aktiven Meldungen in dieser Konkurrenz.</p>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+      </div>
       <div v-else>
         <h3>{{ $t('officialTournaments.results') }}</h3>
         <table>
@@ -332,19 +412,47 @@
               <th>Mitglied</th>
               <th>Konkurrenz</th>
               <th>Startzeit</th>
-              <th>Angemeldet</th>
-              <th>Teilgenommen</th>
+              <th>Status</th>
+              <th>Aktion</th>
               <th>Platzierung</th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="row in resultsRows" :key="row.key">
-              <td>{{ row.memberName }}</td>
-              <td>{{ row.competitionName }}</td>
-              <td>{{ row.start }}</td>
-              <td>{{ row.registered ? 'Ja' : 'Nein' }}</td>
-              <td>{{ row.participated ? 'Ja' : 'Nein' }}</td>
-              <td>{{ row.placement || '–' }}</td>
+            <template v-for="group in resultsGroups" :key="group.memberId">
+              <template v-for="(row, idx) in group.items" :key="row.key">
+                <tr>
+                  <td v-if="idx === 0" :rowspan="group.items.length" class="member-cell">{{ group.memberName }}</td>
+                  <td class="indented">{{ row.competitionName }}</td>
+                  <td>{{ row.start }}</td>
+                  <td class="status-cell">
+                    <span :class="['status-badge', row.participated ? 'status-played' : 'status-registered']">
+                      {{ row.participated ? 'Hat gespielt' : 'Angemeldet' }}
+                    </span>
+                  </td>
+                  <td class="action-cell">
+                    <button
+                      @click="updateStatus(row, 'reset')"
+                      class="btn-status btn-reset"
+                      title="Status zurücksetzen">
+                      Zurücksetzen
+                    </button>
+                  </td>
+                  <td>
+                    <input
+                      v-if="row.participated"
+                      type="text"
+                      :value="row.placement || ''"
+                      @change="updatePlacement(row, $event.target.value)"
+                      placeholder="z.B. 3. Platz"
+                      class="placement-input"
+                    />
+                    <span v-else>{{ row.placement || '–' }}</span>
+                  </td>
+                </tr>
+              </template>
+            </template>
+            <tr v-if="!resultsGroups.length">
+              <td colspan="6"><em>Keine Ergebnisse vorhanden.</em></td>
             </tr>
           </tbody>
         </table>
@@ -439,8 +547,8 @@ export default {
       selectedMemberIdForDialog: null,
       participationMap: {}, // key: `${competitionId}-${memberId}` => { wants, registered, participated, placement }
       collator: new Intl.Collator('de', { sensitivity: 'base' }),
-      activeTab: 'competitions',
-      participantsFilter: 'wants_not_registered',
+      activeTab: 'overview',
+      participantsFilter: 'all',
       topActiveTab: 'events',
       loadingClubParticipations: false,
       clubParticipationRowsData: [],
@@ -496,6 +604,25 @@ export default {
         return this.collator.compare(a.competitionName, b.competitionName);
       });
     },
+    resultsGroups() {
+      const groups = [];
+      const byMember = new Map();
+      for (const row of this.resultsRows) {
+        const key = row.memberName;
+        if (!byMember.has(key)) byMember.set(key, []);
+        byMember.get(key).push(row);
+      }
+      for (const [memberName, items] of byMember.entries()) {
+        items.sort((a, b) => this.collator.compare(a.competitionName, b.competitionName));
+        groups.push({
+          memberName,
+          memberId: items[0]?.key.split('-')[1] || memberName,
+          items,
+        });
+      }
+      groups.sort((a, b) => this.collator.compare(a.memberName, b.memberName));
+      return groups;
+    },
     participantsRows() {
       const comps = (this.parsed?.parsedData?.competitions) || [];
       const compById = Object.fromEntries(comps.map(c => [String(c.id), c]));
@@ -536,8 +663,10 @@ export default {
           placement: current.placement || null,
           wants: !!current.wants,
         };
-        if (this.participantsFilter === 'wants_not_registered') {
-          if (base.wants && !base.registered && !base.participated) rows.push(base);
+        if (this.participantsFilter === 'all') {
+          rows.push(base);
+        } else if (this.participantsFilter === 'open') {
+          if (!base.registered && !base.participated) rows.push(base);
         } else if (this.participantsFilter === 'registered') {
           if (base.registered && !base.participated) rows.push(base);
         } else if (this.participantsFilter === 'participated') {
@@ -569,6 +698,171 @@ export default {
       groups.sort((a, b) => this.collator.compare(a.memberName, b.memberName));
       return groups;
     },
+    participantOverviewRows() {
+      const allRows = [];
+      const comps = (this.parsed?.parsedData?.competitions) || [];
+      const compById = Object.fromEntries(comps.map(c => [String(c.id), c]));
+      const seen = new Set();
+      const merged = [];
+
+      if (Array.isArray(this.parsed?.participation)) {
+        for (const e of this.parsed.participation) {
+          const key = `${e.competitionId}-${e.memberId}`;
+          if (seen.has(key)) continue;
+          seen.add(key);
+          merged.push({ competitionId: String(e.competitionId), memberId: String(e.memberId) });
+        }
+      }
+
+      for (const key of Object.keys(this.participationMap || {})) {
+        if (seen.has(key)) continue;
+        const [competitionId, memberId] = key.split('-');
+        merged.push({ competitionId: String(competitionId), memberId: String(memberId) });
+      }
+
+      const byMember = new Map();
+      for (const entry of merged) {
+        const competitionId = String(entry.competitionId);
+        const memberId = String(entry.memberId);
+        const competition = compById[competitionId];
+        if (!competition) continue;
+        const participation = this.getParticipation(competitionId, memberId);
+        if (!byMember.has(memberId)) {
+          byMember.set(memberId, {
+            memberId,
+            memberName: this.memberNameById(memberId),
+            competitionNames: [],
+            wantsCount: 0,
+            readyCount: 0,
+            registeredCount: 0,
+            participatedCount: 0,
+          });
+        }
+        const row = byMember.get(memberId);
+        const competitionName = competition.ageClassCompetition || competition.altersklasseWettbewerb || '';
+        if (competitionName && !row.competitionNames.includes(competitionName)) {
+          row.competitionNames.push(competitionName);
+        }
+        if (participation.wants) row.wantsCount += 1;
+        if (participation.wants && !participation.registered && !participation.participated) row.readyCount += 1;
+        if (participation.registered) row.registeredCount += 1;
+        if (participation.participated) row.participatedCount += 1;
+      }
+
+      for (const selectedMemberId of this.selectedMemberIds || []) {
+        const memberId = String(selectedMemberId);
+        if (byMember.has(memberId)) continue;
+        const member = (this.members || []).find((entry) => String(entry.id) === memberId);
+        if (!member) continue;
+
+        const eligibleCompetitions = comps.filter((competition) => this.isEligibleForCompetition(member, competition));
+        if (!eligibleCompetitions.length) continue;
+
+        byMember.set(memberId, {
+          memberId,
+          memberName: this.memberNameById(memberId),
+          competitionNames: eligibleCompetitions.map((competition) => competition.ageClassCompetition || competition.altersklasseWettbewerb || '').filter(Boolean),
+          wantsCount: 0,
+          readyCount: 0,
+          registeredCount: 0,
+          participatedCount: 0,
+        });
+      }
+
+      for (const row of byMember.values()) {
+        row.competitionNames.sort((a, b) => this.collator.compare(a, b));
+        row.canMarkInterested = row.competitionNames.length > 0
+          && row.wantsCount === 0
+          && row.registeredCount === 0
+          && row.participatedCount === 0;
+        if (row.participatedCount > 0) {
+          row.statusText = 'Hat gespielt';
+          row.statusClass = 'status-played';
+        } else if (row.registeredCount > 0) {
+          row.statusText = 'Angemeldet';
+          row.statusClass = 'status-registered';
+        } else if (row.readyCount > 0) {
+          row.statusText = 'Möchte teilnehmen';
+          row.statusClass = 'status-wants';
+        } else {
+          row.statusText = 'Nicht interessiert';
+          row.statusClass = 'status-none';
+        }
+        allRows.push(row);
+      }
+
+      return allRows.sort((a, b) => this.collator.compare(a.memberName, b.memberName));
+    },
+    registrationSummary() {
+      return {
+        registered: Object.values(this.participationMap || {}).filter((entry) => entry?.registered && !entry?.participated).length,
+        participated: Object.values(this.participationMap || {}).filter((entry) => entry?.participated).length
+      };
+    },
+    tournamentLocationLabel() {
+      const places = this.parsed?.parsedData?.austragungsorte || [];
+      const placeLine = places.find((entry) => /^PLZ\s*\/\s*Ort:/i.test(entry || ''));
+      return placeLine ? placeLine.replace(/^PLZ\s*\/\s*Ort:/i, '').trim() : '';
+    },
+    registrationDeadlineInfo() {
+      const deadlines = [
+        ...(this.parsed?.parsedData?.meldeschluesse || []),
+        ...(((this.parsed?.parsedData?.competitions) || []).flatMap((competition) => [
+          competition.registrationDeadlineDate,
+          competition.registrationDeadlineOnline,
+          competition.meldeschlussDatum,
+          competition.meldeschlussOnline,
+        ])),
+      ].filter(Boolean);
+
+      let earliest = null;
+      let earliestText = '';
+      for (const entry of deadlines) {
+        const parsed = this.parseDateTimeFlexible(entry);
+        if (!parsed) continue;
+        if (!earliest || parsed.getTime() < earliest.getTime()) {
+          earliest = parsed;
+          earliestText = String(entry);
+        }
+      }
+
+      if (!earliest) {
+        return { label: 'Meldeschluss unbekannt', statusClass: 'is-neutral' };
+      }
+
+      if (earliest.getTime() < Date.now()) {
+        return { label: `Meldeschluss abgelaufen: ${earliestText}`, statusClass: 'is-danger' };
+      }
+
+      return { label: `Meldeschluss offen: ${earliestText}`, statusClass: 'is-success' };
+    },
+    workflowNotices() {
+      const notices = [];
+      if (this.pendingAutoRegistrationCount > 0) {
+        notices.push({
+          label: `${this.pendingAutoRegistrationCount} zur Anmeldung bereit`,
+          statusClass: 'is-warning',
+        });
+      }
+      if (this.registrationSummary.registered > 0) {
+        notices.push({
+          label: `${this.registrationSummary.registered} Ergebnisse offen`,
+          statusClass: 'is-info',
+        });
+      }
+      if (!this.pendingAutoRegistrationCount && !this.registrationSummary.registered) {
+        notices.push({
+          label: 'Keine offenen Aufgaben',
+          statusClass: 'is-neutral',
+        });
+      }
+      return notices;
+    },
+    primaryHeaderAction() {
+      if (this.pendingAutoRegistrationCount > 0) return 'auto-register';
+      if (this.registrationSummary.registered > 0) return 'results';
+      return 'members';
+    },
     pendingAutoRegistrationCount() {
       return Object.values(this.participationMap || {}).filter((entry) =>
         entry?.wants && !entry?.registered && !entry?.participated
@@ -612,6 +906,51 @@ export default {
       if (byFirst !== 0) return byFirst;
       return this.collator.compare(lnA, lnB);
     },
+    competitionStatusSummary(c) {
+      const summary = { interested: 0, registered: 0, participated: 0 };
+      for (const member of this.eligibleMembers(c)) {
+        const participation = this.getParticipation(c.id, member.id);
+        if (participation.participated) {
+          summary.participated += 1;
+        } else if (participation.registered) {
+          summary.registered += 1;
+        } else if (participation.wants) {
+          summary.interested += 1;
+        }
+      }
+      return summary;
+    },
+    activeCompetitionMembers(c) {
+      const rows = [];
+      for (const member of this.eligibleMembers(c)) {
+        const participation = this.getParticipation(c.id, member.id);
+        if (!participation.wants && !participation.registered && !participation.participated) continue;
+        const row = {
+          key: `${c.id}-${member.id}`,
+          memberName: this.memberNameById(member.id),
+          competitionName: c.ageClassCompetition || c.altersklasseWettbewerb || '',
+          start: String(c.startTime || c.startzeit || '–'),
+          wants: !!participation.wants,
+          registered: !!participation.registered,
+          participated: !!participation.participated,
+          placement: participation.placement || null,
+          statusClass: 'status-none',
+          statusText: 'Nicht interessiert',
+        };
+        if (row.participated) {
+          row.statusClass = 'status-played';
+          row.statusText = 'Hat gespielt';
+        } else if (row.registered) {
+          row.statusClass = 'status-registered';
+          row.statusText = 'Angemeldet';
+        } else if (row.wants) {
+          row.statusClass = 'status-wants';
+          row.statusText = 'Möchte teilnehmen';
+        }
+        rows.push(row);
+      }
+      return rows.sort((a, b) => this.collator.compare(a.memberName, b.memberName));
+    },
     generateParticipantsPdf() {
       if (!this.parsed) return;
       const title = this.parsed?.parsedData?.title || 'Offizielles Turnier';
@@ -1004,6 +1343,7 @@ export default {
       } catch (error) {
         console.error('Fehler beim Aktualisieren des Status:', error);
         this.showInfo(this.$t('common.error'), this.$t('officialTournaments.updateStatusError'), getSafeErrorMessage(error), 'error');
+        throw error;
       }
     },
     async updatePlacement(item, value) {
@@ -1017,6 +1357,69 @@ export default {
         this.showInfo(this.$t('common.error'), this.$t('officialTournaments.updatePlacementError'), getSafeErrorMessage(error), 'error');
       }
     },
+    async batchUpdateParticipants(action) {
+      const rows = action === 'register'
+        ? this.participantsRows.filter((row) => row.wants && !row.registered && !row.participated)
+        : [...this.participantsRows];
+      if (!rows.length) return;
+
+      const actionLabel = action === 'register'
+        ? 'als angemeldet markieren'
+        : action === 'participate'
+          ? 'als teilgenommen markieren'
+          : 'zurücksetzen';
+
+      const confirmed = await this.showConfirm(
+        'Sammelaktion',
+        `${rows.length} Einträge wirklich ${actionLabel}?`,
+        '',
+        action === 'reset' ? 'warning' : 'info'
+      );
+      if (!confirmed) return;
+
+      let processed = 0;
+      const failures = [];
+
+      for (const row of rows) {
+        try {
+          await this.updateStatus(row, action);
+          processed += 1;
+        } catch (error) {
+          failures.push(`${row.memberName} / ${row.competitionName}`);
+        }
+      }
+
+      if (failures.length) {
+        await this.showInfo(
+          'Teilweise erfolgreich',
+          `${processed} von ${rows.length} Einträgen wurden aktualisiert.`,
+          failures.join('\n'),
+          'warning'
+        );
+        return;
+      }
+
+      await this.showInfo(
+        'Erfolg',
+        `${processed} Einträge wurden ${actionLabel}.`,
+        '',
+        'success'
+      );
+    },
+    async markMemberInterested(memberId) {
+      const competitions = ((this.parsed?.parsedData?.competitions) || [])
+        .filter((competition) => {
+          const member = (this.members || []).find((entry) => String(entry.id) === String(memberId));
+          return member && this.isEligibleForCompetition(member, competition);
+        });
+
+      for (const competition of competitions) {
+        const participation = this.getParticipation(competition.id, memberId);
+        if (participation.wants || participation.registered || participation.participated) continue;
+        participation.wants = true;
+        await this.saveParticipation(competition.id, memberId);
+      }
+    },
     async updateStatusForCompetition(competition, member, action) {
       try {
         const response = await apiClient.post(`/official-tournaments/${this.currentClub}/${this.uploadedId}/status`, {
@@ -1178,6 +1581,18 @@ export default {
       const d = new Date(t);
       return isNaN(d.getTime()) ? null : d;
     },
+    parseDateTimeFlexible(s) {
+      if (!s || typeof s !== 'string') return null;
+      const t = s.trim();
+      let m = t.match(/(\d{1,2})\.(\d{1,2})\.(\d{4})(?:\s+(\d{1,2}):(\d{2}))?/);
+      if (m) {
+        const hours = Number(m[4] || 0);
+        const minutes = Number(m[5] || 0);
+        const d = new Date(Number(m[3]), Number(m[2]) - 1, Number(m[1]), hours, minutes);
+        return isNaN(d.getTime()) ? null : d;
+      }
+      return this.parseDateFlexible(s);
+    },
     getCutoffDate(c) {
       let val = c.cutoffDate || c.stichtag || '';
       if (!val && (c.performanceClass || c.leistungsklasse)) {
@@ -1366,13 +1781,39 @@ export default {
 
 <style scoped>
 .official-tournaments { display: flex; flex-direction: column; gap: 0.75rem; }
+.workspace-admin { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 1rem; align-items: start; }
+.admin-panel { background: #fff; border: 1px solid #dbe3f0; border-radius: 12px; padding: .9rem 1rem; box-shadow: 0 4px 18px rgba(15, 35, 95, 0.05); }
+.panel-header { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .75rem; }
+.panel-header h3 { margin: 0; color: #17366d; font-size: 1rem; }
+.panel-header p { margin: 0; color: #64748b; font-size: .9rem; }
 .event-list { list-style: none; padding: 0; margin: 0; }
-.event-item { display: flex; align-items: center; gap: 0.5rem; }
+.event-item { display: flex; align-items: center; gap: 0.5rem; padding: .45rem .5rem; border-radius: 8px; }
+.event-item.selected { background: #eef4ff; border: 1px solid #d1defd; }
 .event-title { flex: 1; }
 .event-date { flex-shrink: 0; }
 .title-input { flex: 1; min-width: 0; padding: 0.25rem 0.4rem; font-size: inherit; }
 .btn-icon { background: none; border: none; cursor: pointer; padding: 0.25rem; opacity: 0.7; }
 .btn-icon:hover { opacity: 1; }
+.selected-tournament-strip { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%); border: 1px solid #dbe6ff; border-radius: 12px; padding: .8rem 1rem; }
+.selected-tournament-main { display: flex; flex-direction: column; gap: .15rem; }
+.selected-tournament-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #5f6b85; }
+.selected-tournament-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: #49566c; font-size: .92rem; }
+.overview-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
+.overview-main { display: flex; flex-direction: column; gap: .9rem; flex: 1; min-width: min(100%, 520px); }
+.tournament-headline { display: flex; flex-direction: column; gap: .35rem; }
+.tournament-title { margin: 0; font-size: 1.35rem; line-height: 1.2; color: #17366d; }
+.tournament-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: #5f6b85; font-size: .95rem; }
+.workflow-badges { display: flex; flex-wrap: wrap; gap: .45rem; }
+.workflow-badge { display: inline-flex; align-items: center; padding: .28rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1px solid transparent; }
+.workflow-badge.is-success { background: #e6f6ea; color: #1e6b34; border-color: #b9e2c4; }
+.workflow-badge.is-warning { background: #fff4db; color: #8a5a00; border-color: #f2d08a; }
+.workflow-badge.is-danger { background: #fdeaea; color: #962d2d; border-color: #efc1c1; }
+.workflow-badge.is-info { background: #e8f1ff; color: #2453a6; border-color: #bfd2ff; }
+.workflow-badge.is-neutral { background: #f2f4f7; color: #556070; border-color: #d8dee8; }
+.overview-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: .75rem; }
+.stat-card { background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%); border: 1px solid #dbe6ff; border-radius: 10px; padding: .75rem .9rem; }
+.stat-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #5f6b85; margin-bottom: .25rem; }
+.stat-value { font-size: 1.4rem; color: #17366d; }
 .top-actions { display: flex; gap: .5rem; margin-bottom: .5rem; }
 .tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border-color); margin: .25rem 0 .5rem; }
 .tab { background: #f8f9fb; color: var(--text-color, #222); border: none; padding: .4rem .6rem; cursor: pointer; border-bottom: 2px solid transparent; }
@@ -1380,6 +1821,7 @@ export default {
 .tab.active { border-bottom-color: var(--primary, #2b7cff); font-weight: bold; color: var(--primary, #2b7cff); background: #e9f1ff; }
 .filters { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; }
 .uploader { display: flex; gap: 0.5rem; align-items: center; }
+.empty-state.compact { padding: .25rem 0; }
 table { width: 100%; border-collapse: collapse; }
 th, td { border-bottom: 1px solid var(--border-color); padding: 0.5rem; text-align: left; }
 .comp-details td { background: var(--background-light, #fafafa); }
@@ -1397,6 +1839,19 @@ th, td { border-bottom: 1px solid var(--border-color); padding: 0.5rem; text-ali
 .eligible-table .action-cell { text-align: center; vertical-align: middle; }
 .indented { padding-left: 1.25rem; }
 .member-cell { font-weight: 600; vertical-align: top; }
+.overview-table td { vertical-align: top; }
+.competition-summary { display: flex; flex-wrap: wrap; gap: .3rem; }
+.competition-summary-chip { display: inline-flex; align-items: center; padding: .18rem .45rem; border-radius: 999px; background: #f0f4f8; border: 1px solid #d6dde6; font-size: .8rem; color: #415066; }
+.competition-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: .45rem .9rem; }
+.competition-active-block { margin-top: .85rem; display: flex; flex-direction: column; gap: .55rem; }
+.competition-active-list { display: flex; flex-direction: column; gap: .45rem; }
+.competition-active-row { display: flex; justify-content: space-between; gap: .8rem; align-items: center; padding: .55rem .65rem; background: #fff; border: 1px solid #d8dee8; border-radius: 8px; }
+.competition-active-main { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
+.competition-active-name { font-weight: 600; }
+.competition-active-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
+.competition-empty-note { margin: 0; color: #6b7280; font-style: italic; }
+.competition-chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
+.competition-chip { display: inline-flex; align-items: center; padding: .2rem .45rem; border-radius: 999px; background: #f0f4f8; border: 1px solid #d6dde6; font-size: .83rem; }
 .empty-first { border-bottom: 1px solid var(--border-color); }
 .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 1000; }
 .modal { background: #fff; border-radius: 8px; width: min(800px, 92vw); max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
@@ -1565,6 +2020,28 @@ th, td { border-bottom: 1px solid var(--border-color); padding: 0.5rem; text-ali
 }
 
 @media (max-width: 768px) {
+  .workspace-admin {
+    grid-template-columns: 1fr;
+  }
+
+  .overview-stats {
+    grid-template-columns: repeat(2, minmax(120px, 1fr));
+  }
+
+  .tournament-meta {
+    flex-direction: column;
+    gap: .2rem;
+  }
+
+  .competition-detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .competition-active-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   .member-dialog-layout {
     grid-template-columns: 1fr;
   }