.baf-native-dropdown-original { position: absolute !important; width: var(--baf-native-dropdown-width) !important; opacity: 0 !important; pointer-events: none !important; }
.baf-native-dropdown-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23514276' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-position: right .6rem center; background-repeat: no-repeat; cursor: pointer; user-select: none; caret-color: transparent; }
.baf-native-dropdown-input:is(:focus, [aria-expanded="true"]) { outline: 3px solid #7453a6; outline-offset: 2px; border-color: #7453a6 !important; background-color: #f0eaf8 !important; }
.baf-native-dropdown-input[aria-invalid="true"]:is(:focus, [aria-expanded="true"]) { border-color: #dc3545 !important; }
/* Open only: square the corners on the side the panel opens from. A closed field keeps its normal corners. */
.baf-native-dropdown-input[aria-expanded="true"]:not([data-panel-above]) { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.baf-native-dropdown-input[aria-expanded="true"][data-panel-above] { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.input-group > .baf-native-dropdown-input { min-width: 0; width: 1%; flex: 1 1 auto; }
.baf-native-dropdown-error:not(:empty) { display: block; color: #b42318; font-size: .8rem; }
.baf-native-dropdown-search:popover-open { position: fixed; inset: auto; margin: 0; padding: 0; box-sizing: border-box; background: white; border: 1px solid #000; border-radius: 5px; box-shadow: 0 14px 28px #5142762b; display: flex; flex-direction: column; }
/* Keep keyboard targets clear of the footer and align the first visible row below the header. */
.baf-native-dropdown-search ul { flex: 1 1 auto; list-style: none; margin: 0; padding: 6px; min-height: 0; overflow-y: scroll; overflow-x: hidden; scroll-padding-block: 0 50px; scroll-snap-type: y mandatory; }
.baf-native-dropdown-search li { min-height: 36px; box-sizing: border-box; padding: .35rem .7rem; border-radius: 0; line-height: 1.35; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
/* Usage count: at the right of the row. Generated content, so an option's text stays its text for scripts, tests and screen readers. */
.baf-native-dropdown-search li::before { content: attr(data-usage) / ""; order: 1; flex: 0 0 auto; margin-left: auto; padding-left: .75rem; color: #8a8397; font-size: .8rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.baf-native-dropdown-search li:hover { background: #e4f7f8; font-weight: 700; }
.baf-native-dropdown-search li[aria-selected="true"] { background: #f0eaf8; font-weight: 700; }
.baf-native-dropdown-search li.is-active { outline: 2px solid #7453a6; outline-offset: -2px; font-weight: 700; }
/* The popover stays the select's DOM sibling (teardown relies on it), so its host's descendant rules reach it -
   e.g. _PageBreadCrumb's `#myTab ul li div { height: 0 }` and site.css's `#myTab ul { display: flex }` squashed the
   tab-strip "Display Left Menu" list to its 2px border. Pin the popover's own box model against any host. */
.baf-native-dropdown-search:popover-open, .baf-native-dropdown-search div { height: auto !important; }
.baf-native-dropdown-search ul { display: block !important; height: auto !important; padding: 6px !important; }
.baf-native-dropdown-search ul { scrollbar-width: auto; scrollbar-color: auto; scrollbar-gutter: stable; }
.baf-native-dropdown-search ul::-webkit-scrollbar { width: 18px; border-radius: 0; }
.baf-native-dropdown-search ul::-webkit-scrollbar-track { background: #f5f3f7; border-radius: 0; }
.baf-native-dropdown-search ul::-webkit-scrollbar-thumb { background: #c5bad3; border-radius: 0; }
.baf-native-dropdown-search ul::-webkit-scrollbar-thumb:hover { background: #b4a7c6; }
@supports (-moz-appearance: none) { .baf-native-dropdown-search ul { scrollbar-color: #c5bad3 #f5f3f7; } }
.baf-native-dropdown-search li { display: flex !important; align-items: center; gap: .5rem; float: none !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: .35rem .7rem !important; scroll-snap-align: start; }
.baf-native-dropdown-search li > i { flex: 0 0 1rem; text-align: center; color: #7453a6; }
/* The Display Left Menu chooser moves into the tab bar, where _PageBreadCrumb's `#myTab span` makes every span white, bold, padded and floated. */
.baf-native-dropdown-search li > .baf-native-dropdown-number, #myTab .baf-native-dropdown-search li > .baf-native-dropdown-number { flex: 0 0 auto; float: none; margin-left: -.25rem; margin-right: -.35rem; padding: 0; color: #000; font-weight: inherit; font-variant-numeric: tabular-nums; }
.baf-native-dropdown-number::before { content: attr(data-serial); }
/* fal and fas are one Font Awesome Pro font at weights 300 and 900, so this draws the solid icon; fab has no solid face. */
.baf-native-dropdown-search li:is(:hover, .is-active, [aria-selected="true"]) > i:not(.fab) { font-weight: 900; }
/* baf-button-tab.css pulls tab li left with a two-id !important margin; only an equal-specificity rule undoes it. */
#js-page-content :is(#myButton, #myTab) .baf-native-dropdown-search li { margin: 0 !important; }
.baf-native-dropdown-header { flex: 0 0 48px; box-sizing: border-box; display: flex; align-items: center; padding: .4rem .6rem; border-bottom: 1px solid #ded8e7; background: #ece9f1; }
.baf-native-dropdown-search .baf-native-dropdown-filter { width: 100%; height: 34px !important; border-radius: 0 !important; }
/* Focus is a colour change only: the popover sits beside its select, so host rules (report hub outline, form box-shadow) would otherwise reach this box. */
.baf-native-dropdown-search .baf-native-dropdown-filter:focus { outline: 0 !important; box-shadow: none !important; border-color: #7453a6 !important; }
@media (pointer: coarse) { .baf-native-dropdown-search li { min-height: 44px; } }
.baf-native-dropdown-footer { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem calc(6px + .7rem); border-top: 1px solid #ded8e7; background: #ece9f1; color: #514276; font-size: .8rem; }
.baf-native-dropdown-status { flex: 1 1 auto; min-width: 0; font-weight: 600; user-select: text; }
.baf-native-dropdown-actions { display: flex; gap: .3rem; }
.baf-native-dropdown-actions button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: #514276; background: #ded8e7; }
.baf-native-dropdown-actions button:disabled { opacity: .55; cursor: not-allowed; }
.input-group.baf-native-dropdown-active:has(> select:enabled):not(:focus-within) > .clsQuickCRUD { visibility: visible; }