/* Add this to your StockSearchComp.razor.css file or directly in the  block */
.mud-autocomplete-popover-over-buttons {
    z-index: 1500 !important; /* Ensure the popover appears above the button panel */
}

/* Optional: If you want the bottom panel to stick, give it a background and shadow */
#button-section .mud-paper {
    /* position: fixed; /* Uncomment if you want it fixed at the bottom of the viewport */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    /* width: 100%; */
    /* z-index: 1000; /* Lower than popover, higher than normal content */
    /* background-color: var(--mud-palette-background); /* Use theme background */
    /* box-shadow: var(--mud-elevation-2); /* Match existing elevation */
}

/* StockLookup.razor.css or block in StockLookup.razor */

.custom-autocomplete-popover {
    /* Set a specific background color with full opacity */
    background-color: white; /* Opaque white */
    /* background-color: var(--mud-palette-surface); /* Use the theme's surface color, but make it opaque */
    /* Or a specific hex/rgba value: */
    /* background-color: #FFFFFF; */
    /* background-color: rgba(255, 255, 255, 1); */
    /* Ensure it doesn't inherit transparency from a parent if any */
    opacity: 1 !important; /* Force full opacity if something else is overriding it */
    /* You might also want a subtle shadow if it's currently flat due to transparent surface */
    box-shadow: var(--mud-elevation-2); /* Adds a default MudBlazor shadow */
}

/* If you also used the z-index class, combine them or use multiple classes */
.mud-autocomplete-popover-over-buttons.custom-autocomplete-popover {
    z-index: 1500 !important;
    background-color: white;
    opacity: 1 !important;
    box-shadow: var(--mud-elevation-2);
}