/* estabilização do preenchimento automático para o padrão bg-slate-100 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f1f5f9 inset !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* alinhamento da borda de foco com a classe focus:border-slate-400 */
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f1f5f9 inset !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* 1. neutralizar classes visuais clonadas do select nativo para o wrapper externo */
.ts-wrapper {
    width: 100% !important;
    display: block !important;
    padding: 0 !important; /* elimina o py-2 e px-3 duplicados na casca */
    background-color: transparent !important; /* elimina o bg-slate-100 da casca */
    border: none !important;
    box-shadow: none !important;
}

/* 2. estilizar o controle real onde o usuario visualiza e digita */
.ts-wrapper .ts-control {
    width: 100% !important; /* o controle externo ocupa toda a largura do container */
    background-color: #f1f5f9 !important; /* bg-slate-100 plano institucional */
    background-image: none !important; /* remove gradientes nativos do plugin */
    border: 1px solid transparent !important; /* design flat sem borda inicial */
    border-radius: 0.375rem !important; /* rounded-md */
    padding: 0.5rem 2.5rem 0.5rem 0.75rem !important; /* py-2 pl-3 pr-10 */
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important; /* padroniza a altura com os demais inputs */
    box-sizing: border-box !important;
    
    /* padronizacao com text-base e text-slate-600 do body */
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    color: #475569 !important; 
}

/* 3. ajustar o input interno para herdar a fonte sem quebrar a largura dinamica do plugin */
.ts-wrapper .ts-control input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    
    /* herda a tipografia institucional */
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    color: #475569 !important; 
}

/* 4. estado de foco integrado ao padrao institucional blue-800 */
.ts-wrapper.focus .ts-control {
    border-color: #1e40af !important; /* focus:border-blue-800 institucional */
    background-color: #f1f5f9 !important;
}

/* 5. posicionamento e design da seta lateral */
.ts-wrapper.single .ts-control::after {
    right: 1rem !important; /* afasta a seta da borda com segurança */
    border-color: #64748b transparent transparent transparent !important; /* seta em slate-500 */
    border-width: 5px 4px 0 4px !important;
}

/* 6. rotacionar a seta quando o menu estiver aberto */
.ts-wrapper.single.input-active .ts-control::after {
    border-color: transparent transparent #64748b transparent !important;
}

/* 7. alinhamento fluido e responsivo da caixa suspensa de opcoes */
.ts-dropdown {
    width: 100% !important; /* força a caixa a acompanhar a largura exata da tela */
    min-width: 100% !important;
    border: 1px solid #cbd5e1 !important; /* border-slate-200 */
    border-radius: 0.375rem !important;
    box-shadow: none !important; /* remove a sombra para manter o visual flat puro */
    background-color: #ffffff !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
}

/* 8. listagem de itens internos do dropdown */
.ts-dropdown .option,
.ts-dropdown .no-results {
    padding: 0.5rem 0.75rem !important;
    
    /* padronizacao com text-base e text-slate-600 das opcoes */
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    color: #475569 !important;
}

/* 9. item selecionado ou ativo via mouse/teclado */
.ts-dropdown .active {
    background-color: #e2e8f0 !important; /* bg-slate-200 */
    color: #0f172a !important; /* text-slate-900 para dar realce ao item ativo */
}