/* Reduce table width and make it easier to read */
.table-sm {
    font-size: 0.9rem; /* Slightly smaller text */
    width: auto; /* Avoid stretching too wide */
}

/* Lighten table header */
.table-light {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

/* Align numbers to the right */
.text-end {
    text-align: right;
}

/* Sorting headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    padding-right: 1.5rem; /* Ensure sorting icon doesn't overlap text */
}

/* Hover effect for sorting headers */
th.sortable:hover {
    background-color: #e9ecef;
}

/* to display map icon in the location search results */
.ui-menu-item img {
    border-radius: 2px;
    vertical-align: middle;
}

#location-results.ui-autocomplete {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1050;
    background-color: #fff;
    min-width: 250px;
    position: absolute !important;
    box-sizing: border-box;
}

#location-results .ui-menu-item a {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #212529;
}

#location-results .ui-menu-item a:hover,
#location-results .ui-menu-item a.ui-state-active {
    background-color: #007bff !important;
    color: white !important;
}

/* Individual menu items */
.ui-menu-item a {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #212529;
}


/* Styling for selected input fields */
input.selected-input {
    background-color: #cce5ff !important; /* Light blue */
    border-color: #007bff !important; /* Blue border */
    font-weight: bold !important;
}

/* Ensure the selected input stands out */
#taxon-search.selected-input,
#location-input.selected-input {
    background-color: #cce5ff !important;
    border: 2px solid #007bff !important;
    font-weight: bold !important;
}

.ui-menu-item-wrapper:hover,
.ui-menu-item a:hover,
.ui-menu-item a.ui-state-active {
    background-color: #cce5ff !important;
    color: #000 !important;
}