.searchable-dropdown,
    .multiselect-filter {
        position: relative !important;
    }

    .searchable-dropdown-menu,
    .multiselect-dropdown {
        position: absolute !important;
        display: none !important;
        z-index: 99999 !important;
        width: 100%;
        background-color: white;
        border: 1px solid #e2e8f0;
        border-radius: 0.375rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        margin-top: 0.25rem;
        padding: 0.5rem;
        max-height: 250px;
        overflow-y: auto;
    }

    .searchable-dropdown-menu.is-open,
    .multiselect-dropdown.is-open {
        display: block !important;
    }

    
    /* O container que escurece o fundo */
    #modal-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
        height: 100vh !important;
        overflow: hidden !important; /* Impede que o fundo role */
    }

    /* O cartão branco do modal */
    .modal-content {
        display: flex !important;
        flex-direction: column !important;
        max-height: 90vh !important; /* Limita altura a 90% da tela */
        width: 100%;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        position: relative !important;
        overflow: hidden !important; /* Garante que nada saia das bordas arredondadas */
    }

    /* Cabeçalho e Rodapé FIXOS */
    .modal-header,
    .modal-footer {
        flex-shrink: 0 !important; /* Impede que encolham */
        background-color: white;
        z-index: 20;
        width: 100%;
    }
    
    .modal-footer {
        background-color: #f8fafc; /* Cor levemente diferente para destaque */
        border-top: 1px solid #e2e8f0;
    }

    /* Corpo do Modal (ONDE OCORRE A ROLAGEM) */
    div.modal-body {
        flex: 1 1 auto !important;   /* Ocupa todo o espaço disponível */
        overflow-y: auto !important; /* Rolagem vertical APENAS aqui */
        overflow-x: visible !important; /* Permite que dropdowns laterais apareçam se couberem */
        padding: 1.5rem !important;
        min-height: 0 !important;    /* Fix crítico para Firefox/Flexbox */
    }

    /* --- 3. CORREÇÃO DAS TABELAS (BARRA HORIZONTAL) --- */
    
    /* Container da tabela */
    .table-container, 
    .overflow-x-auto {
        width: 100%;
        overflow-x: auto !important; /* Força barra horizontal se necessário */
        -webkit-overflow-scrolling: touch;
        display: block; /* Garante comportamento de bloco */
    }

    /* Força a tabela a não quebrar linha, gerando o scroll horizontal */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    /* Células da tabela */
    th, td {
        white-space: nowrap !important; /* O segredo: impede texto de quebrar */
        padding: 0.75rem 1rem;
        vertical-align: middle;
    }

    /* Permite quebra de linha apenas onde explicitamente desejado (ex: descrições longas) */
    .whitespace-normal {
        white-space: normal !important;
        min-width: 200px; /* Tamanho mínimo para leitura */
    }

    /* Scrollbar bonita para o modal e tabelas */
    div.modal-body::-webkit-scrollbar,
    .table-container::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    div.modal-body::-webkit-scrollbar-track,
    .table-container::-webkit-scrollbar-track {
        background: #f1f5f9; 
    }
    div.modal-body::-webkit-scrollbar-thumb,
    .table-container::-webkit-scrollbar-thumb {
        background: #cbd5e1; 
        border-radius: 4px;
    }
    div.modal-body::-webkit-scrollbar-thumb:hover,
    .table-container::-webkit-scrollbar-thumb:hover {
        background: #94a3b8; 
    }
