/* ==========================================================================
   Combobox com busca (static/js/components/combobox-busca.js)

   O campo visivel e um `.form-control` comum -- a folha de estilo de cada tela
   continua mandando na borda, no fundo e no foco, e o componente nao precisa
   ser re-estilizado tela a tela. O que esta aqui e so o que o `.form-control`
   nao tem: a lista flutuante, a seta, o botao de limpar.
   ========================================================================== */

.combo {
    position: relative;
}

.combo-campo {
    position: relative;
    display: block;
}

/* Espaco a direita para a seta e para o "x" -- sem isto o texto de uma opcao
   longa passa por baixo dos dois. */
.combo-busca {
    padding-right: 52px !important;
    cursor: pointer;
    text-overflow: ellipsis;
}

.combo-busca:focus {
    cursor: text;
}

.combo-busca:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.combo-seta {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #8a94a6;
    pointer-events: none;   /* a seta e enfeite: o clique e do campo */
}

.combo-limpar {
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e6e9ef;
    color: #55607a;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.combo-limpar:hover {
    background: #d6dbe4;
    color: #1f2a44;
}

/* Campo com filtro ativo fica visivelmente diferente do campo vazio: numa
   grade de quatro filtros, "o que eu ja escolhi" tem de se ver de relance. */
.combo-preenchido .combo-busca {
    border-color: var(--primary-color, #2c7be5);
    background: #fff;
    font-weight: 500;
}

.combo-lista {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.combo-lista li {
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-lista li:hover,
.combo-lista li.combo-item-ativo {
    background: #eef4fd;
}

.combo-item-atual {
    font-weight: 600;
    color: var(--primary-color, #2c7be5);
}

/* Aviso ("nenhuma opcao com ...", "+N refine a busca") nao e escolhivel. */
.combo-aviso,
.combo-lista li.combo-aviso:hover {
    background: transparent;
    color: #8a94a6;
    font-style: italic;
    cursor: default;
}

/* ── Dark mode ───────────────────────────────────────────────────────────────
   O campo visivel e um `.form-control` e ja acompanha o tema da tela. A LISTA
   nao: ela nasce aqui, com fundo e texto fixos, e por isso aparecia branca
   sobre tela escura desde que o componente existe. Nao e preferencia de
   estilo -- e texto quase ilegivel e um retangulo branco no meio do formulario.
   As cores seguem os tokens do tema quando a tela os define, e caem em valores
   proprios quando nao. */
html.dark .combo-lista {
    background: var(--rh-surface, #131d2b);
    border-color: var(--rh-border-strong, #334155);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
}

html.dark .combo-lista li { color: var(--rh-text, #edf2f7); }

html.dark .combo-lista li:hover,
html.dark .combo-lista li.combo-item-ativo { background: rgba(107, 168, 215, 0.16); }

html.dark .combo-limpar { background: #2a3648; color: #d8e0ea; }
html.dark .combo-limpar:hover { background: #3a485e; color: #ffffff; }

html.dark .combo-preenchido .combo-busca { background: var(--rh-field-bg, #0f1825); }

html.dark .combo-aviso,
html.dark .combo-lista li.combo-aviso:hover { color: var(--rh-subtle, #8ea0b5); }