<template>
    <div class="tab-content">
        <TournamentClassSelector
            v-if="selectedDate && selectedDate !== 'new'"
            :model-value="selectedViewClass"
            :tournament-classes="tournamentClasses"
            :selected-date="selectedDate"
            @update:modelValue="$emit('update:selectedViewClass', $event)"
        />
        <section class="participants">
            <h4>{{ $t('tournaments.participants') }}</h4>
            <div class="participants-summary">
                <span class="summary-chip">{{ allParticipantsCount }} {{ $t('tournaments.participants') }}</span>
                <span v-if="hasTournamentClasses && unassignedParticipantsCount > 0" class="summary-chip summary-chip-warning">
                    {{ unassignedParticipantsCount }} {{ $t('tournaments.withoutClass') }}
                </span>
                <span v-if="participantsWithConflictsCount > 0" class="summary-chip summary-chip-warning">
                    {{ participantsWithConflictsCount }} {{ $t('tournaments.participantConflicts') }}
                </span>
                <span v-if="unpairedDoublesCount > 0" class="summary-chip summary-chip-warning">
                    {{ unpairedDoublesCount }} {{ $t('tournaments.unpairedDoubles') }}
                </span>
                <span v-if="allowsExternal && externalParticipantsCount > 0" class="summary-chip">
                    {{ externalParticipantsCount }} {{ $t('tournaments.external') }}
                </span>
            </div>
            <div class="participants-filters">
                <button type="button" class="filter-chip" :class="{ active: participantFilter === 'all' }" @click="participantFilter = 'all'">
                    {{ $t('common.all') }}
                    <span class="filter-chip-count">{{ allParticipantsCount }}</span>
                </button>
                <button
                    v-if="hasTournamentClasses && unassignedParticipantsCount > 0"
                    type="button"
                    class="filter-chip filter-chip-warning"
                    :class="{ active: participantFilter === 'withoutClass' }"
                    @click="participantFilter = 'withoutClass'"
                >
                    {{ $t('tournaments.withoutClass') }}
                    <span class="filter-chip-count">{{ unassignedParticipantsCount }}</span>
                </button>
                <button
                    v-if="allowsExternal && externalParticipantsCount > 0"
                    type="button"
                    class="filter-chip"
                    :class="{ active: participantFilter === 'external' }"
                    @click="participantFilter = 'external'"
                >
                    {{ $t('tournaments.external') }}
                    <span class="filter-chip-count">{{ externalParticipantsCount }}</span>
                </button>
                <button
                    v-if="gaveUpParticipantsCount > 0"
                    type="button"
                    class="filter-chip"
                    :class="{ active: participantFilter === 'gaveUp' }"
                    @click="participantFilter = 'gaveUp'"
                >
                    {{ $t('tournaments.gaveUp') }}
                    <span class="filter-chip-count">{{ gaveUpParticipantsCount }}</span>
                </button>
            </div>
            <div v-if="hasTournamentClasses && unassignedParticipantsCount > 0" class="participants-callout">
                <div class="participants-callout-main">
                    <div>
                        <strong>{{ $t('tournaments.withoutClass') }}:</strong>
                        {{ $t('tournaments.participantsNeedClassAssignment', { count: unassignedParticipantsCount }) }}
                        <div v-if="autoAssignableParticipantsCount > 0" class="participants-callout-hint">
                            {{ $t('tournaments.autoAssignableParticipantsHint', { count: autoAssignableParticipantsCount }) }}
                        </div>
                    </div>
                    <button
                        v-if="autoAssignableParticipantsCount > 0"
                        type="button"
                        class="btn-secondary btn-callout-action"
                        @click="$emit('auto-assign-eligible')"
                    >
                        {{ $t('tournaments.autoAssignEligible') }}
                    </button>
                </div>
                <div v-if="ambiguousAssignableParticipants.length > 0" class="assignment-review">
                    <strong class="assignment-review-title">
                        {{ $t('tournaments.assignmentReviewTitle', { count: ambiguousAssignableParticipants.length }) }}
                    </strong>
                    <div class="assignment-review-list">
                        <div
                            v-for="entry in ambiguousAssignableParticipants"
                            :key="`assign-review-${entry.participant.id}`"
                            class="assignment-review-item"
                        >
                            <span class="assignment-review-name">{{ participantDisplayName(entry.participant) }}</span>
                            <div class="assignment-review-actions">
                                <button
                                    v-for="classItem in entry.eligibleClasses"
                                    :key="`assign-review-${entry.participant.id}-${classItem.id}`"
                                    type="button"
                                    class="assignment-suggestion-button"
                                    @click="$emit('assign-participant-class', entry.participant, classItem.id)"
                                >
                                    {{ classItem.name }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="participants-content">
                <div class="participants-layout">
                    <div class="add-participant" v-if="canAssignClass">
                        <details class="add-participant-section" :open="allParticipantsCount === 0">
                            <summary>{{ $t('tournaments.addClubMember') }}</summary>
                            <div class="add-participant-row">
                                <select :value="selectedMember" @change="$emit('update:selectedMember', $event.target.value ? parseInt($event.target.value) : null)" class="member-select">
                                    <option :value="null">{{ $t('tournaments.selectParticipant') }}</option>
                                    <option v-for="member in filteredClubMembers" :key="member.id" :value="member.id">
                                        {{ member.firstName }}
                                        {{ member.lastName }}
                                    </option>
                                </select>
                                <button @click="$emit('add-participant')" class="btn-add" :disabled="!selectedMember">{{ $t('tournaments.add') }}</button>
                                <button v-if="hasTrainingToday && !allowsExternal" @click="$emit('load-participants-from-training')" class="training-btn">
                                    📅 {{ $t('tournaments.loadFromTraining') }}
                                </button>
                            </div>
                        </details>
                        <details v-if="allowsExternal" class="add-participant-section">
                            <summary>{{ $t('tournaments.addExternalParticipant') }}</summary>
                            <div class="add-participant-row">
                                <input 
                                    type="text" 
                                    :value="newExternalParticipant.firstName" 
                                    @input="$emit('update:newExternalParticipant', { ...newExternalParticipant, firstName: $event.target.value })"
                                    :placeholder="$t('tournaments.firstName')" 
                                    class="external-input" 
                                />
                                <input 
                                    type="text" 
                                    :value="newExternalParticipant.lastName" 
                                    @input="$emit('update:newExternalParticipant', { ...newExternalParticipant, lastName: $event.target.value })"
                                    :placeholder="$t('tournaments.lastName')" 
                                    class="external-input" 
                                />
                                <select 
                                    :value="newExternalParticipant.gender" 
                                    @change="$emit('update:newExternalParticipant', { ...newExternalParticipant, gender: $event.target.value })"
                                    class="external-input"
                                >
                                    <option value="unknown">{{ $t('members.genderUnknown') }}</option>
                                    <option value="male">{{ $t('members.genderMale') }}</option>
                                    <option value="female">{{ $t('members.genderFemale') }}</option>
                                    <option value="diverse">{{ $t('members.genderDiverse') }}</option>
                                </select>
                                <input 
                                    type="text" 
                                    :value="newExternalParticipant.club" 
                                    @input="$emit('update:newExternalParticipant', { ...newExternalParticipant, club: $event.target.value })"
                                    :placeholder="$t('tournaments.club') + ' (' + $t('tournaments.optional') + ')'" 
                                    class="external-input" 
                                />
                                <input 
                                    type="date" 
                                    :value="newExternalParticipant.birthDate" 
                                    @input="$emit('update:newExternalParticipant', { ...newExternalParticipant, birthDate: $event.target.value })"
                                    :placeholder="$t('tournaments.birthdate') + ' (' + $t('tournaments.optional') + ')'" 
                                    class="external-input" 
                                />
                                <button 
                                    @click="$emit('add-external-participant')" 
                                    class="btn-add" 
                                    :disabled="!newExternalParticipant.firstName || !newExternalParticipant.lastName"
                                >
                                    {{ $t('tournaments.add') }}
                                </button>
                            </div>
                            <div class="add-participant-row add-participant-row-contact">
                                <input 
                                    type="email" 
                                    :value="newExternalParticipant.email" 
                                    @input="$emit('update:newExternalParticipant', { ...newExternalParticipant, email: $event.target.value })"
                                    :placeholder="$t('tournaments.email') + ' (' + $t('tournaments.optional') + ', ' + $t('tournaments.forForwarding') + ')'" 
                                    class="external-input external-input-email" 
                                />
                                <input 
                                    type="text" 
                                    :value="newExternalParticipant.address" 
                                    @input="$emit('update:newExternalParticipant', { ...newExternalParticipant, address: $event.target.value })"
                                    :placeholder="$t('tournaments.address') + ' (' + $t('tournaments.optional') + ', ' + $t('tournaments.forForwarding') + ')'" 
                                    class="external-input external-input-address" 
                                />
                            </div>
                        </details>
                    </div>
                    <div class="participants-table-container">
                    <!-- Teilnehmer ohne Klasse zuerst -->
                    <div v-if="shouldShowClass(null) && getFilteredParticipantsForClass(null).length > 0" class="participants-class-section participants-class-section-priority">
                        <h5 class="participants-class-header">{{ $t('tournaments.withoutClass') }} <span class="class-count-badge">{{ getFilteredParticipantsForClass(null).length }}</span></h5>
                        <div class="participants-desktop-table">
                            <div class="participants-table-body-wrapper">
                                <table class="participants-table participants-table-unified">
                                    <thead>
                                        <tr>
                                            <th class="participant-name">{{ $t('tournaments.name') }}</th>
                                            <th class="participant-details-cell">{{ detailsLabel() }}</th>
                                            <th class="participant-class-cell">{{ $t('tournaments.class') }}</th>
                                            <th v-if="isGroupTournament" class="participant-group-cell">{{ $t('tournaments.group') }}</th>
                                            <th class="participant-status-cell">{{ statusLabel() }}</th>
                                            <th class="participant-action-cell">{{ $t('tournaments.action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="participant in getFilteredParticipantsForClass(null)" :key="participant.id" class="participant-item">
                                            <td class="participant-name">
                                                {{ participantDisplayName(participant) }}
                                            </td>
                                            <td class="participant-details-cell">
                                                <div class="participant-meta" v-if="participantMetaItems(participant).length">
                                                    <span v-for="(item, index) in participantMetaItems(participant)" :key="`${participant.id}-meta-${index}`" class="participant-meta-chip">
                                                        {{ item }}
                                                    </span>
                                                </div>
                                                <span v-else class="participant-meta-empty">–</span>
                                                <div v-if="participantAssignmentHint(participant)" class="participant-assignment-hint">
                                                    {{ participantAssignmentHint(participant) }}
                                                </div>
                                                <div v-if="participantWarnings(participant).length" class="participant-warning-list">
                                                    <span v-for="(warning, index) in participantWarnings(participant)" :key="`${participant.id}-warning-${index}`" class="participant-warning-chip">
                                                        {{ warning }}
                                                    </span>
                                                </div>
                                                <div v-if="participantConflictSuggestions(participant).length" class="participant-suggestion-list">
                                                    <span class="participant-suggestion-label">{{ $t('tournaments.conflictSuggestionLabel') }}</span>
                                                    <button
                                                        v-for="classItem in participantConflictSuggestions(participant)"
                                                        :key="`${participant.id}-suggest-${classItem.id}`"
                                                        type="button"
                                                        class="participant-suggestion-button"
                                                        @click="$emit('assign-participant-class', participant, classItem.id)"
                                                    >
                                                        {{ classItem.name }}
                                                    </button>
                                                </div>
                                            </td>
                                            <td class="participant-class-cell">
                                                <select 
                                                    :value="participant.classId" 
                                                    @change="$emit('update-participant-class', participant, $event)" 
                                                    class="class-select-small"
                                                >
                                                    <option :value="null">–</option>
                                                    <option v-for="classItem in getClassOptionsForParticipant(participant)" :key="classItem.id" :value="classItem.id">
                                                        {{ classItem.name }}
                                                    </option>
                                                </select>
                                            </td>
                                            <td v-if="isGroupTournament" class="participant-group-cell">
                                                <select 
                                                    :value="participant.groupNumber" 
                                                    @change="$emit('update-participant-group', participant, $event)" 
                                                    class="group-select-small"
                                                >
                                                    <option :value="null">–</option>
                                                    <option v-for="group in groups" :key="group.groupId" :value="group.groupNumber">
                                                        {{ group.groupNumber }}
                                                    </option>
                                                </select>
                                            </td>
                                            <td class="participant-status-cell">
                                                <div class="participant-status-controls">
                                                    <label class="status-toggle">
                                                        <input type="checkbox" :checked="participant.seeded" @change="$emit('update-participant-seeded', participant, $event)" />
                                                        <span>{{ $t('tournaments.seeded') }}</span>
                                                    </label>
                                                    <label class="status-toggle" :title="$t('tournaments.gaveUpHint')">
                                                        <input type="checkbox" :checked="participant.gaveUp" @change="$emit('update-participant-gave-up', participant, $event)" />
                                                        <span>{{ $t('tournaments.gaveUp') }}</span>
                                                    </label>
                                                </div>
                                            </td>
                                            <td class="participant-action-cell">
                                                <button @click="$emit('remove-participant', participant)" class="trash-btn-small" :title="$t('tournaments.delete')">🗑️</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="participants-mobile-list">
                            <article v-for="participant in getFilteredParticipantsForClass(null)" :key="`mobile-${participant.id}`" class="participant-card">
                                <div class="participant-card-header">
                                    <div class="participant-card-title">{{ participantDisplayName(participant) }}</div>
                                    <button @click="$emit('remove-participant', participant)" class="trash-btn-small participant-card-delete" :title="$t('tournaments.delete')">🗑️</button>
                                </div>
                                <div class="participant-card-grid">
                                    <label class="participant-card-field">
                                        <span>{{ $t('tournaments.class') }}</span>
                                        <select :value="participant.classId" @change="$emit('update-participant-class', participant, $event)" class="class-select-small participant-card-select">
                                            <option :value="null">–</option>
                                            <option v-for="classItem in getClassOptionsForParticipant(participant)" :key="`mobile-class-${participant.id}-${classItem.id}`" :value="classItem.id">
                                                {{ classItem.name }}
                                            </option>
                                        </select>
                                    </label>
                                    <label v-if="isGroupTournament" class="participant-card-field">
                                        <span>{{ $t('tournaments.group') }}</span>
                                        <select :value="participant.groupNumber" @change="$emit('update-participant-group', participant, $event)" class="group-select-small participant-card-select">
                                            <option :value="null">–</option>
                                            <option v-for="group in groups" :key="`mobile-group-${participant.id}-${group.groupId}`" :value="group.groupNumber">
                                                {{ group.groupNumber }}
                                            </option>
                                        </select>
                                    </label>
                                </div>
                                <div class="participant-card-status">
                                    <label class="status-toggle">
                                        <input type="checkbox" :checked="participant.seeded" @change="$emit('update-participant-seeded', participant, $event)" />
                                        <span>{{ $t('tournaments.seeded') }}</span>
                                    </label>
                                    <label class="status-toggle" :title="$t('tournaments.gaveUpHint')">
                                        <input type="checkbox" :checked="participant.gaveUp" @change="$emit('update-participant-gave-up', participant, $event)" />
                                        <span>{{ $t('tournaments.gaveUp') }}</span>
                                    </label>
                                </div>
                            </article>
                        </div>
                    </div>
                    <!-- Teilnehmer nach Klassen gruppiert - nur angezeigte Klasse -->
                    <template v-for="classItem in tournamentClasses" :key="classItem.id">
                        <div v-if="shouldShowClass(classItem.id) && getFilteredParticipantsForClass(classItem.id).length > 0" class="participants-class-section">
                            <h5 class="participants-class-header">
                                {{ classItem.name }} 
                                <span class="class-type-badge-small" :class="{ 'doubles': classItem.isDoubles }">
                                    ({{ classItem.isDoubles ? $t('tournaments.doubles') : $t('tournaments.singles') }})
                                </span>
                                <span class="class-count-badge">{{ getFilteredParticipantsForClass(classItem.id).length }}</span>
                            </h5>
                            <div class="participants-desktop-table">
                                <div class="participants-table-body-wrapper">
                                    <table class="participants-table participants-table-unified">
                                        <thead>
                                            <tr>
                                                <th class="participant-name">{{ $t('tournaments.name') }}</th>
                                                <th class="participant-details-cell">{{ detailsLabel() }}</th>
                                                <th v-if="isGroupTournament" class="participant-group-cell">{{ $t('tournaments.group') }}</th>
                                                <th class="participant-status-cell">{{ statusLabel() }}</th>
                                                <th class="participant-action-cell">{{ $t('tournaments.action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="participant in getFilteredParticipantsForClass(classItem.id)" :key="participant.id" class="participant-item">
                                                <td class="participant-name">
                                                    {{ participantDisplayName(participant) }}
                                                </td>
                                                <td class="participant-details-cell">
                                                    <div class="participant-meta" v-if="participantMetaItems(participant).length">
                                                        <span v-for="(item, index) in participantMetaItems(participant)" :key="`${participant.id}-meta-${index}`" class="participant-meta-chip">
                                                            {{ item }}
                                                        </span>
                                                    </div>
                                                    <span v-else class="participant-meta-empty">–</span>
                                                    <div v-if="participantAssignmentHint(participant)" class="participant-assignment-hint">
                                                        {{ participantAssignmentHint(participant) }}
                                                    </div>
                                                    <div v-if="participantWarnings(participant).length" class="participant-warning-list">
                                                        <span v-for="(warning, index) in participantWarnings(participant)" :key="`${participant.id}-warning-${index}`" class="participant-warning-chip">
                                                            {{ warning }}
                                                        </span>
                                                    </div>
                                                    <div v-if="participantConflictSuggestions(participant).length" class="participant-suggestion-list">
                                                        <span class="participant-suggestion-label">{{ $t('tournaments.conflictSuggestionLabel') }}</span>
                                                        <button
                                                            v-for="classItem in participantConflictSuggestions(participant)"
                                                            :key="`${participant.id}-suggest-${classItem.id}`"
                                                            type="button"
                                                            class="participant-suggestion-button"
                                                            @click="$emit('assign-participant-class', participant, classItem.id)"
                                                        >
                                                            {{ classItem.name }}
                                                        </button>
                                                    </div>
                                                </td>
                                                <td v-if="isGroupTournament" class="participant-group-cell">
                                                    <select 
                                                        :value="participant.groupNumber" 
                                                        @change="$emit('update-participant-group', participant, $event)" 
                                                        class="group-select-small"
                                                    >
                                                        <option :value="null">–</option>
                                                        <option v-for="group in getGroupsForClass(classItem.id)" :key="group.groupId" :value="group.groupNumber">
                                                            {{ group.groupNumber }}
                                                        </option>
                                                    </select>
                                                </td>
                                                <td class="participant-status-cell">
                                                    <div class="participant-status-controls">
                                                        <label class="status-toggle">
                                                            <input type="checkbox" :checked="participant.seeded" @change="$emit('update-participant-seeded', participant, $event)" />
                                                            <span>{{ $t('tournaments.seeded') }}</span>
                                                        </label>
                                                        <label class="status-toggle" :title="$t('tournaments.gaveUpHint')">
                                                            <input type="checkbox" :checked="participant.gaveUp" @change="$emit('update-participant-gave-up', participant, $event)" />
                                                            <span>{{ $t('tournaments.gaveUp') }}</span>
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="participant-action-cell">
                                                    <button @click="$emit('remove-participant', participant)" class="trash-btn-small" :title="$t('tournaments.delete')">🗑️</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="participants-mobile-list">
                                <article v-for="participant in getFilteredParticipantsForClass(classItem.id)" :key="`mobile-class-${classItem.id}-${participant.id}`" class="participant-card">
                                    <div class="participant-card-header">
                                        <div>
                                            <div class="participant-card-title">{{ participantDisplayName(participant) }}</div>
                                            <div class="participant-card-subtitle">
                                                {{ classItem.isDoubles ? $t('tournaments.doubles') : $t('tournaments.singles') }}
                                            </div>
                                        </div>
                                        <button @click="$emit('remove-participant', participant)" class="trash-btn-small participant-card-delete" :title="$t('tournaments.delete')">🗑️</button>
                                    </div>
                                    <div v-if="isGroupTournament" class="participant-card-grid">
                                        <label class="participant-card-field">
                                            <span>{{ $t('tournaments.group') }}</span>
                                            <select :value="participant.groupNumber" @change="$emit('update-participant-group', participant, $event)" class="group-select-small participant-card-select">
                                                <option :value="null">–</option>
                                                <option v-for="group in getGroupsForClass(classItem.id)" :key="`mobile-class-group-${classItem.id}-${participant.id}-${group.groupId}`" :value="group.groupNumber">
                                                    {{ group.groupNumber }}
                                                </option>
                                            </select>
                                        </label>
                                    </div>
                                    <div class="participant-card-status">
                                        <label class="status-toggle">
                                            <input type="checkbox" :checked="participant.seeded" @change="$emit('update-participant-seeded', participant, $event)" />
                                            <span>{{ $t('tournaments.seeded') }}</span>
                                        </label>
                                        <label class="status-toggle" :title="$t('tournaments.gaveUpHint')">
                                            <input type="checkbox" :checked="participant.gaveUp" @change="$emit('update-participant-gave-up', participant, $event)" />
                                            <span>{{ $t('tournaments.gaveUp') }}</span>
                                        </label>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </template>
                </div>
                </div>
            </div>
        </section>
        <!-- Doppel-Paarungen -->
        <section v-if="selectedViewClass !== null && selectedViewClass !== undefined && selectedViewClass !== '__none__' && isClassDoubles(selectedViewClass)" class="pairings-section">
            <div v-if="selectedDoublesParticipantsWithoutPartnerCount > 0" class="participants-callout participants-callout-inline">
                <div class="participants-callout-main">
                    <div>
                        <strong>{{ $t('tournaments.unpairedDoubles') }}:</strong>
                        {{ $t('tournaments.doublesPairingHint', { count: selectedDoublesParticipantsWithoutPartnerCount }) }}
                    </div>
                    <button
                        v-if="selectedDoublesParticipantsWithoutPartnerCount >= 2"
                        type="button"
                        class="btn-secondary btn-callout-action"
                        :disabled="pairingOperationInProgress"
                        @click="$emit('create-random-pairings', selectedViewClass)"
                    >
                        {{ pairingOperationInProgress ? $t('common.loading') : $t('tournaments.createSuggestedPairings') }}
                    </button>
                </div>
            </div>
            <div class="pairings-header" @click="$emit('toggle-pairings')">
                <h4>{{ $t('tournaments.pairings') }}</h4>
                <span class="collapse-icon" :class="{ 'expanded': showPairings }">▼</span>
            </div>
            <div v-show="showPairings" class="pairings-content">
                <div class="add-pairing">
                    <h5>{{ $t('tournaments.addPairing') }}</h5>
                    <div class="pairing-form">
                        <select 
                            :value="newPairing.player1Id" 
                            @change="$emit('update:newPairing', { ...newPairing, player1Id: $event.target.value ? parseInt($event.target.value) : null })"
                            class="pairing-player-select"
                        >
                            <option :value="null">{{ $t('tournaments.selectPlayer') }} 1</option>
                            <option v-for="participant in getParticipantsForClass(selectedViewClass)" :key="participant.id" :value="participant.id">
                                {{ participant.member ? (participant.member.firstName + ' ' + participant.member.lastName) : (participant.firstName + ' ' + participant.lastName) }}
                            </option>
                        </select>
                        <span class="pairing-separator">+</span>
                        <select 
                            :value="newPairing.player2Id" 
                            @change="$emit('update:newPairing', { ...newPairing, player2Id: $event.target.value ? parseInt($event.target.value) : null })"
                            class="pairing-player-select"
                        >
                            <option :value="null">{{ $t('tournaments.selectPlayer') }} 2</option>
                            <option v-for="participant in getParticipantsForClass(selectedViewClass)" :key="participant.id" :value="participant.id">
                                {{ participant.member ? (participant.member.firstName + ' ' + participant.member.lastName) : (participant.firstName + ' ' + participant.lastName) }}
                            </option>
                        </select>
                        <label class="pairing-seeded-label">
                            <input 
                                type="checkbox" 
                                :checked="newPairing.seeded" 
                                @change="$emit('update:newPairing', { ...newPairing, seeded: $event.target.checked })"
                            />
                            {{ $t('tournaments.seeded') }}
                        </label>
                        <button 
                            type="button"
                            @click="$emit('add-pairing')" 
                            class="btn-add" 
                            :disabled="pairingOperationInProgress || !newPairing.player1Id || !newPairing.player2Id || newPairing.player1Id === newPairing.player2Id"
                        >
                            {{ pairingOperationInProgress ? $t('common.loading') : $t('tournaments.add') }}
                        </button>
                    </div>
                    <div class="random-pairing-section">
                        <button
                            type="button"
                            @click="$emit('create-random-pairings')"
                            class="btn-random-pairings"
                            :disabled="pairingOperationInProgress"
                        >
                            {{ pairingOperationInProgress ? $t('common.loading') : $t('tournaments.randomPairings') }}
                        </button>
                    </div>
                </div>
                <div class="pairings-list">
                    <table class="pairings-table">
                        <thead>
                            <tr>
                                <th>{{ $t('tournaments.player') }} 1</th>
                                <th>{{ $t('tournaments.player') }} 2</th>
                                <th>{{ $t('tournaments.seeded') }}</th>
                                <th>{{ $t('tournaments.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="pairing in visiblePairings" :key="pairing.id">
                                <td>{{ getPairingPlayerName(pairing, 1) }}</td>
                                <td>{{ getPairingPlayerName(pairing, 2) }}</td>
                                <td>
                                    <input 
                                        type="checkbox" 
                                        :checked="pairing.seeded" 
                                        :disabled="pairingOperationInProgress"
                                        @change="$emit('update-pairing-seeded', pairing, $event)" 
                                    />
                                </td>
                                <td>
                                    <button
                                        type="button"
                                        @click="$emit('remove-pairing', pairing)"
                                        class="trash-btn-small"
                                        :disabled="pairingOperationInProgress"
                                        :title="$t('tournaments.delete')"
                                    >🗑️</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import TournamentClassSelector from './TournamentClassSelector.vue';

export default {
    name: 'TournamentParticipantsTab',
    components: {
        TournamentClassSelector
    },
    props: {
        selectedDate: {
            type: [String, Number],
            default: null
        },
        selectedViewClass: {
            type: [Number, String, null],
            default: null
        },
        tournamentClasses: {
            type: Array,
            required: true
        },
        showParticipants: {
            type: Boolean,
            default: false
        },
        showPairings: {
            type: Boolean,
            default: false
        },
        canAssignClass: {
            type: Boolean,
            required: true
        },
        allowsExternal: {
            type: Boolean,
            required: true
        },
        isGroupTournament: {
            type: Boolean,
            required: true
        },
        selectedMember: {
            type: [Number, null],
            default: null
        },
        clubMembers: {
            type: Array,
            required: true
        },
        hasTrainingToday: {
            type: Boolean,
            default: false
        },
        newExternalParticipant: {
            type: Object,
            required: true
        },
        participants: {
            type: Array,
            required: true
        },
        externalParticipants: {
            type: Array,
            default: () => []
        },
        groups: {
            type: Array,
            required: true
        },
        pairings: {
            type: Array,
            required: true
        },
        pairingOperationInProgress: {
            type: Boolean,
            default: false
        },
        newPairing: {
            type: Object,
            required: true
        }
    },
    emits: [
        'update:selectedViewClass',
        'update:selectedMember',
        'add-participant',
        'load-participants-from-training',
        'update:newExternalParticipant',
        'add-external-participant',
        'update-participant-seeded',
        'update-participant-gave-up',
        'update-participant-group',
        'update-participant-class',
        'assign-participant-class',
        'remove-participant',
        'toggle-pairings',
        'update:newPairing',
        'add-pairing',
        'auto-assign-eligible',
        'create-random-pairings',
        'update-pairing-seeded',
        'remove-pairing'
    ],
    data() {
        return {
            participantFilter: 'all'
        };
    },
    computed: {
        hasTournamentClasses() {
            return Array.isArray(this.tournamentClasses) && this.tournamentClasses.length > 0;
        },
        allParticipantsCount() {
            return this.allParticipantsList().length;
        },
        unassignedParticipantsCount() {
            return this.getParticipantsForClass(null).length;
        },
        externalParticipantsCount() {
            return this.externalParticipants.length;
        },
        gaveUpParticipantsCount() {
            return this.allParticipantsList().filter(participant => Boolean(participant.gaveUp)).length;
        },
        participantsWithConflictsCount() {
            return this.allParticipantsList().filter(participant => this.participantWarnings(participant).length > 0).length;
        },
        autoAssignableParticipantsCount() {
            return this.allParticipantsList().filter(participant => {
                if (participant.classId != null) return false;
                return this.tournamentClasses.filter(classItem => this.participantEligibleForClass(participant, classItem)).length === 1;
            }).length;
        },
        ambiguousAssignableParticipants() {
            return this.allParticipantsList()
                .filter(participant => participant.classId == null)
                .map(participant => ({
                    participant,
                    eligibleClasses: this.tournamentClasses.filter(classItem => this.participantEligibleForClass(participant, classItem))
                }))
                .filter(entry => entry.eligibleClasses.length > 1);
        },
        unpairedDoublesCount() {
            return this.allParticipantsList().filter(participant => this.participantWarnings(participant).includes(this.$t('tournaments.warningMissingPairing'))).length;
        },
        selectedDoublesParticipantsWithoutPartnerCount() {
            if (!this.isClassDoubles(this.selectedViewClass)) return 0;
            return this.getParticipantsForClass(this.selectedViewClass).filter(participant => !this.hasPairingForParticipant(participant)).length;
        },
        filteredClubMembers() {
            // Parent (TournamentTab) filtert bereits nach Klasse (Geschlecht, min/maxBirthYear)
            // Wir geben die Liste direkt zurück
            return this.clubMembers;
        },
        visiblePairings() {
            if (this.selectedViewClass == null || this.selectedViewClass === '__none__') return [];
            return this.pairings.filter(pairing => Number(pairing.classId) === Number(this.selectedViewClass));
        }
    },
    methods: {
        detailsLabel() {
            const common = this.$t('common.details');
            if (common && common !== 'common.details') return common;
            const member = this.$t('members.details');
            if (member && member !== 'members.details') return member;
            return 'Details';
        },
        statusLabel() {
            const status = this.$t('tournaments.status');
            if (status && status !== 'tournaments.status') return status;
            return 'Status';
        },
        shouldShowClass(classId) {
            if (this.selectedViewClass === null || this.selectedViewClass === undefined || this.selectedViewClass === '' || this.selectedViewClass === '__all__' || this.selectedViewClass === 'all') {
                return true;
            }
            if (this.selectedViewClass === '__none__' || this.selectedViewClass === 'null') {
                return classId === null;
            }
            const selectedId = Number(this.selectedViewClass);
            const compareId = Number(classId);
            if (Number.isNaN(selectedId) || Number.isNaN(compareId)) {
                return false;
            }
            return selectedId === compareId;
        },
        allParticipantsList() {
            const all = this.allowsExternal
                ? [
                    ...this.participants.map(p => ({ ...p, isExternal: false })),
                    ...this.externalParticipants.map(p => ({ ...p, isExternal: true }))
                ]
                : this.participants.map(p => ({ ...p, isExternal: false }));
            
            const seen = new Set();
            return all.filter(p => {
                const key = p.id || `${p.clubMemberId || p.externalId || ''}_${p.classId || 'null'}`;
                if (seen.has(key)) {
                    return false;
                }
                seen.add(key);
                return true;
            });
        },
        getParticipantsForClass(classId) {
            return this.allParticipantsList().filter(p => {
                if (classId === null || classId === '__none__') {
                    return p.classId === null || p.classId === undefined;
                }
                const classIdNum = typeof classId === 'string' ? parseInt(classId) : classId;
                const pClassIdNum = typeof p.classId === 'string' ? parseInt(p.classId) : p.classId;
                return pClassIdNum === classIdNum;
            }).sort((a, b) => {
                const firstNameA = (a.member?.firstName || a.firstName || '').toLowerCase();
                const firstNameB = (b.member?.firstName || b.firstName || '').toLowerCase();
                if (firstNameA !== firstNameB) {
                    return firstNameA.localeCompare(firstNameB, 'de');
                }
                const lastNameA = (a.member?.lastName || a.lastName || '').toLowerCase();
                const lastNameB = (b.member?.lastName || b.lastName || '').toLowerCase();
                return lastNameA.localeCompare(lastNameB, 'de');
            });
        },
        getFilteredParticipantsForClass(classId) {
            return this.getParticipantsForClass(classId).filter(participant => this.matchesParticipantFilter(participant));
        },
        getClassOptionsForParticipant(participant) {
            const eligible = this.tournamentClasses.filter(classItem => this.participantEligibleForClass(participant, classItem));
            if (participant.classId == null) return eligible;
            const assigned = this.tournamentClasses.find(classItem => Number(classItem.id) === Number(participant.classId));
            if (assigned && !eligible.some(classItem => classItem.id === assigned.id)) {
                return [assigned, ...eligible];
            }
            return eligible;
        },
        matchesParticipantFilter(participant) {
            if (this.participantFilter === 'withoutClass') {
                return participant.classId === null || participant.classId === undefined;
            }
            if (this.participantFilter === 'external') {
                return !participant.member;
            }
            if (this.participantFilter === 'gaveUp') {
                return Boolean(participant.gaveUp);
            }
            return true;
        },
        getGroupsForClass(classId) {
            return this.groups.filter(g => {
                if (classId === null) {
                    return g.classId === null || g.classId === undefined;
                }
                return g.classId === classId;
            });
        },
        participantDisplayName(participant) {
            if (participant.member) {
                return `${participant.member.firstName || this.$t('tournaments.unknown')} ${participant.member.lastName || ''}`.trim();
            }
            return `${participant.firstName || this.$t('tournaments.unknown')} ${participant.lastName || ''}`.trim();
        },
        participantMetaItems(participant) {
            const items = [];
            const gender = participant.member ? participant.member.gender : participant.gender;
            const genderSymbol = this.genderSymbol(gender);
            if (genderSymbol && genderSymbol !== '?') {
                items.push(`${genderSymbol} ${this.labelGender(gender)}`);
            }

            if (participant.member) {
                items.push(this.$t('tournaments.clubMember'));
                return items;
            }

            if (participant.club) items.push(participant.club);
            if (participant.email) items.push(participant.email);
            if (participant.address) items.push(participant.address);
            return items;
        },
        participantAssignmentHint(participant) {
            if (participant.classId != null) return '';
            if (!this.hasTournamentClasses) return '';
            const eligibleClasses = this.tournamentClasses.filter(classItem => this.participantEligibleForClass(participant, classItem));
            if (eligibleClasses.length === 0) {
                return '';
            }
            return this.$t('tournaments.eligibleClassesHint', { classes: eligibleClasses.map(classItem => classItem.name).join(', ') });
        },
        participantConflictSuggestions(participant) {
            if (participant.classId == null) return [];
            const eligibleClasses = this.tournamentClasses.filter(classItem => this.participantEligibleForClass(participant, classItem));
            const hasClassConflict = this.participantWarnings(participant).some(warning => warning !== this.$t('tournaments.warningMissingPairing'));
            if (!hasClassConflict) return [];
            return eligibleClasses.filter(classItem => Number(classItem.id) !== Number(participant.classId));
        },
        participantWarnings(participant) {
            const warnings = [];
            if (participant.classId == null) return warnings;
            const classItem = this.tournamentClasses.find(classEntry => Number(classEntry.id) === Number(participant.classId));
            if (!classItem) {
                warnings.push(this.$t('tournaments.warningClassMissing'));
                return warnings;
            }
            const gender = (participant.member?.gender || participant.gender || 'unknown').toLowerCase();
            if (classItem.gender === 'male' && gender !== 'male') {
                warnings.push(this.$t('tournaments.warningGenderMismatch'));
            }
            if (classItem.gender === 'female' && gender !== 'female') {
                warnings.push(this.$t('tournaments.warningGenderMismatch'));
            }
            if (classItem.gender === 'mixed' && gender === 'unknown') {
                warnings.push(this.$t('tournaments.warningGenderMissing'));
            }
            const hasAgeRestriction = classItem.minBirthYear != null || classItem.maxBirthYear != null;
            const birthYear = this.extractBirthYear(participant.member?.birthDate || participant.birthDate);
            if (hasAgeRestriction && birthYear == null) {
                warnings.push(this.$t('tournaments.warningBirthDateMissing'));
            } else if (birthYear != null) {
                if (classItem.minBirthYear != null && birthYear < Number(classItem.minBirthYear)) {
                    warnings.push(this.$t('tournaments.warningTooOldForClass'));
                }
                if (classItem.maxBirthYear != null && birthYear > Number(classItem.maxBirthYear)) {
                    warnings.push(this.$t('tournaments.warningTooYoungForClass'));
                }
            }
            if (classItem.isDoubles && !this.hasPairingForParticipant(participant)) {
                warnings.push(this.$t('tournaments.warningMissingPairing'));
            }
            return [...new Set(warnings)];
        },
        participantEligibleForClass(participant, classItem) {
            const gender = (participant.member?.gender || participant.gender || 'unknown').toLowerCase();
            if (classItem.gender === 'male' && gender !== 'male') return false;
            if (classItem.gender === 'female' && gender !== 'female') return false;
            if (classItem.gender === 'mixed' && gender === 'unknown') return false;
            const hasAgeRestriction = classItem.minBirthYear != null || classItem.maxBirthYear != null;
            if (!hasAgeRestriction) return true;
            const birthYear = this.extractBirthYear(participant.member?.birthDate || participant.birthDate);
            if (birthYear == null) return false;
            if (classItem.minBirthYear != null && birthYear < Number(classItem.minBirthYear)) return false;
            if (classItem.maxBirthYear != null && birthYear > Number(classItem.maxBirthYear)) return false;
            return true;
        },
        extractBirthYear(value) {
            if (!value) return null;
            if (value instanceof Date && !Number.isNaN(value.getTime())) return value.getFullYear();
            if (typeof value === 'string') {
                if (value.includes('-')) {
                    const year = Number.parseInt(value.split('-')[0], 10);
                    return Number.isFinite(year) ? year : null;
                }
                if (value.includes('.')) {
                    const parts = value.split('.');
                    const year = Number.parseInt(parts[parts.length - 1], 10);
                    return Number.isFinite(year) ? year : null;
                }
            }
            return null;
        },
        hasPairingForParticipant(participant) {
            return this.pairings.some(pairing => {
                if (participant.classId != null && Number(pairing.classId) !== Number(participant.classId)) {
                    return false;
                }
                return pairing.member1Id === participant.id ||
                    pairing.member2Id === participant.id ||
                    pairing.external1Id === participant.id ||
                    pairing.external2Id === participant.id;
            });
        },
        isClassDoubles(classId) {
            if (classId === null || classId === '__none__' || classId === 'null' || classId === undefined) {
                return false;
            }
            const classIdNum = typeof classId === 'string' ? parseInt(classId) : classId;
            const classItem = this.tournamentClasses.find(c => c.id === classIdNum);
            return classItem ? Boolean(classItem.isDoubles) : false;
        },
        labelGender(g) {
            const v = (g || 'unknown');
            if (v === 'male') return this.$t('members.genderMale');
            if (v === 'female') return this.$t('members.genderFemale');
            if (v === 'diverse') return this.$t('members.genderDiverse');
            return this.$t('members.genderUnknown');
        },
        genderSymbol(g) {
            const v = (g || 'unknown');
            if (v === 'male') return '♂';
            if (v === 'female') return '♀';
            if (v === 'diverse') return '⚧';
            return '?';
        },
        getPairingPlayerName(pairing, playerNumber) {
            if (playerNumber === 1) {
                if (pairing.member1 && pairing.member1.member) {
                    return `${pairing.member1.member.firstName} ${pairing.member1.member.lastName}`;
                } else if (pairing.external1) {
                    return `${pairing.external1.firstName} ${pairing.external1.lastName}`;
                }
            } else if (playerNumber === 2) {
                if (pairing.member2 && pairing.member2.member) {
                    return `${pairing.member2.member.firstName} ${pairing.member2.member.lastName}`;
                } else if (pairing.external2) {
                    return `${pairing.external2.firstName} ${pairing.external2.lastName}`;
                }
            }
            return this.$t('tournaments.unknown');
        }
    }
};
</script>

<style scoped>
.participants-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.participants-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.filter-chip.active {
    background: #eff6ff;
    border-color: #60a5fa;
    color: #1d4ed8;
}

.filter-chip-warning {
    border-color: #fbbf24;
    color: #92400e;
}

.filter-chip-warning.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.filter-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.08);
    font-size: 0.75rem;
}

.participants-callout {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #fbbf24;
    border-radius: 12px;
    background: #fffbeb;
    color: #92400e;
}

.participants-callout-inline {
    margin-bottom: 0.75rem;
}

.participants-callout-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.participants-callout-hint {
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.assignment-review {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(146, 64, 14, 0.2);
}

.assignment-review-title {
    display: block;
    margin-bottom: 0.65rem;
}

.assignment-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.assignment-review-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
}

.assignment-review-name {
    font-weight: 600;
    color: #78350f;
}

.assignment-review-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.assignment-suggestion-button {
    padding: 0.35rem 0.65rem;
    border: 1px solid #f59e0b;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.assignment-suggestion-button:hover {
    background: #ffedd5;
}

.btn-callout-action {
    flex-shrink: 0;
    white-space: nowrap;
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 600;
}

.summary-chip-warning {
    background: #fef3c7;
    color: #92400e;
}

.participants-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.add-participant {
    flex: 0 0 350px;
    min-width: 300px;
}

.add-participant-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 0.85rem;
    margin-bottom: 0.85rem;
}

.add-participant-section summary {
    cursor: pointer;
    font-weight: 600;
    color: #1f2937;
    list-style: none;
}

.add-participant-section summary::-webkit-details-marker {
    display: none;
}

.add-participant-section[open] summary {
    margin-bottom: 0.85rem;
}

.participants-table-container {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

.participants-class-section-priority {
    border: 1px solid #fbbf24;
    border-radius: 12px;
    padding: 0.75rem;
    background: #fffbeb;
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.participants-class-section {
    margin-bottom: 1rem;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.participants-table {
    width: max-content;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
}

.participants-table-body-wrapper {
    display: block;
    max-width: 100%;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: contain;
}

.participants-table-unified thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #2f7a5f;
}

.participants-class-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.65rem 0;
}

.class-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.1rem 0.35rem;
    margin-left: 0.45rem;
    border-radius: 999px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 700;
}

.add-participant-row-contact {
    margin-top: 0.5rem;
}

.external-input-email {
    min-width: 180px;
}

.external-input-address {
    min-width: 220px;
    flex: 1;
}

.participant-details-cell {
    min-width: 220px;
}

.participant-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.participant-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.78rem;
    line-height: 1.2;
}

.participant-meta-empty {
    color: #9ca3af;
}

.participant-assignment-hint {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.participant-warning-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.participant-suggestion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.45rem;
}

.participant-suggestion-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.participant-suggestion-button {
    padding: 0.2rem 0.5rem;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.participant-suggestion-button:hover {
    background: #dbeafe;
}

.participant-warning-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.76rem;
    line-height: 1.2;
    font-weight: 600;
}

.participant-status-cell {
    min-width: 130px;
}

.participant-status-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.participants-mobile-list {
    display: none;
}

.participant-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    margin-bottom: 0.75rem;
}

.participant-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.participant-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #111827;
}

.participant-card-subtitle {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: #6b7280;
}

.participant-card-delete {
    margin-left: 0;
    flex: 0 0 auto;
}

.participant-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.7rem;
}

.participant-card-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.participant-card-select {
    width: 100%;
    max-width: none;
}

.participant-card-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-top: 0.2rem;
}

.status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #4b5563;
}

.class-select-small,
.group-select-small {
    max-width: 140px;
}

@media (max-width: 1024px) {
    .participants-layout {
        flex-direction: column;
    }
    
    .add-participant {
        flex: 1;
        width: 100%;
    }
    
    .participants-table-container {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .participants-desktop-table {
        display: none;
    }

    .participants-mobile-list {
        display: block;
    }

    .participants-table-container {
        overflow: visible;
    }

    .participants-class-section,
    .participants-class-section-priority {
        overflow: visible;
    }

    .participant-card-grid {
        grid-template-columns: 1fr;
    }

    .participant-card-status {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>
