/* GENERATED — do not edit. Concatenated from Styles/*.css at build time. */
/* Stingray searchable dropdowns.
 *
 * Served from _content/, not authored as scoped CSS. The four components used to carry four
 * .razor.css files that were copies of each other, and they had drifted in ways nobody chose:
 * the checkbox reset existed only in the multi-selects, the [checked] row highlight only in the
 * single-selects, and "select all" hover only in one of the four. One file cannot drift.
 *
 * Every rule is scoped under .multiselect-dropdown. That is not decoration - the class names here
 * are generic enough to collide (.dropdown-menu is Bootstrap's own), and a served stylesheet has
 * no b-xxxxxxxxxx attribute to isolate it. The menu is inside that subtree even while open,
 * because the popover top layer changes where an element paints, not where it lives.
 */

/* ---- Tokens ---------------------------------------------------------------------------------
 * Two tiers. The public --stingray-dropdown-* properties are only ever READ, never declared, so a
 * consumer can set one on any ancestor and win. Defaults resolve into the private --_ssd-* tier
 * here. This block previously declared the public property directly, which meant a consumer who
 * set it was silently overridden by the component's own default.
 *
 * :root so anything rendered outside a dropdown can still resolve the tier;
 * .multiselect-dropdown so wrapping one dropdown in an element that sets a token themes only it.
 */
:root,
.multiselect-dropdown {
    --_ssd-hover-bg: var(--stingray-dropdown-hover-bg, #ededed);
    --_ssd-item-height: var(--stingray-dropdown-item-height, 30px);
    --_ssd-menu-max-height: var(--stingray-dropdown-menu-max-height, 200px);
}

/* ---- The control ----------------------------------------------------------------------------
 * A flex row, not a single <button>. It used to be one, which forced the chips and the clear
 * buttons to be nested interactive content inside it - invalid HTML that the parser hoists
 * straight back out, so the component could not be prerendered.
 */
.multiselect-dropdown .dropdown-toggle-custom {
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    text-align: start;
}

/* The popover invoker. It fills whatever the chips and the count group leave over, so clicking
   anywhere in the empty part of the control still opens the menu. */
.multiselect-dropdown .sd-toggle {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    /* text-align undoes the UA's `button { text-align: center }`; justify-content does the same job
       for the flex box a host can turn this into. Deliberately declared on a rule that sets no
       `display` of its own: it is inert under the UA's inline-block and exists only for the
       hijacked case. MudBlazor ships `button { display: inline-flex; justify-content: center }`,
       and because the invoker is `flex: 1 1 auto` it is far wider than its placeholder — so that
       reset floats the placeholder into the middle of the field. The same exposure the DataTable's
       header button was reported for; see its 09-sort.css. */
    text-align: inherit;
    justify-content: flex-start;
    min-height: 1.5em;
    cursor: pointer;
}

.multiselect-dropdown .sd-toggle:disabled {
    cursor: not-allowed;
    color: inherit;
}

/* The invoker's own box is only the gap between the chips and the count group, but the control
   reads as one clickable field: the form-select chevron is a background image on the wrapper, and
   the padding around the chips belongs to the wrapper too. Neither is inside the button, so once
   the control stopped being one big <button> they stopped opening the menu. Stretching the
   invoker's hit area over the whole control restores that without a second click handler - the
   activation is still the browser's, through popovertarget. */
.multiselect-dropdown .sd-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
}

.multiselect-dropdown .sd-placeholder,
.multiselect-dropdown .selected-Items-preview {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-inline-end: .25rem;
}

/* ---- Selection chips ------------------------------------------------------------------------ */
.multiselect-dropdown .selected-item {
    padding: 0 4px;
    font-size: 0.875rem;
    vertical-align: middle;
    margin-inline-end: 4px;
}

.multiselect-dropdown .selected-item label {
    vertical-align: middle;
    margin: 0;
}

.multiselect-dropdown .selected-item .badge {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: 10px;
    vertical-align: middle;
}

.multiselect-dropdown .selected-total-count {
    padding: 0 7px;
    font-size: 0.875rem;
}

.multiselect-dropdown .clear-all-selection {
    position: relative;
    z-index: 1;
    padding: 0;
    font-size: 0.875rem;
    vertical-align: baseline;
}

/* Both icon buttons carry the same 16px glyph; they had a rule each declaring it. */
.multiselect-dropdown .selected-item .badge svg,
.multiselect-dropdown .clear-all-selection svg {
    width: 16px;
    height: 16px;
}

/* ---- The menu -------------------------------------------------------------------------------
 * Width is driven by --sd-trigger-width, which the JS module measures off the control and writes
 * onto the menu so the two always agree.
 *
 * The menu markup deliberately does NOT carry Bootstrap's `w-100`. That class is
 * `width: 100% !important`, so it beat the `width` below outright and the menu was only ever the
 * right size because min-width and max-width pinned it from both sides - the declaration that
 * looks like it does the work did none of it. Percentages resolve against the containing block,
 * which for a fixed-position element is the viewport, so with the custom property unset the class
 * sized the menu to the whole window. Do not add it back.
 */
.multiselect-dropdown .dropdown-menu {
    position: fixed;
    width: var(--sd-trigger-width);
    min-width: var(--sd-trigger-width);
    max-width: var(--sd-trigger-width);
}

/* The UA stylesheet styles [popover] as a centred dialog: `inset: 0; margin: auto; overflow: auto`.
   Positioning writes all four inset properties inline, so those are already overridden; the margin
   would otherwise centre the menu in the viewport, and the overflow would put a second scrollbar
   around the one .options-container already has. */
.multiselect-dropdown .dropdown-menu[popover] {
    margin: 0;
    overflow: visible;
    /* `inset: auto` is the safety net under the module's pre-paint anchoring. The UA styles
       [popover] as a centred dialog with `inset: 0`, and on a fixed-position box with `margin: 0`
       that means "cover the viewport" - so any frame painted before the inline left/top land is a
       blank sheet over the page. The module writes all four insets on `beforetoggle` and this
       never shows; if the module failed to import, an unpositioned menu falls back to its static
       position, just under its own control, instead of over everything. */
    inset: auto;
}

/* Visibility follows the popover's own state, so the browser decides when the menu is painted -
   which is what "the browser owns whether the menu is open" has to mean to be worth anything.
   These two rules are now the *only* thing that paints the menu: the `.show` class Blazor used to
   render alongside them is gone, along with the unreachable fallback it belonged to.

   They are still written to out-specify `.dropdown-menu.show`, because Bootstrap's
   `.dropdown-menu { display: none }` and `.show { display: block }` are *author* rules and would
   otherwise outrank the UA's `[popover]` rules in both directions - which is what once left an
   open popover invisible until a SignalR round trip arrived, on the one interaction this design
   exists to keep off the wire. */
.multiselect-dropdown .dropdown-menu[popover]:not(:popover-open) {
    display: none;
}

.multiselect-dropdown .dropdown-menu[popover]:popover-open {
    display: block;
}

/* The options container is a real <ul> so the rows can be role="option" in a role="listbox".
   That means undoing the UA list styling, which does not simply inherit away: `.dropdown-menu`
   sets `list-style: none`, but the UA's own `ul { list-style-type: disc }` is an explicit
   declaration and an explicit declaration always beats an inherited value. The option rows are
   `display: flex` and so suppress their own marker, but Virtualize's spacer <li>s are bare
   `display: list-item` and were rendering a stray bullet. The padding is the same story — UA `ul`
   indents its content, which pushed the rows out of line with the "select all" row above. */
.multiselect-dropdown .options-container {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: var(--_ssd-menu-max-height);
    overflow-y: auto;
}

/* ---- The load-error row -----------------------------------------------------------------------
 * Shown in place of results when a fetch fails, so the menu does not look like "no matches". The
 * colour reads a public token like everything else; the default is a red dark enough to clear
 * 4.5:1 on the menu's white ground, since this is body text carrying the only signal there is.
 */
.multiselect-dropdown .sd-load-error {
    padding: .5rem;
    text-align: start;
    color: var(--stingray-dropdown-error-color, #b02a37);
}

/* ---- Options ---------------------------------------------------------------------------------
 * These three rules out-specify Bootstrap rather than shouting over it. They used to carry
 * `!important`, which took back the one thing the README promises — that a consumer's stylesheet,
 * loaded after this one, wins at equal specificity — on precisely the declarations a consumer is
 * most likely to want to change. Bootstrap's competing rules are single-class selectors, so
 * qualifying with the container beats them on specificity and leaves the consumer's own override
 * a rule it can win with.
 */
.multiselect-dropdown .dropdown-menu .custom-select-item {
    margin: 0;
    display: flex;
    gap: .5rem;
    min-height: var(--_ssd-item-height);
    align-items: center;
    padding: 0 .5rem;
}

.multiselect-dropdown .dropdown-menu .custom-select-item input {
    margin: 0;
    flex-shrink: 0;
}

/* [checked] is set on the row itself by the single-select variants to mark the current value. */
.multiselect-dropdown .dropdown-menu .custom-select-item[checked],
.multiselect-dropdown .dropdown-menu .custom-select-item:hover,
.multiselect-dropdown .dropdown-menu .select-all:hover {
    background-color: var(--_ssd-hover-bg);
}

.multiselect-dropdown .multi-select-item-label {
    width: 100%;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: var(--_ssd-item-height);
    line-height: var(--_ssd-item-height);
    align-content: center;
    cursor: pointer;
    margin: 0;
}

/* Prevent iOS WebKit (Safari AND Chrome on iPhone) from auto-zooming when a focusable input
   gets focus. Anything below 16px triggers it. */
.multiselect-dropdown .dropdown-menu input[type="search"],
.multiselect-dropdown .dropdown-menu .form-control {
    font-size: 16px;
}

/* The focused option. Options are not tab stops - the search box is the single one - so this is
   reached with the arrow keys, and it is the only indicator a keyboard user gets that a row is
   about to be activated by Enter. :focus-visible rather than :focus so a pointer click does not
   leave a ring behind. */
.multiselect-dropdown .custom-select-item[role="option"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
    background-color: var(--_ssd-hover-bg);
}