<template>
  <div class="main">
    <header class="app-header">
      <h1>
        <router-link to="/" class="home-link">
          <img :src="logoUrl" alt="Logo" class="home-logo" width="24" height="24" loading="lazy" />
          <span>{{ appBrand }}</span>
        </router-link>
      </h1>
      <div v-if="isAuthenticated" class="user-menu">
        <button @click="toggleUserDropdown" class="user-info">
          <span class="user-icon">👤</span>
          <span class="user-email">{{ username }}</span>
          <span class="dropdown-arrow">▼</span>
        </button>
        <div v-if="userDropdownOpen" class="user-dropdown">
          <button type="button" class="dropdown-item" @click="openUserMenuDialog('MyTischtennisAccount', $t('navigation.myTischtennisAccount'))">
            <span class="dropdown-icon">🔗</span>
            {{ $t('navigation.myTischtennisAccount') }}
          </button>
          <button type="button" class="dropdown-item" @click="openUserMenuDialog('ClickTtAccount', $t('navigation.clickTtAccount'))">
            <span class="dropdown-icon">🏓</span>
            {{ $t('navigation.clickTtAccount') }}
          </button>
          <router-link to="/orders" class="dropdown-item" @click="userDropdownOpen = false">
            <span class="dropdown-icon">📦</span>
            {{ $t('navigation.orders') }}
          </router-link>
          <button v-if="isFullAppProduct && canManagePermissions" type="button" class="dropdown-item" @click="openUserMenuDialog('PermissionsView', $t('navigation.permissions'))">
            <span class="dropdown-icon">🔐</span>
            {{ $t('navigation.permissions') }}
          </button>
          <button v-if="isFullAppProduct && hasPermission('members', 'write')" type="button" class="dropdown-item" @click="openUserMenuDialog('MemberTransferSettingsView', $t('navigation.memberTransfer'))">
            <span class="dropdown-icon">📤</span>
            {{ $t('navigation.memberTransfer') }}
          </button>
          <button v-if="isFullAppProduct && isAdmin" type="button" class="dropdown-item" @click="openUserMenuDialog('LogsView', $t('navigation.logs'))">
            <span class="dropdown-icon">📋</span>
            {{ $t('navigation.logs') }}
          </button>
          <button v-if="isFullAppProduct && canManagePermissions" type="button" class="dropdown-item" @click="openUserMenuDialog('ClickTtView', $t('navigation.clickTtBrowser'))">
            <span class="dropdown-icon">🌐</span>
            {{ $t('navigation.clickTtBrowser') }}
          </button>
          <div class="dropdown-divider"></div>
          <button type="button" class="dropdown-item" @click="openUserMenuDialog('PersonalSettings', $t('navigation.personalSettings'))">
            <span class="dropdown-icon">⚙️</span>
            {{ $t('navigation.personalSettings') }}
          </button>
          <div class="dropdown-divider"></div>
          <button @click="logout" class="dropdown-item logout-item">
            <span class="dropdown-icon">🚪</span>
            {{ $t('navigation.logout') }}
          </button>
        </div>
      </div>
    </header>

    <div class="app-container">
      <aside v-if="shouldRenderSidebar" class="sidebar" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
        <button class="sidebar-toggle" @click="toggleSidebar">
          <span v-if="sidebarCollapsed">→</span>
          <span v-else>←</span>
        </button>
        <div class="sidebar-content">
          <div v-if="shouldShowClubSelector" class="club-selector card">
            <h3 class="card-title">{{ $t('club.select') }}</h3>
            <div class="select-group">
              <select v-model="selectedClub" class="club-select" @change="handleClubSelectionChange">
                <option value="">{{ $t('club.selectPlaceholder') }}</option>
                <option value="new">{{ $t('club.new') }}</option>
                <option v-for="club in clubs" :key="club.id" :value="club.id">{{ club.name }}</option>
              </select>
            </div>
          </div>

          <nav v-if="sidebarSections.length" class="nav-menu">
            <div v-for="section in sidebarSections" :key="section.id" class="nav-section">
              <h4 class="nav-title">{{ resolveSectionTitle(section) }}</h4>
              <router-link
                v-for="item in section.items"
                :key="item.to"
                :to="item.to"
                class="nav-link"
                :title="resolveNavItemLabel(item)"
              >
                <span class="nav-icon">{{ item.icon }}</span>
                {{ resolveNavItemLabel(item) }}
              </router-link>
            </div>
          </nav>
        </div>
        
      </aside>

      <div v-else class="auth-nav">
        <div class="auth-links">
          <router-link to="/login" class="btn-primary">{{ $t('navigation.login') }}</router-link>
          <router-link to="/register" class="btn-secondary">{{ $t('navigation.register') }}</router-link>
        </div>
      </div>

      <main class="main-content" :class="{ 'main-content-locked': isFullHeightRoute }">
        <router-view v-slot="{ Component }">
          <div class="content fade-in" :class="{ 'content-full-height': isFullHeightRoute }">
            <component :is="Component" :key="viewReloadKey" />
          </div>
        </router-view>
      </main>
    </div>

    <BaseDialog
      v-if="isFullAppProduct"
      v-model="showMobileClubPicker"
      :title="$t('club.select')"
      :max-width="420"
      :close-on-overlay="false"
      :close-on-escape="false"
      :show-close-button="false"
    >
      <div class="mobile-club-picker">
        <p class="mobile-club-picker-text">{{ $t('club.mobileSelectHint') }}</p>
        <div class="mobile-club-picker-list">
          <button
            v-for="club in clubs"
            :key="club.id"
            type="button"
            class="mobile-club-picker-option"
            @click="selectClubFromMobilePicker(club.id)"
          >
            {{ club.name }}
          </button>
          <button
            type="button"
            class="mobile-club-picker-option secondary-option"
            @click="selectClubFromMobilePicker('new')"
          >
            {{ $t('club.new') }}
          </button>
        </div>
      </div>
    </BaseDialog>
    
    <!-- Dialog Manager -->
    <DialogManager />

    <footer class="app-footer">
      <div class="footer-content">
        <router-link to="/impressum" class="footer-link">Impressum</router-link>
        <span class="footer-sep">·</span>
        <router-link to="/datenschutz" class="footer-link">Datenschutzerklärung</router-link>
        <span class="footer-sep">·</span>
        <router-link to="/konto-loeschen" class="footer-link">Konto löschen</router-link>
      </div>
    </footer>
  </div>

    
    <!-- Info Dialog -->
    <InfoDialog
        v-model="infoDialog.isOpen"
        :title="infoDialog.title"
        :message="infoDialog.message"
      :details="infoDialog.details"
      :detailsHtml="infoDialog.detailsHtml"
      :size="infoDialog.size"
        :type="infoDialog.type"
    />
    
    <!-- Confirm Dialog -->
    <ConfirmDialog
        v-model="confirmDialog.isOpen"
        :title="confirmDialog.title"
        :message="confirmDialog.message"
        :details="confirmDialog.details"
        :type="confirmDialog.type"
        @confirm="handleConfirmResult(true)"
        @cancel="handleConfirmResult(false)"
    />
</template>

<script>
import { defineAsyncComponent } from 'vue';
import { mapGetters, mapActions } from 'vuex';
import apiClient from './apiClient.js';
import logoUrl from './assets/logo.png';
import InfoDialog from './components/InfoDialog.vue';
import ConfirmDialog from './components/ConfirmDialog.vue';
import BaseDialog from './components/BaseDialog.vue';
import { buildInfoConfig, buildConfirmConfig } from './utils/dialogUtils.js';
import { FULL_APP_PRODUCTS, SIDEBAR_NAVIGATION } from './config/products.js';

const DialogManager = defineAsyncComponent(() => import('./components/DialogManager.vue'));
export default {
  name: 'App',
  components: {
    DialogManager,
    BaseDialog,
    InfoDialog,
    ConfirmDialog,
  },
  data() {
    return {
            // Dialog States
            infoDialog: {
                isOpen: false,
                title: '',
                message: '',
                details: '',
                type: 'info'
            },
            confirmDialog: {
                isOpen: false,
                title: '',
                message: '',
                details: '',
                type: 'info',
                resolveCallback: null
            },
      selectedClub: null,
      sessionInterval: null, 
      logoUrl,
      userDropdownOpen: false,
      viewportWidth: typeof window !== 'undefined' ? window.innerWidth : 1280,
      showMobileClubPicker: false,
    };
  },
  computed: {
    ...mapGetters([
      'isAuthenticated',
      'currentClub',
      'clubs',
      'sidebarCollapsed',
      'username',
      'hasPermission',
      'isClubOwner',
      'userRole',
      'language',
      'appProduct',
      'appBrand',
    ]),
    isClubProduct() {
      return this.appProduct === 'club';
    },
    isFullAppProduct() {
      return FULL_APP_PRODUCTS.includes(this.appProduct);
    },
    isPlayerProduct() {
      return this.appProduct === 'player';
    },
    isMobileViewport() {
      return this.viewportWidth <= 768;
    },
    canManageApprovals() {
      // Nur anzeigen, wenn Permissions geladen sind UND Berechtigung vorhanden
      if (!this.currentClub) return false;
      
      // Owner oder Admin können Freigaben verwalten
      return this.isClubOwner || this.userRole === 'admin' || this.hasPermission('approvals', 'read');
    },
    isAdmin() {
      // Nur anzeigen, wenn Permissions geladen sind UND Admin-Rechte vorhanden
      if (!this.currentClub) return false;
      return this.isClubOwner || this.userRole === 'admin';
    },
    canManagePermissions() {
      // Nur anzeigen, wenn Permissions geladen sind UND Berechtigung vorhanden
      if (!this.currentClub) return false;
      
      // Owner oder Admin können Berechtigungen verwalten
      return this.isClubOwner || this.userRole === 'admin' || this.hasPermission('permissions', 'read');
    },
    isFullHeightRoute() {
      return this.$route?.name === 'schedule' || this.$route?.name === 'friendly-matches';
    },
    viewReloadKey() {
      return `${this.$route.fullPath}|${this.currentClub || 'no-club'}`;
    },
    shouldShowClubSelector() {
      return this.isFullAppProduct;
    },
    shouldRenderSidebar() {
      return this.isAuthenticated;
    },
    sidebarSections() {
      const baseSections = SIDEBAR_NAVIGATION[this.appProduct] || [];
      const currentSections = [];

      for (const section of baseSections) {
        const items = section.items.filter((item) => this.isNavItemVisible(item));
        if (items.length > 0) {
          currentSections.push({
            ...section,
            items,
          });
        }
      }

      if (this.isFullAppProduct && !this.selectedClub) {
        return [];
      }

      return currentSections;
    },
  },
  watch: {
    currentClub(newVal) {
      if (this.isFullAppProduct && newVal === 'new') {
        this.$router.push('/createclub');
      }
      if (newVal) {
        this.showMobileClubPicker = false;
      }
      // Removed automatic redirect to training-stats to allow manual navigation
    },
    isAuthenticated(newVal) {
      if (newVal) {
        // Benutzer hat sich eingeloggt - Daten laden
        this.loadUserData();
      } else {
        // Benutzer hat sich ausgeloggt - Daten zurücksetzen
        this.setClubs([]);
        this.selectedClub = null;
        if (this.sessionInterval) {
          clearInterval(this.sessionInterval);
          this.sessionInterval = null;
        }
        this.showMobileClubPicker = false;
      }
    },
    clubs: {
      handler() {
        this.updateMobileClubPickerState();
      },
      deep: true
    }
  },
  methods: {
        resolveSectionTitle(section) {
            return section.titleKey ? this.$t(section.titleKey) : section.title;
        },
        resolveNavItemLabel(item) {
            return item.labelKey ? this.$t(item.labelKey) : item.label;
        },
        isNavItemVisible(item) {
            if (item.capability === 'approvals') {
              return this.canManageApprovals;
            }
            if (item.capability === 'admin') {
              return this.isAdmin;
            }
            if (item.permission) {
              const [resource, action] = item.permission;
              return this.hasPermission(resource, action);
            }
            if (Array.isArray(item.anyPermission)) {
              return item.anyPermission.some(([resource, action]) => this.hasPermission(resource, action));
            }
            return true;
        },
        handleViewportResize() {
            this.viewportWidth = window.innerWidth;
            this.updateMobileClubPickerState();
        },
        toggleUserDropdown(event) {
            event.stopPropagation();
            this.userDropdownOpen = !this.userDropdownOpen;
        },
        handleClickOutside(event) {
            const userMenu = event.target.closest('.user-menu');
            if (!userMenu && this.userDropdownOpen) {
                this.userDropdownOpen = false;
            }
        },
        // Dialog Helper Methods
        async showInfo(title, message, details = '', type = 'info') {
            // If details looks like HTML (e.g., a table), pass it as detailsHtml so InfoDialog renders it
            const looksLikeHtml = typeof details === 'string' && /<\s*\w+[^>]*>/.test(details);
            console.debug('[App.showInfo] looksLikeHtml=', looksLikeHtml, 'title=', title, 'message=', message, 'detailsLength=', typeof details === 'string' ? details.length : 0);
            if (looksLikeHtml) {
              // For HTML details (tables), use a wider dialog
              this.infoDialog = buildInfoConfig({ title, message, details: '', detailsHtml: details, type, size: 'medium' });
            } else {
              this.infoDialog = buildInfoConfig({ title, message, details, type });
            }
        },
        
        async showConfirm(title, message, details = '', type = 'info', options = {}) {
            return new Promise((resolve) => {
                this.confirmDialog = buildConfirmConfig({
                    title,
                    message,
                    details,
                    type,
                    resolveCallback: resolve,
                    ...options,
                });
            });
        },
        
        handleConfirmResult(confirmed) {
            if (this.confirmDialog.resolveCallback) {
                this.confirmDialog.resolveCallback(confirmed);
                this.confirmDialog.resolveCallback = null;
            }
            this.confirmDialog.isOpen = false;
        },
        
    ...mapActions(['setCurrentClub', 'setClubs', 'logout', 'toggleSidebar', 'openDialog']),

    openUserMenuDialog(component, title) {
      this.userDropdownOpen = false;
      this.openDialog({
        title,
        component,
        props: {
          embedded: true
        }
      });
    },

    async handleClubSelectionChange() {
      if (!this.isFullAppProduct) {
        return;
      }

      if (!this.selectedClub) {
        await this.setCurrentClub(null);
        this.updateMobileClubPickerState();
        return;
      }

      await this.setCurrentClub(this.selectedClub);
      if (this.selectedClub === 'new') {
        this.$router.push('/createclub');
      }
      this.updateMobileClubPickerState();
    },

    async selectClubFromMobilePicker(clubId) {
      if (!this.isFullAppProduct) {
        return;
      }

      this.selectedClub = clubId;
      await this.handleClubSelectionChange();
    },

    async initializeClubSelectionState() {
      if (!this.isAuthenticated) {
        this.showMobileClubPicker = false;
        return;
      }

      if (!this.isFullAppProduct) {
        this.selectedClub = this.currentClub;
        this.showMobileClubPicker = false;
        return;
      }

      if (this.currentClub) {
        this.selectedClub = this.currentClub;
        this.showMobileClubPicker = false;
        return;
      }

      if (!this.isMobileViewport) {
        this.showMobileClubPicker = false;
        return;
      }

      if (this.clubs.length === 1) {
        this.selectedClub = this.clubs[0].id;
        await this.handleClubSelectionChange();
        return;
      }

      this.showMobileClubPicker = this.clubs.length > 1;
    },

    updateMobileClubPickerState() {
      if (!this.isFullAppProduct || !this.isAuthenticated || !this.isMobileViewport || this.currentClub || this.$route.path === '/createclub') {
        this.showMobileClubPicker = false;
        return;
      }
      this.showMobileClubPicker = this.clubs.length > 1;
    },
    
    async loadUserData() {
      try {
        const response = await apiClient.get('/clubs');
        this.setClubs(response.data);
        await this.initializeClubSelectionState();
        this.checkSession();
        // Session-Check alle 30 Sekunden
        this.sessionInterval = setInterval(this.checkSession, 30000);
      } catch (error) {
        this.setClubs([]);
        this.selectedClub = null;
      }
    },

    async checkSession() {
      try {
        const response = await apiClient.get('/session/status');
        if (!response.data.valid) {
          this.handleLogout();
        }
      } catch (error) {
        this.logout();
      }
    },

    handleLogout() {
      this.showInfo(this.$t('messages.warning'), this.$t('auth.sessionExpired'), '', 'warning');
      this.logout();
      clearInterval(this.sessionInterval);
      this.$router.push('/login');
    }
  },
  async mounted() {
    // Click-outside handler für User-Dropdown
    document.addEventListener('click', this.handleClickOutside);
    
    // Synchronisiere Sprache aus Store mit i18n
    if (this.language) {
      this.$i18n.locale = this.language;
    }
    
    // Nur Daten laden, wenn der Benutzer authentifiziert ist
    if (this.isAuthenticated) {
      try {
        const response = await apiClient.get('/clubs');
        this.setClubs(response.data);
        await this.initializeClubSelectionState();
        this.checkSession();
        // Session-Check alle 30 Sekunden
        this.sessionInterval = setInterval(this.checkSession, 30000);
      } catch (error) {
        this.setClubs([]);
        this.selectedClub = null;
      }
    }
    window.addEventListener('resize', this.handleViewportResize);
  },
  beforeUnmount() {
    clearInterval(this.sessionInterval);
    document.removeEventListener('click', this.handleClickOutside);
    window.removeEventListener('resize', this.handleViewportResize);
  }
};
</script>

<style scoped>
/* Main Container */
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Header */
.app-header {
  background:
    linear-gradient(135deg, rgba(24, 70, 54, 0.96), rgba(47, 122, 95, 0.94)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent);
  color: var(--text-on-primary);
  box-shadow: 0 8px 24px rgba(24, 70, 54, 0.18);
  position: relative;
  z-index: 1000;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
}

.header-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.75rem;
  height: 3rem;
}

/* Styling für das erste h1 (aus main.scss) - Design vom zweiten, aber ursprüngliche Schriftgröße */
.app-header h1 {
  margin: 0;
  font-weight: 700;
  color: var(--text-on-primary);
  text-align: center;
  /* Schriftgröße bleibt wie in der main.scss definiert */
}

.user-menu {
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text-on-primary);
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.user-icon {
  font-size: 1.2rem;
}

.user-email {
  font-weight: 500;
}

.dropdown-arrow {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--surface-color);
  border: 1px solid rgba(24, 70, 54, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(24, 70, 54, 0.16);
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;
  animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  min-height: 0;
  justify-content: flex-start;
  transition: var(--transition-fast);
}

.dropdown-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-strong);
  transform: none;
}

.dropdown-icon {
  font-size: 1.1rem;
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 0.25rem 0;
}

.logout-item {
  color: #dc3545;
  font-weight: 500;
}

.logout-item:hover {
  background-color: #fff1f3;
  color: var(--danger-color);
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.home-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* App Container */
.app-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
}

/* Sidebar */
.sidebar {
  width: 280px;
  background:
    linear-gradient(180deg, var(--surface-color), var(--surface-muted));
  border-right: 1px solid rgba(24, 70, 54, 0.08);
  box-shadow: inset -1px 0 0 rgba(24, 70, 54, 0.04);
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-content {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
}

.club-selector {
  padding: 0.9rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(24, 70, 54, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(24, 70, 54, 0.05);
}

.club-selector .card-title {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--primary-strong);
  font-weight: 600;
}

.select-group {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.club-select {
  flex: 1;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  font-size: 0.75rem;
  background: white;
  color: var(--text-primary);
}

.select-group .btn-primary {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.nav-menu-no-flex {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 0;
  min-height: 0;
  overflow-y: auto;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}

.nav-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-strong);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.25rem;
  padding: 0 0.25rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 10px;
  transition: var(--transition-fast);
  font-size: 1rem;
  border: 1px solid transparent;
}

.nav-link:hover {
  background: var(--primary-light);
  color: var(--primary-strong);
  transform: translateX(0.125rem);
  border-color: rgba(47, 122, 95, 0.08);
}

.nav-link.router-link-active {
  background: linear-gradient(135deg, var(--primary-soft), rgba(255, 255, 255, 0.92));
  color: var(--primary-strong);
  border-color: rgba(47, 122, 95, 0.14);
  box-shadow: inset 0 0 0 1px rgba(47, 122, 95, 0.03);
}

.nav-icon {
  font-size: 0.875rem;
  width: 1rem;
  text-align: center;
}

/* Sidebar Footer */
.sidebar-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.logout-btn {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.75rem;
  justify-content: center;
}

/* Auth Navigation */
.auth-nav {
  width: 260px;
  background: linear-gradient(180deg, var(--surface-color), var(--surface-muted));
  border-right: 1px solid rgba(24, 70, 54, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.mobile-club-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-club-picker-text {
  margin: 0;
  color: var(--text-muted);
}

.mobile-club-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-club-picker-option {
  width: 100%;
  justify-content: center;
}

.mobile-club-picker-option.secondary-option {
  background: white;
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
}

.auth-links a {
  text-align: center;
  padding: 0.75rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.auth-links a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.auth-links a::after {
  display: none;
}

/* Main Content */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-canvas);
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 32px; /* Platz für Statusleiste (24px + 8px padding) */
}

.main-content.main-content-locked {
  overflow: hidden;
}

/* Footer */
.app-footer {
  background: rgba(255, 255, 255, 0.86);
  border-top: 1px solid rgba(24, 70, 54, 0.08);
  backdrop-filter: blur(6px);
  padding: 0.75rem 1rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.footer-link {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--primary-color);
}

.content {
  padding: 1.5rem;
  min-height: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.content.content-full-height {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content.content-full-height > * {
  flex: 1;
  min-height: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .sidebar {
    width: 240px;
  }
  
  .content {
    padding: 1.25rem;
  }
}

@media (max-width: 768px) {
  .auth-nav {
    display: none;
  }

  .sidebar {
    width: 220px;
  }
  
  .content {
    padding: 0.75rem;
  }
  
  .header-content {
    padding: 0 0.5rem;
  }
  
  .app-header h1 {
    font-size: 1.125rem;
  }
  
  .sidebar-content {
    padding: 0.5rem;
  }
  
  .main-content {
    overflow-y: auto;
  }
}

/* Toggle-Button für Sidebar (nur auf mobil sichtbar) */
.sidebar-toggle {
  display: none;
}

@media (max-width: 480px) {
  .sidebar {
    position: fixed;
    top: 3rem;
    left: 0;
    height: calc(100vh - 3rem);
    z-index: 999;
    transition: width 0.3s ease;
  }
  
  .sidebar.sidebar-collapsed {
    width: 60px;
  }
  
  .sidebar:not(.sidebar-collapsed) {
    width: 240px;
  }
  
  .sidebar-toggle {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-color);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  .sidebar-toggle:active {
    transform: scale(0.95);
  }
  
  /* Im kollabierten Zustand: nur Icons zeigen */
  .sidebar-collapsed .nav-link span:not(.nav-icon),
  .sidebar-collapsed .nav-link text,
  .sidebar-collapsed .nav-title,
  .sidebar-collapsed .card-title,
  .sidebar-collapsed .logout-btn span:not(.nav-icon),
  .sidebar-collapsed .club-selector,
  .sidebar-collapsed .select-group,
  .sidebar-collapsed .btn-primary {
    display: none !important;
  }
  
  /* Alle Text-Inhalte in nav-links verstecken */
  .sidebar-collapsed .nav-link {
    justify-content: center;
    padding: 0.75rem 0.5rem;
    font-size: 0;
  }
  
  .sidebar-collapsed .nav-icon {
    font-size: 1.5rem;
    margin: 0;
  }
  
  .sidebar-collapsed .logout-btn {
    justify-content: center;
  }
  
  .sidebar-collapsed .sidebar-footer {
    border-top: none;
  }
  
  .content {
    padding: 0.625rem;
  }
  
  .header-content {
    padding: 0 0.5rem;
  }
  
  .app-header h1 {
    font-size: 1rem;
  }
  
  .user-info {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  
  .user-email {
    display: none; /* Nur Icon auf mobile */
  }
  
  .sidebar-content {
    padding: 0.5rem;
  }

  .sidebar.sidebar-collapsed .sidebar-content {
    padding-top: 3rem;
  }
  
  .main-content {
    margin-left: 60px;
    overflow-y: auto;
    transition: margin-left 0.3s ease;
  }
  
  .sidebar:not(.sidebar-collapsed) ~ .main-content {
    margin-left: 240px;
  }

  .auth-nav + .main-content {
    margin-left: 0;
  }
}

/* Button-Varianten */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  border: none;
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-light);
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
  color: white;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-light);
}

.btn-secondary {
  background: white;
  color: var(--secondary-color);
  border: 1.5px solid var(--secondary-color);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-light);
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
}

.btn-secondary:hover {
  background: var(--secondary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}
</style>
