/* Container Principal */
.custom-multiselect {
    position: relative;
    width: 100%; /* Ou largura fixa desejada */
    font-family: sans-serif;
    user-select: none;
}

/* O "botão" que parece um select */
.multiselect-trigger {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid #ccc;
    border-radius: 0.475rem;
    background-color: #f5f8fa;
    color: #5e6278;
    appearance: none; /* Remove a seta padrão feia do navegador */
    width: 100%;

    /* --- 2. A MÁGICA DA SETA --- */
    /* Cria uma seta cinza (#5E6278) usando SVG direto no CSS */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6278' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;

    /* Padding diferente do input: precisa de mais espaço na direita para a seta não ficar em cima do texto */
    padding: 0.775rem 3rem 0.775rem 1rem;

    cursor: pointer; /* Indica que é clicável */
    transition:
        border-color 0.2s,
        background-color 0.2s,
        box-shadow 0.2s;
}

.multiselect-trigger:hover {
    border-color: #888;
}

.multiselect-label {
    font-size: 14px;
    font-weight: 500;
    font-family: Poppins, sans-serif;
    color: #A1A5B7;
}

.multiselect-arrow {
    font-size: 0.8em;
    color: #666;
}

/* O Dropdown (oculto por padrão) */
.multiselect-dropdown {
    display: none; /* JS vai alternar isso */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 0 0 4px 4px;
    margin-top: 2px;
}

/* Container do Select All (separado visualmente) */
.select-all-container {
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
}

/* Opções individuais */
.multiselect-option {
    padding: 8px 10px;
    cursor: pointer;
}

.multiselect-option:hover {
    background-color: #f1f1f1;
}

.multiselect-option label {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0; /* Reset bootstrap margin se houver */
}

.multiselect-option input[type="checkbox"] {
    margin-right: 10px;
}

/* Estado Desabilitado (Visual) */
.multiselect-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f5f5f5;
}

.multiselect-option.disabled label {
    cursor: not-allowed;
}

/* Scrollbar Bonitinha (Opcional) */
.multiselect-list::-webkit-scrollbar {
    width: 6px;
}
.multiselect-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

.option-text {
    font-size: 14px;
    font-weight: 400;
    font-family: Poppins, sans-serif;
    color: #7e8299;
}

/* Remove o estilo nativo e cria a base da caixa */
.item-checkbox, .select-all-checkbox {
    /* 1. Remove o estilo padrão do navegador */
    -webkit-appearance: none;
    appearance: none;
    
    /* 2. Define o tamanho (obrigatório agora que removemos o padrão) */
    width: 20px;
    height: 20px;
    min-width: 20px; /* Garante que não encolha */
    
    /* 3. Estilo desejado */
    background-color: #F3F6F9;
    border: 1px solid #E4E6EF; /* Sugiro uma borda sutil para não sumir no fundo branco */
    border-radius: 4px;
    cursor: pointer;
    
    /* Centraliza o "check" que vamos criar */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.2s ease;
}

/* Estado: Quando o mouse passa por cima */
.item-checkbox:hover, .select-all-checkbox:hover {
    background-color: #E4E6EF;
}

/* Estado: Selecionado (Checked) */
.item-checkbox:checked, .select-all-checkbox:checked {
    background-color: #009EF7; /* Cor de destaque (Azul padrão de temas admin) */
    border-color: #009EF7;
}


/* Estado: Desabilitado (Visual cinza) */
.item-checkbox:disabled, .select-all-checkbox:disabled {
    background-color: #ddd;
    border-color: #ccc;
    cursor: not-allowed;
}

/* Estado Desabilitado do Componente Inteiro */
.custom-multiselect.component-disabled {
    pointer-events: none; /* Impede cliques */
    opacity: 0.6; /* Visual "apagado" */
}

.custom-multiselect.component-disabled .multiselect-trigger {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* Indicador de Carregamento (Loading) */
.multiselect-trigger.loading .multiselect-arrow {
    display: none;
}
.multiselect-trigger.loading::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}