/* XXX globale Search-Komponente – autoritativ für Geometrie, Fokus, Menü und Lösch-X. */

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--xxx-ui-control-h, 40px) !important;
    align-items: center !important;
    overflow: visible !important;
    border: 1px solid var(--xxx-ui-line-strong, #375777) !important;
    border-radius: 0 !important;
    background: var(--xxx-ui-surface-deep, #0b1d2f) !important;
    box-shadow: none !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search:focus-within {
    border-color: var(--xxx-ui-cyan, #4fd1c5) !important;
    box-shadow: 0 0 0 1px rgba(79, 209, 197, .34) !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search > :is(
    #global-target-player,
    #db-search,
    #map-search,
    #overall-search,
    input.xxx-search__input,
    input[data-xxx-search-input]
) {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 43px 0 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--xxx-ui-text, #dce8f7) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search.xxx-search--has-icon > :is(
    #global-target-player,
    #db-search,
    #map-search,
    #overall-search,
    input.xxx-search__input,
    input[data-xxx-search-input]
) {
    padding-left: 36px !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search > :is(
    #global-target-player,
    #db-search,
    #map-search,
    #overall-search,
    input.xxx-search__input,
    input[data-xxx-search-input]
)::placeholder {
    color: var(--xxx-ui-dim, #71839c) !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search .xxx-search__icon {
    position: absolute !important;
    left: 11px !important;
    top: 50% !important;
    z-index: 3 !important;
    width: 14px !important;
    height: 14px !important;
    transform: translateY(-50%) !important;
    color: var(--xxx-ui-cyan, #4fd1c5) !important;
    pointer-events: none !important;
}

/* Hohe, aber bewusst eng begrenzte Spezifität verdrängt die alten seitenbezogenen Clear-Regeln. */
body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
) {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    z-index: 35 !important;
    display: grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--xxx-ui-dim, #71839c) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
)::before,
body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
)::after {
    content: "" !important;
    position: absolute !important;
    width: 12px !important;
    height: 1.5px !important;
    background: currentColor !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
)::before { transform: rotate(45deg) !important; }

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
)::after { transform: rotate(-45deg) !important; }

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
) :is(svg, i) { visibility: hidden !important; }

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
):hover {
    border-color: rgba(251, 113, 133, .46) !important;
    background: var(--xxx-ui-red-soft, rgba(251, 113, 133, .11)) !important;
    color: #ff9cad !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search :is(
    #global-target-clear,
    #db-search-clear,
    #map-search-clear,
    #overall-search-clear,
    [data-xxx-search-clear],
    [data-profile-action="clear-player"],
    .xxx-search__clear
)[hidden],
body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search .xxx-search__clear--hidden {
    display: none !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search__menu {
    border: 1px solid var(--xxx-ui-line-strong, #375777) !important;
    border-radius: 0 !important;
    background: #10243a !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .30) !important;
    color: var(--xxx-ui-text, #dce8f7) !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) [data-xxx-search] > .xxx-search__menu {
    position: absolute !important;
    left: -1px !important;
    right: -1px !important;
    top: calc(100% + 6px) !important;
    z-index: 1000 !important;
    max-height: 18rem !important;
    overflow-y: auto !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search__menu :is(button, .select-item) {
    border-radius: 0 !important;
    color: #c9d6e8 !important;
}

body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search__menu :is(button, .select-item):hover,
body :is(#xxx-main-header, #view-container, #global-sentinel-container) .xxx-search__menu :is(button, .select-item)[data-active="1"] {
    background: var(--xxx-ui-cyan-soft, rgba(79, 209, 197, .12)) !important;
    color: var(--xxx-ui-cyan-strong, #7defd9) !important;
}