/* Fitness Image Placeholder System */

/* Base styles for all fitness images */
.fitness-image,
img[src*="getSingleMedia"],
img[data-fitness-image="true"] {
    transition: all 0.3s ease;
    object-fit: cover;
}

/* Placeholder state styling */
.fitness-image.is-placeholder,
img[data-fitness-image="true"].is-placeholder {
    filter: brightness(1.1) contrast(0.9);
    border: 1px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Hover effects */
.fitness-image:hover:not(.is-placeholder),
img[data-fitness-image="true"]:hover:not(.is-placeholder) {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,123,255,0.2);
}

.fitness-image.is-placeholder:hover,
img[data-fitness-image="true"].is-placeholder:hover {
    filter: brightness(1.2) contrast(0.85);
    transform: scale(1.01);
}

/* Avatar specific styles */
.avatar-40.fitness-image,
.avatar-100.fitness-image,
.avatar-40[data-fitness-image="true"],
.avatar-100[data-fitness-image="true"] {
    border-radius: 50%;
}

.avatar-40.fitness-image.is-placeholder,
.avatar-100.fitness-image.is-placeholder,
.avatar-40[data-fitness-image="true"].is-placeholder,
.avatar-100[data-fitness-image="true"].is-placeholder {
    border-radius: 50%;
    background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
}

/* Card context styling */
.card .fitness-image.is-placeholder,
.card img[data-fitness-image="true"].is-placeholder {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Loading animation */
@keyframes placeholderPulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

.fitness-image[data-loading="true"],
img[data-fitness-image="true"][data-loading="true"] {
    animation: placeholderPulse 2s infinite;
}

/* Specific placeholder styles for different types */
.workout-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.exercise-placeholder {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.nutrition-placeholder {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.meal-placeholder {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.equipment-placeholder {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* Dashboard specific adjustments */
.dashboard_table_list .fitness-image,
.dashboard_table_list img[data-fitness-image="true"] {
    border-radius: 8px;
}

.dashboard_table_list .fitness-image.is-placeholder,
.dashboard_table_list img[data-fitness-image="true"].is-placeholder {
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}