/*
 * detalhamento_busca_empenho.css — campo "Buscar empenho" do Detalhamento de Despesas e sua lista de sugestões.
 * Reaproveita .gl-search/.gl-search-input do gridlist.css (mesma pele do campo de busca da grade).
 */

/*
 * O cartão do período (.gl) tem overflow:hidden por causa dos cantos arredondados e cortaria a lista de
 * sugestões. Os filhos do formulário não têm fundo, então liberar o overflow aqui é seguro.
 */
.gl.gl-reference-form--busca {
    overflow: visible;
}

.gl-empenho-search {
    display: grid;
    gap: 6px;
    padding: 0 16px 16px;
}

.gl-empenho-search-label {
    margin: 0;
    color: var(--gl-ink-soft);
    font-size: 13px;
    font-weight: 600;
}

.gl-empenho-search-box {
    position: relative;
}

.gl-empenho-search-box .gl-search {
    min-width: 0;
}

.gl-empenho-search-box .gl-search-input {
    padding-right: 40px;
}

.gl-empenho-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 28px;
    color: var(--gl-ink-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
}

.gl-empenho-search-clear:hover {
    background: var(--gl-alems-050);
}

.gl-empenho-search-clear:focus-visible {
    outline: 3px solid var(--gl-alems-100);
    outline-offset: 1px;
}

.gl-empenho-search-clear[hidden],
.gl-empenho-search-pop[hidden],
.gl-empenho-search-list[hidden],
.gl-empenho-search-empty[hidden],
.gl-empenho-search-foot[hidden] {
    display: none;
}

.gl-empenho-search-help {
    margin: 0;
    color: var(--gl-ink-soft);
    font-size: 12.5px;
}

/* A lista abre abaixo do campo (nunca por cima do texto digitado). */
.gl-empenho-search-pop {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 30;
    overflow: hidden;
    background: var(--gl-surface);
    border: 1px solid var(--gl-alems);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 30, 45, 0.22);
}

.gl-empenho-search-list {
    max-height: min(56vh, 520px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.gl-empenho-search-item {
    display: grid;
    gap: 3px;
    padding: 10px 14px;
    color: var(--gl-ink);
    font-size: 13.5px;
    cursor: pointer;
    border-bottom: 1px solid var(--gl-border);
}

.gl-empenho-search-item:last-child {
    border-bottom: 0;
}

.gl-empenho-search-item:hover,
.gl-empenho-search-item[aria-selected="true"] {
    background: var(--gl-alems-050);
}

/* Primeira linha: cada informação leva o próprio nome na frente; todos os valores com o mesmo estilo. */
.gl-empenho-search-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    align-items: baseline;
}

.gl-empenho-search-line > span {
    font-size: 13.5px;
    font-weight: 400;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gl-empenho-search-fav {
    overflow-wrap: anywhere;
}

.gl-empenho-search-desp,
.gl-empenho-search-obj {
    color: var(--gl-ink-soft);
    overflow-wrap: anywhere;
}

.gl-empenho-search-obj {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gl-empenho-search-lab {
    margin-right: 4px;
    color: var(--gl-alems-600);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.gl-empenho-search-item mark {
    padding: 0 1px;
    color: inherit;
    background: #ffe58a;
    border-radius: 2px;
}

.gl-empenho-search-empty {
    margin: 0;
    padding: 16px 14px;
    color: var(--gl-ink-soft);
}

.gl-empenho-search-foot {
    margin: 0;
    padding: 8px 14px;
    color: var(--gl-ink-soft);
    font-size: 12.5px;
    background: var(--gl-surface-2);
    border-top: 1px solid var(--gl-border);
}

/* ---------- Alto contraste institucional ---------- */
body.contrast .gl-empenho-search-label,
body.contrast .gl-empenho-search-help,
body.contrast .gl-empenho-search-empty,
body.contrast .gl-empenho-search-foot,
body.contrast .gl-empenho-search-desp,
body.contrast .gl-empenho-search-obj,
body.contrast .gl-empenho-search-lab {
    color: #fff !important;
}

body.contrast .gl-empenho-search-pop,
body.contrast .gl-empenho-search-item,
body.contrast .gl-empenho-search-foot {
    color: #fff !important;
    background: #000 !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

body.contrast .gl-empenho-search-item[aria-selected="true"] {
    outline: 3px solid #ff0;
    outline-offset: -3px;
}

body.contrast .gl-empenho-search-item mark {
    color: #000 !important;
    background: #ff0 !important;
}

body.contrast .gl-empenho-search-clear {
    color: #fff !important;
    border: 2px solid #fff !important;
}