/**
 * Weight Tracker Pro - Grid Styles
 * Professional responsive grid for displaying user profiles
 */

:root {
	--wt-primary: #667eea !important;
	--wt-primary-dark: #764ba2 !important;
	--wt-secondary: #f093fb !important;
	--wt-secondary-dark: #f5576c !important;
	--wt-success: #10b981 !important;
	--wt-warning: #f59e0b !important;
	--wt-danger: #ef4444 !important;
	--wt-bg-white: #ffffff !important;
	--wt-bg-light: #f8f9ff !important;
	--wt-bg-lighter: #f3f4f6 !important;
	--wt-text-dark: #1f2937 !important;
	--wt-text-gray: #6b7280 !important;
	--wt-text-light: #9ca3af !important;
	--wt-border: #e5e7eb !important;
	--wt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	--wt-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
	--wt-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
	--wt-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1) !important;
	--wt-grid-columns: 3 !important;
	--wt-achievement-champion: #fbbf24 !important;
	--wt-achievement-hero: #60a5fa !important;
	--wt-achievement-starter: #34d399 !important;
}

.wt-grid-wrapper {
	width: 100% !important;
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 60px 20px !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif !important;
	animation: fadeInDown 0.6s ease-out !important;
}

@keyframes fadeInDown {
	from {
		opacity: 0 !important;
		transform: translateY(-20px) !important;
	}
	to {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0 !important;
		transform: translateY(20px) !important;
	}
	to {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
}

/* Grid Header */
.wt-grid-header {
	text-align: center !important;
	margin-bottom: 50px !important;
}

.wt-grid-header h2 {
	font-size: 2.5rem !important;
	font-weight: 800 !important;
	margin: 0 0 12px !important;
	color: var(--wt-text-dark) !important;
	letter-spacing: -0.5px !important;
	background: linear-gradient(135deg, var(--wt-primary) 0%, var(--wt-primary-dark) 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

.wt-grid-header p {
	color: var(--wt-text-gray) !important;
	font-size: 1.1rem !important;
	margin: 0 !important;
	line-height: 1.6 !important;
	max-width: 600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Grid Container */
.wt-grid-container {
	display: grid !important;
	grid-template-columns: repeat(min(var(--wt-grid-columns), auto-fit), minmax(280px, 1fr)) !important;
	gap: 30px !important;
	animation: fadeInUp 0.6s ease-out 0.2s both !important;
}

.wt-grid-empty {
	grid-column: 1 / -1 !important;
	text-align: center !important;
	padding: 60px 20px !important;
	color: var(--wt-text-gray) !important;
	font-size: 1.1rem !important;
}

/* Grid Item */
.wt-grid-item {
	animation: fadeInUp 0.6s ease-out forwards !important;
	opacity: 0 !important;
}

.wt-grid-item:nth-child(1) { animation-delay: 0.1s !important; }
.wt-grid-item:nth-child(2) { animation-delay: 0.15s !important; }
.wt-grid-item:nth-child(3) { animation-delay: 0.2s !important; }
.wt-grid-item:nth-child(4) { animation-delay: 0.25s !important; }
.wt-grid-item:nth-child(5) { animation-delay: 0.3s !important; }
.wt-grid-item:nth-child(6) { animation-delay: 0.35s !important; }
.wt-grid-item:nth-child(n+7) { animation-delay: 0.4s !important; }

/* Profile Grid Card */
.wt-profile-grid-card {
	background: var(--wt-bg-white) !important;
	border-radius: 16px !important;
	box-shadow: var(--wt-shadow-md) !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	border: 1px solid var(--wt-border) !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	cursor: pointer !important;
}

.wt-profile-grid-card:hover {
	box-shadow: var(--wt-shadow-lg) !important;
	transform: translateY(-8px) !important;
	border-color: var(--wt-primary) !important;
}

/* Card Banner */
.wt-card-banner {
	height: 80px !important;
	background: linear-gradient(135deg, var(--wt-primary) 0%, var(--wt-primary-dark) 100%) !important;
	position: relative !important;
	overflow: hidden !important;
}

.wt-card-banner.champion {
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
}

.wt-card-banner.hero {
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
}

.wt-card-banner.starter {
	background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}

.wt-card-banner::before {
	content: '' !important;
	position: absolute !important;
	top: -50% !important;
	right: -50% !important;
	width: 200% !important;
	height: 200% !important;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
	background-size: 20px 20px !important;
	animation: float 20s ease-in-out infinite !important;
}

@keyframes float {
	0%, 100% { transform: translate(0, 0) !important; }
	50% { transform: translate(10px, 10px) !important; }
}

/* Achievement Badge */
.wt-achievement-badge {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	padding: 6px 12px !important;
	border-radius: 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	font-weight: 600 !important;
	font-size: 0.85rem !important;
	color: var(--wt-text-dark) !important;
}

.wt-badge-icon {
	font-size: 1.2rem !important;
	line-height: 1 !important;
}

.wt-badge-title {
	white-space: nowrap !important;
}

/* Card Content */
.wt-card-content {
	padding: 24px !important;
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Avatar Section */
.wt-profile-avatar-section {
	text-align: center !important;
	margin-bottom: 16px !important;
}

.wt-avatar {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 3px solid var(--wt-primary) !important;
	margin: 0 auto !important;
	display: block !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
	animation: scaleIn 0.4s ease-out !important;
}

@keyframes scaleIn {
	from {
		transform: scale(0.8) !important;
		opacity: 0 !important;
	}
	to {
		transform: scale(1) !important;
		opacity: 1 !important;
	}
}

.wt-avatar-placeholder {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--wt-bg-light) 0%, var(--wt-bg-lighter) 100%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto !important;
	border: 2px dashed var(--wt-border) !important;
	color: var(--wt-text-gray) !important;
	font-size: 2rem !important;
}

/* Profile Name */
.wt-profile-name {
	text-align: center !important;
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	margin: 12px 0 4px !important;
	color: var(--wt-text-dark) !important;
	word-break: break-word !important;
}

.wt-profile-duration {
	text-align: center !important;
	color: var(--wt-text-gray) !important;
	font-size: 0.9rem !important;
	margin: 0 0 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
}

.wt-profile-duration i {
	font-size: 0.85rem !important;
}

/* Target Loss Weight */
.wt-target-weight {
	padding: 12px !important;
	margin-bottom: 20px !important;
	background: var(--wt-bg-lighter) !important;
	border-radius: 8px !important;
	text-align: center !important;
}

.wt-target-label {
	display: block !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: var(--wt-text-gray) !important;
	margin-bottom: 6px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.wt-target-value {
	margin: 0 !important;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	color: var(--wt-primary) !important;
}

.wt-unit {
	font-size: 0.9rem !important;
	color: var(--wt-text-gray) !important;
	font-weight: 500 !important;
}

/* Metrics Grid */
.wt-metrics-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
	margin-bottom: 20px !important;
}

.wt-metric {
	background: var(--wt-bg-lighter) !important;
	padding: 12px !important;
	border-radius: 8px !important;
	text-align: center !important;
	transition: all 0.3s ease !important;
}

.wt-metric:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.1)) !important;
	transform: scale(1.05) !important;
}

.wt-metric-label {
	display: block !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: var(--wt-text-gray) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 4px !important;
}

.wt-metric-value {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--wt-primary) !important;
	margin: 0 0 2px !important;
}

.wt-metric-unit {
	font-size: 0.8rem !important;
	color: var(--wt-text-light) !important;
	margin: 0 !important;
}

/* Progress Bar */
.wt-progress-bar-grid {
	margin-bottom: 20px !important;
}

.wt-progress-bar {
	background: var(--wt-bg-lighter) !important;
	height: 8px !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	position: relative !important;
	margin-bottom: 8px !important;
}

.wt-progress-fill {
	height: 100% !important;
	background: linear-gradient(90deg, var(--wt-primary) 0%, var(--wt-secondary) 100%) !important;
	border-radius: 4px !important;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
}

.wt-progress-fill::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
	animation: shimmer 2s infinite !important;
}

.wt-progress-text {
	text-align: center !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: var(--wt-primary) !important;
	margin: 0 !important;
}

@keyframes shimmer {
	0% { transform: translateX(-100%) !important; }
	100% { transform: translateX(100%) !important; }
}

/* View Profile Button */
.wt-view-profile-btn {
	width: 100% !important;
	padding: 12px 16px !important;
	background: linear-gradient(135deg, var(--wt-primary) 0%, var(--wt-primary-dark) 100%) !important;
	color: white !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: auto !important;
}

.wt-view-profile-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4) !important;
	background: linear-gradient(135deg, var(--wt-primary-dark) 0%, var(--wt-primary) 100%) !important;
}

.wt-view-profile-btn:active {
	transform: translateY(0) !important;
}

.wt-view-profile-btn i {
	font-size: 1rem !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.wt-grid-wrapper {
		padding: 40px 16px !important;
	}

	.wt-grid-container {
		grid-template-columns: repeat(min(min(var(--wt-grid-columns), 2), auto-fit), minmax(280px, 1fr)) !important;
		gap: 24px !important;
	}

	.wt-grid-header h2 {
		font-size: 2rem !important;
	}
}

@media (max-width: 768px) {
	.wt-grid-wrapper {
		padding: 30px 12px !important;
	}

	.wt-grid-container {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.wt-grid-header h2 {
		font-size: 1.7rem !important;
	}

	.wt-grid-header p {
		font-size: 1rem !important;
	}

	.wt-card-content {
		padding: 20px !important;
	}

	.wt-avatar {
		width: 70px !important;
		height: 70px !important;
	}

	.wt-profile-name {
		font-size: 1.2rem !important;
	}

	.wt-metric-value {
		font-size: 1.3rem !important;
	}
}

@media (max-width: 480px) {
	.wt-grid-wrapper {
		padding: 20px 8px !important;
	}

	.wt-grid-header h2 {
		font-size: 1.4rem !important;
	}

	.wt-grid-header p {
		font-size: 0.95rem !important;
	}

	.wt-profile-avatar-section {
		margin-bottom: 12px !important;
	}

	.wt-avatar {
		width: 60px !important;
		height: 60px !important;
		border-width: 2px !important;
	}

	.wt-profile-name {
		font-size: 1.1rem !important;
	}

	.wt-metrics-grid {
		gap: 8px !important;
		margin-bottom: 16px !important;
	}

	.wt-metric {
		padding: 10px 8px !important;
	}

	.wt-metric-label {
		font-size: 0.7rem !important;
	}

	.wt-metric-value {
		font-size: 1.2rem !important;
	}

	.wt-weight-details {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		margin-bottom: 16px !important;
		padding: 12px !important;
	}

	.wt-weight-item {
		padding: 6px !important;
	}

	.wt-weight-label {
		font-size: 0.7rem !important;
		margin-bottom: 2px !important;
	}

	.wt-weight-value {
		font-size: 1.2rem !important;
		margin-bottom: 2px !important;
	}

	.wt-view-profile-btn {
		padding: 10px 12px !important;
		font-size: 0.9rem !important;
	}

	.wt-achievement-badge {
		padding: 4px 8px !important;
		font-size: 0.75rem !important;
	}
}

/* Print Styles */
@media print {
	.wt-view-profile-btn,
	.wt-grid-header {
		display: none !important;
	}
}

/* Accessibility */
.wt-profile-grid-card:focus-within {
	outline: 2px solid var(--wt-primary) !important;
	outline-offset: 2px !important;
}

.wt-view-profile-btn:focus {
	outline: 2px solid rgba(255, 255, 255, 0.5) !important;
	outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
	.wt-profile-grid-card,
	.wt-grid-item,
	.wt-avatar,
	.wt-metric,
	.wt-progress-fill,
	.wt-view-profile-btn {
		animation: none !important;
		transition: none !important;
	}
}