/* Frontend dropdowns share the incident information filter appearance. */
.ui-site .ui-select { position: relative; width: 100%; min-width: 0; }
.ui-site .ui-select > select {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    opacity: 0;
    clip-path: inset(50%);
    pointer-events: none;
}
.ui-site .layui-form-select { min-width: 0; }
.ui-site .layui-form-select .layui-select-title .layui-input,
.ui-site .IndexSelect .layui-form-select .layui-select-title .layui-input {
    width: 100%;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 30px 0 12px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    color: var(--color-text) !important;
    background: var(--color-surface) !important;
    font-size: 13px !important;
    cursor: pointer;
}
.ui-site .layui-form-select .layui-input::placeholder { color: var(--color-text-disabled) !important; opacity: 1; }
.ui-site .layui-form-select .layui-input:focus,
.ui-site .layui-form-selected .layui-select-title .layui-input {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.ui-site .layui-form-select .layui-edge { right: 12px; border-top-color: var(--color-text-secondary); }
.ui-site .layui-form-select .layui-select-disabled .layui-input { cursor: not-allowed; }
.ui-site .layui-form-select dl,
.ui-site xm-select .xm-body {
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-card);
}
.ui-site .layui-form-select dl { top: 42px; min-width: 100%; padding: 5px 0; }
.ui-site .layui-form-selectup dl { top: auto; bottom: 42px; }
.ui-site .layui-form-select dl dd,
.ui-site xm-select .xm-body .xm-option-content { font-size: 13px !important; }
.ui-site .layui-form-select dl dd { line-height: 34px; color: var(--color-text); }
.ui-site .layui-form-select dl dd:hover,
.ui-site .layui-form-select dl dd.layui-select-tips:hover {
    background: var(--color-primary-soft) !important;
    color: var(--color-heading) !important;
}
.ui-site .layui-form-select dl dd.layui-this,
.ui-site .layui-form-select dl dd.layui-this:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}
.ui-site xm-select {
    width: 100%;
    min-height: 38px !important;
    height: auto !important;
    line-height: 20px !important;
    padding: 2px 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    color: var(--color-text);
    font-size: 13px !important;
    background: var(--color-surface) !important;
    transition: border-color .2s, box-shadow .2s;
}
.ui-site xm-select:focus-within,
.ui-site xm-select:has(.xm-body:not(.dis)) {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.ui-site xm-select :is(.xm-input, .xm-label, .xm-label-block, .xm-tips, .label-content) { font-size: 13px !important; }
.ui-site xm-select .xm-input {
    height: auto !important;
    min-height: 32px !important;
    line-height: 20px !important;
    padding: 2px 10px !important;
    border: 0 !important;
    box-shadow: none !important;
}
.ui-site xm-select .xm-label { margin: 2px 0 !important; }
.ui-site xm-select .xm-label-block {
    max-width: 100% !important;
    height: auto !important;
    margin: 2px 5px 2px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 22px !important;
}
.ui-site xm-select .xm-tips { color: var(--color-text-disabled) !important; }
.ui-site xm-select .xm-body .xm-option { min-height: 34px; }
.ui-site .stat-filter-bar .ui-select { flex: 1 1 130px; width: 140px; }
.ui-site .inc-year .ui-select { width: 112px; }
.ui-site .inc-sort .ui-select { width: 140px; }
.ui-site .inc-year::after { display: none; }

/* Search scope menus use the same option states as the form dropdowns. */
.ui-site :is(header, .ui-hero-search) .head-scope-menu {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.ui-site :is(header, .ui-hero-search) .head-scope-option[aria-selected="true"],
.ui-site :is(header, .ui-hero-search) .head-scope-option[aria-selected="true"]:hover {
    background: var(--color-primary);
    color: #fff;
}

@media (max-width: 800px) {
    .ui-site .layui-form-select .layui-select-title .layui-input,
    .ui-site .IndexSelect .layui-form-select .layui-select-title .layui-input,
    .ui-site xm-select { min-height: 44px !important; }
    .ui-site .layui-form-select dl { top: 48px; }
    .ui-site .layui-form-selectup dl { top: auto; bottom: 48px; }
    .ui-site .inc-sort .ui-select { width: 132px; }
}