/* Header global search — GitLab-like combobox inside panel chrome. */

.admin-interface:not(.login):not(.popup) #header {
    overflow: visible !important;
}

.admin-interface #user-tools .welcome-text,
.admin-interface #user-tools a.welcome-text,
.admin-interface #user-tools a.welcome-text:link,
.admin-interface #user-tools a.welcome-text:visited {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    order: 0;
    box-sizing: border-box;
    margin: 0 8px 0 0;
    padding: 0 8px;
    height: 36px;
    color: #344054 !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 8px;
    background: transparent;
    box-shadow: none !important;
    cursor: pointer;
}

.admin-interface #user-tools .welcome-text__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #344054;
}

.admin-interface #user-tools .welcome-text__name {
    font-weight: 400;
    text-transform: none !important;
}

/* Stretch user-tools so search can sit in the true gap between logo and icons. */
.admin-interface:not(.login):not(.popup) #header #user-tools {
    justify-self: stretch !important;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.admin-interface:not(.login):not(.popup) #header .panel-global-search {
    position: relative;
    z-index: 30;
    flex: 1 1 480px;
    width: 100%;
    max-width: 480px;
    min-width: 180px;
    margin-left: auto;
    margin-right: auto;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.panel-global-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 12px;
    border: 1px solid #ced2de;
    border-radius: 8px;
    background: #f7f8fa;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel-global-search.is-open .panel-global-search__field,
.panel-global-search__input:focus {
    outline: none;
}

.panel-global-search.is-open .panel-global-search__field,
.panel-global-search__field:focus-within {
    background: #fff;
    border-color: #2a5fad;
    box-shadow: 0 0 0 1px #2a5fad, 0 0 0 4px rgba(42, 95, 173, 0.18);
}

.panel-global-search__magnifier {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: #667085;
    flex: 0 0 16px;
}

.panel-global-search__magnifier svg {
    width: 16px;
    height: 16px;
}

.panel-global-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1d2939;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
    line-height: 34px;
}

.panel-global-search__input::placeholder {
    color: #98a2b3;
    text-transform: none;
}

.panel-global-search__input::-webkit-search-decoration,
.panel-global-search__input::-webkit-search-cancel-button,
.panel-global-search__input::-webkit-search-results-button,
.panel-global-search__input::-webkit-search-results-decoration {
    display: none;
}

.panel-global-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #667085;
    cursor: pointer;
    flex: 0 0 22px;
}

.panel-global-search__clear[hidden] {
    display: none !important;
}

.panel-global-search__clear:hover {
    background: #eef0f4;
    color: #344054;
}

.panel-global-search__clear svg {
    width: 14px;
    height: 14px;
}

.panel-global-search__dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    max-height: min(440px, calc(100vh - var(--panel-header-height, 64px) - 24px));
    overflow: auto;
    border: 1px solid #e3e6ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(16, 24, 40, 0.06);
    /* Inset like GitLab listbox: highlight is a rounded row, not edge-to-edge. */
    padding: 6px;
    text-align: left;
}

.panel-global-search__dropdown[hidden] {
    display: none !important;
}

.panel-global-search__group {
    display: block;
    width: 100%;
}

.panel-global-search__group + .panel-global-search__group {
    border-top: 1px solid #eef0f4;
    margin-top: 4px;
    padding-top: 4px;
}

.panel-global-search__group-label {
    display: block;
    padding: 6px 10px 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: left;
}

.panel-global-search__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1d2939;
    text-align: left;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.panel-global-search__option:hover,
.panel-global-search__option.is-active {
    background: #e8f2fa;
}

/*
 * Search lives inside #user-tools. Django/admin-interface style
 * `#user-tools a { border-bottom: 1px }` and `:hover { border-bottom: 0 }`
 * which shifts each result by 1px. Keep box size stable.
 * Also force a block-level row so the GitLab-style pill fills the item.
 */
.admin-interface #header #user-tools .panel-global-search__dropdown,
.admin-interface #header #user-tools .panel-global-search__group,
.admin-interface #header #user-tools .panel-global-search__group-label {
    text-align: left;
}

.admin-interface #header #user-tools a.panel-global-search__option,
.admin-interface #header #user-tools a.panel-global-search__option:link,
.admin-interface #header #user-tools a.panel-global-search__option:visited,
.admin-interface #header #user-tools a.panel-global-search__option:hover,
.admin-interface #header #user-tools a.panel-global-search__option:focus,
.admin-interface #header #user-tools a.panel-global-search__option:active {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 8px;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 10px;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none;
    outline: none;
    color: #1d2939;
}

.panel-global-search__option .is-match {
    font-weight: 700;
    color: #2a5fad;
}

.panel-global-search__icon,
.panel-global-search__avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f6;
    color: #344054;
}

.panel-global-search__icon--recent {
    color: #2a5fad;
}

.panel-global-search__icon svg {
    width: 16px;
    height: 16px;
}

.panel-global-search__avatar {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.panel-global-search__avatar.c0 { background: #2a5fad; }
.panel-global-search__avatar.c1 { background: #0f9d77; }
.panel-global-search__avatar.c2 { background: #7a5af8; }
.panel-global-search__avatar.c3 { background: #dc6803; }
.panel-global-search__avatar.c4 { background: #d92d20; }
.panel-global-search__avatar.c5 { background: #1570ef; }
.panel-global-search__avatar.c6 { background: #875bf7; }
.panel-global-search__avatar.c7 { background: #107569; }

.panel-global-search__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.panel-global-search__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1d2939;
}

.panel-global-search__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #667085;
    font-size: 12px;
    font-weight: 400;
}

.panel-global-search__empty,
.panel-global-search__status {
    padding: 14px 16px;
    color: #667085;
    font-size: 13px;
}

html.panel-theme-dark .admin-interface #user-tools .welcome-text,
html.panel-theme-dark .admin-interface #user-tools .welcome-text__icon,
html.panel-theme-dark .admin-interface #user-tools .welcome-text__name {
    color: var(--panel-dark-text, #e8e8ee) !important;
}

html.panel-theme-dark .panel-global-search__field {
    background: #1c1c24;
    border-color: #3a3a48;
}

html.panel-theme-dark .panel-global-search.is-open .panel-global-search__field,
html.panel-theme-dark .panel-global-search__field:focus-within {
    background: #16161c;
    border-color: #6b8fc9;
    box-shadow: 0 0 0 1px #6b8fc9, 0 0 0 4px rgba(107, 143, 201, 0.28);
}

html.panel-theme-dark .panel-global-search__magnifier,
html.panel-theme-dark .panel-global-search__clear {
    color: #9aa3b2;
}

html.panel-theme-dark .panel-global-search__input {
    color: #f2f2f6;
}

html.panel-theme-dark .panel-global-search__input::placeholder {
    color: #8b93a7;
}

html.panel-theme-dark .panel-global-search__clear:hover {
    background: #2a2a36;
    color: #e8e8ee;
}

html.panel-theme-dark .panel-global-search__dropdown {
    background: #1c1c24;
    border-color: #3a3a48;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html.panel-theme-dark .panel-global-search__group + .panel-global-search__group {
    border-top-color: #2e2e3a;
}

html.panel-theme-dark .panel-global-search__group-label,
html.panel-theme-dark .panel-global-search__subtitle,
html.panel-theme-dark .panel-global-search__empty,
html.panel-theme-dark .panel-global-search__status {
    color: #9aa3b2;
}

html.panel-theme-dark .admin-interface #header #user-tools a.panel-global-search__option,
html.panel-theme-dark .admin-interface #header #user-tools a.panel-global-search__option:link,
html.panel-theme-dark .admin-interface #header #user-tools a.panel-global-search__option:visited,
html.panel-theme-dark .admin-interface #header #user-tools a.panel-global-search__option:hover,
html.panel-theme-dark .admin-interface #header #user-tools a.panel-global-search__option:focus,
html.panel-theme-dark .admin-interface #header #user-tools a.panel-global-search__option:active {
    color: #f2f2f6 !important;
    border-bottom: 0 !important;
}

html.panel-theme-dark .panel-global-search__option {
    color: #f2f2f6;
}

html.panel-theme-dark .panel-global-search__option:hover,
html.panel-theme-dark .panel-global-search__option.is-active {
    background: #2a3348;
}

html.panel-theme-dark .panel-global-search__option .is-match {
    color: #8eb4f0;
}

html.panel-theme-dark .panel-global-search__title {
    color: #f2f2f6;
}

html.panel-theme-dark .panel-global-search__icon {
    background: #2a2a36;
    color: #cfd3dc;
}

html.panel-theme-dark .panel-global-search__icon--recent {
    color: #8eb4f0;
}

@media (max-width: 1100px) {
    .admin-interface:not(.login):not(.popup) #header .panel-global-search {
        max-width: 360px;
        flex: 1 1 360px;
        min-width: 160px;
    }
}

@media (max-width: 768px) {
    .admin-interface:not(.login):not(.popup) #header .panel-global-search {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        width: 36px;
        max-width: 36px;
        min-width: 36px;
        flex: 0 0 36px;
        order: -1;
        margin-left: 0;
        margin-right: auto;
    }

    .admin-interface:not(.login):not(.popup) #header .panel-global-search:not(.is-open) .panel-global-search__input,
    .admin-interface:not(.login):not(.popup) #header .panel-global-search:not(.is-open) .panel-global-search__clear {
        display: none;
    }

    .admin-interface:not(.login):not(.popup) #header .panel-global-search:not(.is-open) .panel-global-search__field {
        width: 36px;
        padding: 0;
        justify-content: center;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .admin-interface:not(.login):not(.popup) #header .panel-global-search.is-open,
    .admin-interface:not(.login):not(.popup) #header .panel-global-search:focus-within {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 8px;
        width: auto;
        max-width: none;
        flex-basis: auto;
        min-width: 0;
        margin: 0;
        transform: none;
        z-index: 40;
    }
}