/* Custom dropdown styles - completely standalone without Tailwind dependencies */

/* Base dropdown container */
.custom-dropdown {
    position: relative;
    display: block;
    width: 100%;
}

/* Button that triggers the dropdown */
.dropdown-trigger {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a202c; /* Match your existing dark background */
    border: 1px solid #4a5568; /* Match your existing border */
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    color: white;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    min-height: 38px; /* Match height with standard select */
}

/* Small icon in the dropdown */
.dropdown-trigger svg {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Dropdown menu content */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px; /* Approximately 15 items */
    overflow-y: auto;
    background-color: #1a202c; /* Match dropdown trigger */
    border: 1px solid #4a5568;
    border-radius: 0.25rem;
    margin-top: 0.25rem;
    z-index: 100; /* Ensure it stays on top */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Individual dropdown items */
.dropdown-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover state for dropdown items */
.dropdown-item:hover {
    background-color: #2d3748;
}

/* Selected dropdown item */
.dropdown-item.selected {
    background-color: #2b6cb0;
    color: white;
}

/* Custom scrollbar for dropdown on WebKit browsers */
.dropdown-content::-webkit-scrollbar {
    width: 8px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: #2d3748;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background-color: #4a5568;
    border-radius: 4px;
}

/* For Firefox */
.dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: #4a5568 #2d3748;
}

/* Utility class for hidden elements */
.dropdown-hidden {
    display: none !important;
}

/* Text truncation for long items */
.dropdown-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specific size and positioning for the dropdown containers */
#league-select-container,
#snapshot-select-container {
    width: 16rem; /* Equivalent to Tailwind's w-64 (16rem) */
    position: relative;
}

#snapshot-select-container {
    margin-left: 1rem; /* Equivalent to Tailwind's ml-4 (1rem) */
}

/* Helper classes for clarity */
.flex-row {
    display: flex;
    flex-direction: row;
}

.items-center {
    align-items: center;
}