/* Apply Inter font globally */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Light gray background */
}
/* Example: Subtle Blue Gradient */
#profileContainer {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    /* Or use Tailwind classes: bg-gradient-to-br from-gray-100 to-gray-200 */
    opacity: 0;
    transform: translateY(10px); /* Start slightly lower */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
#playerPhoto {
    transition: transform 0.3s ease;
}
#playerPhoto:hover {
    transform: scale(1.05);
}
#profileContainer:not(.opacity-0) { /* Target when it's visible */
    opacity: 1;
    transform: translateY(0);
}
/* Basic styling for value labels if needed, can be adjusted */
.value-label {
    /* Example styling */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* semibold */
    color: #4b5563; /* gray-600 */
    text-align: center;
}
/* Ensure canvas respects container size */
canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
/* Custom styles for percentile bars */
.percentile-bar-bg {
    background-color: #e5e7eb; /* Gray background for the bar */
    border-radius: 9999px; /* Fully rounded */
    overflow: hidden; /* Hide overflow */
    height: 1rem; /* Bar height */
}
.percentile-bar-fill {
    background-color: #3b82f6; /* Blue fill color */
    height: 100%;
    border-radius: 9999px; /* Fully rounded */
    transition: width 0.5s ease-in-out; /* Smooth transition */
}
/* Ensure canvas elements are responsive */
canvas {
    max-width: 100%;
    height: auto;
}
/* Style for the player size container grid */
.player-size-grid {
    display: grid;
    grid-template-columns: 1fr auto; /* Silhouette takes remaining space, height chart auto width */
    grid-template-rows: 1fr auto; /* Silhouette takes remaining space, weight chart auto height */
    height: 100%; /* Fill container height */
}
/* Center search and filter containers */
.search-filter-container {
        display: flex;
        justify-content: center; /* Center horizontally */
        width: 100%; /* Take full width to center properly */
    }

/* Styles for Search Preview */
.search-preview {
    position: absolute;
    z-index: 10;
    width: 100%; /* Match parent width */
    box-sizing: border-box;
    max-height: 200px; /* Limit height */
    overflow-y: auto; /* Enable scroll */
    background-color: white;
    border: 1px solid #d1d5db; /* gray-300 */
    border-top: none; /* Avoid double border with input */
    border-radius: 0 0 0.375rem 0.375rem; /* Match input bottom radius */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.custom-select {
    min-width: 120px; /* Example minimum width */
    /* Add other custom styles here if necessary */
    appearance: none; /* Optional: remove default system appearance */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); /* Add custom arrow */
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Make space for the arrow */
}

.preview-item {
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    cursor: pointer;
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* gray-700 */
}
.preview-item:hover {
    background-color: #f3f4f6; /* gray-100 */
}