/* searchable-select — Bootstrap 5 theme
   Standalone styles for the <searchable-select> Web Component.
   Requires Bootstrap 5 CSS to be loaded first. */

/* Wrapper */
searchable-select .ss-wrapper {
    position: relative;
}
searchable-select .ss-wrapper.open {
    z-index: 10;
}

/* Input */
searchable-select .ss-input {
    position: relative;
    z-index: 1;
}
searchable-select .ss-input:focus {
    box-shadow: none;
    border-color: var(--theme-focus-border, #86b7fe);
}
searchable-select .ss-wrapper:not(.open) .ss-input:focus {
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring, rgba(13, 110, 253, 0.25));
}
searchable-select .ss-wrapper.open .ss-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    border-color: var(--theme-focus-border, #86b7fe);
}

/* Dropdown menu: absolute positioning (no layout shift).
   [data-theme] prefix matches theme specificity so our overrides aren't lost. */
[data-theme] searchable-select .ss-menu,
searchable-select .ss-menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-tertiary-color, rgba(0, 0, 0, 0.2)) transparent;
    scrollbar-gutter: stable;
}
[data-theme] searchable-select .ss-wrapper.open .ss-menu,
searchable-select .ss-wrapper.open .ss-menu {
    border-color: var(--theme-focus-border, #86b7fe);
    border-top-color: transparent;
}

/* Unified focus ring: pseudo-element sized via CSS custom property
   --ss-ring-height, set by JS to input height + dropdown height.
   Top radii match the input; bottom radii match the dropdown menu. */
searchable-select .ss-wrapper.open::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ss-ring-height, 100%);
    border-top-left-radius: var(--radius-sm, var(--bs-border-radius, 0.375rem));
    border-top-right-radius: var(--radius-sm, var(--bs-border-radius, 0.375rem));
    border-bottom-left-radius: var(--radius-md, var(--bs-border-radius, 0.375rem));
    border-bottom-right-radius: var(--radius-md, var(--bs-border-radius, 0.375rem));
    box-shadow: 0 0 0 0.25rem var(--theme-focus-ring, rgba(13, 110, 253, 0.25));
    pointer-events: none;
    z-index: 0;
}

/* Clear button */
searchable-select .ss-clear {
    position: absolute;
    right: 0.5rem;
    top: 0;
    height: 38px;
    display: flex;
    align-items: center;
    z-index: 2;
    background: none;
    border: none;
    padding: 0.25rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    font-size: 1rem;
}
searchable-select .ss-clear:hover {
    color: #343a40;
}
searchable-select .ss-wrapper.dropup .ss-clear {
    top: auto;
    bottom: 0;
    z-index: 4;
}

/* Highlighted item — keyboard or hover, but not both at once */
searchable-select .dropdown-item.ss-highlighted,
searchable-select:not(.ss-keyboard-nav) .dropdown-item:hover {
    background-color: #495057;
    color: #fff;
}
searchable-select .dropdown-item.active.ss-highlighted,
searchable-select:not(.ss-keyboard-nav) .dropdown-item.active:hover {
    background-color: var(--theme-primary-active, #0a58ca);
    color: #fff;
}

/* ── Dropup: menu above input when insufficient space below ────────── */

/* Input: keep bottom corners rounded, flatten top corners (connects to menu above).
   White background ensures no bleed-through from the menu behind it. */
searchable-select .ss-wrapper.open.dropup .ss-input {
    border-radius: 0 0 var(--radius-sm, var(--bs-border-radius, 0.375rem))
        var(--radius-sm, var(--bs-border-radius, 0.375rem));
    border-color: var(--theme-focus-border, #86b7fe);
    background-color: #fff;
    z-index: 3;
}

/* Menu: position above, top corners rounded, bottom corners flat.
   Bottom border stays visible as the divider line between menu and input.
   Remove box-shadow — the unified focus ring provides the glow. */
[data-theme] searchable-select .ss-wrapper.open.dropup .ss-menu,
searchable-select .ss-wrapper.open.dropup .ss-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: -1px;
    border-radius: var(--radius-md, var(--bs-border-radius, 0.375rem))
        var(--radius-md, var(--bs-border-radius, 0.375rem)) 0 0;
    border-color: var(--theme-focus-border, #86b7fe);
    box-shadow: none;
}

/* Focus ring: anchor to bottom, top corners match menu, bottom match input */
searchable-select .ss-wrapper.open.dropup::after {
    top: auto;
    bottom: 0;
    border-top-left-radius: var(--radius-md, var(--bs-border-radius, 0.375rem));
    border-top-right-radius: var(--radius-md, var(--bs-border-radius, 0.375rem));
    border-bottom-left-radius: var(--radius-sm, var(--bs-border-radius, 0.375rem));
    border-bottom-right-radius: var(--radius-sm, var(--bs-border-radius, 0.375rem));
}

/* Readonly state — match theme's readonly form-control style (dashed border, muted text) */
searchable-select[readonly] .ss-input,
[data-theme] searchable-select[readonly] .ss-input {
    background-color: #fff;
    border-style: dashed;
    color: var(--bs-secondary-color, #6c757d);
    cursor: default;
}
searchable-select[readonly] .ss-clear {
    display: none;
}

/* Disabled state — match theme's disabled form-control style */
searchable-select[disabled] .ss-input {
    background-color: var(--theme-surface-sunken, var(--bs-secondary-bg, #e9ecef));
    border-color: transparent;
    color: var(--bs-secondary-color, #6c757d);
    cursor: default;
}

/* Pad input to avoid text under clear button */
searchable-select .ss-input.has-clear {
    padding-right: 2rem;
}