/* 
* Dropdown customizado para melhorar a visualização dos clientes
* Arquivo: dropdown_styles.css
*/

/* Aumenta a largura e melhora o estilo do dropdown de clientes */
#dropdown-clientes .Select-control {
    min-height: 38px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#dropdown-clientes .Select-placeholder,
#dropdown-clientes .Select-value {
    padding: 2px 12px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
}

#dropdown-clientes .Select-menu-outer {
    width: auto !important;
    min-width: 350px !important;
    max-width: none !important;
    z-index: 999999 !important;
    position: fixed !important; /* Alterado de absolute para fixed */
    margin-top: 2px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; /* Sombra mais destacada */
    overflow-y: auto !important;
    max-height: 60vh !important;
    /* Removidos top e left para permitir posicionamento dinamico */
}

/* Garantir que o dropdown fique por cima de todos os elementos */
.client-filter-container {
    position: relative !important;
    z-index: 1051 !important; /* Aumentado */
    display: inline-block !important;
}

.dash-dropdown {
    z-index: 1051 !important; /* Aumentado */
    position: relative !important;
}

#dropdown-clientes .Select-menu {
    max-height: 60vh !important;
    overflow-y: auto !important;
}

/* Melhora o estilo dos itens do dropdown */
#dropdown-clientes .Select-option {
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    overflow: visible !important;
    min-height: 35px !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Destaque para o item selecionado */
#dropdown-clientes .Select-option.is-selected {
    font-weight: bold !important;
    background-color: #e8f0fe !important;
}

/* Destaque para hover */
#dropdown-clientes .Select-option:hover {
    background-color: #f8f9fa !important;
}

/* Ajuste para o tema escuro */
.theme-dark #dropdown-clientes .Select-option.is-selected,
.dark-mode #dropdown-clientes .Select-option.is-selected {
    background-color: #444 !important;
}

.theme-dark #dropdown-clientes .Select-option:hover,
.dark-mode #dropdown-clientes .Select-option:hover {
    background-color: #333 !important;
}

/* Forçar a posição do dropdown acima de todos os elementos */
.dropdown-modern,
#dropdown-clientes,
.dash-dropdown {
    position: relative !important;
    z-index: 99999 !important;
}

/* Adicionar container com alta prioridade */
.client-filter-container {
    position: static !important; /* Mudado de relative para static */
    z-index: 99999 !important;
    transform: none !important; /* Importante para evitar problema de novo contexto de empilhamento */
}

/* Aumentar ainda mais o z-index do dropdown para ficar acima dos gráficos */
#dropdown-clientes .VirtualizedSelectFocusedOption,
#dropdown-clientes .VirtualizedSelectOption,
.dash-dropdown .VirtualizedSelectOption {
    z-index: 10002 !important;
}

/* Garantir que o menu apareça por cima de outros elementos incluindo gráficos */
.Select-menu-outer {
    z-index: 10001 !important;
}

/* Forçar visibilidade para o dropdown de clientes */
#dropdown-clientes .Select-menu-outer {
    z-index: 10002 !important;
    position: absolute !important;
    display: block !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Assegurar que o overlay do dropdown fique por cima de tudo */
.dash-dropdown .Select.is-open .Select-control {
    z-index: 10002 !important;
    position: relative !important;
}

/* Garantir que o menu dropdown fique visível acima de todos elementos */
.Select.is-open .Select-menu-outer,
.Select-menu-outer,
#dropdown-clientes .Select-menu-outer {
    z-index: 999999 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    position: absolute !important;
    display: block !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
}