.dl-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
    :where(.dl-btn) { display: inline-flex; align-items: center; gap: .4rem; text-align: start; cursor: pointer; box-sizing: border-box; min-width: 0; max-width: 100%; font: inherit; color: inherit; background-color: transparent; border: 0; padding: 0; }
    .dl-btn { position: relative; align-items: center; text-align: start; cursor: pointer; padding-inline-end: 2rem !important; }
    /* Filament styles only select.fi-select-input; the button standing in for it ("per page", "Sort by", filters) gets
       the same box, so the value does not stick to the label in front of it (05.11.2026) */
    .dl-btn.fi-select-input { display: flex; width: 100%; padding-block: .375rem; padding-inline-start: .75rem; font-size: .875rem; line-height: 1.5rem; color: var(--gray-950); }
    .dark .dl-btn.fi-select-input { color: #fff; }
    .dl-btn.fi-select-input.fi-select-input-has-inline-prefix { padding-inline-start: 0; }
    @supports (-webkit-touch-callout: none) { .dl-btn.fi-select-input { font-size: 1rem; } }
    .dl-btn:disabled { cursor: not-allowed; opacity: .6; }
    .dl-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
    .dl-btn-label { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dl-btn-label.is-placeholder { color: var(--gray-400); }
    .dl-btn-chevron { position: absolute; inset-inline-end: .55rem; top: 50%; margin-top: -.5rem; width: 1rem; height: 1rem; color: var(--gray-400); transition: transform .15s; pointer-events: none; }
    .dl-btn[aria-expanded="true"] .dl-btn-chevron { transform: rotate(180deg); }
    .dl-panel { position: fixed !important; z-index: 70; max-width: none !important; max-height: 18rem; overflow-y: auto; padding: .25rem; animation: dl-in .12s ease-out; }
    .dl-panel .fi-dropdown-list { padding: 0; }
    .dl-panel .fi-dropdown-list-item { cursor: pointer; }
    .dl-panel .fi-dropdown-list-item.fi-selected { font-weight: 600; }
    .dl-panel .fi-dropdown-list-item.is-active { background-color: var(--gray-100); }
    .dark .dl-panel .fi-dropdown-list-item.is-active { background-color: rgb(255 255 255 / .08); }
    .dl-panel .dl-check { margin-inline-start: auto; width: 1rem; height: 1rem; color: var(--primary-600); flex: none; }
    .dark .dl-panel .dl-check { color: var(--primary-400); }
    .dl-panel .dl-group { padding: .45rem .5rem .2rem; font-size: .72rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
    .dl-panel .fi-select-input-search-ctn { padding: .2rem .2rem .35rem; }
    .dark .dl-panel .fi-select-input-search-ctn { background-color: var(--gray-900); }
    .dl-panel .dl-search { width: 100%; box-sizing: border-box; height: 2rem; padding: 0 .6rem; border-radius: var(--dui-radius-control, .45rem); border: 1px solid rgb(0 0 0 / .12); background: transparent; font-size: .8125rem; color: inherit; outline: none; }
    .dark .dl-panel .dl-search { border-color: rgb(255 255 255 / .14); }
    .dl-panel .dl-search:focus { border-color: var(--primary-500); }
    .dl-panel .dl-none { padding: .5rem; font-size: .8125rem; color: var(--gray-500); }
    @keyframes dl-in { from { opacity: 0; transform: translateY(-3px); } }
    @media (prefers-reduced-motion: reduce) { .dl-panel { animation: none; } .dl-btn-chevron { transition: none; } }