/*
 * DProduct autocomplete styles (global; selectors prefixed under .dproduct-*).
 * Kept global because this project doesn't load the Blazor scoped CSS bundle
 * (see App.razor). The component's .razor.css is therefore inert; these rules
 * are the ones that actually apply.
 */

.dproduct-container {
    position: relative;
}

/*
 * Render the results as an overlay anchored under the input. Without
 * position:absolute the list sits in normal flow and pushes following content
 * (e.g. the next order-item row) down, breaking the layout.
 */
.dproduct-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    margin-top: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
    /* Only scroll vertically: the items table uses .text-nowrap, so without
       this the long product names would force a horizontal scrollbar. */
    overflow-x: hidden;
    background-color: var(--custom-white, #fff);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
}

.dproduct-results .list-group-item {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* Override the parent table's .text-nowrap so long names wrap inside the
       dropdown instead of overflowing it. */
    white-space: normal;
}

.dproduct-results .list-group-item:hover {
    background-color: var(--primary02);
    color: var(--primary-color);
}

.dproduct-results::-webkit-scrollbar {
    width: 8px;
}

.dproduct-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.dproduct-results::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.dproduct-results::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*
 * When DProduct is used inside a Bootstrap .table-responsive (e.g. the order
 * items table), that wrapper sets overflow-x:auto, which forces overflow-y to
 * compute to auto and clips the absolutely-positioned dropdown. Allow the
 * items-table wrapper to show overflow so the dropdown isn't cut off; the
 * min-width keeps columns from collapsing (page scrolls horizontally instead).
 */
.order-items-table {
    overflow: visible;
}

.order-items-table > .table {
    min-width: 760px;
}