/**
 * Activity Feed Custom Styles - LabGenz Platform
 * Styles for rank-up, badge unlock, and challenge completion activities
 */

/* Inline Rank Display with Image */
.labgenz-rank-display {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #667eea;
	vertical-align: middle;
}

.labgenz-rank-display img {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	object-fit: cover;
	vertical-align: middle;
}

/* Rank Unlock Activity (deprecated - keeping for backwards compatibility) */
.labgenz-rank-unlock {
	margin-top: 12px;
	padding: 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 8px;
	text-align: center;
}

.labgenz-rank-unlock img {
	max-width: 120px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border: 3px solid rgba(255, 255, 255, 0.3);
}

/* Badge Unlock Activity */
.labgenz-badge-unlock {
	margin-top: 12px;
	padding: 16px;
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	border-radius: 8px;
	text-align: center;
}

.labgenz-badge-unlock img {
	max-width: 100px;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border: 3px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 8px;
}

.labgenz-badge-unlock p {
	margin: 8px 0 0;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
}

/* Challenge Complete Activity */
.activity-item.labgenz-challenge_complete .activity-content {
	border-left: 3px solid #4CAF50;
	padding-left: 16px;
	margin-top: 8px;
}

/* Activity Action Formatting */
.activity-item.labgenz-rank_up .activity-header,
.activity-item.labgenz-badge_unlock .activity-header,
.activity-item.labgenz-challenge_complete .activity-header {
	font-weight: 500;
}

.activity-item.labgenz-rank_up .activity-header strong,
.activity-item.labgenz-badge_unlock .activity-header strong,
.activity-item.labgenz-challenge_complete .activity-header strong {
	color: #1e73be;
	font-weight: 600;
}

/* Activity Icons */
.activity-item.labgenz-rank_up .activity-avatar:after,
.activity-item.labgenz-badge_unlock .activity-avatar:after {
	content: '';
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 24px;
	height: 24px;
	background: #4CAF50;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity-item.labgenz-rank_up .activity-avatar:after {
	content: '🏆';
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.activity-item.labgenz-badge_unlock .activity-avatar:after {
	content: '🎖️';
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
	.labgenz-rank-display img {
		width: 24px;
		height: 24px;
	}

	.labgenz-rank-unlock,
	.labgenz-badge-unlock {
		padding: 12px;
	}

	.labgenz-rank-unlock img {
		max-width: 80px;
	}

	.labgenz-badge-unlock img {
		max-width: 70px;
	}
}

/* Animation for new activities */
@keyframes labgenzActivityFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.activity-item.labgenz-rank_up.new-update,
.activity-item.labgenz-badge_unlock.new-update,
.activity-item.labgenz-challenge_complete.new-update {
	animation: labgenzActivityFadeIn 0.4s ease-out;
}

/* Activity Filter Buttons */
.activity-type-tabs .item-list-tabs li[data-bp-scope="labgenz-rank_up"],
.activity-type-tabs .item-list-tabs li[data-bp-scope="labgenz-badge_unlock"],
.activity-type-tabs .item-list-tabs li[data-bp-scope="labgenz-challenge_complete"] {
	display: inline-block;
}

/* Dark mode support (if your theme has it) */
@media (prefers-color-scheme: dark) {
	.labgenz-rank-unlock,
	.labgenz-badge-unlock {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	}
	
	.labgenz-rank-unlock img,
	.labgenz-badge-unlock img {
		border-color: rgba(255, 255, 255, 0.2);
	}
}