/* assets/css/pages.css */

/* --- Leaderboard Page Styles --- */
.leaderboard-filters { display: flex; gap: 12px; justify-content: center; margin-bottom: 32px; }
.leaderboard-card { display: flex; align-items: center; gap: 20px; background: white; border-radius: 20px; padding: 24px; margin-bottom: 16px; border: 1px solid #eef2f4; transition: 0.3s; }
.leaderboard-card:hover { transform: translateY(-4px); box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1); }
.rank { font-size: 32px; font-weight: 800; width: 60px; text-align: center; }
.rank-1 .rank { color: #ffd700; }
.rank-2 .rank { color: #c0c0c0; }
.rank-3 .rank { color: #cd7f32; }
.user-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; display: flex; gap: 16px; }
.user-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.user-name a { color: #1a2e3a; text-decoration: none; }
.user-name a:hover { color: #0a8270; }
.user-bio { color: #5a6e7a; font-size: 13px; margin-bottom: 8px; }
.user-stats { display: flex; gap: 16px; font-size: 12px; color: #5a6e7a; }
.user-points { text-align: center; min-width: 100px; }
.points { font-size: 28px; font-weight: 800; color: #0a8270; }
.points-label { font-size: 12px; color: #5a6e7a; }

/* --- Settings Page Styles --- */
.settings-container { max-width: 600px; margin: 40px auto; background: white; padding: 32px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #eef2f4; }
.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #1a2e3a; font-size: 14px; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 12px; font-family: inherit; font-size: 15px; }
.form-group input:focus, .form-group textarea:focus { border-color: #0a8270; outline: none; }
.cover-upload { height: 150px; background: #eef2f4; border-radius: 12px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; background-size: cover; background-position: center; position: relative; }
.cover-upload .upload-icon { background: rgba(0,0,0,0.5); color: white; padding: 10px 16px; border-radius: 8px; font-size: 14px; }
.cover-upload:hover .upload-icon { background: rgba(0,0,0,0.7); }
#coverImagePreview { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.avatar-upload { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.avatar-preview { width: 80px; height: 80px; border-radius: 50%; background: #e6f4f1; color: #0a8270; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; border: 2px solid #eef2f4; cursor: pointer; position: relative; }
.avatar-preview::after { content: '📷'; position: absolute; bottom: 0; right: -4px; background: white; color: #1a2e3a; border: 1px solid #cbd5e1; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.btn-save { background: #0a8270; color: white; padding: 12px 24px; border: none; border-radius: 40px; font-weight: 600; cursor: pointer; width: 100%; font-size: 16px; }
.btn-save:hover { background: #065c4f; }

/* --- Pagination Styles --- */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 40px 0; }
.page-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid #eef2f4; text-decoration: none; color: #1a2e3a; transition: 0.2s; }
.page-btn.active { background: #0a8270; color: white; border-color: #0a8270; }
.page-btn:hover:not(.active) { background: #e6f4f1; }

/* --- Profile Page Styles --- */
.profile-header { background: white; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-bottom: 32px; margin-top: 24px; }
.cover-photo { height: 220px; background-color: #e6f4f1; background-size: cover; background-position: center; border-radius: 20px 20px 0 0; }
.profile-details { padding: 0 24px 24px; text-align: center; margin-top: -60px; position: relative; }
.avatar { width: 120px; height: 120px; background: #0a8270; color: white; font-size: 42px; font-weight: bold; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 5px solid white; position: relative; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.avatar.editable::after { content: '📷'; position: absolute; bottom: 0; right: 0; background: white; color: #1a2e3a; border: 2px solid #eef2f4; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.2s; }
.name { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.username { color: #5a6e7a; font-size: 16px; margin-bottom: 20px; }
.bio { font-size: 16px; line-height: 1.6; color: #475569; max-width: 500px; margin: 0 auto 24px; }
.stats { display: flex; justify-content: center; gap: 40px; border-top: 1px solid #eef2f4; padding-top: 24px; margin-top: 24px; flex-wrap: wrap; }
.stat-box { text-align: center; }
.stat-num { font-size: 24px; font-weight: 800; color: #0a8270; margin-bottom: 4px; }
.stat-label { font-size: 13px; color: #5a6e7a; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.expertise-tag { background: #e6f4f1; color: #0a8270; padding: 6px 14px; border-radius: 20px; font-weight: 600; font-size: 14px; display: inline-block; margin-bottom: 20px; }
.social-icon { color: #5a6e7a; text-decoration: none; font-size: 20px; margin: 0 8px; transition: color 0.2s; }
.social-icon:hover { color: #0a8270; }

/* Contribution Heatmap */
.heatmap-container { margin: 32px 0; }
.heatmap { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; }
.heatmap-day { background-color: #ebedf0; border-radius: 2px; }
.heatmap-day[data-level="1"] { background-color: #9be9a8; }
.heatmap-day[data-level="2"] { background-color: #40c463; }
.heatmap-day[data-level="3"] { background-color: #30a14e; }
.heatmap-day[data-level="4"] { background-color: #216e39; }

/* Badges Section */
.badges-section { background: white; padding: 24px; border-radius: 20px; margin-bottom: 32px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; }
.badge-item { text-align: center; }
.badge-icon { font-size: 28px; color: #0a8270; width: 60px; height: 60px; background: #e6f4f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.badge-name { font-size: 13px; font-weight: 600; }

@media (max-width: 768px) {
    .leaderboard-card { flex-direction: column; text-align: center; }
    .user-info { flex-direction: column; align-items: center; }
    .user-stats { justify-content: center; flex-wrap: wrap; }
}

/* --- Visual Analysis Page Styles --- */
.analysis-container { max-width: 800px; margin: 40px auto; background: white; padding: 32px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.upload-area { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: 0.2s; }
.upload-area:hover { border-color: #0a8270; background: #f8fafc; }
.upload-area i { font-size: 48px; color: #0a8270; margin-bottom: 16px; }
.upload-area p { font-weight: 600; color: #1a2e3a; }
.upload-area span { font-size: 13px; color: #5a6e7a; }
#imagePreview { max-width: 100%; max-height: 300px; border-radius: 12px; margin-top: 20px; }
.analysis-result { margin-top: 32px; background: #f8fafc; border: 1px solid #eef2f4; border-radius: 12px; padding: 24px; }
.analysis-result h3 { color: #0a8270; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #0a8270; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }