/* static/css/admin_custom.css */

/* 1. Força o container principal a ocupar 100% da largura */
.selector {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    float: none !important; /* Remove flutuações antigas */
}

/* 2. Estiliza as duas caixas (Disponíveis e Escolhidos) */
.selector .selector-available, 
.selector .selector-chosen {
    width: 46% !important; /* Ocupa quase metade cada um */
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Aumenta a altura da área interna e do input de seleção */
.selector select {
    min-height: 400px !important; /* Altura forçada */
    width: 100% !important;
    overflow-y: auto !important;
}

/* 4. Centraliza e ajusta os botões de seta no meio */
.selector .selector-chooser {
    width: 6% !important;
    float: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 5. Garante que os títulos (ex: "Permissões disponíveis") fiquem visíveis */
.selector h2 {
    width: 100% !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
    text-align: center !important;
}