/**
 * Mon Petit Tartan - Pages CSS
 * Winamax-inspired page styles
 */

/* AUTH PAGES */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background: var(--color-bg-primary);
    position: relative;
}
.auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 70%, rgba(255,200,0,0.05) 0%, transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(139,92,246,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.auth-container { width: 100%; max-width: 420px; position: relative; z-index: 1; }

.auth-card {
    background: var(--color-bg-card);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-color);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.4s ease;
}

.auth-header { text-align: center; margin-bottom: var(--spacing-2xl); }
.auth-logo { display: inline-flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.auth-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-sm); }
.auth-subtitle { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.auth-social { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); }
.auth-social .btn { flex: 1; }

.auth-divider { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

.auth-footer { text-align: center; margin-top: var(--spacing-xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--border-color); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.auth-footer a { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

/* Player type selection */
.player-type-selector { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.player-type-option { flex: 1; padding: var(--spacing-lg); background: var(--color-bg-tertiary); border: 2px solid var(--border-color); border-radius: var(--border-radius-lg); cursor: pointer; text-align: center; transition: all var(--transition-fast); }
.player-type-option:hover { border-color: rgba(255,255,255,0.15); }
.player-type-option.selected { border-color: var(--color-primary); background: rgba(255,200,0,0.05); }
.player-type-option input { display: none; }
.player-type-icon { width: 48px; height: 48px; margin: 0 auto var(--spacing-sm); display: flex; align-items: center; justify-content: center; background: var(--color-bg-input); border-radius: var(--border-radius-md); font-size: var(--font-size-xl); color: var(--color-text-muted); transition: all var(--transition-fast); }
.player-type-option.selected .player-type-icon { background: var(--color-primary); color: var(--color-text-inverse); }
.player-type-label { font-weight: var(--font-weight-semibold); margin-bottom: 4px; }
.player-type-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* DASHBOARD */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.welcome-banner {
    background: var(--color-bg-card);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-color);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}
.welcome-banner::before {
    content: "";
    position: absolute;
    right: -50px; bottom: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,200,0,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.welcome-content { position: relative; z-index: 1; }
.welcome-title { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); }
.welcome-text { color: var(--color-text-secondary); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); }
.welcome-image { width: 120px; height: auto; position: relative; z-index: 1; }

/* Match Card - Winamax style */
.match-card {
    background: var(--color-bg-card);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}
.match-card:hover { border-color: rgba(255,255,255,0.12); }

.match-header { display: flex; align-items: center; justify-content: space-between; }
.match-league { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.match-status { padding: 3px 10px; border-radius: var(--border-radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px; }
.match-status.upcoming { background: rgba(255,200,0,0.15); color: var(--color-primary); }
.match-status.live { background: rgba(255,59,59,0.15); color: var(--color-danger); animation: pulse 2s infinite; }
.match-status.completed { background: rgba(52,199,89,0.15); color: var(--color-success); }

.match-teams { display: flex; align-items: center; justify-content: space-between; }
.match-team { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); text-align: center; }
.match-team-flag { width: 48px; height: 48px; border-radius: var(--border-radius-full); object-fit: cover; border: 2px solid var(--border-color); }
.match-team-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.match-vs { font-weight: var(--font-weight-bold); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.match-countdown { text-align: center; padding: 6px 12px; background: rgba(255,200,0,0.08); border-radius: var(--border-radius-md); font-weight: var(--font-weight-bold); color: var(--color-primary); font-size: var(--font-size-sm); }

/* ATHLETE CARDS */
.athlete-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-md); }

.athlete-card {
    background: var(--color-bg-card);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition-fast);
}
.athlete-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.athlete-card-header { padding: var(--spacing-md) var(--spacing-lg); display: flex; align-items: center; gap: var(--spacing-md); background: rgba(0,0,0,0.2); }
.athlete-photo { width: 48px; height: 48px; border-radius: var(--border-radius-full); object-fit: cover; border: 2px solid var(--color-primary); }
.athlete-info { flex: 1; min-width: 0; }
.athlete-name { font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--font-size-sm); }
.athlete-club { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.athlete-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.athlete-status.pleine_forme { background: var(--color-success); }
.athlete-status.forme_moyenne { background: var(--color-warning); }
.athlete-status.forme_basse { background: #ff8c00; }
.athlete-status.entrainement { background: var(--color-info); }
.athlete-status.vacances { background: var(--color-text-muted); }
.athlete-status.blesse { background: var(--color-danger); }

.athlete-card-body { padding: var(--spacing-md) var(--spacing-lg); }
.athlete-event { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-sm); }
.athlete-event-name { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.athlete-event-perf { font-weight: var(--font-weight-bold); color: var(--color-primary); font-size: var(--font-size-sm); }

.athlete-value { display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-md); border-top: 1px solid var(--border-color); }
.athlete-price { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.athlete-change { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.athlete-change.up { color: var(--color-success); }
.athlete-change.down { color: var(--color-danger); }

/* LEAGUE CARDS */
.league-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-md); }

.league-card {
    background: var(--color-bg-card);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition-fast);
}
.league-card:hover { border-color: rgba(255,255,255,0.12); }

.league-card-banner { height: 80px; position: relative; display: flex; align-items: center; justify-content: center; }
.league-card-banner.nationale { background: linear-gradient(135deg, #1a0a2e 0%, #3d1070 100%); }
.league-card-banner.regionale { background: linear-gradient(135deg, #0a1e3e 0%, #1a4080 100%); }
.league-card-banner.departementale { background: linear-gradient(135deg, #0a2e1a 0%, #1a6030 100%); }
.league-card-icon { font-size: var(--font-size-3xl); color: rgba(255,255,255,0.15); }

.league-card-body { padding: var(--spacing-md) var(--spacing-lg); }
.league-card-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); }
.league-card-info { display: flex; gap: var(--spacing-lg); color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); }
.league-card-info span { display: flex; align-items: center; gap: var(--spacing-xs); }

.league-card-footer { display: flex; align-items: center; justify-content: space-between; }
.league-rank { display: flex; align-items: center; gap: var(--spacing-sm); }
.league-rank-position { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.league-rank-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* TEAM PREVIEW */
.team-preview { background: var(--color-bg-card); border-radius: var(--border-radius-xl); border: 1px solid var(--border-color); overflow: hidden; }
.team-preview-header { padding: var(--spacing-md) var(--spacing-lg); background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: space-between; }
.team-preview-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.team-preview-actions { display: flex; gap: var(--spacing-sm); }

.team-field {
    position: relative;
    padding: var(--spacing-xl);
    background: linear-gradient(180deg, #d44a2e 0%, #d44a2e 12.5%, #c73e24 12.5%, #c73e24 25%, #d44a2e 25%, #d44a2e 37.5%, #c73e24 37.5%, #c73e24 50%, #d44a2e 50%, #d44a2e 62.5%, #c73e24 62.5%, #c73e24 75%, #d44a2e 75%, #d44a2e 87.5%, #c73e24 87.5%, #c73e24 100%);
    min-height: 350px;
}
.team-field::before { content: ""; position: absolute; left: 40px; right: 40px; top: 15px; bottom: 15px; border: 3px solid rgba(255,255,255,0.25); border-radius: 4px; }

.team-category { margin-bottom: var(--spacing-xl); }
.team-category-title { text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: var(--spacing-md); }
.team-athletes { display: flex; justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; }

.team-athlete-slot { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); }
.team-athlete-avatar { width: 56px; height: 56px; border-radius: var(--border-radius-full); background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); color: var(--color-text-muted); position: relative; border: 2px solid var(--border-color); }
.team-athlete-avatar.captain::after { content: "C"; position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: var(--color-text-inverse); }
.team-athlete-avatar.vice-captain::after { content: "VC"; position: absolute; top: -4px; right: -4px; width: 24px; height: 20px; background: var(--color-info); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; color: white; }

.team-athlete-name { font-size: 10px; font-weight: var(--font-weight-medium); color: white; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: var(--border-radius-sm); max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-athlete-value { font-size: 10px; color: rgba(255,255,255,0.6); }

/* PROFILE PAGE */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: var(--color-bg-card);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-xl);
}
.profile-avatar { width: 100px; height: 100px; border-radius: var(--border-radius-full); object-fit: cover; border: 3px solid var(--color-primary); }
.profile-info { flex: 1; }
.profile-name { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xs); }
.profile-username { color: var(--color-text-muted); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); }
.profile-badges { display: flex; gap: var(--spacing-sm); }
.profile-stats { display: flex; gap: var(--spacing-xl); }
.profile-stat { text-align: center; }
.profile-stat-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.profile-stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* MARKET PAGE */
.market-filters { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); flex-wrap: wrap; }
.market-search { flex: 1; min-width: 200px; }
.market-filter-group { display: flex; gap: var(--spacing-xs); }

.filter-btn {
    padding: 8px 16px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.filter-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.filter-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }

/* RANKING PAGE */
.ranking-list { background: var(--color-bg-card); border-radius: var(--border-radius-lg); border: 1px solid var(--border-color); overflow: hidden; }

.ranking-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}
.ranking-item:last-child { border-bottom: none; }
.ranking-item:hover { background: var(--color-bg-hover); }
.ranking-item.current-user { background: rgba(255,200,0,0.05); }

.ranking-position {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-md); font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-md);
    color: var(--color-text-secondary);
}
.ranking-position.top-1 { background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #1a1a1a; }
.ranking-position.top-2 { background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%); color: #1a1a1a; }
.ranking-position.top-3 { background: linear-gradient(135deg, #cd7f32 0%, #dda15e 100%); color: #1a1a1a; }

.ranking-user { display: flex; align-items: center; gap: var(--spacing-md); flex: 1; }
.ranking-user-avatar { width: 40px; height: 40px; border-radius: var(--border-radius-full); object-fit: cover; }
.ranking-user-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.ranking-user-team { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.ranking-stats { display: flex; gap: var(--spacing-xl); }
.ranking-stat { text-align: right; }
.ranking-stat-value { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.ranking-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* PLAYER TYPE CARDS */
.player-type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }

.player-type-card {
    position: relative;
    display: block;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.player-type-card:hover { border-color: rgba(255,255,255,0.15); }
.player-type-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.player-type-card.selected, .player-type-card:has(input:checked) { border-color: var(--color-primary); background: rgba(255,200,0,0.03); }
.player-type-card.selected .card-check, .player-type-card:has(input:checked) .card-check { opacity: 1; transform: scale(1); }

.player-type-card .card-icon { width: 48px; height: 48px; border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: white; margin-bottom: 0.75rem; }
.player-type-card .card-icon.gradient-1 { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.player-type-card .card-icon.gradient-2 { background: linear-gradient(135deg, #FFC800, #FF9500); }

.player-type-card .card-content h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.375rem 0; color: var(--color-text-primary); }
.player-type-card .card-content p { color: var(--color-text-secondary); font-size: 0.85rem; line-height: 1.5; margin: 0 0 0.75rem 0; }

.player-type-card .card-features { list-style: none; padding: 0; margin: 0; }
.player-type-card .card-features li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.8rem; color: var(--color-text-secondary); }
.player-type-card .card-features li i { color: var(--color-primary); font-size: 0.7rem; }
.player-type-card .card-features li .fa-star { color: #ffd700; }

.player-type-card .card-check { position: absolute; top: 0.75rem; right: 0.75rem; width: 24px; height: 24px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-inverse); font-size: 0.65rem; opacity: 0; transform: scale(0.5); transition: all 0.2s ease; }
.player-type-card .card-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: var(--color-text-inverse); font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 50px; white-space: nowrap; }
.player-type-card.featured { border-color: rgba(255,200,0,0.2); margin-top: 0.5rem; }