/* ==========================================================================
 * dropdown.css — o desenho do dropdown do Monkey HvH (06/10/2026)
 * ==========================================================================
 *
 * Par do dropdown.js desta pasta. O select fechado continua com o tamanho, o
 * fundo e a borda que a página dá a ele; daqui sai só a setinha (a mesma em
 * todo lugar) e a lista que abre.
 *
 * O !important da setinha é de propósito: as páginas escrevem `background:`
 * em atalho no select, e o atalho apaga a imagem.
 */

select.dd-ativo {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b9e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
    background-size: 14px 14px !important;
    padding-right: 2.1rem !important;
    cursor: pointer;
    text-overflow: ellipsis;
}
select.dd-ativo.dd-aberto {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b9e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") !important;
}
select.dd-ativo:disabled { cursor: not-allowed; opacity: .6; }
select.dd-ativo::-ms-expand { display: none; }

/* ── A lista ─────────────────────────────────────────────────────────── */

.dd-lista {
    position: fixed;
    z-index: 2147483000;
    box-sizing: border-box;
    width: max-content;
    min-width: 140px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5px;
    background: var(--dd-fundo, #17171f);
    color: var(--dd-texto, #ececf1);
    border: 1px solid color-mix(in srgb, var(--dd-texto, #ececf1) 14%, transparent);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    line-height: 1.3;
    text-align: left;
    animation: ddEntra .12s ease-out;
    transform-origin: top center;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--dd-texto, #ececf1) 25%, transparent) transparent;
}
.dd-lista.acima { transform-origin: bottom center; }

@keyframes ddEntra {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.dd-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
}
.dd-item.realce { background: color-mix(in srgb, var(--dd-destaque, #f5a623) 14%, transparent); }
.dd-item[aria-selected="true"] { color: var(--dd-destaque, #f5a623); font-weight: 600; }

/* O certinho da opção escolhida, na cor do destaque. */
.dd-item[aria-selected="true"]::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.dd-item.desabilitada { opacity: .4; cursor: default; }
.dd-item.desabilitada.realce { background: none; }

.dd-grupo {
    padding: .55rem .65rem .3rem;
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .55;
    cursor: default;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .dd-lista { animation: none; }
}