/* Base Styles */
:root {
   --primary: #4361ee;
   --secondary: #3f37c9;
   --accent: #4895ef;
   --background: #f0f2f5;
   --card: #ffffff;
   --text: #2b2d42;
   --text-light: #8d99ae;
   --success: #4cc9f0;
   --warning: #ffd60a;
   --danger: #ef233c;
   --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}

body {
   background: linear-gradient(to bottom, #f8f9fa, #f0f2f5);
   min-height: 100vh;
   color: var(--text);
   line-height: 1.6;
}

/* Navigation */
.nav-bar {
   background: var(--card);
   border-radius: 20px;
   padding: 1.5rem 2rem;
   margin-bottom: 2rem;
   box-shadow: var(--shadow);
   max-width: 1390px;
   margin: 1rem auto;
   height: 120px;
   display: flex;
   align-items: center;
}

.nav-content {
   text-decoration: none;
   display: flex;
   border-radius: 8px;
   justify-content: space-between;
   padding: 0.3rem 0.5rem;
   align-items: center;
   width: 100%;
}

.nav-logo {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   text-decoration: none;
}

.nav-logo i {
   font-size: 2rem;
   color: var(--primary);
}

.nav-logo span {
   font-size: 1.5rem;
   color: var(--text);
   font-weight: 500;
}

.nav-links {
   display: flex;
   gap: 1.5rem;
}

.nav-link {
   text-decoration: none;
   color: var(--text);
   padding: 0.5rem 1rem;
   border-radius: 8px;
   transition: all 0.3s ease;
   font-weight: 500;
}

.nav-link:hover {
   color: var(--primary);
   background: transparent;
}

.nav-link.active {
   background: var(--primary);
   color: white;
}

/* Profile Container */
.profile-container {
   max-width: 1440px;
   margin: 2rem auto;
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 2rem;
   padding: 0 2rem;
}

/* Profile Sidebar */
.profile-sidebar {
   background: var(--card);
   border-radius: 20px;
   padding: 3rem 2rem;
   box-shadow: var(--shadow);
   height: fit-content;
   text-align: center;
   width: 100%;
   max-width: 300px;
}

.profile-avatar {
   position: relative;
   width: 140px;
   height: 140px;
   margin: 0 auto 2rem;
   border-radius: 50%;
   background: #f8f9fa;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 3.5rem;
   color: #6b7280;
}

/* Profile Info */
.profile-info {
   width: 100%;
   padding: 0 1rem;
}

/* Updated Profile Name */
.profile-name {
   font-size: clamp(1rem, 5vw, 1.75rem);
   margin-bottom: 2rem;
   color: var(--text);
   font-weight: 500;
   word-wrap: break-word;
   overflow-wrap: break-word;
   line-height: 1.2;
   max-width: 100%;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Stats List */
.stats-list {
   list-style: none;
   margin-top: 2.5rem;
   text-align: left;
}

.stat-item {
   display: flex;
   justify-content: space-between;
   padding: 1rem 0;
   border-bottom: 1px solid #f1f3f9;
}

.stat-item span {
   color: #94a3b8;
   font-size: 1rem;
   font-weight: 400;
}

.stat-item strong {
   color: var(--text);
   font-size: 1rem;
   font-weight: 500;
}

.stat-item:last-child {
   border-bottom: none;
}

/* Main Content */
.main-content {
   display: grid;
   gap: 2rem;
}

/* Level Progress Card */
.level-card {
   background: var(--card);
   border-radius: 20px;
   padding: 2rem;
   box-shadow: var(--shadow);
}

.level-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
}

.level-info h2 {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text);
}

#levelDisplay {
   color: var(--text-light);
   font-weight: 500;
}

.progress-bar {
   height: 8px;
   background: #f1f3f9;
   border-radius: 4px;
   overflow: hidden;
   margin: 1rem 0;
}

.progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--primary), var(--accent));
   transition: width 0.3s ease;
}

#xpInfo {
   color: var(--text-light);
   font-size: 0.875rem;
}

/* Chart Card */
.chart-card {
   background: white;
   border-radius: 10px;
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.chart-card h2 {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 1.5rem;
}

/* Rank Badge Styling */
.rank-badge {
   position: relative;
   margin: 0 auto 2rem;
   padding: 8px 20px;
   background: var(--primary);
   color: white;
   font-weight: 500;
   font-size: 0.9rem;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   border-radius: 8px;
   box-shadow: 
       -8px 0 0 -2px rgba(63, 55, 201, 0.8),
       -16px 0 0 -4px rgba(45, 49, 250, 0.6);
}

.rank-badge i {
   font-size: 1rem;
   color: #FFD700;
}

/* Custom colors for different ranks */
.rank-badge[data-rank="Beginner 🎮"] {
   background: #95a5a6;
   box-shadow: 
       -8px 0 0 -2px rgba(127, 140, 141, 0.8),
       -16px 0 0 -4px rgba(149, 165, 166, 0.6);
}

.rank-badge[data-rank="Rising Star ⭐"] {
   background: #9b59b6;
   box-shadow: 
       -8px 0 0 -2px rgba(142, 68, 173, 0.8),
       -16px 0 0 -4px rgba(155, 89, 182, 0.6);
}

.rank-badge[data-rank="Skilled Player 🌟"] {
   background: #3498db;
   box-shadow: 
       -8px 0 0 -2px rgba(41, 128, 185, 0.8),
       -16px 0 0 -4px rgba(52, 152, 219, 0.6);
}

.rank-badge[data-rank="Expert Solver 🎯"] {
   background: #2ecc71;
   box-shadow: 
       -8px 0 0 -2px rgba(46, 204, 113, 0.8),
       -16px 0 0 -4px rgba(46, 204, 113, 0.6);
}

.rank-badge[data-rank="Puzzle Master 🏆"] {
   background: #f1c40f;
   box-shadow: 
       -8px 0 0 -2px rgba(241, 196, 15, 0.8),
       -16px 0 0 -4px rgba(241, 196, 15, 0.6);
   color: #2c3e50;
}

/* Achievements Section */
.achievements-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1.5rem;
   padding: 1rem;
}

.achievement-card {
   background: var(--card);
   border-radius: 16px;
   padding: 1.5rem;
   position: relative;
   display: flex;
   flex-direction: column;
   transition: all 0.3s ease;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   height: 100%;
   min-height: 200px;
}

.achievement-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.achievement-card.locked {
   background: #f8f9fa;
   opacity: 0.8;
}

.achievement-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 1.5rem;
}

/* Achievement Icons */
.achievements-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1.5rem;
   padding: 1rem;
}

.achievement-card {
   background: var(--card);
   border-radius: 16px;
   padding: 1.5rem;
   position: relative;
   box-shadow: var(--shadow);
   transition: all 0.3s ease;
}

.achievement-card:hover {
   transform: translateY(-2px);
}

.achievement-card.locked {
   background: #f8f9fa;
   opacity: 0.7;
}

.achievement-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
}

.achievement-icon {
   font-size: 24px;
   margin-right: 10px;
}

.achievement-info h3 {
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 0.5rem;
}

.achievement-info p {
   font-size: 0.875rem;
   color: var(--text-light);
   margin-bottom: 1rem;
}

.status-unlocked {
   background: #10b981;
   color: white;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 0.75rem;
}

.status-locked {
   background: #e2e8f0;
   color: #64748b;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 0.75rem;
}

.achievement-progress {
   margin-top: 1rem;
}

.progress-bar {
   width: 100%;
   height: 6px;
   background: #f1f5f9;
   border-radius: 999px;
   overflow: hidden;
   margin-bottom: 0.5rem;
}

.progress-fill {
   height: 100%;
   background: var(--primary);
   transition: width 0.3s ease;
}

.progress-text {
   font-size: 0.75rem;
   color: var(--text-light);
}

/* Status Badges */
.status-badge {
   padding: 0.4rem 0.8rem;
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 500;
   position: absolute;
   top: 1rem;
   right: 1rem;
}

.status-unlocked {
   background: #10b981;
   color: white;
}

.status-locked {
   background: #e2e8f0;
   color: #64748b;
}
/* Game History */
.history-card {
   background: var(--card);
   border-radius: 20px;
   padding: 2rem;
   box-shadow: var(--shadow);
}

.history-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5rem;
}

.history-header h2 {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text);
}

#historyFilter {
   padding: 0.5rem 1rem;
   border: 1px solid #f1f3f9;
   border-radius: 8px;
   background: white;
   color: var(--text);
   font-size: 0.875rem;
}

.games-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
}

.games-table th {
   background: #f1f3f9;
   padding: 1rem;
   text-align: left;
   font-weight: 500;
   color: var(--text-light);
   font-size: 0.875rem;
}

.games-table td {
   padding: 1rem;
   border-bottom: 1px solid #f1f3f9;
   color: var(--text);
}

/* Logout Button */
.custom-logout-btn {
   width: 100%;
   background: var(--card);
   border: 2px solid var(--primary);
   border-radius: 8px;
   padding: 8px 16px;
   color: var(--primary);
   font-size: 14px;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.custom-logout-btn:hover {
   background: var(--primary);
   color: var(--card);
}

.custom-logout-btn i {
   font-size: 16px;
}

/* Responsive Design */
@media (max-width: 1200px) {
   .profile-container {
       grid-template-columns: 1fr;
       padding: 1rem;
   }

   .profile-sidebar {
       max-width: 400px;
       margin: 0 auto;
   }
}

@media (max-width: 768px) {
   .nav-bar {
       margin: 0.5rem;
       border-radius: 16px;
       height: 90px;
   }
   
   .nav-content {
       flex-direction: row;
       gap: 1rem;
   }
   
   .nav-links {
       gap: 0.75rem;
   }
   
   .nav-link {
       padding: 0.4rem 0.8rem;
       font-size: 0.9rem;
   }

   .achievements-grid {
       grid-template-columns: 1fr;
       padding: 1.5rem;
   }

   .games-table {
       display: block;
       overflow-x: auto;
   }

   .level-card, .chart-card, .history-card {
       padding: 1.5rem;
   }
}

/* Activity Tracker Styles */
.activity-card {
   background: var(--card);
   border-radius: 20px;
   padding: 2rem;
   box-shadow: var(--shadow);
   margin-bottom: 2rem;
}

.activity-tracker {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: repeat(auto-fit, minmax(60px, 1fr));
   gap: 6px;
   margin-top: 1rem;
}



.day-block {
   text-align: center;
   position: relative;
   cursor: pointer;
   aspect-ratio: 1;
}


.day-label {
   font-size: 0.75rem;
   color: var(--text-light);
   margin-bottom: 0.25rem;
   opacity: 0;
   transition: opacity 0.2s ease;
   position: absolute;
   left: 50%;
   top: -25px;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 4px 8px;
   border-radius: 4px;
   white-space: nowrap;
   pointer-events: none;
   z-index: 10;
}

.activity-bar {
   height: 100%;
   background: #f1f3f9;
   border-radius: 6px;
   position: relative;
   overflow: hidden;
   transition: transform 0.2s ease;
}

.day-block:hover .day-label,
.day-block:hover .activity-count {
    opacity: 1;
}

.activity-bar:hover {
   transform: translateY(-2px);
}

.activity-fill {
   position: absolute;
   top: 0;  /* Diubah dari bottom ke top */
   left: 0;
   width: 100%;
   height: 100%; /* Ditambah height 100% */
}

/* Warna berdasarkan jumlah game */
.activity-fill.low {
   background: #4361ee;
   opacity: 0.3;
}

.activity-fill.medium {
   background: #4361ee;
   opacity: 0.6;
}

.activity-fill.high {
   background: #4361ee;
   opacity: 0.9;
}
.activity-count {
   font-size: 0.75rem;
   opacity: 0;
   transition: opacity 0.2s ease;
   position: absolute;
   left: 50%;
   bottom: -25px;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 4px 8px;
   border-radius: 4px;
   white-space: nowrap;
   pointer-events: none;
   z-index: 10;
}

.day-block:hover .activity-count,
.day-block:hover .day-label {
   opacity: 1;
}

/* Stats Summary Styles */
.stats-summary-card {
   background: var(--card);
   border-radius: 20px;
   padding: 2rem;
   box-shadow: var(--shadow);
   margin-bottom: 2rem;
}

.stats-summary {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1.5rem;
   margin-top: 1.5rem;
}

.stat-block {
   background: #f8f9fa;
   border-radius: 12px;
   padding: 1.5rem;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.stat-block::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(90deg, var(--primary), var(--accent));
}

.stat-icon {
   font-size: 1.5rem;
   margin-bottom: 1rem;
}

.stat-value {
   font-size: 2rem;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 0.5rem;
}

.stat-label {
   font-size: 0.9rem;
   color: var(--text-light);
}

.stat-trend {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   margin-top: 1rem;
   font-size: 0.8rem;
}

.trend-up {
   color: #2ecc71;
}

.trend-down {
   color: #e74c3c;
}

.activity-filter {
   margin-bottom: 1.5rem;
   min-width: 220px;
   width: fit-content;
}

#monthFilter {
   padding: 0.5rem 1rem;
   border: 1px solid #f1f3f9;
   border-radius: 8px;
   background: white;
   color: var(--text);
   font-size: 0.875rem;
   cursor: pointer;
}

.activity-tracker {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 8px;
   margin-top: 1rem;
}

.activity-filter {
   margin-bottom: 1rem;
}

#activityView {
   padding: 0.75rem 1rem;
   border: 1px solid #f1f3f9;
   border-radius: 8px;
   background: white;
   color: var(--text);
   font-size: 0.875rem;
   cursor: pointer;
   width: 220px; /* Ubah dari 200px ke 220px */
   min-width: 220px; /* Tambahkan min-width yang sama */
   outline: none;
}

.chart-filters {
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
   margin-bottom: 1rem;
}

.filter-group {
   display: flex;
   gap: 0.5rem;
}

.chart-filter {
   padding: 0.5rem 1rem;
   border: 1px solid #f1f3f9;
   border-radius: 8px;
   background: white;
   color: var(--text);
   font-size: 0.875rem;
   cursor: pointer;
}

.chart-filter:hover {
   border-color: var(--primary);
}

/* Completely Unified Header */
.header-unified {
    background: var(--card);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin: 2rem auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 1377px;
    width: 95%;     
    min-width: fit-content;  
    height: 90px;
    display: flex;
    align-items: center;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
}

/* Logo Area */
.logo-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-title i {
    font-size: 2rem;
    color: #4361ee;
}

.logo-title h1 {
    font-size: 1.75rem;
    color: #2b2d42;
    font-weight: 600;
    margin: 0;
}

/* Navigation */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-link {
    font-size: 1rem;
    color: #2b2d42;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: #4361ee;
    background: #f0f2f5;
}

.nav-link.active {
    background: #4361ee;
    color: white;
}

/* Container for content */
.dashboard, .profile-container {
    max-width: 1440px;
    margin: 2rem auto;
    padding: 0 2rem;
}

/* Responsive Header */
@media (max-width: 768px) {
    .header-unified {
        margin: 1rem;
        padding: 1rem 1.5rem;
        height: auto;
    }
    
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-links {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-link {
        font-size: 0.95rem;
        padding: 0.45rem 0.9rem;
    }
    
    .logo-title {
        justify-content: center;
    }
    
    .logo-title i {
        font-size: 1.75rem;
    }
    
    .logo-title h1 {
        font-size: 1.5rem;
    }
    
    .dashboard, .profile-container {
        padding: 0 1rem;
        margin: 1rem auto;
    }
}

/* Card Base Styles - untuk konsistensi card di kedua halaman */
.card-base {
    background: var(--card);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Common Title Styles */
.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2b2d42;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i {
    color: #4361ee;
}