.filter-container {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.filter-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #495057;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-filter {
    background-color: var(--accent-color);
    color: white;
    border: none;
}

/* Efeito Bottom Sheet Absoluto */
.modal-filter-bottom {
    padding-right: 0 !important;
    /* Remove o ajuste de scrollbar do bootstrap */
}

/* Efeito Bottom Sheet para o Modal de Filtro */
.modal-filter-bottom .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* Remove qualquer centralização do Bootstrap */
    top: auto !important;
    transform: translateY(100%) !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 1060;
    /* Acima do backdrop padrão */
}

/* Quando o modal abre, ele sobe */
.modal-filter-bottom.show .modal-dialog {
    transform: translateY(0) !important;
}

.modal-filter-bottom .modal-content {
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    box-shadow: 0 -15px 35px rgba(0, 0, 0, 0.2);
    width: 100% !important;
    /* Altura mínima para não ficar "esmagado" */
    min-height: auto !important;
}

/* Ajuste para não colidir com o menu lateral se ele estiver aberto */
body:not(.sidebar-collapsed) .modal-filter-bottom .modal-dialog {
    padding-left: 260px !important;
    /* Ajuste para o seu menu lateral aberto */
}

/* Se a sidebar estiver fechada, o padding deve ser o da sidebar reduzida */
body.sidebar-collapsed .modal-filter-bottom .modal-dialog {
    padding-left: 70px !important;
    /* Ajuste para o seu menu lateral fechado */
}

.modal-filter-bottom .modal-body .d-flex {
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
}

/* Deixa os inputs do filtro alinhados em linha (espalhados) */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.filter-item {
    flex: 1;
    min-width: 200px;
}