/**
 * Elevate LMS - Main Styles
 *
 * @package Elevate_LMS
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
	--elevate-primary: #7c3aed;
	--elevate-primary-light: #a855f7;
	--elevate-primary-dark: #5b21b6;
	--elevate-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);

	--elevate-success: #10b981;
	--elevate-error: #ef4444;
	--elevate-warning: #f59e0b;

	--elevate-text-dark: #1f2937;
	--elevate-text-light: #6b7280;

	--elevate-bg-light: #f9fafb;
	--elevate-border: #e5e7eb;

	--elevate-radius: 12px;
	--elevate-transition: 0.2s ease;
}

/* ============================================
   Course Grid
   ============================================ */
.elevate-courses-grid {
	display: grid;
	gap: 24px;
}

.elevate-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.elevate-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.elevate-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.elevate-columns-4,
	.elevate-columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.elevate-columns-4,
	.elevate-columns-3,
	.elevate-columns-2 {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   User Stats Widget
   ============================================ */
.elevate-user-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.elevate-stat-card {
	background: white;
	border-radius: var(--elevate-radius);
	padding: 24px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: var(--elevate-transition);
}

.elevate-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.elevate-stat-icon {
	font-size: 32px;
	display: block;
	margin-bottom: 8px;
}

.elevate-stat-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--elevate-text-dark);
	display: block;
}

.elevate-stat-label {
	font-size: 14px;
	color: var(--elevate-text-light);
	display: block;
	margin-top: 4px;
}

.elevate-stat-progress {
	height: 4px;
	background: var(--elevate-bg-light);
	border-radius: 2px;
	margin-top: 12px;
	overflow: hidden;
}

.elevate-progress-bar {
	height: 100%;
	background: var(--elevate-gradient);
	border-radius: 2px;
	transition: width 0.5s ease;
}

@media (max-width: 768px) {
	.elevate-user-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================
   Leaderboard Widget
   ============================================ */
.elevate-leaderboard {
	background: white;
	border-radius: var(--elevate-radius);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.elevate-leaderboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	background: var(--elevate-bg-light);
	border-bottom: 1px solid var(--elevate-border);
}

.elevate-leaderboard-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.elevate-leaderboard-period {
	font-size: 14px;
	color: var(--elevate-text-light);
	padding: 4px 12px;
	background: white;
	border-radius: 20px;
}

.elevate-leaderboard-list {
	padding: 8px;
}

.elevate-leaderboard-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	transition: var(--elevate-transition);
}

.elevate-leaderboard-item:hover {
	background: var(--elevate-bg-light);
}

.elevate-leaderboard-item.elevate-top-3 {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.elevate-rank {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--elevate-bg-light);
	border-radius: 8px;
	font-weight: 600;
	color: var(--elevate-text-dark);
}

.elevate-top-3 .elevate-rank {
	background: var(--elevate-gradient);
	color: white;
}

.elevate-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.elevate-name {
	flex: 1;
	font-weight: 500;
	color: var(--elevate-text-dark);
}

.elevate-league {
	font-size: 20px;
}

.elevate-points {
	font-weight: 600;
	color: var(--elevate-primary);
}

/* ============================================
   My Courses Grid
   ============================================ */
.elevate-my-courses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

/* ============================================
   Course Card (simplified version - full version in theme)
   ============================================ */
.elevate-course-card {
	background: white;
	border-radius: var(--elevate-radius);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: var(--elevate-transition);
}

.elevate-course-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.elevate-course-card-thumbnail {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.elevate-course-card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elevate-course-card-content {
	padding: 20px;
}

.elevate-course-card-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--elevate-text-dark);
	margin: 0 0 8px;
	line-height: 1.4;
}

.elevate-course-card-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	color: var(--elevate-text-light);
}

.elevate-course-card-progress {
	margin-top: 16px;
}

.elevate-course-card-progress-bar {
	height: 6px;
	background: var(--elevate-bg-light);
	border-radius: 3px;
	overflow: hidden;
}

.elevate-course-card-progress-fill {
	height: 100%;
	background: var(--elevate-gradient);
	border-radius: 3px;
}

.elevate-course-card-progress-text {
	font-size: 13px;
	color: var(--elevate-text-light);
	margin-top: 6px;
}

/* ============================================
   Badge Display
   ============================================ */
.elevate-badges-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.elevate-badge-card {
	background: white;
	border-radius: var(--elevate-radius);
	padding: 20px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.elevate-badge-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	background: var(--elevate-bg-light);
	border-radius: 50%;
}

.elevate-badge-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--elevate-text-dark);
}

.elevate-badge-date {
	font-size: 12px;
	color: var(--elevate-text-light);
	margin-top: 4px;
}

/* Badge rarities */
.elevate-badge-common .elevate-badge-icon {
	border: 2px solid #9ca3af;
}

.elevate-badge-rare .elevate-badge-icon {
	border: 2px solid #3b82f6;
	background: rgba(59, 130, 246, 0.1);
}

.elevate-badge-epic .elevate-badge-icon {
	border: 2px solid #8b5cf6;
	background: rgba(139, 92, 246, 0.1);
}

.elevate-badge-legendary .elevate-badge-icon {
	border: 2px solid #f59e0b;
	background: rgba(245, 158, 11, 0.1);
}

/* ============================================
   Streak Display
   ============================================ */
.elevate-streak-display {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
	border-radius: var(--elevate-radius);
	color: white;
}

.elevate-streak-fire {
	font-size: 48px;
}

.elevate-streak-count {
	font-size: 36px;
	font-weight: 700;
}

.elevate-streak-label {
	font-size: 14px;
	opacity: 0.9;
}

.elevate-streak-freeze {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	font-size: 14px;
}