/* Power Zone Card Styling */
.card-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

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

/* Zone-specific background gradients - 8-Zone Color System */
.bg-dark-red, .bg-dark-red.bg-gradient {
    background: linear-gradient(135deg, #8B0000 0%, #2C0000 100%) !important; /* Neuromuscular Power - Red with black overlay */
    color: white !important;
}

.bg-crimson, .bg-crimson.bg-gradient {
    background: #B22222 !important; /* Anaerobic Capacity - Deep crimson */
    color: white !important;
}

.bg-danger.bg-gradient {
    background: #FF0000 !important; /* VO2max - Bright red */
    color: white !important;
}

.bg-orange, .bg-orange.bg-gradient {
    background: #FFA500 !important; /* Threshold - Orange */
    color: white !important;
}

.bg-warning.bg-gradient {
    background: #FFFF00 !important; /* Sweet Spot/Tempo - Yellow */
    color: #212529 !important; /* Dark text for yellow background */
}

.bg-success.bg-gradient {
    background: #008000 !important; /* Endurance - Green */
    color: white !important;
}

.bg-primary.bg-gradient {
    background: #0066FF !important; /* Recovery - Blue */
    color: white !important;
}

.bg-secondary.bg-gradient {
    background: #6c757d !important; /* Fallback gray */
    color: white !important;
}

.bg-light.bg-gradient {
    background: #e9ecef !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

/* Make card values consistently colored and visible */
.text-dark-red {
    color: #8B0000 !important;
}

.text-crimson {
    color: #B22222 !important;
}

.text-danger {
    color: #FF0000 !important;
}

.text-orange {
    color: #FFA500 !important;
}

.text-warning {
    color: #B8860B !important; /* Dark goldenrod for better visibility on light backgrounds */
}

.text-success {
    color: #008000 !important;
}

.text-primary {
    color: #0066FF !important;
}

.card-body .small {
    color: #2c3e50 !important; /* Dark blue-gray for better readability */
}

.card-body .fw-bold {
    color: #2c3e50 !important;
}

/* Card sizing */
.power-zone-card {
    min-height: 200px;
    margin-bottom: 1rem;
}

/* Icon styling */
.power-zone-card .fa-info-circle {
    font-size: 0.9rem;
}

/* Text styling */
.power-zone-card .small {
    font-size: 0.875rem;
}